* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    font-size: 14px;
}


html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
 
}


/* ✅ Horizontal scroll for long toastr text */

/* #toast-container .toast-title,
#toast-container .toast-message {
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 320px !important;   
  scrollbar-width: none !important;        
  -ms-overflow-style: none !important;      
}

#toast-container .toast-title::-webkit-scrollbar,
#toast-container .toast-message::-webkit-scrollbar {
  display: none !important;
} */


body {

  /* background-image: url("https://t3.ftcdn.net/jpg/03/61/47/30/360_F_361473045_NNRY3V24e491CMDQXYBxxQOSvQklx3xB.jpg");  */
  /* background-image: url("https://marketplace.canva.com/EAGH8Cw-0ao/1/0/1600w/canva-blue-and-white-abstract-geometric-blank-page-a4-landscape-3ysvH6o9rSY.jpg"); */
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  background-size: cover;
  width: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}






.btn {
  padding: 6px 12px;


  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.button-cell {
  display: flex;
  gap: 10px;
  /* Space between buttons */
  align-items: center;
}

.btn-accept {
  background-color: #4358a6fb   !important;
  color: white;
  padding: 5px;
  font-size: 14px;
  margin-right: 5px;



}

.btn-decline {
  background-color:
    rgba(137, 15, 15, 0.872) !important;
  color: white;
  padding: 5px;
  font-size: 14px;

}


.me-2 {
  margin-right: 8px;
}

.toast-info {
  background-color: #007bff !important;
  /* Set background color */
  color: white !important;
  /* Set text color */
}

/* Optional: Customize other aspects like the progress bar */
.toast-info .toast-progress {
  background-color: #0056b3 !important;
  /* Set progress bar color */
}

.toast-warning {
  background-color: rgb(255, 69, 7) !important;
  /* Set background color */
  color: white !important;
  /* Set text color */
}

.toast-warning .toast-progress {
  background-color: rgb(255, 69, 7) !important;
  /* Set progress bar color */
}

body {
  --fa-style-family-classic: "Font Awesome 6 Free" !important;
  --fa-font-solid: normal 900 1em / 1 "Font Awesome 6 Free" !important;
}

.toast-success {
  background-color: #28a745 !important;
  /* Set background color */
  color: white !important;
  /* Set text color */
}

.toast-success .toast-progress {
  background-color: #28a745 !important;
  /* Set progress bar color */
}

.toast-error {
  background-color: #dc3545 !important;
  /* Set background color */
  color: white !important;
  /* Set text color */
}

.toast-error .toast-progress {
  background-color: #dc3545 !important;
  /* Set progress bar color */
}


#offcanvasSidebar {
  width: 200px;
  background-color:#4358a6fb 
  
}




#offcanvasSidebar .nav-link.active {
  /* background-color: lightblue; */
  /* match sidebar background */
  /* color: white!important; */
  /* much darker blue */
  font-weight: 200;
  border-radius: 10px;
}

body {
  font-family: Inter, Helvetica, sans-serif;
}
#avsys-title{
  font-size: 14px;
}


#offcanvasSidebar .nav-link i {
  margin-right: 8px;
  color: white !important;
}

#offcanvasSidebar .nav-link {

  color: white !important;
}

.sidebar {
  /* background: linear-gradient(135deg, #12235f 0%, #3a4b8a 43%, #12235f 100%);  */
  background-color: #4358a6fb;
  /* width: 80px; */
}

/* .sidebar .nav-link {
  color: white;
  font-size: 12px;
  transition: background-color 0.3s;
} */
.nav-link i {
  font-size: 14px; /* Bigger icon */
  background-color: #c1d9f31c;
  padding: 8px !important;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  display: inline-block; /* So padding + bg works nicely */
  color: white;
}

.nav-link.active i {
  background-color: #0a66c2 !important; /* blue highlight behind icon */
  color: white;
}

.nav-link span {
  font-size: 14px;
  color: white;
}


/* .sidebar .nav-link:hover {
  background-color: #2e3b75;
  border-radius: 8px;
} */

.sidebar-label {
  font-size: 14px;
  margin-top: 2px;
  text-align: center;
  word-wrap: break-word;
}


 #sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 1030;
}
@media (max-width: 767.98px) {
  #sidebar2 {
    position: relative !important;  /* remove sticky */
    height: auto !important;         /* let height grow naturally */
    overflow: visible !important;    /* allow scroll if needed */
    z-index: auto !important;        /* reset z-index */
  }
}
#buttonGroup button.Btn {
  flex: 1 1 calc(33.333% - 1rem); /* 3 buttons side by side with gaps */
  /* optional: prevent too small */
}

@media (min-width: 768px) {
  #buttonGroup button.Btn {
    flex: none;
    width: auto; /* revert to default on medium+ screens */
  }
}

 #sidebar2 {
  position: sticky;
  top: 0;

  height: 90vh;
  overflow: hidden;
  z-index: 1030;
}
/* Scrollable inner container */
.sidebar-inner-card {
  overflow-y: auto;
  width: 100%;
  flex-grow: 1;
  -ms-overflow-style: none;     /* IE and Edge */
  scrollbar-width: none;        /* Firefox */
}

/* Hide scrollbar for WebKit (Chrome, Safari) */
.sidebar-inner-card::-webkit-scrollbar {
  display: none;
}

.sidebar .nav-link:hover {
 
  width: 100%;
  color: white !important;
  font-weight: 200;
  z-index: 1;
}
.nav-link:hover i,
.nav-link:hover span {
  font-weight: 600;
  color: white;
}

/* .sidebar {
  color: black;
  position: fixed;
  height: 100vh;
  
  background-image: linear-gradient(to bottom,
      #1d456fdc, rgba(62, 114, 156, 0.9));
  
  border-radius: 3px solid;
 
  transition: width 0.4s ease-in-out;
  box-sizing: border-box;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px;
 
}


.sidebar.collapsed {
  width: 50px;
} */

.date-input {
  padding: 7px !important;
}


.toggle-btn {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  border: none;
  background: none;
  color: white;
  font-size: 14px;
  padding: 10px 7px;
  width: 100%;
  text-align: left;
  transition: all 0.3s ease;
}


.wrap-reason {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
  max-inline-size: 40ch;
}



.text-danger {
  color: red !important;
}
#resultsSummary .alert {
  margin-bottom: 2px !important;
}


.floating-table {

  background-color:
    #fff !important;
  border-radius: 16px !important;
  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37) !important; */
  backdrop-filter: blur(10px) !important;
   border: 2px solid rgb(0, 107, 179);
  -webkit-backdrop-filter: blur(10px) !important;


  transition: transform 0.3s ease !important;
  color: black !important;

}


.custom-divider {
  border-top: 2px dashed #fff;
  margin: 10px 0 10px 0 ;
  margin-bottom: 20px !important;
}



/* CSS */
.button-29 {

  background-color: rgba(255, 255, 255, 255);
  color: rgb(33, 33, 33);
  padding-top: 10px;
  font-weight: 600;
  font-size: 14px;
  padding-bottom: 10px;

  border: none;
}


.button-29:hover {
  background-color:
    #f4f4f5;
  border-radius: 5px;
  color: var(--bs-primary);
}


 .chart-card {
    height: 100%; /* Make cards stretch to equal height */
    display: flex;
    flex-direction: column;
  }

  .chart-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }


  /* Ensure charts are responsive */
  canvas {
    width: 100% !important;
   
  }


  
.navbar {
  background-color: rgba(255, 255, 255, 255) !important;
  position: sticky;
  top: 0;
  z-index: 2000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37) !important;


}



/* Profile photo wrapper with absolute position */

/* Style for profile image */
/* .profile-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid rgba(0, 107, 179, 0.9);
  background-color: white;
} */

.border-left-primary {
  border-left: 5px solid #080655 !important;
}

.floating-card {
  background: #f8f9fc;
  border-radius: 8px;
}

.card-title {
  font-weight: 600;
}

.page-link {
  color: #4e73df;
}

.page-item.active .page-link {
  background-color: #080655;
  border-color: #080655;
  color: white;
}

.dt-scroll-head {
  border-radius: 10px 10px 0px 0px;
}

.form-wrapper {
  position: relative;

}
.form-select{
  padding: 5px !important;
  font-size: 14px;

}

.spiral-image {
  position: absolute;
  top: -12px;
  left: -60px;
  height: 117%;
  z-index: 3;
}

.welcome {
  background-image: linear-gradient(to bottom,
      #1d456fdc, rgba(62, 114, 156, 0.9));
  color: white !important;
  border-radius: 20px !important;
 
}


 .button-31 {
        background-color: #4358a6fb; /* Green for Register */
        border-radius: 8px;
        color: white;
        padding: 6px 15px;
        font-weight: 500;
        border: none;
        /* box-shadow: 0 5px 15px #171a64; */
        transition: all 0.3s ease;
    }
    .button-31:hover {
        background-color: #171a64;
        color: white;
        box-shadow: 0 8px 20px #171a64;
    }
.button-30 {
        background-color: #da1717fb; /* Green for Register */
        border-radius: 8px;
        color: white;
        padding: 6px 15px !important;
        font-weight: 500;
        border: none;
        /* box-shadow: 0 5px 15px #171a64; */
        transition: all 0.3s ease;
    }
    .button-30:hover {
        background-color: #ab0707;
        color: white;
        box-shadow: 0 8px 20px #ab0707;
    }

.time-image {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 24%;
  z-index: 3;
}

h5 {
  color: #171a64;
  font-weight: bold !important;
}
 

/* From Uiverse.io by niat786 */
.button-33 {
  border-radius: .25rem;


  font-weight: 600;
  padding-left: 25px;
  padding-right: 25px;
  color: #fff;
  -webkit-clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 100%);
  clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 100%);
  height: 40px;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 1.2px;
  transition: .2s .1s;
  background-image: linear-gradient(90deg, #066f9c, #0b31ac);
  border: 0 solid;
  overflow: hidden;
}

.button-33:hover {
  cursor: pointer;
  transition: all .3s ease-in;
  padding-right: 30px;
  padding-left: 30px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {

  padding: 3px 0px !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: #333;
  font-size: 14px !important;
}





textarea::placeholder {
  font-size: 14px;
  /* Adjust the value as needed */
}

textarea.form-control.comments {
  padding: 2px;
  /* Adjust this value as needed */
}
.breadcrumb{
  background-color:
    rgba(255, 255, 255, 0.886) !important;
  border-radius: 16px !important;
  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37) !important; */
  backdrop-filter: blur(10px) !important;

  -webkit-backdrop-filter: blur(10px) !important;
  /* border: 2px solid rgb(0, 107, 179);  */
  padding: 20px;



  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  color: black !important;
}
.choices__inner {
  padding: 0px !important;
  min-height: 0px !important;
 background-color: rgb(247, 247, 247) !important;
}
.choices__input {
padding: .55rem .95rem !important;
background-color: rgb(247, 247, 247) !important;
margin-bottom: 0px !important;
}
#holidayListModal .modal-dialog {
  --bs-modal-width: 550px;
}
.form-control-sm {
  font-size: 14px !important;
}


.form16-container {
        max-width: 800px;
        margin: auto;
        
    }

    .form16-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .form16-header h2 {
        margin-bottom: 10px;
    }
#download-link{
margin: 20px ;
}
    #download-link a {
        background-color: #007bff;
        color: white;
        padding: 8px 15px;
        
        text-decoration: none;
        border-radius: 4px;
        font-weight: bold;
    }

    .pdf-card {
        background: #f9f9f9;
        padding: 15px;
        margin-bottom: 10px;
        border-left: 5px solid #007bff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .pdf-card span {
        font-weight: 500;
    }

    .pdf-actions button {
        background-color: #28a745;
        color: white;
        border: none;
        padding: 6px 12px;
        margin-left: 10px;
        border-radius: 4px;
        cursor: pointer;
    }

    .pdf-actions button:hover {
        background-color: #218838;
    }

    #pdf-preview {
        margin-top: 25px;
        border: 1px solid #ccc;
        height: 600px;
        background: #fff;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    }

    iframe {
        width: 100%;
        height: 100%;
        border: none;
    }
  /* Other CSS rules... */

.pdf-actions {
  display: flex; /* Use flexbox for horizontal alignment */
  align-items: center; /* Vertically align items */
  gap: 10px; /* Add space between the buttons */
}

.pdf-actions button {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.pdf-actions .download-btn {
  background-color: #007bff; /* Different color for the download button */
}

.pdf-actions button:hover {
  background-color: #218838;
}

/* Add a hover effect for the download button as well */
.pdf-actions .download-btn:hover {
  background-color: #0056b3;
}


  

  .equal-height-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .equal-height-body {
    flex: 1;
    position: relative;
  }

  .chart-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* .chart-canvas {
  width: 100% !important;
  height: auto !important; */
/* } */
.form-label{
  font-weight: bold;
}
.form-control{
  border-radius: 0px!important;
  background-color: rgb(247, 247, 247) !important;
  font-size: 14px !important;
  line-height: 1.1;
  
    padding: 0.5rem 0.75rem !important;
}
table.dataTable thead .sorting {
    text-align: center;
  }
table.dataTable tbody td {
    text-align: center;
  }
  .truncate-text {
  width: 12ch;       
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;  
  vertical-align: bottom;
  cursor: default;      
  line-height: 1;      

}
#sidebar2 h5.text-primary {
  font-weight: 700;
  font-size: 16px;
  color: #3b4cca;
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  user-select: none;
}
#sidebar2 > div.text-center {
   background-color: #15234f;
  border-radius: 1rem;
  
  padding: 1.2rem 1rem;
  color: #fff !important;
  user-select: none;
}




#sidebar2 .btn-outline-primary,
#sidebar2 .btn-outline-success,
#sidebar2 .btn-outline-info {
  border-radius: 0.7rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  box-shadow: 0 3px 10px rgba(59, 76, 202, 0.12);
  transition: all 0.25s ease;
}

#sidebar2 .btn-outline-primary:hover {
  background-color: #3b4cca;
  border-color: #3b4cca;
  color: #fff;
  box-shadow: 0 6px 20px rgba(59, 76, 202, 0.4);
}

#sidebar2 .btn-outline-success:hover {
  background-color: #28a745;
  border-color: #28a745;
  color: #fff;
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

#sidebar2 .btn-outline-info:hover {
  background-color: #17a2b8;
  border-color: #17a2b8;
  color: #fff;
  box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
}
/* From Uiverse.io by Spacious74 */ 
/* .bgblue {
  background: linear-gradient(135deg, #fffffff5, #3a4b8a, #ffffff98);
  padding: 1px;
  border-radius: 1.2rem;
  box-shadow: 0px 1rem 1.5rem -0.9rem #000000e1;
  max-width: 300px;
}

.card {
  font-size: 1rem;
  color: #bec4cf;
  background: linear-gradient(135deg, #0d1120 0%, #3a4b8a 43%, #0d1120 100%);
  padding: 1.5rem;
  border-radius: 1.2rem;
} */
/* From Uiverse.io by adamgiebl */ 
.card-11 {
  
  background: #ffffff;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
 box-shadow: 0 8px 8px rgba(128, 126, 126, 0.37) ;
}
/* From Uiverse.io by JsGrisales */ 
/* From Uiverse.io by vinodjangid07 */ 
.Btn {
  position: relative;
  width: 150px !important;
  height: 40px;
  border-radius: 45px;
  border: none;
  background-color: #4358a6fb;
  color: white;
  box-shadow: 0px 10px 10px #596ebc inset,
  0px 5px 10px rgba(5, 5, 5, 0.212),
  0px -10px 10px #4358a6fb inset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Btn::before {
  width: 70% !important;
  height: 2px;
  position: absolute;
  background-color: rgba(250, 250, 250, 0.265);
  content: "";
  filter: blur(1px);
  top: 7px;
  border-radius: 50%;
}

.Btn::after {
  width: 70% !important;
  height: 2px;
  position: absolute;
  background-color: rgba(250, 250, 250, 0.137);
  content: "";
  filter: blur(1px);
  bottom: 7px;
  border-radius: 50%;
}

.Btn:hover {
  animation: jello-horizontal 0.9s both;
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.1, 0.9, 1);
  }

  40% {
    transform: scale3d(0.9, 1.1, 1);
  }

  50% {
    transform: scale3d(1.07, 0.93, 1);
  }

  65% {
    transform: scale3d(0.95, 1.02, 1);
  }

  75% {
    transform: scale3d(1.02, 0.97, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}
@media (max-width: 576px) {
  #welcomeCardContainer {
    flex-direction: column !important;
    min-height: auto !important;
  }

  #welcomeCard {
    min-width: 100% !important;
    margin-bottom: 1rem;
  }

  #welcomeCard + div {
    min-width: 100% !important;
  }
}
.pending-card{
  background-color:#4358a6fb ;
}
.pending-border{
  border-color:#4358a6fb!important ;
}
.approved-card{
  background-color:#7487C3  ;
}
.approved-border{
  border-color:#7487C3 !important;
}
.rejected-card{
  background-color:#606ca7  ;
}
.rejected-border{
  border-color:#606ca7 !important ;
}
.rounded2 {
    border-radius: 15px!important;
}
td.dt-control {
  cursor: pointer;
  width: 30px; /* Adjust as needed */
}

td.dt-control:before {
  content: "+"; /* Plus sign for collapsed state */
  display: inline-block;
  color: #333;
  border: 1px solid #333;
  border-radius: 3px;
  padding: 0 5px;
  line-height: 1;
  font-weight: bold;
  background-color: #f0f0f0;
}

tr.dt-hasChild td.dt-control:before {  content: "−"; /* Minus sign for expanded state */
}

/* Style for the child row details table */
.details-table {
  width: 100%;
  margin: 10px 0;
  border-collapse: collapse;
}
.details-table td {
  padding: 5px 10px;
  border: 1px solid #ddd;
  vertical-align: top;
}
.details-table th {
  text-align: left;
  background-color: #f8f8f8;
  padding: 5px 10px;
  border: 1px solid #ddd;
  width: 150px;
}
/* Custom styling for the details view */
/* Custom styling for the details view */
.child-details-container {
    padding: 10px 0;
}
.child-details-container dt {
    /* Label (Key) styling */
    float: left;
    width: 45%; /* Space for the label */
    padding: 2px 0;
    clear: left;
    font-weight: 600;
}
.child-details-container dd {
    /* Value styling */
    margin-left: 50%; /* Starts after the label */
    padding: 2px 0;
}
a{
  text-decoration: none!important ;
}
.insights{
font-size: 14px !important;
}
.form-control-minimal, .choices__inner {
    border-radius: 8px;
    border: 1px solid #dfe6e9;
    padding: 8px 12px;
    box-shadow: none;
    transition: border-color 0.3s;
    min-height: 44px; /* Consistent height */
    background-color: #fcfcfc;
}
#toast-container > div {
    max-height: 250px !important;
    overflow-y: auto !important;
}

#toast-container .toast-message {
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* Optional: If the title (user name) is very long and needs wrapping too */
#toast-container .toast-title {
    word-wrap: break-word;
    white-space: normal;
}

  input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}
 
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-textfield-decoration-container {
  display: none !important;
}


.form16-search input {
    max-width: 300px;
    margin: auto;
}
/* ========================================
   MODERN DASHBOARD TABLE DESIGN
======================================== */

/* Main card */
.floating-card {
   background: #fff;
  border-radius: 12px;
  border: 1px solid #e4e7f0;
 
  margin-bottom: 1.25rem;
}

/* Responsive wrapper */
.table-responsive {
  overflow-x: auto !important;
  
}

/* Main table */
.table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 3px !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}

/* =========================
   HEADER
========================= */

.table thead th,
table.dataTable thead th,
table.dataTable thead .sorting {
  background: #f3f5fb !important;
  color: #4358a6 !important;
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
 

 
  white-space: nowrap !important;
  text-align: center !important;
}

/* Rounded header corners */
.table thead th:first-child {
  border-top-left-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
}

.table thead th:last-child {
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

/* =========================
   BODY ROWS
========================= */

.table tbody tr {
  transition: all 0.2s ease !important;
}

.table tbody tr:hover {
  transform: translateY(-2px) !important;
}

.table tbody td {
  background: #ffffff !important;
  border-top: 1px solid #edf1f7 !important;
  border-bottom: 1px solid #edf1f7 !important;
  border-right: 1px solid #edf1f7 !important;
  border-left: none !important;
}
/* Rounded row edges */
.table tbody td:first-child {
  border-left: 1px solid #edf1f7 !important;
  border-top-left-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
}

.table tbody td:last-child {
  border-right: 1px solid #edf1f7 !important;
  border-top-right-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

/* Hover row color */
.table tbody tr:hover td {
  background: #f8fbff !important;
}

/* =========================
   DATATABLE SEARCH
========================= */

.dataTables_filter input {
  border: 1px solid #dce3f0 !important;
  border-radius: 5px !important;
  background: #f8fafc !important;

  outline: none !important;
  box-shadow: none !important;
 
}

/* =========================
   DATATABLE DROPDOWN
========================= */

.dataTables_length select {
  border: 1px solid #dce3f0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  padding: 6px 10px !important;
}

/* =========================
   PAGINATION
========================= */

.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #f3f6fc !important;
  color: #4358a6 !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 4px 8px !important;
  margin: 0 3px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #4358a6 !important;
  color: white !important;
}

/* =========================
   TABLE INFO
========================= */

.dataTables_info,
.dataTables_length,
.dataTables_filter label {
  font-size: 14px !important;
  color: #6b7280 !important;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  /* Let DataTables handle its own layout */
  .table,
  .table tbody,
  .table tr,
  .table td,
  .table thead {
    display: revert !important;
  }

  /* Just make the table horizontally scrollable on small screens */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Shrink font and padding so columns fit better */
  .table thead th,
  .table tbody td {
    font-size: 12px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }

  /* Remove hover lift on mobile — causes layout issues */
  .table tbody tr:hover {
    transform: none !important;
  }
}
/* =========================
   VERTICAL COLUMN LINES
========================= */

/* Header vertical lines */
.table thead th {
  border-right: 1px solid #e2e8f0 !important;
}

/* Remove last header line */
.table thead th:last-child {
  border-right: none !important;
}

/* Body vertical lines */
.table tbody td {
  border-right: 1px solid #edf1f7 !important;
}

/* Remove last column line */
.table tbody td:last-child {
  border-right: none !important;
}
h5{
  font-size: 16px !important;
}
/* ===== Global Scrollbar ===== */


*::-webkit-scrollbar { width: 3px; height: 3px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #a2aadb; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #1c2546; }






 /* =====================================================
       OPTION A — Brand-blue sidebar + white topbar
       CSS-only reskin. Zero HTML/ID/structure changes.
    ===================================================== */

    body { background: #f4f5f8; }
    .main-block { background: #f4f5f8; }

    /* ── Sidebar: brand blue, wide with icon + label ── */
 /* Sidebar Default Extended Layout */
#sidebar {
    width: 200px;
    transition: width 0.3s ease;
    background-color: #4358a6fb; /* Preserving your brand theme background color */
}

/* Sidebar Collapsed Layout (Icons Only) */
#sidebar.collapsed {
    width: 70px !important;
}

#sidebar.collapsed .brand-logo-area,
#sidebar.collapsed .sidebar-section {
    display: none !important;
}

#sidebar.collapsed .sidebar-brand {
    justify-content: center !important;
    padding: 10px 0;
}

#sidebar.collapsed #toggle-sidebar-btn {
    margin: 0 !important;
}

#sidebar .nav-link {
    width: calc(100% - 16px);
    height: 44px;
    margin: 3px 8px;
    border-radius: 10px;
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    color: rgba(255,255,255,.75) !important;
    transition: all .25s ease;
}

#sidebar.collapsed .nav-link {
    justify-content: center !important;
    padding: 0;
}

/* Fluid Layout Adjustments for Main Content Panel */
.main-block .row {
    display: flex;
}

/* Replacing the old forced calculations with automated flex matching */
.col-md-11.col-lg-11 {
    flex: 1 1 0% !important;
    width: auto !important;
    max-width: 100% !important;
    transition: all 0.3s ease;
}
    .sidebar-inner-card {
      background: transparent !important;
      padding: 12px 0 10px !important;
      width: 100%;
    }

    /* Show text labels */
    #sidebar .nav-link span {
      display: inline !important;
      font-size: 12px !important;
      white-space: nowrap !important;
    }

    /* Nav link: icon + text side by side */
    #sidebar .nav-link {
      width: calc(100% - 16px) !important;
      height: 38px !important;
      border-radius: 8px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      flex-direction: row !important;
      gap: 10px !important;
      padding: 0 12px !important;
      margin: 2px 8px !important;
      color: rgba(255,255,255,0.6) !important;
      font-size: 12px !important;
      transition: background 0.15s, color 0.15s !important;
    }

    #sidebar .nav-link:hover {
      background: rgba(255,255,255,0.12) !important;
      color: #fff !important;
      padding-left: 4px !important;
    }

    #sidebar .nav-link.active {
      background: rgba(255,255,255,0.2) !important;
      color: #fff !important;
      border-left: 3px solid rgba(255,255,255,0.85) !important;
      padding-left: 4px !important;
    }

    #sidebar .nav-link i {
      font-size: 15px !important;
      width: 30px !important;
      text-align: center !important;
      flex-shrink: 0 !important;
      line-height: 1 !important;
    }

 

    /* ── Top navbar: white ── */
    .col-md-11.col-lg-11 > nav {
      background: #ffffff !important;
      border-bottom: 1px solid #e8eaf0 !important;
      padding: 0 20px !important;
      height: 50px !important;
    }

    #avsys-title {
      color: #1e2030 !important;
      font-size: 15px !important;
      font-weight: 600 !important;
    }

    #username {
      color: #3a3f50 !important;
      font-size: 12px !important;
      font-weight: 500 !important;
    }

    #sidebar-profile-photo {
      width: 32px !important;
      height: 32px !important;
      border-radius: 50% !important;
      border: 2px solid #e8eaf0 !important;
      object-fit: cover !important;
    }

    /* Content scroll area */
    .col-md-11.col-lg-11 > div[style*="overflow-y"] {
      background: #f4f5f8 !important;
    }

    /* ── Offcanvas sidebar: brand blue ── */
    #offcanvasSidebar {
      background: #4358a6 !important;
    }

    #offcanvasSidebar .offcanvas-header {
      background: #4358a6 !important;
      border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    }

    #offcanvasSidebar .btn-close {
      filter: invert(1) !important;
    }

    #offcanvasSidebar .offcanvas-body {
      background: #4358a6 !important;
    }

    #offcanvasSidebar .nav-link {
      color: rgba(255,255,255,0.6) !important;
      border-radius: 8px !important;
      margin: 1px 4px !important;
      font-size: 13px !important;
      padding: 8px 12px !important;
      transition: background 0.12s, color 0.12s !important;
    }

    #offcanvasSidebar .nav-link:hover {
      background: rgba(255,255,255,0.12) !important;
      color: #fff !important;
    }

    #offcanvasSidebar .nav-link.active {
      background: rgba(255,255,255,0.2) !important;
      color: #fff !important;
    }

    #offCanavasSidebarUsername {
      color: rgba(255,255,255,0.85) !important;
      font-size: 13px !important;
    }

    #offcanvasbar-profile-photo {
      border: 2px solid rgba(255,255,255,0.3) !important;
    }

    #offcanvasSidebar hr {
      border-color: rgba(255,255,255,0.15) !important;
      margin: 8px 0 !important;
    }
    
/* =====================================================
   AVSYS MODERN SIDEBAR (OPTION A)
===================================================== */

body{
    background:#f4f5f8;
}

.main-block{
    background:#f4f5f8;
}


/* Logo */

.sidebar-brand{
    height:84px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 22px;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.brand-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    background:rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:700;
    font-size:18px;
}

.brand-text{
    display:flex;
    flex-direction:column;
}

.brand-title{
    color:#fff;
    font-size:18px;
    font-weight:700;
    line-height:1;
}

.brand-sub{
    color:rgba(255,255,255,.65);
    font-size:13px;
}

/* Section Headings */

.sidebar-section{
    padding:18px 24px 8px;
    font-size:11px;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
}

/* Navigation */

#sidebar .nav{
    padding-top:6px;
}

#sidebar .nav-link{
    width:calc(100% - 16px);
    height:44px;
    margin:3px 8px;
    border-radius:10px;
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    padding:0 18px;
    color:rgba(255,255,255,.75) !important;
    transition:all .25s ease;
}

#sidebar .nav-link span{
    display:block !important;
    font-size:14px !important;
    font-weight:500;
    white-space:nowrap;
}

#sidebar .nav-link i{
    width:18px;
    text-align:center;
    font-size:15px;
}

#sidebar .nav-link:hover{
    background:rgba(255,255,255,.08);
    color:#fff !important;
    transform:translateX(3px);
}

#sidebar .nav-link.active{
    background:rgba(255,255,255,.15);
    color:#fff !important;
    border-left:4px solid #fff;
    border-radius:0 10px 10px 0;
}

/* Logout */

.sidebar-footer{
    margin-top:auto;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.12);
}

/* Content Width */

/* Top Navbar */

.col-md-11.col-lg-11 > nav{
    background:#fff !important;
    border-bottom:1px solid #e7e9f2;
}

#avsys-title{
    color:#1f2937 !important;
    font-weight:700;
}

#username{
    color:#4b5563 !important;
}

#sidebar-profile-photo{
    border:2px solid #e5e7eb;
}

/* Mobile */

@media(max-width:991px){
    #sidebar{
        width:100% !important;
    }
}
.sidebar-brand {
  position: relative;
}


#toggle-sidebar-btn:hover {
  background-color: #f0f0f0 !important;
  color: #4358a6 !important;
}

#sidebar {
  overflow: visible !important;
}

.sidebar-inner-card {
  overflow-x: visible !important;
}
.sidebar-brand {
  height: 64px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  position: relative;
}

/* Collapsed: center AV, hide rest */
#sidebar.collapsed .sidebar-brand {
  justify-content: center !important;
  flex-direction: row !important;
  gap: 0 !important;
  padding: 10px 0 !important;
}

#sidebar.collapsed .brand-logo-area {
  display: none !important;
}

#sidebar.collapsed .brand-text {
  display: none !important;
}



/* ===== CHEVRON TOGGLE BUTTON ===== */

#sidebar {
  position: relative !important;
  overflow: visible !important;
}

.sidebar-inner-card {
  overflow: visible !important;
  position: relative !important;
}

#toggle-sidebar-btn {
  position: absolute !important;
  top: 50px !important;
  right: -12px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #fff !important;
  
  color: #151a2a !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 1100 !important;
  padding: 0 !important;
}

#toggle-sidebar-btn i {
  font-size: 13px;
  color: #151a2a !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  line-height: 1;
  transition: transform 0.3s ease;
}

#toggle-sidebar-btn:hover {
  background: #f0f0f0 !important;
}



/* Brand area when collapsed */
#sidebar.collapsed .brand-logo-area,
#sidebar.collapsed .sidebar-section {
  display: none !important;
}

#sidebar.collapsed .sidebar-brand {
  justify-content: center !important;
}

.sidebar-brand {
  height: 64px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  position: relative;
}
/* Sidebar scroll fix */
#sidebar {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;   /* keeps chevron visible */
  height: 100vh !important;
}

/* Static brand header */
.sidebar-brand {
  flex-shrink: 0 !important;     /* never shrinks */
}

/* Scrollable nav area only */
.sidebar-nav-scroll {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  display: flex !important;
  flex-direction: column !important;
  scrollbar-width: none !important;
}

.sidebar-nav-scroll::-webkit-scrollbar {
  display: none !important;
}
/* Hide desktop sidebar completely on small screens */
@media (max-width: 991.98px) {
  #sidebar {
    display: none !important;
  }
}
/* Center welcome card text on small screens */
@media (max-width: 767.98px) {
  .hero-topbar-left {
    justify-content: center !important;
    text-align: center !important;
  }

  .hero-topbar {
    flex-direction: column !important;
    align-items: center !important;
  }

  .hero-sub {
    justify-content: center !important;
  }

  /* Make sure all hero action buttons wrap and are visible */
  .hero-bottom {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .hero-action-btn {
    flex: 1 1 calc(50% - 8px) !important;  /* 2 buttons per row */
    max-width: calc(50% - 8px) !important;
    min-width: 120px !important;
  }
}
 /* base.css */
.app-page-loader {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.app-loader {
  width: 42px;
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 50%;
  box-sizing: border-box;
  position: relative;
  mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0);
  -webkit-mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0);
  filter: blur(6px);
}

.app-loader:before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(#0000 0 5%, var(--brand, #4358a6), #0000 20% 50%);
  animation: hrd-spin 1.25s linear infinite;
}

@keyframes hrd-spin {
  to {
    transform: rotate(1turn);
  }
}

/* TOOLTIP CSS */
#sidebar.collapsed {
  overflow: visible !important;
}
#sidebar.collapsed .sidebar-nav-scroll {
  overflow: visible !important;
}
#sidebar.collapsed .nav-link {
  position: relative;
  overflow: visible !important;
}
#sidebar.collapsed .link-text {
  display: none !important;
}
#sidebar.collapsed .nav-link:hover .link-text {
  display: block !important;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 9999;
  margin-left: 15px;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
  font-size: 13px;
  font-weight: normal;
  pointer-events: none; /* Prevents tooltip from interfering with hover */
}
#sidebar.collapsed .nav-link:hover .link-text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  transform: translateY(-50%);
  border-width: 5px 5px 5px 0;
  border-style: solid;
  border-color: transparent rgba(0, 0, 0, 0.85) transparent transparent;
}

/* ==========================================================================
   Searchable Dropdown Component Styling (Branch Transfer & Custom Selects)
   ========================================================================== */
.searchable-select-wrapper {
  position: relative;
  width: 100%;
}

.searchable-select-trigger {
  width: 100%;
  min-height: 38px;
  padding: 6px 12px;
  font-size: 14px;
  color: #212529;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.searchable-select-trigger:focus,
.searchable-select-wrapper.open .searchable-select-trigger {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.searchable-select-trigger .selected-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13.5px;
}

.searchable-select-trigger .selected-text.is-placeholder {
  color: #6c757d;
}

.searchable-select-trigger .arrow-icon {
  transition: transform 0.2s ease;
  color: #6c757d;
  font-size: 12px;
  margin-left: 8px;
}

.searchable-select-wrapper.open .arrow-icon {
  transform: rotate(180deg);
}

.searchable-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1090;
  background: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 8px;
  display: none;
}

.searchable-select-wrapper.open .searchable-select-dropdown {
  display: block;
}

.searchable-select-search-box {
  position: relative;
  margin-bottom: 8px;
}

.searchable-select-search-box .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 13px;
  pointer-events: none;
}

.searchable-select-search-box input.searchable-input {
  width: 100% !important;
  height: 38px !important;
  padding: 6px 12px 6px 32px !important;
  font-size: 13.5px !important;
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  outline: none !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
}

.searchable-select-search-box input.searchable-input:focus {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15) !important;
}

.searchable-select-options {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 2px;
}

.searchable-select-option {
  padding: 8px 12px;
  font-size: 13.5px;
  border-radius: 4px;
  cursor: pointer;
  color: #212529;
  transition: background-color 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.searchable-select-option:hover,
.searchable-select-option.highlighted {
  background-color: #e9ecef;
}

.searchable-select-option.selected {
  background-color: #0d6efd;
  color: #ffffff;
  font-weight: 500;
}

.searchable-select-option.disabled {
  color: #adb5bd;
  cursor: not-allowed;
  background-color: transparent;
}

.searchable-select-no-results {
  padding: 12px;
  text-align: center;
  color: #6c757d;
  font-size: 13px;
}