/* ══════════════════════════════════════════════════════════════════
   QMyTurn Admin — Dark Theme
   Loaded last in header_link.php; overrides Shards Dashboard Lite.
   Design language matches the web-lcd display: deep navy background,
   glassmorphism cards, glowing 3D bubble icons, gradient buttons.
══════════════════════════════════════════════════════════════════ */

/* ── 1. Root background ── */
html, body {
  background: linear-gradient(135deg, #071428 0%, #0d2040 45%, #0a1a30 75%, #071428 100%) !important;
  color: rgba(255,255,255,0.82) !important;
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* Atmospheric depth orbs (fixed, non-interactive) */
body::before {
  content: '';
  position: fixed;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, #1565c0 0%, transparent 70%);
  opacity: 0.08; top: -250px; left: -180px;
  pointer-events: none; z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, #00796b 0%, transparent 70%);
  opacity: 0.07; bottom: -200px; right: -150px;
  pointer-events: none; z-index: 0;
}

/* Layout above orbs */
.container-fluid,
.container-fluid > .row,
main.main-content { position: relative; z-index: 1; }
.main-sidebar { z-index: 1040; }

/* ── 2. Sidebar ── */
.main-sidebar,
.main-sidebar .bg-white,
.main-sidebar .main-navbar,
.main-sidebar .main-navbar nav,
.main-sidebar nav.bg-white {
  background: rgba(5,11,28,0.94) !important;
}
.main-sidebar {
  border-right: 1px solid rgba(255,255,255,0.07) !important;
}
.main-sidebar .navbar-brand {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding: 10px 0 !important;
}
.main-sidebar .logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
}
.main-sidebar .logo img.qmt-logo-icon {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
.main-sidebar .logo .qmt-logo-text {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.92) !important;
  letter-spacing: -0.3px !important;
  white-space: nowrap !important;
}
.main-sidebar__search {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.main-sidebar__search .form-control {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.65) !important;
  box-shadow: none !important;
}
.main-sidebar__search .input-group-text {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.35) !important;
}

/* Sidebar nav links */
.nav-wrapper { background: transparent !important; padding: 8px 0 !important; }
.nav-wrapper .nav-link {
  color: rgba(255,255,255,0.5) !important;
  border-radius: 10px !important;
  margin: 2px 8px !important;
  padding: 9px 14px !important;
  border: 1px solid transparent !important;
  transition: all 0.18s !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
.nav-wrapper .nav-link span { vertical-align: middle; }
.nav-wrapper .nav-link:hover {
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none !important;
  border-color: rgba(255,255,255,0.05) !important;
}
.nav-wrapper .nav-link.active {
  background: linear-gradient(135deg, rgba(21,101,192,0.28), rgba(13,71,161,0.18)) !important;
  border-color: rgba(21,101,192,0.32) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 8px rgba(21,101,192,0.15) !important;
  font-weight: 600 !important;
}
.nav-wrapper .nav-link i { display: inline-flex; align-items: center; margin-right: 6px; }
.nav-wrapper .nav-link i img {
  width: 16px; height: 16px;
  filter: brightness(0) invert(1);
  opacity: 0.55;
}
.nav-wrapper .nav-link.active i img,
.nav-wrapper .nav-link:hover i img { opacity: 0.92; }
.nav-wrapper hr { border-color: rgba(255,255,255,0.07) !important; margin: 6px 14px !important; }

/* Advertisement button */
.nav-wrapper .ad { padding: 4px 8px 12px; }
.btn-advertisement {
  background: linear-gradient(135deg, #1565c0, #0d47a1) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(21,101,192,0.35) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: all 0.18s !important;
}
.btn-advertisement:hover {
  background: linear-gradient(135deg, #1976d2, #1565c0) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(21,101,192,0.5) !important;
}

/* ── 3. Top Navbar ── */
.main-navbar.sticky-top,
.main-navbar.bg-white,
div.main-navbar {
  background: rgba(7,18,38,0.92) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.main-navbar .doc-clinic h2 {
  color: rgba(255,255,255,0.82) !important;
  font-size: 0.94rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.main-navbar .nav-link { color: rgba(255,255,255,0.52) !important; }
.main-navbar .nav-link:hover { color: #fff !important; text-decoration: none !important; }
.main-navbar .material-icons { color: rgba(255,255,255,0.52) !important; }
.main-navbar .border-left,
.main-navbar .border-right { border-color: rgba(255,255,255,0.07) !important; }

/* Navbar dropdown */
.main-navbar .dropdown-menu {
  background: rgba(7,16,34,0.97) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 44px rgba(0,0,0,0.6) !important;
  padding: 6px !important;
}
.main-navbar .dropdown-item {
  color: rgba(255,255,255,0.65) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  transition: background 0.15s !important;
}
.main-navbar .dropdown-item:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}
.main-navbar .dropdown-item.text-danger { color: #ef9a9a !important; }
.main-navbar .dropdown-item.text-danger:hover { background: rgba(239,83,80,0.12) !important; }
.main-navbar .dropdown-item .material-icons { font-size: 16px !important; vertical-align: middle; margin-right: 6px; }
.main-navbar .dropdown-divider { border-color: rgba(255,255,255,0.08) !important; margin: 4px 6px !important; }

/* ── 4. Generic Cards ── */
.card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.78) !important;
  transition: box-shadow 0.2s !important;
}
.card:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.card.bg-dark {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.11) !important;
}
.card.no-round { border-radius: 12px !important; }
.card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.70) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  padding: 14px 20px !important;
}
.card-body { background: transparent !important; color: rgba(255,255,255,0.75) !important; }
.card-footer {
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.5) !important;
}

/* ── 5. 3D Stat Bubble Cards (total_info.php welcome-cards) ── */
.welcome-card {
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: transform 0.22s, box-shadow 0.22s !important;
}
.welcome-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
.welcome-card .s { padding: 22px 22px 18px !important; }
.welcome-card .d-flex { align-items: center !important; gap: 18px !important; }
.welcome-card .valtop { padding: 0 !important; }

/* Shared 3D sphere base */
.icon1, .icon2 {
  width: 66px !important; height: 66px !important; min-width: 66px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.icon1 img, .icon2 img {
  width: 28px !important; height: 28px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}

/* Green sphere — card 1 (registered clinics) */
.stat-wrap.stat-green .icon1 {
  background: radial-gradient(circle at 35% 30%, #69f0ae 0%, #00c853 40%, #00695c 100%) !important;
  box-shadow:
    0 10px 28px rgba(0,167,124,0.55),
    inset 0 -6px 12px rgba(0,0,0,0.22),
    inset 0 4px 8px rgba(255,255,255,0.28) !important;
}

/* Orange sphere — card 2 (unregistered clinics) */
.stat-wrap.stat-orange .icon1 {
  background: radial-gradient(circle at 35% 30%, #ffcc80 0%, #ff9800 40%, #e65100 100%) !important;
  box-shadow:
    0 10px 28px rgba(255,152,0,0.55),
    inset 0 -6px 12px rgba(0,0,0,0.22),
    inset 0 4px 8px rgba(255,255,255,0.28) !important;
}

/* Gold sphere — card 3 (revenue) */
.stat-wrap.stat-gold .icon2 {
  background: radial-gradient(circle at 35% 30%, #ffe57f 0%, #ffd740 35%, #ffa000 65%, #e65100 100%) !important;
  box-shadow:
    0 10px 28px rgba(255,176,0,0.55),
    inset 0 -6px 12px rgba(0,0,0,0.22),
    inset 0 4px 8px rgba(255,255,255,0.3) !important;
}

/* Stat labels */
.welcome-card .heading,
.welcome-card .heading2 {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.4) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  margin-bottom: 6px !important;
}

/* Stat values — big numbers */
.welcome-card .cont-val {
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -1px !important;
}
.stat-wrap.stat-green .cont-val  { text-shadow: 0 0 24px rgba(0,230,118,0.38) !important; }
.stat-wrap.stat-orange .cont-val { text-shadow: 0 0 24px rgba(255,152,0,0.38) !important; }
.stat-wrap.stat-gold .cont-val   { text-shadow: 0 0 24px rgba(255,215,0,0.38) !important; }

/* Stat links */
.welcome-card .valtop a {
  font-size: 11px !important;
  color: rgba(148,187,233,0.72) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  border-bottom: 1px solid rgba(148,187,233,0.2) !important;
  padding-bottom: 1px !important;
  transition: color 0.15s, border-color 0.15s !important;
}
.welcome-card .valtop a:hover {
  color: #90caf9 !important;
  border-bottom-color: rgba(144,202,249,0.5) !important;
}

/* ── 6. Subscription Rows (clinic_info.php) ── */
.subs-area { padding: 4px 0 !important; }
.subs-row {
  padding: 13px 4px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  align-items: center !important;
  margin: 0 !important;
}
.subs-row:last-child { border-bottom: none !important; }
.valtop1 .heading {
  font-size: 11.5px !important; font-weight: 700 !important;
  color: rgba(255,255,255,0.55) !important;
  text-transform: uppercase !important; letter-spacing: 0.8px !important;
  margin-bottom: 3px !important;
}
.valtop1 a {
  font-size: 11px !important;
  color: rgba(148,187,233,0.7) !important;
  text-decoration: none !important;
}
.valtop1 a:hover { color: #90caf9 !important; }
.progress-percent {
  font-size: 1.3rem !important; font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 0 0 12px rgba(255,255,255,0.18) !important;
}

/* Glowing progress bars */
.progress {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 20px !important;
  height: 8px !important;
  overflow: visible !important;
  box-shadow: none !important;
}
.progress-bar { border-radius: 20px !important; transition: width 0.6s ease !important; }
.progress-bar.bg-success {
  background: linear-gradient(90deg, #00c853, #00e676) !important;
  box-shadow: 0 0 10px rgba(0,200,83,0.55), 0 0 4px rgba(0,230,118,0.4) !important;
}
.progress-bar.bg-info {
  background: linear-gradient(90deg, #0091ea, #00b0ff) !important;
  box-shadow: 0 0 10px rgba(0,176,255,0.55), 0 0 4px rgba(0,176,255,0.4) !important;
}
.progress-bar.bg-warning {
  background: linear-gradient(90deg, #ff8f00, #ffca28) !important;
  box-shadow: 0 0 10px rgba(255,160,0,0.55), 0 0 4px rgba(255,202,40,0.4) !important;
}
.progress-bar.bg-danger {
  background: linear-gradient(90deg, #c62828, #ef5350) !important;
  box-shadow: 0 0 10px rgba(198,40,40,0.55) !important;
}

/* ── 7. Page structure ── */
.clinic-s,
.clinic-s .container-fluid {
  background: rgba(255,255,255,0.02) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.page-heading {
  font-size: 1.5rem !important; font-weight: 700 !important;
  color: rgba(255,255,255,0.9) !important; letter-spacing: -0.5px !important;
}
.page-header { background: transparent !important; }
.clinic-signup { color: rgba(255,255,255,0.8) !important; }
.clinic-signup h5 { color: rgba(255,255,255,0.9) !important; }
.clinic-details { color: rgba(255,255,255,0.65) !important; }

/* ── 8. Tables ── */
.table,
table.dataTable,
.table tbody tr,
table.dataTable tbody tr,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even {
  background: transparent !important;
}
.table { color: rgba(255,255,255,0.75) !important; border-color: transparent !important; }
.table thead th {
  background: rgba(255,255,255,0.04) !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.42) !important;
  font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: 1.2px !important; text-transform: uppercase !important;
  padding: 10px 14px !important;
}
.table td, .table th {
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  vertical-align: middle !important;
  padding: 9px 14px !important;
  background: transparent !important;
}
.table-sm td, .table-sm th { padding: 7px 10px !important; }
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background: rgba(255,255,255,0.05) !important;
}
.table-striped tbody tr:nth-of-type(odd) td { background: rgba(255,255,255,0.025) !important; }

/* DataTables overrides */
.dataTables_wrapper { color: rgba(255,255,255,0.7) !important; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info {
  color: rgba(255,255,255,0.42) !important; font-size: 12px !important;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important; border-radius: 8px !important;
  padding: 4px 9px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: rgba(255,255,255,0.48) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  padding: 4px 11px !important; margin: 0 2px !important;
  transition: all 0.15s !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg, #1565c0, #0d47a1) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(21,101,192,0.4) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: rgba(255,255,255,0.18) !important;
}

/* ── 9. Forms ── */
.form-control {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border-radius: 10px !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}
.form-control:focus {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(21,101,192,0.65) !important;
  box-shadow: 0 0 0 3px rgba(21,101,192,0.2) !important;
  color: #fff !important; outline: none !important;
}
.form-control::placeholder { color: rgba(255,255,255,0.28) !important; }
.form-control:disabled,
.form-control[readonly] {
  background: rgba(255,255,255,0.03) !important;
  color: rgba(255,255,255,0.35) !important;
}
select.form-control option { background: #0a1628 !important; color: rgba(255,255,255,0.85) !important; }
.form-group label, label, .formlabel {
  color: rgba(255,255,255,0.52) !important;
  font-size: 10.5px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.7px !important;
}
.input-group-text {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.45) !important;
}
.input-group .form-control:not(:first-child) { border-radius: 0 10px 10px 0 !important; }
.input-group .form-control:not(:last-child)  { border-radius: 10px 0 0 10px !important; }
.input-group-prepend .input-group-text { border-radius: 10px 0 0 10px !important; }
.input-group-append  .input-group-text { border-radius: 0 10px 10px 0 !important; }

/* ── 10. Buttons ── */
.btn { border-radius: 10px !important; font-weight: 600 !important; transition: all 0.18s !important; }
.btn-primary {
  background: linear-gradient(135deg, #1565c0, #0d47a1) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(21,101,192,0.35) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #1976d2, #1565c0) !important;
  color: #fff !important; transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(21,101,192,0.5) !important;
}
.btn-success {
  background: linear-gradient(135deg, #00a77c, #00695c) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(0,167,124,0.3) !important;
}
.btn-success:hover { color: #fff !important; transform: translateY(-1px) !important; }
.btn-info {
  background: linear-gradient(135deg, #00695c, #00838f) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(0,131,143,0.3) !important;
}
.btn-info:hover { color: #fff !important; transform: translateY(-1px) !important; }
.btn-warning {
  background: linear-gradient(135deg, #f57f17, #e65100) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(245,127,23,0.3) !important;
}
.btn-warning:hover { color: #fff !important; transform: translateY(-1px) !important; }
.btn-danger {
  background: linear-gradient(135deg, #c62828, #b71c1c) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(198,40,40,0.3) !important;
}
.btn-danger:hover { transform: translateY(-1px) !important; }
.btn-secondary {
  background: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.65) !important;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.14) !important; color: #fff !important;
}
.btn-block { width: 100% !important; }

/* ── 11. Badges ── */
.badge {
  border-radius: 20px !important; padding: 4px 10px !important;
  font-weight: 700 !important; font-size: 10px !important; letter-spacing: 0.3px !important;
}
.badge-success  { background: rgba(0,200,83,0.16) !important;   color: #69f0ae !important; border: 1px solid rgba(0,200,83,0.28) !important; }
.badge-danger   { background: rgba(239,83,80,0.16) !important;  color: #ff8a80 !important; border: 1px solid rgba(239,83,80,0.28) !important; }
.badge-warning  { background: rgba(255,152,0,0.16) !important;  color: #ffcc80 !important; border: 1px solid rgba(255,152,0,0.28) !important; }
.badge-info     { background: rgba(0,176,255,0.16) !important;  color: #80d8ff !important; border: 1px solid rgba(0,176,255,0.28) !important; }
.badge-primary  { background: rgba(21,101,192,0.18) !important; color: #64b5f6 !important; border: 1px solid rgba(21,101,192,0.28) !important; }
.badge-secondary{ background: rgba(117,117,117,0.12) !important; color: #bdbdbd !important; border: 1px solid rgba(117,117,117,0.2) !important; }
.badge-pill { border-radius: 20px !important; }

/* ── 12. Alerts ── */
.alert { border-radius: 12px !important; color: rgba(255,255,255,0.82) !important; }
.alert-success { background: rgba(0,200,83,0.09) !important;   border-color: rgba(0,200,83,0.28) !important; }
.alert-danger  { background: rgba(239,83,80,0.09) !important;  border-color: rgba(239,83,80,0.28) !important; }
.alert-warning { background: rgba(255,152,0,0.09) !important;  border-color: rgba(255,152,0,0.28) !important; }
.alert-info    { background: rgba(0,176,255,0.09) !important;  border-color: rgba(0,176,255,0.28) !important; }

/* ── 13. Modals ── */
.modal-content {
  background: rgba(8,18,40,0.97) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 64px rgba(0,0,0,0.72) !important;
}
.modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.9) !important;
}
.modal-title  { color: #fff !important; font-weight: 700 !important; }
.modal-body   { color: rgba(255,255,255,0.72) !important; }
.modal-footer { border-top: 1px solid rgba(255,255,255,0.08) !important; }
.close { color: rgba(255,255,255,0.55) !important; opacity: 1 !important; }
.close:hover { color: #fff !important; }
.modal-backdrop { background: rgba(0,0,0,0.72) !important; }

/* ── 14. Footer ── */
.main-footer {
  background: rgba(5,10,26,0.92) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.32) !important;
}
.main-footer .copyright { color: rgba(255,255,255,0.32) !important; }
.main-footer a { color: rgba(148,187,233,0.55) !important; }

/* ── 15. Global utilities ── */
.border-bottom { border-bottom-color: rgba(255,255,255,0.07) !important; }
.border-top    { border-top-color: rgba(255,255,255,0.07) !important; }
.border-left   { border-left-color: rgba(255,255,255,0.07) !important; }
.border-right  { border-right-color: rgba(255,255,255,0.07) !important; }
.border-lft-rt { border-left-color: rgba(255,255,255,0.07) !important; border-right-color: rgba(255,255,255,0.07) !important; }
.text-muted   { color: rgba(255,255,255,0.38) !important; }
.text-dark    { color: rgba(255,255,255,0.85) !important; }
.bg-white     { background: rgba(255,255,255,0.04) !important; }
.bg-light     { background: rgba(255,255,255,0.04) !important; }
.bg-dark      { background: rgba(255,255,255,0.07) !important; }
.shadow       { box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important; }
a             { color: #8fb8f5 !important; }
a:hover       { color: #bbdefb !important; text-decoration: none !important; }
hr            { border-color: rgba(255,255,255,0.08) !important; }

/* ── 16. Map page ── */
#map { border-radius: 14px !important; overflow: hidden !important; }
.right-container .card { background: rgba(255,255,255,0.07) !important; }
.right-widget .clinic-details { color: rgba(255,255,255,0.6) !important; }

/* ── 17. Custom scrollbars ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ── 18. Date range picker (Clinic Reports, admin billing pages) ──
   daterangepicker.css sets `.daterangepicker { color: inherit }`,
   which picks up this theme's near-white body text and makes
   unselected range options + calendar day numbers invisible against
   the picker's own white background. Reset to a normal dark color;
   the plugin's own active/selected/hover/off states already declare
   their own explicit colors and are unaffected by this. */
.daterangepicker { color: #333 !important; }