@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;0,700;0,800;1,600&display=swap');


/* variables */


:root {
  --clr-primary: #7380ec;
  --clr-danger: #ff7782;
  --clr-white: #fff;
  --clr-info-dark: #7d8da1;
  --clr-info-light: #dce1eb;
  --clr-dark: #363949;
  --clr-dark-variant: #677483;
  --clr-color-background: #f6f6f9;

  --card-border-radius: 2rem;
  --border-radius-1: 0.4rem;
  --border-radius-2: 0.8rem;
  --border-radius-3: 1.2rem;

  --card-padding: 1.8rem;
  --padding-1: 1.2rem;
  --box-shadow: 0 2rem 3rem var(--clr-light);

}

/* dark theme */
.dark-theme-variables {
  --clr-color-background: #181a1e;
  --clr-white: #202528;
  --clr-light: rgba(0, 0, 0, 0.4);
  --clr-dark: #edeffd;
  --clr-dark-variant: #677483;
  --box-shadow: 0 2rem 3rem var(--clr-light)
}


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  text-decoration: none;
  list-style: none;
  appearance: none;
}

html {
  font-size: 62.5%;
}

body{
   width: 100vw;
   height: 100vh;
   user-select: none;
   overflow-x: hidden;
   background: var(--clr-color-background);
   font-family: 'Poppins', sans-serif;
   /*font-size: 1.5rem !important;*/
}

/* GLobal container */
.wa-container  {
  display: grid;
  width: 96%;
  gap: 1.8rem;
  /*grid-template-columns: 28rem auto 30rem; /* Default 3 columns */
  margin: 0 auto;
}

.wa-container.three-columns {
  grid-template-columns: 40rem auto 30rem;
} /* 3 columns: sidebar, main content, right side */


.wa-container.two-columns{
  grid-template-columns: 40rem auto; /* 2 columns */
}

a{
  color: var(--clr-dark);
}

a:hover{
    color:#ff6064;
}

h1{
  font-weight: 800;
  font-size: 2.8rem;
}
h2{
  font-size: 1.4rem;
}
h3{
  font-size: 0.87;
}

small{
  font-size: 0.75rem;
}

.profile-photo img{
  width: 2.8rem;
  height: 2.8rem;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 5px;
}

p{
  color: var(--clr-dark-variant);
  font-size: 1.3rem;
}
b{
  color: var(--clr-dark);
}
.primary {
  color: var(--clr-primary);
}

.success {
  color: var(--clr-success);
}

.product {
  color: var(--clr-danger);
}

.warning {
  color: var(--clr-warnig);
}


/*************************** aside ********************************/
 aside{
  height: auto;
  background-color: #fff;
  padding: 3rem;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 }

 aside .top{
  background: var(--clr-white);
  margin-top: 1.4rem;
 }

 aside .logo{
   display: flex;
   justify-content: center;
 }

 aside .logo img{
   width: 20rem;
   height: auto;
 }

 aside .top div.close span{
   display: none;
 }
 /* ===================
 Sidebar

 aside .sidebar{
  background: var(--clr-white);
  display: flex;
  flex-direction: column;
  height: 86vh;
  position: relative;
  top: 1rem;
  gap:1rem;
 }

 aside h3{
  font-weight: 500;
 }

 aside .sidebar a{
  display: flex;
  color: var(--clr-info-dark);
  margin-left: 2rem;
  gap: 1rem;
  align-items: center;
  height: 3.3rem;
  transition: all .1s ease;
 
 }

 aside .sidebar a span{
  font-size: 1.6rem;
  transition: all .3s ease-in-out;
  
 }

 aside .sidebar a:last-child{
  position: absolute;
  bottom: 1rem; 
  width: 100%;
 }

 
 aside .sidebar a:hover span{
  margin-left: 1rem;
 }

 aside .sidebar a span.msg_count{
   background-color: var(--clr-danger);
   color: var(--clr-white);
   padding: 2px 5px;
   font-size: 11px;
   border-radius: var(--border-radius-1);
 }

 /* ----------------------------
 --------- Main--------------
 ------------------------------ */

 main{
  padding: 4rem;
 }
 main .dashboard {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 2rem;
}

main .dashboard span {
    font-size: 4rem;
    color: red;
}

 .main .insights {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}

main .insights .services h2 {
  font-size: 2rem;
  font-weight: 600;
}

main .insights .services .search-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

main .insights .services .search-filter .search {
  border-bottom: 2px solid black;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  font-size: 1.5rem;
}

main .insights .services .search-filter .search input {
  padding: 1rem;
  outline: none;
  font-size: 1.5rem;
}

main .insights .services .search-filter .filter-icon {
  border-radius: 8px;
  padding: 8px;
  border: 1px solid black;
  background: #fff;
}

main .insights .services .view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  background:#fe6d6a;
  border-radius: 12px;
  margin-top: 14px;
  gap: 1rem;
}

.insights .services .view .whatsapp-icon {
  padding: 0rem;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
}

.insights .services .view .whatsapp-icon> i {
  color: green;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
}

.insights .services .view .phone-icon {
  color: #fff;
  font-size: 18px;
}

#default-wa-num {
  font-size: 1.5rem;
  font-weight: bold;
}

main .insights .services .view .view-icon {
  padding: 1.25rem;
  color: #fff;
  font-size: 1.5rem;
  border: 1px solid #fff;
  border-radius: 0.8rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 2rem;
}

main .insights>div{
   background-color: var(--clr-white);
   padding: var(--card-padding);
   border-radius: var(--card-border-radius);
   margin-top: 1rem;
   box-shadow: var(--box-shadow);
   transition: all .3s ease;
}

main .insights > div:hover{
  box-shadow: none;
}
main .insights>div  span{
   background: coral;
    padding: 0.5rem;
     border-radius: 50%;
     color: var(--clr-white);
     font-size: 2rem; 
  }

main .contact-table {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: var(--card-padding);
  margin-top: 6rem;
  border-radius: 2rem;
} 

main .contact-table #contact-table_wrapper {
  overflow-x: auto;
}

main .contact-table .contacts {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

main .contact-table h2 {
  font-size: 2rem;
  font-weight: 600;
}

main .contact-table .contacts button {
  padding: 1.25rem;
  width: fit-content;
  font-size: 1.5rem;
  background-color: #fe6d6a;
  color: green;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

main .contact-table .contacts button>i {
  padding: 0.8rem;
  background: white;
  border-radius: 4px;
}

main .contact-table .contacts button p {
  font-size: 1.5rem;
  color: #fff;
  font-weight: bold;
}

main .contact-table .search-app {
  width: fit-content;
  border-bottom: 2px solid black;
  margin-top: 2rem;
}

main .contact-table .search-app input {
  outline: none;
  padding: 0.5rem;
  font-size: 1.5rem;
}

main .contact-table .search-app i {
  font-size: 1.5rem;
}

main .contact-table .call-contacts {
  display: flex;
  width: fit-content;
  justify-content: space-between;
}

main .contact-table .call-contacts .whatsapp-button {
  background-color: #fe6d6a;
}

main .contact-table .call-contacts .viber-button {
  background-color: #dce1eb;
}

main .contact-table .call-contacts .whatsapp-button,
main .contact-table .call-contacts .viber-button
{
  padding: 1.5rem;
  display: flex;
  width: 20rem;
  border-radius: 2rem;
  align-items: center;
  gap: 2.5rem;
}

main .contact-table .viber-button>i{
  color: #5D1451;
}

main .contact-table .whatsapp-button>i {
  color: green;
}

main .contact-table .whatsapp-button>i,
main .contact-table .viber-button>i
{
  font-size: 1.5rem;
  padding: 1rem;
  background-color: #fff;
  border-radius: 1rem;
}

main .contact-table p {
  margin-bottom: 0;
  font-size: 1.5rem;
}

main .contact-table .whatsapp-button p {
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
}

main .contact-table .viber-button p {
  color: #000;
}

/* contacts table design */

main .contact-table #contact-table,
.right .dashboard-contacts-group #contact-group-table
{
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background-color: #f9f9f9;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #1a181821;
  border-radius: 10px; 
}

main .contact-table #contact-table th,
main .contact-table #contact-table td,
.right .dashboard-contacts-group #contact-group-table th,
.right .dashboard-contacts-group #contact-group-table td
{
  border:  1px solid #1a181821;
  text-align: center; 
}

main .contact-table #contact-table thead th:first-child,
.right .dashboard-contacts-group #contact-group-table thead th:first-child {
  border-top-left-radius: 8px;
}

main .contact-table #contact-table thead th:last-child,
.right .dashboard-contacts-group #contact-group-table thead th:last-child {
  border-top-right-radius: 8px;
}

main .contact-table #contact-table tbody tr:last-child td:first-child,
.right .dashboard-contacts-group #contact-group-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

main .contact-table #contact-table tbody tr:last-child td:last-child,
.right .dashboard-contacts-group #contact-group-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

main .contact-table #contact-table tbody tr:nth-child(even),
.right .dashboard-contacts-group #contact-group-table tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

main .contact-table #contact-table_wrapper .dt-layout-row .dt-paging>nav,
.right .dashboard-contacts-group #contact-group-table_wrapper .dt-layout-row .dt-paging>nav
 {
  display: flex;
}

main .contact-table #contact-table_wrapper .dt-layout-row .dt-paging nav button,
.right .dashboard-contacts-group #contact-group-table_wrapper .dt-layout-row .dt-paging nav button
{
  border-radius: 1px solid #fe6d6a;
  background-color: #fe6d6a;
  border-radius: 1rem;
}


/* recent order 

main .recent_order{
   margin-top: 2rem;
   padding: 3rem;
}

main .recent_order h2{
    color: var(--clr-dark);
}

main .recent_order h2{
  margin-bottom: 0.8rem;
}

main .recent_order .contact {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}

main .recent_order .contact > .search > .search-container {
    background: #fff;
    display: flex;
    align-items: center;
    border-bottom: 2px solid black;
}

.search-container input {
    padding: 12px;
}

.recent_order .contact .whatsapp {
  /*border: 1px solid black;
  background: #f04722;
  padding: 10px;
  border-radius: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.recent_order .contact .whatsapp .icon-container {
    color: #fff;
    font-size: 16px;
}

.recent_order .contact .whatsapp .icon-container i {
  padding: 12px;
  font-size: 18px;
  border-radius: 12px;
  color: green;
  background: #fff;
}

.phone i {
  color: #fff;
  font-size:18px;
}

main .recent_order table{
  background: var(--clr-white);
  width: 100%;
  border-radius: var(--card-border-radius);
  padding: var(--card-padding);
  text-align: center;
  box-shadow: var(--box-shadow);
  transition: all .3s ease;
  color: var(--clr-dark);
  border-collapse: collapse;
  border: 2px solid #333;
}
main .recent_order table:hover{
  box-shadow: none;
}

main table thead th{
  border: 1px solid #ddd;
  height: 3.8rem;
}

main table tbody td{
   height: 3.8rem;
   border-bottom: 1px solid var(--clr-white);
   color:var(--clr-dark-variant);
   border: 1px solid #ddd;
}
*/

/**Data Table **/
main .table-container {
  margin-top: 2px;
  background-color: #fff;
  padding: 4rem;
  border-radius: var(--card-border-radius);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* ============ data table ============= */

main #example{
  font-family: Arial, sans-serif;
  border: 1px solid #ddd;
  width: 100%;
  border-collapse: separate;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


#example thead th {
  background-color: #f8f9fa;
  color: #333;
  text-align: left;
  padding: 12px;
  border: 1px solid #ddd;
}

/* Row styling */
#example tbody tr {
  border-bottom: 1px solid #dee2e6;
}

#example tbody tr {
  background-color: #f2f2f2;
}

#example tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

#example tbody tr:hover {
  background-color: #e9ecef;
}

/* Cell styling */
#example tbody td {
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle;
}

/* Button styling */
.btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    color: white;
    transition: background-color 0.3s ease;
}

.btn-primary {
    background-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-danger {
    background-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
}

.btn i {
    margin-right: 5px;
}

/* Responsive design */
@media screen and (max-width: 768px) {
    #example {
        font-size: 14px;
    }
    
    .btn {
        font-size: 12px;
        padding: 4px 8px;
    }
}


/*********************
Right Side
**********************/

.right{
  margin-top: 1.4rem;
}

.right .totalMessages {
  display: flex;
  align-items: center;
  justify-content: center;
}

.right .totalMessages h4 {
  font-size: 2rem;
}

.right .totalMessages i {
  font-size: 1.5rem;
}

.right .totalMessages .messageSent, .messageReceived {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 10px;
  margin: 5px;
  text-align: left;
  width: 180px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.right h2{
  color: var(--clr-dark);
  font-size: 2rem;
  font-weight: 600;
  width: 9rem;
}
.right .top{
  display: flex;
  justify-content: start;
  gap: 2rem;
  margin-top: 5rem;
}

.right .top button{
  display: none;
}


.right .top .profile{
  display: flex;
  gap: 2rem;
  text-align: right;
}
.right  .info h3{
  color: var(--clr-dark);
}
.right  .item h3{
  color: var(--clr-dark);
}

/*============ Dashboard Campaigns =================*/

.right .dashboard-campaigns{
  background-color: var(--clr-white);
  border-radius: var(--card-border-radius);
  box-shadow: var(--box-shadow);
  transition: all .3s ease;
  overflow: hidden;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.right .dashboard-campaigns>a{
  display: inline-block;
  width: 100%;
  padding: 20px;
  text-align: center;
  background:#fe6d6a;
}


.right .dashboard-campaigns:hover {
  box-shadow: none;
}

.right .dashboard-campaigns .campaign-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2rem;
}

.right .dashboard-campaigns .campaign-container button,
.right .dashboard-contacts-group .table-header button {
  padding: 1.25rem;
  width: fit-content;
  font-size: 1.5rem;
  background-color:#fe6d6a;
  color: #f8f5f5;
  border-radius: 1rem;
  font-weight: bold;
}

.right .dashboard-campaigns .campaign-container button i,
.right .dashboard-contacts-group .table-header button i 
{
  padding: 0.8rem;
  background: #fff;
  border-radius: 4px;
  color: green;
}


.right .dashboard-campaigns .updates{
  margin: 0 2rem;
}

.right .dashboard-campaigns .update{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.right .dashboard-campaigns .update .message {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.message p {
  margin: 0;
  font-size: 14px;
  word-wrap: break-word;
}

.message span {
  font-size: 12px;
  color: #555;
}

.status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify: center;
  text-align: center;
}

.symbol { 
  font-size: 24px; 
  color: #007bff;
  margin-bottom: 5px;
}

.status-text {
  font-size: 12px;
  color: #333;
}

.view-all {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 16px;
  color: white;
  text-decoration: none;
}

.view-all:hover {
  text-decoration: underline;
}



/* **********8
MEDIA QUERY
****************/

@media screen and (max-width:1200px) {
  html {
    font-size: 50%;
  }

  .wa-container{
    width: 94%;
    /*grid-template-columns: 7rem auto 14rem;*/
  }
    
  .wa-container.three-columns{
    grid-template-columns: 20rem auto 35rem;
  }

  aside .sidebar .submenu a {
    padding: 0;
  }

  aside .sidebar .submenu a span {
    display: none;
  }

  .wa-container.two-columns{
    grid-template-columns: 20rem auto; /* 2 columns */
  } 

  .wa-container .top{
    display: none;
  }

  aside .sidebar h3{
    display: none;
  }

  aside .sidebar a{
    width: 5.6rem;
  }

  aside .sidebar a:last-child{
    position: relative;
    margin-top: 1.8rem;
  }

  main .insights{
    display: grid;
    grid-template-columns: repeat(1,1fr);
  }
}

@media screen and (max-width:945px) {
  .wa-container.three-columns {
    grid-template-columns: 20rem auto;
    grid-template-areas:
          "col1 col2"
          "col1 col3";
      }
  .wa-container.three-columns aside {
    grid-area: col1;
  }

  .wa-container.three-columns menu {
    grid-area: col2;
  }

  .right{
    padding: 4rem;
  }

  .wa-container.three-columns .right {
    grid-area: col3;
  }
 } 


/* **************
MEDIA QUERY PHONE
************************/

@media screen and (max-width:768px) {

  .wa-container{
    width: 100%;
    grid-template-columns: repeat(1,1fr);
  }

  .wa-container.three-columns {
    display: block;
  }

  .wa-container.two-columns{
    display: block;
  }

  .wa-container aside{
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .wa-container .top{
    display: block;
  }
  
  aside{
    position: fixed;
    width: 18rem;
    z-index: 3;
    height: 100vh;
    background-color: var(--clr-white);
    display: none;
    left: -110px;
    animation:  menuLeft .3s ease forwards;
  }
  
  @keyframes menuLeft {
      to{
        left: 0;
      }
  }
  



  aside .logo h2{
       display: inline;
  }
  aside .sidebar h3{
    display: inline;
  }
  aside .sidebar a{
    width: 100%;
    height: 3.4rem;
  }
  aside .top div.close  span{
     display: inline;
     position: absolute;
     right: 0;
     margin-right:30px;
     font-size: 35px;
     cursor: pointer;
  }

.right .top{
       position: fixed;
       top: 0;
       left: 0;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 0 0.8rem;
       background: var(--clr-white);
       height: 4.6rem;
       width: 100%;
       z-index: 2;
       box-shadow: 0 1rem 1rem var(--clr-light);
       margin: 0;
}


 main .insights{
  display: grid;
  grid-template-columns: repeat(1,1fr);
  gap: 1.6rem;
    margin-top: 2rem;
 }

  main .dashboard{
    margin-top: 2rem;
  }

 main .recent_order{
  padding: 30px;
  margin: 0 auto;
 }

.right .top button{
     display: inline-block;
     background: transparent;
     cursor: pointer;
     color: var(--clr-dark);
     position: absolute;
     left: 1rem;
}

.right .recent_order{
    padding: 0 30px;
}
}

/* ================ dashboard campaigns ===================== */


/*============= Dashboard Contacts Groups ===============*/
.right .dashboard-contacts-group {
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-top: 5rem;
  border-radius: 12px;
  background-color: #fff;
} 

.right .dashboard-contacts-group .table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right .dashboard-contacts-group .table-header button p {
    margin-bottom: 0;
    color: #fff;
}

.right .dashboard-contacts-group .search-app {
  width: fit-content;
  background: #fff;
  margin: 2rem 0;
  border-bottom: 2px solid #000;
  padding: 12px;
}

.right .dashboard-contacts-group .search-app input {
  outline: none;
  font-size: 1.4rem;
}

.right .dashboard-contacts-group .search-app i {
  font-size: 1.5rem;
}

/* Styling the table */
.right .dashboard-contacts-group #whatsappTable {
    width: 100%;
    border-collapse: separate; 
    border: 1px solid #ddd; 
    border-radius: 10px; 
    overflow: hidden; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
}

/* Styling table header */
.right .dashboard-contacts-group #whatsappTable thead th {
    background-color: #f8f9fa; 
    color: #333; 
    text-align: left;
    padding: 12px; 
    border-bottom: 1px solid #ddd; 
}

/* Styling table body rows */
.right .dashboard-contacts-group #whatsappTable tbody tr {
    background-color: #fff; 
    transition: background-color 0.3s; 
}

.right .dashboard-contacts-group #whatsappTable tbody tr:hover {
    background-color: #f1f1f1; 
}

/* Styling table cells */
.right .dashboard-contacts-group #whatsappTable td {
    padding: 10px; 
    border-bottom: 1px solid #ddd; 
}

/* Styling buttons in the Actions column j
#whatsappTable .btn {
    padding: 6px 10px; 
    margin: 0 2px; 
    border: none;
    border-radius: 5px; 
    cursor: pointer; 
    font-size: 14px; 
}

/* Primary button styling 
#whatsappTable .btn-primary {
    background-color: #007bff; 
    color: #fff;
}

/* Primary button hover effect 
#whatsappTable .btn-primary:hover {
    background-color: #0056b3; 
}

/* Danger button styling 
#whatsappTable .btn-danger {
    background-color: #dc3545; 
    color: #fff; 
}

/* Danger button hover effect 
#whatsappTable .btn-danger:hover {
    background-color: #c82333; 
}

/* Icon styling */
.right .dashboard-contacts-group #whatsappTable i {
    margin-right: 5px; 
}