:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --border: #e2e5ea;
  --text: #1d2430;
  --muted: #6b7482;
  --accent: #14532d;
  --accent-hover: #166534;
  --pos: #15803d;
  --neg: #b91c1c;
  --danger: #b91c1c;
  --radius: 10px;
}

* { box-sizing: border-box; }

/* the hidden attribute must always win, even over display rules like .login-wrap's flex */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.error { color: var(--danger); font-size: 13.5px; }

/* ---------- login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(29, 36, 48, 0.06);
}

.login-card h1 { margin: 0; font-size: 24px; color: var(--accent); }
.login-card p { margin: 0 0 6px; }

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* flex-none + nowrap: with the company switcher alongside the wordmark, the
   brand is wide enough that a shrinking flex item would wrap and deepen the
   whole top bar. */
.brand { font-weight: 700; font-size: 17px; color: var(--accent); flex: 0 0 auto; white-space: nowrap; }

.entity-chip {
  background: #e7f0ea;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  padding: 3px 10px;
  margin-left: 8px;
  vertical-align: 2px;
  /* legal names are long — clip rather than push the tabs off the row */
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Company switcher — shown instead of the chip only for people who belong to
   more than one company, so the finance team's header is unchanged. */
.entity-pick {
  background: #e7f0ea;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 3px 26px 3px 10px;
  margin-left: 8px;
  vertical-align: 2px;
  width: auto; /* the base select rule is width:100%, which would wrap the header */
  cursor: pointer;
  appearance: none;
  max-width: 280px;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23127a5f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 9px;
}
.entity-pick:hover { border-color: var(--accent); }
.entity-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.user-box { display: flex; align-items: center; gap: 12px; }

/* ---------- layout ---------- */
main {
  max-width: 1380px;
  margin: 24px auto 80px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}

/* last in the form's tab order (after Submit) but visually in the panel head.
   Each offset is by ID, so a NEW button needs a rule here or it falls into the
   form's normal flow — which is exactly how the Maybank button first shipped
   invisible. Daily Sales gives up its slot to the bank imports and steps left,
   but only while those buttons are shown: on a company without Maybank/OCBC
   channels they are [hidden] and Daily Sales keeps the row gap-free. */
#tx-collective { position: absolute; top: 16px; right: 20px; }
#tx-import { position: absolute; top: 16px; right: 152px; }
#tx-ocbc { position: absolute; top: 16px; right: 262px; }
#tx-maybank { position: absolute; top: 16px; right: 262px; }
#tx-daily { position: absolute; top: 16px; right: 262px; }
#tx-form:has(#tx-ocbc:not([hidden])) #tx-maybank { right: 372px; }
#tx-form:has(#tx-maybank:not([hidden])) #tx-daily { right: 392px; }
#tx-form:has(#tx-ocbc:not([hidden])) #tx-daily { right: 392px; }
#tx-form:has(#tx-maybank:not([hidden])):has(#tx-ocbc:not([hidden])) #tx-daily { right: 502px; }

/* bulk Excel import modal */
/* eleven columns: the card takes the window (the .dd-card 780px cap declared
   later in this file used to win and clipped everything after Stay), and the
   table scrolls sideways rather than hiding columns on a narrow screen */
.modal-card.dd-card.imp-card { max-width: min(1500px, 96vw); width: 96vw; }
.imp-steps { margin: 4px 0 14px; padding-left: 22px; font-size: 13px; line-height: 1.7; color: var(--text); }
.imp-intro-actions { display: flex; gap: 10px; margin-bottom: 6px; }
.imp-body { max-height: 56vh; overflow-x: auto; }
/* what the file adds up to, per currency, before Approve */
.imp-total { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2, var(--panel)); font-size: 13px; }
.imp-total b { font-variant-numeric: tabular-nums; }
.imp-total .muted { font-size: 12px; }
#imp-table { width: 100%; font-size: 12px; border-collapse: collapse; }
#imp-table th, #imp-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; white-space: nowrap; }
#imp-table td:nth-child(3) { white-space: normal; min-width: 160px; overflow-wrap: break-word; }
#imp-table td:last-child { white-space: normal; min-width: 180px; }
#imp-table thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; }
#imp-table th.num, #imp-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
#imp-table .amt-pos { color: var(--pos); } #imp-table .amt-neg { color: var(--neg); }
#imp-table tr.imp-r-bad td { background: #fdf0f0; }
#imp-table tr.imp-r-warn td { background: #fdf6e7; }
.imp-good { color: #15803d; font-weight: 700; }
.imp-warn { color: #8f5507; }
.imp-bad { color: #c02929; }
#imp-msg { margin-right: auto; }
[data-theme="dark"] #imp-table tr.imp-r-bad td { background: #2a1515; }
[data-theme="dark"] #imp-table tr.imp-r-warn td { background: #33270f; }
[data-theme="dark"] .imp-good { color: #57c98a; }
[data-theme="dark"] .imp-warn { color: #e0a04d; }
[data-theme="dark"] .imp-bad { color: #f47171; }

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-head h2 { margin: 0; font-size: 16.5px; }

/* ---------- balances ---------- */
.balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.balance-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.balance-card .cur { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0.4px; }
.balance-card .amt { font-size: 20px; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.balance-card .amt.neg { color: var(--neg); }
.balance-card .meta { font-size: 12px; color: var(--muted); }

/* ---------- form (sectioned "New transaction" card) ---------- */
.txs { padding: 4px 2px; }
.txs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.txs-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #e6f6ec; color: #157347; flex: 0 0 auto;
}
.txs-title h3 { margin: 0; font-size: 15px; color: #157347; font-weight: 700; }
.txs-title p { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); }
.txs-sep { border: none; border-top: 1px solid #edf0f3; margin: 16px 0; }

.txs-grid { display: grid; gap: 14px 22px; }
.txs-grid.g-details { grid-template-columns: 2fr 1fr 1fr; }
.txs-grid.g-amount { grid-template-columns: 1fr 1fr 1fr 1fr; }
.txs-grid.g-class { grid-template-columns: 1fr 1fr 1fr 1fr; }
.txs-grid .span-all { grid-column: 1 / -1; }

.tx-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #2c3440; }
.tx-form label .muted.small { font-weight: 400; }
.tx-form input, .tx-form select {
  border: 1px solid #e3e7ec; border-radius: 10px; padding: 10px 12px;
  font-size: 13.5px; font-weight: 400; background: #fff;
}

.inline-check {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  align-self: end;
  padding-bottom: 10px;
  color: var(--text) !important;
}

input, select, button {
  font: inherit;
  color: var(--text);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="month"], select {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  background: #fff;
  width: 100%;
}

/* the focus ring is the cursor for keyboard-only entry — it must be unmissable,
   and buttons carry the same ring so the whole form speaks one focus language */
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.form-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* live "about to save" summary — the last look before Enter commits the row */
.tx-preview { margin-right: auto; font-size: 12.5px; color: var(--text); background: #f0f6f2;
  border: 1px solid #cfe3d6; border-radius: 8px; padding: 6px 11px; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .tx-preview { background: #17301f; border-color: #2c4a38; }

button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 9px 18px;
  font-weight: 600;
  cursor: pointer;
}

button:hover { background: var(--accent-hover); }
button:disabled { opacity: 0.55; cursor: default; }

button.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
}

button.ghost:hover { background: #f0f4f1; }

button.link-danger {
  background: transparent;
  color: var(--danger);
  padding: 2px 6px;
  font-size: 12.5px;
  font-weight: 500;
}

button.link-danger:hover { background: #fbeaea; }

button.link-edit {
  background: transparent;
  color: var(--accent);
  padding: 2px 6px;
  font-size: 12.5px;
  font-weight: 500;
}

button.link-edit:hover { background: #eaf3fb; }

td.row-actions { white-space: nowrap; }

button.linklike {
  background: transparent;
  color: var(--accent);
  border: none;
  padding: 2px;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: underline;
  align-self: flex-start;
}
button.linklike:hover { background: transparent; color: var(--accent-hover); }

/* ---------- change / reset password modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 28, 38, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(20, 28, 38, 0.25);
  padding: 22px 24px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-card h2 { margin: 0; font-size: 18px; }
.modal-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.modal-card label input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
#pw-msg.error { color: var(--neg); }
#pw-msg.ok { color: var(--pos); }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: 13.5px; }

th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }

th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

td .sub { display: block; font-size: 11.5px; color: var(--muted); white-space: normal; }

tr.voided td { text-decoration: line-through; color: var(--muted); }
tr.voided td .sub { text-decoration: none; }

.amt-pos { color: var(--pos); font-weight: 600; }
.amt-neg { color: var(--neg); font-weight: 600; }

.table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

@media (max-width: 860px) {
  .txs-grid.g-details, .txs-grid.g-amount, .txs-grid.g-class { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; }

.tabs .tab {
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 7px;
  padding: 7px 16px;
  font-weight: 600;
}

.tabs .tab:hover { background: #f0f4f1; color: var(--text); }
.tabs .tab.active { background: #e7f0ea; color: var(--accent); }

.head-actions { display: flex; align-items: center; gap: 12px; }

button.small-btn { padding: 5px 12px; font-size: 12.5px; }

/* ---------- report tables ---------- */
.report-wrap { max-height: 70vh; overflow: auto; }

.report-table { font-size: 12.5px; }

.report-table th, .report-table td { padding: 6px 8px; }

/* Ledger table: compact so all columns fit the wide layout without a horizontal scroll */
#ledger-table { font-size: 12.5px; border-collapse: separate; border-spacing: 0; }
#ledger-table th, #ledger-table td { padding: 12px 10px; }
#ledger-table thead th {
  background: #f7f8fa; color: #5b6472; font-weight: 600; font-size: 11.5px;
  text-transform: none; letter-spacing: .01em; border-bottom: 1px solid #e8ebef;
}
#ledger-table thead th:first-child { border-top-left-radius: 10px; }
#ledger-table thead th:last-child { border-top-right-radius: 10px; }
#ledger-table tbody td { border-bottom: 1px solid #eef0f3; }
#ledger-table tbody tr:hover td { background: #fafbfc; }
#ledger-table .th-sort { cursor: pointer; user-select: none; }
#ledger-table .th-sort:hover { color: var(--accent); }
/* the import review table shows the same counterparty + grey commentary shape as
   the ledger, so both share these rules ("td .sub" below is already global) */
#ledger-table .item-title, #imp-table .item-title { font-weight: 600; color: #1d2530; display: block; }
#ledger-table td.num.amt-pos { color: #16803c; font-weight: 600; }
#ledger-table td.num.amt-neg { color: #d03030; font-weight: 600; }

/* colored category / department badges */
.cat-pill {
  display: inline-block; padding: 3px 10px; border-radius: 7px;
  font-size: 11.5px; font-weight: 550; white-space: nowrap;
}
.cp-sale  { background: #e6f6ec; color: #187a41; }
.cp-op    { background: #e9f1fb; color: #2a5db0; }
.cp-bank  { background: #f0ecfb; color: #6742c9; }
.cp-tax   { background: #fdf1e2; color: #9a5c08; } /* ≥4.5:1 on the amber tint */
.cp-capex { background: #e4f5f4; color: #0f766e; }
/* Ledger columns that only exist for a company that has departments, sales
   channels and stays. Set on <html> by applyEntityFeatures — hiding the entry
   field but leaving a column of dashes would explain nothing. Stay date belongs
   to channel revenue, so it goes with the channel. */
:root[data-nodept] .col-dept,
:root[data-nochannel] .col-channel,
:root[data-nochannel] .col-stay { display: none; }

/* ---- daily sales entry ---- */
.ds-card { max-width: 720px; width: 100%; }
.ds-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 6px;
  padding: 10px 0 12px; border-bottom: 1px solid var(--border);
}
.ds-spacer { flex: 1; }
.ds-body { max-height: 58vh; overflow-y: auto; padding: 4px 0; }
.ds-group { margin: 10px 0 4px; }
.ds-group h3 {
  margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.ds-row {
  display: grid; grid-template-columns: 1fr 44px 108px 96px 1fr;
  align-items: center; gap: 8px; padding: 3px 0;
}
.ds-row.ds-on .ds-name { font-weight: 600; }
.ds-name { font-size: 13px; }
/* the desk board has a line for every calendar day since the first posting —
   nearly a thousand of them — so it scrolls inside its own card instead of
   running the Forex page off the bottom of the screen */
#fx-desk-card .table-wrap { max-height: 60vh; overflow-y: auto; }
.ds-cur { font-size: 11px; color: var(--muted); text-align: right; }
/* the currency each block of tills is counted in — a rule above it does the
   separating, except for the first block, which the facility heading already
   sits above */
.ds-curhead {
  margin: 10px 0 3px; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text);
}
.ds-colhead + .ds-curhead { margin-top: 0; padding-top: 0; border-top: 0; }
.ds-row input { width: 100%; padding: 5px 8px; font-size: 13px; text-align: right; }
.ds-nofee { text-align: center; color: var(--border); }
.ds-gross { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
/* a fee-bearing row with no fee typed yet: gross equals net, but say so quietly
   so it is not mistaken for a finished figure */
.ds-gross-pending { font-weight: 400; color: var(--muted); }
.ds-colhead {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding-bottom: 2px;
}
.ds-colhead span { text-align: right; }
.ds-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
  .ds-row { grid-template-columns: 1fr 36px 84px 76px; }
  .ds-gross { grid-column: 1 / -1; text-align: right; }
}

/* Maybank statement import: one block per stay date, one row per facility. Wider
   than the daily form because each row has to show which schemes made it up —
   that breakdown is what lets the figure be checked against the paper slips. */
/* the import cards must never outgrow the viewport: the slip register can run
   to a hundred rows, and a card taller than the screen with a fixed backdrop
   cannot be scrolled at all. Cap the card, let it scroll, and keep the review
   list and the register each inside their own scroll area. */
.mb-card { max-width: 860px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; }
.mb-card .mb-body { max-height: 46vh; }
.sl-box .sl-scroll { max-height: 34vh; overflow: auto; }
.mb-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 6px;
  padding: 10px 0 12px; border-bottom: 1px solid var(--border);
}
.mb-body { max-height: 58vh; overflow-y: auto; padding: 4px 0; }
.mb-file input { display: none; }
.mb-file span {
  display: inline-block; padding: 5px 10px; font-size: 12px; cursor: pointer;
  border: 1px dashed var(--border); border-radius: 6px; color: var(--muted);
}
.mb-file:hover span { border-style: solid; color: inherit; }
.mb-day { margin: 12px 0 6px; }
.mb-day h3 {
  margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.mb-day-closed h3 { color: var(--warn, #b45309); }
.mb-row {
  display: grid; grid-template-columns: 108px 1fr 110px 108px 120px;
  align-items: center; gap: 8px; padding: 4px 0;
}
.mb-row.mb-off { opacity: .45; }
.mb-pick { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.mb-parts { font-size: 11px; color: var(--muted); line-height: 1.4; }
/* the gross a wallet net implies — quiet enough to ignore, legible enough to
   check a paper slip against; loud only when it is not a whole ringgit */
.mb-gh { font-size: 10px; opacity: 0.72; white-space: nowrap; }
.mb-gh-odd { opacity: 1; color: var(--warn, #b45309); font-weight: 600; }
.mb-moved { font-size: 10px; color: var(--ok, #15803d); font-weight: 600; white-space: nowrap; }
/* wallet batch-night panel — same furniture as the weekend-Amex panel */
.mb-wnight-lede { font-size: 11px; color: var(--muted); margin: 0 0 8px; line-height: 1.5; }
.mb-wnight { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line, #e5e7eb); }
.mb-wnight .mb-wknd-what { flex: 1 1 320px; }
.mb-wnight-moved { background: color-mix(in srgb, var(--ok, #15803d) 6%, transparent); }
.mb-wnight .mb-wknd-note { flex: 1 1 100%; }
.mb-net, .mb-fee { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.mb-row input { width: 100%; padding: 5px 8px; font-size: 13px; text-align: right; }
/* the unit under each figure — "net to bank", the fee percentage — carries the
   meaning, so it sits with the number rather than in a distant column header */
.mb-net small, .mb-fee small, .mb-grosswrap small {
  display: block; font-size: 10px; font-weight: 400; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.mb-grosswrap small { text-align: right; }
.mb-fee-bad, .mb-fee.mb-fee-bad small { color: var(--danger, #b91c1c); font-weight: 600; }
.mb-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border);
}
/* weekend Amex split: the bank fuses Fri-Sun into one Tuesday line; each day's
   gross comes off the paper slips, so the boxes sit above the day list where
   the fused figure would otherwise mislead */
.mb-wknd-box {
  margin: 10px 0 4px; padding: 8px 10px;
  border: 1px dashed var(--border); border-radius: 8px;
}
.mb-wknd-box h3 {
  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--warn, #b45309);
}
.mb-wknd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.mb-wknd-what { font-size: 12px; min-width: 240px; }
.mb-wknd-day { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.mb-wknd-day input { width: 92px; padding: 4px 7px; font-size: 12px; text-align: right; }
.mb-wknd-note { flex-basis: 100%; font-size: 11px; color: var(--muted); }
.mb-wknd-note.mb-wknd-ok { color: var(--ok, #15803d); }
/* the settlement-slip register at the foot of both imports: every printed
   slip as an open item until a bank line pays it. Quiet by default; red where
   the bank is late, green where this statement settles a slip. */
.sl-box { margin: 12px 0 0; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px 10px; }
.sl-box > summary {
  list-style: none; cursor: pointer; padding: 10px 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.sl-box > summary::-webkit-details-marker { display: none; }
.sl-box > summary::before { content: '▸'; font-size: 11px; color: var(--muted); }
.sl-box[open] > summary::before { content: '▾'; }
.sl-counts { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 11px; }
.sl-counts b { font-weight: 600; }
.sl-counts .sl-late { color: var(--danger, #b91c1c); font-weight: 700; }
.sl-counts .sl-paid { color: var(--ok, #15803d); }
.sl-lede { font-size: 11px; color: var(--muted); margin: 0 0 8px; line-height: 1.5; }
.sl-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sl-table th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.sl-table td { padding: 4px 6px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align: top; }
.sl-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-table tr.sl-night-first td { border-top: 1px solid var(--border); }
.sl-table small { display: block; font-size: 10px; color: var(--muted); }
.sl-st-open { color: var(--muted); }
.sl-st-late { color: var(--danger, #b91c1c); font-weight: 600; }
.sl-st-now { color: var(--ok, #15803d); font-weight: 600; }
.sl-st-paid { color: var(--ok, #15803d); }
.sl-st-moved { color: var(--warn, #b45309); font-weight: 600; }
.sl-x { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 12px; padding: 0 4px; }
.sl-x:hover { color: var(--danger, #b91c1c); }
.sl-add { margin-top: 10px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
/* one box per figure on the printed slip, in the order the slip prints them */
.sl-f { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
.sl-f label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.sl-f input, .sl-f select { font-size: 13px; padding: 5px 7px; }
.sl-f .sl-gross, .sl-f .sl-count, .sl-f .sl-batch { width: 108px; text-align: right; }
.sl-f .sl-count { width: 88px; }
.sl-bulk { grid-column: 1 / -1; margin-top: 2px; }
.sl-bulk summary { font-size: 11px; color: var(--muted); cursor: pointer; }
.sl-bulk textarea { width: 100%; min-height: 64px; margin-top: 6px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 6px 8px; resize: vertical; }
.sl-bulk .sl-save { margin-top: 6px; }
.sl-add textarea { width: 100%; min-height: 64px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 6px 8px; resize: vertical; }
.sl-add small { grid-column: 1 / -1; font-size: 10.5px; color: var(--muted); line-height: 1.5; }
.sl-add-err { color: var(--danger, #b91c1c); font-size: 11px; margin-top: 4px; }
.sl-add-ok { color: var(--ok, #15803d); font-size: 11px; margin-top: 4px; }
.mb-slip { font-size: 10px; white-space: nowrap; }
.mb-slip-ok { color: var(--ok, #15803d); }
.mb-slip-moved { color: var(--warn, #b45309); font-weight: 600; }
.mb-slip-none { color: var(--muted); opacity: .8; }

/* the balance control at the foot of the import: the statement's own closing
   figure against what the run posts. Green means the arithmetic closed; red
   disables the Post button. */
.mb-bal { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); }
.mb-bal h3 {
  margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.mb-bal-lede { font-size: 11px; color: var(--muted); margin: 0 0 8px; line-height: 1.5; }
.mb-bal-why { margin: 8px 0 0; }
.mb-bal-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 3px 0; font-size: 12px;
}
.mb-bal-row b { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.mb-bal-row b small {
  display: block; font-size: 10px; font-weight: 400; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.mb-bal-sep { border-top: 1px solid var(--border); margin-top: 3px; padding-top: 6px; }
.mb-bal-final { border-top: 2px solid currentColor; margin-top: 4px; padding-top: 6px; font-weight: 700; }
.mb-bal-adv {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); line-height: 1.5;
}
.mb-bal-adv input { margin-top: 2px; flex: 0 0 auto; }
.mb-bal-ok { border-color: var(--ok, #15803d); background: color-mix(in srgb, var(--ok, #15803d) 6%, transparent); }
.mb-bal-ok h3, .mb-bal-ok .mb-bal-final { color: var(--ok, #15803d); }
.mb-bal-bad { border-color: var(--danger, #b91c1c); background: color-mix(in srgb, var(--danger, #b91c1c) 6%, transparent); }
.mb-bal-bad h3, .mb-bal-bad .mb-bal-final-bad { color: var(--danger, #b91c1c); }
.mb-bal-warn { border-color: var(--warn, #b45309); background: color-mix(in srgb, var(--warn, #b45309) 6%, transparent); }
.mb-bal-warn h3 { color: var(--warn, #b45309); }
.mb-tag-warn { color: var(--warn, #b45309); border-color: currentColor; }
.mb-tag-ok { color: var(--ok, #15803d); border-color: currentColor; }
.mb-tag-bad { color: var(--danger, #b91c1c); border-color: currentColor; font-weight: 700; }
@media (max-width: 720px) {
  .mb-row { grid-template-columns: 100px 1fr 100px; row-gap: 4px; }
  .mb-parts { grid-column: 1 / -1; }
}

/* awaiting-invoice row: the ✎ correction sits beside the Invoice button */
.rcv-await-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
/* the Invoice…/edit buttons stay pinned on the right while the queue scrolls,
   so they are reachable however many columns the table grows */
#rcv-await td.rcv-await-actions, #rcv-await th.rcv-act-h {
  position: sticky; right: 0; background: var(--panel);
  box-shadow: -10px 0 10px -10px rgba(31, 45, 61, .35);
}
[data-theme="dark"] #rcv-await td.rcv-await-actions,
[data-theme="dark"] #rcv-await th.rcv-act-h { box-shadow: -10px 0 10px -10px rgba(0, 0, 0, .7); }
.rcv-fixamt { padding-left: 8px; padding-right: 8px; font-size: 13px; line-height: 1; }

/* transient "saved" note beside the reconciliation button */
.recon-saved {
  font-size: 12px;
  font-weight: 600;
  color: #187a41;
  background: #e6f6ec;
  border-radius: 20px;
  padding: 3px 10px;
}
[data-theme="dark"] .recon-saved { background: #17301f; color: #57c98a; }

.cp-cap   { background: #fdecef; color: #a3324b; } /* ALA: shareholder & capital movements */
.cp-inv   { background: #e2f1f7; color: #10627c; } /* ALA: fund dealing */
.cp-na    { background: #eff1f4; color: #57606d; }
.dept-pill {
  display: inline-block; padding: 3px 10px; border-radius: 7px;
  background: #eef2ff; color: #4655c8; font-size: 11.5px; font-weight: 600;
}

/* filter card above the table — a single row (scrolls sideways if the window is narrow) */
.lf-card {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 6px;
  background: var(--panel); border: 1px solid #e8ebef; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(20, 30, 40, .05);
  padding: 8px; margin-bottom: 16px;
  overflow-x: auto;
}
.lf-chip {
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  border: 1px solid #e3e7ec; border-radius: 9px; padding: 4px 8px; background: #fff;
  flex: 0 0 auto;
}
.lf-label { font-size: 10px; font-weight: 600; color: #8a93a1; white-space: nowrap; }
.lf-chip select, .lf-chip input {
  border: none; background: transparent; padding: 0; margin: 0;
  font-size: 12px; color: #1d2530; min-width: 0; outline: none; box-shadow: none;
}
.lf-chip select:focus, .lf-chip input:focus { outline: none; box-shadow: none; border: none; }
.lf-chip select { max-width: 102px; }
.lf-chip input[inputmode="decimal"] { width: 42px; }
.lf-controls { display: flex; align-items: center; gap: 4px; position: relative; }
.lf-sep { color: #8a93a1; }
/* compact English date buttons; the real date input is rendered but invisible */
.lf-datebtn {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f4f6f8; border: none; border-radius: 6px;
  padding: 2px 7px; font-size: 11.5px; color: #8a93a1; cursor: pointer; white-space: nowrap;
}
.lf-datebtn:hover { background: #eceff2; color: #1d2530; }
.lf-datelbl.set { color: #1d2530; font-weight: 600; }
.lf-datehidden {
  position: absolute; left: 0; bottom: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; border: 0; padding: 0;
}
/* each filter date button gets its input overlaid transparently on top (mobile-safe tap);
   the input carries data-nd so the shared [data-nd] overlay rule sizes it to this wrap */
.lf-dpwrap { position: relative; display: inline-block; }
.lf-search {
  flex-direction: row; align-items: center; gap: 6px; flex: 1 1 150px; min-width: 90px;
  color: #8a93a1;
}
.lf-search input { width: 100%; font-size: 12.5px; }
.lf-clear {
  display: inline-flex; align-items: center; gap: 5px; align-self: center; flex: 0 0 auto;
  margin-left: auto; border-radius: 9px; padding: 8px 12px; font-size: 12px; white-space: nowrap;
}

/* calendar-button replacement for native date/month inputs (app-wide) */
.nd-wrap { position: relative; display: inline-flex; vertical-align: middle; }
.nd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f4f6f8; border: 1px solid #e3e7ec; border-radius: 8px;
  padding: 6px 10px; font-size: 12.5px; color: var(--muted);
  cursor: pointer; white-space: nowrap;
}
.nd-btn:hover { border-color: var(--accent); color: var(--text); background: #eef2f0; }
.nd-lbl.set { color: var(--text); font-weight: 600; }
/* transparent native input overlaid ON the button — a tap opens the OS picker
   directly, which is reliable on mobile (showPicker on a hidden input is not) */
input[type="date"][data-nd], input[type="month"][data-nd] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; padding: 0; border: 0; min-width: 0;
  cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent;
}
/* match the New-transaction form's larger fields */
.tx-form .nd-wrap { width: 100%; }
.tx-form .nd-btn { width: 100%; background: #fff; padding: 10px 12px; font-size: 13.5px; border-radius: 10px; }

/* attachment drag & drop zone */
.att-drop {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border: 2px dashed var(--border); border-radius: 10px;
  padding: 16px 14px; margin: 10px 0 4px;
  color: var(--muted); font-size: 12.5px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.att-drop:hover { border-color: var(--accent); color: var(--accent); }
.att-dragging .att-drop { border-color: var(--accent); background: rgba(20, 83, 45, .07); color: var(--accent); }
/* cards without a dedicated drop zone (Maybank import) show a dashed outline instead */
.modal-card.att-dragging { outline: 2px dashed var(--accent); outline-offset: -6px; }
/* typed-figure number boxes (Maybank import, the ledger entry form and its
   collective rows) — spinner arrows are noise */
.mb-card input[type="number"]::-webkit-outer-spin-button,
.mb-card input[type="number"]::-webkit-inner-spin-button,
#tx-form input[type="number"]::-webkit-outer-spin-button,
#tx-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mb-card input[type="number"],
#tx-form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* collective-entry rows */
.ce-row {
  display: grid; grid-template-columns: 120px 150px 110px 1fr 34px;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
#ce-section.ce-nofee .ce-row { grid-template-columns: 120px 150px 1fr 34px; }
#ce-section.ce-nofee .ce-fee { display: none; }
/* expenses have no stay day: the Stay date column only renders for channel revenue */
#ce-section.ce-nostay .ce-row { grid-template-columns: 120px 110px 1fr 34px; }
#ce-section.ce-nostay .ce-stay { display: none; }
#ce-section.ce-nostay.ce-nofee .ce-row { grid-template-columns: 120px 1fr 34px; }
.ce-row.ce-head { margin: 2px 0 4px; }
.ce-row.ce-head span { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ce-row input { width: 100%; min-width: 0; font-size: 12.5px; padding: 7px 9px; }
.ce-row .ce-del { padding: 5px 9px; }

/* breakdown modal */
.bd-row {
  display: grid; grid-template-columns: 1.3fr 0.8fr 0.7fr 1.7fr 34px;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
/* channel-sale breakdowns carry a stay-date column */
.bd-row.bd-sale { grid-template-columns: 1.2fr 0.7fr 0.7fr 1fr 1.3fr 34px; }
.bd-row.bd-head { margin: 6px 0 4px; }
.bd-row.bd-head span { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.bd-row select, .bd-row input { width: 100%; min-width: 0; font-size: 12.5px; padding: 7px 9px; }
.bd-row .bd-del { padding: 5px 9px; }
.bd-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px;
}
#bd-remaining.err { color: var(--danger); font-weight: 600; }
#bd-msg.err { color: var(--danger); }

/* reconciliation status table */
/* Fifteen money columns have to fit a laptop. 14px each side was 28px of air
   per column — 390px across the table — for figures that are 70px wide. */
#recon-status th, #recon-status td { padding: 9px 8px; }
#recon-status td.num, #recon-status th.num { font-variant-numeric: tabular-nums; }
#recon-status tbody td { border-bottom: 1px solid #eef0f3; }
#recon-status .rs-cur { font-weight: 700; color: #1d2530; }
#recon-status th.rs-sort { cursor: pointer; user-select: none; white-space: nowrap; }
#recon-status th.rs-sort:hover { color: var(--accent); }
#recon-status .rs-arrow { font-size: 10px; opacity: .65; }
#recon-status td.rs-neg { color: #d03030; font-weight: 600; }
/* the ledger column is the app's OWN computed balance — tinted and walled off
   so it cannot be misread as one more bank alongside the holder columns */
#recon-status th.rs-ledger, #recon-status td.rs-ledger {
  background: #edf4ef; border-right: 2px solid #c6d9cc;
}
#recon-status td.rs-ledger { font-weight: 600; color: var(--accent); }
/* money the bank already holds that the ledger cannot book yet — tinted like
   the † footnote it belongs to, so the column and the note read as one thing */
#recon-status th.rs-unbooked, #recon-status td.rs-unbooked {
  background: #fdf6e7; border-right: 1px solid #ecd9a8;
}
#recon-status td.rs-unbooked { color: #8f5507; font-weight: 600; }
#recon-status td.rs-unbooked.muted { color: var(--muted); font-weight: 400; }
[data-theme="dark"] #recon-status th.rs-unbooked,
[data-theme="dark"] #recon-status td.rs-unbooked { background: #33270f; border-right-color: #57503a; }
[data-theme="dark"] #recon-status td.rs-unbooked { color: #e0a04d; }
/* the reported column is the SUM of the bank columns — blue, walled off on its
   left so the bank block reads as feeding into it */
#recon-status th.rs-reported, #recon-status td.rs-reported {
  background: #edf2f9; border-left: 2px solid #c8d6ea;
}
#recon-status td.rs-reported { color: #2a5da8; }
/* the all-currencies USD total under the reconciliation table */
#recon-status tfoot.rs-usd-total td, #recon-status tr.rs-usd-total td {
  border-top: 2px solid #c6d9cc; padding-top: 9px; font-weight: 600;
}
#recon-status tr.rs-usd-total td.rs-ledger { border-right: 2px solid #c6d9cc; }
#recon-status tr.rs-usd-total td.rs-ledger b { font-size: 1.06em; }

/* ledger rows holding a lump that still needs its stay-date breakdown */
#ledger-body tr.needs-bd td:first-child { box-shadow: inset 3px 0 0 #e0a13a; }
.bd-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: #fdf3e0; color: #9a6a12; border: 1px solid #ecd9ae;
}
.tie-pill {
  display: inline-block; padding: 3px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
/* Ledger Invoice column on partner receipts: the matched register invoice
   number(s), or a pill saying none is tied yet */
.inv-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.inv-none { background: #fdf3e0; color: #9a6a12; border: 1px solid #ecd9ae; cursor: help; }
.inv-part { background: #eef2f7; color: #4b5b73; border: 1px solid #d3dbe6; cursor: help; }
.inv-link { font-size: 12px; font-weight: 600; white-space: nowrap; }
/* many invoices on one receipt: a wrapped block of about three rows, not one
   line running off the table; the rest behind "+N more" */
.inv-ties { display: flex; flex-wrap: wrap; gap: 2px 9px; width: max-content; max-width: 330px; align-items: baseline; }
.inv-ties .inv-extra { display: none; }
.inv-ties.open .inv-extra { display: inline; }
.inv-more { font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
[data-theme="dark"] .inv-none { background: #33290f; color: #e8bf6e; border-color: #4d3d17; }
[data-theme="dark"] .inv-part { background: #22293a; color: #b8c3d6; border-color: #34405a; }
.tp-yes { background: #e6f6ec; color: #136f36; } /* ≥4.5:1 on the green tint */
.tp-no { background: #fdecec; color: #c02929; } /* ≥4.5:1 on the red tint */
.fx-note {
  display: flex; align-items: center; gap: 7px;
  color: var(--muted); font-size: 12.5px; margin: 10px 2px 0;
}
.fx-note:has(span:empty) { display: none; }

/* green primary button (Export CSV) */
button.btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  background: #157347; color: #fff; border-radius: 9px;
  padding: 8px 16px; font-size: 13px; font-weight: 600;
}
button.btn-primary:hover { background: #116038; }

/* per-row "⋯" actions */
.menu-btn {
  background: #fff; border: 1px solid #e3e7ec; border-radius: 8px;
  padding: 2px 10px; font-size: 15px; line-height: 1.4; color: #57606d; cursor: pointer;
}
.menu-btn:hover { border-color: var(--accent); color: var(--accent); }

/* floating vertical row menu */
#row-menu-pop {
  position: fixed; z-index: 300; min-width: 150px;
  background: #fff; border: 1px solid #e3e7ec; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(20, 30, 40, .16);
  padding: 5px;
}
#row-menu-pop .rmp-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  text-align: left; background: transparent; color: #2c3440;
  border: none; border-radius: 7px; padding: 8px 11px;
  font-size: 12.5px; font-weight: 500; cursor: pointer;
}
#row-menu-pop .rmp-item:hover { background: #f4f6f8; }
#row-menu-pop .rmp-item svg { color: #8a93a1; flex: 0 0 auto; }
#row-menu-pop .rmp-danger, #row-menu-pop .rmp-danger svg { color: var(--danger); }
#row-menu-pop .rmp-danger:hover { background: #fbeaea; }
#row-menu-pop .rmp-sep { border-top: 1px solid #eef0f3; margin: 4px 3px; }

/* "part of a breakdown" lineage marker under the item */
.bd-parent { color: #6742c9; }
#ledger-table td:nth-child(4) { white-space: normal; min-width: 150px; } /* Item can wrap */

/* Monthly matrix tables (Budget, Capex, Deposits summary) */
#tab-budget .table-wrap, #tab-capex .table-wrap, #tab-deposits .table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: auto; }
.dept-matrix { font-size: 12.5px; }
.dept-matrix th, .dept-matrix td { text-align: center; vertical-align: middle; padding: 7px 10px; }
.dept-matrix thead th { text-transform: none; color: var(--muted); font-weight: 600; }
.dept-matrix td.sticky-col, .dept-matrix th.sticky-col { text-align: left; font-weight: 700; color: var(--text); }
.dept-matrix tbody td { border-bottom: none; }
.dept-matrix tbody tr:nth-child(even) td { background: #f5f7f8; }
.dept-matrix tbody td.sticky-col { background: var(--panel); }
.dept-matrix tbody tr:nth-child(even) td.sticky-col { background: #f5f7f8; }
.dept-matrix .total-col { background: rgba(31, 45, 61, 0.045); font-weight: 700; }
.dept-matrix tbody tr.budget-total td { background: #eaf0fb; font-weight: 700; border-top: 2px solid #cad6ec; }
.dept-matrix td.bud-cell { cursor: pointer; }
.dept-matrix td.bud-cell:hover { background: #eef4ff; box-shadow: inset 0 0 0 1px #cdddf7; }
.dept-matrix td.dep-out { font-weight: 700; color: var(--neg); }
#deposits-detail .dep-paid { color: var(--neg); font-weight: 600; }
/* Budget: editable target inputs + remaining colours */
#budget-table input.budget-in { width: 88px; text-align: right; padding: 4px 6px; font-size: 12.5px; }
#budget-table td.rem-ok { color: var(--pos); }
#budget-table td.rem-over { color: var(--neg); font-weight: 700; }
#budget-table .bud-fill { border: 1px solid var(--border); background: var(--panel); color: var(--muted); border-radius: 5px; cursor: pointer; font-size: 11px; line-height: 1; padding: 2px 5px; margin-left: 4px; }
#budget-table .bud-fill:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- multi-select dropdown (lounge chart programs) ---------- */
.ms-dropdown { position: relative; display: inline-block; }
.ms-toggle { cursor: pointer; }
.ms-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; background: #fff;
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  padding: 8px; min-width: 200px; max-height: 320px; overflow: auto; }
.ms-panel label { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 13px;
  color: var(--text); cursor: pointer; border-radius: 6px; white-space: nowrap; }
.ms-panel label:hover { background: #f1f4f6; }
.ms-panel input[type="checkbox"] { width: auto; margin: 0; }
.ms-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; flex: none; }
.ms-actions { display: flex; gap: 6px; margin-bottom: 6px; }
.ms-actions button { flex: 1; background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 6px; font-size: 12px; cursor: pointer; }
.ms-actions button:hover { border-color: var(--accent); }
.ms-panel .ms-total { border-bottom: 1px solid var(--border); margin-bottom: 4px; padding-bottom: 6px; font-weight: 700; }

/* Daily Total Revenue: centre every heading and figure */
#dtr-table { border-collapse: collapse; }
#dtr-table th, #dtr-table td { text-align: center; vertical-align: middle; }
/* white gutter separating the group blocks (matches the Pax Numbers / Daily Regular tables) */
#dtr-table .dtr-gap { width: 16px; min-width: 16px; padding: 0; background: var(--panel) !important; border: none !important; }
#daily-sub-total .table-wrap { border: 1px solid var(--border); border-radius: 12px; }

/* Monthly summary by program: tighter columns so all programs + Edit fit without a horizontal slider */
#lounge-table th, #lounge-table td { padding: 6px 5px; text-align: center; vertical-align: middle; }
#lounge-table thead th { text-transform: none; }
#lounge-table .lounge-edit-btn { padding: 3px 9px; }

.report-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
}

.report-table thead tr.grp th {
  border-bottom: none;
  color: var(--accent);
  font-size: 11px;
  top: 0;
}

.report-table thead tr.cols th { top: 26px; }

.report-table th.sticky-col, .report-table td.sticky-col {
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 3;
  border-right: 1px solid var(--border);
  font-weight: 600;
}

.report-table thead th.sticky-col { z-index: 4; }

.report-table td.total-col, .report-table th.total-col {
  border-left: 1px solid var(--border);
  font-weight: 700;
}

.report-table tr.alltime td {
  border-top: 2px solid var(--text);
  font-weight: 700;
  background: #fafbf9;
}

.report-table td.num-neg { color: var(--neg); }
.report-table td.num-pos { color: var(--pos); }

/* ---------- daily view / charts ---------- */
.chart-title {
  font-size: 14px;
  margin: 22px 0 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.inline-select { width: auto !important; font-size: 12.5px; padding: 4px 8px; }

.chart-box { position: relative; }

.chart-svg { width: 100%; height: auto; display: block; }

.chart-legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #52514e;
  margin-bottom: 4px;
}

.chart-legend i, .chart-tip i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
}

.chart-tip {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(29, 36, 48, 0.12);
  padding: 8px 10px;
  font-size: 12px;
  pointer-events: none;
  z-index: 20;
  min-width: 150px;
}

.chart-tip b { font-variant-numeric: tabular-nums; }

.range-row { display: flex; gap: 4px; }

.range-row button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
}

.range-row button.active {
  background: #e7f0ea;
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- recon ---------- */
#recon-grid input.recon-in {
  width: 110px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 5px 8px;
  font-size: 12.5px;
}
/* Update reported balances: no spinner arrows, same as every other typed-figure
   box in the app. A bank balance is read off a statement and typed; there is no
   sense in which it steps up or down by a cent, and a mis-aimed click on an
   arrow silently changes a figure the tie check then trusts. */
#recon-grid input[type="number"]::-webkit-outer-spin-button,
#recon-grid input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#recon-grid input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.tie-yes, .tie-no {
  font-weight: 700;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 12px;
}

.tie-yes { background: #e3f3e6; color: var(--pos); }
.tie-no { background: #fbeaea; color: var(--neg); }

/* ---------- ledger filter bar ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.filter-bar input[type="search"] { flex: 1 1 220px; min-width: 180px; }
.filter-bar select { width: auto; max-width: 170px; font-size: 12.5px; padding: 6px 8px; }
.filter-bar input[type="date"] { width: auto; font-size: 12.5px; padding: 6px 8px; }
.filter-bar .filter-date { display: inline-flex; align-items: center; white-space: nowrap; }

/* ---------- pax entry ---------- */
.pax-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.pax-entry input[type="number"] { width: 160px; font-size: 12.5px; padding: 6px 8px; }

/* ---------- forex entry ---------- */
.fx-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 10px 0 6px;
}

.fx-entry label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--muted);
}

.fx-entry input { width: 150px; text-align: right; font-variant-numeric: tabular-nums; }

/* provenance note under the rate entry form — where each number originates */
.fx-source {
  margin: 14px 0 4px;
  padding: 12px 14px;
  background: #f7f9f8;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.65;
}
.fx-source > strong { color: var(--text); font-size: 12.5px; }
.fx-source ul { margin: 6px 0 0; padding-left: 18px; }
.fx-source li { margin: 3px 0; }
.fx-source b { color: var(--text); font-weight: 600; }
.fx-source a { color: var(--accent); }
[data-theme="dark"] .fx-source { background: #1b1f26; }

/* sub-heading above each rate history table (ties the table to the entry form above it) */
.fx-subhead { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--text); border-top: 1px solid var(--border); padding-top: 14px; }

/* ---------- pax numbers table ---------- */
/* green centered group-block headers (Landside/Airside, Total, etc.) */
.report-table thead tr.grp th.grp-center {
  text-align: center;
  background: #e7f3ea;
  color: #2f7d4f;
  font-weight: 700;
  letter-spacing: .4px;
  border-bottom: 1px solid #cfe6d5;
}

/* vertical divider marking where each Terminal block begins */
.report-table th.grp-divide,
.report-table td.grp-divide {
  border-left: 2px solid var(--text);
}

/* thicker rule between calendar years (before the first month of a new year) */
.report-table tr.year-start td { border-top: 2px solid var(--muted); }

/* yearly sub-total rows (after each year's December) */
.report-table tr.year-total td {
  font-weight: 700;
  background: #f2f5f3;
  border-top: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
}

/* ---------- roomy card layout (.kp-pretty) ----------
   Card-led, generously spaced treatment for the screens people *work* in
   (Corporate Stay entry, Corporate daily invoices) as opposed to the dense
   reporting grids. Opt-in per view via .kp-pretty so the report tabs keep
   their compact styling. */
.kp-pretty { display: flex; flex-direction: column; gap: 18px; }

.oc-head h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -0.01em; }
.oc-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.oc-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px 18px;
  box-shadow: 0 1px 2px rgba(29, 36, 48, 0.04);
}

.oc-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.oc-card-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.oc-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e7f3ea;
  color: var(--accent);
  flex: none;
}

/* label stacked above its control, controls sized to their content */
.oc-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; }
/* keep their width and wrap to the next line rather than squashing when the
   filter row runs out of room */
.oc-field { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.oc-field > span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.oc-field > span em { font-style: normal; opacity: .65; font-size: 11.5px; }
.oc-field > input,
.oc-field > select {
  width: 190px;
  padding: 9px 11px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
}
.oc-field > input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.oc-field.oc-narrow > input { width: 120px; }
.oc-field > input:focus, .oc-field > select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20, 83, 45, 0.10);
}
.oc-actions { display: flex; gap: 10px; margin-left: auto; }
.oc-actions button { padding: 10px 22px; border-radius: 9px; font-size: 13.5px; }
.oc-filters .oc-actions { margin-left: 0; }

/* results table: green-tinted head, generous rows, numerics right-aligned */
.kp-pretty .table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.oc-tbl { width: 100%; font-size: 13px; border-collapse: separate; border-spacing: 0; }
.oc-tbl thead th {
  position: static;
  background: #eef6f0;
  color: #2f7d4f;
  font-weight: 700;
  font-size: 12px;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid #d9e9de;
  white-space: nowrap;
}
/* the sticky first column carries its own background rule from .report-table —
   restate it here (higher specificity) so the header tint runs the whole width */
.oc-tbl thead th.sticky-col { background: #eef6f0; }
.oc-tbl tbody td { padding: 11px 14px; border-bottom: 1px solid #eef0f3; }
.oc-tbl tbody tr:last-child td { border-bottom: none; }
/* month-on-month change under a guest count: green up, red down, grey flat */
.oc-delta { display: block; font-size: 11px; color: #6b7280; font-weight: 400; margin-top: 2px; }
.oc-delta.oc-up { color: #2e7d32; }
.oc-delta.oc-down { color: #b3261e; }
/* a count you can open: lights up under the pointer, and the stays behind it
   light up row by row in the drill-down */
.oc-tbl td.oc-cell { cursor: pointer; transition: background-color .12s ease; }
.oc-tbl td.oc-cell:hover { background: #e3f2e7; box-shadow: inset 0 0 0 2px #2e7d32; border-radius: 4px; }
.oc-drill tbody tr { transition: background-color .12s ease; }
.oc-drill tbody tr:hover td { background: #e3f2e7; }
/* Maybank import: money the statement carries that no slip proves -- held, in red */
.mb-held { display: block; color: #b3261e; font-weight: 600; margin-top: 2px; }

/* ---------- Operational Dashboard: attention strip + executive summary ---------- */
.attn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.attn-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; margin-right: 4px; }
.attn-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid #d3d1c7; background: #fff; font: inherit; font-size: 12.5px; cursor: pointer; }
.attn-item b { font-size: 15px; min-width: 14px; text-align: right; }
.attn-item:hover { filter: brightness(.97); }
.attn-ok   { border-color: #b7dfc0; background: #eef8f0; color: #1e5b2a; }
.attn-warn { border-color: #f0c96b; background: #fff7e2; color: #6b4a00; }
.attn-bad  { border-color: #f0a3a3; background: #fdecec; color: #8a1c1c; }
.attn-note { flex-basis: 100%; margin-top: -2px; }
.dsum { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fbfcfb; }
.dsum-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.dsum-head h3 { margin: 0; font-size: 15px; }
.dsum ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dsum li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; padding: 8px 10px 8px 12px; border-left: 4px solid transparent; border-radius: 6px; }
.dsum-chip { flex: none; margin-top: 1px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
/* li.dsum-* so these outrank ".dsum li" above -- a bare .dsum-lag lost to it and the edge stayed transparent */
.dsum li.dsum-lag  { border-left-color: #b3261e; background: #fdf1f0; } .dsum-lag  .dsum-chip { background: #b3261e; color: #fff; }
.dsum li.dsum-soft { border-left-color: #b7791f; background: #fff8ea; } .dsum-soft .dsum-chip { background: #b7791f; color: #fff; }
.dsum li.dsum-good { border-left-color: #2e7d32; background: #f0f8f1; } .dsum-good .dsum-chip { background: #2e7d32; color: #fff; }
[data-theme="dark"] .dsum li.dsum-lag { background: #2a1917; } [data-theme="dark"] .dsum li.dsum-soft { background: #2a2314; } [data-theme="dark"] .dsum li.dsum-good { background: #16261a; }
.dsum-advice { color: #4b5563; font-size: 12.5px; margin-top: 2px; }
.dsum-foot { margin: 10px 0 0; }
[data-theme="dark"] .dsum { background: #161b22; }
[data-theme="dark"] .attn-item { background: #161b22; border-color: #2c333d; color: #d7dde5; }
.oc-tbl tbody tr:hover td { background: #fafbfc; }
.oc-tbl th.num, .oc-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.oc-tbl th.kp-partner-th { text-align: center; }
.oc-tbl th.oc-act, .oc-tbl td.oc-act { text-align: right; width: 1%; }
.oc-tbl .oc-edit { padding: 4px 14px; border-radius: 7px; font-size: 12px; font-weight: 600; }
.kp-pretty .table-foot { display: flex; justify-content: center; margin-top: 12px; }

/* controls that live in a card header (facility / metric / dates / export) */
.oc-head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oc-head-actions select,
.oc-head-actions input[type="search"],
.oc-head-actions input[type="date"] {
  width: auto;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
}
.oc-head-actions label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
/* wide enough for a full invoice number without crowding the filters beside it */
.oc-head-actions input[type="search"] { min-width: 190px; }
#rcv-find-note { font-weight: 400; margin-left: 6px; }
.oc-head-actions button { padding: 8px 14px; border-radius: 9px; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }

/* partner identity chips in the corporate grids */
.kp-partner { display: inline-flex; align-items: center; gap: 7px; }
.kp-dot {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  flex: none;
}
.kp-info { color: var(--muted); cursor: help; font-size: 11px; border: 1px solid var(--border); border-radius: 4px; padding: 0 3px; }

/* group header above the partner columns on the monthly summary */
.oc-tbl thead tr.grp th { background: var(--panel); color: var(--muted); font-weight: 600; border-bottom: none; padding-bottom: 2px; }
.oc-tbl thead tr.grp th.mtr-grp { text-align: center; color: var(--text); font-weight: 700; }

[data-theme="dark"] .oc-tbl thead tr.grp th { background: var(--panel); }

[data-theme="dark"] .oc-ico { background: #1d3226; color: #6fce93; }
[data-theme="dark"] .oc-tbl thead th,
[data-theme="dark"] .oc-tbl thead th.sticky-col { background: #1b2a20; color: #7fd3a0; border-bottom-color: #26382c; }
[data-theme="dark"] .oc-tbl tbody td { border-bottom-color: #262b33; }
[data-theme="dark"] .oc-tbl tbody tr:hover td { background: #1b2028; }
[data-theme="dark"] .oc-card { box-shadow: none; }

@media (max-width: 700px) {
  .oc-field > input, .oc-field > select, .oc-field.oc-narrow > input { width: 100%; }
  .oc-field { flex: 1 1 160px; }
  .oc-actions { margin-left: 0; width: 100%; }
  .oc-actions button { flex: 1; }
}

/* ---------- receivables ----------
   Heading and its explanation sit together on the left, filters to the right. */
.rcv-head { align-items: flex-start; }
.rcv-head > div:first-child { max-width: 70ch; }
.rcv-head h2 { margin-bottom: 6px; }
.rcv-head p { margin: 0; line-height: 1.6; }

/* channel-combine toggle under the revenue-mix chart */
.tg-combine { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 2px 0 10px; }
.tg-combine-lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #6b7482); }
.tg-cb { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; user-select: none; }
.tg-cb input { accent-color: #0f9b8e; cursor: pointer; }
.tg-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* collective-invoice review window: amount boxes without spinners */
.rb-amt { width: 110px; text-align: right; }
#rb-body input[type="number"]::-webkit-outer-spin-button,
#rb-body input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#rb-body input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Recent corporate entries: sortable headers (the sort runs in the query, so it
   orders the whole list, not just the rows already loaded) */
th.oc-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.oc-sort:hover { color: var(--text); }
th.oc-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Awaiting-invoice queue: sortable headers, partner filter in the subhead */
th.rcv-sort, span.rcv-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.rcv-sort:hover, span.rcv-sort:hover { color: var(--text); }
.rcv-await-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rcv-await-head .fx-subhead { margin: 0; }

/* Aging boxes: four equal panels, label above the amount, so the money is what
   the eye lands on. Empty buckets stay neutral and only colour once late. */
.rcv-ages { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 14px; }
.rcv-age {
  flex: 1 1 190px;              /* equal widths, wrapping on narrow screens */
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e6ec);
  color: var(--muted, #6b7482);
}
.rcv-age-top { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.rcv-age-top svg { flex: none; }
.rcv-age-val { font-size: 15px; font-weight: 700; color: var(--text, #1d2530); letter-spacing: -0.01em; }
.rcv-age.ok { background: #f1f8f3; border-color: #dcebe1; color: #2f7d4f; }
.rcv-age.warn { background: #fdf6e6; border-color: #f0e0b8; color: #8a6100; }
/* OCBC import: three-document checklist + lit Post button when ready */
.ob-docs { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 8px 16px 2px; font-size: 12.5px; color: var(--muted, #6b7482); }
.ob-doc { display: inline-flex; align-items: center; gap: 7px; }
.ob-doc-ico { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #c3cad4; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; color: transparent; flex: none; box-sizing: border-box; }
.ob-doc.done { color: #15803d; }
.ob-doc.done .ob-doc-ico { border-color: #16a34a; background: #16a34a; color: #fff; }
.ob-doc.done .ob-doc-ico::before { content: '✓'; }
[data-theme="dark"] .ob-doc-ico { border-color: #4a5568; }
[data-theme="dark"] .ob-doc.done { color: #4ade80; }
#ob-add.mb-ready, #mb-add.mb-ready { background: #16a34a; border-color: #16a34a; color: #fff; }
#ob-add.mb-ready:hover, #mb-add.mb-ready:hover { background: #15803d; border-color: #15803d; }
/* per-file chips: the GHL dailies the statement says exist */
.ob-doc-files { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ob-fchip-lbl { font-size: 11px; color: var(--muted, #6b7482); margin-right: 2px; }
.ob-fchip { font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px solid #c3cad4; color: var(--muted, #6b7482); white-space: nowrap; }
.ob-fchip.done { border-color: #16a34a; background: #eaf7ee; color: #15803d; }
[data-theme="dark"] .ob-fchip { border-color: #4a5568; }
[data-theme="dark"] .ob-fchip.done { background: #10281a; border-color: #2c5a36; color: #4ade80; }

/* Ledger banner: voided import rows whose stay/channel was never re-imported */
.tx-voidgap { margin: 10px 0 2px; padding: 9px 12px; border: 1px solid #f0e0b8; border-radius: 8px; background: #fdf6e6; color: #8a6100; font-size: 13px; line-height: 1.45; }
[data-theme="dark"] .tx-voidgap { background: #2b2410; border-color: #3d3316; color: #e5b854; }
.tx-voidgap .vg-item { display: inline-flex; align-items: center; gap: 6px; margin: 6px 10px 0 0; white-space: nowrap; }
.tx-voidgap .vg-ok { font: inherit; font-size: 12px; padding: 1px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid currentColor; background: transparent; color: inherit; opacity: .8; }
.tx-voidgap .vg-ok:hover { opacity: 1; background: rgba(138, 97, 0, .1); }
[data-theme="dark"] .tx-voidgap .vg-ok:hover { background: rgba(229, 184, 84, .14); }
.rcv-age.bad { background: #fdeeed; border-color: #f4d5d2; color: #b3261e; }
[data-theme="dark"] .rcv-age { background: #151b23; border-color: #26303c; }
[data-theme="dark"] .rcv-age.ok { background: #17251c; border-color: #26382c; color: #7fd3a0; }
[data-theme="dark"] .rcv-age.warn { background: #2b2410; border-color: #3d3316; color: #e5b854; }
[data-theme="dark"] .rcv-age.bad { background: #2c1917; border-color: #43221f; color: #f0857d; }

/* the register grid reads as a list, so its head is quiet caps rather than the
   green block used on the corporate entry grids */
.rcv-tbl thead th, .rcv-tbl thead th.sticky-col {
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.rcv-empty td { padding: 10px 0 !important; }
.rcv-empty-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fafbfc;
  color: var(--muted);
  font-size: 13px;
}
.rcv-empty-ico {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: #eef0f3;
  color: var(--muted);
  flex: none;
}
[data-theme="dark"] .rcv-empty-box { background: #1a1e25; }
[data-theme="dark"] .rcv-empty-ico { background: #262b33; }

/* ---------- month-end close ---------- */
.pc-checks { list-style: none; margin: 8px 0 14px; padding: 0; font-size: 13px; }
.pc-checks li { padding: 5px 0; }
.pc-checks li b { display: inline-block; width: 18px; font-weight: 700; }
.pc-checks li.ok b { color: #1b7a3d; }
.pc-checks li.bad b { color: #b3261e; }
.pc-checks li.warn b { color: #8a6100; }
.pc-log { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.pc-log b { color: var(--text); }

/* ---------- read-only mode ---------- */
#readonly-banner {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f5d78e;
  border-radius: 7px;
  padding: 8px 14px;
  margin: 16px 20px -4px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* data-quality flag: sales-channel rows not categorized as Sale */
.dq-banner {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f5d78e;
  border-radius: 8px;
  max-width: 1180px;
  margin: 16px auto -4px;
  padding: 9px 16px;
  font-size: 13px;
}
.dq-banner summary { cursor: pointer; font-weight: 600; }
.dq-banner summary::marker { color: #b45309; }
.dq-banner #dq-table { width: 100%; font-size: 12px; margin-top: 8px; }
.dq-banner #dq-table th, .dq-banner #dq-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #f0d9a8; white-space: nowrap; color: var(--text); }
.dq-banner #dq-table th { color: #92400e; text-transform: none; font-weight: 700; }

body.readonly #tx-form { opacity: 0.55; }

/* ---------- pax table: fit full width, no scrollbars ---------- */
.pax-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
#pax-table { width: 100%; font-size: 11px; border-collapse: collapse; }
#pax-table th, #pax-table td { padding: 6px 7px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--border); }
#pax-table thead th { text-transform: none; }
#pax-table .total-col { border-left: none; }             /* clean look — no internal vertical rules */
/* green Terminal group headers, shown as two separated blocks */
#pax-table thead tr.grp th.pax-grp { background: #e7f3ea; color: #2f7d4f; font-weight: 700; letter-spacing: .4px; border-bottom: 1px solid #cfe6d5; }
#pax-table thead tr.cols th { color: var(--muted); font-weight: 600; }
/* white gutter separating Terminal 1 and Terminal 2 */
#pax-table .pax-gap { width: 18px; min-width: 18px; padding: 0; background: var(--panel) !important; border: none !important; }
/* growth: green up, red-in-parentheses down (accounting style); ratio muted italic */
#pax-table td.growth, #pax-table td.ratio { font-style: italic; }
#pax-table td.growth-pos { color: var(--pos); }
#pax-table td.growth-neg { color: var(--neg); }
/* rank chips: top-3 green, bottom-3 red, middle plain */
#pax-table td.rank { font-weight: 600; }
#pax-table .rank-pill { display: inline-block; min-width: 20px; padding: 2px 9px; border-radius: 999px; font-weight: 700; }
#pax-table .rank-pill.top { background: #d8efdd; color: var(--pos); }
#pax-table .rank-pill.bottom { background: #fbe0e0; color: var(--neg); }
/* opaque sticky month column + blue year-total rows */
#pax-table tbody td.sticky-col { background: var(--panel); }
#pax-table tbody tr.year-total td { font-weight: 700; background: #eaf0fb; border-top: 1px solid #cad6ec; border-bottom: 1px solid #cad6ec; }
#pax-table tbody tr.year-total td.sticky-col { background: #eaf0fb; }

/* ---------- Monthly Total: summary cards + grouped growth table ---------- */
.mtr-cards { display: flex; gap: 14px; flex-wrap: wrap; margin: 2px 0 18px; }
.mtr-hero { min-width: 200px; border: 1px solid var(--accent); background: #f1f7f3; border-radius: 12px; padding: 12px 18px; display: flex; flex-direction: column; justify-content: center; }
.mtr-hero-tag { align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--accent); background: #e2efe8; padding: 2px 9px; border-radius: 999px; margin-bottom: 7px; }
.mtr-hero-label { font-size: 12px; color: var(--muted); }
.mtr-hero-value { font-size: 27px; font-weight: 800; color: var(--text); line-height: 1.1; margin: 1px 0 4px; font-variant-numeric: tabular-nums; }
.mtr-hero-foot { font-size: 12.5px; }
.mtr-stats { flex: 1 1 520px; display: flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; }
.mtr-stat { flex: 1 1 150px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-left: 1px solid var(--border); }
.mtr-stat:first-child { border-left: none; }
.mtr-ico { flex: 0 0 30px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.mtr-ico svg { width: 24px; height: 24px; }
.mtr-bk { font-weight: 800; color: #0a5ad6; font-size: 20px; letter-spacing: -0.5px; }
.mtr-stat-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mtr-stat-label { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.mtr-stat-value { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.15; font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.mtr-growrow { display: flex; align-items: center; gap: 5px; }
.mtr-glabel { font-size: 9.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; width: 24px; }
.gflat { font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.gpill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.gflat.up, .gpill.up { color: var(--pos); }
.gpill.up { background: #e7f4ec; color: #136f36; } /* --pos passes on white but not this tint */
.gflat.down, .gpill.down { color: var(--neg); }
.gpill.down { background: #fbeceb; }
.gflat.flat, .gpill.flat { color: var(--muted); background: transparent; font-weight: 500; }
/* Monthly Total uses the full window width so the 19-column table fits without
   a horizontal slider. NO PIXEL CAP: the cap used to be min(1900px, 99vw),
   which meant zooming the browser out — the one move that should make a wide
   sheet fit — bought nothing, because 99vw grew past 1900 and the cap held it
   there. 99vw alone is the same width at 100% zoom on a 1920 screen and keeps
   widening as you zoom out (Omer, 22 Sep 2026). */
main.wide { max-width: 99vw; padding: 0 10px; }
main.wide .panel { padding: 20px 12px; }

/* Monthly Guest Numbers (#lgm-table) mirrors Monthly Total's look exactly */
#mtr-table, #lgm-table { font-size: 12px; }
#mtr-table th, #mtr-table td, #lgm-table th, #lgm-table td { text-align: center; vertical-align: middle; padding: 7px 6px; }
#mtr-table thead th, #lgm-table thead th { text-transform: none; }
#mtr-table th.mtr-grp, #lgm-table th.mtr-grp { color: var(--text); font-weight: 700; font-size: 12px; }
#mtr-table thead tr.cols th, #lgm-table thead tr.cols th { color: var(--muted); font-weight: 600; font-size: 11px; }
/* light-gray rounded border encircling the whole table */
#daily-sub-monthly-total .table-wrap, #daily-sub-lounge-monthly .table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: auto; }
/* numbers + headers centred (Month stays left) */
#mtr-table td.mrev, #mtr-table th.mrev, #lgm-table td.mrev, #lgm-table th.mrev { font-variant-numeric: tabular-nums; }
#mtr-table td.sticky-col, #mtr-table th.sticky-col, #lgm-table td.sticky-col, #lgm-table th.sticky-col { text-align: left; font-weight: 700; color: var(--text); }
/* opaque sticky column so horizontally-scrolled cells don't bleed through the month titles */
#mtr-table tbody td.sticky-col, #lgm-table tbody td.sticky-col { background: var(--panel); }
#mtr-table tbody tr:nth-child(even) td.sticky-col, #lgm-table tbody tr:nth-child(even) td.sticky-col { background: #f5f7f8; }
/* subtle zebra shading instead of row-separator lines */
#mtr-table tbody td, #lgm-table tbody td { border-bottom: none; }
#mtr-table tbody tr:nth-child(even), #lgm-table tbody tr:nth-child(even) { background: #f5f7f8; }
/* Total group: light neutral tint that layers over any row shade */
#mtr-table .mtr-tot, #lgm-table .mtr-tot { background: rgba(31, 45, 61, 0.045); }
#mtr-table td.mtr-tot.mrev, #lgm-table td.mtr-tot.mrev { font-weight: 700; }
#mtr-table .mtr-sep, #lgm-table .mtr-sep { border-left: 1px solid var(--border); }
/* year-total row: subtle blue, uniform across columns, thin dividers */
#mtr-table tbody tr.mtr-year, #lgm-table tbody tr.mtr-year { background: #eaf0fb; }
#mtr-table tbody tr.mtr-year td, #lgm-table tbody tr.mtr-year td { background: transparent; font-weight: 700; border-top: 1px solid #cad6ec; border-bottom: 1px solid #cad6ec; }
#mtr-table tbody tr.mtr-year td.sticky-col, #lgm-table tbody tr.mtr-year td.sticky-col { background: #eaf0fb; }
#mtr-table tbody tr.mtr-ytd td, #lgm-table tbody tr.mtr-ytd td { border-top: 2px solid #9fb6e0; border-bottom: 2px solid #9fb6e0; }
/* in-progress month row (partial, up to the as-of date) — amber + italic to signal it's not a full month */
#mtr-table tbody tr.mtr-current td, #lgm-table tbody tr.mtr-current td { background: #fff8e6; font-style: italic; border-top: 1px solid #e6d9a8; }
#mtr-table tbody tr.mtr-current td.sticky-col, #lgm-table tbody tr.mtr-current td.sticky-col { background: #fff8e6; font-style: normal; }
#mtr-table .gpill, #lgm-table .gpill { padding: 2px 7px; }
#export-mtr, #export-opp, #export-opp-corp { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- P&L: Op. Performance table (same look as Monthly Total) ----------
   Both P&L sheets, because they are the same grid twice: Operating Performance
   and Corporate Expenses — Head Office. The corporate table was rendering the
   same markup (grp/cols header, sec dividers, opp-year, opp-ytd, opp-partial,
   dd-cell) with none of it styled, because every rule here was written against
   #opp-table alone and the second sheet arrived later. It therefore fell back
   to the generic .report-table look — uppercase headers, no zebra, no year or
   in-progress banding, no section rule, no hover (Omer, 20 Sep 2026). */
#opp-table, #opp-corp-table { font-size: 12px; }
/* 5px of side padding rather than 7: across 33 columns that is 130px of air
   reclaimed, which is the difference between needing the slider and not at one
   notch less zoom-out. */
#opp-table th, #opp-table td,
#opp-corp-table th, #opp-corp-table td { padding: 6px 5px; white-space: nowrap; text-align: center; vertical-align: middle; }
#opp-table thead th, #opp-corp-table thead th { text-transform: none; }
#opp-table th.mtr-grp, #opp-table thead tr.grp th,
#opp-corp-table thead tr.grp th { color: var(--text); font-weight: 700; font-size: 12px; }
#opp-table thead tr.cols th,
#opp-corp-table thead tr.cols th { color: var(--muted); font-weight: 600; font-size: 11px; }
#opp-table td.sticky-col, #opp-table th.sticky-col,
#opp-corp-table td.sticky-col, #opp-corp-table th.sticky-col { text-align: left; font-weight: 700; color: var(--text); }
/* opaque sticky column so horizontally-scrolled cells don't bleed through the month titles */
#opp-table tbody td.sticky-col, #opp-corp-table tbody td.sticky-col { background: var(--panel); }
#opp-table tbody tr:nth-child(even) td.sticky-col,
#opp-corp-table tbody tr:nth-child(even) td.sticky-col { background: #f5f7f8; }
#opp-table tbody td, #opp-corp-table tbody td { border-bottom: none; }
#opp-table tbody tr:nth-child(even), #opp-corp-table tbody tr:nth-child(even) { background: #f5f7f8; }
#opp-table .total-col, #opp-corp-table .total-col { background: rgba(31, 45, 61, 0.045); }
#opp-table tbody tr.opp-year, #opp-corp-table tbody tr.opp-year { background: #eaf0fb; }
#opp-table tbody tr.opp-year td,
#opp-corp-table tbody tr.opp-year td { background: transparent; font-weight: 700; border-top: 1px solid #cad6ec; border-bottom: 1px solid #cad6ec; }
#opp-table tbody tr.opp-year td.sticky-col,
#opp-corp-table tbody tr.opp-year td.sticky-col { background: #eaf0fb; }
/* light-gray vertical separators between the REVENUE / OPERATIONAL / BANKING / RESULT sections */
#opp-table th.sec, #opp-table td.sec,
#opp-corp-table th.sec, #opp-corp-table td.sec { border-left: 1px solid var(--border); }
#opp-table tbody tr.opp-ytd td,
#opp-corp-table tbody tr.opp-ytd td { border-top: 2px solid #9fb6e0; border-bottom: 2px solid #9fb6e0; }
/* in-progress month — amber + italic, matching the Monthly Total tab's convention */
#opp-table tbody tr.opp-partial td,
#opp-corp-table tbody tr.opp-partial td { background: #fff8e6; font-style: italic; border-top: 1px solid #e6d9a8; }
#opp-table tbody tr.opp-partial td.sticky-col,
#opp-corp-table tbody tr.opp-partial td.sticky-col { background: #fff8e6; font-style: normal; }
#opp-table tbody tr.opp-partial td.total-col,
#opp-corp-table tbody tr.opp-partial td.total-col { background: #faf0d8; }
/* clickable expense cells -> drill-down of the underlying ledger line items.
   The hover box is the affordance; a resting underline was too noisy across 27 columns. */
#opp-table td.dd-cell, #opp-corp-table td.dd-cell { cursor: pointer; }
#opp-table td.dd-cell:hover,
#opp-corp-table td.dd-cell:hover { background: #eef4ff; box-shadow: inset 0 0 0 1px #cdddf7; }

/* "Not in the table above": the P&L's completeness check, same reading
   conventions as the sheet it checks */
#pnl-off-details > summary { cursor: pointer; padding: 2px 0; }
#pnl-off-details > summary:hover { color: var(--accent); }
h3.pnl-off-h { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 16px 0 6px; }
/* These two have a column header and no group banner above it, so the 26px
   offset that keeps `tr.cols` clear of the banner elsewhere has nothing to
   clear — it parked the sticky header exactly on top of the first body row and
   hid it, z-index 4 over 3. Omer lost KLS's largest line that way: Rent, with
   USD 88,963 of RIX rent already keyed for months past the sheet's end, which
   was in the DOM and in the totals but never drawn. Stick at the top instead. */
#pnl-off-table thead tr.cols th,
#pnl-off-table2 thead tr.cols th { top: 0; }
#pnl-off-table td.dd-cell, #pnl-off-table2 td.dd-cell { cursor: pointer; }
#pnl-off-table td.dd-cell:hover, #pnl-off-table2 td.dd-cell:hover { background: #eef4ff; box-shadow: inset 0 0 0 1px #cdddf7; }
[data-theme="dark"] #pnl-off-table td.dd-cell:hover,
[data-theme="dark"] #pnl-off-table2 td.dd-cell:hover { background: #1c2a3c; box-shadow: inset 0 0 0 1px #3a4a68; }

/* horizontal-scroll hint: shade the right edge while columns remain out of view */
.table-wrap.scroll-more { box-shadow: inset -14px 0 14px -14px rgba(31, 45, 61, .45); }

/* capex table: same reading conventions as the P&L grid */
#capex-table tbody tr:nth-child(even):not(.opp-year):not(.budget-total):not(.opp-partial) { background: #f5f7f8; }
#capex-table tbody tr.opp-year td,
#capex-table tbody tr.opp-year td.sticky-col { background: #eaf0fb; font-weight: 700; border-top: 1px solid #cad6ec; border-bottom: 1px solid #cad6ec; }
#capex-table tbody tr.opp-partial td,
#capex-table tbody tr.opp-partial td.sticky-col { background: #fff8e6; font-style: italic; border-top: 1px solid #e6d9a8; }
#capex-table tbody tr.opp-partial td.sticky-col { font-style: normal; }
#capex-table td.bud-cell { cursor: pointer; }
#capex-table td.bud-cell:hover { background: #eef4ff; box-shadow: inset 0 0 0 1px #cdddf7; }
#chart-capex { margin-bottom: 14px; }

/* deposits tables: same zebra convention as the other report grids */
#deposits-summary tbody tr:nth-child(even):not(.budget-total),
#deposits-detail tbody tr:nth-child(even) { background: #f5f7f8; }
#deposits-detail .dd-num { color: var(--muted); font-size: 11.5px; }

/* app-era data-health strip (Ledger page) */
#hyg-panel { padding: 14px 22px; }
#hyg-panel .panel-head { margin-bottom: 10px; }
.hyg-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.hyg-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; border: 1px solid; white-space: nowrap; }
.hyg-chip b { font-variant-numeric: tabular-nums; font-weight: 800; }
.hyg-ok { background: #eef8f1; border-color: #bfe3cc; color: #15803d; }
.hyg-bad { background: #fdf0f0; border-color: #f0c8c8; color: #c02929; }
.hyg-warn { background: #fdf6e7; border-color: #ecd9a8; color: #8f5507; }
.hyg-click { cursor: pointer; }
.hyg-click:hover { box-shadow: inset 0 0 0 1px currentColor; }
/* pinned-row-set notice in the filter bar (set by data-health chips) */
.lf-note { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: #fdf6e7; border: 1px solid #ecd9a8; color: #8f5507; }
[data-theme="dark"] .lf-note { background: #33270f; border-color: #57503a; color: #e0a04d; }
[data-theme="dark"] .hyg-ok { background: #17301f; border-color: #2c4a38; color: #57c98a; }
[data-theme="dark"] .hyg-bad { background: #2a1515; border-color: #4a2c2c; color: #f47171; }
[data-theme="dark"] .hyg-warn { background: #33270f; border-color: #57503a; color: #e0a04d; }
/* pending-wallet footnote on the Reconciliation status table */
.rs-pend-mark { color: #8f5507; font-weight: 800; cursor: help; }
/* below the table, not inside it — see renderReconStatus. Capped so the prose
   reads at a sensible measure instead of stretching the full page width. */
#recon-pend-note .rs-pend-text {
  margin: 8px 0 0; max-width: 96ch; font-size: 12px; line-height: 1.55;
  color: #8f5507; background: #fdf6e7; border: 1px solid #ecd9a8;
  border-radius: 9px; padding: 9px 12px;
}
[data-theme="dark"] .rs-pend-mark { color: #e0a04d; }
[data-theme="dark"] #recon-pend-note .rs-pend-text { color: #e0a04d; background: #33270f; border-color: #57503a; }

/* Receivables anchor mark next to each month on the lounge Invoice Amounts grid */
.lm-anchor { font-size: 11px; font-weight: 800; cursor: help; }
.lm-anchor.ok { color: #15803d; }
.lm-anchor.bad { color: #c02929; }
[data-theme="dark"] .lm-anchor.ok { color: #57c98a; }
[data-theme="dark"] .lm-anchor.bad { color: #f47171; }

/* budget table: same reading conventions as the P&L and Capex grids */
#budget-table tbody tr:nth-child(even):not(.opp-year):not(.budget-total):not(.opp-partial) { background: #f5f7f8; }
#budget-table tbody tr.opp-year td,
#budget-table tbody tr.opp-year td.sticky-col { background: #eaf0fb; font-weight: 700; border-top: 1px solid #cad6ec; border-bottom: 1px solid #cad6ec; }
#budget-table tbody tr.opp-partial td,
#budget-table tbody tr.opp-partial td.sticky-col { background: #fff8e6; font-style: italic; border-top: 1px solid #e6d9a8; }
#budget-table tbody tr.opp-partial td.sticky-col { font-style: normal; }
[data-theme="dark"] #capex-table tbody tr:nth-child(even):not(.opp-year):not(.budget-total):not(.opp-partial) { background: #20262e; }
[data-theme="dark"] #capex-table tbody tr.opp-year td,
[data-theme="dark"] #capex-table tbody tr.opp-year td.sticky-col { background: #232c3d; border-color: var(--border); }
[data-theme="dark"] #capex-table tbody tr.opp-partial td,
[data-theme="dark"] #capex-table tbody tr.opp-partial td.sticky-col { background: #2b2716; border-top-color: #57503a; }
[data-theme="dark"] #capex-table td.bud-cell:hover { background: #1c2a3c; box-shadow: inset 0 0 0 1px #3a4a68; }
[data-theme="dark"] #deposits-summary tbody tr:nth-child(even):not(.budget-total),
[data-theme="dark"] #deposits-detail tbody tr:nth-child(even) { background: #20262e; }
[data-theme="dark"] #budget-table tbody tr:nth-child(even):not(.opp-year):not(.budget-total):not(.opp-partial) { background: #20262e; }
[data-theme="dark"] #budget-table tbody tr.opp-year td,
[data-theme="dark"] #budget-table tbody tr.opp-year td.sticky-col { background: #232c3d; border-color: var(--border); }
[data-theme="dark"] #budget-table tbody tr.opp-partial td,
[data-theme="dark"] #budget-table tbody tr.opp-partial td.sticky-col { background: #2b2716; border-top-color: #57503a; }

/* ---------- expense drill-down modal ---------- */
.dd-card { max-width: 780px; align-items: stretch; gap: 14px; }
/* the corporate-stays drill carries eight columns; the card grows for it and shrinks back on close */
.dd-card.dd-wide { max-width: 1040px; }
.dd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dd-head h2 { font-size: 16px; }
.dd-head .ghost { padding: 3px 9px; font-size: 15px; line-height: 1.2; }
/* the fixed layout below sizes every column to fit, so only vertical scrolling is needed */
.dd-body { max-height: 60vh; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--border); border-radius: 8px; }
/* fixed layout so a long note wraps inside the Item column instead of widening the table */
#dd-table { width: 100%; font-size: 12.5px; border-collapse: collapse; table-layout: fixed; }
#dd-table th, #dd-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
/* line items: # / Date / Item (takes the slack) / Amount / USD */
#dd-table.dd-items th:nth-child(1), #dd-table.dd-items td:nth-child(1) { width: 58px; white-space: nowrap; }
#dd-table.dd-items th:nth-child(2), #dd-table.dd-items td:nth-child(2) { width: 92px; white-space: nowrap; }
#dd-table.dd-items th:nth-child(3), #dd-table.dd-items td:nth-child(3) { width: auto; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
#dd-table.dd-items th:nth-child(4), #dd-table.dd-items td:nth-child(4) { width: 122px; }
#dd-table.dd-items th:nth-child(5), #dd-table.dd-items td:nth-child(5) { width: 78px; }
#dd-table .dd-num { color: var(--muted); font-size: 11.5px; }

/* budget drill-down: # · Date · Item · Category · Amount · USD — Item takes
   the slack and wraps; nothing is allowed to overflow into a neighbour */
#dd-table.dd-bud th:nth-child(1), #dd-table.dd-bud td:nth-child(1) { width: 56px; white-space: nowrap; }
#dd-table.dd-bud th:nth-child(2), #dd-table.dd-bud td:nth-child(2) { width: 96px; white-space: nowrap; }
#dd-table.dd-bud th:nth-child(3), #dd-table.dd-bud td:nth-child(3) { width: auto; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
#dd-table.dd-bud th:nth-child(4), #dd-table.dd-bud td:nth-child(4) { width: 168px; white-space: normal; overflow-wrap: break-word; }
#dd-table.dd-bud th:nth-child(5), #dd-table.dd-bud td:nth-child(5) { width: 128px; }
#dd-table.dd-bud th:nth-child(6), #dd-table.dd-bud td:nth-child(6) { width: 76px; }
/* revenue drill: four columns share the width evenly, so nothing overflows sideways */
#dd-table.dd-rev th:nth-child(1), #dd-table.dd-rev td:nth-child(1) { width: 31%; white-space: nowrap; }
#dd-table.dd-rev th:nth-child(2), #dd-table.dd-rev td:nth-child(2),
#dd-table.dd-rev th:nth-child(3), #dd-table.dd-rev td:nth-child(3),
#dd-table.dd-rev th:nth-child(4), #dd-table.dd-rev td:nth-child(4) { width: 23%; }
/* channel × sale-day drill: # / Settled / Item (slack) / Amount / Card fee / Gross */
#dd-table.dd-chan th:nth-child(1), #dd-table.dd-chan td:nth-child(1) { width: 56px; white-space: nowrap; }
#dd-table.dd-chan th:nth-child(2), #dd-table.dd-chan td:nth-child(2) { width: 92px; white-space: nowrap; }
#dd-table.dd-chan th:nth-child(3), #dd-table.dd-chan td:nth-child(3) { width: auto; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
#dd-table.dd-chan th:nth-child(4), #dd-table.dd-chan td:nth-child(4) { width: 96px; }
#dd-table.dd-chan th:nth-child(5), #dd-table.dd-chan td:nth-child(5) { width: 84px; }
#dd-table.dd-chan th:nth-child(6), #dd-table.dd-chan td:nth-child(6) { width: 96px; }
/* Daily-Total stream drill: # / Channel · Program (wraps) / Item (slack) / Native / functional total */
#dd-table.dd-tot th:nth-child(1), #dd-table.dd-tot td:nth-child(1) { width: 56px; white-space: nowrap; }
#dd-table.dd-tot th:nth-child(2), #dd-table.dd-tot td:nth-child(2) { width: 190px; white-space: normal; overflow-wrap: break-word; }
#dd-table.dd-tot th:nth-child(3), #dd-table.dd-tot td:nth-child(3) { width: auto; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
#dd-table.dd-tot th:nth-child(4), #dd-table.dd-tot td:nth-child(4) { width: 118px; }
#dd-table.dd-tot th:nth-child(5), #dd-table.dd-tot td:nth-child(5) { width: 96px; }
/* corporate stays behind a monthly guest count: stay · fac · partner · guests · amount · name · order · by */
#dd-table.dd-corp th:nth-child(1), #dd-table.dd-corp td:nth-child(1) { width: 96px; white-space: nowrap; }
#dd-table.dd-corp th:nth-child(2), #dd-table.dd-corp td:nth-child(2) { width: 40px; white-space: nowrap; }
#dd-table.dd-corp th:nth-child(3), #dd-table.dd-corp td:nth-child(3) { width: 120px; white-space: normal; overflow-wrap: break-word; }
#dd-table.dd-corp th:nth-child(4), #dd-table.dd-corp td:nth-child(4) { width: 62px; }
#dd-table.dd-corp th:nth-child(5), #dd-table.dd-corp td:nth-child(5) { width: 112px; }
#dd-table.dd-corp th:nth-child(6), #dd-table.dd-corp td:nth-child(6) { width: auto; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
#dd-table.dd-corp th:nth-child(7), #dd-table.dd-corp td:nth-child(7) { width: 104px; white-space: normal; overflow-wrap: anywhere; }
#dd-table.dd-corp th:nth-child(8), #dd-table.dd-corp td:nth-child(8) { width: 92px; white-space: normal; overflow-wrap: anywhere; }

/* Daily Direct Revenue: clickable channel cells */
#dreg-table td.dd-cell, #dtr-table td.dd-cell, #mreg-table td.dd-cell { cursor: pointer; }
#dreg-table td.dd-cell:hover, #dtr-table td.dd-cell:hover, #mreg-table td.dd-cell:hover { background: #eef4ff; box-shadow: inset 0 0 0 1px #cdddf7; }
[data-theme="dark"] #dreg-table td.dd-cell:hover, [data-theme="dark"] #dtr-table td.dd-cell:hover, [data-theme="dark"] #mreg-table td.dd-cell:hover { background: #1c2a3c; box-shadow: inset 0 0 0 1px #3a4a68; }
#dd-table thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
#dd-table th.num, #dd-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#dd-table tbody tr:last-child td { border-bottom: none; }
#dd-table tbody tr:nth-child(even) { background: #f7f9fa; }
#dd-table .dd-note { display: block; white-space: normal; color: var(--muted); font-size: 11px; line-height: 1.35; margin-top: 2px; }
#dd-table .dd-neg, .dd-total .dd-neg { color: var(--neg); }
.dd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dd-total { font-size: 13px; color: var(--muted); }
.dd-total strong { font-size: 15px; color: var(--text); margin-left: 4px; }

/* ---------- invoice attachments ---------- */
.att-btn { border: none; background: none; cursor: pointer; font-size: 13px; padding: 0 2px; color: var(--muted); }
.att-btn:hover { color: var(--accent); }
.att-list { max-height: 52vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.att-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; }
.att-name { font-size: 13px; font-weight: 600; flex: 1; word-break: break-word; }
.att-meta { white-space: nowrap; }
.att-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.att-upload { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
/* admin-only no-invoice waiver: quiet footer row, its note carries who/when */
.att-noinv-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; cursor: pointer;
}
.att-noinv-row small { margin-left: auto; }
/* ∅ beside the paperclip: this row's missing invoice is asserted, not forgotten */
.att-waived { margin-left: 4px; color: var(--muted); font-size: 13px; cursor: help; }

/* payables register: status pills carry the state; overdue is the one that
   must not be missable */
.pay-pill {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
}
.pay-open { background: #eef4fb; color: #1d4ed8; }
.pay-overdue { background: #fdeaea; color: #b91c1c; font-weight: 700; }
.pay-paid { background: #e8f6ee; color: #15803d; }
.pay-void { background: #f1f3f5; color: var(--muted); }
[data-theme="dark"] .pay-open { background: #1c2a3f; }
[data-theme="dark"] .pay-overdue { background: #3a1d1d; }
[data-theme="dark"] .pay-paid { background: #16301f; }
[data-theme="dark"] .pay-void { background: #262b31; }
.pay-list-head { display: flex; align-items: center; gap: 14px; }
.pay-list-head h2 { margin-right: auto; }
#pay-table .sub { display: block; font-size: 11px; color: var(--muted); }
.att-upload input[type="file"] { font-size: 12px; flex: 1; min-width: 0; }
#att-msg.err, .att-err { color: var(--neg); }

/* ---------- reported-balances (recon) modal ---------- */
.recon-card { max-width: min(1400px, 96vw); align-items: stretch; gap: 12px; }
.recon-modal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.recon-modal-head label { display: flex; align-items: center; }
/* compact grid so all holders + summary columns fit without a horizontal scroll */
#recon-grid { font-size: 12px; }
#recon-grid th, #recon-grid td { padding: 5px 6px; white-space: normal; }
#recon-grid input.recon-in { width: 76px; text-align: right; padding: 4px 5px; font-size: 12px; }
#tab-pnl .table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: auto; }

/* ---------- Revenue per pax (KUL Weekly Reports AK:AZ) ---------- */
#tab-pax .table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: auto; }
#rpp-table { font-size: 12px; width: 100%; }
#rpp-table th, #rpp-table td { padding: 7px 8px; white-space: nowrap; text-align: center; vertical-align: middle; }
#rpp-table thead th { text-transform: none; }
#rpp-table thead tr.grp th { color: var(--text); font-weight: 700; font-size: 12px; }
#rpp-table thead tr.cols th { color: var(--muted); font-weight: 600; font-size: 11px; }
#rpp-table td.sticky-col, #rpp-table th.sticky-col { text-align: left; font-weight: 700; color: var(--text); }
#rpp-table tbody td.sticky-col { background: var(--panel); }
#rpp-table tbody tr:nth-child(even) td.sticky-col { background: #f5f7f8; }
#rpp-table tbody td { border-bottom: none; }
#rpp-table tbody tr:nth-child(even) { background: #f5f7f8; }
#rpp-table .total-col { background: rgba(31, 45, 61, 0.045); }
#rpp-table th.sec, #rpp-table td.sec { border-left: 1px solid var(--border); }
/* light-green shade for cells that meet/beat their column target */
#rpp-table tbody td.tgt-hit { background: #d8efdd; }
/* editable target row at the very bottom */
#rpp-table tfoot td { border-top: 2px solid var(--text); background: var(--panel); padding: 5px 6px; }
#rpp-table tfoot td.sticky-col { font-weight: 700; color: var(--text); }
#rpp-table tfoot td.total-col { background: rgba(31, 45, 61, 0.045); }
.rpp-tgt-input { width: 100%; max-width: 78px; box-sizing: border-box; padding: 3px 4px; border: 1px solid var(--border);
  border-radius: 5px; font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; background: #fff; color: var(--text); }
.rpp-tgt-input:focus { outline: none; border-color: var(--accent, #3f6fd8); box-shadow: 0 0 0 2px rgba(63, 111, 216, 0.15); }
.rpp-tgt-input:disabled { background: #f2f4f6; color: var(--muted); }
#rpp-feedback { margin: 2px 0 0; }
#rpp-feedback.err { color: var(--neg); }

/* ---------- draggable tabs ---------- */
.tabs .tab { cursor: grab; }
.tabs .tab.dragging { opacity: 0.45; cursor: grabbing; }

/* ---------- tab hover submenu ---------- */
.tabs .tab { position: relative; }
.tab-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(29, 36, 48, 0.14);
  min-width: 150px;
  padding: 4px;
  flex-direction: column;
}
.tabs .tab:hover > .tab-submenu { display: flex; } /* top-level only — nested flyouts open on their own parent's hover */
.submenu-item {
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  border-radius: 5px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.submenu-item:hover { background: #e7f0ea; color: var(--accent); }
/* The two pages where figures are TYPED IN. Everywhere else under Revenue is
   computed — from the ledger, or from Corporate Stay — so a faint blue ground
   tells you at a glance which pages expect something from you (Omer, 12 Sep
   2026). Blue, not the menu's own green, so it reads as a different kind of
   mark rather than a selection. */
.submenu-item.is-entry { background: #e8f1fb; }
.submenu-item.is-entry:hover { background: #d5e6f8; color: var(--accent); }

/* nested submenu (Regular ▸ Daily/Monthly) */
.submenu-parent {
  position: relative;
  display: block;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  border-radius: 5px;
  white-space: nowrap;
  cursor: default;
  text-align: left; /* else it inherits the button's centered text and Direct/Lounge/Total look ragged */
}
.submenu-parent:hover { background: #e7f0ea; color: var(--accent); }
.submenu-arrow { float: right; margin-left: 18px; font-weight: 700; }
.tab-submenu.nested {
  display: none;
  top: -5px;
  left: 100%;
  margin-left: 0; /* flush against the parent — a 2px gap dropped :hover mid-crossing and closed the menu */
}
.submenu-parent:hover .tab-submenu.nested { display: flex; }
/* invisible bridge under the flyout's left edge: a diagonal cursor path from the
   parent label to a nested item briefly leaves the parent's box — this strip keeps
   :hover alive on the way. Desktop only: on the touch drawer it would swallow taps. */
@media (min-width: 769px) {
  .tab-submenu.nested::before {
    content: '';
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -18px;
    width: 18px;
  }
}

/* ---------- daily regular grid ---------- */
#dreg-table { font-size: 11px; border-collapse: collapse; }
#dreg-table th, #dreg-table td { padding: 5px 6px; white-space: nowrap; text-align: center; vertical-align: middle; }
#dreg-table td.dreg-rate { color: var(--muted); font-style: italic; }
#dreg-table th.dreg-sub, #dreg-table td.dreg-sub { background: #eef3f0; font-weight: 600; }
#dreg-table th.dreg-native, #dreg-table td.dreg-native { background: #f6f7f8; }
#dreg-table th.dreg-tot, #dreg-table td.dreg-tot { background: #cadcd0; font-weight: 700; }
/* white gutter separating the Landside / Airside / Total blocks (matches the Pax Numbers table) */
#dreg-table .dreg-gap { width: 16px; min-width: 16px; padding: 0; background: var(--panel) !important; border: none !important; }
#daily-sub-regular .table-wrap { border: 1px solid var(--border); border-radius: 12px; }

/* ---------- Monthly Direct Revenue: reuses the Monthly Total styling ---------- */
#mreg-table { font-size: 12px; }
#mreg-table th, #mreg-table td { text-align: center; vertical-align: middle; padding: 7px 6px; }
#mreg-table thead th { text-transform: none; }
#mreg-table th.mtr-grp { color: var(--text); font-weight: 700; font-size: 12px; }
#mreg-table thead tr.cols th { color: var(--muted); font-weight: 600; font-size: 11px; }
#daily-sub-monthly-regular .table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: auto; }
#mreg-table td.mrev, #mreg-table th.mrev { font-variant-numeric: tabular-nums; }
#mreg-table td.sticky-col, #mreg-table th.sticky-col { text-align: left; font-weight: 700; color: var(--text); }
#mreg-table tbody td.sticky-col { background: var(--panel); }
#mreg-table tbody tr:nth-child(even) td.sticky-col { background: #f5f7f8; }
#mreg-table tbody td { border-bottom: none; }
#mreg-table tbody tr:nth-child(even) { background: #f5f7f8; }
#mreg-table .mtr-tot { background: rgba(31, 45, 61, 0.045); }
#mreg-table td.mtr-tot.mrev { font-weight: 700; }
#mreg-table .mtr-sep { border-left: 1px solid var(--border); }
#mreg-table tbody tr.mtr-year { background: #eaf0fb; }
#mreg-table tbody tr.mtr-year td { background: transparent; font-weight: 700; border-top: 1px solid #cad6ec; border-bottom: 1px solid #cad6ec; }
#mreg-table tbody tr.mtr-year td.sticky-col { background: #eaf0fb; }
#mreg-table .gpill { padding: 2px 7px; }

/* space the stacked panels in the Lounge sub-view (they aren't direct children of main) */
#daily-sub-lounge .panel + .panel { margin-top: 20px; }

/* ---------- daily by channel table ---------- */
#dbc-table { font-size: 11px; border-collapse: collapse; }
#dbc-table th, #dbc-table td { text-align: center; padding: 4px 5px; }
#dbc-table thead th { text-transform: none; }
#dbc-table th.dbc-div, #dbc-table td.dbc-div { border-left: 2px dashed var(--muted); }
/* breathing room between the 10d/30d/90d/All selector and the table */
#dbc-range { margin: 4px 0 14px; }

/* ---------- daily lounge guests table ---------- */
#lgd-table th, #lgd-table td { text-align: center; }
#lgd-table thead th { text-transform: none; }
#lgd-table input.lgd-in, #lounge-table input.lm-in {
  width: 84px;
  text-align: center;
  font-size: 12px;
  padding: 4px 4px;
  font-variant-numeric: tabular-nums;
}
#lgd-table tr.lgd-entry { background: #fffbea; }
#lgd-table tr.lgd-editing { background: #eef4ff; }
#lgd-table input.lgd-in { width: 62px; text-align: right; padding: 4px 5px; }

/* ---------- corporate partnerships ---------- */
#corp-table tr.corp-entry { background: #fffbea; }
#corp-table tr.corp-editing { background: #eef4ff; }
#corp-table input.corp-in { width: 96px; text-align: right; padding: 4px 5px; }
#corp-table input[type="date"] { width: auto; padding: 3px 6px; font-size: 12.5px; }
/* The monthly summary reads like Monthly Total Revenue — oldest first, a
   Revenue/MoM/YoY trio per partner, year totals and a YTD line — so it needs
   that table's banding too. Written out for #corp-monthly rather than added to
   the #mtr-table list because these rules live in the corporate block; the
   values are the same ones (Omer, 20 Sep 2026). */
#corp-monthly th.mtr-grp { color: var(--text); font-weight: 700; font-size: 12px; text-transform: none; text-align: center; }
#corp-monthly thead tr.cols th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: none; }
#corp-monthly td.sticky-col { font-weight: 700; color: var(--text); }
#corp-monthly td.mrev, #corp-monthly th.mrev { font-variant-numeric: tabular-nums; }
#corp-monthly .mtr-tot { background: rgba(31, 45, 61, 0.045); }
#corp-monthly td.mtr-tot.mrev { font-weight: 700; }
#corp-monthly .mtr-sep { border-left: 1px solid var(--border); }
#corp-monthly tbody tr:nth-child(even) { background: #f5f7f8; }
#corp-monthly tbody tr.mtr-year { background: #eaf0fb; }
#corp-monthly tbody tr.mtr-year td { background: transparent; font-weight: 700; border-top: 1px solid #cad6ec; border-bottom: 1px solid #cad6ec; }
#corp-monthly tbody tr.mtr-year td.sticky-col { background: #eaf0fb; }
#corp-monthly tbody tr.mtr-ytd td { border-top: 2px solid #9fb6e0; border-bottom: 2px solid #9fb6e0; }
#corp-monthly tbody tr.mtr-current td { background: #fff8e6; font-style: italic; border-top: 1px solid #e6d9a8; }
#corp-monthly tbody tr.mtr-current td.sticky-col { background: #fff8e6; font-style: normal; }

/* receivables: derived-status pills + compact inputs in the match modal */
.rcv-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.rcv-paid { background: #e2f3e8; color: #1b7a3d; }
.rcv-open { background: #fdf2d9; color: #8a6100; }
.rcv-over { background: #fbe3e3; color: #b3261e; }
.rcv-na   { background: #ececec; color: #666; }
[data-theme="dark"] .rcv-paid { background: #17301f; color: #6fce93; }
[data-theme="dark"] .rcv-open { background: #33290f; color: #e5b854; }
[data-theme="dark"] .rcv-over { background: #3a1a18; color: #f0857d; }
[data-theme="dark"] .rcv-na   { background: #2a2a2a; color: #999; }
#rcv-m-body input.cm-like { width: 110px; text-align: right; padding: 4px 5px; }
#rcv-m-body .fx-subhead { margin-top: 14px; }
#rcv-aging { margin-bottom: 10px; }
#lounge-table td.lounge-est { color: var(--muted); font-style: italic; }

/* ============================ MOBILE / SMARTPHONE ============================ */
.nav-toggle { display: none; background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font-size: 20px; line-height: 1; padding: 5px 11px; cursor: pointer; }

@media (max-width: 768px) {
  /* ---- top bar becomes a drawer nav ---- */
  .topbar { padding: 10px 14px; z-index: 50; }
  .brand { font-size: 16px; }
  .entity-chip, .entity-pick { margin-left: 6px; }
  .nav-toggle { display: block; }
  .user-box { display: none; }

  .tabs {
    display: none;
    position: fixed; inset: 0; padding: 62px 12px 88px;
    background: var(--bg); z-index: 40; overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 2px;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .tabs { display: flex; }
  .tabs .tab { position: static; text-align: left; padding: 13px 14px; font-size: 15.5px;
    border-radius: 9px; cursor: pointer; }
  .tabs .tab.active { background: transparent; color: var(--accent); font-weight: 700; }
  /* flatten the hover fly-outs into an always-visible, tappable tree */
  .tab-submenu, .tab-submenu.nested {
    display: flex !important; position: static; box-shadow: none; border: none;
    background: transparent; padding: 0 0 4px 10px; min-width: 0; margin: 0; }
  .submenu-parent { cursor: default; color: var(--muted); font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px 2px; }
  .submenu-parent:hover { background: transparent; color: var(--muted); }
  .submenu-arrow { display: none; }
  .submenu-item { padding: 11px 14px; font-size: 14.5px; text-transform: none; white-space: normal; font-weight: 500; }
  /* user actions pinned to the bottom of the open drawer */
  body.nav-open .user-box { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
    background: var(--panel); border-top: 1px solid var(--border); padding: 12px 14px; gap: 10px; }
  body.nav-open .user-box #user-email { display: none; }
  .user-box .ghost { flex: 1; text-align: center; padding: 12px; }

  /* ---- layout ---- */
  main, main.wide { padding: 0 12px; margin: 16px auto 56px; gap: 16px; }
  .panel { padding: 15px 14px; }
  .panel-head { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; }
  .panel-head h2 { font-size: 15.5px; }
  .head-actions { flex-wrap: wrap; gap: 8px; width: 100%; }
  .head-actions .inline-select, .head-actions select, .head-actions input[type="date"],
  .head-actions input[type="month"] { flex: 1 1 40%; min-width: 0; }

  /* ---- new-transaction form ---- */
  .txs-grid.g-details, .txs-grid.g-amount, .txs-grid.g-class { grid-template-columns: 1fr 1fr; }
  .form-foot { flex-wrap: wrap; }

  /* ---- ledger filters ---- */
  .filter-bar { flex-wrap: wrap; }
  .filter-bar input[type="search"] { flex: 1 1 100%; min-width: 0; }
  .filter-bar select { flex: 1 1 44%; max-width: none; }

  /* ---- modals fit the screen ---- */
  .modal-backdrop { padding: 10px; align-items: flex-start; }
  .modal-card { max-width: 100%; max-height: 92vh; overflow: auto; padding: 16px; margin-top: 16px; }
  .dd-card, .recon-card { max-width: 100%; }
  .ms-panel { min-width: 170px; }

  /* ---- misc ---- */
  .chart-box { overflow-x: auto; }
  .login-card { width: min(360px, 92vw); padding: 26px 20px; }
  .mtr-cards { gap: 10px; }
  .mtr-hero, .mtr-stat { min-width: 0; flex: 1 1 100%; }
}

@media (max-width: 480px) {
  .txs-grid.g-details, .txs-grid.g-amount, .txs-grid.g-class { grid-template-columns: 1fr; }
  .head-actions .inline-select, .head-actions select { flex: 1 1 100%; }
}

/* ======================= dark mode ======================= */
[data-theme="dark"] {
  --bg: #12151a;
  --panel: #1a1f26;
  --border: #2b323c;
  --text: #e3e7ed;
  --muted: #939dab;
  --accent: #3fae72;
  --accent-hover: #57c288;
  --pos: #4ade80;
  --neg: #f47171;
  --danger: #f47171;
}
/* inputs & controls */
[data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="search"], [data-theme="dark"] select {
  background: #151a21; color: var(--text); border-color: var(--border);
  color-scheme: dark; /* native pickers & spinners render dark */
}
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus,
[data-theme="dark"] button:focus-visible { outline-color: #57c98a; }
[data-theme="dark"] .lf-chip select, [data-theme="dark"] .lf-chip input { background: transparent; }
[data-theme="dark"] button.ghost:hover { background: #232b34; }
[data-theme="dark"] button.link-danger:hover { background: #3a2325; }
[data-theme="dark"] button.link-edit:hover { background: #1c2a3c; }
[data-theme="dark"] .tabs .tab:hover { background: #232b34; }
[data-theme="dark"] .tabs .tab.active, [data-theme="dark"] .submenu-item:hover,
[data-theme="dark"] .submenu-parent:hover { background: #1d3226; }
[data-theme="dark"] .submenu-item.is-entry { background: #1b2a3d; }
[data-theme="dark"] .submenu-item.is-entry:hover { background: #24384f; }
/* new-transaction card */
[data-theme="dark"] .txs-ico { background: #17301f; color: #57c98a; }
[data-theme="dark"] .txs-title h3 { color: #57c98a; }
[data-theme="dark"] .txs-sep { border-top-color: var(--border); }
[data-theme="dark"] .tx-form label { color: #ccd3dc; }
/* ledger table */
[data-theme="dark"] #ledger-table thead th { background: #20262e; color: #97a1af; border-bottom-color: var(--border); }
[data-theme="dark"] #ledger-table tbody td { border-bottom-color: #262d36; }
[data-theme="dark"] #ledger-table tbody tr:hover td { background: #20262e; }
[data-theme="dark"] #ledger-table .item-title,
[data-theme="dark"] #imp-table .item-title { color: var(--text); }
[data-theme="dark"] #ledger-table td.num.amt-pos { color: #4ade80; }
[data-theme="dark"] #ledger-table td.num.amt-neg { color: #f47171; }
[data-theme="dark"] .bd-parent { color: #b89bf0; }
/* badges */
[data-theme="dark"] .cp-sale  { background: #17301f; color: #57c98a; }
[data-theme="dark"] .cp-op    { background: #1c2a3c; color: #7ea9e8; }
[data-theme="dark"] .cp-bank  { background: #291f3d; color: #b89bf0; }
[data-theme="dark"] .cp-tax   { background: #33270f; color: #e0a04d; }
[data-theme="dark"] .cp-capex { background: #12302e; color: #4cc9be; }
[data-theme="dark"] .cp-cap   { background: #35181f; color: #f08ca3; }
[data-theme="dark"] .cp-inv   { background: #102a33; color: #55b8d6; }
[data-theme="dark"] .cp-na    { background: #262d36; color: #9aa3b0; }
[data-theme="dark"] .dept-pill { background: #232a4a; color: #97a4f0; }
[data-theme="dark"] .tp-yes { background: #17301f; color: #57c98a; }
[data-theme="dark"] .tp-no { background: #3a2325; color: #f47171; }
[data-theme="dark"] .tie-yes { background: #17301f; }
[data-theme="dark"] .tie-no { background: #3a2325; }
[data-theme="dark"] .gpill.up { background: #17301f; }
[data-theme="dark"] .gpill.down { background: #3a2325; }
/* filter card */
[data-theme="dark"] .lf-card { border-color: var(--border); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
[data-theme="dark"] .lf-chip { background: #1e242c; border-color: var(--border); }
[data-theme="dark"] .lf-chip select, [data-theme="dark"] .lf-chip input { color: var(--text); }
[data-theme="dark"] .lf-datebtn { background: #232b34; color: #939dab; }
[data-theme="dark"] .lf-datebtn:hover { background: #2a333e; color: var(--text); }
[data-theme="dark"] .lf-datelbl.set { color: var(--text); }
/* row action menu */
[data-theme="dark"] .menu-btn { background: #1e242c; border-color: var(--border); color: #9aa3b0; }
[data-theme="dark"] #row-menu-pop { background: #1f252d; border-color: var(--border); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
[data-theme="dark"] #row-menu-pop .rmp-item { color: var(--text); }
[data-theme="dark"] #row-menu-pop .rmp-item:hover { background: #262d36; }
[data-theme="dark"] #row-menu-pop .rmp-danger:hover { background: #3a2325; }
[data-theme="dark"] #row-menu-pop .rmp-sep { border-top-color: var(--border); }
/* recon status */
[data-theme="dark"] #recon-status tbody td { border-bottom-color: #262d36; }
[data-theme="dark"] #recon-status .rs-cur { color: var(--text); }
[data-theme="dark"] #recon-status td.rs-neg { color: #f47171; }
[data-theme="dark"] #recon-status th.rs-ledger, [data-theme="dark"] #recon-status td.rs-ledger {
  background: #1b2620; border-right-color: #2f4237;
}
[data-theme="dark"] #recon-status td.rs-ledger { color: #7fd6a2; }
[data-theme="dark"] #recon-status th.rs-reported, [data-theme="dark"] #recon-status td.rs-reported {
  background: #1c2430; border-left-color: #33425c;
}
[data-theme="dark"] #recon-status td.rs-reported { color: #93b9ef; }
[data-theme="dark"] #ledger-body tr.needs-bd td:first-child { box-shadow: inset 3px 0 0 #b9832f; }
[data-theme="dark"] .bd-pill { background: #33290f; color: #e8bf6e; border-color: #4d3d17; }
/* report tables: zebra rows, year/current rows, drill hovers, group heads */
[data-theme="dark"] .dept-matrix tbody tr:nth-child(even) td,
[data-theme="dark"] .dept-matrix tbody tr:nth-child(even) td.sticky-col,
[data-theme="dark"] #mtr-table tbody tr:nth-child(even),
[data-theme="dark"] #mtr-table tbody tr:nth-child(even) td.sticky-col,
[data-theme="dark"] #opp-table tbody tr:nth-child(even),
[data-theme="dark"] #opp-table tbody tr:nth-child(even) td.sticky-col,
[data-theme="dark"] #opp-corp-table tbody tr:nth-child(even),
[data-theme="dark"] #opp-corp-table tbody tr:nth-child(even) td.sticky-col,
[data-theme="dark"] #rpp-table tbody tr:nth-child(even),
[data-theme="dark"] #rpp-table tbody tr:nth-child(even) td.sticky-col,
[data-theme="dark"] #mreg-table tbody tr:nth-child(even),
[data-theme="dark"] #mreg-table tbody tr:nth-child(even) td.sticky-col,
[data-theme="dark"] #lgm-table tbody tr:nth-child(even),
[data-theme="dark"] #lgm-table tbody tr:nth-child(even) td.sticky-col,
[data-theme="dark"] #dd-table tbody tr:nth-child(even) { background: #1f252d; }
[data-theme="dark"] .dept-matrix tbody tr.budget-total td { background: #232c3d; border-top-color: #35415a; }
[data-theme="dark"] #lgm-table tbody tr.mtr-year, [data-theme="dark"] #lgm-table tbody tr.mtr-year td.sticky-col,
[data-theme="dark"] #mtr-table tbody tr.mtr-year, [data-theme="dark"] #mtr-table tbody tr.mtr-year td.sticky-col,
[data-theme="dark"] #opp-table tbody tr.opp-year, [data-theme="dark"] #opp-table tbody tr.opp-year td.sticky-col,
[data-theme="dark"] #opp-corp-table tbody tr.opp-year, [data-theme="dark"] #opp-corp-table tbody tr.opp-year td.sticky-col,
[data-theme="dark"] #mreg-table tbody tr.mtr-year, [data-theme="dark"] #mreg-table tbody tr.mtr-year td.sticky-col { background: #232c3d; }
[data-theme="dark"] #mtr-table tbody tr.mtr-current td, [data-theme="dark"] #mtr-table tbody tr.mtr-current td.sticky-col,
[data-theme="dark"] #lgm-table tbody tr.mtr-current td, [data-theme="dark"] #lgm-table tbody tr.mtr-current td.sticky-col { background: #2b2716; border-top-color: #57503a; }
[data-theme="dark"] .dept-matrix td.bud-cell:hover, [data-theme="dark"] #opp-table td.dd-cell:hover,
[data-theme="dark"] #opp-corp-table td.dd-cell:hover,
[data-theme="dark"] #mreg-table td.dd-cell:hover { background: #1c2a3c; box-shadow: inset 0 0 0 1px #3a4a68; }
[data-theme="dark"] #opp-table tbody tr.opp-partial td,
[data-theme="dark"] #opp-table tbody tr.opp-partial td.sticky-col,
[data-theme="dark"] #opp-corp-table tbody tr.opp-partial td,
[data-theme="dark"] #opp-corp-table tbody tr.opp-partial td.sticky-col { background: #2b2716; border-top-color: #57503a; }
[data-theme="dark"] #opp-table tbody tr.opp-partial td.total-col,
[data-theme="dark"] #opp-corp-table tbody tr.opp-partial td.total-col { background: #332d18; }
[data-theme="dark"] .table-wrap.scroll-more { box-shadow: inset -14px 0 14px -14px rgba(0, 0, 0, .7); }
[data-theme="dark"] #pax-table thead tr.grp th.pax-grp { background: #1d3226; color: #58c98a; border-bottom-color: #2c4a38; }
[data-theme="dark"] #dreg-table th.dreg-sub, [data-theme="dark"] #dreg-table td.dreg-sub { background: #202a25; }
[data-theme="dark"] #dreg-table th.dreg-native, [data-theme="dark"] #dreg-table td.dreg-native { background: #1f252d; }
[data-theme="dark"] #lgd-table tr.lgd-entry, [data-theme="dark"] #corp-table tr.corp-entry { background: #2a2716; }
[data-theme="dark"] #lgd-table tr.lgd-editing, [data-theme="dark"] #corp-table tr.corp-editing { background: #1c2a3c; }
[data-theme="dark"] #corp-monthly tbody tr:nth-child(even) { background: #1f252d; }
[data-theme="dark"] #corp-monthly tbody tr.mtr-year,
[data-theme="dark"] #corp-monthly tbody tr.mtr-year td.sticky-col { background: #232c3d; }
[data-theme="dark"] #corp-monthly tbody tr.mtr-current td,
[data-theme="dark"] #corp-monthly tbody tr.mtr-current td.sticky-col { background: #2b2716; border-top-color: #57503a; }
[data-theme="dark"] .ms-panel { background: #1f252d; }
[data-theme="dark"] .ms-panel label:hover { background: #262d36; }
[data-theme="dark"] .rpp-tgt-input { background: #151a21; }
[data-theme="dark"] .rpp-tgt-input:disabled { background: #1f252d; }
/* charts (SVG): re-ink axis text, grid lines and the tooltip for dark surfaces */
[data-theme="dark"] .chart-box svg text { fill: #9aa3b0; }
[data-theme="dark"] .chart-box svg line { stroke: #39424e; }
[data-theme="dark"] .chart-tip { background: #1f252d; color: var(--text); border-color: var(--border); }
/* attachments dropzone */
[data-theme="dark"] .att-drop:hover { border-color: var(--accent); }
[data-theme="dark"] .att-dragging .att-drop { background: rgba(63, 174, 114, .12); }

/* dark mode: calendar buttons */
[data-theme="dark"] .nd-btn { background: #232b34; border-color: var(--border); color: #939dab; }
[data-theme="dark"] .nd-btn:hover { background: #2a333e; color: var(--text); }
[data-theme="dark"] .tx-form .nd-btn { background: #151a21; }

/* operational dashboard */
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dash-movers h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.dash-movers .report-table th, .dash-movers .report-table td { padding: 8px 10px; }
@media (max-width: 1000px) {
  .dash-cols, .dash-movers { grid-template-columns: 1fr; }
}

/* "data as of" control in the Ledger head */
.asof-wrap { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* keyboard-typeable date field (entry forms) */
.kd-wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }
.kd-txt { width: 100%; padding-right: 30px !important; }
.kd-cal { pointer-events: none; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px; display: inline-flex; }
.kd-cal:hover { color: var(--accent); }
.kd-txt.kd-bad { border-color: var(--danger); outline-color: var(--danger); }
/* transparent overlay over the calendar-icon area — tap opens the OS picker (mobile-safe); the text box (left of it) still takes typing */
input.kd-native { position: absolute; right: 0; top: 0; width: 38px; height: 100%; opacity: 0; margin: 0; padding: 0; border: 0; min-width: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; }
[data-theme="dark"] .kd-cal { color: #939dab; }
[data-theme="dark"] .kd-cal:hover { color: var(--accent); }

/* collective-entry add bar */
.ce-addbar { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.ce-bulk { display: inline-flex; align-items: center; gap: 6px; }
.ce-bulk input { width: 56px; }

/* collective-entry running total */
.ce-total { text-align: right; padding: 8px 10px 2px; font-size: 13px; font-weight: 600; color: var(--text); }

/* ledger multi-select filter buttons (checkbox panel is body-appended, fixed) */
.lf-ms-btn { border: none; background: transparent; padding: 0; margin: 0; font-size: 12px;
  color: var(--text); cursor: pointer; text-align: left; max-width: 118px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.lf-ms-btn::after { content: ' ▾'; color: var(--muted); }
.lf-ms-panel { position: fixed; z-index: 300; }
[data-theme="dark"] .lf-ms-panel { background: #1f252d; }

/* operational dashboard — projected-bonus panel */
.bx { border: 1px solid #dde4ec; border-radius: 14px; overflow: hidden; background: var(--panel); margin-bottom: 4px; }
.bx-hero { display: flex; flex-wrap: wrap; gap: 12px 8px; align-items: center; padding: 18px 20px; background: linear-gradient(135deg, #eef4fd, #f4f8fe); }
.bx-hero-main { flex: 1 1 280px; min-width: 250px; }
.bx-hero-label { font-size: 13px; font-weight: 700; color: #1d4ed8; letter-spacing: .01em; }
/* the bonus panel ignores the page's facility/range selectors — say so */
.bx-scope { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px;
  background: #dbe7f8; color: #1e50a8; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; vertical-align: 1px; }
[data-theme="dark"] .bx-scope { background: #24344f; color: #9dbdf0; }
.bx-hero-value { font-size: 36px; font-weight: 800; color: #1e3a8a; line-height: 1.15; font-variant-numeric: tabular-nums; margin: 2px 0; }
.bx-hero-sub { font-size: 12px; color: #64748b; }
.bx-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; margin-left: 10px; vertical-align: 6px; white-space: nowrap; }
.bx-badge.ok { background: #dcf3e4; color: #15803d; }
.bx-badge.warn { background: #fbe3e3; color: #cf3535; }
.bx-fac-head .bx-badge { vertical-align: 1px; }
.bx-bar { height: 8px; background: #d7e3f6; border-radius: 999px; margin-top: 10px; max-width: 360px; overflow: hidden; }
.bx-bar i { display: block; height: 100%; background: #2563eb; border-radius: 999px; }
.bx-bar-cap { font-size: 11px; font-weight: 600; color: #2563eb; margin-top: 4px; }
.bx-hero-stats { display: flex; flex-wrap: wrap; align-items: stretch; }
.bx-hstat { padding: 4px 18px; border-left: 1px solid #cddcf2; min-width: 148px; max-width: 190px; text-align: center; }
.bx-hstat .l { font-size: 11.5px; color: #64748b; line-height: 1.3; }
.bx-hstat .v { font-size: 21px; font-weight: 800; color: #1e293b; margin-top: 2px; font-variant-numeric: tabular-nums; }
.bx-hstat .s { font-size: 10.5px; color: #94a3b8; margin-top: 1px; }
.bx-hstat .bx-ico { margin: 0 auto 7px; }

/* icon chips */
.bx-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #e1ecfb; color: #2563eb;
  display: flex; align-items: center; justify-content: center; }
.bx-ico svg { width: 18px; height: 18px; }
.bx-ico.fh { display: inline-flex; width: 32px; height: 32px; margin-right: 9px; vertical-align: -9px; }
.bx-fac.ok .bx-ico.fh { background: #dcf3e4; color: #15803d; }
.bx-fac.warn .bx-ico.fh { background: #fbe3e3; color: #cf3535; }
.bx-facs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px 18px 4px; }
.bx-fac { border: 1px solid; border-radius: 12px; padding: 13px 15px; }
.bx-fac.ok { border-color: #bfe3cc; background: #fbfefc; }
.bx-fac.warn { border-color: #f0c8c8; background: #fffcfc; }
.bx-fac-head { font-weight: 800; font-size: 15.5px; margin-bottom: 11px; }
.bx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; }
.bx-cell .l { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.bx-cell .v { font-size: 14px; font-weight: 650; margin-top: 1px; font-variant-numeric: tabular-nums; }
.bx-cell .v .u { font-size: 11px; font-weight: 500; color: var(--muted); }
.bx-cell .v.pos { color: #15803d; }
.bx-cell .v.neg { color: #cf3535; }
.bx-fac-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; border-top: 1px solid #e8ecf1; margin-top: 12px; padding-top: 10px; }
.bx-fac-foot .l { font-size: 10.5px; color: var(--muted); }
.bx-fac-foot .b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bx-fac.ok .b { color: #15803d; }
.bx-fac.warn .b { color: #cf3535; }
.bx-fac-foot .n { font-size: 11px; color: var(--muted); text-align: right; max-width: 46%; }
.bx-info { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 12px 18px 0; }
.bx-box { border: 1px solid #e6eaef; border-radius: 12px; padding: 11px 14px; }
.bx-box h4 { margin: 0 0 8px; font-size: 12.5px; }
.bx-step { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; margin: 6px 0; line-height: 1.45; }
.bx-step .n { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #2563eb; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transform: translateY(3px); }
.bx-formula { font-size: 12px; line-height: 1.55; border-left: 3px solid; border-radius: 6px; padding: 7px 11px; margin: 7px 0; font-variant-numeric: tabular-nums; }
.bx-formula.ok { border-color: #34a163; background: #f2faf5; }
.bx-formula.warn { border-color: #d65252; background: #fdf5f5; }
.bx-improve { padding: 12px 18px 16px; }
.bx-improve h4 { margin: 0 0 4px; font-size: 12.5px; }
.bx-imp { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; border: 1px solid; border-radius: 12px; padding: 10px 15px; margin-top: 9px; font-size: 12.5px; }
.bx-imp.ok { border-color: #bfe3cc; background: #f4fbf6; }
.bx-imp.warn { border-color: #f0c8c8; background: #fffafa; }
.bx-imp .l { display: block; font-size: 10.5px; color: var(--muted); }
.bx-imp b { font-variant-numeric: tabular-nums; }
.bx-imp b.pos { color: #15803d; }
.bx-imp b.neg { color: #cf3535; }
.bx-equiv { display: inline-flex; align-items: center; gap: 10px; background: #fdf0f0; border-radius: 11px;
  padding: 7px 14px; font-size: 12px; line-height: 1.35; margin-left: auto; }
.bx-equiv .bx-ico { width: 30px; height: 30px; background: #fbe3e3; color: #cf3535; }
.bx-equiv .bx-ico svg { width: 15px; height: 15px; }

/* bottom stat cards */
.bx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.bx-stat { display: flex; gap: 13px; align-items: flex-start; border: 1px solid #e2e8ef; background: var(--panel);
  border-radius: 14px; padding: 16px 18px; }
.bx-stat-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bx-stat .l { font-size: 12px; color: var(--muted); line-height: 1.3; }
.bx-stat .v { font-size: 25px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.25; margin: 1px 0 2px; }
.bx-stat .s { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bx-conf.ok { color: #15803d; } .bx-conf.mid { color: #b7791f; } .bx-conf.warn { color: #cf3535; }
.bx-meter { flex: 1 1 60px; min-width: 60px; max-width: 140px; height: 7px; border-radius: 999px; background: #e6ebf1; overflow: hidden; }
.bx-meter i { display: block; height: 100%; border-radius: 999px; background: #22a05c; }
.bx-meter.mid i { background: #e0a04d; }
.bx-meter.warn i { background: #d65252; }
@media (max-width: 1100px) { .bx-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bx-stats { grid-template-columns: 1fr; } }

/* revenue movers + monthly-revenue tables */
#dash-mv-rev th, #dash-mv-rev td, #dash-mon th, #dash-mon td { padding: 13px 14px; font-size: 13.5px; }
#dash-mv-rev tbody td, #dash-mon tbody td { font-variant-numeric: tabular-nums; }
#dash-mv-rev tbody tr:nth-child(even):not(.budget-total) td, #dash-mon tbody tr:nth-child(even):not(.budget-total) td { background: #f7f9fb; }
#dash-mv-rev tbody tr.budget-total td, #dash-mon tbody tr.budget-total td { background: #eef0fb; font-weight: 700; }
#dash-mv-rev .gpill { font-size: 12px; padding: 4px 12px; }
[data-theme="dark"] #dash-mv-rev tbody tr:nth-child(even):not(.budget-total) td, [data-theme="dark"] #dash-mon tbody tr:nth-child(even):not(.budget-total) td { background: #20262e; }
[data-theme="dark"] #dash-mv-rev tbody tr.budget-total td, [data-theme="dark"] #dash-mon tbody tr.budget-total td { background: #232a4a; }
@media (max-width: 1000px) {
  .bx-facs, .bx-info { grid-template-columns: 1fr; }
  .bx-hero-stats { padding-top: 4px; }
  .bx-hstat { border-left: none; padding: 4px 18px 4px 0; }
  .bx-hero-value { font-size: 31px; }
}
@media (max-width: 480px) {
  .bx-grid { grid-template-columns: 1fr 1fr; } /* 3-up is too cramped on phones */
}
[data-theme="dark"] .bx { border-color: var(--border); }
[data-theme="dark"] .bx-hero { background: linear-gradient(135deg, #17233a, #1a2536); }
[data-theme="dark"] .bx-hero-label { color: #7ea9e8; }
[data-theme="dark"] .bx-hero-value { color: #dbe7fb; }
[data-theme="dark"] .bx-hero-sub { color: #8fa0b8; }
[data-theme="dark"] .bx-badge.ok { background: #17301f; color: #57c98a; }
[data-theme="dark"] .bx-badge.warn { background: #3a2325; color: #f47171; }
[data-theme="dark"] .bx-bar { background: #24344f; }
[data-theme="dark"] .bx-bar i { background: #3b82f6; }
[data-theme="dark"] .bx-bar-cap { color: #7ea9e8; }
[data-theme="dark"] .bx-hstat { border-color: #2b3b57; }
[data-theme="dark"] .bx-hstat .l, [data-theme="dark"] .bx-hstat .s { color: #8fa0b8; }
[data-theme="dark"] .bx-hstat .v { color: #dbe1e9; }
[data-theme="dark"] .bx-fac.ok { border-color: #2c4a38; background: #171f1a; }
[data-theme="dark"] .bx-fac.warn { border-color: #4a2c2c; background: #201718; }
[data-theme="dark"] .bx-cell .v.pos, [data-theme="dark"] .bx-fac.ok .b, [data-theme="dark"] .bx-imp b.pos { color: #4ade80; }
[data-theme="dark"] .bx-cell .v.neg, [data-theme="dark"] .bx-fac.warn .b, [data-theme="dark"] .bx-imp b.neg { color: #f47171; }
[data-theme="dark"] .bx-fac-foot { border-color: var(--border); }
[data-theme="dark"] .bx-box { border-color: var(--border); }
[data-theme="dark"] .bx-step .n { background: #2c5da8; }
[data-theme="dark"] .bx-formula.ok { border-color: #2c4a38; background: #171f1a; }
[data-theme="dark"] .bx-formula.warn { border-color: #4a2c2c; background: #201718; }
[data-theme="dark"] .bx-imp.ok { border-color: #2c4a38; background: #171f1a; }
[data-theme="dark"] .bx-imp.warn { border-color: #4a2c2c; background: #201718; }
[data-theme="dark"] .bx-ico { background: #1c2a3c; color: #7ea9e8; }
[data-theme="dark"] .bx-fac.ok .bx-ico.fh { background: #17301f; color: #57c98a; }
[data-theme="dark"] .bx-fac.warn .bx-ico.fh, [data-theme="dark"] .bx-equiv .bx-ico { background: #3a2325; color: #f47171; }
[data-theme="dark"] .bx-equiv { background: #201718; }
[data-theme="dark"] .bx-stat { border-color: var(--border); }
[data-theme="dark"] .bx-conf.ok { color: #4ade80; }
[data-theme="dark"] .bx-conf.mid { color: #e0a04d; }
[data-theme="dark"] .bx-conf.warn { color: #f47171; }
[data-theme="dark"] .bx-meter { background: #2a323d; }

/* ---- bank reconciliation ---- */
#bank-accounts { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
.bank-acct {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 16px; border: 1px solid var(--border, #d6dbe3); border-radius: 12px;
  background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.bank-acct:hover { border-color: #8a93a3; }
.bank-acct.sel { border-color: #2a78d6; box-shadow: 0 0 0 1px #2a78d6 inset; }
.bank-acct .ba-name { font-weight: 600; }
.bank-acct .ba-sub { font-size: 12px; color: var(--muted, #6b7482); }
.ba-open { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 9px; }
.ba-open.ok { color: #1a7f3c; background: #e5f5ea; }
.ba-open.warn { color: #9a5b00; background: #fdf1dc; }
.bank-preview { margin: 10px 0 2px; line-height: 1.9; }
.bank-h { margin: 18px 0 8px; font-size: 14px; }
.bank-desc { color: var(--muted, #6b7482); max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-rule { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: #2a5fa8; background: #e8f0fb; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.rcv-pm-scroll { max-height: 340px; overflow-y: auto; }
/* Forex: rates load themselves, so the entry form folds away behind a summary
   and the head carries the loader's status instead */
.fx-auto { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.fx-auto.ok { color: #1a7f3c; background: #e5f5ea; }
.fx-auto.warn { color: #9a5b00; background: #fdf1dc; }
.fx-manual { margin: 8px 0 4px; border: 1px solid var(--border, #d6dbe3); border-radius: 10px; padding: 8px 12px; }
.fx-manual > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted, #6b7482); }
.fx-manual > summary:hover { color: var(--text, #1d2530); }
.fx-manual[open] > summary { margin-bottom: 6px; }
[data-theme="dark"] .fx-auto.ok { color: #4ade80; background: #17301f; }
[data-theme="dark"] .fx-auto.warn { color: #e0a04d; background: #33271263; }
[data-theme="dark"] .fx-manual { border-color: var(--border); }

/* Outstanding-by-partner summary: rows are clickable filters, the per-currency
   subtotals sit at the bottom and never add different currencies together */
.rcv-sum-row { cursor: pointer; }
.rcv-sum-row:hover { background: #f2f6f3; }
.rcv-sum-tot td { border-top: 1px solid var(--border, #d6dbe3); font-weight: 600; color: var(--muted, #6b7482); }
[data-theme="dark"] .rcv-sum-row:hover { background: #1b2430; }

/* Invoices table totals foot: shown only when one partner is selected, so the
   three money columns can be added up without mixing currencies. Sits below the
   scrolling body and stays put, like the header. */
.rcv-tbl tfoot .rcv-inv-tot td {
  border-top: 2px solid var(--border, #d6dbe3);
  font-weight: 600;
  background: #f2f6f3;
}
.rcv-tbl tfoot .rcv-inv-tot td.sticky-col { background: #f2f6f3; }
.rcv-tbl tfoot .rcv-inv-tot td.muted { font-weight: 400; }
[data-theme="dark"] .rcv-tbl tfoot .rcv-inv-tot td,
[data-theme="dark"] .rcv-tbl tfoot .rcv-inv-tot td.sticky-col { background: #1b2430; }

/* The invoice list has to fit the card (Omer, 23 Sep 2026): facility rides
   under the partner and due under issued, long guest names ("AHMED HASSAN
   MOHAMEDAHMED HAIMORA +2") wrap instead of setting the width, and cells are
   tighter than the entry grids. On a narrower screen it scrolls sideways --
   .kp-pretty clips its tables, which is what hid Status and the buttons. */
#daily-sub-receivables .table-wrap { overflow-x: auto; }
.rcv-tbl thead th, .rcv-tbl tbody td, .rcv-tbl tfoot td { padding-left: 7px; padding-right: 7px; }
.rcv-tbl > tbody > tr > td, .rcv-tbl tfoot td { font-size: 12px; }
.rcv-tbl td.rcv-name { white-space: normal; min-width: 110px; max-width: 190px; overflow-wrap: break-word; line-height: 1.35; }
.rcv-tbl .rcv-stays { white-space: nowrap; }
.rcv-acts { white-space: nowrap; }
.rcv-acts .small-btn { padding: 3px 7px; }
.rcv-acts .small-btn + .small-btn { margin-left: 3px; }
.rcv-acts .rcv-del:hover { color: #a11; border-color: #a11; }
[data-theme="dark"] .bank-acct { border-color: var(--border); }
[data-theme="dark"] .ba-open.ok { color: #4ade80; background: #17301f; }
[data-theme="dark"] .ba-open.warn { color: #e0a04d; background: #33271263; }
[data-theme="dark"] .bank-rule { color: #7fb1f2; background: #16283f; }
/* Finance's budget cell says how much of it is card commissions — a figure the
   drill-down cannot list, because commissions ride the sale rows */
.bud-fee { display: block; font-size: 10px; color: var(--muted); font-weight: 400; }
/* the GHL transactions a wallet night still owes — named, because the operator
   is being asked whether these specific ones are already inside the night */
.ob-newtx { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.ob-newtx code { font-size: 9px; opacity: 0.75; }
/* a monthly lounge edit that also rewrote the month's daily rows says so here;
   amber when it could not (a closed month, or days with no guests to apportion by) */
#lounge-feedback { line-height: 1.55; }
.lm-spread-warn { color: #8f5507; font-weight: 500; }
[data-theme="dark"] .lm-spread-warn { color: #e0a04d; }
/* month-close window note, and the lock marker on a closed month's lounge row */
.pc-window { margin: 2px 0 8px; }
.lm-locked {
  font-size: 11px; color: var(--muted); cursor: help;
  border: 1px dashed var(--border); border-radius: 6px; padding: 2px 7px;
}

/* Budget page: revenue is the denominator of every percentage on the grid, so
   it leads the columns and is tinted to read as a given rather than a result. */
.bud-rev { background: #f6f8fa; color: var(--muted, #6b7482); font-variant-numeric: tabular-nums; }
thead .bud-rev { cursor: help; }
tr.budget-total .bud-rev, tr.opp-year .bud-rev { font-weight: 600; color: var(--text, #1d2530); }
[data-theme="dark"] .bud-rev { background: #1a2027; }

/* The currency lock's escape hatch: the field is pre-set and disabled for
   categories that have only ever carried one currency, and this releases it
   for a single entry. Small and quiet — it is the exception, not the control. */
#tx-currency-unlock { align-self: flex-start; padding: 0; font-size: 12px; font-weight: 400; }
#tx-currency:disabled { color: var(--muted, #6b7482); cursor: not-allowed; }

/* "will claim N selected stays" beside Add invoice. The link between a new
   invoice and the stays it covers used to be invisible, and an edit to the
   period silently dropped it - leaving an invoice raised and matched with
   nothing attached. */
.rcv-claim {
  align-self: center; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 600;
  color: #17603a; background: #e6f4ec; border: 1px solid #bfe0cd;
}
[data-theme="dark"] .rcv-claim { color: #7fd3a0; background: #17301f; border-color: #26382c; }

/* OCBC import bank check: the tie between each GHL file and its own bank
   credit, stated before anything is posted. A file that does not tie blocks
   the button, because a wrong figure was only ever found afterwards. */
.ob-recon { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--border, #d6dbe3); border-radius: 8px; background: #f7faf8; }
.ob-rc-head { font-size: 12px; font-weight: 700; color: #2c3440; margin-bottom: 6px; }
.ob-rc-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ob-rc { font-size: 12px; color: var(--muted, #6b7482); }
.ob-rc b { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #8a939f; }
.ob-rc.ok { color: #17603a; }
.ob-rc.bad { color: #a11; font-weight: 700; }
.ob-rc-bad { margin-top: 7px; padding: 6px 8px; border-radius: 6px; font-size: 12px; color: #7d1010; background: #fdecec; border: 1px solid #f3c4c4; }
.ob-rc-note { margin-top: 5px; font-size: 11.5px; color: var(--muted, #6b7482); }
[data-theme="dark"] .ob-recon { background: #16211a; border-color: #26382c; }
[data-theme="dark"] .ob-rc-head { color: #e3e7ed; }
[data-theme="dark"] .ob-rc.ok { color: #7fd3a0; }
[data-theme="dark"] .ob-rc-bad { color: #ffb4b4; background: #3a1c1c; border-color: #5a2a2a; }

/* ---------------------------------------------------------------------------
   Consolidated page — the same three grids the company pages already draw.

   The P&L rules above are written against #opp-table and #opp-corp-table, the
   Monthly Total rules against #mtr-table and #lgm-table, the reconciliation
   rules against #recon-status. Every one of them is bound to an ID, so a table
   that renders the identical markup somewhere else inherits none of it and
   falls back to the generic .report-table look — uppercase headings, no zebra,
   no section rules, no banding. That is exactly what happened to the Corporate
   sheet (see the note above) and it had happened again, unnoticed, to all three
   tables on the Consolidated page (Omer, 22 Sep 2026).

   These rules say "and this one too" rather than restating the design, so the
   consolidated tables move when the company ones move.
   --------------------------------------------------------------------------- */
#cons-pnl, #cons-rev, #consrev-table { font-size: 12px; }
#cons-pnl th, #cons-pnl td,
#cons-rev th, #cons-rev td,
#consrev-table th, #consrev-table td { padding: 6px 5px; white-space: nowrap; text-align: center; vertical-align: middle; }
#cons-pnl thead th, #cons-rev thead th, #cons-bal thead th { text-transform: none; }
#cons-pnl thead tr.grp th, #cons-rev thead tr.grp th, #cons-bal thead tr.grp th {
  color: var(--text); font-weight: 700; font-size: 12px;
}
#cons-rev thead tr.grp th.mtr-grp, #cons-bal thead tr.grp th.mtr-grp { text-align: center; }
#cons-pnl thead tr.cols th, #cons-rev thead tr.cols th, #cons-bal thead tr.cols th {
  color: var(--muted); font-weight: 600; font-size: 11px;
}
#cons-pnl td.sticky-col, #cons-pnl th.sticky-col,
#cons-rev td.sticky-col, #cons-rev th.sticky-col,
#cons-bal td.sticky-col, #cons-bal th.sticky-col { text-align: left; font-weight: 700; color: var(--text); }
/* opaque sticky column, so horizontally-scrolled figures do not bleed through */
#cons-pnl tbody td.sticky-col, #cons-rev tbody td.sticky-col, #cons-bal tbody td.sticky-col { background: var(--panel); }
#cons-pnl tbody tr:nth-child(even) td.sticky-col,
#cons-rev tbody tr:nth-child(even) td.sticky-col,
#cons-bal tbody tr:nth-child(even) td.sticky-col { background: #f5f7f8; }
#cons-pnl tbody td, #cons-rev tbody td { border-bottom: none; }
#cons-pnl tbody tr:nth-child(even), #cons-rev tbody tr:nth-child(even),
#cons-bal tbody tr:nth-child(even) { background: #f5f7f8; }
#cons-pnl .total-col { background: rgba(31, 45, 61, 0.045); }
/* section rules: P&L uses .sec, the revenue and balance grids use .mtr-sep */
#cons-pnl th.sec, #cons-pnl td.sec,
#cons-rev th.mtr-sep, #cons-rev td.mtr-sep { border-left: 1px solid var(--border); }
#cons-rev .mtr-tot { background: rgba(31, 45, 61, 0.045); }
/* the header is sticky and the table opens scrolled to the latest month, so
   rows pass beneath it: the TOTAL tint goes over the opaque panel colour
   instead of being see-through (either theme) */
#cons-rev thead th.mtr-tot { background: linear-gradient(rgba(31, 45, 61, 0.045), rgba(31, 45, 61, 0.045)), var(--panel); }
#cons-rev td.mtr-tot.mrev { font-weight: 700; }
/* the rest of Monthly Total's look (#mtr-table): year total, YTD, the month
   in progress, growth pills */
#cons-rev tbody tr.mtr-year { background: #eaf0fb; }
#cons-rev tbody tr.mtr-year td { background: transparent; font-weight: 700; border-top: 1px solid #cad6ec; border-bottom: 1px solid #cad6ec; }
#cons-rev tbody tr.mtr-year td.sticky-col { background: #eaf0fb; }
#cons-rev tbody tr.mtr-ytd td { border-top: 2px solid #9fb6e0; border-bottom: 2px solid #9fb6e0; }
#cons-rev tbody tr.mtr-current td { background: #fff8e6; font-style: italic; border-top: 1px solid #e6d9a8; }
#cons-rev tbody tr.mtr-current td.sticky-col { background: #fff8e6; font-style: normal; }
#cons-rev .gpill { padding: 2px 7px; }
/* the whole table on the page, and its header sticks to the PAGE under the
   top bar (Omer, 23 Sep 2026) — so the frame must not be a scroll container:
   any overflow other than visible would pin the header to the frame instead */
.cons-rev-wrap { max-height: none; overflow: visible; }
.cons-rev-wrap #cons-rev thead tr.grp th { top: var(--topbar-h, 57px); }
.cons-rev-wrap #cons-rev thead tr.cols th { top: calc(var(--topbar-h, 57px) + 26px); }
[data-theme="dark"] #cons-rev tbody tr.mtr-year, [data-theme="dark"] #cons-rev tbody tr.mtr-year td.sticky-col { background: #232c3d; }
[data-theme="dark"] #cons-rev tbody tr.mtr-current td, [data-theme="dark"] #cons-rev tbody tr.mtr-current td.sticky-col { background: #2b2716; border-top-color: #57503a; }
/* month still filling — amber and italic, the convention both company sheets use */
#cons-pnl tbody tr.opp-partial td, #cons-rev tbody tr.opp-partial td {
  background: #fff8e6; font-style: italic; border-top: 1px solid #e6d9a8;
}
#cons-pnl tbody tr.opp-partial td.sticky-col,
#cons-rev tbody tr.opp-partial td.sticky-col { background: #fff8e6; font-style: normal; }
#cons-pnl tbody tr.opp-partial td.total-col,
#cons-rev tbody tr.opp-partial td.mtr-tot { background: #faf0d8; }
/* balances: the revenue table's format (Omer, 23 Sep 2026) — company bands of
   Balance + In USD, a tinted Total block, the USD total as the blue total row */
#cons-bal { font-size: 12px; }
#cons-bal th, #cons-bal td { padding: 6px 8px; white-space: nowrap; text-align: center; vertical-align: middle; }
#cons-bal td.mrev { font-variant-numeric: tabular-nums; }
#cons-bal tbody td { border-bottom: none; }
#cons-bal th.mtr-sep, #cons-bal td.mtr-sep { border-left: 1px solid var(--border); }
#cons-bal .mtr-tot { background: rgba(31, 45, 61, 0.045); }
#cons-bal thead th.mtr-tot { background: linear-gradient(rgba(31, 45, 61, 0.045), rgba(31, 45, 61, 0.045)), var(--panel); }
#cons-bal td.rs-neg { color: var(--neg); }
#cons-bal tbody tr.mtr-year { background: #eaf0fb; }
#cons-bal tbody tr.mtr-year td { background: transparent; font-weight: 700; border-top: 1px solid #cad6ec; border-bottom: 1px solid #cad6ec; }
#cons-bal tbody tr.mtr-year td.sticky-col { background: #eaf0fb; }
[data-theme="dark"] #cons-bal tbody tr.mtr-year, [data-theme="dark"] #cons-bal tbody tr.mtr-year td.sticky-col { background: #232c3d; }
.cons-rev-wrap #cons-bal thead tr.grp th { top: var(--topbar-h, 57px); }
.cons-rev-wrap #cons-bal thead tr.cols th { top: calc(var(--topbar-h, 57px) + 26px); }
[data-theme="dark"] #cons-pnl tbody tr:nth-child(even),
[data-theme="dark"] #cons-rev tbody tr:nth-child(even),
[data-theme="dark"] #cons-bal tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] #cons-pnl tbody tr:nth-child(even) td.sticky-col,
[data-theme="dark"] #cons-rev tbody tr:nth-child(even) td.sticky-col,
[data-theme="dark"] #cons-bal tbody tr:nth-child(even) td.sticky-col { background: #1b2430; }

/* Revenue by Location shares the consolidated look: same header weights,
   sticky month column, zebra, section rules, year banding and in-progress
   amber as the P&L beside it. */
#consrev-table thead th { text-transform: none; }
#consrev-table thead tr.grp th { color: var(--text); font-weight: 700; font-size: 12px; text-align: center; }
#consrev-table thead tr.cols th { color: var(--muted); font-weight: 600; font-size: 11px; }
#consrev-table td.sticky-col, #consrev-table th.sticky-col { text-align: left; font-weight: 700; color: var(--text); }
#consrev-table tbody td.sticky-col { background: var(--panel); }
#consrev-table tbody tr:nth-child(even) td.sticky-col { background: #f5f7f8; }
#consrev-table tbody td { border-bottom: none; }
#consrev-table tbody tr:nth-child(even) { background: #f5f7f8; }
#consrev-table th.mtr-sep, #consrev-table td.mtr-sep { border-left: 1px solid var(--border); }
#consrev-table .mtr-tot { background: rgba(31, 45, 61, 0.045); }
#consrev-table td.growth { font-style: italic; font-size: 11px; }
#consrev-table td.growth-neg { color: #c0392b; }
#consrev-table td.growth-pos { color: var(--muted); }
#consrev-table tbody tr.opp-year { background: #eaf0fb; }
#consrev-table tbody tr.opp-year td { background: transparent; font-weight: 700; border-top: 1px solid #cad6ec; border-bottom: 1px solid #cad6ec; }
#consrev-table tbody tr.opp-year td.sticky-col { background: #eaf0fb; }
#consrev-table tbody tr.opp-partial td { background: #fff8e6; font-style: italic; border-top: 1px solid #e6d9a8; }
#consrev-table tbody tr.opp-partial td.sticky-col { background: #fff8e6; font-style: normal; }
[data-theme="dark"] #consrev-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] #consrev-table tbody tr:nth-child(even) td.sticky-col { background: #1b2430; }