/* =========================================================================
   theme.css — design tokens, the app shell, and every shared primitive.

   This is OLD's design system (truemed-yakap/public/css/theme.css), ported rather than
   reinterpreted: the same coral/teal brand over warm neutrals, the same liquid-glass sidebar,
   the same pill/card/button/table vocabulary, Nunito and JetBrains Mono, the `.i` icon sprite.
   Values are OLD's to the decimal — where this file differs from OLD it is because YAKAP3 has
   no such screen (the home queue, the stat tiles, the teleconsult room's dark token flip), or
   because YAKAP3 has a control OLD never had (`.ctl`, `.sug`). Both kinds of difference are
   recorded in DECISIONS D-091.
   ========================================================================= */

/* ============================ 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;

  /* z-index scale, named rather than guessed */
  --z-menu:40; --z-sticky:60; --z-modal:200; --z-toast:300; --z-login:400;
}

/* ============================ BASE ============================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
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;
}
h1,h2,h3,h4{letter-spacing:-.015em;margin:0}

/* Conditionally-revealed controls are toggled with the `hidden` attribute, and several of them
   live inside grids and flex rows whose own `display` would otherwise beat the browser default. */
[hidden]{display:none !important}

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;
}
/* `.ctl` is YAKAP3's marker class for a generated control. Every element it lands on is an
   input, a select or a textarea, so the rules above already dress it; it exists so the renderer
   can find its own controls, and it carries no styling of its own beyond the read-only tint. */
.ctl:disabled,.ctl[readonly]{background:var(--surface-2);color:var(--ink-2)}

label{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin:0 0 5px 2px;letter-spacing:.01em}
/* The dictionary's two marks: a required field carries `*` in the error colour, a suggested one
   a `·` in the warning colour — the same distinction the engine draws between a block and a nudge. */
label .req,.req{color:var(--error);font-weight:900;margin-left:4px}
label .sug,.sug{color:var(--warning-dark);font-weight:900;margin-left:4px}
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)}
:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px}

/* ---- 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}

.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}
.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)}

main{padding:28px 32px 64px;width:100%;min-width:0}
/* The registry and the admin screens are reading width; the encounter room is a three-zone
   workspace and takes what the display gives it. */
.page{max-width:1160px;margin:0 auto}
.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}
.topbar .row{margin-left:auto}

/* 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:disabled,.btn.locked{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}
.btn[disabled]:hover,.btn:disabled:hover,.btn.locked:hover{transform:none;box-shadow:none;border-color:var(--line)}

/* ============================ CARDS + PRIMITIVES ============================ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow),var(--hi-soft);margin-bottom:18px}
.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);
  font-size:15px;font-weight:800}
.card-h h3{margin:0;font-size:15px;font-weight:800}
.card-h .spacer{flex:1}
.card.pad>.card-h{padding:0 0 11px;margin-bottom:13px}
.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;align-items:flex-end}
.row.tight{gap:8px}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.spacer{flex:1}
.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}

.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}
.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.coral{background:linear-gradient(135deg,#EE7250,var(--coral-600))}

/* ============================ 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;background:var(--line-2);color:var(--ink-2)}
.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,.pill.ambiguous{background:#F1EEFC;color:#5B45B8}
.pill.ambiguous{margin-left:6px}
.pill.lg{font-size:12.5px;padding:5px 13px}
.pill.outline{background:transparent;border:1px solid currentColor}

.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)}

/* ============================ ALERTS / NOTES ============================ */
.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 .act{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.alert .i{width:17px;height:17px}

/* note banner (guidance / dictionary 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;margin-bottom:12px}
.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,.field-help{font-size:12px;color:var(--ink-3);margin-top:5px;font-weight:600;line-height:1.45}

/* ============================ 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.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,tr.clk{cursor:pointer;transition:background-color .16s ease}
tbody tr.clk:hover td,tr.clk:hover td{background:var(--surface-2)}
td .row{gap:8px;flex-wrap:nowrap;justify-content:flex-end}

/* ============================ FORMS ============================ */
.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.form-grid .full,.form-grid .wide{grid-column:1/-1}
.form-grid .field{margin-bottom:0}
.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}
.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 */
.seg{position:relative;display:flex;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 button:focus-visible{outline:2px solid var(--teal-500);outline-offset:1px}
.seg.wide{width:100%}
.seg.wide button{flex:1}

/* ============================ 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:var(--z-modal);overflow:auto}
.scrim.show{display:flex;animation:scrimFade .24s ease}
.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 .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 .mb p{margin:0 0 12px;font-size:13.5px;font-weight:650;color:var(--ink-2);line-height:1.55}
.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}
.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)}
@keyframes scrimFade{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:scale(.965) translateY(12px)}to{opacity:1;transform:none}}

/* ============================ 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:var(--z-toast);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:var(--z-login);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;text-wrap:balance}
.login-brand p{font-size:15px;font-weight:600;color:#c3cad5;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-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)}

/* ============================ 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 .row{margin-left:0}
  .topbar .btn{min-height:44px}
  .topbar h1{font-size:24px}
  .g2,.g3{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .alert{flex-wrap:wrap} .alert .act{margin-left:0;width:100%}
  .filters .field,.filters .grow{min-width:0;flex:1 1 100%}
  .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:translateX(-50%)}
  .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: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);background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 12px rgba(229,96,59,.16)}
  .mtab a .ico{display:flex;align-items:center;justify-content:center;margin:0 auto 3px}
  .mtab a .ico .i{width:21px;height:21px}
}
@media (max-width:560px){
  main{padding-left:10px;padding-right:10px}
  td,th{padding:11px 9px;font-size:13px}
  .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}
  .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}
}

/* ============================ PRINT (base) ============================ */
/* The Annex-H slips own their own geometry, their own @page and their own colour policy in
   slips.css — which scopes `print-color-adjust:exact` to the PhilHealth masthead alone, so that
   nothing else in a slip prints a background. This block therefore does one thing: hide the app
   chrome so a slip prints by itself. It is deliberately the same set of rules the verified build
   shipped, extended only to the two chrome elements this design pass added (`.mtop`, `.mtab`).
   Nothing here may reach inside the printed area (D-091). */
@media print{
  .side,.mtop,.mtab,.toast,.scrim,.login-overlay,.btn{display:none !important}
  .app{display:block}
  main{padding:0}
  .page{max-width:none}
  .card{box-shadow:none;border:1px solid #999;break-inside:avoid}
}