/* Copyright (c) 2026 Suhayb Altayeb. All rights reserved. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..800;1,9..40,400..700&family=Lora:ital,wght@0,500..700;1,500..700&display=swap');

:root {
  --color-bg: #f2f6fb;
  --color-bg-alt: #eaf1f8;
  --color-surface: #ffffff;
  --color-surface-alt: #f8fafc;
  --color-border: #e1e7ee;
  --color-text: #14202c;
  --color-text-muted: #5c6b7a;
  --color-primary: #0f5c96;
  --color-primary-dark: #0a4370;
  --color-primary-light: #2f83c4;
  --color-primary-soft: #e8f1fb;
  --color-accent: #0a7d61;
  --color-accent-soft: #e3f7f0;
  --color-star: #f0a83a;
  --color-pending: #9a6316;
  --color-pending-bg: #fdf3e0;
  --color-accepted: #0f5c96;
  --color-accepted-bg: #e8f1fb;
  --color-arrived: #0a7383;
  --color-arrived-bg: #e1f5f8;
  --color-active: #137451;
  --color-active-bg: #e3f6ee;
  --color-enrolled: #7c4fb3;
  --color-enrolled-bg: #f1e9f9;
  --color-discharged: #5c6b7a;
  --color-discharged-bg: #eceff2;
  --color-rejected: #c0392b;
  --color-rejected-bg: #fbe9e7;
  --color-danger: #c0392b;
  /* Chart palette — bright and distinct, deliberately no blue or pink.
     Used by every bar/donut chart on the dashboards (insights pages,
     satisfaction), separate from the status chip colors above. */
  --chart-green: #22a559;
  --chart-orange: #f97316;
  --chart-purple: #8b5cf6;
  --chart-yellow: #eab308;
  --chart-red: #dc2626;
  --chart-lime: #84cc16;
  --chart-brown: #a0522d;
  --chart-olive: #6b8e23;
  --chart-gray: #78716c;
  --chart-op: #7c3aed; /* deep purple */
  --chart-ip: #f59e0b; /* amber — far apart from purple, even for colour-blind viewers */
  /* Dark navy sidebar theme (kept separate from the light --color-* surface
     tokens above so the rest of the app's cards/tables/forms stay on the
     light palette — only .sidebar and its children read these). */
  --color-sidebar-bg: #16243a;
  --color-sidebar-bg-alt: #1c2f4a;
  --color-sidebar-text: #aebbd0;
  --color-sidebar-text-bright: #eef2f8;
  --color-sidebar-border: #253a58;
  --color-sidebar-active-bg: #0f5c96;
  --color-sidebar-active-text: #ffffff;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Lora', Georgia, "Times New Roman", serif;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 6px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 10px rgba(16, 24, 40, 0.07), 0 2px 4px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.12), 0 4px 10px rgba(16, 24, 40, 0.06);
  --radius: 12px;
  --radius-lg: 18px;
  /* Height of .topbar (14px padding + 68px logo + 14px padding + 1px border),
     measured directly rather than guessed — used to anchor the fixed
     watermark right below the header on pages that have one. */
  --header-height: 97px;
  font-size: 19px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  background-image: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 340px);
  color: var(--color-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---- RTL (Arabic) support — see the language toggle in shared/app.js ---- */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .req-chevron { transform: scaleX(-1); }
html[dir="rtl"] .req-card.expanded .req-chevron { transform: scaleX(-1) rotate(90deg); }
/* Numbers, phone numbers, timers and dates stay left-to-right even inside an
   RTL page — flipping digit order would make them unreadable. */
html[dir="rtl"] .timer-value,
html[dir="rtl"] .timer-chip,
html[dir="rtl"] .hero-figure,
html[dir="rtl"] .stat-value,
html[dir="rtl"] table.data-table td[data-numeric],
html[dir="rtl"] .cc-value {
  direction: ltr;
  unicode-bidi: plaintext;
}
html[dir="rtl"] .org-logo { border-left: none; border-right: 1px solid var(--color-border); margin-left: 0; margin-right: 12px; padding-left: 0; padding-right: 12px; }
html[dir="rtl"] .brand-tagline { border-left: none; border-right: 1px solid var(--color-border); padding-left: 0; padding-right: 10px; margin-left: 0; margin-right: 10px; }
html[dir="rtl"] .required-mark { margin-left: 0; margin-right: 3px; }

/* Respect the OS/browser-level "reduce motion" preference site-wide — the
   universal reset (rather than hunting down every transition/animation
   declaration individually) per the ui-ux-pro-max UI/UX skill's
   accessibility guidance. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip-to-content link — injected as the first element in <body> by
   mountSkipLink() in shared/app.js on every authenticated page. Hidden off
   -screen until it receives keyboard focus (Tab from the address bar),
   which is exactly when a keyboard/screen-reader user needs it. */
.skip-link {
  position: absolute;
  top: -48px;
  left: 8px;
  z-index: 1000;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }
html[dir="rtl"] .skip-link { left: auto; right: 8px; }

a { color: var(--color-primary); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02), 0 2px 8px rgba(16, 24, 40, 0.04);
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-primary-dark);
}

.topbar .brand .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
}

.brand-logo {
  height: 68px;
  width: auto;
  display: block;
}

/* A party organization's own logo, shown next to the Al-Sobh Hospital logo
   only for that organization's staff (see org_logo_url in /api/me). */
.org-logo {
  max-height: 52px;
  max-width: 160px;
  object-fit: contain;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--color-border);
}

.brand-tagline {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-left: 10px;
  margin-left: 10px;
  border-left: 1px solid var(--color-border);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar .who {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Sidebar — left-side navigation, present on every authenticated page (see
   body.has-sidebar). Fixed under the header, with Log out pinned to the
   bottom. Everything that used to live in the topbar's <nav> (Home,
   Dashboard, Administration, Contracts, Satisfaction, Medical Reports,
   Activity Log, Referral Requests, etc.) lives here now — the header itself
   only shows the logo(s), language switch, project name and username.
   ========================================================================== */
:root { --sidebar-width: 264px; }

.sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-sidebar-border);
  padding: 20px 14px;
  overflow-y: auto;
  z-index: 9;
}

html[dir="rtl"] .sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--color-sidebar-border);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
}

.sidebar-nav a {
  display: block;
  text-decoration: none;
  color: var(--color-sidebar-text);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}

.sidebar-nav a:hover {
  background: var(--color-sidebar-bg-alt);
  color: var(--color-sidebar-text-bright);
}

.sidebar-nav a.active {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-active-text);
}

/* Colors come from .btn-secondary (white button, dark text, light-grey
   hover). Don't set colors here: .btn-secondary is declared later, so it
   overrides background but not text color, which left white text on a
   light-grey hover background, making the label invisible. */
.sidebar-logout {
  width: 100%;
  flex: 0 0 auto;
  margin-top: 14px;
}

/* Body content shifts right of the fixed sidebar. Only pages with a
   sidebar use .page (login/setup/change-password use .login-wrap instead),
   so this is the default rather than an opt-in modifier. */
body.has-sidebar .page {
  margin-left: calc(var(--sidebar-width) + 24px);
  margin-right: 24px;
  max-width: 1520px;
}

html[dir="rtl"] body.has-sidebar .page {
  margin-left: 24px;
  margin-right: calc(var(--sidebar-width) + 24px);
}

/* Narrow viewports: the sidebar drops out of fixed positioning and becomes
   a horizontally-scrollable nav strip above the page content instead of a
   left rail, so it never eats into the limited width available. */
@media (max-width: 760px) {
  .sidebar {
    position: static;
    width: auto;
    flex-direction: row;
    align-items: center;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid var(--color-sidebar-border);
    padding: 10px 14px;
    overflow-x: auto;
    overflow-y: visible;
  }
  html[dir="rtl"] .sidebar {
    border-left: none;
  }
  .sidebar-nav {
    flex-direction: row;
    gap: 4px;
  }
  .sidebar-nav a {
    white-space: nowrap;
  }
  .sidebar-logout {
    width: auto;
    margin-top: 0;
    margin-left: 10px;
    white-space: nowrap;
  }
  html[dir="rtl"] .sidebar-logout {
    margin-left: 0;
    margin-right: 10px;
  }
  body.has-sidebar .page {
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }
  html[dir="rtl"] body.has-sidebar .page {
    margin-left: auto;
    margin-right: auto;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  background: var(--color-primary);
  color: #fff;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 92, 150, 0.12);
  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--color-primary-dark); box-shadow: 0 3px 8px rgba(15, 92, 150, 0.2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: #f0f2f4; }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary-soft); }

.btn-danger { background: var(--color-danger); }
.btn-danger:hover { background: #a5301f; }
.btn-danger:disabled { background: var(--color-danger); opacity: 0.5; cursor: not-allowed; }

/* Administration's "Delete All Patient Cases" section — visually set apart
   from the rest of the page so an irreversible, system-wide action doesn't
   blend in with routine admin cards. */
.danger-zone {
  border-color: var(--color-danger);
}

.btn-sm { padding: 6px 11px; font-size: 0.8rem; }

.page {
  max-width: 1520px;
  margin: 0 auto;
  padding: 28px 24px 60px;
  min-height: calc(100vh - 68px);
  position: relative;
}

.page > * {
  position: relative;
  z-index: 1;
}

/* The sunburst watermark itself — a fixed layer (not part of the .page
   background) so it stays put in the viewport while the page content
   scrolls past it, per the sizing rule below. */
.watermark-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/shared/img/watermark-sun.svg');
  background-repeat: no-repeat;
  background-position: center center;
  /* Scale by height only (auto width preserves the graphic's own aspect
     ratio) so its highest ray tip sits right at the top of this box and its
     lowest ray tip right at the bottom — see the SVG's own comment for how
     its content is sized to nearly fill its viewBox with minimal margin. */
  background-size: auto 100%;
  z-index: 0;
  pointer-events: none;
}

/* On pages with a .topbar header, anchor the watermark's top edge right
   below it instead of at the very top of the viewport, so its highest point
   lands just under the header rather than under it. */
.watermark-fixed.below-header {
  top: var(--header-height);
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-header h1 {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.65rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.page-header p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.card-pad { padding: 22px; }

/* Top-accent modifiers — ties a chart card visually back to the dashboard
   section it belongs to (see .dashboard-section-heading's matching tone-*
   classes), so a section's cards read as a group while scrolling past the
   quicknav-labeled headings above them. */
.card.accent-mix { border-top: 3px solid var(--color-enrolled); }
.card.accent-turnover { border-top: 3px solid var(--color-arrived); }
.card.accent-flow { border-top: 3px solid var(--color-accent); }
.card.accent-financial { border-top: 3px solid var(--color-pending); }

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-wrap > * {
  position: relative;
  z-index: 1;
}

.login-card {
  width: 100%;
  max-width: 430px;
  padding: 34px;
}

.login-card .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-primary-dark);
  margin-bottom: 14px;
}

.login-card .brand .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary);
}

.login-card .brand-logo {
  height: 46px;
  width: auto;
  display: block;
}

.login-card .subtitle {
  color: var(--color-text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-size: 0.92rem;
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.field .hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.field .hint.char-counter-limit {
  color: var(--color-danger);
  font-weight: 600;
}

.required-mark {
  color: var(--color-danger);
  margin-left: 3px;
}

.field-error {
  font-size: 0.78rem;
  color: var(--color-danger);
  margin-top: 4px;
  display: none;
}

.field.invalid input,
.field.invalid select,
.field.invalid textarea {
  border-color: var(--color-danger);
}

.field.invalid .field-error {
  display: block;
}

/* A searchable text-input + dropdown-list stand-in for a native <select>
   with far too many options to scroll through natively (e.g. a
   bulk-uploaded services list running to thousands of rows) — see the
   Manual Add Patient modal's service picker. */
.combobox {
  position: relative;
}
.combobox-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-top: 4px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.combobox-option {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 0.88rem;
}
.combobox-option:hover,
.combobox-option.active {
  background: var(--color-surface-alt);
}
.combobox-empty {
  padding: 9px 12px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.search-bar {
  margin-bottom: 18px;
}
/* The patient bill's add-service search spans the full width of the list
   it filters (see billBlock() in coordinator/dashboard.html). */
.search-bar input[type="search"].bill-svc-search { max-width: none; }

.search-bar input[type="search"] {
  width: 100%;
  max-width: 460px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-size: 0.92rem;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a94a6' stroke-width='2' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>") no-repeat 14px center;
  background-size: 15px;
  padding-inline-start: 38px;
  color: var(--color-text);
  font-family: inherit;
}

html[dir="rtl"] .search-bar input[type="search"] {
  background-position: right 14px center;
}

.search-bar input[type="search"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.error-box {
  background: #fdecea;
  border: 1px solid #f5c6c0;
  color: var(--color-danger);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.success-box {
  background: var(--color-active-bg);
  border: 1px solid #bfe6d4;
  color: var(--color-active);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.login-note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--color-border);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.login-note b { color: var(--color-text); }

/* Two-column layout: submit form + list */
.split-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 900px) {
  .split-layout { grid-template-columns: 1fr; }
}

.section-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--color-text);
}

/* Groups a run of KPI rows/cards on a dashboard page under a labeled
   heading (Operational / Case Flow / Financial — see coordinator/insights.html,
   executive/dashboard.html, party/insights.html). A plain divider + serif
   label rather than another card, so it reads as page structure, not content. */
.dashboard-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
}
.dashboard-section-heading:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.dashboard-section-heading .dashboard-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 1.05rem;
  line-height: 1;
  flex: none;
}
/* Section tone modifiers — each dashboard section gets its own accent hue
   (reusing the app's existing status/tone tokens rather than inventing new
   colors) so a long analytics page reads as distinct topics at a glance,
   not one undifferentiated scroll. */
.dashboard-section-heading.tone-mix .dashboard-section-icon { background: var(--color-enrolled-bg); color: var(--color-enrolled); }
.dashboard-section-heading.tone-turnover .dashboard-section-icon { background: var(--color-arrived-bg); color: var(--color-arrived); }
.dashboard-section-heading.tone-flow .dashboard-section-icon { background: var(--color-accent-soft); color: var(--color-accent); }
.dashboard-section-heading.tone-financial .dashboard-section-icon { background: var(--color-pending-bg); color: var(--color-pending); }
.dashboard-section-heading.tone-reports .dashboard-section-icon { background: var(--color-discharged-bg); color: var(--color-discharged); }

/* ---- Hero KPI strip — the dashboard's headline numbers (one each from the
   clinical/operational/financial KPI families), styled distinctly from the
   denser .stat-tile grids further down so the highest-signal figures read
   first, before the detailed sections. ---- */
.hero-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}
@media (max-width: 1100px) { .hero-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hero-kpi-row { grid-template-columns: 1fr; } }

.hero-kpi-tile {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 20px 20px 18px;
  overflow: hidden;
}
.hero-kpi-tile::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--hero-accent, var(--color-primary));
}
.hero-kpi-tile .hero-kpi-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 1.4rem;
  color: var(--hero-accent, var(--color-primary));
  opacity: 0.9;
}
.hero-kpi-tile .hero-kpi-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  padding-right: 30px;
}
.hero-kpi-tile .hero-kpi-value {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hero-kpi-tile .hero-kpi-sub {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
html[dir="rtl"] .hero-kpi-tile .hero-kpi-icon { right: auto; left: 20px; }
html[dir="rtl"] .hero-kpi-tile .hero-kpi-label { padding-right: 0; padding-left: 30px; }
html[dir="rtl"] .hero-kpi-tile .hero-kpi-value { direction: ltr; unicode-bidi: plaintext; text-align: right; }

/* ==========================================================================
   Flat list rows (referral queue / case list / board cards) — a .req-card
   renders as one divided row (avatar chip, title block, status chip, time,
   chevron) rather than a bordered card; wrap a run of them in .list-panel
   for the white card + divider-per-row look. Still collapsible: clicking
   .req-card-header expands .req-card-body below the row (unchanged
   behavior from before this restyle).
   ========================================================================== */
.list-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.list-panel .req-card:last-child .req-card-header { border-bottom: none; }
.list-panel .req-card.expanded:last-child .req-card-header { border-bottom: 1px solid var(--color-border); }

.req-card {
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  background: transparent;
  overflow: visible;
}

.req-card .req-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.req-card .patient-name {
  font-weight: 700;
  font-size: 0.98rem;
}

/* Collapsible card header (click the row to expand/collapse) */
.req-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.1s ease;
}

.req-card-header:hover {
  background: var(--color-surface-alt);
}

.req-card.expanded .req-card-header {
  background: var(--color-surface-alt);
}

.req-chevron {
  flex: none;
  display: inline-flex;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
  font-size: 0.85rem;
}

.req-card.expanded .req-chevron {
  transform: rotate(90deg);
}

/* Title block: patient name (+ optional case id) on top, a muted
   service · organization subtitle line below — matches the referral-queue
   row pattern (avatar chip, two-line title, status chip, chevron). */
.req-card-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.req-card-header .patient-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.req-card-case-id {
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  margin-left: 6px;
}
html[dir="rtl"] .req-card-case-id { margin-left: 0; margin-right: 6px; }

.req-card-subtitle {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.req-card-time {
  flex: none;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.req-header-right {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.timer-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.timer-chip.pending { background: var(--color-pending-bg); color: var(--color-pending); }
.timer-chip.accepted { background: var(--color-accepted-bg); color: var(--color-accepted); }
.timer-chip.arrived { background: var(--color-arrived-bg); color: var(--color-arrived); }
.timer-chip.active { background: var(--color-active-bg); color: var(--color-active); }
.timer-chip.enrolled { background: var(--color-enrolled-bg); color: var(--color-enrolled); }
.timer-chip.discharged { background: var(--color-discharged-bg); color: var(--color-discharged); }
.timer-chip.rejected { background: var(--color-rejected-bg); color: var(--color-rejected); }

.req-card-body {
  display: none;
  padding: 14px 16px 16px;
}

.req-card.expanded .req-card-body {
  display: block;
}

/* Patient pop-up details (see patientModalBody() on the Coordinator Case
   Board, Party Submitted Requests, and Party Dashboard pages) — each piece
   of information gets its own line rather than several sharing a row. */
.meta-line {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 6px;
}

/* ==========================================================================
   Small shared components used across the restructured pages: a page-header
   icon badge, an icon slot for stat tiles, avatar-initial chips (people/
   patients), a numbered wizard step indicator, and the topbar user chip.
   ========================================================================== */
.page-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 1.35rem;
  margin-bottom: 10px;
}

.stat-tile.has-icon { padding-right: 66px; position: relative; }
.stat-tile-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.03);
}
html[dir="rtl"] .stat-tile-icon { right: auto; left: 16px; }
html[dir="rtl"] .stat-tile.has-icon { padding-right: 18px; padding-left: 66px; }
.stat-tile-icon.tone-accent { background: var(--color-accent-soft); color: var(--color-accent); }
.stat-tile-icon.tone-pending { background: var(--color-pending-bg); color: var(--color-pending); }
.stat-tile-icon.tone-arrived { background: var(--color-arrived-bg); color: var(--color-arrived); }
.stat-tile-icon.tone-active { background: var(--color-active-bg); color: var(--color-active); }
.stat-tile-icon.tone-enrolled { background: var(--color-enrolled-bg); color: var(--color-enrolled); }
.stat-tile-icon.tone-discharged { background: var(--color-discharged-bg); color: var(--color-discharged); }
.stat-tile-icon.tone-rejected { background: var(--color-rejected-bg); color: var(--color-rejected); }

/* A thin top-accent bar echoing the tile's own icon tone — picked up
   automatically via :has() from whichever tone-* class the icon already
   carries, so every existing stat-tile call site gets it for free with no
   markup change. Purely a progressive enhancement (browsers without :has()
   just keep the plain top border-radius, nothing breaks). */
.stat-tile:has(> .stat-tile-icon.tone-accent) { border-top: 3px solid var(--color-accent); }
.stat-tile:has(> .stat-tile-icon.tone-pending) { border-top: 3px solid var(--color-pending); }
.stat-tile:has(> .stat-tile-icon.tone-arrived) { border-top: 3px solid var(--color-arrived); }
.stat-tile:has(> .stat-tile-icon.tone-active) { border-top: 3px solid var(--color-active); }
.stat-tile:has(> .stat-tile-icon.tone-enrolled) { border-top: 3px solid var(--color-enrolled); }
.stat-tile:has(> .stat-tile-icon.tone-discharged) { border-top: 3px solid var(--color-discharged); }
.stat-tile:has(> .stat-tile-icon.tone-rejected) { border-top: 3px solid var(--color-rejected); }
.stat-tile:has(> .stat-tile-icon:not([class*="tone-"])) { border-top: 3px solid var(--color-primary); }

/* Avatar-initial chip — a person/patient's initials in a soft-tinted
   rounded square, used in list rows and table name columns. Populate with
   the initials(name) helper in app.js. */
.avatar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-accent-soft);
  color: #0b6b51;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  flex: none;
  text-transform: uppercase;
}
.avatar-chip.sm { width: 32px; height: 32px; font-size: 0.72rem; border-radius: 8px; }

/* Numbered step indicator for multi-step wizard modals (e.g. New Patient /
   New Referral). Mark the current step's circle with .current and any
   completed step with .done. */
.wizard-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}
.wizard-step .wizard-step-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  flex: none;
}
.wizard-step.current { color: var(--color-text); }
.wizard-step.current .wizard-step-circle { background: var(--color-primary); color: #fff; }
.wizard-step.done .wizard-step-circle { background: var(--color-accent); color: #fff; }
.wizard-step-connector {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
  min-width: 20px;
}

/* Signed-in user chip in the topbar: small avatar circle + stacked
   name/role, replacing a plain "who" text line. */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.user-chip .avatar-chip {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 0.74rem;
}
.user-chip-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.user-chip-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
}
.user-chip-role {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* The name at the top right opens a small menu (My Account, Log out). */
.user-menu-host { position: relative; }
.user-chip-btn {
  border: 1px solid transparent; background: transparent; padding: 4px 8px 4px 4px;
  border-radius: 999px; cursor: pointer; font: inherit; text-align: start;
}
.user-chip-btn:hover, .user-chip-btn[aria-expanded="true"] { background: var(--color-surface-alt); border-color: var(--color-border); }
.user-chip-caret { font-size: 0.7rem; color: var(--color-text-muted); margin-inline-start: 2px; }
.user-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 1000; min-width: 190px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(20, 32, 44, 0.14); padding: 6px; display: flex; flex-direction: column;
}
.user-menu[hidden] { display: none; }
html[dir="rtl"] .user-menu { right: auto; left: 0; }
.user-menu a, .user-menu button {
  display: block; width: 100%; padding: 9px 12px; border: none; background: transparent; border-radius: 6px;
  font: inherit; font-size: 0.88rem; color: var(--color-text); text-decoration: none; text-align: start; cursor: pointer;
}
.user-menu a:hover, .user-menu button:hover { background: var(--color-primary-soft); }
.user-menu [data-user-menu-logout] { color: var(--color-danger); border-top: 1px solid var(--color-border); border-radius: 0 0 6px 6px; margin-top: 4px; padding-top: 10px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.badge-pending { background: var(--color-pending-bg); color: var(--color-pending); }
.badge-accepted { background: var(--color-accepted-bg); color: var(--color-accepted); }
.badge-arrived { background: var(--color-arrived-bg); color: var(--color-arrived); }
.badge-active { background: var(--color-active-bg); color: var(--color-active); }
.badge-enrolled { background: var(--color-enrolled-bg); color: var(--color-enrolled); }
.badge-discharged { background: var(--color-discharged-bg); color: var(--color-discharged); }
.badge-rejected { background: var(--color-rejected-bg); color: var(--color-rejected); }

.timer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.timer .timer-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.timer.pending .timer-value { color: var(--color-pending); }
.timer.accepted .timer-value { color: var(--color-accepted); }
.timer.arrived .timer-value { color: var(--color-arrived); }
.timer.active .timer-value { color: var(--color-active); }
.timer.enrolled .timer-value { color: var(--color-enrolled); }
.timer.discharged .timer-value { color: var(--color-discharged); }
.timer.rejected .timer-value { color: var(--color-rejected); }

.req-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Kanban columns for coordinator dashboard. There are 5 possible columns in
   the DOM (Pending, Accepted, Active/Admitted, Service Started, Discharged)
   but each tab hides exactly one of the two middle ones (Out Patients hides
   Active/Admitted, In Patients hides Service Started) — see applyFilterUI()
   — so 4 are always visible, in the right left-to-right order, without any
   dynamic DOM reordering. */
.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 1200px) {
  .board { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .board { grid-template-columns: 1fr; }
}

.column {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-height: 200px;
}

.column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--color-border);
}

.column-header h2 {
  font-size: 0.95rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.column-count {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 700;
}

.column-body {
  padding: 14px;
  max-height: 70vh;
  overflow-y: auto;
}

/* A flat .req-card list rendered as the page's primary content (not inside
   a kanban column) shouldn't be height-capped/scroll-boxed the way a
   .column-body normally is. */
.case-list-body {
  max-height: none;
  overflow: visible;
}

.column-body .empty-state {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px 8px;
}

.filter-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.btn-filter {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.btn-filter:hover { background: #f0f2f4; }
.btn-filter.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
/* Domain-tone variants — the Dashboard's tab bar (Financial/Clinical/
   Administrative/Reports) tints its active tab to match that domain's own
   accent (see the matching .dashboard-section-heading/.card.accent-* tone
   classes), rather than every tab turning the same primary blue regardless
   of which domain it opens. Other .btn-filter usages (Main Board's Out/In
   Patients and status tabs) never carry a tone-* class, so they keep the
   plain primary-blue active state above untouched. */
.btn-filter.active.tone-financial { background: var(--color-pending); border-color: var(--color-pending); }
.btn-filter.active.tone-mix { background: var(--color-enrolled); border-color: var(--color-enrolled); }
.btn-filter.active.tone-turnover { background: var(--color-arrived); border-color: var(--color-arrived); }
.btn-filter.active.tone-flow { background: var(--color-active); border-color: var(--color-active); }
.btn-filter.active.tone-reports { background: var(--color-discharged); border-color: var(--color-discharged); }

/* Case-count pill inside a status tab (see #status-tabs in
   coordinator/dashboard.html) — muted on an inactive tab, inverted to sit
   legibly on the solid primary background once that tab is active. */
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  margin-left: 7px;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html[dir="rtl"] .tab-count { margin-left: 0; margin-right: 7px; }
.btn-filter.active .tab-count { background: rgba(255, 255, 255, 0.25); color: #fff; }

.dot-pending { color: var(--color-pending); }
.dot-accepted { color: var(--color-accepted); }
.dot-arrived { color: var(--color-arrived); }
.dot-active { color: var(--color-active); }
.dot-enrolled { color: var(--color-enrolled); }
.dot-discharged { color: var(--color-discharged); }

/* Out-patient session tracker (Service Started column) */
.session-tracker {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.session-progress {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-enrolled);
  margin-bottom: 8px;
}

.session-progress .session-remaining {
  font-weight: 600;
  color: var(--color-text-muted);
  margin-left: 6px;
}

.extra-session-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.extra-session-list li {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 6px 0;
  border-top: 1px dashed var(--color-border);
}

.extra-session-list li b { color: var(--color-text); }

.session-extra-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}

.session-extra-form textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--color-text);
  margin-bottom: 8px;
  resize: vertical;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

/* Caps a long table (e.g. a bulk-uploaded services list) to a fixed height
   with its own scrollbar instead of pushing the rest of the page down —
   the header row stays pinned in view while scrolling. Pair with a
   .search-bar filter input above it so a long list stays findable without
   scrolling at all. */
.scroll-table-wrap {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 14px;
}
.scroll-table-wrap table.data-table {
  margin-bottom: 0;
}
.scroll-table-wrap table.data-table th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  box-shadow: 0 1px 0 var(--color-border);
  z-index: 1;
}
.scroll-table-wrap table.data-table tbody tr:last-child td {
  border-bottom: none;
}

table.data-table th,
table.data-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

table.data-table th {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

table.data-table tbody tr {
  transition: background 0.1s ease;
}
table.data-table tbody tr:hover {
  background: var(--color-surface-alt);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* ---- Contracts page: organization list (left) + contract detail (right) ---- */
.contracts-layout {
  display: grid;
  /* minmax(0, …) + min-width:0 let the contract column shrink to the screen
     instead of growing to its widest table and pushing the page sideways. */
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.contracts-layout > * { min-width: 0; }
@media (max-width: 1100px) {
  .contracts-layout { grid-template-columns: 1fr; }
}

.org-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 70vh;
  overflow-y: auto;
}

.org-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--color-text);
}
.org-list-item:hover { background: var(--color-primary-soft); }
.org-list-item.active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}
.org-list-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.org-list-item .org-list-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-list-item .org-list-meta { font-size: 0.76rem; color: var(--color-text-muted); }

.contract-empty-state {
  color: var(--color-text-muted);
  text-align: center;
  padding: 60px 20px;
}

/* Contracted services: section title with its two add buttons beside it,
   tighter table rows (it holds an input per row), inline price input. */
.contract-section-head {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.contract-section-actions { display: flex; gap: 8px; flex-wrap: wrap; }
table.data-table.compact-table th,
table.data-table.compact-table td { padding: 10px 12px; vertical-align: middle; }
.price-input { width: 130px; margin: 0; }
.row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.contract-table-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.contract-bulk-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.approval-toggle { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); cursor: pointer; }
.approval-toggle input { width: auto; margin: 0; }
/* The bill's add-service form: custom item description/price and the note
   for the organization, styled like every other form field. */
.op-service-add-form input[type="text"],
.op-service-add-form input[type="number"],
.op-service-add-form textarea {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-size: 0.88rem;
  font-family: inherit;
  background: #fff;
  color: var(--color-text);
  box-sizing: border-box;
}
/* "Needs approval" label on a service in the bill's add list. */
.approval-tag { font-size: 0.68rem; font-weight: 600; color: var(--color-pending); background: var(--color-pending-bg); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }

/* Contracted services table: fixed column widths so it always fits its box
   (no sideways scrolling) — the service name takes whatever width is left
   and wraps onto more lines, and the two row buttons stack. */
#contract-services-table { table-layout: fixed; }
#contract-services-table th:nth-child(1) { width: 34px; }   /* select */
#contract-services-table th:nth-child(3) { width: 136px; }  /* price */
#contract-services-table th:nth-child(4) { width: 122px; }  /* actions */
#contract-services-table td:nth-child(2) { overflow-wrap: anywhere; }
#contract-services-table .service-meta { margin-top: 4px; font-size: 0.75rem; color: var(--color-text-muted); }
#contract-services-table th { white-space: normal; }
#contract-services-table .price-input { width: 100%; max-width: 120px; }
#contract-services-table .row-actions { flex-direction: column; align-items: stretch; gap: 6px; }
#contract-services-table .row-actions .btn { width: 100%; white-space: normal; }
table.data-table th.select-col,
table.data-table td.select-col { width: 34px; padding-inline-end: 0; }
.select-col input[type="checkbox"] { width: auto; margin: 0; }

/* Searchable checkbox list used by the Contracts page's "Add from Services
   List" and per-diem pickers. */
.modal.picker-modal { max-width: 640px; }
/* Party "Request a Service" pop-up — wide enough for long service names
   next to their prices. */
.modal.svcreq-modal { max-width: 760px; }
/* The patient bill's add-service checklist sits inside the patient pop-up,
   so it scrolls within a shorter box than a stand-alone picker. */
.picker-list.bill-svc-list { max-height: 240px; }
/* Out Patient services checklist on the party referral form. */
.picker-list.op-service-list { max-height: 260px; }
/* One line per service of an out-patient referral (patient pop-up). */
.case-service-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.case-service-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
/* Discharge pop-ups: services still pending, with the required "cancel them" tick box. */
.pending-cancel-block {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--color-pending-bg);
  border: 1px solid transparent;
  font-size: 0.86rem;
}
.pending-cancel-block.invalid { border-color: var(--color-danger); }
.pending-cancel-title { font-weight: 600; margin-bottom: 4px; }
.pending-cancel-list { margin: 0 0 8px; padding-inline-start: 20px; }
.pending-cancel-check { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0; cursor: pointer; }
.pending-cancel-check input { width: auto; margin: 0; }
.pending-cancel-block .pending-cancel-error { display: none; margin-top: 6px; }
.pending-cancel-block.invalid .pending-cancel-error { display: block; }
.picker-list {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 400;
  cursor: pointer;
  margin: 0;
}
.picker-row:last-child { border-bottom: none; }
.picker-row:hover { background: var(--color-primary-soft); }
.picker-row input[type="checkbox"] { width: auto; margin: 0; flex: 0 0 auto; }
.picker-row-name { flex: 1 1 auto; min-width: 0; }
.picker-row > .hint { flex: 0 0 auto; white-space: nowrap; }
/* A picker list inside a form field (e.g. the party "Request a Service"
   pop-up) — keep the row layout instead of the field's block-label style. */
.field .picker-list label.picker-row {
  display: flex;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 400;
}
.picker-row.is-disabled { cursor: default; opacity: 0.6; }
.picker-row.is-disabled:hover { background: transparent; }
.picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.pricing-field-group {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-bg);
  border-radius: 8px;
  margin-top: 4px;
}
.pricing-field-group.active { display: flex; }

.contract-preview {
  margin-top: 4px;
  padding: 10px 14px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}

.tag {
  display: inline-block;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 600;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 33, 0.5);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }

.modal {
  width: 100%;
  max-width: 520px;
  padding: 28px;
  border-radius: var(--radius-lg);
}

/* Patient details pop-up (see openPatientModal() in app.js) — wide enough
   to comfortably hold everything about a patient (meta rows, documents,
   session/service trackers, action buttons), scrollable internally so a
   long case never pushes the close button or the viewport itself. */
.modal-lg {
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
}

/* The patient pop-up is appended to the end of <body> the first time it's
   opened, which would otherwise paint it on top of every other
   (statically-placed, earlier-in-the-DOM) .modal-backdrop — including the
   Admit/Discharge/Confirm pop-ups a button inside the patient pop-up itself
   can open. Pin it to a lower stack level than the default .modal-backdrop
   (z-index 50) so any of those always appear above it when both are open
   at once, regardless of DOM order. */
#patient-modal-backdrop {
  z-index: 45;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modal-header h3 { margin: 0; font-size: 1.05rem; }

.close-x {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--color-text-muted);
}

.modal-info-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-active-bg);
  color: var(--color-active);
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--color-text);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 100;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--color-danger); }

/* ==========================================================================
   Dashboard (/coordinator/insights.html)
   ========================================================================== */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* Main Board's 6 always-visible status tiles (see coordinator/dashboard.html) —
   a modifier rather than changing the shared 5-column default above, which
   other pages' narrower kpi-rows (2-5 tiles) still rely on. */
.kpi-row.cols-6 { grid-template-columns: repeat(6, 1fr); }
/* Main Board cards share three lines across a row - title, number, OP/IP -
   so the numbers sit on the same level and the OP/IP pills start on the same
   level, whether a title takes one or two lines and whether a card shows one
   pill (Active / Admitted: IP only, Service Started: OP only) or two. */
.kpi-row.cols-6 > .stat-tile { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
.kpi-row.cols-6 > .stat-tile > .stat-label { align-self: start; }
.kpi-row.cols-6 > .stat-tile > .stat-value { margin-top: 0; align-self: end; }
.kpi-row.cols-6 > .stat-tile > .stat-split { align-self: start; align-content: flex-start; }
/* Desktop: title across the whole card with the coloured dot beside it,
   then the number with the icon beside it, then OP / IP side by side on the
   card's last line. Phones have their own version in the PHONE LAYOUT
   section. */
@media (min-width: 761px) {
  .kpi-row.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpi-row.cols-6 > .stat-tile.has-icon,
  html[dir="rtl"] .kpi-row.cols-6 > .stat-tile.has-icon { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding-left: 18px; padding-right: 18px; }
  .kpi-row.cols-6 > .stat-tile > .stat-label { grid-column: 1 / -1; grid-row: 1; }
  .kpi-row.cols-6 .stat-label:has(> span:first-child[class^="dot-"]) { display: flex; align-items: baseline; gap: 5px; }
  .kpi-row.cols-6 .stat-label > span:first-child[class^="dot-"] { flex: none; }
  .kpi-row.cols-6 > .stat-tile > .stat-value { grid-column: 1; grid-row: 2; align-self: center; justify-self: start; }
  .kpi-row.cols-6 > .stat-tile > .stat-tile-icon { position: static; grid-column: 2; grid-row: 2; align-self: center; }
  .kpi-row.cols-6 > .stat-tile > .stat-split { grid-column: 1 / -1; grid-row: 3; flex-wrap: nowrap; align-self: end; margin-top: 10px; }
  .kpi-row.cols-6 > .stat-tile > .stat-split span { white-space: nowrap; flex: none; }
}
/* Desktop Main Board status buttons in narrower windows (where one row no
   longer fits): two even rows - three, then two - name on one side, count
   on the other, a long name wrapping rather than being cut. Wide screens
   keep the single row; phones have their own version. */
@media (min-width: 761px) and (max-width: 1320px) {
  #status-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  #status-tabs .btn { width: 100%; min-width: 0; justify-content: space-between; white-space: normal; text-align: start; line-height: 1.25; }
  #status-tabs .tab-count { flex: none; margin-inline-start: 8px; }
  #status-tabs .btn:is([data-status-tab="pending"], [data-status-tab="accepted"], [data-status-tab="arrived"]) { grid-column: span 2; }
  #status-tabs .btn:is([data-status-tab="active"], [data-status-tab="enrolled"], [data-status-tab="discharged"]) { grid-column: span 3; }
}
@media (max-width: 1100px) {
  .kpi-row.cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .kpi-row.cols-6 { grid-template-columns: repeat(2, 1fr); }
}
/* Three cards per row up to 1399px: six in a row are too narrow there for
   the OP / IP pills on one line (especially in Arabic). In a very narrow
   desktop window (side menu showing, 900px or less) two per row. */
@media (min-width: 761px) and (max-width: 1399px) {
  .kpi-row.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 900px) {
  .kpi-row.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Case-flow timing row (4 tiles — see the "Case Flow" section on the
   dashboards). */
.kpi-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .kpi-row.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .kpi-row.cols-4 { grid-template-columns: repeat(1, 1fr); }
}

/* Trimmed-down KPI row (3 tiles — see Hospital Operations on the Super
   Admin dashboard). */
.kpi-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .kpi-row.cols-3 { grid-template-columns: repeat(1, 1fr); }
}

/* Referral-outcome sub-row (2 tiles — see Hospital Operations on the Super
   Admin dashboard). */
.kpi-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
  .kpi-row.cols-2 { grid-template-columns: repeat(1, 1fr); }
}

/* A column: the label at the top, the number (and its OP/IP chips or
   sub-line) pinned to the bottom. Tiles in one row are the same height, so
   every number and chip row lines up whether a label takes one line or two. */
.stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
}
.stat-tile:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.stat-tile .stat-label {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.stat-tile .stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  margin-top: auto;
}
.stat-tile .stat-sub {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.hero-figure {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.1;
}
.hero-figure-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

/* Compact "(incl. 15% VAT)" note sitting inline right next to a total — see
   formatMoneyTotalHtml()/formatMoneyHtml() in shared/app.js. Sized in `em`
   so it stays proportionate whether the total it's attached to is a small
   table figure or a large hero-figure tile. */
.money-vat-inline-note {
  display: inline;
  font-size: 0.32em;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}
html[dir="rtl"] .money-vat-inline-note {
  direction: ltr;
  unicode-bidi: plaintext;
}

.dashboard-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 22px;
}
@media (max-width: 900px) {
  .dashboard-row { grid-template-columns: 1fr; }
}
/* Larger card titles for the Financial tab's charts. */
.chart-card-title.big { font-size: 1.15rem; }
.chart-card-note.big { font-size: 0.92rem; }

/* A horizontal-bar chart drawn larger: the SVG scales with the card's
   width (up to a cap) instead of staying at its small native size. */
.chart-zoom svg { height: auto; max-width: 820px; display: block; margin-inline: auto; }

/* Financial tab totals: the amount on one line, the VAT note under it,
   so a narrow tile never cuts the note off. */
.hero-figure-stack { white-space: nowrap; }
.hero-figure-stack .money-vat-inline-note { display: block; margin: 2px 0 0; }

/* Line chart (Referrals by Month): capped so it doesn't grow huge on very
   wide screens. */
.line-chart-wrap svg { max-width: 1100px; margin-inline: auto; }

/* Revenue Composition (Financial tab): big figures over a split bar. */
.rev-comp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
@media (max-width: 700px) { .rev-comp-tiles { grid-template-columns: 1fr; } }
.rev-comp-tile {
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--rev-color);
  border-radius: 12px;
  padding: 16px 20px;
  background: var(--color-surface);
}
.rev-comp-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; color: var(--color-text-muted); }
.rev-comp-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rev-color); flex: none; }
.rev-comp-value { font-size: 2rem; font-weight: 700; margin-top: 6px; white-space: nowrap; }
.rev-comp-pct { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin-top: 2px; }
.rev-comp-bar { display: flex; height: 26px; border-radius: 13px; overflow: hidden; margin-top: 20px; background: var(--color-surface-alt); }
.rev-comp-bar span { display: block; height: 100%; }

/* Patient register: locked fields, the "registered patient" banner and
   pop-up details, and the "returning patient" tag. */
input.input-locked { background: var(--color-surface-alt); color: var(--color-text-muted); cursor: not-allowed; }
.registered-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px; border-radius: 8px;
  background: var(--color-active-bg); color: var(--color-active); font-size: 0.86rem; font-weight: 600;
}
.registered-banner[hidden] { display: none; }
.registered-details { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-alt); }
.registered-details > div { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.registered-details span { min-width: 90px; color: var(--color-text-muted); font-size: 0.84rem; }
.registered-details em { flex-basis: 100%; color: var(--color-pending); font-size: 0.82rem; font-style: normal; }
.tag.tag-returning { background: var(--color-enrolled-bg); color: var(--color-enrolled); }

/* Coordinator board stat tiles: small OP / IP split under each total. */
.stat-split { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.stat-split span { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.stat-split .split-op { background: #ede6fd; color: var(--chart-op); }
.stat-split .split-ip { background: #fdf1d8; color: #9c4a07; }

/* Sign-in: two-step verification screens. */
.notice-box { padding: 10px 14px; margin-bottom: 14px; border-radius: 8px; background: var(--color-pending-bg); color: var(--color-pending); font-size: 0.88rem; font-weight: 600; }
.notice-box[hidden], #code-form[hidden], #setup-form[hidden], #recovery-panel[hidden], #login-form[hidden] { display: none; }
.twofa-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.twofa-intro { color: var(--color-text-muted); font-size: 0.9rem; margin: 0 0 14px; }
.twofa-steps { margin: 0 0 10px; padding-inline-start: 20px; font-size: 0.88rem; color: var(--color-text); }
.twofa-steps li { margin-bottom: 6px; }
.twofa-qr { display: flex; justify-content: center; margin: 6px 0 10px; }
.twofa-qr svg { width: 200px; height: 200px; border: 1px solid var(--color-border); border-radius: 8px; }
.twofa-manual { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 12px; }
.twofa-manual code { display: block; margin-top: 6px; padding: 8px 10px; background: var(--color-surface-alt); border-radius: 6px; font-size: 0.95rem; letter-spacing: 0.06em; word-break: break-all; color: var(--color-text); }
.code-input { font-size: 1.4rem; letter-spacing: 0.3em; text-align: center; }
.twofa-back { width: 100%; margin-top: 8px; }
.recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 12px 14px; margin-bottom: 12px; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 1rem; text-align: center; }
.recovery-confirm { display: flex; gap: 8px; align-items: center; font-size: 0.88rem; margin-bottom: 12px; }
.recovery-confirm input { width: auto; margin: 0; }

/* Sidebar: "Sign out of all devices" under Log out. */
.sidebar-logout-all {
  width: 100%; margin-top: 6px; padding: 4px; border: none; background: transparent;
  color: var(--color-sidebar-text); font-size: 0.76rem; cursor: pointer; text-decoration: underline;
}
.sidebar-logout-all:hover { color: var(--color-sidebar-text-bright); }
@media (max-width: 760px) { .sidebar-logout-all { width: auto; white-space: nowrap; margin-top: 0; } }

/* Masked national ID / phone number with a "Show" button. */
.sensitive { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.reveal-btn { border: none; background: transparent; color: var(--color-primary); font-size: 0.78rem; cursor: pointer; padding: 0 4px; text-decoration: underline; }

/* Activity Log: tamper check result + patient access search. */
.integrity-badge { padding: 10px 14px; margin-bottom: 14px; border-radius: 8px; font-size: 0.88rem; font-weight: 600; }
.integrity-badge.ok { background: var(--color-active-bg); color: var(--color-active); }
.integrity-badge.bad { background: var(--color-rejected-bg); color: var(--color-rejected); }
.integrity-badge ul { margin: 6px 0 0; padding-inline-start: 20px; font-weight: 400; }
.integrity-badge[hidden] { display: none; }
.access-search { width: 100%; max-width: 520px; margin: 12px 0; }

/* My Account page. */
.account-wrap { max-width: 860px; margin: 0 auto; padding: 28px 16px 48px; position: relative; }
.account-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.account-head h1 { margin: 0; }
.account-actions { margin-top: 12px; }
.account-email-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.account-email-row input { flex: 1; min-width: 220px; }
.account-events { list-style: none; margin: 10px 0 0; padding: 0; }
.account-events li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 0.88rem; }
.account-events .muted { color: var(--color-text-muted); }
a.sidebar-logout-all { display: block; text-align: center; }
.stepup-modal { max-width: 380px; }

/* Two equal cards side by side, stretched to the same height. */
.dashboard-row.even { grid-template-columns: 1fr 1fr; align-items: stretch; }
@media (max-width: 900px) {
  .dashboard-row.even { grid-template-columns: 1fr; }
}
/* Document / Medical Report Requests: every tile the same height, the
   "Not enough data yet" note sitting at the bottom of its tile. */
.request-turnaround-row .kpi-row { align-items: stretch; }
.request-turnaround-row .stat-tile { min-height: 132px; display: flex; flex-direction: column; }
.request-turnaround-row .stat-label { min-height: 2.6em; }
.request-turnaround-row .stat-sub { margin-top: auto; }

.chart-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.chart-card-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.chart-empty {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  padding: 30px 10px;
  text-align: center;
}

.hbar-hit { cursor: pointer; outline: none; }
.hbar-hit rect.hbar-fill { transition: opacity 0.12s ease; }
.hbar-hit:hover rect.hbar-fill,
.hbar-hit:focus rect.hbar-fill { opacity: 0.8; }
.hbar-hit:focus rect.hbar-hit-area {
  stroke: var(--color-primary-dark);
  stroke-width: 2px;
  fill: rgba(21, 101, 168, 0.06);
}

.chart-tooltip {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  background: var(--color-text);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.1s ease, transform 0.1s ease;
  box-shadow: var(--shadow-sm);
  max-width: 240px;
}
.chart-tooltip.show { opacity: 1; transform: translateY(0); }
.chart-tooltip-value { font-weight: 700; font-size: 0.9rem; }
.chart-tooltip-label { color: rgba(255,255,255,0.75); margin-top: 1px; }

.category-chip-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.category-chip {
  flex: 1;
  background: var(--color-bg);
  border-radius: 8px;
  padding: 10px 12px;
}
.category-chip .cc-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.category-chip .cc-value {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 2px;
}

.income-note {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.8rem;
  margin-bottom: 18px;
}

/* ---- Report builder ---- */
.report-builder-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) {
  .report-builder-grid { grid-template-columns: 1fr; }
}

.report-column-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 2px;
}
.report-column-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.report-column-list input[type="checkbox"] { width: 15px; height: 15px; }

.report-filters-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.report-filters-row .field { margin-bottom: 0; min-width: 160px; }

.report-results-wrap {
  overflow-x: auto;
  margin-top: 16px;
}
.report-results-wrap table.data-table { white-space: nowrap; }
.report-row-count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 10px;
}

/* ==========================================================================
   Language toggle (EN ⇄ AR) — mounted by shared/app.js next to the
   signed-in user's name on every authenticated page, or floated top-right
   of the login/setup/change-password card where there's no username yet.
   ========================================================================== */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-primary-dark);
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lang-toggle:hover { background: var(--color-primary-soft); border-color: var(--color-primary-light); }
.lang-toggle .lang-toggle-swap { opacity: 0.6; font-size: 0.85em; }
.lang-toggle.lang-toggle-floating {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}
html[dir="rtl"] .lang-toggle.lang-toggle-floating { right: auto; left: 16px; }

/* ==========================================================================
   Notification bell — mounted by shared/app.js next to the signed-in
   user's name on every authenticated page except Executive (see
   mountNotificationBell). Badge count + a small dropdown of open items.
   ========================================================================== */
.notif-bell-wrap {
  position: relative;
  display: inline-flex;
}
.notif-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  border-radius: 999px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.notif-bell-btn:hover { background: var(--color-primary-soft); border-color: var(--color-primary-light); }
.notif-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-danger, #d92d20);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  align-items: center;
  justify-content: center;
}
html[dir="rtl"] .notif-bell-badge { right: auto; left: -4px; }
.notif-bell-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
  z-index: 30;
  padding: 10px;
}
html[dir="rtl"] .notif-bell-panel { right: auto; left: 0; }
.notif-bell-panel-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 6px 8px;
}
.notif-bell-empty {
  padding: 14px 6px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
}
.notif-bell-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
}
.notif-bell-item:hover { background: var(--color-surface-alt); }
.notif-bell-item-text { font-size: 0.85rem; }
.notif-bell-item-when { font-size: 0.72rem; color: var(--color-text-muted); }

/* ==========================================================================
   Donut chart (dashboard "By Category" split) + shared legend
   ========================================================================== */
.donut-chart-wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.donut-chart-svg { flex: none; }
.donut-slice { cursor: pointer; outline: none; stroke: var(--color-surface); stroke-width: 1.5; transition: opacity 0.12s ease, stroke-width 0.12s ease; }
.donut-slice:hover { opacity: 0.82; }
/* Keyboard focus needs its own visible ring, not just the hover dim above
   (a11y: outline:none must never ship without a replacement) — thickens
   and darkens the slice's own separator stroke into one. */
.donut-slice:focus { opacity: 0.82; stroke: var(--color-primary-dark); stroke-width: 3; }
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 140px;
}
.donut-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
.donut-legend-label { color: var(--color-text); font-weight: 600; flex: 1; }
.donut-legend-value { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Grouped bar chart (Hospital Operations "Referrals by Month") — see
   renderGroupedBarChart() in shared/app.js.
   ========================================================================== */
.gbar-chart-wrap { padding: 10px 0 4px; }
.gbar-chart-svg { overflow-x: auto; }
.gbar-hit { cursor: pointer; outline: none; }
.gbar-hit path.gbar-fill { transition: opacity 0.12s ease; }
.gbar-hit:hover path.gbar-fill,
.gbar-hit:focus path.gbar-fill { opacity: 0.8; }
/* Keyboard focus ring — same treatment as .hbar-hit's own hit-area rect
   (a11y: outline:none must never ship without a replacement). */
.gbar-hit:focus rect.gbar-hit-area {
  stroke: var(--color-primary-dark);
  stroke-width: 2px;
  fill: rgba(21, 101, 168, 0.06);
}
.gbar-legend { flex-direction: row; gap: 18px; margin-top: 10px; }


/* ==========================================================================
   Star rating (Satisfaction pages)
   ========================================================================== */
.star-picker {
  display: flex;
  gap: 6px;
  font-size: 2rem;
  line-height: 1;
}
.star-picker .star {
  cursor: pointer;
  color: var(--color-border);
  transition: color 0.1s ease, transform 0.08s ease;
}
.star-picker .star:hover { transform: scale(1.08); }
.star-picker .star.filled,
.star-picker .star.hovered { color: var(--color-star); }

.star { color: var(--color-border); }
.star.filled { color: var(--color-star); }

.rating-summary-figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.rating-summary-figure .stars-inline { font-size: 1.3rem; letter-spacing: 2px; }

.feedback-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--color-surface);
}
.feedback-card .feedback-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.feedback-card .feedback-meta {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.feedback-card .feedback-comment {
  font-size: 0.88rem;
  color: var(--color-text);
  margin-top: 4px;
}

/* ==========================================================================
   Medical report request status chips (Party + Coordinator portals)
   ========================================================================== */
.mrr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.mrr-chip.open { background: var(--color-pending-bg); color: var(--color-pending); }
.mrr-chip.fulfilled { background: var(--color-active-bg); color: var(--color-active); }
.mrr-chip.rejected { background: var(--color-rejected-bg); color: var(--color-rejected); }

/* One individual medical report request, on the party portal's patient
   pop-up (see medicalReportRequestLine() in party/requests.html) — a
   patient can have more than one request over time, each with its own
   requested/received timestamps, so they're separated into their own
   bordered blocks rather than blurring together. */
.mrr-request-item {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  flex-basis: 100%;
}
.mrr-request-item .meta-line:first-of-type {
  margin-top: 6px;
}

/* ==========================================================================
   Login/Setup/Change-password card — a touch more presence for the visual
   refresh (larger radius, deeper shadow) without altering the layout.
   ========================================================================== */
.login-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* The item a notification linked to (see highlightNotificationTarget() in
   app.js) — a brief pulse so the eye lands on it after the jump. */
@keyframes notif-target-pulse {
  0%, 60% { background-color: var(--color-pending-bg); box-shadow: 0 0 0 3px var(--color-pending); }
  100% { background-color: transparent; box-shadow: 0 0 0 3px transparent; }
}
.notif-target {
  border-radius: 8px;
  animation: notif-target-pulse 3s ease-out 1;
}

/* =========================================================================
   Motion & interactivity (see the matching section at the end of app.js)
   Purposeful motion on transform/opacity only; off for reduced motion.
   ========================================================================= */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-med: 240ms;
  --dur-slow: 480ms;
}

/* ---- Buttons: lift on hover, press on click, ripple, busy spinner ---- */
.btn, .btn-filter { position: relative; overflow: hidden; isolation: isolate;
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled), .btn-filter:active { transform: translateY(0) scale(0.97); transition-duration: 60ms; }
.btn:focus-visible, .btn-filter:focus-visible, .user-chip-btn:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 35%, transparent); outline-offset: 2px;
}
.ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: currentColor; opacity: 0.18; transform: scale(0); animation: wasl-ripple 560ms var(--ease-out) forwards; }
@keyframes wasl-ripple { to { transform: scale(1); opacity: 0; } }
.btn.is-busy { color: transparent !important; pointer-events: none; }
.btn.is-busy::after { content: ''; position: absolute; width: 16px; height: 16px; inset: 0; margin: auto;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: wasl-spin 0.7s linear infinite; }
.btn-secondary.is-busy::after, .btn-outline.is-busy::after { border-color: color-mix(in srgb, var(--color-primary) 25%, transparent); border-top-color: var(--color-primary); }
@keyframes wasl-spin { to { transform: rotate(360deg); } }

/* ---- Cards & rows: hover lift, row highlight ---- */
.stat-tile, .hero-kpi-tile, .rev-comp-tile { transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.stat-tile:hover, .hero-kpi-tile:hover, .rev-comp-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20, 32, 44, 0.12); }
.stat-tile .stat-tile-icon { transition: transform var(--dur-med) var(--spring); }
.stat-tile:hover .stat-tile-icon { transform: scale(1.08) rotate(-4deg); }
.req-card-header { transition: background var(--dur-fast) var(--ease-out); }
.req-card-header:hover { background: color-mix(in srgb, var(--color-primary-soft) 65%, transparent); }
.req-card-header .req-chevron { transition: transform var(--dur-med) var(--ease-out); display: inline-block; }
.req-card-header:hover .req-chevron { transform: translateX(3px); }
html[dir="rtl"] .req-card-header:hover .req-chevron { transform: translateX(-3px); }
.data-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--color-primary-soft) 55%, transparent); }

/* ---- Page entrance (first load only; html.is-entering is set briefly) ---- */
@keyframes wasl-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.is-entering .page-header,
html.is-entering .kpi-row > *,
html.is-entering .hero-kpi-row > *,
html.is-entering .page > .card,
html.is-entering .page .dashboard-row > .card,
html.is-entering .filter-tabs,
html.is-entering .list-panel,
html.is-entering .login-card,
html.is-entering .account-wrap > .card {
  animation: wasl-rise var(--dur-slow) var(--ease-out) both;
}
html.is-entering .kpi-row > *:nth-child(2), html.is-entering .hero-kpi-row > *:nth-child(2) { animation-delay: 50ms; }
html.is-entering .kpi-row > *:nth-child(3), html.is-entering .hero-kpi-row > *:nth-child(3) { animation-delay: 100ms; }
html.is-entering .kpi-row > *:nth-child(4), html.is-entering .hero-kpi-row > *:nth-child(4) { animation-delay: 150ms; }
html.is-entering .kpi-row > *:nth-child(5) { animation-delay: 200ms; }
html.is-entering .kpi-row > *:nth-child(6) { animation-delay: 250ms; }
html.is-entering .filter-tabs { animation-delay: 120ms; }
html.is-entering .list-panel, html.is-entering .page > .card { animation-delay: 160ms; }
html.is-entering .account-wrap > .card:nth-child(3) { animation-delay: 60ms; }
html.is-entering .account-wrap > .card:nth-child(4) { animation-delay: 120ms; }
html.is-entering .account-wrap > .card:nth-child(5) { animation-delay: 180ms; }

/* ---- Pop-ups, menus, toasts, tabs, badge ---- */
@keyframes wasl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wasl-pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes wasl-drop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-backdrop.open { animation: wasl-fade var(--dur-med) var(--ease-out); }
.modal-backdrop.open > .modal, .modal-backdrop.open > .card { animation: wasl-pop 320ms var(--spring) both; }
.user-menu:not([hidden]), #notif-bell-panel { animation: wasl-drop 200ms var(--ease-out); transform-origin: top right; }
.toast { transition: opacity var(--dur-med) var(--ease-out), transform 360ms var(--spring); transform: translateY(16px) scale(0.96); }
.toast.show { transform: none; }
.btn-filter.active { animation: wasl-pop 220ms var(--ease-out); }
.tab-count { transition: transform var(--dur-med) var(--spring); }
.btn-filter:hover .tab-count { transform: scale(1.1); }
#notif-bell-badge.bump { animation: wasl-bump 520ms var(--spring); }
@keyframes wasl-bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
.mrr-chip, .tag { transition: transform var(--dur-fast) var(--ease-out); }

/* ---- Charts: entrance when visible, focus on hover ---- */
/* bars grow from the baseline, in order */
svg.chart-anim .hbar-fill { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
svg.chart-anim .gbar-fill { transform-box: fill-box; transform-origin: center bottom; transform: scaleY(0); }
svg.chart-anim .donut-slice { transform-box: view-box; transform-origin: 50% 50%; opacity: 0; transform: scale(0.82) rotate(-12deg); }
svg.chart-anim .line-path { stroke-dasharray: 1; stroke-dashoffset: 1; }
svg.chart-anim .line-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); }
svg.chart-anim .line-point text { opacity: 0; }
svg.chart-anim.is-visible .hbar-fill { animation: wasl-grow-x 700ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
svg.chart-anim.is-visible .gbar-fill { animation: wasl-grow-y 650ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
svg.chart-anim.is-visible .donut-slice { animation: wasl-slice 620ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
svg.chart-anim.is-visible .line-path { animation: wasl-draw 1100ms var(--ease-in-out) forwards; }
svg.chart-anim.is-visible .line-dot { animation: wasl-dot 380ms var(--spring) forwards; animation-delay: calc(300ms + var(--i, 0) * 70ms); }
svg.chart-anim.is-visible .line-point text { animation: wasl-fade 300ms var(--ease-out) forwards; animation-delay: calc(500ms + var(--i, 0) * 70ms); }
@keyframes wasl-grow-x { to { transform: scaleX(1); } }
@keyframes wasl-grow-y { to { transform: scaleY(1); } }
@keyframes wasl-slice { to { opacity: 1; transform: none; } }
@keyframes wasl-draw { to { stroke-dashoffset: 0; } }
@keyframes wasl-dot { to { transform: scale(1); } }
html[dir="rtl"] svg.chart-anim .hbar-fill { transform-origin: left center; }

/* hover: the hovered mark lifts, everything else steps back */
.hbar-hit .hbar-fill, .gbar-hit .gbar-fill, .donut-slice, .line-path, .line-point { transition: opacity var(--dur-med) var(--ease-out), filter var(--dur-med) var(--ease-out); }
svg.chart-anim:has(.hbar-hit:hover) .hbar-hit:not(:hover) .hbar-fill,
svg.chart-anim:has(.hbar-hit:focus) .hbar-hit:not(:focus) .hbar-fill { opacity: 0.35; }
.hbar-hit:hover .hbar-fill, .hbar-hit:focus .hbar-fill { opacity: 1; filter: brightness(1.08) saturate(1.1); }
.has-focus [data-series]:not(.is-focus):not(.donut-legend-row) { opacity: 0.25; }
.has-focus .donut-legend-row[data-series]:not(.is-focus) { opacity: 0.45; }
.has-focus .is-focus .gbar-fill, .has-focus .donut-slice.is-focus { filter: brightness(1.06) saturate(1.1); }
.has-focus .line-path.is-focus { stroke-width: 4; }
.line-point:hover .line-dot, .line-point:focus .line-dot { r: 7; }
.line-dot { transition: r var(--dur-fast) var(--ease-out); }
.donut-legend-row[data-series] { cursor: pointer; border-radius: 6px; transition: opacity var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.donut-legend-row[data-series]:hover { background: var(--color-surface-alt); }
.donut-slice.is-focus { transform: scale(1.03); transform-box: view-box; transform-origin: 50% 50%; transition: transform var(--dur-med) var(--spring), opacity var(--dur-med) var(--ease-out); }
.chart-tooltip { transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }

/* ---- Scroll motion (section 7 of the motion layer in app.js) ---- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.revealed { opacity: 1; transform: none;
  transition: opacity 560ms var(--ease-out), transform 640ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
html.is-entering .reveal:not(.revealed) { animation: none; }
.topbar { transition: box-shadow var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); }
html.is-scrolled .topbar { box-shadow: 0 6px 22px rgba(16, 24, 40, 0.10); background: color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter: saturate(1.2) blur(6px); }
html { scroll-behavior: smooth; }
.back-to-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 900; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-primary);
  font-size: 1.1rem; font-weight: 700; cursor: pointer; box-shadow: 0 8px 22px rgba(20, 32, 44, 0.16);
  opacity: 0; transform: translateY(14px) scale(0.9); pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--spring), background var(--dur-fast) var(--ease-out);
}
.back-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { background: var(--color-primary-soft); transform: translateY(-2px); }
html[dir="rtl"] .back-to-top { right: auto; left: 24px; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- Reduced motion: no movement at all ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .ripple { display: none; }
}

/* ---- Accessibility ---- */
/* Keyboard focus is always clearly visible (solid, 3:1 against the page). */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn:focus-visible, .btn-filter:focus-visible, .user-chip-btn:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, .close-x:focus-visible,
.user-menu a:focus-visible, .user-menu button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.modal:focus, .page:focus { outline: none; }

/* ---- Connection lost banner ---- */
.conn-banner {
  position: fixed; left: 50%; bottom: 20px; z-index: 2500; display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 12px;
  background: #3b1d1a; color: #fff; font-size: 0.9rem; box-shadow: 0 12px 30px rgba(20, 32, 44, 0.28);
  opacity: 0; transform: translate(-50%, 20px); pointer-events: none;
  transition: opacity 240ms ease-out, transform 240ms ease-out;
}
.conn-banner.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.conn-banner-dot { width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; flex: none; animation: wasl-conn-pulse 1.2s ease-in-out infinite; }
@keyframes wasl-conn-pulse { 50% { opacity: 0.35; } }
.conn-banner-retry { flex: none; border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; color: #fff; border-radius: 8px; padding: 5px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.conn-banner-retry:hover { background: rgba(255, 255, 255, 0.12); }
@media (prefers-reduced-motion: reduce) { .conn-banner-dot { animation: none; } }

/* ---- Version / What's new ---- */
.menu-version { color: var(--color-text-muted); font-size: 0.78rem; margin-inline-start: 4px; }
.modal-whats-new { max-width: 560px; }
.whats-new-current { color: var(--color-text-muted); font-size: 0.88rem; margin: 0 0 12px; }
.whats-new-list { max-height: 60vh; overflow-y: auto; }
.whats-new-release + .whats-new-release { border-top: 1px solid var(--color-border); margin-top: 12px; padding-top: 12px; }
.whats-new-release h4 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 0.95rem; }
.whats-new-version { color: var(--color-primary); font-weight: 700; }
.whats-new-date { color: var(--color-text-muted); font-size: 0.8rem; font-weight: 400; }
.whats-new-release ul { margin: 0; padding-inline-start: 20px; }
.whats-new-release li { font-size: 0.88rem; line-height: 1.5; margin: 4px 0; }

/* ---- Long lists: "Show more" ---- */
.show-more-wrap { display: flex; justify-content: center; padding: 14px 0 6px; }

/* ---- Version + copyright bar (added to every page by shared/app.js) ----
   Fixed to the bottom of the screen, always visible. On pages with the
   side menu it spans the content area only (the menu keeps its full
   height). Everything else that sits at the bottom of the screen — the
   watermark, toasts, the "back to top" button, the connection banner —
   is lifted by --footer-height so nothing overlaps it. */
:root { --footer-height: 34px; }
.site-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; height: var(--footer-height);
  display: flex; align-items: center; justify-content: center; padding: 0 16px;
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 1px solid var(--color-border);
  font-size: 0.72rem; color: var(--color-text-muted); letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden;
}
.site-footer-sep { margin: 0 8px; opacity: 0.6; }
.site-footer-app, .site-footer-version { font-weight: 600; color: var(--color-primary); }
body.has-sidebar .site-footer { left: var(--sidebar-width); }
html[dir="rtl"] body.has-sidebar .site-footer { left: 0; right: var(--sidebar-width); }
body { padding-bottom: var(--footer-height); }
.login-wrap { min-height: calc(100vh - var(--footer-height)); }
/* The sunburst fits between the header (or top of the screen) and the bar. */
.watermark-fixed { bottom: var(--footer-height); }
.toast { bottom: calc(var(--footer-height) + 14px); }
.back-to-top { bottom: calc(var(--footer-height) + 16px); }
.conn-banner { bottom: calc(var(--footer-height) + 14px); }
@media (max-width: 760px) {
  body.has-sidebar .site-footer, html[dir="rtl"] body.has-sidebar .site-footer { left: 0; right: 0; }
}
@media (max-width: 520px) {
  :root { --footer-height: 48px; }
  .site-footer { flex-direction: column; white-space: normal; text-align: center; line-height: 1.35; }
  .site-footer-sep { display: none; }
}
@media print {
  .site-footer { position: static; background: none; border: none; }
  body { padding-bottom: 0; }
}

/* ---- Idle sign-out warning (shared/app.js) ---- */
.idle-warning-backdrop { z-index: 2600; }
.idle-warning { max-width: 420px; text-align: center; }
.idle-warning-icon { font-size: 2rem; line-height: 1; margin-bottom: 8px; }
.idle-warning h3 { margin: 0 0 8px; }
.idle-warning p { color: var(--color-text-muted); font-size: 0.9rem; margin: 0 0 10px; }
.idle-warning-count { font-size: 2.2rem; font-weight: 700; color: var(--color-danger); font-variant-numeric: tabular-nums; margin: 4px 0 16px; }
.idle-warning-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---- Messages (shared/messages.js) ---- */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 8px;
  border-radius: 999px; background: #dc2626; color: #fff; font-size: 0.7rem; font-weight: 700; vertical-align: middle; }
.nav-badge[hidden] { display: none; }
.page-chat { display: flex; flex-direction: column; }
.chat-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; height: calc(100vh - var(--header-height) - var(--footer-height) - 170px); min-height: 460px; }
body.chat-side-party .chat-layout { grid-template-columns: 1fr; }
.chat-orgs { display: flex; flex-direction: column; overflow: hidden; padding: 12px; }
.chat-org-search { width: 100%; margin-bottom: 10px; }
.chat-org-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.chat-org { display: flex; flex-direction: column; gap: 3px; text-align: start; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; font: inherit; cursor: pointer; color: var(--color-text); }
.chat-org:hover { background: var(--color-surface-alt); }
.chat-org.is-selected { background: var(--color-primary-soft); border-color: var(--color-primary-light); }
.chat-org-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-org-name { font-weight: 600; font-size: 0.9rem; }
.chat-org.has-unread .chat-org-name { font-weight: 800; }
.chat-unread-pill { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chat-org-sub { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: 0.78rem; min-width: 0; }
.chat-org-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); flex: none; }
.chat-dot.is-open { background: var(--color-active); }
.chat-main { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--color-border); }
.chat-head-title { display: flex; flex-direction: column; gap: 4px; }
.chat-head-title h2 { margin: 0; font-size: 1.05rem; }
.chat-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-status { font-size: 0.76rem; color: var(--color-text-muted); }
.chat-status.is-open { color: var(--color-active); font-weight: 600; }
.chat-status.is-ended { color: var(--color-discharged); font-weight: 600; }
.chat-end-btn { color: var(--color-danger); }
.chat-history { display: flex; gap: 8px; overflow-x: auto; padding: 10px 18px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-alt); }
.chat-history-item { flex: none; display: flex; flex-direction: column; gap: 2px; text-align: start; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--color-border);
  background: var(--color-surface); font: inherit; font-size: 0.78rem; color: var(--color-text-muted); cursor: pointer; }
.chat-history-item strong { color: var(--color-text); font-size: 0.82rem; }
.chat-history-item.is-selected { border-color: var(--color-primary); background: var(--color-primary-soft); }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--color-surface-alt); }
.chat-msg { display: flex; flex-direction: column; max-width: 74%; gap: 3px; }
.chat-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.is-theirs { align-self: flex-start; align-items: flex-start; }
.chat-msg-meta { font-size: 0.72rem; color: var(--color-text-muted); font-weight: 600; }
.chat-bubble { padding: 10px 14px; border-radius: 16px; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.is-mine .chat-bubble { background: var(--color-primary); color: #fff; border-end-end-radius: 4px; }
.chat-msg.is-theirs .chat-bubble { background: var(--color-surface); border: 1px solid var(--color-border); border-end-start-radius: 4px; }
.chat-msg-time { font-size: 0.7rem; color: var(--color-text-muted); }
.chat-seen { color: var(--color-active); font-weight: 600; }
.chat-system { align-self: center; font-size: 0.74rem; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 12px; text-align: center; }
.chat-compose { display: flex; gap: 10px; align-items: flex-end; padding: 12px 18px 6px; border-top: 1px solid var(--color-border); }
.chat-compose textarea { flex: 1; resize: vertical; min-height: 46px; max-height: 180px; font: inherit; font-size: 0.9rem; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--color-border); }
.chat-note { margin: 0; padding: 0 18px 12px; font-size: 0.72rem; color: var(--color-text-muted); }
.chat-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--color-text-muted); font-size: 1.6rem; text-align: center; padding: 30px; }
.chat-placeholder p { font-size: 0.9rem; margin: 0; }
.chat-placeholder.small { flex: none; padding: 10px; font-size: 1rem; }
.chat-empty { color: var(--color-text-muted); font-size: 0.84rem; padding: 10px; }
@media (max-width: 900px) {
  .chat-layout { grid-template-columns: 1fr; height: auto; }
  body.chat-side-hospital .chat-orgs { max-height: 260px; }
  .chat-main { min-height: 520px; }
  .chat-msg { max-width: 90%; }
}
.page-chat .page-header { align-items: center; }
.chat-sound-toggle { white-space: nowrap; }
.account-notify-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.account-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.account-toggle input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.sound-blocked-note {
  position: fixed; left: 16px; bottom: calc(var(--footer-height) + 14px); z-index: 2400;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 22px rgba(20, 32, 44, 0.14);
}
.sound-blocked-note:hover { background: var(--color-primary-soft); }
html[dir="rtl"] .sound-blocked-note { left: auto; right: 16px; }

/* Phone-only extras on empty pages (hint + next step) — hidden on desktop,
   where the empty card looks exactly as it always did. */
.empty-hint, .empty-cta { display: none; }
.empty-card { text-align: center; color: var(--color-text-muted); font-size: 0.9rem; }
.empty-card .empty-title { margin: 0; }

/* ==========================================================================
   PHONE LAYOUT (760px wide or less). Kept together at the end so it wins
   over the desktop rules above. The page never scrolls sideways: the header
   is one compact row (☰, logo, language, bell, initials), the side menu
   slides in from the side (see mountMobileNav in app.js), tables become
   cards, and Messages shows the organization list and a conversation in turn.
   ========================================================================== */
.nav-toggle, .sidebar-close, .nav-backdrop, .chat-back-list { display: none; }
@media (max-width: 760px) {
  :root { --header-height: 57px; --footer-height: 38px; font-size: 17px; }
  html { overflow-x: hidden; }

  /* Header */
  .topbar { padding: 8px 12px; gap: 8px; }
  .topbar .brand { min-width: 0; flex: 1 1 auto; }
  .brand-logo { height: 40px; }
  .topbar .brand-tagline, .topbar .org-logo { display: none !important; }
  .topbar-right { gap: 8px; flex: none; }
  .lang-toggle { padding: 7px 10px; }
  .lang-toggle .lang-toggle-swap { display: none; }
  .user-chip-text, .user-chip-caret { display: none; }
  .user-chip-btn { padding: 0; border: none; background: none; }
  .user-chip .avatar-chip { width: 36px; height: 36px; }
  .notif-bell-panel { position: fixed; top: calc(var(--header-height) + 6px); left: 10px; right: 10px; width: auto; max-height: 70vh; }
  html[dir="rtl"] .notif-bell-panel { left: 10px; right: 10px; }

  /* ☰ button */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none; position: relative;
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--color-border);
    background: var(--color-surface-alt); cursor: pointer; padding: 0;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--color-primary-dark); content: '';
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before { position: absolute; top: -6px; }
  .nav-toggle-bars::after { position: absolute; top: 6px; }
  .nav-toggle.has-unread::after {
    content: ''; position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%;
    background: #dc2626; border: 2px solid var(--color-surface);
  }
  html[dir="rtl"] .nav-toggle.has-unread::after { right: auto; left: -3px; }

  /* Side menu as a sliding panel */
  .sidebar, html[dir="rtl"] .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; right: auto; width: min(84vw, 300px);
    flex-direction: column; align-items: stretch; overflow-x: hidden; overflow-y: auto;
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
    border: none; z-index: 2600; transform: translateX(-102%); visibility: hidden;
    transition: transform 240ms var(--ease-out, ease-out), visibility 0s linear 240ms;
  }
  html[dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(102%); }
  body.nav-open .sidebar, html[dir="rtl"] body.nav-open .sidebar {
    transform: none; visibility: visible; transition: transform 240ms var(--ease-out, ease-out), visibility 0s;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  }
  .sidebar-close {
    display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; flex: none;
    width: 38px; height: 38px; margin-bottom: 8px; border-radius: 10px; border: 1px solid var(--color-sidebar-border);
    background: transparent; color: var(--color-sidebar-text-bright); font-size: 1rem; cursor: pointer;
  }
  .sidebar-nav { flex-direction: column; gap: 3px; }
  .sidebar-nav a { white-space: normal; padding: 12px 12px; font-size: 1rem; }
  .sidebar-logout, html[dir="rtl"] .sidebar-logout { width: 100%; margin: 14px 0 0; }
  .sidebar-logout-all { width: 100%; white-space: normal; margin-top: 8px; }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 2590; background: rgba(10, 18, 30, 0.45);
    opacity: 0; pointer-events: none; transition: opacity 240ms ease;
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  html:has(body.nav-open) { overflow: hidden; }

  /* Page */
  body.has-sidebar .page, html[dir="rtl"] body.has-sidebar .page {
    margin: 0; max-width: none; padding: 16px 14px 24px; min-height: 0;
  }
  .page-header { margin-bottom: 16px; align-items: flex-start; }
  .page-header h1 { font-size: 1.4rem; }
  .page-header > .btn, .page-header > div > .btn { width: 100%; }
  .page-icon-badge { transform: scale(0.85); transform-origin: left top; }
  .card { padding: 16px 14px; }
  .filter-tabs { flex-wrap: wrap; gap: 8px; }
  .filter-tabs .btn { white-space: nowrap; }
  /* Main Board: Out / In Patients as one switch with two equal halves */
  .filter-tabs:has(> #filter-op) {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px;
  }
  .filter-tabs:has(> #filter-op) .btn { width: 100%; border-color: transparent; box-shadow: none; border-radius: 10px; }
  .filter-tabs:has(> #filter-op) .btn:not(.active) { background: transparent; }
  /* Status buttons: an even two-column grid in the order cases move
     (Pending, Accepted / Arrived, Service Started or Active / Discharged
     across the whole row); name on one side, count on the other. */
  #status-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #status-tabs .btn { width: 100%; justify-content: space-between; padding-inline: 12px; white-space: normal; text-align: start; line-height: 1.25; }
  #status-tabs .btn > span:first-child { min-width: 0; }
  #status-tabs .tab-count { flex: none; margin-inline-start: 8px; margin-left: 8px; }
  html[dir="rtl"] #status-tabs .tab-count { margin-left: 0; }
  #status-tabs .btn[data-status-tab="discharged"] { grid-column: 1 / -1; }
  /* Dashboard section buttons: an even two-column grid, Reports across the row */
  #dashboard-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #dashboard-tabs .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
  #dashboard-tabs .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Report filters: equal boxes, two per row (a lone last one takes the row) */
  .report-filters-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .report-filters-row .field { min-width: 0; }
  .report-filters-row .field :is(select, input) { width: 100%; }
  .report-filters-row .field:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .report-column-list { gap: 0; }
  /* Main Board cards: the coloured dot stays beside the first word of the
     title, and OP / IP always sit side by side on one line using the full
     card width (the icon is at the top, so the room under it is free). */
  .stat-tile .stat-label:has(> span:first-child[class^="dot-"]) { display: flex; align-items: baseline; gap: 5px; }
  .stat-tile .stat-label > span:first-child[class^="dot-"] { flex: none; }
  .stat-tile.has-icon { padding-left: 16px; padding-right: 52px; }
  html[dir="rtl"] .stat-tile.has-icon { padding-left: 52px; padding-right: 16px; }
  .stat-tile-icon { width: 36px; height: 36px; top: 14px; right: 12px; border-radius: 10px; font-size: 1rem; }
  html[dir="rtl"] .stat-tile-icon { right: auto; left: 12px; }
  .stat-tile .stat-label { letter-spacing: 0.01em; }
  .stat-tile.has-icon .stat-split { margin-inline-end: -36px; flex-wrap: nowrap; }
  .kpi-row.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  img, svg, canvas { max-width: 100%; }
  [id] { scroll-margin-top: calc(var(--header-height) + 12px); }

  /* Watermark: small and faint, always behind the content */
  .watermark-fixed { background-size: 92vw auto; background-position: center 55%; opacity: 0.45; }

  /* Footer: one short line (two on very narrow phones) */
  .site-footer {
    flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; gap: 0 2px;
    white-space: nowrap; font-size: 10.5px; line-height: 1.3; padding: 0 10px env(safe-area-inset-bottom);
  }
  .site-footer-sep { display: inline; margin: 0 5px; }
  .sound-blocked-note { left: 12px; right: 12px; bottom: calc(var(--footer-height) + 10px); text-align: center; }
  html[dir="rtl"] .sound-blocked-note { left: 12px; right: 12px; }

  /* Tables as cards: one card per row, "label: value" per column */
  /* Long lists (services, Activity Log) scroll inside their own box so the
     page itself stays a normal length. */
  .table-wrap { overflow: visible; border: none; }
  .scroll-table-wrap, .table-scroll, .card:has(> #audit-table) {
    max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; border: none; -webkit-overflow-scrolling: touch;
  }
  table.data-table, table.data-table tbody, table.data-table tr, table.data-table td { display: block; width: 100%; }
  table.data-table thead { display: none; }
  table.data-table tbody tr {
    border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 10px; padding: 6px 12px;
    background: var(--color-surface);
  }
  table.data-table td, table.data-table.compact-table td {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    border-bottom: 1px dashed var(--color-border); padding: 7px 0; text-align: end; overflow-wrap: anywhere;
  }
  table.data-table td:last-child { border-bottom: none; }
  /* A cell holding several lines (e.g. service name + tags + a checkbox):
     label above, content below, full width. */
  table.data-table td:has(> div + *), table.data-table td:has(> label) {
    flex-direction: column; align-items: stretch; text-align: start; gap: 4px;
  }
  table.data-table td:has(> div + *)::before, table.data-table td:has(> label)::before { max-width: none; }
  table.data-table td:has(> div + *) > *, table.data-table td:has(> label) > * { text-align: start; }
  table.data-table td > input[type="number"], table.data-table td > input[type="text"] { max-width: 60%; font-size: 16px; }
  /* "text + button" lines inside a card (name + Edit, logo + Replace, ...):
     the text takes the room, every button lines up at the same edge with the
     same width and never wraps. */
  table.data-table td > div:has(> .btn) { display: flex; align-items: center; gap: 10px; width: 100%; }
  table.data-table td > div:has(> .btn) > :not(.btn) { flex: 1 1 auto; min-width: 0; }
  table.data-table td > div:has(> .btn) > .btn { flex: none; margin-inline-start: auto; }
  table.data-table td .btn { white-space: nowrap; min-width: 104px; justify-content: center; }
  /* A group of buttons in a card (Edit / Reset Password / Delete, Rename /
     Documents / Remove...): an even grid, two per row, all the same width;
     a single button takes the whole row. (!important: some cells carry an
     inline display style.) */
  table.data-table td:has(> .btn):not(:has(> :not(.btn))), table.data-table td .row-actions,
  table.data-table td > div:has(> .btn):not(:has(> :not(.btn))) {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; width: 100%;
  }
  table.data-table td:has(> .btn):not(:has(> :not(.btn)))::before { grid-column: 1 / -1; }
  table.data-table td:has(> .btn):not(:has(> :not(.btn))) > .btn, table.data-table td .row-actions > .btn,
  table.data-table td > div:has(> .btn):not(:has(> :not(.btn))) > .btn { width: 100%; min-width: 0; margin: 0; }
  /* Administration "add" forms: every box full width, one under the other,
     with the button full width below them, so all the boxes line up.
     (!important: the boxes carry inline flex/min-width styles.) */
  :is(#org-form, #org-form > div, #service-form, #discharge-type-form, #admission-type-form, #document-type-form) {
    flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important;
  }
  :is(#org-form, #service-form, #discharge-type-form, #admission-type-form, #document-type-form) :is(input:not([type="file"]):not([type="checkbox"]), select) {
    flex: none !important; width: 100% !important; min-width: 0 !important;
  }
  :is(#org-form, #service-form, #discharge-type-form, #admission-type-form, #document-type-form) .btn { width: 100%; }
  /* Organizations: name, Arabic name, logo, then Add at the end */
  #org-form > div:first-child { display: contents !important; }
  #org-form .btn[type="submit"] { order: 10; }
  table.data-table td::before {
    content: attr(data-label); flex: none; max-width: 45%; text-align: start; overflow-wrap: normal;
    color: var(--color-text-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  }
  table.data-table td[data-label=""]::before, table.data-table td:not([data-label])::before { content: none; }
  table.data-table td[data-label=""], table.data-table td:not([data-label]) { justify-content: flex-start; text-align: start; }
  html[dir="rtl"] table.data-table td, html[dir="rtl"] table.data-table th { text-align: start; }
  table.data-table th.select-col, table.data-table td.select-col { width: 100%; }

  /* Dialogs use the whole width */
  .modal, .modal-content, .modal-box { max-width: calc(100vw - 20px); }

  /* Messages: the organization list, then (after tapping one) only that
     conversation, full height with the typing box at the bottom. */
  .chat-layout { display: block; height: auto; min-height: 0; }
  body.chat-side-hospital .chat-orgs { max-height: none; }
  body.chat-side-hospital:not(.chat-org-chosen) .chat-main { display: none; }
  body.chat-side-hospital.chat-org-chosen .chat-orgs { display: none; }
  body.chat-side-hospital.chat-org-chosen .page-chat .page-header { display: none; }
  .chat-main.card { padding: 0; }
  .chat-org-search { font: inherit; font-size: 16px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
  .chat-org-search:focus { outline: 2px solid var(--color-primary-light); outline-offset: 1px; border-color: var(--color-primary); }
  .empty-hint { display: block; margin: 6px auto 0; max-width: 460px; font-size: 0.8rem; line-height: 1.5; color: var(--color-text-muted); font-weight: 400; }
  .empty-cta { display: inline-flex; }
  .empty-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 26px; padding-bottom: 26px; }
  .empty-card .empty-title { font-size: 0.95rem; font-weight: 600; color: var(--color-text); }
  .empty-card .btn { margin-top: 12px; text-decoration: none; }
  .chat-back-list { display: inline-flex; flex: none; padding: 5px 10px; }
  .chat-head-title h2 { font-size: 1rem; }
  .chat-main {
    height: calc(100dvh - var(--header-height) - var(--footer-height) - 32px); min-height: 380px;
  }
  .page-chat .page-icon-badge { display: none; }
  .page-chat .page-header { flex-wrap: nowrap; align-items: center; margin-bottom: 12px; }
  .page-chat .page-header > .btn { width: auto; flex: none; }
  body.chat-side-party .page-chat .page-header p { display: none; }
  body.chat-side-party .chat-main { height: calc(100dvh - var(--header-height) - var(--footer-height) - 100px); }
  .chat-head { padding: 10px 12px; gap: 8px; }
  .chat-head-actions { width: 100%; flex-wrap: nowrap; }
  .chat-head-actions .btn { flex: 1 1 0; min-width: 0; padding: 6px 8px; font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-log { padding: 12px; }
  .chat-msg { max-width: 88%; }
  .chat-compose { padding: 8px 10px 4px; }
  .chat-compose textarea { min-height: 44px; resize: none; font-size: 16px; }
  .chat-note { padding: 0 12px 8px; font-size: 0.68rem; }

  /* ---- Touch targets: at least 44px tall/wide (mobile design rules) ---- */
  .btn, .btn-sm, .btn-filter, .lang-toggle, .notif-bell-btn, .nav-toggle, .sidebar-close, .back-to-top,
  .user-chip .avatar-chip, .chat-sound-toggle, .chat-back-list, .sidebar-logout-all, .reveal-btn,
  #back-link, .user-menu a, .user-menu button, .notif-bell-item {
    min-height: 44px;
  }
  .lang-toggle, .notif-bell-btn, .nav-toggle, .sidebar-close, .back-to-top, .user-chip .avatar-chip { min-width: 44px; }
  .btn-sm { padding: 8px 14px; font-size: 0.82rem; }
  .reveal-btn { padding: 0 10px; }
  .sidebar-logout-all { display: flex; align-items: center; justify-content: center; }
  #back-link { display: inline-flex; align-items: center; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { min-height: 44px; font-size: 16px; }
  input[type="file"] { min-height: 44px; }
  /* !important: several desktop rules set checkbox widths with more specific selectors */
  input[type="checkbox"], input[type="radio"] { width: 22px !important; height: 22px !important; flex: none; accent-color: var(--color-primary); }
  table.data-table td.select-col { min-height: 44px; align-items: center; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  table.data-table td a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
  .chat-head-actions .btn { min-height: 44px; }
  .chat-compose .btn { min-height: 48px; }
}
/* Narrow phones (380px or less): a little more room for the card titles. */
@media (max-width: 380px) {
  .stat-tile.has-icon { padding-right: 46px; }
  html[dir="rtl"] .stat-tile.has-icon { padding-right: 16px; padding-left: 46px; }
  .stat-tile-icon { width: 32px; height: 32px; right: 10px; font-size: 0.92rem; }
  html[dir="rtl"] .stat-tile-icon { right: auto; left: 10px; }
  .stat-tile .stat-label { font-size: 0.7rem; letter-spacing: 0; }
  .stat-tile.has-icon .stat-split { margin-inline-end: -30px; }
}

/* ==========================================================================
   TABLET LAYOUT - touch screens without a mouse, 761-1366px wide (iPads and
   Android tablets, either way round). Desktop computers never match these
   rules (they have a mouse or trackpad), whatever the window size, so the
   desktop view is unchanged; phones have their own section above.
   ========================================================================== */
@media (min-width: 761px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  html { overflow-x: hidden; }
  [id] { scroll-margin-top: calc(var(--header-height) + 12px); }
  /* Nothing wider than the screen: side-by-side cards share the width, long
     table text wraps, long lists scroll inside their own box. */
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 > * { min-width: 0; }
  .scroll-table-wrap, .table-scroll, .card:has(> #audit-table) {
    max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  /* Tables as cards: one card per row, "label: value" per column */
  table.data-table, table.data-table tbody, table.data-table tr, table.data-table td { display: block; width: 100%; }
  table.data-table thead { display: none; }
  table.data-table tbody tr {
    border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 10px; padding: 6px 12px;
    background: var(--color-surface);
  }
  table.data-table td, table.data-table.compact-table td {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    border-bottom: 1px dashed var(--color-border); padding: 7px 0; text-align: end; overflow-wrap: anywhere;
  }
  table.data-table td:last-child { border-bottom: none; }
  /* A cell holding several lines (e.g. service name + tags + a checkbox):
     label above, content below, full width. */
  table.data-table td:has(> div + *), table.data-table td:has(> label) {
    flex-direction: column; align-items: stretch; text-align: start; gap: 4px;
  }
  table.data-table td:has(> div + *)::before, table.data-table td:has(> label)::before { max-width: none; }
  table.data-table td:has(> div + *) > *, table.data-table td:has(> label) > * { text-align: start; }
  table.data-table td > input[type="number"], table.data-table td > input[type="text"] { max-width: 60%; font-size: 16px; }
  /* "text + button" lines inside a card (name + Edit, logo + Replace, ...):
     the text takes the room, every button lines up at the same edge with the
     same width and never wraps. */
  table.data-table td > div:has(> .btn) { display: flex; align-items: center; gap: 10px; width: 100%; }
  table.data-table td > div:has(> .btn) > :not(.btn) { flex: 1 1 auto; min-width: 0; }
  table.data-table td > div:has(> .btn) > .btn { flex: none; margin-inline-start: auto; }
  table.data-table td .btn { white-space: nowrap; min-width: 104px; justify-content: center; }
  /* A group of buttons in a card (Edit / Reset Password / Delete, Rename /
     Documents / Remove...): an even grid, two per row, all the same width;
     a single button takes the whole row. (!important: some cells carry an
     inline display style.) */
  table.data-table td:has(> .btn):not(:has(> :not(.btn))), table.data-table td .row-actions,
  table.data-table td > div:has(> .btn):not(:has(> :not(.btn))) {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; width: 100%;
  }
  table.data-table td:has(> .btn):not(:has(> :not(.btn)))::before { grid-column: 1 / -1; }
  table.data-table td:has(> .btn):not(:has(> :not(.btn))) > .btn, table.data-table td .row-actions > .btn,
  table.data-table td > div:has(> .btn):not(:has(> :not(.btn))) > .btn { width: 100%; min-width: 0; margin: 0; }
  table.data-table td::before {
    content: attr(data-label); flex: none; max-width: 45%; text-align: start; overflow-wrap: normal;
    color: var(--color-text-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  }
  table.data-table td[data-label=""]::before, table.data-table td:not([data-label])::before { content: none; }
  table.data-table td[data-label=""], table.data-table td:not([data-label]) { justify-content: flex-start; text-align: start; }
  html[dir="rtl"] table.data-table td, html[dir="rtl"] table.data-table th { text-align: start; }
  table.data-table th.select-col, table.data-table td.select-col { width: 100%; }
  /* Empty pages say what to do next; Messages search box */
  .empty-hint { display: block; margin: 6px auto 0; max-width: 460px; font-size: 0.8rem; line-height: 1.5; color: var(--color-text-muted); font-weight: 400; }
  .empty-cta { display: inline-flex; }
  .empty-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 26px; padding-bottom: 26px; }
  .empty-card .empty-title { font-size: 0.95rem; font-weight: 600; color: var(--color-text); }
  .empty-card .btn { margin-top: 12px; text-decoration: none; }
  .chat-org-search { font: inherit; font-size: 16px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
  .chat-org-search:focus { outline: 2px solid var(--color-primary-light); outline-offset: 1px; border-color: var(--color-primary); }
  .chat-compose textarea { font-size: 16px; }

  /* ---- Touch targets: at least 44px tall/wide (mobile design rules) ---- */
  .btn, .btn-sm, .btn-filter, .lang-toggle, .notif-bell-btn, .nav-toggle, .sidebar-close, .back-to-top,
  .user-chip .avatar-chip, .chat-sound-toggle, .chat-back-list, .sidebar-logout-all, .reveal-btn,
  #back-link, .user-menu a, .user-menu button, .notif-bell-item {
    min-height: 44px;
  }
  .lang-toggle, .notif-bell-btn, .nav-toggle, .sidebar-close, .back-to-top, .user-chip .avatar-chip { min-width: 44px; }
  .btn-sm { padding: 8px 14px; font-size: 0.82rem; }
  .reveal-btn { padding: 0 10px; }
  .sidebar-logout-all { display: flex; align-items: center; justify-content: center; }
  #back-link { display: inline-flex; align-items: center; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { min-height: 44px; font-size: 16px; }
  input[type="file"] { min-height: 44px; }
  /* !important: several desktop rules set checkbox widths with more specific selectors */
  input[type="checkbox"], input[type="radio"] { width: 22px !important; height: 22px !important; flex: none; accent-color: var(--color-primary); }
  table.data-table td.select-col { min-height: 44px; align-items: center; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  table.data-table td a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
  .chat-head-actions .btn { min-height: 44px; }
  .chat-compose .btn { min-height: 48px; }
}

/* Tablets up to 1024px wide (mostly upright): the menu slides in from the
   side (the button at the start of the header) so pages use the full width. */
@media (min-width: 761px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  .topbar .brand-tagline { display: none; }
  .topbar .brand { flex: 1 1 auto; min-width: 0; gap: 12px; }
  /* ☰ button */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none; position: relative;
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--color-border);
    background: var(--color-surface-alt); cursor: pointer; padding: 0;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--color-primary-dark); content: '';
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before { position: absolute; top: -6px; }
  .nav-toggle-bars::after { position: absolute; top: 6px; }
  .nav-toggle.has-unread::after {
    content: ''; position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%;
    background: #dc2626; border: 2px solid var(--color-surface);
  }
  html[dir="rtl"] .nav-toggle.has-unread::after { right: auto; left: -3px; }

  /* Side menu as a sliding panel */
  .sidebar, html[dir="rtl"] .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; right: auto; width: min(84vw, 300px);
    flex-direction: column; align-items: stretch; overflow-x: hidden; overflow-y: auto;
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
    border: none; z-index: 2600; transform: translateX(-102%); visibility: hidden;
    transition: transform 240ms var(--ease-out, ease-out), visibility 0s linear 240ms;
  }
  html[dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(102%); }
  body.nav-open .sidebar, html[dir="rtl"] body.nav-open .sidebar {
    transform: none; visibility: visible; transition: transform 240ms var(--ease-out, ease-out), visibility 0s;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  }
  .sidebar-close {
    display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; flex: none;
    width: 38px; height: 38px; margin-bottom: 8px; border-radius: 10px; border: 1px solid var(--color-sidebar-border);
    background: transparent; color: var(--color-sidebar-text-bright); font-size: 1rem; cursor: pointer;
  }
  .sidebar-nav { flex-direction: column; gap: 3px; }
  .sidebar-nav a { white-space: normal; padding: 12px 12px; font-size: 1rem; }
  .sidebar-logout, html[dir="rtl"] .sidebar-logout { width: 100%; margin: 14px 0 0; }
  .sidebar-logout-all { width: 100%; white-space: normal; margin-top: 8px; }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 2590; background: rgba(10, 18, 30, 0.45);
    opacity: 0; pointer-events: none; transition: opacity 240ms ease;
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  html:has(body.nav-open) { overflow: hidden; }

  body.has-sidebar .page, html[dir="rtl"] body.has-sidebar .page { margin: 0 auto; max-width: none; padding: 24px 22px 32px; }
  body.has-sidebar .site-footer, html[dir="rtl"] body.has-sidebar .site-footer { left: 0; right: 0; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  /* Full-width pages (no side menu): three Main Board cards per row fit */
  .kpi-row.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

}

/* Landscape tablets keep the side menu: the "turn on sounds" notice sits
   beside it rather than over its Log out button. */
@media (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .sound-blocked-note { left: calc(var(--sidebar-width) + 16px); }
  html[dir="rtl"] .sound-blocked-note { left: auto; right: calc(var(--sidebar-width) + 16px); }
}

/* ==========================================================================
   ADMINISTRATION ON A COMPUTER (mouse or trackpad; phones and tablets have
   their own card layouts). Tidy button groups and no sideways scrolling.
   ========================================================================== */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  /* The two top cards share the row without pushing past the edge */
  .grid-2:has(#org-table) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .grid-2:has(#org-table) > * { min-width: 0; }
  /* Long service names and email addresses wrap instead of widening the table */
  #service-table td:nth-child(2) { overflow-wrap: anywhere; }
  /* Party Organizations: each name on its line with its Edit button at the end */
  #org-table td:first-child { min-width: 170px; width: 42%; }
  #org-table td:first-child > div:has(> .btn) { justify-content: space-between; }
  #org-table td:first-child > div:has(> .btn) > span { flex: 1 1 auto; min-width: 0; }
  #org-table .btn { flex: none; white-space: nowrap; }
  /* Logo column: every row the same - the logo in a fixed-size box on top,
     its Replace / Upload button underneath, always the same width */
  #org-table td:nth-child(2) > div { flex-direction: column; align-items: flex-start; gap: 8px; }
  #org-table td:nth-child(2) > div > :is(img, span) { width: 88px; height: 32px; object-fit: contain; object-position: left center; display: flex; align-items: center; }
  html[dir="rtl"] #org-table td:nth-child(2) > div > :is(img, span) { object-position: right center; }
  #org-table td:nth-child(2) .btn { min-width: 96px; justify-content: center; }
  /* All Accounts (shown as cards, below): every button always in the same
     place, all the same width - Edit | Reset Password, then Reset 2FA |
     Delete, then Re-enable. A button an account doesn't have leaves its
     place empty. */
  #user-table td:has(> button:is([data-edit-user], [data-enable-user], [data-reset-password], [data-reset-2fa], [data-delete-user])) {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    width: 300px; min-width: 300px; align-content: start;
  }
  #user-table td > button:is([data-edit-user], [data-enable-user], [data-reset-password], [data-reset-2fa], [data-delete-user]) { width: 100%; min-width: 0; margin: 0; justify-content: center; white-space: nowrap; }
  #user-table td > button[data-edit-user] { grid-area: 1 / 1; }
  #user-table td > button[data-reset-password] { grid-area: 1 / 2; }
  #user-table td > button[data-reset-2fa] { grid-area: 2 / 1; }
  #user-table td > button[data-delete-user] { grid-area: 2 / 2; }
  #user-table td > button[data-enable-user] { grid-area: 3 / 1; }
}
/* All Accounts: nine pieces of information plus the buttons don't fit a
   table row, so each account is a card ("label: value" lines), its buttons
   in the fixed places above. */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  #user-table, #user-table tbody, #user-table tr { display: block; width: 100%; }
  #user-table thead { display: none; }
  #user-table tbody tr { border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 10px; padding: 6px 14px; background: var(--color-surface); }
  #user-table tbody tr:hover { background: var(--color-surface); }
  #user-table td { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; align-items: start; justify-items: end; width: 100%;
    border-bottom: 1px dashed var(--color-border); padding: 7px 0; text-align: end; overflow-wrap: anywhere; }
  #user-table td > * { grid-column: 2; }
  #user-table td:last-child { border-bottom: none; }
  #user-table td::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 6; justify-self: start; text-align: start; overflow-wrap: normal;
    color: var(--color-text-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
  #user-table td[data-label=""]::before, #user-table td:not([data-label])::before { content: none; }
  html[dir="rtl"] #user-table td { text-align: start; }
  #user-table td:has(> button:is([data-edit-user], [data-enable-user], [data-reset-password], [data-reset-2fa], [data-delete-user])) { width: 100%; min-width: 0; max-width: 360px; padding-top: 10px; }
}
/* Two account cards per row from 1101px, three from 1800px */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  #user-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #user-table tbody tr { margin-bottom: 0; }
}
@media (min-width: 1800px) and (hover: hover) and (pointer: fine) {
  #user-table tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Up to 1365px: the two top cards one above the other */
@media (min-width: 761px) and (max-width: 1365px) and (hover: hover) and (pointer: fine) {
  .grid-2:has(#org-table) { grid-template-columns: minmax(0, 1fr); }
}
}

/* Very narrow desktop windows (761-900px, side menu showing): no table fits
   beside the menu, so tables show as cards, as on tablets. */
@media (min-width: 761px) and (max-width: 900px) and (hover: hover) and (pointer: fine) {
  table.data-table, table.data-table tbody, table.data-table tr, table.data-table td { display: block; width: 100%; }
  table.data-table thead { display: none; }
  table.data-table tbody tr {
    border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 10px; padding: 6px 12px;
    background: var(--color-surface);
  }
  table.data-table td, table.data-table.compact-table td {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    border-bottom: 1px dashed var(--color-border); padding: 7px 0; text-align: end; overflow-wrap: anywhere;
  }
  table.data-table td:last-child { border-bottom: none; }
  /* A cell holding several lines (e.g. service name + tags + a checkbox):
     label above, content below, full width. */
  table.data-table td:has(> div + *), table.data-table td:has(> label) {
    flex-direction: column; align-items: stretch; text-align: start; gap: 4px;
  }
  table.data-table td:has(> div + *)::before, table.data-table td:has(> label)::before { max-width: none; }
  table.data-table td:has(> div + *) > *, table.data-table td:has(> label) > * { text-align: start; }
  table.data-table td > input[type="number"], table.data-table td > input[type="text"] { max-width: 60%; font-size: 16px; }
  /* "text + button" lines inside a card (name + Edit, logo + Replace, ...):
     the text takes the room, every button lines up at the same edge with the
     same width and never wraps. */
  table.data-table td > div:has(> .btn) { display: flex; align-items: center; gap: 10px; width: 100%; }
  table.data-table td > div:has(> .btn) > :not(.btn) { flex: 1 1 auto; min-width: 0; }
  table.data-table td > div:has(> .btn) > .btn { flex: none; margin-inline-start: auto; }
  table.data-table td .btn { white-space: nowrap; min-width: 104px; justify-content: center; }
  /* A group of buttons in a card (Edit / Reset Password / Delete, Rename /
     Documents / Remove...): an even grid, two per row, all the same width;
     a single button takes the whole row. (!important: some cells carry an
     inline display style.) */
  table.data-table td:has(> .btn):not(:has(> :not(.btn))), table.data-table td .row-actions,
  table.data-table td > div:has(> .btn):not(:has(> :not(.btn))) {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; width: 100%;
  }
  table.data-table td:has(> .btn):not(:has(> :not(.btn)))::before { grid-column: 1 / -1; }
  table.data-table td:has(> .btn):not(:has(> :not(.btn))) > .btn, table.data-table td .row-actions > .btn,
  table.data-table td > div:has(> .btn):not(:has(> :not(.btn))) > .btn { width: 100%; min-width: 0; margin: 0; }
  table.data-table td::before {
    content: attr(data-label); flex: none; max-width: 45%; text-align: start; overflow-wrap: normal;
    color: var(--color-text-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  }
  table.data-table td[data-label=""]::before, table.data-table td:not([data-label])::before { content: none; }
  table.data-table td[data-label=""], table.data-table td:not([data-label]) { justify-content: flex-start; text-align: start; }
  html[dir="rtl"] table.data-table td, html[dir="rtl"] table.data-table th { text-align: start; }
  table.data-table th.select-col, table.data-table td.select-col { width: 100%; }

}

/* Up to 1100px: the services table's six columns don't fit beside the side
   menu, so each service is a card, as on tablets. */
@media (min-width: 761px) and (max-width: 1100px) and (hover: hover) and (pointer: fine) {
  #service-table, #service-table tbody, #service-table tr, #service-table td { display: block; width: 100%; }
  #service-table thead { display: none; }
  #service-table tbody tr {
    border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 10px; padding: 6px 12px;
    background: var(--color-surface);
  }
  #service-table td, #service-table td {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    border-bottom: 1px dashed var(--color-border); padding: 7px 0; text-align: end; overflow-wrap: anywhere;
  }
  #service-table td:last-child { border-bottom: none; }
  /* A cell holding several lines (e.g. service name + tags + a checkbox):
     label above, content below, full width. */
  #service-table td:has(> div + *), #service-table td:has(> label) {
    flex-direction: column; align-items: stretch; text-align: start; gap: 4px;
  }
  #service-table td:has(> div + *)::before, #service-table td:has(> label)::before { max-width: none; }
  #service-table td:has(> div + *) > *, #service-table td:has(> label) > * { text-align: start; }
  #service-table td > input[type="number"], #service-table td > input[type="text"] { max-width: 60%; font-size: 16px; }
  /* "text + button" lines inside a card (name + Edit, logo + Replace, ...):
     the text takes the room, every button lines up at the same edge with the
     same width and never wraps. */
  #service-table td > div:has(> .btn) { display: flex; align-items: center; gap: 10px; width: 100%; }
  #service-table td > div:has(> .btn) > :not(.btn) { flex: 1 1 auto; min-width: 0; }
  #service-table td > div:has(> .btn) > .btn { flex: none; margin-inline-start: auto; }
  #service-table td .btn { white-space: nowrap; min-width: 104px; justify-content: center; }
  /* A group of buttons in a card (Edit / Reset Password / Delete, Rename /
     Documents / Remove...): an even grid, two per row, all the same width;
     a single button takes the whole row. (!important: some cells carry an
     inline display style.) */
  #service-table td:has(> .btn):not(:has(> :not(.btn))), #service-table td .row-actions,
  #service-table td > div:has(> .btn):not(:has(> :not(.btn))) {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; width: 100%;
  }
  #service-table td:has(> .btn):not(:has(> :not(.btn)))::before { grid-column: 1 / -1; }
  #service-table td:has(> .btn):not(:has(> :not(.btn))) > .btn, #service-table td .row-actions > .btn,
  #service-table td > div:has(> .btn):not(:has(> :not(.btn))) > .btn { width: 100%; min-width: 0; margin: 0; }
  #service-table td::before {
    content: attr(data-label); flex: none; max-width: 45%; text-align: start; overflow-wrap: normal;
    color: var(--color-text-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  }
  #service-table td[data-label=""]::before, #service-table td:not([data-label])::before { content: none; }
  #service-table td[data-label=""], #service-table td:not([data-label]) { justify-content: flex-start; text-align: start; }
  html[dir="rtl"] #service-table td, html[dir="rtl"] #service-table th { text-align: start; }
  #service-table th.select-col, #service-table td.select-col { width: 100%; }

}