/* 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: #5E6875; --line: #e3e7ee; --green: #1e7d46; --red: #b23a3a; /* Amber words, and a badge filled with amber. The words were #b07d10, 3.6:1 on white (review of #145): #8a6210 reads at 4.5:1 or more on every light page, card, inset panel and tint of the accent (Meadow's and Portal's tints take a shade darker, below). A badge keeps the old amber as its fill, with dark ink on it (5.0:1). */ --amber: #8a6210; --amber-fill: #b07d10; /* The ink on a badge or a chip filled with amber, red or green (the accent's is --on-gold, prefs.css). White on the dark theme's light red, green and amber read at 1.5 to 2.9:1; there it is dark. */ --on-amber: #1c1607; --on-red: #fff; --on-green: #fff; --bg-soft: #f6f8fa; /* subtle inset panels (guide boxes, sign-off blocks) */ --panel: #f6f7f9; --mut: #6b7686; } /* dark theme */ /* The Lighthouse palette — near-black, gold beam, mint highlight. Francis chose it from the dashboard panel and asked for it everywhere, so the whole app wears it rather than one screen. Only the variables change: every dark-mode rule below was already written against them. */ html[data-theme="dark"] { --navy: #111722; --navy-2: #8fb2ff; --gold: #E8B03F; --gold-soft: #2A2210; --bg: #0B0F14; --card: #111722; --text: #E5EAF2; --muted: #8B99AD; --line: #1F2937; --green: #5EEAD4; --red: #F0716A; --amber: #E8B03F; --amber-fill: var(--amber); --on-red: #1c1607; --on-green: #1c1607; } html[data-theme="dark"] body { background: var(--bg); } html[data-theme="dark"] th { background: #151D2B; } html[data-theme="dark"] .card table tr:hover td, html[data-theme="dark"] .kpi:hover { background: #151D2B; } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #0D131C; color: var(--text); border-color: #243040; } 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:#151D2B; --panel:#111722; --mut:#8B99AD; } html[data-theme="dark"] table tr:hover td { background: #151D2B; } html[data-theme="dark"] table.reg tbody tr:hover td { background: #151D2B; } html[data-theme="dark"] .tab { background: #151D2B; } 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: 15px; line-height: 1.5; } /* ================= 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; --kpi-min: 135px; } html[data-layout="compact"] th { padding: 4px 8px; font-size: 12px; } 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: var(--on-gold); 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: 13px; } 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: 12px; 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: 13px; 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: 13px; } 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: 13px; 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: 13px; padding: 5px 7px; } html.embed .filters > div, html.embed .grid > div { min-width: 0 !important; } html.embed .grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } html.embed .kpis { gap: 8px !important; --kpi-min: calc(50% - 8px); } html.embed .btn { padding: 5px 10px; font-size: 13px; } html.embed .tabbar { gap: 4px; } html.embed .tab { padding: 4px 9px; font-size: 12px; } 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: 12px; 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; } /* Meadow's and Portal's tints of the accent are the two darkest light ones: the house amber words read at 4.4:1 on them, this shade at 4.7:1 (a Needs-attention chip on a deal is amber on the tint). */ html:not([data-theme="dark"]):is([data-palette="meadow"], [data-palette="portal"]) { --amber: #845e0f; } /* Aurora — a dark, glassy identity; rides on dark mode with a cyan accent. --navy-2 is the colour of every link, and in the dark theme a light one (as every other palette's is): it was #141a3a, a surface's colour, so each link, a tenant's name on Tenants, "The lease PDF", read at 1.0 to 1.1:1 on the card (review of #145's follow-ups). */ html[data-theme="dark"][data-palette="aurora"] { --navy:#0a0e24; --navy-2:#7fd4f5; --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:#5F6266; } 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: 12px; } 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). */ /* --navy-2, the links, a light mint as the dark theme's links are: #101828 read at 1.0 to 1.1:1 on the card */ html[data-theme="dark"][data-palette="beacon"] { --navy:#06080f; --navy-2:#7fe6d0; --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: 12px; 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; } /* 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: 13px; } .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; } /* 📚 Set of books, next to the company (views/partials/head.ejs) */ .tb-books { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 12px; font-weight: 600; white-space: nowrap; } .tb-books select { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 8px; max-width: 230px; cursor: pointer; } .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; } /* Something wrong? in the drawer's own head (views/partials/foot.ejs): in reach whatever the drawer covers */ .help-prob { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 700; padding: 3px 8px; cursor: pointer; margin-right: 6px; } .help-prob:hover { border-color: var(--gold); color: var(--gold); } .help-prob-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .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: 13px; } .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; } /* What the words typed could mean, asked back: in the drawer (.help-q, .help-sec), and on the Help page and in search results (.hs-*, partials/help-suggest.ejs). A choice is a sentence, so it wraps. */ .help-q { margin: 2px 2px 8px; font-size: 14px; } .help-sec { margin: 14px 2px 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } a.help-item { display: block; color: inherit; text-decoration: none; } .hs-ask { border-left: 3px solid var(--gold); } .hs-q { margin: 0 0 9px; font-size: 15px; font-weight: 700; } .hs-choices { display: flex; flex-wrap: wrap; gap: 6px; } .hs-choices .btn { white-space: normal; line-height: 1.3; padding-top: 5px; padding-bottom: 5px; text-align: left; justify-content: flex-start; max-width: 100%; } .hs-note { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--muted); } .hp-find { display: flex; flex-direction: column; gap: 6px; } .hp-find label { font-weight: 700; font-size: 14px; } .hp-row { display: flex; gap: 8px; } .hp-row input { flex: 1 1 auto; min-width: 0; } .tb-bell { position: relative; } /* The bell's count: red while something is red, amber when nothing is (foot.ejs), each with the ink chosen for it. White on the dark theme's light red read at 2.9:1, and on its amber at 2.0:1 (review of #145). */ .bell-badge { position: absolute; top: -6px; right: -6px; background: var(--red); color: var(--on-red); border-radius: 10px; font-size: 12px; font-weight: 700; padding: 0 5px; min-width: 16px; text-align: center; line-height: 16px; } .bell-badge.amber { background: var(--amber-fill); color: var(--on-amber); } .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: 13px; } .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: 13px; 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: 13px; 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: 13px; color: var(--text); } .tb-role { display: block; font-size: 12px; 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: 12px; font-weight: 700; text-align: center; color: var(--on-gold); 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: 12px; } .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; } /* The lockup replaces type, so it is sized by height and lets its own aspect set the width. vertical-align keeps it on the baseline the text sat on. */ .brand .logo-img { height: 23px; width: auto; max-width: 100%; vertical-align: middle; } html[data-layout="compact"] .brand .logo-img, html[data-layout="desk"] .brand .logo-img { height: 20px; } html[data-layout="clarity"] .brand .logo-img { height: 26px; } .brand .logo span { color: var(--gold); } .brand .sub { font-size: 12px; color: #4F5B70; 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: 13px; 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: 12px; text-transform: uppercase; letter-spacing: 1px; color: #5A6B84; } .nav .hint { float: right; font-size: 12px; color: #5A6B84; 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: 13px; color: #4F5B70; } .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; } /* A row of tiles that does not divide evenly used to leave a grey shelf on the right: CSS grid keeps the empty tracks, so ten tiles across six columns orphaned four and showed the page behind the rest. Flex wrapping lets the last row's tiles grow into the space instead, so a row of figures always reaches both margins whatever the count. --kpi-min is the smallest a tile gets before the row wraps; each layout sets its own. */ .kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; --kpi-min: 160px; } .kpis > .kpi { flex: 1 1 var(--kpi-min); min-width: 0; } /* 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: 12px; 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; } /* Francis: "centre these KPI too, make them clickable everywhere possible" and "add some info to let the user know what it is, how it is calculated — not just there. Add help and ! everywhere, or mouse over." A figure with no explanation invites the wrong reading, and a figure that is the answer to a question should take you to the working. Three things, defined once so every screen gets them: the tile centres, a tile wrapped in a link behaves like a tile rather than a link, and a small ⓘ carries the explanation on hover without spending a line of the layout on it. */ .kpi { text-align: center; } .kpi .label { display: flex; align-items: center; justify-content: center; gap: 5px; } a.kpi, .kpi a.kpi-link { display: block; text-decoration: none; color: inherit; } a.kpi:hover, .kpi a.kpi-link:hover { border-color: var(--gold); } a.kpi:hover .value { color: var(--navy); } /* --navy is a surface in the dark theme: a figure under the pointer turned dark on the dark card, 1.1:1 */ html[data-theme="dark"] a.kpi:hover .value { color: var(--text); } .kpi .why { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; cursor: help; line-height: 1; flex: none; } .kpi .why:hover { border-color: var(--gold); color: var(--navy); } .kpi .sub { font-size: 12px; color: var(--muted); margin-top: 3px; } /* 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; } /* Rounded corners without turning the table into its own scroll box: `hidden` does that, and a pinned header inside a scroll box is measured from the table instead of the window, so it was pushed down over the rows. `clip` cuts the corners the same way and creates no scroll box (10 Sep 2026). */ @supports (overflow: clip) { table { overflow: clip; } /* Many screens round a card's corners with an inline overflow:hidden, which makes the card a scroll box and stops anything inside it pinning to the window. Clip does the rounding without that. */ .card[style*="overflow:hidden"], .card[style*="overflow: hidden"] { overflow: clip !important; } } .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: 12px; 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: 12px; } td input, td select { padding: 3px 6px; font-size: 12px; } /* Wide tables scroll inside their own box instead of running off the page. That used to be done by letting every card scroll sideways, which made every card a scroll box: anything pinned inside it, the list's search bar and the table's header, was then measured from the top of the card rather than the window, and landed on the column headings and the first row. Francis: "make sure ALL the tables are showing well, some still overlap" (10 Sep 2026). Now only a table that is actually too wide gets a scroll box of its own (wrapWide in views/partials/foot.ejs), and cards stay out of the way. */ .card { overflow-x: visible; } /* A long list's header pins just under its search bar; the offset is set on the table at runtime. */ table.lk-pin thead th { position: sticky !important; top: var(--lk-stick, 54px) !important; z-index: 5; background: var(--card); box-shadow: inset 0 -1px 0 var(--line); } /* 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: #151D2B; } /* extra-compact tables (audit, long ledgers) */ table.dense th { padding: 4px 8px; font-size: 12px; } table.dense td { padding: 3px 8px; font-size: 12px; } /* 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; } /* A section's screens side by side, at the top of each (views/partials/section-tabs.ejs, src/lib/sections.js): Trades and its paperwork, To do and its lists. A row of tabs, the open one underlined in gold; on a phone it scrolls on its own rather than pushing the page sideways. */ .sec-tabs { display: flex; gap: 2px; margin: 0 0 14px; border-bottom: 2px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .sec-tab { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px 7px; margin-bottom: -2px; white-space: nowrap; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; } .sec-tab:hover { color: var(--text); } .sec-tab.on { color: var(--text); border-bottom-color: var(--gold); } .sec-tab .nav-badge { margin-left: 2px; } .sec-tab .sec-ic { font-size: 13px; opacity: .8; } .sec-tab.on .sec-ic { opacity: 1; } /* the tab's icon as the menu draws it (sectionTabIcons in public/looks.js), in the colour of the tab's words */ .sec-ic .tic.tic-svg { display: inline-flex; align-items: center; } .sec-ic .tic.tic-svg svg { width: 15px; height: 15px; display: block; } @media print { .sec-tabs { display: none; } } /* On a phone the tabs wrap onto a second row rather than running past the screen: since 22 Oct 2026 a section holds up to eight (src/lib/sections.js), more than a 390 px strip shows. */ @media (max-width: 640px) { .sec-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; } .sec-tab { padding: 8px 10px 7px; } } /* All settings (/all-settings) and All of BF (/all): every setting, or every page, on one page with a box that finds one as you type (views/all-settings.ejs, views/all.ejs, public/allpages.js). The box stays in reach while the page scrolls. */ .allp-find { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 6px 0; position: sticky; top: var(--lk-stick, 0px); z-index: 5; background: var(--bg); } .allp-find input { flex: 1; max-width: 560px; font-size: 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); } .allp-find input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; } .allp-count { font-size: 13px; white-space: nowrap; } .allp-none { margin-bottom: 14px; } .allp-group { margin: 0 0 22px; } .allp-gh { font-size: 16px; margin: 0 0 2px; } .allp-gb { margin: 0 0 10px; font-size: 13px; } /* All settings: each group's settings as cards; the whole card opens it, its own parts open where they say */ .allp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .allp-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color .12s, box-shadow .12s; } .allp-card:hover, .allp-card:focus-within { border-color: var(--gold); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); } .allp-card .allp-main { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; } .allp-card .allp-main::after { content: ''; position: absolute; inset: 0; border-radius: 12px; } .allp-ic { font-size: 18px; width: 24px; text-align: center; flex: none; } .allp-blurb { color: var(--muted); font-size: 13px; margin-top: 4px; line-height: 1.4; } .allp-parts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 13px; } .allp-parts a { text-decoration: none; } .allp-parts a:hover { text-decoration: underline; } /* All of BF: the menu's groups side by side, each a card of its lines; a line that stands for several pages lists them under it */ .allp-cols { columns: 3 300px; column-gap: 14px; } .allp-cols .allp-group { break-inside: avoid; display: inline-block; width: 100%; box-sizing: border-box; margin: 0 0 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .allp-cols .allp-gh { margin-bottom: 6px; } .allp-row { padding: 6px 0; border-top: 1px solid var(--line); } .allp-gh + .allp-row { border-top: 0; } .allp-row > .allp-main { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; } .allp-row > .allp-main:hover .allp-name { text-decoration: underline; } .allp-row .nav-badge { margin-left: 2px; } .allp-ext { font-size: 12px; color: var(--muted); } .allp-sub { display: flex; flex-wrap: wrap; gap: 5px 6px; margin: 5px 0 2px 32px; } .allp-sub a { font-size: 13px; padding: 2px 9px; border-radius: 999px; background: var(--panel); color: var(--text); text-decoration: none; border: 1px solid var(--line); } .allp-sub a:hover { border-color: var(--gold); } .allp-subh { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 4px; } .allp-off { display: none !important; } @media (max-width: 560px) { .allp-sub { margin-left: 0; } .allp-find { flex-wrap: wrap; } } @media print { .allp-find, .allp-none { display: none; } } 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: 12px; } 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 */ /* 54px was the height of the one topbar this app had when the rule was written. Layouts since then are taller, and in the pane layouts the content scrolls in its own box — where an offset measured from the window pushes the pinned header down INTO the table, so it sits on top of the second row. The offset is measured at runtime (looks.js sets --lk-stick), and a table inside its own scrollport is pinned at its own top. */ table.reg thead th { position: sticky; top: var(--lk-stick, 54px); z-index: 5; background: var(--card); box-shadow: inset 0 -1px 0 var(--line); } table.reg.reg-inpane thead th { top: 0; } /* A table inside its own sideways scroller pins its heading to that box, not the window: the window's offset there pushed the heading down over the rows, below an empty table's only line (FT Ventures Bank Import, 23 Oct 2026). */ :is(.tbl-scroll, div[style*="overflow-x:auto"], div[style*="overflow-x: auto"]) > table.reg thead th { top: 0; } /* Inside a wrapper that clips but does not scroll vertically there is nothing to pin against, and pinning anyway lands the header on the first row. */ table.reg.reg-nostick thead th { position: static; } @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: 12px; } .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: 13px; 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: 13px; margin-bottom: 3px; } .xp-pop .xp-c { opacity: .95; } .xp-pop .xp-f { margin-top: 5px; font-size: 12px; opacity: .72; } .xp-pop .xp-f span { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; opacity: .8; } .xp-pop .xp-n { margin-top: 5px; font-size: 12px; opacity: .8; font-style: italic; } .xp-pop .xp-go { margin-top: 6px; font-size: 12px; 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: 12px; font-weight: 600; white-space: nowrap; } .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: 13px; 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: 13px; 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