/* =====================================================================
   FDCA Gujarat — Quarterly Reports Portal
   Light blue on white.  One stylesheet, no framework, no build step.
   ===================================================================== */

:root {
  --blue-900: #0b3c5d;
  --blue-800: #0b4a6f;
  --blue-700: #14618f;
  --blue-600: #1b7ab5;
  --blue-500: #2e8bc0;
  --blue-300: #7fb9dd;
  --blue-200: #b3d4ea;
  --blue-100: #d6eaf8;
  --blue-50:  #eff7fd;
  --blue-25:  #f7fbfe;

  --white: #ffffff;
  --ink:   #14303f;
  --ink-2: #3d5a6b;
  --muted: #5f7a8a;
  --line:  #d8e6f0;

  --ok:      #1a7f52;
  --ok-bg:   #e4f5ec;
  --warn:    #a76a00;
  --warn-bg: #fdf1de;
  --bad:     #b3261e;
  --bad-bg:  #fdeceb;

  --radius:   10px;
  --radius-sm: 7px;
  --shadow:   0 1px 2px rgba(11, 60, 93, .06), 0 6px 18px rgba(11, 60, 93, .07);
  --shadow-sm:0 1px 2px rgba(11, 60, 93, .08);

  --font: "Segoe UI", Roboto, "Noto Sans Gujarati", system-ui, -apple-system, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--blue-25);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-700); }
a:hover { color: var(--blue-900); }

h1, h2, h3, h4 { margin: 0 0 .5rem; color: var(--blue-900); line-height: 1.25; font-weight: 650; }
h1 { font-size: clamp(1.3rem, 1.05rem + .8vw, 1.7rem); }
h2 { font-size: clamp(1.1rem, .95rem + .5vw, 1.3rem); }
h3 { font-size: 1.02rem; }

p { margin: 0 0 .75rem; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.mt { margin-top: 1rem; }
.mt2 { margin-top: 1.75rem; }

/* ---------------------------------------------------------- top bar */
.topbar {
  background: linear-gradient(180deg, var(--blue-800), var(--blue-700));
  color: #fff;
  box-shadow: 0 2px 10px rgba(11, 60, 93, .18);
  position: sticky; top: 0; z-index: 50;
}
/* Title row: the site name at the left, the account at the right.  The
   menu is NOT here — it has its own row beneath, so it can be centred on
   the page rather than centred in whatever space these two leave over. */
.topbar-in {
  max-width: 1400px; margin: 0 auto; padding: .5rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff; }
.brand:hover { color: #fff; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 9px; flex: none;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  display: grid; place-items: center;
  font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.brand-txt strong { display: block; font-size: 1rem; font-weight: 650; letter-spacing: .01em; }
.brand-txt span   { display: block; font-size: .74rem; opacity: .8; }

/* Menu row: full-bleed band under the title, links centred within it. */
.topnav { border-top: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.08); }
.topnav-in {
  max-width: 1400px; margin: 0 auto; padding: .15rem 1.25rem;
  display: flex; gap: .2rem; justify-content: center; align-items: center; flex-wrap: wrap;
}
.topnav a {
  color: #eaf4fb; text-decoration: none; padding: .45rem .95rem;
  border-radius: 7px 7px 0 0; font-size: .9rem; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.topnav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.topnav a.on {
  background: rgba(255,255,255,.16); color: #fff; font-weight: 620;
  border-bottom-color: #fff;
}

/* ------------------------------------------------- the account button */
.acct { position: relative; flex: none; }
.acct > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: 999px; font-size: .87rem; color: #eaf4fb;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08);
  white-space: nowrap; max-width: 15rem;
}
.acct > summary::-webkit-details-marker { display: none; }
.acct > summary:hover { background: rgba(255,255,255,.18); color: #fff; }
.acct[open] > summary { background: rgba(255,255,255,.2); color: #fff; }
.acct-name { overflow: hidden; text-overflow: ellipsis; }
.acct-caret { font-size: .7rem; opacity: .8; }

.acct-menu {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 60;
  min-width: 15rem; background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .35rem; text-align: left;
}
.acct-head { padding: .5rem .6rem .55rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
.acct-head strong { display: block; color: var(--blue-900); font-size: .92rem; }
.acct-head span { display: block; font-size: .78rem; color: var(--muted); }
.acct-role {
  display: inline-block !important; margin-top: .25rem; padding: .05rem .45rem;
  border-radius: 999px; background: var(--blue-100); color: var(--blue-800);
  font-size: .7rem !important; font-weight: 620;
}
.acct-menu a {
  display: block; padding: .45rem .6rem; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink); font-size: .88rem;
}
.acct-menu a:hover { background: var(--blue-50); color: var(--blue-900); }

/* ------------------------------------------------------------ layout */
.page { max-width: 1400px; margin: 0 auto; padding: 1.4rem 1.25rem 4rem; }
.page-narrow { max-width: 900px; }

.pagehead { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.pagehead .grow { flex: 1 1 320px; min-width: 0; }
.pagehead p { margin: 0; color: var(--muted); }

.crumb { font-size: .82rem; color: var(--muted); margin-bottom: .3rem; }
.crumb a { text-decoration: none; }

/* ------------------------------------------------------------- cards */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.1rem;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin: -1.1rem -1.25rem 1rem; padding: .8rem 1.25rem;
  background: var(--blue-50);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head .grow { flex: 1 1 auto; }

.grid { display: grid; gap: 1rem; }
.grid-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* -------------------------------------------------------- stat tiles */
.stat {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1.05rem; box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--blue-500);
}
.stat .n { font-size: 1.75rem; font-weight: 680; color: var(--blue-800); line-height: 1.1; }
.stat .l { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat.ok  { border-top-color: var(--ok); }
.stat.warn{ border-top-color: var(--warn); }
.stat.bad { border-top-color: var(--bad); }

/* ------------------------------------------------------------ badges */
.badge {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent;
}
.badge-ok    { background: var(--ok-bg);   color: var(--ok);   border-color: #b9e3cd; }
.badge-draft { background: var(--warn-bg); color: var(--warn); border-color: #f2d9ae; }
.badge-empty { background: #f1f4f6;        color: var(--muted);border-color: #dde5ea; }
.badge-info  { background: var(--blue-100);color: var(--blue-800); border-color: var(--blue-200); }
.badge-bad   { background: var(--bad-bg);  color: var(--bad);  border-color: #f3c9c6; }

/* ----------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .45rem .95rem; border-radius: var(--radius-sm);
  border: 1px solid var(--blue-200); background: var(--white); color: var(--blue-800);
  font: inherit; font-size: .88rem; font-weight: 550; text-decoration: none;
  cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--blue-50); border-color: var(--blue-300); color: var(--blue-900); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.btn-primary { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.btn-primary:hover { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.btn-danger { color: var(--bad); border-color: #f0c4c1; }
.btn-danger:hover { background: var(--bad-bg); border-color: #e0a9a5; color: var(--bad); }
.btn-sm { padding: .25rem .6rem; font-size: .8rem; }
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }
.btnrow { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------- forms */
label { display: block; font-size: .85rem; font-weight: 550; color: var(--ink); margin-bottom: .25rem; }
.hint { font-size: .78rem; color: var(--muted); margin-top: .2rem; }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], select, textarea {
  width: 100%; padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: .9rem; color: var(--ink); background: var(--white);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(46, 139, 192, .16);
}
input[readonly], input:disabled, select:disabled, textarea:disabled {
  background: var(--blue-25); color: var(--ink); cursor: default;
}
textarea { min-height: 4.5rem; resize: vertical; }
input[type=number] { text-align: right; }

.fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; }
.fieldset > legend {
  padding: 0; margin: 0 0 .1rem; font-size: .95rem; font-weight: 650; color: var(--blue-800);
}
.fieldset .legend-note { font-size: .8rem; color: var(--muted); margin-bottom: .6rem; }
.fieldset-body {
  display: grid; gap: .8rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  background: var(--blue-25); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .95rem 1.05rem;
}
.field.full { grid-column: 1 / -1; }
.field.calc input { background: var(--blue-100); font-weight: 620; color: var(--blue-800); }
.field.auto  input { background: #fffdf3; }
.field-flag { font-size: .7rem; font-weight: 600; color: var(--blue-600); text-transform: uppercase; letter-spacing: .04em; }
.field-flag.flag-warn { color: var(--warn); }

/* Opening balances.  A figure still continuing the previous quarter reads
   as ordinary — a faint blue, the same language as the other pre-filled
   boxes.  One the office has overtyped is amber and says so, because a
   restated balance changes the State totals. */
.field.carried  input { background: var(--blue-25); }
.field.restated input { background: var(--warn-bg); border-color: #e3c187; }
.field.restated input:focus { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(167, 106, 0, .12); }
.hint-carry    { color: var(--blue-700); }
.hint-restated { color: var(--warn); font-weight: 600; }
.linecard dl > div.restated { background: var(--warn-bg); border-radius: var(--radius-sm);
  margin: -.15rem -.4rem; padding: .15rem .4rem; }

/* ------------------------------------------------------------ tables */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
table.data { border-collapse: collapse; width: 100%; font-size: .86rem; }
table.data th, table.data td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data thead th {
  background: var(--blue-100); color: var(--blue-800); font-weight: 650;
  position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--blue-200);
  white-space: nowrap;
}
table.data tbody tr:nth-child(even) { background: var(--blue-25); }
table.data tbody tr:hover { background: var(--blue-50); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr.totalrow td { background: var(--blue-100); font-weight: 660; border-top: 2px solid var(--blue-200); }
table.data td.stick, table.data th.stick {
  position: sticky; left: 0; background: var(--white); z-index: 1;
  border-right: 1px solid var(--line); font-weight: 550;
}
table.data thead th.stick { background: var(--blue-100); z-index: 3; }
table.data tbody tr:nth-child(even) td.stick { background: var(--blue-25); }
table.data tbody tr:hover td.stick { background: var(--blue-50); }

/* ---------------------------------------------------------- progress */
.bar { height: 7px; background: var(--blue-100); border-radius: 99px; overflow: hidden; min-width: 90px; }
.bar > i { display: block; height: 100%; background: var(--blue-500); border-radius: 99px; }
.bar.full > i { background: var(--ok); }
.bar.none > i { background: var(--bad); }

/* ----------------------------------------------------------- notices */
.note {
  border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem;
  border: 1px solid var(--blue-200); background: var(--blue-50); color: var(--blue-900);
  font-size: .89rem;
}
.note strong { font-weight: 650; }
.note-ok   { background: var(--ok-bg);   border-color: #b9e3cd; color: #14603e; }
.note-warn { background: var(--warn-bg); border-color: #f2d9ae; color: #7d4f00; }
.note-bad  { background: var(--bad-bg);  border-color: #f3c9c6; color: #8c1d17; }

/* --------------------------------------------------------- form list */
.formlist { display: grid; gap: .6rem; }
.formrow {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .7rem .95rem;
  text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s;
}
.formrow:hover { border-color: var(--blue-300); box-shadow: var(--shadow); color: inherit; }
.formrow .tag {
  flex: none; min-width: 92px; text-align: center;
  background: var(--blue-100); color: var(--blue-800);
  border-radius: var(--radius-sm); padding: .3rem .5rem;
  font-size: .78rem; font-weight: 680; letter-spacing: .02em;
}
.formrow .grow { flex: 1 1 240px; min-width: 0; }
.formrow .grow strong { display: block; font-weight: 600; }
.formrow .grow span { display: block; font-size: .8rem; color: var(--muted); }

/* -------------------------------------------------------- line items */
.linecard {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); padding: .85rem 1rem; margin-bottom: .7rem;
}
.linecard .lhead {
  display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap;
  margin: -.85rem -1rem .7rem; padding: .5rem 1rem;
  background: var(--blue-50); border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.linecard .lhead .n { font-weight: 680; color: var(--blue-800); }
.linecard .lhead .grow { flex: 1 1 auto; }
.linecard dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .5rem .9rem; margin: 0; }
.linecard dt { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.linecard dd { margin: 0 0 .3rem; font-size: .88rem; word-break: break-word; }

/* ------------------------------------------------------------ login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: linear-gradient(160deg, var(--blue-100), var(--blue-25) 55%, var(--white)); }
.login-card { width: 100%; max-width: 400px; background: var(--white);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 1.9rem 1.7rem; }
.login-card h1 { font-size: 1.25rem; margin-bottom: .1rem; }
.login-card .sub { color: var(--muted); font-size: .85rem; margin-bottom: 1.4rem; }
.login-card .fld { margin-bottom: .9rem; }
.login-foot { text-align: center; margin-top: 1.4rem; font-size: .78rem; color: var(--muted); }

/* --------------------------------------------------------- utilities */
.toolbar {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .9rem; margin-bottom: 1.1rem;
}
.toolbar .grow { flex: 1 1 auto; }
.toolbar select, .toolbar input[type=text] { width: auto; min-width: 200px; }

.sticky-actions {
  position: sticky; bottom: 0; z-index: 20;
  background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  margin: 1.2rem -1.25rem -4rem; padding: .8rem 1.25rem;
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
}
.sticky-actions .grow { flex: 1 1 auto; font-size: .84rem; color: var(--muted); }

.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.legend b { font-weight: 600; }

.footer { text-align: center; padding: 1.5rem 1rem 2.5rem; color: var(--muted); font-size: .78rem; }

/* ------------------------------------------------------------ tablet */
@media (max-width: 820px) {
  /* Narrow screens: the menu scrolls sideways rather than wrapping into
     a tall stack that pushes the page down. */
  .topbar-in { padding: .5rem .9rem; }
  .topnav-in { padding: .1rem .9rem; justify-content: flex-start;
               flex-wrap: nowrap; overflow-x: auto; }
  .brand-txt span { display: none; }
  .acct > summary { max-width: 9rem; }
  .page { padding: 1rem .9rem 3rem; }
  .card { padding: .95rem 1rem; }
  .card-head { margin: -.95rem -1rem .9rem; padding: .7rem 1rem; }
  .sticky-actions { margin-left: -.9rem; margin-right: -.9rem; padding: .7rem .9rem; }
  .fieldset-body { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); padding: .8rem; }
}

/* ------------------------------------------------------------- print */
@media print {
  @page { margin: 12mm; }
  body { background: #fff; font-size: 10pt; }
  .topbar, .toolbar, .sticky-actions, .btnrow, .noprint { display: none !important; }
  .page { max-width: none; padding: 0; }
  .card { border: 1px solid #bbb; box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  .tablewrap { overflow: visible; border: 0; }
  table.data { font-size: 8.5pt; }
  table.data thead th { position: static; background: #dbe9f4 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.data tr.totalrow td { background: #dbe9f4 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pagebreak { break-before: page; page-break-before: always; }
}

/* =====================================================================
   Analytics — tabs, charts, meters, deltas
   Charts are inline SVG drawn by app/chart.php, so everything below is
   plain CSS on SVG elements.  One blue: each chart plots one measure.
   ===================================================================== */

.tabrow {
  display: flex; gap: .35rem; flex-wrap: wrap; margin: 0 0 1rem;
  border-bottom: 1px solid var(--line); justify-content: center;
}
.tab {
  padding: .5rem .95rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .9rem;
  border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { background: var(--blue-50); color: var(--blue-900); }
.tab.on { background: var(--white); border-color: var(--line); color: var(--blue-800); }

.pickrow { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.pickrow label { margin: 0; white-space: nowrap; font-size: .85rem; color: var(--muted); }
.pickrow select { max-width: 22rem; }

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ---------------------------------------------------------- the SVG */
.chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.chart .c-grid { stroke: var(--line); stroke-width: 1; }
.chart .c-bar { fill: var(--blue-600); }
.chart .c-bar-nil { fill: var(--blue-300); }
.chart .c-row:hover .c-bar { fill: var(--blue-800); }
.chart .c-cat { font-size: 12px; fill: var(--ink-2); }
.chart .c-val { font-size: 12px; font-weight: 650; fill: var(--ink); dominant-baseline: alphabetic; }
.chart .c-tick { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart .c-line { fill: none; stroke: var(--blue-600); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .c-dot { fill: var(--blue-600); stroke: var(--white); stroke-width: 2; }
.chart .c-dot.last { fill: var(--blue-800); }
.chart .c-hit { fill: transparent; }
.chart .c-pt:hover .c-dot { fill: var(--blue-900); }

.spark { display: block; overflow: visible; }
.spark .sp-line { fill: none; stroke: var(--blue-300); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .sp-dot { fill: var(--blue-600); }

.statfoot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.stat .of { font-size: .95rem; font-weight: 500; color: var(--muted); }

/* --------------------------------------------------------- the delta */
.delta { font-size: .76rem; font-weight: 620; white-space: nowrap; }
.delta-good { color: var(--ok); }
.delta-bad  { color: var(--bad); }
.delta-flat { color: var(--muted); }

/* --------------------------------------------------------- the meter */
.meter { padding: .2rem 0 .4rem; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.meter-label { font-weight: 640; color: var(--blue-900); }
.meter-figure { font-size: .88rem; font-variant-numeric: tabular-nums; }
.meter-track {
  margin: .4rem 0 .3rem; height: 12px; border-radius: 999px;
  background: var(--blue-100); overflow: hidden;
}
.meter-track i { display: block; height: 100%; background: var(--blue-600); border-radius: 999px; }
.meter-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.meter-pct { font-size: 1.1rem; font-weight: 680; color: var(--blue-800); }

/* Status always arrives with a word, never as colour on its own. */
.tone { font-size: .78rem; font-weight: 620; padding: .1rem .5rem; border-radius: 999px; }
.tone-ok   { color: var(--ok);   background: var(--ok-bg); }
.tone-warn { color: var(--warn); background: var(--warn-bg); }
.tone-bad  { color: var(--bad);  background: var(--bad-bg); }
.tone-none { color: var(--muted); background: var(--blue-50); }

/* Calculated rows sit a shade back from the figures they come from. */
table.data tr.calcrow td { background: var(--blue-25); font-style: italic; }
table.data tr.calcrow td:first-child { font-style: normal; color: var(--ink-2); }

details > summary { cursor: pointer; font-weight: 600; color: var(--blue-700); padding: .35rem 0; }
details > summary:hover { color: var(--blue-900); }

@media print {
  .tabrow, .pickrow, details > summary { display: none !important; }
  details[open] > *, details > * { display: block !important; }
  .chart { page-break-inside: avoid; }
  .card { page-break-inside: avoid; }
}

/* =====================================================================
   Back links, the officer roster, and the quarter book
   ===================================================================== */

.btn-back { font-weight: 600; }
.btn-back span { margin-right: .15rem; }

/* ------------------------------------------------- officer roster */
table.rostertable td { padding: .3rem .4rem; vertical-align: middle; }
table.rostertable input,
table.rostertable select {
  width: 100%; min-width: 7rem; padding: .32rem .45rem; font-size: .88rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
}
table.rostertable input:focus,
table.rostertable select:focus { outline: 2px solid var(--blue-300); outline-offset: -1px; }
table.rostertable tr:has(input:placeholder-shown):hover { background: var(--blue-25); }

/* ------------------------------------------------- the quarter book */
.booktoc { margin: .3rem 0 0 1.1rem; padding: 0; }
.booktoc li { margin: .18rem 0; }
.booktoc a { text-decoration: none; }
.booktoc a:hover { text-decoration: underline; }
.booksec { scroll-margin-top: 4.5rem; }

@media print {
  .booksec { page-break-before: always; }
  .book-cover { page-break-after: always; }
  .booktoc a { color: var(--ink); }
  /* The book is wide — let long tables shrink rather than clip. */
  .booksec table.data { font-size: 8.5pt; }
  .booksec .tablewrap { overflow: visible; }
}

/* =====================================================================
   Quarter totals — the one-page summary put up for approval.
   Deliberately quiet: no cards, no shadows, no colour blocks. It has to
   read like a document, and print like one.
   ===================================================================== */

.totals-sheet {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 1.6rem 1.8rem 2rem; max-width: 1000px; margin: 0 auto;
}
.totals-head { text-align: center; border-bottom: 2px solid var(--blue-200); padding-bottom: .8rem; margin-bottom: 1.1rem; }
.totals-head h2 { margin: 0; font-size: 1.15rem; }
.totals-title { font-size: 1.05rem; font-weight: 650; color: var(--blue-700); }
.totals-sub { font-size: .9rem; color: var(--ink-2); }

/* Two forms side by side on a wide screen; one per column when printed. */
.totals-form { break-inside: avoid; page-break-inside: avoid; margin: 0 0 1.4rem; }
.totals-formhead {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--blue-200); padding-bottom: .3rem; margin-bottom: .5rem;
}
.totals-formhead h3 { margin: 0; flex: 1 1 auto; font-size: 1rem; }
.totals-cov { font-size: .78rem; font-weight: 620; padding: .08rem .5rem; border-radius: 999px; white-space: nowrap; }
.totals-cov.ok   { color: var(--ok);   background: var(--ok-bg); }
.totals-cov.part { color: var(--warn); background: var(--warn-bg); }

.totals-sub2 {
  font-size: .82rem; font-weight: 650; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin: .7rem 0 .2rem;
}
.totals-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.totals-table th { text-align: left; font-size: .8rem; color: var(--muted); font-weight: 600; padding: .2rem .5rem; }
.totals-table th.num, .totals-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.totals-table td { padding: .26rem .5rem; border-bottom: 1px solid var(--blue-50); }
.totals-table tr:last-child td { border-bottom: 0; }
.totals-table td.num { width: 9rem; white-space: nowrap; }
.totals-table tr.calcrow td { background: var(--blue-25); color: var(--ink-2); font-style: italic; }
.totals-table tr.calcrow td:first-child { font-style: normal; }
.totals-hidden { font-size: .8rem; color: var(--muted); margin-top: .35rem; }

/* ------------------------------------------------------- approval */
.totals-approve { margin-top: 2rem; border-top: 2px solid var(--blue-200); padding-top: 1rem; break-inside: avoid; }
.approve-note { font-size: .88rem; color: var(--ink-2); margin-bottom: 2.4rem; }
.approve-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.6rem; }
.approve-cell { font-size: .85rem; color: var(--ink-2); text-align: center; }
.approve-line { border-top: 1px solid var(--ink-2); margin-bottom: .3rem; }
.printonly { display: none; }

@media print {
  .totals-sheet { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .totals-table { font-size: 9.5pt; }
  .totals-form { margin-bottom: 1rem; }
  .printonly { display: inline; }
  .totals-hidden a { display: none; }
}

/* Manpower + the drill-down link on the totals sheet */
.totals-drill { font-size: .78rem; font-weight: 600; white-space: nowrap; }
td.gap-bad { color: var(--bad); font-weight: 650; }

/* A row of buttons that acts as a tab strip (form pickers, post filters). */
.tabstrip { justify-content: center; }

/* ------------------------------------------------------------- search */
.searchbar { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 1rem 1.1rem; margin-bottom: 1.1rem; }

.hit { background: #fff3bf; border-radius: 3px; padding: 0 .1em; }
.restype { font-size: .74rem; font-weight: 650; padding: .1rem .45rem; border-radius: 999px;
  background: var(--blue-100); color: var(--blue-800); white-space: nowrap; }
.resempty { text-align: center; padding: 2.4rem 1rem; color: var(--muted); }

/* A row whose figure is a snapshot, not a sum — see qra_period_row(). */
.aggnote {
  display: inline-block; margin-left: .4rem; padding: .02rem .4rem;
  border-radius: 999px; background: var(--warn-bg); color: var(--warn);
  font-size: .7rem; font-weight: 620; white-space: nowrap; cursor: help;
}

/* The period picker at the top of Search. */
.periodrow { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; }
.periodrow:last-child { margin-bottom: 0; }
.periodlbl { font-size: .82rem; font-weight: 600; color: var(--muted); margin-right: .2rem; }
.periodbar {
  background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: var(--radius);
  padding: .55rem .9rem; margin-bottom: 1rem; font-size: .9rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}

/* The word box grows to fill the line rather than forcing a row of its own. */

/* A roster line the portal added from the posted strength: post and
   appointment already chosen, only the name and contacts to type. */
table.rostertable tr.rosterwanted td { background: var(--warn-bg); }
table.rostertable tr.rosterwanted td:first-child { font-weight: 650; color: var(--warn); }

/* ---------------------------------------------------------------------
   Controls inside a one-line bar.
   The global form rule gives every input and select width:100%, which
   inside a flex row makes each one claim the whole line and wrap — that
   is what stacked the search bar.  These put them back to their own
   width so the row reads as a row.
   --------------------------------------------------------------------- */
.periodrow input[type="date"],
.periodrow input[type="search"],
.periodrow input[type="text"],
.periodrow select {
  width: auto;
  padding: .35rem .5rem;
  font-size: .88rem;
}
.periodrow input[type="date"] { flex: 0 0 auto; }
.periodrow select            { flex: 0 1 auto; max-width: 16rem; }

/* The words box is the one control that should take up the slack. */
.periodrow input[type="search"].findbox {
  flex: 1 1 20rem; min-width: 12rem; width: auto;
  padding: .4rem .6rem; font-size: .92rem;
}

/* The offer to bring last quarter's return forward. */
.carryoffer {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  background: var(--blue-50); border: 1px solid var(--blue-200);
  border-left: 4px solid var(--blue-600);
  border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: 1.1rem;
}
.carryoffer .grow { flex: 1 1 22rem; min-width: 0; }
.carryoffer p { margin: .3rem 0 0; font-size: .89rem; color: var(--ink-2); }