/* Rivaz V153 — UI only. Loaded last on every page.
   1) Client (clinic) logo + name in the top centre of every clinic login's home screen
      (Reception gets the same centre header as Clinic Admin; Doctor shows its top bar on the welcome screen;
      Dispensary shows its name centred at the top).
   2) Phones: compact top bars (Reception, Clinic Admin, Platform), two stat cards per row, tables scroll
      sideways instead of cutting text, badges never cut off.
   3) Dark mode touch-ups for the new pieces. */

/* ---------------- 1. Reception: clinic logo + name in the centre header (same as Clinic Admin) ---------------- */
html:root body[data-module="reception"] .sidebar > .brand { display: none !important; }
body[data-module="reception"] .rz-clinic-head {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 10px 24px; margin: -4px 0 16px;
  background: var(--surface, #fff); border: 1px solid var(--line, #E3E7F3); border-radius: 14px;
}
body[data-module="reception"] .rz-clinic-head .rz-ch-mark {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary, #3154C6); color: #fff; font-weight: 800; font-size: 14px;
}
body[data-module="reception"] .rz-clinic-head .rz-ch-mark:has(img) { background: #fff; }
body[data-module="reception"] .rz-clinic-head .rz-ch-mark img { width: 100%; height: 100%; object-fit: contain; }
body[data-module="reception"] .rz-clinic-head .rz-ch-name {
  font-weight: 700; font-size: 18px; color: var(--ink, #1A2140);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-module="reception"] .rz-clinic-head { background: rgba(24,28,54,.92); border-color: #2E3459; }
  :root:not([data-theme="light"]) body[data-module="reception"] .rz-clinic-head .rz-ch-name { color: #EEF0FB; }
}
:root[data-theme="dark"] body[data-module="reception"] .rz-clinic-head { background: rgba(24,28,54,.92); border-color: #2E3459; }
:root[data-theme="dark"] body[data-module="reception"] .rz-clinic-head .rz-ch-name { color: #EEF0FB; }

/* Doctor: the top bar (Rivaz logo | clinic logo + name | doctor, Sign out) is also shown on the welcome screen */
body[data-module="doctor"] .rz-appbar3 + main.welcome { min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px); }

/* Dispensary: dispensary name centred at the top of the screen */
.rz-disp-brand { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 14px; background: var(--surface, #fff); border-bottom: 1px solid var(--border, #E3E7F3); }
.rz-disp-brand .rz-db-mark { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: #2B3898; color: #fff; font-weight: 800; font-size: 12px; flex: 0 0 30px; }
.rz-disp-brand .rz-db-name { font-weight: 700; font-size: 16px; color: var(--ink, #151A33); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rz-disp-brand { background: #181C36; border-bottom-color: #2E3459; }
  :root:not([data-theme="light"]) .rz-disp-brand .rz-db-name { color: #EEF0FB; }
  :root:not([data-theme="light"]) .rz-disp-brand .rz-db-mark { background: #8B98FF; color: #0F1226; }
}
:root[data-theme="dark"] .rz-disp-brand { background: #181C36; border-bottom-color: #2E3459; }
:root[data-theme="dark"] .rz-disp-brand .rz-db-name { color: #EEF0FB; }

/* ---------------- 2. Phones ---------------- */
@media screen and (max-width: 900px) {
  /* Reception top bar: Rivaz logo card | Change password | Log out, then the three tabs */
  html:root body[data-module="reception"] .sidebar .rz-side-logo { display: flex !important; order: 1; flex: 0 0 auto; width: auto !important; margin: 0 !important; padding: 6px 10px !important; border-radius: 9px !important; }
  html:root body[data-module="reception"] .sidebar .rz-side-logo img { max-width: 70px !important; width: 70px !important; height: auto !important; }
  html:root body[data-module="reception"] .sidebar .sidebar-foot { order: 2; flex: 1 1 auto; display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 !important; padding: 0 !important; border: 0 !important; width: auto !important; }
  html:root body[data-module="reception"] .sidebar .sidebar-foot .clock { display: none !important; }
  html:root body[data-module="reception"] .sidebar .sidebar-foot .btn { width: auto !important; margin: 0 !important; min-height: 38px; padding: 0 12px !important; font-size: 13px !important; white-space: nowrap; }
  html:root body[data-module="reception"] .sidebar #tabNav { order: 3; flex: 1 1 100%; }
  html:root body[data-module="reception"] .sidebar .tab-btn { min-height: 52px !important; padding: 6px 4px !important; font-size: 12px !important; line-height: 1.2; }
  body[data-module="reception"] .rz-clinic-head { min-height: 48px; padding: 8px 14px; gap: 10px; margin: 0 0 12px; }
  body[data-module="reception"] .rz-clinic-head .rz-ch-mark { width: 32px; height: 32px; flex-basis: 32px; font-size: 12px; }
  body[data-module="reception"] .rz-clinic-head .rz-ch-name { font-size: 16px; }

  /* Clinic Admin top bar: Rivaz logo card | Change password | Log out on one row, menu below */
  html:root body[data-module="clinic-admin"] .sidebar .rz-side-toplogo { order: 1 !important; flex: 0 0 auto !important; padding: 6px 10px !important; }
  html:root body[data-module="clinic-admin"] .sidebar .rz-side-toplogo img { max-width: 62px !important; width: 62px !important; }
  html:root body[data-module="clinic-admin"] .sidebar .rcp-side .rcp-side-btn svg { flex: 0 0 auto; }
  html:root body[data-module="clinic-admin"] .sidebar .sidebar-foot .admin-logout { padding: 0 12px !important; min-height: 38px; }
  html:root body[data-module="clinic-admin"] .sidebar .rcp-side { order: 2 !important; flex: 0 1 auto !important; margin-left: auto !important; display: flex !important; justify-content: flex-end; margin: 0 !important; padding: 0 !important; border: 0 !important; width: auto !important; }
  html:root body[data-module="clinic-admin"] .sidebar .rcp-side .rcp-side-btn { width: auto !important; min-height: 38px !important; padding: 0 9px !important; gap: 6px !important; font-size: 12.5px !important; white-space: nowrap; }
  html:root body[data-module="clinic-admin"] .sidebar .sidebar-foot { order: 3 !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
  html:root body[data-module="clinic-admin"] .sidebar .sidebar-foot #adminAvatar { display: none !important; }
  html:root body[data-module="clinic-admin"] .sidebar .nav-scroll { order: 4 !important; flex: 1 1 100% !important; }
  html:root body[data-module="clinic-admin"] .sidebar { row-gap: 10px !important; align-items: center !important; }

  /* Platform: one compact bar — Rivaz logo card | Change password | Log out (the older title bar is hidden) */
  html:root body[data-module="platform"] > .topbar { display: none !important; }
  html:root body[data-module="platform"] .platform-left-tools { position: sticky !important; top: 0; z-index: 30; display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 8px !important; max-width: none !important; margin: 0 !important; padding: 10px 12px !important; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
  html:root body[data-module="platform"] .platform-left-tools .rz-pf-card { order: 1; padding: 6px 10px !important; }
  html:root body[data-module="platform"] .platform-left-tools .rz-pf-card img { max-width: 70px !important; width: 70px !important; }
  html:root body[data-module="platform"] .platform-left-tools .tool-user { order: 2; flex: 1 1 auto; min-width: 0; padding: 0 !important; font-size: 12.5px !important; }
  html:root body[data-module="platform"] .platform-left-tools > button { order: 3; width: auto !important; flex: 0 0 auto !important; min-height: 38px !important; padding: 0 12px !important; font-size: 13px !important; margin: 0 !important; white-space: nowrap; }
}
@media screen and (max-width: 374px) {
  html:root body[data-module="clinic-admin"] .sidebar .rcp-side .rcp-side-btn { font-size: 0 !important; gap: 0 !important; padding: 0 10px !important; }
  html:root body[data-module="clinic-admin"] .sidebar .rcp-side .rcp-side-btn svg { width: 18px; height: 18px; }
  html:root body[data-module="reception"] .sidebar .rz-side-logo img { max-width: 58px !important; width: 58px !important; }
  html:root body[data-module="reception"] .sidebar .sidebar-foot .btn { padding: 0 9px !important; font-size: 12.5px !important; }
}
@media screen and (max-width: 420px) {
  html:root body[data-module="platform"] .platform-left-tools .tool-user { flex-basis: 100%; order: 4; }
}

/* Stat cards: two per row on phones (one long column wasted the screen) */
@media screen and (max-width: 640px) {
  html:root body[data-module="reception"] .dash,
  html:root body[data-module="clinic-admin"] .grid4,
  html:root body[data-module="clinic-admin"] .insight-grid,
  html:root body[data-module="clinic-admin"] .analytics-kpis,
  html:root body[data-module="clinic-admin"] .trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html:root body[data-module="reception"] .dash .dash-card { padding: 12px 14px !important; min-width: 0; }
  html:root body[data-module="reception"] .dash .dash-card .num { font-size: 22px !important; }
  html:root body[data-module="reception"] .dash .dash-card .lbl { font-size: 11.5px !important; }
  html:root body[data-module="clinic-admin"] .grid4 > *, html:root body[data-module="clinic-admin"] .analytics-kpis > * { min-width: 0; }
  html:root body[data-module="clinic-admin"] .stat-card { padding: 12px 14px !important; }
}
@media screen and (max-width: 340px) {
  html:root body[data-module="reception"] .dash,
  html:root body[data-module="clinic-admin"] .grid4,
  html:root body[data-module="clinic-admin"] .insight-grid,
  html:root body[data-module="clinic-admin"] .analytics-kpis { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Tables: scroll sideways, never cut the last column (e.g. Today's queue status) */
@media screen and (max-width: 900px) {
  html:root body[data-module="clinic-admin"] .dashboard-queue-table { min-width: 520px; }
  html:root body[data-module="clinic-admin"] .dashboard-queue-table th,
  html:root body[data-module="clinic-admin"] .dashboard-queue-table td { white-space: nowrap; overflow: visible !important; text-overflow: clip !important; }
  html:root body[data-module="platform"] .panel { -webkit-overflow-scrolling: touch; }
}

/* Doctor appointment cards: badges (Revisit / Waiting / PRIORITY) wrap instead of being cut off */
html:root body[data-module="doctor"] .tcard .trow { flex-wrap: wrap !important; justify-content: flex-start !important; gap: 6px !important; align-items: center; }
html:root body[data-module="doctor"] .tcard .trow .pill[style*="margin-left"] { margin-left: 0 !important; }
html:root body[data-module="doctor"] .tcard .trow > div:first-child { flex: 1 1 100%; min-width: 0; }
html:root body[data-module="doctor"] .tcard .trow .pill,
html:root body[data-module="doctor"] .tcard .trow .appointment-status-chip { white-space: nowrap !important; word-break: normal !important; flex: 0 0 auto; }