/* RC Family Grocery. Palette sampled from the logo mark. */
:root {
  --rc-red: #c8324a;
  --rc-red-dark: #a32740;
  --rc-blue: #34528f;
  --rc-blue-dark: #27406f;
  --rc-yellow: #fbc94a;
  --ink: #1c2434;
  --ink-soft: #5b6577;
  --line: #e2e6ee;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --ok: #1f7a4d;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(28, 36, 52, .08), 0 4px 16px rgba(28, 36, 52, .05);
  /* Wide enough that "Separated Employees" plus its count badge stays on one
     line at the current nav font size. */
  --side-w: 252px;
}

* { box-sizing: border-box; }

/* The browser hides [hidden] with a UA rule, but ANY author display rule beats
   it: `label { display: block }` alone was enough to keep hidden filters on
   screen. !important is the standard guard, and it applies to every element
   this app hides rather than leaving the next one to be found by eye. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; align-items: stretch; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--side-w);
  flex: 0 0 var(--side-w);
  background: var(--rc-blue-dark);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
/* The logo is a JPEG with a white background, so it sits on a white card
   rather than directly on the dark sidebar. */
.side-brand {
  background: #fff;
  margin: 14px;
  padding: 12px 10px;
  border-radius: 10px;
  text-align: center;
}
.brand-logo { max-width: 100%; height: auto; display: block; margin: 0 auto; }

.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; }
.nav-item, .side-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: 0;
  background: none;
  padding: 11px 12px;
  border-radius: 8px;
  font: 600 15px 'Segoe UI', system-ui, sans-serif;
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  text-align: left;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
}
.nav-item svg, .side-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item:hover, .side-btn:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.nav-item.active {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-left-color: var(--rc-yellow);
}

/* ---------- Sidebar sub-menu ---------- */
.nav-chevron { margin-left: auto; transition: transform .18s; }
.nav-parent[aria-expanded="false"] .nav-chevron { transform: rotate(-90deg); }
/* The parent is a disclosure, not a destination. It highlights only to show
   which section the open page belongs to. */
.nav-parent.in-section { color: #fff; }
.nav-parent.in-section svg:first-of-type { color: var(--rc-yellow); }

.nav-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; }
.nav-parent[aria-expanded="false"] + .nav-sub { display: none; }
.nav-child {
  padding: 8px 12px 8px 41px;
  font-size: 14px;
  font-weight: 500;
  position: relative;
}
/* Guide rail connecting the children to their parent. */
.nav-child::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .18);
}
.nav-child.active::before { background: var(--rc-yellow); width: 2px; }
.nav-badge {
  margin-left: auto;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, .16);
  padding: 1px 7px;
  border-radius: 20px;
}
.nav-child.active .nav-badge { background: rgba(0, 0, 0, .22); }

.side-foot {
  margin-top: auto;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-btn { font-weight: 500; font-size: 14px; }

/* Where the data currently stands. Payroll should never leave someone
   guessing whether their work was saved. */
.sync-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, .62);
  line-height: 1.35;
}
.sync-status::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}
.sync-status.is-pending::before { background: var(--rc-yellow); }
.sync-status.is-offline::before { background: var(--rc-red); }
.sync-status.is-pending { color: var(--rc-yellow); }
.sync-status.is-offline { color: #ff9aa8; }
a.side-btn { text-decoration: none; box-sizing: border-box; }

/* ---------- Content column ---------- */
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(28, 36, 52, .04);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar h1 {
  margin: 0;
  font-size: 18px;
  color: var(--rc-blue);
  letter-spacing: .2px;
}
/* Shown only once the sidebar becomes a drawer. */
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 12px;
  margin-left: -6px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--rc-blue);
  cursor: pointer;
}
.hamburger:hover { background: var(--bg); }
.hamburger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.scrim { display: none; }

main { padding: 24px; max-width: 1400px; width: 100%; margin: 0 auto; }
.panel { display: none; }
.panel.active { display: block; }

/* ---------- Layout ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2.tight, .grid-3.tight, .grid-name.tight { gap: 8px 14px; }
/* Last name, first name and a single-character initial. */
.grid-name { display: grid; grid-template-columns: 1fr 1fr 76px; gap: 20px; }
.grid-name input { text-align: left; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card h2 {
  margin: 0 0 16px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--rc-blue);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card.sticky { position: sticky; top: 20px; }
.count {
  background: var(--rc-blue);
  color: #fff;
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 12px;
  letter-spacing: 0;
}

/* ---------- Forms ---------- */
label {
  display: block;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.req { color: var(--rc-red); }

input, select {
  width: 100%;
  padding: 9px 11px;
  margin-top: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: 16px 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  text-transform: none;
  letter-spacing: 0;
}
input:focus, select:focus {
  outline: 0;
  border-color: var(--rc-blue);
  box-shadow: 0 0 0 3px rgba(52, 82, 143, .12);
}
/* Number inputs read left to right like every other field on the form. Table
   and payslip amounts stay right aligned, where a column is scanned. */
input[type="number"] { text-align: left; }
.input-row { display: flex; gap: 8px; align-items: stretch; }
.input-row .btn { margin-top: 5px; white-space: nowrap; }
.hint {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* Shown above the individual payroll form while an existing payslip is being
   edited, so it is clear a correction is in progress rather than a new slip. */
.edit-note {
  margin: 0 0 14px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rc-blue-dark);
  background: #eef2fb;
  border: 1px solid #cdd8f0;
  border-left: 3px solid var(--rc-blue);
  border-radius: var(--radius);
}
/* A hint that is a caution, not just guidance: the pending-migration notice. */
.hint.warn {
  color: var(--rc-red-dark);
  font-weight: 500;
}
/* On/off switch. Currently only the BIR-inclusion control on the employee
 * form; the base label rules turn text uppercase, which the switch text undoes. */
.toggle-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  margin: 4px 0 6px;
  text-transform: none;
  letter-spacing: 0;
}
.toggle-field input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  flex: 0 0 auto;
  position: relative;
  width: 42px;
  height: 24px;
  margin-top: 1px;
  background: var(--line);
  border-radius: 999px;
  transition: background .15s ease;
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(28, 36, 52, .35);
  transition: transform .15s ease;
}
.toggle-field input:checked + .toggle-track { background: var(--ok); }
.toggle-field input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); }
.toggle-field input:focus-visible + .toggle-track {
  outline: 2px solid var(--rc-blue);
  outline-offset: 2px;
}
.toggle-text { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.toggle-text .hint { font-weight: 400; margin-top: 3px; }

/* Small inline tag on a list row: this employee is off the BIR filing. */
.tag-off {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fdeef0;
  color: var(--rc-red-dark);
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

.search { margin: 0 0 12px; }

fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px 14px;
  margin: 0 0 14px;
}
legend {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--rc-blue);
  padding: 0 6px;
}

/* Fixed columns, not flex: the tags are different widths ("Taxable" against
   "Non-taxable"), and the deductions row has no tag at all, so a flex layout
   left every amount box at a different x. The grid lines up the amounts across
   all four fieldsets, and a row with no third child simply leaves it empty. */
.line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 96px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.line-row input, .line-row select { margin-top: 0; }
.tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 4px;
  white-space: nowrap;
  text-align: center;
}
/* The remove button keeps its own size rather than filling the tag column. */
.line-row .btn-icon { justify-self: start; }

/* Too narrow for three columns: the description would be squeezed to a few
   characters. Give it its own line, with the amount and tag beneath. */
@media (max-width: 620px) {
  .line-row {
    grid-template-columns: minmax(0, 1fr) 96px;
    row-gap: 6px;
    margin-bottom: 14px;
  }
  .line-row input[type="text"], .line-row select { grid-column: 1 / -1; }
}
.tag-tax { background: #fdeaed; color: var(--rc-red-dark); }
.tag-nontax { background: #e8f3ec; color: var(--ok); }

.form-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ---------- Buttons ---------- */
.btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 9px 16px;
  border-radius: 7px;
  font: 600 15px 'Segoe UI', system-ui, sans-serif;
  cursor: pointer;
  transition: .15s;
}
.btn:hover { border-color: var(--rc-blue); color: var(--rc-blue); }
.btn-primary { background: var(--rc-red); border-color: var(--rc-red); color: #fff; }
.btn-primary:hover { background: var(--rc-red-dark); border-color: var(--rc-red-dark); color: #fff; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 11px; font-size: 13.5px; }
.btn-icon {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.btn-icon:hover { background: var(--bg); color: var(--rc-blue); }
.btn-icon.danger:hover { background: #fdeaed; color: var(--rc-red); }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: 15px; }
table.list th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--line);
  padding: 8px 10px;
  white-space: nowrap;
}
table.list td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
table.list tbody tr:hover { background: #fafbfd; }
table.list .num { text-align: right; font-variant-numeric: tabular-nums; }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; }
/* Secondary line inside a table row. Kept separate from the payslip's .ps-note
   so app sizing and payslip sizing can move independently. */
.row-note {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-top: 2px;
  font-weight: 400;
}
.pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.pill-full { background: #e9eef8; color: var(--rc-blue); }
.pill-part { background: #fff4d9; color: #8a6300; }
.empty { color: var(--ink-soft); font-size: 14px; text-align: center; padding: 24px 0; margin: 0; }

/* ---------- Contribution preview ---------- */
.contrib-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.contrib-preview:empty { display: none; }
.contrib-preview div { background: #fbfcfe; padding: 9px 11px; }
.contrib-preview span {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink-soft);
  font-weight: 600;
}
.contrib-preview strong { font-size: 16px; color: var(--rc-blue); font-variant-numeric: tabular-nums; }

/* Batch payroll: who a run will cover, shown before the button is pressed. */
.batch-preview {
  margin: 12px 0 4px;
  padding: 11px 13px;
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.batch-preview:empty { display: none; }
.batch-line { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.batch-line + .batch-line { margin-top: 7px; }
.batch-line strong { color: var(--rc-blue); }
.batch-skip { color: var(--ink-soft); font-size: 12.5px; }
.batch-preview .empty { margin: 0; padding: 0; text-align: left; }

/* BIR 1601-C form lines: a narrow number column beside each line label. */
.rp-1601form .c1601-no { width: 34px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rp-1601form td { padding: 6px 10px; }

/* ---------- Live breakdown ---------- */
.breakdown table { width: 100%; border-collapse: collapse; font-size: 15px; }
.breakdown td { padding: 6px 0; }
.breakdown td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.breakdown .bd-section td {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--rc-blue);
  border-bottom: 2px solid var(--line);
  padding: 14px 0 5px;
}
.breakdown .bd-sub td { color: var(--ink-soft); font-size: 13.5px; padding-left: 14px; }
.breakdown .bd-total td {
  font-weight: 700;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.breakdown .bd-net {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--rc-blue);
  color: #fff;
  border-radius: 8px;
}
.breakdown .bd-net span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.breakdown .bd-net strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.breakdown .bd-zero td { color: #9aa3b2; }

/* ---------- Payslips page: list beside preview ---------- */
/* The list track must fit its table without a horizontal scrollbar: the row
   actions are the last column, and a clipped action button is unclickable
   where it appears to be. Sized to hold employee, period, net pay and both
   buttons on one line. */
.records-layout {
  display: grid;
  grid-template-columns: minmax(440px, 580px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
/* The period reads as supporting detail next to the name and the amount.
   min-width holds a full "Jul 26 to Aug 10, 2026" on one line; the rarer
   cross-year label may wrap, and carries the full date as a tooltip. */
.col-period {
  color: var(--ink-soft);
  font-size: 14px;
  min-width: 160px;
}
/* The list stays put while a long payslip scrolls beside it. */
.records-list { position: sticky; top: 20px; }
/* Establishes a container so the payslip can respond to the width of ITS
   column rather than the viewport, which stays wide on a desktop. */
.records-view { container-type: inline-size; }

/* Filters sit above the list they act on, separated from the table so the
   controls do not read as part of the data. */
.rec-filters {
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.rec-filters label { margin-bottom: 4px; }
/* Bottom-aligned so the button sits on the baseline of the select beside it. */
.rec-clear { display: flex; align-items: flex-end; padding-bottom: 1px; }

.row-selected { background: #eef2fa !important; }
.row-selected td:first-child { box-shadow: inset 3px 0 0 var(--rc-blue); }

.placeholder-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  text-align: center;
}
.placeholder-icon {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.placeholder-card .empty { padding-top: 10px; max-width: 260px; }

/* Once the preview column is narrower than the payslip's two-column body,
   stack earnings above deductions instead of crushing them.
   align-items must be reset: .ps-cols sets flex-start, which governs the
   horizontal axis once the direction flips and would leave each stacked table
   only as wide as its own text.
   The selector is deliberately two levels deep: PAYSLIP_CSS is injected after
   this stylesheet, so a bare `.ps-cols` would lose to its base rule on source
   order. Container queries add no specificity of their own. */
@container (max-width: 640px) {
  .records-view .ps-cols { flex-direction: column; gap: 16px; align-items: stretch; }
}

/* ---------- Payslip ---------- */
.payslip-host { margin-top: 0; }
.payslip-toolbar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
/* The .payslip / .ps-* rules live in js/payslip.js (PAYSLIP_CSS) so the same
   styles can be inlined into downloaded payslips. They are injected at boot. */
.payslip { border: 1px solid var(--line); box-shadow: var(--shadow); }

/* ---------- Separation dialog ---------- */
.modal {
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  width: min(420px, calc(100vw - 32px));
  box-shadow: 0 10px 50px rgba(15, 22, 38, .3);
  color: var(--ink);
}
.modal::backdrop { background: rgba(15, 22, 38, .5); }
.modal form { padding: 22px; }
.modal h2 {
  margin: 0 0 4px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--rc-blue);
}
.modal-sub {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--ink-soft);
}
.modal .form-actions { margin-top: 16px; }

.pad-b { padding-bottom: 10px; }
.narrow { max-width: 760px; }

/* Separated rows read as archival, not active. */
.pill-sep { background: #f0f1f4; color: #6b7280; }
/* Last few days before a soft-deleted record is purged for good. */
.pill-urgent { background: #fdeaed; color: var(--rc-red-dark); }

/* ---------- Sign-in and admin gate ----------
   One design serves both: a brand panel beside the form, stacking to a compact
   header on small screens. */
.gate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background:
    radial-gradient(60rem 60rem at 12% 18%, rgba(200, 50, 74, .38), transparent 60%),
    radial-gradient(46rem 46rem at 88% 88%, rgba(251, 201, 74, .22), transparent 62%),
    var(--rc-blue-dark);
  z-index: 50;
}

.gate-panel {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: min(1020px, 100%);
  background: var(--surface);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(8, 14, 30, .45);
  margin: auto;
}
/* The noscript fallback has no brand panel. */
.gate-panel-solo { grid-template-columns: 1fr; width: min(420px, 100%); }

/* ---- brand side ---- */
.gate-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 52px 46px;
  color: #fff;
  background:
    radial-gradient(30rem 30rem at 120% 0%, rgba(200, 50, 74, .55), transparent 60%),
    var(--rc-blue);
}
/* A thin brand rule down the join, picking up the yellow from the logo. */
.gate-brand::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: var(--rc-yellow);
}
/* The logo is a JPEG on white, so it sits on a light chip rather than
   straight on the blue. */
/* The chip spans the brand column so the logo can run as large as the panel
   allows, rather than being boxed into a small card. */
.gate-mark {
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  align-self: stretch;
  box-shadow: 0 6px 20px rgba(8, 14, 30, .25);
}
.gate-logo { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.gate-brand-text { margin-top: auto; }
.gate-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rc-yellow);
}
.gate-title {
  margin: 7px 0 0;
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -.4px;
  color: #fff;
}
.gate-blurb {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
  max-width: 32ch;
}

/* ---- form side ---- */
.gate-form { display: flex; align-items: center; padding: 52px 46px; }
.gate-form-inner { width: 100%; }
.gate-heading { margin: 0; font-size: 26px; color: var(--ink); letter-spacing: -.3px; }
.gate-sub {
  margin: 8px 0 28px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.gate-form label { margin-bottom: 18px; }

/* Input with a leading icon, and a reveal button on the password. */
.field { position: relative; display: block; margin-top: 7px; }
.field input { margin-top: 0; padding-left: 44px; height: 52px; }
.field:has(.field-eye) input { padding-right: 48px; }
.field-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.field input:focus ~ .field-icon { stroke: var(--rc-blue); }

.field-eye {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.field-eye:hover { background: var(--bg); color: var(--rc-blue); }
.field-eye svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The icon shows the action, not the state: closed eye means "hide it again". */
.field-eye .eye-hide { display: none; }
.field-eye[aria-pressed="true"] .eye-show { display: none; }
.field-eye[aria-pressed="true"] .eye-hide { display: block; }

.gate-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #fdeaed;
  border-left: 3px solid var(--rc-red);
  border-radius: 0 7px 7px 0;
  color: var(--rc-red-dark);
  font-size: 13px;
  line-height: 1.45;
}
.gate-btn { width: 100%; height: 52px; font-size: 16.5px; margin-top: 2px; }
.gate-back {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-soft);
}
.gate-back:hover { color: var(--rc-blue); }

@media (max-width: 760px) {
  .gate { padding: 0; align-items: stretch; }
  .gate-panel {
    grid-template-columns: 1fr;
    /* auto then 1fr: the brand row sizes to its content and the form takes the
       rest. Without this the two rows split the height evenly and the header
       stretches to a third of the screen. */
    grid-template-rows: auto 1fr;
    border-radius: 0;
    width: 100%;
    box-shadow: none;
    min-height: 100%;
  }
  /* The brand panel becomes a compact header rather than a lost half-screen. */
  .gate-brand {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 20px;
  }
  .gate-brand::after { top: auto; left: 0; height: 4px; width: auto; }
  /* Back to a compact chip beside the title, not a full-width band. */
  .gate-mark { padding: 9px 11px; align-self: center; flex: 0 0 auto; }
  .gate-logo { width: 118px; }
  .gate-brand-text { margin-top: 0; }
  .gate-eyebrow { font-size: 10.5px; letter-spacing: 1.2px; }
  .gate-title { font-size: 21px; }
  .gate-blurb { display: none; }
  .gate-form { padding: 30px 22px 40px; align-items: flex-start; }
}

/* ================= Admin page =================
   The admin page reuses the app shell (.shell, .sidebar, .content, .topbar).
   Only its content styling lives here. */
.admin-main { max-width: 900px; }
.admin-sec { display: none; }
.admin-sec.active { display: block; }
.admin-sec .card { margin-bottom: 20px; }
/* Size comes from the `.admin-sec p` rule below; this only sets the intro look. */
.lede { margin: -6px 0 18px; color: var(--ink-soft); }

/* Reading typography for the admin page. Matches the app's base size, with a
   looser line height because this page is prose rather than forms and tables. */
.admin-sec p, .admin-sec li { font-size: 16px; line-height: 1.65; }
.admin-sec code {
  background: #eef1f7;
  border-radius: 4px;
  padding: 1px 5px;
  font: 13.5px ui-monospace, 'Cascadia Code', Consolas, monospace;
  color: var(--rc-blue-dark);
}
/* Scoped so the payroll app's own tables keep their compact sizing. */
.admin-sec table.list { font-size: 15px; }
.admin-sec .card h2 { font-size: 16px; }

/* ---------- Workflow steps ---------- */
.flow { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.flow > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 22px 46px;
  border-left: 2px solid var(--line);
  margin-left: 15px;
}
.flow > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.flow > li::before {
  content: counter(step);
  position: absolute;
  left: -16px;
  top: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rc-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Steps that happen outside this system read differently. */
.flow > li.flow-external::before { background: var(--ink-soft); }
.flow h3 { margin: 3px 0 6px; font-size: 16.5px; color: var(--ink); }
.flow p { margin: 0 0 8px; }
.flow ul { margin: 0 0 8px; padding-left: 18px; }
.flow li ul li { margin-bottom: 4px; }
.flow-note {
  background: #fffaed;
  border-left: 3px solid var(--rc-yellow);
  padding: 10px 13px;
  border-radius: 0 6px 6px 0;
}
.flow-note, .admin-sec .flow-note { font-size: 14.5px; }
.flow-out, .admin-sec .flow-out {
  font-size: 13.5px;
  color: var(--ok);
  font-weight: 600;
}

.callout-card { border-left: 4px solid var(--rc-red); }
.callout-card p { margin: 0 0 8px; }
.callout-card p:last-child { margin-bottom: 0; }

/* ---------- Changelog ---------- */
.log-entry {
  display: flex;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.log-entry:first-child { border-top: 0; padding-top: 0; }
.log-meta { flex: 0 0 104px; }
.ver {
  display: inline-block;
  background: var(--rc-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.log-meta time { display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink-soft); }
.log-body { flex: 1; min-width: 0; }
.log-body h3 { margin: 2px 0 9px; font-size: 16.5px; color: var(--ink); }
.log-body ul { margin: 0; padding-left: 0; list-style: none; }
.log-body li { margin-bottom: 8px; }
.log-note {
  margin: 9px 0 0;
  color: var(--ink-soft);
  font-style: italic;
}
.log-note, .admin-sec .log-note { font-size: 13.5px; }
.ver { font-size: 13px; }
.log-meta time { font-size: 12.5px; }
.tag-add, .tag-chg, .tag-fix, .tag-rem {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: 1px;
}
.tag-add { background: #e8f3ec; color: var(--ok); }
.tag-chg { background: #e9eef8; color: var(--rc-blue); }
.tag-fix { background: #fdeaed; color: var(--rc-red-dark); }
.tag-rem { background: #f0f1f4; color: #6b7280; }

/* ---------- Documentation ---------- */
.doc-h {
  margin: 22px 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--ink-soft);
}
.doc-h:first-of-type { margin-top: 6px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.doc-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-table td:first-child { font-weight: 600; width: 38%; }
.doc-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-list { margin: 0; padding-left: 18px; }
.doc-list li { margin-bottom: 8px; line-height: 1.5; }

.callout {
  background: #f7f9fc;
  border-left: 3px solid var(--rc-blue);
  border-radius: 0 7px 7px 0;
  padding: 13px 15px;
  margin-top: 18px;
}
.callout-warn { background: #fffaed; border-left-color: var(--rc-yellow); }
.callout h4 {
  margin: 0 0 6px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--rc-blue);
}
.callout-warn h4 { color: #8a6300; }
.callout p { margin: 0 0 7px; }
.callout p, .admin-sec .callout p { font-size: 14.5px; }
.callout p:last-child { margin-bottom: 0; }
.callout .mono, .admin-sec .callout .mono {
  font: 13.5px ui-monospace, 'Cascadia Code', Consolas, monospace;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 11px;
  color: var(--ink);
}

@media (max-width: 720px) {
  .log-entry { flex-direction: column; gap: 8px; }
  .log-meta { flex: none; display: flex; align-items: center; gap: 10px; }
  .log-meta time { margin-top: 0; }
  .doc-table td:first-child { width: auto; }
}

/* ---------- Dashboard ---------- */
/* One rule for the spacing between every stacked block, rather than each
   block carrying its own margin and drifting out of step. */
#tab-dashboard > * + * { margin-top: 20px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--rc-blue);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.stat-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-soft);
}
.stat-value {
  display: block;
  font-size: 26px;
  color: var(--rc-blue);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
  line-height: 1.2;
}
/* Peso amounts run longer than a headcount, so they get a smaller size. */
.stat-money { font-size: 21px; }
.stat-note { display: block; font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

/* Alerts: things that need doing, worst first. */
.alert {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-soft);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
/* The container's own spacing handles the gap to the next block. */
#dashAlerts .alert:last-child { margin-bottom: 0; }
.alert-text { flex: 1; min-width: 0; }
.alert strong { display: block; font-size: 14.5px; }
.alert span { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; }
.alert .btn { white-space: nowrap; }
.alert-danger { border-left-color: var(--rc-red); }
.alert-danger strong { color: var(--rc-red-dark); }
.alert-warn { border-left-color: var(--rc-yellow); }
.alert-warn strong { color: #8a6300; }
.alert-info { border-left-color: var(--rc-blue); }
.alert-info strong { color: var(--rc-blue); }
.alert-ok { border-left-color: var(--ok); }
.alert-ok strong { color: var(--ok); }

.run-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.run-head strong { display: block; font-size: 16px; margin-top: 2px; }
.run-net { text-align: right; }
.run-net strong { color: var(--rc-blue); font-size: 22px; font-variant-numeric: tabular-nums; }

.row-click { cursor: pointer; }
.row-click:hover { background: #eef2fa; }

/* Bar chart, plain CSS so there is no library to depend on. */
.chart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  align-items: end;
  height: 180px;
  margin-bottom: 10px;
}
.chart-col { display: flex; flex-direction: column; height: 100%; }
.chart-bar-wrap { flex: 1; display: flex; align-items: flex-end; }
.chart-bar {
  width: 100%;
  background: var(--rc-blue);
  border-radius: 4px 4px 0 0;
  transition: background .15s;
  min-height: 2px;
}
.chart-col:hover .chart-bar { background: var(--rc-red); }
.chart-bar-empty { background: var(--line); min-height: 2px; height: 2px !important; }
.chart-label {
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
  padding-top: 6px;
  font-weight: 600;
}

@media (max-width: 1180px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .stat-grid { grid-template-columns: 1fr; }
  .alert { flex-direction: column; align-items: flex-start; }
  .chart { gap: 3px; height: 140px; }
  .chart-label { font-size: 9px; }
}

/* ---------- Reports ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 14px; }

.rp-head {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 3px solid var(--rc-red);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.rp-logo { height: 44px; width: auto; }
.rp-headtext { text-align: right; margin-left: auto; }
.rp-company { font-size: 14px; font-weight: 700; color: var(--rc-blue); letter-spacing: 1px; }
.rp-doctype { font-size: 11px; text-transform: uppercase; letter-spacing: 2.5px; color: var(--rc-red); font-weight: 700; }

.rp-cover {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.rp-cover div { background: #fbfcfe; padding: 9px 12px; }
.rp-cover span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink-soft);
  font-weight: 600;
}
.rp-cover strong { font-size: 15px; color: var(--rc-blue); }

/* Twelve money columns will not fit a screen, so the table scrolls sideways
   inside its card and the page itself never does.
   Written as table.rp-table, not .rp-table: the base rule is `table.list`
   (element + class), which outranks a bare class and would silently win. */
table.rp-table { font-size: 13.5px; white-space: nowrap; }
table.rp-table th { font-size: 10px; }
table.rp-table td, table.rp-table th { padding: 7px 9px; }
.rp-table .rp-key { background: #f7f9fc; font-weight: 600; }
.rp-total td {
  border-top: 2px solid var(--rc-blue);
  background: #eef2fa;
  font-weight: 700;
}
/* A month with no payroll still appears, but reads as a gap rather than data. */
.rp-quiet td { color: #9aa3b2; }
.rp-subhead {
  margin: 24px 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--rc-blue);
}
.rp-bir { max-width: 520px; }
.rp-bir .rp-total td { background: #eef2fa; }
.rp-foot {
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.5;
}

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: var(--ink);
  color: #fff;
  padding: 11px 18px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
  z-index: 99;
}
.toast.err { background: var(--rc-red-dark); }

/* ---------- Responsive ---------- */
/* Below this the preview column gets too narrow to read a payslip in, so the
   two stack instead. Keep in sync with STACK_BREAKPOINT in app.js. */
@media (max-width: 1340px) {
  .records-layout { grid-template-columns: 1fr; }
  .records-list { position: static; }
  .placeholder-card { min-height: 0; }
}

@media (max-width: 980px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  /* Keep the initial beside the first name rather than on its own row. */
  .grid-name { grid-template-columns: 1fr 76px; }
  .grid-name label:first-child { grid-column: 1 / -1; }
  .card.sticky { position: static; }
  main { padding: 14px; }
  .topbar { padding: 0 14px; }
  .ps-cols { flex-direction: column; gap: 16px; }

  /* Narrow screens: the sidebar becomes an off-canvas drawer. A nested
     sub-menu cannot flatten into a horizontal strip legibly, so it keeps its
     vertical layout and slides in over the content instead. */
  .hamburger { display: inline-flex; }
  .sidebar {
    position: fixed;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .3);
  }
  .sidebar.open { transform: translateX(0); }
  /* :not([hidden]) keeps the base `display: none` authoritative when closed.
     Without it this rule would defeat the hidden attribute and pin the scrim
     permanently over the page. */
  .scrim:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 22, 38, .5);
    z-index: 25;
  }
}

/* ---------- Print ----------
   Only the app chrome is handled here; the payslip's own print rules
   (colour-adjust, @page, margins) ship with PAYSLIP_CSS in js/payslip.js. */
@media print {
  body { background: #fff; }
  .no-print, .topbar, .sidebar { display: none !important; }
  .shell { display: block; min-height: 0; }
  .content { display: block; }
  main { padding: 0; max-width: none; }
  /* Print whichever page is open, rather than hard-coding one. Reports and
     payslips are both printable surfaces. */
  .panel { display: none !important; }
  .panel.active { display: block !important; }
  /* The list card is .no-print, but a hidden grid item still reserves its
     column track. Collapsing the grid gives the payslip the full page. */
  .records-layout { display: block; }
  .records-view { container-type: normal; }
  .payslip-host { margin: 0; }
  .payslip { border: 0; box-shadow: none; }

  /* Thirteen money columns do not fit A4 portrait, which PAYSLIP_CSS sets as
     the default page. A named page turns just the report landscape and leaves
     payslips portrait. */
  .panel#tab-reports, .panel#tab-reports-1601c, .panel#tab-reports-1604c { page: report; }
  #reportCard, #c1601Card, #c1604Card { border: 0; box-shadow: none; padding: 0; }
  /* The table must print whole, so it cannot sit in a scroll box. */
  #tab-reports .table-scroll,
  #tab-reports-1601c .table-scroll, #tab-reports-1604c .table-scroll { overflow: visible; }
  /* Must outrank `table.list`, same as the screen rule above. */
  table.rp-table { font-size: 8.5px; }
  table.rp-table th { font-size: 7px; }
  table.rp-table td, table.rp-table th { padding: 3px 4px; }
  table.rp-table .rp-key, .rp-total td, .rp-cover div {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .rp-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-cover strong { font-size: 12px; }
  .row-note { font-size: 7px; }
  .rp-foot { font-size: 7.5px; }
}
@page report { size: A4 landscape; margin: 10mm; }