/* =========================================================================
   TrueMed Clinic EMR — theme.css (FOUNDATION)
   Design tokens, app shell, and every shared component.
   ========================================================================= */

/* ============================ DESIGN TOKENS ============================ */
:root{
  /* brand */
  --coral-50:#FFF2EE; --coral-100:#FFE0D5; --coral-500:#E5603B; --coral-600:#C84D2A; --coral-700:#A03A1E;
  --teal-50:#EDFAFA; --teal-100:#D3F3F0; --teal-500:#5BBFB5; --teal-600:#3A9C93; --teal-700:#2C7A72;
  /* neutrals (warm-tinted) */
  --neutral-0:#FFFFFF; --neutral-50:#F7F8FA; --neutral-100:#EEF0F3; --neutral-200:#DEE2E7;
  --neutral-300:#C4CAD4; --neutral-400:#9EA7B3; --neutral-500:#788191; --neutral-600:#566070;
  --neutral-700:#3D4552; --neutral-800:#282F3C; --neutral-900:#171C26;
  /* semantic */
  --success:#22C55E; --success-dark:#15803D; --success-light:#EDFCF2;
  --philhealth-green:#00843D; --philhealth-green-dark:#006B31; --philhealth-green-light:#E8F6EE;
  --warning:#EAB308; --warning-dark:#A16207; --warning-light:#FEFCE8;
  --error:#EF4444;   --error-dark:#B91C1C;   --error-light:#FEF2F2;
  --info:#3B82F6;    --info-dark:#1D4ED8;    --info-light:#EFF6FF;

  /* app aliases */
  --bg:var(--neutral-50); --surface:var(--neutral-0); --surface-2:var(--neutral-50);
  --ink:var(--neutral-900); --ink-2:var(--neutral-600); --ink-3:#697282;
  --line:var(--neutral-200); --line-2:var(--neutral-100);
  --brand:var(--coral-500); --brand-ink:var(--coral-600); --brand-soft:var(--coral-50);
  --teal:var(--teal-500); --teal-ink:var(--teal-700); --teal-soft:var(--teal-100);
  --accent:var(--info); --accent-soft:var(--info-light);
  --warn:var(--warning-dark); --warn-soft:var(--warning-light);
  --danger:var(--error-dark); --danger-soft:var(--error-light);
  --ok:var(--success-dark); --ok-soft:var(--success-light);

  --shadow:0 1px 4px 0 rgba(23,28,38,.08),0 0 1px 0 rgba(23,28,38,.04);
  --shadow-md:0 4px 12px 0 rgba(23,28,38,.10),0 1px 3px 0 rgba(23,28,38,.06);
  --shadow-lg:0 18px 50px 0 rgba(23,28,38,.18),0 4px 14px 0 rgba(23,28,38,.08);
  --shadow-coral:0 4px 20px 0 rgba(229,96,59,.22);

  /* Liquid Glass material */
  --glass-blur:saturate(180%) blur(22px);
  --glass-blur-lg:saturate(180%) blur(30px);
  --glass-tint:rgba(255,255,255,.48);
  --glass-tint-strong:rgba(255,255,255,.62);
  --glass-dark:rgba(26,31,42,.52);
  --glass-border:rgba(255,255,255,.55);
  --glass-border-dark:rgba(255,255,255,.1);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.14);
  --glass-hi-dark:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.05);
  --hi-soft:inset 0 1px 0 rgba(255,255,255,.75);

  --r:14px; --r-sm:9px; --r-lg:22px; --pill:9999px;
  --font-sans:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',monospace;
  --fs:15px;
  --side-w:252px;
}

/* ============================ BASE ============================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-size:var(--fs);
  font-family:var(--font-sans); -webkit-font-smoothing:antialiased; line-height:1.55; text-wrap:pretty;
}
body.noscroll{overflow:hidden}
h1,h2,h3,h4{letter-spacing:-.015em}
input,select,textarea,button{font-family:inherit;font-size:16px}
@media (min-width:681px){ input,select,textarea{font-size:14px} }
input,select,textarea{
  -webkit-appearance:none; appearance:none; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink); outline:none;
  font-weight:600;
}
textarea{min-height:96px;resize:vertical;line-height:1.5}
input[type=checkbox],input[type=radio]{-webkit-appearance:auto;appearance:auto;width:18px;height:18px;padding:0;accent-color:var(--brand);cursor:pointer}
input[type=file]{padding:9px 12px;font-weight:700}
input::placeholder,textarea::placeholder{font-weight:500;color:var(--ink-3)}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-100)}
input[readonly],input[disabled],select[disabled],textarea[disabled]{background:var(--surface-2);color:var(--ink-2);cursor:not-allowed}
input.err,select.err,textarea.err{border-color:var(--coral-500);background:var(--coral-50);box-shadow:0 0 0 3px rgba(229,96,59,.14)}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23788191' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;
}
label{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin:0 0 5px 2px;letter-spacing:.01em}
label .req,.req{color:var(--error);font-weight:900}
a{color:var(--teal-ink);text-decoration:none;cursor:pointer}
.inline-link{border:0;background:none;color:var(--teal-ink);font:inherit;font-weight:800;padding:0;cursor:pointer}
.inline-link:hover{text-decoration:underline}
.mono{font-family:var(--font-mono)}
::selection{background:var(--coral-100);color:var(--coral-700)}

/* ---- SVG icon system ---- */
.i{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i.big{width:32px;height:32px;stroke-width:1.6}
.btn .i{width:15px;height:15px;margin-right:2px}
.empty .big .i{width:34px;height:34px;color:var(--ink-3)}

/* ============================ LAYOUT / SHELL ============================ */
.app{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh}
.side{
  background:linear-gradient(180deg,rgba(34,40,53,.86),rgba(23,28,38,.9));color:#aeb6c2;padding:22px 16px;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--glass-border-dark);box-shadow:1px 0 24px rgba(23,28,38,.06),var(--glass-hi-dark);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;overflow:auto;
}
.brand{display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px 4px 4px}
.brand-logo{width:152px;max-width:100%;height:auto;display:block;margin:8px auto 2px}
.brand-tag{font-size:10.5px;color:var(--teal-500);letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  padding:0 6px 14px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;text-align:center}

.side-user{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-bottom:6px;border-radius:13px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);box-shadow:var(--glass-hi-dark)}
.side-user[hidden]{display:none}
.side-user-txt{min-width:0;flex:1}
.side-user-name{font-size:13px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.side-user-role{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-500);margin-top:2px}
.side-logout{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#aeb6c2;transition:.16s}
.side-logout:hover{background:rgba(229,96,59,.22);border-color:rgba(229,96,59,.4);color:#fff}
.side-logout .i{width:15px;height:15px}

.nav{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;color:#aeb6c2;
  font-weight:700;font-size:14px;cursor:pointer;transition:.18s}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:linear-gradient(180deg,rgba(229,96,59,.28),rgba(229,96,59,.16));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07),0 2px 8px rgba(229,96,59,.18)}
.nav a[hidden]{display:none}
.nav a .ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.nav a .ico .i{width:18px;height:18px}
.nav a .badge{margin-left:auto}

.side .foot{margin-top:auto;font-size:11px;color:#6c7686;padding:8px;line-height:1.5}
.side .facility{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.side .facility-k{font-size:9.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#5c6573}
.side .facility-v{font-size:11.5px;font-weight:700;color:#98a1ad;margin-top:3px;line-height:1.4}
.side .mode{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--pill);
  font-size:11px;font-weight:800;letter-spacing:.02em}
.side .mode.demo{background:rgba(234,179,8,.18);color:#facc4c}
.side .mode.live{background:rgba(91,191,181,.2);color:#7fded2}
.ver-chip{display:flex;width:max-content;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#aeb6c2;
  font-size:10.5px;font-weight:800;letter-spacing:.03em;font-family:var(--font-sans)}
.foot-link{font-size:11px;font-weight:700;color:#69727f;cursor:pointer;text-decoration:none;border-bottom:1px dotted #4a525e}
.foot-link:hover{color:#aeb6c2}

main{padding:28px 32px 64px;max-width:1160px;width:100%;margin:0 auto;min-width:0}
.topbar{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.topbar h1{font-size:30px;margin:0;letter-spacing:-.02em;font-weight:800}
.topbar p{margin:3px 0 0;color:var(--ink-2);font-size:13px;font-weight:600}
.topbar .spacer{flex:1}
.section-h{display:flex;align-items:center;gap:10px;margin:28px 0 12px;flex-wrap:wrap}
.section-h h2{font-size:16px;margin:0;letter-spacing:-.01em;font-weight:800;display:inline-flex;align-items:center;gap:8px}
.section-h h2 .i{width:18px;height:18px}
.section-h .count{background:var(--line-2);color:var(--ink-2);border-radius:var(--pill);padding:1px 10px;font-size:12px;font-weight:800}
.section-h .spacer{flex:1}

/* mobile chrome (hidden on desktop) */
.mtop{display:none}
.mtab{display:none}

/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);white-space:nowrap;
  border-radius:var(--pill);padding:10px 18px;font-weight:800;font-size:14px;cursor:pointer;
  transition:transform .14s,box-shadow .16s,background .16s,border-color .16s;
  background:linear-gradient(180deg,rgba(255,255,255,.95),var(--neutral-50));color:var(--ink);font-family:var(--font-sans);
  box-shadow:var(--hi-soft),0 1px 2px rgba(23,28,38,.07)}
.btn:hover{border-color:var(--neutral-300);box-shadow:var(--hi-soft),0 4px 12px rgba(23,28,38,.12);transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:var(--hi-soft),0 1px 2px rgba(23,28,38,.08)}
.btn:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px}
.btn.primary{background:linear-gradient(180deg,#EE7250,var(--brand));color:#fff;border-color:transparent;
  box-shadow:var(--shadow-coral),inset 0 1px 0 rgba(255,255,255,.34)}
.btn.primary:hover{background:linear-gradient(180deg,#E5603B,var(--brand-ink));border-color:transparent;
  box-shadow:0 8px 26px rgba(229,96,59,.34),inset 0 1px 0 rgba(255,255,255,.34);transform:translateY(-1px)}
.btn.teal{background:linear-gradient(180deg,rgba(91,191,181,.16),rgba(91,191,181,.08));color:var(--teal-ink);border-color:rgba(91,191,181,.55)}
.btn.teal:hover{background:linear-gradient(180deg,rgba(91,191,181,.24),rgba(91,191,181,.12))}
.btn.green{color:#fff;border-color:var(--philhealth-green-dark);
  background:linear-gradient(180deg,var(--philhealth-green),var(--philhealth-green-dark));
  box-shadow:0 5px 14px rgba(0,132,61,.2),var(--hi-soft)}
.btn.green:hover{background:linear-gradient(180deg,#009447,var(--philhealth-green));color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2);box-shadow:none}
.btn.ghost:hover{background:rgba(120,129,145,.12);color:var(--ink);box-shadow:none;transform:none}
.btn.danger{color:var(--danger);border-color:#f6cfcf;background:linear-gradient(180deg,#fff,var(--danger-soft))}
.btn.danger:hover{border-color:#e79b9b;background:linear-gradient(180deg,#fff,#fde7e7)}
.btn.sm{padding:7px 14px;font-size:13px}
.btn.xs{padding:5px 11px;font-size:12px;gap:5px}
.btn.xs .i{width:13px;height:13px}
.btn.block{width:100%}
.btn.icon-only{width:36px;height:36px;padding:0;border-radius:50%}
.btn.icon-only .i{width:17px;height:17px;margin:0}
.btn[disabled],.btn.locked{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none;pointer-events:auto}
.btn[disabled]:hover,.btn.locked:hover{transform:none;box-shadow:none;border-color:var(--line)}
.btn.locked .i{opacity:.8}

/* ============================ CARDS + PRIMITIVES ============================ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow),var(--hi-soft)}
.card.pad,.pad{padding:18px}
.card-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 18px;border-bottom:1px solid var(--line-2)}
.card-h h3{margin:0;font-size:15px;font-weight:800}
.card-h .spacer{flex:1}
.table-card,.card:has(> table),.tscroll{overflow:auto;-webkit-overflow-scrolling:touch}
.grid{display:grid;gap:16px}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row.tight{gap:8px}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.muted{color:var(--ink-2)} .tiny{font-size:12px} .b{font-weight:800} .b9{font-weight:900}
.mt0{margin-top:0} .mb0{margin-bottom:0}
.empty{text-align:center;color:var(--ink-3);padding:46px 20px;font-weight:600}
.empty .big{font-size:34px;margin-bottom:8px}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}
.spinner.sm{width:18px;height:18px;border-width:2px;display:inline-block;margin:0;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
.hr{height:1px;background:var(--line-2);border:0;margin:16px 0}
.kv{display:flex;flex-direction:column;gap:2px}
.kv .k{font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);line-height:1.2}
.kv .v{font-size:13.5px;font-weight:800;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.kv .v.soft{font-weight:700;color:var(--ink-2)}

/* ============================ STAT TILES ============================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  box-shadow:var(--shadow),var(--hi-soft);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-30px;top:-30px;width:80px;height:80px;border-radius:50%;opacity:.06;background:currentColor}
.stat .k{font-size:12px;color:var(--ink-2);font-weight:700;display:flex;align-items:center;gap:7px}
.stat .k .i{width:15px;height:15px}
.stat .v{font-size:34px;font-weight:900;letter-spacing:-.03em;margin-top:8px;line-height:1;font-variant-numeric:tabular-nums}
.stat .s{font-size:12px;color:var(--ink-3);margin-top:4px;font-weight:600}
.stat .dot{width:9px;height:9px;border-radius:50%}
.stat.clk{cursor:pointer;transition:transform .14s cubic-bezier(.4,0,.2,1),box-shadow .2s,border-color .2s}
.stat.clk:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--hi-soft);border-color:var(--neutral-300)}
.stat.clk:active{transform:translateY(0)}
.stat.clk:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.stat.coral{color:var(--coral-600)} .stat.teal{color:var(--teal-700)}
.stat.green{color:var(--philhealth-green)} .stat.warn{color:var(--warning-dark)}

/* ============================ PILLS / TAGS / BADGES ============================ */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:var(--pill);font-size:11.5px;font-weight:800;white-space:nowrap}
.pill .pdot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill .i{width:13px;height:13px}
.pill.warn{background:var(--warning-light);color:var(--warning-dark)}
.pill.danger{background:var(--error-light);color:var(--error-dark)}
.pill.ok{background:var(--success-light);color:var(--success-dark)}
.pill.brand{background:var(--coral-50);color:var(--coral-600)}
.pill.teal{background:var(--teal-50);color:var(--teal-700)}
.pill.green{background:var(--philhealth-green-light);color:var(--philhealth-green)}
.pill.info{background:var(--info-light);color:var(--info-dark)}
.pill.muted{background:var(--line-2);color:var(--ink-2)}
.pill.violet{background:#F1EEFC;color:#5B45B8}
.pill.lg{font-size:12.5px;padding:5px 13px}
.pill.outline{background:transparent;border:1px solid currentColor}

.tagc{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;letter-spacing:.01em;color:var(--tc,var(--teal-700));
  background:color-mix(in srgb,var(--tc,#2C7A72) 11%,transparent);border:1px solid color-mix(in srgb,var(--tc,#2C7A72) 24%,transparent);
  padding:2px 9px;border-radius:999px;line-height:1.55;white-space:nowrap;vertical-align:middle}
.tagc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tc,#2C7A72);flex:0 0 auto}
.tagc.sm{font-size:10.5px;padding:1px 7px;gap:4px}
.tagc.sm::before{width:5px;height:5px}

.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--pill);
  background:var(--error);color:#fff;font-size:11px;font-weight:800;line-height:1}
.badge.teal{background:var(--teal-600)} .badge.muted{background:var(--neutral-300);color:var(--neutral-800)}
.badge.green{background:var(--philhealth-green)}

.tag-yakap{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.05em;padding:2px 7px;border-radius:var(--pill);
  background:var(--coral-50);color:var(--coral-700);border:1px solid var(--coral-100);vertical-align:middle}
.tag-phic{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.05em;padding:2px 7px;border-radius:var(--pill);
  background:var(--philhealth-green-light);color:var(--philhealth-green);border:1px solid rgba(0,132,61,.2);vertical-align:middle}

/* ============================ ALERTS ============================ */
.alert{display:flex;gap:14px;align-items:flex-start;padding:15px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);margin-bottom:11px;box-shadow:var(--shadow),var(--hi-soft)}
.alert .bar{width:4px;align-self:stretch;border-radius:4px;flex:none;background:var(--neutral-300)}
.alert.warn .bar{background:var(--warning)}
.alert.danger .bar{background:var(--error)}
.alert.info .bar{background:var(--info)}
.alert.ok .bar{background:var(--success)}
.alert.brand .bar{background:var(--coral-500)}
.alert .who{font-weight:800}
.alert .meta{font-size:13px;color:var(--ink-2);margin-top:2px;font-weight:600}
.alert .act{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.alert .i{width:17px;height:17px}

/* note banner (guidance / masterlist hints) */
.note{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);
  border:1px dashed rgba(91,191,181,.55);background:linear-gradient(180deg,var(--teal-50),rgba(255,255,255,.9));
  color:var(--teal-ink);font-size:12.5px;font-weight:700;line-height:1.45}
.note .i{width:16px;height:16px;flex:none;margin-top:1px}
.note.warn{border-color:rgba(161,98,7,.4);background:linear-gradient(180deg,var(--warning-light),rgba(255,255,255,.9));color:var(--warning-dark)}
.note.brand{border-color:rgba(229,96,59,.4);background:linear-gradient(180deg,var(--coral-50),rgba(255,255,255,.9));color:var(--coral-700)}
.help{font-size:12px;color:var(--ink-3);margin-top:5px;font-weight:600}

/* ============================ TABLES ============================ */
table{width:100%;border-collapse:collapse}
.card table,.tscroll table{min-width:680px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
  font-weight:800;padding:12px 16px;border-bottom:1px solid var(--line)}
th.sortable{cursor:pointer;user-select:none;color:var(--ink-2)}
th.sortable:hover{color:var(--brand)}
th.tnum,td.tnum{text-align:right;white-space:nowrap}
th.tact,td.tact{text-align:right;white-space:nowrap}
td{padding:13px 16px;border-bottom:1px solid var(--line-2);font-size:14px;font-weight:600;vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr.clk{cursor:pointer;transition:background-color .16s ease}
tbody tr.clk:hover td{background:var(--surface-2)}
td .row{gap:8px;flex-wrap:nowrap;justify-content:flex-end}
.cell-person{display:flex;align-items:center;gap:10px;min-width:0}
.cell-person>span:not(.avatar){min-width:0}
.cell-person .nm{display:block;font-weight:800;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-person .sub{display:block;font-size:11.5px;color:var(--ink-3);font-weight:700;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-time{white-space:nowrap}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--teal-500);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:13px;flex:none;overflow:hidden;
  background-size:cover;background-position:center}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.sm{width:30px;height:30px;font-size:11px}
.avatar.lg{width:52px;height:52px;font-size:18px;border-radius:16px;background:linear-gradient(135deg,var(--teal-500),var(--teal-700))}
.avatar.xl{width:66px;height:66px;border-radius:20px;font-size:24px;background:linear-gradient(135deg,var(--teal-500),var(--teal-700))}
.avatar.coral{background:linear-gradient(135deg,#EE7250,var(--coral-600))}

/* ============================ FORMS ============================ */
.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
.form-grid .field{margin-bottom:0}
.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.form-grid-3 .full{grid-column:1/-1}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;line-height:1.3}
.check input{flex:none}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 18px}
.filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.filters .field{margin-bottom:0;min-width:170px}
.filters .grow{flex:1;min-width:220px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--pill);cursor:pointer;
  border:1px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:800;color:var(--ink-2);transition:.15s}
.chip:hover{border-color:var(--teal-500);color:var(--teal-ink);background:var(--teal-50)}
.chip.on{border-color:rgba(91,191,181,.55);background:var(--teal-50);color:var(--teal-ink)}

/* segmented control with sliding glass thumb */
.seg{position:relative;display:flex;gap:0;border:1px solid var(--line);border-radius:var(--pill);overflow:hidden;width:fit-content;max-width:100%;
  background:var(--neutral-100);padding:3px;box-shadow:inset 0 1px 2px rgba(23,28,38,.06)}
.seg button{position:relative;z-index:1;border:none;background:transparent;padding:7px 16px;font-weight:800;cursor:pointer;
  color:var(--ink-2);font-family:var(--font-sans);border-radius:var(--pill);transition:color .2s;white-space:nowrap}
.seg button.on{color:var(--teal-ink);background:linear-gradient(180deg,#fff,var(--neutral-50));box-shadow:var(--shadow)}
.seg.thumbed button.on{background:transparent;box-shadow:none}
.seg button:focus-visible{outline:2px solid var(--teal-500);outline-offset:1px}
.seg-thumb{position:absolute;top:3px;bottom:3px;left:0;width:0;opacity:0;z-index:0;border-radius:var(--pill);pointer-events:none;
  background:linear-gradient(180deg,#fff,var(--neutral-50));
  box-shadow:var(--hi-soft),inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px rgba(23,28,38,.14);border:1px solid rgba(255,255,255,.6);
  transition:transform .3s cubic-bezier(.22,1,.36,1),width .3s cubic-bezier(.22,1,.36,1),opacity .2s}
.seg.wide{width:100%}
.seg.wide button{flex:1}
.seg.pillnav{background:transparent;border-color:transparent;box-shadow:none;padding:0;gap:8px;flex-wrap:wrap;border-radius:0;overflow:visible}
.seg.pillnav .seg-thumb{display:none}
.seg.pillnav button{border:1px solid var(--line);background:var(--surface);border-radius:var(--pill);padding:7px 15px;font-size:12.5px;box-shadow:var(--shadow)}
.seg.pillnav button.on{border-color:rgba(91,191,181,.55);background:var(--teal-50);color:var(--teal-ink)}

/* ============================ MODAL ============================ */
.scrim{position:fixed;inset:0;background:rgba(13,16,23,.42);
  -webkit-backdrop-filter:blur(14px) saturate(135%);backdrop-filter:blur(14px) saturate(135%);
  display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:200;overflow:auto}
.scrim.show{display:flex;animation:scrimFade .24s ease}
.scrim.closing{display:flex;pointer-events:none;animation:scrimFadeOut .22s ease forwards}
.modal{background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);
  border:1px solid var(--glass-border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg),var(--glass-hi);width:100%;max-width:560px;margin:auto 0}
.modal.wide{max-width:1040px}
.modal.slim{max-width:440px}
.modal .mh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid rgba(23,28,38,.08)}
.modal .mh h3{margin:0;font-size:18px;font-weight:800}
.modal .mb{padding:22px}
.modal .mf{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:15px 22px;border-top:1px solid rgba(23,28,38,.08);flex-wrap:wrap}
.modal .mf .spacer{flex:1}
.x{cursor:pointer;color:var(--ink-3);font-size:24px;line-height:1;border:none;background:none;padding:0 4px}
.x:hover{color:var(--ink)}
.scrim.show .modal{animation:modalIn .4s cubic-bezier(.32,1.3,.42,1)}
.scrim.closing .modal{animation:modalOut .2s cubic-bezier(.4,0,.6,1) forwards}
@keyframes scrimFade{from{opacity:0}to{opacity:1}}
@keyframes scrimFadeOut{from{opacity:1}to{opacity:0}}
@keyframes modalIn{from{opacity:0;transform:scale(.965) translateY(12px)}to{opacity:1;transform:none}}
@keyframes modalOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.97) translateY(10px)}}
.miss-list{list-style:none;margin:0;padding:0}
.miss-list li{position:relative;padding-left:18px;margin-bottom:7px;font-weight:700;font-size:13.5px;color:var(--ink)}
.miss-list li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--coral-500)}

/* ============================ TOAST ============================ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(40px);
  display:inline-flex;align-items:center;gap:9px;max-width:min(560px,calc(100vw - 32px));
  background:var(--glass-dark);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  color:#fff;padding:11px 20px;border-radius:var(--pill);font-weight:800;font-size:14px;
  box-shadow:var(--shadow-lg),var(--glass-hi-dark);opacity:0;transition:.25s;z-index:300;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast .i{width:16px;height:16px}
.toast.ok{background:rgba(21,128,61,.86)}
.toast.warn{background:rgba(161,98,7,.88)}
.toast.danger{background:rgba(185,28,28,.88)}

/* ============================ LOGIN ============================ */
.login-overlay{display:none;position:fixed;inset:0;z-index:400;overflow:auto;
  background:radial-gradient(1200px 620px at 12% 8%,rgba(91,191,181,.22),transparent 62%),
             radial-gradient(900px 560px at 88% 92%,rgba(229,96,59,.2),transparent 60%),
             linear-gradient(160deg,#1b2130,#12161f 62%,#0e1219)}
.login-overlay.show{display:block}
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;max-width:1120px;margin:0 auto;
  align-items:center;gap:40px;padding:40px 28px}
.login-brand{color:#e8ecf2}
.login-brand .brand-logo{width:210px;margin:0 0 14px}
.login-brand .tag{font-size:11px;color:var(--teal-500);letter-spacing:.2em;text-transform:uppercase;font-weight:900}
.login-brand h1{font-size:38px;font-weight:900;letter-spacing:-.03em;margin:18px 0 10px;color:#fff;line-height:1.1}
.login-brand p{font-size:15px;font-weight:600;color:#9fa9b8;margin:0 0 24px;max-width:44ch;line-height:1.6}
.login-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.login-points li{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;font-weight:700;color:#c3cad5}
.login-points .dotic{width:26px;height:26px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:rgba(91,191,181,.16);color:var(--teal-500);border:1px solid rgba(91,191,181,.3)}
.login-points .dotic .i{width:14px;height:14px}
.login-card{background:rgba(255,255,255,.97);border:1px solid var(--glass-border);border-radius:var(--r-lg);
  -webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);
  box-shadow:var(--shadow-lg),var(--glass-hi);padding:26px 26px 22px}
.login-card h2{margin:0 0 3px;font-size:21px;font-weight:900}
.login-card .sub{margin:0 0 18px;font-size:13px;font-weight:600;color:var(--ink-2)}
.login-roles{display:grid;gap:10px;margin-bottom:18px}
.role-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;
  border:1px solid var(--line);background:linear-gradient(180deg,#fff,var(--neutral-50));width:100%;
  box-shadow:var(--hi-soft),0 1px 3px rgba(23,28,38,.06);transition:transform .14s,box-shadow .18s,border-color .18s}
.role-card:hover{transform:translateY(-1px);border-color:rgba(91,191,181,.55);box-shadow:var(--shadow-md),var(--hi-soft)}
.role-card:active{transform:translateY(0)}
.role-card .role-ic{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--teal-500),var(--teal-700));box-shadow:0 3px 8px rgba(44,122,114,.28)}
.role-card.coral .role-ic{background:linear-gradient(135deg,#EE7250,var(--coral-600));box-shadow:0 3px 8px rgba(229,96,59,.3)}
.role-card.slate .role-ic{background:linear-gradient(135deg,var(--neutral-700),var(--neutral-900))}
.role-card .role-ic .i{width:19px;height:19px}
.role-card>span:not(.role-ic):not(.go){min-width:0;flex:1}
.role-card .role-t{display:block;font-size:14px;font-weight:900;line-height:1.15}
.role-card .role-s{display:block;font-size:11.5px;font-weight:700;color:var(--ink-3);margin-top:1px}
.role-card .go{margin-left:auto;color:var(--ink-3);font-weight:900}
.login-sep{display:flex;align-items:center;gap:12px;margin:4px 0 16px;color:var(--ink-3);font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.login-sep::before,.login-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.login-err{display:none;margin-bottom:12px;padding:10px 13px;border-radius:11px;background:var(--error-light);
  border:1px solid rgba(185,28,28,.22);color:var(--error-dark);font-size:12.5px;font-weight:800}
.login-err.show{display:block}
.login-foot{margin-top:14px;text-align:center;font-size:11.5px;font-weight:700;color:var(--ink-3)}

/* ============================ HOME ============================ */
.queue-h{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--line-2)}
.queue-h .field{margin-bottom:0}
.queue-h .spacer{flex:1}
.date-nav{display:flex;align-items:center;gap:6px}
.date-nav input[type=date]{min-width:158px;font-weight:800}
.msg-item{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.msg-item:last-child{border-bottom:none}
.msg-ic{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--teal-50);color:var(--teal-700);border:1px solid var(--teal-100)}
.msg-ic.warn{background:var(--warning-light);color:var(--warning-dark);border-color:rgba(161,98,7,.2)}
.msg-ic.brand{background:var(--coral-50);color:var(--coral-600);border-color:var(--coral-100)}
.msg-ic .i{width:17px;height:17px}
.msg-t{font-size:13.5px;font-weight:800;line-height:1.25}
.msg-s{font-size:12px;font-weight:650;color:var(--ink-2);margin-top:2px}
.msg-time{margin-left:auto;font-size:11px;font-weight:800;color:var(--ink-3);white-space:nowrap}

/* ============================ VIEW MOTION ============================ */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#view.view-enter>*{animation:riseIn .5s cubic-bezier(.22,1,.36,1) both}
#view.view-enter>*:nth-child(1){animation-delay:0s}
#view.view-enter>*:nth-child(2){animation-delay:.045s}
#view.view-enter>*:nth-child(3){animation-delay:.09s}
#view.view-enter>*:nth-child(4){animation-delay:.135s}
#view.view-enter>*:nth-child(5){animation-delay:.18s}
#view.view-enter>*:nth-child(n+6){animation-delay:.22s}

/* =========================================================================
   ENCOUNTER MODE — dark theme token overrides
   body.encounter-mode retints the whole app; encounter.css builds on these.
   ========================================================================= */
body.encounter-mode{
  --bg:#12161f;
  --surface:#1f2531;
  --surface-2:#191f2a;
  --ink:#EEF0F3;
  --ink-2:#9EA7B3;
  --ink-3:#7a8494;
  --line:#2c3442;
  --line-2:#232a37;
  --hi-soft:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow:0 1px 4px 0 rgba(0,0,0,.4),0 0 1px 0 rgba(0,0,0,.3);
  --shadow-md:0 6px 18px 0 rgba(0,0,0,.45);
  --shadow-lg:0 22px 60px 0 rgba(0,0,0,.55);
  --glass-tint:rgba(31,37,49,.62);
  --glass-border:rgba(255,255,255,.1);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.04);
  --brand-soft:rgba(229,96,59,.14);
  --teal-soft:rgba(91,191,181,.16);
  --warn-soft:rgba(234,179,8,.13);
  --danger-soft:rgba(239,68,68,.14);
  --ok-soft:rgba(34,197,94,.13);
  background:var(--bg);color:var(--ink);
}
body.encounter-mode .app{grid-template-columns:1fr}
body.encounter-mode .side,body.encounter-mode .mtab,body.encounter-mode .mtop{display:none}
body.encounter-mode main{max-width:none;padding:0}
body.encounter-mode input,body.encounter-mode select,body.encounter-mode textarea{
  background:#161b25;border-color:var(--line);color:var(--ink)}
body.encounter-mode input::placeholder,body.encounter-mode textarea::placeholder{color:#6c7583}
body.encounter-mode select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239EA7B3' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
body.encounter-mode .card{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow),var(--hi-soft)}
body.encounter-mode .btn{background:linear-gradient(180deg,#28303e,#222836);color:var(--ink);border-color:var(--line);
  box-shadow:var(--hi-soft),0 1px 2px rgba(0,0,0,.3)}
body.encounter-mode .btn:hover{border-color:#3a4456;box-shadow:var(--hi-soft),0 6px 16px rgba(0,0,0,.4)}
body.encounter-mode .btn.primary{background:linear-gradient(180deg,#EE7250,var(--brand));color:#fff;border-color:transparent}
body.encounter-mode .btn.teal{background:linear-gradient(180deg,rgba(91,191,181,.22),rgba(91,191,181,.1));color:#8fded4;border-color:rgba(91,191,181,.42)}
body.encounter-mode .btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
body.encounter-mode .btn.ghost:hover{background:rgba(255,255,255,.07);color:#fff}
body.encounter-mode .btn.danger{color:#ff9b9b;border-color:rgba(239,68,68,.34);background:linear-gradient(180deg,#2b2028,#241b21)}
body.encounter-mode .seg{background:#161b25;border-color:var(--line);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
body.encounter-mode .seg button{color:var(--ink-2)}
body.encounter-mode .seg button.on{color:#8fded4;background:linear-gradient(180deg,#2b3342,#242b38);box-shadow:none}
body.encounter-mode .seg-thumb{background:linear-gradient(180deg,#2f3849,#262e3b);border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 6px rgba(0,0,0,.4)}
body.encounter-mode th{color:var(--ink-3);border-bottom-color:var(--line)}
body.encounter-mode td{border-bottom-color:var(--line-2)}
body.encounter-mode tbody tr.clk:hover td{background:rgba(255,255,255,.04)}
body.encounter-mode .modal{background:rgba(31,37,49,.96);border-color:rgba(255,255,255,.1);color:var(--ink)}
body.encounter-mode .modal .mh,body.encounter-mode .modal .mf{border-color:rgba(255,255,255,.08)}
body.encounter-mode .scrim{background:rgba(6,9,14,.6)}
body.encounter-mode .pill.muted{background:rgba(255,255,255,.08);color:var(--ink-2)}
body.encounter-mode .pill.teal{background:rgba(91,191,181,.16);color:#8fded4}
body.encounter-mode .pill.brand{background:rgba(229,96,59,.18);color:#ffa98d}
body.encounter-mode .pill.ok{background:rgba(34,197,94,.16);color:#7ee2a3}
body.encounter-mode .pill.warn{background:rgba(234,179,8,.16);color:#f5d36b}
body.encounter-mode .pill.danger{background:rgba(239,68,68,.18);color:#ff9b9b}
body.encounter-mode .pill.violet{background:rgba(139,116,240,.20);color:#c3b5ff}
body.encounter-mode .note{background:linear-gradient(180deg,rgba(91,191,181,.12),rgba(31,37,49,.5));color:#8fded4;border-color:rgba(91,191,181,.34)}
body.encounter-mode .stat{background:var(--surface);border-color:var(--line)}
body.encounter-mode .empty{color:var(--ink-3)}
body.encounter-mode .chip{background:#222836;border-color:var(--line);color:var(--ink-2)}
body.encounter-mode .chip.on,body.encounter-mode .chip:hover{background:rgba(91,191,181,.14);border-color:rgba(91,191,181,.45);color:#8fded4}

/* ============================ MOBILE ============================ */
@media (max-width:880px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .mtop{display:flex;align-items:center;justify-content:center;gap:10px;position:sticky;top:0;z-index:115;
    padding:8px 16px;background:var(--glass-dark);
    -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border-bottom:1px solid var(--glass-border-dark);box-shadow:0 4px 22px rgba(23,28,38,.18),var(--glass-hi-dark)}
  .mtop-logo{height:30px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
  .mtop-tag{font-size:9.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-500)}
  main{padding:16px 14px 104px}
  .topbar{align-items:flex-start;gap:10px;margin-bottom:16px}
  .topbar .spacer{display:none}
  .topbar .btn{min-height:44px}
  .topbar h1{font-size:24px}
  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .stat{padding:14px 15px}
  .stat .v{font-size:27px}
  .g2,.g3{grid-template-columns:1fr}
  .form-grid,.form-grid-3{grid-template-columns:1fr!important}
  .alert{flex-wrap:wrap} .alert .act{margin-left:0;width:100%}
  .filters .field,.filters .grow{min-width:0;flex:1 1 100%}
  .queue-h{padding:14px;gap:10px}
  .queue-h .field{flex:1 1 46%;min-width:140px}
  .queue-h .field:first-child{flex:1 1 100%}
  .queue-h .date-nav{width:100%}
  .queue-h .date-nav input[type=date]{min-width:0;flex:1}
  .login-wrap{grid-template-columns:1fr;padding:28px 18px;gap:26px}
  .login-brand h1{font-size:28px}
  .login-brand p{margin-bottom:16px}
  .login-points{display:none}
  .card table{min-width:0;width:100%;table-layout:fixed}
  .card table td{overflow:hidden;text-overflow:ellipsis}
  .card table th{overflow:hidden;white-space:normal;line-height:1.25;letter-spacing:.01em;font-size:10px;padding-left:8px;padding-right:8px}
  /* wide data tables keep their natural width and scroll sideways inside their card */
  .tscroll table{min-width:620px;width:100%;table-layout:auto}
  .tscroll table td{overflow:visible}
  .table-card,.card:has(> table),.tscroll{overflow:auto}
  td .row{flex-wrap:wrap}
  .btn.sm{padding:7px 10px;font-size:12px}
  .hide-m{display:none!important}

  /* glass bottom tab bar */
  .mtab{display:flex;position:fixed;bottom:14px;left:50%;width:calc(100% - 28px);max-width:600px;padding:6px;
    background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.36));
    -webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg);
    border:1px solid var(--glass-border);border-radius:999px;z-index:120;overflow:hidden;
    box-shadow:0 12px 38px rgba(23,28,38,.22),inset 0 1px 0 rgba(255,255,255,.92),inset 0 0 0 1px rgba(255,255,255,.16);
    transform-origin:bottom center;transform:translateX(-50%) scale(1);
    transition:transform .55s cubic-bezier(.4,0,.2,1),box-shadow .55s cubic-bezier(.4,0,.2,1),padding .55s cubic-bezier(.4,0,.2,1)}
  .mtab::before{content:"";position:absolute;inset:0 0 auto;height:50%;pointer-events:none;z-index:0;border-radius:26px 26px 40px 40px;
    background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}
  .mtab a{flex:1;text-align:center;padding:7px 2px;color:var(--ink-3);font-size:10px;font-weight:700;cursor:pointer;
    position:relative;z-index:1;border-radius:18px;-webkit-tap-highlight-color:transparent;
    transition:padding .3s cubic-bezier(.4,0,.2,1),color .22s,transform .22s cubic-bezier(.34,1.56,.5,1)}
  .mtab a[hidden]{display:none}
  .mtab a:active{transform:scale(.86)}
  .mtab a.active{color:var(--brand)}
  .mtab-blob{position:absolute;top:6px;bottom:6px;left:0;width:0;opacity:0;z-index:0;pointer-events:none;border-radius:17px;
    background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45));
    border:1px solid rgba(255,255,255,.7);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 4px rgba(255,255,255,.5),0 4px 12px rgba(229,96,59,.16);
    -webkit-backdrop-filter:saturate(1.5) brightness(1.05);backdrop-filter:saturate(1.5) brightness(1.05);
    transition:transform .38s cubic-bezier(.22,1,.36,1),width .38s cubic-bezier(.22,1,.36,1),opacity .2s}
  .mtab a .ico{display:flex;align-items:center;justify-content:center;margin:0 auto 3px}
  .mtab a .ico .i{width:21px;height:21px}
  .mtab.shrunk{transform:translateX(-50%) scale(.85)}
}
@media (max-width:560px){
  main{padding-left:10px;padding-right:10px}
  td,th{padding:11px 9px;font-size:13px}
  .avatar{width:30px;height:30px;font-size:11px}
  .seg{width:100%}
  .seg button{flex:1;padding:9px 4px;font-size:13px}
  .modal .mh{padding:15px 16px;flex-wrap:wrap;gap:8px}
  .modal .mb{padding:16px}
  .modal .mf{padding:13px 16px}
  .stats{gap:10px}
  .login-card{padding:20px 18px 18px}
}
@media (pointer:coarse){
  .btn{min-height:44px;padding:11px 18px}
  .btn.sm{min-height:40px;padding:8px 14px}
  .btn.xs{min-height:34px}
  td{padding:15px 14px}
  input,select,textarea{min-height:44px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============================ SIGNATURE PAD ============================ */
.sigpad-box{position:relative;width:100%;border:2px dashed var(--line);border-radius:var(--r);
  background:#fff;overflow:hidden;box-shadow:var(--hi-soft)}
.sigpad-box canvas{display:block;position:relative;z-index:2;touch-action:none;cursor:crosshair;background:transparent}
.sigpad-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;color:var(--neutral-300);letter-spacing:.02em;pointer-events:none;
  transition:opacity .18s ease;z-index:1}
.sigpad-base{position:absolute;left:9%;right:9%;bottom:22%;height:1px;background:var(--neutral-300);z-index:1}
.sigpad-name{margin-top:10px;text-align:center;font-size:12.5px;font-weight:800;color:var(--ink-2);
  letter-spacing:.04em;text-transform:uppercase}
body.encounter-mode .sigpad-box{background:#fff;border-color:rgba(255,255,255,.28)}

/* ============================ PRINT (base) ============================ */
@media print{
  @page{size:A4;margin:12mm}
  html,body{margin:0!important;padding:0!important;background:#fff!important;color:#000!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.encounter-mode{background:#fff!important;color:#000!important}
  .side,.mtab,.mtop,.toast,.scrim,.login-overlay{display:none!important}
  .app{display:block!important}
  main{max-width:none!important;padding:0!important;margin:0!important}
  .no-print,.btn,.seg,.filters{display:none!important}
  .print-only{display:block!important}
  .card{box-shadow:none!important;border:1px solid #999!important;break-inside:avoid;page-break-inside:avoid}
  a{color:#000!important;text-decoration:none}
  #view.view-enter>*{animation:none!important}
}
.print-only{display:none}