/* ==========================================================================
   Capricorn ERP — design system
   Numbers are the content. Inter for interface, JetBrains Mono for every
   figure, so columns align digit-for-digit and money is never ambiguous.
   ========================================================================== */

/* No webfont import: an ERP must render identically on a locked-down office
   network with no CDN access. System stacks below ship on every target OS and
   both expose tabular figures, which is the only typographic feature the
   numbers actually depend on. */

:root {
  /* Surfaces */
  --canvas:      #F7F8FA;
  --surface:     #FFFFFF;
  --surface-2:   #FBFCFD;
  --surface-3:   #F2F4F7;

  /* Ink */
  --ink:         #0F1729;
  --ink-2:       #344054;
  --slate:       #667085;
  --slate-2:     #98A2B3;

  /* Lines */
  --line:        #E4E7EC;
  --line-2:      #EFF1F4;

  /* Accent — Capricorn brand blue (sampled from logo), active state + primary action */
  --accent:      #006090;
  --accent-hi:   #007AB5;
  --accent-soft: #E6F2F8;
  --accent-line: #B3D6E6;

  /* Capricorn brand — from the logo */
  --brand-blue:      #006090;
  --brand-blue-dk:   #004A70;
  --brand-blue-hi:   #007AB5;
  --brand-green:     #90CC30;
  --brand-green-dk:  #74A626;
  --brand-green-soft:#F2F9E6;

  /* Money semantics */
  --pos:         #047857;
  --pos-soft:    #ECFDF5;
  --neg:         #BE123C;
  --neg-soft:    #FFF1F3;
  --warn:        #B45309;
  --warn-soft:   #FFFBEB;

  /* Legacy aliases (older markup) */
  --panel:       #FFFFFF;
  --panel-2:     #F2F4F7;
  --text:        #344054;
  --muted:       #667085;
  --primary:     #006090;
  --good:        #047857;
  --danger:      #BE123C;

  --radius:      10px;
  --radius-sm:   6px;
  --shadow-sm:   0 1px 2px rgba(16,24,40,.05);
  --shadow:      0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:   0 12px 32px -8px rgba(16,24,40,.18), 0 4px 8px -4px rgba(16,24,40,.06);

  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text',
                 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Single font style across the whole app: numbers use the same family as text.
     tabular-nums is still applied where numbers are shown, so columns stay tidy. */
  --mono:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text',
                 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Figures use the same face as body text; tabular keeps columns aligned. */
.num, .mono, td.num, th.num,
input[type="number"], input[type="date"], input[type="month"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ==========================================================================
   Title bar
   ========================================================================== */
.software-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.window-caption { display: flex; align-items: center; gap: 10px; }
.app-icon {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: -.02em;
}
.window-caption strong {
  font-size: 14px; font-weight: 650; color: var(--ink);
  letter-spacing: -.01em;
}
.build-label {
  padding-left: 10px; margin-left: 2px;
  border-left: 1px solid var(--line);
  font-size: 12px; color: var(--slate-2); font-weight: 450;
}
.window-controls { display: flex; align-items: center; gap: 14px; }
.user-chip { font-size: 12.5px; font-weight: 500; color: var(--slate); }
.logout-link {
  font-size: 12.5px; font-weight: 550; color: var(--slate);
  padding: 5px 10px; border-radius: var(--radius-sm);
}
.logout-link:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }

/* ==========================================================================
   Top menu
   ========================================================================== */
.topmenu {
  display: flex; align-items: stretch; gap: 1px;
  height: 44px; padding: 0 12px;
  background: var(--surface);
  border-bottom: 2px solid var(--brand-green);
  position: sticky; top: 0; z-index: 60;
  /* brand-tinted shadow, picked from the logo blue */
  box-shadow: 0 2px 6px rgba(0, 96, 144, .13), 0 1px 2px rgba(0, 96, 144, .08);
}
.tm-item { position: relative; display: flex; align-items: center; }
.tm-link {
  display: flex; align-items: center; height: 30px;
  padding: 0 12px; border: none; border-radius: var(--radius-sm);
  background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 550;
  color: var(--slate); letter-spacing: -.005em;
  transition: background .12s ease, color .12s ease;
}
.tm-item:hover > .tm-link, .tm-item.open > .tm-link { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.tm-link.active {
  background: var(--accent-soft); color: var(--brand-blue); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--brand-green);
}
.tm-drop {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 224px; margin-top: 4px; padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 70;
}
.tm-item.open .tm-drop, .tm-item:focus-within .tm-drop { display: block; }
.tm-drop a {
  display: block; padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.tm-drop a:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.tm-spacer { flex: 1; }
.tm-date {
  display: flex; align-items: center;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 500; color: var(--slate-2);
  padding: 0 6px;
}

/* ==========================================================================
   Shell
   ========================================================================== */
.main-wrap { min-height: calc(100vh - 96px); }
.main { max-width: 1320px; margin: 0 auto; padding: 26px 24px 56px; }
.topbar {
  box-shadow: 0 1px 0 rgba(0, 96, 144, .06);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.eyebrow {
  font-size: 11px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--slate-2);
  margin-bottom: 3px;
}
.topbar h1 {
  font-size: 26px; font-weight: 650; color: var(--ink);
  letter-spacing: -.025em; line-height: 1.15;
}
.top-actions { display: flex; align-items: center; gap: 8px; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card, .report-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
}
.card-head h2 {
  font-size: 15.5px; font-weight: 650; color: var(--ink);
  letter-spacing: -.015em;
}
.card-head .eyebrow { margin-bottom: 2px; }

/* KPI strip — one flush rail, hairline-divided. Not six floating boxes. */
.kpi-grid, .detail-grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  overflow: hidden;
}
.detail-card {
  padding: 14px 18px;
  border-right: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
}
.detail-card:last-child { border-right: none; }
.detail-card small {
  font-size: 10.5px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.detail-card strong {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 19px; font-weight: 550; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.2;
}
/* Text values (names, contractors) use the readable UI font and wrap inside
   the card instead of overflowing as wide monospace. */
.detail-card strong.dc-text {
  font-family: var(--font);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  line-height: 1.3; white-space: normal; overflow-wrap: anywhere;
}

/* Nested inside a card: sit flush, no double border */
.card .detail-grid, .card .kpi-grid {
  border: none; border-radius: 0; box-shadow: none;
  margin: 0; border-bottom: 1px solid var(--line-2);
}

.grid { display: grid; gap: 18px; }
.two-col { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: stretch; }
.two-col > .card { margin-bottom: 0; display: flex; flex-direction: column; }
.two-col > .card > .table-wrap { flex: 1; }
.card .two-col { padding: 18px; }

/* ==========================================================================
   Tables — the core of the product
   ========================================================================== */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }

thead th {
  padding: 9px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--slate);
}
thead th.num { text-align: right; }

tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13.5px; color: var(--ink-2);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s ease; }
tbody tr:hover td { background: var(--surface-2); }

td.num, th.num { text-align: right; }
td.num { font-size: 13px; font-weight: 450; color: var(--ink); white-space: nowrap; }
tbody td strong { font-weight: 600; color: var(--ink); }
tbody td a { font-weight: 500; }

tfoot .total-row td, tr.total-row td {
  padding: 12px 14px;
  background: var(--surface-3);
  border-top: 1px solid var(--line);
  border-bottom: none;
  font-size: 13px; font-weight: 650; color: var(--ink);
}
tr.total-row td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.compact td { padding: 8px 14px; font-size: 13px; }
.compact thead th { padding: 7px 14px; }
.data-grid td { padding: 10px 12px; }
.data-grid thead th { padding: 8px 12px; }

/* Column grouping: a hairline rule marks where inputs end and the money
   conclusion begins, so the eye lands on deduction + final amount as a pair. */
.col-sep { border-left: 1px solid var(--line); }
thead th.col-sep { border-left: 1px solid var(--line); }
td.col-final {
  background: var(--surface-2);
  font-weight: 650; color: var(--ink);
}
tbody tr:hover td.col-final { background: var(--surface-3); }
tr.total-row td.col-final { background: var(--accent-soft); color: var(--accent); }

.inline-actions { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.inline-actions form { display: inline; }

/* ==========================================================================
   Pills & status
   ========================================================================== */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap; line-height: 18px;
}
.pill-good   { background: var(--pos-soft);  color: var(--pos);   box-shadow: inset 0 0 0 1px rgba(4,120,87,.14); }
.pill-danger { background: var(--neg-soft);  color: var(--neg);   box-shadow: inset 0 0 0 1px rgba(190,18,60,.14); }
.pill-warn   { background: var(--warn-soft); color: var(--warn);  box-shadow: inset 0 0 0 1px rgba(180,83,9,.16); }
.pill-muted  { background: var(--surface-3); color: var(--slate); box-shadow: inset 0 0 0 1px var(--line); }
.pill strong { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }

.good-text   { color: var(--pos);  font-weight: 550; }
.danger-text { color: var(--neg);  font-weight: 550; }
.warn-text   { color: var(--warn); font-weight: 550; }
.pl-pos      { color: var(--pos); }
.pl-neg      { color: var(--neg); }

/* ==========================================================================
   Buttons
   ========================================================================== */
button, .primary, .ghost {
  font-family: inherit; font-size: 13px; font-weight: 550;
  letter-spacing: -.005em; cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .12s ease, border-color .12s ease;
}
.primary {
  padding: 8px 14px;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent);
  box-shadow: var(--shadow-sm);
}
.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }

.ghost {
  padding: 8px 14px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.ghost:hover { background: var(--surface-2); border-color: var(--slate-2); }

.small { padding: 6px 11px; font-size: 12.5px; }
.full { width: 100%; }

.linklike {
  padding: 2px 0; background: none; border: none;
  color: var(--accent); font-size: 13px; font-weight: 500;
}
.linklike:hover { text-decoration: underline; text-underline-offset: 2px; }
.linklike.danger { color: var(--neg); }

/* ==========================================================================
   Forms
   ========================================================================== */
input, select, textarea {
  width: 100%; padding: 8px 11px;
  font-family: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover, select:hover { border-color: var(--slate-2); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder { color: var(--slate-2); }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.top-actions select { min-width: 260px; }

label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; font-weight: 550; color: var(--slate);
}
.hint { font-size: 12px; color: var(--slate-2); font-weight: 450; }

.filters-bar {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
}
.filters-bar form { display: flex; align-items: flex-end; gap: 10px; }
.filters-bar label {
  font-size: 11px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--slate-2);
}
.filters-bar input, .filters-bar select { width: auto; min-width: 150px; }

.calc-form, .modal-form {
  display: grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
  padding: 18px;
}
.one-col { grid-template-columns: 1fr; }
.span-2 { grid-column: span 2; }
.one-col .span-2 { grid-column: span 1; }
.form-actions { display: flex; gap: 8px; grid-column: span 2; }

.checkline { flex-direction: row; align-items: center; gap: 8px; }
.checkline input { width: auto; box-shadow: none; }

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,41,.45);
  backdrop-filter: blur(3px);
  padding: 32px 16px; overflow-y: auto;
}
.modal-backdrop.open { display: flex; align-items: flex-start; justify-content: center; }
.modal {
  width: 100%; max-width: 620px; margin: auto;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  animation: modal-in .16s cubic-bezier(.16,1,.3,1);
}
.small-modal { max-width: 420px; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(-6px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line-2);
}
.modal-head h3 {
  font-size: 15px; font-weight: 650; color: var(--ink);
  letter-spacing: -.015em;
}
.close-modal {
  display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  background: none; border: none; border-radius: var(--radius-sm);
  font-size: 18px; color: var(--slate);
}
.close-modal:hover { background: var(--surface-3); color: var(--ink); }

/* ==========================================================================
   Pagination
   ========================================================================== */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 11px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--line-2);
}
.pg-info {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 450; color: var(--slate);
}
.pager nav { display: flex; gap: 3px; }
.pg-btn {
  display: grid; place-items: center;
  min-width: 30px; height: 30px; padding: 0 9px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.pg-btn:hover { background: var(--surface-3); border-color: var(--slate-2); color: var(--ink); text-decoration: none; }
.pg-btn.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg-btn.current:hover { background: var(--accent-hi); color: #fff; }
.pg-btn.disabled { opacity: .45; pointer-events: none; }

/* ==========================================================================
   Notes, alerts, intro strip
   ========================================================================== */
.note-box {
  padding: 12px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--line-2);
  font-size: 12.5px; line-height: 1.55; color: var(--slate);
}
.note-box strong { color: var(--ink-2); font-weight: 600; }
.note-box em { font-style: normal; font-weight: 600; color: var(--ink-2); }

.intro-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}
.intro-strip h2 {
  font-size: 15px; font-weight: 600; color: var(--ink);
  letter-spacing: -.015em;
}
.intro-alert {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 20px;
  background: var(--neg-soft); color: var(--neg);
  box-shadow: inset 0 0 0 1px rgba(190,18,60,.16);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.intro-alert strong { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.flash {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; margin-bottom: 16px;
  border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
}
.flash-ok    { background: var(--pos-soft); color: var(--pos); box-shadow: inset 0 0 0 1px rgba(4,120,87,.16); }
.flash-error { background: var(--neg-soft); color: var(--neg); box-shadow: inset 0 0 0 1px rgba(190,18,60,.16); }

.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 24px;
  background: var(--surface); border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--slate-2); font-weight: 450;
}

/* ==========================================================================
   Cheque thumbnails
   ========================================================================== */
.chq-thumb {
  width: 40px; height: 28px; object-fit: cover;
  border: 1px solid var(--line); border-radius: 4px;
  cursor: zoom-in; display: block;
  transition: border-color .12s ease, transform .12s ease;
}
.chq-thumb:hover { border-color: var(--accent); transform: scale(1.04); }
.mini-ledger { display: flex; flex-direction: column; padding: 6px 18px 14px; }
.mini-ledger > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 9px 0;
  border-bottom: 1px solid var(--line-2);
}
.mini-ledger > div:last-of-type { border-bottom: none; }
.mini-ledger > div > span {
  font-size: 13px; font-weight: 500; color: var(--slate);
}
.mini-ledger > div > strong {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
.mini-ledger .btn-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 14px; border-bottom: none;
}
.mini-ledger .btn-row a { text-decoration: none; }

/* ==========================================================================
   Reports / SOA — designed to read like a formal statement of account
   ========================================================================== */
.report-toolbar { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 22px 0; }
.report-header { padding: 20px 22px; border-bottom: 1px solid var(--line); }

/* Letterhead: company mark on the left, statement label on the right */
.letterhead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding: 24px 26px;
  border-bottom: 2px solid var(--ink);
}
.letterhead h2 {
  font-size: 21px; font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.15;
}
.letterhead p {
  font-size: 12px; color: var(--slate); margin-top: 3px;
  letter-spacing: .01em;
}
.letterhead .lh-badge {
  text-align: right; flex-shrink: 0;
}
.letterhead .lh-badge span {
  display: block; font-size: 10.5px; font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase; color: var(--slate-2);
}
.letterhead .lh-badge strong {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 650; color: var(--ink); letter-spacing: -.01em;
}

/* Meta band: client / project / totals in a tinted strip with dividers */
.soa-meta {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: 0; margin: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.soa-meta div {
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 20px; min-width: 0;
  border-right: 1px solid var(--line-2);
}
.soa-meta div:last-child { border-right: none; }
.soa-meta small {
  font-size: 10.5px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.soa-meta strong {
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  font-family: var(--font); line-height: 1.3;
  overflow-wrap: anywhere;
}
/* Numeric meta values use mono for alignment */
.soa-meta strong.num-meta {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 550;
}

.soa-print .table-wrap { padding: 0; }
.soa-print table thead th { background: var(--surface-3); }

.prepared {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 26px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--slate);
}
.prepared span { color: var(--slate-2); font-weight: 600; }

/* ==========================================================================
   Login
   ========================================================================== */
.login-body {
  display: grid; place-items: center;
  min-height: 100vh; padding: 24px;
  background: var(--canvas);
  background-image:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
  background-size: 24px 24px;
}
.login-wrap { width: 100%; max-width: 380px; }
.login-brand { text-align: center; margin-bottom: 24px; }
.brand-mark {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: 0 auto 14px;
  background: var(--ink); color: #fff;
  border-radius: 14px;
  font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  box-shadow: var(--shadow-lg);
}
.login-brand h1 {
  font-size: 22px; font-weight: 700; color: var(--ink);
  letter-spacing: -.025em; margin-bottom: 4px;
}
.login-brand p {
  font-size: 12px; color: var(--slate-2); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 26px 24px;
}
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.login-form input { padding: 10px 12px; font-size: 14px; }
.login-form .primary { margin-top: 4px; padding: 11px; font-size: 14px; }
.login-foot {
  margin-top: 20px; text-align: center;
  font-size: 11.5px; color: var(--slate-2); font-weight: 500;
  letter-spacing: .02em;
}

.brand { display: flex; align-items: center; gap: 10px; }
.page { display: none; }
.page.active { display: block; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .main { padding: 20px 16px 40px; }
  .topbar { flex-direction: column; align-items: stretch; }
  .top-actions select { min-width: 0; width: 100%; }
  .calc-form, .modal-form { grid-template-columns: 1fr; }
  .span-2, .form-actions { grid-column: span 1; }
  .detail-card { border-right: none; border-bottom: 1px solid var(--line-2); }
  .topmenu { height: auto; flex-wrap: wrap; padding: 6px 10px; }
  .build-label, .tm-date { display: none; }
  .card-head { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .modal { animation: none; }
  * { transition: none !important; }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .no-print, .topmenu, .software-titlebar, .statusbar, .pager { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .main { max-width: none; padding: 0; }
  .card, .report-card, .kpi-grid, .detail-grid {
    border: 1px solid #ccc; box-shadow: none; break-inside: avoid;
  }
  thead th {
    background: #f2f2f2 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  tbody tr:hover td { background: none; }
  a { color: inherit; text-decoration: none; }
}

/* ==========================================================================
   SOA summary block (client Excel footer)
   ========================================================================== */
.soa-summary { padding: 0; }
.summary-table { width: 100%; border-collapse: collapse; }
.summary-table td {
  padding: 11px 26px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  letter-spacing: .01em; text-transform: uppercase;
}
.summary-table td.num {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--ink); white-space: nowrap;
  font-size: 13.5px; text-transform: none; letter-spacing: 0;
}
.summary-table td:nth-child(3) {
  width: 84px; color: var(--slate); font-weight: 500;
}
.summary-table tr:first-child td { border-top: none; }
.summary-table tr.summary-balance td {
  background: var(--accent-soft);
  color: var(--accent); font-weight: 800;
  border-bottom: none; border-top: 2px solid var(--accent-line);
  padding-top: 13px; padding-bottom: 13px;
}
.summary-table tr.summary-balance td.num { color: var(--accent); font-size: 15px; }
.soa-advance-note {
  padding: 12px 26px; font-size: 12px; color: var(--slate-2);
  background: var(--surface-2);
}

/* ==========================================================================
   Cheque image lightbox (same-page viewer)
   ========================================================================== */
.chq-lightbox {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(15,23,41,.82);
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
  padding: 32px; cursor: zoom-out;
}
.chq-lightbox.open { display: flex; }
.chq-lightbox img {
  max-width: 92vw; max-height: 88vh;
  border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
  background: #fff;
}
.chq-lightbox-close {
  position: absolute; top: 18px; right: 26px;
  font-size: 34px; line-height: 1; color: #fff;
  cursor: pointer; opacity: .85; font-weight: 300;
}
.chq-lightbox-close:hover { opacity: 1; }

/* ==========================================================================
   Project documents
   ========================================================================== */
.doc-grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.doc-col { padding: 16px 18px; border-right: 1px solid var(--line-2); }
.doc-col:last-child { border-right: none; }
.doc-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.doc-col-head h3 { font-size: 13px; font-weight: 650; color: var(--ink); }
.doc-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; min-height: 24px; }
.doc-empty { font-size: 12.5px; color: var(--slate-2); padding: 4px 0; }
.doc-item {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
}
.doc-link { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; text-decoration: none; color: var(--ink-2); }
.doc-link:hover { text-decoration: none; }
.doc-ico {
  flex-shrink: 0; display: grid; place-items: center;
  width: 30px; height: 22px; border-radius: 3px;
  font-size: 9px; font-weight: 700; color: #fff; background: var(--neg);
}
.doc-ico.img { background: var(--accent); }
.doc-name { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-del { flex-shrink: 0; font-size: 16px; line-height: 1; }
.doc-upload { position: relative; }
.doc-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.doc-upload-hint {
  display: block; padding: 8px 10px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; color: var(--slate);
  background: var(--surface);
}
.doc-upload:hover .doc-upload-hint { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   Tabs (in-page, no reload)
   ========================================================================== */
.tabs { margin-bottom: 18px; }
.tab-nav {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.tab-btn {
  padding: 10px 16px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--slate);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s ease, border-color .12s ease;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Payment History summary rows */
tr.total-row.subtle td { background: #fbfcfd; font-weight: 500; }
tr.total-row.balance-row td { background: #f1f5f9; font-weight: 700; border-top: 2px solid var(--line); }

/* ---- Dashboard stat cards (PAMS style: separate cards, 4 per row) ---- */
.dash-actions { display: flex; justify-content: flex-end; margin-bottom: 12px; }

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
  align-items: stretch;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.sc-label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-value { font-size: 22px; font-weight: 700; line-height: 1.2; }
.sc-note { font-size: 11px; color: var(--muted); }

.stat-card.accent-navy  { border-top-color: #1e3a8a; }
.stat-card.accent-green { border-top-color: #16a34a; }
.stat-card.accent-blue  { border-top-color: #2563eb; }
.stat-card.accent-amber { border-top-color: #d97706; }
.stat-card.accent-red   { border-top-color: #dc2626; }
.stat-card.accent-slate { border-top-color: #475569; }

@media (max-width: 1100px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .stat-cards { grid-template-columns: 1fr; } }

/* Hidden money amounts (dashboard toggle) */
body.money-hidden .money { color: transparent !important; position: relative; }
body.money-hidden .money::after {
  content: '••••••'; position: absolute; inset: 0;
  color: var(--muted); letter-spacing: 2px;
  display: flex; align-items: center;
}
body.money-hidden td.num.money::after { justify-content: flex-end; }

/* ==========================================================================
   Login — brand-led design (logo blue + lime green)
   ========================================================================== */
.login-body {
  background: linear-gradient(160deg, #F4F9FC 0%, #EDF6F1 55%, #F7FBF0 100%);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,96,144,.10) 1px, transparent 0),
    linear-gradient(160deg, #F4F9FC 0%, #EDF6F1 55%, #F7FBF0 100%);
  background-size: 26px 26px, 100% 100%;
}
.login-wrap { max-width: 400px; }

.brand-logo {
  width: 96px; height: 96px; margin: 0 auto 16px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(0, 96, 144, .16), 0 2px 6px rgba(0, 96, 144, .08);
}
.brand-logo img { width: 66px; height: 66px; object-fit: contain; display: block; }

.login-brand h1 { color: var(--brand-blue); letter-spacing: -.02em; }
.login-brand p {
  color: var(--brand-green-dk); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; font-size: 11px;
}

.login-card {
  border-radius: 16px;
  border-top: 3px solid var(--brand-green);
  box-shadow: 0 14px 34px rgba(0, 96, 144, .14), 0 2px 8px rgba(0, 96, 144, .07);
}
.login-form input:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(0, 96, 144, .14);
}
.login-form .primary.full {
  background: var(--brand-blue); border-color: var(--brand-blue);
  height: 42px; font-size: 14px; letter-spacing: .01em;
}
.login-form .primary.full:hover {
  background: var(--brand-blue-hi); border-color: var(--brand-blue-hi);
}
.login-foot { color: var(--slate-2); }

@media (max-width: 420px) {
  .brand-logo { width: 80px; height: 80px; border-radius: 18px; }
  .brand-logo img { width: 54px; height: 54px; }
}

/* App icon in the title bar shows the real logo */
.app-icon {
  background: #fff !important;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  overflow: hidden; padding: 2px;
}
.app-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Eye toggle for hiding money amounts */
.eye-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  background: var(--surface); color: var(--slate);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.eye-btn:hover { background: var(--surface-3); color: var(--brand-blue); border-color: var(--accent-line); }
.eye-btn svg { display: block; grid-area: 1 / 1; }
/* show the eye that matches the current state */
.eye-btn[data-hidden="1"] .eye-open   { display: none; }
.eye-btn[data-hidden="1"] .eye-closed { display: block; color: var(--brand-blue); }
.eye-btn[data-hidden="0"] .eye-open   { display: block; }
.eye-btn[data-hidden="0"] .eye-closed { display: none; }

/* Dashboard: no page heading, cards start at the top */
.topbar.bare { min-height: 0; padding-top: 0; padding-bottom: 8px; }
.topbar.bare > div:first-child { display: none; }


/* Bills row: its own 3-across grid so the cards fill the width */
.stat-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .stat-cards.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .stat-cards.cols-3 { grid-template-columns: 1fr; } }

/* Cheque reminder pop-up (dashboard, once per day) */
.cheque-alert-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 41, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.cheque-alert-box {
  background: #fff; border-radius: 12px; padding: 22px;
  width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.cheque-alert-head { display: flex; justify-content: space-between; align-items: flex-start; }
.cheque-alert-close {
  background: none; border: none; font-size: 26px; line-height: 1;
  color: #98a2b3; cursor: pointer; padding: 0 4px;
}
.cheque-alert-close:hover { color: #475467; }