/* ============================================================================
   RadAgent UI — shared design system (one stylesheet for every role surface)
   Tokens → shell → page scaffolding → components → responsive.
   Class names used by the dashboard's DECTROCEL dark overrides (.card, table,
   .filter-bar, .section-hdr, .count, .pt-name, .btn-view, .btn-review …) are
   kept stable so the tenant theme keeps working on top of this file.
   ========================================================================== */

:root {
  --navy:#0F1B2D; --navy-2:#162540; --ink:#1B2333;
  --soft:rgba(15,27,45,.58); --muted:#8792A3; --faint:#B4BCC9;
  --teal:#14B8A6; --teal-dark:#0D9488; --teal-soft:rgba(20,184,166,.10);
  --orange:#C2410C; --orange-soft:rgba(194,65,12,.08);
  --red:#DC2626; --red-soft:#FEF2F2; --amber:#B45309; --amber-soft:#FFFBEB;
  --blue:#2563EB; --blue-soft:#EFF6FF; --green:#15803D; --green-soft:#F0FDF4;
  --bg:#F6F7FA; --surface:#FFFFFF; --line:#E6E9F0; --line-2:#EEF1F6;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
  --sh-md:0 4px 14px rgba(16,24,40,.08), 0 1px 3px rgba(16,24,40,.05);
  --sh-lg:0 12px 32px rgba(16,24,40,.14);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Playfair Display',Georgia,serif;
  --mono:'IBM Plex Mono','JetBrains Mono',ui-monospace,Menlo,monospace;
  --fs-xs:7.5pt; --fs-sm:8.5pt; --fs-md:9.5pt; --fs-lg:11pt;
  --top-h:56px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--ink); font-size:var(--fs-md);
       line-height:1.45; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; }
a { color:inherit; }
button, input, select, textarea { font-family:inherit; font-size:inherit; color:inherit; }
::selection { background:rgba(20,184,166,.22); }
:focus-visible { outline:2px solid var(--teal); outline-offset:2px; border-radius:4px; }
img { max-width:100%; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.soft { color:var(--soft); } .muted { color:var(--muted); }
.nowrap { white-space:nowrap; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.hide-sm { }  /* hidden under 640px, see responsive block */

/* ── App shell ─────────────────────────────────────────────────────────── */
.app-top { position:sticky; top:0; z-index:500; height:var(--top-h); background:var(--navy); color:#fff;
           display:flex; align-items:center; gap:18px; padding:0 24px; box-shadow:0 1px 0 rgba(255,255,255,.06), 0 2px 12px rgba(9,15,28,.25); }
.app-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; flex-shrink:0; }
.app-brand img { height:36px; width:auto; display:block; }
.app-brand .wordmark { font-family:var(--serif); font-size:15pt; font-weight:700; letter-spacing:.005em; }
.app-brand .wordmark span { color:var(--teal); }
.app-brand .tenant { font-size:7pt; letter-spacing:.18em; text-transform:uppercase; color:#8A9FCC; font-weight:600; margin-left:4px; }
.app-nav { display:flex; align-items:center; gap:2px; height:100%; margin-left:8px; }
.app-nav a { display:inline-flex; align-items:center; gap:7px; height:var(--top-h); padding:0 13px; font-size:var(--fs-sm); font-weight:600;
             color:#A8B5CC; text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; letter-spacing:.01em; transition:color .15s; white-space:nowrap; }
.app-nav a:hover { color:#fff; }
.app-nav a.active { color:#fff; border-bottom-color:var(--teal); }
.app-nav .nav-count { font-family:var(--mono); font-size:7pt; background:rgba(255,255,255,.10); color:#E2E8F0; padding:1px 7px; border-radius:var(--r-pill); }
.app-nav a.active .nav-count { background:rgba(20,184,166,.22); color:#99F6E4; }
.app-spacer { flex:1; }
.app-clock { font-family:var(--mono); font-size:8pt; color:#C7D2E5; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
             padding:5px 11px; border-radius:var(--r-pill); white-space:nowrap; }
/* user menu */
.user-menu { position:relative; }
.user-badge { display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
              border-radius:var(--r-pill); padding:4px 10px 4px 4px; cursor:pointer; color:#fff; transition:background .15s, border-color .15s; }
.user-badge:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); }
.user-avatar { width:28px; height:28px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center;
               font-weight:700; font-size:9.5pt; flex-shrink:0; }
.user-badge-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; }
.user-badge-name { font-size:8.5pt; font-weight:700; color:#fff; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-badge-role { font-size:6.5pt; color:#93A4C9; text-transform:uppercase; letter-spacing:.08em; }
.user-caret { font-size:7pt; color:#7C8DB3; margin-left:2px; transition:transform .15s; }
.user-menu.open .user-caret { transform:rotate(180deg); }
.user-dropdown { display:none; position:absolute; right:0; top:calc(100% + 10px); min-width:230px; background:var(--surface); color:var(--ink);
                 border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-lg); z-index:999; overflow:hidden; padding:6px; }
.user-menu.open .user-dropdown { display:block; }
.user-dd-head { padding:8px 10px 10px; border-bottom:1px solid var(--line-2); margin-bottom:4px; }
.user-dd-head b { display:block; font-size:9pt; }
.user-dd-head small { display:block; font-size:7.5pt; color:var(--muted); margin-top:2px; }
.user-dd-item { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:var(--r-sm); font-size:8.5pt; font-weight:600;
                color:var(--ink); text-decoration:none; transition:background .12s; }
.user-dd-item:hover { background:var(--bg); }
.user-dd-icon { width:16px; text-align:center; opacity:.75; flex-shrink:0; }
.user-dd-sep { height:1px; background:var(--line-2); margin:6px 4px; }
.user-dd-logout { color:var(--red); }
.user-dd-logout:hover { background:var(--red-soft); }
/* mobile nav toggle */
.nav-toggle { display:none; background:none; border:1px solid rgba(255,255,255,.14); color:#fff; border-radius:var(--r-sm); width:36px; height:36px;
              align-items:center; justify-content:center; cursor:pointer; font-size:14pt; line-height:1; }

/* ── Page scaffolding ──────────────────────────────────────────────────── */
.page { max-width:1280px; margin:0 auto; padding:28px 24px 64px; }
.page--narrow { max-width:720px; }
.page--form { max-width:560px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.page-eyebrow { font-family:var(--mono); font-size:7pt; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--teal); margin-bottom:6px; }
.page-title { font-family:var(--serif); font-size:24pt; font-weight:700; color:var(--navy); line-height:1.1; letter-spacing:-.005em; }
.page-sub { font-size:var(--fs-md); color:var(--soft); margin-top:6px; }
.page-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.section-hdr { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:26px 0 12px; }
.section-hdr:first-child { margin-top:0; }
.section-hdr h2 { font-size:10.5pt; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.06em; }
.section-hdr h2.warn { color:var(--orange); }
.section-hdr .spacer { flex:1; }
.count { background:var(--teal); color:#fff; font-size:7.5pt; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); font-family:var(--mono); }
.count.zero { background:#D5DAE3; color:#5A6376; }
.count.warn { background:var(--orange-soft); color:var(--orange); border:1px solid rgba(194,65,12,.3); }
.visible-count { font-size:8pt; color:var(--muted); }
.hint { font-size:var(--fs-sm); color:var(--soft); }

/* stat tiles */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:22px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px 14px; box-shadow:var(--sh-sm);
        text-decoration:none; color:inherit; display:block; transition:transform .15s, box-shadow .15s, border-color .15s; position:relative; }
a.stat:hover { transform:translateY(-2px); box-shadow:var(--sh-md); border-color:#D3D9E4; }
.stat .sv { font-size:22pt; font-weight:800; color:var(--navy); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.stat .sl { font-size:7.5pt; color:var(--muted); margin-top:8px; text-transform:uppercase; letter-spacing:.12em; font-weight:600; }
.stat .sd { font-size:8pt; color:var(--soft); margin-top:4px; }
.stat.warn { border-color:rgba(194,65,12,.35); background:linear-gradient(180deg,#fff,#FFF8F4); }
.stat.warn .sv { color:var(--orange); }
.stat.good .sv { color:var(--teal-dark); }
.stat.accent { background:var(--navy); border-color:var(--navy); }
.stat.accent .sv { color:#fff; } .stat.accent .sl { color:#93A4C9; } .stat.accent .sd { color:#A8B5CC; }

/* cards */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-sm); margin-bottom:24px; overflow:hidden; }
.card-pad { padding:18px 20px; }
.card-hd { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line-2); }
.card-hd h3 { font-size:9.5pt; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.06em; }
.card-ft { padding:12px 18px; border-top:1px solid var(--line-2); background:#FBFCFE; font-size:var(--fs-sm); color:var(--soft); }

/* tables */
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; }
thead tr { background:#F8F9FC; }
thead th { padding:11px 14px; font-size:7.5pt; font-weight:700; text-align:left; letter-spacing:.08em; text-transform:uppercase; color:#5B6478;
           white-space:nowrap; border-bottom:1px solid var(--line); user-select:none; }
thead th.sortable { cursor:pointer; } thead th.sortable:hover { background:#EFF2F8; }
tbody tr { border-bottom:1px solid var(--line-2); transition:background .12s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:#F7F9FD; }
/* row colour coding — urgent (red) > failed (rose) > AI warnings (amber) > overdue (orange), each with a left bar */
tbody tr.row-urgent  { background:#FEF2F2; box-shadow:inset 3px 0 0 var(--red); }    tbody tr.row-urgent:hover  { background:#FEE2E2; }
tbody tr.row-failed  { background:#FFF1F2; box-shadow:inset 3px 0 0 #BE123C; }        tbody tr.row-failed:hover  { background:#FFE4E6; }
tbody tr.row-warning { background:#FFFBEB; box-shadow:inset 3px 0 0 #F59E0B; }        tbody tr.row-warning:hover { background:#FEF3C7; }
tbody tr.row-stale   { background:#FFF7ED; box-shadow:inset 3px 0 0 var(--orange); }  tbody tr.row-stale:hover   { background:#FFEDD5; }
.row-legend { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:7pt; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.row-legend span { display:inline-flex; align-items:center; gap:5px; }
.row-legend i { width:10px; height:10px; border-radius:2px; border-left:3px solid; display:inline-block; }
.row-legend .lg-urgent i { background:#FEE2E2; border-color:var(--red); } .row-legend .lg-failed i { background:#FFE4E6; border-color:#BE123C; }
.row-legend .lg-warning i { background:#FEF3C7; border-color:#F59E0B; } .row-legend .lg-stale i { background:#FFEDD5; border-color:var(--orange); }
tbody td { padding:11px 14px; font-size:var(--fs-sm); vertical-align:middle; }
td.td-actions { white-space:nowrap; text-align:right; }
td.td-actions .btn + .btn, td.td-actions form + .btn, td.td-actions .btn + form { margin-left:4px; }
.pt-name { font-weight:700; font-size:9.5pt; color:var(--navy); display:block; }
.pt-id { font-size:7.5pt; color:var(--muted); font-family:var(--mono); }
.pt-meta { font-size:7.5pt; color:var(--muted); margin-top:2px; }
.td-soft { color:var(--muted); }
.td-mono { font-family:var(--mono); font-size:8pt; color:var(--soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.empty { padding:40px 22px; text-align:center; color:var(--muted); font-size:var(--fs-md); }
.empty b { display:block; color:var(--ink); font-size:11pt; margin-bottom:4px; font-family:var(--serif); font-weight:700; }
.elapsed { font-size:8pt; color:var(--muted); white-space:nowrap; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.elapsed-warn   { color:var(--amber) !important; }
.elapsed-danger { color:var(--red) !important; font-weight:700; }

/* badges + status chips */
.badge { display:inline-block; padding:3px 9px; border-radius:var(--r-pill); font-size:7pt; font-weight:700; letter-spacing:.04em; white-space:nowrap; }
.b-urgent   { background:var(--red); color:#fff; }
.b-critical { background:#7F1D1D; color:#fff; }
.b-warnings { background:#FFF3E0; color:#C85A00; border:1px solid #F0A030; }
.b-failed   { background:#F8D7DA; color:#721C24; border:1px solid #F5C6CB; }
.b-passed   { background:#D4EDDA; color:#155724; border:1px solid #C3E6CB; }
.b-skipped  { background:#EEF2F7; color:#667085; border:1px solid #D0D8E8; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-pill); font-size:7.5pt; font-weight:700;
        letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; border:1px solid transparent; }
.chip::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; }
.chip-ready  { background:var(--teal-soft); color:var(--teal-dark); border-color:rgba(13,148,136,.25); }
.chip-review { background:var(--blue-soft); color:var(--blue); border-color:#BFDBFE; }
.chip-wait   { background:var(--amber-soft); color:var(--amber); border-color:#FDE68A; }
.chip-proc   { background:#F1F4F9; color:#4B5563; border-color:#D9DEE8; }
.chip-proc::before { animation:pulse 1.4s ease-in-out infinite; }
.chip-fail   { background:var(--red-soft); color:var(--red); border-color:#FECACA; }
.chip-muted  { background:#F1F4F9; color:var(--muted); border-color:#E1E6EE; }
.chip-crit   { background:var(--orange-soft); color:var(--orange); border-color:rgba(194,65,12,.35); }
.chip-critical, .chip-pending-critical { background:var(--orange-soft); color:var(--orange); border:1px solid rgba(194,65,12,.35); border-radius:var(--r-pill);
   font-size:7pt; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:3px 9px; display:inline-block; }
.chip-in-progress { color:var(--navy); border:1px solid var(--navy); } .chip-under-review { color:var(--teal); border:1px solid var(--teal); }
.chip-awaiting-review { color:#0369A1; border:1px solid #0284C7; }
.chip-in-progress, .chip-under-review, .chip-awaiting-review { font-size:7pt; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:3px 9px; border-radius:var(--r-pill); display:inline-block; }
@keyframes pulse { 0%,100% { opacity:.35; } 50% { opacity:1; } }
.tip { position:relative; cursor:help; }
.tip[data-tooltip]:hover::after { content:attr(data-tooltip); position:absolute; left:0; top:calc(100% + 6px); background:var(--navy); color:#fff;
   font-size:7.5pt; font-weight:500; letter-spacing:0; text-transform:none; padding:6px 10px; border-radius:6px; white-space:nowrap; z-index:50; box-shadow:var(--sh-md); }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 14px; border-radius:var(--r-sm); font-size:8pt; font-weight:700;
       text-decoration:none; cursor:pointer; border:1px solid transparent; white-space:nowrap; line-height:1.2; letter-spacing:.02em;
       transition:background .15s, transform .1s, box-shadow .15s, border-color .15s; }
.btn:active { transform:translateY(1px); }
.btn:disabled, .btn.disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn-primary, .btn-review, .btn-upload-image { background:var(--teal); color:#fff; }
.btn-primary:hover, .btn-review:hover, .btn-upload-image:hover { background:var(--teal-dark); box-shadow:var(--sh-sm); }
.btn-navy, .btn-view { background:var(--navy); color:#fff; }
.btn-navy:hover, .btn-view:hover { background:var(--navy-2); box-shadow:var(--sh-sm); }
.btn-secondary { background:var(--surface); color:var(--navy); border-color:#CBD2DE; }
.btn-secondary:hover { border-color:var(--navy); background:#FBFCFE; }
.btn-ghost { background:transparent; color:var(--navy); border-color:transparent; }
.btn-ghost:hover { background:#EEF1F6; }
.btn-danger, .btn-clear { background:var(--surface); color:var(--red); border-color:#F3C6C6; }
.btn-danger:hover, .btn-clear:hover { background:var(--red-soft); border-color:var(--red); }
.btn-warn { background:transparent; color:var(--orange); border-color:rgba(194,65,12,.5); }
.btn-warn:hover { background:var(--orange-soft); }
.btn-pdf { background:#0E7490; color:#fff; } .btn-pdf:hover { background:#0891B2; }
.btn-sm { padding:5px 10px; font-size:7.5pt; }
.btn-lg { padding:11px 20px; font-size:9.5pt; border-radius:10px; }
.btn-icon { padding:6px 8px; min-width:30px; }
.btn-block { width:100%; }
.btn .ico { width:14px; height:14px; flex-shrink:0; }
.link { color:var(--teal-dark); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; }
.link:hover { border-bottom-color:currentColor; }
.link-caps { font-size:7.5pt; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--navy); text-decoration:none; }
.link-caps:hover { color:var(--teal-dark); }

/* filters */
.filter-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; background:var(--surface); border:1px solid var(--line);
              border-radius:var(--r-md); padding:10px 12px; box-shadow:var(--sh-sm); }
.filter-bar .search { flex:1; min-width:220px; position:relative; }
.filter-bar .search svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--muted); pointer-events:none; }
.filter-bar input[type=text], .filter-bar input[type=search] { width:100%; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:8px 12px 8px 32px;
   font-size:var(--fs-sm); background:#FBFCFE; transition:border-color .15s, background .15s; }
.filter-bar input:focus { outline:none; border-color:var(--teal); background:#fff; }
.filter-bar select { border:1.5px solid var(--line); border-radius:var(--r-sm); padding:8px 30px 8px 10px; font-size:var(--fs-sm); background:#FBFCFE; cursor:pointer;
   color:var(--ink); appearance:none; -webkit-appearance:none;
   background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238792A3' stroke-width='1.6' stroke-linecap='round'/></svg>");
   background-repeat:no-repeat; background-position:right 10px center; }
.filter-bar select:focus { outline:none; border-color:var(--teal); background-color:#fff; }
.sort-label { font-size:8pt; color:var(--muted); }
.seg { display:inline-flex; gap:4px; flex-wrap:wrap; }
.seg .pill { font-size:7.5pt; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 13px; border:1.5px solid var(--line); border-radius:var(--r-pill);
   cursor:pointer; background:var(--surface); color:var(--soft); transition:all .15s; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.seg .pill:hover { border-color:var(--navy); color:var(--navy); }
.seg .pill.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.seg .pill.active.urgent { background:var(--orange); border-color:var(--orange); }
.seg .pill .n { font-family:var(--mono); font-size:7pt; opacity:.75; }

/* tabs */
.tabs { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 20px; border-bottom:1px solid var(--line); overflow-x:auto; }
.tab { display:inline-flex; align-items:center; gap:8px; font-size:8pt; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#8892A0;
       text-decoration:none; padding:10px 14px; border-radius:var(--r-sm) var(--r-sm) 0 0; border-bottom:2px solid transparent; margin-bottom:-1px;
       white-space:nowrap; transition:color .15s, border-color .15s, background .15s; background:none; cursor:pointer; }
.tab:hover { color:var(--navy); background:#F1F4F9; }
.tab.active { color:var(--teal-dark); border-bottom-color:var(--teal); background:var(--teal-soft); }
.tab .tab-count, .view-tab-count { background:#EEF2F7; color:#667085; font-size:7.5pt; font-weight:700; padding:1px 8px; border-radius:var(--r-pill); font-family:var(--mono); }
.tab.active .tab-count { background:rgba(20,184,166,.16); color:var(--teal-dark); }

/* pagination */
.pager { display:flex; align-items:center; justify-content:center; gap:10px; margin:-8px 0 28px; font-size:8pt; color:var(--muted); }
.pager a, .pager button { background:var(--surface); border:1px solid var(--line); color:var(--navy); padding:6px 12px; border-radius:var(--r-sm); font-size:8pt;
   font-weight:700; cursor:pointer; text-decoration:none; }
.pager a:hover, .pager button:hover { border-color:var(--navy); }
.pager .disabled, .pager button:disabled { opacity:.35; pointer-events:none; }
.pg-controls { display:none; } .pg-controls.active { display:flex; align-items:center; justify-content:center; gap:10px; margin:-8px 0 28px; font-size:8pt; color:var(--muted); }
.pg-controls .pg-btn, .pg-controls .pg-link { background:var(--surface); border:1px solid var(--line); color:var(--navy); padding:6px 12px; border-radius:var(--r-sm);
   font-size:8pt; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; }
.pg-controls .pg-btn:disabled, .pg-controls .pg-link.disabled { opacity:.35; cursor:not-allowed; pointer-events:none; }

/* flash + toast */
.flash-messages { margin-bottom:18px; }
.flash { padding:12px 16px; border-radius:var(--r-sm); margin-bottom:8px; font-size:var(--fs-md); font-weight:600; box-shadow:var(--sh-sm);
         animation:flash-in .2s ease-out; border-left:4px solid transparent; }
@keyframes flash-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.flash-success { background:#ECFDF5; color:#065F46; border-left-color:var(--teal); }
.flash-error   { background:#FEF2F2; color:#991B1B; border-left-color:var(--red); }
.flash-warning { background:#FFFBEB; color:#92400E; border-left-color:#F59E0B; }
.flash-info    { background:var(--blue-soft); color:#1E40AF; border-left-color:var(--blue); }
.banner { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:12px 16px; margin-bottom:18px; border-left:3px solid var(--orange);
          background:var(--orange-soft); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.banner .label { font-size:7pt; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--orange); }
.banner .text { font-family:var(--mono); font-size:9.5pt; color:var(--navy); }
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(12px); background:var(--navy); color:#fff; padding:10px 18px;
         border-radius:var(--r-pill); font-size:8.5pt; font-weight:600; box-shadow:var(--sh-lg); opacity:0; pointer-events:none; transition:all .2s; z-index:9999; }
.toast.show { opacity:1; transform:translateX(-50%); }

/* forms */
.field { margin-bottom:16px; }
.field label, .lbl { display:block; font-size:7.5pt; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin-bottom:6px; }
.field input, .field select, .field textarea, .input {
  width:100%; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:9px 12px; font-size:var(--fs-md); background:#FBFCFE; transition:border-color .15s, background .15s; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 3px rgba(20,184,166,.12); }
.field .help { font-size:7.5pt; color:var(--muted); margin-top:5px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 16px; }
.form-actions { display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap:wrap; }

/* key/value */
.kv { display:grid; grid-template-columns:max-content 1fr; gap:10px 20px; align-items:baseline; }
.kv .k { font-size:7pt; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.kv .v { font-size:var(--fs-md); color:var(--ink); }

/* hover preview popup (dashboard) */
#preview-popup { display:none; position:fixed; z-index:9000; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
                 box-shadow:var(--sh-lg); padding:12px 14px; max-width:310px; pointer-events:none; }
#preview-popup .pp-title { font-size:8pt; font-weight:700; color:var(--navy); border-bottom:1px solid var(--line-2); padding-bottom:6px; margin-bottom:8px; display:flex; justify-content:space-between; gap:10px; }
#preview-popup .pp-conf { font-family:var(--mono); color:var(--muted); font-weight:500; }
#preview-popup .pp-finding { font-size:7.5pt; margin-bottom:5px; line-height:1.4; }
#preview-popup .pf-status { font-weight:700; }
#preview-popup .pf-struct { font-weight:600; color:var(--navy); }
#preview-popup .pf-text { color:var(--soft); }
#preview-popup .pp-empty { color:var(--muted); font-style:italic; font-size:7.5pt; }

/* modality picker (upload launcher) */
.modality-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.modality { display:flex; flex-direction:column; gap:4px; padding:14px 14px 12px; border:1.5px solid var(--line); border-radius:var(--r-md); background:var(--surface);
            text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s, box-shadow .15s; }
.modality:hover { border-color:var(--teal); transform:translateY(-2px); box-shadow:var(--sh-md); }
.modality .m-code { font-family:var(--mono); font-size:7pt; letter-spacing:.2em; color:var(--teal-dark); font-weight:600; }
.modality .m-name { font-weight:700; font-size:10pt; color:var(--navy); }
.modality .m-hint { font-size:7.5pt; color:var(--muted); }

/* generic modal */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(9,15,28,.55); z-index:9000; align-items:center; justify-content:center; padding:16px; }
.modal-overlay.open { display:flex; }
.modal { background:var(--surface); border-radius:var(--r-lg); width:min(520px,100%); max-height:86vh; overflow-y:auto; padding:26px 26px 22px; box-shadow:var(--sh-lg); }
.modal h3 { font-family:var(--serif); font-size:15pt; color:var(--navy); margin-bottom:4px; }
.modal .modal-sub { font-size:8pt; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px; }
.modal-actions { display:flex; gap:10px; margin-top:8px; }

/* misc */
.hospital-chips { display:flex; flex-wrap:wrap; gap:6px; }
.hospital-chips a, .hospital-chips span { display:inline-flex; align-items:center; gap:8px; background:var(--blue-soft); border:1px solid #BFDBFE; border-radius:var(--r-sm);
   padding:5px 12px; font-size:8pt; text-decoration:none; color:var(--ink); }
.hospital-chips b { font-weight:700; } .hospital-chips .n { font-family:var(--mono); color:var(--blue); }
.hospital-chips a:hover { border-color:var(--blue); }
.divider { border:none; border-top:1px solid var(--line); margin:22px 0; }
.big-num { font-family:var(--mono); font-size:20pt; font-weight:600; color:var(--navy); }
.success-mark { width:64px; height:64px; border-radius:50%; background:var(--teal-soft); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; font-size:26pt; margin:0 auto 18px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1024px) {
  .page { padding:22px 16px 56px; }
  .app-top { padding:0 16px; gap:10px; }
  .app-nav a { padding:0 10px; }
  .app-clock { display:none; }
}
@media (max-width:760px) {
  .app-top { flex-wrap:wrap; height:auto; min-height:var(--top-h); padding:8px 12px; }
  .nav-toggle { display:inline-flex; order:3; }
  .app-brand { order:1; } .app-spacer { order:2; } .user-menu { order:4; }
  .app-nav { order:5; display:none; width:100%; flex-direction:column; align-items:stretch; height:auto; margin:6px 0 4px; gap:0; }
  .app-nav.open { display:flex; }
  .app-nav a { height:auto; padding:11px 8px; border-bottom:1px solid rgba(255,255,255,.06); border-left:2px solid transparent; margin:0; }
  .app-nav a.active { border-bottom-color:rgba(255,255,255,.06); border-left-color:var(--teal); }
  .user-badge { padding:3px; gap:0; border-radius:50%; } .user-badge-text, .user-caret { display:none; }
  .user-avatar { width:32px; height:32px; } .user-dropdown { right:-4px; }
  .page-title { font-size:19pt; }
  .stat-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .stat { padding:12px 13px 11px; } .stat .sv { font-size:17pt; }
  .filter-bar { padding:8px; gap:6px; } .filter-bar select { flex:1; min-width:120px; }
  .section-hdr h2 { font-size:9pt; }
  .hide-sm { display:none !important; }
  /* plain tables on legacy pages scroll inside themselves instead of the page */
  table { display:block; overflow-x:auto; max-width:100%; }
  .card.responsive table { overflow:visible; }
  /* table → stacked cards */
  .card.responsive { background:transparent; box-shadow:none; border:none; overflow:visible; }
  .card.responsive .tbl-wrap { overflow:visible; }
  .card.responsive table, .card.responsive tbody { display:block; width:100%; }
  .card.responsive thead { display:none; }
  .card.responsive tbody tr { display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin-bottom:10px; box-shadow:var(--sh-sm); }
  .card.responsive tbody tr.row-urgent  { background:#FEF2F2; border-left:3px solid var(--red); box-shadow:var(--sh-sm); }
  .card.responsive tbody tr.row-failed  { background:#FFF1F2; border-left:3px solid #BE123C; box-shadow:var(--sh-sm); }
  .card.responsive tbody tr.row-warning { background:#FFFBEB; border-left:3px solid #F59E0B; box-shadow:var(--sh-sm); }
  .card.responsive tbody tr.row-stale   { background:#FFF7ED; border-left:3px solid var(--orange); box-shadow:var(--sh-sm); }
  .card.responsive tbody td { display:inline-flex; align-items:center; gap:6px; padding:2px 10px 2px 0; font-size:8pt; border:none; }
  .card.responsive tbody td[data-label]::before { content:attr(data-label); font-size:6.5pt; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; }
  .card.responsive tbody td.td-primary { display:block; width:100%; padding:0 0 8px; margin-bottom:6px; border-bottom:1px solid var(--line-2); }
  .card.responsive tbody td.td-primary::before { display:none; }
  .card.responsive tbody td.td-actions { display:flex; width:100%; gap:6px; flex-wrap:wrap; padding:8px 0 0; margin-top:6px; border-top:1px solid var(--line-2); text-align:left; }
  .card.responsive tbody td.td-actions .btn { flex:1 1 auto; }
  .card.responsive tbody td.td-actions .btn + .btn, .card.responsive tbody td.td-actions form + .btn { margin-left:0; }
  .card.responsive .empty { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); }
  .modality-grid { grid-template-columns:repeat(2,1fr); }
  .study-cell { display:inline-flex; align-items:baseline; gap:6px; } .study-cell .s2 { margin-top:0; }
}
@media print { .app-top, .filter-bar, .page-actions, .tabs, .pager, .pg-controls { display:none !important; } body { background:#fff; } }

/* legacy tokens still referenced by older templates */
:root { --hairline:#E2E8F0; --card-bg:#FFFFFF; }

/* ── Record workspace (admin edit pages): header + two columns that scroll internally on desktop ── */

.hw { max-width:1440px; margin:0 auto; padding:18px 24px 24px; display:flex; flex-direction:column; gap:16px; }
.hw-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hw-head .back { font-size:8pt; font-weight:700; color:var(--muted); text-decoration:none; white-space:nowrap; }
.hw-head .back:hover { color:var(--navy); }
.hw-title { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; min-width:0; }
.hw-title h1 { font-family:var(--serif); font-size:20pt; color:var(--navy); line-height:1.1; }
.hw-chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.hw-chips .slug { font-family:var(--mono); font-size:7.5pt; color:var(--muted); background:#EEF1F6; padding:3px 8px; border-radius:6px; }
.hw-actions { margin-left:auto; display:flex; align-items:center; gap:10px; }
.hw-actions .saved { font-size:7.5pt; color:var(--muted); }
.hw-grid { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:18px; align-items:start; }
.hw-grid.single { grid-template-columns:minmax(0,760px); justify-content:center; }
.hw-main, .hw-side { display:flex; flex-direction:column; gap:14px; min-width:0; }

/* panels (collapsible) */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-sm); }
.panel > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:12px 16px; user-select:none; }
.panel > summary::-webkit-details-marker { display:none; }
.panel > summary .caret { width:18px; height:18px; border-radius:50%; background:#EEF1F6; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; font-size:8pt; transition:transform .15s; flex-shrink:0; }
.panel[open] > summary .caret { transform:rotate(90deg); background:var(--teal-soft); color:var(--teal-dark); }
.panel > summary h3 { font-size:9.5pt; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.06em; }
.panel > summary .sum { font-size:8pt; color:var(--muted); margin-left:auto; text-align:right; }
.panel[open] > summary { border-bottom:1px solid var(--line-2); }
.panel-body { padding:14px 16px 16px; }
.panel.danger { border-color:rgba(194,65,12,.35); }
.panel.danger > summary h3 { color:var(--orange); }

/* dense field grid */
.fg { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.fg .span2 { grid-column:1 / -1; }
.fg .field { margin-bottom:12px; }
.field label small { font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); margin-left:6px; }
.fg-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 12px; }
.switch { display:flex; align-items:center; gap:10px; font-size:var(--fs-sm); font-weight:600; color:var(--ink); cursor:pointer; }
.switch input { width:16px; height:16px; accent-color:var(--teal); }

/* billing summary */
.bal { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.bal .n { font-family:var(--mono); font-size:22pt; font-weight:600; color:var(--navy); line-height:1; }
.bal .n.alert { color:var(--orange); }
.bal .l { font-size:7pt; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:6px; }
.kv-mini { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin-top:12px; font-size:8pt; }
.kv-mini .k { color:var(--muted); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:6.5pt; align-self:center; }
.kv-mini .v { font-family:var(--mono); color:var(--ink); }
.chip-status.on { background:var(--teal-soft); color:var(--teal-dark); border:1px solid rgba(13,148,136,.3); }
.chip-status.off { background:var(--orange-soft); color:var(--orange); border:1px solid rgba(194,65,12,.3); }
.chip-status.arch { background:#EEF1F6; color:var(--muted); border:1px solid var(--line); }
.bill-actions { display:flex; gap:8px; margin-top:14px; }
.inline-form { display:none; margin-top:12px; padding:12px; background:#FBFCFE; border:1px dashed var(--line); border-radius:var(--r-sm); }
.inline-form .field { margin-bottom:10px; }
.inline-form .radio-row { display:flex; gap:16px; font-size:8.5pt; padding:6px 0; }
.inline-form .radio-row label { display:flex; align-items:center; gap:5px; cursor:pointer; font-weight:600; }
.if-btns { display:flex; align-items:center; gap:10px; margin-top:6px; }

/* ledger */
.ledger { max-height:320px; overflow-y:auto; margin:-4px -16px -16px; }
.ledger table { border-collapse:collapse; width:100%; }
.ledger td { padding:8px 10px; font-size:8pt; border-bottom:1px solid var(--line-2); vertical-align:top; }
.ledger td:first-child { padding-left:16px; } .ledger td:last-child { padding-right:16px; }
.ledger tr:last-child td { border-bottom:none; }
.ledger .when { font-family:var(--mono); font-size:7pt; color:var(--muted); white-space:nowrap; }
.ledger .kind { font-weight:600; color:var(--ink); text-transform:capitalize; }
.ledger .why { color:var(--soft); font-size:7.5pt; }
.ledger .amt { font-family:var(--mono); text-align:right; white-space:nowrap; font-weight:600; }
.amt-neg { color:var(--orange); } .amt-pos { color:var(--teal-dark); }
.arch-banner { border-left:3px solid var(--orange); background:var(--orange-soft); padding:10px 14px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:var(--fs-sm); display:flex; gap:10px; align-items:baseline; }
.arch-banner b { font-size:7pt; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); }
.side-note { font-size:7.5pt; color:var(--muted); margin-top:10px; }

/* ── Desktop: lock the page, scroll inside columns ── */
@media (min-width:1100px) {
  body.hosp-edit { height:100vh; overflow:hidden; }
  .hw { height:calc(100vh - var(--top-h)); }
  .hw-grid { flex:1; min-height:0; }
  .hw-main, .hw-side { height:100%; overflow-y:auto; padding-right:2px; scrollbar-width:thin; }
  .hw-main { padding-bottom:16px; } .hw-side { padding-bottom:16px; }
}
/* ── Narrow: single column, page scrolls normally ── */
@media (max-width:1099px) {
  .hw-grid { grid-template-columns:1fr; }
  .hw { padding:14px 14px 40px; }
  .hw-actions { width:100%; margin-left:0; }
  .hw-actions .btn { flex:1; }
  .fg-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) { .fg { grid-template-columns:1fr; } .fg-4 { grid-template-columns:1fr; } .hw-title h1 { font-size:16pt; } }
.chip-prepaid, .chip-postpaid, .chip-status { display:inline-block; font-size:7pt; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 9px; border-radius:var(--r-pill); }