/* ============================================================================
 * Finance — V12 skin. Loaded after app.css; uses the tokens in ab-v12.css.
 * Dark frames with white cards (like the Hub). The old colour names (--ink, --muted, --panel…)
 * mean "on a white card"; inside the dark frames they are re-pointed to light text.
 * Brand colour = orange; red is kept only for "wrong / overdue / rejected".
 * ========================================================================== */
:root {
  --red: var(--v-bad); --red-deep: #9B0F17; --red-wash: var(--v-bad-soft);
  --ink: var(--v-card-text); --ink-2: #2E3033; --muted: var(--v-card-muted); --faint: var(--v-card-faint);
  --line: var(--v-card-line); --line-2: #EFEEEA; --bg: var(--v-card-2); --panel: var(--v-card); --surf: var(--v-card);
  --go: var(--v-good); --go-wash: var(--v-good-soft); --amber: var(--v-warn); --amber-wash: var(--v-warn-soft); --blue: #1D4FA8; --blue-wash: var(--v-info-soft);
  --font: var(--v-font); --num: var(--v-display); --r: var(--v-r-l); --r-sm: 12px;
}
body { background: var(--v-bg); color: var(--v-text); }
:focus-visible { outline: none; box-shadow: var(--v-focus); }
.num, .amt, .kpi .v, .item .amt, .tbl .amt, .detail-head .big, .in.amount, .qa-amount input, .qa-amount span, .hbar .v, .donut-legend b, .sum-bar b, .v12-kpi .val { font-stretch: 88%; }

/* ---------- frames ---------- */
.shell { gap: 16px; padding: 16px; grid-template-columns: var(--side) minmax(0, 1fr); }
.side { background: var(--v-panel); color: var(--v-text); border-radius: var(--v-r-xl); top: 16px; height: calc(100vh - 32px); height: calc(100dvh - 32px); overflow: hidden; }
.brand b { color: var(--v-text); font: 700 17px/1.1 var(--v-display); }
.brand span { color: var(--v-muted); }
.brand .mk { border-radius: 12px; }
.nav .grp { color: var(--v-faint); }
.nav a { color: var(--v-muted); border-radius: 999px; padding: 9px 13px; }
.nav a svg { opacity: 1; }
@media (hover: hover) { .nav a:hover { background: var(--v-panel-3); color: var(--v-text); text-decoration: none; } }
.nav a.on { background: var(--v-accent-strong); color: #fff; }
.nav a.on::before { display: none; }
.nav .badge { background: #fff; color: var(--v-accent-ink); }
.nav a:not(.on) .badge { background: var(--v-accent-strong); color: #fff; }
.me-box { border-top: 1px solid var(--v-line); color: var(--v-muted); }
.me-box b { color: var(--v-text); }
.me-box .btn { background: var(--v-panel-3) !important; border-color: var(--v-line) !important; color: var(--v-text) !important; }
.main { background: var(--v-panel); border-radius: var(--v-r-xl); min-height: calc(100vh - 32px); }
.topbar, .content, .bottom-nav { --ink: var(--v-text); --ink-2: var(--v-text); --muted: var(--v-muted); --faint: var(--v-faint); --line: var(--v-line); --line-2: var(--v-line);
  --bg: var(--v-panel); --surf: var(--v-panel-2); --blue: #8DB4FF; color: var(--v-text); }
:root[data-theme="light"] .topbar, :root[data-theme="light"] .content, :root[data-theme="light"] .bottom-nav { --blue: #1D4FA8; }
.topbar { background: var(--v-panel); backdrop-filter: none; border-bottom: 1px solid var(--v-line); border-radius: var(--v-r-xl) var(--v-r-xl) 0 0; padding: 14px 24px; }
.content { padding: 24px 28px 110px; }
.search input { background: var(--v-panel-2); color: var(--v-text); border-color: var(--v-line); border-radius: 999px; height: 42px; }
.search input::placeholder { color: var(--v-faint); }
.search svg { color: var(--v-faint); top: 12px; }
.search .kbd { color: var(--v-faint); border-color: var(--v-line); top: 10px; }
.icon-btn { color: var(--v-text); border-radius: 50%; }
@media (hover: hover) { .icon-btn:hover { background: var(--v-panel-3); } }
.icon-btn .dot { background: var(--v-accent-strong); }
.page-h h1 { font: 700 28px/1.15 var(--v-display); letter-spacing: -.01em; color: var(--v-text); }

/* white cards: dark text again */
.card, .kpi, .quick a, .quick button, .modal, .qa-amount, .file, .search-results, .actions-sheet a, .actions-sheet button, .v12-kpi, .v12-alert {
  --ink: var(--v-card-text); --ink-2: #2E3033; --muted: var(--v-card-muted); --faint: var(--v-card-faint); --line: var(--v-card-line); --line-2: #EFEEEA;
  --bg: var(--v-card-2); --panel: var(--v-card); --surf: var(--v-card); --blue: #1D4FA8; color: var(--ink); color-scheme: light; }
.card { background: var(--v-card); border-color: transparent; border-radius: var(--v-r-l); }
:root[data-theme="light"] .card, :root[data-theme="light"] .kpi, :root[data-theme="light"] .quick a { border-color: var(--v-card-line); }
.card-h { padding: 16px 20px; border-bottom-color: #EFEEEA; }
.card-h h2 { font: 600 17px/1.2 var(--v-font); letter-spacing: 0; }
.card-b { padding: 18px 20px; }
.kpi { background: var(--v-card); border-color: transparent; border-radius: var(--v-r-l); padding: 16px 18px; }
.kpi .v { color: var(--v-accent-ink); }
.kpi .v.warn { color: var(--v-warn); } .kpi .v.bad { color: var(--v-bad); } .kpi .v.ok { color: var(--v-good); }
.kpi.hero { background: var(--v-accent-strong); border-color: var(--v-accent-strong); }
.kpi.hero .v { color: #fff; } .kpi.hero .l, .kpi.hero .s { color: #fff; }
.quick a, .quick button { background: var(--v-card); border-color: transparent; border-radius: var(--v-r-m); }
@media (hover: hover) { .quick a:hover, .quick button:hover { border-color: var(--v-accent); } }
.quick .ic { background: var(--v-accent-soft); color: var(--v-accent-ink); border-radius: 50%; }
.quick .ic.dark { background: var(--v-card-3); color: var(--v-card-text); }

/* controls take the surface they sit on */
.btn { background: var(--surf); color: var(--ink); border-color: var(--line); border-radius: 999px; }
@media (hover: hover) { .btn:hover { border-color: var(--v-accent); } }
.btn.primary { background: var(--v-accent-strong); border-color: var(--v-accent-strong); color: #fff; }
@media (hover: hover) { .btn.primary:hover { background: var(--v-accent-ink); } }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--surf); }
.btn.ok { background: var(--v-good); border-color: var(--v-good); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--blue); }
.btn.danger { color: var(--v-bad); }
.content .btn.danger { color: #FF8A8A; }
:root[data-theme="light"] .content .btn.danger, .card .btn.danger, .modal .btn.danger { color: var(--v-bad); }
.in { background: var(--surf); color: var(--ink); border-color: var(--line); border-radius: 12px; }
.in:focus { border-color: var(--v-accent); box-shadow: var(--v-focus); }
.chk input { accent-color: var(--v-accent-strong); }
.chip { background: var(--surf); border-color: var(--line); color: var(--ink); }
.chip.on, .seg button.on, .seg a.on { background: var(--v-accent-strong); border-color: var(--v-accent-strong); color: #fff; }
.seg { background: var(--surf); border-color: var(--line); border-radius: 999px; }
.seg button, .seg a { border-radius: 999px; }
.tbl th { background: var(--v-card-2); }
.tbl tbody tr:hover td, .item:hover { background: #FAF9F6; }
.tbl tfoot td { background: var(--v-card-2); }
.content > .tbl-wrap .tbl th, .content > .tbl-wrap .tbl tfoot td { background: var(--v-panel-2); }
.tag { background: var(--v-card-3); color: var(--ink-2); }
.tag.paid, .tag.approved, .tag.ok, .tag.active { background: var(--v-good-soft); color: #145F35; }
.tag.submitted, .tag.under_review, .tag.payment_processing, .tag.info { background: var(--v-info-soft); color: #1D4FA8; }
.tag.returned, .tag.warn, .tag.high, .tag.on_hold { background: var(--v-warn-soft); color: #6E4600; }
.tag.rejected, .tag.bad, .tag.urgent, .tag.blocked { background: var(--v-bad-soft); color: #9B0F17; }
.tag.draft, .tag.cancelled, .tag.low, .tag.normal, .tag.inactive, .tag.closed, .tag.completed, .tag.planned { background: var(--v-card-3); color: var(--v-card-muted); }
.badge { background: var(--v-accent-strong); }
.alert { border-radius: var(--v-r-m); }
.alert.bad { color: #9B0F17; } .alert.info { color: #1D4FA8; }
.hbar .fill { background: var(--v-accent); }
.hbar .track, .status-bar { background: var(--v-card-3); }
.hbar .budget { background: var(--v-card-text); }
.file .prog { background: var(--v-accent); }
.file .pdf { background: var(--v-accent-soft); color: var(--v-accent-ink); }
.timeline .dot { background: var(--v-card); }
.empty svg { color: var(--v-faint); }
.modal { border-radius: var(--v-r-l); }
.modal-h h3 { font: 700 21px/1.2 var(--v-display); }
.scrim { background: rgba(10,10,12,.6); }
.toast { background: var(--v-card-text); border-radius: 14px; }
.tip { background: var(--v-card-text); }
.actions-sheet .ic { background: var(--v-accent-soft); color: var(--v-accent-ink); border-radius: 50%; }
.err-box { background: var(--v-bad-soft); color: #9B0F17; }
.ok-box { background: var(--v-good-soft); color: #145F35; }
.warn-box { background: var(--v-warn-soft); color: #6E4600; }
.fld > label, .fld > .lbl { color: var(--ink-2); }
.content .fld > label, .content .fld > .lbl { color: var(--v-muted); }
.card .fld > label, .card .fld > .lbl, .modal .fld > label, .modal .fld > .lbl { color: #2E3033; }
.qa-amount { border-color: transparent; border-radius: var(--v-r-l); }
.qa-step > .lbl { color: var(--v-muted); }
.suggest { color: var(--blue); }
.skel { background: linear-gradient(90deg, rgba(128,128,128,.18) 25%, rgba(128,128,128,.32) 50%, rgba(128,128,128,.18) 75%); background-size: 200% 100%; }

/* sign-in pages */
.auth { background: var(--v-bg); padding: 16px; gap: 16px; }
.auth-art { background: var(--v-panel); color: var(--v-text); border-radius: var(--v-r-xl); }
.auth-art h1 { font: 700 clamp(38px, 4.6vw, 64px)/1 var(--v-display); letter-spacing: -.02em; }
.auth-art h1 em { color: var(--v-accent); }
.auth-art p { color: var(--v-muted); }
.auth-art .flow span { border-color: var(--v-line); color: var(--v-text); }
.auth-art .small { color: var(--v-faint) !important; }
.auth-form { border-radius: var(--v-r-xl); color: var(--v-card-text); color-scheme: light; }
.auth-form h2 { font: 700 26px/1.2 var(--v-display); }

/* phones and tablets */
@media (max-width: 920px) {
  .shell { padding: 8px; gap: 0; grid-template-columns: 1fr; }
  .side { top: 0; height: 100vh; height: 100dvh; border-radius: 0 var(--v-r-xl) var(--v-r-xl) 0; }
  .side.open { box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); }
  .main { min-height: calc(100vh - 16px); border-radius: var(--v-r-l); }
  .topbar { padding: 10px 10px; border-radius: var(--v-r-l) var(--v-r-l) 0 0; }
  .content { padding: 14px 12px 110px; }
  .bottom-nav { background: var(--v-panel); border-top: 1px solid var(--v-line); }
  .bottom-nav a, .bottom-nav button { color: var(--v-muted); }
  .bottom-nav a.on { color: var(--v-accent); }
  :root[data-theme="light"] .bottom-nav a.on { color: var(--v-accent-ink); }
  .bottom-nav .plus { background: var(--v-accent-strong); box-shadow: 0 6px 16px rgba(196,81,26,.35); }
  .auth { padding: 0; } .auth-form { border-radius: 0; }
}
@media print { body { background: #fff; color: #000; } .main { background: #fff; } .shell { padding: 0; } .content { --ink: #000; --muted: #444; color: #000; } }

/* ---------- V12 home ---------- */
.v12-kpis.four { margin-bottom: 14px; }
@media (min-width: 1280px) { .v12-kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v12-kpi .val.light { color: #fff; }
.v12-kpi.hero { background: var(--v-accent-strong); color: #fff; --muted: #fff; }
.v12-kpi.hero .val, .v12-kpi.hero .unit { color: #fff; }
.v12-kpi.hero .ic { background: rgba(255,255,255,.2); color: #fff; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: 1fr; } }
.home-grid > .stack > * + * { margin-top: 16px; }
.d-cash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.d-cash > div { background: var(--v-card-2); border-radius: var(--v-r-m); padding: 12px 14px; }
.d-cash b { display: block; font: 700 20px/1.2 var(--v-display); font-stretch: 88%; }
.d-cash span { font-size: 12.5px; color: var(--muted); }
.d-cash .in-c b { color: var(--v-good); } .d-cash .out-c b { color: var(--v-accent-ink); }

/* project profit */
.pp-sum { margin-bottom: 18px; }
.pp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
@media (max-width: 420px) { .pp-list { grid-template-columns: 1fr; } }
.pp { display: flex; flex-direction: column; gap: 10px; text-decoration: none; padding: 18px 20px; }
a.pp:hover { text-decoration: none; }
.pp-h { display: flex; gap: 10px; align-items: flex-start; }
.pp-h b { font-size: 15px; font-weight: 600; display: block; }
.pp-h span { font-size: 12.5px; color: var(--muted); }
.pp-h .m { margin-left: auto; text-align: right; flex: none; }
.pp-h .m b { font: 700 22px/1.1 var(--v-display); font-stretch: 88%; }
.pp-h .m b.good { color: var(--v-good); } .pp-h .m b.bad { color: var(--v-bad); } .pp-h .m b.na { color: var(--muted); font-size: 15px; }
.pp-rows { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; font-size: 13px; }
.pp-rows .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.pp-rows .lbl { color: var(--muted); }
.pp-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line-2); padding-top: 10px; }
.bar-in > span { background: var(--v-good); } .bar-cost > span { background: var(--v-accent); } .bar-rec > span { background: #4F8A6B; }
.pp-note { font-size: 13px; color: var(--v-muted); margin-top: 14px; }
.home-grid > * { min-width: 0; }
.card { color: var(--ink) !important; }                  /* some cards carry an inline "color: inherit" */
.warn-box a, .ok-box a, .err-box a, .alert a { color: inherit; text-decoration: underline; }
.v12-kpi .val.long { font-size: 24px; }
@media (max-width: 600px) { .v12-kpi .val.long { font-size: 18px; } .v12-kpi .val { font-size: 22px; } }
@media (max-width: 560px) { .topbar .v12-findbtn { display: none; } }   /* phones: the search box is right there */
.chain .step { background: var(--v-card-3); color: var(--v-card-muted); }
.chain .step.done { background: var(--v-good-soft); color: #145F35; }
.chain .step.now { background: var(--v-info-soft); color: #1D4FA8; box-shadow: inset 0 0 0 1.5px #1D4FA8; }