/* TOS IT 360: the app's styles. Plain CSS, no build step (D-02).
   Every color is a token from tokens.css (the brand kit's theme.css, D-54): this file never
   holds a color value itself (F-UI-02). Brand red (--brand-accent) appears in exactly five
   places, all marked "D-54": the top bar stripe, the current sidebar item, link underlines,
   the sign-in card's top edge and the logo's dot; and the robot (D-81), at most
   one on a page, on an empty list or an error page. The sign-in page's own look, with its
   red dots (D-112), is in signin.css. */

/* ---------- fonts (self-hosted, F-UI-01; SIL Open Font License in fonts/OFL.txt) ---------- */
@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; font-display: swap; src: url("fonts/be-vietnam-pro-latin-400-normal.79141d22ee07.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 500; font-display: swap; src: url("fonts/be-vietnam-pro-latin-500-normal.4ca4b0de939a.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; font-display: swap; src: url("fonts/be-vietnam-pro-latin-600-normal.a4759a77d292.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 700; font-display: swap; src: url("fonts/be-vietnam-pro-latin-700-normal.85718a3b2569.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.da03732a27e1.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.51205681a1ba.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.2ede57db1a3a.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-latin-400-normal.caf0dfde4e44.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-500-normal.a21e038a03f7.woff2") format("woff2"); }
/* Hindi (D-89, D-91). Only Devanagari is drawn from it (unicode-range), so it downloads only on a page that has some. */
@font-face { font-family: "Noto Sans Devanagari"; font-weight: 400; font-display: swap; src: url("fonts/noto-sans-devanagari-devanagari-400-normal.47419de6efcd.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Noto Sans Devanagari"; font-weight: 500; font-display: swap; src: url("fonts/noto-sans-devanagari-devanagari-500-normal.159c83070055.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Noto Sans Devanagari"; font-weight: 600; font-display: swap; src: url("fonts/noto-sans-devanagari-devanagari-600-normal.d32a37f27793.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }

/* The brand kit's font stacks (tokens.css), with the Devanagari font after each Latin one: a
   browser takes each letter from the first font that has it, so Latin text keeps Inter and
   Hindi text (the interface in Hindi, or a name typed in Hindi) gets Noto Sans Devanagari. */
:root {
  --font-display: "Be Vietnam Pro", "Inter", "Noto Sans Devanagari", system-ui, sans-serif;
  --font-ui: "Inter", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans Devanagari", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
/* Devanagari stands taller than Latin (the marks above and below the line): a little more
   line height when the interface is in Hindi, and no uppercase letter-spacing tricks. */
html[lang="hi"] {
  --text-body-lh: 22px;
  --text-body-strong-lh: 22px;
  --text-small-lh: 20px;
  --text-caption-lh: 18px;
  --text-overline-lh: 18px;
  --text-h1-lh: 36px;
  --text-h2-lh: 30px;
  --text-h3-lh: 26px;
}
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] .overline { letter-spacing: 0; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-lh); }
h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-lh); }
h3 { font-family: var(--font-ui); font-size: var(--text-h3-size); line-height: var(--text-h3-lh); }
p { margin: 0; }
/* D-54 (3 of 5): links, and buttons drawn as links, keep their text color with a thin brand-red underline. */
a, .link-button { text-decoration: underline; text-decoration-color: var(--brand-accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a { color: var(--text-primary); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.display { font-family: var(--font-display); font-size: var(--text-display-size); line-height: var(--text-display-lh); font-weight: 600; }
.small { font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.muted { color: var(--text-muted); }
/* An empty value (D-80): muted and a little smaller, in the interface's own font even in a mono cell. */
.not-set { color: var(--text-muted); font-family: var(--font-ui); font-size: .9em; font-weight: 400; }
.mono { font-family: var(--font-mono); font-size: var(--text-mono-size); line-height: var(--text-mono-lh); }
.overline { display: block; font-size: var(--text-overline-size); line-height: var(--text-overline-lh); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stack { display: grid; gap: var(--space-4); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* ---------- skip link (F-UI-09) ---------- */
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-2) var(--space-3); background: var(--bg-raised); color: var(--text-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.skip-link:focus { top: var(--space-4); }

/* ---------- the shell: sidebar + top bar + page (D-54) ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-3); background: var(--bg-sidebar); color: var(--text-on-sidebar); }
/* The sidebar's own scroll bar (F-UI-15, D-153): a thin rounded thumb in the sidebar's tokens, brighter under the pointer. */
.sidebar::-webkit-scrollbar { width: 10px; height: 10px; }
.sidebar::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-corner { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--bg-sidebar-hover); background-clip: padding-box; border: 3px solid transparent; border-radius: var(--radius-full); }
.sidebar:hover::-webkit-scrollbar-thumb { background-color: var(--text-on-sidebar-muted); }
.sidebar::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:active { background-color: var(--text-on-sidebar); }
/* Firefox has only the two standard properties; a browser given them ignores the rules above, so they are kept to it. */
@supports not selector(::-webkit-scrollbar) {
  .sidebar { scrollbar-width: thin; scrollbar-color: var(--text-on-sidebar-muted) transparent; }
}
.lockup { display: flex; align-items: center; gap: 10px; padding: var(--space-1); color: var(--text-on-sidebar); text-decoration: none; }
.mark { width: 28px; height: 28px; flex: none; }
.mark-ring { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; }
/* D-54 (5 of 5): the logo's dot. */
.mark-dot { fill: var(--brand-accent); }
.lockup-text { display: flex; flex-direction: column; min-width: 0; }
.lockup-name { font-family: var(--font-display); font-size: 16px; line-height: 20px; font-weight: 400; }
.lockup-name b { font-weight: 600; }
.lockup-by { font-size: var(--text-overline-size); line-height: 14px; font-weight: 500; color: var(--text-on-sidebar-muted); white-space: nowrap; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; height: var(--control-h); padding: 0 10px; border-radius: var(--radius-lg); color: var(--text-on-sidebar); text-decoration: none; font-weight: 500; }
.nav a .icon { width: 18px; height: 18px; color: var(--text-on-sidebar-muted); }
.nav a:hover { background: var(--bg-sidebar-hover); }
/* How many rows the list holds, in the active company (LST-06). Never colored: not a status. */
/* A module with several pages puts them under a small heading (extensions.NavLink.group). */
.nav-group { margin-top: var(--space-2); padding: 0 10px; color: var(--text-on-sidebar-muted); font-size: var(--text-caption-size); font-weight: 600; }
.nav-gap { height: var(--space-3); flex: none; }
.nav-count { margin-left: auto; color: var(--text-on-sidebar-muted); font-size: var(--text-caption-size); font-variant-numeric: tabular-nums; }
/* D-54 (2 of 5): a 3 px brand-red bar on the current item. */
.nav a[aria-current="page"] { background: var(--bg-sidebar-active); color: var(--text-on-sidebar-active); box-shadow: inset 3px 0 0 var(--brand-accent); }
.nav a[aria-current="page"] .icon { color: var(--text-on-sidebar-active); }

.main { display: flex; flex-direction: column; min-width: 0; }
/* D-54 (1 of 5): a 2 px brand-red stripe along the top bar's top edge. */
.topbar { min-height: var(--topbar-h); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--gutter); background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); box-shadow: inset 0 2px 0 var(--brand-accent); }
.topbar form { margin: 0; }
.company-switch { display: flex; align-items: center; gap: var(--space-2); }
.company-switch-label { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: var(--text-small-size); }
.company { font-weight: 600; }
.topbar .language-switch { margin-left: auto; }
.segmented { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.segmented button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: none; color: var(--text-secondary); font: 500 var(--text-small-size) / 1 var(--font-ui); cursor: pointer; }
.segmented button:hover { background: var(--bg-hover); color: var(--text-primary); }
.segmented button[aria-pressed="true"] { background: var(--bg-selected); color: var(--text-primary); font-weight: 600; }
.who { font-weight: 600; }
.link-button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--text-secondary); font: inherit; cursor: pointer; }
.link-button:hover { color: var(--text-primary); }

.page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-content: start; width: 100%; max-width: var(--content-max); padding: var(--gutter); }
.page:focus { outline: none; }
/* The trail above a title (D-106): it belongs to the title, so the page's gap is taken back. */
.trail { margin-bottom: calc(var(--space-2) - var(--space-5)); color: var(--text-secondary); font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.trail ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; }
.trail li + li::before { content: "\203A"; margin-right: var(--space-2); color: var(--text-muted); }
.trail a { color: var(--text-secondary); }
.trail a:hover, .trail [aria-current] { color: var(--text-primary); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.page-head p { margin-top: 2px; color: var(--text-secondary); font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }

/* ---------- panels ---------- */
/* Tiles: a row of headline numbers above a list (the Licenses page). */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin: 0; }
.tile { padding: 14px 18px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); min-width: 0; }
.tile dd { margin: var(--space-1) 0 0; font-size: var(--text-caption-size); }
.tile-value { display: block; font-family: var(--font-display); font-size: var(--text-h1-size); line-height: var(--text-h1-lh); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); }
/* The dashboard (DSH-01 to DSH-10): a tile is a link to the list it counted; a tone is a status
   badge, an icon and words, never a color alone (F-UI-05). */
.dash-board { display: grid; gap: var(--space-2); }
.dash-board > h2 { margin: 0; }
.dash-board > h2 a { color: inherit; text-decoration: none; }
.dash-board > h2 a:hover { color: var(--text-primary); }
.tile-link { display: block; color: inherit; text-decoration: none; transition: background var(--motion-fast) var(--motion-ease); }
.tile-link:hover { background: var(--bg-hover); }
.dash-board .tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
/* A tile is narrow and Hindi runs longer: its badge may wrap, where a list's never does. */
.tile-note .badge { height: auto; min-height: 22px; padding: 3px 8px; line-height: 1.35; white-space: normal; }
.tile-note { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-caption-size); }
.dash-start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px 18px; }
.dash-start p { margin: 0; }
.dash-lines { list-style: none; margin: 0; padding: 4px 18px; }
.dash-lines li { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.dash-lines li:last-child { border-bottom: 0; }
.dash-lines .badge { flex: none; min-width: 84px; justify-content: flex-start; }
.dash-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); align-items: start; }
.dash-bars { width: 100%; border-collapse: collapse; }
.dash-bars th, .dash-bars td { padding: var(--space-2) 18px; text-align: left; font-weight: 400; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.dash-bars tr:last-child th, .dash-bars tr:last-child td { border-bottom: 0; }
.dash-bars th { white-space: nowrap; }
.dash-bars .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-bars .bar-cell { width: 40%; }
.bar { display: flex; height: 10px; border-radius: var(--radius-full); background: var(--chart-track); overflow: hidden; }
.bar span { display: block; height: 100%; }
.bar .bar-a { background: var(--status-good); }
.bar .bar-b { background: var(--status-info); }
.bar .bar-c { background: var(--status-warning); }
/* What is left of a purchase of spares: a short bar, the numbers, and a badge when low. */
.stock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stock .bar { flex: none; width: 72px; }
/* A list's naming column keeps room for a name when the other columns are many. */
.table td.cell-name { min-width: 200px; }
.dash-key { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: var(--space-2) 18px; color: var(--text-muted); font-size: var(--text-caption-size); }
.dash-key span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: var(--radius-full); }
.dash-key .key-a::before { background: var(--status-good); }
.dash-key .key-b::before { background: var(--status-info); }
.dash-key .key-c::before { background: var(--status-warning); }
.panel { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); }
.panel-head h2, .panel-head h3 { font-family: var(--font-ui); font-size: var(--text-body-size); line-height: var(--text-body-lh); letter-spacing: 0; }
.panel-head .hint { color: var(--text-muted); font-size: var(--text-caption-size); }
.panel-body { padding: 16px 18px; }
.facts { display: grid; grid-template-columns: max-content 1fr; margin: 0; padding: 4px 18px; }
.facts dt { padding: var(--space-2) var(--space-6) var(--space-2) 0; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); }
.facts dd { margin: 0; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.facts dt:last-of-type, .facts dd:last-of-type { border-bottom: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-lg); font: 600 13px / 1 var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--motion-fast) var(--motion-ease); }
.btn-primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.btn-primary:hover { background: var(--action-primary-bg-hover); }
.btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-control); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-danger { background: var(--action-danger-bg); color: var(--action-danger-fg); }
.btn-danger:hover { background: var(--action-danger-bg-hover); }
.btn-sm { height: var(--control-h-sm); padding: 0 10px; font-size: var(--text-caption-size); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- form fields ---------- */
input:not([type="hidden"], [type="checkbox"], [type="radio"]), select, textarea {
  min-width: 0; height: var(--control-h); padding: 0 12px; border: 1px solid var(--border-control); border-radius: var(--radius-lg);
  background: var(--bg-surface); color: var(--text-primary); font: 400 var(--text-body-size) / var(--text-body-lh) var(--font-ui);
}
textarea { height: auto; padding: var(--space-2) 12px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--shadow-sm); }
/* A box that is switched off (a key's or a password's box while there is no encryption key, a company's code that is in use): sunken, dashed and dimmed, so it doesn't look like one to type in. */
input:disabled, select:disabled, textarea:disabled { background: var(--bg-sunken); border-style: dashed; color: var(--text-muted); cursor: not-allowed; }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
/* A field a script hides (a perpetual license has no term): `display` above would show it. */
.field[hidden] { display: none; }
.field label, .field legend { padding: 0; font-size: var(--text-caption-size); line-height: var(--text-caption-lh); font-weight: 500; color: var(--text-secondary); }
.field .help { font-size: var(--text-caption-size); line-height: var(--text-caption-lh); color: var(--text-secondary); }
.field-error { display: flex; align-items: center; gap: 6px; font-size: var(--text-caption-size); line-height: var(--text-caption-lh); color: var(--status-critical-text); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--status-critical); }
/* A check made as a box is typed, on a page with no login (D-119, selfservice.js): the line under the box. */
.field-ok { display: flex; align-items: center; gap: 6px; font-size: var(--text-caption-size); line-height: var(--text-caption-lh); color: var(--status-good-text); }
.field-live:empty { display: none; }
.field > div > div > label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-size); line-height: var(--text-body-lh); font-weight: 400; color: var(--text-primary); }
.field [type="radio"], .field [type="checkbox"] { margin: 0; accent-color: var(--action-primary-bg); }
.form-narrow { max-width: 420px; }

/* ---------- status badges and messages (F-UI-05: never color alone) ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--radius-full); font: 500 var(--text-caption-size) / 1 var(--font-ui); white-space: nowrap; }
.badge .icon { width: 13px; height: 13px; }
.badge-good { background: var(--status-good-bg); color: var(--status-good-text); }
.badge-warning { background: var(--status-warning-bg); color: var(--status-warning-text); }
.badge-serious { background: var(--status-serious-bg); color: var(--status-serious-text); }
.badge-critical { background: var(--status-critical-bg); color: var(--status-critical-text); }
.badge-info { background: var(--status-info-bg); color: var(--status-info-text); }
.badge-good .icon, .alert-good .icon { color: var(--status-good); }
.badge-warning .icon, .alert-warning .icon { color: var(--status-warning); }
.badge-serious .icon, .alert-serious .icon { color: var(--status-serious); }
.badge-critical .icon, .alert-critical .icon { color: var(--status-critical); }
.badge-info .icon, .alert-info .icon { color: var(--status-info); }
.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: 12px 16px; border: 1px solid var(--border-subtle); border-left-width: 3px; border-radius: var(--radius-xl); background: var(--bg-surface); }
.alert .icon { width: 20px; height: 20px; }
.alert-good { border-left-color: var(--status-good); }
.alert-warning { border-left-color: var(--status-warning); }
.alert-serious { border-left-color: var(--status-serious); }
.alert-critical { border-left-color: var(--status-critical); }
.alert-info { border-left-color: var(--status-info); }

/* ---------- tables, filters, pager, empty state ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
.filters label { display: flex; align-items: center; margin: 0; }
.filters .search { position: relative; }
/* A day box in a list's filters says which day it is ("From day", "To day"): two empty date boxes look alike. */
.filters .dated { gap: 6px; color: var(--text-secondary); font-size: var(--text-caption-size); }
.filters .search .icon { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; }
.filters .search input { width: 280px; max-width: 100%; padding-left: 32px; }
.filters .count { margin-left: auto; color: var(--text-muted); font-size: var(--text-caption-size); font-variant-numeric: tabular-nums; }
.table-scroll { position: relative; overflow-x: auto; } /* positioned, so it also clips visually hidden text */
/* Narrow screens scroll the table inside its panel, never the page (BRAND.md §6). */
.table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.table th { padding: 10px 14px; text-align: left; font: 500 var(--text-caption-size) / var(--text-caption-lh) var(--font-ui); color: var(--text-muted); background: var(--bg-sunken); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.table td { padding: 10px 14px; vertical-align: top; border-bottom: 1px solid var(--border-subtle); overflow-wrap: break-word; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--bg-hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* A list's total row (IT expenses): of everything the filters match, not only this page. */
.table tfoot td { font-weight: 600; background: var(--bg-sunken); border-top: 1px solid var(--border-default); border-bottom: 0; }
.table tfoot .muted { font-weight: 400; }
/* A second part inside a list's panel, refreshed with the list (Spend by head). */
.panel-sub { border-top: 1px solid var(--border-default); }
/* A row's actions (LST-05): icon buttons, one line, at least 32 px to press. */
.table .actions { white-space: nowrap; text-align: right; }
.btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; }
.btn-icon .icon { width: 16px; height: 16px; }
/* A heading that sorts (LST-01): a link the width of its words, the arrow beside them. */
.table th a.sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.table th a.sort:hover, .table th[aria-sort] a.sort { color: var(--text-primary); }
.table th a.sort .icon { width: 14px; height: 14px; }
.table th:not([aria-sort]) a.sort .icon { opacity: 0.45; }
.filters .clear { font-size: var(--text-caption-size); }
#list-error[hidden] { display: none; }
#list-error { flex-basis: 100%; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 10px 14px; border-top: 1px solid var(--border-subtle); }
.pager-range { margin-right: auto; color: var(--text-muted); font-size: var(--text-caption-size); font-variant-numeric: tabular-nums; }
.empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-6); text-align: center; color: var(--text-secondary); }
/* The robot (D-81): brand red, at most one on a page, on an empty list or an error page. */
.robot { display: inline-grid; color: var(--brand-accent); }
.robot-small .icon { width: 32px; height: 32px; }
.robot-large .icon { width: 72px; height: 72px; }

/* ---------- the login and role pages (Plan 06) ---------- */
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.field > [type="checkbox"] { justify-self: start; }
.switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-4) var(--space-6); }
.switch-group { display: grid; gap: 6px; align-content: start; }
.switch-group .locked, .switch-group .given { color: var(--text-muted); }
.switch-group .locked .icon, .switch-group .given .icon { width: 13px; height: 13px; }
.one-time-password { justify-self: start; padding: var(--space-3) var(--space-4); background: var(--bg-sunken); border-radius: var(--radius-lg); font-family: var(--font-mono); font-size: var(--text-h2-size); line-height: var(--text-h2-lh); letter-spacing: .04em; user-select: all; }

/* ---------- style guide (F-UI-07) ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.swatches figure { margin: 0; display: grid; gap: 6px; }
.swatch { display: block; height: 40px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
/* A revealed key or password (LIC-12): one click selects all of it; a long key wraps. */
.revealed { padding: var(--space-3) var(--space-4); background: var(--bg-sunken); border-radius: var(--radius-lg); font-family: var(--font-mono); font-size: var(--text-mono-size); line-height: var(--text-mono-lh); overflow-wrap: anywhere; user-select: all; }
.inline-form { display: inline; }
.icon-sample { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; }
.icon-sample .icon { width: 20px; height: 20px; }

/* ---------- sign in (D-53, F-UI-08) ---------- */
.sign-in { display: grid; place-items: center; min-height: 100vh; padding: var(--space-6) var(--space-4); }
/* D-54 (4 of 5): a 3 px brand-red top edge on the sign-in card. */
.sign-in-card { display: grid; gap: var(--space-4); width: 100%; max-width: 380px; padding: var(--space-8) 28px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-top: 3px solid var(--brand-accent); border-radius: var(--radius-xl); }
.sign-in-lockup { display: block; width: auto; height: 56px; max-width: 100%; margin-bottom: var(--space-2); }
.sign-in-card .lead { color: var(--text-secondary); }
/* Two-step sign-in (F-TWO-03, F-TWO-08): the steps of setting a phone up, and its QR code.
   The code is segno's SVG, black on white with its own quiet edge, drawn in both themes as it
   is: a camera reads it best so. */
.two-step-steps { display: grid; gap: var(--space-3); margin: 0; padding-left: var(--space-5); }
.qr-code { display: flex; justify-content: center; margin: var(--space-3) 0; }
.qr-code svg { display: block; max-width: 100%; height: auto; }
.qr-letters { overflow-wrap: anywhere; user-select: all; }
/* A page with no login, for an employee (F-SS-05, core/selfservice.html): the same card, wider
   for a form, with the page's own language switch beside the logo. */
.self-service-card { max-width: 540px; }
.self-service-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.self-service-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
/* The front door (F-SS-06, core/help.html): one large link for each thing an employee can do,
   its name and one sentence. The way back to it sits at the foot of every other such page. */
.door-links { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.door-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-4); color: inherit; text-decoration: none; border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.door-link:hover { background: var(--bg-hover); }
.door-link strong { display: block; color: var(--text-primary); }
.door-link span { color: var(--text-secondary); }
.door-link > .icon { color: var(--text-muted); }
.self-service-back { margin: 0; }
.self-service-back a { display: inline-flex; align-items: center; gap: 6px; }
.sign-in-foot { margin: 0; color: var(--text-secondary); text-align: center; }
/* On a phone: one column, and boxes at 16 px so that a phone does not zoom the page in on a tap. */
@media (max-width: 520px) {
  .self-service-pair { grid-template-columns: 1fr; }
  .self-service-card :is(input, textarea, select) { font-size: 1rem; }
}

/* ---------- the page loader (F-UI-15, D-153): the logo, turning, while a list refreshes or the next page is on its way ---------- */
/* Drawn hidden; loader.js shows it. It never takes a click, so it can't be in the way. The dot's red is .mark-dot's, the logo's own. */
.loader { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none; color: var(--brand-mark); }
.loader[hidden] { display: none; }
.loader-chip { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid var(--border-subtle); border-radius: var(--radius-full); background: var(--bg-raised); box-shadow: var(--shadow-lg); animation: loader-in var(--motion-base) var(--motion-ease) both; }
.loader .mark { width: 40px; height: 40px; animation: loader-turn 1.2s linear infinite; }
/* The ring's tail shortens and grows again, so the dot is always just ahead of its head (pathLength="100"). */
.loader .mark-ring { stroke-dasharray: 100; animation: loader-draw 2.4s var(--motion-ease) infinite; }
@keyframes loader-in { from { opacity: 0; transform: scale(.85); } }
@keyframes loader-turn { to { transform: rotate(360deg); } }
@keyframes loader-draw { 50% { stroke-dashoffset: -58; } }
/* Less motion asked for: the logo appears and stays still. */
@media (prefers-reduced-motion: reduce) {
  .loader-chip, .loader .mark, .loader .mark-ring { animation: none; }
}
@media print { .loader { display: none; } }

/* ---------- error pages (D-81): the robot, "Aw Snap!", what happened, a way back ---------- */
.error-page { display: grid; place-items: center; min-height: 100vh; padding: var(--space-6) var(--space-4); }
.error-card { display: grid; justify-items: center; gap: var(--space-3); max-width: 440px; text-align: center; }
.error-card .lead { color: var(--text-secondary); }

/* ---------- narrower screens (BRAND.md §6; D-57: no drawer, no script) ---------- */
@media (max-width: 1279px) {
  .shell { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
  .lockup { justify-content: center; }
  .nav-gap { display: none; }
  .lockup-text, .nav-label, .nav-count, .nav-group { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav a { justify-content: center; padding: 0; }
}
@media (max-width: 767px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); overflow-x: auto; }
  .nav { flex-direction: row; }
  .nav a { padding: 0 10px; }
  .nav-label, .nav-count { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .nav-count { margin-left: 0; }
  .topbar, .page { padding-left: var(--space-4); padding-right: var(--space-4); }
  .topbar .language-switch { margin-left: 0; }
  .filters .search input { width: 100%; }
  .filters .count { margin-left: 0; }
}

/* ---------- Windows high contrast (BRAND.md §12): shadows and backgrounds vanish there ---------- */
@media (forced-colors: active) {
  .nav a[aria-current="page"], .segmented button[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: -2px; }
}

/* ---------- a person's ID card details (F-ORG-09) ---------- */
.person-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-6); }
.person-card .facts { flex: 1 1 240px; padding: 0; }
.person-photo { width: 160px; height: 160px; border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); object-fit: cover; }
.person-photo-empty { display: grid; place-items: center; background: var(--bg-sunken); color: var(--text-muted); font-size: var(--text-caption-size); }

/* ---------- the ID card pages (idcards) ---------- */
.card-issue { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-6); }
.card-preview { width: 319px; max-width: 100%; height: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); }
.card-logo-preview img { max-width: 100%; height: 80px; object-fit: contain; padding: var(--space-2); background: var(--bg-sunken); border-radius: var(--radius-lg); }

/* ---------- the Assets pages (assets) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 6px 14px 0; border-bottom: 1px solid var(--border-subtle); }
.tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-secondary); font-weight: 500; text-decoration: none; }
.tabs a:hover { color: var(--text-primary); }
.tabs a[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.tab-count { color: var(--text-muted); font-size: var(--text-caption-size); font-variant-numeric: tabular-nums; }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions a + a { margin-left: var(--space-3); }
.form-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); align-items: start; }
.form-columns fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-columns legend { padding: 0 0 var(--space-2); font-weight: 600; color: var(--text-primary); }
/* A tag in a heading keeps the heading's size (.mono sets its own). */
h1.mono { font-size: var(--text-h1-size); line-height: var(--text-h1-lh); }
h1 .mono { font-size: inherit; line-height: inherit; }