/* ═══════════════════════════════════════════════════════════════════════════ POM — Design tokens & global primitives ───────────────────────────────────────────────────────────────────────── Scope: applied globally. Override via [data-theme], [data-accent], [data-density] on . Mud overrides at the bottom. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* surface */ --bg: oklch(97.8% 0.006 80); --surface: oklch(100% 0 0); --surface-2: oklch(98.5% 0.004 80); --surface-3: oklch(96.5% 0.005 80); --line-soft: oklch(92% 0.008 80); --line: oklch(86% 0.01 80); --line-strong: oklch(72% 0.012 70); /* ink */ --ink: oklch(22% 0.02 60); --ink-2: oklch(38% 0.018 60); --ink-3: oklch(54% 0.015 60); --ink-4: oklch(68% 0.012 70); --ink-5: oklch(80% 0.01 70); /* accent — navy default */ --accent: oklch(40% 0.08 240); --accent-soft: oklch(94% 0.022 240); --accent-ink: oklch(28% 0.07 240); /* status */ --ok: oklch(48% 0.09 155); --ok-soft: oklch(94% 0.04 155); --warn: oklch(60% 0.13 70); --warn-soft: oklch(95% 0.05 80); --danger: oklch(50% 0.16 28); --danger-soft: oklch(95% 0.04 28); --info: oklch(48% 0.09 240); --info-soft: oklch(94% 0.04 240); /* rail */ --rail-bg: oklch(98.5% 0.004 80); --rail-fg: oklch(28% 0.018 60); --rail-fg-mute: oklch(58% 0.012 70); --rail-border: oklch(90% 0.008 80); --rail-active-bg: oklch(95% 0.012 240); /* density */ --row-py: 14px; --cell-px: 16px; --table-fs: 13.5px; /* spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-10: 64px; /* radii */ --radius-sm: 6px; --radius: 8px; --radius-md: 10px; --radius-lg: 14px; /* type stacks */ --serif: "Newsreader", "Source Serif 4", Georgia, serif; --sans: "IBM Plex Sans", "Inter", system-ui, sans-serif; --mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; } [data-theme="dark"] { --bg: oklch(18% 0.012 60); --surface: oklch(22% 0.012 60); --surface-2: oklch(26% 0.012 60); --surface-3: oklch(30% 0.012 60); --line-soft: oklch(32% 0.012 60); --line: oklch(40% 0.014 60); --line-strong: oklch(50% 0.014 60); --ink: oklch(96% 0.01 80); --ink-2: oklch(86% 0.012 80); --ink-3: oklch(68% 0.012 70); --ink-4: oklch(54% 0.014 70); --ink-5: oklch(40% 0.014 70); --rail-bg: oklch(20% 0.012 60); --rail-fg: oklch(94% 0.012 80); --rail-fg-mute: oklch(62% 0.012 70); --rail-border: oklch(32% 0.012 60); --rail-active-bg: oklch(30% 0.04 240); } [data-accent="forest"] { --accent: oklch(38% 0.07 155); --accent-soft: oklch(94% 0.04 155); --accent-ink: oklch(26% 0.06 155); } [data-accent="rust"] { --accent: oklch(48% 0.12 35); --accent-soft: oklch(95% 0.04 35); --accent-ink: oklch(32% 0.10 35); } [data-accent="ink"] { --accent: oklch(28% 0.02 60); --accent-soft: oklch(92% 0.008 60); --accent-ink: oklch(20% 0.02 60); } [data-density="compact"] { --row-py: 10px; --cell-px: 14px; --table-fs: 13px; } [data-density="spacious"] { --row-py: 20px; --cell-px: 20px; --table-fs: 14px; } /* ─── Page-level baseline ───────────────────────────────────────────── */ body { font-family: var(--sans); color: var(--ink); background: var(--bg); } .font-serif { font-family: var(--serif); } .font-mono { font-family: var(--mono); } .tabular { font-variant-numeric: tabular-nums; } .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 460px; } .muted { color: var(--ink-4); } /* Focus ring (added to all interactive primitives) */ .focus-ring:focus-visible, button.focus-ring:focus-visible, a.focus-ring:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 1px; border-color: var(--accent) !important; } /* ─── PageHead ──────────────────────────────────────────────────────── */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); padding: var(--s-2) 0 var(--s-5); } .page-head .overline { font: 500 10.5px/1 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; } .page-head h1 { font: 400 32px/1.1 var(--serif); margin: 0; color: var(--ink); } .page-head .subhead { font: 400 13px/1.4 var(--sans); color: var(--ink-3); margin-top: 4px; } .page-head .actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } /* ─── SectionHead ───────────────────────────────────────────────────── */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin: var(--s-6) 0 var(--s-3); } .section-head h2 { font: 400 22px/1.15 var(--serif); color: var(--ink); margin: 0; } .section-head h2.accent { color: var(--accent-ink); } .section-head h3 { font: 500 15px/1.2 var(--sans); color: var(--ink-2); margin: 0; } .section-head .right { font: 500 12px/1 var(--sans); color: var(--ink-3); } /* ─── Card (the universal surface) ──────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); overflow: hidden; } .card-pad { padding: var(--s-4) var(--s-5); } .card + .card { margin-top: var(--s-4); } /* ─── Chip (status pill) ────────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; font: 500 11.5px/1.2 var(--sans); background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; } .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); } .chip.no-dot::before { display: none; } .chip.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in oklch, var(--ok) 25%, var(--line)); } .chip.ok::before { background: var(--ok); } .chip.new { background: var(--info-soft); color: var(--info); border-color: color-mix(in oklch, var(--info) 25%, var(--line)); } .chip.new::before { background: var(--info); } .chip.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in oklch, var(--warn) 25%, var(--line)); } .chip.warn::before { background: var(--warn); } .chip.danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 25%, var(--line)); } .chip.danger::before { background: var(--danger); } .chip.accent { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in oklch, var(--accent) 25%, var(--line)); } .chip.accent::before { background: var(--accent); } .chip.muted::before { background: var(--ink-4); } /* ─── KpiCard / KpiStrip ────────────────────────────────────────────── */ .kpi-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); overflow: hidden; } .kpi-strip .kpi { border-right: 1px solid var(--line-soft); } .kpi-strip .kpi:last-child { border-right: 0; } .kpi { padding: var(--s-4) var(--s-5); background: var(--surface); position: relative; } .kpi.standalone { border: 1px solid var(--line-soft); border-radius: var(--radius-md); } .kpi.accent { box-shadow: inset 3px 0 0 var(--accent); } .kpi.warn { box-shadow: inset 3px 0 0 var(--warn); } .kpi.ok { box-shadow: inset 3px 0 0 var(--ok); } .kpi .label { font: 500 10.5px/1 var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--s-2); } .kpi .value { font: 400 32px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; } .kpi.accent .value { color: var(--accent-ink); } .kpi.warn .value { color: var(--warn); } .kpi.ok .value { color: var(--ok); } .kpi .sub { font: 400 11.5px/1.3 var(--sans); color: var(--ink-3); margin-top: 4px; } .kpi .sub.warn { color: var(--warn); } /* ─── StatusCounter ─────────────────────────────────────────────────── */ .status-counter { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); min-width: 140px; } .status-counter .num { font: 400 22px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; } /* ─── Toolbar (filter card) ─────────────────────────────────────────── */ .toolbar { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: var(--s-3); flex-wrap: wrap; row-gap: 10px; } .toolbar .spacer { flex: 1 1 auto; } .toolbar .meta { font: 400 12px/1.4 var(--sans); color: var(--ink-3); white-space: nowrap; align-self: center; padding: 0 4px; } .toolbar .meta b { color: var(--ink); font-weight: 600; } .toolbar .vdiv { width: 1px; height: 24px; background: var(--line); margin: 0 2px; flex-shrink: 0; } .toolbar .label { font: 500 11px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); align-self: center; } .tb-field { position: relative; display: flex; align-items: center; } .tb-input, .tb-select { height: 36px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 7px; padding: 0 12px; font: 400 13.5px/1 var(--sans); width: 100%; } .tb-input:focus, .tb-select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .tb-input::placeholder { color: var(--ink-4); } .tb-search { position: relative; } .tb-search .icon { position: absolute; left: 10px; color: var(--ink-4); pointer-events: none; } .tb-search .tb-input { padding-left: 32px; } /* ─── SegChips (pill filter chips) ──────────────────────────────────── */ .seg-chips { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); } .seg-chips button { border: 0; background: transparent; color: var(--ink-2); padding: 5px 12px; border-radius: 999px; font: 500 12px/1.2 var(--sans); cursor: pointer; } .seg-chips button:hover { background: var(--surface-2); } .seg-chips button.active { background: var(--ink); color: var(--bg); } /* ─── DataTable ─────────────────────────────────────────────────────── */ .data-table-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); overflow: hidden; } .data-table-scroll { overflow-x: auto; max-width: 100%; } .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 var(--table-fs)/1.4 var(--sans); color: var(--ink-2); } .data-table th { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px var(--cell-px); text-align: left; font: 500 10.5px/1 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; } .data-table th.num { text-align: right; } .data-table th.sortable { cursor: pointer; user-select: none; } .data-table th.sortable:hover { color: var(--ink-2); } .data-table th.sortable::after { content: ""; display: inline-block; width: 0; margin-left: 4px; } .data-table th.sortable.asc::after { content: "▲"; font-size: 8px; vertical-align: 1px; color: var(--accent); } .data-table th.sortable.desc::after { content: "▼"; font-size: 8px; vertical-align: 1px; color: var(--accent); } .data-table td { padding: var(--row-py) var(--cell-px); border-bottom: 1px solid var(--line-soft); vertical-align: top; } .data-table td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; } .data-table tbody tr:hover td:not(.group-cell) { background: var(--surface-2); } .data-table .row-actions { display: inline-flex; gap: 4px; opacity: 0; transition: opacity 0.12s; } .data-table tbody tr:hover .row-actions { opacity: 1; } .data-table .mono { font-family: var(--mono); } .data-table .strong { color: var(--ink); font-weight: 500; } .data-table .sub { font: 400 11.5px/1.35 var(--sans); color: var(--ink-3); margin-top: 2px; } .data-table .dates { font: 500 12.5px/1.35 var(--mono); color: var(--ink); white-space: nowrap; } .data-table .currency-tag { font: 400 10.5px/1 var(--sans); color: var(--ink-4); text-transform: uppercase; margin-left: 6px; } /* Group rows */ .data-table tr.group-row td { position: sticky; top: 40px; z-index: 2; background: var(--surface-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px var(--cell-px); } .data-table .group-cell { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); } .data-table .group-name { font: 500 17px/1.2 var(--serif); color: var(--ink); } .data-table .group-loc { font: 500 12px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-left: 10px; } .data-table .group-meta { display: flex; gap: 0; font: 400 12px/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .data-table .group-meta > span { padding: 0 12px; border-right: 1px solid var(--line); } .data-table .group-meta > span:last-child { border-right: 0; padding-right: 0; } .data-table .group-meta > span:first-child { padding-left: 0; } .data-table .group-meta b { color: var(--ink); font-weight: 600; } /* Card footer strip under tables */ .data-table-foot { display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border-top: 1px solid var(--line); padding: var(--s-2) var(--s-4); font: 400 12px/1.4 var(--sans); color: var(--ink-3); } .data-table-foot .totals { display: flex; align-items: center; gap: var(--s-4); font-variant-numeric: tabular-nums; } .data-table-foot .totals b { color: var(--ink); font-weight: 600; } /* ─── EmptyState ────────────────────────────────────────────────────── */ .empty-state { padding: var(--s-8); text-align: center; color: var(--ink-3); font: 400 13px/1.5 var(--sans); } .empty-state .title { color: var(--ink-2); font-weight: 500; margin-bottom: 4px; } /* ─── TagImport (outlined accent metadata pill — NOT a chip) ───────── */ .tag-import { display: inline-flex; align-items: center; border: 1px solid var(--accent); color: var(--accent-ink); background: transparent; border-radius: 999px; font: 500 10px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 8px; white-space: nowrap; } /* ─── MetaGrid (read-only 4-col key/value layout) ──────────────────── */ .meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4) var(--s-5); } .meta-grid .cell { min-width: 0; } .meta-grid .cell.span-2 { grid-column: span 2; } .meta-grid .cell.span-3 { grid-column: span 3; } .meta-grid .cell.span-4 { grid-column: span 4; } .meta-grid .key { font: 500 10.5px/1 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; } .meta-grid .val { font: 400 13.5px/1.4 var(--sans); color: var(--ink); word-break: break-word; } .meta-grid .val.mono { font-family: var(--mono); } .meta-grid .val.muted { color: var(--ink-4); } .meta-grid .val a { color: var(--accent-ink); } @media (max-width: 900px) { .meta-grid { grid-template-columns: repeat(2, 1fr); } } /* ─── TabsLine (underlined sub-section tabs) ────────────────────────── */ .tabs-line { display: flex; gap: var(--s-2); border-bottom: 1px solid var(--line); padding: 0 var(--s-4); } .tabs-line button { background: transparent; border: 0; padding: 12px 10px; margin: 0; color: var(--ink-3); font: 500 13px/1 var(--sans); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs-line button:hover { color: var(--ink); } .tabs-line button.active { color: var(--accent-ink); border-bottom-color: var(--accent); } .tabs-line button .count-badge { font: 500 11px/1 var(--mono); color: var(--ink-3); background: var(--surface-2); border-radius: 999px; padding: 2px 6px; font-variant-numeric: tabular-nums; } .tabs-line button.active .count-badge { color: var(--accent-ink); background: var(--accent-soft); } .tabs-line-body { padding: var(--s-4) var(--s-5); } /* ─── PaymentSummary (3-cell totals strip) ─────────────────────────── */ .pay-summary { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); overflow: hidden; } .pay-summary .cell { padding: var(--s-3) var(--s-4); border-right: 1px solid var(--line-soft); } .pay-summary .cell:last-child { border-right: 0; } .pay-summary .key { font: 500 10.5px/1 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; } .pay-summary .val { font: 500 16px/1.1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; } .pay-summary .val.danger { color: var(--danger); } .pay-summary .val.ok { color: var(--ok); } /* ─── PaymentRow (expandable PTF card) ─────────────────────────────── */ .pay-row { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); margin-top: var(--s-2); overflow: hidden; } .pay-row .head { display: grid; grid-template-columns: 110px 1fr auto 110px 110px 130px 32px; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); cursor: pointer; } .pay-row .head:hover { background: var(--surface-2); } .pay-row .ptf-block { display: flex; flex-direction: column; gap: 2px; } .pay-row .ptf-block .key { font: 500 9.5px/1 var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-4); } .pay-row .ptf-block .num { font: 500 13.5px/1 var(--mono); color: var(--accent-ink); font-variant-numeric: tabular-nums; } .pay-row .trip { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .pay-row .trip .dash { color: var(--ink-4); } .pay-row .trip .name { font: 500 13.5px/1.3 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pay-row .money { display: flex; flex-direction: column; gap: 2px; text-align: right; } .pay-row .money .key { font: 500 9.5px/1 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4); } .pay-row .money .val { font: 500 13px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; } .pay-row .money .val.muted { color: var(--ink-4); } .pay-row .money .val.danger { color: var(--danger); font-weight: 600; } .pay-row .caret { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--ink-3); transition: transform 0.15s ease; } .pay-row.open .caret { transform: rotate(180deg); } .pay-row .body { border-top: 1px solid var(--line-soft); padding: var(--s-3) var(--s-4); background: var(--surface-2); } .pay-row .line { display: grid; grid-template-columns: 120px 1fr 120px; gap: var(--s-3); padding: 6px 0; border-bottom: 1px dashed var(--line-soft); font: 400 12.5px/1.4 var(--sans); color: var(--ink-2); } .pay-row .line:last-child { border-bottom: 0; } .pay-row .line .when { font-family: var(--mono); color: var(--ink-3); } .pay-row .line .amt { text-align: right; font-family: var(--mono); color: var(--ink); font-weight: 500; } @media (max-width: 880px) { .pay-row .head { grid-template-columns: auto 1fr 32px; grid-template-areas: "ptf trip caret" "money money money"; } .pay-row .ptf-block { grid-area: ptf; } .pay-row .trip { grid-area: trip; } .pay-row .caret { grid-area: caret; } .pay-row .money-wrap { grid-area: money; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: 6px; } .pay-row .money { text-align: left; } } /* ─── FX Summary band (two-pane: headline + per-currency table) ────── */ .fx-summary { display: grid; grid-template-columns: 200px 1fr; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); overflow: hidden; } .fx-summary-headline { padding: var(--s-5); border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; justify-content: center; } .fx-summary-headline .lbl { font: 500 10.5px/1 var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--s-2); } .fx-summary-headline .big-num { font: 400 42px/1 var(--serif); color: var(--accent-ink); font-variant-numeric: tabular-nums; } .fx-summary-headline .sub { font: 400 12px/1.3 var(--sans); color: var(--ink-3); margin-top: var(--s-2); } .fx-summary-table { width: 100%; border-collapse: collapse; font: 400 13px/1.4 var(--sans); color: var(--ink-2); } .fx-summary-table th { font: 500 10.5px/1 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4); padding: 10px var(--cell-px); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; } .fx-summary-table th.num { text-align: right; } .fx-summary-table td { padding: 8px var(--cell-px); border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .fx-summary-table td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink); } .fx-summary-table td.num.danger { color: var(--danger); } .fx-summary-table tbody tr:last-child td { border-bottom: 0; } .ccy-pill { display: inline-block; font: 500 11px/1 var(--mono); text-transform: uppercase; background: var(--surface-3); color: var(--ink-2); padding: 3px 8px; border-radius: 4px; letter-spacing: 0.04em; } .num-with-bar { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-variant-numeric: tabular-nums; } .num-with-bar .bar { width: 40px; height: 4px; border-radius: 2px; background: var(--line-soft); position: relative; overflow: hidden; } .num-with-bar .bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct, 0%); background: var(--accent); border-radius: 2px; } @media (max-width: 720px) { .fx-summary { grid-template-columns: 1fr; } .fx-summary-headline { border-right: 0; border-bottom: 1px solid var(--line-soft); } } /* ─── Sticky entity-detail header ──────────────────────────────────── */ .detail-header { position: sticky; top: 0; z-index: 5; background: var(--bg); display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0 var(--s-4); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s-4); } .detail-header .back { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 7px; cursor: pointer; } .detail-header .back:hover { background: var(--surface-2); color: var(--ink); } .detail-header .titles { flex: 1 1 auto; min-width: 0; } .detail-header .overline { font: 500 10.5px/1 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; } .detail-header h1 { font: 400 26px/1.15 var(--serif); color: var(--ink); margin: 0; display: flex; align-items: center; gap: 10px; } .detail-header .actions { display: flex; align-items: center; gap: var(--s-2); } /* ─── Invoice tag (dot + label) — kept for Reports backwards compat ── */ .inv-tag { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.2 var(--sans); color: var(--ink-2); white-space: nowrap; } .inv-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); } .inv-tag.ok::before { background: var(--ok); } .inv-tag.warn::before { background: var(--warn); } .inv-tag.accent::before { background: var(--accent); } .inv-tag.muted { color: var(--ink-4); } .inv-tag.muted::before { background: var(--ink-4); } /* ─── App shell grid ────────────────────────────────────────────────── */ .app-shell { display: grid; grid-template-columns: 232px 1fr; grid-template-rows: 100vh; overflow: hidden; } .app-shell.rail-collapsed { grid-template-columns: 64px 1fr; } .app-main { display: grid; grid-template-rows: 52px 1fr; overflow: hidden; } .app-content { overflow-y: auto; padding: var(--s-5) var(--s-6) var(--s-8); background: var(--bg); } /* ─── Rail (sidebar) ────────────────────────────────────────────────── */ .rail { background: var(--rail-bg); color: var(--rail-fg); border-right: 1px solid var(--rail-border); display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .rail .brand-bar { height: 52px; display: flex; align-items: center; padding: 0 var(--s-3); gap: var(--s-3); border-bottom: 1px solid var(--rail-border); } .rail .brand-mark { width: 26px; height: 26px; border-radius: 6px; background: var(--ink); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font: 500 13px/1 var(--serif); flex-shrink: 0; } .rail .brand-word { font: 500 14px/1 var(--sans); color: var(--rail-fg); letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail .nav-scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--s-3) var(--s-2); } .rail .nav-section-label { font: 500 10.5px/1 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--rail-fg-mute); padding: 12px 10px 6px; } .rail .nav-item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 7px; color: var(--rail-fg); text-decoration: none; font: 500 13px/1 var(--sans); cursor: pointer; margin: 1px 0; } .rail .nav-item:hover { background: var(--surface-2); } .rail .nav-item.active { background: var(--rail-active-bg); color: var(--accent-ink); box-shadow: 0 1px 0 var(--rail-border); } .rail .nav-item.active .icon { color: var(--accent); } .rail .nav-item .label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail .nav-item .count-badge { font: 500 11px/1 var(--mono); color: var(--ink-2); background: var(--surface-2); border-radius: 999px; padding: 2px 7px; font-variant-numeric: tabular-nums; } .rail .nav-divider { height: 1px; background: var(--rail-border); margin: var(--s-2) 6px; } .rail .foot { display: flex; align-items: center; gap: 10px; padding: var(--s-3) var(--s-3); border-top: 1px solid var(--rail-border); } .rail .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; font: 500 11px/1 var(--sans); flex-shrink: 0; } .rail .foot .info { flex: 1 1 auto; min-width: 0; } .rail .foot .name { font: 500 12px/1.2 var(--sans); color: var(--rail-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail .foot .org { font: 400 11px/1.2 var(--sans); color: var(--rail-fg-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail .icon-btn { width: 30px; height: 30px; border-radius: 7px; border: 0; background: transparent; color: var(--rail-fg-mute); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .rail .icon-btn:hover { background: var(--surface-2); color: var(--ink); } /* Rail collapsed state */ .rail-collapsed .rail { overflow: visible; } .rail-collapsed .rail .brand-word, .rail-collapsed .rail .nav-item .label, .rail-collapsed .rail .nav-item .count-badge, .rail-collapsed .rail .nav-section-label, .rail-collapsed .rail .foot .info { display: none; } .rail-collapsed .rail .brand-bar { justify-content: center; padding: 0; } .rail-collapsed .rail .nav-item { justify-content: center; padding: 0 0; width: 40px; margin: 1px auto; } .rail-collapsed .rail .foot { justify-content: center; gap: 0; padding: var(--s-2); flex-direction: column; } .rail-collapsed .rail .foot .icon-btn { margin-top: var(--s-1); } .rail-collapsed .rail .nav-scroll { padding: var(--s-3) var(--s-1); display: flex; flex-direction: column; align-items: center; } /* ─── TopBar ───────────────────────────────────────────────────────── */ .top-bar { display: flex; align-items: center; gap: var(--s-3); height: 52px; background: var(--surface); border-bottom: 1px solid var(--line-soft); padding: 0 var(--s-5); } .top-bar .search { display: flex; align-items: center; gap: 8px; height: 34px; width: 360px; max-width: 480px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 0 10px; color: var(--ink-2); } .top-bar .search input { border: 0; background: transparent; outline: none; flex: 1 1 auto; font: 400 13px/1 var(--sans); color: var(--ink); } .top-bar .search .kbd { font: 500 10px/1 var(--mono); color: var(--ink-4); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; background: var(--surface); } .top-bar .icon-btn { width: 32px; height: 32px; border-radius: 7px; border: 0; background: transparent; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .top-bar .icon-btn:hover { background: var(--surface-2); color: var(--ink); } .top-bar .spacer { flex: 1 1 auto; } .top-bar .user-email { font: 400 12px/1 var(--sans); color: var(--ink-3); } /* ─── Icon ──────────────────────────────────────────────────────────── */ .icon { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .icon-20 { width: 20px; height: 20px; } .icon-14 { width: 14px; height: 14px; } /* ─── Print banner ──────────────────────────────────────────────────── */ .print-banner { display: none; } @media print { .print-banner { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); border-bottom: 1px solid #888; padding-bottom: 8px; margin-bottom: var(--s-3); } .print-banner h2 { font: 400 24px/1.1 var(--serif); margin: 0; color: #1a1a1a; } .print-banner .sub { font: 400 11px/1.4 var(--sans); color: #555; margin-top: 4px; } .print-banner .brand { font: 500 12px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #555; } } /* ─── Print baseline (Reports tab overrides further) ────────────────── */ @media print { @page { size: A4 landscape; margin: 14mm; } .app-shell { display: block !important; grid-template-columns: none !important; } .rail, .top-bar { display: none !important; } .app-content > .toolbar, .app-content > .page-head .actions { display: none !important; } .app-content { overflow: visible !important; padding: 0 !important; background: white !important; } body { background: white !important; } /* Tables: drop sticky behavior, simplify borders */ .data-table th { position: static !important; background: white !important; border-bottom: 1px solid #888 !important; color: #333 !important; } .data-table td { border-bottom: 1px solid #ddd !important; } .data-table tr.group-row td { position: static !important; background: #f4f1ea !important; border-color: #999 !important; } .data-table tbody tr:hover td { background: transparent !important; } .data-table tr, .data-table tr.group-row { page-break-inside: avoid; } .data-table-scroll { overflow: visible !important; } .data-table { font-size: 11px !important; } .data-table th, .data-table td { padding: 8px 10px !important; } } /* ─── MudBlazor overrides ───────────────────────────────────────────── */ /* Flatten elevation across the app */ .mud-paper-elevation-1, .mud-paper-elevation-2, .mud-paper-elevation-3 { box-shadow: none !important; } /* Outlined inputs in toolbar / forms shrink to 36px */ .toolbar .mud-input-control, .field-input .mud-input-control { min-height: 36px !important; max-height: 36px; } .toolbar .mud-input-control .mud-input-outlined-border { border-radius: var(--radius); } .toolbar .mud-input-control-input-container { margin: 0 !important; padding: 0 !important; } .toolbar .mud-input { margin: 0 !important; } .toolbar .mud-input-slot { padding-top: 0 !important; padding-bottom: 0 !important; } .toolbar .mud-input-label { display: none; } .toolbar .mud-input-helper-text { display: none; } .toolbar .mud-select { min-height: 36px !important; max-height: 36px; } /* Buttons */ .btn-accent.mud-button-filled, .mud-button.btn-accent { background: var(--ink) !important; color: var(--bg) !important; border-radius: 7px; text-transform: none; font: 500 13px/1 var(--sans); padding: 8px 14px; box-shadow: none; } .btn-accent.mud-button:hover { background: var(--ink-2) !important; box-shadow: none; } .btn-ghost.mud-button { background: transparent !important; color: var(--ink-2) !important; border: 1px solid var(--line) !important; border-radius: 7px; text-transform: none; font: 500 13px/1 var(--sans); padding: 7px 12px; box-shadow: none; } .btn-ghost.mud-button:hover { background: var(--surface-2) !important; } /* ── Month calendar (CalendarMonth.razor) ───────────────────────────────── */ .cal { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); position: relative; } .cal-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line-soft); } .cal-title { font: 600 15px/1 var(--sans); color: var(--ink); min-width: 150px; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .cal-dow-cell { padding: 6px 8px; font: 600 11px/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-soft); text-align: left; } .cal-cell { position: relative; min-width: 0; min-height: 96px; padding: 4px 5px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 3px; } .cal-cell:nth-child(7n) { border-right: 0; } .cal-cell.out { background: var(--surface-2); } .cal-cell.out .cal-daynum { color: var(--ink-4); } .cal-cell.today { background: var(--accent-soft); } .cal-daynum { font: 500 12px/1 var(--mono); color: var(--ink-2); padding: 2px; } .cal-cell.today .cal-daynum { color: var(--accent-ink); font-weight: 700; } .cal-events { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cal-ev { display: block; width: 100%; max-width: 100%; box-sizing: border-box; text-align: left; border: 1px solid transparent; border-radius: 5px; padding: 3px 6px; cursor: pointer; font: 500 11.5px/1.3 var(--sans); white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .cal-ev:hover { filter: brightness(0.97); } .cal-ev-title { display: block; } .cal-ev-sub { display: block; font-weight: 400; font-size: 10.5px; opacity: 0.8; } .cal-more { font: 500 10.5px/1 var(--sans); color: var(--accent-ink); padding: 2px 6px; background: none; border: 0; cursor: pointer; text-align: left; border-radius: 4px; } .cal-more:hover { background: var(--surface-3); } .cal-ev.tone-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in oklch, var(--accent) 25%, var(--line)); } .cal-ev.tone-ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in oklch, var(--ok) 25%, var(--line)); } .cal-ev.tone-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in oklch, var(--warn) 25%, var(--line)); } .cal-ev.tone-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 25%, var(--line)); } .cal-ev.tone-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in oklch, var(--info) 25%, var(--line)); } .cal-ev.tone-muted { background: var(--surface-3); color: var(--ink-3); border-color: var(--line); } .cal-ev.tone-default { background: var(--surface-3); color: var(--ink-2); border-color: var(--line); } /* Week + day-of-week numbers */ .cal-dow-cell.today { color: var(--accent-ink); } .cal-dow-num { font: 600 12px/1 var(--mono); } .cal-week { min-height: 420px; } .cal-wcell { position: relative; min-width: 0; padding: 6px 5px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 3px; overflow: hidden auto; } .cal-wcell:nth-child(7n) { border-right: 0; } .cal-wcell.today { background: var(--accent-soft); } /* Day view */ .cal-day { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); } .cal-day-empty { color: var(--ink-3); font: 400 14px/1.4 var(--sans); padding: var(--s-3) 0; } .cal-dayrow { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 1px solid transparent; border-radius: 8px; padding: 10px 12px; cursor: pointer; font: 500 14px/1.3 var(--sans); } .cal-dayrow:hover { filter: brightness(0.97); } .cal-dayrow-title { font-weight: 500; } .cal-dayrow-sub { font-weight: 400; font-size: 12.5px; opacity: 0.85; } .cal-dayrow.tone-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in oklch, var(--accent) 25%, var(--line)); } .cal-dayrow.tone-ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in oklch, var(--ok) 25%, var(--line)); } .cal-dayrow.tone-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in oklch, var(--warn) 25%, var(--line)); } .cal-dayrow.tone-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 25%, var(--line)); } .cal-dayrow.tone-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in oklch, var(--info) 25%, var(--line)); } .cal-dayrow.tone-muted { background: var(--surface-3); color: var(--ink-3); border-color: var(--line); } .cal-dayrow.tone-default { background: var(--surface-3); color: var(--ink-2); border-color: var(--line); } /* Overflow popover (month view) */ .cal-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; border: 0; } .cal-pop { position: absolute; top: 0; left: 0; min-width: 230px; max-width: 300px; z-index: 50; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.16); padding: 8px; } .cal-pop-head { display: flex; align-items: center; justify-content: space-between; font: 600 12px/1 var(--sans); color: var(--ink); padding: 2px 4px 8px; } .cal-pop-x { background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink-3); padding: 0 4px; } .cal-pop-x:hover { color: var(--ink); } .cal-pop-body { display: flex; flex-direction: column; gap: 3px; max-height: 280px; overflow-y: auto; }