.dark .table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-accent-bg: #181818 !important;
}
.multiselect-option.is-selected {
  background: var(--bs-primary) !important ;
}
.multiselect-tag:hover {
  background: var(--bs-primary) !important;
}
.multiselect-tag {
  background: var(--bs-primary) !important;
}

.multiselect-option.is-pointed {
  background: var(--bs-primary) !important;
  color: #fff !important;
}
::selection {
  background: var(--bs-primary) !important;
  color: #fff !important;
}

::-moz-selection {
  background: var(--bs-primary) !important;
  color: #fff !important;
}

*::-moz-selection {
  background: var(--bs-primary) !important;
  color: #fff !important;
}

.form-disabled {
  pointer-events: none;
  opacity: 0.4;
}

.sorting_disabled.sorting_asc::after,
.sorting_disabled.sorting_asc::before {
  content: unset !important;
}

.sorting_disabled.sorting_asc {
  padding-right: 0 !important;
  width: 1% !important;
}

[dir="rtl"] .sorting_disabled.sorting_asc{
  padding-right: 1.5rem !important;
  padding-left: 0 !important;
}

.h-4 {
  height: 4rem;
}

.ec-week .ec-toolbar {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 9;
  padding: 0 15px 15px;
  border-bottom: 1px solid var(--bs-border-color);
}
.ec-header {
  display: flex;
  flex-shrink: 0;
  margin-top: 75px;
  position: relative;
}
.ec.ec-week {
  overflow-x: scroll;
}
.ec-header .ec-resource {
  flex-direction: column;
  min-width: 160px;
}
.ec-resource {
  display: flex;
  min-width: 160px;
}

.dropdown-sticky {
  background-color: var(--bs-white);
  box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.2);
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
}
div#datatable_wrapper {
  position: relative;
}
div.dataTables_wrapper div.dataTables_processing {
  top: 105px !important;
  left: 50%;
  z-index: 9;
}

.dropdown-sticky:hover {
  background-color: var(--bs-primary-shade-10);
}

.iq-dropdown .dropdown-menu {
  border-radius: 0.6rem !important;
}

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

@media only screen and (max-width: 1366px) {
  .ec-header {
    overflow-x: scroll;
  }
}

.iq-service-provider-dropdown:hover {
  background-color: unset !important;
}

.mode-icons {
  display: none;
}
.mode-icons.light-mode {
  display: block;
}

[data-bs-theme="dark"] .mode-icons.light-mode {
  display: none;
}

[data-bs-theme="dark"] .mode-icons.dark-mode {
  display: block;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
  box-shadow: -10px 0 0 rgba(var(--bs-primary-rgb), 0.8);
}
:root {
  --animate-duration: 400ms;
  --animate-delay: 1s;
  --animate-repeat: 1;
}

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@media screen and (max-width: 1024px) {
  .ec-all-day {
    overflow-x: scroll;
  }
  .ec-body {
    overflow-x: scroll !important;
  }
  .ec-resource {
    min-width: 160px !important;
  }
}

fieldset,
legend {
  all: revert;
  margin-bottom: 1rem;
}
fieldset {
  border: 1px solid var(--bs-border-color);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 5px;
}

legend {
  font-size: 1rem;
  font-weight: bold;
  padding: 0 0.7rem;
  color: var(--bs-primary-shade-80);
}
.dark legend {
  color: white;
}

.tox-tinymce,
.tox-statusbar,
.tox-toolbar__group,
.tox-toolbar__group:not(:last-of-type) {
  border-color: var(--bs-border-color) !important;
}

.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
  border: 1px solid var(--bs-border-color) !important;
}
.dark .multiselect-tags-search {
  color: inherit;
  background: inherit;
}
.ql-container {
  height: calc(100% - 5rem) !important;
}

.white-space-initial td {
  white-space: initial;
}

.dark .vti__input {
  color: #d7dbdf;
  background-color: #080808;
}

.form-logo {
  width: 130px;
}

/* Medinzy V2 Phase 1 — global color palette (light mode only, dark mode keeps its own) */
:root:not([data-bs-theme="dark"]) {
  --bs-body-bg: #F8FAFC;
  --bs-body-color: #111827;
  --bs-border-color: #E5E7EB;
  --bs-card-bg: #FFFFFF;
  --bs-secondary-color: #6B7280;
  --bs-tertiary-bg: #F8FAFC;
}

/* Medinzy V2 Phase 1 — typography (Inter, replacing Inter Tight + Jaldi) */
body,
.card,
.btn,
.form-control,
.form-select,
table,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
}

/* Medinzy V2 Phase 2 — sidebar modernization (pill-nav, healthcare-teal accent) */
/* Sidebar surface: use the theme's own body/card variables so dark mode keeps
   its dark sidebar. Hardcoding #FFFFFF here forced a white sidebar in dark mode. */
.sidebar-base {
  border-right: 1px solid var(--bs-border-color);
}

:root:not([data-bs-theme="dark"]) .sidebar-base {
  background-color: #FFFFFF;
}

.sidebar-base .iq-main-menu {
  padding: 0.5rem 1rem;
}

.sidebar-base .iq-main-menu .nav-item {
  margin-bottom: 0.35rem;
}

.sidebar-base .iq-main-menu .nav-link {
  border-radius: 0.85rem;
  padding: 0.65rem 1rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--bs-body-color);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.sidebar-base .iq-main-menu .nav-link i,
.sidebar-base .iq-main-menu .nav-link svg {
  font-size: 1.15rem;
  width: 1.3rem;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-base .iq-main-menu .nav-link:hover {
  background-color: rgba(15, 118, 110, 0.08);
  color: var(--bs-primary);
}

/* Active state: full teal pill, matching the reference's filled rounded nav item.
   !important is required — Hope UI's own .navbar-nav .nav-link.active rule loads
   after this file and otherwise repaints the pill with --bs-primary. */
.sidebar-base .iq-main-menu > li > .nav-link.active,
.sidebar-base .iq-main-menu > li > .nav-link[aria-expanded="true"] {
  background-color: var(--bs-primary) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(15, 118, 110, 0.25);
}

.sidebar-base .iq-main-menu > li > .nav-link.active i,
.sidebar-base .iq-main-menu > li > .nav-link.active svg,
.sidebar-base .iq-main-menu > li > .nav-link[aria-expanded="true"] i,
.sidebar-base .iq-main-menu > li > .nav-link[aria-expanded="true"] svg {
  color: #FFFFFF;
}

.sidebar-base .iq-main-menu .sub-nav {
  padding-left: 0.75rem;
  margin-top: 0.2rem;
}

.sidebar-base .iq-main-menu .sub-nav .nav-link {
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: 0.65rem;
}

.sidebar-base .iq-main-menu .sub-nav .nav-link.active {
  background-color: rgba(15, 118, 110, 0.12);
  color: #0F766E;
  box-shadow: none;
}

/* Sidebar menu search box (client-side filter, added by dashboard.js) */
.sidebar-menu-search {
  margin: 0.25rem 0.75rem 0.75rem;
  position: relative;
}

.sidebar-menu-search input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  padding: 0.5rem 0.9rem 0.5rem 2.1rem;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
}

.sidebar-menu-search input::placeholder {
  color: var(--bs-secondary-color);
}

.sidebar-menu-search input:focus {
  outline: none;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.sidebar-menu-search .search-icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-secondary-color, #6B7280);
  pointer-events: none;
}

.sidebar-base .iq-main-menu li.menu-search-hidden {
  display: none !important;
}

/* Medinzy V2 — soft rounded cards, matching the reference design language.
   Scoped to .main-content (the real backend wrapper) — an earlier pass used
   .content-page, which does not exist in this layout, so nothing applied. */
.main-content .card {
  border-radius: 1rem;
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.04);
}

.main-content .card .card-header {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  background-color: transparent;
}

/* Soft page canvas so white cards read as raised, like the reference.
   Light mode only — dark mode keeps its own darker canvas. */
:root:not([data-bs-theme="dark"]) .main-content .content-inner {
  background-color: #F8FAFC;
}

/* Modern stat tiles — replace the old 3D clipart PNGs on dashboard cards */
.stat-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  flex-shrink: 0;
}

.stat-tile i {
  font-size: 1.5rem;
  line-height: 1;
}

.stat-tile-primary { background-color: rgba(37, 99, 235, 0.1); color: #2563EB; }
.stat-tile-teal    { background-color: rgba(15, 118, 110, 0.1); color: #0F766E; }
.stat-tile-success { background-color: rgba(22, 163, 74, 0.1);  color: #16A34A; }
.stat-tile-indigo  { background-color: rgba(99, 102, 241, 0.1); color: #6366F1; }
.stat-tile-warning { background-color: rgba(245, 158, 11, 0.1); color: #F59E0B; }

/* Age-breakdown tiles are centred above their label */
.stat-tile.mx-auto {
  display: flex;
  margin-bottom: 0.25rem;
}

/* Stat cards: tighten the oversized gap the PNG layout needed */
.main-content .card.dashboard-cards .card-body .mt-5 {
  margin-top: 1.25rem !important;
}

/* Layout: keep content within its column */
.main-content .content-inner {
  max-width: 100%;
  overflow-x: hidden;
}

/* Table headers in the same teal as the active sidebar item */
.main-content table thead th,
.main-content table.dataTable thead th,
.main-content .table > thead > tr > th {
  background-color: var(--bs-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--bs-primary) !important;
  font-weight: 600;
}

.main-content table thead th a,
.main-content table.dataTable thead th a {
  color: #FFFFFF !important;
}

/* DataTables sort arrows need to stay visible on the teal fill */
.main-content table.dataTable thead th.sorting:before,
.main-content table.dataTable thead th.sorting:after,
.main-content table.dataTable thead th.sorting_asc:before,
.main-content table.dataTable thead th.sorting_asc:after,
.main-content table.dataTable thead th.sorting_desc:before,
.main-content table.dataTable thead th.sorting_desc:after {
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 0.85;
}

/* Round the header corners to match the card radius */
.main-content table thead tr th:first-child { border-top-left-radius: 0.75rem; }
.main-content table thead tr th:last-child  { border-top-right-radius: 0.75rem; }

.btn {
  border-radius: 0.6rem;
}

.badge {
  border-radius: 999px;
  font-weight: 500;
  padding: 0.35em 0.75em;
}

/* Notification dropdown loading skeleton — shown until the AJAX list arrives */
.notification-skeleton {
  width: 320px;
  max-width: 90vw;
}

.skeleton-line,
.skeleton-avatar,
.skeleton-title {
  background: linear-gradient(90deg, var(--bs-tertiary-bg) 25%, var(--bs-border-color) 37%, var(--bs-tertiary-bg) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 0.4rem;
}

.skeleton-title {
  height: 0.9rem;
  width: 45%;
}

.skeleton-line {
  height: 0.7rem;
  width: 100%;
}

.skeleton-line.skeleton-short {
  width: 60%;
}

.skeleton-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  flex-shrink: 0;
}

@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}