/* ========================================================================== Expense Management System (EMS) - shared stylesheet Enterprise line-of-business UI: flat, dense, bordered. No shadows, no rounded corners, no web fonts. Optimized to paint fast. ========================================================================== */ :root { --color-titlebar-bg: #2c5b8a; --color-titlebar-text: #ffffff; --color-titlebar-meta: #cfe0f2; --color-toolbar-bg: #eef1f4; --color-toolbar-border: #b7bec7; --color-btn-bg: #f6f7f8; --color-btn-border: #9aa3ad; --color-btn-hover-bg: #e2e8ee; --color-btn-active-bg: #d3dbe3; --color-btn-primary-border: #1f4066; --color-btn-primary-bg: #dce8f5; --color-btn-primary-hover-bg: #cfe0f2; --color-btn-danger-hover-bg: #eb9797; --color-header-bg: #d7e1ec; --color-header-text: #17324d; --color-row: #ffffff; --color-row-alt: #eaf2fb; --color-row-hover: #cfe4f7; --color-row-alt-muted: #f2f2f2; --color-row-hover-muted: #e3e3e3; --color-border: #c7ccd1; --color-border-strong: #8d97a2; --color-border-subtle: #dde1e5; --color-link: #14509c; --color-link-hover: #0a3a75; --color-text: #1b1f23; --color-text-muted: #4b5563; --color-page-bg: #dde3e9; --color-bar-track: #e2e6ea; --color-input-bg: #ffffff; --status-approved-bg: #a8d98d; --status-approved-text: #24501a; --status-pending-bg: #f5df8d; --status-pending-text: #6b5410; --status-rejected-bg: #f3a6a6; --status-rejected-text: #7a1f1f; --status-reimbursed-bg: #aac7e8; --status-reimbursed-text: #1a3a63; --font-sans: Tahoma, Verdana, Geneva, Arial, sans-serif; /* Money/numeric values render in --font-sans too (see .col-amount etc.) — tabular-nums keeps digits aligned in columns. --font-mono is kept only for the app-lock PIN display, where fixed-width dots need even spacing. */ --font-mono: "Consolas", "Menlo", "Courier New", monospace; --col-id-w: 95px; --col-receipt-w: 65px; --col-employee-w: 150px; /* Upper bound for free-text cells (Description, Note) — see .cell-clip. Sized so that BOTH can sit at their cap and the 8-column Transactions table still fits a 1280px window (2 x 232px + the six sized columns = 1068px, just inside the 1075px content area). At 280px it overflowed by 116px and put Amount back off-screen, which was the whole bug. */ --cell-clip-max-w: 220px; } /* Dark mode follows the OS/browser preference automatically UNLESS the user has explicitly overridden it in Settings (js/api.js writes data-theme="light"/"dark" onto from localStorage; a tiny inline script in does it again pre-paint to avoid a flash). The :not([data-theme="light"]) guard lets an explicit "Light" choice win even when the OS itself is in dark mode. Every component below reads these tokens rather than hardcoded colors, so these blocks are the entire dark theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-toolbar-bg: #22262b; --color-toolbar-border: #454c54; --color-btn-bg: #2b3036; --color-btn-border: #5a626b; --color-btn-hover-bg: #363c44; --color-btn-active-bg: #454c54; --color-btn-primary-border: #5c8fc4; --color-btn-primary-bg: #24374a; --color-btn-primary-hover-bg: #2c4258; --color-btn-danger-hover-bg: #c97a7a; --color-header-bg: #263849; --color-header-text: #bcd6ec; --color-row: #1a1e22; --color-row-alt: #20262c; --color-row-hover: #2a3d4f; --color-row-alt-muted: #25282d; --color-row-hover-muted: #33373d; --color-border: #3c434b; --color-border-strong: #5a626b; --color-border-subtle: #33393f; --color-link: #6fa8dc; --color-link-hover: #8cbfe8; --color-text: #d7dbe0; --color-text-muted: #98a1ab; --color-page-bg: #101316; --color-bar-track: #2b3036; --color-input-bg: #20262c; } } /* Explicit "Dark" override — same values as above, but unconditional so it also applies when the OS itself is in light mode. */ :root[data-theme="dark"] { --color-toolbar-bg: #22262b; --color-toolbar-border: #454c54; --color-btn-bg: #2b3036; --color-btn-border: #5a626b; --color-btn-hover-bg: #363c44; --color-btn-active-bg: #454c54; --color-btn-primary-border: #5c8fc4; --color-btn-primary-bg: #24374a; --color-btn-primary-hover-bg: #2c4258; --color-btn-danger-hover-bg: #c97a7a; --color-header-bg: #263849; --color-header-text: #bcd6ec; --color-row: #1a1e22; --color-row-alt: #20262c; --color-row-hover: #2a3d4f; --color-row-alt-muted: #25282d; --color-row-hover-muted: #33373d; --color-border: #3c434b; --color-border-strong: #5a626b; --color-border-subtle: #33393f; --color-link: #6fa8dc; --color-link-hover: #8cbfe8; --color-text: #d7dbe0; --color-text-muted: #98a1ab; --color-page-bg: #101316; --color-bar-track: #2b3036; --color-input-bg: #20262c; } /* ========================================================================== Color themes — swap the accent hue used for the titlebar, links, primary buttons and table headers. "Classic Navy" is the default :root palette above, so it needs no override block. Each theme carries its own light- and dark-mode accent variant, layered on top of (not replacing) the light/dark tokens above. ========================================================================== */ :root[data-color-theme="steel-gray"] { --color-titlebar-bg: #55606c; --color-titlebar-meta: #dde2e7; --color-link: #3d4854; --color-link-hover: #29323c; --color-btn-primary-border: #3d4854; --color-btn-primary-bg: #e2e5e9; --color-btn-primary-hover-bg: #d3d8dd; --color-header-bg: #dde1e6; --color-header-text: #2b333c; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-color-theme="steel-gray"] { --color-link: #9aa7b5; --color-link-hover: #b7c2cd; --color-btn-primary-border: #7c8794; --color-btn-primary-bg: #2c333a; --color-btn-primary-hover-bg: #363e46; --color-header-bg: #2c333c; --color-header-text: #b9c3cc; } } :root[data-theme="dark"][data-color-theme="steel-gray"] { --color-link: #9aa7b5; --color-link-hover: #b7c2cd; --color-btn-primary-border: #7c8794; --color-btn-primary-bg: #2c333a; --color-btn-primary-hover-bg: #363e46; --color-header-bg: #2c333c; --color-header-text: #b9c3cc; } :root[data-color-theme="forest-green"] { --color-titlebar-bg: #3f8f4f; --color-titlebar-meta: #d9f0dd; --color-link: #256a34; --color-link-hover: #184b23; --color-btn-primary-border: #256a34; --color-btn-primary-bg: #dcf0e0; --color-btn-primary-hover-bg: #c9e6cf; --color-header-bg: #d7ecdb; --color-header-text: #1c4d27; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-color-theme="forest-green"] { --color-link: #7fc98d; --color-link-hover: #9edaa9; --color-btn-primary-border: #4f9a5f; --color-btn-primary-bg: #1e3324; --color-btn-primary-hover-bg: #26402d; --color-header-bg: #1f3526; --color-header-text: #a9dab2; } } :root[data-theme="dark"][data-color-theme="forest-green"] { --color-link: #7fc98d; --color-link-hover: #9edaa9; --color-btn-primary-border: #4f9a5f; --color-btn-primary-bg: #1e3324; --color-btn-primary-hover-bg: #26402d; --color-header-bg: #1f3526; --color-header-text: #a9dab2; } :root[data-color-theme="slate-purple"] { --color-titlebar-bg: #7a5ca8; --color-titlebar-meta: #e9e0f2; --color-link: #5c4180; --color-link-hover: #402c5c; --color-btn-primary-border: #5c4180; --color-btn-primary-bg: #e9e1f2; --color-btn-primary-hover-bg: #dccdea; --color-header-bg: #e6ddf0; --color-header-text: #402c5c; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-color-theme="slate-purple"] { --color-link: #b79cd9; --color-link-hover: #cab3e3; --color-btn-primary-border: #8f6fc0; --color-btn-primary-bg: #2e2640; --color-btn-primary-hover-bg: #392f4d; --color-header-bg: #2f2740; --color-header-text: #c6b3de; } } :root[data-theme="dark"][data-color-theme="slate-purple"] { --color-link: #b79cd9; --color-link-hover: #cab3e3; --color-btn-primary-border: #8f6fc0; --color-btn-primary-bg: #2e2640; --color-btn-primary-hover-bg: #392f4d; --color-header-bg: #2f2740; --color-header-text: #c6b3de; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; font-family: var(--font-sans); font-size: 13px; color: var(--color-text); background: var(--color-row); } /* ---------- Title bar ---------- */ .title-bar { flex: 0 0 auto; background: var(--color-titlebar-bg); color: var(--color-titlebar-text); padding: 3px 10px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 4px; border-bottom: 1px solid var(--color-btn-primary-border); } .title-bar__title { margin: 0; font-size: 14.5px; font-weight: 700; white-space: nowrap; } /* Brand text links back to the Dashboard. Inherits the titlebar's white on navy — no default link blue/underline — with an underline on hover as the only affordance. */ .title-bar__title a { color: inherit; text-decoration: none; } .title-bar__title a:hover { text-decoration: underline; } .title-bar__meta { display: flex; gap: 12px; font-size: 11.5px; color: var(--color-titlebar-meta); flex-wrap: wrap; } .title-bar__meta strong { color: #ffffff; } .text-active { color: #bdf0a0; } /* ---------- App shell (sidebar + main) ---------- */ .app-body { flex: 1 1 auto; display: flex; flex-direction: row; overflow: hidden; min-height: 0; } .sidebar { flex: 0 0 auto; width: 190px; background: var(--color-toolbar-bg); border-right: 1px solid var(--color-toolbar-border); overflow-y: auto; padding: 6px 0; } .sidebar__group { margin-bottom: 6px; } .sidebar__group-label { font-size: 10.5px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 12px 2px; } .sidebar__link { display: block; padding: 2px 12px; font-size: 12.5px; color: var(--color-text); text-decoration: none; border-left: 3px solid transparent; white-space: nowrap; } .sidebar__link:hover { background: var(--color-row-hover-muted); } .sidebar__link.is-active { background: var(--color-row-alt); border-left-color: var(--color-titlebar-bg); font-weight: 700; color: var(--color-titlebar-bg); } .sidebar__link.is-soon { color: var(--color-text-muted); } .sidebar__link.is-soon::after { content: " (soon)"; font-size: 10px; font-style: italic; } .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .page-title { margin: 0; font-size: 14px; font-weight: 700; white-space: nowrap; } /* ---------- Toolbar ---------- */ .toolbar { flex: 0 0 auto; background: var(--color-toolbar-bg); border-bottom: 1px solid var(--color-toolbar-border); padding: 3px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .toolbar__actions { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 2px; } .btn { font-family: inherit; font-size: 12px; color: var(--color-text); background: var(--color-btn-bg); border: 1px solid var(--color-btn-border); padding: 3px 10px; white-space: nowrap; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.2; flex: 0 0 auto; } .btn:hover { background: var(--color-btn-hover-bg); } .btn:active { background: var(--color-btn-active-bg); } .btn-primary { border: 2px solid var(--color-btn-primary-border); background: var(--color-btn-primary-bg); font-weight: 700; padding: 2px 10px; } .btn-primary:hover { background: var(--color-btn-primary-hover-bg); } .toolbar__search { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; flex: 0 0 auto; white-space: nowrap; } .toolbar__search input[type="text"] { font-family: inherit; font-size: 12px; font-weight: 400; padding: 2px 5px; border: 1px solid var(--color-btn-border); min-width: 220px; background: var(--color-input-bg); color: var(--color-text); } /* ---------- Grid / data table ---------- */ .grid-container { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; position: relative; background: var(--color-row); } .data-table { border-collapse: collapse; width: 100%; /* In practice this floor applies to ONE table: Transactions is the only plain `.data-table` in the app — every other table opts into `.data-table--compact`, which resets min-width to 0. So this value is really "the Transactions table's minimum width", and it exists so its 8 columns scroll horizontally on a phone instead of collapsing into unreadable slivers. It was 1375px — 284px wider than the table's natural content width (1091px). Because table-layout is auto, that surplus didn't distribute evenly: it was dumped into the loosest column (Note, which rendered 331px of em-dashes) while Amount — the one column the page exists to show — was pushed past the right edge of the content area and out of view entirely. The two frozen columns (Date, Description) stayed put, so a narrow window showed those and almost nothing else. Keep this BELOW the natural width or it stops being a floor and silently becomes a stretcher. */ min-width: 900px; font-size: 12px; } .data-table caption { caption-side: top; text-align: left; padding: 6px 8px; font-weight: 700; font-size: 12.5px; background: var(--color-row-alt); border-bottom: 1px solid var(--color-border); } .data-table th, .data-table td { border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border-subtle); padding: 2px 6px; line-height: 1.25; white-space: nowrap; /* No explicit text-align — cells default to start (left in LTR). Setting it here would override .col-amount (right) and .col-receipt (center), which need higher specificity than a bare .data-table td to win. */ } .data-table thead th { position: sticky; top: 0; background: var(--color-header-bg); color: var(--color-header-text); font-weight: 700; border-bottom: 1px solid var(--color-border-strong); z-index: 2; } .data-table tbody tr:nth-child(odd) td { background: var(--color-row); } .data-table tbody tr:nth-child(even) td { background: var(--color-row-alt-muted); } .data-table tbody tr:hover td { background: var(--color-row-hover-muted); } /* Frozen columns: Expense ID + Employee */ .col-id { width: var(--col-id-w); min-width: var(--col-id-w); position: sticky; left: 0; z-index: 1; } .col-employee { width: var(--col-employee-w); min-width: var(--col-employee-w); position: sticky; left: var(--col-id-w); z-index: 1; border-right: 2px solid var(--color-border-strong); } /* Free-text cells are the only ones whose width is decided by DATA rather than by design, and `.data-table td` is white-space: nowrap with table-layout: auto — so ONE long value sets the whole column's width, forever, for every row. A single 268-character transfer note (an audit correction entry) stretched Description to ~1700px and pushed Type/Category/Wallet/Payment Method/Amount off the right edge of the screen. Because Date and Description are the frozen columns, they stayed pinned and the page looked like a two-column table. The clamp lives on an inner block, NOT on the : max-width is not honoured on a table-cell in auto layout (Firefox ignores it outright), so the cell would keep growing and the bug would silently return. The full text is never lost — it's in the title attribute and on the transaction's detail page. */ .cell-clip { display: block; max-width: var(--cell-clip-max-w); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .data-table thead th.col-id, .data-table thead th.col-employee { z-index: 3; } .data-table tbody tr:nth-child(odd) td.col-id, .data-table tbody tr:nth-child(odd) td.col-employee { background: var(--color-row); } .data-table tbody tr:nth-child(even) td.col-id, .data-table tbody tr:nth-child(even) td.col-employee { background: var(--color-row-alt); } .data-table tbody tr:hover td.col-id, .data-table tbody tr:hover td.col-employee { background: var(--color-row-hover); } .col-receipt { width: var(--col-receipt-w); min-width: var(--col-receipt-w); text-align: center; } .col-amount { text-align: right; font-family: var(--font-sans); font-variant-numeric: tabular-nums; } .data-table a { color: var(--color-link); text-decoration: underline; font-weight: 700; } .data-table a:hover { color: var(--color-link-hover); } .receipt-yes { color: var(--status-approved-text); font-weight: 700; } .receipt-no { color: var(--color-text-muted); } /* Status badges */ .badge { display: inline-block; padding: 1px 8px; font-size: 11px; font-weight: 700; border: 1px solid rgba(0, 0, 0, 0.15); min-width: 68px; text-align: center; } .badge--approved { background: var(--status-approved-bg); color: var(--status-approved-text); } .badge--pending { background: var(--status-pending-bg); color: var(--status-pending-text); } .badge--rejected { background: var(--status-rejected-bg); color: var(--status-rejected-text); } .badge--reimbursed { background: var(--status-reimbursed-bg); color: var(--status-reimbursed-text); } /* ---------- Status bar ---------- */ .status-bar { flex: 0 0 auto; background: var(--color-toolbar-bg); border-top: 1px solid var(--color-toolbar-border); padding: 3px 10px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--color-text-muted); } /* ---------- Form page ---------- */ .form-main, .page-content { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; background: var(--color-page-bg); padding: 6px; } /* ---------- Stat strip ---------- */ .stat-strip { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; } .stat-tile { flex: 1 1 160px; background: var(--color-row); border: 1px solid var(--color-border-strong); padding: 3px 8px; } .stat-tile__label { font-size: 10.5px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .stat-tile__value { font-size: 17px; font-weight: 700; font-family: var(--font-sans); font-variant-numeric: tabular-nums; margin-top: 0; } .stat-tile--pos .stat-tile__value { color: var(--status-approved-text); } .stat-tile--neg .stat-tile__value { color: var(--status-rejected-text); } .stat-tile--info .stat-tile__value { color: var(--color-link); } /* ---------- Dashboard grid / panels ---------- */ .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; } .dashboard-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .dashboard-col fieldset { margin: 0; /* No inner padding so the title row and tables reach the panel edges. */ padding: 0; } /* Non-table panel content (the Debts summary tiles) needs the inset back, since the panel itself no longer carries padding. */ .dashboard-col fieldset > .stat-strip { padding: 6px 6px 0; } /* Flex/grid items default to min-width:auto, which lets nowrap table content force the whole column wider than its track. Reset every direct child of these scrolling flex columns so only .table-scroll (or the mobile column stack) ever grows past the viewport. */ .dashboard-col > *, .manage-list > * { min-width: 0; } /* ---------- Intelligence layer surfaces ---------- */ /* The one-line answer above the table — the conclusion before the evidence. */ .explain-summary { padding: 5px 8px; border-bottom: 1px solid var(--color-border); font-size: 12.5px; } /* The "why" line under a driver — the cause, not just the number. Muted so the figures stay dominant and the explanation supports them. */ .explain-cause { font-size: 11px; color: var(--color-text-muted); white-space: normal; line-height: 1.3; margin-top: 1px; } /* Entry-moment flag. Deliberately not a colour-filled badge: it informs a decision, it doesn't reject input. */ .entry-check__flag { font-weight: 700; color: var(--status-pending-text); background: var(--status-pending-bg); border: 1px solid rgba(0, 0, 0, 0.15); padding: 0 5px; margin-right: 4px; } #entry-check { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.35; } .afford-check { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-top: 1px solid var(--color-border); font-size: 12px; font-weight: 700; flex-wrap: wrap; } .afford-check input[type="text"] { font-family: inherit; font-size: 12px; font-weight: 400; padding: 2px 5px; border: 1px solid var(--color-btn-border); background: var(--color-input-bg); color: var(--color-text); flex: 1 1 90px; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; } .afford-verdict { padding: 4px 8px 6px; font-size: 12px; border-top: 1px solid var(--color-border-subtle); } .panel__footer { padding: 2px 6px 4px; text-align: right; } .panel__footer a { font-size: 11.5px; color: var(--color-link); text-decoration: underline; font-weight: 700; } .data-table--compact { min-width: 0; width: 100%; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---------- Progress bar ---------- */ .bar { height: 9px; background: var(--color-bar-track); border: 1px solid var(--color-border); overflow: hidden; } .bar__fill { height: 100%; } .bar__fill--ok { background: var(--status-approved-bg); } .bar__fill--warn { background: var(--status-pending-bg); } .bar__fill--over { background: var(--status-rejected-bg); } .bar__fill--info { background: var(--status-reimbursed-bg); } /* ---------- Text color utilities ---------- */ .text-pos { color: var(--status-approved-text); font-weight: 700; } .text-neg { color: var(--status-rejected-text); font-weight: 700; } .text-info { color: var(--color-link); font-weight: 700; } .text-muted { color: var(--color-text-muted); } /* Transaction type badges (reuse the approve/reject/reimburse palette) */ .badge--expense { background: var(--status-rejected-bg); color: var(--status-rejected-text); } .badge--income { background: var(--status-approved-bg); color: var(--status-approved-text); } .badge--transfer { background: var(--status-reimbursed-bg); color: var(--status-reimbursed-text); } /* ---------- Manage layout (list + inline add/edit form) ---------- */ .manage-layout { display: flex; gap: 12px; align-items: start; } .manage-list { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .manage-form { flex: 0 0 300px; min-width: 0; } .manage-form fieldset { margin: 0; } .manage-form .form-row { grid-template-columns: 1fr; padding: 4px 0; } .manage-form .form-row label { text-align: left; } .manage-form .form-row input, .manage-form .form-row select, .manage-form .form-row textarea { max-width: none; } .manage-form .form-actions { margin: 10px -12px -14px; } .manage-list fieldset { margin: 0; min-width: 0; } .manage-hint { font-size: 11.5px; color: var(--color-text-muted); margin: -4px 0 10px; } /* ---------- Reminder banner (Dashboard only) ---------- */ #reminder-banner:not(:empty) { margin-bottom: 12px; } .reminder-banner__item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 6px; background: var(--status-pending-bg); color: var(--status-pending-text); border: 1px solid var(--color-border-strong); } .reminder-banner__item span { flex: 1; } .rate-input { width: 90px; text-align: right; } /* ---------- Color swatches ---------- */ .swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(0, 0, 0, 0.35); vertical-align: middle; margin-right: 6px; } .swatch-navy { background: #2c5b8a; } .swatch-green { background: #3f8f4f; } .swatch-red { background: #b5504f; } .swatch-amber { background: #c99a2e; } .swatch-teal { background: #2f8f83; } .swatch-purple { background: #7a5ca8; } .swatch-gray { background: #6b7280; } .swatch-blue { background: #3f7cc9; } /* ---------- Pure-CSS tabs ---------- */ .tab-radio { position: absolute; opacity: 0; pointer-events: none; } .tab-labels { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border-strong); margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tab-labels label { padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); background: var(--color-toolbar-bg); border: 1px solid var(--color-toolbar-border); border-bottom: none; cursor: pointer; white-space: nowrap; margin-bottom: -1px; } .tab-panel { display: none; } #tab-ov:checked ~ .tab-labels label[for="tab-ov"], #tab-sp:checked ~ .tab-labels label[for="tab-sp"], #tab-cf:checked ~ .tab-labels label[for="tab-cf"], #tab-pl:checked ~ .tab-labels label[for="tab-pl"], #tab-db:checked ~ .tab-labels label[for="tab-db"] { background: var(--color-row); color: var(--color-titlebar-bg); border-color: var(--color-border-strong); border-bottom: 1px solid var(--color-row); } #tab-ov:checked ~ .tab-panels #panel-ov, #tab-sp:checked ~ .tab-panels #panel-sp, #tab-cf:checked ~ .tab-panels #panel-cf, #tab-pl:checked ~ .tab-panels #panel-pl, #tab-db:checked ~ .tab-panels #panel-db { display: block; } /* ---------- Danger button ---------- */ .btn-danger { border: 2px solid var(--status-rejected-text); background: var(--status-rejected-bg); color: var(--status-rejected-text); font-weight: 700; } .btn-danger:hover { background: var(--color-btn-danger-hover-bg); } /* ---------- Auth / onboarding shell (pre-login, no app nav) ---------- */ .splash { height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--color-titlebar-bg); color: #fff; text-align: center; } .splash h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: 0.02em; } .splash p { margin: 0; font-size: 12.5px; color: var(--color-titlebar-meta); } .splash .bar { width: 220px; background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); } .auth-shell { height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; background: var(--color-page-bg); padding: 20px; overflow: auto; } .auth-card { width: 100%; max-width: 380px; background: var(--color-row); border: 1px solid var(--color-border-strong); } .auth-card--wide { max-width: 480px; } .auth-card__header { background: var(--color-titlebar-bg); color: #fff; padding: 16px 20px; text-align: center; } .auth-card__header h1 { margin: 0; font-size: 16px; font-weight: 700; } .auth-card__header p { margin: 4px 0 0; font-size: 11.5px; color: var(--color-titlebar-meta); } .auth-card__body { padding: 20px; } .auth-card__footer { padding: 12px 20px; border-top: 1px solid var(--color-border); background: var(--color-toolbar-bg); text-align: center; font-size: 12px; } .auth-card__footer a { color: var(--color-link); font-weight: 700; text-decoration: underline; } .auth-field { margin-bottom: 12px; } .auth-field label { display: block; font-size: 11.5px; font-weight: 700; margin-bottom: 3px; } .auth-field input { width: 100%; font-family: inherit; font-size: 13px; color: var(--color-text); padding: 7px 8px; border: 1px solid var(--color-btn-border); background: var(--color-input-bg); } .auth-submit { width: 100%; text-align: center; padding: 8px 0; font-size: 13px; } .onboard-feature { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border); } .onboard-feature:last-child { border-bottom: none; } .onboard-feature__glyph { flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--color-row-alt); border: 1px solid var(--color-border); font-weight: 700; color: var(--color-titlebar-bg); } .onboard-feature__title { font-size: 12.5px; font-weight: 700; } .onboard-feature__desc { font-size: 11.5px; color: var(--color-text-muted); } .pin-display { font-size: 26px; letter-spacing: 10px; text-align: center; color: var(--color-titlebar-bg); font-family: var(--font-mono); margin: 4px 0 16px; } .pin-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 230px; margin: 0 auto; } .pin-keypad .btn { padding: 12px 0; font-size: 15px; text-align: center; } /* ---------- Error toast (JS-driven) ---------- */ .error-toast { position: fixed; bottom: 16px; right: 16px; max-width: 340px; background: var(--status-rejected-bg); color: var(--status-rejected-text); border: 1px solid var(--status-rejected-text); padding: 10px 14px; font-size: 12.5px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 100; } .error-toast.is-visible { opacity: 1; transform: translateY(0); } .error-toast--success { background: var(--status-approved-bg); color: var(--status-approved-text); border-color: var(--status-approved-text); } /* ---------- Modal (JS-driven replacement for window.prompt/confirm) ---------- Native browser dialogs can't be themed and can't host a formatted input (no thousands separators, no styling), so confirmDelete()/promptAmount() in api.js use this instead. Flat + bordered, no shadow/rounded corners — same rule as the rest of the app. */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 200; align-items: center; justify-content: center; } .modal-overlay.is-visible { display: flex; } .modal-box { background: var(--color-row); border: 2px solid var(--color-border-strong); min-width: 340px; max-width: 90vw; } .modal-box__header { background: var(--color-titlebar-bg); color: var(--color-titlebar-text); font-weight: 700; padding: 10px 14px; } .modal-box__body { padding: 14px; } .modal-box__body p { margin: 0 0 10px; } .modal-box__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--color-border-subtle); } /* ---------- Transaction detail ---------- */ .detail-hero { padding: 16px; border-bottom: 1px solid var(--color-border); background: var(--color-row-alt); } .detail-hero__title { font-size: 15px; font-weight: 700; margin-bottom: 4px; } .detail-hero__amount { font-size: 28px; font-weight: 700; font-family: var(--font-sans); font-variant-numeric: tabular-nums; } .tag-chip { display: inline-block; padding: 2px 8px; margin: 0 4px 4px 0; font-size: 11px; background: var(--color-toolbar-bg); border: 1px solid var(--color-border); } /* ---------- Empty state ---------- */ .empty-state { text-align: center; padding: 46px 20px; border: 1px dashed var(--color-border-strong); background: var(--color-row); } .empty-state__glyph { font-size: 30px; color: var(--color-text-muted); margin-bottom: 8px; } .empty-state__title { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; } .empty-state__desc { font-size: 12px; color: var(--color-text-muted); margin-bottom: 14px; } /* Second instance of the pure-CSS tab trick, reused here to preview populated vs. empty without needing JS or a second copy of the page. */ #ws-data:checked ~ .tab-labels label[for="ws-data"], #ws-empty:checked ~ .tab-labels label[for="ws-empty"] { background: var(--color-row); color: var(--color-titlebar-bg); border-color: var(--color-border-strong); border-bottom: 1px solid var(--color-row); } #ws-data:checked ~ .tab-panels #ws-panel-data, #ws-empty:checked ~ .tab-panels #ws-panel-empty { display: block; } /* ---------- Placeholder / stub pages ---------- */ .placeholder-notice { border: 1px dashed var(--color-border-strong); background: var(--color-row); padding: 18px; max-width: 560px; font-size: 12.5px; line-height: 1.6; } .placeholder-notice h3 { margin: 0 0 8px; font-size: 13.5px; } .placeholder-notice ul { margin: 8px 0 0; padding-left: 18px; } .form-panel { max-width: 780px; margin: 0 auto; background: var(--color-row); border: 1px solid var(--color-border-strong); } .form-panel__header { background: var(--color-titlebar-bg); color: #fff; padding: 7px 12px; font-size: 13px; font-weight: 700; } fieldset { border: 1px solid var(--color-border); background: var(--color-row); margin: 4px; padding: 4px 6px 6px; } legend { /* Widget/panel title rendered as a full-width top ROW of the panel, in the panel's own background (--color-row) with a divider beneath it — a card header. Floated so it drops out of the fieldset border-notch behaviour and lays out as a normal full-width block (siblings clear it, below). This keeps the title visually separate from the table's column-header band (--color-header-bg) right under it; the two used to read as one repeated band, which was confusing. 14.5px bold so it outranks 12px cells / 13px body; crisp --color-text, not the softer header blue. */ float: left; width: 100%; box-sizing: border-box; margin: 0; padding: 5px 8px; /* background: var(--color-row); */ background: #a5ddff; color: var(--color-text); font-size: 14.5px; font-weight: 700; border: 0; border-bottom: 1px solid var(--color-border-strong); } /* A floated, full-width legend needs its following siblings to clear, so the panel body (table, form rows, stat tiles) sits below the title row. */ fieldset > legend ~ * { clear: both; } .form-row { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; } /* Links inside a detail/form row. Same treatment as `.data-table a` — without a rule they fall back to the browser default #0000EE, which measures 1.78:1 against the dark theme's background (AA wants 4.5:1) and is effectively invisible. --color-link is already theme-aware. */ .form-row a { color: var(--color-link); text-decoration: underline; font-weight: 700; } .form-row a:hover { color: var(--color-link-hover); } .form-row label { text-align: right; font-weight: 700; color: var(--color-text); white-space: nowrap; } .form-row label::after { content: ":"; } .form-row input:not([type="checkbox"]):not([type="radio"]), .form-row select, .form-row textarea { font-family: inherit; font-size: 12.5px; color: var(--color-text); padding: 4px 6px; border: 1px solid var(--color-btn-border); background: var(--color-input-bg); width: 100%; max-width: 360px; } .form-row input[type="checkbox"], .form-row input[type="radio"] { margin-right: 6px; vertical-align: middle; } .form-row textarea { resize: vertical; } .form-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 12px; border-top: 1px solid var(--color-border); background: var(--color-toolbar-bg); } /* ---------- Responsive ---------- */ @media (max-width: 720px) { body { font-size: 12.5px; } .title-bar__title { font-size: 13px; } .app-body { flex-direction: column; } .sidebar { width: auto; max-height: 92px; display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-right: none; border-bottom: 1px solid var(--color-toolbar-border); padding: 8px 6px; align-items: flex-start; gap: 10px; } .sidebar__group { display: flex; align-items: center; gap: 4px; margin-bottom: 0; flex: 0 0 auto; } .sidebar__group-label { display: none; } .sidebar__link { border-left: none; border-bottom: 3px solid transparent; padding: 6px 10px; } .sidebar__link.is-active { border-left-color: transparent; border-bottom-color: var(--color-titlebar-bg); } .dashboard-grid { grid-template-columns: 1fr; } .stat-tile { flex: 1 1 45%; } .manage-layout { flex-direction: column; } .manage-list, .manage-form { flex: 1 1 auto; width: 100%; } .toolbar { align-items: stretch; } .toolbar__search input[type="text"] { min-width: 0; flex: 1 1 auto; } .data-table { font-size: 12.5px; } .data-table th, .data-table td { padding: 7px 9px; } .form-row { grid-template-columns: 1fr; } .form-row label { text-align: left; } .form-row input, .form-row select, .form-row textarea { max-width: none; } }