/* Demolco Backoffice — design system in the Demolco house style (demolco.be).
   Tokens first, then primitives, then components. The light palette is defined on :root; the dark one
   twice — for "system" (prefers-color-scheme) and for an explicit data-theme="dark" — so the profile
   choice wins in both directions. Spacing is an 8px scale (--s1 … --s6). */

:root {
  color-scheme: light;

  /* surfaces and text: warm neutrals of demolco.be */
  --bg: #f7f6f4;
  --panel: #ffffff;
  --panel-2: #f1efeb;
  --text: #131312;
  --muted: #64625e;
  --line: #e2dfd9;
  --line-soft: #edebe7;
  --node: #aeadad;               /* the grey dots of the Demolco mark */

  /* house accent: orange #e8590c; the strong variant carries text and white labels at AA contrast */
  --accent: #e8590c;
  --accent-strong: #c2470b;
  --accent-hover: #a93e0a;
  --accent-soft: #fcebdf;
  --on-accent: #ffffff;

  /* status, kept clear of the orange accent */
  --ok: #1a7f37;   --ok-bg: #e5f3e8;
  --warn: #826000; --warn-bg: #ffe99a;
  --err: #b92222;  --err-bg: #ffd0cb;
  --skip: #64625e; --skip-bg: #efede9;

  /* entities */
  --brand-mijnwifi: #3f79c8;
  --brand-a4e: #037087;

  /* shape */
  --r1: 6px; --r2: 10px; --r3: 14px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --shadow: 0 1px 2px rgba(19, 19, 18, .05);
  --shadow-lg: 0 10px 28px rgba(19, 19, 18, .12);
  --focus: 0 0 0 3px rgba(232, 89, 12, .32);

  --font: "DM Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0b0d; --panel: #141416; --panel-2: #1b1b1e;
    --text: #f4f3f1; --muted: #a3a19c; --line: #2b2b2f; --line-soft: #202023; --node: #6f6e6c;
    --accent: #ff8a4c; --accent-strong: #ff8a4c; --accent-hover: #ffa06e; --accent-soft: #2b1a11; --on-accent: #0b0b0d;
    --ok: #4ac26b;   --ok-bg: #10261a;
    --warn: #f4cc45; --warn-bg: #43370f;
    --err: #ff6761;  --err-bg: #4a201d;
    --skip: #a3a19c; --skip-bg: #1f1f22;
    --brand-mijnwifi: #6b9ade; --brand-a4e: #4ea6bb;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, .55);
    --focus: 0 0 0 3px rgba(255, 138, 76, .38);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0d; --panel: #141416; --panel-2: #1b1b1e;
  --text: #f4f3f1; --muted: #a3a19c; --line: #2b2b2f; --line-soft: #202023; --node: #6f6e6c;
  --accent: #ff8a4c; --accent-strong: #ff8a4c; --accent-hover: #ffa06e; --accent-soft: #2b1a11; --on-accent: #0b0b0d;
  --ok: #4ac26b;   --ok-bg: #10261a;
  --warn: #f4cc45; --warn-bg: #43370f;
  --err: #ff6761;  --err-bg: #4a201d;
  --skip: #a3a19c; --skip-bg: #1f1f22;
  --brand-mijnwifi: #6b9ade; --brand-a4e: #4ea6bb;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, .55);
  --focus: 0 0 0 3px rgba(255, 138, 76, .38);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-strong); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

/* ---------- logos (brand.js) ---------- */
.mark { width: 1.6em; height: 1.6em; flex: none; display: block; }
.mark-demolco .mark-dots { fill: var(--node); }
.mark-demolco .mark-main { fill: var(--accent); }
.mark-mijnwifi .mark-dots, .mark-a4e .mark-dots { fill: currentColor; }
.mark-mijnwifi .mark-main { fill: var(--brand-mijnwifi); }
.mark-a4e .mark-main { fill: var(--brand-a4e); }
.wordmark { font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.wm-tld { color: var(--muted); font-weight: 500; font-size: .86em; }
.wm-mijnwifi .wm-accent { color: var(--brand-mijnwifi); }
.logo { display: inline-flex; align-items: center; gap: .45em; }

/* ---------- app frame: sidebar + top bar with breadcrumb (decision on #25: option B) ---------- */
.layout { display: flex; min-height: 100vh; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.sidebar {
  width: 236px; flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; padding: var(--s3) var(--s2);
  background: var(--panel); border-right: 1px solid var(--line); transition: width .16s ease;
}
.brand { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3) var(--s2); font-size: 17px; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand .mark { width: 26px; height: 26px; }
.brand:hover { color: var(--text); }
.brand-app { color: var(--muted); font-weight: 500; font-size: 13px; }
.nav-group { display: flex; flex-direction: column; gap: 1px; margin-top: var(--s4); }
.nav-group-title { padding: 0 var(--s3) var(--s1); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px var(--s3); border-radius: var(--r1); color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
.nav-item svg { width: 18px; height: 18px; flex: none; }
.nav-item:hover { color: var(--text); background: var(--panel-2); }
.nav-item.active { color: var(--accent-strong); background: var(--accent-soft); }
.nav-item:focus-visible { outline: none; box-shadow: var(--focus); }
.nav-count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; }
.sidebar-foot { margin-top: auto; padding-top: var(--s4); }
.sidebar-foot button { width: 100%; display: flex; align-items: center; gap: 10px; justify-content: flex-start; font-weight: 500; }
.sidebar-foot svg { width: 18px; height: 18px; flex: none; }

@media (min-width: 901px) {
  body.nav-collapsed .sidebar { width: 64px; }
  body.nav-collapsed .sidebar .wordmark, body.nav-collapsed .sidebar .brand-app,
  body.nav-collapsed .nav-label, body.nav-collapsed .nav-group-title, body.nav-collapsed .nav-sub { display: none; }
  body.nav-collapsed .nav-group { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line-soft); }
  body.nav-collapsed .nav-item, body.nav-collapsed .brand, body.nav-collapsed .sidebar-foot button { justify-content: center; padding-left: 0; padding-right: 0; }
  body.nav-collapsed .nav-count { position: absolute; top: 1px; right: 5px; min-width: 16px; padding: 0 4px; line-height: 16px; font-size: 10px; }
}

.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s3);
  height: 56px; padding: 0 var(--s5); background: var(--bg); border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs .sep { opacity: .55; }
.crumbs [aria-current] { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.topbar button.menu-btn.icon { display: none; }   /* must outrank button.icon { display: grid }, which comes later */
.backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .4); }

.user { margin-left: auto; flex: none; display: flex; gap: var(--s2); align-items: center; color: var(--muted); white-space: nowrap; }
.user select { padding: 4px 8px; }
.user .who { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: 272px; transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--shadow-lg); }
  body.nav-open .sidebar { transform: none; }
  .sidebar-foot { display: none; }
  .topbar button.menu-btn.icon:not([hidden]) { display: grid; }
  .topbar { padding: 0 var(--s3); }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* profile menu */
.menu { position: relative; }
.menu summary { display: flex; align-items: center; gap: var(--s2); cursor: pointer; list-style: none; padding: 3px 8px 3px 3px; border-radius: 999px; border: 1px solid transparent; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { background: var(--panel-2); border-color: var(--line); }
.menu summary:focus-visible { outline: none; box-shadow: var(--focus); }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; font-size: 13px; }
.menu .pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 16rem; display: flex; flex-direction: column; gap: var(--s3);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3); box-shadow: var(--shadow-lg); color: var(--text); }
.menu-head { font-weight: 600; overflow: hidden; text-overflow: ellipsis; padding-bottom: var(--s2); border-bottom: 1px solid var(--line-soft); }
.menu .pop select { width: 100%; }
.menu .pop > button { align-self: flex-start; }
.segmented { display: flex; border: 1px solid var(--line); border-radius: var(--r1); overflow: hidden; }
.segmented button { flex: 1; border: 0; border-radius: 0; padding: 5px 10px; background: var(--panel); color: var(--muted); font-weight: 550; }
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button.active { background: var(--accent-soft); color: var(--accent-strong); }

main { width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--s5); }
footer { text-align: center; color: var(--muted); padding: var(--s6) 0; font-size: 12px; }
footer a { color: var(--muted); }

/* ---------- page head ---------- */
.pagehead { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.pagehead .titles { flex: 1; min-width: 16rem; }
.pagehead h1 { margin: 0; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; font-weight: 700; }
.pagehead p { margin: var(--s1) 0 0; color: var(--muted); max-width: 78ch; }
.pagehead .actions { display: flex; gap: var(--s2); align-items: center; }

h2 { font-size: 15px; margin: var(--s5) 0 var(--s2); font-weight: 650; }
h3 { font-size: 13px; margin: var(--s4) 0 var(--s2); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.muted { color: var(--muted); }
.right { text-align: right; }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }

/* ---------- surfaces ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s4); margin-bottom: var(--s4); box-shadow: var(--shadow); }
.card.tight { padding: var(--s3); }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3) var(--s4); box-shadow: var(--shadow); }
.tile .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.tile .v { font-size: 22px; font-weight: 700; line-height: 1.25; margin-top: 2px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile .s { color: var(--muted); font-size: 12px; }
.tile.ok .v { color: var(--ok); } .tile.err .v { color: var(--err); } .tile.warn .v { color: var(--warn); }

/* ---------- form controls ---------- */
input, select, textarea {
  font: inherit; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r1);
  padding: 7px 10px; min-width: 0; transition: border-color .12s, box-shadow .12s;
}
input:hover, select:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
input::placeholder { color: var(--muted); opacity: .8; }
select { cursor: pointer; }
.search-select { position:relative; display:inline-grid; min-width:0; max-width:100%; width:100%; vertical-align:middle; }
.search-select > input { width:100%; box-sizing:border-box; padding-right:30px; text-overflow:ellipsis; }
.search-select > svg { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; pointer-events:none; color:var(--muted); }
.search-select-native { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; border:0 !important; opacity:0; pointer-events:none; overflow:hidden; clip-path:inset(50%); }
.search-select-list { position:fixed; inset:auto; margin:0; padding:5px; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--shadow-lg); font-size:14px; }
.search-select-list > div { padding:10px 12px; border-radius:var(--r1); cursor:pointer; overflow-wrap:anywhere; }
.search-select-list > [role=option]:hover, .search-select-list > .active { background:var(--accent-soft); color:var(--accent); }
.search-select > input:disabled { opacity:.55; cursor:not-allowed; }
.search-select-list > [aria-disabled=true], .search-select-list > [aria-disabled=true]:hover { color:var(--muted); background:transparent; cursor:not-allowed; }
.search-select > input[aria-invalid=true] { border-color:var(--danger, #c62828); }
label.chk .search-select { width:auto; min-width:75px; }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
label { display: inline-block; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span:first-child { font-size: 12px; font-weight: 600; color: var(--muted); }
label.chk { display: inline-flex; gap: var(--s2); align-items: center; cursor: pointer; user-select: none; }

button {
  font: inherit; font-weight: 600; padding: 7px 13px; border-radius: var(--r1);
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s;
}
button:hover:not(:disabled) { background: var(--panel-2); border-color: var(--muted); }
button:focus-visible { outline: none; box-shadow: var(--focus); }
button.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.segmented button.active:hover:not(:disabled), .ts-time-picker button.selected:hover:not(:disabled) { background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); filter:brightness(.96); }
.tab.active:hover:not(:disabled) { background:var(--panel); color:var(--accent-strong); border-color:var(--accent); }
button.ghost { border-color: transparent; background: transparent; color: var(--muted); }
button.ghost:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
button.icon { padding: 6px; display: grid; place-items: center; border-radius: 50%; }
button.icon > svg.icon { width: 18px; height: 18px; }
button.icon-action, a.ghost.icon-action { display:inline-flex; vertical-align:middle; align-items:center; justify-content:center; flex:0 0 auto; min-width:36px; min-height:36px; padding:7px; }
button.icon-action.sm, a.ghost.icon-action.sm { min-width:32px; min-height:32px; padding:6px; }
button.icon-action:focus-visible, a.ghost.icon-action:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
a.ghost.icon-action { border:1px solid transparent; border-radius:var(--r1); background:transparent; color:var(--muted); text-decoration:none; }
a.ghost.icon-action:hover { background:var(--panel-2); color:var(--text); }
.api-intro p { max-width:90ch; }
.api-intro label { display:block; color:var(--muted); margin-bottom:8px; }
.api-base { display:block; overflow-wrap:anywhere; margin-bottom:16px; }
.api-filters { margin:20px 0; }
.api-filters label { display:grid; gap:6px; }
.api-filters .grow { flex:1; }
.api-filters input { width:100%; }
.api-filters #api-count { padding-bottom:9px; }
.api-endpoint { padding:0; }
.api-endpoint > summary { cursor:pointer; padding:16px; display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.api-endpoint > summary::before { content:'›'; font-size:20px; width:10px; }
.api-endpoint[open] > summary::before { content:'⌄'; }
.api-endpoint > summary::-webkit-details-marker { display:none; }
.api-endpoint > summary code { overflow-wrap:anywhere; min-width:0; }
.api-method { font-size:11px; font-weight:700; color:var(--muted); }
.api-effect { font-size:11px; border:1px solid var(--line); border-radius:20px; padding:3px 8px; }
.api-effect.mutation, .api-effect.mixed { background:var(--panel-2); }
.api-summary { flex-basis:100%; margin-left:20px; color:var(--muted); font-size:13px; }
.api-body { border-top:1px solid var(--line); padding:0 20px 20px; }
.api-body p { overflow-wrap:anywhere; }
.api-code { max-width:100%; overflow:auto; white-space:pre; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r1); padding:14px; font-size:12px; line-height:1.6; }
.api-code code { background:none; padding:0; font:inherit; color:inherit; }
.api-job { margin:12px 0; }
.api-intro summary, .api-body summary { cursor:pointer; padding:8px 0; }
@media (max-width:600px) {
  .api-filters > label.grow { grid-column:1 / -1; }
  .api-filters #api-count { text-align:right; }
  .api-endpoint > summary { gap:7px; padding:12px; }
  .api-endpoint > summary code { font-size:12px; }
  .api-body { padding:0 12px 12px; }
}
button.sm { padding: 4px 9px; font-size: 13px; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- tables ---------- */
.tablewrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--shadow); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--panel); }
.tablewrap > table { border: 0; }
th, td { text-align: left; padding: 9px var(--s3); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th {
  color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  background: var(--panel-2); border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel-2); }
tr.clickable { cursor: pointer; }
tfoot th { border-top: 2px solid var(--line); background: var(--panel); text-transform: none; font-size: 13px; }
td.num, th.num, .right { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- badges and inline text ---------- */
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; }
.badge.ok { color: var(--ok); background: var(--ok-bg); }
.badge.error, .badge.err { color: var(--err); background: var(--err-bg); }
.badge.running, .badge.warn { color: var(--warn); background: var(--warn-bg); }
.badge.skipped, .badge.skip { color: var(--skip); background: var(--skip-bg); }
.ok-txt { color: var(--ok); font-weight: 600; }
.err-txt, .cost-increase { color: var(--err); font-weight: 600; }
.notification-txt { color: var(--warn); font-weight: 600; }
.mono { font-family: var(--mono); font-size: 12.5px; }
code { font-family: var(--mono); font-size: 12.5px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 5px; }
pre { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r1); padding: var(--s3); overflow-x: auto; font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; margin: 0; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s4); margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* ---------- empty / loading ---------- */
.empty { text-align: center; padding: var(--s6) var(--s4); color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: var(--r2); }
.empty .big { font-size: 26px; margin-bottom: var(--s2); opacity: .65; }
.empty p { margin: var(--s1) 0 0; }
.skel { background: linear-gradient(90deg, var(--line-soft) 25%, var(--panel-2) 37%, var(--line-soft) 63%); background-size: 400% 100%; animation: shimmer 1.3s infinite linear; border-radius: var(--r1); height: 13px; margin: var(--s2) 0; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel, .toast { animation: none; } }

/* ---------- filters, column picker, pager (logtable.js) ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.filters .field > span:first-child { white-space: nowrap; }
.filters select, .filters input:not([type="checkbox"]) { min-width: 9rem; }
.filters > label.chk { align-self: flex-end; }
.colpick { position: relative; }
.colpick summary { cursor: pointer; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r1); list-style: none; font-weight: 600; background: var(--panel); }
.colpick summary::-webkit-details-marker { display: none; }
.colpick summary:hover { background: var(--panel-2); }
.colpick .pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s2); min-width: 12rem; box-shadow: var(--shadow-lg); }
.colpick .pop label { display: flex; gap: var(--s2); align-items: center; white-space: nowrap; padding: 5px var(--s2); border-radius: var(--r1); cursor: pointer; }
.colpick .pop label:hover { background: var(--panel-2); }

.logtable th.sortable { cursor: pointer; user-select: none; }
.logtable th.sortable:hover { color: var(--text); }
.logtable td.expander, .logtable th.expander { width: 26px; color: var(--muted); text-align: center; padding-left: var(--s2); padding-right: 0; }
.logtable tr.detail > td { background: var(--panel-2); padding: var(--s4); }
.logtable tr.detail table { background: transparent; margin-top: var(--s2); }
.logtable tr.detail th { position: static; }
.pager { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.pager select { padding: 4px 8px; }

/* ---------- toasts ---------- */
#toasts { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 100; display: flex; flex-direction: column; gap: var(--s2); max-width: min(30rem, calc(100vw - 2 * var(--s4))); }
.toast { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r1); padding: var(--s3) var(--s4); box-shadow: var(--shadow-lg); animation: rise .16s ease-out; }
.toast.ok { border-left-color: var(--ok); }
.toast.err { border:0; padding:0; background:transparent; }
.toast.err > .status-notice { margin:0; }
.toast .t { font-weight: 600; margin-bottom: 2px; }
.toast .m { color: var(--muted); font-size: 13px; word-break: break-word; }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- login ---------- */
.login { display: grid; place-items: center; min-height: 60vh; text-align: center; }
.login .box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s6); box-shadow: var(--shadow); max-width: 26rem; }
.login-brand { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 24px; }
.login-brand .mark { width: 36px; height: 36px; }
.login h1 { margin: var(--s1) 0 var(--s2); font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
.login p { color: var(--muted); margin: 0 0 var(--s5); }
.login p.local-title { margin: var(--s5) 0 var(--s2); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.login button { font-size: 15px; padding: 10px 20px; }

/* ---------- offer page ---------- */
.step { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); font-weight: 650; }
.step .n { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.picklist { max-height: 17rem; overflow-y: auto; margin-top: var(--s3); border: 1px solid var(--line); border-radius: var(--r1); }
.picklist table { border: 0; }
.picklist th { top: 0; }
.chosen { display: inline-flex; align-items: center; gap: var(--s2); background: var(--accent-soft); color: var(--accent-strong); border-radius: 999px; padding: 3px 6px 3px 12px; font-weight: 600; }
.entity-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 var(--s2); font-weight: 600; color: var(--text); }
.entity-chip .mark { width: 18px; height: 18px; }
#custinfo { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; }
#custinfo .chosen, #custinfo .entity-chip { flex:none; }
#custinfo .entity-chip { margin:0; }
#custinfo > .muted { flex:1 1 280px; font-size:12px; line-height:1.5; }
.mw-name { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.mw-name .mark { width: 14px; height: 14px; }
.result-count { margin: var(--s2) 0 0; font-size: 12px; }

@media (max-width: 800px) { main { padding: var(--s4) var(--s3); } }

/* ---------- tabs ---------- */
.tabs { gap: 2px; margin-bottom: var(--s4); }
.tab {
  padding: var(--s2) var(--s4); border-radius: var(--r1); text-decoration: none;
  color: var(--muted); font-weight: 600; border: 1px solid transparent;
}
.tab:hover { color: var(--text); background: var(--panel-2); }
.tab.active { color: var(--accent-strong); background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }

pre.clip { max-height: 14rem; overflow: auto; word-break: break-all; }
/* clipped values can still be long: cap the width, but never break short identifiers or dates */
td { max-width: 32rem; overflow-wrap: anywhere; }
td.nowrap, .logtable td.expander { white-space: nowrap; }
.logtable tr.detail td { white-space: normal; max-width: none; }

@media (max-width: 1100px) { .user .who { display: none; } }

/* ---------- offer generator: hints, mapping editor, approvals ---------- */
.linetext { white-space: pre-line; }
.hint { background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r1); padding: var(--s2) var(--s3); margin-top: var(--s3); display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.mapedit { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r1); padding: var(--s3); margin-top: var(--s2); display: flex; flex-direction: column; gap: var(--s2); min-width: 28rem; }
.mapedit .row { align-items: flex-end; }
.approval .actions { display: flex; flex-direction: row; gap: var(--s2); align-items: center; }
.approval p { margin: var(--s1) 0; }
.warnlist { margin: var(--s1) 0; padding-left: 1.2em; }

/* ---------- UI review quick wins (#25) ---------- */
.row.align-end { align-items: flex-end; }
.row.align-end > label.chk, .row.align-end > button, .filters > label.chk { min-height: 37px; }
.filters .field.search { flex: 1 1 12rem; }
.filters .field.search input { width: 100%; }
.chip { display: inline-flex; align-items: baseline; gap: 4px; margin: 1px 0; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); white-space: nowrap; }
.chip b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.job-id { font-size: 11.5px; }
#plist td.prod-supplier { max-width: 16rem; }
@media (max-width: 700px) {
  .filters { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .filters .field.search, .filters .colpick, .filters > label.chk { grid-column: 1 / -1; }
  .filters select, .filters input:not([type="checkbox"]) { width: 100%; min-width: 0; }
  .filters > .grow:empty { display: none; }
  .filters #addbox { grid-column:1 / -1; }
}

/* ---------- icons (icons.js, #28) ---------- */
:where(svg.icon) { width: 1em; height: 1em; flex: none; vertical-align: -0.14em; }   /* zero specificity: svg only (buttons use class "icon" too), and any contextual size rule wins */
button .icon, a .icon { pointer-events: none; }
button.sm .icon { width: 15px; height: 15px; }
button.ghost.sm:has(> .icon:only-child) { padding: 4px 6px; line-height: 0; }
.empty .big .icon { width: 30px; height: 30px; stroke-width: 1.5; }
.colpick summary .icon, .sort-icon { color: var(--muted); width: 13px; height: 13px; }
.logtable td.expander .icon { width: 14px; height: 14px; vertical-align: -2px; }
.odoo-link { white-space: nowrap; }
.odoo-link .icon { width: 13px; height: 13px; vertical-align: -1px; }
td .err-txt .icon { width: 14px; height: 14px; vertical-align: -2px; }

/* ---------- document actions (#30) ---------- */
.doc-actions { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.doc-actions .field input { width: 100%; }
button.block { width: 100%; padding: 11px 16px; font-size: 15px; }

/* ---------- existing quotations (#32) ---------- */
.existing[hidden] { display: none; }
.editing { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.editing > .grow > svg.icon { color: var(--accent-strong); }
.editing .odoo-link { margin-left: var(--s2); }
.step .n svg.icon { width: 12px; height: 12px; }
#basket td:nth-child(2) { min-width: 11rem; }
#basket th, #basket td { padding-left: 8px; padding-right: 8px; }
#basket td .linetext { overflow-wrap: anywhere; }
/* Offertes overview (issue #37) */
.row-actions button + button, .row-actions .odoo-link { margin-left: var(--s1); }
.qref { font-size: 12.5px; }
/* Keep customer names readable even when other quote columns need horizontal scrolling. */
#qlist td.quote-customer { min-width: 17rem; width: 32%; white-space: normal; overflow-wrap: normal; }
#qlist .quote-customer-name { font-weight: 550; }
#qlist .quote-customer .qref { margin-top: .25rem; overflow-wrap: anywhere; }
#qlist td.quote-phase { min-width: 8.5rem; white-space: normal; }
#qlist .quote-phase .badge { margin: 0 .2rem .25rem 0; }
/* Offer product search row (issue #43): titled checkbox field, icon-only refresh */
.field[hidden] { display: none; }
.field .chk-only { min-height: 37px; display: flex; align-items: center; justify-content: center; }
.field .chk-only input { margin: 0; cursor: pointer; }
.row.align-end > button.icon { min-height: 37px; width: 37px; border-radius: var(--r1); }
/* Dialogs (issue #46): native <dialog>, theme tokens */
dialog.dialog { padding: 0; border: 1px solid var(--line); border-radius: var(--r3); background: var(--panel); color: var(--text);
  box-shadow: var(--shadow-lg); width: min(28rem, calc(100vw - 2 * var(--s4))); }
dialog.dialog[open] { animation: rise .16s ease-out; }
dialog.dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog.dialog .dlg-inner { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
dialog.dialog h2 { margin: 0; font-size: 17px; line-height: 1.35; }
dialog.dialog .dlg-body { color: var(--muted); }
dialog.dialog .dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); margin-top: var(--s2); }
dialog.dialog .dlg-actions button { max-width: 100%; white-space: normal; }
dialog.dialog.record-dialog { width: min(720px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); }
dialog.dialog.record-dialog .dlg-inner { max-height: calc(100dvh - 24px); overflow: auto; }
.record-dialog-body { display: flex; flex-direction: column; gap: var(--s4); }
.record-dialog-body .field input, .record-dialog-body .field select, .record-dialog-body .field textarea { width: 100%; }
.product-supplier-list { border-top: 1px solid var(--line); padding-top: var(--s3); }
.product-supplier-list h3 { margin: 0 0 var(--s2); }
.product-supplier-list p { margin: var(--s2) 0; }
dialog.record-dialog [data-suppliers] { display: flex; flex-direction: column; align-items: stretch; max-height: 12rem; overflow: auto; }
@media (max-width: 640px) { dialog.dialog.record-dialog .dlg-inner { padding: var(--s3); } }
button.danger { background: var(--err); border-color: var(--err); color: var(--on-accent); }
button.danger:hover:not(:disabled) { background:var(--err); border-color:var(--err); color:var(--on-accent); filter:brightness(.92); }
@media (prefers-reduced-motion: reduce) { dialog.dialog[open] { animation: none; } }
/* Offer/invoice lines (issue #48): text cells centred on the 36px number inputs (9px cell padding) */
#basket td { padding-top: 16px; }
#basket td:has(> input), #basket td:has(> .cell-v > input) { padding-top: 9px; }
#basket td:has(> button[data-del]), #basket td:has(> .cell-v > button[data-del]) { padding-top: 15px; }
#basket td.mono { padding-top: 18px; }   /* shorter monospace line height */
/* Product search results (issues #50, #60): the row is the add button, a small (+) shows on hover */
tr.addrow { cursor: pointer; transition: background-color .12s; }
tr.addrow:hover, tr.addrow:focus-visible { background: var(--accent-soft); }
tr.addrow:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
tr.addrow .add-cell { width: 1%; }
tr.addrow .add-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-strong); color: var(--on-accent); visibility: hidden; }
tr.addrow .add-btn svg.icon { width: 14px; height: 14px; }
tr.addrow:hover .add-btn, tr.addrow:focus-visible .add-btn { visibility: visible; }
@media (hover: none) { tr.addrow .add-btn { visibility: visible; } }
/* after the basket was priced: a slow green highlight, or red when adding failed */
tr.addrow.added, tr.addrow.added:hover { animation: row-added 1.8s ease-in-out; }
tr.addrow.add-failed, tr.addrow.add-failed:hover { animation: row-failed 2.4s ease-in-out; }
@keyframes row-added { 0% { background: transparent; } 30% { background: var(--ok-bg); } 100% { background: transparent; } }
@keyframes row-failed { 0% { background: transparent; } 25%, 50% { background: var(--err-bg); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { tr.addrow.added, tr.addrow.add-failed { animation: none; } }
/* Custom lines without a product (issue #55) */
#basket .custom-name { width: 100%; min-width: 0; }
#basket .quote-display-text { padding:4px 0; border:0; border-radius:0; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); background:transparent; box-shadow:none; font-weight:400; }
#basket [data-quote-row] > td:last-child:not(:first-child) { white-space:nowrap; }
#basket [data-quote-row] > td:last-child:not(:first-child) > .cell-v { display:inline-flex; align-items:center; }
#basket .quote-display-text:hover { color:var(--accent-strong); }
#basket .line-name .quote-display-text { flex:1; min-width:0; }
.basket-tools { margin-top: var(--s2); }
/* Offertes settings (issue #63) */
.hide-add { margin-top: var(--s4); }
.hide-add .field { flex: 1 1 14rem; }
.hide-add .field input { width: 100%; }
.settings-actions { margin-top: var(--s4); }
/* Customer search (issues #65, #66) */
.searching { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0 0; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }
tr.pick:focus-visible { outline: none; background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
/* Beheer › Instellingen (issue #15) */
.margin-table input { width: 6.5rem; text-align: right; }
.margin-table tr.invalid input { border-color: var(--err); }
.margin-table tr.row-error td { padding-top: 0; border-top: 0; font-size: 12.5px; }
a.button-link { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; }
.margin-table td { vertical-align: middle; }
/* Uitzonderingen actions (issue #71) */
a.sm-link { font-size: 12.5px; margin-left: var(--s1); }
.exc-actions .act { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: var(--s1); white-space: nowrap; }
.exc-actions .act > * { flex-shrink: 0; }
.exc-actions .act a.sm-link { margin-left: 0; }
/* Side panel (issue #70) */
dialog.side-panel { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(30rem, 100vw); max-width: 100vw;
  padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--panel); color: var(--text); box-shadow: var(--shadow-lg); }
dialog.side-panel[open] { animation: slide-in .18s ease-out; }
dialog.side-panel::backdrop { background: rgba(0, 0, 0, .35); }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.side-panel[open] { animation: none; } }
.side-panel .sp-inner { display: flex; flex-direction: column; height: 100%; }
.side-panel .sp-head { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.side-panel .sp-head h2 { margin: 0; font-size: 17px; }
.side-panel .sp-sub { margin-top: 2px; }
.side-panel .sp-body { flex: 1; overflow: auto; padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.side-panel .sp-body .field input, .side-panel .sp-body .field select { width: 100%; }
.side-panel .sp-foot { display: flex; gap: var(--s2); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); }
.suggest-box { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
tr.prod-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
#plist .prod-meta { font-size: 12.5px; }
#plist th { white-space: normal; }
#plist td.sku-cell { overflow-wrap: anywhere; min-width: 6rem; max-width: 10rem; }
/* Offer / invoice layout (issue #69): two columns on wide screens, a sticky summary bar elsewhere */
main.wide { max-width: 1760px; }
#main { container-type: inline-size; container-name: main; }
.doc-bar { position: sticky; bottom: var(--s3); z-index: 15; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s3); padding: var(--s2) var(--s3); background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--r2); box-shadow: var(--shadow-lg); }
.doc-bar[hidden] { display: none; }
.doc-save-short { display:none; }
.doc-lines > .card { scroll-margin-top: calc(56px + var(--s3)); }
/* Respond to usable content width, including tablets with the desktop sidebar. */
@container main (max-width: 800px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tfoot { display: block; }
  table.stack tbody tr { display: block; padding: var(--s3); border-bottom: 1px solid var(--line); }
  table.stack td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s2); align-items: center;
    padding: 4px 0 !important; border: 0; max-width: none; min-width: 0 !important; width: auto; text-align: left; white-space: normal; }
  table.stack td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 600; }
  table.stack td:not([data-label]) { grid-template-columns: minmax(0, 1fr); justify-items: end; }
  table.stack td:not([data-label])::before { content: none; }
  table.stack td > .cell-v:empty, table.stack td:has(> .cell-v:empty) { display: none; }
  table.stack td input, table.stack td select { max-width: 100%; }
  table.stack tfoot tr { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s3); }
  table.stack tfoot th:empty { display: none; }
  .tablewrap:has(> table.stack) { overflow-x: visible; }
  .approval > .row { flex-direction: column; align-items: stretch; }
  .approval .actions { flex-direction: row; }
  .approval .actions button { flex: 1; }
  table.stack { background:transparent; }
  #plist table.stack td { max-width:none; }
  table.stack td.exc-actions { grid-template-columns:1fr; }
  table.stack td.exc-actions::before { display:none; }
  .exc-actions .act { flex-wrap:wrap; }
}
.field { min-width: 0; max-width: 100%; }
.field select { max-width: 100%; }   /* long option texts (Bron) must not widen the page on phones */
/* Optimistic offer lines (issue #77): a thin progress line while Odoo prices the basket */
#basket { position: relative; }
#basket [data-quote-row] { position:relative; }
#basket [data-quote-row] > td:first-child { padding-left:32px; }
.quote-drag-handle { position:absolute; left:3px; top:50%; transform:translateY(-50%); padding:4px; cursor:grab; touch-action:none; user-select:none; color:var(--muted); }
.quote-drag-handle:active { cursor:grabbing; }
.quote-dragging { opacity:.55; }
.quote-drop-before { box-shadow:inset 0 2px var(--accent); }
.quote-drop-after { box-shadow:inset 0 -2px var(--accent); }
@media(max-width:700px) {
  .quote-drag-handle { top:12px; transform:none; }
  #basket table.stack [data-quote-row] > td:first-child { padding-left:24px !important; }
}
.quote-insert { position:absolute; z-index:4; top:0; left:0; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:100%; height:24px; }
.quote-insert-bottom { top:auto; bottom:0; transform:translateY(50%); }
.quote-insert::before { content:''; position:absolute; inset:50% 0 auto; border-top:1px dotted var(--accent); opacity:0; pointer-events:none; }
.quote-insert-actions { position:relative; display:flex; gap:6px; padding:0 8px; background:transparent; line-height:normal; opacity:0; font-family:var(--font); max-width:100%; }
.quote-insert-actions button { border:1px solid var(--line); border-radius:999px; background:var(--panel); min-height:26px; padding:3px 10px; font-size:12px; }
.quote-insert-actions button.ghost.sm { line-height:1.3; }
.quote-insert:hover::before, .quote-insert:focus-within::before,
.quote-insert:hover .quote-insert-actions, .quote-insert:focus-within .quote-insert-actions { opacity:1; }
.quote-display-content { display:flex; align-items:center; width:100%; gap:12px; }
.quote-display-content textarea { display:block; flex:1; width:100%; min-width:0; resize:vertical; }
.quote-display-content .quote-display-text { flex:1; min-width:0; padding:4px 0; border:0; border-radius:0; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); background:transparent; box-shadow:none; }
.quote-display-content .quote-display-text:hover { color:var(--accent-strong); }
.quote-display-row.line_section { background:var(--accent-soft); }
.quote-display-row.line_section textarea { font-weight:700; }
.quote-display-row.line_note textarea { font-style:italic; }
.quote-display-row.line_note .quote-display-text { font-weight:400; }
@media (hover:none) {
  .quote-insert::before, .quote-insert-actions { opacity:1; }
  .quote-insert { height:36px; }
  .quote-insert-actions button { min-height:36px; }
}
@container main (max-width:800px) {
  #basket table.stack .quote-display-row > td { display:block; padding:0 !important; }
  #basket .quote-display-row { border-radius:var(--r1); }
}
#basket.pending::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 40% 100%;
  animation: basket-progress 1.1s linear infinite; }
@keyframes basket-progress { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) { #basket.pending::before { animation: none; background: var(--accent-soft); } }
#basket .pending-val { color: var(--muted); letter-spacing: .1em; }
#basket tr.pending-line .linetext { color: var(--muted); }
#basket tr.repricing td:nth-child(n+6):nth-child(-n+8) { opacity: .55; transition: opacity .15s; }
/* Installation suggestions (issue #81) */
.hint.install-card { display: block; }
.install-card .install-title { display: flex; align-items: center; gap: var(--s2); font-weight: 600; margin-bottom: var(--s1); }
.install-card .install-table { background: transparent; }
.install-card .install-table td { border-bottom: 1px solid var(--line-soft); padding: 6px var(--s2) 6px 0; vertical-align: middle; }
.install-card .install-table tr:last-child td { border-bottom: 0; }
.install-card .install-table td:last-child { padding-right: 0; width: 1%; }
@media(max-width:700px) {
 .install-card .install-table tr { display:grid; grid-template-columns:1fr auto; }
 .install-card .install-table td:first-child { grid-column:1 / -1; }
 .install-card .install-table td:last-child { width:auto; }
}
.install-card .install-note { margin-top: var(--s2); font-size: 12.5px; }
/* Product search: mijnwifi.be filter (issue #83) */
.mwfield .field-logo .logo { display: inline-flex; align-items: center; gap: 4px; }
.mwfield .field-logo .mark { width: 14px; height: 14px; }
.mwfield .field-logo .wordmark { font-size: 12px; }
/* Locked editor steps until a customer is chosen (issue #87) */
.card .lock-note { display: none; }
.card.locked .lock-note { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); color: var(--muted); font-size: 13px; }
.card.locked > :not(.step):not(.lock-note) { opacity: .65; pointer-events: none; user-select: none; transition: opacity .15s; }
.card.locked .step .n { background: var(--skip-bg); color: var(--muted); }

/* assign a customer to a supplier order (#99) */
dialog.assign-dialog { width: min(560px, 94vw); }
.assign-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; }
.assign-row { text-align: left; border: 1px solid transparent; background: none; padding: var(--s2) var(--s3); border-radius: var(--r2); cursor: pointer; }
.assign-row:hover { background: var(--hover, rgba(127, 127, 127, .12)); }
.assign-row.on { border-color: var(--accent); background: var(--hover, rgba(127, 127, 127, .12)); }

/* preview of a mail on an approval card (#3) */
.mail-preview { margin: var(--s2) 0; }
.mail-preview summary { cursor: pointer; color: var(--muted); }
.mail-body { margin-top: var(--s2); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); color: var(--text); overflow-x: auto; }

/* yearly indexation dialog (#9) */
dialog.index-dialog { width: min(560px, 94vw); }
dialog.index-dialog .field small { display: block; margin-top: 2px; }

/* sub-items of "Actie vereist" and sections that fold (#111) */
.nav-sub { display: flex; flex-direction: column; gap: 1px; margin-bottom: var(--s1); }
.nav-sub:empty { display: none; }
.nav-item:not(.active) + .nav-sub { display: none; }
.nav-sub-item { display: flex; align-items: center; gap: 8px; padding: 4px var(--s3) 4px 40px; border-radius: var(--r1); color: var(--muted); text-decoration: none; font-size: 12.5px; white-space: nowrap; }
.nav-sub-item .nav-label { overflow: hidden; text-overflow: ellipsis; }
.nav-sub-item:hover { color: var(--text); background: var(--panel-2); }
.nav-sub-item:focus-visible { outline: none; box-shadow: var(--focus); }
.nav-sub-count { margin-left: auto; font-size: 11px; font-weight: 600; }
.fold { scroll-margin-top: calc(var(--topbar-h, 56px) + var(--s3)); }
.fold-head { margin: var(--s5) 0 var(--s2); }
.fold-head button { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px 2px 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; cursor: pointer; min-height: 0; }
.fold-head button svg { width: 16px; height: 16px; flex: none; transition: transform .15s ease; }
.fold-head button[aria-expanded="false"] svg { transform: rotate(-90deg); }
.fold-head button:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r1); }
.proposal { margin-top: 6px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .fold-head button svg { transition: none; } }

/* Time registration: actual hours and billed duration remain visibly distinct. */
.ts-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:var(--s3); }
.ts-toolbar label, .ts-form > label { display:flex; flex-direction:column; gap:var(--s1); }
.ts-toolbar select { max-width:26rem; }
.ts-totals { display:flex; flex-wrap:wrap; gap:var(--s4); margin:var(--s4) 0; }
.ts-grid { display:grid; gap:var(--s2); }
.ts-week, .ts-month { grid-template-columns:repeat(7,minmax(0,1fr)); }
.ts-day-card { min-width:0; border:1px solid var(--line); border-radius:var(--r2); padding:var(--s2); background:var(--panel); }
.ts-day-card h2 { font-size:14px; margin:0 0 var(--s2); }
.ts-day-card > button { max-width:100%; white-space:normal; }
.ts-day-card.ts-today { border-color:var(--accent); }
.ts-entry { display:flex; flex-direction:column; align-items:flex-start; text-align:left; white-space:normal; width:100%; margin:var(--s2) 0; padding:var(--s2); gap:var(--s1); background:var(--panel-2); }
.ts-entry span, .ts-entry b, .ts-entry small { overflow-wrap:anywhere; }
.ts-entry small { color:var(--muted); }
.ts-form { display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s4); }
.ts-form textarea { width:100%; }
@media(max-width:700px) { .ts-toolbar label { width:100%; } .ts-toolbar select { max-width:100%; } .ts-week,.ts-month { grid-template-columns:repeat(7,180px); overflow-x:auto; } }

/* Hours entry: aligned calendar controls and keyboard-first registration. */
.ts-filters { display:grid; grid-template-columns:180px minmax(180px,1fr) 120px; gap:16px; }
.ts-filters select { width:100%; max-width:none; }
.ts-date-nav { grid-column:1 / -1; display:flex; align-items:center; justify-content:flex-end; gap:8px; padding-top:12px; border-top:1px solid var(--line-soft); }
.ts-date-nav input { width:155px; }
.ts-date-nav button, .ts-date-nav input, .ts-filters select { height:40px; }
.ts-day-card { display:flex; flex-direction:column; min-height:180px; gap:8px; }
.ts-day-card > h2 { margin:0; }
.ts-day-card > .muted { font-size:12px; }
.ts-day-card .ts-add { margin-top:auto; display:flex; align-items:center; justify-content:center; gap:5px; width:100%; min-height:32px; height:32px; padding:4px; white-space:nowrap; line-height:1.2; font-size:12px; }
.ts-day-card .ts-add .icon { flex:none; }
.ts-form { padding:24px; gap:20px; }
.ts-form-head { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.ts-form-head h2 { margin:0; font-size:20px; }
.ts-form .ts-employee-field { width:230px; }
.ts-form-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.ts-form label, .ts-form .ts-combobox > label, .ts-form .ts-time-field > label, .ts-form .ts-date-field > label { display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:550; }
.ts-form select, .ts-form input:not(.ts-native-date) { width:100%; height:42px; min-width:0; }
.ts-form input, .ts-form textarea, .ts-form select { font-weight:400; }
.ts-form-grid > *, .ts-when > * { min-width:0; }
.ts-when { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:20px; }
.ts-add-slot { width:100%; justify-content:center; border-style:dashed; }
.time-registration-link { display:inline; padding:0; border:0; background:transparent; color:var(--accent-strong); text-align:left; font:inherit; font-weight:550; box-shadow:none; white-space:normal; }
.time-registration-link:hover { text-decoration:underline; background:transparent; }
#ts-slots { display:grid; gap:10px; }
.ts-slot-head,.ts-slot-row .ts-when { display:grid; grid-template-columns:1.15fr 1fr 1fr 36px; gap:12px; align-items:center; }
.ts-slot-head { font-size:13px; font-weight:550; margin-bottom:7px; }
.ts-slot-row .ts-input-wrap { margin:0; }
.ts-slot-row .ts-remove-slot { width:36px; height:36px; padding:0; }
@media(min-width:701px) {
 .ts-editor-dialog .ts-slot-row .ts-date-field > label,.ts-editor-dialog .ts-slot-row .ts-time-field > label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
.ts-form-actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; padding-top:16px; border-top:1px solid var(--line-soft); }
.ts-form-actions button { min-width:110px; height:40px; }
#ts-error:empty { display:none; }
.ts-combobox, .ts-time-field, .ts-date-field, .ts-input-wrap { position:relative; }
.ts-input-wrap { margin-top:7px; }
.ts-input-wrap > input:not(.ts-native-date) { padding-right:42px; }
.ts-input-wrap > .icon { position:absolute; right:13px; top:13px; color:var(--muted); pointer-events:none; }
.ts-input-wrap .ts-input-button { position:absolute; right:1px; top:1px; height:40px; width:38px; min-height:0; padding:0; display:flex; align-items:center; justify-content:center; border:0; border-left:1px solid var(--line-soft); background:transparent; border-radius:0 var(--r1) var(--r1) 0; box-shadow:none; }
.ts-native-date { position:absolute; bottom:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.ts-customer-results, .ts-time-picker { position:absolute; z-index:40; top:100%; margin-top:6px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--shadow-lg); }
.ts-customer-results { left:0; right:0; max-height:240px; overflow-y:auto; padding:4px; }
.ts-customer-results [role=option] { padding:10px 12px; cursor:pointer; border-radius:var(--r1); font-size:14px; }
.ts-customer-results [role=option]:hover, .ts-customer-results [role=option].active { background:var(--accent-soft); color:var(--accent-strong); }
.ts-no-results { padding:12px; }
.ts-time-picker { right:0; width:min(240px,calc(100vw - 48px)); padding:14px; }
.ts-picker-heading { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:650; margin-bottom:8px; }
.ts-picker-columns { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ts-hour-scroll, .ts-minute-scroll { position:relative; display:flex; flex-direction:column; gap:5px; height:180px; overflow-y:scroll; overscroll-behavior:contain; scroll-snap-type:y proximity; scrollbar-width:thin; padding-right:5px; }
.ts-hour-scroll button, .ts-minute-scroll button { flex:none; width:100%; scroll-snap-align:center; }
.ts-time-picker button { display:flex; align-items:center; justify-content:center; height:32px; min-height:32px; padding:0; font-variant-numeric:tabular-nums; box-shadow:none; font-size:13px; }
.ts-time-picker button.selected { background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); }
.ts-preferences-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:700px) {
 .ts-filters { grid-template-columns:1fr 1fr; }
 .ts-filters > label:nth-child(2) { grid-column:1 / -1; grid-row:2; }
 .ts-date-nav { justify-content:flex-start; flex-wrap:wrap; }
 .ts-form-head { align-items:flex-start; flex-direction:column; gap:16px; }
 .ts-form .ts-employee-field { width:100%; }
 .ts-form-grid,.ts-preferences-fields { grid-template-columns:1fr; }
 .ts-when { grid-template-columns:1fr 1fr; }
 .ts-slot-head { display:none; }
 .ts-slot-row .ts-when { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px; gap:12px; align-items:end; }
 .ts-slot-row .ts-date-field { grid-column:1 / 3; }
 .ts-slot-row .ts-remove-slot { grid-column:3; grid-row:1 / 3; align-self:center; }
 .ts-slot-row .ts-time-field { grid-row:2; }
 .ts-slot-row + .ts-slot-row { padding-top:12px; border-top:1px solid var(--line); }
 .ts-slot-row .ts-input-wrap { margin-top:7px; }
 .ts-date-field { grid-column:1 / -1; }
 .ts-form { padding:16px; }
 .ts-time-field:nth-child(2) .ts-time-picker { left:0; right:auto; }
}

#ts-editor { scroll-margin-top: 76px; }

.ts-business_week { grid-template-columns:repeat(5,minmax(0,1fr)); }
.ts-filters { grid-template-columns:180px minmax(180px,1fr) 160px; }
@media(max-width:700px) { .ts-business_week { grid-template-columns:repeat(5,180px); overflow-x:auto; } .ts-filters { grid-template-columns:1fr 1fr; } }

.ts-filters > .ts-combobox label { display:block; }
.ts-filters > .ts-combobox input { width:100%; height:40px; }
.ts-filters > .ts-combobox .ts-input-wrap { margin-top:6px; }
@media(max-width:700px) { .ts-filters > .ts-combobox { grid-column:1 / -1; grid-row:2; } }
/* Proportional time calendar: 72 pixels per hour in every view. */
.ts-filters { grid-template-columns:minmax(180px,1fr) 180px; }
.ts-employee-legend { margin:18px 0; }
.ts-employee-legend > .muted { font-size:12px; }
.ts-employee-legend > div { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.ts-employee-legend button { display:flex; gap:8px; align-items:center; border-radius:20px; font-size:13px; }
.ts-employee-legend i { width:11px; height:11px; border-radius:50%; background:var(--employee-color); }
.ts-employee-legend button[aria-pressed=false] { opacity:.5; text-decoration:line-through; }
.ts-colour-panel { border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:12px; padding:20px; box-shadow:var(--shadow-lg); width:260px; }
.ts-colour-panel::backdrop { background:#0002; }
.ts-colour-panel form, .ts-colour-panel label { display:flex; flex-direction:column; gap:12px; }
.ts-colour-panel input[type=color] { width:100%; height:44px; padding:4px; }
.ts-color-swatches { display:flex; gap:7px; }
.ts-color-swatches button { width:28px; height:28px; min-height:0; padding:0; border-radius:50%; }
.ts-time-calendar { margin-bottom:28px; padding:0 0 14px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r2); background:var(--panel); }
.ts-time-head,.ts-time-body { display:grid; grid-template-columns:58px repeat(var(--day-count),minmax(110px,1fr)); min-width:calc(58px + var(--day-count) * 110px); }
.ts-time-head { border-bottom:1px solid var(--line); }
.ts-column-head { display:flex; align-items:center; justify-content:space-between; min-width:0; padding:10px 6px; border-left:1px solid var(--line); font-size:12px; gap:3px; }
.ts-column-head b { font-weight:600; }
.ts-column-head.is-today { background:var(--accent-soft); color:var(--accent-strong); }
.ts-column-head button { padding:0; width:24px; height:28px; min-height:0; flex:none; }
.ts-time-axis { position:relative; background:var(--panel); z-index:1; }
.ts-time-axis span { position:absolute; right:8px; transform:translateY(-50%); font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.ts-time-axis span:first-child { transform:none; }
.ts-time-column { position:relative; border-left:1px solid var(--line); background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hour-height)/2 - 1px),var(--line-soft) calc(var(--hour-height)/2 - 1px),var(--line-soft) calc(var(--hour-height)/2)),repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hour-height) - 1px),var(--line) calc(var(--hour-height) - 1px),var(--line) var(--hour-height)); }
.ts-time-column.is-empty { background:var(--panel-2); }
.ts-event { position:absolute; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; min-height:0; padding:4px 6px; gap:3px; margin:0; border:1px solid color-mix(in srgb,var(--employee-color) 45%,var(--panel)); border-left:3px solid var(--employee-color); border-radius:4px; background:color-mix(in srgb,var(--employee-color) 14%,var(--panel)); color:var(--text); box-shadow:none; text-align:left; white-space:normal; overflow:hidden; font-size:11px; line-height:1.3; }
.ts-event b { font-size:11px; font-weight:650; }
.ts-event span { font-weight:400; }
.ts-event b,.ts-event span { width:100%; overflow:hidden; overflow-wrap:anywhere; }
.ts-event:hover,.ts-event:focus-visible { z-index:2; border-color:var(--employee-color); filter:brightness(.97); }
.ts-event-short { padding:0 4px; display:block; white-space:nowrap; line-height:1.1; }
.ts-event-short b { display:block; text-overflow:ellipsis; white-space:nowrap; }
.ts-event-short span { display:none; }
.ts-unplaced { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; padding:16px; border-top:1px solid var(--line); }
.ts-unplaced > b { width:100%; font-size:12px; }
.ts-unplaced > div { width:220px; }
.ts-unplaced .ts-event { position:relative; margin-top:6px; width:100%; }
@media(max-width:700px) { .ts-filters { grid-template-columns:1fr 130px; } .ts-filters > .ts-combobox { grid-column:auto; grid-row:auto; } }

@media(max-width:700px) { .ts-filters > label:nth-child(2) { grid-column:auto; grid-row:auto; } }
.ts-editor-dialog { width:min(820px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); padding:0; border:1px solid var(--line); border-radius:var(--r2); background:var(--panel); color:var(--text); box-shadow:var(--shadow-lg); overflow:auto; }
.ts-editor-dialog::backdrop { background:rgb(0 0 0 / .38); backdrop-filter:blur(2px); }
.ts-editor-dialog .ts-form { margin:0; border:0; box-shadow:none; }
.ts-time-column[data-drag-date] { cursor:crosshair; touch-action:none; user-select:none; }
.ts-time-column .ts-event { cursor:pointer; touch-action:auto; }
.ts-drag-preview { position:absolute; left:2px; right:2px; z-index:3; background:color-mix(in srgb,var(--accent) 18%,transparent); border:1px solid var(--accent); border-radius:4px; color:var(--text); padding:2px 4px; font-size:11px; font-weight:600; pointer-events:none; min-height:2px; }
body:has(.ts-editor-dialog[open]) { overflow:hidden; }

/* Time pickers use the browser's top layer, outside the modal's scroll box. */
.ts-time-picker[popover] { position:fixed; inset:auto; margin:0; max-height:calc(100dvh - 16px); overflow-y:auto; color:var(--text); }
@media(max-width:700px) { .ts-time-field:nth-child(2) .ts-time-picker[popover] { right:auto; } }
/* Always allow group disclosure; close other groups only when space runs out. */
.nav-group-items { display:flex; flex-direction:column; gap:1px; }
.nav-group-title { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:26px; height:auto; border:0; border-radius:var(--r1); background:transparent; box-shadow:none; line-height:1.4; text-align:left; }
.nav-group-title > .icon { width:13px; height:13px; flex:none; }
.nav-group-title { cursor:pointer; padding-top:5px; padding-bottom:5px; }
.nav-group-title[aria-expanded=false] > .icon { transform:rotate(-90deg); }
.nav-group-title:hover { background:var(--panel-2); }

/* Shared page polish: bounded content, consistent actions and readable small screens. */
.pagehead .actions, .action-buttons { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.grow, .cell-v, .kv dd { min-width:0; }
.kv { grid-template-columns:fit-content(12rem) minmax(0,1fr); }
.kv dd, .kv code, pre { overflow-wrap:anywhere; }
.logtable td code { white-space:normal; overflow-wrap:anywhere; }
.value-preview { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; text-align:left; }
.logtable td .badge { white-space:nowrap; }
.logtable td { max-width:24rem; }
.approval > .row { align-items:flex-start; }
.approval > .row > .grow { flex-basis:30rem; }
.approval .actions { margin-left:auto; flex-wrap:wrap; }
.job-card .grow { flex:1 1 24rem; }
.job-card .action-buttons { margin-left:auto; }
@container main (max-width:800px) {
  .approval > .row > .grow { flex-basis:auto; }
}
.settings-form { display:flex; flex-direction:column; gap:var(--s4); }
.settings-form h2, .settings-form p { margin:0; }
.settings-form [role=alert]:empty { display:none; }
.settings-form label:not(.chk) { display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--muted); }
.settings-form input, .settings-form select, .settings-form textarea { width:100%; font-size:14px; font-weight:400; }
.settings-form .settings-actions { margin:0; padding-top:var(--s3); border-top:1px solid var(--line-soft); justify-content:flex-end; }
.settings-form .ts-preferences-fields { gap:var(--s4); }
body:has(dialog[open]) { overflow:hidden; }

/* Monthly billing preview: reuse the hours customer picker and theme tokens. */
.bp-notice { display:flex; align-items:flex-start; gap:12px; }
.bp-notice > svg { flex:none; margin-top:3px; }
.bp-notice p { margin:6px 0 0; color:var(--muted); }
.bp-filters { display:flex; align-items:flex-end; flex-wrap:wrap; gap:16px; }
.bp-filters .ts-combobox { flex:1; min-width:220px; }
.bp-customer-filter { display:flex; align-items:flex-end; gap:8px; flex:1; min-width:220px; }
.bp-customer-filter .ts-combobox { min-width:0; }
.bp-customer-filter > button { flex:none; width:40px; height:40px; }
.bp-filters [hidden] { display:none !important; }
.bp-customer-group { margin:12px 0; }
.bp-customer-summary { display:flex; align-items:center; flex-wrap:wrap; gap:12px; cursor:pointer; }
.bp-customer-summary::before { content:'›'; font-size:20px; color:var(--muted); }
.bp-customer-group[open] > summary::before { transform:rotate(90deg); }
.bp-customer-summary strong { flex:1; min-width:160px; }
.bp-customer-summary > span { color:var(--muted); font-size:13px; }
.bp-customer-actions { display:inline-flex; gap:8px; flex-wrap:wrap; }
.bp-customer-detail { margin-top:20px; }
.bp-summary-totals { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; margin:20px 0 0; }
.bp-summary-totals dt { color:var(--muted); font-size:13px; }
.bp-summary-totals dd { margin:6px 0 0; font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; }
.bp-filters > label { display:flex; flex-direction:column; gap:6px; }
.bp-filters input, .bp-filters > button { min-height:40px; }
.bp-filters .ts-combobox input { width:100%; }
.bp-groups { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; }
.bp-groups .card { margin-top:0; }
.bp-totals { display:grid; grid-template-columns:1fr auto; gap:10px 16px; margin:20px 0 0; }
.bp-totals dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
#bp-content[aria-busy="true"] { opacity:.65; }
.bp-problems li { margin:8px 0; }
.bp-warning-source > td, .bp-line-warning > td { background:var(--warn-bg); }
.bp-line-warning > td { color:var(--warn); padding-top:0; }
.bp-line-warning p { display:flex; align-items:flex-start; gap:6px; margin:6px 0; }
.bp-line-warning svg { flex:none; margin-top:2px; }
@container main (max-width:800px) {
 table.stack tr.bp-warning-source { background:var(--warn-bg); margin-bottom:0; }
 table.stack tr.bp-warning-source > td:first-child { border-left:0; }
 table.stack tr.bp-line-warning { margin-top:0; padding-top:0; background:var(--warn-bg); }
 table.stack tr.bp-line-warning > td:not([data-label]) { display:block; width:100%; max-width:none; text-align:left; justify-items:stretch; border-left:0; background:transparent; }
 table.stack tr.bp-line-warning > td::before { display:none; }
}
.bp-report-dialog { width:min(1200px,calc(100vw - 32px)); height:calc(100dvh - 48px); padding:0;
  border:1px solid var(--line); border-radius:var(--r2); color:var(--text); background:var(--panel); }
.bp-report-dialog[open] { display:flex; flex-direction:column; }
.bp-report-dialog::backdrop { background:rgb(0 0 0 / .45); }
.bp-report-dialog > .row { padding:16px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.bp-report-dialog h2 { margin:0; }
.bp-report-dialog iframe { flex:1; min-height:0; width:100%; border:0; background:white; }
.bp-report-dialog a { display:inline-flex; align-items:center; gap:8px; }
@media(max-width:700px) {
  .bp-filters .ts-combobox { flex-basis:100%; min-width:0; }
  .bp-customer-filter { flex-basis:100%; min-width:0; }
  .bp-filters > label { flex:1 1 100%; min-width:0; }
  .bp-filters > label input { width:100%; min-width:0; }
  .bp-report-dialog { width:calc(100vw - 16px); height:calc(100dvh - 16px); }
  .bp-report-dialog > .row { display:grid; grid-template-columns:1fr auto; gap:10px; padding:12px; }
  .bp-report-dialog > .row > .grow { display:none; }
  .bp-report-dialog h2 { grid-column:1; grid-row:1; }
  .bp-report-dialog #bp-close { grid-column:2; grid-row:1; justify-self:end; }
  .bp-report-dialog a, .bp-report-dialog #bp-print { grid-row:2; }
  .bp-report-dialog h2 { font-size:17px; }
}
@media(max-width:700px) {
  .logtable { min-width:760px; }
  table:not(.logtable) th { white-space:normal; }
  .tiles > .tile:last-child:nth-child(odd) { grid-column:1 / -1; }
  .pagehead .titles { min-width:0; flex-basis:100%; }
  .pagehead .actions { max-width:100%; }
  .filters > * { min-width:0; }
  .filters .colpick { justify-self:end; }
  .colpick .pop { max-width:calc(100vw - 48px); }
  .kv { grid-template-columns:1fr; gap:var(--s1); }
  .kv dd { margin-bottom:var(--s2); }
  table.stack td .cell-v { overflow-wrap:anywhere; }
  table.stack { background:transparent; }
  #plist table.stack td { max-width:none; }
  table.stack td.exc-actions { grid-template-columns:1fr; }
  table.stack td.exc-actions::before { display:none; }
  .exc-actions .act { flex-wrap:wrap; }
  .approval .actions { width:100%; }
  .approval > .row > .grow { flex-basis:auto; }
  .approval .actions button { flex:1 1 auto; }
  .job-card .grow { flex-basis:100%; }
  td.row-actions { display:table-cell; white-space:nowrap; }
}
@media(max-width:600px) {
  .user > .badge { display:none; } /* Keep the Local/Live badge visible; hide the extra emulator detail. */
  .crumbs > :not([aria-current]) { display:none; }
  .topbar { gap:var(--s2); }
  .crumbs { flex:1; }
  .ts-date-nav { display:grid; grid-template-columns:40px minmax(0,1fr) 40px; }
  .ts-date-nav input { width:100%; }
  .ts-date-nav button:last-child { grid-column:1 / -1; }
}

/* Keep scan progress readable while the action is unavailable. */
#scan[aria-busy="true"] { opacity: 1; color: var(--muted); cursor: progress; }
.sp-layout { display:grid; grid-template-columns:minmax(220px, .7fr) minmax(0, 2fr); gap:20px; align-items:start; }
.sp-customers { position:sticky; top:16px; }
.sp-customer-list { display:grid; gap:6px; }
.sp-customer-list button { display:flex; align-items:flex-start; gap:8px; text-align:left; justify-content:flex-start; white-space:normal; }
.sp-customer-list small,.sp-metrics small { display:block; color:var(--muted); }
.sp-fields { display:grid; grid-template-columns:1fr; gap:12px; margin:20px 0; }
.sp-fields label { display:grid; gap:6px; }
.sp-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0; }
.sp-metrics strong { display:block; font-size:1.8rem; }
.sp-actions { flex-wrap:wrap; gap:10px; margin:20px 0; }
#sp-people input,#sp-people select { width:100%; min-width:0; }
#sp-people td { vertical-align:top; }
.sp-preview { border-top:1px solid var(--line); margin-top:20px; padding-top:16px; }
@media(max-width:1000px){.sp-layout{grid-template-columns:1fr}.sp-customers{position:static}.sp-customer-list{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
/* Editable people need room for names and full decision labels. */
#sp-detail { container-type:inline-size; container-name:supportplus; }
@container supportplus (max-width:900px) {
  #sp-people table.stack thead { display:none; }
  #sp-people table.stack, #sp-people tbody { display:block; }
  #sp-people table.stack tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; padding:16px; border-bottom:1px solid var(--line); }
  #sp-people table.stack td { display:block; padding:0 !important; min-width:0; width:auto; border:0; white-space:normal; }
  #sp-people table.stack td::before { display:block; content:attr(data-label); font-size:12px; color:var(--muted); margin-bottom:5px; }
  #sp-people .cell-v { min-width:0; }
}
@container supportplus (max-width:420px) {
  #sp-people table.stack tbody tr { grid-template-columns:1fr; }
  .sp-metrics { gap:8px; }
}
.sp-pricing { display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start; }
.uf-toolbar { flex-wrap:wrap; gap:12px; }
.uf-toolbar input { flex:1; min-width:180px; }
.uf-host { display:block; margin-top:4px; }
.uf-dialog { width:min(560px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; border:1px solid var(--line); border-radius:var(--r2); background:var(--panel); color:var(--text); padding:24px; }
.uf-dialog::backdrop { background:rgb(0 0 0 / .5); }
.uf-dialog form { display:grid; gap:16px; }
.uf-dialog label { display:grid; gap:6px; }
.uf-dialog input,.uf-dialog select { width:100%; min-width:0; }

/* Customer portfolio */
.hg-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.hg-summary .card { padding:18px; display:grid; gap:8px; }
.hg-summary strong { font-size:1.4rem; }
.hg-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:16px 0; }
.hg-toolbar > input { flex:1; min-width:160px; }
.hg-dialog { width:min(680px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:1px solid var(--line); border-radius:var(--r2); background:var(--panel); color:var(--text); }
.hg-dialog::backdrop { background:rgb(0 0 0 / .5); }
.hg-dialog form { display:grid; gap:14px; }
.hg-dialog label { display:grid; gap:6px; }
.hg-dialog input,.hg-dialog select { width:100%; min-width:0; }
.hg-dialog .hg-check { display:flex; align-items:center; gap:8px; }
.hg-check input { width:auto; }
.hg-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hg-allocation { display:grid; grid-template-columns:minmax(0,2fr) minmax(100px,1fr) 90px 36px; align-items:end; gap:8px; }
.hg-share { border:1px solid var(--line); border-radius:var(--r); padding:12px; margin-bottom:10px; }
.hg-group-properties { margin-top:12px; display:grid; gap:4px; }
.hg-group-properties ul { margin:0; padding-left:18px; font-size:.85rem; }
.hg-saving td { background-image:linear-gradient(90deg,transparent,var(--accent-soft),transparent); background-size:200% 100%; animation:ts-options-refresh 1.6s ease-in-out infinite; }
.hg-settings { display:grid; gap:16px; }
.hg-settings>label:not(.sp-tick) { display:grid; gap:6px; max-width:300px; }
.hg-price-properties { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px; }
.hg-price-properties .sp-tick span { flex:1; }
.hg-price-properties small { display:block; }
.hg-settings>button { justify-self:start; }
@media(prefers-reduced-motion:reduce){.hg-saving td{animation:none;}}
@media(max-width:540px) { .hg-allocation { grid-template-columns:minmax(0,1fr) 90px 36px; } .hg-allocation>label:first-child { grid-column:1/-1; } }
@media(max-width:700px) { .hg-summary { grid-template-columns:1fr 1fr; } .hg-dialog { padding:16px; } .hg-summary strong { font-size:1.1rem; } }
.hg-dialog h2,.hg-dialog h3,.hg-dialog p { margin:0; }
.hg-dialog .hg-toolbar { margin:4px 0 0; }
.hg-dialog #hg-error:empty { display:none; }
.hg-review { color:var(--warn); }
/* Compact month calendar; daily/weekly views retain their actual-time grid. */
.ts-month-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r2); background:var(--panel); }
.ts-month-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); min-width:1050px; }
.ts-month-weekday { padding:12px; color:var(--muted); font-size:12px; font-weight:600; border-bottom:1px solid var(--line); text-transform:capitalize; }
.ts-month-day { min-width:0; min-height:120px; padding:8px 5px 12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.ts-month-day:nth-child(7n) { border-right:0; }
.ts-month-day.is-empty { background:var(--panel-2); }
.ts-month-day-head { display:flex; align-items:center; justify-content:space-between; margin:0 3px 8px; font-size:12px; }
.ts-month-day-head time { display:grid; place-items:center; width:26px; height:26px; font-weight:600; }
.ts-month-day.is-today time { border-radius:50%; background:var(--accent-strong); color:var(--on-accent); }
.ts-month-day-head .icon { width:25px; height:25px; min-height:25px; padding:4px; }
.ts-month-entries { display:flex; flex-direction:column; gap:4px; }
.ts-month-entry { display:flex; align-items:center; justify-content:space-between; gap:4px; width:100%; min-width:0; min-height:28px; padding:5px; border:0; border-left:3px solid var(--employee-color); border-radius:4px; background:color-mix(in srgb,var(--employee-color) 12%,var(--panel)); color:var(--text); box-shadow:none; font-size:11px; text-align:left; }
.ts-month-entry b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.ts-month-entry span { flex-shrink:0; font-size:10px; font-variant-numeric:tabular-nums; }
.ts-month-entry:hover,.ts-month-entry[aria-expanded=true] { background:color-mix(in srgb,var(--employee-color) 23%,var(--panel)); }
.ts-month-detail { position:fixed; inset:auto; margin:0; width:min(360px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow-y:auto; padding:18px; border:1px solid var(--line); border-radius:var(--r2); background:var(--panel); color:var(--text); box-shadow:var(--shadow-lg); font-size:13px; }
.ts-month-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.ts-month-detail-head b { overflow-wrap:anywhere; }
.ts-month-detail-head button { flex-shrink:0; }
.ts-month-detail p { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; margin:14px 0; }
.ts-month-detail .muted { font-size:12px; line-height:1.6; }
@media(max-width:700px) { .ts-month-calendar { min-width:1120px; } .ts-month-entry { min-height:36px; } }

.ts-form-actions .ts-delete { margin-right:auto; min-width:40px; width:40px; padding:7px; }
.ts-form-actions .ts-delete > svg { width:18px; height:18px; }
@media(max-width:450px) { .ts-form-actions { flex-wrap:wrap; } .ts-form-actions button { min-width:0; } }

.bp-hold-notice { padding:12px 16px; margin:12px 0; border-inline-start:3px solid var(--accent); background:var(--surface); color:var(--text); overflow-wrap:anywhere; }

.bp-customer-summary > .bp-hold-notice { flex-basis:100%; margin:0; font-size:13px; }

.bp-customer-summary > .bp-cycle-note { flex-basis:100%; margin:0; font-size:13px; color:var(--muted); }

/* Registration detail belongs to its service line, in both table and card layouts. */
.linked-registrations {padding:var(--s2);border-left:2px solid var(--accent);}
.linked-registration {display:flex;gap:var(--s3);align-items:center;padding:var(--s3) 0;white-space:normal;}
.linked-registration[hidden] {display:none;}
.linked-registration + .linked-registration {border-top:1px solid var(--border);}
.linked-registration .grow {min-width:0;overflow-wrap:anywhere;}
.linked-registration .row {flex-shrink:0;}
@media(max-width:700px) {
  .linked-registration {align-items:stretch;flex-direction:column;}
  table.stack tr.billing-registrations td {display:block;width:100%;}
  table.stack tr.billing-registrations {margin-top:-1rem;}
}
@media(max-width:700px) {
  #invoice-concepts .logtable td .badge {white-space:normal;max-width:100%;}
  #invoice-concepts .logtable td a {white-space:normal;overflow-wrap:anywhere;}
}
@media(max-width:700px) {
  #invoice-concepts table.logtable.stack {min-width:0;width:100%;}
}

.ts-task-warning { display:flex; align-items:flex-start; gap:6px; color:var(--warn); }
.ts-task-warning[hidden] { display:none; }
.ts-task-warning svg { flex-shrink:0; margin-top:1px; }

.ts-time-error { display:block; color:var(--warn); margin-top:6px; }
.ts-time-error[hidden] { display:none; }
.ts-slot-row .ts-when { align-items:start; }

.ts-editor-loading { display:flex; align-items:center; justify-content:center; gap:10px; min-height:160px; color:var(--muted); }

.ts-overlap-warning[hidden] { display:none; }
.ts-overlap-warning ul { margin:6px 0; padding-left:18px; max-height:140px; overflow:auto; overflow-wrap:anywhere; }

.ts-options-refreshing input, .ts-options-refreshing select, .ts-options-refreshing textarea { background-image:linear-gradient(90deg,transparent,var(--accent-soft, var(--warn-bg)),transparent); background-size:200% 100%; animation:ts-options-refresh 1.6s ease-in-out infinite; }
@keyframes ts-options-refresh { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce) { .ts-options-refreshing input, .ts-options-refreshing select, .ts-options-refreshing textarea { animation:none; } }

.ts-deleting-row { opacity:.55; text-decoration:line-through; pointer-events:none; }
.ts-saving-row:disabled { opacity:1; cursor:wait; background-image:linear-gradient(90deg,transparent,var(--accent-soft),transparent); background-size:200% 100%; animation:ts-options-refresh 1.6s ease-in-out infinite; }
@media(prefers-reduced-motion:reduce){.ts-saving-row:disabled{animation:none;}}
.ts-deleting-row :is(b,strong,span,div,button,td) { text-decoration:line-through; }
.bp-cycle-compact { display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding:16px 20px; }
.bp-cycle-schedule { display:flex; flex-wrap:wrap; gap:6px 24px; flex:1 1 600px; }
.bp-cycle-toggle { display:flex; align-items:center; gap:8px; white-space:nowrap; margin:0; }
.bp-cycle-toggle input { appearance:none; width:36px; height:22px; padding:2px; margin:0; border-radius:20px; background:var(--line); cursor:pointer; }
.bp-cycle-toggle input::before { content:''; display:block; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:transform .15s; }
.bp-cycle-toggle input:checked { background:var(--accent); }
.bp-cycle-toggle input:checked::before { transform:translateX(12px); }
.bp-cycle-toggle input:disabled { opacity:.5; cursor:not-allowed; }
.bp-cycle-compact > small, .bp-cycle-compact > details { flex-basis:100%; }

.view-refreshing { background-image:linear-gradient(90deg,transparent,var(--accent),transparent); background-size:200% 2px; background-repeat:no-repeat; animation:view-refresh 1.8s linear infinite; }
@keyframes view-refresh { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media(prefers-reduced-motion:reduce){.view-refreshing{animation:none;background-size:100% 2px;}}

/* Page refresh sits on the breadcrumb border, independent of list scroll. */
body:has(#main .page-refreshing) .topbar::after, body:has(#main.page-refreshing .view-status) .topbar::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); background-size:200% 2px; animation:view-refresh 1.8s linear infinite; }
.view-status { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; margin-block:8px; }
.pager > span + .view-status::before { content:'·'; margin-inline:2px; }
@media(prefers-reduced-motion:reduce){body:has(.page-refreshing) .topbar::after{animation:none;}}
/* Shared quote/invoice workspace uses the available viewport. */
#main:has(.doc-grid) { max-width:none; }
#basket .line-sku { white-space:nowrap; min-width:7rem; overflow-wrap:normal; word-break:normal; }
#basket td:nth-child(5),#basket td:nth-child(7),#basket tfoot th { white-space:nowrap; }
#basket .line-name { display:flex; align-items:flex-start; gap:5px; }
#basket .line-name .linetext { flex:1; min-width:12rem; white-space:pre-line; }
#basket .line-name button { flex:none; }
#basket .add-odoo-name { color:var(--accent); background:var(--accent-soft); }
.money-input { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
#basket input[data-price],#basket input[data-total] { width:5.4rem !important; }
#basket input[data-qty] { width:3.6rem !important; }
#basket th,#basket td { padding:10px 6px; }
#basket .line-name .linetext { min-width:10rem; }
@container main (max-width:800px) {
 #basket .line-name .linetext{min-width:0;}
}
.draft-save-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.draft-save-actions #make { flex:1; width:auto; min-width:13rem; }
.draft-autosave { display:flex; align-items:center; gap:8px; white-space:nowrap; font-size:13px; cursor:pointer; }
.draft-autosave input { accent-color:var(--accent); width:32px; height:18px; }
.draft-autosave input { appearance:none; padding:2px; margin:0; width:36px; height:22px; border-radius:20px; background:var(--line); cursor:pointer; }
.draft-autosave input::before { content:''; display:block; width:16px; height:16px; border-radius:50%; background:var(--panel); transition:transform .15s; }
.draft-autosave input:checked { background:var(--accent); }
.draft-autosave input:checked::before { transform:translateX(12px); }
#basket input[data-qty], #basket input[data-price], #basket input[data-total] { text-align:right; font-variant-numeric:tabular-nums; appearance:textfield; }
#basket input[data-qty], #basket .quote-qty-column, #basket .quote-stock-column { text-align:center; }
#basket input::-webkit-inner-spin-button, #basket input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
@container main (min-width:801px) {
 #basket tbody > tr > td { vertical-align:middle; }
 #basket .line-name { align-items:center; }
 #basket th:nth-child(6), #basket th:nth-child(8) { padding-right:17px; }
}
@container main (max-width:800px) {
 #basket table.stack .quote-qty-column::before, #basket table.stack .quote-stock-column::before { text-align:left; }
}
#quote-save-status:empty { display:none; }
#quote-open-odoo { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; }
#quote-open-odoo[hidden] { display:none; }
.html-editor { border:1px solid var(--line); border-radius:var(--r1); background:var(--panel); overflow:hidden; }
.html-editor:focus-within { border-color:var(--accent); }
.html-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:2px; padding:5px; background:var(--panel-2); border-bottom:1px solid var(--line); }
.html-toolbar button { min-width:32px; }
.html-toolbar button[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent-strong); box-shadow:inset 0 0 0 1px var(--accent); }
.html-toolbar [data-command="bold"] { font-weight:700; }
.html-toolbar [data-command="italic"] { font-style:italic; }
.html-toolbar [data-command="underline"] { text-decoration:underline; }
.html-content { min-height:110px; max-height:360px; overflow:auto; padding:10px 12px; line-height:1.55; outline:none; overflow-wrap:anywhere; white-space:pre-wrap; }
.html-content p { margin:0 0 .6em; }
.html-content p:last-child { margin-bottom:0; }
.html-content ul,.html-content ol { padding-left:24px; }
.html-link { display:flex; align-items:end; gap:8px; flex-wrap:wrap; padding:10px; border-top:1px solid var(--line); }
.html-link[hidden], #note-status:empty { display:none; }
.html-link label { flex:1 1 180px; }
.html-link input { width:100%; }
.html-link small { flex-basis:100%; }
.note-refreshing .html-content { background-image:linear-gradient(90deg,transparent,var(--accent-soft),transparent); background-size:200% 100%; animation:ts-options-refresh 1.6s ease-in-out infinite; }
@media(prefers-reduced-motion:reduce){.note-refreshing .html-content{animation:none;}}

/* Keep descriptions and primary actions usable on narrow screens. */
@container main (max-width:800px) {
 #qlist table.stack { min-width:0; width:100%; }
 #qlist table.stack td { width:auto; }
 #qlist table.stack td.row-actions { display:grid; }
}
@container main (max-width:500px) {
 #plist table.stack { min-width:0; width:100%; }
 #basket table.stack td:nth-child(2), .bp-customer-detail table.stack td:nth-child(2) { grid-template-columns:minmax(0,1fr); gap:4px; }
 #qlist table.stack td.quote-customer { grid-template-columns:minmax(0,1fr); gap:4px; }
 #plist table.stack td.prod-supplier, #plist table.stack td.prod-name { grid-template-columns:minmax(0,1fr); gap:4px; }
 #basket .line-sku { white-space:normal; overflow-wrap:anywhere; }
 #basket .line-name { align-items:flex-start; }
 .doc-bar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 10px; padding:8px 10px; bottom:8px; }
 .doc-bar[hidden] { display:none; }
 #docbar-info { grid-column:1 / -1; font-size:12px; }
 .doc-bar > .grow { display:none; }
 .doc-save-full { display:none; }
 .doc-save-short { display:inline; }
 #docbar-lines { justify-self:start; white-space:normal; }
 #docbar-make { min-height:36px; max-width:100%; justify-self:end; white-space:normal; }
 .bp-summary-totals { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
 .bp-summary-totals dt { font-size:12px; min-height:3em; line-height:1.5; }
 .bp-summary-totals dd { font-size:20px; overflow-wrap:anywhere; }
 .bp-customer-detail > .card { padding:12px; }
}
@media(max-width:700px) {
 .ts-slot-row .ts-when { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ts-slot-row .ts-date-field { grid-column:1 / -1; grid-row:1; padding-right:48px; }
 .ts-slot-row .ts-remove-slot { grid-column:2; grid-row:1; justify-self:end; align-self:end; margin-bottom:3px; }
 .ts-editor-dialog { scroll-padding-bottom:80px; }
 .ts-editor-dialog .ts-form-actions { position:sticky; bottom:0; z-index:2; margin:0 -16px; padding:12px 16px; background:var(--panel); box-shadow:0 -6px 12px var(--panel); }
 .ts-editor-dialog .ts-form-actions { gap:8px; }
 .ts-editor-dialog .ts-form-actions button { padding-inline:10px; font-size:13px; }
}

.name-refreshing { background:linear-gradient(100deg,var(--panel) 20%,var(--panel-2) 45%,var(--panel) 70%); background-size:250% 100%; animation:name-refresh 1.2s linear infinite; }
@keyframes name-refresh { to { background-position:-250% 0; } }
@media(prefers-reduced-motion:reduce) { .name-refreshing { animation:none; border-color:var(--accent); } }
.tablewrap table.stack:has(.table-sort) thead { display:table-header-group; }
@media(max-width:700px) {
 .tablewrap table.stack:has(.table-sort) thead { display:block; margin-bottom:10px; }
 .tablewrap table.stack:has(.table-sort) thead tr { display:flex; flex-wrap:wrap; gap:8px; padding:10px; }
 .tablewrap table.stack:has(.table-sort) thead th { display:block; padding:4px; border:0; }
 .tablewrap table.stack:has(.table-sort) thead th:empty { display:none; }
}
.bp-group-total { display:flex; align-items:center; gap:20px; padding:12px 16px; }
.bp-group-total .logo { font-size:18px; }
.bp-group-total .bp-totals { flex:1; margin:0; }
@media(max-width:700px) { .bp-group-total { flex-wrap:wrap; gap:10px; } .bp-group-total .bp-totals { flex-basis:100%; } }
th .table-sort { border:0; background:transparent; color:inherit; padding:0; font:inherit; text-transform:inherit; letter-spacing:inherit; box-shadow:none; text-align:inherit; } th[aria-sort="ascending"] .table-sort::after { content:" ↑"; } th[aria-sort="descending"] .table-sort::after { content:" ↓"; } th .table-sort:hover { color:var(--accent); }

/* Coverage rows are editable cards, not clickable navigation targets. */
#sp-people tbody tr:hover, #sp-people tbody tr:hover td { background:transparent; }
#sp-people tr[hidden] { display:none !important; }
.sp-filters { flex-wrap:wrap; gap:12px 20px; margin:16px 0; }
.sp-filters label { display:flex; align-items:center; gap:8px; margin:0; }

.sub-toolbar { flex-wrap: wrap; gap: 12px; }
.sub-toolbar input { flex: 1; min-width: 180px; }
.sub-toolbar { display: flex; align-items: center; }
.sub-toolbar > input { width: auto; }
.sub-toolbar .search-select { flex: 0 1 260px; }
@media (max-width:700px) {
 .sub-toolbar > input, .sub-toolbar .search-select { flex:1 1 100%; width:100%; }
}
@media (min-width: 701px) {
  #sub-table table { width:100%; min-width:0; }
  #sub-table th { white-space:normal; }
  #sub-table td { min-width:0; overflow-wrap:anywhere; }
}

/* Notifications share warning surfaces; only warnings/errors carry attention icons. */
.status-warning,.status-notification { --status-ink:var(--warn); --status-surface:var(--warn-bg); }
.status-error { --status-ink:var(--err); --status-surface:var(--err-bg); }
.status-notice { display:flex; align-items:flex-start; gap:12px; padding:16px; margin-top:12px; border:0; border-radius:var(--r2); background:color-mix(in srgb,var(--status-surface) 72%,var(--panel)); color:var(--text); }
.status-symbol { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; color:var(--status-ink); background:color-mix(in srgb,var(--status-ink) 8%,var(--status-surface)); }
.status-symbol .icon { width:19px; height:19px; }
.status-content { flex:1; min-width:0; overflow-wrap:anywhere; }
.status-title { display:block; color:var(--status-ink); font-size:13px; margin:0 0 4px; }
.status-content > div { font-size:13px; line-height:1.6; }
.status-content button { margin:8px 0 0; }
.status-content ul { margin:4px 0 0; padding-left:20px; }
.status-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; color:var(--status-ink); background:var(--status-surface); font-size:12px; font-weight:600; line-height:1.4; white-space:nowrap; }
.status-badge .icon { width:15px; height:15px; flex:none; }
.status-card.status-warning,.status-card.status-error { background:color-mix(in srgb,var(--status-surface) 35%,var(--panel)); border-color:color-mix(in srgb,var(--status-ink) 40%,var(--line)); box-shadow:inset 3px 0 0 var(--status-ink), 0 0 12px color-mix(in srgb,var(--status-ink) 8%,transparent); }
.bp-customer-summary > strong { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
.bp-line-warning p { padding:8px 10px; border-radius:var(--r1); background:color-mix(in srgb,var(--warn) 7%,var(--warn-bg)); font-size:13px; }
@media(max-width:700px) { .status-notice { padding:12px; gap:10px; } }
/* Shared data tables retain row inputs and event handlers across paging and sorting. */
tr[data-page-hidden]{display:none!important}
.table-pager{flex-wrap:wrap;gap:.6rem;padding:.75rem 0}
.table-pager label{display:flex;align-items:center;gap:.5rem}
.table-pager select{width:5rem}
.table-sort{text-align:inherit;white-space:normal}
.customer-dialog{width:min(1120px,calc(100vw - 40px));max-width:none;height:min(800px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel);color:var(--text);box-shadow:var(--shadow-lg);overflow:hidden}
.customer-dialog::backdrop{background:rgb(0 0 0 / .38);backdrop-filter:blur(2px)}
.customer-editor-form{display:flex;flex-direction:column;height:100%;min-height:0;margin:0}
.customer-dialog-head,.customer-dialog-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;flex-shrink:0}
.customer-dialog-head{border-bottom:1px solid var(--line-soft)}
.customer-dialog-head h2,.customer-dialog-head p{margin:0}
.customer-dialog-head p{margin-top:5px;font-size:13px}
.customer-dialog-head>button{flex-shrink:0;align-self:start}
.customer-editor-body{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px;padding:24px;overflow:auto;min-height:0;flex:1;align-items:start}
.customer-editor-main{display:grid;gap:24px;min-width:0}
.customer-section{min-width:0}
.customer-section h3{margin:0 0 16px;font-size:14px;text-transform:none;letter-spacing:normal}
.customer-section p{font-size:13px;line-height:1.5}
.customer-microsoft{padding:20px;background:var(--panel-2);border-radius:var(--r2)}
.customer-microsoft>.field{margin-bottom:16px}
.customer-dialog-foot{border-top:1px solid var(--line-soft);background:var(--panel)}
.customer-editor-feedback{min-width:0;font-size:13px}
.customer-editor-feedback p{margin:0 0 8px}
.customer-editor-actions{display:flex;gap:8px;flex-shrink:0;margin-left:auto}
.customer-field-wide{grid-column:1 / -1}
body:has(.customer-dialog[open]){overflow:hidden}
.customer-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.customer-fields label,.customer-dialog form>label{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.customer-fields .chk{flex-direction:row;align-items:center}
.domain-list{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}
.domain-list button{border:0;background:transparent;padding:0 .25rem;margin-left:.4rem}
.sp-add{width:100%;justify-content:center;margin-top:.75rem;border-style:dashed}
.sp-customer-settings{display:flex;flex-direction:column;gap:.4rem;overflow-wrap:anywhere;min-width:0}
.sp-customer-settings button{align-self:start}
#sp-detail[aria-busy=true]{opacity:.65}
@media(max-width:640px){.customer-fields{grid-template-columns:1fr}.table-pager .grow{display:none}.table-pager{justify-content:space-between}.table-pager .table-range{width:100%}}
@container supportplus (max-width:900px){
 #sp-people table.stack:has(.table-sort) thead{display:block}
 #sp-people table.stack thead tr{display:flex;flex-wrap:wrap;gap:12px;padding:12px}
 #sp-people table.stack thead th{display:block;padding:0;border:0}
}
#customer-list table{table-layout:auto}
#customer-list td:last-child{width:1%;white-space:nowrap}
@media(max-width:700px){
 .customer-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}
 .customer-dialog-head,.customer-dialog-foot{padding:14px 16px;gap:12px}
 .customer-editor-body{display:block;padding:16px}
 .customer-microsoft{margin-top:24px;padding:16px}
 .customer-dialog-foot{flex-wrap:wrap}
 .customer-editor-feedback:not(:empty){flex-basis:100%}
 #customer-list table.stack td:last-child{width:auto;white-space:normal}
}
.list-card{padding:0;overflow:visible}
.list-toolbar{padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.list-card>#lt-summary{padding:0 20px}
.list-card>#lt-out>.tablewrap{border:0;border-radius:0;box-shadow:none}
.list-footer{margin:0;padding:14px 20px;border-top:1px solid var(--line-soft);flex-wrap:wrap;gap:10px}
.list-footer .view-status{margin:0}
.list-footer label .search-select{width:5rem;min-width:5rem}
.list-toolbar .colpick{flex-shrink:0}
@media(max-width:700px){
 .list-toolbar{padding:14px 16px}
 .list-card table.logtable.stack{min-width:0;width:100%}
 .list-footer{padding:14px 16px}
 .list-footer>.view-status{flex-basis:100%;order:1}
 .list-footer>.view-status::before{display:none}
 .list-toolbar>button{justify-self:start}
}
.sp-customer-list button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.table-pager label{white-space:nowrap}
.table-pager label .search-select{width:5rem;min-width:5rem}
.table-pager .table-prev,.table-pager .table-next{padding:.4rem .7rem}

.status-card-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.status-card-heading > button { min-width:0; max-width:100%; white-space:normal; text-align:left; font-weight:600; }
.sp-overview-warnings .status-card ul { padding-left:20px; margin-bottom:0; }
.sp-overview-warnings .status-card li + li { margin-top:6px; }
.ts-overlap-warning > .status-notice { margin-top:0; }

/* Support+ account decisions and customer settings (#245). */
.customer-dialog{height:fit-content;max-height:calc(100dvh - 32px)}
.customer-editor-form{height:auto;max-height:calc(100dvh - 34px)}
.customer-domain-input,.customer-tenant-input{display:flex;align-items:center;gap:8px;min-width:0}
.customer-domain-input>input,.customer-tenant-input>input{min-width:0;flex:1}
.customer-domain-input>button{flex-shrink:0}
.customer-tenant-input>[hidden]{display:none}
#customer-unlink{margin-bottom:20px}
.customer-contacts{padding-left:18px;line-height:1.8}
.sp-overview-card{cursor:pointer;transition:box-shadow .15s,border-color .15s}
.sp-overview-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sp-overview-card h3{margin:0;font-size:16px;letter-spacing:normal;text-transform:none;color:var(--text)}
.sp-customer-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.sp-customer-heading h2{margin:4px 0}
.sp-customer-heading small{color:var(--muted)}
.sp-customer-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px}
.sp-metrics{padding:16px;background:var(--panel-2);border-radius:var(--r1);gap:20px;margin-bottom:20px}
.sp-linked-contacts{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;margin:16px 0}
.sp-linked-contacts>small{flex-basis:100%;color:var(--muted)}
.sp-people-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;margin:16px 0 24px}
.sp-person{border:1px solid var(--line);border-radius:var(--r1);padding:16px;min-width:0}
.sp-person-count{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.sp-person-exclude{background:var(--err-bg);border-color:color-mix(in srgb,var(--err) 45%,var(--line))}
.sp-person-na{background:var(--panel-2)}
.sp-person-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sp-person-heading>strong{overflow-wrap:anywhere}
.sp-person p{font-size:13px;overflow-wrap:anywhere;margin:8px 0}
.sp-person-status{color:var(--muted)}
.sp-coverage-buttons{display:flex;gap:5px;flex-shrink:0}
.sp-choice{border:1px solid currentColor;background:transparent;width:30px;height:30px;padding:5px;border-radius:6px}
.sp-choice-count{color:var(--ok)}
.sp-choice-exclude{color:var(--err)}
.sp-choice-na{color:var(--muted)}
.sp-choice-count[aria-pressed=true]{background:var(--ok);color:var(--panel);border-color:var(--ok)}
.sp-choice-exclude[aria-pressed=true]{background:var(--err);color:var(--panel);border-color:var(--err)}
.sp-choice-na[aria-pressed=true]{background:var(--muted);color:var(--panel);border-color:var(--muted)}
#sp-detail[aria-busy=true]{opacity:1}
@media(max-width:700px){.sp-customer-heading{align-items:flex-start;flex-direction:column}.sp-metrics{gap:12px}.customer-dialog{max-height:calc(100dvh - 16px)}.customer-editor-form{max-height:calc(100dvh - 18px)}}

.customer-editor-body{padding:20px 24px}
.customer-editor-main{gap:20px}
.customer-fields{gap:12px 16px}
@media(max-width:700px){.customer-editor-body{padding:16px}}

.sp-customer-row{display:flex;align-items:center;gap:4px;min-width:0}
.sp-customer-row>button{flex:1;min-width:0}
.sp-customer-row>button>span{min-width:0;overflow-wrap:anywhere}
.sp-customer-copy{flex:1}
.sp-customer-name{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.sp-customer-name>span:first-child{min-width:0}
.sp-customer-row .status-badge{flex:none;padding:3px;margin:0}
/* Preserve the severity stripe while making keyboard focus visible. */
.sp-customer-row>button.status-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sp-customer-row>button.status-card:hover{background:color-mix(in srgb,var(--status-surface) 45%,var(--panel));border-color:color-mix(in srgb,var(--status-ink) 40%,var(--line))}
.sp-customer-row>button.status-card:hover small{color:var(--text)}
.sp-customer-row>a{flex-shrink:0;padding:4px}
.sp-coverage-metrics{position:relative;padding-right:42px}
.sp-coverage-metrics>.sp-metrics-icon{position:absolute;right:12px;top:12px}
.sp-metrics-icon .status-badge{padding:3px}
.sp-metrics-notices{grid-column:1/-1;border-top:1px solid var(--line);padding-top:10px;color:var(--status-ink);font-size:13px}
.sp-metrics-notices p{margin:4px 0}
.sp-invoice-preview{overflow-x:auto}
.sp-invoice-preview table{width:100%;min-width:0}
.sp-invoice-preview td:first-child{white-space:pre-wrap;overflow-wrap:anywhere}
.sp-invoice-preview td:last-child{white-space:nowrap}
dialog.dialog.sp-confirm-dialog{width:min(840px,calc(100vw - 32px));max-width:none}
.sp-confirm-dialog .dlg-body{max-height:65dvh;overflow:auto}
.sp-renewal-description{white-space:pre-wrap;padding:12px;background:var(--panel-2,var(--panel));border:1px solid var(--line);border-radius:var(--r1)}

.sp-overview-card .status-card-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* Support+ customer information hierarchy (#246). */
.sp-customer-card .sp-customer-heading{margin-bottom:18px;flex-direction:row;align-items:center}
.sp-customer-card .sp-customer-links{flex-wrap:nowrap;gap:6px;flex-shrink:0}
.sp-customer-card .sp-customer-links .icon-action{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r1);text-decoration:none;color:var(--text)}
.sp-customer-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:18px}
.sp-customer-card .sp-linked-contacts{margin-bottom:0}
#sp-form>.sp-metrics{margin:0 0 20px}
.sp-subscription-settings{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:center;margin:20px 0}
.sp-subscription-field{display:grid;gap:8px;min-width:0}
.sp-subscription-settings>.sp-pricing{margin:20px 0 0;align-items:flex-start}
@media(max-width:700px){.sp-customer-facts,.sp-subscription-settings{grid-template-columns:1fr}.sp-subscription-settings>.sp-pricing{margin:0}.sp-customer-heading h2{overflow-wrap:anywhere}}

/* Consistent Support+ toggles and coverage actions (#247). */
.sp-customer-card .sp-customer-links a.icon-action{color:var(--accent)}
.sp-tick{display:flex!important;align-items:center!important;gap:10px!important;min-height:38px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r1);background:var(--panel-2);color:var(--muted);cursor:pointer;box-sizing:border-box;font-size:13px;line-height:20px}
.sp-tick input[type=checkbox]{width:20px;height:20px;min-width:20px;margin:0;accent-color:var(--accent)}
.customer-fields .sp-tick{flex-direction:row}
.sp-tick:has(input:checked){border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.sp-tick:has(input:disabled){opacity:.5;cursor:default}
.sp-tick:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.sp-subscription-settings{align-items:end}
.sp-subscription-settings>.sp-tick{margin:0;min-height:38px}
.sp-subscription-settings .search-select input{min-height:38px}
.sp-sync-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sp-sync-actions>.sp-tick{flex:1}
.sp-sync-actions>button{flex-shrink:0}
.sp-choice{border-radius:50%;width:32px;height:32px;padding:7px}
.sp-choice-count{background:var(--ok-bg)}
.sp-choice-exclude{background:var(--err-bg)}
.sp-choice-na{background:var(--panel-2)}
.sp-choice svg{width:16px;height:16px;stroke-width:2.4}
@media(max-width:700px){.sp-sync-actions{align-items:stretch;flex-direction:column}.sp-filters>.sp-tick{width:100%}}

/* Support+ optimistic save feedback. */
.sp-choice{border-width:2px}

/* UniFi ignore and mapping controls (#250). */
.uf-row-actions{flex-wrap:nowrap;gap:6px;justify-content:flex-end}
#uf-show-ignored[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.uf-toolbar>#uf-show-ignored{flex:none}

/* Per-account queued save feedback (#251). */
.sp-person.sp-saving strong,.sp-person.sp-saving p{background-image:linear-gradient(90deg,transparent,var(--accent-soft,var(--warn-bg)),transparent);background-size:200% 100%;animation:ts-options-refresh 1.6s ease-in-out infinite;border-radius:4px}
@media(prefers-reduced-motion:reduce){.sp-person.sp-saving strong,.sp-person.sp-saving p{animation:none}}

/* Compact coverage controls and local display names (#252). */
button.sp-choice{width:29px;height:29px;min-width:29px;min-height:29px;padding:6px;border-width:1px}
.sp-choice svg{width:14px;height:14px;stroke-width:2}
.sp-choice-count{--choice-color:var(--ok);--choice-bg:var(--ok-bg)}
.sp-choice-exclude{--choice-color:var(--err);--choice-bg:var(--err-bg)}
.sp-choice-na{--choice-color:var(--muted);--choice-bg:var(--panel-2)}
button.sp-choice[aria-pressed=false]{color:color-mix(in srgb,var(--choice-color) 60%,var(--choice-bg));border-color:currentColor;background:var(--choice-bg)}
button.sp-choice:hover:not(:disabled){border-color:var(--choice-color);color:var(--choice-color);background:color-mix(in srgb,var(--choice-color) 18%,var(--choice-bg))}
button.sp-choice[aria-pressed=true]:hover:not(:disabled){background:var(--choice-color);border-color:var(--choice-color);color:var(--panel);filter:brightness(.9)}
.sp-person-email{white-space:nowrap;min-width:0;font-size:13px;flex:1;overflow:hidden;text-overflow:ellipsis}
.sp-person-name{display:grid;gap:6px;margin-top:12px;font-size:12px}
.sp-person-name input{width:100%;box-sizing:border-box}
.sp-person.sp-saving input{background-image:linear-gradient(90deg,transparent,var(--accent-soft),transparent);background-size:200% 100%;animation:ts-options-refresh 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.sp-person.sp-saving input{animation:none}}

/* Keep the UniFi toolbar clear of the table after removing policy copy. */
.uf-toolbar:has(#uf-filter){margin-bottom:16px}

/* Keep customer identity and totals visible while its Microsoft check runs. */
.sp-tick.sp-pricing-saving{position:relative;overflow:hidden;opacity:1}
.sp-tick.sp-pricing-saving:has(input:disabled){opacity:1}
.sp-confirm-dialog fieldset{border:0;padding:0;margin:20px 0;display:grid;gap:8px;min-width:0}
.sp-confirm-dialog legend{margin-bottom:10px;font-weight:600}
.sp-pricing-saving::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:200% 2px;animation:view-refresh 1.8s linear infinite}
@media(prefers-reduced-motion:reduce){.sp-pricing-saving::after{animation:none;background-size:100% 2px}}
button.sp-recheck,button.sp-recheck:hover:not(:disabled){background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
button.sp-recheck:hover:not(:disabled){color:var(--accent)}
.sp-checking,.sp-fetching .sp-customer-card,.sp-fetching .sp-coverage-metrics{position:relative;overflow:hidden}
.sp-checking::after,.sp-fetching .sp-customer-card::after,.sp-fetching .sp-coverage-metrics::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:200% 2px;animation:view-refresh 1.8s linear infinite}
.sp-fetching .sp-coverage-card,.sp-fetching .sp-metrics-notices,.sp-fetching .sp-metrics-icon,.sp-fetching #sp-error,.sp-fetching>section:not(.sp-customer-card),.sp-checking .status-badge{display:none!important}
.sp-fetching .sp-coverage-metrics.status-card,.sp-customer-row>button.sp-checking{background:var(--panel);border-color:var(--line);box-shadow:var(--shadow)}
@media(prefers-reduced-motion:reduce){.sp-checking::after,.sp-fetching .sp-customer-card::after,.sp-fetching .sp-coverage-metrics::after{animation:none;background-size:100% 2px}}

.nav-sub-item.active { color:var(--accent); background:var(--panel-2); }
.hg-row-actions { flex-wrap:nowrap; justify-content:flex-end; }
.hg-property-toolbar { margin-top:0; }

#hg-billing-warning:empty { display:none; }
#hg-billing-warning > .status-notice { margin:0 0 16px; padding:12px 16px; }
#hg-billing-warning .status-content { flex:1; min-width:0; }
.hg-difference-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.hg-difference-row button { flex-shrink:0; }
.hg-renewal-label { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#hg-date { padding-left:14px; }

@media(max-width:600px){.hg-date-toolbar{align-items:flex-end;flex-wrap:nowrap}.hg-renewal-label{display:grid;flex:1;min-width:0;gap:8px}.hg-renewal-label input{width:100%;min-width:0}}

#hg-subscription-warning:empty { display:none; }
#hg-subscription-warning > .status-notice { margin:0 0 16px; padding:12px 16px; }
.hg-missing-names { margin:4px 0 0; }
.hg-subscription-missing { display:inline-flex; gap:6px; align-items:center; }
.hg-subscription-missing svg { flex-shrink:0; }
@media(max-width:600px){.hg-date-toolbar{flex-wrap:wrap}.hg-date-toolbar .chip{margin-left:auto}}

.uf-unlinked-list{margin:8px 0 0;padding-left:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}.uf-unlinked-list li{overflow-wrap:anywhere}.uf-review{color:var(--warn,#a66a00)}
.uf-warning-group.status-notice{display:block;min-width:0}
.uf-warning-group summary{cursor:pointer;overflow-wrap:anywhere}
.uf-warning-group summary svg{vertical-align:middle;margin:0 8px;color:var(--status-ink)}
.uf-warning-group .uf-unlinked-list{row-gap:8px;margin-top:16px}
.uf-warning-total{margin:0 0 8px}
tr[data-site-row]:focus{outline:2px solid var(--accent);outline-offset:-2px;scroll-margin-block:80px}
@media(max-width:800px){.uf-unlinked-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.uf-unlinked-list{grid-template-columns:minmax(0,1fr)}}

#uf-warning:not(:empty){margin-bottom:16px}

#hg-subscription-warning:not(:empty){margin-bottom:16px}.hg-warning-list{margin:8px 0 0;padding-left:20px;overflow-wrap:anywhere}

.hg-billing-toolbar{display:flex;gap:12px;align-items:center}.hg-billing-toolbar>input{flex:1;min-width:180px}.hg-billing-actions{margin-left:auto;justify-content:flex-end;flex-wrap:wrap}@media(max-width:600px){.hg-billing-toolbar{flex-wrap:wrap}.hg-billing-toolbar>input{width:100%;flex-basis:100%}}

.user .environment-switch{padding:3px 8px;font-size:12px;border-radius:999px;color:var(--text);white-space:nowrap}

/* Compact document header; customer results use the shared hours combobox. */
.doc-customer-card { container:doc-customer / inline-size; }
.doc-customer-fields { display:grid; grid-template-columns:minmax(150px,1fr) 112px minmax(125px,.7fr) 100px; gap:12px; align-items:end; }
.doc-customer-fields > * { min-width:0; }
.doc-customer-fields .ts-combobox > label { font-size:13px; font-weight:550; }
.doc-customer-fields input, .doc-customer-fields select, .doc-customer-fields .search-select { width:100%; min-width:0; }
.doc-customer-fields .field { margin:0; }
.doc-customer-fields .row { flex-wrap:nowrap; }
.doc-customer-fields #prepay { width:4rem !important; }
.doc-customer-fields:has(#prepay:not([hidden])) { grid-template-columns:minmax(150px,1fr) 112px minmax(125px,.7fr) 155px; }
.ts-customer-results .customer-add-option { background:var(--panel); border-top:1px solid var(--line); font-weight:600; }
@container doc-customer (max-width:650px) { .doc-customer-fields, .doc-customer-fields:has(#prepay:not([hidden])) { grid-template-columns:112px minmax(0,1fr) 110px; } .doc-customer-fields > .ts-combobox { grid-column:1 / -1; } }
@media(max-width:480px) { .doc-customer-fields, .doc-customer-fields:has(#prepay:not([hidden])) { grid-template-columns:minmax(0,1fr) 110px; } .doc-customer-fields > .field:has(#pricelist) { grid-column:1 / -1; grid-row:3; } }

@container doc-customer (max-width:650px) { .doc-customer-fields:has(#prepay:not([hidden])) { grid-template-columns:100px minmax(0,1fr) 155px; } }
@media(max-width:480px) { .doc-customer-fields:has(#prepay:not([hidden])) { grid-template-columns:minmax(0,1fr) 155px; } }

/* Status stays at the trailing edge, independently of counts and group chevrons. */
.nav-attention { display:inline-flex; align-items:center; justify-content:center; margin-left:auto; flex:0 0 16px; width:16px; height:18px; }
.nav-attention[hidden] { display:none; }
.nav-attention-warning { color:var(--warn); }
.nav-attention-error { color:var(--err); }
.nav-attention-unknown { color:var(--muted); }
.nav-attention .icon { width:15px; height:15px; }
.nav-group-title { gap:6px; }
.nav-group-title > .icon { margin-left:0; }
@media(min-width:901px) {
 body.nav-collapsed .nav-item .nav-attention { position:absolute; right:3px; bottom:1px; width:13px; height:13px; background:var(--panel); border-radius:3px; }
 body.nav-collapsed .nav-item .nav-attention .icon { width:12px; height:12px; }
 body.nav-collapsed .nav-item:has(.nav-attention:not([hidden])) .nav-count { top:-3px; right:1px; font-size:9px; line-height:13px; min-width:14px; padding:0 3px; }
}

button.hg-attention-filter[aria-pressed=true], button.hg-attention-filter[aria-pressed=true]:hover:not(:disabled) { color:var(--warn); background:var(--warn-bg); border-color:var(--warn); }

.hg-prorata-options { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.hg-prorata-options > .sp-tick { flex:1; min-width:200px; }
.hg-prorata-options > label[hidden] { display:none; }
.hg-dialog #hg-prorata-period { margin:0; font-weight:600; }
.hg-dialog .hg-toolbar button[type=submit] { white-space:normal; height:auto; min-height:36px; }

/* Keep the optional charge settings together and the primary action easy to find. */
.hg-property-editor { width:min(720px,calc(100vw - 32px)); }
.hg-property-editor h2 { font-size:1.2rem; margin-bottom:4px; }
.hg-property-editor #hg-allocations:empty { display:none; }
.hg-property-editor .hg-share:last-child { margin-bottom:0; }
.hg-allocation-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.hg-allocation-actions #hg-share-total { font-size:12px; }
.hg-allocation-actions button { flex:none; }
.hg-prorata-card { display:grid; gap:12px; padding:16px; border:1px solid var(--line); border-radius:var(--r2); background:var(--panel-2); }
.hg-prorata-card:has(input[name=prorata]:checked) { border-color:var(--accent); }
.hg-prorata-card .hg-prorata-options { align-items:end; }
.hg-prorata-card .sp-tick { border:0; background:transparent; padding:8px 0; color:var(--text); }
.hg-prorata-card .sp-tick:has(input:checked) { background:transparent; color:var(--text); }
.hg-prorata-card #hg-prorata-date { flex:0 0 150px; font-size:12px; color:var(--muted); }
.hg-prorata-card #hg-prorata-date input { background:var(--panel); color:var(--text); }
.hg-property-editor #hg-prorata-period:not([hidden]) { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; font-size:13px; font-weight:400; }
.hg-month-count { background:var(--accent-soft); color:var(--accent-strong); padding:3px 8px; border-radius:var(--r1); font-weight:600; }
.hg-prorata-card > small { line-height:1.5; }
.hg-property-editor .hg-editor-actions { position:sticky; bottom:-24px; z-index:2; padding:14px 0; margin-top:2px; background:var(--panel); border-top:1px solid var(--line); flex-wrap:nowrap; justify-content:space-between; }
.hg-editor-actions button[type=submit] { max-width:calc(100% - 110px); text-align:center; justify-content:center; }
@media(max-width:700px) { .hg-property-editor .hg-editor-actions { bottom:-16px; } }
@media(max-width:480px) {
 .hg-prorata-card { padding:12px; }
 .hg-prorata-card .hg-prorata-options { gap:8px; }
 .hg-prorata-card .hg-prorata-options > .sp-tick { min-width:100%; }
 .hg-prorata-card #hg-prorata-date { flex:1; }
 .hg-property-editor .hg-editor-actions { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; }
 .hg-editor-actions button[type=submit] { max-width:none; width:100%; }
}

button.uf-attention-filter[aria-pressed=true], button.uf-attention-filter[aria-pressed=true]:hover:not(:disabled) { color:var(--warn); background:var(--warn-bg); border-color:var(--warn); }

button.attention-filter[aria-pressed=true], button.attention-filter[aria-pressed=true]:hover:not(:disabled) { color:var(--warn); background:var(--warn-bg); border-color:var(--warn); }
.sp-customer-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sp-customer-heading h2 { margin:0; }
.sp-customer-row[hidden], .bp-customer-group[hidden] { display:none; }

/* Counts and warning icons share the same trailing edge at every navigation level. */
.nav-attention {width:auto;flex:0 0 auto;gap:5px;}
.nav-attention-count {font-size:10px;line-height:17px;min-width:18px;padding:0 4px;border-radius:9px;background:var(--warn-bg);text-align:center;}
.nav-attention-error .nav-attention-count {background:var(--err-bg);}
.nav-item:has(.nav-attention:not([hidden])) > .nav-count:not([data-count="billing"]),
.nav-sub-item:has(.nav-attention:not([hidden])) > .nav-sub-count {display:none;}
.nav-group-title > .icon {margin-left:auto;}
.nav-group-title > .nav-attention {margin-left:0;}
@media(min-width:761px){body.nav-collapsed .nav-item .nav-attention-count{display:none;}}

/* Compact quote/invoice header and inline product entry. */
.doc-top { display:flex; flex-wrap:wrap; gap:var(--s4); align-items:stretch; margin-bottom:var(--s4); }
.doc-top > .card { margin-bottom:0; }
.doc-top .doc-customer-card { flex:1 1 660px; }
.doc-top .existing { flex:1 1 360px; display:flex; align-items:center; }
.doc-top .existing[hidden] { display:none; }
.doc-lines-title { font-size:16px; margin:0 0 var(--s3); }
#custinfo:empty { display:none; }
#basket .product-entry { position:relative; background:var(--panel-2); }
#basket .product-entry td { padding:12px 8px; }
.product-entry input[type=search] { width:100%; min-width:0; }
.product-entry-filters { display:flex; align-items:center; justify-content:flex-end; gap:16px; flex-wrap:wrap; }
.product-entry-filters label { display:inline-flex; align-items:center; gap:5px; font-size:12px; cursor:pointer; white-space:nowrap; }
.product-entry-filters input { margin:0; }
.product-results { overflow:auto; padding:4px; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--shadow-lg); }
.product-results .result-count { margin:6px 10px; font-size:12px; }
.product-search-actions { display:flex; flex-wrap:wrap; gap:8px; padding:10px; position:sticky; bottom:-4px; background:var(--panel); border-top:1px solid var(--line); }
.product-search-actions button { flex:1; white-space:normal; }
dialog.dialog.product-editor { width:min(680px,calc(100vw - 24px)); max-width:none; max-height:calc(100dvh - 24px); }
dialog.product-editor .dlg-actions { position:sticky; bottom:0; background:var(--panel); padding:8px 0; }
.product-create-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; }
.product-create-grid label { display:flex; flex-direction:column; gap:6px; min-width:0; }
.product-create-grid input,.product-create-grid textarea,.product-create-grid .search-select { width:100%; }
.product-create-grid .full { grid-column:1/-1; }
.product-entity-name { border:1px solid var(--line); border-radius:var(--r2); padding:var(--s3); margin:var(--s2) 0; min-width:0; }
.product-entity-name h4 { margin:0 0 10px; }
.product-entity-name input,.product-entity-name textarea { width:100%; }
dialog.dialog.record-dialog.product-name-dialog { overflow:hidden; }
dialog.dialog.record-dialog.product-name-dialog .dlg-inner { overflow:hidden; height:calc(100dvh - 24px); }
dialog.dialog.record-dialog.product-name-dialog .record-dialog-body { min-height:0; overflow:auto; padding-right:var(--s2); }
dialog.dialog.record-dialog.product-name-dialog .dlg-actions { flex:none; background:var(--panel); border-top:1px solid var(--line); padding-top:var(--s2); }
@media(max-width:500px) {
 .product-create-grid { grid-template-columns:minmax(0,1fr); }
 .product-create-grid > span { display:none; }
 dialog.dialog.product-editor .dlg-inner { padding:16px; }
}
.product-result { width:100%; display:grid; grid-template-columns:minmax(80px,.7fr) minmax(0,3fr) 110px 60px 85px 20px; gap:12px; text-align:left; align-items:center; padding:10px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:var(--panel); font-weight:400; white-space:normal; }
.product-result:hover, .product-result:focus-visible { background:var(--accent-soft); }
.product-result .mono { overflow-wrap:anywhere; }
.product-result-name { min-width:0; overflow-wrap:anywhere; }
.product-result-price { text-align:right; }
.product-result-price small { display:block; font-size:10px; }
.product-result-source { font-size:11px; }
.product-result-stock { text-align:center; }
.product-result-stock small { display:block; font-size:10px; }
.quote-quantity { display:inline-flex; align-items:center; gap:2px; white-space:nowrap; }
.quote-quantity input[type=number] { width:3.5rem; padding:6px 2px; text-align:center; appearance:textfield; }
.quote-quantity input::-webkit-inner-spin-button, .quote-quantity input::-webkit-outer-spin-button { appearance:none; margin:0; }
.quote-quantity button.ghost.sm { width:26px; min-width:26px; padding:5px 0; font-size:16px; touch-action:none; user-select:none; }
@container main (max-width:800px) {
 #basket table.stack .product-entry { display:grid; grid-template-columns:minmax(0,1fr) 30px; gap:10px; }
 #basket table.stack .product-entry > td { display:block; padding:0 !important; }
 #basket table.stack .product-entry > td::before { display:none; }
 #basket table.stack .product-entry > td:first-child { grid-column:1; }
 #basket table.stack .product-entry > td:nth-child(2) { grid-column:1 / -1; grid-row:2; }
 #basket table.stack .product-entry > td:last-child { grid-column:2; grid-row:1; }
 .product-entry-filters { justify-content:flex-start; gap:10px 14px; }
}
@media (max-width:650px) {
 .product-result { grid-template-columns:minmax(0,1fr) 70px 20px; gap:6px 10px; }
 .product-result > .mono { grid-column:1; font-size:11px; }
 .product-result-name { grid-column:1; grid-row:2; }
 .product-result > .muted { grid-column:1; grid-row:3; font-size:10px; }
 .product-result > span:nth-child(4) { grid-column:2; grid-row:1; }
 .product-result-price { grid-column:2; grid-row:2; }
 .product-result > svg { grid-column:3; grid-row:2; }
}
@container main (max-width:800px) {
 .quote-insert-actions { gap:4px; padding:0 4px; }
 .quote-insert-actions button.ghost.sm { padding:3px 4px; font-size:10px; line-height:1.3; min-width:0; white-space:normal; }
 .quote-insert-actions button .icon { display:none; }
}

.proposal-title-field{margin-bottom:var(--s4)}
.proposal-title-field>label{display:block;font-weight:500;margin-bottom:var(--s1)}
.proposal-title-field .row{flex-wrap:nowrap;gap:var(--s2)}
.proposal-title-field input{flex:1;min-width:0}
.proposal-title-field button{flex-shrink:0}
.proposal-title-field small{display:block;margin-top:var(--s1)}
/* Private customer document archive. */
.archive-filters {display:flex;flex-wrap:wrap;align-items:end;gap:1rem;}
.archive-filters label {display:flex;flex-direction:column;gap:.35rem;min-width:8rem;}
.archive-filters .archive-search {flex:1;min-width:14rem;}
.archive-filters input,.archive-filters select {width:100%;}
.archive-status {margin:1rem 0;}
.archive-result-count {margin:1rem 0 .6rem;}
.archive-table {padding:0;}
.archive-subject {font-size:.8rem;max-width:22rem;overflow-wrap:anywhere;}
.archive-files {display:flex;gap:.4rem;white-space:nowrap;}
.archive-file-note {font-size:.75rem;margin-top:.2rem;}
.archive-pagination {display:flex;justify-content:center;align-items:center;gap:1rem;margin:1rem 0;}
.archive-credit {color:var(--accent-strong);}
.archive-kind-credit {background:var(--accent-soft);color:var(--accent-strong);}
@media(max-width:650px) {
 .archive-filters label,.archive-filters .archive-search {min-width:0;flex:1 1 calc(50% - 1rem);}
 .archive-filters .archive-search {flex-basis:100%;}
 .archive-subject {max-width:none;}
 .archive-pagination {gap:.5rem;font-size:.85rem;}
}

.archive-preview {width:min(1100px,94vw);height:90vh;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r3);background:var(--panel);color:var(--text);}
.archive-preview::backdrop {background:rgb(0 0 0 / .6);}
.archive-preview header {margin-bottom:var(--s3);}
.archive-preview h2 {overflow-wrap:anywhere;min-width:0;font-size:1rem;}

#archive-search-state:not(:empty) {margin:var(--s3) 0;color:var(--muted);}
@media(max-width:600px){.archive-preview{width:96vw;height:94vh;padding:var(--s2);}.archive-preview header{flex-wrap:nowrap;}.archive-preview header .btn{white-space:nowrap;}}

.archive-preview {display:none;flex-direction:column;overflow:hidden;}
.archive-preview[open] {display:flex;}
.archive-preview header {flex-shrink:0;}
.archive-preview-body {display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;overflow:hidden;}
.archive-preview-controls {display:flex;align-items:center;justify-content:center;gap:var(--s2);flex-wrap:wrap;flex-shrink:0;padding:var(--s2);background:var(--panel);}
.archive-preview-controls label {display:flex;align-items:center;gap:var(--s2);}
.archive-preview-page {flex:1;min-height:0;min-width:0;padding:12px;overflow:auto;}
.archive-preview-page canvas {display:block;margin:auto;background:white;}

/* Full table rows share the subtle warning/error card surfaces. */
tbody > tr:is([data-row-tone="warning"],.status-warning,:has(.status-warning,.badge.warn,.uf-review,.hg-review,.bp-line-warning)){--row-status-bg:color-mix(in srgb,var(--warn-bg) 35%,var(--panel))}
tbody > tr:is([data-row-tone="error"],.status-error,:has(.status-error,.badge.err,.badge.error,.badge.failed,.err-txt:not(:empty))){--row-status-bg:color-mix(in srgb,var(--err-bg) 35%,var(--panel))}
tbody > tr{background-color:var(--row-status-bg)}
tbody > tr > td{background-color:var(--row-status-bg)}
tbody > tr:hover > td{background-color:var(--row-status-bg,var(--panel-2))}
.uf-capacity-message{display:flex;align-items:flex-start;gap:6px;flex-wrap:nowrap;margin-top:4px}
.uf-capacity-message .icon-action{padding:3px;width:26px;height:26px;flex:none}
.uf-capacity-message .notification-mark{font-weight:700}

.sub-finding{display:block;margin:3px 0}
.sub-finding-label{display:inline-flex;align-items:center;gap:5px;font-size:12px;text-decoration:none;color:var(--warn);line-height:1.5}
tr[data-row-tone="error"] .sub-finding-label{color:var(--err)}
.sub-finding-label .icon{flex:none}
.sub-finding-label.sub-notification{color:var(--muted)}
.sub-finding-hint[popover]{position:fixed;inset:auto;margin:0;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r1);background:var(--panel);color:var(--text);box-shadow:var(--shadow);font-size:13px;line-height:1.6;overflow:visible;pointer-events:none;max-width:calc(100vw - 24px)}
.sub-finding-hint:before{content:"";position:absolute;top:-6px;left:var(--hint-arrow,24px);width:10px;height:10px;background:var(--panel);border-top:1px solid var(--line);border-left:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}

.uf-capacity-label{flex:1;min-width:0}
.uf-capacity-label>.icon{vertical-align:-2px}
.uf-controller{white-space:nowrap}

.fold-head{display:flex;align-items:center;gap:8px}
.fold-head [data-fold-toggle]{min-width:0;text-align:left}
.fold-head .section-scan{flex:none;padding:6px;min-height:30px;width:30px;height:30px;border:1px solid var(--line);border-radius:var(--r1);font-size:12px}
.section-scan[aria-busy="true"] svg{animation:spin 1s linear infinite}
@media(prefers-reduced-motion:reduce){.section-scan[aria-busy="true"] svg{animation:none}}
.uf-price-preview{display:flex;align-items:center;gap:20px;margin:20px 0}.uf-price-preview>div{display:grid;gap:6px}.uf-price-preview strong{font-size:1.25rem}.uf-dialog #uf-update-preview{min-height:40px}.uf-dialog #uf-update-date{margin-top:12px}.uf-dialog .hg-prorata-card>small{display:block;margin-top:10px}.uf-dialog .uf-toolbar{flex-wrap:wrap}
.uf-subscription-dialog form{gap:12px}.uf-subscription-dialog form>h2,.uf-subscription-dialog form>p{margin:0}.uf-subscription-dialog .uf-price-preview{margin:8px 0}.uf-subscription-dialog #uf-update-preview p{margin:8px 0}.uf-subscription-dialog .hg-prorata-card{gap:10px}.uf-subscription-dialog .hg-prorata-card>small,.uf-subscription-dialog #uf-update-date{margin:0}.uf-subscription-dialog .uf-toolbar{position:sticky;bottom:-1px;background:var(--panel);padding:8px 0;z-index:1}
.uf-subscription-dialog #uf-update-charge{flex-basis:100%;font-size:13px}.uf-subscription-dialog .uf-toolbar{margin-top:4px}
.ms-renewal-dialog form{gap:14px}.ms-renewal-dialog p,.ms-renewal-dialog h2{margin:0}.ms-renewal-dialog table{margin:4px 0}.ms-renewal-dialog .dlg-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.ms-renewal-dialog .dlg-actions button{white-space:normal}

.nav-count[data-count="billing"] {background:var(--skip-bg);color:var(--skip);}
.nav-item:has(.nav-count[data-count="billing"]:not([hidden])) > .nav-attention {margin-left:0;}

.catalog-actions {flex-wrap:wrap;gap:8px;}

.catalog-filters #cat-refresh {white-space:normal;}

/* Keep attention counts inside the navigation rail, even with long labels. */
.nav-item .nav-label { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.purchasing-scope { margin:var(--s3) 0; }
.purchasing-scope summary { cursor:pointer; color:var(--muted); }
.purchasing-scope .row { align-items:flex-end; margin-top:var(--s3); }
.purchasing-scope .field { min-width:0; max-width:100%; }
.purchasing-scope select { max-width:100%; width:380px; }
.purchasing-summary { margin-bottom:var(--s4); }

/* Invoice review follows the shared record dialog, with reachable actions. */
dialog.purchase-workflow p { margin:0; }
dialog.dialog.purchase-workflow { overflow:hidden; }
dialog.dialog.purchase-workflow .dlg-inner { max-height:calc(100dvh - 28px); box-sizing:border-box; }
dialog.purchase-workflow #pw-fields { display:grid; gap:var(--s3); }
dialog.purchase-workflow .dlg-actions { position:sticky; bottom:0; background:var(--panel); padding:var(--s2) 0; }
dialog.purchase-workflow #pw-error:empty, dialog.purchase-workflow #pw-review:empty { display:none; }

/* Keep the controller editor heading and save actions visible while its fields scroll. */
dialog.dialog.uf-subscription-dialog { width:min(600px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:hidden; }
dialog.uf-subscription-dialog .dlg-inner { max-height:calc(100dvh - 24px); box-sizing:border-box; padding:20px; gap:12px; }
.uf-subscription-dialog .uf-editor-body { min-height:0; overflow-y:auto; display:grid; gap:12px; padding-right:4px; }
.uf-subscription-dialog .uf-editor-body > p { margin:0; }
.uf-subscription-dialog label { display:grid; gap:6px; }
.uf-subscription-dialog input,.uf-subscription-dialog select,.uf-subscription-dialog textarea { width:100%; min-width:0; }
.uf-subscription-dialog #uf-fixed-fields { display:grid; gap:10px; }
.uf-subscription-dialog #uf-fixed-fields[hidden],.uf-subscription-dialog label[hidden] { display:none; }
.uf-subscription-dialog .uf-toolbar { position:static; flex:none; margin:0; padding:8px 0 0; border-top:1px solid var(--line); }
.uf-subscription-dialog .uf-price-preview { flex-wrap:wrap; gap:12px; }
@media(max-width:640px) { dialog.uf-subscription-dialog .dlg-inner { padding:14px; } }

.purchasing-filters { align-items:flex-end; margin-bottom:var(--s4); }
.purchasing-filters .field { min-width:0; max-width:100%; }
.purchasing-filters input { width:100%; }
@media(max-width:640px){ .purchasing-filters .field { flex:1 1 100%; } }

/* Existing-order reconciliation uses the shared responsive table and dialog. */
dialog.dialog.project-review { width:min(680px,calc(100vw - 24px)); max-width:none; }
.project-review .pp-content { container-type:inline-size; container-name:main; display:grid; gap:var(--s3); min-width:0; }
.project-review .field select, .project-review .field input, .project-review .field textarea { width:100%; min-width:0; }
.project-review td:first-child { min-width:8rem; }
.project-review td:last-child { min-width:14rem; }
@media(max-width:640px) { .project-review td:first-child,.project-review td:last-child { min-width:0; } }

dialog.dialog.project-review.project-comparison { width:min(1060px,calc(100vw - 24px)); }