/*
 * BrightMatch client app theme: one stylesheet, no images, no web fonts, nothing loaded from elsewhere (the CSP allows only this site).
 * Colours are variables: light by default, dark with <html data-theme="dark"> (or "auto" on a device set to dark), and the accent colour from
 * <html class="accent-..."> (Settings > Appearance). Layout: a sidebar (views/layout.php) and the page; on narrow screens the sidebar slides in.
 */

/* ---- Colours ------------------------------------------------------------------------------ */
:root {
    color-scheme: light;
    --bg: #f3f5f9;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #eef2f7;
    --text: #1d2939;
    --muted: #5b6b80;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --accent: #1f3a73;
    --accent-strong: #172c58;
    --accent-text: #ffffff;
    --accent-ink: #1f3a73;          /* accent used as text on the page background */
    --ok: #157347;
    --ok-bg: #e8f6ee;
    --err: #b42318;
    --err-bg: #fdecea;
    --sidebar: #ffffff;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --radius: 10px;
    --radius-sm: 6px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.accent-blue     { --accent: #1d4ed8; --accent-strong: #1e40af; --accent-ink: #1d4ed8; }
.accent-teal     { --accent: #0f766e; --accent-strong: #115e59; --accent-ink: #0f766e; }
.accent-green    { --accent: #15803d; --accent-strong: #166534; --accent-ink: #15803d; }
.accent-purple   { --accent: #6d28d9; --accent-strong: #5b21b6; --accent-ink: #6d28d9; }
.accent-burgundy { --accent: #9f1239; --accent-strong: #881337; --accent-ink: #9f1239; }
.accent-orange   { --accent: #c2410c; --accent-strong: #9a3412; --accent-ink: #c2410c; }
.accent-slate    { --accent: #334155; --accent-strong: #1e293b; --accent-ink: #334155; }

/* dark: chosen, or "auto" on a device that prefers dark */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1420; --surface: #171d2b; --surface-2: #1c2333; --surface-3: #232c3f; --text: #e5e9f0; --muted: #98a3b6;
    --border: #2a3448; --border-strong: #3a465d; --ok: #4ade80; --ok-bg: #12291d; --err: #f87171; --err-bg: #2c1515; --sidebar: #131926;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4); --accent-ink: #8fb0ff;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        color-scheme: dark;
        --bg: #0f1420; --surface: #171d2b; --surface-2: #1c2333; --surface-3: #232c3f; --text: #e5e9f0; --muted: #98a3b6;
        --border: #2a3448; --border-strong: #3a465d; --ok: #4ade80; --ok-bg: #12291d; --err: #f87171; --err-bg: #2c1515; --sidebar: #131926;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4); --accent-ink: #8fb0ff;
    }
}
html[data-theme="dark"].accent-navy, html[data-theme="dark"]:not([class*="accent-"]) { --accent: #3b5fb0; --accent-strong: #2f4f99; }
html[data-theme="dark"].accent-slate { --accent: #475569; --accent-ink: #cbd5e1; }
html[data-theme="dark"].accent-teal { --accent-ink: #5eead4; }
html[data-theme="dark"].accent-green { --accent-ink: #86efac; }
html[data-theme="dark"].accent-purple { --accent-ink: #c4b5fd; }
html[data-theme="dark"].accent-burgundy { --accent-ink: #fda4af; }
html[data-theme="dark"].accent-orange { --accent-ink: #fdba74; }
html[data-theme="dark"].accent-blue { --accent-ink: #93c5fd; }
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"].accent-navy { --accent: #3b5fb0; --accent-strong: #2f4f99; }
    html[data-theme="auto"].accent-slate { --accent: #475569; --accent-ink: #cbd5e1; }
    html[data-theme="auto"].accent-teal { --accent-ink: #5eead4; }
    html[data-theme="auto"].accent-green { --accent-ink: #86efac; }
    html[data-theme="auto"].accent-purple { --accent-ink: #c4b5fd; }
    html[data-theme="auto"].accent-burgundy { --accent-ink: #fda4af; }
    html[data-theme="auto"].accent-orange { --accent-ink: #fdba74; }
    html[data-theme="auto"].accent-blue { --accent-ink: #93c5fd; }
}

/* ---- Base --------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: .9375rem; line-height: 1.5; color: var(--text); background: var(--bg); }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 1.1rem; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 1.8rem 0 .7rem; font-weight: 650; }
h3 { font-size: 1rem; margin: 1.2rem 0 .5rem; }
p { margin: 0 0 .8rem; }
small { color: var(--muted); }
code, pre, .usercode, textarea.script { font-family: var(--mono); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-text); padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: .5rem; top: .5rem; }
.icon { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- App layout: sidebar + page ----------------------------------------------------------- */
body.app { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--sidebar); border-right: 1px solid var(--border); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: .65rem; padding: 1.1rem 1.1rem .9rem; font-weight: 700; font-size: 1.02rem; }
.brand-mark { display: inline-grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 9px; background: var(--accent); color: var(--accent-text); font-weight: 700; }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav { display: flex; flex-direction: column; gap: 2px; padding: .4rem .7rem; flex: 1; }
.side-nav a { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: var(--radius-sm); color: var(--text); font-weight: 500; }
.side-nav a:hover { background: var(--surface-3); text-decoration: none; }
.side-nav a.active { background: var(--accent); color: var(--accent-text); }
.side-nav a .icon { color: var(--muted); }
.side-nav a.active .icon { color: var(--accent-text); }
.side-nav .count { margin-left: auto; background: var(--err); color: #fff; border-radius: 999px; font-size: .72rem; padding: 0 .45rem; font-weight: 700; }
.side-sep { height: 1px; background: var(--border); margin: .5rem .3rem; }
.side-user { border-top: 1px solid var(--border); padding: .8rem 1rem 1rem; }
.side-user .who { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.side-user .who strong { display: block; line-height: 1.2; }
.side-user .who small { display: block; }
.avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-3); color: var(--text); font-weight: 700; flex: none; }
.side-actions { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; font-size: .9rem; }
.main-col { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .5rem 2rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); }
.menu-btn { display: none; }
.crumbs { font-size: .88rem; color: var(--muted); margin: 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-ink); }
.crumbs [aria-current] { color: var(--text); font-weight: 600; }
.crumb-sep { margin: 0 .25rem; opacity: .6; }
main { padding: 1.6rem 2rem 3rem; width: 100%; min-width: 0; }   /* no width cap: data tables use the whole window */

/* guest (sign-in) page */
body.guest { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.guest-card { width: min(26.25rem, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 1.8rem 2rem; }
.guest-card main { padding: 0; }
.guest-card .brand { padding: 0 0 1rem; }
.guest-card input[type=text], .guest-card input[type=password] { width: 100%; }

@media (max-width: 900px) {
    body.app { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: fixed; inset: 0 auto 0 0; width: 16.875rem; z-index: 30; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 30px rgba(0, 0, 0, .25); }
    body.nav-open .sidebar { transform: none; }
    body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 20; }
    .menu-btn { display: inline-flex; }
    .topbar { padding: .5rem 1rem; }
    main { padding: 1.1rem 1rem 2.5rem; }
    h1 { font-size: 1.35rem; }
}
/* without JavaScript the menu button cannot open the sidebar: show it above the page instead */
@media (max-width: 900px) { html:not(.js) .sidebar { position: static; transform: none; width: auto; height: auto; box-shadow: none; } html:not(.js) .menu-btn { display: none; } }

/* ---- Messages ----------------------------------------------------------------------------- */
.flash { padding: .7rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--border); border-left-width: 4px; background: var(--surface); }
.flash.ok { border-color: var(--ok); background: var(--ok-bg); color: var(--text); }
.flash.error { border-color: var(--err); background: var(--err-bg); color: var(--text); }
.error { color: var(--err); }
span.error { font-size: .88rem; margin-left: .4rem; }

/* ---- Menus under the title: tabs (.subnav) and action buttons (.actions) ------------------ */
.sep { display: none; }
/* the tab bar is drawn in the accent colour: a light wash of it, the tab you are on filled with it */
p.subnav { display: flex; flex-wrap: wrap; gap: .25rem; margin: -.3rem 0 1.6rem; padding: .3rem; background: var(--tab-bg); border: 1px solid var(--tab-border); border-radius: var(--radius); width: fit-content; max-width: 100%; }
p.subnav a { padding: .35rem .8rem; border-radius: var(--radius-sm); color: var(--tab-text); font-weight: 500; font-size: .92rem; }
p.subnav a:hover { color: var(--tab-text); text-decoration: none; background: var(--tab-hover); }
p.subnav a[aria-current="page"] { background: var(--accent); color: var(--accent-text); box-shadow: var(--shadow); }
p.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
p.actions a { display: inline-flex; align-items: center; padding: .4rem .85rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 500; font-size: .92rem; }
p.actions a:hover { border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }
/* a single link that is an action (Cancel beside Save, Reschedule in a table, ...) looks like the buttons in an actions row */
p.actions a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }   /* the chosen one in a switch row (Failures | Successes, Active (12) | ...) */
a.btn { display: inline-flex; align-items: center; padding: .4rem .85rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 500; font-size: .92rem; line-height: 1.3; vertical-align: middle; white-space: nowrap; }
a.btn:hover { border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }
a.btn.small { padding: .2rem .6rem; font-size: .85rem; }
td a.btn { margin: .15rem .3rem .15rem 0; }
p.actions + p.actions { margin-top: -.4rem; }

/* ---- Forms -------------------------------------------------------------------------------- */
fieldset { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 1rem 1.2rem .4rem; margin: 0 0 1.1rem; box-shadow: var(--shadow); min-width: 0; }
legend { font-weight: 650; padding: 0 .4rem; }
fieldset h3 { margin: .2rem 0 .6rem; font-size: 1.02rem; }
label { font-weight: 500; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], input[type=url], select, textarea {
    font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: .45rem .6rem; margin-top: .2rem; max-width: 100%;
}
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=search], input[type=url], select { width: 24rem; }
textarea { width: 100%; max-width: 46rem; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 1rem; height: 1rem; vertical-align: -2px; }
input[readonly], textarea[readonly] { background: var(--surface-2); }
button, input[type=submit] {
    font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text);
    border-radius: var(--radius-sm); padding: .45rem .95rem; line-height: 1.3;
}
button:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
button.ghost, button[type="button"]:not([data-copy]):not([data-genpw]) { background: transparent; color: var(--text); border-color: var(--border-strong); font-weight: 500; }
button.ghost:hover, button[type="button"]:not([data-copy]):not([data-genpw]):hover { background: var(--surface-3); }
.side-actions button.ghost { padding: .2rem .55rem; font-size: .85rem; }
form.inline { display: inline; }
form.inline + form.inline { margin-left: .35rem; }
details { margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .9rem; }
details[open] { padding-bottom: .9rem; }
summary { cursor: pointer; font-weight: 600; }
details details { margin-left: 0; background: var(--surface-2); }
textarea.script { font-size: .85rem; }
.usercode { font-size: 1.8rem; letter-spacing: .18rem; padding: .1rem .5rem; background: var(--surface-3); border-radius: var(--radius-sm); }
pre { white-space: pre-wrap; max-height: 20rem; overflow: auto; margin: 0; }
pre.mailbody { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .7rem; background: var(--surface); }

/* ---- Tables ------------------------------------------------------------------------------- */
table { border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 1.2rem; font-size: .93rem; max-width: 100%; }
th, td { padding: .55rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
tr:last-child > td, tr:last-child > th { border-bottom: 0; }
th { font-weight: 600; color: var(--muted); background: var(--surface-2); }
/* a data table: the first row is the heading row (the script marks these tables .data and wraps them) */
table.data { width: 100%; }
table.data > tbody > tr:first-child > th, table.data > tr:first-child > th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
table.data tr:not(:first-child):hover > td { background: var(--surface-2); }
/* a details table (label | value per row) */
table:not(.data) > tbody > tr > th:first-child { width: 1%; white-space: nowrap; }
.table-wrap { overflow: auto; margin: 0 0 1.2rem; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--surface); }
.table-wrap > table { margin: 0; border: 0; box-shadow: none; border-radius: 0; }
.table-wrap.tall { max-height: 72vh; }
.table-wrap table.data tr:first-child > th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--border); }
th[data-sortable] { cursor: pointer; user-select: none; }
th[data-sortable]:hover { color: var(--text); }
th .arrow { font-size: .7rem; margin-left: .2rem; }
th a.sort { color: inherit; display: inline-block; }
th a.sort:hover { color: var(--text); text-decoration: none; }
th[aria-sort] { color: var(--accent-ink); }
.table-tools { display: flex; align-items: center; gap: .7rem; margin: 0 0 .5rem; }
.table-tools input[type=search] { width: 18rem; margin: 0; padding: .35rem .6rem; }
.table-tools .table-count { color: var(--muted); font-size: .85rem; }
.table-tools:has(.table-count:empty) { display: none; }
td.nowrap { white-space: nowrap; }   /* e.g. the audit log's 2026-10-14-13-05 stays on one line */   /* only "3 of 40" while a filter is in use: no empty gap above the table otherwise */
tr.no-match { display: none; }
td.note { max-width: 40rem; }
tr.filters th { padding: .3rem; font-weight: normal; background: var(--surface); text-transform: none; letter-spacing: 0; }
tr.filters input[type=text], tr.filters input[type=date], tr.filters select { width: 100%; min-width: 5.5rem; font-size: .85rem; padding: .25rem .4rem; margin: 0; }
tr.filters input[type=date] { display: block; margin-bottom: .15rem; }
table.days { width: auto; box-shadow: none; }
table.days th, table.days td { text-align: center; width: 2.6rem; padding: .3rem; }
table.month { width: 100%; table-layout: fixed; }
table.month td { font-size: .85rem; height: 6rem; }
table.month th { text-align: center; }

/* ---- Small screens: tables scroll sideways inside their box -------------------------------- */
@media (max-width: 900px) {
    input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=search], input[type=url], select { width: 100%; }
    .table-tools { flex-wrap: wrap; }
    .table-tools input[type=search] { width: 100%; }
    table { display: block; overflow-x: auto; }
    .table-wrap > table { display: table; }
}

/* ---- Print: just the page ------------------------------------------------------------------ */
@media print {
    body.app { display: block; }
    .sidebar, .topbar, .table-tools, form button { display: none !important; }
    main { padding: 0; }
    table, fieldset, .table-wrap { box-shadow: none; }
}

/* ---- Settings > Appearance: colour choices ------------------------------------------------- */
.swatches { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.swatch { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface); }
.swatch .chip { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--accent); }
.swatch:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.swatch.accent-navy { --accent: #1f3a73; }

/* ---- Rows of step filters ("Show: All steps | 1. Job Posting (3) > ..."): the steps are pills, the chosen one filled ---------- */
p.steps { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .3rem; color: var(--muted); font-size: .92rem; }
p.steps a { padding: .2rem .65rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
p.steps a:hover { border-color: var(--accent); text-decoration: none; }
p.steps a:has(strong) { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
p.subnav a:has(> strong) { background: var(--accent); color: var(--accent-text); box-shadow: var(--shadow); }
p.subnav strong { font-weight: inherit; }

/* ---- Search / filter forms at the top of a list: one row ---------------------------------- */
main > form[method="get"] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 0 0 1rem; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
main > form[method="get"] label { display: inline-flex; align-items: center; gap: .4rem; }
main > form[method="get"] input[type=text], main > form[method="get"] input[type=search] { width: 16rem; margin: 0; }
main > form[method="get"] select, main > form[method="get"] input[type=date] { width: auto; margin: 0; }
main > form[method="get"] p { margin: 0; }

/* the top bar only holds the breadcrumbs (and the menu button on narrow screens) */
@media (min-width: 901px) { .topbar:not(:has(.crumbs)) { display: none; } }
hr.side-sep { border: 0; }

/* ---- Complete column of the workflow tables: the percentage and a progress bar ------------- */
td.complete { white-space: nowrap; min-width: 9.5rem; }
td.complete .pct { display: inline-block; min-width: 2.6rem; font-variant-numeric: tabular-nums; }
progress { -webkit-appearance: none; appearance: none; width: 6rem; height: 8px; vertical-align: middle; border: 0; border-radius: 999px; background: var(--surface-3); overflow: hidden; color: var(--accent); }
progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
progress[value="100"]::-webkit-progress-value { background: var(--ok); }
progress[value="100"]::-moz-progress-bar { background: var(--ok); }

/* ---- Wide windows: data tables stretch to the full width; forms and folded boxes keep a readable width --------------------- */
.table-wrap, table.data { width: 100%; }
fieldset, details { max-width: 72rem; }
main > form[method="get"] { max-width: none; }

/* ---- Table scrollbars: thicker and always shown (Windows hides thin overlay scrollbars until hovered) ------------------------
   Chromium / Edge use the ::-webkit-scrollbar rules (they ignore them as soon as scrollbar-color is set, so that is only given to Firefox). */
:root { --scroll-thumb: #8794a8; --scroll-thumb-hover: #5b6b80; --scroll-track: #e3e8ef; }
html[data-theme="dark"] { --scroll-thumb: #67779a; --scroll-thumb-hover: #8494b5; --scroll-track: #252e42; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --scroll-thumb: #67779a; --scroll-thumb-hover: #8494b5; --scroll-track: #252e42; } }
.table-wrap::-webkit-scrollbar, table::-webkit-scrollbar { width: 14px; height: 14px; }
.table-wrap::-webkit-scrollbar-track, table::-webkit-scrollbar-track { background: var(--scroll-track); }
.table-wrap::-webkit-scrollbar-thumb, table::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 3px solid var(--scroll-track); }
.table-wrap::-webkit-scrollbar-thumb:hover, table::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
.table-wrap::-webkit-scrollbar-corner, table::-webkit-scrollbar-corner { background: var(--scroll-track); }
@supports not selector(::-webkit-scrollbar) {
    .table-wrap, table { scrollbar-width: auto; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
}

/* ---- The horizontal scrollbar pinned to the bottom of the window for a table wider than the page (app.js addFloatingBar) ------ */
.table-box { margin: 0 0 1.2rem; }
.table-box > .table-wrap { margin-bottom: 0; }
.table-box.overflowing > .table-wrap::-webkit-scrollbar:horizontal { height: 0; }   /* the pinned bar below replaces the table's own */
.hscroll { position: sticky; bottom: 0; z-index: 4; overflow-x: auto; overflow-y: hidden; height: 16px; margin-top: 4px; background: var(--scroll-track); border-radius: 8px; box-shadow: 0 -2px 6px rgba(0, 0, 0, .06); }
.hscroll > div { height: 1px; }
.hscroll::-webkit-scrollbar { height: 16px; }
.hscroll::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 8px; }
.hscroll::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 3px solid var(--scroll-track); }
.hscroll::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
@supports not selector(::-webkit-scrollbar) { .hscroll { scrollbar-width: auto; scrollbar-color: var(--scroll-thumb) var(--scroll-track); } }
@media print { .hscroll { display: none !important; } }

/* ---- Scrollbars stay inside the box's rounded corners, and the vertical one starts below the heading row (--head-h set by app.js) --- */
.table-wrap::-webkit-scrollbar-track:vertical { margin-top: var(--head-h, 40px); margin-bottom: 8px; }
.table-wrap::-webkit-scrollbar-track:horizontal { margin-left: 8px; margin-right: 8px; }
.table-wrap::-webkit-scrollbar-corner { background: transparent; }
/* The vertical scrollbar starts below the headings, so the strip beside them shows the box's own background: paint it like the heading row,
   then the filter row, with their lines (heights measured by app.js: --row1-h, --head-h), so the headings run right to the edge. */
.table-wrap {
    background: linear-gradient(to bottom,
        var(--head-bg) 0 calc(var(--row1-h, 38px) - 1px),
        var(--border) calc(var(--row1-h, 38px) - 1px) var(--row1-h, 38px),
        var(--surface-2) var(--row1-h, 38px) calc(var(--head-h, 38px) - 1px),
        var(--border) calc(var(--head-h, 38px) - 1px) var(--head-h, 38px),
        var(--surface) var(--head-h, 38px)) no-repeat, var(--surface);
}
.hscroll::-webkit-scrollbar-track { margin-left: 6px; margin-right: 6px; }
.hscroll { border: 1px solid var(--border); }
/* ---- Filter row under the headings of a workflow table (app.js, table[data-filters]) ----------------------------------------- */
.table-wrap tr.filters th { position: sticky; top: var(--row1-h, 38px); z-index: 1; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--border); }
tr.filters select, tr.filters input[type=search] { width: 100%; min-width: 6rem; font-size: .85rem; padding: .25rem .4rem; margin: 0; }
tr.filters input[type=search]::placeholder { color: var(--muted); opacity: .8; }

/* ---- The compact suggestion list under a header filter box (app.js attachSuggestions) --------------------------------------- */
.filter-menu { position: fixed; z-index: 60; max-height: 13rem; max-width: 22rem; overflow-y: auto; padding: 3px 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: 0 6px 18px rgba(16, 24, 40, .16); font-size: .82rem; line-height: 1.3; }
.filter-menu > div { padding: .28rem .65rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.filter-menu > div:hover, .filter-menu > div.active { background: var(--surface-3); }
.filter-menu::-webkit-scrollbar { width: 10px; }
.filter-menu::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 6px; border: 2px solid var(--surface); }

/* ---- Table heading colour (Settings > Appearance: html.thead-subtle | thead-tint | thead-bold), the same in light and dark ---- */
:root { --head-bg: var(--surface-2); --head-text: var(--muted); }
.thead-tint { --head-bg: color-mix(in srgb, var(--accent) 13%, var(--surface)); --head-text: var(--accent-ink); }
.thead-bold { --head-bg: var(--accent); --head-text: var(--accent-text); }
html[data-theme="dark"].thead-tint { --head-bg: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"].thead-tint { --head-bg: color-mix(in srgb, var(--accent) 30%, var(--surface)); } }
table.data > tbody > tr:first-child > th, table.data > tr:first-child > th { background: var(--head-bg); color: var(--head-text); }
table.data tr:first-child > th a.sort, table.data tr:first-child > th[aria-sort], table.data tr:first-child > th[data-sortable]:hover { color: var(--head-text); }
.thead-bold table.data tr:first-child > th { box-shadow: none; }
/* the samples on the Appearance page */
.head-swatch .head-sample { display: inline-block; padding: .15rem .55rem; border-radius: 4px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: var(--head-bg); color: var(--head-text); border: 1px solid var(--border); }

/* ---- Row hover: the menu's hover colour (--surface-3), in light and dark -------------------------------------------- */
table.data tr:not(:first-child):not(.filters):hover > td { background: var(--surface-3); }   /* the same colour as hovering a menu item */


/* ---- New-item colour: "New ..." / "Add ..." buttons and links (Settings > Appearance: html.new-green | orange | pink | darkred | darkblue)
   Each has a light and a dark version: the bright ones get lighter with dark button text in dark mode; dark red and dark blue keep white text
   and step up a shade (with a light link colour) so they still stand out on the dark background. */
:root, .new-green { --new-bg: #16a34a; --new-bg-hover: #15803d; --new-text: #ffffff; --new-ink: #15803d; }
.new-orange { --new-bg: #ea580c; --new-bg-hover: #c2410c; --new-text: #ffffff; --new-ink: #c2410c; }
.new-pink { --new-bg: #ec4899; --new-bg-hover: #db2777; --new-text: #ffffff; --new-ink: #db2777; }
.new-darkred { --new-bg: #991b1b; --new-bg-hover: #7f1d1d; --new-text: #ffffff; --new-ink: #991b1b; }
.new-darkblue { --new-bg: #1e3a8a; --new-bg-hover: #172554; --new-text: #ffffff; --new-ink: #1e40af; }
html[data-theme="dark"].new-green, html[data-theme="dark"] .new-green { --new-bg: #22c55e; --new-bg-hover: #4ade80; --new-text: #052e16; --new-ink: #4ade80; }
html[data-theme="dark"].new-orange, html[data-theme="dark"] .new-orange { --new-bg: #fb923c; --new-bg-hover: #fdba74; --new-text: #431407; --new-ink: #fdba74; }
html[data-theme="dark"].new-pink, html[data-theme="dark"] .new-pink { --new-bg: #f472b6; --new-bg-hover: #f9a8d4; --new-text: #500724; --new-ink: #f9a8d4; }
html[data-theme="dark"].new-darkred, html[data-theme="dark"] .new-darkred { --new-bg: #b91c1c; --new-bg-hover: #dc2626; --new-text: #ffffff; --new-ink: #f87171; }
html[data-theme="dark"].new-darkblue, html[data-theme="dark"] .new-darkblue { --new-bg: #1d4ed8; --new-bg-hover: #2563eb; --new-text: #ffffff; --new-ink: #93c5fd; }
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"].new-green, html[data-theme="auto"] .new-green { --new-bg: #22c55e; --new-bg-hover: #4ade80; --new-text: #052e16; --new-ink: #4ade80; }
    html[data-theme="auto"].new-orange, html[data-theme="auto"] .new-orange { --new-bg: #fb923c; --new-bg-hover: #fdba74; --new-text: #431407; --new-ink: #fdba74; }
    html[data-theme="auto"].new-pink, html[data-theme="auto"] .new-pink { --new-bg: #f472b6; --new-bg-hover: #f9a8d4; --new-text: #500724; --new-ink: #f9a8d4; }
    html[data-theme="auto"].new-darkred, html[data-theme="auto"] .new-darkred { --new-bg: #b91c1c; --new-bg-hover: #dc2626; --new-text: #ffffff; --new-ink: #f87171; }
    html[data-theme="auto"].new-darkblue, html[data-theme="auto"] .new-darkblue { --new-bg: #1d4ed8; --new-bg-hover: #2563eb; --new-text: #ffffff; --new-ink: #93c5fd; }
}
p.actions a.new-item, a.btn.new-item, button.new-item { background: var(--new-bg); border-color: var(--new-bg); color: var(--new-text); font-weight: 600; }
p.actions a.new-item:hover, a.btn.new-item:hover, button.new-item:hover { background: var(--new-bg-hover); border-color: var(--new-bg-hover); color: var(--new-text); text-decoration: none; }
main a.new-item { color: var(--new-ink); font-weight: 600; }
p.actions a.new-item, main a.btn.new-item { color: var(--new-text); }
.new-sample { display: inline-block; padding: .15rem .6rem; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 600; background: var(--new-bg); color: var(--new-text); }

/* ---- Left menu, translucent (Settings > Appearance: html.menu-glass): frosted glass (a light white tint, 12px blur of the page behind,
   and a fine grain: noise.svg, an SVG noise tile drawn at 15% opacity), over a soft wash of the accent colour in the page behind it.
   The grain is a file, not a data: URL, because the CSP allows images from this site only; it is a background layer rather than a
   ::before overlay so it stays under the menu text and covers the menu when it scrolls. ------------------------------------------------ */
:root { --glass-bg: rgba(255, 255, 255, .2); --glass-edge: rgba(255, 255, 255, .3); }
html[data-theme="dark"] { --glass-bg: rgba(255, 255, 255, .04); --glass-edge: rgba(255, 255, 255, .08); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --glass-bg: rgba(255, 255, 255, .04); --glass-edge: rgba(255, 255, 255, .08); } }
html.menu-glass body.app {
    background:
        radial-gradient(900px 620px at -8% -6%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
        radial-gradient(700px 520px at -6% 108%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}
html.menu-glass .sidebar {
    background: url(noise.svg), var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid var(--glass-edge);
}
/* the signed-in person at the bottom of the menu stays matte: a solid panel, no grain, nothing showing through */
html.menu-glass .side-user { background: var(--sidebar); border-top-color: var(--border); }
html.menu-glass .side-nav a:hover { background: color-mix(in srgb, var(--surface-3) 75%, transparent); }
@media (max-width: 900px) { html.menu-glass .sidebar { background-color: color-mix(in srgb, var(--sidebar) 80%, transparent); } }

/* ---- Page scale (My Account > Page scale, per person: html.scale-80 ... scale-150). Sizes are in rem, so the whole page follows the root font size. */
html.scale-80 { font-size: 80%; }
html.scale-90 { font-size: 90%; }
html.scale-110 { font-size: 110%; }
html.scale-125 { font-size: 125%; }
html.scale-150 { font-size: 150%; }

/* ---- Raised menus: the tab bar under each page title and the left menu sit above the page with a soft shadow ------------------------ */
/* The bar's shadow is kept short (it ends about 8px below the bar) and the bar has 1.6rem of space under it, so it never reaches the buttons or table below. */
:root {
    --raise-bar: 0 1px 2px rgba(16, 24, 40, .08), 0 3px 8px -3px rgba(16, 24, 40, .18); --raise-side: 6px 0 24px -8px rgba(16, 24, 40, .22);
    --tab-bg: color-mix(in srgb, var(--accent) 10%, var(--surface)); --tab-hover: color-mix(in srgb, var(--accent) 20%, var(--surface));
    --tab-border: color-mix(in srgb, var(--accent) 22%, var(--border)); --tab-text: var(--accent-ink);
}
html[data-theme="dark"] {
    --raise-bar: 0 1px 2px rgba(0, 0, 0, .5), 0 3px 8px -3px rgba(0, 0, 0, .65); --raise-side: 8px 0 26px -8px rgba(0, 0, 0, .75);
    --tab-bg: color-mix(in srgb, var(--accent) 22%, var(--surface)); --tab-hover: color-mix(in srgb, var(--accent) 38%, var(--surface));
    --tab-border: color-mix(in srgb, var(--accent) 40%, var(--border)); --tab-text: color-mix(in srgb, var(--accent-ink) 35%, var(--text));
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --raise-bar: 0 1px 2px rgba(0, 0, 0, .5), 0 3px 8px -3px rgba(0, 0, 0, .65); --raise-side: 8px 0 26px -8px rgba(0, 0, 0, .75);
        --tab-bg: color-mix(in srgb, var(--accent) 22%, var(--surface)); --tab-hover: color-mix(in srgb, var(--accent) 38%, var(--surface));
        --tab-border: color-mix(in srgb, var(--accent) 40%, var(--border)); --tab-text: color-mix(in srgb, var(--accent-ink) 35%, var(--text));
    }
}
p.subnav { box-shadow: var(--raise-bar); }
@media (min-width: 901px) { body.app .sidebar { box-shadow: var(--raise-side); z-index: 6; } }