/* Lighthouse Back Office — Modern, Segoe UI, navy/gold financial style */ :root { --navy: #16233b; --navy-2: #1e2f4f; --gold: #c9a227; --gold-soft: #f4ecd4; --bg: #f5f6f8; --card: #ffffff; --text: #1c2530; --muted: #6b7686; --line: #e3e7ee; --green: #1e7d46; --red: #b23a3a; --amber: #b07d10; --bg-soft: #f6f8fa; /* subtle inset panels (guide boxes, sign-off blocks) */ --panel: #f6f7f9; --mut: #6b7686; } /* dark theme */ html[data-theme="dark"] { --navy: #0f1830; --navy-2: #8fb2ff; --gold: #d8b53f; --gold-soft: #2a2410; --bg: #0c1220; --card: #151d2e; --text: #e6ebf3; --muted: #94a1b6; --line: #263145; --green: #57c98a; --red: #e2736e; --amber: #d8b53f; } html[data-theme="dark"] body { background: var(--bg); } html[data-theme="dark"] th { background: #1a2334; } html[data-theme="dark"] .card table tr:hover td, html[data-theme="dark"] .kpi:hover { background: #1a2334; } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #101827; color: var(--text); border-color: #2b374d; } html[data-theme="dark"] tr.total td { background: #2a2410; } /* dark mode: --navy is a SURFACE colour here, so text roles that borrow it must use light ink. (Fixes unreadable headings/values/ghost buttons in dark, Aurora and Beacon.) */ html[data-theme="dark"] h1, html[data-theme="dark"] h2 { color: var(--text); } html[data-theme="dark"] .kpi .value { color: var(--text); } html[data-theme="dark"] .btn.ghost { color: var(--text); border-color: var(--line); } html[data-theme="dark"] .btn.ghost:hover { background: var(--card); color: var(--text); } html[data-theme="dark"] .tab:hover { color: var(--text); } html[data-theme="dark"] { --bg-soft:#1a2334; --panel:#151d2e; --mut:#94a1b6; } html[data-theme="dark"] table tr:hover td { background: #1f2a3f; } html[data-theme="dark"] table.reg tbody tr:hover td { background: #1f2a3f; } html[data-theme="dark"] .tab { background: #1a2334; } html[data-theme="dark"] .badge.conditional, html[data-theme="dark"] .badge.unmatched { background:#3a2f10; color:#e9c25c; } html[data-theme="dark"] .badge.firm { background:#152a4a; color:#8fb2ff; } html[data-theme="dark"] .badge.cancelled { background:#3a1720; color:#ff9d97; } html[data-theme="dark"] .badge.excluded { background:#242c3a; color:#94a1b6; } html[data-theme="dark"] .error-box { background:#3a1720; color:#ff9d97; } html[data-theme="dark"] .ok-box { background:#123020; color:#57c98a; } html[data-theme="dark"] .rpt-badge.red { background:#3a1720; color:#ff9d97; } /* financial statements stay as white "paper" sheets in dark mode — print-first documents whose inks are deliberately hardcoded dark */ html[data-theme="dark"] .statement { background: #fff; } html[data-theme="dark"] .statement tr:hover td { background: #f6f8fb; } html[data-theme="dark"] .statement th, html[data-theme="dark"] .statement tr.colhead th { background: none; color: #5a6472; } html[data-theme="dark"] .statement tr.total td, html[data-theme="dark"] .statement tr.grand td { background: #f4ecd4; color: #17233a; } html[data-theme="dark"] .statement td { color: #23272e; } html[data-theme="dark"] .statement table { background: transparent; } * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14.5px; } /* ================= LAYOUTS (structure only) — html[data-layout] ================= modern · compact · executive · topnav · rail · rightbar Colours come from PALETTES below, so layout + palette are independent. */ /* COMPACT — dense, data-packed. Narrow sidebar, tight tables/cards. */ html[data-layout="compact"] .sidebar { width: 190px; } html[data-layout="compact"] .main { padding: 14px 20px; max-width: 1200px; } html[data-layout="compact"] h1 { font-size: 18px; } html[data-layout="compact"] h2 { font-size: 13px; margin: 12px 0 6px; } html[data-layout="compact"] .card { padding: 9px 12px; margin-bottom: 11px; border-radius: 4px; } html[data-layout="compact"] .kpi { padding: 7px 10px; } html[data-layout="compact"] .kpi .value { font-size: 16px; } html[data-layout="compact"] .kpis { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); } html[data-layout="compact"] th { padding: 4px 8px; font-size: 10px; } html[data-layout="compact"] td { padding: 3px 8px; font-size: 12px; } html[data-layout="compact"] .nav a { padding: 7px 20px; font-size: 13px; } html[data-layout="compact"] .topbar { padding: 5px 10px; } /* EXECUTIVE — airy, oversized headings & KPIs, rounded cards, serif titles. */ html[data-layout="executive"] .main { max-width: 1160px; padding: 30px 40px; } html[data-layout="executive"] h1 { font-size: 26px; font-family: Georgia, "Aptos Display", serif; } html[data-layout="executive"] h2 { font-size: 16px; font-family: Georgia, "Aptos Display", serif; } html[data-layout="executive"] .card { border-radius: 16px; padding: 22px 24px; } html[data-layout="executive"] .kpis { gap: 18px; } html[data-layout="executive"] .kpi { border-radius: 16px; padding: 20px 18px; } html[data-layout="executive"] .kpi .value { font-size: 27px; } html[data-layout="executive"] .kpi .label { font-size: 12px; letter-spacing: 1px; } /* TOPNAV — navigation on a horizontal top bar; no left sidebar; full-width. */ html[data-layout="topnav"] .shell { flex-direction: column; } html[data-layout="topnav"] .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 0 8px; } html[data-layout="topnav"] .brand { padding: 8px 14px 8px 6px; border: 0; } html[data-layout="topnav"] .brand .sub { display: none; } html[data-layout="topnav"] .nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0; flex: 1; overflow: visible; } html[data-layout="topnav"] .nav .sep, html[data-layout="topnav"] .nav .hint { display: none; } html[data-layout="topnav"] .nav a { border-left: 0; border-radius: 8px 8px 0 0; padding: 12px; white-space: nowrap; } html[data-layout="topnav"] .nav a.active { background: var(--gold); color: #fff; font-weight: 600; } html[data-layout="topnav"] .nav a .ic { margin-right: 4px; } html[data-layout="topnav"] .userbox { border: 0; padding: 8px 14px; white-space: nowrap; } html[data-layout="topnav"] .main { border-top: 3px solid var(--gold); max-width: none; } /* RAIL — slim icon-only left rail. */ html[data-layout="rail"] .sidebar { width: 62px; } html[data-layout="rail"] .sidebar .lbl, html[data-layout="rail"] .nav .sep, html[data-layout="rail"] .nav .hint, html[data-layout="rail"] .brand .sub, html[data-layout="rail"] .brand .logo-full, html[data-layout="rail"] .userbox .lbl { display: none; } html[data-layout="rail"] .brand .logo-mini { display: inline; color: var(--gold); } html[data-layout="rail"] .brand { padding: 16px 10px; text-align: center; } html[data-layout="rail"] .nav a { text-align: center; padding: 12px 0; } html[data-layout="rail"] .nav a .ic { margin: 0; width: auto; font-size: 17px; } html[data-layout="rail"] .userbox { text-align: center; padding: 12px 4px; } /* OPEN BOOK — the books open like a real ledger: spine tabs, paper pages, and on list screens a two-page master-detail split (row click loads the record into the right page — see foot.ejs). */ /* the desk: warm parchment behind the floating book (light theme only) */ html[data-layout="openbook"], html[data-layout="openbook"] body { background: var(--bg-soft); } html[data-theme="dark"][data-layout="openbook"], html[data-theme="dark"][data-layout="openbook"] body { background: var(--bg); } /* the desk sits a shade under the page so the book reads as paper on a surface */ html[data-layout="openbook"] .main { box-shadow: 0 14px 38px rgba(20, 30, 44, .14), 0 0 0 1px var(--line); } /* slim icon spine; hover it and the full menu flies out over the page. The ☰ button pins the full classic menu instead (html.ob-nav-full) — every spine rule is scoped :not(.ob-nav-full). */ html[data-layout="openbook"]:not(.ob-nav-full) .sidebar { width: 58px; transition: width .16s ease, margin-right .16s ease; } html[data-layout="openbook"]:not(.ob-nav-full) .sidebar:hover, html[data-layout="openbook"]:not(.ob-nav-full) .sidebar:focus-within { width: 232px; margin-right: -174px; z-index: 120; box-shadow: 14px 0 44px rgba(10, 18, 30, .38); } html[data-layout="openbook"]:not(.ob-nav-full) .sidebar:hover .lbl, html[data-layout="openbook"]:not(.ob-nav-full) .sidebar:focus-within .lbl, html[data-layout="openbook"]:not(.ob-nav-full) .sidebar:hover .userbox .lbl { display: inline; } html[data-layout="openbook"]:not(.ob-nav-full) .sidebar:hover .nav .sep, html[data-layout="openbook"]:not(.ob-nav-full) .sidebar:hover .nav .hint, html[data-layout="openbook"]:not(.ob-nav-full) .sidebar:hover .brand .sub { display: block; } html[data-layout="openbook"]:not(.ob-nav-full) .sidebar:hover .brand .logo-full { display: inline; } html[data-layout="openbook"]:not(.ob-nav-full) .sidebar:hover .brand .logo-mini { display: none; } html[data-layout="openbook"]:not(.ob-nav-full) .sidebar:hover .brand { text-align: left; padding: 12px 16px 10px; } html[data-layout="openbook"]:not(.ob-nav-full) .sidebar:hover .nav a { text-align: left; padding: 10px 14px; } html[data-layout="openbook"]:not(.ob-nav-full) .sidebar:hover .nav a .ic { margin-right: 8px; width: 20px; } html[data-layout="openbook"]:not(.ob-nav-full) .sidebar:hover .userbox { text-align: left; padding: 12px 16px; } html[data-layout="openbook"]:not(.ob-nav-full) .sidebar .lbl, html[data-layout="openbook"]:not(.ob-nav-full) .nav .sep, html[data-layout="openbook"]:not(.ob-nav-full) .nav .hint, html[data-layout="openbook"]:not(.ob-nav-full) .brand .sub, html[data-layout="openbook"]:not(.ob-nav-full) .brand .logo-full, html[data-layout="openbook"]:not(.ob-nav-full) .userbox .lbl { display: none; } html[data-layout="openbook"]:not(.ob-nav-full) .brand .logo-mini { display: inline; color: var(--gold); } html[data-layout="openbook"]:not(.ob-nav-full) .brand { padding: 14px 8px; text-align: center; } html[data-layout="openbook"]:not(.ob-nav-full) .nav a { text-align: center; padding: 11px 0; margin: 2px 0 2px 6px; border-left: 0; border-radius: 0 10px 10px 0; } html[data-layout="openbook"]:not(.ob-nav-full) .nav a .ic { margin: 0; width: auto; font-size: 16px; } html[data-layout="openbook"]:not(.ob-nav-full) .nav a.active { background: var(--gold); padding-right: 8px; } html[data-layout="openbook"]:not(.ob-nav-full) .userbox { text-align: center; padding: 12px 4px; } /* the book itself, centered on the desk */ html[data-layout="openbook"] .main { background: var(--card); max-width: 1640px; margin: 16px auto 26px; padding: 24px 30px; border: 1px solid var(--line); border-radius: 8px 18px 18px 8px; box-shadow: 0 18px 44px rgba(20, 30, 44, .18); } html[data-layout="openbook"] .topbar { max-width: 1640px; margin: 10px auto 0; border-radius: 12px; row-gap: 4px; } html[data-layout="openbook"] .tb-search { flex: 0 1 300px; } /* the left page keeps its own horizontal scroll instead of clipping columns */ html[data-layout="openbook"] .bk-left { overflow-x: auto; } html[data-layout="openbook"] .bk-left table { font-size: 12.5px; } html[data-layout="openbook"] .bk-left th, html[data-layout="openbook"] .bk-left td { padding: 6px 7px; } html[data-layout="openbook"] .bk-left th { font-size: 10.5px; letter-spacing: .3px; } html[data-layout="openbook"] .bk-left .page-head h1 { font-size: 21px; } html[data-layout="openbook"] .bk-left .filters, html[data-layout="openbook"] .bk-left .tabs { gap: 5px; } html[data-layout="openbook"] .bk-left .btn { font-size: 12.5px; padding: 6px 10px; } /* the right page fills the visible book height */ html[data-layout="openbook"] .bk-right iframe { height: calc(100vh - 220px); min-height: 620px; } /* an embedded record fits its page instead of scrolling sideways: tighter type, tighter spacing, and every wide control allowed to shrink. */ html.embed { font-size: 13.5px; } html.embed .main { padding: 8px 12px !important; } html.embed h1 { font-size: 19px; } html.embed h2 { font-size: 14px; } html.embed .card { padding: 10px 12px; margin-bottom: 9px; } html.embed table { font-size: 12.5px; width: 100%; table-layout: auto; } html.embed th, html.embed td { padding: 5px 6px; } html.embed input, html.embed select, html.embed textarea { max-width: 100%; min-width: 0; font-size: 12.5px; padding: 5px 7px; } html.embed .filters > div, html.embed .grid > div { min-width: 0 !important; } html.embed .grid, html.embed .kpis { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } html.embed .btn { padding: 5px 10px; font-size: 12.5px; } html.embed .tabbar { gap: 4px; } html.embed .tab { padding: 4px 9px; font-size: 11.5px; } html.embed .page-head { flex-wrap: wrap; gap: 6px; } html.embed * { max-width: 100%; } /* an embedded record renders on white paper, never on the desk colour */ html.embed, html.embed body { background: var(--card) !important; } /* the two-page split (built by foot.ejs on list screens) */ html[data-layout="openbook"] .bk-split { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; } html[data-layout="openbook"] .bk-split::before { content: ""; position: absolute; left: 0; right: 0; top: auto; bottom: auto; height: 0; width: auto; transform: none; background: linear-gradient(90deg, transparent, rgba(30,40,55,.10) 46%, rgba(30,40,55,.20) 50%, rgba(30,40,55,.10) 54%, transparent); pointer-events: none; } html[data-layout="openbook"] .bk-left { padding-right: 0; min-width: 0; } html[data-layout="openbook"] .bk-right { padding: 14px 0 0; margin-top: 12px; border-top: 2px solid var(--line); min-width: 0; display: flex; flex-direction: column; } html[data-layout="openbook"] .bk-head { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; } html[data-layout="openbook"] .bk-right iframe { width: 100%; flex: 1; min-height: 520px; border: 0; background: transparent; } html[data-layout="openbook"] tr.bk-sel td { background: var(--gold-soft) !important; } html[data-layout="openbook"] tr.bk-sel td:first-child { box-shadow: inset 3px 0 0 var(--gold); } @media (max-width: 1000px){ html[data-layout="openbook"] .bk-split { grid-template-columns: 1fr; } html[data-layout="openbook"] .bk-split::before { display:none; } html[data-layout="openbook"] .bk-right { padding-left: 0; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; } } /* embed mode — a page rendered inside the right page of the book (chrome hidden) */ html.embed .sidebar, html.embed .topbar, html.embed .userbox { display: none !important; } html.embed .main { padding: 6px 10px !important; margin: 0 !important; max-width: none !important; border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; } /* RIGHTBAR — sidebar on the RIGHT side. */ html[data-layout="rightbar"] .shell { flex-direction: row-reverse; } html[data-layout="rightbar"] .sidebar { border-left: 1px solid rgba(255,255,255,.06); } html[data-layout="rightbar"] .nav a { border-left: 0; border-right: 3px solid transparent; } html[data-layout="rightbar"] .nav a.active { border-left-color: transparent; border-right-color: var(--gold); } /* ================= PALETTES (colour only) — html[data-palette], light mode only ================= */ html:not([data-theme="dark"])[data-palette="teal"] { --navy:#123b39; --gold:#0d9488; --gold-soft:#d5f0ec; --bg:#eef6f4; } html:not([data-theme="dark"])[data-palette="amber"] { --navy:#2b3a4a; --gold:#e07a1f; --gold-soft:#fbe7d1; --bg:#eef1f4; } html:not([data-theme="dark"])[data-palette="forest"] { --navy:#1e3a2f; --gold:#3f7d4f; --gold-soft:#dcecdd; --bg:#eef4ef; } html:not([data-theme="dark"])[data-palette="burgundy"] { --navy:#3a1e28; --gold:#a8324a; --gold-soft:#f2dde2; --bg:#f5eef0; } html:not([data-theme="dark"])[data-palette="indigo"] { --navy:#1b1f3b; --gold:#6d5cff; --gold-soft:#e7e3ff; --bg:#eef0fb; } /* --- Theme Gallery palettes (1 = navy default) --- */ html:not([data-theme="dark"])[data-palette="fresh"] { --navy:#123329; --navy-2:#1c4a3a; --gold:#0e9f7e; --gold-soft:#dcf1ea; --bg:#f4f8f6; } html:not([data-theme="dark"])[data-palette="slate"] { --navy:#273244; --navy-2:#33415a; --gold:#2f6feb; --gold-soft:#e5edfb; --bg:#eef1f6; } html:not([data-theme="dark"])[data-palette="meadow"] { --navy:#264430; --navy-2:#315540; --gold:#2f6b3e; --gold-soft:#dfeada; --bg:#f6f4ea; } /* Aurora — a dark, glassy identity; rides on dark mode with a cyan accent */ html[data-theme="dark"][data-palette="aurora"] { --navy:#0a0e24; --navy-2:#141a3a; --gold:#39e0cf; --gold-soft:#123040; --bg:#0d1230; --card:#141a2e; --line:#252c4a; } /* 'navy' is the built-in default — no override needed */ /* 6 · PEIAGENTS Portal — matches peiagents.com/agent-portal: warm paper, brass gold, night blue, Fraunces serif headings + Hanken Grotesk body + DM Mono figures. Opt-in; classic stays default. */ html:not([data-theme="dark"])[data-palette="portal"] { --navy:#1C3A4B; --navy-2:#26495B; --gold:#C69214; --gold-soft:#F3E7C6; --bg:#EFEDE6; --card:#FBFAF6; --line:#E0DDD5; --text:#2B2D30; --muted:#7C7F84; } html:not([data-theme="dark"])[data-palette="portal"] body { font-family: "Hanken Grotesk", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif; } html:not([data-theme="dark"])[data-palette="portal"] h1, html:not([data-theme="dark"])[data-palette="portal"] h2, html:not([data-theme="dark"])[data-palette="portal"] .rpt-name, html:not([data-theme="dark"])[data-palette="portal"] .login-card h1 { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: .1px; } html:not([data-theme="dark"])[data-palette="portal"] .card, html:not([data-theme="dark"])[data-palette="portal"] .kpi, html:not([data-theme="dark"])[data-palette="portal"] .rpt-card { border-radius: 12px; } html:not([data-theme="dark"])[data-palette="portal"] .btn, html:not([data-theme="dark"])[data-palette="portal"] .tb-btn, html:not([data-theme="dark"])[data-palette="portal"] .tb-search input { border-radius: 9px; } html:not([data-theme="dark"])[data-palette="portal"] .kpi .value, html:not([data-theme="dark"])[data-palette="portal"] .num { font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } html:not([data-theme="dark"])[data-palette="portal"] .kpi .label { text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; } html:not([data-theme="dark"])[data-palette="portal"] .btn.gold { background: linear-gradient(135deg, #C69214, #F0B01E); border-color: #C69214; color: #241d07; font-weight: 700; } html:not([data-theme="dark"])[data-palette="portal"] .topbar { background: var(--card); } /* 7 · Beacon — matches dashboard.ftventures.ca: near-black, mint accent, gold CTAs, Nunito/Inter type, mono figures. Dark identity (auto-switches to dark mode). */ html[data-theme="dark"][data-palette="beacon"] { --navy:#06080f; --navy-2:#101828; --gold:#2dd4bf; --gold-soft:#0d2a26; --bg:#0a0e15; --card:#11161f; --line:#1f2735; --text:#eef3fc; --muted:#92a1bf; --green:#5ee6a8; --amber:#e9c25c; } html[data-theme="dark"][data-palette="beacon"] body { font-family: "Nunito", "Inter", "Segoe UI", -apple-system, Arial, sans-serif; } html[data-theme="dark"][data-palette="beacon"] h1, html[data-theme="dark"][data-palette="beacon"] h2, html[data-theme="dark"][data-palette="beacon"] .rpt-name { font-family: "Nunito", "Inter", sans-serif; font-weight: 800; color: var(--text); } html[data-theme="dark"][data-palette="beacon"] .card, html[data-theme="dark"][data-palette="beacon"] .kpi, html[data-theme="dark"][data-palette="beacon"] .rpt-card { border-radius: 14px; } html[data-theme="dark"][data-palette="beacon"] .btn, html[data-theme="dark"][data-palette="beacon"] .tb-btn, html[data-theme="dark"][data-palette="beacon"] .tb-search input { border-radius: 10px; } html[data-theme="dark"][data-palette="beacon"] .kpi .value, html[data-theme="dark"][data-palette="beacon"] .num { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; } html[data-theme="dark"][data-palette="beacon"] .kpi .label { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: var(--muted); } html[data-theme="dark"][data-palette="beacon"] .btn.gold { background: linear-gradient(135deg, #e9c25c, #c9a227); border-color: #c9a227; color: #1c1607; font-weight: 800; } html[data-theme="dark"][data-palette="beacon"] .sep { text-transform: uppercase; letter-spacing: .12em; } /* 8 · Ink & Gold — the Lighthouse look from dashboard.ftventures.ca, the one Francis picked on 13 August 2026: near-black ground, gold accent, no mint. Beacon above is the same page's OTHER theme. That page ships several; Beacon matched its `ch-midnight` and this matches its `inkgold`, which is the one he actually looks at. The values are lifted from that page's own theme block rather than sampled off a screenshot, so they are the same colours and not an approximation. The one thing worth noticing: its gold is #c9a227, which is the SAME --gold BF's light theme has always used. The two products were already one brand; only the ground underneath differed. That is why this reads as BF wearing the Lighthouse's clothes rather than as a second application bolted alongside. The Lighthouse writes its hairlines as rgba(255,255,255,.07). BF uses --line for solid borders in places where a translucent rule would let a table stripe show through it, so the two line values are composited against the background here instead: .07 and .13 over #0e1014. */ html[data-theme="dark"][data-palette="inkgold"] { --navy:#0e1014; --gold:#c9a227; --gold-soft:#241f10; --bg:#0e1014; --card:#15181d; --line:#1f2124; --text:#ededed; --muted:#aba79d; --green:#5ec27a; --red:#e07a6b; --amber:#d4af37; --bg-soft:#12151a; --panel:#12151a; --mut:#aba79d; /* --navy-2 is NOT a background here. `a { color: var(--navy-2) }` makes it the link colour for the whole application, and the first cut of this palette set it to #1a1d23 — a panel tone — which turned every link in BF near-black on near-black. The To-do card vanished entirely, because its rows are links, while the KPI figures survived on their own dark-theme override. BF's built-in dark theme sets this to #8fb2ff for exactly this reason. Warm light here so it belongs to the gold palette, and `a:hover` takes it to --gold. */ --navy-2:#d7d3ca; } html[data-theme="dark"][data-palette="inkgold"] body { font-family: "Nunito", "Inter", "Segoe UI", -apple-system, Arial, sans-serif; } html[data-theme="dark"][data-palette="inkgold"] h1, html[data-theme="dark"][data-palette="inkgold"] h2, html[data-theme="dark"][data-palette="inkgold"] .rpt-name { font-family: "Nunito", "Inter", sans-serif; font-weight: 800; color: var(--text); } html[data-theme="dark"][data-palette="inkgold"] .card, html[data-theme="dark"][data-palette="inkgold"] .kpi, html[data-theme="dark"][data-palette="inkgold"] .rpt-card { border-radius: 14px; } html[data-theme="dark"][data-palette="inkgold"] .btn, html[data-theme="dark"][data-palette="inkgold"] .tb-btn, html[data-theme="dark"][data-palette="inkgold"] .tb-search input { border-radius: 10px; } /* Figures in mono with tabular numerals, because a rent roll that does not line up vertically is harder to scan than one in a duller font that does. */ html[data-theme="dark"][data-palette="inkgold"] .kpi .value, html[data-theme="dark"][data-palette="inkgold"] .num { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; } /* Small, wide-tracked, upper-case labels under big figures — the detail that does most of the work in the original, and the cheapest thing to get wrong by leaving out. */ html[data-theme="dark"][data-palette="inkgold"] .kpi .label { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: var(--muted); } html[data-theme="dark"][data-palette="inkgold"] .sep { text-transform: uppercase; letter-spacing: .12em; color: var(--gold); } html[data-theme="dark"][data-palette="inkgold"] .btn.gold { background: linear-gradient(135deg, #e9c25c, #c9a227); border-color: #c9a227; color: #1c1607; font-weight: 800; } /* The brand line above the greeting — gold, tracked out, the way the Lighthouse sets it. */ html[data-theme="dark"][data-palette="inkgold"] .brandline { color: var(--gold); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 700; } /* The left rail, matched to the Lighthouse's. Most of it already agreed by accident: BF's active row has always been rgba(201,162,39,.12) with a gold left border, and 201,162,39 IS #c9a227. The rail only ever looked different because it sat on navy. On #0e1014 it is the same rail. What genuinely differs is the section headers — grey in BF, gold in the Lighthouse — and the breathing room. `.nav .sep` needs the two-class selector to win against the generic .sep rule above; a single .sep here loses on specificity and the headers stay grey, which was the whole thing he pointed at. */ html[data-theme="dark"][data-palette="inkgold"] .nav .sep { color: var(--gold); font-size: 10px; letter-spacing: .14em; font-weight: 700; margin: 16px 20px 6px; } html[data-theme="dark"][data-palette="inkgold"] .nav a { padding: 9px 20px; font-size: 13.5px; color: var(--muted); } html[data-theme="dark"][data-palette="inkgold"] .nav a:hover { background: rgba(255,255,255,.045); color: var(--text); } html[data-theme="dark"][data-palette="inkgold"] .nav a.active { background: rgba(201,162,39,.13); border-left-color: var(--gold); color: #fff; } /* Icons a shade larger than the label, as they are on the Lighthouse, where the icon is what you actually aim at down a list of twenty. */ html[data-theme="dark"][data-palette="inkgold"] .nav a .ic { font-size: 15px; } html[data-theme="dark"][data-palette="inkgold"] .brand { border-bottom-color: rgba(255,255,255,.07); } html[data-theme="dark"][data-palette="inkgold"] .brand .sub { color: var(--muted); letter-spacing: .12em; } html[data-theme="dark"][data-palette="inkgold"] .userbox { border-top-color: rgba(255,255,255,.07); color: var(--muted); } html[data-theme="dark"][data-palette="inkgold"] .sidebar { color: var(--muted); } /* top bar */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; row-gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: -6px 0 18px; } .tb-btn { background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; padding: 7px 10px; color: var(--text); text-decoration: none; } .tb-btn:hover { border-color: var(--gold); color: var(--gold); } .tb-search { flex: 0 1 460px; min-width: 170px; margin: 0; } .tb-search input { width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 13.5px; } .tb-spacer { flex: 1; } .tb-user { text-align: right; line-height: 1.15; } /* company workspace switcher (PEIAGENTS vs FT Ventures) */ .tb-co-switch { display: flex; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 2px; } .tb-co-btn { font-size: 12px; padding: 5px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; white-space: nowrap; } .tb-co-btn:hover { color: var(--text); } .tb-co-btn.sel { background: var(--navy); color: #fff; } .tb-co-btn.sel:hover { color: #fff; } /* narrow windows: let the topbar wrap instead of forcing the page to scroll sideways */ @media (max-width: 980px) { .topbar { flex-wrap: wrap; row-gap: 6px; } .tb-search { flex: 1 1 160px; min-width: 120px; } .tb-co-btn { padding: 5px 7px; } } /* training / help side drawer */ .help-drawer { position: fixed; top: 0; right: 0; width: 360px; max-width: 92vw; height: 100vh; z-index: 200; background: var(--card); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0,0,0,.18); transform: translateX(105%); transition: transform .22s ease; display: flex; flex-direction: column; } .help-drawer.open { transform: translateX(0); } .help-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--navy); color: #fff; } .help-head a { color: var(--gold); } .help-x { background: none; border: 0; color: #fff; font-size: 15px; cursor: pointer; } .help-body { padding: 12px 14px; overflow-y: auto; } .help-body #helpSearch { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; font-size: 13.5px; } .help-item { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; cursor: pointer; } .help-item:hover { border-color: var(--gold); background: var(--gold-soft); } .help-step { font-size: 14px; line-height: 1.5; padding: 8px 0; } .help-tip { background: var(--gold-soft); border-radius: 6px; padding: 8px 10px; font-size: 12px; color: #7a5c00; } .tb-bell { position: relative; } .bell-badge { position: absolute; top: -6px; right: -6px; background: var(--red); color: #fff; border-radius: 10px; font-size: 10px; font-weight: 700; padding: 0 5px; min-width: 16px; text-align: center; line-height: 16px; } .bell-panel { display: none; position: absolute; right: 0; top: 40px; width: 340px; max-height: 440px; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.18); z-index: 50; } .bell-panel.open { display: block; } .bell-head { padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px; } .bell-item { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; } .bell-item a { color: var(--text); } .bell-item a:hover { color: var(--gold); } .bell-item.red { border-left: 3px solid var(--red); } .bell-item.yellow { border-left: 3px solid var(--amber); } /* topbar Reports menu — Sage-style, always one click away */ .tb-reports { position: relative; } .tb-rep-btn { width: auto !important; padding: 0 12px !important; font-size: 13px; font-weight: 600; white-space: nowrap; } .rep-panel { display: none; position: absolute; left: 0; top: 40px; width: 260px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.18); z-index: 50; padding-bottom: 4px; } .rep-panel.open { display: block; } .rep-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); } .rep-panel > a { display: block; padding: 8px 12px; font-size: 13.5px; color: var(--text); text-decoration: none; } .rep-panel > a:hover { background: var(--gold-soft); color: var(--text); } .rep-foot { border-top: 1px solid var(--line); margin-top: 4px; } .rep-foot a { display: block; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--gold); text-decoration: none; } @media (max-width: 760px) { .tb-rep-btn .rep-lbl { display: none; } } .tb-name { display: block; font-weight: 600; font-size: 13.5px; color: var(--text); } .tb-role { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); } .nav a .ic { display: inline-block; width: 20px; text-align: center; margin-right: 8px; } .brand .logo-mini { display: none; } /* sidebar "something new" count badge */ .nav-badge { display: inline-block; min-width: 17px; height: 17px; line-height: 17px; padding: 0 5px; margin-left: 6px; font-size: 10.5px; font-weight: 700; text-align: center; color: #fff; background: var(--gold); border-radius: 999px; vertical-align: middle; } .nav a.active .nav-badge { background: #fff; color: var(--navy); } .nav-collapsed .nav-badge { position: absolute; margin: 0; transform: translate(6px,-10px); min-width: 15px; height: 15px; line-height: 15px; font-size: 9.5px; } .nav-collapsed .nav a { position: relative; } .brand-logo { display: block; width: 190px; max-width: 100%; height: auto; margin: 0 auto 4px; } .nav-collapsed .brand-logo, html[data-layout="rail"] .brand-logo { width: 46px; margin: 0 auto 8px; } /* collapsed sidebar → icons only */ .nav-collapsed .sidebar { width: 60px; } .nav-collapsed .sidebar .lbl, .nav-collapsed .nav .sep, .nav-collapsed .nav .hint, .nav-collapsed .brand .sub, .nav-collapsed .brand .logo-full { display: none; } .nav-collapsed .brand .logo-mini { display: inline; color: var(--gold); } .nav-collapsed .nav a { text-align: center; padding: 11px 0; } .nav-collapsed .nav a .ic { margin: 0; width: auto; font-size: 16px; } .nav-collapsed .brand { padding: 18px 10px; text-align: center; } .nav-collapsed .userbox { text-align: center; padding: 12px 6px; } a { color: var(--navy-2); text-decoration: none; } a:hover { color: var(--gold); } /* Layout */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 232px; background: var(--navy); color: #dde4ef; flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { padding: 12px 16px 10px; border-bottom: 1px solid rgba(255,255,255,.08); } .brand .logo { font-size: 17px; font-weight: 600; color: #fff; letter-spacing: .3px; } .brand .logo span { color: var(--gold); } .brand .sub { font-size: 11px; color: #93a0b8; margin-top: 3px; letter-spacing: .5px; text-transform: uppercase; } .nav { padding: 12px 0; flex: 1; overflow-y: auto; } .nav a { display: block; padding: 10px 20px; color: #c3ccdd; font-size: 13.5px; border-left: 3px solid transparent; } .nav a:hover { background: rgba(255,255,255,.05); color: #fff; } .nav a.active { background: rgba(201,162,39,.12); border-left-color: var(--gold); color: #fff; } .nav .sep { margin: 10px 20px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: #7d8aa3; } .nav .hint { float: right; font-size: 10px; color: #7d8aa3; background: rgba(255,255,255,.06); border-radius: 4px; padding: 1px 6px; } /* FT Ventures Inc. — visually a different company, not just another PEIAGENTS section */ .ftv-nav-group { margin-top: 6px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.14); background: rgba(13,148,136,.06); } .ftv-nav-group .sep-ftv { color: #5fd0c4; } .ftv-nav-group a { border-left-color: transparent; } .ftv-nav-group a:hover { background: rgba(13,148,136,.12); } .ftv-nav-group a.active { background: rgba(13,148,136,.18); border-left-color: #0d9488; color: #fff; } .userbox { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; color: #93a0b8; } .userbox a { color: var(--gold); } /* Centred rather than pinned to the left. On a wide screen the content sat against one edge with a gutter on the other, which is what "not centered" meant. */ .main { flex: 1; padding: 26px 32px; max-width: 1280px; margin-inline: auto; width: 100%; } .page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } h1 { font-size: 21px; font-weight: 600; margin: 0; color: var(--navy); } h2 { font-size: 15px; font-weight: 600; color: var(--navy); margin: 16px 0 8px; } /* Cards & KPIs — tighter, tidier defaults (less whitespace) */ .card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; margin-bottom: 12px; } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; } /* The figures are the reason the screen exists, so they are set like it. A hairline of colour along the top edge gives a row of tiles a rhythm and carries meaning where there is meaning to carry: gold ordinarily, green when the number is good, red when it is not. Everything else stays quiet, because a ledger should be calm. */ .kpi { background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px 14px; position: relative; overflow: hidden; } .kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold), rgba(201,162,39,.22)); } .kpi:has(.value.pos)::before { background: linear-gradient(90deg, var(--green), rgba(30,125,70,.18)); } .kpi:has(.value.neg)::before { background: linear-gradient(90deg, var(--red), rgba(178,58,58,.18)); } .kpi .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .085em; color: var(--muted); font-weight: 600; } .kpi .value { font-size: 25px; font-weight: 700; color: var(--navy); margin-top: 4px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } /* The row arrives rather than appearing, once, on the way in. */ .kpis > .kpi { animation: kpi-in .42s cubic-bezier(.2,.7,.3,1) both; } .kpis > .kpi:nth-child(1) { animation-delay: .02s } .kpis > .kpi:nth-child(2) { animation-delay: .06s } .kpis > .kpi:nth-child(3) { animation-delay: .10s } .kpis > .kpi:nth-child(4) { animation-delay: .14s } .kpis > .kpi:nth-child(5) { animation-delay: .18s } .kpis > .kpi:nth-child(6) { animation-delay: .22s } @keyframes kpi-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .kpis > .kpi { animation: none; } } /* clickable KPI/summary tiles */ a.kpi { text-decoration: none; display: block; transition: box-shadow .15s, transform .12s, border-color .12s; } a.kpi:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); transform: translateY(-1px); border-color: var(--gold); } /* One-line filter bar (all controls inline, not stacked) */ .filterbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .filterbar input, .filterbar select, .filterbar button { width: auto; margin: 0; } .filterbar select { min-width: 110px; } .filterbar .grow { flex: 1; min-width: 170px; } .kpi .value.pos { color: var(--green); } .kpi .value.neg { color: var(--red); } /* Tables */ /* Table widths are the browser's business, and three attempts at improving on it were each worse than the last. Left alone. */ table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 10px; overflow: hidden; } .card table { border: 0; } /* One table, everywhere. Every screen had grown its own — .reg, .ca-t, .bo-t, .pv-t, .cx-t, .tf-t — with its own padding and its own row height, so the platform read as six products. This is the house table: tight rows the way a spreadsheet is tight, middles aligned rather than tops (top alignment is what made rows look ragged and loose), and figures on tabular numerals so columns line up down the page. Anything that needs to be roomier says so, rather than every table choosing for itself. */ th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 5px 9px; border-bottom: 2px solid var(--line); background: #fafbfc; font-weight: 600; white-space: nowrap; } td { padding: 4px 9px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13px; line-height: 1.4; } /* Table widths are the browser's business. Three attempts at improving on it, each worse than the last: nowrap made every wide table run off the screen; a scroller to catch that put a wrapper round every table on every page; making the scroll visible added a bar, a shadow and a line of instructions. The last of those scrolled whole building blocks sideways on Properties & Units and cost Francis an evening thinking he had lost his portfolio. All of it is out. The only rule left is a ceiling on genuinely long text. */ /* Long free text is capped so one column of notes cannot own the table. Everything else is left to the browser, which was doing a better job than any of my three attempts to improve on it. */ td.wrap, th.wrap, td.note, td.notes, td.long { max-width: 420px; } tr:last-child td { border-bottom: 0; } /* Figures line up: right, tight, and on tabular numerals. */ td.num, th.num, td.n, th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* A control inside a cell must not make the row taller than the rows around it. */ td .btn.sm, td .btn.xs, td .btn { min-height: 24px; padding: 0 9px; font-size: 11.5px; } td input, td select { padding: 3px 6px; font-size: 12px; } /* Wide tables scroll inside their own card instead of running off the page. */ .card { overflow-x: auto; } /* The scrollbar should not sit on top of the last row. */ /* Banding, the way a ledger and every spreadsheet since has banded. It is what lets the eye carry a figure across a wide row without losing the line, and it is most of what makes Quicken feel dense without being small. The density here comes from row height, never from shrinking the type. */ tbody tr:nth-child(even) td { background: rgba(15,27,45,.022); } html[data-theme="dark"] tbody tr:nth-child(even) td { background: rgba(255,255,255,.028); } /* A hairline between columns, so a wide table reads as columns rather than as drifting words. */ th + th, td + td { border-left: 1px solid rgba(15,27,45,.05); } html[data-theme="dark"] th + th, html[data-theme="dark"] td + td { border-left-color: rgba(255,255,255,.05); } /* The banding must never win over a hover or a total. */ tbody tr:hover td { background: #eef4ff; } html[data-theme="dark"] tbody tr:hover td { background: #1f2a3f; } /* extra-compact tables (audit, long ledgers) */ table.dense th { padding: 4px 8px; font-size: 10.5px; } table.dense td { padding: 3px 8px; font-size: 11.5px; } /* consistent interactive hover on every table (matches the Register) */ table tr:hover td { background: #f5f8ff; } .tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } tr.total td { font-weight: 600; border-top: 2px solid var(--navy); background: var(--gold-soft); } tr.total:hover td { background: var(--gold-soft); } /* Register-style table — shared class so every screen can adopt the same dense, readable look */ table.reg td, table.reg th { padding: 5px 8px; font-size: 13px; border-bottom: 1px solid var(--line); } table.reg th { font-size: 11px; } table.reg tbody tr:hover td { background: #f5f8ff; } /* Keep column headers visible on long report tables instead of scrolling them away — sits just under the sticky topbar */ table.reg thead th { position: sticky; top: 54px; z-index: 5; background: var(--card); box-shadow: inset 0 -1px 0 var(--line); } @media print { table.reg thead th { position: static; } } /* Collapsible report section (native
/ — keyboard- and screen-reader-accessible with no extra JS) */ .rpt-collapse { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; } .rpt-collapse > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; background: var(--bg); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .rpt-collapse > summary::-webkit-details-marker { display: none; } .rpt-collapse > summary .chev { transition: transform .15s; color: var(--muted); font-size: 11px; } .rpt-collapse[open] > summary .chev { transform: rotate(90deg); } .rpt-collapse > summary:hover { background: var(--gold-soft); } .rpt-collapse > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .rpt-collapse .rpt-collapse-body { padding: 10px 14px 14px; } .rpt-collapse-sub { font-weight: 400; color: var(--muted); font-size: 12px; } @media print { /* printing should show every section in full, regardless of what's collapsed on screen */ .rpt-collapse, .rpt-collapse .rpt-collapse-body { display: block !important; } } /* quiet inline-edit fields inside register-style tables */ table.reg td.cell input, table.reg td.cell select, .cell-edit { border: 1px solid transparent; background: transparent; border-radius: 4px; padding: 3px 6px; font-size: 12.5px; transition: border-color .12s, background .12s; } table.reg td.cell input:hover, table.reg td.cell select:hover, .cell-edit:hover { border-color: #cbd5e1; } table.reg td.cell input:focus, table.reg td.cell select:focus, .cell-edit:focus { border-color: var(--gold); background: var(--card); outline: none; } /* ---- Explain: where a number came from --------------------------------------------------------- A figure that can explain itself carries a faint dotted underline on its label, so it is discoverable without shouting. The panel itself is one element reused across the page. */ [data-x] { cursor: help; } [data-x][data-x-href] { cursor: pointer; } [data-x] > .l, [data-x] > .label { text-decoration: underline dotted rgba(15,27,45,.28); text-underline-offset: 2px; } /* A term the glossary recognised — a column header that can explain itself. */ th.xp-term, .xp-term { text-decoration: underline dotted rgba(15,27,45,.3); text-underline-offset: 3px; } html[data-theme="dark"] th.xp-term, html[data-theme="dark"] .xp-term { text-decoration-color: rgba(255,255,255,.3); } th.xp-term:hover { color: var(--gold); } html[data-theme="dark"] [data-x] > .l, html[data-theme="dark"] [data-x] > .label { text-decoration-color: rgba(255,255,255,.28); } [data-x]:hover { border-color: var(--gold) !important; } .xp-pop { position: absolute; z-index: 300; max-width: 330px; pointer-events: auto; background: var(--navy, #1F3A5F); color: #fff; border-radius: 10px; padding: 10px 12px; box-shadow: 0 12px 34px rgba(12,20,32,.32); font-size: 12px; line-height: 1.45; opacity: 0; visibility: hidden; transform: translateY(3px); transition: opacity .12s, transform .12s; } .xp-pop.on { opacity: 1; visibility: visible; transform: none; } .xp-pop::after { content: ""; position: absolute; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--navy, #1F3A5F); bottom: -12px; } .xp-pop.below::after { bottom: auto; top: -12px; border-top-color: transparent; border-bottom-color: var(--navy, #1F3A5F); } .xp-pop .xp-t { font-weight: 700; font-size: 12.5px; margin-bottom: 3px; } .xp-pop .xp-c { opacity: .95; } .xp-pop .xp-f { margin-top: 5px; font-size: 11px; opacity: .72; } .xp-pop .xp-f span { text-transform: uppercase; letter-spacing: .06em; font-size: 9.5px; opacity: .8; } .xp-pop .xp-n { margin-top: 5px; font-size: 11px; opacity: .8; font-style: italic; } .xp-pop .xp-go { margin-top: 6px; font-size: 11px; color: var(--gold, #C69214); font-weight: 700; } @media print { .xp-pop { display: none !important; } } /* Status badges */ .badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; } .badge.conditional { background: #fdf3d7; color: var(--amber); } .badge.firm { background: #e2ecfb; color: #2456a6; } .badge.closed { background: #ddf1e4; color: var(--green); } .badge.cancelled { background: #f6dede; color: var(--red); } .badge.unmatched { background: #fdf3d7; color: var(--amber); } .badge.matched, .badge.posted { background: #ddf1e4; color: var(--green); } .badge.excluded { background: #eceef1; color: var(--muted); } /* Tabs */ /* Tabs read as the same small pills used for list filters — compact, not a heavy tab bar. */ .tabbar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; } .tab { padding: 5px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--navy); background: transparent; border: 1px solid #ccd3dd; border-radius: 7px; } .tab:hover { background: var(--gold-soft); color: var(--navy); border-color: var(--gold); } .tab.active { background: var(--navy); color: #fff; border-color: var(--navy); } .tab.active:hover { background: var(--navy-2); color: #fff; } html[data-theme="dark"] .tab { color: var(--text); border-color: var(--line); } html[data-theme="dark"] .tab.active { background: var(--gold); color: var(--navy); border-color: var(--gold); } /* Forms */ form.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; } input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid #ccd3dd; border-radius: 7px; font-family: inherit; font-size: 13.5px; background: #fff; color: var(--text); } input:focus, select:focus, textarea:focus { outline: 2px solid rgba(201,162,39,.35); border-color: var(--gold); } .form-actions { grid-column: 1 / -1; margin-top: 6px; } /* One height, whether it is a