/* ==========================================================================
   CareGrid — Unified UI Theme
   --------------------------------------------------------------------------
   Pure-white surfaces with a single accent colour per module:

     .theme-doctor    → red     (Doctor's Panel)
     .theme-opd       → blue    (OPD / Reception)
     .theme-pharmacy  → green   (Pharmacy / Inventory)

   Three appearance modes, selected by `data-theme` on <html>:

     (absent) / colour  the app's ORIGINAL look - the immersive maroon / navy
                        / deep-green gradients written into each page's own
                        <style> block. This sheet's override layer is gated
                        behind `html[data-theme]`, so in colour mode it simply
                        does not apply and the original design shows through.
     light              white surfaces + the module accent above
     dark               near-black surfaces, white accent, no brand tint

   Light and dark share every component rule; they differ only in the token
   block each one remaps.

   This sheet is an override layer that sits on top of the legacy per-page
   <style> blocks (which were written for a dark UI). Selectors are prefixed
   with `body[class*="theme-"]` so they out-rank the page-level rules, and
   colour properties use !important because several legacy rules are
   themselves !important. Layout properties are deliberately left alone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
body[class*="theme-"] {
  /* Neutrals */
  --page: #ffffff;
  --white: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --line: #e6eaf0;
  --line-strong: #d3dae4;

  /* Ink */
  --ink: #101828;
  --ink-2: #475467;
  --ink-3: #8a94a6;
  --ink-invert: #ffffff;

  /* Semantic */
  --ok: #16a34a;
  --ok-soft: #f0fdf4;
  --warn: #d97706;
  --warn-soft: #fffbeb;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --info: #2563eb;
  --info-soft: #eff6ff;

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-2: 0 1px 3px rgba(16, 24, 40, .06), 0 6px 16px -6px rgba(16, 24, 40, .10);
  --sh-3: 0 2px 6px rgba(16, 24, 40, .06), 0 16px 32px -12px rgba(16, 24, 40, .16);
  --sh-accent: 0 6px 18px -6px rgba(var(--accent-rgb), .45);

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: .16s;
  --t: .26s;

  --font: 'Segoe UI', system-ui, -apple-system, 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Module accents ---------------------------------------------------------- */
body.theme-doctor {
  --accent: #dc2626;
  --accent-600: #b91c1c;
  --accent-700: #991b1b;
  --accent-soft: #fef2f2;
  --accent-soft-2: #fee2e2;
  --accent-rgb: 220, 38, 38;
}

body.theme-opd {
  --accent: #2563eb;
  --accent-600: #1d4ed8;
  --accent-700: #1e40af;
  --accent-soft: #eff6ff;
  --accent-soft-2: #dbeafe;
  --accent-rgb: 37, 99, 235;
}

body.theme-pharmacy {
  --accent: #16a34a;
  --accent-600: #15803d;
  --accent-700: #166534;
  --accent-soft: #f0fdf4;
  --accent-soft-2: #dcfce7;
  --accent-rgb: 22, 163, 74;
}

/* Neutral fallback (login / role pages set their own accent inline) */
body.theme-neutral {
  --accent: #2563eb;
  --accent-600: #1d4ed8;
  --accent-700: #1e40af;
  --accent-soft: #eff6ff;
  --accent-soft-2: #dbeafe;
  --accent-rgb: 37, 99, 235;
}

/* --- Light mode -----------------------------------------------------------
   White surfaces carrying the module accent from the blocks above: red for
   the doctor, blue for OPD, green for pharmacy. The accent tokens need no
   override here - the shared component rules do all the work. */
html[data-theme="light"] body[class*="theme-"] {
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Keyframes
   -------------------------------------------------------------------------- */
@keyframes ui-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ui-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ui-pop {
  0%   { opacity: 0; transform: scale(.94); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes ui-shimmer {
  from { background-position: -420px 0; }
  to   { background-position: 420px 0; }
}

@keyframes ui-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .35); }
  70%  { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

/* --------------------------------------------------------------------------
   3. Page canvas + global text reset
   -------------------------------------------------------------------------- */
html[data-theme] body[class*="theme-"] {
  background: var(--page) !important;
  color: var(--ink) !important;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Soft accent wash so a pure-white page still feels branded (light only).
   Painted as a body background rather than a fixed pseudo-element - a fixed
   layer forces a full-viewport repaint on every scroll, which was noticeable
   on the big dashboards. */
html[data-theme="light"] body[class*="theme-"] {
  background-image:
    radial-gradient(900px 320px at 12% -12%, rgba(var(--accent-rgb), .10), transparent 70%),
    radial-gradient(700px 280px at 92% -18%, rgba(var(--accent-rgb), .07), transparent 70%);
  background-repeat: no-repeat;
  background-position: top center;
}

/* Blanket ink rule — neutralises inherited `color: white` from the legacy
   dark themes. Component rules below out-rank it via higher specificity. */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(div, span, p, li, dt, dd, h1, h2, h3, h4, h5, h6,
                          label, small, strong, b, em, i, td, th, summary,
                          figcaption, legend, output, time, address) {
  color: var(--ink) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(h1, h2, h3, h4, h5, h6) {
  letter-spacing: -.015em;
  font-weight: 700;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.subtitle, .muted, .note, .info-label, .stat-label,
                          .patient-label, .card-subtitle, .pagination-info,
                          .settings-desc, .template-description, .template-meta,
                          .vital-label, .queue-time, .patient-ref,
                          .patient-card-meta, .no-data, .empty, .search-message) {
  color: var(--ink-2) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) a {
  color: var(--accent-600) !important;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

html[data-theme] body[class*="theme-"]:not(.auth-body) a:hover { color: var(--accent-700) !important; }

html[data-theme] body[class*="theme-"]:not(.auth-body) ::selection {
  background: rgba(var(--accent-rgb), .18);
  color: var(--ink);
}

html[data-theme] body[class*="theme-"]:not(.auth-body) hr,
html[data-theme] body[class*="theme-"]:not(.auth-body) .line,
html[data-theme] body[class*="theme-"]:not(.auth-body) .bill-divider {
  border-color: var(--line) !important;
  background: var(--line) !important;
}

/* Scrollbars ------------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-theme] body[class*="theme-"]:not(.auth-body) ::-webkit-scrollbar-track { background: var(--surface-2); }
html[data-theme] body[class*="theme-"]:not(.auth-body) ::-webkit-scrollbar-thumb {
  background: #cfd6e0;
  border: 3px solid var(--surface-2);
  border-radius: var(--r-pill);
}
html[data-theme] body[class*="theme-"]:not(.auth-body) ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* --------------------------------------------------------------------------
   4. Headers / top bars
   -------------------------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.header, .panel-header, .navbar, .page-header,
                          .doctor-header, .visits-header, .header-banner) {
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-top: 3px solid var(--accent) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-2) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: ui-rise .45s var(--ease) both;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.header, .panel-header, .navbar, .page-header) :is(h1, h2, h3) {
  color: var(--ink) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.header, .panel-header) :is(h1, h2) i,
html[data-theme] body[class*="theme-"]:not(.auth-body) .navbar-brand i {
  color: var(--accent) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .navbar-brand {
  color: var(--ink) !important;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. Cards & surfaces
   -------------------------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.card, .box, .stat-card, .patient-card,
                          .patient-details-card, .patient-detail-view,
                          .template-card, .visit-card, .filters-card,
                          .search-section, .filter-section, .filters,
                          .table-container, .table-wrap, .patients-table-section,
                          .patients-search-section, .info-box, .appointment-box,
                          .clinical-notes-section, .medicines-section,
                          .prescription-section, .quick-add-section,
                          .template-section, .visits-section, .settings-section,
                          .return-item, .queue-box, .day-card, .db-info,
                          .patient-info, .patient-bar, .vitals-bar,
                          .medicine-item, .bill-container, .total-section,
                          .refund-summary, .empty-state, .demo-section) {
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-2) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

/* Interactive cards get a lift */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.card, .stat-card, .patient-card, .template-card,
                          .visit-card, .day-card, .medicine-item):hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3) !important;
  border-color: rgba(var(--accent-rgb), .35) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.card-title, .section-title, .info-box-title,
                          .clinical-title, .property-group-title,
                          .settings-header, .visits-header) {
  color: var(--ink) !important;
  font-weight: 700;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.card-title, .section-title) i,
html[data-theme] body[class*="theme-"]:not(.auth-body) .component-icon,
html[data-theme] body[class*="theme-"]:not(.auth-body) .stat-icon {
  color: var(--accent) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .stat-icon {
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-soft-2) !important;
  border-radius: var(--r-md) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .stat-value,
html[data-theme] body[class*="theme-"]:not(.auth-body) .queue-stat-number,
html[data-theme] body[class*="theme-"]:not(.auth-body) .pharmacy-queue-stat-number,
html[data-theme] body[class*="theme-"]:not(.auth-body) .total-amount,
html[data-theme] body[class*="theme-"]:not(.auth-body) .grand-total,
html[data-theme] body[class*="theme-"]:not(.auth-body) .fee-amount,
html[data-theme] body[class*="theme-"]:not(.auth-body) .amount {
  color: var(--accent-600) !important;
  font-weight: 800;
}

/* Entrance animation for card grids */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.stats-grid, .stats-row,
                          .cards, .dashboard-grid, .patients-grid, .templates-grid,
                          .template-grid, .button-grid, .info-boxes, .info-grid) > * {
  animation: ui-rise .45s var(--ease) both;
}

/* Rows / list items ------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.info-row, .patient-info-item, .patient-detail-item,
                          .vital-item, .db-info-row, .bill-item, .item,
                          .medicine-note-row, .refund-row, .total-row,
                          .bill-summary-row) {
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.info-value, .patient-value, .vital-value, .db-value,
                          .info-item strong) {
  color: var(--ink) !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn, button,
                          .back-btn, .nav-btn, .btn-back, .btn-add, .btn-print,
                          .print-btn, .filter-btn, .pagination-btn, .action-btn,
                          .demo-btn, .settings-btn, .backup-btn, .restore-btn,
                          .clear-btn, .zoom-btn, .section-control-btn,
                          .queue-toggle-btn, .queue-refresh-btn,
                          .pharmacy-queue-toggle, .pharmacy-queue-refresh,
                          .return-mode-btn, .note-toggle-btn, .btn-icon) {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--r-sm) !important;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

/* Default / neutral button */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn, button) {
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: var(--sh-1) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn, button):hover {
  background: var(--surface-2) !important;
  border-color: var(--accent) !important;
  color: var(--accent-600) !important;
  transform: translateY(-1px);
  box-shadow: var(--sh-2) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) input:where([type="submit"], [type="button"]) {
  font-weight: 600;
  border-radius: var(--r-sm) !important;
  cursor: pointer;
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: var(--sh-1) !important;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

html[data-theme] body[class*="theme-"]:not(.auth-body) input:where([type="submit"], [type="button"]):hover {
  background: var(--surface-2) !important;
  border-color: var(--accent) !important;
  color: var(--accent-600) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn, button):active { transform: translateY(0); }

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn, button):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .28) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn, button)[disabled],
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn, button):disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}

/* Accent (primary) button — the module colour */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-primary, .btn-submit, .btn-save, .btn-confirm,
                          .btn-admit, .btn-template, .btn-custom, .print-btn,
                          .btn-add, .queue-toggle-btn, .pharmacy-queue-toggle,
                          .btn-process-return) {
  background: var(--accent) !important;
  color: var(--ink-invert) !important;
  border: 1px solid var(--accent) !important;
  box-shadow: var(--sh-accent) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-primary, .btn-submit, .btn-save, .btn-confirm,
                          .btn-admit, .btn-template, .btn-custom, .print-btn,
                          .btn-add, .queue-toggle-btn, .pharmacy-queue-toggle,
                          .btn-process-return) :is(i, span, strong) {
  color: var(--ink-invert) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-primary, .btn-submit, .btn-save, .btn-confirm,
                          .btn-admit, .btn-template, .btn-custom, .print-btn,
                          .btn-add, .btn-process-return):hover {
  background: var(--accent-600) !important;
  border-color: var(--accent-600) !important;
  color: var(--ink-invert) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(var(--accent-rgb), .6) !important;
}

/* Shine sweep on accent buttons */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-primary, .btn-submit, .btn-save) {
  position: relative;
  overflow: hidden;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-primary, .btn-submit, .btn-save)::after {
  content: '';
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  transition: left .55s var(--ease);
  pointer-events: none;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-primary, .btn-submit, .btn-save):hover::after { left: 140%; }

/* Semantic buttons */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-success, .btn-receipt) {
  background: var(--ok) !important;
  border-color: var(--ok) !important;
  color: var(--ink-invert) !important;
  box-shadow: 0 6px 18px -6px rgba(22, 163, 74, .45) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-success, .btn-receipt) :is(i, span) { color: var(--ink-invert) !important; }
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-success, .btn-receipt):hover {
  background: #15803d !important;
  border-color: #15803d !important;
  transform: translateY(-2px);
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-danger, .btn-error, .btn-delete,
                          .delete-patient-btn, .btn-confirm-delete,
                          .queue-remove-btn, .pharmacy-queue-remove-btn,
                          .remove-return-item) {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: var(--ink-invert) !important;
  box-shadow: 0 6px 18px -6px rgba(220, 38, 38, .45) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-danger, .btn-error, .btn-delete,
                          .delete-patient-btn, .btn-confirm-delete) :is(i, span) {
  color: var(--ink-invert) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-danger, .btn-error, .btn-delete,
                          .delete-patient-btn, .btn-confirm-delete):hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  transform: translateY(-2px);
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .btn-warning {
  background: var(--warn) !important;
  border-color: var(--warn) !important;
  color: var(--ink-invert) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) .btn-warning :is(i, span) { color: var(--ink-invert) !important; }

html[data-theme] body[class*="theme-"]:not(.auth-body) .btn-info {
  background: var(--info) !important;
  border-color: var(--info) !important;
  color: var(--ink-invert) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) .btn-info :is(i, span) { color: var(--ink-invert) !important; }

/* Quiet / ghost buttons */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-secondary, .btn-cancel, .btn-cancel-delete,
                          .btn-view, .btn-duplicate, .back-btn, .btn-back,
                          .nav-btn, .clear-btn, .zoom-btn, .filter-btn,
                          .pagination-btn, .queue-refresh-btn,
                          .pharmacy-queue-refresh, .return-mode-btn,
                          .note-toggle-btn, .section-control-btn) {
  background: var(--white) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: var(--sh-1) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-secondary, .btn-cancel, .btn-view, .btn-duplicate,
                          .back-btn, .btn-back, .nav-btn, .clear-btn, .zoom-btn,
                          .filter-btn, .pagination-btn, .queue-refresh-btn,
                          .pharmacy-queue-refresh, .return-mode-btn,
                          .note-toggle-btn, .section-control-btn) :is(i, span) {
  color: inherit !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-secondary, .btn-cancel, .btn-view, .btn-duplicate,
                          .back-btn, .btn-back, .nav-btn, .clear-btn, .zoom-btn,
                          .filter-btn, .pagination-btn, .queue-refresh-btn,
                          .pharmacy-queue-refresh, .return-mode-btn,
                          .note-toggle-btn, .section-control-btn):hover {
  background: var(--accent-soft) !important;
  color: var(--accent-600) !important;
  border-color: var(--accent) !important;
  transform: translateY(-1px);
}

/* Active filter / tab state */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.filter-btn.active, .pagination-btn.active,
                          .tab.active, .property-tab.active,
                          .return-mode-btn.active, .badge-preset.active) {
  background: var(--accent) !important;
  color: var(--ink-invert) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--sh-accent) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.filter-btn.active, .tab.active) :is(i, span) {
  color: var(--ink-invert) !important;
}

/* Close buttons */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.close-btn, .modal-close, .btn-close, .settings-close,
                          .return-close, .patients-modal-close, .queue-close-btn,
                          .pharmacy-queue-close, .search-clear-btn,
                          .template-search-clear) {
  background: var(--surface-3) !important;
  color: var(--ink-2) !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-pill) !important;
  transition: all var(--t-fast) var(--ease);
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.close-btn, .modal-close, .btn-close, .settings-close,
                          .return-close, .patients-modal-close, .queue-close-btn,
                          .pharmacy-queue-close):hover {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  transform: rotate(90deg);
}

/* Hamburger */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.hamburger, .sidebar-hamburger) {
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--sh-2) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.hamburger, .sidebar-hamburger) span,
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.hamburger, .sidebar-hamburger) div {
  background: var(--accent) !important;
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(input, select, textarea) {
  font-family: var(--font);
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--sh-1) !important;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(input, select, textarea):hover:not(:disabled) {
  border-color: var(--line-strong) !important;
  background: var(--surface-2) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(input, select, textarea):focus {
  outline: none !important;
  background: var(--white) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) ::placeholder { color: var(--ink-3) !important; opacity: 1; }

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.form-label, .form-group label, .patient-label,
                          .property-label, .age-label, .db-label) {
  color: var(--ink-2) !important;
  font-weight: 600;
  font-size: .86rem;
  letter-spacing: .01em;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--accent);
  box-shadow: none !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.search, .search-input-wrapper, .patient-search-bar,
                          .medicine-search-wrapper, .template-search-wrapper,
                          .return-search) {
  background: var(--white) !important;
  border-color: var(--line) !important;
}

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) table {
  background: var(--white) !important;
  color: var(--ink) !important;
  border-collapse: separate;
  border-spacing: 0;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(table thead th, .patients-table th, .medicine-table th,
                          .prescription-table th) {
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--line) !important;
  border-top: none !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(table td, .patients-table td, .medicine-table td,
                          .prescription-table td) {
  background: transparent !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
  border-top: none !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(table tbody tr, .patient-row, .appointment-row):hover {
  background: var(--accent-soft) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) table tbody tr:last-child td { border-bottom: none !important; }

/* --------------------------------------------------------------------------
   9. Badges, pills & status
   -------------------------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.badge, .badge-custom, .badge-default, .badge-preset,
                          .status-badge, .stock-badge, .template-badge,
                          .date-badge, .timing-badge, .visit-count-badge,
                          .queue-number, .pharmacy-queue-number,
                          .prescription-count, .admission-number,
                          .search-result-count) {
  background: var(--accent-soft) !important;
  color: var(--accent-700) !important;
  border: 1px solid var(--accent-soft-2) !important;
  border-radius: var(--r-pill) !important;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .03em;
  padding: 4px 11px;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.status-admitted, .stock-available) {
  background: var(--ok-soft) !important;
  color: #15803d !important;
  border-color: #bbf7d0 !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.stock-low, .status-no-room) {
  background: var(--warn-soft) !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .stock-out {
  background: var(--danger-soft) !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
}

/* Avatars */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.patient-avatar, .patient-card-avatar,
                          .patient-detail-avatar) {
  background: var(--accent) !important;
  color: var(--ink-invert) !important;
  border: none !important;
  box-shadow: var(--sh-accent) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.patient-avatar, .patient-card-avatar,
                          .patient-detail-avatar) :is(i, span) {
  color: var(--ink-invert) !important;
}

/* --------------------------------------------------------------------------
   10. Overlays, modals, popups, toasts
   -------------------------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.modal-overlay, .popup-overlay, .overlay,
                          .patient-modal-overlay, .patients-modal-overlay,
                          .settings-modal-overlay, .return-modal-overlay,
                          .delete-confirm-overlay, .queue-overlay,
                          .sidebar-overlay, .loading-overlay,
                          .universal-modal-overlay) {
  background: rgba(16, 24, 40, .45) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.modal, .modal-content, .popup-box, .patient-modal,
                          .patient-modal-content, .patients-modal, .settings-modal,
                          .return-modal, .delete-confirm-box, .save-modal,
                          .gdrive-setup-modal, .universal-modal,
                          .property-panel, .settings-content, .return-content,
                          .gdrive-setup-content) {
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 24px 64px -16px rgba(16, 24, 40, .35) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.modal-header, .patient-modal-header,
                          .patients-modal-header, .settings-header,
                          .return-header, .queue-panel-header,
                          .pharmacy-queue-header, .patient-detail-header,
                          .patient-details-header) {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .modal-body,
html[data-theme] body[class*="theme-"]:not(.auth-body) .universal-modal-body { color: var(--ink) !important; }

/* Universal modal (base.html)
   Its header bar and its success/danger buttons keep the semantic gradients
   defined inline in base.html, in both light and dark mode — so their labels
   are always white, never the theme's inverted ink. */
html[data-theme] body[class*="theme-"]:not(.auth-body) .universal-modal-header :is(h3, .universal-modal-title,
                                                  .universal-modal-icon, div, span) {
  color: #ffffff !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .universal-modal-footer {
  background: var(--surface-2) !important;
  border-top: 1px solid var(--line) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .universal-modal-btn { color: #ffffff !important; }

html[data-theme] body[class*="theme-"]:not(.auth-body) .universal-modal-btn-primary {
  background: var(--accent) !important;
  color: var(--ink-invert) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .universal-modal-btn-secondary {
  background: var(--surface-3) !important;
  color: var(--ink) !important;
}

/* Toasts */
html[data-theme] body[class*="theme-"]:not(.auth-body) .toast {
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--accent) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-3) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) .toast-icon { color: var(--accent) !important; }
html[data-theme] body[class*="theme-"]:not(.auth-body) .toast.success { border-left-color: var(--ok) !important; }
html[data-theme] body[class*="theme-"]:not(.auth-body) .toast.error { border-left-color: var(--danger) !important; }
html[data-theme] body[class*="theme-"]:not(.auth-body) .toast.warning { border-left-color: var(--warn) !important; }

/* Alerts / messages */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.alert, .message) {
  background: var(--accent-soft) !important;
  color: var(--accent-700) !important;
  border: 1px solid var(--accent-soft-2) !important;
  border-radius: var(--r-md) !important;
}

/* --------------------------------------------------------------------------
   11. Side menus, sidebars, queue panels
   -------------------------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.side-menu, .doctor-sidebar, .sidebar-left,
                          .sidebar-right, .queue-panel, .pharmacy-queue-panel) {
  background: var(--white) !important;
  color: var(--ink) !important;
  border-left: 1px solid var(--line) !important;
  box-shadow: -8px 0 28px -18px rgba(16, 24, 40, .35) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.side-menu, .doctor-sidebar) :is(h4, h3, a, li, span, i) {
  color: var(--ink) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.side-menu, .doctor-sidebar) h4 {
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .08em;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.side-menu, .doctor-sidebar) a {
  border-radius: var(--r-sm);
  transition: all var(--t-fast) var(--ease);
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.side-menu, .doctor-sidebar) a:hover {
  background: var(--accent-soft) !important;
  color: var(--accent-700) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.side-menu, .doctor-sidebar) a:hover i { color: var(--accent) !important; }

html[data-theme] body[class*="theme-"]:not(.auth-body) .sidebar-close { color: var(--ink-2) !important; }
html[data-theme] body[class*="theme-"]:not(.auth-body) .sidebar-close:hover {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.sidebar-section-header, .settings-section,
                          .queue-stats, .pharmacy-queue-stats) {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  color: var(--ink) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.queue-item, .pharmacy-queue-item, .queue-list > *,
                          .medicine-list > *, .return-items-list > *) {
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  color: var(--ink) !important;
  transition: all var(--t-fast) var(--ease);
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.queue-item, .pharmacy-queue-item):hover {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   12. Autocomplete & dropdowns
   -------------------------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.autocomplete-results, .medicine-search-dropdown,
                          .template-dropdown, .days-select, .timing-select,
                          .frequency-select, .dosage-form-select) {
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-3) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.autocomplete-item, .medicine-search-item,
                          .template-dropdown-item, .custom-medicine-option) {
  background: var(--white) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--surface-3) !important;
  transition: background-color var(--t-fast) var(--ease);
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.autocomplete-item, .medicine-search-item,
                          .template-dropdown-item, .custom-medicine-option):is(:hover, .active, .selected, .highlighted) {
  background: var(--accent-soft) !important;
  color: var(--accent-700) !important;
}

/* Rich medicine suggestion panel (pharmacy search) -----------------------
   The panel markup carries `.ac-header`, `.med-form`, `.med-stock` and
   `.med-price`; give each a light/dark treatment. Colour mode keeps the
   page-level styling written into the pharmacy dashboard. */
html[data-theme] body[class*="theme-"]:not(.auth-body) .autocomplete-results .ac-header {
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .autocomplete-results .ac-header i {
  color: var(--accent) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .autocomplete-results .ac-count {
  color: var(--ink-3) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .autocomplete-item .med-name {
  color: var(--ink) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .autocomplete-item .med-info {
  color: var(--ink-2) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .autocomplete-item .med-form {
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-soft-2) !important;
  color: var(--accent-700) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .autocomplete-item .med-stock {
  color: var(--ink-2) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .autocomplete-item .med-stock.is-ok  { color: var(--ok) !important; }
html[data-theme] body[class*="theme-"]:not(.auth-body) .autocomplete-item .med-stock.is-low { color: var(--warn) !important; }
html[data-theme] body[class*="theme-"]:not(.auth-body) .autocomplete-item .med-stock.is-out { color: var(--danger) !important; }

/* "Use as custom medicine" row (doctor panel) - an action, so keep it accent */
html[data-theme] body[class*="theme-"]:not(.auth-body) .autocomplete-item.custom-medicine-option .med-name {
  color: var(--ok) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .autocomplete-item .med-price .price-value {
  color: var(--accent-700) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .autocomplete-item .med-price .price-unit {
  color: var(--ink-3) !important;
}

/* Keep the highlighted suggestion readable in both modes */
html[data-theme] body[class*="theme-"]:not(.auth-body) .autocomplete-item:is(:hover, .highlighted)
                          :is(.med-name, .med-price .price-value) {
  color: var(--accent-700) !important;
}

/* Edge-docked queue tabs -------------------------------------------------
   These are fixed to the left edge and vertically centred by the page CSS.
   Pin both here so no button rule can pull them back into the flow, and
   express hover as a horizontal nudge that preserves the centring. */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.queue-toggle-btn, .pharmacy-queue-toggle) {
  position: fixed !important;
  left: 0 !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  overflow: visible !important;
  background: var(--accent) !important;
  color: var(--ink-invert) !important;
  border: 1px solid var(--accent) !important;
  border-left: none !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
  box-shadow: 4px 0 18px -6px rgba(var(--accent-rgb), .55) !important;
  z-index: 1000;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.queue-toggle-btn, .pharmacy-queue-toggle) :is(i, span, div) {
  color: var(--ink-invert) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.queue-toggle-btn, .pharmacy-queue-toggle):hover {
  transform: translateY(-50%) translateX(4px) !important;
  box-shadow: 7px 0 26px -6px rgba(var(--accent-rgb), .7) !important;
}

/* The count pill riding on the tab */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.queue-toggle-btn, .pharmacy-queue-toggle) :is(.badge, .queue-count) {
  background: var(--ink-invert) !important;
  color: var(--accent-700) !important;
  border: none !important;
}

/* Dropdowns float above everything, including sticky headers and panels */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.autocomplete-results,
                          .medicine-search-dropdown, .template-dropdown,
                          .search-results-dropdown, .patient-search-results) {
  z-index: 4000 !important;
}

/* Autocomplete panels are absolutely positioned inside their wrapper — make
   sure the wrapper is the containing block and nothing between clips them. */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.medicine-search-wrapper,
                          .search-input-wrapper, .template-search-wrapper,
                          .medicine-input-wrapper) {
  position: relative;
  overflow: visible !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(table, thead, tbody, tr, td, th,
                          .medicine-table, .prescription-table, .patients-table,
                          .medicine-input-cell) {
  overflow: visible !important;
}

/* --------------------------------------------------------------------------
   13. Empty states, loaders, pagination
   -------------------------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.empty-state, .empty-canvas, .patient-empty,
                          .queue-empty, .pharmacy-queue-empty, .bill-empty,
                          .no-patients, .no-visits, .no-items-msg,
                          .template-dropdown-empty, .no-data) {
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
  border: 1px dashed var(--line-strong) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.empty-state, .queue-empty) i,
html[data-theme] body[class*="theme-"]:not(.auth-body) .queue-empty-icon { color: var(--ink-3) !important; }

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.loading, .loading-spinner, .spinner) {
  border-color: var(--surface-3) !important;
  border-top-color: var(--accent) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .pagination,
html[data-theme] body[class*="theme-"]:not(.auth-body) .table-pagination,
html[data-theme] body[class*="theme-"]:not(.auth-body) .patients-pagination {
  background: transparent !important;
  color: var(--ink-2) !important;
}

/* --------------------------------------------------------------------------
   14. Print artefacts stay black-on-white
   -------------------------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.thermal-receipt, .receipt, .prescription-page,
                          .prescription-canvas, .bill-header) {
  background: #fff !important;
  color: #000 !important;
  box-shadow: var(--sh-2) !important;
  border: 1px solid var(--line) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.thermal-receipt, .receipt, .prescription-page,
                          .prescription-canvas) * {
  color: #000 !important;
}

@media print {
  body[class*="theme-"]::before { display: none !important; }
  body[class*="theme-"] * { box-shadow: none !important; }
  body[class*="theme-"] :is(.card, .panel, .header, .panel-header) {
    border-color: #ccc !important;
  }
}

/* --------------------------------------------------------------------------
   14b. Dark mode
   Set by data-theme="dark" on <html> (persisted in localStorage).

   Deliberately monochrome: near-black surfaces, white text, grey lines. The
   module accent (red / blue / green) is a LIGHT-mode identity only - in dark
   it collapses to white so nothing is tinted. Danger and success keep their
   colour because those two carry meaning rather than branding.

   Every component rule above reads these same tokens, so remapping them here
   flips the whole override layer at once.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body[class*="theme-"] {
  --page: #0b0c0e;
  --white: #141619;
  --surface: #141619;
  --surface-2: #1b1e22;
  --surface-3: #24282e;
  --line: #2a2f36;
  --line-strong: #3a4048;

  --ink: #f4f6f8;
  --ink-2: #a8b0ba;
  --ink-3: #6f7883;
  --ink-invert: #0b0c0e;

  --ok: #34d399;
  --ok-soft: #10231c;
  --warn: #fbbf24;
  --warn-soft: #241d0e;
  --danger: #f87171;
  --danger-soft: #2a1416;
  --info: #93c5fd;
  --info-soft: #121a26;

  /* Monochrome accent */
  --accent: #f4f6f8;
  --accent-600: #ffffff;
  --accent-700: #ffffff;
  --accent-soft: #1e2228;
  --accent-soft-2: #2a2f36;
  --accent-rgb: 244, 246, 248;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 1px 3px rgba(0, 0, 0, .5), 0 6px 16px -6px rgba(0, 0, 0, .6);
  --sh-3: 0 2px 6px rgba(0, 0, 0, .5), 0 16px 32px -12px rgba(0, 0, 0, .7);
  --sh-accent: 0 6px 18px -8px rgba(0, 0, 0, .8);

  color-scheme: dark;
}

/* Primary actions read as white-on-black rather than a tinted fill */
html[data-theme="dark"] body[class*="theme-"]:not(.auth-body) :is(.btn-primary,
                          .btn-submit, .btn-save, .btn-confirm, .btn-admit,
                          .btn-template, .btn-custom, .print-btn, .btn-add,
                          .queue-toggle-btn, .pharmacy-queue-toggle,
                          .btn-process-return) {
  box-shadow: none !important;
}

/* Accent-tinted hovers become neutral greys */
html[data-theme="dark"] body[class*="theme-"]:not(.auth-body) :is(table tbody tr,
                          .patient-row, .appointment-row):hover,
html[data-theme="dark"] body[class*="theme-"]:not(.auth-body) :is(.autocomplete-item,
                          .medicine-search-item, .template-dropdown-item,
                          .custom-medicine-option):is(:hover, .active, .selected, .highlighted),
html[data-theme="dark"] body[class*="theme-"]:not(.auth-body) :is(.queue-item,
                          .pharmacy-queue-item):hover,
html[data-theme="dark"] body[class*="theme-"]:not(.auth-body) :is(.side-menu,
                          .doctor-sidebar) a:hover {
  background: var(--surface-3) !important;
  color: var(--ink) !important;
}

/* Scrollbars */
html[data-theme="dark"] body[class*="theme-"]:not(.auth-body) ::-webkit-scrollbar-thumb {
  background: #3a4048;
  border-color: var(--surface-2);
}

/* Receipts and prescription previews stay physical paper - always white */
html[data-theme="dark"] body[class*="theme-"]:not(.auth-body) :is(.thermal-receipt,
                          .receipt, .prescription-page, .prescription-canvas) {
  background: #fff !important;
  border-color: #d0d5dd !important;
}

/* Auth pages in dark mode ------------------------------------------------- */
html[data-theme="dark"] .auth-body { background: #0b0c0e; color: #f4f6f8; }

html[data-theme="dark"] .auth-card {
  background: #141619;
  border-color: #2a2f36;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 30px 60px -24px rgba(0, 0, 0, .8);
}

html[data-theme="dark"] .auth-aside {
  background: linear-gradient(160deg, #16191d 0%, #101215 100%);
  border-right-color: #2a2f36;
}

html[data-theme="dark"] .auth-headline,
html[data-theme="dark"] .auth-title { color: #f4f6f8; }
html[data-theme="dark"] :is(.auth-sub, .auth-hint, .auth-points li) { color: #a8b0ba; }
html[data-theme="dark"] .auth-brand { color: #8a929c; }
html[data-theme="dark"] .auth-points i { background: #1e2228; }
html[data-theme="dark"] .auth-field label { color: #8a929c; }

html[data-theme="dark"] .auth-input {
  background: #101215;
  border-color: #2a2f36;
  color: #f4f6f8;
}

html[data-theme="dark"] .auth-input:hover { border-color: #3a4048; }

/* In dark mode the accent is white, so the submit button needs dark ink and a
   plain shadow - the light-mode rule hard-codes white text and an accent glow. */
html[data-theme="dark"] .auth-submit {
  color: #0b0c0e;
  box-shadow: none;
}

html[data-theme="dark"] .auth-submit:hover {
  background: #ffffff;
  color: #0b0c0e;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .9);
}

html[data-theme="dark"] .auth-submit::after {
  background: linear-gradient(100deg, transparent, rgba(0, 0, 0, .12), transparent);
}

html[data-theme="dark"] .auth-brand .mark { color: #0b0c0e; }
html[data-theme="dark"] .auth-input::placeholder { color: #667079; }

html[data-theme="dark"] .auth-back {
  background: #141619;
  border-color: #2a2f36;
  color: #a8b0ba;
}

html[data-theme="dark"] .auth-foot { border-top-color: #2a2f36; color: #667079; }

html[data-theme="dark"] .auth-msg {
  background: #2a1416;
  border-color: #5b2226;
  color: #fca5a5;
}

/* Role picker in dark mode */
html[data-theme="dark"] .role-head h1,
html[data-theme="dark"] .role-name { color: #f4f6f8; }
html[data-theme="dark"] :is(.role-head p, .role-desc) { color: #a8b0ba; }
html[data-theme="dark"] .role-logo { background: #f4f6f8; color: #0b0c0e; }

html[data-theme="dark"] .role-card {
  background: #141619;
  border-color: #2a2f36;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 8px 20px -10px rgba(0, 0, 0, .7);
}

html[data-theme="dark"] .role-veil { background: #0b0c0e; }
html[data-theme="dark"] .role-veil-ring { border-color: #24282e; border-top-color: #f4f6f8; }
html[data-theme="dark"] .role-veil-text { color: #a8b0ba; }

/* --------------------------------------------------------------------------
   14c. Theme toggle control (injected by base.html)
   Addressed by id: the generic button rules in section 6 are high-specificity
   overrides of the legacy CSS, and an id (1,0,0) is the clean way past them.
   -------------------------------------------------------------------------- */
#uiThemeToggle {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
  top: auto !important;
  z-index: 5000 !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  cursor: pointer;
  font-size: .95rem !important;
  background: #ffffff !important;
  color: #475467 !important;
  border: 1px solid #e6eaf0 !important;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .10), 0 10px 24px -12px rgba(16, 24, 40, .3) !important;
  transform: none;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1),
              box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

#uiThemeToggle i { color: inherit !important; }

#uiThemeToggle:hover {
  transform: translateY(-2px) rotate(-12deg) !important;
  background: #ffffff !important;
  color: #101828 !important;
  border-color: #d3dae4 !important;
  box-shadow: 0 4px 10px rgba(16, 24, 40, .12), 0 16px 32px -14px rgba(16, 24, 40, .45) !important;
}

#uiThemeToggle:active { transform: translateY(0) rotate(0) !important; }

html[data-theme="dark"] #uiThemeToggle {
  background: #1b1e22 !important;
  color: #f4f6f8 !important;
  border-color: #2a2f36 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6), 0 10px 24px -12px rgba(0, 0, 0, .8) !important;
}

html[data-theme="dark"] #uiThemeToggle:hover {
  background: #24282e !important;
  color: #ffffff !important;
  border-color: #3a4048 !important;
}

@media print { #uiThemeToggle { display: none !important; } }

/* --------------------------------------------------------------------------
   15. Auth pages (login + role selection)
   -------------------------------------------------------------------------- */
.auth-body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  font-family: var(--font, 'Segoe UI', system-ui, sans-serif);
  background: #fff;
  color: #101828;
}

.auth-body :is(.auth-card, .auth-aside, .auth-main, .auth-field,
               .auth-input-wrap, .auth-input, .auth-submit, .auth-msg,
               .auth-foot, .auth-points, .auth-points li) {
  box-sizing: border-box;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 24px;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .06), 0 30px 60px -24px rgba(16, 24, 40, .28);
  overflow: hidden;
  animation: ui-pop .5s var(--ease, ease) both;
}

.auth-aside {
  position: relative;
  padding: 46px 42px;
  background:
    radial-gradient(520px 320px at 85% 8%, rgba(var(--accent-rgb), .13), transparent 68%),
    linear-gradient(160deg, #fff 0%, var(--accent-soft, #f8fafc) 100%);
  border-right: 1px solid #eef1f6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.auth-aside::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), transparent);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #667085;
}

.auth-brand .mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 8px 20px -8px rgba(var(--accent-rgb), .7);
}

.auth-headline {
  font-size: 2.15rem;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #101828;
  margin: 30px 0 14px;
}

.auth-headline em {
  font-style: normal;
  color: var(--accent);
}

.auth-sub {
  color: #667085;
  font-size: 1rem;
  line-height: 1.65;
  max-width: 34ch;
}

.auth-points {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  gap: 14px;
}

.auth-points li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #475467;
  font-size: .93rem;
}

.auth-points i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .75rem;
  flex-shrink: 0;
}

.auth-main {
  padding: 52px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #101828;
  margin: 0 0 6px;
}

.auth-hint {
  color: #667085;
  font-size: .93rem;
  margin: 0 0 30px;
}

.auth-field { margin-bottom: 22px; }

.auth-field label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #667085;
  margin-bottom: 9px;
}

.auth-input-wrap { position: relative; }

.auth-input-wrap > i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #98a2b3;
  font-size: .95rem;
  transition: color .2s ease;
  pointer-events: none;
}

.auth-input {
  width: 100%;
  padding: 14px 16px 14px 44px;
  font-size: 1rem;
  font-family: inherit;
  color: #101828;
  background: #fff;
  border: 1.5px solid #dfe4ec;
  border-radius: 12px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.auth-input::placeholder { color: #b0b8c6; }

.auth-input:hover { border-color: #cbd3e0; }

.auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14);
}

.auth-input:focus + i,
.auth-input-wrap:focus-within > i { color: var(--accent); }

.auth-submit {
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .02em;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 24px -10px rgba(var(--accent-rgb), .8);
  transition: background-color .2s ease, transform .18s ease, box-shadow .2s ease;
}

.auth-submit:hover {
  background: var(--accent-600);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(var(--accent-rgb), .85);
}

.auth-submit:active { transform: translateY(0); }

.auth-submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: -140%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--ease, ease);
}

.auth-submit:hover::after { left: 150%; }

.auth-submit i { transition: transform .25s var(--ease, ease); }
.auth-submit:hover i { transform: translateX(4px); }

.auth-msg {
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .9rem;
  background: #fef2f2;
  color: #b42318;
  border: 1px solid #fecaca;
  display: flex;
  align-items: center;
  gap: 9px;
  animation: ui-rise .3s ease both;
}

.auth-back {
  position: fixed;
  top: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: .88rem;
  font-weight: 600;
  color: #475467;
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  text-decoration: none;
  transition: all .2s ease;
  z-index: 20;
}

.auth-back:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateX(-3px);
}

.auth-foot {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #eef1f6;
  font-size: .82rem;
  color: #98a2b3;
  text-align: center;
}

@media (max-width: 860px) {
  .auth-card { grid-template-columns: 1fr; max-width: 460px; }
  .auth-aside { padding: 34px 30px; border-right: none; border-bottom: 1px solid #eef1f6; }
  .auth-points { display: none; }
  .auth-headline { font-size: 1.7rem; margin-top: 20px; }
  .auth-main { padding: 34px 30px 40px; }
}

/* --------------------------------------------------------------------------
   16. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[class*="theme-"] *,
  body[class*="theme-"] *::before,
  body[class*="theme-"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   17. Legacy stragglers
   Selectors in the old dark templates that hard-coded white text and are not
   reached by the component rules above. Each is re-inked for a white canvas.
   -------------------------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) option {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.medicine-name, .medicine-details,
                          .urdu-description, .item-name, .bill-item-name,
                          .bill-item-qty, .bill-item-price, .info-box-content,
                          .queue-patient-details, .queue-patient-name,
                          .pharmacy-queue-patient-details,
                          .pharmacy-queue-patient-name,
                          .pharmacy-queue-patient-ref,
                          .patient-card-details, .patient-card-info,
                          .patient-detail-name, .patient-name-ref,
                          .patient-name-large, .patient-main-info,
                          .patients-loading, .diagnosis-label, .diagnosis-box,
                          .template-name, .template-content, .template-info,
                          .visit-time, .visit-date, .visit-card-body,
                          .section-textarea, .clinical-content, .clinical-block,
                          .grand-total-row, .total-row, .refund-row,
                          .special-instructions, .scan-text, .qty-value,
                          .freq-urdu, .freq-code, .day-count, .day-date,
                          .dose-box, .address-box, .date-box) {
  color: var(--ink) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.medicine-name, .patient-detail-name,
                          .patient-name-large, .template-name) {
  font-weight: 700;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.queue-stat-label,
                          .pharmacy-queue-stat-label, .pharmacy-queue-time,
                          .medicine-details, .patient-card-meta, .visit-time,
                          .urdu-description) {
  color: var(--ink-2) !important;
}

/* Grand total gets the accent, like other money figures */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.grand-total-row, .total-section .total-row.grand-total) {
  color: var(--accent-600) !important;
  border-top: 1px solid var(--line) !important;
  font-weight: 800;
}

/* "Back to home" pills scattered through the sub-pages */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.back-home, .patient-detail-back) {
  background: var(--white) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: var(--sh-1) !important;
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.back-home, .patient-detail-back):hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: translateX(-2px);
}

/* Accent-filled action buttons that live outside the .btn family */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.print-prescription-btn, .btn-admit,
                          .delete-confirm-btns .btn-confirm-delete) {
  background: var(--accent) !important;
  color: var(--ink-invert) !important;
  border-color: var(--accent) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.print-prescription-btn, .btn-admit) :is(i, span) {
  color: var(--ink-invert) !important;
}

/* Custom checkbox ticks drawn with ::after */
html[data-theme] body[class*="theme-"]:not(.auth-body) input[type="checkbox"]:checked::after {
  color: var(--ink-invert) !important;
}

/* Table wrappers that painted their own dark chrome */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.table-container, .table-wrap,
                          .prescription-table-wrapper, .medicine-table,
                          .prescription-table, .patients-table) {
  background: var(--white) !important;
  color: var(--ink) !important;
}

/* --------------------------------------------------------------------------
   18. Sidebar password lock
   The three dashboards share this "Menu Locked" prompt. It used to be styled
   with inline attributes (a hard-coded navy card), which fought the theme —
   the heading went dark-on-dark in light mode. It now uses classes so it
   follows all three appearance modes.
   -------------------------------------------------------------------------- */
.menu-lock-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 24, 40, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.menu-lock-overlay.is-open { display: flex; animation: ui-fade .2s ease both; }

body[class*="theme-"] .menu-lock-box {
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  padding: 34px 30px 28px;
  text-align: center;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 24px 64px -16px rgba(16, 24, 40, .4) !important;
  animation: ui-pop .28s var(--spring) both;
}

body[class*="theme-"] .menu-lock-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.6rem;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-soft-2) !important;
}

body[class*="theme-"] .menu-lock-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink) !important;
}

body[class*="theme-"] .menu-lock-sub {
  margin: 0 0 22px;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-2) !important;
}

body[class*="theme-"] .menu-lock-input {
  box-sizing: border-box;
  width: 100%;
  padding: 13px 15px;
  margin-bottom: 14px;
  font-size: 1rem;
  text-align: center;
  letter-spacing: .06em;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--line-strong) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}

body[class*="theme-"] .menu-lock-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18) !important;
}

body[class*="theme-"] :is(.menu-lock-submit, .menu-lock-cancel) {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  font-size: .95rem;
  font-weight: 700;
  border-radius: var(--r-sm) !important;
  cursor: pointer;
}

body[class*="theme-"] .menu-lock-submit {
  margin-bottom: 10px;
  background: var(--accent) !important;
  color: var(--ink-invert) !important;
  border: 1px solid var(--accent) !important;
  box-shadow: var(--sh-accent) !important;
}

body[class*="theme-"] .menu-lock-submit :is(i, span) { color: var(--ink-invert) !important; }

body[class*="theme-"] .menu-lock-submit:hover {
  background: var(--accent-600) !important;
  border-color: var(--accent-600) !important;
  transform: translateY(-1px);
}

body[class*="theme-"] .menu-lock-cancel {
  background: transparent !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
}

body[class*="theme-"] .menu-lock-cancel:hover {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: var(--line-strong) !important;
  transform: none;
}

body[class*="theme-"] .menu-lock-error {
  display: none;
  margin-top: 16px;
  padding: 10px 12px;
  font-size: .87rem;
  border-radius: var(--r-sm);
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border: 1px solid var(--danger) !important;
}

body[class*="theme-"] .menu-lock-error :is(i, span) { color: var(--danger) !important; }

/* --------------------------------------------------------------------------
   19. Role picker in dark mode
   The cards carry their own red/blue/green --accent in role.html; dark mode
   flattens them to the monochrome palette.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .role-card {
  --accent: #f4f6f8;
  --accent-600: #ffffff;
  --accent-soft: #1e2228;
  --accent-rgb: 244, 246, 248;
}

html[data-theme="dark"] .role-card:hover .role-icon { color: #0b0c0e; }

/* --------------------------------------------------------------------------
   20. Standalone report pages (pharmacy due bills / customer sales)
   These keep their own green CSS as colour mode; these rules give them a
   correct light and dark appearance without touching the original design.
   -------------------------------------------------------------------------- */

/* Action link sitting in a page header reads as a filled accent button */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.header, .panel-header) a {
  background: var(--accent) !important;
  color: var(--ink-invert) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600;
  box-shadow: var(--sh-accent) !important;
  transition: background-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.header, .panel-header) a:hover {
  background: var(--accent-600) !important;
  border-color: var(--accent-600) !important;
  color: var(--ink-invert) !important;
  transform: translateY(-1px);
}

/* Payment status badges carry meaning, so they keep semantic colour */
html[data-theme] body[class*="theme-"]:not(.auth-body) .badge.paid {
  background: var(--ok-soft) !important;
  color: var(--ok) !important;
  border-color: var(--ok) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .badge.partial {
  background: var(--warn-soft) !important;
  color: var(--warn) !important;
  border-color: var(--warn) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .badge.due {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}

/* Simple anchor pagination (not the .pagination-btn kind) */
html[data-theme] body[class*="theme-"]:not(.auth-body) .pagination :is(a, span) {
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink-2) !important;
  background: var(--surface) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .pagination a:hover {
  background: var(--accent-soft) !important;
  color: var(--accent-700) !important;
  border-color: var(--accent) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) .pagination .active {
  background: var(--accent) !important;
  color: var(--ink-invert) !important;
  border-color: var(--accent) !important;
}

/* Inline number inputs in table rows shouldn't inherit the full field chrome */
html[data-theme] body[class*="theme-"]:not(.auth-body) .pay-box input {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   16. CareGrid logo
   Full-colour logo on light surfaces, the reversed artwork in dark mode
   (CareGrid brand guidelines). Never recoloured with CSS - only swapped.
   -------------------------------------------------------------------------- */
.brand-on-dark { display: none !important; }
html[data-theme="dark"] .brand-on-light { display: none !important; }
html[data-theme="dark"] .brand-on-dark { display: inline-block !important; }

.auth-foot img { height: 26px; width: auto; vertical-align: middle; }

.about-brand { margin: 0 0 6px; line-height: 0; }
.about-brand img { height: 40px; width: auto; }

/* About window. Colour mode keeps each panel's original card (white on the
   doctor panel, dark gradient on reception / pharmacy - see data-surface);
   Light and Dark repaint it from the theme tokens so the blanket ink rule
   above never puts white text on a white card or dark text on a dark one. */
.about-card .about-logo-light { display: none; }
.about-card[data-surface="light"] .about-logo-light { display: inline-block; }
.about-card[data-surface="light"] .about-logo-dark { display: none; }
html[data-theme="light"] .about-card .about-logo-light { display: inline-block !important; }
html[data-theme="light"] .about-card .about-logo-dark { display: none !important; }
html[data-theme="dark"] .about-card .about-logo-light { display: none !important; }
html[data-theme="dark"] .about-card .about-logo-dark { display: inline-block !important; }

html[data-theme] body[class*="theme-"]:not(.auth-body) .about-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-3) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) .about-card p {
  color: var(--ink-2) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) .about-card > div:not(:first-child):not(#updateSection) {
  background: var(--surface-2) !important;
}

/* ==========================================================================
   Standard blue buttons (Light and Dark only - Colour mode keeps its own look)
   One button colour across every panel, matching the prescription designer:
   CareGrid blue with white text for main actions, white/grey for the rest.
   Module accents still tint headers and highlights; delete stays red and
   warnings amber because those colours carry meaning.
   ========================================================================== */
html[data-theme] body[class*="theme-"] {
  --btn: #1877F2;
  --btn-600: #1468D6;
  --btn-soft: #EAF3FE;
  --btn-ink: #ffffff;
  --btn-rgb: 24, 119, 242;
  --sh-btn: 0 6px 16px -6px rgba(24, 119, 242, .45);
}
html[data-theme="dark"] body[class*="theme-"] {
  --btn: #1877F2;
  --btn-600: #3B8BF5;
  --btn-soft: #16243A;
  --btn-rgb: 77, 163, 255;
  --sh-btn: 0 6px 16px -8px rgba(0, 0, 0, .7);
}

/* Main actions */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-primary, .btn-submit, .btn-save, .btn-confirm,
                          .btn-admit, .btn-template, .btn-custom, .print-btn,
                          .btn-add, .queue-toggle-btn, .pharmacy-queue-toggle,
                          .btn-process-return, .btn-success, .btn-receipt, .btn-info,
                          .universal-modal-btn-primary) {
  background: var(--btn) !important;
  border: 1px solid var(--btn) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--sh-btn) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-primary, .btn-submit, .btn-save, .btn-confirm,
                          .btn-admit, .btn-template, .btn-custom, .print-btn,
                          .btn-add, .queue-toggle-btn, .pharmacy-queue-toggle,
                          .btn-process-return, .btn-success, .btn-receipt, .btn-info,
                          .universal-modal-btn-primary) :is(i, span, strong, b) {
  color: var(--btn-ink) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-primary, .btn-submit, .btn-save, .btn-confirm,
                          .btn-admit, .btn-template, .btn-custom, .print-btn,
                          .btn-add, .btn-process-return, .btn-success, .btn-receipt, .btn-info,
                          .universal-modal-btn-primary):hover {
  background: var(--btn-600) !important;
  border-color: var(--btn-600) !important;
  color: var(--btn-ink) !important;
  box-shadow: 0 10px 22px -10px rgba(var(--btn-rgb), .65) !important;
}

/* Everyday buttons: white (dark grey in Dark mode), blue on hover */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn, button):not(.btn-primary, .btn-submit, .btn-save,
                          .btn-confirm, .btn-admit, .btn-template, .btn-custom, .print-btn, .btn-add,
                          .queue-toggle-btn, .pharmacy-queue-toggle, .btn-process-return, .btn-success,
                          .btn-receipt, .btn-info, .btn-danger, .btn-error, .btn-delete, .delete-patient-btn,
                          .btn-confirm-delete, .btn-warning, .universal-modal-btn):hover,
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn-secondary, .btn-cancel, .btn-view, .btn-duplicate,
                          .back-btn, .btn-back, .nav-btn, .clear-btn, .zoom-btn,
                          .filter-btn, .pagination-btn, .queue-refresh-btn,
                          .pharmacy-queue-refresh, .return-mode-btn,
                          .note-toggle-btn, .section-control-btn):hover,
html[data-theme] body[class*="theme-"]:not(.auth-body) input:where([type="submit"], [type="button"]):hover {
  background: var(--btn-soft) !important;
  border-color: var(--btn) !important;
  color: var(--btn-600) !important;
}

/* Selected tab / filter / page */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.filter-btn.active, .pagination-btn.active,
                          .tab.active, .property-tab.active,
                          .return-mode-btn.active, .badge-preset.active) {
  background: var(--btn) !important;
  border-color: var(--btn) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--sh-btn) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.filter-btn.active, .pagination-btn.active,
                          .tab.active, .property-tab.active, .return-mode-btn.active) :is(i, span) {
  color: var(--btn-ink) !important;
}

html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.btn, button):focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--btn-rgb), .3) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.hamburger, .sidebar-hamburger) :is(span, div) {
  background: var(--btn) !important;
}

/* Module accent -> CareGrid blue in Light and Dark.
   The Doctor (red) / OPD / Pharmacy (green) accents tinted navbars, header
   buttons, links, tabs and highlights; Light and Dark now use one blue
   everywhere. Colour mode (no data-theme) keeps the per-module colours. */
html[data-theme] body[class*="theme-"] {
  --accent: #1877F2;
  --accent-600: #1468D6;
  --accent-700: #0F57B8;
  --accent-soft: #EAF3FE;
  --accent-soft-2: #D3E6FD;
  --accent-rgb: 24, 119, 242;
  --sh-accent: 0 6px 16px -6px rgba(24, 119, 242, .45);
}
html[data-theme="dark"] body[class*="theme-"] {
  --accent: #4DA3FF;
  --accent-600: #7AB8FF;
  --accent-700: #9BCBFF;
  --accent-soft: #16243A;
  --accent-soft-2: #1E3150;
  --accent-rgb: 77, 163, 255;
  --sh-accent: 0 6px 16px -8px rgba(0, 0, 0, .7);
}

/* Header / navbar buttons ("Admitted Patients", "Back") and other
   accent-filled actions: solid blue with white text in both modes. */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.header, .panel-header, .header-actions) :is(a.back-btn, .back-btn, a.btn, .nav-btn),
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.print-prescription-btn, .btn-admit, .header-actions .btn-admit) {
  background: var(--btn) !important;
  border: 1px solid var(--btn) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--sh-btn) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.header, .panel-header, .header-actions) :is(a.back-btn, .back-btn, a.btn, .nav-btn) :is(i, span),
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.print-prescription-btn, .btn-admit, .header-actions .btn-admit) :is(i, span) {
  color: var(--btn-ink) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.header, .panel-header, .header-actions) :is(a.back-btn, .back-btn, a.btn, .nav-btn):hover,
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.print-prescription-btn, .btn-admit, .header-actions .btn-admit):hover {
  background: var(--btn-600) !important;
  border-color: var(--btn-600) !important;
  color: var(--btn-ink) !important;
}

/* Remaining hard-coded module tints -> blue (Light and Dark only).
   Decorative colour only: anything red/green that carries meaning (errors,
   expired stock, danger buttons, paid/due, in/out of stock) is left alone. */
html[data-theme] body[class*="theme-"]:not(.auth-body) .card-title::before {
  background: var(--accent) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) .card > .card-title {
  border-bottom-color: var(--line) !important;
}
/* Pharmacy: "Direct Sale / Prescription Mode" strip */
html[data-theme] body[class*="theme-"]:not(.auth-body) #modeIndicator {
  background: var(--accent-soft) !important;
  border: 1px solid rgba(var(--accent-rgb), .28) !important;
  color: var(--accent-600) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) #modeIndicator :is(strong, b, span, i, div) {
  color: var(--accent-600) !important;
}
/* Pharmacy: Receipt / Bill and Cash Calculator header bars */
html[data-theme] body[class*="theme-"]:not(.auth-body) .info-box > .info-box-title {
  background: var(--accent-soft) !important;
  background-image: none !important;
  color: var(--accent-600) !important;
  border-bottom: 1px solid rgba(var(--accent-rgb), .28) !important;
}
html[data-theme] body[class*="theme-"]:not(.auth-body) .info-box > .info-box-title :is(i, span, strong) {
  color: var(--accent-600) !important;
}
/* Admission: diagnosis note */
html[data-theme] body[class*="theme-"]:not(.auth-body) .diagnosis-box {
  border-left-color: var(--accent) !important;
}
/* Table header dividers: neutral lines instead of a module tint */
html[data-theme] body[class*="theme-"]:not(.auth-body) thead th {
  border-left-color: var(--line) !important;
  border-right-color: var(--line) !important;
}

/* --------------------------------------------------------------------------
   Printed receipts keep their own plain header. The top-bar style above also
   matches a receipt's .header; its entrance fade never runs on a receipt that
   is hidden until printing, so the clinic name printed invisible.
   -------------------------------------------------------------------------- */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.thermal-receipt, .receipt) .header {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  opacity: 1 !important;
}

/* Receipt text is always black ink. Restated last: the legacy-straggler rule
   above re-inks .item-name for screens and, at equal specificity, would
   otherwise print medicine names near-white in dark mode. */
html[data-theme] body[class*="theme-"]:not(.auth-body) :is(.thermal-receipt, .receipt) * {
  color: #000 !important;
}