/*html {
  font-size: 16px; }*/

body {
  /*font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5 !important;*/
  color: #525f7f; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  /*font-family: 'Open Sans', sans-serif;*/
  color: #32325d;
  /*line-height: 1.5 !important;
  font-weight: 600;*/ }

/*.h1, h1 {
  font-size: 1.525rem !important; }

.h2, h2 {
  font-size: 1.25rem !important; }

.h3, h3 {
  font-size: 1.0625rem !important; }

.h4, h4 {
  font-size: .9375rem !important; }

.h5, h5 {
  font-size: .8125rem !important; }

.h6, h6 {
  font-size: .625rem !important; }*/

.main-header {
  max-height: unset; }
  .main-header .logo {
    /*font-family: 'Open Sans', sans-serif;*/
    height: 62px;
    line-height: 62px; }
  .main-header .navbar {
    height: 62px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }
    .main-header .navbar .nav > li > a {
      transition: all .3s; }
      .main-header .navbar .nav > li > a:hover {
        border-radius: 5px; }
  .main-header .sidebar-toggle, .main-header .navbar-custom-menu, .main-header .navbar-right {
    height: 62px;
    display: flex;
    align-items: center; }

.main-sidebar {
  box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15) !important;
  padding-top: 62px; }
  .main-sidebar .logo {
    width: 100%;
    /*font-family: 'Open Sans',sans-serif;*/
    height: 62px;
    line-height: 62px;
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    display: none; }
  .main-sidebar hr {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 20px 24px; }

.control-sidebar {
  padding-top: 62px; }

.sidebar-menu li.header {
  background: transparent !important;
  padding: 6px 24px;
  /*font-size: .75rem;*/
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: bold;
  margin-bottom: 8px; }
.sidebar-menu li.active > a {
  font-weight: 800 !important; }
.sidebar-menu > li > a {
  font-weight: 400 !important;
  padding: 10px 16px 10px 24px; }

.sidebar-menu > li > a > .fa, .sidebar-menu > li > a > .glyphicon, .sidebar-menu > li > a > .ion, .treeview-menu > li > a > .fa, .treeview-menu > li > a > .glyphicon, .treeview-menu > li > a > .ion {
  width: 25px;
  font-size: 16px; }

/*.treeview-menu > li > a {
  padding: 10px 16px 10px 24px; }*/

.sidebar-collapse .sidebar-menu > li > a {
  padding: 12px 5px 12px 15px; }

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 125px;
  font-size: 13px; }

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a {
  padding: 16px 12px; }

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
  word-wrap: break-word;
  overflow: hidden;
  margin-top: 6px;
  white-space: normal; }

.navbar-nav > .notifications-menu > .dropdown-menu, .navbar-nav > .messages-menu > .dropdown-menu, .navbar-nav > .tasks-menu > .dropdown-menu {
  width: 325px !important; }

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu, .navbar-nav > .messages-menu > .dropdown-menu > li .menu, .navbar-nav > .tasks-menu > .dropdown-menu > li .menu {
  max-height: 230px; }

.navbar-nav > .dropdown > .dropdown-menu {
  margin-top: 0px;
  border-width: 0px;
  border-radius: 5px !important;
  box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1); }
  .navbar-nav > .dropdown > .dropdown-menu .header {
    padding: 16px !important;
    color: #8898aa !important;
    font-weight: 600; }
  .navbar-nav > .dropdown > .dropdown-menu > li.footer {
    padding: 6px;
    border-top: 1px solid #f4f4f4; }

/* Custom sidebar collapse for side-bar class (Tailwind-based sidebar) */
@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .side-bar {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    overflow: visible !important;
  }
  
  .sidebar-mini.sidebar-collapse .side-bar #side-bar {
    overflow: visible !important;
  }
  
  .sidebar-mini.sidebar-collapse .side-bar .side-bar-heading {
    display: none !important;
  }
  
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > a:not(.drop_down),
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > .drop_down {
    padding: 12px 5px 12px 15px !important;
    justify-content: center !important;
  }
  
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > a > span,
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > .drop_down > span {
    display: none !important;
  }
  
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > .drop_down > svg {
    display: none !important;
  }
  
  /* Make wrapper div position relative for absolute positioning of submenu */
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > div {
    position: relative !important;
  }
  
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled {
    display: none !important;
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    width: 220px !important;
    z-index: 9999 !important;
    background: white !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    padding: 6px 0 !important;
    min-height: auto !important;
    margin-left: 2px !important;
  }
  
  /* Arrow/triangle pointer for submenu */
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled::before {
    content: '' !important;
    position: absolute !important;
    left: -6px !important;
    top: 12px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid white !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    z-index: 10000 !important;
  }
  
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled::after {
    content: '' !important;
    position: absolute !important;
    left: -7px !important;
    top: 12px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 7px solid transparent !important;
    border-right: 7px solid #e8e8e8 !important;
    border-top: 7px solid transparent !important;
    border-bottom: 7px solid transparent !important;
    z-index: 9998 !important;
  }
  
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > div:hover > .chiled {
    display: block !important;
  }
  
  /* Add a small delay before hiding submenu to make it easier to access */
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled {
    transition: opacity 0.1s ease, visibility 0.1s ease !important;
  }
  
  /* Fix flashing - ensure child menu stays visible when hovering over it */
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled:hover {
    display: block !important;
  }
  
  /* Style child menu items in collapsed state */
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled > div > a {
    padding: 10px 16px !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
    color: #525f7f !important;
    font-size: 13px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transition: background-color 0.15s ease !important;
  }
  
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled > div > a:hover {
    background-color: #f4f5f7 !important;
    color: #32325d !important;
  }
  
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled > div > a > span {
    display: inline !important;
  }
  
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled > div > a > i,
  .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled > div > a > svg {
    margin-right: 10px !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }
}
    .navbar-nav > .dropdown > .dropdown-menu > li.footer > a, .navbar-nav > .dropdown > .dropdown-menu > li.footer > a:hover {
      border: 0px !important;
      color: #5e72e4 !important;
      font-size: 14px;
      font-weight: 600; }

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
  color: #525f7f;
  font-size: 13px;
  border-bottom: 0px; }
  .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover {
    background: #f4f4f5; }

.notifications-menu .notif-info {
  font-size: 13px;
  margin-bottom: 3px; }
.notifications-menu .time {
  display: block;
  color: #7d8c95;
  font-size: 11px;
  margin-top: 4px;
  margin-left: 52px; }
.notifications-menu .unread {
  background: #f4f4f4; }
  .notifications-menu .unread .notif-info {
    font-weight: 600;
    color: #000; }

.dropdown-menu .unread {
  background: #f4f4f5; }

.user-box {
  display: flex;
  padding: .5rem 1rem; }
  .user-box .image img {
    width: 3.75rem;
    height: 3.75rem; }
  .user-box .u-text {
    padding: 0 10px; }
    .user-box .u-text h4 {
      margin-bottom: 5px;
      margin-top: 4px;
      font-size: 14px;
      font-weight: 400;
      line-height: 1; }
    .user-box .u-text .text-muted {
      font-size: 12px;
      margin-bottom: 5px; }
    .user-box .u-text .btn {
      font-size: 11px; }

.dropdown-user {
  padding-bottom: 8px !important; }

.dropdown-divider {
  height: 0;
  margin: .5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef; }

.dropdown-item {
  display: block;
  width: 100%;
  padding: .25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529 !important;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0; }

.notif-icon {
  float: left;
  width: 40px !important;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px !important;
  margin-right: 12px; }

.content-wrapper {
  background-color: #f8f9fe; }
  .content-wrapper .content-header, .content-wrapper .content {
    padding: 15px; }
  .content-wrapper .content-header {
    padding-bottom: 0px; }

.main-footer {
  background: #f8f9fe;
  border-top: 0;
  padding: 0 15px 15px; }

.bg-light-blue, .label-primary, .modal-primary .modal-body, .progress-bar {
  background-color: #1572E8 !important; }

.bg-red, .callout.callout-danger, .alert-danger, .alert-error, .label-danger, .modal-danger .modal-body, .progress-bar-red, .progress-bar-danger {
  background-color: #f5365c !important; }

.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body, .progress-bar-aqua, .progress-bar-info {
  background-color: #11cdef !important; }

.bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body, .progress-bar-yellow, .progress-bar-warning {
  background-color: #FFAD46 !important; }

.bg-green, .callout.callout-success, .alert-success, .label-success, .modal-success .modal-body, .progress-bar-green, .progress-bar-success {
  background-color: #2dce89 !important; }

.text-light-blue, .text-primary {
  color: #1572E8 !important; }

.text-red, .text-danger {
  color: #f5365c !important; }

.text-aqua, .text-info {
  color: #11cdef !important; }

.text-yellow, .text-warning {
  color: #FFAD46 !important; }

.text-green, .text-success {
  color: #2dce89 !important; }

.text-white {
  color: #fff !important; }

.box, .info-box {
  margin-bottom: 30px;
  box-shadow: 2px 2px 4px rgba(136, 152, 170, 0.15) !important;
  border-radius: 5px; }

/*.box {
  border-top-width: 0px; }*/
  .box .box-header, .box .box-body, .box .box-footer {
    padding: 20px 24px; }

.row-custom {
  display: flex;
  flex-wrap: wrap; }
  .row-custom .col-custom {
    display: flex; }

.info-box {
  overflow: hidden; }
  .info-box .progress {
    background: rgba(0, 0, 0, 0.08);
    margin: 5px -16px 5px -16px;
    height: 2px; }

.info-box-text {
  color: #8898aa;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px; }

.info-box-number {
  font-size: 20px;
  word-wrap: break-word; }

.info-box-content {
  padding: 12px 16px; }

.info-box-icon {
  background: rgba(0, 0, 0, 0.08);
  margin-bottom: -99999px;
  padding-bottom: 99999px; }

.info-box-new-style {
  padding: 12px !important;
  padding-right: 0px !important; 
  transform: perspective(1500px) rotateY(0deg);
  transition: transform 1s ease 0s;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.info-box-new-style:hover {
    transform: perspective(3000px) rotateY(15deg);
  }
  .info-box-new-style .info-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 64px;
    margin-bottom: 0;
    padding-bottom: 0;
    height: 64px;
    width: 64px;
    line-height: 64px;
    font-size: unset;
    box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15) !important; }
    .info-box-new-style .info-box-icon i {
      font-size: 32px; }
    .info-box-new-style .info-box-icon i.fa {
      font-size: 26px; }
  .info-box-new-style .info-box-content {
    padding: 6px 0px 6px 12px;
    margin-left: 64px; }

.btn .btn-label {
  display: inline-block; }
  .btn .btn-label i {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 2px;
    margin-left: -2px;
    line-height: 0;
    margin-top: -2.5px; }
  .btn .btn-label.just-icon i {
    margin-left: 0 !important;
    margin-right: 0px !important; }

.btn-icon {
  font-size: .9375rem;
  height: 2.5125rem;
  line-height: normal;
  min-width: 2.5125rem;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 2.5125rem; }

.btn-round {
  border-radius: 50px !important; }

.btn-primary {
  background: #1572E8;
  border-color: #1367d1; }
  .btn-primary:hover {
    background: #1367d1;
    border-color: #115bb9; }

.btn-success {
  background: #2dce89;
  border-color: #28b97b; }
  .btn-success:hover {
    background: #28b97b;
    border-color: #24a46d; }

.btn-info {
  background: #11cdef;
  border-color: #0fb9d8; }
  .btn-info:hover {
    background: #0fb9d8;
    border-color: #0da5c0; }

.btn-danger {
  background: #f5365c;
  border-color: #f41e48; }
  .btn-danger:hover {
    background: #f41e48;
    border-color: #ec0c38; }

.btn-warning {
  background: #FFAD46;
  border-color: #ffa22d; }
  .btn-warning:hover {
    background: #ffa22d;
    border-color: #ff9613; }

.btn-border-primary {
  background: transparent !important;
  border-color: #1572E8;
  color: #1572E8; }
  .btn-border-primary:hover {
    background: transparent !important;
    border-color: #115bb9;
    color: #115bb9; }

.btn-border-success {
  background: transparent !important;
  border-color: #2dce89;
  color: #2dce89; }
  .btn-border-success:hover {
    background: transparent !important;
    border-color: #24a46d;
    color: #24a46d; }

.btn-border-info {
  background: transparent !important;
  border-color: #11cdef;
  color: #11cdef; }
  .btn-border-info:hover {
    background: transparent !important;
    border-color: #0da5c0;
    color: #0da5c0; }

.btn-border-danger {
  background: transparent !important;
  border-color: #f5365c;
  color: #f5365c; }
  .btn-border-danger:hover {
    background: transparent !important;
    border-color: #ec0c38;
    color: #ec0c38; }

.btn-border-warning {
  background: transparent !important;
  border-color: #FFAD46;
  color: #FFAD46; }
  .btn-border-warning:hover {
    background: transparent !important;
    border-color: #ff9613;
    color: #ff9613; }

.box-table thead th {
  background-color: #f6f9fc;
  color: #8898aa;
  border-color: #e9ecef; }
.box-table td, .box-table th {
  padding: .8rem 1.5rem !important; }

.skin-blue .main-sidebar, .skin-black .main-sidebar, .skin-purple .main-sidebar, .skin-green .main-sidebar, .skin-red .main-sidebar, .skin-yellow .main-sidebar {
  background: #21243d !important;
  border-right: 0px !important; }
.skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li.active > a, .skin-blue .sidebar-menu > li.menu-open > a, .skin-black .sidebar-menu > li:hover > a, .skin-black .sidebar-menu > li.active > a, .skin-black .sidebar-menu > li.menu-open > a, .skin-purple .sidebar-menu > li:hover > a, .skin-purple .sidebar-menu > li.active > a, .skin-purple .sidebar-menu > li.menu-open > a, .skin-green .sidebar-menu > li:hover > a, .skin-green .sidebar-menu > li.active > a, .skin-green .sidebar-menu > li.menu-open > a, .skin-red .sidebar-menu > li:hover > a, .skin-red .sidebar-menu > li.active > a, .skin-red .sidebar-menu > li.menu-open > a, .skin-yellow .sidebar-menu > li:hover > a, .skin-yellow .sidebar-menu > li.active > a, .skin-yellow .sidebar-menu > li.menu-open > a {
  background: #1d1f33 !important; }
.skin-blue .sidebar-menu > li > .treeview-menu, .skin-black .sidebar-menu > li > .treeview-menu, .skin-purple .sidebar-menu > li > .treeview-menu, .skin-green .sidebar-menu > li > .treeview-menu, .skin-red .sidebar-menu > li > .treeview-menu, .skin-yellow .sidebar-menu > li > .treeview-menu {
  background: #1d1f33 !important; }

.skin-blue-light .main-sidebar, .skin-black-light .main-sidebar, .skin-purple-light .main-sidebar, .skin-green-light .main-sidebar, .skin-red-light .main-sidebar, .skin-yellow-light .main-sidebar {
  background: #fff !important;
  border-right: 0px !important; }
.skin-blue-light .sidebar-menu > li:hover > a, .skin-blue-light .sidebar-menu > li.active > a, .skin-blue-light .sidebar-menu > li.menu-open > a, .skin-black-light .sidebar-menu > li:hover > a, .skin-black-light .sidebar-menu > li.active > a, .skin-black-light .sidebar-menu > li.menu-open > a, .skin-purple-light .sidebar-menu > li:hover > a, .skin-purple-light .sidebar-menu > li.active > a, .skin-purple-light .sidebar-menu > li.menu-open > a, .skin-green-light .sidebar-menu > li:hover > a, .skin-green-light .sidebar-menu > li.active > a, .skin-green-light .sidebar-menu > li.menu-open > a, .skin-red-light .sidebar-menu > li:hover > a, .skin-red-light .sidebar-menu > li.active > a, .skin-red-light .sidebar-menu > li.menu-open > a, .skin-yellow-light .sidebar-menu > li:hover > a, .skin-yellow-light .sidebar-menu > li.active > a, .skin-yellow-light .sidebar-menu > li.menu-open > a {
  background: #f4f4f5 !important;
  color: rgba(0, 0, 0, 0.9); }
.skin-blue-light .sidebar-menu > li > .treeview-menu, .skin-black-light .sidebar-menu > li > .treeview-menu, .skin-purple-light .sidebar-menu > li > .treeview-menu, .skin-green-light .sidebar-menu > li > .treeview-menu, .skin-red-light .sidebar-menu > li > .treeview-menu, .skin-yellow-light .sidebar-menu > li > .treeview-menu {
  background: #f4f4f5 !important; }
.skin-blue-light .sidebar-menu > li.active > a, .skin-black-light .sidebar-menu > li.active > a, .skin-purple-light .sidebar-menu > li.active > a, .skin-green-light .sidebar-menu > li.active > a, .skin-red-light .sidebar-menu > li.active > a, .skin-yellow-light .sidebar-menu > li.active > a {
  border-color: inherit; }

.skin-blue .main-header .logo, .skin-blue-light .main-header .logo {
  background: #1572E8; }
  .skin-blue .main-header .logo:hover, .skin-blue-light .main-header .logo:hover {
    background: #1572E8; }
.skin-blue .main-header .navbar, .skin-blue-light .main-header .navbar {
  background-color: #2b80ec;
background-image: linear-gradient(to right, #2b80ec, #1D1F33); }
.skin-blue .main-header li.user-header, .skin-blue-light .main-header li.user-header {
  background-color: #2b80ec; }
.skin-blue .main-sidebar .logo, .skin-blue-light .main-sidebar .logo {
  background: #1572E8;
  color: #fff; }
  .skin-blue .main-sidebar .logo:hover, .skin-blue-light .main-sidebar .logo:hover {
    background: #1572E8; }
.skin-blue .content-wrapper .content-header-custom, .skin-blue-light .content-wrapper .content-header-custom {
  background-color: #2b80ec;
background-image: linear-gradient(to right, #2b80ec, #1D1F33);
  color: #fff !important;
  padding: 15px 15px 200px; }
  .skin-blue .content-wrapper .content-header-custom h1, .skin-blue .content-wrapper .content-header-custom small, .skin-blue .content-wrapper .content-header-custom a, .skin-blue-light .content-wrapper .content-header-custom h1, .skin-blue-light .content-wrapper .content-header-custom small, .skin-blue-light .content-wrapper .content-header-custom a {
    color: #fff !important; }
  .skin-blue .content-wrapper .content-header-custom .breadcrumb, .skin-blue-light .content-wrapper .content-header-custom .breadcrumb {
    color: #fff; }
    .skin-blue .content-wrapper .content-header-custom .breadcrumb > .active, .skin-blue-light .content-wrapper .content-header-custom .breadcrumb > .active {
      color: #fff; }
.skin-blue .content-wrapper .content-custom, .skin-blue-light .content-wrapper .content-custom {
  margin-top: -210px; }

.skin-red .main-header .logo, .skin-red-light .main-header .logo {
  background: #f5365c; }
  .skin-red .main-header .logo:hover, .skin-red-light .main-header .logo:hover {
    background: #f5365c; }
.skin-red .main-header .navbar, .skin-red-light .main-header .navbar {
  background-color: #f64e70;
background-image: linear-gradient(to right, #f64e70, #245b80); }
.skin-red .main-header li.user-header, .skin-red-light .main-header li.user-header {
  background-color: #f64e70; }
.skin-red .main-sidebar .logo, .skin-red-light .main-sidebar .logo {
  background: #f5365c;
  color: #fff; }
  .skin-red .main-sidebar .logo:hover, .skin-red-light .main-sidebar .logo:hover {
    background: #f5365c; }
.skin-red .content-wrapper .content-header-custom, .skin-red-light .content-wrapper .content-header-custom {
  background-color: #f64e70;
background-image: linear-gradient(to right, #f64e70, #245b80);
  color: #fff !important;
  padding: 15px 15px 200px; }
  .skin-red .content-wrapper .content-header-custom h1, .skin-red .content-wrapper .content-header-custom small, .skin-red .content-wrapper .content-header-custom a, .skin-red-light .content-wrapper .content-header-custom h1, .skin-red-light .content-wrapper .content-header-custom small, .skin-red-light .content-wrapper .content-header-custom a {
    color: #fff !important; }
  .skin-red .content-wrapper .content-header-custom .breadcrumb, .skin-red-light .content-wrapper .content-header-custom .breadcrumb {
    color: #fff; }
    .skin-red .content-wrapper .content-header-custom .breadcrumb > .active, .skin-red-light .content-wrapper .content-header-custom .breadcrumb > .active {
      color: #fff; }
.skin-red .content-wrapper .content-custom, .skin-red-light .content-wrapper .content-custom {
  margin-top: -210px; }

.skin-purple .main-header .logo, .skin-purple-light .main-header .logo {
  background: #605ca8; }
  .skin-purple .main-header .logo:hover, .skin-purple-light .main-header .logo:hover {
    background: #605ca8; }
.skin-purple .main-header .navbar, .skin-purple-light .main-header .navbar {
  background-color: #706db1;
background-image: linear-gradient(to right, #706db1, #245b80); }
.skin-purple .main-header li.user-header, .skin-purple-light .main-header li.user-header {
  background-color: #706db1; }
.skin-purple .main-sidebar .logo, .skin-purple-light .main-sidebar .logo {
  background: #605ca8;
  color: #fff; }
  .skin-purple .main-sidebar .logo:hover, .skin-purple-light .main-sidebar .logo:hover {
    background: #605ca8; }
.skin-purple .content-wrapper .content-header-custom, .skin-purple-light .content-wrapper .content-header-custom {
  background-color: #706db1;
background-image: linear-gradient(to right, #706db1, #245b80);
  color: #fff !important;
  padding: 15px 15px 200px; }
  .skin-purple .content-wrapper .content-header-custom h1, .skin-purple .content-wrapper .content-header-custom small, .skin-purple .content-wrapper .content-header-custom a, .skin-purple-light .content-wrapper .content-header-custom h1, .skin-purple-light .content-wrapper .content-header-custom small, .skin-purple-light .content-wrapper .content-header-custom a {
    color: #fff !important; }
  .skin-purple .content-wrapper .content-header-custom .breadcrumb, .skin-purple-light .content-wrapper .content-header-custom .breadcrumb {
    color: #fff; }
    .skin-purple .content-wrapper .content-header-custom .breadcrumb > .active, .skin-purple-light .content-wrapper .content-header-custom .breadcrumb > .active {
      color: #fff; }
.skin-purple .content-wrapper .content-custom, .skin-purple-light .content-wrapper .content-custom {
  margin-top: -210px; }

.skin-green .main-header .logo, .skin-green-light .main-header .logo {
  background: #2dce89; }
  .skin-green .main-header .logo:hover, .skin-green-light .main-header .logo:hover {
    background: #2dce89; }
.skin-green .main-header .navbar, .skin-green-light .main-header .navbar {
  background-color: #3fd595;
background-image: linear-gradient(to right, #3fd595, #1b9aaa); }
.skin-green .main-header li.user-header, .skin-green-light .main-header li.user-header {
  background-color: #3fd595; }
.skin-green .main-sidebar .logo, .skin-green-light .main-sidebar .logo {
  background: #2dce89;
  color: #fff; }
  .skin-green .main-sidebar .logo:hover, .skin-green-light .main-sidebar .logo:hover {
    background: #2dce89; }
.skin-green .content-wrapper .content-header-custom, .skin-green-light .content-wrapper .content-header-custom {
  background-color: #3fd595;
background-image: linear-gradient(to right, #3fd595, #1b9aaa);
  color: #fff !important;
  padding: 15px 15px 200px; }
  .skin-green .content-wrapper .content-header-custom h1, .skin-green .content-wrapper .content-header-custom small, .skin-green .content-wrapper .content-header-custom a, .skin-green-light .content-wrapper .content-header-custom h1, .skin-green-light .content-wrapper .content-header-custom small, .skin-green-light .content-wrapper .content-header-custom a {
    color: #fff !important; }
  .skin-green .content-wrapper .content-header-custom .breadcrumb, .skin-green-light .content-wrapper .content-header-custom .breadcrumb {
    color: #fff; }
    .skin-green .content-wrapper .content-header-custom .breadcrumb > .active, .skin-green-light .content-wrapper .content-header-custom .breadcrumb > .active {
      color: #fff; }
.skin-green .content-wrapper .content-custom, .skin-green-light .content-wrapper .content-custom {
  margin-top: -210px; }

.skin-yellow .main-header .logo, .skin-yellow-light .main-header .logo {
  background: #FFAD46; }
  .skin-yellow .main-header .logo:hover, .skin-yellow-light .main-header .logo:hover {
    background: #FFAD46; }
.skin-yellow .main-header .navbar, .skin-yellow-light .main-header .navbar {
  background-color: #ffb860;
background-image: linear-gradient(to right, #ffb860, #245b80); }
.skin-yellow .main-header li.user-header, .skin-yellow-light .main-header li.user-header {
  background-color: #ffb860; }
.skin-yellow .main-sidebar .logo, .skin-yellow-light .main-sidebar .logo {
  background: #FFAD46;
  color: #fff; }
  .skin-yellow .main-sidebar .logo:hover, .skin-yellow-light .main-sidebar .logo:hover {
    background: #FFAD46; }
.skin-yellow .content-wrapper .content-header-custom, .skin-yellow-light .content-wrapper .content-header-custom {
  background-color: #ffb860;
background-image: linear-gradient(to right, #ffb860, #245b80);
  color: #fff !important;
  padding: 15px 15px 200px; }
  .skin-yellow .content-wrapper .content-header-custom h1, .skin-yellow .content-wrapper .content-header-custom small, .skin-yellow .content-wrapper .content-header-custom a, .skin-yellow-light .content-wrapper .content-header-custom h1, .skin-yellow-light .content-wrapper .content-header-custom small, .skin-yellow-light .content-wrapper .content-header-custom a {
    color: #fff !important; }
  .skin-yellow .content-wrapper .content-header-custom .breadcrumb, .skin-yellow-light .content-wrapper .content-header-custom .breadcrumb {
    color: #fff; }
    .skin-yellow .content-wrapper .content-header-custom .breadcrumb > .active, .skin-yellow-light .content-wrapper .content-header-custom .breadcrumb > .active {
      color: #fff; }
.skin-yellow .content-wrapper .content-custom, .skin-yellow-light .content-wrapper .content-custom {
  margin-top: -210px; }

.skin-black .main-header .logo, .skin-black-light .main-header .logo {
  background: #313140; }
  .skin-black .main-header .logo:hover, .skin-black-light .main-header .logo:hover {
    background: #313140; }
.skin-black .main-header .navbar, .skin-black-light .main-header .navbar {
  background-color: #3c3c4e;
background-image: linear-gradient(to right, #3c3c4e, #245b80); }
.skin-black .main-header li.user-header, .skin-black-light .main-header li.user-header {
  background-color: #3c3c4e; }
.skin-black .main-sidebar .logo, .skin-black-light .main-sidebar .logo {
  background: #313140;
  color: #fff; }
  .skin-black .main-sidebar .logo:hover, .skin-black-light .main-sidebar .logo:hover {
    background: #313140; }
.skin-black .content-wrapper .content-header-custom, .skin-black-light .content-wrapper .content-header-custom {
  background-color: #3c3c4e;
background-image: linear-gradient(to right, #3c3c4e, #245b80);
  color: #fff !important;
  padding: 15px 15px 200px; }
  .skin-black .content-wrapper .content-header-custom h1, .skin-black .content-wrapper .content-header-custom small, .skin-black .content-wrapper .content-header-custom a, .skin-black-light .content-wrapper .content-header-custom h1, .skin-black-light .content-wrapper .content-header-custom small, .skin-black-light .content-wrapper .content-header-custom a {
    color: #fff !important; }
  .skin-black .content-wrapper .content-header-custom .breadcrumb, .skin-black-light .content-wrapper .content-header-custom .breadcrumb {
    color: #fff; }
    .skin-black .content-wrapper .content-header-custom .breadcrumb > .active, .skin-black-light .content-wrapper .content-header-custom .breadcrumb > .active {
      color: #fff; }
.skin-black .content-wrapper .content-custom, .skin-black-light .content-wrapper .content-custom {
  margin-top: -210px; }
.skin-black .main-header, .skin-black-light .main-header {
  color: #fff !important; }
  .skin-black .main-header .logo, .skin-black-light .main-header .logo {
    color: #fff;
    border-right: 0px; }
  .skin-black .main-header .navbar > .sidebar-toggle, .skin-black-light .main-header .navbar > .sidebar-toggle {
    color: #fff !important; }
  .skin-black .main-header .navbar .nav > li > a, .skin-black-light .main-header .navbar .nav > li > a {
    color: #fff !important; }

.skin-black-light .main-header .navbar .sidebar-toggle:hover, .skin-black-light .main-header .navbar .nav > li > a:hover, .skin-black-light .main-header .navbar .nav > li > a:active, .skin-black-light .main-header .navbar .nav > li > a:focus, .skin-black-light .main-header .navbar .nav .open > a, .skin-black-light .main-header .navbar .nav .open > a:hover, .skin-black-light .main-header .navbar .nav .open > a:focus, .skin-black-light .main-header .navbar .nav > .active > a {
  background: #000; }

.skin-black .main-header .navbar > .sidebar-toggle, .skin-black-light .main-header .navbar > .sidebar-toggle {
  border-right: 0px; }

.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav > li > a, .skin-black .main-header .navbar .navbar-right > li > a, .skin-black-light .main-header .navbar .navbar-custom-menu .navbar-nav > li > a, .skin-black-light .main-header .navbar .navbar-right > li > a {
  border-left: 0px; }

@media screen and (max-width: 767px) {
  .main-header .logo {
    display: none; }

  .main-sidebar .logo {
    display: block; } }
@media screen and (max-width: 576px) {
  .main-header {
    transition: transform .3s ease-in-out,margin .3s ease-in-out; }
    .main-header .navbar-custom-menu .dropdown-menu {
      width: calc(100% - 30px);
      left: 0 !important;
      margin-left: 15px;
      margin-right: 15px;
      right: 0 !important; }

  .main-sidebar {
    padding-top: 0px; }

  .navbar-nav > .notifications-menu > .dropdown-menu > li .menu, .navbar-nav > .messages-menu > .dropdown-menu > li .menu, .navbar-nav > .tasks-menu > .dropdown-menu > li .menu {
    max-height: unset; }

  .sidebar-open .main-header {
    -webkit-transform: translate(230px, 0);
    -ms-transform: translate(230px, 0);
    -o-transform: translate(230px, 0);
    transform: translate(230px, 0); } }

/* Dark Mode Styles */
:root {
  --bg-primary: #f8f9fe;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f4f5f7;
  --text-primary: #32325d;
  --text-secondary: #525f7f;
  --text-muted: #8898aa;
  --border-color: #e9ecef;
  --shadow-color: rgba(136, 152, 170, 0.15);
  --sidebar-bg: #ffffff;
  --header-bg: #ffffff;
  --dropdown-bg: #ffffff;
  --input-bg: #ffffff;
  --input-border: #e9ecef;
  --table-header-bg: #f6f9fc;
  --table-row-hover: #f4f5f7;
  --modal-bg: #ffffff;
  --card-bg: #ffffff;
}

html.dark {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --bg-tertiary: #0f3460;
  --text-primary: #e8e8e8;
  --text-secondary: #b8b8b8;
  --text-muted: #8898aa;
  --border-color: #2a2a4a;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --sidebar-bg: #16213e;
  --header-bg: #16213e;
  --dropdown-bg: #1a1a2e;
  --input-bg: #1a1a2e;
  --input-border: #2a2a4a;
  --table-header-bg: #16213e;
  --table-row-hover: #1f1f3a;
  --modal-bg: #1a1a2e;
  --card-bg: #16213e;
}

/* Admin Card Styles - Using CSS Variables for Dark Mode Support */
.admin-card {
  color: var(--text-primary);
  border-radius: 13px;
  box-shadow: 0 4px 16px 0 var(--shadow-color), 0 1.5px 6px rgba(0, 198, 167, 0.09);
  padding: 0.6rem 0.7rem 0.7rem 1.0rem;
  margin-bottom: 1rem;
  border: none;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.16s cubic-bezier(.4,0,.2,1),
    box-shadow 0.16s cubic-bezier(.4,0,.2,1),
    filter 0.16s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 60px;
  backdrop-filter: blur(1px);
  background-color: var(--card-bg);
}

.admin-card:hover, .admin-card:focus-within {
  transform: translateY(-5px) scale(1.03) rotate(-1deg);
  box-shadow: 0 4px 16px 0 var(--shadow-color), 0 1.5px 6px rgba(0, 198, 167, 0.09);
  filter: brightness(1.10) saturate(1.13) drop-shadow(0 0 10px rgba(0, 198, 167, 0.8));
}

.admin-card .material-icons {
  font-size: 1.25rem;
  color: var(--text-secondary);
  opacity: 0.92;
  margin-bottom: 0.3rem;
  text-shadow: 0 1px 4px var(--shadow-color);
  padding: 0.0rem 0.0rem 0.0rem 0.7rem;
}

.admin-card-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.15rem;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px var(--shadow-color);
}

.admin-card-value {
  font-size: 1.13rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.05rem;
  line-height: 1.1;
  text-shadow: 0 1px 6px var(--shadow-color);
}

@media (min-width: 1200px) {
  .col-lg-3 {
    width: 18%;
  }
}

html.dark body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

html.dark .content-wrapper {
  background-color: var(--bg-primary) !important;
}

html.dark .main-header {
  background-color: var(--header-bg) !important;
  border-bottom-color: var(--border-color) !important;
}

html.dark .main-header .navbar .nav > li > a {
  color: var(--text-primary) !important;
}

html.dark .main-header .navbar .nav > li > a:hover {
  background-color: var(--bg-tertiary) !important;
}

html.dark .side-bar {
  background-color: var(--sidebar-bg) !important;
  border-right-color: var(--border-color) !important;
}

html.dark .side-bar .side-bar-heading {
  color: var(--text-muted) !important;
}

html.dark .side-bar #side-bar > a,
html.dark .side-bar #side-bar > .drop_down {
  color: var(--text-secondary) !important;
}

html.dark .side-bar #side-bar > a:hover,
html.dark .side-bar #side-bar > .drop_down:hover {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

html.dark .side-bar #side-bar > a.active,
html.dark .side-bar #side-bar > .drop_down.active {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

html.dark .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled {
  background: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 4px 20px var(--shadow-color) !important;
}

html.dark .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled::after {
  border-right-color: var(--border-color) !important;
}

html.dark .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled::before {
  border-right-color: var(--dropdown-bg) !important;
}

html.dark .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled > div > a {
  color: var(--text-secondary) !important;
}

html.dark .sidebar-mini.sidebar-collapse .side-bar #side-bar > div > .chiled > div > a:hover {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

html.dark .main-footer {
  background-color: var(--bg-secondary) !important;
  border-top-color: var(--border-color) !important;
}

html.dark .box,
html.dark .info-box,
html.dark .card {
  background-color: var(--card-bg) !important;
  box-shadow: 2px 2px 4px var(--shadow-color) !important;
  border-color: var(--border-color) !important;
}

html.dark .box-header,
html.dark .box-body,
html.dark .box-footer,
html.dark .card-header,
html.dark .card-body,
html.dark .card-footer {
  border-color: var(--border-color) !important;
}

html.dark .table {
  color: var(--text-primary) !important;
}

html.dark .table thead th {
  background-color: var(--table-header-bg) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}

html.dark .table td,
html.dark .table th {
  border-color: var(--border-color) !important;
}

html.dark .table tbody tr:hover {
  background-color: var(--table-row-hover) !important;
}

html.dark .form-control,
html.dark .select2-container--default .select2-selection--single,
html.dark .select2-container--default .select2-selection--multiple {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

html.dark .form-control:focus,
html.dark .select2-container--default .select2-selection--single:focus,
html.dark .select2-container--default .select2-selection--multiple:focus {
  border-color: #1572E8 !important;
  box-shadow: 0 0 0 0.2rem rgba(21, 114, 232, 0.25) !important;
}

html.dark .modal-content {
  background-color: var(--modal-bg) !important;
  border-color: var(--border-color) !important;
}

html.dark .modal-header,
html.dark .modal-footer {
  border-color: var(--border-color) !important;
}

html.dark .dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 50px 100px var(--shadow-color), 0 15px 35px var(--shadow-color), 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

html.dark .dropdown-item {
  color: var(--text-primary) !important;
}

html.dark .dropdown-item:hover,
html.dark .dropdown-item:focus {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

html.dark .dropdown-divider {
  border-color: var(--border-color) !important;
}

html.dark .btn-secondary {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .btn-secondary:hover {
  background-color: var(--border-color) !important;
  border-color: var(--border-color) !important;
}

html.dark .alert {
  border-color: var(--border-color) !important;
}

html.dark .pagination .page-link {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

html.dark .pagination .page-link:hover {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
}

html.dark .pagination .page-item.active .page-link {
  background-color: #1572E8 !important;
  border-color: #1572E8 !important;
}

html.dark .nav-tabs .nav-link {
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

html.dark .nav-tabs .nav-link.active {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  border-bottom-color: var(--bg-primary) !important;
}

html.dark .tab-content {
  background-color: var(--bg-primary) !important;
}

html.dark .tooltip-inner {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

html.dark .popover {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
}

html.dark .popover-header {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .popover-body {
  color: var(--text-primary) !important;
}

html.dark .badge {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

html.dark .progress {
  background-color: var(--bg-tertiary) !important;
}

html.dark .list-group-item {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .list-group-item:hover {
  background-color: var(--bg-tertiary) !important;
}

html.dark .skin-blue .main-sidebar,
html.dark .skin-black .main-sidebar,
html.dark .skin-purple .main-sidebar,
html.dark .skin-green .main-sidebar,
html.dark .skin-red .main-sidebar,
html.dark .skin-yellow .main-sidebar {
  background: var(--sidebar-bg) !important;
}

html.dark .skin-blue-light .main-sidebar,
html.dark .skin-black-light .main-sidebar,
html.dark .skin-purple-light .main-sidebar,
html.dark .skin-green-light .main-sidebar,
html.dark .skin-red-light .main-sidebar,
html.dark .skin-yellow-light .main-sidebar {
  background: var(--sidebar-bg) !important;
}

/* Home Page Dashboard Cards - Dark Mode */
html.dark .admin-card {
  background-color: var(--card-bg) !important;
  box-shadow: 0 4px 16px 0 var(--shadow-color), 0 1.5px 6px rgba(0, 198, 167, 0.09) !important;
  border: 1px solid var(--border-color) !important;
}

html.dark .admin-card:hover,
html.dark .admin-card:focus-within {
  box-shadow: 0 4px 16px 0 var(--shadow-color), 0 1.5px 6px rgba(0, 198, 167, 0.09) !important;
}

html.dark .admin-card .material-icons {
  color: var(--text-primary) !important;
  opacity: 0.92 !important;
}

/* Waiting List Table - Dark Mode */
html.dark .waiting-table-container {
  background-color: var(--card-bg) !important;
  box-shadow: 0 2px 4px var(--shadow-color) !important;
}

html.dark .waiting-table {
  color: var(--text-primary) !important;
}

html.dark .waiting-table th {
  background-color: var(--table-header-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html.dark .waiting-table td {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .waiting-table tbody tr {
  background-color: var(--card-bg) !important;
}

html.dark .waiting-table tbody tr:hover {
  background-color: var(--table-row-hover) !important;
}

/* Waiting List Status Row Colors - Dark Mode */
html.dark .waiting-table tr.status-waiting {
  background-color: rgba(243, 156, 18, 0.15) !important;
}

html.dark .waiting-table tr.status-waiting:hover {
  background-color: rgba(243, 156, 18, 0.25) !important;
}

html.dark .waiting-table tr.status-in-progress {
  background-color: rgba(34, 168, 255, 0.15) !important;
}

html.dark .waiting-table tr.status-in-progress:hover {
  background-color: rgba(34, 168, 255, 0.25) !important;
}

html.dark .waiting-table tr.status-completed {
  background-color: rgba(39, 174, 96, 0.15) !important;
}

html.dark .waiting-table tr.status-completed:hover {
  background-color: rgba(39, 174, 96, 0.25) !important;
}

/* Waiting List Status Badges - Dark Mode */
html.dark .status-badge.status-waiting {
  background-color: #f39c12 !important;
  color: #000 !important;
}

html.dark .status-badge.status-in-progress {
  background-color: #22a8ff !important;
  color: #000 !important;
}

html.dark .status-badge.status-completed {
  background-color: #27ae60 !important;
  color: #fff !important;
}

/* Waiting List Payment Status Badges - Dark Mode */
html.dark .payment-status-paid {
  background-color: #27ae60 !important;
  color: #fff !important;
}

html.dark .payment-status-partial {
  background-color: #f39c12 !important;
  color: #000 !important;
}

html.dark .payment-status-pending {
  background-color: #e74c3c !important;
  color: #fff !important;
}

html.dark .payment-status-due {
  background-color: #95a5a6 !important;
  color: #fff !important;
}

/* Waiting List Diagnosis Status Badges - Dark Mode */
html.dark .diagnosis-status-healthy {
  background-color: #27ae60 !important;
  color: #fff !important;
}

html.dark .diagnosis-status-not-healthy {
  background-color: #e74c3c !important;
  color: #fff !important;
}

html.dark .diagnosis-status-unknown {
  background-color: #95a5a6 !important;
  color: #fff !important;
}

/* Waiting List Filter Section - Dark Mode */
html.dark .filter-section {
  background-color: var(--card-bg) !important;
  box-shadow: 0 2px 4px var(--shadow-color) !important;
}

html.dark .filter-group label {
  color: var(--text-secondary) !important;
}

html.dark .filter-group input,
html.dark .filter-group select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

html.dark .btn-filter {
  background-color: #3c8dbc !important;
  color: #fff !important;
}

html.dark .btn-reset {
  background-color: #95a5a6 !important;
  color: #fff !important;
}

/* Waiting List Pagination - Dark Mode */
html.dark #paginationContainer .btn-default {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark #paginationContainer .btn-default:hover {
  background-color: var(--border-color) !important;
}

html.dark #paginationContainer .btn-primary {
  background-color: #3c8dbc !important;
  border-color: #367fa9 !important;
}

/* Waiting List Action Buttons - Dark Mode */
html.dark .btn-primary {
  background-color: #3c8dbc !important;
  color: #fff !important;
}

html.dark .btn-primary:hover {
  background-color: #2c6e9e !important;
}

html.dark .btn-success {
  background-color: #27ae60 !important;
  color: #fff !important;
}

html.dark .btn-success:hover {
  background-color: #229954 !important;
}

html.dark .btn-info {
  background-color: #17a2b8 !important;
  color: #fff !important;
}

html.dark .btn-info:hover {
  background-color: #138496 !important;
}

html.dark .btn-edit-icon {
  background-color: #3c8dbc !important;
  color: #fff !important;
}

html.dark .btn-edit-icon:hover {
  background-color: #2c6e9e !important;
  color: #fff !important;
}

/* Waiting List Diagnosis Notes - Dark Mode */
html.dark .diagnosis-notes {
  color: var(--text-primary) !important;
}

html.dark .response-text {
  color: var(--text-secondary) !important;
}

html.dark .ticket-number {
  color: #3c8dbc !important;
}

/* Waiting List Loading Overlay - Dark Mode */
html.dark .loading-overlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

html.dark .loading-spinner {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
}

/* Clinic Page - Dark Mode */
html.dark .clinic-header {
  background: linear-gradient(135deg, #1e3c72 0%, #2b4c7c 100%) !important;
}

html.dark .section-card {
  background-color: var(--card-bg) !important;
  box-shadow: 0 1px 3px var(--shadow-color) !important;
  border-color: var(--border-color) !important;
}

html.dark .section-header {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html.dark .section-header[style*="background: #6c5ce7"],
html.dark .section-header[style*="background: #2c3e50"],
html.dark .section-header[style*="background: #3c8dbc"] {
  background-color: var(--bg-tertiary) !important;
}

html.dark .section-body {
  background-color: var(--card-bg) !important;
}

html.dark .receptionist-card {
  background-color: rgba(108, 92, 231, 0.1) !important;
  border-left-color: #6c5ce7 !important;
}

/* Clinic Page Medical Tabs - Dark Mode */
html.dark .medical-tabs-nav {
  background-color: var(--bg-tertiary) !important;
  border-bottom-color: var(--border-color) !important;
}

html.dark .tab-btn {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

html.dark .tab-btn:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

html.dark .tab-btn.active {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  border-bottom-color: var(--bg-primary) !important;
}

html.dark .tab-btn[style*="background: #27ae60"] {
  background-color: #27ae60 !important;
  color: #fff !important;
}

html.dark .tab-content {
  background-color: var(--bg-primary) !important;
}

html.dark .tab-pane {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Clinic Page Product Grid - Dark Mode */
html.dark .product-grid-container {
  background-color: var(--bg-secondary) !important;
}

html.dark .product-toggle-btn {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .product-toggle-btn .btn-label-en {
  color: var(--text-primary) !important;
}

html.dark .product-toggle-btn .btn-label-ar {
  color: var(--text-secondary) !important;
}

html.dark .product-toggle-btn .btn-price {
  color: var(--text-muted) !important;
}

html.dark .product-toggle-btn.btn-primary {
  background-color: #2563eb !important;
  border-color: #1d4ed8 !important;
}

html.dark .product-toggle-btn.btn-primary:hover {
  background-color: #1d4ed8 !important;
  border-color: #1e40af !important;
}

html.dark .product-toggle-btn:hover {
  background-color: var(--border-color) !important;
}

/* Clinic Page Cart Table - Dark Mode */
html.dark .table-bordered {
  border-color: var(--border-color) !important;
}

html.dark .table-bordered th,
html.dark .table-bordered td {
  border-color: var(--border-color) !important;
}

html.dark .table-bordered tr.bg-primary {
  background-color: rgba(60, 141, 188, 0.2) !important;
  color: var(--text-primary) !important;
}

html.dark .table-bordered tr.success {
  background-color: rgba(39, 174, 96, 0.2) !important;
  color: var(--text-primary) !important;
}

html.dark .table-bordered .text-muted {
  color: var(--text-muted) !important;
}

/* Clinic Page Form Controls - Dark Mode */
html.dark .form-control {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

html.dark .form-control:focus {
  border-color: #1572E8 !important;
  box-shadow: 0 0 0 0.2rem rgba(21, 114, 232, 0.25) !important;
}

html.dark .input-group-btn .btn {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Clinic Page Bird Status Buttons - Dark Mode (Preserve Semantic Colors) */
html.dark .bird-status-btn {
  background-color: var(--bg-tertiary) !important;
  border-color: #6c5ce7 !important;
  color: #6c5ce7 !important;
}

html.dark .bird-status-btn:hover {
  background-color: rgba(108, 92, 231, 0.2) !important;
  border-color: #5b4bd5 !important;
}

html.dark .bird-status-btn.active {
  background-color: #6c5ce7 !important;
  color: #fff !important;
  border-color: #5b4bd5 !important;
}

html.dark .bird-status-btn[data-status="new_bird"].active {
  background-color: #27ae60 !important;
  border-color: #219a52 !important;
}

html.dark .bird-status-btn[data-status="pre_purchase"].active {
  background-color: #f39c12 !important;
  border-color: #e67e22 !important;
}

html.dark .bird-status-btn[data-status="shop_bird"].active {
  background-color: #3498db !important;
  border-color: #2980b9 !important;
}

html.dark .bird-status-btn[data-status="new_owner"].active {
  background-color: #e74c3c !important;
  border-color: #c0392b !important;
}

/* Clinic Page Buttons - Dark Mode */
html.dark .btn-save-main {
  background-color: #27ae60 !important;
  color: #fff !important;
}

html.dark .btn-save-main:hover {
  background-color: #229954 !important;
}

html.dark .btn-cancel {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .btn-cancel:hover {
  background-color: var(--border-color) !important;
}

/* Clinic Page Modals - Dark Mode */
html.dark .fixed-modal-overlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

html.dark .fixed-modal-container {
  background-color: var(--modal-bg) !important;
  border-color: var(--border-color) !important;
}

html.dark .fixed-modal-header {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .fixed-modal-body {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
}

html.dark .fixed-modal-footer {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
}

html.dark .panel.panel-default {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

html.dark .panel-heading {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .panel-body {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

html.dark .panel-title {
  color: var(--text-primary) !important;
}

/* Clinic Page Order Search Bar - Dark Mode */
html.dark .order-search-bar {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
}

html.dark .order-search-bar button {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .order-search-bar button:hover {
  background-color: var(--border-color) !important;
}

html.dark .order-search-bar .btn-new {
  background-color: #27ae60 !important;
  color: #fff !important;
}

html.dark .order-search-bar .btn-new:hover {
  background-color: #229954 !important;
}

/* Clinic Page Cart Section - Dark Mode */
html.dark .cart-section-header {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Clinic Page Clinical Examination Section - Dark Mode */
html.dark #clinical-examination-section .section-header {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Clinic Page Diagnosis Cell Colors - Dark Mode (Preserve Semantic Colors) */
html.dark .diagnosis-cell-healthy {
  background-color: #27ae60 !important;
  color: #fff !important;
}

html.dark .diagnosis-cell-not-healthy {
  background-color: #e74c3c !important;
  color: #fff !important;
}

html.dark .diagnosis-cell-not-assessed {
  background-color: #95a5a6 !important;
  color: #fff !important;
}

html.dark .admin-card-title {
  color: var(--text-primary) !important;
}

html.dark .admin-card-value {
  color: var(--text-primary) !important;
}

/* Chart containers - Dark Mode */
html.dark .tw-bg-gray-50 {
  background-color: var(--bg-tertiary) !important;
}

html.dark .tw-border-gray-200 {
  border-color: var(--border-color) !important;
}

html.dark .tw-bg-white {
  background-color: var(--bg-secondary) !important;
}

html.dark .tw-ring-gray-200 {
  --tw-ring-color: var(--border-color) !important;
}

html.dark .tw-shadow-sm {
  box-shadow: 0 1px 2px 0 var(--shadow-color) !important;
}

html.dark .tw-text-gray-400 {
  color: var(--text-muted) !important;
}

html.dark .tw-text-gray-900 {
  color: var(--text-primary) !important;
}

html.dark .tw-text-gray-600 {
  color: var(--text-secondary) !important;
}

html.dark .tw-bg-gray-100 {
  background-color: var(--bg-tertiary) !important;
}

html.dark .tw-bg-gray-200 {
  background-color: var(--border-color) !important;
}

html.dark .tw-border-gray-300 {
  border-color: var(--border-color) !important;
}

/* Form elements - Dark Mode */
html.dark .form-control[readonly],
html.dark .form-control[disabled] {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-muted) !important;
}

html.dark .input-group-text {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--input-border) !important;
  color: var(--text-secondary) !important;
}

html.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
}

html.dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-muted) transparent transparent transparent !important;
}

html.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

html.dark .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

html.dark .select2-dropdown {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
}

html.dark .select2-search__field {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

/* DataTables - Dark Mode */
html.dark table.dataTable {
  color: var(--text-primary) !important;
}

html.dark table.dataTable thead th {
  background-color: var(--table-header-bg) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}

html.dark table.dataTable tbody td {
  border-color: var(--border-color) !important;
}

html.dark table.dataTable tbody tr:hover {
  background-color: var(--table-row-hover) !important;
}

html.dark table.dataTable tbody tr.selected {
  background-color: var(--bg-tertiary) !important;
}

html.dark .dataTables_wrapper .dataTables_filter input,
html.dark .dataTables_wrapper .dataTables_length select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background-color: #1572E8 !important;
  border-color: #1572E8 !important;
  color: white !important;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .dataTables_wrapper .dataTables_info {
  color: var(--text-secondary) !important;
}

/* Buttons - Dark Mode */
html.dark .btn-primary {
  background-color: #1572E8 !important;
  border-color: #1572E8 !important;
}

html.dark .btn-primary:hover {
  background-color: #0d5bbd !important;
  border-color: #0d5bbd !important;
}

html.dark .btn-success {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}

html.dark .btn-success:hover {
  background-color: #218838 !important;
  border-color: #218838 !important;
}

html.dark .btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

html.dark .btn-danger:hover {
  background-color: #c82333 !important;
  border-color: #c82333 !important;
}

html.dark .btn-warning {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: #1a1a2e !important;
}

html.dark .btn-warning:hover {
  background-color: #e0a800 !important;
  border-color: #e0a800 !important;
  color: #1a1a2e !important;
}

html.dark .btn-info {
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
}

html.dark .btn-info:hover {
  background-color: #138496 !important;
  border-color: #138496 !important;
}

html.dark .btn-light {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .btn-light:hover {
  background-color: var(--border-color) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .btn-outline-primary {
  color: #1572E8 !important;
  border-color: #1572E8 !important;
}

html.dark .btn-outline-primary:hover {
  background-color: #1572E8 !important;
  border-color: #1572E8 !important;
  color: white !important;
}

html.dark .btn-outline-secondary {
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

html.dark .btn-outline-secondary:hover {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Card components - Dark Mode */
html.dark .card-header {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .card-footer {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

/* Nav pills - Dark Mode */
html.dark .nav-pills .nav-link {
  color: var(--text-secondary) !important;
}

html.dark .nav-pills .nav-link.active {
  background-color: #1572E8 !important;
  color: white !important;
}

html.dark .nav-pills .nav-link:hover:not(.active) {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Breadcrumb - Dark Mode */
html.dark .breadcrumb {
  background-color: var(--bg-tertiary) !important;
}

html.dark .breadcrumb-item a {
  color: var(--text-secondary) !important;
}

html.dark .breadcrumb-item.active {
  color: var(--text-muted) !important;
}

html.dark .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted) !important;
}

/* Alert - Dark Mode */
html.dark .alert-primary {
  background-color: rgba(21, 114, 232, 0.2) !important;
  border-color: #1572E8 !important;
  color: #93c5fd !important;
}

html.dark .alert-success {
  background-color: rgba(40, 167, 69, 0.2) !important;
  border-color: #28a745 !important;
  color: #86efac !important;
}

html.dark .alert-danger {
  background-color: rgba(220, 53, 69, 0.2) !important;
  border-color: #dc3545 !important;
  color: #fca5a5 !important;
}

html.dark .alert-warning {
  background-color: rgba(255, 193, 7, 0.2) !important;
  border-color: #ffc107 !important;
  color: #fde047 !important;
}

html.dark .alert-info {
  background-color: rgba(23, 162, 184, 0.2) !important;
  border-color: #17a2b8 !important;
  color: #67e8f9 !important;
}

/* Modal - Dark Mode */
html.dark .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Tooltip - Dark Mode */
html.dark .tooltip.bs-tooltip-auto[x-placement^=top] .tooltip-inner,
html.dark .tooltip.bs-tooltip-top .tooltip-inner {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

/* Popover - Dark Mode */
html.dark .popover {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
}

html.dark .popover-header {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Progress bar - Dark Mode */
html.dark .progress-bar {
  background-color: #1572E8 !important;
}

/* List group - Dark Mode */
html.dark .list-group-flush .list-group-item {
  border-color: var(--border-color) !important;
}

/* Custom scrollbar - Dark Mode */
html.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.dark ::-webkit-scrollbar-track {
  background: var(--bg-tertiary) !important;
}

html.dark ::-webkit-scrollbar-thumb {
  background: var(--border-color) !important;
  border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted) !important;
}

/* Print styles - Dark Mode */
@media print {
  html.dark body {
    background-color: white !important;
    color: black !important;
  }
  
  html.dark .content-wrapper {
    background-color: white !important;
  }
  
  html.dark .main-header,
  html.dark .side-bar,
  html.dark .main-footer {
    display: none !important;
  }
}

/* Additional Dark Mode Fixes for Specific Issues */

/* Fix clearfix showing white */
html.dark .clearfix,
html.dark .clearfix::before,
html.dark .clearfix::after {
  background-color: transparent !important;
}

/* Fix Highcharts background showing white */
html.dark .highcharts-background {
  fill: var(--bg-primary) !important;
}

html.dark .highcharts-container {
  background-color: var(--bg-primary) !important;
}

html.dark .highcharts-root {
  background-color: var(--bg-primary) !important;
}

html.dark .highcharts-plot-background {
  fill: var(--bg-primary) !important;
}

html.dark .highcharts-panel {
  background-color: var(--bg-primary) !important;
}

html.dark .highcharts-series-group {
  background-color: var(--bg-primary) !important;
}

html.dark .highcharts-axis-labels text {
  fill: var(--text-secondary) !important;
}

html.dark .highcharts-title text,
html.dark .highcharts-subtitle text {
  fill: var(--text-primary) !important;
}

html.dark .highcharts-legend-item text {
  fill: var(--text-secondary) !important;
}

html.dark .highcharts-grid-line {
  stroke: var(--border-color) !important;
}

html.dark .highcharts-axis-line {
  stroke: var(--border-color) !important;
}

html.dark .highcharts-tooltip {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fix DataTables "Processing..." showing white */
html.dark .dataTables_processing {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .dataTables_processing .spinner {
  border-color: var(--border-color) !important;
  border-top-color: #1572E8 !important;
}

/* Fix DataTables empty state */
html.dark .dataTables_empty {
  color: var(--text-muted) !important;
  background-color: var(--bg-secondary) !important;
}

/* Fix main background showing white */
html.dark body,
html.dark .wrapper,
html.dark .content-wrapper,
html.dark .main-content,
html.dark .page-content,
html.dark .container-fluid,
html.dark .container {
  background-color: var(--bg-primary) !important;
}

/* Fix table rows showing white */
html.dark table,
html.dark table tbody,
html.dark table thead,
html.dark table tfoot,
html.dark table tr,
html.dark table td,
html.dark table th {
  background-color: transparent !important;
}

html.dark .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--table-row-hover) !important;
}

html.dark .table-striped > tbody > tr:nth-of-type(even) {
  background-color: var(--bg-secondary) !important;
}

html.dark .table-hover tbody tr:hover {
  background-color: var(--table-row-hover) !important;
}

/* Fix card/widget backgrounds */
html.dark .widget,
html.dark .widget-body,
html.dark .widget-header,
html.dark .small-box,
html.dark .info-box,
html.dark .info-box-content,
html.dark .info-box-icon {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fix form backgrounds */
html.dark .form-group,
html.dark .input-group,
html.dark .input-group-addon,
html.dark .input-group-prepend,
html.dark .input-group-append {
  background-color: transparent !important;
}

/* Fix panel/box backgrounds */
html.dark .panel,
html.dark .panel-body,
html.dark .panel-heading,
html.dark .panel-footer,
html.dark .box,
html.dark .box-body,
html.dark .box-header,
html.dark .box-footer {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fix nav/tab backgrounds */
html.dark .nav-tabs,
html.dark .nav-pills,
html.dark .nav-tabs > li > a,
html.dark .nav-pills > li > a {
  background-color: transparent !important;
  border-color: var(--border-color) !important;
}

/* Fix dropdown backgrounds */
html.dark .dropdown-menu,
html.dark .dropdown-menu > li > a {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fix modal backgrounds */
html.dark .modal,
html.dark .modal-dialog,
html.dark .modal-content,
html.dark .modal-header,
html.dark .modal-body,
html.dark .modal-footer {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fix tooltip/popover backgrounds */
html.dark .tooltip,
html.dark .popover {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fix pagination backgrounds */
html.dark .pagination,
html.dark .pagination > li > a,
html.dark .pagination > li > span {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

/* Fix breadcrumb backgrounds */
html.dark .breadcrumb,
html.dark .breadcrumb > li,
html.dark .breadcrumb > li > a {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
}

/* Fix alert backgrounds */
html.dark .alert {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fix label/badge backgrounds */
html.dark .label,
html.dark .badge {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Fix progress bar backgrounds */
html.dark .progress {
  background-color: var(--bg-tertiary) !important;
}

/* Fix list group backgrounds */
html.dark .list-group,
html.dark .list-group-item {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fix well backgrounds */
html.dark .well {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fix jumbotron backgrounds */
html.dark .jumbotron {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Fix page header backgrounds */
html.dark .page-header {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fix thumbnail backgrounds */
html.dark .thumbnail {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Fix media object backgrounds */
html.dark .media,
html.dark .media-body {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

/* Fix accordion/collapse backgrounds */
html.dark .panel-group,
html.dark .panel-collapse,
html.dark .collapse {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Fix carousel backgrounds */
html.dark .carousel,
html.dark .carousel-inner,
html.dark .carousel-item {
  background-color: var(--bg-primary) !important;
}

/* Fix affix backgrounds */
html.dark .affix,
html.dark .affix-top,
html.dark .affix-bottom {
  background-color: var(--bg-primary) !important;
}

/* Fix scrollspy backgrounds */
html.dark .scrollspy {
  background-color: var(--bg-primary) !important;
}

/* Fix typeahead backgrounds */
html.dark .typeahead,
html.dark .tt-menu,
html.dark .tt-suggestion {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fix datepicker backgrounds */
html.dark .datepicker,
html.dark .datepicker-dropdown,
html.dark .datepicker table,
html.dark .datepicker td,
html.dark .datepicker th {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fix timepicker backgrounds */
html.dark .bootstrap-timepicker-widget,
html.dark .bootstrap-timepicker-widget table,
html.dark .bootstrap-timepicker-widget td,
html.dark .bootstrap-timepicker-widget th {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fix colorpicker backgrounds */
html.dark .colorpicker,
html.dark .colorpicker-saturation,
html.dark .colorpicker-hue,
html.dark .colorpicker-alpha {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
}

/* Fix select2 backgrounds (additional) */
html.dark .select2-container--default .select2-selection--single,
html.dark .select2-container--default .select2-selection--multiple,
html.dark .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

/* Fix chosen backgrounds */
html.dark .chosen-container,
html.dark .chosen-container .chosen-drop,
html.dark .chosen-container .chosen-results,
html.dark .chosen-container .chosen-single {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Fix summernote/editor backgrounds */
html.dark .note-editor,
html.dark .note-editing-area,
html.dark .note-editable,
html.dark .note-toolbar,
html.dark .note-statusbar {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

/* Fix ckeditor backgrounds */
html.dark .ck-editor,
html.dark .ck-content,
html.dark .ck-toolbar {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

/* Fix tinymce backgrounds */
html.dark .tox-tinymce,
html.dark .tox-edit-area,
html.dark .tox-toolbar,
html.dark .tox-statusbar {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

/* Fix datatables additional elements */
html.dark .dataTables_wrapper,
html.dark .dataTables_scroll,
html.dark .dataTables_scrollHead,
html.dark .dataTables_scrollBody,
html.dark .dataTables_scrollFoot {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

html.dark .dataTables_filter,
html.dark .dataTables_length,
html.dark .dataTables_info,
html.dark .dataTables_paginate {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
}

/* Fix fixed header/footer */
html.dark .fixedHeader-floating,
html.dark .fixedHeader-locked {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Fix responsive tables */
html.dark .table-responsive {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

element.style {
    background: #16213e;
    padding: 8px;
    border-radius: 6px;
}

/* Fix nav-tabs and nav-pills showing white */
html.dark .nav-tabs,
html.dark .nav-pills {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
}

html.dark .nav-tabs > li,
html.dark .nav-pills > li {
  background-color: transparent !important;
}

html.dark .nav-tabs > li > a,
html.dark .nav-pills > li > a {
  background-color: transparent !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

html.dark .nav-tabs > li > a:hover,
html.dark .nav-pills > li > a:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

html.dark .nav-tabs > li.active > a,
html.dark .nav-pills > li.active > a,
html.dark .nav-tabs > li.active > a:hover,
html.dark .nav-pills > li.active > a:hover {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .nav-tabs > li.active > a::after,
html.dark .nav-pills > li.active > a::after {
  border-bottom-color: #1572E8 !important;
}

/* Fix nav-tabs border bottom */
html.dark .nav-tabs {
  border-bottom-color: var(--border-color) !important;
}

html.dark .nav-tabs > li > a {
  border-color: transparent transparent var(--border-color) transparent !important;
}

html.dark .nav-tabs > li.active > a,
html.dark .nav-tabs > li.active > a:hover,
html.dark .nav-tabs > li.active > a:focus {
  border-color: var(--border-color) var(--border-color) var(--bg-tertiary) var(--border-color) !important;
}

/* Fix tw-flex (Tailwind flex) showing white */
html.dark .tw-flex,
html.dark .tw-inline-flex,
html.dark .flex,
html.dark .inline-flex,
html.dark [class*="tw-flex"],
html.dark [class*=" flex"],
html.dark div[class*="flex"],
html.dark .tw-flex-col,
html.dark .flex-col,
html.dark .tw-flex-wrap,
html.dark .flex-wrap {
  background-color: transparent !important;
}

/* Fix product_box showing white in dark mode */
html.dark .product_box {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

html.dark .product_box:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Fix DataTables buttons (buttons-collection, buttons-colvis, etc.) text visibility */
html.dark .buttons-collection,
html.dark .buttons-colvis,
html.dark .dt-button,
html.dark .dt-buttons .dt-button,
html.dark .buttons-collection .dt-button,
html.dark .buttons-colvis .dt-button,
html.dark .tw-dw-btn,
html.dark .tw-dw-btn-xs,
html.dark .tw-dw-btn-outline,
html.dark .tw-my-2,
html.dark .dt-button-collection {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .buttons-collection:hover,
html.dark .buttons-colvis:hover,
html.dark .dt-button:hover,
html.dark .tw-dw-btn:hover,
html.dark .tw-dw-btn-outline:hover {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .buttons-collection:focus,
html.dark .buttons-colvis:focus,
html.dark .dt-button:focus,
html.dark .tw-dw-btn:focus,
html.dark .tw-dw-btn-outline:focus {
  box-shadow: 0 0 0 3px rgba(21, 114, 232, 0.3) !important;
  outline: none !important;
}

/* Fix DataTables buttons dropdown/collection menu */
html.dark .dt-button-collection .dt-button,
html.dark .buttons-collection .dropdown-menu,
html.dark .dt-button-collection .dropdown-menu {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

html.dark .dt-button-collection .dt-button:hover,
html.dark .buttons-collection .dropdown-menu > li > a:hover,
html.dark .dt-button-collection .dropdown-menu > li > a:hover {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Fix headings text visibility in dark mode */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark .h1,
html.dark .h2,
html.dark .h3,
html.dark .h4,
html.dark .h5,
html.dark .h6 {
  color: var(--text-primary) !important;
}

/* Fix tw-text-black showing as black (invisible) in dark mode */
html.dark .tw-text-black,
html.dark .text-black {
  color: var(--text-primary) !important;
}

/* ==========================================================================
   CLINIC PAGE DARK MODE FIXES
   ========================================================================== */

/* Clinic header */
html.dark .clinic-header {
  background: linear-gradient(135deg, #1a2a4a 0%, #253a5e 100%) !important;
  color: var(--text-primary) !important;
}

/* Section cards */
html.dark .section-card {
  background: var(--bg-secondary) !important;
  box-shadow: 0 1px 3px var(--shadow-color) !important;
  border-color: var(--border-color) !important;
}

html.dark .section-header {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html.dark .section-body {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

html.dark .receptionist-card {
  background: var(--bg-tertiary) !important;
  border-left-color: #6c5ce7 !important;
}

/* Order search bar */
html.dark .order-search-bar input {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .order-search-bar button {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html.dark .order-search-bar .btn-new {
  background: var(--success-color) !important;
}

/* Bird status buttons */
html.dark .bird-status-btn {
  background: var(--bg-tertiary) !important;
  border-color: #6c5ce7 !important;
  color: #6c5ce7 !important;
}

html.dark .bird-status-btn:hover {
  background: var(--bg-primary) !important;
  border-color: #5b4bd5 !important;
}

html.dark .bird-status-btn.active {
  background: #6c5ce7 !important;
  color: #ffffff !important;
  border-color: #5b4bd5 !important;
}

/* Product grid container */
html.dark .product-grid-container {
  background: var(--bg-tertiary) !important;
}

html.dark .product-toggle-btn {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .product-toggle-btn .btn-label-en,
html.dark .product-toggle-btn .btn-label-ar,
html.dark .product-toggle-btn .btn-price,
html.dark .product-toggle-btn strong,
html.dark .product-toggle-btn small {
  color: var(--text-primary) !important;
}

html.dark .product-toggle-btn:hover {
  background: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
}

html.dark .product-toggle-btn.btn-primary {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

html.dark .product-toggle-btn.btn-primary:hover {
  background: var(--primary-hover) !important;
}

/* Medical tabs */
html.dark .medical-tabs-nav {
  background: var(--bg-tertiary) !important;
  border-bottom-color: var(--border-color) !important;
}

html.dark .tab-btn {
  color: var(--text-muted) !important;
}

html.dark .tab-btn.active {
  color: var(--primary-color) !important;
  border-bottom-color: var(--primary-color) !important;
  background: var(--bg-secondary) !important;
}

html.dark .tab-btn[data-tab="history"] {
  color: var(--success-color) !important;
}

html.dark .tab-content {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

html.dark .tab-pane {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* Save button */
html.dark .btn-save-main {
  background: var(--success-color) !important;
  color: white !important;
}

html.dark .btn-save-main:hover {
  background: var(--success-hover) !important;
}

/* Tables */
html.dark .table {
  color: var(--text-primary) !important;
}

html.dark .table th,
html.dark .table td {
  border-bottom-color: var(--border-color) !important;
}

html.dark .table th {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

html.dark .table tbody tr:hover {
  background: var(--bg-tertiary) !important;
}

html.dark .text-muted {
  color: var(--text-muted) !important;
}

/* Cart total */
html.dark .cart-total {
  color: var(--success-color) !important;
  border-top-color: var(--border-color) !important;
}

/* Modals */
html.dark .fixed-modal-overlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

html.dark .fixed-modal-container {
  background: var(--bg-secondary) !important;
  box-shadow: 0 4px 30px var(--shadow-color) !important;
}

html.dark .fixed-modal-header {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html.dark .fixed-modal-body {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

html.dark .fixed-modal-footer {
  background: var(--bg-tertiary) !important;
  border-top-color: var(--border-color) !important;
}

html.dark .btn-ok {
  background: var(--primary-color) !important;
  color: white !important;
}

html.dark .btn-cancel {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Diagnosis status display */
html.dark .diagnosis-status-display {
  background: var(--bg-tertiary) !important;
  border-color: var(--primary-color) !important;
}

/* Category rows */
html.dark .category-row {
  border-bottom-color: var(--border-color) !important;
}

html.dark .cat-label {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-right-color: var(--border-color) !important;
}

html.dark .cat-content {
  background: var(--bg-secondary) !important;
}

html.dark .cat-buttons {
  border-bottom-color: var(--border-color) !important;
}

html.dark .cat-desc input {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .cat-desc input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(21, 114, 232, 0.3) !important;
}

/* Status buttons */
html.dark .status-btn {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

html.dark .status-btn:hover {
  background: var(--bg-primary) !important;
}

html.dark .status-btn.normal.active {
  background: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
}

html.dark .status-btn.abnormal.active {
  background: var(--danger-color) !important;
  color: white !important;
  border-color: var(--danger-color) !important;
}

/* Option buttons */
html.dark .option-btn,
html.dark .feeding-option-btn {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

html.dark .option-btn:hover,
html.dark .feeding-option-btn:hover {
  background: var(--bg-primary) !important;
}

html.dark .option-btn.selected-normal,
html.dark .feeding-option-btn.selected {
  background: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
}

html.dark .option-btn.selected-abnormal {
  background: var(--danger-color) !important;
  color: white !important;
  border-color: var(--danger-color) !important;
}

html.dark .btn-sep {
  background: var(--border-color) !important;
}

/* Save tab button */
html.dark .btn-save-tab {
  background: var(--primary-color) !important;
  color: white !important;
}

html.dark .btn-save-tab:hover {
  background: var(--primary-hover) !important;
}

/* Exam table */
html.dark .exam-table {
  border-color: var(--border-color) !important;
}

/* Foot row */
html.dark .foot-row {
  border-bottom-color: var(--border-color) !important;
}

html.dark .foot-col-label {
  background: var(--primary-color) !important;
  color: white !important;
}

html.dark .foot-col select {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .foot-col input[type="text"] {
  background: var(--bg-tertiary) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-primary) !important;
}

html.dark .foot-divider {
  background: var(--border-color) !important;
}

/* Bumblefoot row */
html.dark .bumblefoot-row {
  border-bottom-color: var(--border-color) !important;
}

html.dark .bumblefoot-label {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-right-color: var(--border-color) !important;
}

html.dark .bumblefoot-desc input {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Customer search results */
html.dark .customer-result {
  border-bottom-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .customer-result:hover {
  background-color: var(--bg-tertiary) !important;
}

html.dark #customer_search_results {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 4px 12px var(--shadow-color) !important;
}

/* ==========================================================================
   PRESERVE SEMANTIC STATUS BUTTON COLORS IN DARK MODE
   These buttons must keep their exact semantic colors (blue/red/green/orange)
   regardless of dark mode - they indicate status, not theme
   ========================================================================== */

/* Status buttons - Normal (Blue #3c8dbc) and Abnormal (Red #dc3545) */
html.dark .status-btn.normal.active {
  background: #3c8dbc !important;
  color: #ffffff !important;
  border-color: #3c8dbc !important;
}

html.dark .status-btn.abnormal.active {
  background: #dc3545 !important;
  color: #ffffff !important;
  border-color: #dc3545 !important;
}

/* Option buttons - Selected Normal (Blue) and Selected Abnormal (Red) */
html.dark .option-btn.selected-normal {
  background: #3c8dbc !important;
  color: #ffffff !important;
  border-color: #3c8dbc !important;
}

html.dark .option-btn.selected-abnormal {
  background: #dc3545 !important;
  color: #ffffff !important;
  border-color: #dc3545 !important;
}

/* Feeding option buttons - Selected (Blue) */
html.dark .feeding-option-btn.selected {
  background: #3c8dbc !important;
  color: #ffffff !important;
  border-color: #3c8dbc !important;
}

/* Bird status buttons - Each status has its own semantic color */
html.dark .bird-status-btn[data-status="new_bird"].active {
  background: #27ae60 !important;  /* Green for new bird */
  color: #ffffff !important;
  border-color: #27ae60 !important;
}

html.dark .bird-status-btn[data-status="pre_purchase"].active {
  background: #f39c12 !important;  /* Orange for pre-purchase */
  color: #ffffff !important;
  border-color: #f39c12 !important;
}

html.dark .bird-status-btn[data-status="shop_bird"].active {
  background: #3498db !important;  /* Blue for shop bird */
  color: #ffffff !important;
  border-color: #3498db !important;
}

html.dark .bird-status-btn[data-status="new_owner"].active {
  background: #e74c3c !important;  /* Red for new owner */
  color: #ffffff !important;
  border-color: #e74c3c !important;
}

/* Ensure non-active bird status buttons keep their border colors */
html.dark .bird-status-btn[data-status="new_bird"] {
  border-color: #27ae60 !important;
  color: #27ae60 !important;
}

html.dark .bird-status-btn[data-status="pre_purchase"] {
  border-color: #f39c12 !important;
  color: #f39c12 !important;
}

html.dark .bird-status-btn[data-status="shop_bird"] {
  border-color: #3498db !important;
  color: #3498db !important;
}

html.dark .bird-status-btn[data-status="new_owner"] {
  border-color: #e74c3c !important;
  color: #e74c3c !important;
}

html.dark .bird-status-btn[data-status="new_bird"]:hover {
  background: rgba(39, 174, 96, 0.1) !important;
  border-color: #27ae60 !important;
}

html.dark .bird-status-btn[data-status="pre_purchase"]:hover {
  background: rgba(243, 156, 18, 0.1) !important;
  border-color: #f39c12 !important;
}

html.dark .bird-status-btn[data-status="shop_bird"]:hover {
  background: rgba(52, 152, 219, 0.1) !important;
  border-color: #3498db !important;
}

html.dark .bird-status-btn[data-status="new_owner"]:hover {
  background: rgba(231, 76, 60, 0.1) !important;
  border-color: #e74c3c !important;
}

/* Empty state */
html.dark .empty-state {
  color: var(--text-muted) !important;
}

html.dark .empty-state i {
  color: var(--text-muted) !important;
}

/* Form controls */
html.dark .form-control,
html.dark .form-control:focus {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .form-control:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(21, 114, 232, 0.3) !important;
}

/* Input groups */
html.dark .input-group-addon {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

/* Buttons */
html.dark .btn-primary {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

html.dark .btn-primary:hover,
html.dark .btn-primary:focus {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

html.dark .btn-success {
  background: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: white !important;
}

html.dark .btn-warning {
  background: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
  color: white !important;
}

html.dark .btn-danger {
  background: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
  color: white !important;
}

html.dark .btn-default {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Labels */
html.dark label {
  color: var(--text-secondary) !important;
}

/* Strong text */
html.dark strong {
  color: var(--text-primary) !important;
}

/* Links */
html.dark a {
  color: var(--primary-color) !important;
}

html.dark a:hover {
  color: var(--primary-hover) !important;
}

/* Print receipt section */
html.dark #receipt_section {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* ==========================================================================
   END CLINIC PAGE DARK MODE FIXES
   ========================================================================== */

/* Fix tw-bg-white showing white in dark mode */
html.dark .tw-bg-white,
html.dark .bg-white {
  background-color: var(--bg-secondary) !important;
}

html.dark .tw-bg-gray-50,
html.dark .bg-gray-50 {
  background-color: var(--bg-tertiary) !important;
}

html.dark .tw-bg-gray-100,
html.dark .bg-gray-100 {
  background-color: var(--bg-tertiary) !important;
}

html.dark .tw-bg-gray-200,
html.dark .bg-gray-200 {
  background-color: var(--border-color) !important;
}

/* Fix text colors in dark mode for Tailwind classes */
html.dark .tw-text-gray-900,
html.dark .text-gray-900 {
  color: var(--text-primary) !important;
}

html.dark .tw-text-gray-800,
html.dark .text-gray-800 {
  color: var(--text-primary) !important;
}

html.dark .tw-text-gray-700,
html.dark .text-gray-700 {
  color: var(--text-secondary) !important;
}

html.dark .tw-text-gray-600,
html.dark .text-gray-600 {
  color: var(--text-secondary) !important;
}

html.dark .tw-text-gray-500,
html.dark .text-gray-500 {
  color: var(--text-muted) !important;
}

html.dark .tw-text-gray-400,
html.dark .text-gray-400 {
  color: var(--text-muted) !important;
}

/* Fix border colors for Tailwind classes */
html.dark .tw-border-gray-200,
html.dark .border-gray-200 {
  border-color: var(--border-color) !important;
}

html.dark .tw-border-gray-300,
html.dark .border-gray-300 {
  border-color: var(--border-color) !important;
}

html.dark .tw-ring-gray-200,
html.dark .ring-gray-200 {
  --tw-ring-color: var(--border-color) !important;
}

/* Fix shadow for Tailwind classes */
html.dark .tw-shadow-sm,
html.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 var(--shadow-color) !important;
}

html.dark .tw-shadow,
html.dark .shadow {
  box-shadow: 0 1px 3px 0 var(--shadow-color), 0 1px 2px 0 var(--shadow-color) !important;
}

html.dark .tw-shadow-md,
html.dark .shadow-md {
  box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color) !important;
}

html.dark .tw-shadow-lg,
html.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color) !important;
}

/* Fix rounded corners for Tailwind classes */
html.dark .tw-rounded-lg,
html.dark .rounded-lg {
  border-radius: 0.5rem !important;
}

html.dark .tw-rounded,
html.dark .rounded {
  border-radius: 0.25rem !important;
}

/* Fix hover states for Tailwind classes */
html.dark .hover\:tw-bg-primary-50:hover,
html.dark .hover\:bg-primary-50:hover {
  background-color: rgba(21, 114, 232, 0.1) !important;
}

html.dark .hover\:tw-bg-gray-50:hover,
html.dark .hover\:bg-gray-50:hover {
  background-color: var(--bg-tertiary) !important;
}

html.dark .hover\:tw-bg-gray-100:hover,
html.dark .hover\:bg-gray-100:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Fix transition for Tailwind classes */
html.dark .tw-transition-all,
html.dark .transition-all {
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

html.dark .tw-duration-200,
html.dark .duration-200 {
  transition-duration: 200ms !important;
}

/* ==========================================================================
   ADDITIONAL DARK MODE FIXES FOR SPECIFIC CLASSES
   ========================================================================== */

/* Fecal content and crop endoscopy content */
html.dark .fecalContent,
html.dark .cropEndoContent {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Arabic and English notes */
html.dark .arabicNotes,
html.dark .englishNotes {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Custom status buttons */
html.dark .status-btn-custom {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

html.dark .status-btn-custom:hover {
  background-color: var(--bg-primary) !important;
}

html.dark .status-btn-custom.active,
html.dark .status-btn-custom.selected {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
  border-color: var(--primary-color) !important;
}

/* Next visit row */
html.dark .next-visit-row {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .next-visit-row:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Combined notes box */
html.dark .combined-notes-box {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Empty message */
html.dark .empty-message {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
}

/* New items container */
html.dark .newItemsContainer {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Search result item */
html.dark .search-result-item {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .search-result-item:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Invoice container */
html.dark .invoice-container {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Service selection elements - for selecting services */
html.dark .service-select,
html.dark .service-selection,
html.dark .service-item,
html.dark .service-option,
html.dark .service-checkbox,
html.dark .service-radio,
html.dark [class*="service-"] {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark .service-item:hover,
html.dark .service-option:hover {
  background-color: var(--bg-tertiary) !important;
}

html.dark .service-item.selected,
html.dark .service-option.selected,
html.dark .service-checkbox:checked + label,
html.dark .service-radio:checked + label {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
  border-color: var(--primary-color) !important;
}

/* Service category/tab selection */
html.dark .service-category,
html.dark .service-tab,
html.dark .service-filter {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

html.dark .service-category.active,
html.dark .service-tab.active,
html.dark .service-filter.active {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
  border-color: var(--primary-color) !important;
}

/* Fix tw-bg-white showing white in dark mode - use specific dark color */
html.dark .tw-bg-white {
  --tw-bg-opacity: 1 !important;
  background-color: #16213e !important;
}

/* Fecal table input styling - no transparent background to avoid white showing */
html.dark .fecal-table input {
  width: 100% !important;
  border: none !important;
  outline: none !important;
  background-color: var(--bg-tertiary) !important;
  text-align: center !important;
  height: 30px !important;
  font-size: 12px !important;
  color: var(--text-primary) !important;
  padding: 0 8px !important;
}

html.dark .fecal-table input:focus {
  background-color: var(--bg-secondary) !important;
  box-shadow: 0 0 0 2px rgba(21, 114, 232, 0.3) !important;
}

/*# sourceMappingURL=custom.css.map */