/* ---------- Fonts (self-hosted, no network required) ---------- */
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400;
  font-style: normal;
  src: url('/static/fonts/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 500;
  font-style: normal;
  src: url('/static/fonts/jetbrains-mono/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 600;
  font-style: normal;
  src: url('/static/fonts/jetbrains-mono/jetbrains-mono-latin-600-normal.woff2') format('woff2');
  font-display: swap;
}


/* Figtree, the app's font everywhere (numbers on screen excepted - see
   --font-mono). Two cuts: Regular up to 599 and Semibold from 600 (bold
   text included), so no weight is browser-faked. */
@font-face {
  font-family: 'Figtree';
  font-weight: 100 599;
  font-style: normal;
  src: url('/static/fonts/figtree/Figtree-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  font-weight: 600 900;
  font-style: normal;
  src: url('/static/fonts/figtree/Figtree-SemiBold.ttf') format('truetype');
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --bg: #f3f5f8;
  --surface: #FFFFFF;
  --surface-alt: var(--bg);  /* was greige #F0F2EB */
  --table-highlight: #e8f5ff;  /* table row hover + totals row */
  --table-head-text: #3F4948;  /* table header text, all pages */
  --surface-hover: #E9EDF2;    /* hover fill for plain white buttons and rows (darker than --surface-alt) */
  --border: #E1E4DE;
  --border-strong: #C1C9C0;

  --text-primary: #191C1A;
  --text-secondary: #414942;
  --text-muted: #717971;

  --accent: #781212;
  --accent-hover: #5A0D0D;
  --accent-soft: #F4ECEC;
  --accent-soft-strong: #E6D4D4;
  --accent-soft-strong-hover: #D8BDBD;  /* pink pill, hovered (darker) */

  --amber: #7B5800;
  --amber-soft: #FFE8B8;

  --blue-soft: #d6e8f7;
  --blue-soft-hover: #bcd6ec;
  --blue-ink: #0b3a5e;

  --danger: #BA1A1A;
  --danger-soft: #FFDAD4;
  --danger-soft-hover: #FCC3BA;
  --success: #17703C;
  --teal-soft: var(--blue-soft);        /* matched / success / save pills: soft blue (sidebar SALES & PURCHASES pill stays teal) */
  --teal-soft-hover: var(--blue-soft-hover);

  --present: #781212;
  --absent: #C1C9C0;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;  /* modal dialogs */
  --radius-pill: 999px;

  --shadow-card: 0 1px 3px rgba(25,28,26,0.06);
  --shadow-pop: 0 4px 24px rgba(25,28,26,0.18);

  --font-ui: 'Figtree', -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Figtree', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Sidebar and nav-section colours */
  --sidebar-bg: #eef6fb;
  --sidebar-ink: #0e2438;
  --sidebar-border: #c5dbea;
  --sidebar-ink-muted: #3e5669;
  --sidebar-link: #2f404f;
  --sidebar-hover: #dcebf5;
  --sidebar-active: #08538a;
  --logout-bg: #f5c4c4;
  --logout-ink: #5c1717;
  --logout-bg-hover: #eeb0b0;
  --nav-payroll-bg: #b5d9f5; --nav-payroll-ink: #07233c;
  --nav-record-bg: #d8cdf3; --nav-record-bg-hover: #c6b7ea; --nav-record-ink: #241b45;
  --nav-sales-bg: #b8e6e0; --nav-sales-ink: #082d2d;
  --nav-gst-bg: #c9d3f5; --nav-gst-ink: #182148;
  --nav-banking-bg: #c4e8cf; --nav-banking-ink: #11331e;
  --nav-epf-bg: #f5d6bd; --nav-epf-ink: #45210b;
  --nav-system-bg: #d0dce8; --nav-system-ink: #1a2532;
  --danger-ink: #410002;   /* text on --danger-soft */
  --grey-soft: #E1E4E8;
  --grey-soft-hover: #CDD2D8;
  --toast-bg: #12181A;
  --toast-text: #E7ECEA;
}

* { box-sizing: border-box; }
/* No coloured focus ring when clicking into a box or opening a dropdown
   (including the browser's default one); hover styles are unaffected. */
:focus, :focus-visible { outline: none; }
/* Keyboard users still get a ring, on buttons, links and the toggle switch
   only: mouse clicks never trigger :focus-visible on these, and text boxes
   and dropdowns stay ring-free as above. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

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

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
  font-family: var(--font-display);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;  /* a thin bar leaves the section pills their full width */
  border-right: 1px solid var(--sidebar-border);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 26px; }
.brand-mark { flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: 0.1px; color: var(--sidebar-ink); }
.nav-search { padding: 0 4px 14px; margin-top: -12px; }
.nav-search input { width: 100%; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 12px; font-family: var(--font-ui); font-size: 13px; background: var(--surface); color: inherit; }
.nav-search input:focus { outline: 2px solid var(--accent, #7A1E1E); outline-offset: 0; border-color: transparent; }
body.sidebar-collapsed .nav-search { display: none; }
.brand-sub { font-size: 13px; color: var(--sidebar-ink-muted); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-section {
  display: flex; align-items: center; box-sizing: border-box; min-height: 30px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-pill);
  margin: 14px 12px 6px;
}
.nav-section:first-child { margin-top: 2px; }
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  color: var(--sidebar-link);
  font-size: 13px;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.nav-link svg { flex-shrink: 0; opacity: 0.8; }
.nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-ink); }
.nav-link.active { background: none; color: var(--sidebar-active); font-weight: 700; }

/* A selected tab takes its own section pill's text colour, rather than
   one universal blue. */
.nav-link.nav-group-payroll.active { color: var(--nav-payroll-ink); }
.nav-link.nav-group-record.active { color: var(--nav-record-ink); }
.nav-link.nav-group-sales.active { color: var(--blue-ink); }
.nav-link.nav-group-gst.active { color: var(--nav-gst-ink); }
.nav-link.nav-group-banking.active { color: var(--nav-banking-ink); }
.nav-link.nav-group-epf.active { color: var(--nav-epf-ink); }
.nav-link.nav-group-system.active { color: var(--nav-system-ink); }
.nav-link.active svg { opacity: 1; }

.nav-section-toggle {
  display: flex; align-items: center; gap: 4px; box-sizing: border-box; min-height: 30px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; white-space: nowrap;
  padding: 6px 8px 6px 12px; border-radius: var(--radius-pill);
  margin: 14px 12px 6px;
  transition: filter .12s ease;
}
.nav-section-toggle:first-child { margin-top: 2px; }
.nav-section-toggle:hover { filter: brightness(0.96); }
.nav-section-chevron { transition: transform .15s ease; flex-shrink: 0; opacity: 0.75; }
.nav-section-toggle.open .nav-section-chevron { transform: rotate(-180deg); }
.nav-collapsible { display: none; flex-direction: column; gap: 2px; }
.nav-collapsible.open { display: flex; }

/* One distinct colour per sidebar section head, so each is visually
   distinct from its neighbours at a glance, not just from its own
   child links. Chosen so adjacent heads in sidebar order alternate
   between warm and cool hues, rather than sitting next to another
   shade of the same family (e.g. two blues in a row). Defined here
   (not via gst-style.css's Material 3 variables) since this
   stylesheet is the one guaranteed to load on every page the sidebar
   appears on, including the payroll/cashbook side that never loads
   gst-style.css at all. */
.nav-pill-payroll { background: var(--nav-payroll-bg); color: var(--nav-payroll-ink); }   /* blue */
.nav-pill-record { background: var(--nav-record-bg); color: var(--nav-record-ink); }    /* violet */
.nav-pill-sales { background: var(--nav-sales-bg); color: var(--nav-sales-ink); }     /* teal */
.nav-pill-gst { background: var(--nav-gst-bg); color: var(--nav-gst-ink); }       /* periwinkle */
.nav-pill-banking { background: var(--nav-banking-bg); color: var(--nav-banking-ink); }   /* green */
.nav-pill-epf { background: var(--nav-epf-bg); color: var(--nav-epf-ink); }       /* peach */
.nav-pill-system { background: var(--nav-system-bg); color: var(--nav-system-ink); }    /* slate blue-grey */

/* Collapse button: sits on the sidebar's edge; when the sidebar is hidden it moves to the page's top-left. */
.sidebar-toggle {
  position: fixed; top: 20px; left: 224px; z-index: 30;
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-secondary);
  border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); cursor: pointer;
}
.sidebar-toggle:hover { color: var(--text-primary); }
.sidebar-toggle svg { transition: transform .15s; }
@media (min-width: 881px) {
  .sidebar-collapsed .sidebar { display: none; }
  .sidebar-collapsed .sidebar-toggle { left: 12px; }
  .sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
  .sidebar-collapsed .content { max-width: none; padding-left: 60px; }
}
@media (max-width: 880px) { .sidebar-toggle { display: none; } }

.sidebar-foot {
  margin-top: auto;
  font-size: 13px;
  color: var(--sidebar-ink-muted);
  padding: 8px 0 2px;
  line-height: 1.5;
}
.sidebar-foot-text { padding: 0 12px; display: block; }
.logout-btn {
  background: var(--logout-bg);
  color: var(--logout-ink);
  justify-content: flex-start;
  border-radius: var(--radius-pill);
}
.logout-btn svg { opacity: 1; }
.logout-btn:hover { background: var(--logout-bg-hover); color: var(--logout-ink); }

/* ---------- Content ---------- */
.content { flex: 1; min-width: 0; padding: 28px 34px 60px; max-width: 1560px; }

/* One page-title bar. Pages reach it three ways (the base.html topbar block,
   a hand-written .page-header, or a detail page's .section-header holding
   an h2.page-title); all three share these layout rules so they can't drift. */
.page-header, .topbar, .section-header:has(> h2.page-title) {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.content h1, .content h2, .page-title { font-family: var(--font-display); }
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.2px; }
.topbar h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.2px; margin: 0; }
.topbar > .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.page-subtitle { color: var(--text-secondary); font-size: 13px; margin-top: 3px; }

/* ---------- Period picker ---------- */
.period-picker {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 6px;
  box-shadow: var(--shadow-card);
}
.period-picker select {
  border: none; background: transparent; font-family: var(--font-ui);
  font-weight: 600; font-size: 13px; color: var(--text-primary);
  padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer;
}
.period-picker select:hover { background: var(--surface-alt); }
/* Attendance day label, styled like the month/year selects beside it. */
.period-picker .day-picker {
  display: inline-block; font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  color: var(--text-primary); padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer;
}
.period-picker .day-picker:hover { background: var(--surface-alt); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card + .card { margin-top: 18px; }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.card-header h2 { font-size: 13px; font-weight: 700; margin: 0; }
.card-header p { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); }
.card-body { padding: 18px 20px; }
.card-body > :first-child { margin-top: 0; }
.card-header:last-child { border-bottom: none; }

/* ---------- Stat tiles ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-tile {
  background: var(--surface); border: none;
  border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-card);
}
.stat-tile .label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.stat-tile .value { font-family: var(--font-mono); font-size: 20px; font-weight: 600; margin-top: 6px; }
/* Words (not figures) in a tile, e.g. "Owes money", "Sep 2026", use the UI font. */
.stat-tile .value-text { font-family: var(--font-ui); }
.stat-tile.accent { background: var(--accent); border-color: var(--accent); }
/* A tile placed inside a card sits flat on a page-coloured fill instead of floating with its own shadow. */
.card .stat-tile { box-shadow: none; background: var(--bg); }
.stat-tile.accent .label { color: rgba(255,255,255,0.75); }
.stat-tile.accent .value { color: #fff; }

/* ---------- Buttons ---------- */
/* Hover rule for every button and pill: the fill gets DARKER than at rest,
   never paler or greyer. */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-primary); font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  cursor: pointer; transition: background .12s ease, filter .12s ease;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* Only plain white outlined buttons darken their outline on hover; every
   coloured, pill or text-style button below sets its own hover with no outline. */
.btn:hover:where(:not(.btn-filled):not(.btn-tonal):not(.btn-outlined):not(.btn-text):not(.btn-danger):not(.btn-ghost):not(.btn-danger-ghost):not(.btn-tonal-blue):not(.btn-tonal-violet):not(.btn-tonal-teal):not(.btn-tonal-grey):not(.btn-status-danger):not(.btn-status-success)) { background: var(--surface-hover); border-color: var(--text-muted); }
/* Solid maroon. Hover
   softens to the pale pink with maroon text (maroon has no darker shade that
   doesn't turn near-black); the exception to the darker-on-hover rule. */
.btn-filled { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-filled:hover { background: var(--accent-soft-strong); border-color: var(--accent-soft-strong); color: var(--accent); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft-strong); }
/* Text-only button (Cancel etc.): no fill or outline until hovered. */
.btn-text { border-color: transparent; background: transparent; color: var(--accent); padding: 8px 12px; }
.btn-text:hover { background: var(--accent-soft-strong); }
.btn-outlined { background: transparent; border-color: var(--border-strong); color: var(--accent); }
.btn-outlined:hover { background: var(--accent-soft-strong); border-color: var(--border-strong); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
/* Round icon-only button (Attendance prev/next day). */
.btn-icon { justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; font-size: 16px; }
.btn-danger-ghost { color: var(--danger); border-color: transparent; background: transparent; }
.btn-danger-ghost:hover { background: var(--danger-soft-hover); }
/* Pill-style icon buttons (light background, dark graphic), like the
   status badges. Used for Staff deactivate (red) / reactivate (green). */
.btn-status-danger, .btn-status-success { border-color: transparent; }
.btn-status-danger { background: var(--danger-soft); color: var(--danger); }
.btn-status-success { background: var(--teal-soft); color: var(--blue-ink); }
.btn-status-danger:hover, .btn-status-success:hover { border-color: transparent; }
.btn-status-danger:hover { background: var(--danger-soft-hover); }
.btn-status-success:hover { background: var(--teal-soft-hover); }
/* Pastel pills (pink, blue, green, red). Each darkens on hover, with no outline. */
.btn-tonal { background: var(--accent-soft-strong); border-color: transparent; color: var(--accent-hover); }
.btn-tonal:hover { background: var(--accent-soft-strong-hover); border-color: transparent; }
/* Pastel blue pill for "View …" links that open another page. */
.btn-tonal-blue { background: var(--blue-soft); border-color: transparent; color: var(--blue-ink); }
.btn-tonal-blue:hover { background: var(--blue-soft-hover); border-color: transparent; }
/* Soft blue pill (Save, Restore). */
.btn-tonal-teal { background: var(--teal-soft); border-color: transparent; color: var(--blue-ink); }
.btn-tonal-teal:hover { background: var(--teal-soft-hover); border-color: transparent; }
/* Grey pill for neutral switch-off actions (Disable / Enable). */
.btn-tonal-grey { background: var(--grey-soft); border-color: transparent; color: var(--text-secondary); }
.btn-tonal-grey:hover { background: var(--grey-soft-hover); border-color: transparent; }
/* Pastel violet pill, same colours as the RECORD sidebar pill (Print proforma invoice). */
.btn-tonal-violet { background: var(--nav-record-bg); border-color: transparent; color: var(--nav-record-ink); }
.btn-tonal-violet:hover { background: var(--nav-record-bg-hover); border-color: transparent; }
/* Pale red pill with maroon text for every destructive text action (remove, delete, cancel). */
.btn-danger { background: var(--danger-soft); border-color: transparent; color: var(--accent-hover); }
.btn-danger:hover { background: var(--danger-soft-hover); border-color: transparent; }

/* ---------- Tables ---------- */
table.data-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 13px; }
/* A table sitting directly at the bottom of a card follows the card's rounded corners. */
.card > table.data-table:last-child, .card > .scroll-x:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; }
.card > .scroll-x:last-child { overflow-x: auto !important; overflow-y: hidden; }
.data-table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--table-head-text); font-weight: 600; padding: 12px 12px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
  background: var(--bg);
}
.data-table td {
  padding: 11px 12px; border-bottom: 1px solid var(--border);
  font-size: 13px; vertical-align: middle; white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--table-highlight); }
.data-table td.num { text-align: right; }
.th-sort { color: inherit; text-decoration: none; }
.th-sort:hover { text-decoration: underline; }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions > * { margin-left: 6px; }
.row-actions > *:first-child { margin-left: 0; }
.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Numeric column headers stay in Figtree; only the numbers below are mono. */
th.num { font-family: var(--font-ui); }
.data-table th.num { text-align: right; }
.data-table tfoot td { padding: 12px 12px; font-weight: 700; border-top: 2px solid var(--border-strong); border-bottom: none; background: var(--table-highlight); }
.name-cell { font-weight: 600; }
.rate-cell { min-width: 135px; }
.data-table th.rate-cell { text-align: right; }
.rate-stack { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; }
.rate-stack .wage-input { width: 72px; text-align: right; }

.editable-num {
  width: 76px; font-family: var(--font-mono); text-align: right;
  border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm);
  padding: 5px 7px; font-size: 13px; color: var(--text-primary);
}
.editable-num:hover { border-color: var(--border-strong); }
.editable-num:focus { background: var(--accent-soft); outline: none; }

/* ---------- Badges / toggle ---------- */
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; }
.badge-monthly { background: var(--accent-soft); color: var(--accent-hover); }
.badge-daily { background: var(--amber-soft); color: var(--amber); }
.badge-active { background: var(--teal-soft); color: var(--blue-ink); }
.badge-inactive { background: var(--border); color: var(--text-muted); }

.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0; background: var(--absent); border-radius: var(--radius-pill);
  transition: background .15s ease; cursor: pointer;
}
.switch .track::before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: var(--surface); border-radius: 50%; transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.switch input:checked + .track { background: var(--present); }
.switch input:checked + .track::before { transform: translateX(16px); }

/* ---------- Attendance: tabs ---------- */
/* Page tabs (Attendance, Sales, Purchases, Quotations, GST pages...): a
   segmented control, one pale track with a white chip on the active tab. */
.tabs {
  display: flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 3px; margin-bottom: 20px;
}
.tab {
  padding: 7px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  transition: background .12s ease;
}
.tab:not(.active):hover { background: var(--border); }
.tab.active { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-card); }

/* ---------- Ledger-style monthly calendar (signature element) ---------- */
.ledger {
  background: var(--surface); border: none; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.ledger-row {
  display: grid;
  grid-template-columns: 46px 96px 100px 1fr 1fr 130px;
  align-items: center;
  padding: 9px 18px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.ledger-row.head {
  font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--table-head-text); font-weight: 600; background: var(--bg);
}
.ledger-row.weekend { background: var(--table-highlight); }
.ledger-row.weekend .ledger-day-num,
.ledger-row.weekend .ledger-weekday { color: var(--accent); }
.ledger-row.on-leave { background: var(--amber-soft); }
.ledger-row:last-child { border-bottom: none; }
.ledger-row::before {
  content: ""; position: absolute; left: 148px; top: 0; bottom: 0; width: 1px;
  background: var(--danger-soft);
}
.ledger-day-num { font-family: var(--font-mono); font-weight: 600; color: var(--text-secondary); }
.ledger-weekday { font-size: 13px; color: var(--text-muted); }
.ledger-present { display: flex; align-items: center; gap: 8px; }
.ledger-present .status-label { font-size: 13px; color: var(--text-secondary); min-width: 52px; }
.ledger-ot { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.ledger-ot input { width: 62px; }
/* No native up/down spinner arrows on number boxes anywhere: they squeeze
   values like "3.5" against the border and clip them, and look out of
   place next to the rest of the form styling. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ledger-total-hint { text-align: right; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.leave-select {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 6px 8px; font-family: var(--font-ui); font-size: 13px; background: var(--surface);
  color: var(--text-primary); cursor: pointer;
}
.editable-num:disabled, .switch input:disabled + .track { opacity: 0.4; cursor: not-allowed; }

/* ---------- Daily quick entry ---------- */
.quick-row { display: grid; grid-template-columns: 1fr 90px 110px 110px 130px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); gap: 10px; }
.quick-row:last-child { border-bottom: none; }
.quick-row.head { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--table-head-text); font-weight: 600; background: var(--bg); }
.quick-ot-field label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 2px; }

/* ---------- Forms / modal ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
/* File pickers outside a .field get the same box and 10px corners as other inputs
   (inside a .field, the .field rules below take over). */
input[type="file"] {
  font-family: var(--font-ui); font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
}
input[type="file"]::file-selector-button { border-radius: var(--radius-sm); }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); font-family: var(--font-ui); font-size: 13px;
  background: var(--surface); color: var(--text-primary);
}
/* Single-line boxes are a fixed 40px tall on every page. */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select { height: 40px; }
.field input:focus, .field select:focus { outline: none; background: var(--surface); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(25,28,26,0.4);
  display: none; align-items: center; justify-content: center; z-index: 50;
}
.modal-overlay.open { display: flex; }
/* .modal-backdrop is the equivalent wrapper class used by pages that came
   from the GST Ledger side (their confirm-delete dialogs, matching modals,
   etc.) — defined here too so it works the same on every page regardless
   of which stylesheet else is loaded, not just on GST pages. */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(25,28,26,0.4);
  display: none; align-items: center; justify-content: center; z-index: 50;
}
.modal-backdrop.open { display: flex; }
/* The shared confirm / message box can open on top of another modal. */
#confirmModalBackdrop { z-index: 60; }
.modal {
  background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop);
  width: 380px; max-width: 92vw; max-height: 85vh; overflow-y: auto; padding: 24px;
}
.modal h3 { margin: 0 0 16px; font-size: 16px; font-family: var(--font-ui); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.form-actions { display: flex; gap: 12px; margin-top: 24px; }

/* ---------- Advances mini list ---------- */
.adv-list { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; margin-bottom: 12px; }
.adv-item { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-alt); }
.adv-item .amt { font-family: var(--font-mono); font-weight: 600; }
.adv-item button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 0 4px; }
.adv-item button:hover { color: var(--danger); }

/* ---------- Auto-computed values (wages page, cross-tab links) ---------- */
.auto-value { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.auto-value .figure { font-family: var(--font-mono); }
.auto-value a { font-family: var(--font-ui); font-size: 12px; color: var(--accent); font-weight: 600; }
.auto-value a:hover { text-decoration: underline; }
/* Small text notes inside number columns (e.g. Wages "since …") stay in the UI font. */
.num .num-note { font-family: var(--font-ui); }

/* ---------- Balance coloring ---------- */
.balance-owed { color: var(--danger); font-weight: 700; }
.balance-clear { color: var(--text-muted); font-weight: 600; }

/* ---------- Summary grid (EPF to-pay, etc.) ---------- */
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.summary-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.summary-line .lbl { color: var(--text-secondary); }
.summary-line .lbl small { display: block; font-size: 13px; color: var(--text-muted); margin-top: 1px; }
.summary-line .val { font-family: var(--font-mono); font-weight: 600; }
.summary-line.total { border-bottom: none; border-top: 2px solid var(--border-strong); margin-top: 4px; padding-top: 12px; font-weight: 700; }
.summary-line input.editable-num { width: 90px; }

/* ---------- Generic entry list (loans, cashbook transactions) ---------- */
.entry-table-wrap { overflow-x: auto; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; background: var(--surface-alt); color: var(--text-secondary);
  border: 1px solid transparent;
}
.chip-lg { font-size: 13px; padding: 4px 12px; }  /* same text size as a button */
.chip-in { background: var(--accent-soft); color: var(--accent-hover); }
.chip-out { background: var(--danger-soft); color: var(--danger); }
.chip-repay { background: var(--teal-soft); color: var(--blue-ink); }
/* Compact dropdown used beside a card title (Loans and EPF staff pickers). */
.select-inline {
  height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary); font-family: var(--font-ui); font-size: 13px; font-weight: 600;
}

.staff-picker-list { display: flex; flex-direction: column; gap: 2px; }
.staff-picker-list a {
  display: flex; justify-content: space-between; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-primary);
}
.staff-picker-list a:hover { background: var(--surface-alt); }
.staff-picker-list a.active { background: var(--accent-soft); font-weight: 600; }
.staff-picker-list .bal { font-family: var(--font-mono); font-size: 13px; }

.inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; min-width: 120px; }
.settings-toggle { cursor: pointer; user-select: none; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 50px 20px; color: var(--text-secondary); }

.coa-head-card { padding: 4px 4px 10px; }
.coa-head-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px; margin-bottom: 4px;
}
.coa-head-title { font-size: 16px; font-weight: 700; color: var(--accent-hover); letter-spacing: 0.1px; }
.coa-head-body { padding: 0 10px 6px; }

.coa-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: var(--radius-sm);
}
.coa-row:hover { background: var(--surface-alt); }
.coa-row .coa-actions { display: flex; gap: 6px; opacity: 0; transition: opacity .12s ease; }
.coa-row:hover .coa-actions, .coa-head-row:hover .coa-actions { opacity: 1; }
.coa-head-row .coa-actions { opacity: 0; transition: opacity .12s ease; }

.coa-row.coa-group { margin-top: 8px; }
.coa-row.coa-group .coa-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.coa-row.coa-leaf .coa-name { font-size: 13px; font-weight: 400; color: var(--text-secondary); }

.coa-hover { position: relative; cursor: default; }
.coa-tooltip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--text-primary); color: #fff; padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .12s ease; z-index: 30;
}
.coa-hover:hover .coa-tooltip { opacity: 1; }
/* an amount that opens its entry */
.amount-link { color: var(--accent); font-weight: 600; }
.amount-link:hover { color: var(--accent-hover); text-decoration: underline; }
.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); text-decoration: none;
}
.link-btn:hover { color: var(--accent-hover); text-decoration: underline; }
.empty-state svg { margin-bottom: 12px; opacity: 0.5; }
.empty-state h3 { font-size: 13px; color: var(--text-primary); margin: 0 0 4px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--toast-bg); color: var(--toast-text); padding: 10px 18px; border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500; box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none; transition: all .2s ease; z-index: 100;
  display: flex; align-items: center; gap: 8px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: relative; flex-direction: row; align-items: center; padding: 10px 16px; gap: 12px; overflow-y: visible; border-right: none; border-bottom: 1px solid var(--sidebar-border); }
  .brand { padding: 0; flex-shrink: 0; }
  .sidebar-foot { display: none; }
  /* The nav becomes one swipeable row: section pills inline, with the open
     section's links following its pill. */
  .nav { flex-direction: row; align-items: center; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
  .nav-section, .nav-section-toggle { margin: 0 4px; flex-shrink: 0; white-space: nowrap; }
  .nav-collapsible.open { flex-direction: row; }
  .nav-link { flex-shrink: 0; white-space: nowrap; }
  .content { padding: 18px; }
  .ledger-row, .quick-row { grid-template-columns: 34px 70px 1fr 1fr 90px; font-size: 13px; }
}

/* ---------------- Scroll-to-top button ----------------
   In base.html, so it's on every page; app.js adds .visible once the
   page is scrolled down. Bottom-right, and on pages with the floating
   + button (.fab, 56px at bottom/right 32px) it sits centred above it. */
#scrollTopBtn {
  position: fixed; bottom: 32px; right: 32px;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--accent-soft-strong); color: var(--accent);
  display: none; align-items: center; justify-content: center;
  box-shadow: var(--shadow-pop); border: none; cursor: pointer; font-size: 16px;
  z-index: 10;
}
#scrollTopBtn:hover { background: var(--accent); color: #fff; }
#scrollTopBtn.visible { display: flex; }
body:has(.fab) #scrollTopBtn { bottom: 104px; right: 38px; }

/* ---------------- Autocomplete dropdown ---------------- */
.autocomplete-list {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  max-height: 240px; overflow-y: auto;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  z-index: 30;
}
.autocomplete-list.open { display: block; }
.autocomplete-item { padding: 10px 14px; cursor: pointer; }
.autocomplete-item:hover, .autocomplete-item:focus { background: var(--surface-alt); }
.autocomplete-item .ac-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.autocomplete-item .ac-meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Icon-only row actions (edit, print, attach, move, delete): no outline, a round
   hover area, the same 16px icon everywhere. Delete/remove icons are red. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%;
  background: transparent; color: var(--text-secondary); cursor: pointer;
  vertical-align: middle; text-decoration: none; font-family: var(--font-ui); font-size: 13px; line-height: 1;
  transition: background .12s ease;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: rgba(25,28,26,0.07); }
.icon-btn-danger { color: var(--danger); }
.icon-btn-danger:hover { background: var(--danger-soft); }
.icon-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Staff activate/deactivate keep their soft status fill. */
.icon-btn.btn-status-danger { background: var(--danger-soft); color: var(--danger); }
.icon-btn.btn-status-success { background: var(--teal-soft); color: var(--blue-ink); }
.icon-btn.btn-status-danger:hover, .icon-btn.btn-status-success:hover { filter: brightness(0.95); }

/* Same attach-linked pill styling as gst-style.css, kept in sync so the
   icon looks identical on Register pages (Cashbook) and GST pages
   (Purchases). */
.attach-linked {
  background: var(--teal-soft) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  color: var(--blue-ink) !important;
}
.attach-linked:hover { background: var(--teal-soft-hover) !important; }

/* ---------------- Shared components (moved from gst-style.css so they
   look the same on every page, GST or not) ---------------- */
.flash-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.flash { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; }
.flash.success { background: var(--teal-soft); color: var(--blue-ink); }
.flash.error { background: var(--danger-soft); color: var(--danger-ink); }
.flash.warning { background: var(--amber-soft); color: var(--amber); }

.subtle { color: var(--text-secondary); font-size: 13px; }
.mono { font-family: var(--font-mono); }

/* Status chips (.chip itself is defined above). */
.chip.matched { background: var(--teal-soft); color: var(--blue-ink); }
.chip.manual { background: var(--blue-soft); color: var(--blue-ink); }  /* blue, so it never reads as the pink/red of .unmatched */
.chip.unmatched { background: var(--danger-soft); color: var(--danger-ink); }
.chip-warn { background: var(--amber-soft); color: var(--amber); }
.chip.neutral { background: var(--border); color: var(--text-secondary); }

/* A table sitting directly on the page gets the card's shadow and corners. */
.table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* Pager for long lists (templates/_pagination.html). */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 4px; }
.pager-summary { color: var(--text-secondary); font-size: 13px; }
.pager-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pager-gap { padding: 0 6px; color: var(--text-secondary); }
.pager-current { cursor: default; }

/* ---------------- Utilities ----------------
   Replace the most repeated inline style="" patterns in templates. They use
   !important so they behave exactly like the inline styles they replaced. */
.d-inline { display: inline !important; }
.d-flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.ai-center { align-items: center !important; }
.gap-8 { gap: 8px !important; }
.gap-10 { gap: 10px !important; }
.scroll-x { overflow-x: auto !important; }
.pos-rel { position: relative !important; }
.nowrap { white-space: nowrap !important; }
.va-middle { vertical-align: middle !important; }
.w-auto { width: auto !important; }
.text-center { text-align: center !important; }
.font-mono { font-family: var(--font-mono) !important; }
.fw-400 { font-weight: 400 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.m-0 { margin: 0 !important; }
.my-8 { margin-top: 8px !important; margin-bottom: 8px !important; }
.ml-6 { margin-left: 6px !important; }
.ml-8 { margin-left: 8px !important; }
.mt-2 { margin-top: 2px !important; }
.mt-4 { margin-top: 4px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-24 { margin-bottom: 24px !important; }

/* ---------- Rich-text editor (quotation form, master terms) ---------- */
.rte-wrap {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.rte-toolbar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 6px 8px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-strong);
}
.rte-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  font-family: var(--font-ui); font-size: 13px;
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary);
  cursor: pointer;
}
.rte-btn:hover { background: var(--surface-hover); }
.rte-btn.active { background: var(--accent-soft-strong); color: var(--accent-hover); }
.rte-sep { width: 1px; height: 20px; background: var(--border-strong); margin: 0 4px; }
.rte-size-select {
  height: 30px; padding: 0 6px; font-family: var(--font-ui); font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-secondary);
  cursor: pointer;
}
.rte-color-group { display: inline-flex; align-items: center; gap: 1px; }
.rte-color-swatch {
  width: 26px; height: 26px; min-width: 26px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.rte-color-swatch:hover { border-color: var(--text-muted); filter: brightness(0.9); }
.rte-color-trigger {
  width: 18px; min-width: 18px; height: 26px; padding: 0; font-size: 12px;
  border: 1px solid var(--border-strong); border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
}
.rte-editor {
  width: 100%; min-height: 260px; max-height: 520px; overflow-y: auto;
  padding: 16px 18px; font-family: var(--font-ui); font-size: 13px; line-height: 1.6;
  color: var(--text-primary); background: var(--surface);
}
.rte-editor:focus { outline: none; }
.rte-editor h3 { font-size: 13px; margin: 16px 0 8px; }
.rte-editor h3:first-child { margin-top: 0; }
.rte-editor p { margin: 0 0 10px; }
.rte-editor ul, .rte-editor ol { margin: 0 0 10px; padding-left: 22px; }
.rte-editor li { margin-bottom: 4px; }

/* Entry rows (Day Book, Ledger, Review, Bank Reconciliation): click a row to show its entry underneath */
.vrow { cursor: pointer; }
.vrow.expanded td { background: var(--table-highlight); }
.voucher-detail-row td { padding: 12px 18px 16px; background: var(--surface-alt); white-space: normal; cursor: default; }
.voucher-expand-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.voucher-detail-row .data-table { background: var(--surface); }