/* Rivaz V141 — shared mobile + dark-mode fixes (loaded last in every module). */

/* ======================= base / safety ======================= */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; }
@media screen and (max-width: 900px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  /* iOS zooms into any field under 16px — keep form controls readable and stable. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
  button, .btn, .tab, .tab-btn, .nav-item { min-height: 38px; touch-action: manipulation; }
  table { max-width: 100%; }
}

/* ======================= CLINIC ADMIN ======================= */
.nav-scroll { display: contents; }               /* desktop: wrapper has no effect */

@media screen and (max-width: 900px) {
  .app { flex-direction: column; min-height: 100vh; min-height: 100dvh; }
  .sidebar {
    width: 100% !important; height: auto !important; position: sticky !important; top: 0; z-index: 40;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 6px !important;
    border-right: 0 !important; border-bottom: 1px solid var(--line, var(--border, #d8dbe9));
    border-top-width: 0 !important;
  }
  .sidebar .brand { padding: 2px 4px; order: 1; flex: 1 1 auto; min-width: 0; }
  .sidebar .brand .name { font-size: 14px; }
  .sidebar .brand .sub { font-size: 10.5px; }
  .sidebar-foot {
    order: 2; margin: 0 !important; padding: 0 !important; border: 0 !important;
    gap: 8px; flex: 0 0 auto; display: flex !important;
  }
  .sidebar-foot > div:nth-child(2) { display: none; }       /* name / username text — keep Log out visible */
  .sidebar-foot .avatar { width: 30px; height: 30px; font-size: 11.5px; }
  .sidebar-foot .btn { padding: 8px 12px !important; font-size: 12.5px; }
  .nav-scroll {
    display: flex; order: 3; flex: 1 1 100%; gap: 6px; overflow-x: auto; overflow-y: hidden;
    padding: 4px 0 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .nav-scroll::-webkit-scrollbar { display: none; }
  .nav-scroll .nav-item {
    width: auto !important; flex: 0 0 auto; white-space: nowrap; margin: 0; padding: 8px 12px;
    border: 1px solid var(--line, var(--border, #d8dbe9)); border-radius: 999px; font-size: 13px;
  }
  .nav-scroll .nav-item.active { box-shadow: none !important; border-color: var(--primary, #2c3a9c); }
  .nav-scroll .nav-item:hover, button:hover, .btn:hover, .tab:hover { transform: none; }

  .main { width: 100%; min-width: 0; }
  .topbar { padding: 12px 14px !important; flex-wrap: wrap; gap: 8px 10px; position: static !important; }
  .topbar h1 { font-size: 17px; }
  .topbar > div:last-child, .dashboard-topbar-actions { width: 100%; }
  .dashboard-topbar-actions { gap: 6px; }
  .dashboard-updated { white-space: normal; width: 100%; }
  .dashboard-report { flex: 1 1 auto; }
  .content { padding: 14px 12px 48px !important; max-width: 100% !important; }
  .card { padding: 14px !important; }

  .grid4, .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .trend-grid, .two-col, .row-2, .row-3 { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  .stat-card .num { font-size: 20px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .tab { white-space: nowrap; flex: 0 0 auto; }
  .qa-row .qa-btn { flex: 1 1 calc(50% - 10px); }
  .input-go { flex-wrap: wrap; }
  .actions-row { flex-wrap: wrap; }
  .live-toolbar input[type="date"] { width: 100%; }
  .rep-row { gap: 10px; }

  /* wide data tables scroll sideways inside themselves instead of breaking the page */
  .card table, .content table, .patient-db-table-wrap table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  .patient-db-table { min-width: 0 !important; }
  .patient-db-table-wrap { overflow-x: auto; }

  .modal-overlay { padding: 12px !important; align-items: flex-end !important; }
  .modal-box { max-width: 100% !important; max-height: 92vh; max-height: 92dvh; overflow-y: auto; padding: 18px !important; }
  .analytics-report-menu .menu { right: auto; left: 0; max-width: calc(100vw - 40px); }
  .slip { max-width: 100%; }
}
@media screen and (max-width: 360px) {
  .grid4, .insight-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ======================= RECEPTION ======================= */
@media screen and (max-width: 880px) {
  /* The Log out button lives in .sidebar-foot, which the old CSS hid on small screens. */
  .sidebar-foot { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px;
    margin: 0 0 0 auto !important; padding: 0 !important; flex: 0 0 auto; }
  .sidebar-foot .logout-btn { width: auto !important; margin: 0 !important; padding: 8px 14px; white-space: nowrap; }
  .sidebar-foot .clock { display: none; }
  body > .app > .sidebar.sidebar { flex-wrap: wrap; position: sticky; top: 0; z-index: 40; gap: 8px; }
  nav.tabs { flex: 1 1 100%; order: 3; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs .tab-btn { flex: 0 0 auto; white-space: nowrap; width: auto; }
  .sidebar .brand { order: 1; flex: 1 1 auto; min-width: 0; padding-bottom: 0; }
  .sidebar-foot { order: 2; }
  .main { padding: 14px 12px 40px !important; min-width: 0; }
  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid2, .form-grid, .two-col { grid-template-columns: minmax(0, 1fr) !important; }
  .table-wrap, .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .modal { max-width: calc(100vw - 20px) !important; width: calc(100vw - 20px) !important; max-height: 92vh; overflow-y: auto; }
}
@media screen and (max-width: 520px) { .dash { grid-template-columns: minmax(0, 1fr) !important; } }

/* ======================= DOCTOR ======================= */
@media screen and (max-width: 760px) {
  .appbar { gap: 8px; padding: 8px 12px !important; flex-wrap: nowrap; }
  .appbar .brand-row { min-width: 0; flex: 1 1 auto; }
  .appbar .brand-row b { font-size: 15px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
  .datechip { padding: 6px 8px; }
  .top-logout { padding: 7px 10px !important; font-size: 13px; white-space: nowrap; }
  .wrap { padding: 14px 12px 70px !important; }
  .hello { padding: 16px !important; border-radius: 16px; }
  .hello-l { gap: 12px; min-width: 0; }
  .hello-stats { width: 100%; }
  .hello-stats div { flex: 1 1 0; min-width: 0 !important; padding: 8px 10px; }
  .sections { width: 100% !important; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sections button { padding: 9px 14px; white-space: nowrap; flex: 0 0 auto; }
  .ctabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ctabs::-webkit-scrollbar { display: none; }
  .ctabs button { padding: 10px 12px; font-size: 14.5px; white-space: nowrap; flex: 0 0 auto; }
  .cards, .pcards, .cards[style] { grid-template-columns: minmax(0, 1fr) !important; }
  .tcard { grid-template-columns: 72px minmax(0, 1fr); min-height: 0; }
  .stub b { font-size: 30px; }
  .tbody { padding: 12px; }
  .pname { font-size: 16px; }
  .thead h2 { font-size: 19px; }
  .pbanner { padding: 14px; gap: 12px; }
  .pbanner h2 { font-size: 20px; }
  .pbanner .grow { min-width: 0; flex-basis: 100%; }
  .panel { padding: 14px; border-radius: 14px; }
  .mfields { grid-template-columns: minmax(0, 1fr); }
  .mh { flex-wrap: wrap; }
  .det, .meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; }
  .calgrid { gap: 4px; }
  .searchbar input { font-size: 16px; }
  .actionbar { border-radius: 14px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .suggest { max-height: 50vh; }
  .sh-pt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ======================= DISPENSARY ======================= */
@media screen and (max-width: 700px) {
  /* Fake phone chrome (clock, signal, wifi, battery) is only for the desktop mock-up. */
  .statusbar { display: none !important; }
  .stage { padding: 0 !important; }
  .phone { max-width: 100% !important; width: 100% !important; box-shadow: none !important; border-radius: 0 !important; }
  .content { padding-left: 14px !important; padding-right: 14px !important; }
  /* keep the bottom nav pinned: the app shell fills the screen and only .content scrolls */
  .phone { height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
           height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important; min-height: 0 !important; }
  .phone > .content { min-height: 0; -webkit-overflow-scrolling: touch; }
}
.pw-field { position: relative; }
.pw-field input { padding-right: 48px !important; }
.pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; min-height: 0 !important; border-radius: 50%; padding: 0;
  border: 1px solid var(--border-strong, var(--line, #cbd6e4)); background: var(--surface, #fff);
  color: var(--ink-dim, var(--muted, #5b6b85)); font: 800 13px/1 system-ui, sans-serif;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pw-toggle:hover { color: var(--primary, #1653a6); border-color: var(--primary, #1653a6); }
/* shared login (login.html) — the "i" button must never be clipped on narrow screens */
.password-wrap input { padding-right: 48px !important; }
.password-info-btn { min-height: 0 !important; z-index: 2; flex: none; }

/* ======================= PLATFORM DASHBOARD / BOOKING / LOGIN ======================= */
@media screen and (max-width: 700px) {
  .platform-left-tools { flex-wrap: wrap; padding: 0 12px !important; }
  .platform-left-tools button { flex: 1 1 auto; }
  .login-card, .login-box, .card.login { max-width: 100% !important; }
  .wrap { padding-left: 12px; padding-right: 12px; }
  .queue-head { flex-wrap: wrap; }
  .row { flex-wrap: wrap; }
  .row input { min-width: 0; flex: 1 1 140px; }
  .choice { flex-wrap: wrap; }
  .match { flex-wrap: wrap; gap: 8px; }
}

/* ======================= DARK MODE ======================= */
@media (prefers-color-scheme: dark) {
/* ---------- dark-mode safety net (inputs, hard-coded light surfaces) ---------- */
:root:not([data-theme="light"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
:root:not([data-theme="light"]) select, :root:not([data-theme="light"]) textarea {
  background-color: var(--surface, #16202f) !important;
  color: var(--ink, #eaf0f9) !important;
  border-color: var(--line, var(--border, #2c3d57)) !important;
  color-scheme: dark;
}
:root:not([data-theme="light"]) input::placeholder, :root:not([data-theme="light"]) textarea::placeholder { color: var(--muted, var(--ink-dim, var(--ink3, #8e94b8))) !important; opacity:.85; }
:root:not([data-theme="light"]) option { background: var(--surface, #16202f); color: var(--ink, #eaf0f9); }
:root:not([data-theme="light"]) .modal, :root:not([data-theme="light"]) .modal-box, :root:not([data-theme="light"]) .overlay .modal, :root:not([data-theme="light"]) .modal-overlay .modal-box { background: var(--surface, #16202f) !important; color: var(--ink, #eaf0f9) !important; }
:root:not([data-theme="light"]) .modal *:not(svg):not(path):not(.btn):not(button):not(.clinic-rx-sheet *):not(.rx-reception-sheet *):not([class*="badge"]):not([class*="pill"]) { border-color: var(--line, var(--border, #2c3d57)); }
:root:not([data-theme="light"]) .modal .field label, :root:not([data-theme="light"]) .modal label { color: var(--muted, var(--ink-dim, var(--ink2, #94a6c2))) !important; }
:root:not([data-theme="light"]) .detail-item, :root:not([data-theme="light"]) .patient-match, :root:not([data-theme="light"]) .info-card, :root:not([data-theme="light"]) .qrow, :root:not([data-theme="light"]) .token-box { background: var(--surface, #16202f) !important; color: var(--ink, #eaf0f9) !important; border-color: var(--line, var(--border, #2c3d57)) !important; }
:root:not([data-theme="light"]) .appointment-clickable:hover { background: var(--primary-tint, #1b2a42) !important; }
:root:not([data-theme="light"]) .date-pill { background: var(--primary-tint, #1b2a42) !important; color: var(--primary, #8b98ff) !important; }
:root:not([data-theme="light"]) .badge.inactive { background: var(--line, #2e3459) !important; color: var(--muted, #8e94b8) !important; }
:root:not([data-theme="light"]) .dashboard-skeleton, :root:not([data-theme="light"]) .analytics-skeleton { background: linear-gradient(90deg,#222845 25%,#2c3358 50%,#222845 75%) !important; background-size:200% 100% !important; }
:root:not([data-theme="light"]) .topbar, :root:not([data-theme="light"]) .appbar, :root:not([data-theme="light"]) .sidebar, :root:not([data-theme="light"]) .statusbar { background: var(--surface, #16202f) !important; color: var(--ink, #eaf0f9); }
:root:not([data-theme="light"]) .appointment-range-row { background: var(--surface, #16202f) !important; }
:root:not([data-theme="light"]) .clinic-hours { color: var(--muted, var(--ink-dim, #94a6c2)) !important; }
:root:not([data-theme="light"]) .queue-refresh, :root:not([data-theme="light"]) .qmuted, :root:not([data-theme="light"]) .token-label { color: var(--muted, #94a6c2) !important; }
:root:not([data-theme="light"]) .qname, :root:not([data-theme="light"]) .info-list { color: var(--ink, #eaf0f9) !important; }
:root:not([data-theme="light"]) table thead th, :root:not([data-theme="light"]) .tbl thead th { color: var(--ink, #c9d2ff) !important; }
:root:not([data-theme="light"]) .tcard.priority { --card-bg:#3a3213; --card-line:#8a7420; --stub:#4a3f14; --pill-ink:#ffe27a; color: var(--ink, #eaf0f9); }
:root:not([data-theme="light"]) .tcard.priority .meta dt { color: #e9dca0 !important; }
:root:not([data-theme="light"]) .menu [data-act="logout"] { background: #4a1f1c !important; color: #ffb4ad !important; }
:root:not([data-theme="light"]) .notice { background: var(--surface, #16202f); color: var(--muted, #94a6c2); }
:root:not([data-theme="light"]) .notice.ok { background: #14301f; color: #8fe0b0; }
:root:not([data-theme="light"]) .notice.warn { background: #33270f; color: #ffcb7a; }
:root:not([data-theme="light"]) .notice.err { background: #3a1816; color: #ffb4ad; }
:root:not([data-theme="light"]) .online-badge, :root:not([data-theme="light"]) .pill.online-pill { background:#2a2250 !important; color:#cdbfff !important; border-color:#473a85 !important; }
/* printable prescription sheets stay light inside dark mode */
:root:not([data-theme="light"]) .clinic-rx-sheet, :root:not([data-theme="light"]) .rx-reception-sheet, :root:not([data-theme="light"]) .print-slip { background:#fff !important; color:#151a33 !important; }
:root:not([data-theme="light"]) .clinic-rx-sheet input, :root:not([data-theme="light"]) .rx-reception-sheet input { background:#fff !important; color:#151a33 !important; }
}

/* ---------- dark-mode safety net (inputs, hard-coded light surfaces) ---------- */
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
:root[data-theme="dark"] select, :root[data-theme="dark"] textarea {
  background-color: var(--surface, #16202f) !important;
  color: var(--ink, #eaf0f9) !important;
  border-color: var(--line, var(--border, #2c3d57)) !important;
  color-scheme: dark;
}
:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--muted, var(--ink-dim, var(--ink3, #8e94b8))) !important; opacity:.85; }
:root[data-theme="dark"] option { background: var(--surface, #16202f); color: var(--ink, #eaf0f9); }
:root[data-theme="dark"] .modal, :root[data-theme="dark"] .modal-box, :root[data-theme="dark"] .overlay .modal, :root[data-theme="dark"] .modal-overlay .modal-box { background: var(--surface, #16202f) !important; color: var(--ink, #eaf0f9) !important; }
:root[data-theme="dark"] .modal *:not(svg):not(path):not(.btn):not(button):not(.clinic-rx-sheet *):not(.rx-reception-sheet *):not([class*="badge"]):not([class*="pill"]) { border-color: var(--line, var(--border, #2c3d57)); }
:root[data-theme="dark"] .modal .field label, :root[data-theme="dark"] .modal label { color: var(--muted, var(--ink-dim, var(--ink2, #94a6c2))) !important; }
:root[data-theme="dark"] .detail-item, :root[data-theme="dark"] .patient-match, :root[data-theme="dark"] .info-card, :root[data-theme="dark"] .qrow, :root[data-theme="dark"] .token-box { background: var(--surface, #16202f) !important; color: var(--ink, #eaf0f9) !important; border-color: var(--line, var(--border, #2c3d57)) !important; }
:root[data-theme="dark"] .appointment-clickable:hover { background: var(--primary-tint, #1b2a42) !important; }
:root[data-theme="dark"] .date-pill { background: var(--primary-tint, #1b2a42) !important; color: var(--primary, #8b98ff) !important; }
:root[data-theme="dark"] .badge.inactive { background: var(--line, #2e3459) !important; color: var(--muted, #8e94b8) !important; }
:root[data-theme="dark"] .dashboard-skeleton, :root[data-theme="dark"] .analytics-skeleton { background: linear-gradient(90deg,#222845 25%,#2c3358 50%,#222845 75%) !important; background-size:200% 100% !important; }
:root[data-theme="dark"] .topbar, :root[data-theme="dark"] .appbar, :root[data-theme="dark"] .sidebar, :root[data-theme="dark"] .statusbar { background: var(--surface, #16202f) !important; color: var(--ink, #eaf0f9); }
:root[data-theme="dark"] .appointment-range-row { background: var(--surface, #16202f) !important; }
:root[data-theme="dark"] .clinic-hours { color: var(--muted, var(--ink-dim, #94a6c2)) !important; }
:root[data-theme="dark"] .queue-refresh, :root[data-theme="dark"] .qmuted, :root[data-theme="dark"] .token-label { color: var(--muted, #94a6c2) !important; }
:root[data-theme="dark"] .qname, :root[data-theme="dark"] .info-list { color: var(--ink, #eaf0f9) !important; }
:root[data-theme="dark"] table thead th, :root[data-theme="dark"] .tbl thead th { color: var(--ink, #c9d2ff) !important; }
:root[data-theme="dark"] .tcard.priority { --card-bg:#3a3213; --card-line:#8a7420; --stub:#4a3f14; --pill-ink:#ffe27a; color: var(--ink, #eaf0f9); }
:root[data-theme="dark"] .tcard.priority .meta dt { color: #e9dca0 !important; }
:root[data-theme="dark"] .menu [data-act="logout"] { background: #4a1f1c !important; color: #ffb4ad !important; }
:root[data-theme="dark"] .notice { background: var(--surface, #16202f); color: var(--muted, #94a6c2); }
:root[data-theme="dark"] .notice.ok { background: #14301f; color: #8fe0b0; }
:root[data-theme="dark"] .notice.warn { background: #33270f; color: #ffcb7a; }
:root[data-theme="dark"] .notice.err { background: #3a1816; color: #ffb4ad; }
:root[data-theme="dark"] .online-badge, :root[data-theme="dark"] .pill.online-pill { background:#2a2250 !important; color:#cdbfff !important; border-color:#473a85 !important; }
/* printable prescription sheets stay light inside dark mode */
:root[data-theme="dark"] .clinic-rx-sheet, :root[data-theme="dark"] .rx-reception-sheet, :root[data-theme="dark"] .print-slip { background:#fff !important; color:#151a33 !important; }
:root[data-theme="dark"] .clinic-rx-sheet input, :root[data-theme="dark"] .rx-reception-sheet input { background:#fff !important; color:#151a33 !important; }


/* ================= V132 MOBILE + DARK-MODE HARDENING ================= */
/* This layer is intentionally additive: it does not alter application logic. */

html {
  color-scheme: light;
  overflow-x: hidden;
}
body {
  min-width: 0;
  overflow-x: hidden;
}
button, input, select, textarea {
  max-width: 100%;
}

/* ---------- tablets / small laptops ---------- */
@media screen and (max-width: 1024px) {
  .container, .wrap, .content, .main, .shell, .page, .page-wrap {
    max-width: 100% !important;
  }
  .grid, .grid2, .grid3, .grid4, .form-grid, .row-2, .row-3, .two-col, .three-col {
    min-width: 0;
  }
  .card, .panel, .section, .box, .table-wrap {
    min-width: 0;
    max-width: 100%;
  }
  .table-wrap, .table-responsive, .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- phones ---------- */
@media screen and (max-width: 640px) {
  html {
    font-size: 16px;
    overflow-x: hidden;
  }
  body {
    width: 100%;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* Common app shells */
  .app, .shell, .layout, .page-shell, .dashboard-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .main, main, .content, .wrap, .page, .page-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Prevent long headings / IDs / URLs from forcing the viewport wider */
  h1, h2, h3, h4, h5, h6, p, label, .title, .subtitle, .muted,
  .name, .clinic-name, .patient-name, .appointment-code, .token,
  td, th, .value, .meta, .description {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Common responsive grids */
  .grid3, .grid4, .cards, .pcards, .stats, .stat-grid,
  .insight-grid, .trend-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .grid2, .two-col, .three-col, .form-grid, .row-2, .row-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Forms */
  form, .form, .field, .form-field, .field-group {
    min-width: 0;
  }
  input, select, textarea {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
  }
  textarea {
    min-height: 90px;
  }
  .row, .actions, .actions-row, .actionbar, .toolbar, .filter-row,
  .button-row, .btn-row {
    flex-wrap: wrap !important;
    min-width: 0;
  }
  .row > *, .actions > *, .actions-row > *, .toolbar > *,
  .filter-row > *, .button-row > *, .btn-row > * {
    min-width: 0;
    max-width: 100%;
  }

  /* Tables: preserve all data, but keep it inside a scrollable area */
  table {
    max-width: 100%;
  }
  .table-wrap, .table-responsive, .table-container, .table-scroll,
  .tbl-wrap, .data-table-wrap, .patient-db-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table, .table-responsive table, .table-container table,
  .table-scroll table, .tbl-wrap table, .data-table-wrap table {
    min-width: max-content;
  }

  /* Modals / drawers */
  .modal-overlay, .overlay {
    padding: max(10px, env(safe-area-inset-left, 0px))
             max(10px, env(safe-area-inset-right, 0px))
             max(10px, env(safe-area-inset-bottom, 10px)) !important;
  }
  .modal, .modal-box, .dialog, .drawer, .popup {
    width: min(100%, 560px) !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    overflow-y: auto;
    box-sizing: border-box;
  }

  /* Navigation / tabs remain usable without hiding functionality */
  .tabs, .ctabs, nav.tabs, .sections, .nav-scroll {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar, .ctabs::-webkit-scrollbar,
  nav.tabs::-webkit-scrollbar, .sections::-webkit-scrollbar,
  .nav-scroll::-webkit-scrollbar {
    display: none;
  }
  .tabs > *, .ctabs > *, nav.tabs > *, .sections > *, .nav-scroll > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Touch targets */
  button, .btn, .tab, .tab-btn, .nav-item, a.btn {
    min-height: 42px;
  }

  /* Images and embedded media */
  img, svg, video, canvas, iframe {
    max-width: 100%;
  }
  iframe {
    border: 0;
  }

  /* Login / booking cards */
  .login-card, .login-box, .login-slip, .booking-card, .card.login {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0;
    margin-right: 0;
  }

  /* Avoid fixed desktop widths in common cards */
  .card, .panel, .box, .section-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Sticky/fixed controls must respect the phone safe area */
  .bottom-nav, .actionbar, .mobile-nav {
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
  }
}

/* ---------- very small phones ---------- */
@media screen and (max-width: 380px) {
  .content, .main, .wrap, .page, .page-wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .card, .panel {
    padding: 12px !important;
  }
  .topbar h1, .appbar .brand-row b {
    font-size: 16px !important;
  }
  button, .btn, .tab, .tab-btn {
    font-size: 13px;
  }
}

/* ---------- mobile dark-mode hardening ----------
   Uses each module's existing CSS variables, so existing desktop colors
   and module-specific themes remain intact. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-color: var(--bg, #0f1226);
    color: var(--ink, #eef0fb);
  }
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .panel,
  :root:not([data-theme="light"]) .box,
  :root:not([data-theme="light"]) .section-card,
  :root:not([data-theme="light"]) .login-card,
  :root:not([data-theme="light"]) .booking-card {
    color: var(--ink, #eef0fb);
    border-color: var(--border, var(--line, #2e3459));
  }
  :root:not([data-theme="light"]) input,
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) textarea {
    color-scheme: dark;
  }
}
:root[data-theme="dark"] body {
  background-color: var(--bg, #0f1226);
  color: var(--ink, #eef0fb);
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .box,
:root[data-theme="dark"] .section-card,
:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .booking-card {
  color: var(--ink, #eef0fb);
  border-color: var(--border, var(--line, #2e3459));
}

/* Keep prescription/print sheets intentionally white for printing, even in dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .clinic-rx-sheet,
  :root:not([data-theme="light"]) .rx-reception-sheet,
  :root:not([data-theme="light"]) .print-slip {
    color-scheme: light;
  }
}
:root[data-theme="dark"] .clinic-rx-sheet,
:root[data-theme="dark"] .rx-reception-sheet,
:root[data-theme="dark"] .print-slip {
  color-scheme: light;
}

/* ================= END V132 MOBILE + DARK-MODE HARDENING ================= */


/* ================= V132 RESPONSIVE + DARK VISUAL HARDENING =================
   CSS/UI only. No JavaScript, data, API, workflow, or interaction logic changes.
*/

/* Never let a child with an explicit desktop width expand the viewport. */
@media screen and (max-width: 900px) {
  .content, .main, .wrap, .page, .page-wrap, .shell, .container,
  .app, .stage, .phone, .login-shell {
    box-sizing: border-box;
  }

  /* Desktop side tools/utility rails become normal-flow controls. */
  .platform-left-tools {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Dense operation-hour rows stack rather than becoming horizontally clipped. */
  .op-row {
    grid-template-columns: minmax(90px, 1fr) minmax(0, 1fr) !important;
  }
  .op-row > * {
    min-width: 0 !important;
  }

  /* Appointment/token cards: preserve all information without forcing a 350px card. */
  .appt-cards, .cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Common two-column headers/toolbars stack when necessary. */
  .head, .topbar, .appbar, .modal-head, .appointment-filter-head {
    min-width: 0;
  }

  /* Long IDs, URLs and generated values should wrap instead of widening the page. */
  .online-booking-url, .appointment-code, .token, .mono,
  .code, .url, .patient-id {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* Small phones: make common two-column content single-column. */
@media screen and (max-width: 600px) {
  .slip-patient-grid,
  .detail-grid,
  .fields,
  .field-grid,
  .form-grid,
  .booking-grid,
  .report-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .slip-side {
    width: 88px !important;
  }

  /* Do not let flex children keep a desktop minimum width. */
  .row > *, .toolbar > *, .actions > *, .actions-row > *,
  .appointment-range-actions > *, .booking-tabs > * {
    flex: 0 1 auto;
    min-width: 0 !important;
  }

  /* Full-width controls are easier to use with touch. */
  .toolbar button, .toolbar .btn,
  .actions button, .actions .btn,
  .actions-row button, .actions-row .btn {
    max-width: 100%;
  }
}

/* Online booking page — dark backdrop. V141: scoped to the booking page only
   (its colour tokens previously leaked into every module); the rest of the booking
   page's dark layer lives in the V141 section below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-module="online-booking"] {
    background:
      linear-gradient(135deg, rgba(8,13,24,.96), rgba(14,22,38,.96)),
      url("rivaz-aesthetic-background.webp") center top / cover fixed no-repeat !important;
  }
}
:root[data-theme="dark"] body[data-module="online-booking"] {
  background:
    linear-gradient(135deg, rgba(8,13,24,.96), rgba(14,22,38,.96)),
    url("rivaz-aesthetic-background.webp") center top / cover fixed no-repeat !important;
}

/* Mobile dark-mode backdrop must not use a fixed attachment. */
@media screen and (max-width: 900px) {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body {
      background-attachment:scroll !important;
    }
  }
  :root[data-theme="dark"] body {
    background-attachment:scroll !important;
  }
}

/* Print documents remain intentionally unchanged/light for legibility. */
@media print {
  html, body {
    overflow: visible !important;
    background: #fff !important;
  }
}


/* ================= V132 MOBILE OVERFLOW RECTIFICATION =================
   UI-only correction based on mobile viewport validation.
*/
@media screen and (max-width: 600px) {
  /* Doctor module: prevent grid items from using their desktop min-content width. */
  .tabs4 {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    min-width: 0 !important;
  }
  .tabs4 .tab {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Doctor section switcher: keep both choices visible instead of clipped horizontal content. */
  .sections {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  .sections button {
    flex: 1 1 100%;
    min-width: 0 !important;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }

  /* Do not allow appointment cards or other grid children to establish a
     wider intrinsic grid track on narrow devices. */
  .cards, .pcards, .appt-cards, .tabs4 {
    min-width: 0 !important;
  }
  .cards > *, .pcards > *, .appt-cards > * {
    min-width: 0 !important;
    max-width: 100%;
  }

  /* Generic flex/grid safety for narrow screens. */
  .hello, .hello-l, .hello-stats, .thead, .legend,
  .toolbar, .actionbar, .row, .actions, .actions-row {
    min-width: 0 !important;
    max-width: 100%;
  }
  .hello-stats {
    width: 100%;
  }
  .hello-stats div {
    min-width: 0 !important;
  }
}

@media screen and (max-width: 380px) {
  .sections button {
    flex-basis: 100%;
  }
}


/* V132 — override hard-coded light appointment tab/card surfaces in dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tabs4 .tab {
    background: var(--surface, #181C36) !important;
    color: var(--ink, #EEF0FB) !important;
    border-color: var(--line, #2E3459) !important;
  }
  :root:not([data-theme="light"]) .tabs4 .tab .ti {
    background: var(--brand-soft, #262C5A) !important;
    color: var(--brand-ink, #C4CBFF) !important;
  }
}
:root[data-theme="dark"] .tabs4 .tab {
  background: var(--surface, #181C36) !important;
  color: var(--ink, #EEF0FB) !important;
  border-color: var(--line, #2E3459) !important;
}
:root[data-theme="dark"] .tabs4 .tab .ti {
  background: var(--brand-soft, #262C5A) !important;
  color: var(--brand-ink, #C4CBFF) !important;
}

/* ================= V135 MOBILE / REPORT TABLE RECTIFICATION =================
   UI-only changes for V135. No application logic is changed.
*/

/* Reception mobile navigation: mirror the Doctor mobile pattern by showing
   the main actions as full-width, easy-to-tap items instead of clipping them
   in a horizontal strip. */
@media screen and (max-width: 700px) {
  #tabNav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    flex: 1 1 100% !important;
    padding: 4px 0 6px !important;
  }
  #tabNav .tab-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: flex-start;
    white-space: normal !important;
    text-align: left;
    box-sizing: border-box;
    border-radius: 12px;
  }
}

/* Any table that actually needs horizontal room gets an internal scroller.
   The first column stays visible while the remaining columns move sideways. */
.table-wrap, .table-responsive, .table-container, .table-scroll,
.tbl-wrap, .data-table-wrap, .patient-db-table-wrap {
  position: relative;
  max-width: 100%;
}

.table-wrap table, .table-responsive table, .table-container table,
.table-scroll table, .tbl-wrap table, .data-table-wrap table,
.patient-db-table-wrap table,
.panel > table {
  border-collapse: separate;
  border-spacing: 0;
}

.table-wrap table th:first-child, .table-wrap table td:first-child,
.table-responsive table th:first-child, .table-responsive table td:first-child,
.table-container table th:first-child, .table-container table td:first-child,
.table-scroll table th:first-child, .table-scroll table td:first-child,
.tbl-wrap table th:first-child, .tbl-wrap table td:first-child,
.data-table-wrap table th:first-child, .data-table-wrap table td:first-child,
.patient-db-table-wrap table th:first-child, .patient-db-table-wrap table td:first-child,
.panel > table th:first-child, .panel > table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface, #fff);
  box-shadow: 1px 0 0 var(--border, #d8dbe9);
}

.table-wrap table th:first-child, .table-responsive table th:first-child,
.table-container table th:first-child, .table-scroll table th:first-child,
.tbl-wrap table th:first-child, .data-table-wrap table th:first-child,
.patient-db-table-wrap table th:first-child, .panel > table th:first-child {
  z-index: 4;
}

@media screen and (max-width: 900px) {
  /* Platform Admin: the clinics/dispensaries panels must scroll internally,
     not squeeze each column into a few pixels. */
  .panel:has(> table) {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .panel > table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    display: table !important;
    white-space: nowrap;
  }

  /* Shared report wrappers: preserve readable column widths. */
  .table-wrap, .table-responsive, .table-container, .table-scroll,
  .tbl-wrap, .data-table-wrap, .patient-db-table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table, .table-responsive table, .table-container table,
  .table-scroll table, .tbl-wrap table, .data-table-wrap table,
  .patient-db-table-wrap table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    display: table !important;
    white-space: nowrap;
  }

  /* Keep the sticky first column opaque while other columns pass behind it. */
  .table-wrap table th:first-child, .table-wrap table td:first-child,
  .table-responsive table th:first-child, .table-responsive table td:first-child,
  .table-container table th:first-child, .table-container table td:first-child,
  .table-scroll table th:first-child, .table-scroll table td:first-child,
  .tbl-wrap table th:first-child, .tbl-wrap table td:first-child,
  .data-table-wrap table th:first-child, .data-table-wrap table td:first-child,
  .patient-db-table-wrap table th:first-child, .patient-db-table-wrap table td:first-child,
  .panel > table th:first-child, .panel > table td:first-child {
    background: var(--surface, #fff) !important;
  }
}

/* Dark-mode equivalent for sticky report columns. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .table-wrap table th:first-child,
  :root:not([data-theme="light"]) .table-wrap table td:first-child,
  :root:not([data-theme="light"]) .table-responsive table th:first-child,
  :root:not([data-theme="light"]) .table-responsive table td:first-child,
  :root:not([data-theme="light"]) .table-container table th:first-child,
  :root:not([data-theme="light"]) .table-container table td:first-child,
  :root:not([data-theme="light"]) .table-scroll table th:first-child,
  :root:not([data-theme="light"]) .table-scroll table td:first-child,
  :root:not([data-theme="light"]) .tbl-wrap table th:first-child,
  :root:not([data-theme="light"]) .tbl-wrap table td:first-child,
  :root:not([data-theme="light"]) .data-table-wrap table th:first-child,
  :root:not([data-theme="light"]) .data-table-wrap table td:first-child,
  :root:not([data-theme="light"]) .patient-db-table-wrap table th:first-child,
  :root:not([data-theme="light"]) .patient-db-table-wrap table td:first-child,
  :root:not([data-theme="light"]) .panel > table th:first-child,
  :root:not([data-theme="light"]) .panel > table td:first-child {
    background: var(--surface, #181c36) !important;
  }
}
:root[data-theme="dark"] .table-wrap table th:first-child,
:root[data-theme="dark"] .table-wrap table td:first-child,
:root[data-theme="dark"] .table-responsive table th:first-child,
:root[data-theme="dark"] .table-responsive table td:first-child,
:root[data-theme="dark"] .table-container table th:first-child,
:root[data-theme="dark"] .table-container table td:first-child,
:root[data-theme="dark"] .table-scroll table th:first-child,
:root[data-theme="dark"] .table-scroll table td:first-child,
:root[data-theme="dark"] .tbl-wrap table th:first-child,
:root[data-theme="dark"] .tbl-wrap table td:first-child,
:root[data-theme="dark"] .data-table-wrap table th:first-child,
:root[data-theme="dark"] .data-table-wrap table td:first-child,
:root[data-theme="dark"] .patient-db-table-wrap table th:first-child,
:root[data-theme="dark"] .patient-db-table-wrap table td:first-child,
:root[data-theme="dark"] .panel > table th:first-child,
:root[data-theme="dark"] .panel > table td:first-child {
  background: var(--surface, #181c36) !important;
}

/* Platform Admin mobile controls: keep the action row compact and usable. */
@media screen and (max-width: 700px) {
  .platform-left-tools {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box;
    gap: 8px !important;
  }
  .platform-left-tools .tool-user {
    flex: 1 1 100%;
    min-width: 0;
  }
  .platform-left-tools button {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    text-align: center;
  }
  .wrap {
    padding: 18px 12px 60px !important;
    max-width: 100% !important;
  }
  .stat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .stat {
    min-width: 0;
    padding: 12px 10px;
  }
  .stat .n { font-size: 22px; }
  .stat .l { overflow-wrap: anywhere; }
}

/* V135 version marker. */

/* V135: include report tables whose existing scroller is the table itself
   or an inline overflow container inside a content/card/screen section. */
.table-wrap table, .table-responsive table, .table-container table,
.table-scroll table, .tbl-wrap table, .data-table-wrap table,
.patient-db-table-wrap table, .card table, .content table, .screen table {
  min-width: max-content;
}

.table-wrap table th:first-child, .table-wrap table td:first-child,
.table-responsive table th:first-child, .table-responsive table td:first-child,
.table-container table th:first-child, .table-container table td:first-child,
.table-scroll table th:first-child, .table-scroll table td:first-child,
.tbl-wrap table th:first-child, .tbl-wrap table td:first-child,
.data-table-wrap table th:first-child, .data-table-wrap table td:first-child,
.patient-db-table-wrap table th:first-child, .patient-db-table-wrap table td:first-child,
.card table th:first-child, .card table td:first-child,
.content table th:first-child, .content table td:first-child,
.screen table th:first-child, .screen table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface, #fff);
  box-shadow: 1px 0 0 var(--border, #d8dbe9);
}

.table-wrap table th:first-child, .table-responsive table th:first-child,
.table-container table th:first-child, .table-scroll table th:first-child,
.tbl-wrap table th:first-child, .data-table-wrap table th:first-child,
.patient-db-table-wrap table th:first-child, .card table th:first-child,
.content table th:first-child, .screen table th:first-child {
  z-index: 4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card table th:first-child,
  :root:not([data-theme="light"]) .card table td:first-child,
  :root:not([data-theme="light"]) .content table th:first-child,
  :root:not([data-theme="light"]) .content table td:first-child,
  :root:not([data-theme="light"]) .screen table th:first-child,
  :root:not([data-theme="light"]) .screen table td:first-child {
    background: var(--surface, #181c36) !important;
  }
}
:root[data-theme="dark"] .card table th:first-child,
:root[data-theme="dark"] .card table td:first-child,
:root[data-theme="dark"] .content table th:first-child,
:root[data-theme="dark"] .content table td:first-child,
:root[data-theme="dark"] .screen table th:first-child,
:root[data-theme="dark"] .screen table td:first-child {
  background: var(--surface, #181c36) !important;
}

/* V137: patient-history rows are interactive on all screen sizes. */
.patient-history-clickable{cursor:pointer;}
.patient-history-clickable:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;}

/* ================= V141 MOBILE + DARK-MODE COMPLETION =================
   UI-only. No markup structure, JavaScript, data, API or workflow changes.
   Module-specific rules are scoped with body[data-module="…"].
*/

/* Clinic Admin: the "Last updated" stamp sits on the coloured page header — it was grey-on-blue. */
body[data-module="clinic-admin"] .topbar .dashboard-updated { color: rgba(255,255,255,.86) !important; }

/* Dispensary (light): faint grey text/icons were below readable contrast on white. */
body[data-module="dispensary"] { --ink-faint: #66758E; }

/* Clinic Admin (all widths): the main column must be allowed to shrink, otherwise wide tables
   push the page past the viewport; a table card + form card pair stacks until there is room. */
body[data-module="clinic-admin"] .main { min-width: 0; }
body[data-module="clinic-admin"] .two-col > * { min-width: 0; }
@media screen and (max-width: 1500px) {
  body[data-module="clinic-admin"] .two-col:has(> .card > table) { grid-template-columns: minmax(0, 1fr) !important; }
}
body[data-module="clinic-admin"] .two-col > .card:has(> table) { overflow-x: auto; }
@media screen and (max-width: 1200px) {
  /* Operating-hours rows: 4 columns don't fit the half-width settings card on tablets. */
  body[data-module="clinic-admin"] .op-row { grid-template-columns: minmax(90px, 1fr) minmax(0, 1fr) !important; }
  body[data-module="clinic-admin"] .op-row > * { min-width: 0 !important; }
}

@media screen and (max-width: 900px) {
  /* Tables that scroll inside themselves (display:block) must not also be forced to
     max-content width, otherwise they spill past their card on phones. */
  .card table:not(.table-wrap table):not(.table-responsive table):not(.table-container table):not(.table-scroll table):not(.tbl-wrap table):not(.data-table-wrap table):not(.patient-db-table-wrap table),
  .content table:not(.table-wrap table):not(.table-responsive table):not(.table-container table):not(.table-scroll table):not(.tbl-wrap table):not(.data-table-wrap table):not(.patient-db-table-wrap table):not(.panel > table) {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 700px) {
  /* A field inside a .row (e.g. booking "Mobile number" + Verify) should take the line width;
     its input must not inherit the row's flex-basis as a height. */
  .row > .field { flex: 1 1 220px !important; min-width: 0 !important; }
  .row > .field > input, .row > .field > select { flex: 0 0 auto !important; }
}

@media screen and (max-width: 700px) {
  /* Reception header: compact sticky bar — clinic name truncates beside Log out, and the
     three main sections sit side-by-side as one row of large tap targets (was ~260px tall). */
  body[data-module="reception"] .sidebar .brand { flex: 1 1 0 !important; min-width: 0 !important; }
  body[data-module="reception"] .sidebar .brand-text { min-width: 0; }
  body[data-module="reception"] .sidebar .brand-text .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body[data-module="reception"] .sidebar-foot { margin-left: 8px !important; }
  body[data-module="reception"] #tabNav { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; padding: 2px 0 4px !important; }
  body[data-module="reception"] #tabNav .tab-btn {
    display: flex !important; flex-direction: column; align-items: center !important; justify-content: center !important;
    text-align: center !important; gap: 3px; padding: 8px 4px !important; font-size: 12px !important; line-height: 1.2;
    min-height: 52px; border-radius: 12px;
  }
  body[data-module="reception"] #tabNav .tab-btn .ic { margin: 0 !important; }

  /* Clinic Admin › Appointments: range buttons wrap two-per-row instead of squeezing labels;
     the range search box gets proper field padding. */
  .appointment-range-actions > .btn, .appointment-range-actions > button {
    flex: 1 1 calc(50% - 8px) !important; white-space: normal !important; min-width: 0 !important;
  }
  .input-go > input:not([type="checkbox"]):not([type="radio"]) {
    padding: 10px 12px !important; min-height: 44px; border: 1px solid var(--line, #d8dbe9); border-radius: 10px; box-sizing: border-box;
  }

  /* Doctor: long pills (e.g. "Seen by Dr. … · specialization") wrap instead of overflowing. */
  body[data-module="doctor"] .pill { white-space: normal; max-width: 100%; overflow-wrap: anywhere; line-height: 1.3; }

  /* Appointment cards: keep the token number on one line inside the stub. */
  .appt-card { grid-template-columns: 78px minmax(0, 1fr) !important; }
  .appt-stub b { font-size: 22px !important; white-space: nowrap; letter-spacing: -.02em; }
}

@media screen and (max-width: 900px) {
  /* Checkboxes/radios must keep their natural size (a phone rule gave every input width:100%). */
  input[type="checkbox"], input[type="radio"] {
    width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; min-height: 0 !important;
  }
}

/* Phones: the booking page's dark backdrop must scroll, not stay fixed (iOS/Android jank). */
@media screen and (max-width: 900px), screen and (hover: none) and (pointer: coarse) {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body[data-module="online-booking"] { background-attachment: scroll !important; }
  }
  :root[data-theme="dark"] body[data-module="online-booking"] { background-attachment: scroll !important; }
}

/* ---------- dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-module="online-booking"] { --p:#8fa2ff; --ink:#eef2ff; --muted:#aab4cf; --line:#33415e; --bg:#0c1220; --card:#141d2d; --ok:#6ed39b; --warn:#ffc66e; --online:#bca8ff; color:var(--ink); }
  :root:not([data-theme="light"]) body[data-module="online-booking"] .card,
  :root:not([data-theme="light"]) body[data-module="online-booking"] .qrow,
  :root:not([data-theme="light"]) body[data-module="online-booking"] .token-box { background:var(--card) !important; color:var(--ink) !important; border-color:var(--line) !important; }
  :root:not([data-theme="light"]) body[data-module="online-booking"] input,
  :root:not([data-theme="light"]) body[data-module="online-booking"] select,
  :root:not([data-theme="light"]) body[data-module="online-booking"] textarea { background:#101827 !important; color:var(--ink) !important; border-color:var(--line) !important; }
  :root:not([data-theme="light"]) body[data-module="online-booking"] label,
  :root:not([data-theme="light"]) body[data-module="online-booking"] .sub,
  :root:not([data-theme="light"]) body[data-module="online-booking"] .muted,
  :root:not([data-theme="light"]) body[data-module="online-booking"] .qmuted { color:var(--muted) !important; }
  :root:not([data-theme="light"]) body[data-module="online-booking"] .required { color:#ff9a93 !important; }
  :root:not([data-theme="light"]) body[data-module="online-booking"] .info-icon { color:#c4cbff !important; background:#262c5a !important; border-color:#3a4170 !important; }
  :root:not([data-theme="light"]) body[data-module="online-booking"] .qstatus.live { background:#15352a !important; color:#7ddca0 !important; }
  :root:not([data-theme="light"]) body[data-module="online-booking"] .qstatus.start { background:#232948 !important; color:#b7bcda !important; }
  :root:not([data-theme="light"]) body[data-module="online-booking"] .qstatus.out { background:#40191a !important; color:#ff9a93 !important; }
  :root:not([data-theme="light"]) body[data-module="online-booking"] .doctor-avatar { background:#262c5a !important; color:#c4cbff !important; }
  :root:not([data-theme="light"]) body[data-module="online-booking"] .token { color:#c4cbff !important; }
  :root:not([data-theme="light"]) body[data-module="online-booking"] .btn:not(.primary):not(.btn-primary) { background:#1a2438; color:var(--ink); border-color:var(--line); }
  :root:not([data-theme="light"]) body[data-module="login"] .brand-logo,
  :root:not([data-theme="light"]) body[data-module="dispensary"] .rivaz-login-img { background:rgba(255,255,255,.94) !important; border-radius:18px; padding:8px 14px; box-sizing:border-box; box-shadow:0 8px 22px rgba(0,0,0,.35); }
  :root:not([data-theme="light"]) img[alt="Clinic logo"]:not(.clinic-rx-sheet *):not(.rx-reception-sheet *),
  :root:not([data-theme="light"]) .clinic-logo-img { background:#fff; border-radius:10px; }
  :root:not([data-theme="light"]) body[data-module="login"] .login-card { background:rgba(24,28,54,.94) !important; border-color:#2e3459 !important; box-shadow:0 18px 40px rgba(0,0,0,.45) !important; }
  :root:not([data-theme="light"]) body[data-module="login"] .login-title { color:#eef0fb !important; }
  :root:not([data-theme="light"]) body[data-module="clinic-admin"] .topbar .btn-primary { background:linear-gradient(135deg,#4353c9,#6a4fc4) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 6px 16px rgba(0,0,0,.35) !important; }
  :root:not([data-theme="light"]) body[data-module="clinic-admin"] .prefix-input { background:var(--surface2,#1f2444) !important; border-color:var(--line,#2e3459) !important; }
  :root:not([data-theme="light"]) body[data-module="clinic-admin"] .prefix-input input { background:transparent !important; border:0 !important; }
  :root:not([data-theme="light"]) body[data-module="clinic-admin"] .badge.active,
  :root:not([data-theme="light"]) body[data-module="clinic-admin"] .pill.ok { background:rgba(125,220,160,.14) !important; color:#7ddca0 !important; }
  :root:not([data-theme="light"]) .link-btn[style*="#B42318"],
  :root:not([data-theme="light"]) .link-btn[style*="#B3261E"] { color:#ff9a93 !important; }
  :root:not([data-theme="light"]) .appt-card.new { --card-bg:#1a2140; --card-line:#34407a; --stub:#232c57; --stub-ink:#c4cbff; }
  :root:not([data-theme="light"]) .appt-card.revisit { --card-bg:#2a2116; --card-line:#7a5428; --stub:#3a2a17; --stub-ink:#ffc48a; }
  :root:not([data-theme="light"]) .appt-card.priority { --card-bg:#2e2912; --card-line:#8a7420; --stub:#4a3f14; --stub-ink:#ffe27a; }
  :root:not([data-theme="light"]) .appt-card.past { --card-bg:#1a1e36; --card-line:#2e3459; --stub:#20264a; --stub-ink:#b7bcda; }
  :root:not([data-theme="light"]) .appt-card.consulted { --card-bg:#171a30; --card-line:#3a4170; --stub:#1f2444; --stub-ink:#b7bcda; }
  :root:not([data-theme="light"]) .appt-card { color:var(--ink,#eef0fb); }
  :root:not([data-theme="light"]) .appt-status.status-waiting,
  :root:not([data-theme="light"]) .appointment-status-chip.waiting { background:#1b2c4a !important; color:#9cc2ff !important; border-color:#2d4a78 !important; }
  :root:not([data-theme="light"]) .appt-status.status-current,
  :root:not([data-theme="light"]) .appointment-status-chip.current { background:#3a3010 !important; color:#ffe27a !important; border-color:#7a6420 !important; }
  :root:not([data-theme="light"]) .appt-status.status-consulted,
  :root:not([data-theme="light"]) .appointment-status-chip.consulted { background:#15352a !important; color:#7ddca0 !important; border-color:#2f7a4b !important; }
  :root:not([data-theme="light"]) body[data-module="reception"] .main > .welcome { background:linear-gradient(135deg,#3a46b5,#5b3fb2) !important; color:#fff !important; }
  :root:not([data-theme="light"]) body[data-module="reception"] .tab-btn.active { background:#3a46b5 !important; color:#fff !important; border-color:#5664d6 !important; }
  :root:not([data-theme="light"]) body[data-module="reception"] .appt-tab.active,
  :root:not([data-theme="light"]) body[data-module="reception"] .chip.on,
  :root:not([data-theme="light"]) body[data-module="clinic-admin"] .chip.on { background:#3a46b5 !important; color:#fff !important; border-color:#5664d6 !important; }
  :root:not([data-theme="light"]) body[data-module="reception"] .booking-tab.priority.selected,
  :root:not([data-theme="light"]) body[data-module="reception"] .priority-note { background:#3a2c0f !important; color:#ffcb7a !important; border-color:#7a5a1a !important; }
  :root:not([data-theme="light"]) body[data-module="reception"] .slot.past,
  :root:not([data-theme="light"]) body[data-module="reception"] .slot.past:hover { background:#40191a !important; color:#ff9a93 !important; border-color:#6a2a28 !important; }
  :root:not([data-theme="light"]) body[data-module="reception"] .patient-resolve .title { color:#c4cbff !important; }
  :root:not([data-theme="light"]) body[data-module="reception"] [style*="#FFFBEB"] { background:#3a2c0f !important; border-color:#8a6420 !important; }
  :root:not([data-theme="light"]) body[data-module="reception"] [style*="color:#92400E"] { color:#ffcb7a !important; }
  :root:not([data-theme="light"]) body[data-module="reception"] [style*="color:#78350F"] { color:#f3d9a6 !important; }
  :root:not([data-theme="light"]) .badge.active,
  :root:not([data-theme="light"]) .pill.ok { background:rgba(125,220,160,.14) !important; color:#7ddca0 !important; }
  :root:not([data-theme="light"]) .toast:not(.warn):not(.bad):not(.err):not(.error) { background:#262c5a !important; color:#eef0fb !important; border:1px solid #3a4170 !important; box-shadow:0 12px 30px rgba(0,0,0,.45) !important; }
  :root:not([data-theme="light"]) body[data-module="doctor"] .hello { background-color:transparent !important; background-image:linear-gradient(135deg,#3a46b5,#5b3fb2) !important; color:#fff !important; }
  :root:not([data-theme="light"]) body[data-module="doctor"] .hello-stats div { background:rgba(255,255,255,.12) !important; }
  :root:not([data-theme="light"]) body[data-module="doctor"] .pill.brand { background:rgba(139,152,255,.16) !important; color:#c4cbff !important; }
  :root:not([data-theme="light"]) body[data-module="doctor"] .pill[style*="#FFF0A8"] { background:#4a3f14 !important; color:#ffe27a !important; border-color:#8a7420 !important; }
  :root:not([data-theme="light"]) body[data-module="doctor"] .pill.online-pill { background:#2a2250 !important; color:#cdbfff !important; border-color:#473a85 !important; }
  :root:not([data-theme="light"]) body[data-module="dispensary"] { --ink-faint:#7f8faa; }
  :root:not([data-theme="light"]) #dispForgotPassword { color:#8fa2ff !important; }
  :root:not([data-theme="light"]) body[data-module="dispensary"] .rivaz-login-logo { color:#c4cbff !important; }
  :root:not([data-theme="light"]) body[data-module="platform"] { --accent:#ffcb7a; --accent-tint:#3a2c0f; --danger:#ff9a93; --danger-tint:#40191a; --ok:#7ddca0; --ok-tint:#15352a; --success:#7ddca0; --muted:#b7bcda; }
  :root:not([data-theme="light"]) body[data-module="platform"] .platform-left-tools button:not(.logout) { background:#181c36 !important; color:#b7bcda !important; border-color:#3a4170 !important; box-shadow:0 8px 20px rgba(0,0,0,.3) !important; }
  :root:not([data-theme="light"]) body[data-module="platform"] .platform-left-tools .tool-user { color:#c4cbff !important; }
  :root:not([data-theme="light"]) body[data-module="platform"] .panel,
  :root:not([data-theme="light"]) body[data-module="platform"] .add-panel { border-color:#2e3459 !important; }
  :root:not([data-theme="light"]) body[data-module="platform"] .booking-url-input { background:#1f2444 !important; color:#eef0fb !important; }
}
:root[data-theme="dark"] body[data-module="online-booking"] { --p:#8fa2ff; --ink:#eef2ff; --muted:#aab4cf; --line:#33415e; --bg:#0c1220; --card:#141d2d; --ok:#6ed39b; --warn:#ffc66e; --online:#bca8ff; color:var(--ink); }
:root[data-theme="dark"] body[data-module="online-booking"] .card,
:root[data-theme="dark"] body[data-module="online-booking"] .qrow,
:root[data-theme="dark"] body[data-module="online-booking"] .token-box { background:var(--card) !important; color:var(--ink) !important; border-color:var(--line) !important; }
:root[data-theme="dark"] body[data-module="online-booking"] input,
:root[data-theme="dark"] body[data-module="online-booking"] select,
:root[data-theme="dark"] body[data-module="online-booking"] textarea { background:#101827 !important; color:var(--ink) !important; border-color:var(--line) !important; }
:root[data-theme="dark"] body[data-module="online-booking"] label,
:root[data-theme="dark"] body[data-module="online-booking"] .sub,
:root[data-theme="dark"] body[data-module="online-booking"] .muted,
:root[data-theme="dark"] body[data-module="online-booking"] .qmuted { color:var(--muted) !important; }
:root[data-theme="dark"] body[data-module="online-booking"] .required { color:#ff9a93 !important; }
:root[data-theme="dark"] body[data-module="online-booking"] .info-icon { color:#c4cbff !important; background:#262c5a !important; border-color:#3a4170 !important; }
:root[data-theme="dark"] body[data-module="online-booking"] .qstatus.live { background:#15352a !important; color:#7ddca0 !important; }
:root[data-theme="dark"] body[data-module="online-booking"] .qstatus.start { background:#232948 !important; color:#b7bcda !important; }
:root[data-theme="dark"] body[data-module="online-booking"] .qstatus.out { background:#40191a !important; color:#ff9a93 !important; }
:root[data-theme="dark"] body[data-module="online-booking"] .doctor-avatar { background:#262c5a !important; color:#c4cbff !important; }
:root[data-theme="dark"] body[data-module="online-booking"] .token { color:#c4cbff !important; }
:root[data-theme="dark"] body[data-module="online-booking"] .btn:not(.primary):not(.btn-primary) { background:#1a2438; color:var(--ink); border-color:var(--line); }
:root[data-theme="dark"] body[data-module="login"] .brand-logo,
:root[data-theme="dark"] body[data-module="dispensary"] .rivaz-login-img { background:rgba(255,255,255,.94) !important; border-radius:18px; padding:8px 14px; box-sizing:border-box; box-shadow:0 8px 22px rgba(0,0,0,.35); }
:root[data-theme="dark"] img[alt="Clinic logo"]:not(.clinic-rx-sheet *):not(.rx-reception-sheet *),
:root[data-theme="dark"] .clinic-logo-img { background:#fff; border-radius:10px; }
:root[data-theme="dark"] body[data-module="login"] .login-card { background:rgba(24,28,54,.94) !important; border-color:#2e3459 !important; box-shadow:0 18px 40px rgba(0,0,0,.45) !important; }
:root[data-theme="dark"] body[data-module="login"] .login-title { color:#eef0fb !important; }
:root[data-theme="dark"] body[data-module="clinic-admin"] .topbar .btn-primary { background:linear-gradient(135deg,#4353c9,#6a4fc4) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 6px 16px rgba(0,0,0,.35) !important; }
:root[data-theme="dark"] body[data-module="clinic-admin"] .prefix-input { background:var(--surface2,#1f2444) !important; border-color:var(--line,#2e3459) !important; }
:root[data-theme="dark"] body[data-module="clinic-admin"] .prefix-input input { background:transparent !important; border:0 !important; }
:root[data-theme="dark"] body[data-module="clinic-admin"] .badge.active,
:root[data-theme="dark"] body[data-module="clinic-admin"] .pill.ok { background:rgba(125,220,160,.14) !important; color:#7ddca0 !important; }
:root[data-theme="dark"] .link-btn[style*="#B42318"],
:root[data-theme="dark"] .link-btn[style*="#B3261E"] { color:#ff9a93 !important; }
:root[data-theme="dark"] .appt-card.new { --card-bg:#1a2140; --card-line:#34407a; --stub:#232c57; --stub-ink:#c4cbff; }
:root[data-theme="dark"] .appt-card.revisit { --card-bg:#2a2116; --card-line:#7a5428; --stub:#3a2a17; --stub-ink:#ffc48a; }
:root[data-theme="dark"] .appt-card.priority { --card-bg:#2e2912; --card-line:#8a7420; --stub:#4a3f14; --stub-ink:#ffe27a; }
:root[data-theme="dark"] .appt-card.past { --card-bg:#1a1e36; --card-line:#2e3459; --stub:#20264a; --stub-ink:#b7bcda; }
:root[data-theme="dark"] .appt-card.consulted { --card-bg:#171a30; --card-line:#3a4170; --stub:#1f2444; --stub-ink:#b7bcda; }
:root[data-theme="dark"] .appt-card { color:var(--ink,#eef0fb); }
:root[data-theme="dark"] .appt-status.status-waiting,
:root[data-theme="dark"] .appointment-status-chip.waiting { background:#1b2c4a !important; color:#9cc2ff !important; border-color:#2d4a78 !important; }
:root[data-theme="dark"] .appt-status.status-current,
:root[data-theme="dark"] .appointment-status-chip.current { background:#3a3010 !important; color:#ffe27a !important; border-color:#7a6420 !important; }
:root[data-theme="dark"] .appt-status.status-consulted,
:root[data-theme="dark"] .appointment-status-chip.consulted { background:#15352a !important; color:#7ddca0 !important; border-color:#2f7a4b !important; }
:root[data-theme="dark"] body[data-module="reception"] .main > .welcome { background:linear-gradient(135deg,#3a46b5,#5b3fb2) !important; color:#fff !important; }
:root[data-theme="dark"] body[data-module="reception"] .tab-btn.active { background:#3a46b5 !important; color:#fff !important; border-color:#5664d6 !important; }
:root[data-theme="dark"] body[data-module="reception"] .appt-tab.active,
:root[data-theme="dark"] body[data-module="reception"] .chip.on,
:root[data-theme="dark"] body[data-module="clinic-admin"] .chip.on { background:#3a46b5 !important; color:#fff !important; border-color:#5664d6 !important; }
:root[data-theme="dark"] body[data-module="reception"] .booking-tab.priority.selected,
:root[data-theme="dark"] body[data-module="reception"] .priority-note { background:#3a2c0f !important; color:#ffcb7a !important; border-color:#7a5a1a !important; }
:root[data-theme="dark"] body[data-module="reception"] .slot.past,
:root[data-theme="dark"] body[data-module="reception"] .slot.past:hover { background:#40191a !important; color:#ff9a93 !important; border-color:#6a2a28 !important; }
:root[data-theme="dark"] body[data-module="reception"] .patient-resolve .title { color:#c4cbff !important; }
:root[data-theme="dark"] body[data-module="reception"] [style*="#FFFBEB"] { background:#3a2c0f !important; border-color:#8a6420 !important; }
:root[data-theme="dark"] body[data-module="reception"] [style*="color:#92400E"] { color:#ffcb7a !important; }
:root[data-theme="dark"] body[data-module="reception"] [style*="color:#78350F"] { color:#f3d9a6 !important; }
:root[data-theme="dark"] .badge.active,
:root[data-theme="dark"] .pill.ok { background:rgba(125,220,160,.14) !important; color:#7ddca0 !important; }
:root[data-theme="dark"] .toast:not(.warn):not(.bad):not(.err):not(.error) { background:#262c5a !important; color:#eef0fb !important; border:1px solid #3a4170 !important; box-shadow:0 12px 30px rgba(0,0,0,.45) !important; }
:root[data-theme="dark"] body[data-module="doctor"] .hello { background-color:transparent !important; background-image:linear-gradient(135deg,#3a46b5,#5b3fb2) !important; color:#fff !important; }
:root[data-theme="dark"] body[data-module="doctor"] .hello-stats div { background:rgba(255,255,255,.12) !important; }
:root[data-theme="dark"] body[data-module="doctor"] .pill.brand { background:rgba(139,152,255,.16) !important; color:#c4cbff !important; }
:root[data-theme="dark"] body[data-module="doctor"] .pill[style*="#FFF0A8"] { background:#4a3f14 !important; color:#ffe27a !important; border-color:#8a7420 !important; }
:root[data-theme="dark"] body[data-module="doctor"] .pill.online-pill { background:#2a2250 !important; color:#cdbfff !important; border-color:#473a85 !important; }
:root[data-theme="dark"] body[data-module="dispensary"] { --ink-faint:#7f8faa; }
:root[data-theme="dark"] #dispForgotPassword { color:#8fa2ff !important; }
:root[data-theme="dark"] body[data-module="dispensary"] .rivaz-login-logo { color:#c4cbff !important; }
:root[data-theme="dark"] body[data-module="platform"] { --accent:#ffcb7a; --accent-tint:#3a2c0f; --danger:#ff9a93; --danger-tint:#40191a; --ok:#7ddca0; --ok-tint:#15352a; --success:#7ddca0; --muted:#b7bcda; }
:root[data-theme="dark"] body[data-module="platform"] .platform-left-tools button:not(.logout) { background:#181c36 !important; color:#b7bcda !important; border-color:#3a4170 !important; box-shadow:0 8px 20px rgba(0,0,0,.3) !important; }
:root[data-theme="dark"] body[data-module="platform"] .platform-left-tools .tool-user { color:#c4cbff !important; }
:root[data-theme="dark"] body[data-module="platform"] .panel,
:root[data-theme="dark"] body[data-module="platform"] .add-panel { border-color:#2e3459 !important; }
:root[data-theme="dark"] body[data-module="platform"] .booking-url-input { background:#1f2444 !important; color:#eef0fb !important; }
/* ================= END V141 ================= */

/* ================= V144 FIXES (bug list 9 Oct 2026) ================= */

/* Platform Admin › clinic & dispensary tables: action links (Edit / Reset password /
   Suspend …) were clipped at the right edge. Stack them and let the panel scroll. */
body[data-module="platform"] .panel:has(> table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
body[data-module="platform"] .panel > table td:last-child > div {
  flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; flex-wrap: nowrap !important;
}
body[data-module="platform"] .panel > table td:last-child .link-btn { white-space: nowrap; }
body[data-module="platform"] .panel > table td:last-child { min-width: 120px; }
body[data-module="platform"] .panel > table th,
body[data-module="platform"] .panel > table td { padding-left: 11px; padding-right: 11px; }
body[data-module="platform"] .online-booking-cell { min-width: 170px !important; }
body[data-module="platform"] .online-booking-url { max-width: 170px !important; }
@media screen and (min-width: 1101px) {
  /* Use the extra width on large screens while staying clear of the fixed left tool rail. */
  body[data-module="platform"] .wrap { max-width: max(980px, min(1240px, calc(100vw - 360px))) !important; }
}

/* Frozen first table column: level 1 is enough to stay above the other cells, and keeps it
   BELOW sticky page headers (it used to slide over the header while scrolling). */
:is(.table-wrap, .table-responsive, .table-container, .table-scroll, .tbl-wrap, .data-table-wrap,
    .patient-db-table-wrap, .card, .content, .screen) table :is(th, td):first-child,
.panel > table :is(th, td):first-child { z-index: 1 !important; }

/* Clinic Admin sidebar footer: a long username (e.g. MOON123ADMIN) wraps instead of running
   under the Log out button. */
body[data-module="clinic-admin"] .sidebar-foot > div:nth-child(2) { min-width: 0; overflow: hidden; }
body[data-module="clinic-admin"] #adminDisplayName,
body[data-module="clinic-admin"] #adminUsernameLabel { overflow-wrap: anywhere; word-break: break-word; }

/* Clinic Admin › Medicine inventory: stack the upload and stock-list cards until there is room,
   and let the stock table scroll inside its card instead of running off the page. */
@media screen and (max-width: 1500px) {
  body[data-module="clinic-admin"] .two-col:has(#medPreviewWrap) { grid-template-columns: minmax(0, 1fr) !important; }
}
body[data-module="clinic-admin"] #medPreviewWrap { overflow-x: auto; max-width: 100%; }
body[data-module="clinic-admin"] #medPreviewWrap table { width: 100%; min-width: 0 !important; }
body[data-module="clinic-admin"] #medPreviewWrap td { white-space: normal !important; }
@media screen and (min-width: 901px) {
  /* Desktop sidebar footer: Log out on its own row so long names wrap between words. */
  body[data-module="clinic-admin"] .sidebar-foot { flex-wrap: wrap; row-gap: 10px; }
  body[data-module="clinic-admin"] .sidebar-foot .admin-logout { flex: 1 1 100% !important; }
  body[data-module="clinic-admin"] #adminDisplayName,
  body[data-module="clinic-admin"] #adminUsernameLabel { overflow-wrap: break-word; word-break: normal; }
}
/* Medicine inventory: the suggestion-preview box gets normal field styling. */
body[data-module="clinic-admin"] #medDemoInput {
  width: 100%; box-sizing: border-box; min-height: 42px; padding: 10px 12px;
  border: 1px solid var(--line, #d8dbe9); border-radius: 10px; background: var(--surface, #fff); color: var(--ink, inherit); font: inherit;
}
body[data-module="clinic-admin"] #medDemoInput:disabled { opacity: .7; }
@media screen and (max-width: 640px) {
  body[data-module="clinic-admin"] .input-go:has(#medClearBtn) > .btn { flex: 1 1 100% !important; }
}

/* Platform › delete clinic: the destructive button is red (global primary gradient overrode it). */
body[data-module="platform"] #deleteClinicConfirmBtn {
  background: linear-gradient(135deg, #D94139, #B72D27) !important; border-color: #B72D27 !important; color: #fff !important;
}
body[data-module="platform"] #deleteClinicConfirmBtn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none !important; }
/* ================= END V144 ================= */


/* ======================= V148 — new Rivaz Ops logo, unified login, polish ======================= */
/* New transparent logo: no white plate behind it in dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-module="login"] img.brand-logo,
  :root:not([data-theme="light"]) body[data-module="dispensary"] img.rivaz-login-img { background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
}
:root[data-theme="dark"] body[data-module="login"] img.brand-logo,
:root[data-theme="dark"] body[data-module="dispensary"] img.rivaz-login-img { background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

/* Platform topbar: chart icon straight on the bar */
body[data-module="platform"] .platform-brand-logo { width: auto !important; height: 30px !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; align-self: center; }

/* Online booking: the page background reaches the bottom of the screen */
body[data-module="online-booking"] { min-height: 100vh; min-height: 100dvh; }

/* Dispensary login — same look as the Rivaz Ops CRM login */
body[data-module="dispensary"] .rz-dlogin-head { padding-top: 7vh !important; }
body[data-module="dispensary"] .rz-dlogin-head .rivaz-login-img { width: min(230px, 64%) !important; height: auto !important; margin: 0 auto 8px !important; }
body[data-module="dispensary"] .rz-app-title { font-family: "Noto Serif", Georgia, "Times New Roman", serif !important; font-weight: 700 !important; font-size: 30px !important; line-height: 1.15; letter-spacing: -.01em; color: #2B3898 !important; margin: 6px 0 6px !important; }
body[data-module="dispensary"] .rz-dlogin-head .sub { font-family: Manrope, system-ui, sans-serif; font-size: 12.5px !important; color: #6A7291 !important; margin-bottom: 14px !important; }
body[data-module="dispensary"] .rz-dlogin-card { font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; padding: 22px !important; border-radius: 16px !important; background: rgba(255,255,255,.92) !important; border: 1px solid #DCE5E1 !important; box-shadow: 0 18px 50px rgba(20,26,58,.22) !important; }
body[data-module="dispensary"] .rz-dlogin-card .field { gap: 5px !important; margin-bottom: 12px !important; }
body[data-module="dispensary"] .rz-dlogin-card .field label { font-size: 12.5px !important; font-weight: 600 !important; color: #454D70 !important; }
body[data-module="dispensary"] .rz-dlogin-card .field input { font-family: inherit !important; font-size: 16px !important; height: 40px; padding: 0 11px !important; border: 1px solid #C3CFCA !important; border-radius: 9px !important; background: #fff !important; color: #141A3A !important; }
body[data-module="dispensary"] .rz-dlogin-card .remember-row { color: #454D70 !important; margin: -2px 0 12px !important; }
body[data-module="dispensary"] .rz-dlogin-card .btn-primary { height: 42px; border-radius: 9px !important; background: #2B3898 !important; background-image: none !important; border: 1px solid #2B3898 !important; color: #fff !important; font-family: inherit !important; font-size: 14px !important; font-weight: 650 !important; box-shadow: none !important; }
body[data-module="dispensary"] .rz-dlogin-card .rz-dlogin-forgot { color: #141A3A !important; font-weight: 650 !important; font-size: 14px; margin-top: 12px !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-module="dispensary"] .rz-app-title { color: #C3CBFF !important; }
  :root:not([data-theme="light"]) body[data-module="dispensary"] .rz-dlogin-head .sub { color: #9097C0 !important; }
  :root:not([data-theme="light"]) body[data-module="dispensary"] .rz-dlogin-card { background: rgba(22,28,66,.86) !important; border-color: #283066 !important; box-shadow: 0 20px 60px rgba(0,0,0,.55) !important; }
  :root:not([data-theme="light"]) body[data-module="dispensary"] .rz-dlogin-card .field label,
  :root:not([data-theme="light"]) body[data-module="dispensary"] .rz-dlogin-card .remember-row { color: #B9BFDF !important; }
  :root:not([data-theme="light"]) body[data-module="dispensary"] .rz-dlogin-card .field input { background: #161C42 !important; border-color: #3A4380 !important; color: #E8EBF8 !important; }
  :root:not([data-theme="light"]) body[data-module="dispensary"] .rz-dlogin-card .btn-primary { background: #8E9DFF !important; border-color: #8E9DFF !important; color: #0D1230 !important; }
  :root:not([data-theme="light"]) body[data-module="dispensary"] .rz-dlogin-card .rz-dlogin-forgot { color: #E8EBF8 !important; }
}