/* ── Themes ──────────────────────────────────────────────────────────────
Dark is the default (no data-theme). Light, Sepia and Midnight are opt-in
via , chosen in the topbar picker and stored per-browser.
Every surface reads these ~14 tokens, so a theme is just a palette swap. */
:root, :root[data-theme="dark"] { /* Dark — slate navy (default) */
color-scheme: dark;
--bg: #0f172a; --panel: #1e293b; --panel2: #172033; --border: #334155;
--text: #e2e8f0; --heading: #ffffff; --muted: #94a3b8;
--brand: #e11d2a; --brand2: #f59e0b; --ok: #34d399; --bad: #f87171;
--link: #93c5fd; --code-bg: #0b1220; --code-text: #cbd5e1;
--hl-bg: #4a3a12; --hl-fg: #ffe9a8; /* marker highlight (dark) */
/* chip/badge/tile system — every status pill, action tile and sunken input
reads these instead of literal hex, so switching themes recolors them too */
--surface-2: #0f1728; --chip-bg: #334155; --chip-fg: #cbd5e1; --chip-hover: #26344933;
--tag-green-bg: #14532d; --tag-green-fg: #86efac; --tag-green-soft: #14532d33;
--tag-red-bg: #45150f; --tag-red-fg: #fca5a5; --tag-red-soft: #45150f4d;
--tag-amber-bg: #3f3f14; --tag-amber-fg: #fde68a; --tag-amber-soft: #7c2d1233; --tag-amber-border: #92660a;
--tag-blue-bg: #1e3a5f; --tag-blue-fg: #bfdbfe; --tag-blue-soft: #1e3a8a33;
--tag-purple-bg: #3b2a4a; --tag-purple-fg: #e9d5ff;
--notice-bg: #172554; --notice-border: #1e3a8a; --notice-fg: #bfdbfe;
--row-stale-bg: #2a1410; --imp-bg: #7c2d12; --imp-fg: #fed7aa;
}
:root[data-theme="light"] { /* Light — clean cool slate */
color-scheme: light;
--bg: #eef2f7; --panel: #ffffff; --panel2: #f6f9fc; --border: #d5dde8;
--text: #26313f; --heading: #0f172a; --muted: #607089;
--brand: #e11d2a; --brand2: #d97706; --ok: #059669; --bad: #dc2626;
--link: #2563eb; --code-bg: #0f172a; --code-text: #e2e8f0;
--hl-bg: #fff3a8; --hl-fg: #3a2f00; /* marker highlight (light) */
--surface-2: #e4e9f0; --chip-bg: #e2e8f0; --chip-fg: #475569; --chip-hover: #33415522;
--tag-green-bg: #d1fae5; --tag-green-fg: #065f46; --tag-green-soft: #05966926;
--tag-red-bg: #fee2e2; --tag-red-fg: #991b1b; --tag-red-soft: #dc262626;
--tag-amber-bg: #fef3c7; --tag-amber-fg: #92400e; --tag-amber-soft: #d9770626; --tag-amber-border: #d97706;
--tag-blue-bg: #dbeafe; --tag-blue-fg: #1e40af; --tag-blue-soft: #2563eb26;
--tag-purple-bg: #ede9fe; --tag-purple-fg: #6b21a8;
--notice-bg: #eff6ff; --notice-border: #bfdbfe; --notice-fg: #1e3a8a;
--row-stale-bg: #fee2e2; --imp-bg: #fed7aa; --imp-fg: #7c2d12;
}
:root[data-theme="sepia"] { /* Sepia — warm parchment (Silk Road) */
color-scheme: light;
--bg: #ece0c8; --panel: #f8f1df; --panel2: #f2e8d1; --border: #d8c6a0;
--text: #45392a; --heading: #2c2314; --muted: #877556;
--brand: #b3241f; --brand2: #b3660a; --ok: #5b7a2e; --bad: #a33a25;
--link: #1f6f78; --code-bg: #2c2314; --code-text: #efe6d2;
--hl-bg: #f3d98a; --hl-fg: #3d2f10; /* marker highlight (sepia) */
--surface-2: #e3d5b0; --chip-bg: #e3d5b0; --chip-fg: #5c4a2f; --chip-hover: #45392a1a;
--tag-green-bg: #dde7c0; --tag-green-fg: #3f5720; --tag-green-soft: #5b7a2e26;
--tag-red-bg: #f0d2c9; --tag-red-fg: #7a2a1a; --tag-red-soft: #a33a2526;
--tag-amber-bg: #f3dfab; --tag-amber-fg: #7a4a06; --tag-amber-soft: #b3660a26; --tag-amber-border: #b3660a;
--tag-blue-bg: #d9e2e8; --tag-blue-fg: #2c4a5c; --tag-blue-soft: #1f6f7826;
--tag-purple-bg: #e6d9ec; --tag-purple-fg: #5a3a70;
--notice-bg: #f0e6cc; --notice-border: #d8c6a0; --notice-fg: #45392a;
--row-stale-bg: #f0d2c9; --imp-bg: #b3660a; --imp-fg: #fdf0dc;
}
:root[data-theme="midnight"] { /* Midnight — true-black OLED */
color-scheme: dark;
--bg: #000000; --panel: #0e0e14; --panel2: #07070b; --border: #26262f;
--text: #e9e9f0; --heading: #ffffff; --muted: #8b8b98;
--brand: #ff2f42; --brand2: #ffb020; --ok: #3ddc84; --bad: #ff6b6b;
--link: #7cc4ff; --code-bg: #0e0e14; --code-text: #d6d6e0;
--hl-bg: #3d3212; --hl-fg: #ffe9a8; /* marker highlight (midnight) */
--surface-2: #060609; --chip-bg: #1a1a22; --chip-fg: #d4d4dc; --chip-hover: #ffffff14;
--tag-green-bg: #052e1a; --tag-green-fg: #4ade80; --tag-green-soft: #3ddc8433;
--tag-red-bg: #33080a; --tag-red-fg: #ff8080; --tag-red-soft: #ff6b6b33;
--tag-amber-bg: #332600; --tag-amber-fg: #ffcc4d; --tag-amber-soft: #ffb02033; --tag-amber-border: #ffb020;
--tag-blue-bg: #0a1a33; --tag-blue-fg: #7dbbff; --tag-blue-soft: #7cc4ff33;
--tag-purple-bg: #22102e; --tag-purple-fg: #d9a8ff;
--notice-bg: #0a1a33; --notice-border: #163559; --notice-fg: #9dc4ff;
--row-stale-bg: #33080a; --imp-bg: #7c2d12; --imp-fg: #ffd6ad;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
background: var(--bg); color: var(--text); line-height: 1.6;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--code-bg); color: var(--code-text); padding: 2px 6px; border-radius: 5px; font-size: .9em; }
.devbar { background: var(--brand2); color: #1a1200; text-align: center; padding: 6px 10px; font-weight: 700; font-size: .82rem; }
/* ===== app shell: left sidebar + slim top bar + content (matches old app IA) ===== */
.shell { display: flex; align-items: flex-start; min-height: 100vh; }
.sidebar { flex: 0 0 218px; width: 218px; background: var(--panel2); border-right: 1px solid var(--border);
position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; z-index: 40; }
.side-brand { display: flex; flex-direction: column; line-height: 1.1; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); }
.brand-cn { font-size: 1.55rem; font-weight: 800; letter-spacing: .16em; color: #fff; background: linear-gradient(90deg, var(--brand), var(--brand2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.brand-sub { font-size: .68rem; color: var(--muted); letter-spacing: .04em; margin-top: 3px; }
.sidenav { display: flex; flex-direction: column; padding: 8px; gap: 2px; flex: 1; }
.sidelink { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; color: var(--text); font-weight: 600; }
.sidelink:hover { background: var(--chip-hover); text-decoration: none; }
.sidelink .ico { flex: 0 0 22px; text-align: center; font-size: 1.1rem; color: var(--muted); }
/* A nav icon supplied as a picture: painted as a mask in the current text colour,
so it dims, brightens and changes with the theme exactly as the glyphs do. */
.ico-img { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.15em;
background-color: currentColor;
-webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.sidelink .lbl { display: flex; flex-direction: column; line-height: 1.12; }
.sidelink .lbl .cn { font-size: .62rem; color: var(--muted); margin: 1px 0 0; font-weight: 500; }
.sidelink.is-active { background: var(--brand); color: #fff; }
.sidelink.is-active .ico, .sidelink.is-active .lbl .cn { color: rgba(255,255,255,.85); }
.side-out { margin-top: auto; border-top: 1px solid var(--border); border-radius: 0; }
.side-out:hover { background: var(--tag-red-bg); color: var(--tag-red-fg); }
.shell-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--panel2);
border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; min-height: 46px; }
.menu-btn { display: none; flex: 0 0 auto; background: var(--panel); color: var(--text); border: 1px solid var(--border);
border-radius: 8px; width: 38px; height: 34px; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.topbrand { display: none; flex: 0 0 auto; white-space: nowrap; font-weight: 800; letter-spacing: .14em; color: var(--heading);
background: linear-gradient(90deg, var(--brand), var(--brand2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.2rem; }
.nav-backdrop { position: fixed; inset: 0; background: rgba(2,6,15,.6); z-index: 39; }
/* right-hand cluster of topbar controls (view-as, old-system link, theme picker) —
pushed right as a group so they wrap onto their own row together on mobile
instead of each fighting for space (or overflowing) individually */
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* theme picker (top bar, right-aligned) */
/* super-admin "view as user" picker */
.viewas { display: inline-flex; align-items: center; gap: 6px; }
.viewas-ic { font-size: 1rem; line-height: 1; opacity: .85; }
.viewas select { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
padding: 5px 9px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; max-width: 210px; }
.viewas select:hover { border-color: var(--brand2); }
/* "viewing as" banner (read-only impersonation) */
.impbar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
background: var(--imp-bg); color: var(--imp-fg); padding: 6px 14px; font-size: .84rem; font-weight: 600; }
.impbar b { color: inherit; } .impbar-role { opacity: .8; font-weight: 400; }
.impbar form { margin: 0; display: inline; }
.impbar-exit { background: var(--imp-fg); color: var(--imp-bg); border: 0; border-radius: 7px; padding: 4px 12px; font-weight: 700; font-size: .8rem; cursor: pointer; }
/* roles & permissions checkbox grid */
.permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 14px; margin-top: 6px; }
.permchk { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; cursor: pointer; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.permchk input { width: 16px; height: 16px; accent-color: var(--brand); }
.lvlgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 14px; margin-top: 6px; }
.lvlrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: .9rem; font-weight: 600; }
.lvlsel { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.lvlrow.permchk { justify-content: flex-start; gap: 8px; }
.theme-pick { display: inline-flex; align-items: center; gap: 6px; }
.theme-ic { font-size: 1rem; line-height: 1; opacity: .85; }
.theme-pick select { background: var(--panel); color: var(--text); border: 1px solid var(--border);
border-radius: 8px; padding: 5px 26px 5px 9px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 9px center; }
.theme-pick select:hover { border-color: var(--brand2); }
.theme-pick select:focus-visible { outline: 2px solid var(--brand2); outline-offset: 1px; }
/* Chinese accent text — small, muted, "a touch of Chinese" on an English UI */
.cn { font-size: .82em; color: var(--muted); font-weight: 500; margin-left: 6px; }
h2 .cn { font-size: .8rem; }
.devbar .cn { color: inherit; opacity: .72; margin-left: 4px; }
.wrap { max-width: 1180px; margin: 0 auto; width: 100%; padding: 26px 26px 60px; }
h1 { font-size: 1.7rem; margin: 8px 0 4px; }
.h1-sub { font-size: .95rem; color: var(--muted); font-weight: 500; margin-left: 8px; }
h2 { font-size: 1.18rem; margin: 34px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.lead { color: var(--muted); margin: 6px 0 20px; }
.muted { color: var(--muted); }
.crumb { color: var(--muted); font-size: .85rem; margin: 0 0 6px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 6px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.card .k { color: var(--muted); font-size: .74rem; letter-spacing: .04em; }
.card .v { font-size: 1.35rem; font-weight: 800; margin-top: 5px; }
.ok { color: var(--ok); } .bad { color: var(--bad); }
.note { margin: 16px 0; padding: 14px 16px; background: var(--notice-bg); border: 1px solid var(--notice-border); border-radius: 12px; color: var(--notice-fg); }
.bad-note { background: var(--tag-red-bg); border-color: var(--bad); color: var(--tag-red-fg); }
.note-ok { background: var(--tag-green-bg); border-color: var(--tag-green-bg); color: var(--tag-green-fg); }
ul.good { margin: 8px 0; padding-left: 20px; }
ul.good li { margin: 6px 0; }
.finding { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--brand2); border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.finding p { margin: 6px 0; }
.finding-head { font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; }
.sev { display: inline-block; min-width: 26px; text-align: center; font-size: .72rem; font-weight: 800; padding: 2px 7px; border-radius: 6px; margin-right: 8px; color: #1a1200; }
.sev-high { background: var(--bad); color: #2a0a0a; }
.sev-med { background: var(--brand2); }
.sev-low { background: var(--chip-bg); color: var(--chip-fg); }
ol.discuss, .next { color: var(--muted); }
ol.discuss li { margin: 8px 0; }
.doclist { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.docitem { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; color: var(--text); }
.docitem:hover { border-color: var(--brand2); text-decoration: none; }
.docitem-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.docitem-title { font-size: 1.1rem; font-weight: 700; }
.docitem-en { color: var(--muted); font-size: .85rem; }
.docitem-date { margin-left: auto; color: var(--muted); font-size: .8rem; }
.docitem-desc { color: var(--muted); margin-top: 6px; font-size: .92rem; }
.tablewrap { overflow-x: auto; }
.mtable { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: .93rem; }
.mtable th, .mtable td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.mtable th { color: var(--muted); font-weight: 600; font-size: .82rem; letter-spacing: .03em; }
.mtable tbody tr:hover { background: var(--panel2); }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--chip-bg); color: var(--chip-fg); }
.pill-next { background: var(--brand2); color: #1a1200; }
/* parties list */
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; align-items: center; }
.filterbar input[type=search], .filterbar select { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: .9rem; }
.filterbar input[type=search] { min-width: 0; flex: 1 1 220px; }
/* A label that wraps its own control ("From "), as opposed to the bare
labels sitting beside a sibling select. inline-flex keeps the caption and the
field on one centre line instead of letting the input hang off the text
baseline. */
.filterbar label.fld { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem; white-space: nowrap; }
/* Date fields in a filter bar, opt-in per bar via .fb-dates. Opt-in rather than
plain `.filterbar input[type=date]` because several bars elsewhere pair a date
with a bare text input that this stylesheet has never styled — theming the date
globally would leave those bars half-styled, which is worse than leaving them
alone. Add fb-dates to a bar once its other fields are themed too.
The padding is 7px, not the 8px its neighbours use: a date input's inner
editable fields make its content box ~2px taller, so equal padding would leave
it standing proud of the search box beside it. The native picker needs no
re-colouring — every theme declares color-scheme, so the browser draws its
indicator light or dark to match. */
.filterbar.fb-dates input[type=date] { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: .9rem; line-height: normal; }
.filterbar select, .ss { max-width: 100%; }
.filterbar button { background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: 8px 18px; font-weight: 600; cursor: pointer; }
.filterbar .clearlink { color: var(--muted); font-size: .85rem; }
.filterbar .exportlink { color: var(--ok); font-size: .85rem; font-weight: 600; margin-left: auto; }
.pname { font-weight: 600; }
.cn2 { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.wx { color: #1aad19; font-weight: 600; }
.modchip { display: inline-block; background: var(--chip-bg); color: var(--chip-fg); border-radius: 6px; padding: 1px 7px; font-size: .72rem; margin: 1px 3px 1px 0; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.badge.on { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.badge.off { background: var(--tag-red-bg); color: var(--tag-red-fg); }
h1 .badge { vertical-align: middle; margin-left: 8px; font-size: .6rem; }
.pager { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 20px 0; color: var(--muted); }
.pager a { padding: 6px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
/* party detail */
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 22px; margin-top: 10px; }
.frow { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.frow .fk { color: var(--muted); min-width: 120px; font-size: .85rem; }
.frow .fv { font-weight: 500; }
/* ledger */
.btnlink { display: inline-block; background: var(--brand); color: #fff; padding: 7px 16px; border-radius: 8px; font-weight: 600; }
.btnlink:hover { text-decoration: none; opacity: .92; }
.btnlink.btnlink-alt { background: var(--chip-bg); color: var(--chip-fg); }
.mtable.ledger td.num, .mtable.ledger th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mtable td.ledger-note { font-size: .82rem; white-space: normal; word-break: break-word; }
/* Ledger column budget: Details carries the note plus the shipment/container
line, so it takes the slack. Date and Type/Ref are allowed to wrap onto a
second line instead of holding the table open; the date and the reference
themselves are kept unbreakable by .nowrap spans inside those cells. */
.mtable.ledger th:nth-child(1), .mtable.ledger td:nth-child(1) { width: 6rem; }
.mtable.ledger th:nth-child(2), .mtable.ledger td:nth-child(2) { width: 8rem; }
.mtable.ledger th:nth-child(3), .mtable.ledger td:nth-child(3) { width: 45%; }
.mtable .nowrap { white-space: nowrap; }
.mtable td.num.bad, .closing .bad, .card .v.bad { color: var(--tag-red-fg); }
.ltype { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: .72rem; font-weight: 700; }
.lt-voucher { background: var(--tag-blue-bg); color: var(--tag-blue-fg); }
.lt-bilty { background: var(--tag-amber-bg); color: var(--tag-amber-fg); }
.lt-bill { background: var(--tag-purple-bg); color: var(--tag-purple-fg); }
.closing { font-size: .95rem; }
.pendtot td { font-weight: 700; border-top: 2px solid var(--border); }
/* consignment stage pills */
.stpill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.st-early { background: var(--chip-bg); color: var(--chip-fg); }
.st-mid { background: var(--tag-amber-bg); color: var(--tag-amber-fg); }
.st-late { background: var(--tag-green-bg); color: var(--tag-green-fg); }
h1 .stpill { font-size: .6rem; vertical-align: middle; margin-left: 8px; }
tr.is-archived td { opacity: .55; }
/* consignment workflow board */
.mtable.board td { vertical-align: top; }
.mtable.board tr.row-stale td { background: var(--row-stale-bg); }
.bcell-cons .stpill { margin-left: 6px; }
.linkage { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 3px 6px; }
.linkage .lk, .linkage .lk-id { font-size: .72rem; color: var(--muted); background: var(--chip-bg); border-radius: 5px; padding: 1px 6px; }
.linkage .lk-ship { color: var(--tag-blue-fg); } .linkage .lk-bl { color: var(--tag-green-fg); } .linkage .lk-khi { color: var(--tag-purple-fg); } .linkage .lk-bilty { color: var(--tag-green-fg); }
.bcell-wf .wfbadge { display: inline-block; background: var(--chip-bg); color: var(--text); border-radius: 6px; padding: 2px 9px; font-size: .74rem; font-weight: 700; }
.wfnext { color: var(--brand2); font-size: .78rem; margin-top: 4px; }
.wfnext-btn { display: inline-block; background: var(--brand); color: #fff; font-size: .78rem; font-weight: 600;
border-radius: 7px; padding: 5px 10px; margin-top: 4px; text-decoration: none; }
.wfnext-btn:hover { filter: brightness(1.1); text-decoration: none; color: #fff; }
.wfdays { display: inline-block; margin-top: 5px; font-size: .7rem; color: var(--muted); }
.wfdays.hot { color: var(--tag-red-fg); font-weight: 700; }
.blockers { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.blk { font-size: .68rem; background: var(--tag-red-bg); color: var(--tag-red-fg); border-radius: 5px; padding: 1px 6px; }
.blk.ok { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.bcell-metrics .mchip { display: inline-block; font-size: .72rem; color: var(--muted); background: var(--chip-bg); border-radius: 5px; padding: 2px 7px; margin: 1px 2px; }
.bcell-metrics .mchip b { color: var(--text); }
.wfactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wfaction-form { display: inline; margin: 0; }
.wfaction-back { display: inline-flex; align-items: center; gap: 6px; }
.wf-reason { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 7px;
padding: 5px 8px; font-size: .8rem; width: 220px; }
.wfbtn { border: 0; border-radius: 7px; padding: 5px 12px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.wfbtn-go { background: var(--brand); color: #fff; }
.wfbtn-back { background: var(--tag-red-bg); color: var(--tag-red-fg); }
.wfbtn:hover { filter: brightness(1.1); }
/* On the leave decision the two buttons mean opposite things, and the shared
'primary' colour is the same red as Reject — so they read as one choice twice.
Only here: approve takes the positive colour. */
.leave-act .wfbtn-go { background: var(--ok); color: #05261a; }
/* the same decision, taken straight from the list */
.leaverow-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.leaverow-act input[name=notes] { flex: 1 1 150px; min-width: 120px; padding: 5px 9px; font: inherit;
font-size: .78rem; border: 1px solid var(--border); border-radius: 7px; background: var(--panel2); color: var(--text); }
.leaverow-act input.is-bad { border-color: var(--bad); }
.leaverow-act .wfbtn-go { background: var(--ok); color: #05261a; }
.leaverow-act .wfbtn { white-space: nowrap; }
@media (max-width: 767px) { .leaverow-act input[name=notes] { flex: 1 1 100%; } }
/* ===== Attendance read day by day ===== */
.daygrp + .daygrp .dayhead td { border-top: 14px solid transparent; background-clip: padding-box; }
.dayhead td { background: var(--panel2); padding: 10px 14px; border-left: 3px solid var(--brand);
border-radius: 8px 8px 0 0; }
.dayhead-d { font-weight: 800; font-size: 1rem; color: var(--heading); margin-right: 10px; }
.dayhead-s { font-size: .82rem; color: var(--muted); }
.dayhead-s b { font-weight: 700; }
.dayhead-only { float: right; font-size: .76rem; font-weight: 600; }
@media (max-width: 560px) { .dayhead-only { float: none; display: block; margin-top: 4px; } }
/* ===== Customer portal access (staff side) ===== */
.portal-creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 12px 0 0; }
.portal-creds > div { background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
.portal-creds .k { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; }
.portal-creds b { color: var(--heading); font-size: .95rem; overflow-wrap: anywhere; }
.portal-pw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; font-size: 1.05rem !important; }
.portal-msg { width: 100%; max-width: 520px; padding: 10px 12px; font: inherit; font-size: .85rem;
border: 1px solid var(--border); border-radius: 9px; background: var(--panel2); color: var(--text); resize: vertical; }
.wfovr { display: inline-block; background: linear-gradient(90deg,var(--brand),var(--brand2)); color: #fff; border-radius: 5px; padding: 1px 7px; font-size: .68rem; font-weight: 700; }
/* "super-admin only" sign — marks any item hidden from staff & admins. Only ever
seen by super admins, so it reads as "visible to you (super admin) alone". */
.saonly { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #fbbf24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.45); cursor: help; white-space: nowrap; }
.saonly .cn { font-size: .66rem; letter-spacing: 0; }
.wfhistory { display: flex; flex-direction: column; gap: 5px; }
.wfh-item { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 7px; padding: 7px 12px; font-size: .85rem; }
.edithistory { display: flex; flex-direction: column; gap: 5px; }
.eh-item { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 7px; padding: 7px 12px; font-size: .85rem; }
/* data-entry grid */
.de-table input { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 5px 6px; font: inherit; font-size: .82rem; width: 100%; min-width: 84px; }
.de-table input.de-num { min-width: 62px; text-align: right; }
/* Dropdowns in a data-entry grid, opt-in per table via .de-sel. The rule above
only ever named , so a