/**
* theme.css — Mulai Design System (extracted)
*
* Source of truth: assets/vtm_2.css from the Mulai platform (pkanns/vtm).
* This file pulls out ONLY the genuinely cross-page, reusable pieces —
* tokens, punch-strip, punch-card, register-grid, toggle-pair,
* budget-table, vtm-picker-card, status-pill, gaction menu, toast — plus
* a small set of new "fin-" prefixed components modeled on those same
* patterns for budgets / expenses / incentives / ledgers, so a new
* financial project can start from the same visual language instead of
* reinventing it.
*
* Nothing page-specific (forms, page layout, login hero, etc.) is
* included — that belongs to each new page, same convention vtm_2.css
* itself uses.
*
* Usage:
* Fonts (link in , do not @import):
* https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Special+Elite&family=DM+Mono:wght@400;500&display=swap
*/
/* ── RESET ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── PALETTE + TYPE TOKENS ─────────────────────────────────────────── */
:root {
--black: #2b2016; /* cocoa ink */
--white: #f4ecd8; /* parchment card */
--red: #b5201a; /* reserved for true alerts/errors — not the brand accent */
--red-dark: #7a1512;
--accent: #8a4a2c; /* rust/hide brown — the farm brand accent, replaces --red in buttons/branding */
--accent-dark: #5c3b20;
--green: #4a5d3a; /* moss */
--charcoal: #6d5233; /* aged wood */
--stone: #7a6d55; /* weathered wood/grey-brown */
--light: #ece3c8; /* card2 */
--hole: #d8cba8; /* straw tan border */
--font-display: 'Bebas Neue', sans-serif;
--font-body: 'Courier Prime', monospace;
--font-mono: 'DM Mono', monospace;
/* Financial-only additions — debit/credit keep the alert-red / moss-green
convention so overdue-vs-on-track reads the same everywhere. */
--debit: var(--red);
--credit: var(--green);
}
body {
font-family: var(--font-body);
background: var(--light);
color: var(--black);
font-size: 15px;
line-height: 1.7;
min-height: 100vh;
letter-spacing: 0.01em;
}
a { color: inherit; }
/* ── TOAST NOTIFICATION ────────────────────────────────────────────── */
.vtm-toast {
position: fixed; bottom: 24px; left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--black); color: var(--white);
padding: 12px 28px; border-radius: 40px; font-size: 13px;
font-family: var(--font-body); letter-spacing: 0.04em;
z-index: 2000; opacity: 0;
transition: transform 0.25s ease, opacity 0.25s ease;
pointer-events: none; white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.vtm-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.vtm-toast--err { background: var(--red); }
.vtm-toast--ok { background: var(--green); }
/* ── FARM STRIP (static fence-and-silo header band) ────────────────────
Replaces the old animated punch-hole strip. The SVG itself (built by
theme.js's buildPunchStrip — name kept for drop-in compatibility) draws
its own top/bottom border rules and uses var(--...) fills, so recoloring
the palette above retints the strip automatically. Static — no motion. */
.punch-strip { line-height: 0; background: var(--light); }
.punch-strip svg { display: block; width: 100%; height: auto; }
/* ── PUNCH CARD (register card — bordered box + black identity header) ─ */
.punch-card { border: 2px solid var(--black); background: var(--white); margin-bottom: 24px; border-radius: 5px; overflow: hidden; }
.punch-card-header { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--black); }
.punch-card-header .pc-field { padding: 10px 16px; border-right: 1px solid rgba(247,246,242,0.1); }
.punch-card-header .pc-field:last-child { border-right: none; }
.pc-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247,246,242,0.35); margin-bottom: 4px; }
.pc-val { font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--white); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-val.typed { font-family: 'Special Elite', cursive; font-weight: 400; }
.pc-val.red { color: #e8a49c; }
.pc-val.green { color: #8fc4a3; }
.punch-card-body { padding: 24px 28px; }
.entry-card-header { display: flex; background: var(--black); align-items: center; justify-content: space-between; padding: 10px 20px; flex-wrap: wrap; gap: 16px; }
.entry-card-header .pc-field { padding: 0; border-right: none; }
/* ── REGISTER GRID (bordered row of labeled cells inside a card) ──────
Cross-page workhorse — used for gig meta strips today; reuse directly
for ledger line summaries, incentive breakdowns, budget vs actual. ── */
.register-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); border-top: 2px solid var(--black); }
.register-cell { border-right: 1px solid var(--light); border-bottom: 2px solid var(--black); padding: 14px 18px; position: relative; }
.register-cell:last-child { border-right: none; }
.register-cell-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); margin-bottom: 6px; }
.register-cell-val { font-family: 'Special Elite', cursive; font-size: 15px; color: var(--black); }
.register-cell-val.red { color: var(--red); }
.register-cell-val.green { color: var(--green); }
.register-cell-val.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
/* ── TOGGLE PAIR (2-up radio pills) ────────────────────────────────── */
.toggle-group { display: flex; flex-direction: column; gap: 6px; }
.toggle-group-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); font-weight: 500; font-family: var(--font-mono); }
.toggle-pair { display: flex; border: 1px solid var(--hole); overflow: hidden; border-radius: 4px; }
.toggle-pair input[type="radio"] { display: none; }
.toggle-pair label { flex: 1; text-align: center; padding: 8px 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; cursor: pointer; background: var(--light); color: var(--stone); transition: background 0.2s, color 0.2s; border-right: 1px solid var(--hole); user-select: none; font-family: var(--font-body); }
.toggle-pair label:last-of-type { border-right: none; }
.toggle-pair input[type="radio"]:checked + label { background: var(--black); color: var(--white); }
/* ── BUDGET TABLE (editable line-item table) ───────────────────────── */
.budget-table { width: 100%; border-collapse: collapse; background: var(--white); margin: 16px 0; }
.budget-table th { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 12px; background: var(--charcoal); color: var(--white); text-align: left; font-family: var(--font-mono); }
.budget-table td { padding: 10px 12px; border-bottom: 1px solid var(--light); }
.budget-table input, .budget-table select { width: 100%; background: var(--light); border: none; border-bottom: 1px solid var(--hole); padding: 6px 8px; font-family: var(--font-body); font-size: 13px; }
.budget-total-row { background: var(--light); font-weight: 600; }
.del-btn { background: none; border: 1px solid var(--stone); color: var(--stone); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; transition: all 0.2s; }
.del-btn:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.add-row-btn { background: var(--accent); color: var(--white); border: none; padding: 6px 14px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; margin: 8px 0; font-family: var(--font-body); border-radius: 3px; }
/* ── HEADER (shared chrome — brand + nav) ──────────────────────────── */
.vtm-header { background: var(--black); border-bottom: 3px solid var(--accent); position: sticky; top: 0; z-index: 100; }
.vtm-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 56px; max-width: 1200px; margin: 0 auto; }
.vtm-brand { font-family: var(--font-display); font-size: 22px; color: var(--white); text-decoration: none; letter-spacing: 0.12em; flex-shrink: 0; }
.vtm-brand .sep { color: var(--red); }
.vtm-nav { display: flex; align-items: center; gap: 4px; }
.vtm-nav a { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247,246,242,0.45); text-decoration: none; padding: 6px 12px; transition: color 0.15s, background 0.15s; font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.vtm-nav a:hover { color: var(--white); }
.vtm-nav a.active { color: var(--white); background: rgba(247,246,242,0.08); }
.vtm-header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.vtm-role-pill { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; font-weight: 600; font-family: var(--font-mono); border-radius: 3px; }
.vtm-role-pill.role-admin { background: rgba(247,246,242,0.15); color: var(--white); }
.vtm-role-pill.role-pacer { background: var(--accent); color: var(--white); }
.vtm-role-pill.role-rover { background: var(--green); color: var(--white); }
/* ── STATUS PILL SYSTEM (pipeline states) ──────────────────────────── */
.status-pill { display: inline-block; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; font-weight: 600; border-radius: 3px; }
.status-pill.placed { background: #e8eef5; color: #2a5a8a; }
.status-pill.matched { background: #f5eef8; color: #7b3fa0; }
.status-pill.aligned { background: #fdf5e0; color: #8a6200; }
.status-pill.in_progress { background: #fceee8; color: var(--red); }
.status-pill.delivered { background: #e8f5ee; color: var(--green); }
.status-pill.completed { background: var(--light); color: var(--stone); }
/* Financial equivalents — same visual grammar, new labels */
.status-pill.draft { background: #e8eef5; color: #2a5a8a; }
.status-pill.pending { background: #fdf5e0; color: #8a6200; }
.status-pill.posted { background: #e8f5ee; color: var(--green); }
.status-pill.reconciled { background: var(--light); color: var(--stone); }
.status-pill.flagged { background: #fceee8; color: var(--red); }
/* ── PICKER CARD (choose one of several — gig/project/account picker) ─ */
.vtm-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.vtm-picker-card { background: var(--white); border: 1px solid var(--hole); border-top: 4px solid var(--stone); padding: 16px 18px; cursor: pointer; transition: all 0.15s; position: relative; border-radius: 5px; }
.vtm-picker-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
.vtm-picker-code { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.vtm-picker-code::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.vtm-picker-title { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.02em; color: var(--black); line-height: 1.15; margin-bottom: 10px; }
.vtm-picker-meta { display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--stone); border-top: 1px solid var(--light); padding-top: 8px; }
.vtm-picker-card.status-placed .vtm-picker-code, .vtm-picker-card.status-draft .vtm-picker-code { color: #2a5a8a; }
.vtm-picker-card.status-pending .vtm-picker-code { color: #8a6200; }
.vtm-picker-card.status-posted .vtm-picker-code, .vtm-picker-card.status-delivered .vtm-picker-code { color: var(--green); }
.vtm-picker-card.status-flagged .vtm-picker-code, .vtm-picker-card.status-in_progress .vtm-picker-code { color: var(--red); }
/* ── ACTIONS MENU ("⋯") ────────────────────────────────────────────── */
.gaction-wrap { position: relative; display: inline-block; }
.gaction-trigger { background: var(--white); border: 1px solid var(--hole); color: var(--stone); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; transition: all 0.15s; }
.gaction-trigger:hover { border-color: var(--charcoal); color: var(--black); }
.gaction-menu { display: none; flex-direction: column; position: absolute; top: 32px; right: 0; background: var(--white); border: 1px solid var(--hole); box-shadow: 0 6px 18px rgba(0,0,0,0.12); min-width: 170px; z-index: 50; }
.gaction-menu.open { display: flex; }
.gaction-item { background: none; border: none; text-align: left; padding: 9px 14px; font-family: var(--font-body); font-size: 12.5px; color: var(--charcoal); cursor: pointer; border-bottom: 1px solid var(--light); transition: background 0.15s; white-space: nowrap; }
.gaction-item:last-child { border-bottom: none; }
.gaction-item:hover { background: var(--light); }
.gaction-item.danger { color: var(--red); }
.gaction-item.danger:hover { background: #fceee8; }
/* ── FINAL/SCORE BLOCK (dark summary strip — gig_eval's final score) ──
Reused as-is for an incentive payout summary or a GL period-close
summary — same "the number that matters" treatment. ────────────── */
.final-block { background: var(--black); padding: 26px 32px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.final-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240,234,216,0.4); }
.final-sub { font-size: 11px; color: rgba(240,234,216,0.3); font-family: var(--font-mono); margin-top: 4px; }
.final-value { font-family: var(--font-display); font-size: 2.4rem; color: var(--white); display: flex; align-items: center; }
.final-value.red { color: #e0b49a; }
.final-value.green { color: #b7cca4; }
/* ══════════════════════════════════════════════════════════════════
FIN-* COMPONENTS — new, modeled on the patterns above, for budgets /
expenses / incentives / sub-ledger / GL. Not lifted from Mulai (those
don't exist there yet) but deliberately built with the same grammar:
punch-card wrapper, black header strip, mono labels, red=unfavorable/
debit, green=favorable/credit, status-pill vocabulary reused.
══════════════════════════════════════════════════════════════════ */
/* Ledger table — budget-table's look, with a signed debit/credit pair
of columns instead of a single amount column. */
.fin-ledger-table { width: 100%; border-collapse: collapse; background: var(--white); }
.fin-ledger-table thead tr { background: var(--black); color: var(--white); }
.fin-ledger-table th { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; padding: 10px 12px; text-align: left; font-family: var(--font-mono); }
.fin-ledger-table th.num, .fin-ledger-table td.num { text-align: right; }
.fin-ledger-table td { padding: 10px 12px; border-bottom: 1px solid var(--light); font-size: 13px; }
.fin-ledger-table td.debit { color: var(--debit); font-weight: 700; font-family: var(--font-mono); }
.fin-ledger-table td.credit { color: var(--credit); font-weight: 700; font-family: var(--font-mono); }
.fin-ledger-table tr.fin-total-row td { background: var(--light); font-weight: 700; border-top: 2px solid var(--black); }
.fin-account-code { font-family: var(--font-mono); font-size: 10px; color: var(--stone); }
/* Incentive gauge — a thin bar showing eval-score-driven payout position */
.fin-gauge { height: 8px; background: var(--light); border-radius: 4px; overflow: hidden; border: 1px solid var(--hole); }
.fin-gauge-fill { height: 100%; background: var(--green); transition: width 0.3s ease; }
.fin-gauge-fill.warn { background: #c99a2e; }
.fin-gauge-fill.bad { background: var(--red); }
/* Variance chip — over/under budget, favorable/unfavorable */
.fin-variance { font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 2px; }
.fin-variance.favorable { background: #e8f5ee; color: var(--green); }
.fin-variance.unfavorable { background: #fceee8; color: var(--red); }
.fin-variance.flat { background: var(--light); color: var(--stone); }
/* Dimension/master-table reference card — small, for showing a lookup
table's key columns at a glance (see data_model.html) */
.fin-dim-card { background: var(--white); border: 1px solid var(--hole); border-left: 4px solid var(--charcoal); padding: 14px 18px; border-radius: 4px; }
.fin-dim-card.impact { border-left-color: var(--accent); }
.fin-dim-name { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.02em; color: var(--black); margin-bottom: 4px; }
.fin-dim-source { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); margin-bottom: 8px; }
.fin-dim-fields { font-family: var(--font-mono); font-size: 11px; color: var(--charcoal); line-height: 1.8; }
.fin-dim-fields .fkey { color: var(--red); font-weight: 700; }
/* ── BALANCE SHEET SNAPSHOT (Assets | Liabilities: Equity + Debt) ─────
Every account belongs to exactly one of the three sections. Two
mirrored 4-column blocks (Account/Description/Debit/Credit) side by
side; the right block's header splits into Equity then Debt via a
full-width band row, same visual grammar as the original paper
template this was modeled on. ─────────────────────────────────────── */
.fin-balance-table { width: 100%; border-collapse: collapse; background: var(--white); border: 2px solid var(--black); }
.fin-balance-table th, .fin-balance-table td { border: 1px solid var(--hole); padding: 8px 10px; font-size: 12px; }
.fin-balance-table thead th.fin-bal-top { background: var(--black); color: var(--white); font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.04em; text-align: center; padding: 10px; border-color: var(--black); }
.fin-balance-table thead th.fin-bal-band { background: var(--charcoal); color: var(--white); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; padding: 7px; border-color: var(--black); }
.fin-balance-table thead th.fin-bal-col { background: var(--light); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); text-align: left; }
.fin-balance-table thead th.fin-bal-col.num, .fin-balance-table td.num { text-align: right; }
.fin-balance-table tbody td.acct { font-family: var(--font-mono); font-size: 10px; color: var(--stone); white-space: nowrap; }
.fin-balance-table tbody td.desc { font-family: var(--font-body); font-size: 12px; color: var(--black); }
.fin-balance-table tbody td.num { font-family: var(--font-mono); }
.fin-balance-table tbody tr.fin-bal-total td { background: var(--light); font-weight: 700; border-top: 2px solid var(--black); }
.fin-balance-table tbody tr.fin-bal-empty td { height: 26px; }
.fin-balance-check { display: flex; justify-content: space-between; align-items: center; background: var(--black); color: var(--white); padding: 12px 20px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
.fin-balance-check .ok { color: #b7cca4; font-weight: 700; }
.fin-balance-check .bad { color: #e0b49a; font-weight: 700; }
/* ── UTILITY ────────────────────────────────────────────────────────── */
.fin-section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); margin-bottom: 8px; }
.fin-section-h { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: 0.03em; color: var(--black); line-height: 1; margin-bottom: 20px; }
.fin-page-wrap { max-width: 1100px; margin: 0 auto; padding: 40px 24px 80px; }
.fin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .fin-grid-2 { grid-template-columns: 1fr; } .vtm-nav, .vtm-header-right { display: none; } }
/* ══════════════════════════════════════════════════════════════════
FARM MARKERS — quiet symbolism for section labels and empty states.
Deliberately NOT applied to borders or buttons — those stay clean, per
design direction. Built with CSS mask so they recolor automatically
with --accent/--stone the same way every other component does; change
the token, the icon follows. Usage: right before a label's text.
══════════════════════════════════════════════════════════════════ */
.fin-marker {
display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
margin-right: 6px; background-color: var(--accent);
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
}
.fin-marker-silo {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='7' y='10' width='10' height='13' rx='1'/%3E%3Cpath d='M7 10a5 5 0 0 1 10 0z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='7' y='10' width='10' height='13' rx='1'/%3E%3Cpath d='M7 10a5 5 0 0 1 10 0z'/%3E%3C/svg%3E");
}
.fin-marker-boulder {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cellipse cx='12' cy='15' rx='9' ry='6'/%3E%3Cellipse cx='7.5' cy='11' rx='4' ry='3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cellipse cx='12' cy='15' rx='9' ry='6'/%3E%3Cellipse cx='7.5' cy='11' rx='4' ry='3'/%3E%3C/svg%3E");
}
.fin-marker-fence {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='6' width='3' height='14'/%3E%3Crect x='11' y='4' width='3' height='16'/%3E%3Crect x='19' y='6' width='3' height='14'/%3E%3Crect x='2' y='9' width='20' height='2'/%3E%3Crect x='2' y='14' width='20' height='2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='6' width='3' height='14'/%3E%3Crect x='11' y='4' width='3' height='16'/%3E%3Crect x='19' y='6' width='3' height='14'/%3E%3Crect x='2' y='9' width='20' height='2'/%3E%3Crect x='2' y='14' width='20' height='2'/%3E%3C/svg%3E");
}
.fin-marker.muted { background-color: var(--stone); opacity: 0.55; }
/* Empty state — pairs with theme.js's emptyStateHtml() helper. Replaces
plain "no rows yet" text with a quiet boulder mark, same restraint as
the header strip: present, not decorative. */
.fin-empty-state { text-align: center; padding: 32px 0; color: var(--stone); font-size: 13px; }
.fin-empty-state .fin-marker { margin-right: 8px; }