/* CPQ Platform house layer for the Portal and admin (vanilla JS).
   Load order: /ds/styles.css (the shared CPQ Logic Systems design system: tokens + components),
   then this file. This file holds page LAYOUT only and keeps every colour, radius, shadow and
   type size on DS tokens - no hard-coded colours. House rules (DA Platform): search plus
   collapsible sections, pop-up dialogs for edits, zone tabs never dropdowns, light mode.
   Component look comes from DS classes (cpq-btn, cpq-badge, cpq-card, cpq-stat, cpq-tabs,
   cpq-input, cpq-switch, cpq-alert...). The .btn/.badge/.tabs/.switch names further down are
   aliases kept for the admin pages. */

:root {
  --page-max: var(--container-xl);
  --topbar-h: 56px;
  --zone-dev: var(--info);
  --zone-test: var(--accent);
  --zone-live: var(--success);
}

html, body { margin: 0; }
body { font-size: var(--text-sm); background: var(--surface-page); color: var(--text-body); overflow-wrap: anywhere; }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-md); }
h3 { font-size: var(--text-base); }
code, pre, .mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.num { font-family: var(--font-meta); font-feature-settings: "tnum"; white-space: nowrap; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- top bar */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--surface-card) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-default); }
.topbar__row { max-width: var(--page-max); margin: 0 auto; display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-5); min-height: var(--topbar-h); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--fw-bold);
  color: var(--text-strong); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-contrast);
  display: grid; place-items: center; font: var(--fw-bold) var(--text-2xs)/1 var(--font-meta); letter-spacing: 0.02em; }
.brand__sub { color: var(--text-muted); font-weight: var(--fw-regular); }
.topnav { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.topnav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text-muted); font-weight: var(--fw-semibold); }
.topnav a:hover { background: var(--surface-sunken); color: var(--text-strong); text-decoration: none; }
.topnav a[aria-current="page"] { color: var(--text-strong); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.spacer { flex: 1; }
.topbar .zone-slot:empty { display: none; }
.user { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-xs); }
.user__name { color: var(--text-strong); font-weight: var(--fw-semibold); font-size: var(--text-sm); }

/* ---------------------------------------------------------------- page scaffold */
main, .page { max-width: var(--page-max); margin: 0 auto; padding: var(--space-5) var(--space-5) var(--space-9); }
.page-head { display: flex; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.page-head .grow { flex: 1 1 280px; min-width: 0; }
.page-head h1 { margin: var(--space-1) 0 var(--space-1); }
.page-head .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.toolbar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
.toolbar .grow { flex: 1 1 200px; }
.back-link { display: inline-flex; gap: var(--space-1); align-items: center; font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-2); }

/* search box (DS input with an icon) */
.search { min-width: 0; flex: 0 1 320px; }
.search .cpq-input { width: 100%; }
.search svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- tabs (zones, filters) */
.cpq-tabs { flex-wrap: wrap; max-width: 100%; }
.cpq-tabs--pill .cpq-tab { display: inline-flex; align-items: center; gap: var(--space-2); }
.cpq-tab .count { font: var(--fw-semibold) var(--text-2xs)/1 var(--font-meta); color: var(--text-faint); }
.zone-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
[data-zone="dev"] .zone-dot { background: var(--zone-dev); }
[data-zone="test"] .zone-dot { background: var(--zone-test); }
[data-zone="live"] .zone-dot { background: var(--zone-live); }
.filters { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.filters__row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.filters__label { font: var(--fw-semibold) var(--text-2xs)/1 var(--font-meta); letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-faint); min-width: 64px; }

/* ---------------------------------------------------------------- collapsible sections (house rule) */
details.section { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); margin-bottom: var(--space-4); min-width: 0; }
details.section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); user-select: none; flex-wrap: wrap; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint); transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease-out); flex: none; }
details.section[open] > summary::before { transform: rotate(45deg); }
details.section > summary h2 { font-size: var(--text-base); }
details.section > summary .count { font: var(--fw-semibold) var(--text-2xs)/1 var(--font-meta); color: var(--text-muted);
  background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 3px 8px; }
details.section > summary .actions { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }
details.section > .body { padding: var(--space-2) var(--space-4) var(--space-4); border-top: 1px solid var(--border-subtle); min-width: 0; }

/* ---------------------------------------------------------------- Home dashboard */
.dashboard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); grid-auto-flow: row dense; }
.dashboard > .widget { grid-column: span 12; margin: 0; }
.dashboard > .widget[data-size="wide"] { grid-column: span 7; }
.dashboard > .widget[data-size="narrow"] { grid-column: span 5; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); padding-top: var(--space-3); }
.kpi { padding: var(--space-4); }
.kpi .cpq-stat__value { font-size: var(--text-2xl); }
.kpi .kpi__sub { font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--space-1); }
.greeting { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.list > li:last-child { border-bottom: 0; }
.list__main { flex: 1; min-width: 0; }
.list__title { font-weight: var(--fw-semibold); color: var(--text-strong); }
.list__meta { font-size: var(--text-xs); color: var(--text-muted); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.list__aside { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--info); }
.sev--success { background: var(--success); }
.sev--warning { background: var(--warning); }
.sev--danger { background: var(--danger); }

/* ---------------------------------------------------------------- catalog cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); padding-top: var(--space-3); }
.app-card { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.app-card.is-off { opacity: 0.72; }
.app-card__thumb { aspect-ratio: 16 / 9; background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); position: relative;
  display: grid; place-items: center; overflow: hidden; }
.app-card__thumb img { width: 100%; height: 100%; object-fit: contain; }
.app-card__thumb .placeholder { width: 38%; max-width: 120px; color: var(--border-strong); }
.app-card__badges { position: absolute; top: var(--space-2); left: var(--space-2); right: var(--space-2); display: flex; gap: var(--space-1); flex-wrap: wrap; }
.app-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.app-card__title { font-size: var(--text-md); }

/* Add-to-quote catalog picker (quote detail "Add configuration") */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); }
.pick-card { display: flex; flex-direction: column; text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden; min-width: 0;
  background: var(--surface-card); border: 1.5px solid var(--border-default); border-radius: var(--radius-md); padding: 0;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.pick-card:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.pick-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.pick-card__thumb { aspect-ratio: 16 / 9; background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); display: grid; place-items: center; overflow: hidden; }
.pick-card__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pick-card__thumb .placeholder { width: 36%; color: var(--border-strong); }
.pick-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.pick-card__title { font-weight: 600; color: var(--text-strong); }
.pick-card__desc { font-size: var(--text-sm); color: var(--text-muted); }
.app-card__desc { color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.app-card__foot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap; }
.app-card__foot .grow { flex: 1; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); padding-top: var(--space-3); }
.tile { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); color: var(--text-strong); min-width: 0; }
.tile:hover { text-decoration: none; }
.tile__thumb { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--surface-sunken); display: grid; place-items: center;
  overflow: hidden; flex: none; color: var(--border-strong); }
.tile__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tile__thumb svg { width: 28px; height: 28px; }
.tile__name { font-weight: var(--fw-semibold); }
.tile__sub { font-size: var(--text-xs); color: var(--text-muted); }

/* ---------------------------------------------------------------- tables (stack into cards on phones) */
.table-wrap { width: 100%; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid th { text-align: left; font: var(--fw-semibold) var(--text-2xs)/1.2 var(--font-meta); text-transform: uppercase; letter-spacing: var(--tracking-wider);
  color: var(--text-faint); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-default); white-space: nowrap; }
table.grid td { padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid tr.clickable { cursor: pointer; }
table.grid tr.clickable:hover td { background: var(--surface-sunken); }
table.grid .right, table.grid th.right { text-align: right; }
table.grid td.actions { white-space: nowrap; text-align: right; }
table.grid td.nowrap { white-space: nowrap; }
table.grid td.actions .cpq-btn + .cpq-btn { margin-left: var(--space-1); }
.cell-title { font-weight: var(--fw-semibold); color: var(--text-strong); }
.cell-sub { font-size: var(--text-xs); color: var(--text-muted); }
.empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--text-muted); }

/* ---------------------------------------------------------------- quote */
.quote-tabs { margin-bottom: var(--space-4); }
.quote-layout-head { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.quote-layout-frame {
  display: block; width: 100%; min-height: 560px; height: calc(100vh - var(--topbar-h) - 220px);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card);
}
.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-4); align-items: start; }
.quote-side { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: calc(var(--topbar-h) + var(--space-4)); }
.totals { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); }
.totals dt { color: var(--text-muted); }
.totals dd { margin: 0; text-align: right; }
.totals .grand { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text-strong); padding-top: var(--space-2); border-top: 1px solid var(--border-default); }
.summary-lines { list-style: none; margin: var(--space-1) 0 0; padding: 0; font-size: var(--text-xs); color: var(--text-muted); }
.summary-lines li span { color: var(--text-body); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; }
.workflow { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.status-steps { display: flex; gap: var(--space-1); flex-wrap: wrap; font: var(--fw-semibold) var(--text-2xs)/1 var(--font-meta); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-faint); }
.status-steps span[aria-current="step"] { color: var(--accent-on-soft); }
.notes { white-space: pre-wrap; }

/* ---------------------------------------------------------------- History row actions + Configuration View */
/* Row actions: View + Modify, then the rest wrap beside them; on phones the rest fold into "More". */
.row-actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); justify-content: flex-end; max-width: 290px; }
table.grid td.actions .row-actions .cpq-btn { margin-left: 0; }
.row-more-wrap, .row-more { display: contents; }
.row-more__toggle { display: none; }
.danger-text { color: var(--danger); }
.cpq-btn[aria-disabled="true"] { opacity: 0.55; }
.cfg-meta { display: flex; gap: var(--space-2) var(--space-3); flex-wrap: wrap; align-items: center; font-size: var(--text-xs); color: var(--text-muted); }
.cfg-meta__item { display: inline-flex; align-items: center; gap: var(--space-1); }
.cfg-head-price { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.cfg-head-price:empty { display: none; }
.cfg-head-price__amount { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--text-strong); }
.cfg-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.cfg-price-big { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--text-strong); margin: var(--space-1) 0; }
.cfg-model { overflow: hidden; }
.cfg-model__thumb { aspect-ratio: 16 / 9; background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); display: grid; place-items: center; overflow: hidden; }
.cfg-model__thumb img { width: 100%; height: 100%; object-fit: contain; }
.cfg-model__thumb .placeholder { width: 32%; max-width: 110px; color: var(--border-strong); }
.cfg-model__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.cfg-model__body p { margin: 0; }
.cfg-empty { text-align: left; padding: var(--space-3) 0; }
/* Documents of a configuration (configuration.html): icon, title and kind, View / PDF. */
.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.doc-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); background: var(--surface-card); }
.doc-item__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-on-soft); }
.doc-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-item__title { font-weight: var(--fw-semibold); color: var(--text-strong); }
.doc-item__meta { font-size: var(--text-xs); color: var(--text-muted); }
.doc-hint { margin: var(--space-2) 0 0; font-size: var(--text-xs); }
.doc-hint:empty { display: none; }

/* ---------------------------------------------------------------- dialogs (pop-ups for edits) */
dialog { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 0; width: min(640px, calc(100vw - 2 * var(--space-4)));
  box-shadow: var(--shadow-xl); color: var(--text-body); background: var(--surface-card); }
dialog.wide { width: min(1000px, calc(100vw - 2 * var(--space-4))); }
dialog::backdrop { background: var(--surface-overlay); }
dialog header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
dialog header h2 { flex: 1; font-size: var(--text-md); }
dialog .content { padding: var(--space-4) var(--space-5); max-height: 70vh; overflow: auto; }
dialog footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken); border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex-wrap: wrap; }
.close-x { border: 0; background: transparent; font-size: var(--text-lg); line-height: 1; cursor: pointer; color: var(--text-muted); padding: var(--space-1); }
.stack > * + * { margin-top: var(--space-3); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }

/* choice list (radio cards: customers, quotes, sessions) */
.choices { display: grid; gap: var(--space-2); }
.choice { display: flex; gap: var(--space-3); align-items: flex-start; border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-3); cursor: pointer; background: var(--surface-card); }
.choice:hover { border-color: var(--border-strong); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input { margin-top: 3px; accent-color: var(--accent); }
.choice__title { font-weight: var(--fw-semibold); color: var(--text-strong); }
.choice__sub { font-size: var(--text-xs); color: var(--text-muted); }

/* customize (show/hide + reorder widgets) */
.reorder { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.reorder li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); background: var(--surface-card); }
.reorder li .grow { flex: 1; }

.toast { position: fixed; bottom: var(--space-4); right: var(--space-4); left: auto; z-index: var(--z-toast); max-width: min(440px, calc(100vw - 2 * var(--space-4)));
  background: var(--surface-inverse); color: var(--text-inverse); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.toast.bad { background: var(--danger); color: var(--slate-0); }
.toast a { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------- aliases used by the admin pages */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong); background: var(--surface-card); font: var(--fw-semibold) var(--text-sm)/1 var(--font-display);
  color: var(--text-strong); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--surface-sunken); border-color: var(--text-strong); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.btn.primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-accent); }
.btn.danger { color: var(--danger); }
.btn.small { height: 30px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn:disabled, .cpq-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--radius-xs); font: var(--fw-semibold) var(--text-2xs)/1 var(--font-meta);
  letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border-default); white-space: nowrap; }
.badge.ok, .badge.passed { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge.warning, .badge.running, .badge.queued { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge.failed, .badge.error { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge.kind-data { background: var(--info-soft); color: var(--info); border-color: transparent; }
input[type=text], input[type=password], input[type=number], input[type=search], input[type=email], textarea, select {
  font: inherit; font-size: var(--text-sm); padding: 0 var(--space-3); height: 38px; border: 1.5px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-card); color: var(--text-strong); max-width: 100%; }
textarea { height: auto; padding: var(--space-2) var(--space-3); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
label.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-strong); }
.switch { position: relative; display: inline-block; width: 40px; height: 23px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--border-strong); border-radius: var(--radius-pill); transition: background var(--dur-base) var(--ease-out); cursor: pointer; }
.switch span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 2.5px; top: 2.5px; background: var(--slate-0); border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-snap); box-shadow: var(--shadow-sm); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::before { transform: translateX(17px); }
.switch input:disabled + span { opacity: 0.5; cursor: not-allowed; }
.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-sunken); margin: var(--space-3) 0; }
.notice.warn { background: var(--warning-soft); border-color: transparent; }
.notice.bad { background: var(--danger-soft); border-color: transparent; }
.notice.ok { background: var(--success-soft); border-color: transparent; }
.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
pre.diff, pre.code { background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-3); overflow: auto; }
pre.diff { margin: var(--space-2) 0 var(--space-4); white-space: pre; }
pre.diff .add { color: var(--success); background: var(--success-soft); display: block; }
pre.diff .del { color: var(--danger); background: var(--danger-soft); display: block; }
pre.diff .hunk { color: var(--info); display: block; }
pre.code { max-height: 60vh; }
textarea.code { width: 100%; min-height: 360px; font: var(--text-xs)/1.45 var(--font-mono); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); padding-top: var(--space-3); }

/* ---------------------------------------------------------------- sign-in, setup, placeholder runtime */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.auth-card { width: min(400px, 100%); padding: var(--space-6); }
.auth-card .brand { margin-bottom: var(--space-5); }
.auth-card .cpq-btn, .auth-card .btn.primary { width: 100%; justify-content: center; }
.auth-card input { width: 100%; }
.error-text { color: var(--danger); font-size: var(--text-xs); min-height: 18px; margin-bottom: var(--space-2); }
.cfg { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); }
.cfg .panel { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4); }
.cfg .control { margin-bottom: var(--space-4); }
.cfg .control label { display: block; font-weight: var(--fw-semibold); margin-bottom: var(--space-1); }
.cfg .control .msg { font-size: var(--text-xs); margin-top: var(--space-1); }
.cfg .control .msg.error { color: var(--danger); }
.cfg .control .msg.warning { color: var(--warning); }
.cfg .price { font-size: var(--text-xl); font-weight: var(--fw-bold); }
.cfg .nav { display: flex; gap: var(--space-2); margin-top: var(--space-4); border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); flex-wrap: wrap; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .dashboard > .widget[data-size="wide"], .dashboard > .widget[data-size="narrow"] { grid-column: span 12; }
  .quote-layout { grid-template-columns: minmax(0, 1fr); }
  .quote-side { position: static; }
}
@media (max-width: 860px) {
  .cfg { grid-template-columns: 1fr; }
}
@media screen and (max-width: 720px) {
  .topbar__row { padding: var(--space-2) var(--space-4); gap: var(--space-2) var(--space-3); }
  .brand__sub { display: none; }
  .topnav { order: 3; width: 100%; }
  .topnav a { padding: var(--space-2) var(--space-2); }
  .topbar .zone-slot { order: 4; width: 100%; }
  main, .page { padding: var(--space-4) var(--space-4) var(--space-8); }
  .search { flex: 1 1 100%; }
  .user .cpq-badge { display: none; }
  /* tables become stacked cards */
  table.grid.responsive thead { display: none; }
  table.grid.responsive, table.grid.responsive tbody, table.grid.responsive tr, table.grid.responsive td { display: block; width: 100%; }
  table.grid.responsive tr { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-card); }
  table.grid.responsive td { border: 0; padding: var(--space-1) 0; display: flex; gap: var(--space-3); justify-content: space-between; text-align: right; }
  table.grid.responsive td > * { min-width: 0; }
  table.grid.responsive td[data-label]::before { content: attr(data-label); font: var(--fw-semibold) var(--text-2xs)/1.6 var(--font-meta); text-transform: uppercase;
    letter-spacing: var(--tracking-wide); color: var(--text-faint); text-align: left; flex: none; }
  table.grid.responsive td.primary-cell { display: block; text-align: left; padding-bottom: var(--space-2); }
  table.grid.responsive td.actions { justify-content: flex-start; flex-wrap: wrap; gap: var(--space-2); white-space: normal; }
  table.grid.responsive td.actions .cpq-btn + .cpq-btn { margin-left: 0; }
  .row-actions { max-width: none; justify-content: flex-start; }
  .row-more-wrap { display: inline-flex; position: relative; }
  .row-more__toggle { display: inline-flex; }
  .row-more { display: none; position: absolute; left: 0; top: calc(100% + var(--space-1)); z-index: 50; flex-direction: column; gap: var(--space-1);
    min-width: 180px; padding: var(--space-2); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
  .row-more.open { display: flex; }
  .row-more .cpq-btn { width: 100%; justify-content: flex-start; }
  .cfg-head-price { align-items: flex-start; }
  dialog .content { padding: var(--space-4); }
  dialog header, dialog footer { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ---------------------------------------------------------------- History: quotes with expandable lines */
.expand-toggle { display: inline-flex; align-items: center; gap: var(--space-2); border: 0; background: transparent; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left; }
.expand-toggle__chevron { width: 7px; height: 7px; border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease-out); flex: none; }
.expand-toggle[aria-expanded="true"] .expand-toggle__chevron { transform: rotate(45deg); }
.expand-toggle:hover .cell-title { text-decoration: underline; }
tr.quote-lines-row > td { padding: 0 var(--space-3) var(--space-3); border-bottom: 1px solid var(--border-subtle); background: var(--surface-sunken); }
tr.quote-lines-row:last-child > td { border-bottom: 0; }
table.nested-table { margin-top: var(--space-2); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
table.nested-table th, table.nested-table td { padding: var(--space-2) var(--space-3); }
table.nested-table tr:last-child td { border-bottom: 0; }
@media screen and (max-width: 720px) {
  /* The nested lines row holds a whole table, not a label/value pair: it must not join the
     "stacked card" flex layout table.grid.responsive gives other cells at this width. */
  table.grid.responsive tr.quote-lines-row > td { display: block; text-align: left; }
}

/* ---------------------------------------------------------------- page-with-filters (reusable left filter panel) */
/* A page that wants a sticky left filter panel instead of the filters row above the table: give
   <main> "page page-wide" and lay out page-head, a "Filters" toggle button, the panel itself
   (<aside class="filters-panel">: search, then label+choices groups, admin toggle last) and the
   table(s) (in .filters-panel__body) as siblings inside one .page-with-filters, in that DOM order -
   the grid re-arranges them on wide screens; the same order also reads correctly stacked on narrow
   ones. Independent of the existing .filters / .filters__row row (Catalog still uses that). */
.page.page-wide { max-width: 1600px; }
.page-with-filters { display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  grid-template-rows: auto 1fr; grid-template-areas: "panel head" "panel body"; column-gap: var(--space-5); row-gap: var(--space-4); align-items: start; }
.page-with-filters > .page-head { grid-area: head; margin-bottom: 0; }
.page-with-filters > .filters-panel { grid-area: panel; }
.page-with-filters > .filters-panel__body { grid-area: body; min-width: 0; }
.page-with-filters > .filters-panel__toggle { display: none; }
.filters-panel { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-4); min-width: 0; max-height: calc(100vh - var(--topbar-h) - 2 * var(--space-4)); overflow-y: auto; }
.filters-panel .search { width: 100%; flex: none; }
.filters-panel .search .cpq-input { width: 100%; }
.filters-panel__group { display: flex; flex-direction: column; gap: var(--space-2); }
.filters-panel__group:last-child { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.filters-panel__label { font: var(--fw-semibold) var(--text-2xs)/1 var(--font-meta, var(--font-mono)); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--text-faint); }
/* Filter choices in the panel read as a vertical list of full-width rows (pills wrap awkwardly at
   this width) - the same accessible tablist component, just restyled: no pill background, each
   .cpq-tab stacked and left-aligned, the selected one a soft highlight instead of the pill's card. */
.filters-panel .cpq-tabs { display: flex; flex-direction: column; gap: 2px; width: 100%; background: none; padding: 0; border-radius: 0; }
.filters-panel .cpq-tab { display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left; justify-content: flex-start;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.filters-panel .cpq-tab:hover { background: var(--surface-sunken); }
.filters-panel .cpq-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-on-soft); box-shadow: none; }
.filters-panel .cpq-tab[aria-selected="true"]::after { display: none; }
@media (max-width: 900px) {
  .page-with-filters { display: block; }
  .page-with-filters > .page-head { margin-bottom: var(--space-3); }
  .page-with-filters > .filters-panel__toggle { display: inline-flex; margin-bottom: var(--space-3); }
  .filters-panel { position: static; display: none; max-height: none; margin-bottom: var(--space-4); }
  .filters-panel.open { display: flex; }
}

/* ---------------------------------------------------------------- company logo (Lee, 2026-09-30) */
/* Top bar: the CPQ Logic Systems lockup (icon + wordmark), then the product name; phones get the icon
   only (<picture> source). Sign-in / setup: the full logo with its tagline. Files: /ds/assets/. */
.brand-logo { display: inline-flex; }
.brand-logo img { display: block; height: 34px; width: auto; }
.brand__product { padding-left: var(--space-3); margin-left: var(--space-1); border-left: 1px solid var(--border-default);
  color: var(--text-muted); font-weight: var(--fw-semibold); }
.auth-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-5); }
.auth-brand img { display: block; width: 100%; max-width: 300px; height: auto; }
.auth-brand__product { font: var(--fw-semibold) var(--text-xs)/1.2 var(--font-meta); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 640px) { .brand-logo img { height: 28px; } }

/* ---- Colour mode toggle (System / Light / Dark; js/colormode.js, /ds/color-mode.js) ---------- */
.mode-toggle { position: relative; display: inline-flex; }
.mode-toggle__btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-muted); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.mode-toggle__btn:hover, .mode-toggle__btn[aria-expanded="true"] { background: var(--surface-sunken); color: var(--text-strong); }
.mode-toggle__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-overlay); min-width: 150px; padding: var(--space-1);
  display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.mode-toggle__menu[hidden] { display: none; }
.mode-toggle__menu [role="menuitemradio"] { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-body); font: inherit; font-size: var(--text-sm);
  text-align: left; cursor: pointer; }
.mode-toggle__menu [role="menuitemradio"]:hover, .mode-toggle__menu [role="menuitemradio"]:focus-visible { background: var(--surface-sunken); color: var(--text-strong); }
.mode-toggle__menu [role="menuitemradio"][aria-checked="true"] { color: var(--accent-on-soft); background: var(--accent-soft); font-weight: var(--fw-semibold); }
.mode-toggle--floating { position: fixed; top: var(--space-4); right: var(--space-4); z-index: var(--z-sticky); }

/* Design mode button (css/designmode.css) in dark mode: its "on" state fills with --text-strong, which
   is light in dark mode, so the label takes the inverse text colour. */
[data-color-mode="dark"] .dm-root .dm-fab.on { color: var(--text-inverse); }

/* Admin > Approval policy (approvalpolicy.js): transitions on the left, the five cards on the right; one column when narrow. */
.ap-layout { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: var(--space-4); }
.ap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.ap-transition { width: 100%; text-align: left; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: transparent; padding: var(--space-2); color: inherit; cursor: pointer; }
.ap-transition.selected { border-color: var(--accent); background: var(--accent-soft); }
.ap-transition:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-narrow { display: none; }
.ap-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); }
.ap-card { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3); min-width: 0; }
.ap-card h3 { margin-top: 0; }
.ap-card table input[type=text] { width: 100%; }
.ap-diff { margin-top: var(--space-3); padding: var(--space-2); border-top: 1px solid var(--border-default); }
.needs ul { margin: var(--space-1) 0; }
@media (max-width: 720px) {
  .ap-layout { grid-template-columns: minmax(0, 1fr); }
  .ap-list { display: none; }
  .ap-narrow { display: block; width: 100%; margin-bottom: var(--space-2); }
}