/* theme.css — design system for F-Assist for PNDT.
 *
 * Shared by the dashboard, editor, settings and print pages. Everything is driven
 * by the tokens below, so restyling the whole app means editing this block only.
 *
 * Colour carries MEANING here, not decoration. Every status in the app maps to one
 * of four roles, and nothing else may use those hues:
 *   amber  — blocked, waiting on a human (Awaiting result, Incomplete)
 *   blue   — actionable now (Ready to upload), and the primary action colour
 *   green  — done (Uploaded)
 *   red    — destructive or void (Cancelled, delete, errors)
 * Colour is never the only signal: every pill carries a text label too, because
 * clinic monitors are often poorly calibrated and some staff are colour-blind.
 */

:root {
  /* ---- neutrals ---- */
  --bg:        #f6f8fa;   /* page background */
  --surface:   #ffffff;   /* cards, table, inputs */
  --surface-2: #f7f9fb;   /* muted panels, hover, locked fields */
  --ink:       #101828;   /* primary text */
  --muted:     #667085;   /* labels, secondary text */
  --faint:     #98a2b3;   /* placeholders, hints */
  --line:      #e7ebf0;   /* hairlines, card borders */
  --line-2:    #d3dae2;   /* input borders */

  /* ---- roles ---- */
  --primary:     #15607f;  /* deep teal-blue: primary buttons, links, brand */
  --primary-700: #0f4a62;
  --primary-100: #cfe2ec;
  --primary-50:  #eaf2f7;

  --info:        #2f6fe4;  /* "ready to upload" — actionable, distinct from brand */
  --info-100:    #d7e5fb;
  --info-50:     #eaf1fe;

  --success:     #1d7a45;
  --success-100: #c9e7d5;
  --success-50:  #e8f5ed;

  --warn:        #9a6412;  /* text on amber */
  --warn-500:    #e08a0c;  /* the big amber number */
  --warn-100:    #f7e3bd;
  --warn-50:     #fdf4e3;

  --danger:      #b42318;
  --danger-100:  #f6cfcb;
  --danger-50:   #fdeeec;

  /* ---- spacing (8px base grid) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  /* ---- radius ---- */
  --r-sm:8px; --r:10px; --r-lg:12px; --r-xl:16px; --r-pill:999px;

  /* ---- elevation (kept very shallow — this is a dense data tool) ---- */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow:    0 4px 12px rgba(16,24,40,.07);
  --ring:      0 0 0 3px rgba(21,96,127,.14);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-gu: "Noto Sans Gujarati", var(--font);
}

* { box-sizing: border-box; }
body { margin:0; font-family:var(--font); font-size:14px; line-height:1.55;
       color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }

/* ---- typography scale ----
   28 page title · 18–20 section · 14 controls · 12–13 metadata.
   Dense enough for a 1366×768 clinic monitor without going tiny. */
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.015em; }
.page-title { font-size:28px; line-height:1.2; }
.page-sub   { font-size:14px; color:var(--muted); margin-top:2px; }
.sec-title  { font-size:19px; font-weight:700; letter-spacing:-.01em; }
.eyebrow    { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--primary); }
.meta       { font-size:13px; color:var(--muted); }
.hint       { font-size:12px; color:var(--faint); margin-top:var(--s1); }
.req        { color:var(--danger); }
.gu         { font-family:var(--font-gu); }

/* ---- brand ---- */
.brand { display:flex; align-items:center; gap:var(--s2); }
.brand .mark { width:26px; height:26px; border-radius:7px; flex:0 0 auto;
   background:var(--primary); color:#fff;
   display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; }
.brand h1 { font-size:16px; letter-spacing:-.02em; }

/* ---- app chrome ---- */
.appbar { background:var(--surface); border-bottom:1px solid var(--line);
          padding:0 var(--s10); height:60px; display:flex; align-items:center; gap:var(--s6);
          position:sticky; top:0; z-index:20; }
.appbar .where { font-size:14px; color:var(--muted); }
.appbar .spacer { flex:1; }
/* Full-bleed, not a centred column: this is a data tool on a clinic monitor, and the
   table wants the width — patient names and doctor names are long here (a full
   Gujarati name plus "DR BHARATBHAI NAVINCHANDRA THAKKAR" wraps badly in a narrow
   column). Capped only so it doesn't sprawl unreadably on an ultra-wide display. */
.page { max-width:2000px; margin:0 auto; padding:var(--s6) var(--s10) var(--s10); }

/* ---- cards ---- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
        box-shadow:var(--shadow-sm); padding:var(--s5) var(--s6); margin-bottom:var(--s4); }
.card > h2 { font-size:16px; margin-bottom:var(--s4); }
.card-flush { padding:0; overflow:hidden; }

/* ---- stat cards ----
   The one the clinic must act on gets a ring; the others stay quiet. */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-bottom:var(--s5); }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
        padding:var(--s5) var(--s6); box-shadow:var(--shadow-sm); }
.stat .lbl { font-size:14px; font-weight:600; color:var(--ink); }
.stat .row { display:flex; align-items:baseline; gap:var(--s4); margin-top:var(--s2); }
.stat .num { font-size:34px; font-weight:700; line-height:1; letter-spacing:-.02em; }
.stat .cap { font-size:13px; color:var(--muted); }
.stat.is-primary { border-color:var(--warn-500); box-shadow:0 0 0 1px var(--warn-500); }
.stat.awaiting .num { color:var(--warn-500); }
.stat.ready    .num { color:var(--info); }
.stat.done     .num { color:var(--success); }

/* ---- toolbar ---- */
.toolbar { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
           box-shadow:var(--shadow-sm); padding:var(--s3) var(--s4);
           display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s4); }
.search { position:relative; flex:0 1 320px; min-width:220px; }
.search input { padding-left:34px; }
.search svg { position:absolute; left:11px; top:11px; }

/* ---- filter chips ---- */
.chips { display:flex; gap:var(--s2); flex-wrap:wrap; }
.chip { padding:6px 14px; font-size:13px; font-weight:600; border-radius:var(--r-pill);
        border:1px solid transparent; background:var(--surface-2); color:var(--muted); }
.chip:hover { background:var(--line); }
.chip.active { background:var(--primary); color:#fff; }
/* each filter previews the colour of the status it selects */
.chip[data-f="PendingPrint"] { background:var(--primary-50); color:var(--primary); }
.chip[data-f="Awaiting"]   { background:var(--warn-50);    color:var(--warn); }
.chip[data-f="Ready"]      { background:var(--info-50);    color:var(--info); }
.chip[data-f="Uploaded"]   { background:var(--success-50); color:var(--success); }
.chip[data-f="Incomplete"] { background:var(--danger-50);  color:var(--danger); }
.chip[data-f="Cancelled"]  { background:var(--surface-2);  color:var(--faint); }
.chip.active[data-f]       { background:var(--primary); color:#fff; }
.chip-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  margin-left:5px; padding:0 6px; border-radius:var(--r-pill); background:rgba(255,255,255,.72);
  color:inherit; font-size:11px; font-weight:800; }

/* ---- status pills ---- */
.pill { display:inline-block; font-size:12.5px; font-weight:600; padding:4px 12px;
        border-radius:var(--r-pill); white-space:nowrap; }
.pill.PendingPrint { background:var(--primary-50); color:var(--primary); }
.pill.Awaiting   { background:var(--warn-50);    color:var(--warn); }
.pill.Ready      { background:var(--info-50);    color:var(--info); }
.pill.Uploaded   { background:var(--success-50); color:var(--success); }
.pill.Incomplete { background:var(--danger-50);  color:var(--danger); }
.pill.Cancelled  { background:var(--surface-2);  color:var(--faint); text-decoration:line-through; }

/* ---- connection chip ---- */
.conn { display:inline-flex; align-items:center; gap:7px;
        padding:6px 13px; border-radius:var(--r-pill); font-size:13px; font-weight:600;
        background:var(--success-50); color:var(--success); }
.conn .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.conn.off { background:var(--surface-2); color:var(--faint); }

/* ---- register strip ----
   Purely informational: it states where the CURRENT register stands. It is not a
   filter — all looking-back happens through the date filter in the toolbar, because
   two competing time controls on one screen leave "which one wins?" undefined. */
.register { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
            margin-top:var(--s3); font-size:13.5px; color:var(--muted); }
.register .tag { background:var(--primary-50); color:var(--primary); font-weight:700;
                 padding:5px 14px; border-radius:var(--r-pill); font-size:13px; }
.register b { color:var(--ink); font-weight:700; }
.register .cancelled { color:var(--faint); }
.register .cancelled b { color:var(--muted); }

/* ---- toolbar right-hand group ---- */
.tb-right { margin-left:auto; display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }

/* ---- popover ---- */
.pop-wrap { position:relative; }
.pop { position:absolute; top:100%; right:0; margin-top:8px; z-index:30; display:none;
       background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
       box-shadow:var(--shadow); padding:var(--s5); min-width:280px; }
.pop.open { display:block; }
.pop h3 { font-size:14px; margin-bottom:var(--s3); }
.pop .line { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s5);
             padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.pop .line:last-of-type { border-bottom:none; }
.pop .line .k { color:var(--muted); }
.pop .line .v { font-weight:700; font-size:16px; }
.pop .foot { margin-top:var(--s3); font-size:12px; color:var(--faint); line-height:1.45; }

/* ---- portal reconciliation ----
   Direction carries meaning: "ours > portal" is an alarm (we think a form is filed and
   it isn't); "portal > ours" is just forms filed by hand. Only the first is red. */
.recon { margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line); }
.recon-h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
           color:var(--muted); margin-bottom:var(--s2); }
.recon-row { display:flex; align-items:baseline; gap:var(--s2); font-size:13px; padding:3px 0; }
.recon-row .k { color:var(--muted); flex:0 0 88px; }
.recon-row .n { font-weight:700; }
.recon-row .note { font-size:12px; margin-left:auto; }
.recon-row.ok   .note { color:var(--success); }
.recon-row.warn .note { color:var(--muted); }
.recon-row.bad  .n, .recon-row.bad .note { color:var(--danger); }
.recon-foot { margin-top:var(--s2); font-size:11.5px; color:var(--faint); line-height:1.45; }
.recon-none { font-size:12px; color:var(--faint); line-height:1.45; }

/* ---- date filter ---- */
.datefilter { display:flex; align-items:center; gap:var(--s2); }
.datefilter input[type=date] { width:auto; padding:7px 10px; font-size:13px; }
.datefilter .to { font-size:13px; color:var(--muted); }
.linkbtn { background:none; border:none; color:var(--primary); font-size:13px;
           font-weight:600; padding:6px 4px; cursor:pointer; }
.linkbtn:hover { text-decoration:underline; }

/* ---- data table ---- */
.table { width:100%; border-collapse:collapse; }
.table th { text-align:left; font-size:13px; font-weight:600; color:var(--muted);
            padding:var(--s4) var(--s5); border-bottom:1px solid var(--line); white-space:nowrap; }
.table td { padding:var(--s4) var(--s5); border-bottom:1px solid var(--line); vertical-align:middle; }
.table tr:last-child td { border-bottom:none; }
.table tbody tr:hover { background:var(--surface-2); cursor:pointer; }
/* Column widths: pin the short, predictable columns so the two long ones (patient
   and doctor) get all the slack and stop wrapping onto a second line. */
.table .c-reg  { font-weight:700; width:120px; white-space:nowrap; }
.table .c-name { font-weight:600; width:28%; }
/* Gujarati name under the English one — without this it ran inline and the two names
   read as one long string */
.table .c-name .roman { display:block; font-weight:500; font-size:12.5px; color:var(--muted); margin-top:1px; }
.table .c-doc  { width:32%; }
.table .c-ff   { width:150px; white-space:nowrap; }
.table .c-stat { width:170px; }
.table .c-open { text-align:right; width:100px; color:var(--primary); font-weight:600; white-space:nowrap; }
.table .dim { color:var(--faint); }
.empty { text-align:center; color:var(--faint); padding:56px 20px; }

/* ---- forms ---- */
label { display:block; font-weight:500; font-size:13px; color:var(--muted); margin-bottom:6px; }
input, select, textarea {
  width:100%; padding:11px 13px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  font:inherit; color:var(--ink); background:var(--surface);
  transition:border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color:var(--faint); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--primary); box-shadow:var(--ring); }
input:disabled, select:disabled, textarea:disabled {
  background:var(--surface-2); color:var(--muted); border-color:var(--line); cursor:not-allowed; }
textarea { resize:vertical; min-height:62px; }
.field-error { border-color:var(--danger) !important; background:var(--danger-50) !important;
               box-shadow:0 0 0 3px rgba(180,35,24,.12); }
.grid  { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4) var(--s5); }
.grid .full { grid-column:1 / -1; }
.row3  { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--s4); }
.row4  { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }

/* ---- buttons ---- */
button { font:inherit; font-weight:600; border-radius:var(--r-sm); cursor:pointer;
         border:1px solid transparent; transition:background .12s, border-color .12s; }
.btn { padding:10px 18px; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-700); }
.btn-ghost { background:var(--surface); color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover { background:var(--surface-2); }
.btn-danger-ghost { background:var(--surface); color:var(--danger); border-color:var(--danger-100); }
.btn-danger-ghost:hover { background:var(--danger-50); }
.btn-lg { padding:12px 22px; font-size:15px; }
.btn-sm { padding:6px 12px; font-size:13px; }
button:disabled { opacity:.45; cursor:not-allowed; }
button:disabled:hover { background:var(--surface); }
.btn-primary:disabled:hover { background:var(--primary); }

/* ---- callouts ---- */
.note { border-radius:var(--r); padding:13px 16px; font-size:13.5px; line-height:1.5;
        background:var(--primary-50); border:1px solid var(--primary-100); color:#0d4257; }
.note b { font-weight:700; }
.note .sub { display:block; margin-top:3px; color:var(--muted); font-size:13px; }
.note-ok   { background:var(--success-50); border-color:var(--success-100); color:#125c36; }
.note-warn { background:var(--warn-50);    border-color:var(--warn-100);    color:#7a4d0a; }
.note-err  { background:var(--danger-50);  border-color:var(--danger-100);  color:#8f1d13; }

/* ---- dropdown menu ---- */
.menu-wrap { position:relative; }
.menu { position:absolute; top:100%; right:0; margin-top:6px; background:var(--surface);
        border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
        min-width:210px; padding:6px; display:none; z-index:30; }
.menu.open { display:block; }
.menu a { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-sm);
          color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:500; cursor:pointer; }
.menu a:hover { background:var(--surface-2); }
.menu .sep { height:1px; background:var(--line); margin:5px 0; }

/* ---- toast ---- */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(8px);
         background:var(--ink); color:#fff; padding:12px 20px; border-radius:var(--r);
         box-shadow:var(--shadow); opacity:0; transition:opacity .2s, transform .2s;
         pointer-events:none; font-weight:600; z-index:2000; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- mobile ----
   Not a breakpoint afterthought: the phone is a real entry device for this app
   (fill + print). Only portal upload is desktop-only. */
@media (max-width: 860px) {
  .appbar { padding:0 var(--s5); height:56px; gap:var(--s4); }
  .page { padding:var(--s5) var(--s5) var(--s10); }
  .page-title { font-size:23px; }
  .stats { grid-template-columns:1fr; gap:var(--s3); }
  .stat { padding:var(--s4) var(--s5); }
  .stat .num { font-size:28px; }
  .toolbar { gap:var(--s3); }
  .search { flex:1 1 100%; }
  .grid, .row3, .row4 { grid-template-columns:1fr; }
  input, select, textarea { padding:12px 13px; }  /* 44px+ touch targets */
}

/* ============================================================
   DASHBOARD — task strip, register anchor, day-grouped table.
   Redesign: the three equal stat cards become two ACTION tiles
   (enter a patient / file the ready ones) plus two quiet REFERENCE
   counts, so a day's tasks and its backlogs stop sharing one scale.
   ============================================================ */

/* register ribbon — names the monthly govt register the screen serves */
.reg-anchor { display:inline-flex; align-items:center; gap:10px; margin-top:10px;
  padding:5px 12px 5px 5px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); font-size:12.5px; color:var(--muted); }
.reg-anchor .tag { background:var(--primary-50); color:var(--primary); font-weight:700;
  padding:3px 10px; border-radius:var(--r-pill); }
.reg-anchor b { color:var(--ink); font-weight:700; }
/* cancelled forms sit UNDER the register line, quieter — they're a footnote to the
   month's count, not part of it */
.reg-cancelled { margin-top:7px; font-size:12.5px; color:var(--muted); }
.reg-cancelled b { color:var(--ink); font-weight:700; }
.reg-cancelled .why { color:var(--faint); }

.taskgrid { display:grid; grid-template-columns:1.05fr 1.15fr .95fr; gap:var(--s4); margin-bottom:var(--s5); }

.tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:var(--s5) var(--s6); display:flex; flex-direction:column; }
.tile .k { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); }
.tile h2 { font-size:17px; margin-top:6px; }
.tile p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.tile .foot { margin-top:auto; padding-top:var(--s4); }
/* action tiles read as buttons */
.tile.action { cursor:pointer; transition:box-shadow .12s, border-color .12s, transform .06s; }
.tile.action:hover { border-color:var(--primary-100); box-shadow:var(--shadow); }
.tile.action:active { transform:translateY(1px); }
.tile.new { border-top:3px solid var(--primary); }
.tile.new:hover { background:var(--primary-50); border-color:var(--primary); }
.tile .big { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:700;
  letter-spacing:-.01em; color:var(--primary); }
.tile .big svg { flex:0 0 auto; }
.tile.new .foot { flex:1; display:flex; justify-content:center; align-items:center;
  margin-top:0; padding-top:var(--s4); }
.tile.new .new-cta { display:inline-flex; align-items:center; text-align:center; font-size:21px;
  font-weight:700; letter-spacing:-.01em; color:var(--primary); }
.tile.new .new-cta svg { flex:0 0 auto; }
.tile.new:hover .new-cta { color:#0b5570; }
/* the "ready to file" tile owns the extension state */
.tile.file { border-top:3px solid var(--info); }
.tile.file .file-main { flex:1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(220px, .95fr);
  align-items:center; gap:var(--s8); }
.tile.file h2 { margin-top:6px; }
.tile.file .count { font-size:58px; font-weight:700; line-height:1; letter-spacing:-.02em;
  color:var(--info); font-variant-numeric:tabular-nums; margin-top:16px; }
.tile.file .count .u { font-size:15px; font-weight:600; color:var(--muted); margin-left:8px; }
.tile.file .foot { display:flex; align-items:center; justify-content:center; min-height:92px; }
.filecta { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; text-align:center; }
.filecta .btn-file { background:var(--info); color:#fff; padding:10px 18px;
  border:1px solid var(--info); border-radius:var(--r-sm); }
.filecta .btn-file:hover { filter:brightness(.94); }
.filecta .btn-file:disabled { opacity:.5; }
.file-off { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--warn);
  background:var(--warn-50); border:1px solid var(--warn-100); border-radius:var(--r-sm); padding:9px 12px; }
.file-off svg { flex:0 0 auto; }
.tile.file.blocked { border-top-color:var(--warn-500); }
.tile.file.blocked .count { color:var(--muted); }

/* priority queues: larger because they are used throughout the day */
.refcol { display:flex; flex-direction:column; gap:var(--s4); }
.ref { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:var(--s6) var(--s8); min-height:220px; flex:1; display:flex; align-items:center;
  gap:var(--s4); cursor:pointer; transition:background .12s, border-color .12s, box-shadow .12s, transform .06s; }
.ref:hover { background:var(--surface-2); }
.ref:active { transform:translateY(1px); }
.ref .n { font-size:58px; font-weight:700; line-height:1; min-width:70px; font-variant-numeric:tabular-nums; }
.ref .k { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); }
.ref .lbl { font-size:17px; font-weight:700; color:var(--ink); margin-top:6px; }
.ref .count { font-size:58px; font-weight:700; line-height:1; letter-spacing:-.02em;
  color:var(--warn-500); font-variant-numeric:tabular-nums; margin-top:16px; }
.ref .count .u { font-size:15px; font-weight:600; color:var(--muted); margin-left:8px; }
.ref .sub { font-size:13px; color:var(--muted); margin-top:14px; }
.ref.await { border-top:3px solid var(--warn-500); box-shadow:0 6px 18px rgba(180,35,24,.12); }
.ref.await:hover { background:var(--warn-50); border-color:var(--warn-100); box-shadow:0 10px 26px rgba(180,35,24,.18); }
.ref.await .n { color:var(--warn-500); }
.ref.pending-print { border-top:3px solid var(--primary); box-shadow:0 6px 18px rgba(21,96,127,.1); }
.ref[hidden] { display:none; }
.ref.pending-print .count { color:var(--primary); }
.ref.pending-print:hover { background:var(--primary-50); border-color:var(--primary-100);
  box-shadow:0 10px 26px rgba(21,96,127,.16); }
.refcol.has-pending-print .ref { min-height:0; padding:var(--s4) var(--s6); }
.refcol.has-pending-print .ref-content { width:100%; display:grid;
  grid-template-columns:90px minmax(0, 1fr); grid-template-areas:"count heading" "count sub";
  align-items:center; column-gap:var(--s4); }
.refcol.has-pending-print .ref-heading { grid-area:heading; }
.refcol.has-pending-print .ref .count { grid-area:count; margin-top:0; }
.refcol.has-pending-print .ref .count .u { display:none; }
.refcol.has-pending-print .ref .sub { grid-area:sub; margin-top:3px; }
.refcol.has-pending-print .ref .k { display:none; }
.refcol.has-pending-print .ref .lbl { margin-top:0; }
.ref.attn .n { color:var(--danger); }
.ref.attn.zero .n { color:var(--faint); }
.ref .flag { margin-left:auto; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--danger); background:var(--danger-50); padding:3px 9px; border-radius:var(--r-pill); }
.ref.zero .flag { display:none; }

/* day-group separator row + Gujarati name under the roman spelling */
.table tr.daygroup td { background:var(--surface-2); padding:9px var(--s5); }
.table tr.daygroup:hover { background:var(--surface-2); cursor:default; }
.daygroup .d { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.daygroup .c { color:var(--faint); font-weight:600; margin-left:8px; }
.c-name .roman { color:var(--muted); font-weight:500; font-size:12.5px; display:block; margin-top:1px; }

@media (max-width:860px) {
  .taskgrid { grid-template-columns:1fr; gap:var(--s3); }
  .refcol { flex-direction:row; }
  .refcol .ref { flex:1; }
  .ref { min-height:120px; padding:var(--s5) var(--s6); }
  .ref .n { font-size:42px; min-width:52px; }
  .ref .count { font-size:42px; }
  .tile.file .file-main { grid-template-columns:1fr; gap:var(--s4); }
  .tile.file .foot { justify-content:flex-start; min-height:auto; }
  .tile.file .count { font-size:32px; }
}

@media (max-width:560px) {
  .refcol { flex-direction:column; }
  .refcol.has-pending-print .ref { min-height:116px; }
}