/* ============================================================
   LucenteOne — theme.css
   Centralised design tokens and component styles
   ============================================================ */

/* ------------------------------------------------------------
   Section 1: CSS Custom Properties
   ------------------------------------------------------------ */
:root {
  /* Brand */
  --brand-navy:        #103889;
  --brand-primary:     #15a2e3;
  --brand-primary-hover:#1390cc;

  /* Backgrounds */
  --bg-page:           #f8f9fa;
  --bg-surface:        #ffffff;

  /* Text — v1.265 (A9): aliased onto the v2 ink scale so legacy call sites
     (body, .sc, the v1 primitives) converge on one colour set without a rename.
     --ink* are defined in the DESIGN SYSTEM v2 :root; custom properties resolve
     at use-time, so the forward reference is fine. */
  --text-primary:      var(--ink);
  --text-secondary:    var(--ink-2);
  --text-tertiary:     var(--ink-3);
  --text-faint:        var(--ink-4);

  /* Borders — --border-default aliased onto the v2 --line (identical #e5e7eb) */
  --border-default:    var(--line);
  --border-subtle:     #f1f5f9;
  --border-strong:     #d1d5db;

  /* Status */
  --status-success:    #059669;
  --status-success-bg: #dcfce7;
  --status-success-border:#bbf7d0;
  --status-error:      #dc2626;
  --status-error-bg:   #fee2e2;
  --status-error-border:#fecaca;
  --status-warning:    #d97706;
  --status-warning-bg: #fef3c7;
  --status-warning-border:#fde68a;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.12);

  /* Nav */
  --nav-bg:           #ffffff;
  --nav-text:         #111827;
  --nav-border:       #e5e7eb;
}

/* ------------------------------------------------------------
   Section 2: Typography
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  background: var(--bg-page);
  color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

.heading-display {
  font-family: 'Cal Sans', 'Poppins', sans-serif;
}

/* ------------------------------------------------------------
   Section 3: Migrated classes from index.html <style>
   (retired colours replaced with brand tokens)
   ------------------------------------------------------------ */

/* v1.265 (A10): removed dead AI-aesthetic CSS — .gradient-text (+ its gshift
   keyframes), .glass, .cyber-grid — all had zero usages anywhere in the app.
   (--brand-gradient + the gradient .btn-primary were removed in v1.267 / A6.) */

/* Scrollbar */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track  { background: var(--border-subtle); }
::-webkit-scrollbar-thumb  { background: var(--ink-4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* Section card (.sc) — v1.64 quieted to v2 tokens */
.sc {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-paper);
  border-radius: var(--radius-card);
  padding: 22px;
  margin-bottom: 16px;
}

/* Quote input (.qi) — v1.64 v2 border + Sky focus ring */
.qi {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  padding: 9px 12px;
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  transition: border-color var(--motion), box-shadow var(--motion);
  outline: none;
}
.qi:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--sky-ring);
}
.qi::placeholder { color: var(--ink-4); }
.qi.dirty, .qta.dirty, .qs.dirty,
[data-dirty-scope] input.dirty,
[data-dirty-scope] select.dirty,
[data-dirty-scope] textarea.dirty {
  background: #fff8f0;
  border-color: #f59e0b;
}
/* v1.70.9: software-catalogue row highlights when its org multi-select has
   changed. The real dirty signal rides on a sibling shadow input; mirror it
   onto the visible MSD trigger button via :has(). */
.swcat-orgs-cell:has(> input.swcat-orgs-shadow.dirty) [role="combobox"] {
  background: #fff8f0;
  border-color: #f59e0b !important;
}

/* FAB pulse animation when dirty (v1.52) */
@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(245,158,11,0.35); }
  50% { box-shadow: 0 8px 32px rgba(245,158,11,0.6); }
}
#fab-save-shared[data-pulse] {
  animation: fab-pulse 2s ease-in-out infinite;
}

/* Admin nav grouped sections (v1.53) */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.admin-nav-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-card, 10px);
  padding: 10px 14px 12px;
  background: var(--surface, #fff);
}
.admin-nav-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-4);
  margin-bottom: 6px;
  font-family: 'Poppins', sans-serif;
}
.admin-nav-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.admin-nav-quoting .admin-nav-label,
.admin-nav-customers .admin-nav-label { color: var(--ink-4); }

/* Clickable dashboard stat tiles (v1.49) */
.dash-tile-clickable {
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.dash-tile-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Quote select (.qs) — v1.64 */
.qs {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  padding: 9px 12px;
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--motion), box-shadow var(--motion);
}
.qs:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--sky-ring);
}

/* Quote textarea (.qta) — v1.64 */
.qta {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  padding: 10px 12px;
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  outline: none;
  resize: vertical;
  transition: border-color var(--motion), box-shadow var(--motion);
}
.qta:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--sky-ring);
}
.qta::placeholder { color: var(--ink-4); }

/* Number spinner hide (.ns) */
.ns::-webkit-outer-spin-button,
.ns::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ns { -moz-appearance: textfield; }

/* Checkbox (.ac) */
.ac {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-strong);
  border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  flex-shrink: 0;
}
.ac:checked {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.ac:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Bundle row (.brow) */
.brow {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: all 0.2s;
}
.brow:last-child { border-bottom: none; }
.brow.chk {
  background: rgba(21,162,227,0.04);
  margin: 0 -16px;
  padding: 12px 16px;
  border-radius: 0;
  border-bottom: none;
}
.brow.chk:first-child { border-radius: 8px 8px 0 0; }
.brow.chk:last-child  { border-radius: 0 0 8px 8px; }
.brow.chk:only-child  { border-radius: 8px; }
.brow.chk + .brow.chk { border-top: 1px solid rgba(0,0,0,0.06); }

/* User group row (.ugr) */
.ugr {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.3s;
}
.ugr:hover {
  border-color: rgba(21,162,227,0.3);
}

/* Status badges (.sb) */
.sb {
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.sb-Draft    { background: #f3f4f6; color: var(--text-tertiary); border: 1px solid var(--border-default); }
.sb-Sent     { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.sb-Accepted { background: var(--status-success-bg); color: #15803d; border: 1px solid var(--status-success-border); }
.sb-Declined { background: var(--status-error-bg); color: var(--status-error); border: 1px solid var(--status-error-border); }
.sb-Expired  { background: var(--status-warning-bg); color: var(--status-warning); border: 1px solid var(--status-warning-border); }
.sb-QuoteRequest,
.sb-QuoteRequested,
.sb-NewQuoteRequest { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }

/* Admin sub-button (.admin-sub-btn) — v1.63 v2 palette */
.admin-sub-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  background: transparent;
  color: var(--ink-3);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--motion), color var(--motion);
  line-height: 1.2;
}
.admin-sub-btn:hover { color: var(--ink); background: var(--sky-wash-soft); }
.admin-sub-btn.active {
  background: var(--sky-wash);
  color: var(--brand-navy);
  border-color: transparent;
  font-weight: 600;
}

/* Toast notifications */
.toast-item {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border-left: 4px solid;
  min-width: 280px;
  max-width: 400px;
  font-size: 0.875rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: toastIn 0.3s ease;
}
.toast-item.success { background: #f0fdf4; border-left-color: #16a34a; color: #15803d; }
.toast-item.error   { background: var(--status-error-bg); border-left-color: var(--status-error); color: var(--status-error); }
.toast-item.info    { background: #eff6ff; border-left-color: #1d4ed8; color: #1d4ed8; }
.toast-item .toast-close {
  margin-left: auto;
  cursor: pointer;
  opacity: 0.7;
  font-size: 1.1rem;
  background: none;
  border: none;
  color: inherit;
  padding: 0 0.25rem;
}
.toast-item .toast-close:hover { opacity: 1; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); }    to { opacity: 0; transform: translateX(1rem); } }

/* Tab buttons (.tb) — v1.60 restyled to match v2 .tab-btn (spec §6.3) */
.tb {
  padding: 8px 14px;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--motion), background var(--motion), box-shadow var(--motion);
  border: none;
  background: transparent;
  color: var(--ink-3);
  line-height: 1.2;
  /* v1.168: section accent fallback — overridden by [data-section] rules below */
  --tb-accent:       var(--brand-primary);
  --tb-accent-strong:var(--brand-navy);
  --tb-accent-wash:  var(--sky-wash);
  --tb-accent-soft:  var(--sky-wash-soft);
}
.tb:not(.act):hover {
  color: var(--tb-accent-strong);
  background: var(--tb-accent-soft);
}
.tb.act {
  color: var(--tb-accent-strong);
  background: var(--tb-accent-wash);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--tb-accent);
}

/* v1.264 (A3) — Retired the v1.168 five-colour per-section nav accents
   (violet/amber/rose + emerald-for-nav). The spec reserves colour for *status*;
   the nav is chrome, so every .tb now falls back to the single Sky accent already
   defined on the .tb base + .tb.act (Sky-wash bg + Navy ink + Sky underline).
   data-section attributes are kept as harmless semantic hooks (no JS reads them)
   but no longer drive colour. */
:root {
  /* light-green status wash — still used by the products import row (products.js) */
  --ok-wash: rgba(22,163,74,.10);
}
/* Hamburger nav items (data-section but not .tb) get one quiet Sky hover. */
[data-section]:not(.tb):hover { background: var(--sky-wash-soft); }

/* Proposal overlay (#prop-ov) — v1.64 redesigned header */
#prop-ov {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(11,15,23,0.92);
  backdrop-filter: blur(6px);
  flex-direction: column;
}
#prop-ov.open { display: flex; }
#prop-iframe  { flex: 1; width: 100%; border: none; background: white; }

.prop-ov-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: #0b0f17;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
}
.prop-ov-title .overline { line-height: 1; margin-bottom: 4px; }
.prop-ov-title .name { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.2; }
.prop-ov-actions { display: flex; align-items: center; gap: 8px; }

.prop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-button);
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: background var(--motion), border-color var(--motion), color var(--motion);
}
.prop-btn:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.prop-btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  font-weight: 600;
}
.prop-btn-primary:hover {
  background: #0d89c3;
  border-color: #0d89c3;
  color: #fff;
}
.prop-btn-ok {
  background: rgba(22,163,74,.16);
  border-color: rgba(22,163,74,.35);
  color: #6ee7a6;
}
.prop-btn-ok:hover {
  background: rgba(22,163,74,.26);
  color: #8cf0b9;
}
.prop-btn-close {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
  transition: background var(--motion), color var(--motion);
}
.prop-btn-close:hover { background: rgba(255,255,255,.14); color: #fff; }
.prop-btn-close:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.prop-btn-close svg { width: 16px; height: 16px; }

/* v1.259: contact chips (quote additional contacts + deal contacts). */
.qc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  background: var(--sky-wash, #f0f8ff);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
}
.qc-chip-name { font-weight: 600; color: var(--ink-1, #1f2937); }
.qc-chip-sub { color: var(--ink-3, #6b7280); font-size: 11px; }
.qc-chip-x {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3, #9ca3af);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 4px;
}
.qc-chip-x:hover { color: var(--err, #b42318); background: rgba(180,35,24,.08); }

/* v1.259: Kanban pipeline board (Deals). */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) {
  .kanban-board { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(260px, 1fr); overflow-x: auto; padding-bottom: 8px; }
}
.kanban-column {
  background: var(--surface-2, #f7f9fc);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-card, 12px);
  padding: 10px;
  min-height: 120px;
  transition: background .12s, border-color .12s;
}
.kanban-column.drag-over { background: var(--sky-wash, #eef6ff); border-color: var(--brand-primary, #0ea5e9); }
.kanban-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kanban-col-title { font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2, #374151); }
.kanban-col-count { font-size: 11px; font-weight: 600; color: var(--ink-3, #6b7280); background: var(--surface, #fff); border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 999px; padding: 1px 8px; }
.kanban-col-sub { font-size: 11px; color: var(--ink-3, #9ca3af); margin: 2px 0 10px; }
.kanban-col-body { display: flex; flex-direction: column; gap: 8px; }
.kanban-empty { font-size: 12px; color: var(--ink-3, #9ca3af); padding: 10px 4px; text-align: center; }
.kanban-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: box-shadow .12s, border-color .12s, transform .06s;
}
.kanban-card:hover { border-color: var(--brand-primary, #0ea5e9); box-shadow: 0 4px 12px rgba(16,24,40,.08); }
.kanban-card.dragging { opacity: .5; }
.kanban-card-title { font-weight: 600; font-size: 13px; color: var(--ink-1, #1f2937); display: flex; align-items: center; gap: 6px; line-height: 1.3; }
.kanban-card-quote { font-size: 10px; font-weight: 600; color: var(--brand-primary, #0ea5e9); border: 1px solid var(--brand-primary, #0ea5e9); border-radius: 4px; padding: 0 5px; line-height: 1.5; }
.kanban-card-client { font-size: 12px; color: var(--ink-2, #4b5563); margin-top: 3px; }
.kanban-card-meta { font-size: 11px; color: var(--ink-3, #6b7280); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.kanban-card-meta .dot { color: var(--ink-4, #cbd5e1); }
.kanban-card-age { font-size: 10.5px; color: var(--ink-3, #9ca3af); margin-top: 6px; }
/* v1.260: locked (read-only) column = Won; shell = quote with no pricing yet. */
.kanban-column-locked { background: var(--surface-2, #f7f9fc); border-style: dashed; }
.kanban-col-lock { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3, #9ca3af); border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 4px; padding: 0 5px; margin-left: 6px; }
.kanban-card-shell { font-style: italic; color: var(--ink-3, #9ca3af); }

/* Settings / data table rows (.strow) */
.strow td { padding: 8px 12px; }
.strow     { border-bottom: 1px solid var(--border-subtle); }

/* Client suggestions dropdown */
#client-suggestions .sugg-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}
#client-suggestions .sugg-item:hover { background: #f0f7ff; }
#client-suggestions .sugg-create {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--brand-primary);
  font-weight: 600;
  border-top: 1px solid #e2e8f0;
}

/* Login screen — styles live in DESIGN SYSTEM v2 section (v1.58+) */

/* Spinner */
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   Section 4: New component classes
   ------------------------------------------------------------ */

/* Nav bar — v1.60 refreshed per spec §6.1 */
.nav-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink);
}

/* v1.267 (A6): retired the gradient .btn-primary (navy→sky --brand-gradient +
   translateY hover — an explicit anti-pattern). All 21 markup sites now use the
   flat-navy .btn-primary-v2. Rule + --brand-gradient token removed. */

/* Buttons — secondary */
.btn-secondary {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 7px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary:hover {
  background: var(--bg-page);
  border-color: var(--border-strong);
}

/* Buttons — danger */
.btn-danger {
  background: transparent;
  color: var(--status-error);
  border: 1px solid var(--status-error-border);
  border-radius: 7px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-danger:hover {
  background: var(--status-error-bg);
}

/* Card */
.card {
  background: var(--bg-surface);
  border-radius: 12px;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

/* Config accordion — v1.65.1 quiet v2 treatment */
.cfg-accordion {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion), border-color var(--motion);
}
.cfg-accordion:hover { background: var(--sky-wash-soft); border-color: var(--ink-3); }
.cfg-accordion .cfg-chevron { color: var(--ink-3); transition: transform .15s ease; }
.cfg-accordion.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: var(--sky-wash); border-color: transparent; color: var(--brand-navy); }
.cfg-accordion.is-open .cfg-chevron { transform: rotate(180deg); color: var(--brand-navy); }
/* Body panel flush with the open accordion header */
.cfg-accordion.is-open + div {
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  padding: 18px 20px;
  background: var(--paper);
  margin-top: 0 !important;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 28px;
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

/* Password validation checklist */
.pw-check {
  list-style: none;
  margin-top: 8px;
  font-size: 12px;
  padding: 0;
}
.pw-check li {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pw-check li::before { content: '\25CB'; /* ○ */ }
.pw-check li.pass {
  color: var(--status-success);
}
.pw-check li.pass::before { content: '\25CF'; /* ● */ }

/* Error banner */
.error-banner {
  background: var(--status-error-bg);
  border: 1px solid var(--status-error-border);
  color: var(--status-error);
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.error-banner button {
  background: none;
  border: 1px solid var(--status-error);
  color: var(--status-error);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
}

/* Section heading (quote-builder, v1.64 — Cal Sans numerals optional via .section-heading-num) */
.section-heading {
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
}
.section-heading::before {
  content: '';
  display: inline-block;
  width: 3px; height: 12px;
  background: var(--brand-primary);
  border-radius: 2px;
  margin-right: 10px;
  vertical-align: -1px;
}

/* -- PROJECT TASKS ---------------------------------------------- */
.pt-status-ns       { background:#f3f4f6; color:#6b7280; }
.pt-status-ip       { background:#dbeafe; color:#1d4ed8; }
.pt-status-done     { background:#dcfce7; color:#16a34a; }
.pt-status-blocked  { background:#fee2e2; color:#dc2626; }
.pt-status-na       { background:#f3f4f6; color:var(--ink-4); }
.pt-check           { width:16px; height:16px; accent-color:#15a2e3; cursor:pointer; }
.pt-date-input::-webkit-calendar-picker-indicator { opacity:0.5; }
.pt-assign-select   { max-width:110px; }
.pt-comment         { padding:6px 0; }
.pt-task-row        { min-height:38px; }
.pt-row-expanded    { background:#f9fafb; }

/* -- QUOTE BUILDER COLLAPSIBLE SECTIONS ------------------------- */
.qb-toggle { cursor: pointer; user-select: none; position: relative; padding-right: 20px; }
.qb-toggle::after {
  content: '▾';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--ink-4);
  transition: transform 0.15s ease;
}
.qb-section.qb-collapsed .qb-toggle::after { transform: translateY(-50%) rotate(-90deg); }
.qb-section.qb-collapsed > *:not(.qb-toggle) { display: none !important; }
.qb-section.qb-collapsed { padding-bottom: 0.75rem; }

/* Google Maps error overlay suppression — until the API key has Maps JS
   + Places enabled the SDK throws a modal that wedges on top of our UI.
   Also hide any empty pac-container autocomplete dropdown. */
.gm-err-container, .gm-err-content, .dismissButton { display: none !important; }
.pac-container:empty { display: none !important; }

/* Custom address-autocomplete dropdown (Places API New, programmatic). */
.addr-ac-dropdown {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  max-height: 260px;
  overflow-y: auto;
  font-size: 13px;
  color: #1f2937;
}
.addr-ac-row {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  line-height: 1.35;
}
.addr-ac-row:last-child { border-bottom: none; }
.addr-ac-row:hover { background: #f0f9ff; }
.addr-ac-main { font-weight: 600; color: var(--ink); }
.addr-ac-secondary { color: var(--ink-3); font-size: 12px; }
.addr-ac-empty { padding: 10px 12px; color: var(--ink-4); font-size: 12px; text-align: center; }

/* ------------------------------------------------------------
   Section: RMM table cell truncation (v1.50)
   Shared by Devices / End Users / Alerts / Tickets / Reports
   so long values ellipsise with a tooltip via the title attr.
   ------------------------------------------------------------ */
.rmm-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* v1.102: the RMM .sc container itself is now max-width:min(95vw,1920px)
   so tables fit natively inside the card — no breakout hack needed. */

/* ------------------------------------------------------------
   Section: Forms (v1.50)
   Centralised modal form tokens so every new form looks consistent
   — field spacing, label styling, input borders, focus rings, and
   the emoji icon-picker grid used by New Project Type. Documented
   in CLAUDE.md "Form styling (v1.50+)".
   ------------------------------------------------------------ */
.form-field            { display: block; margin-bottom: 14px; }
.form-label            { display: block; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.form-label-req::after { content: " *"; color: #dc2626; }
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(21, 162, 227, 0.15);
}
.form-textarea         { min-height: 80px; resize: vertical; }
.form-help             { font-size: 0.75rem; color: var(--ink-3); margin-top: 4px; }
.form-error            { font-size: 0.75rem; color: #dc2626; margin-top: 4px; }
.form-row              { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-row-3            { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form-section         { margin-top: 18px; padding-top: 14px; border-top: 1px solid #f3f4f6; }
.form-section-title   { font-size: 0.8rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.form-check           { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-2); }
.form-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand-primary); }

.icon-picker {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
}
.icon-picker-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-size: 1.35rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: var(--paper);
  transition: all 0.12s;
  padding: 0;
}
.icon-picker-tile:hover {
  border-color: var(--brand-primary);
  background: #eff6ff;
}
.icon-picker-tile.selected {
  border-color: var(--brand-primary);
  background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(21, 162, 227, 0.25);
}

@media (max-width: 640px) {
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .icon-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── Mobile rendering sweep (v1.229) ───────────────────────────────
   1. Hamburger drawer height fallback for browsers without dynamic
      viewport units. The inline style on #hamburger-menu uses 100dvh
      (the actual fix for iOS Safari's bottom URL bar cropping the
      drawer); this @supports block targets pre-dvh browsers so the
      drawer is short enough to fit instead of too tall.
   2. Data-table card reflow below 640px. Affects every .data-table
      across the app (24 JS renderers). Tables become stacked cards;
      column headers disappear and each cell can pick up a label via
      data-label="…". Action buttons inside rows bump to 44px height
      to meet Apple HIG touch targets. */
@supports not (height: 100dvh) {
  #hamburger-menu { max-height: calc(100vh - 140px) !important; }
}

@media (max-width: 640px) {
  .panel:has(.data-table) { overflow: visible; }

  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table tr,
  .data-table th,
  .data-table td {
    display: block;
    width: 100% !important;
  }
  .data-table thead { display: none; }
  .data-table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius-card, 10px);
    margin-bottom: 8px;
    padding: 12px;
    background: var(--paper);
  }
  .data-table td {
    border: none;
    padding: 6px 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    min-height: 0;
    text-align: left;
  }
  /* Inline text-align on cells (right-aligned numeric columns on desktop)
     would force values to the wrong side in the stacked layout. Override. */
  .data-table td[style*="text-align:right"],
  .data-table td[style*="text-align: right"] { text-align: left !important; }
  /* Cells WITH a data-label render as a labelled row: small uppercase
     label on the left, value on the right. */
  .data-table td[data-label] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .data-table td[data-label]::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted, #6b7280);
    flex-shrink: 0;
  }
  /* Cells WITHOUT a data-label fall back to a normal block row so
     unlabelled tables still render readably (no phantom space-between
     pushing values to the right edge). */
  .data-table td:not([data-label]) { display: block; }
  .data-table td:empty { display: none; }

  .data-table .btn-ghost-v2,
  .data-table .btn-secondary-v2,
  .data-table button:not(.no-touch-bump):not(.sort-btn) {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
  }

  /* Toolbar above tables (search input, filters) often uses inline
     max-width:320px — let it fill the viewport on phones. */
  .panel-head { flex-wrap: wrap; gap: 8px; }

  /* Section headers (.portal-section-head .aside) hold search inputs,
     filter selects, and action buttons with inline fixed widths. On a
     phone the combined width overflows the viewport; wrap the aside to
     its own line and let inputs grow to fill the available space. */
  .portal-section-head { flex-wrap: wrap; }

  /* ── Quote builder mobile fixes (v1.258; grids/widths → source v1.273) ──
     The builder is desktop-first. The Quote Details grid collapse
     (grid-cols-1 sm:grid-cols-*) and the qty/price input widths
     (w-9 / w-[3.25rem] sm:w-*) are now mobile-first at the call sites
     (index.html / quote-builder.js); A11 retired their !important
     overrides. Two flex-wrap rules remain (no clean source form), both
     scoped to #v-builder so nothing outside it is affected.

     1. Section header rows (title on left, action button on right) use
        flex justify-between without wrap. On a phone the button gets squeezed
        into a narrow column and text renders vertically. Wrap instead. */
  #v-builder .sc[data-qb="service-lines"] > .flex.items-center.justify-between,
  #v-builder .sc[data-qb="project-services"] > .flex.items-center.justify-between,
  #v-builder .sc[data-qb="onboarding"] .flex.items-center.justify-between {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* 2. Bolt-on control row (auto/Qty + Rate + Freq + TBC + Opt + subtotal)
     is a single flex row that exceeds the viewport. Wrap it. */
  #v-builder [id^="bctrl-"] { flex-wrap: wrap; gap: 6px; }
  .portal-section-head .aside {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 8px;
  }
  .portal-section-head .aside input[type="text"],
  .portal-section-head .aside input[type="search"],
  .portal-section-head .aside select {
    flex: 1;
    min-width: 0;
    width: auto !important;
    max-width: none;
  }

  /* ── v1.232.2 audit follow-ups ───────────────────────────────────
     Found via Playwright sweep at 393×852: every top-level page +
     sub-tab. Several causes of horizontal overflow on phones, plus a
     handful of non-.data-table list views that didn't reflow. */

  /* Inline fixed-N grids (repeat(N,1fr)) on KPI / fact rows now use the
     mobile-first .rgrid-N classes (defined just after this sweep) rather
     than a global !important collapse — A11 (v1.273). The auto-fit /
     auto-fill minmax() grids that remain inline were already overflow-safe
     (they wrap by definition), so no rule is needed for them here. */

  /* Segmented controls and tab strips with too many options overflow on
     narrow viewports. Let them scroll horizontally and keep buttons from
     shrinking past their content. Covers .seg (quote-builder, billing),
     .pri-seg (priority pickers), and .tabs (Customer Hub sub-tabs, any
     in-panel tab strip with 6+ items). */
  .seg, .pri-seg, .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .seg > *, .pri-seg > *, .tabs > * { flex-shrink: 0; }

  /* Tables that didn't get the .data-table class (Admin > Users uses
     <table class="w-full text-xs">). Apply the same card-stack reflow
     to keep them readable. */
  table.w-full:not(.data-table) {
    display: block;
  }
  table.w-full:not(.data-table) thead { display: none; }
  table.w-full:not(.data-table) tbody,
  table.w-full:not(.data-table) tr,
  table.w-full:not(.data-table) td {
    display: block;
    width: 100%;
  }
  table.w-full:not(.data-table) tr {
    border: 1px solid var(--line);
    border-radius: var(--radius-card, 10px);
    margin-bottom: 8px;
    padding: 12px;
    background: var(--paper);
  }
  table.w-full:not(.data-table) td {
    border: none;
    padding: 6px 0;
    text-align: left;
    white-space: normal;
  }

  /* Long-text buttons (Admin > Tools "Sample Quote Acceptance Email
     (Internal Test)" etc.) bust the layout when they refuse to wrap.
     Allow wrapping and cap to viewport width. */
  button, .btn-secondary, .btn-ghost-v2,
  .btn-primary-v2, .btn-secondary-v2 {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
  }

  /* Admin > Backups has a <code> block with shell commands that runs
     wider than the viewport. Allow horizontal scroll inside the block
     so the page itself doesn't overflow. */
  pre, code {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: pre-wrap;
    word-break: break-word;
  }
}
/* ── end mobile sweep ────────────────────────────────────────────── */

/* ── Responsive stat / KPI grids (.rgrid-N) — v1.273 (A11) ──────────
   Mobile-first replacement for the old desktop-first inline
   grid-template-columns:repeat(N,1fr) + global !important collapse.
   1 column on phones (≤640px), N columns from 641px up — behaviourally
   identical to what the retired override produced, but with normal
   specificity and no inline desktop-first column tracks. Call sites keep
   their own gap / padding inline; these classes own only the columns.
   minmax(0,1fr) lets a wide child shrink instead of forcing overflow. */
.rgrid-2, .rgrid-3, .rgrid-4, .rgrid-5 { display: grid; grid-template-columns: 1fr; }
@media (min-width: 641px) {
  .rgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rgrid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── Multi-select dropdown (v1.54) ─────────────────────────────── */
.msd-host{position:relative;display:inline-block;}
.msd-btn{
  border:1px solid #d1d5db;background:var(--paper);border-radius:8px;
  padding:6px 28px 6px 10px;font-size:13px;color:var(--ink-2);cursor:pointer;
  min-width:140px;max-width:260px;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  position:relative;
}
.msd-btn:after{
  content:'▾';position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:var(--ink-4);font-size:11px;pointer-events:none;
}
.msd-btn:hover{border-color:var(--ink-4);}
.msd-btn:focus{outline:2px solid var(--brand-primary);outline-offset:-1px;}
.msd-popover{
  position:absolute;top:100%;left:0;z-index:10050;margin-top:2px;
  background:var(--paper);border:1px solid #d1d5db;border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  min-width:220px;max-width:360px;
  padding:6px;
}
.msd-search{
  width:100%;border:1px solid var(--line);border-radius:6px;
  padding:5px 8px;font-size:12px;margin-bottom:4px;
}
.msd-row{
  display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:4px;
  font-size:13px;color:var(--ink-2);cursor:pointer;user-select:none;
}
.msd-row:hover{background:#f3f4f6;}
.msd-row input[type=checkbox]{accent-color:var(--brand-primary);}
.msd-all{border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:6px;font-weight:600;color:var(--ink);}
.msd-list{max-height:300px;overflow-y:auto;}

/* ── Support: Affected Users chips (v1.54) ─────────────────────── */
.sr-au-chips{display:flex;flex-wrap:wrap;gap:6px;}
.sr-au-chips:empty{display:none !important;}
.sr-au-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#e0f2fe;color:#075985;border:1px solid #bae6fd;
  padding:2px 8px;border-radius:999px;font-size:12px;
}
.sr-au-chip button{
  background:none;border:none;color:#075985;cursor:pointer;
  font-size:14px;line-height:1;padding:0;
}
.sr-au-chip button:hover{color:#dc2626;}

/* ── Approval rules: collapse grid on narrow viewports (v1.54) ─── */
@media (max-width: 900px){
  #cfg-approval-container > div[data-idx]{
    grid-template-columns: 1fr !important;
  }
}

/* ── Header menu group labels + quiet section tints (v1.66) ── */
.hdr-menu-label{
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  padding:10px 16px 4px;
}
/* v1.264 (A4): one calm treatment for every menu group — a quiet panel-bg block,
   a neutral overline label, and a uniform Sky hover. Stacked groups are split by a
   hairline divider, not by colour (was three decorative colour washes). Used by the
   Admin / Contracts / Operations nav dropdowns (desktop + hamburger). */
.hdr-menu-platform,
.hdr-menu-quoting,
.hdr-menu-customers { background: var(--panel-bg); }
.hdr-menu-quoting,
.hdr-menu-customers { border-top: 1px solid var(--line-2); }
.hdr-menu-platform  .hdr-menu-label,
.hdr-menu-quoting   .hdr-menu-label,
.hdr-menu-customers .hdr-menu-label { color: var(--ink-4); }
.hdr-menu-platform  button,
.hdr-menu-quoting   button,
.hdr-menu-customers button { background: transparent; color: var(--ink-2); }
.hdr-menu-platform  button:hover,
.hdr-menu-quoting   button:hover,
.hdr-menu-customers button:hover { background: var(--sky-wash); color: var(--brand-navy); }

/* Login SSO / magic-link / password styles live in the DESIGN SYSTEM v2 section below (v1.58+) */

/* ============================================================
   ============================================================
                    DESIGN SYSTEM v2
     Direction A — "Quiet & Precise"
     Spec: docs/superpowers/specs/2026-04-18-lucenteone-design-system-v2.md

     Migration status (v1.65, 2026-04-18): COMPLETE.
     All nine phases of the spec have shipped — login, customer
     portal, employee dashboard, nav, projects/my-tasks, RMM,
     admin, and quote-builder + proposal overlay all use the v2
     token set and component library below.

     The legacy primitives above (.sc, .qi, .qs, .qta,
     .section-heading, .form-*, .tb, .ac, .pt-*) are still
     present but have been quietly re-skinned to the v2 tokens
     during Phase 5 / 8. New code should still prefer the v2
     classes — but reaching for a legacy class in a legacy file
     won't regress the look.

     The -v2 suffix on the first-shipped components
     (.btn-primary-v2, .modal-v2-*, .toast-v2*) is preserved for
     back-compat; new components don't need the suffix.
   ============================================================
   ============================================================ */

/* ---- v2 tokens: colour & surface ---- */
:root {
  /* Ink scale (replaces ad-hoc gray-500/600/700 in new components) */
  --ink:   #0b0f17;
  --ink-2: #2b3242;
  --ink-3: #5b6270;
  --ink-4: #8a909b;

  /* Surfaces */
  --paper:    #ffffff;
  --panel-bg: #f8f9fa;
  /* Legacy surface tokens referenced by name across the JS (always with a
     light fallback, e.g. var(--surface-2,#f7f8fa)). They were never defined,
     so they silently used the fallback and did NOT flip in dark. Defined here
     so they theme correctly — A13 long-tail (v1.274). Light values = their
     historical fallbacks, so light mode is pixel-identical. */
  --surface:   #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef0f3;

  /* Undefined-token aliases (A13 Pass 2 — v1.275): these were referenced in JS
     via var(--x) with no fallback, resolving to transparent/inherited. Aliased to
     existing flipping tokens so they theme correctly in both light and dark. */
  --border:      var(--line);
  --text-muted:  var(--ink-4);
  --text:        var(--ink);
  --sky:         var(--brand-primary);
  --primary:     var(--brand-primary);
  --hover:       var(--sky-wash);
  --surface-alt: var(--panel-bg);
  --ink-5:       #b0b7c3;

  /* Lines */
  --line:   #e5e7eb;
  --line-2: #f1f3f5;

  /* Sky washes (structural use: hover / active / focus rings) */
  --sky-wash-soft: rgba(21,162,227,.04);
  --sky-wash:      rgba(21,162,227,.10);
  --sky-ring:      rgba(21,162,227,.12);

  /* Status (new names; legacy --status-* remain for v1 usage) */
  --ok:         #16a34a;
  --ok-bg:      #ecfdf5;
  --ok-strong:  #166534;
  --ok-border:  #bbf0d0;
  --warn:       #92400e;
  --warn-bg:    #fef3c7;
  --warn-border:#fde68a;
  --err:        #b42318;
  --err-bg:     #fef2f2;
  --err-border: #fecaca;
}

/* ============================================================================
   A13 — DARK MODE (phased, app-wide)
   ----------------------------------------------------------------------------
   The Tailwind ink/brand ramps resolve through the --c-* channels below (see
   tailwind.config.js: rgb(var(--c-…)/<alpha-value>)), so every gray/blue utility
   flips with the theme. The DS v2 semantic tokens (--ink/--line/--paper/…) are
   re-pointed under html.dark too, so var()-based components flip as well.
   Trigger = html.dark (set by the early-apply script in index.html: stored
   preference wins, else follow the OS). color-scheme keeps native controls dark.
   Phase 1 = this foundation (channels + semantic tokens + bg-white surfaces).
   Follow-up sweeps convert the remaining bare inline hex colours in the JS. */
:root {
  color-scheme: light;
  /* ink ramp (neutral families) — light defaults, space-separated RGB channels */
  --c-ink-50: 248 249 250;  --c-ink-100: 241 243 245; --c-ink-200: 229 231 235;
  --c-ink-300: 209 213 219; --c-ink-400: 138 144 155; --c-ink-500: 91 98 112;
  --c-ink-600: 69 76 90;    --c-ink-700: 43 50 66;    --c-ink-800: 26 32 48;
  --c-ink-900: 11 15 23;    --c-ink-950: 7 10 16;
  /* brand ramp (cool-accent families) — light */
  --c-brand-50: 238 246 253;  --c-brand-100: 214 236 251; --c-brand-200: 191 225 247;
  --c-brand-300: 143 205 240; --c-brand-400: 58 174 232;  --c-brand-500: 21 162 227;
  --c-brand-600: 12 111 168;  --c-brand-700: 10 86 136;   --c-brand-800: 16 56 137;
  --c-brand-900: 10 42 102;   --c-brand-950: 6 24 61;
}

html.dark {
  color-scheme: dark;
  /* ink ramp INVERTED — low index = dark surface, high index = light text */
  --c-ink-50: 13 17 23;     --c-ink-100: 17 21 29;    --c-ink-200: 34 42 56;
  --c-ink-300: 47 57 74;    --c-ink-400: 93 102 120;  --c-ink-500: 139 147 164;
  --c-ink-600: 168 176 191; --c-ink-700: 194 200 212; --c-ink-800: 216 220 228;
  --c-ink-900: 238 241 246; --c-ink-950: 247 249 252;
  /* brand ramp brightened/inverted so accent text reads on dark */
  --c-brand-50: 6 24 61;     --c-brand-100: 10 42 102;  --c-brand-200: 16 56 137;
  --c-brand-300: 12 111 168; --c-brand-400: 21 162 227; --c-brand-500: 55 182 240;
  --c-brand-600: 92 195 243; --c-brand-700: 143 205 240;--c-brand-800: 191 225 247;
  --c-brand-900: 214 236 251;--c-brand-950: 238 246 253;
  /* DS v2 semantic tokens — dark surfaces + light ink (mockup 02 palette) */
  --ink: #eef1f6; --ink-2: #c2c8d4; --ink-3: #8b93a4; --ink-4: #5d6678; --ink-5: #3e4655;
  --paper: #11151d; --panel-bg: #0d1117;
  --surface: #11151d; --surface-2: #0d1117; --surface-3: #161c26;
  --line: #222a38; --line-2: #1a2230;
  --sky-wash-soft: rgba(55,182,240,.06); --sky-wash: rgba(55,182,240,.12); --sky-ring: rgba(55,182,240,.22);
  --brand-primary: #37b6f0;
  /* status — brightened foreground + low-alpha tint backgrounds for dark */
  --ok: #5fd493;   --ok-bg: rgba(22,163,74,.14);   --ok-border: rgba(22,163,74,.34);   --ok-strong: #7ee0a8;
  --warn: #f0b757; --warn-bg: rgba(217,119,6,.14);  --warn-border: rgba(217,119,6,.34);
  --err: #f08a80;  --err-bg: rgba(180,35,24,.18);   --err-border: rgba(180,35,24,.40);
}
html.dark body { background-color: rgb(var(--c-ink-50)); }
/* bg-white is used for surfaces (panels, cards, dropdowns) — darken them.
   text-white (white-on-coloured-button) is intentionally left literal. */
html.dark .bg-white { background-color: var(--paper); }
/* Theme-toggle icon swap: moon shown in light (click → dark), sun in dark (→ light). */
.theme-ico-sun  { display: none; }
.theme-ico-moon { display: inline-block; }
html.dark .theme-ico-moon { display: none; }
html.dark .theme-ico-sun  { display: inline-block; }

/* ---- v2 tokens: spacing, shape, depth, motion ---- */
:root {
  /* Spacing scale (spec §3.3) — use these, not arbitrary px values. */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px;  --s-12: 48px; --s-16: 64px;

  /* Fluid display type (A14) — clamp() so the viewport-spanning headings breathe
     on wide screens without breakpoint sprawl (spec §3.3 type scale). min ≈ phone
     size, max ≈ desktop size. Only full-width headings use these; body / section /
     modal type stays fixed (modals are fixed-width, so they can't breathe anyway). */
  --fs-hero: clamp(2rem, 1.15rem + 3.55vw, 4rem);      /* login wordmark   32 → 64 */
  --fs-h1:   clamp(1.875rem, 1.62rem + 1.1vw, 2.5rem);  /* page/greeting H1 30 → 40 */

  /* Radius */
  --radius-input:  10px;
  --radius-button: 10px;
  --radius-card:   12px;
  --radius-modal:  16px;
  --radius-pill:   999px;

  /* Shadows — semantic names (do NOT collide with v1 --shadow-sm/md/lg) */
  --shadow-paper:   0 1px 3px rgba(12,18,30,.04);
  --shadow-card:    0 4px 12px rgba(12,18,30,.06);
  --shadow-modal:   0 40px 100px rgba(12,18,30,.25);
  --shadow-sky-pop: 0 4px 20px rgba(21,162,227,.12);

  /* Motion */
  --motion-fast: .12s ease;   /* hover, tab switch */
  --motion:      .15s ease;   /* default */
  --motion-mod:  .18s ease-out; /* modal pop-in */
  --motion-slow: .28s ease-out; /* toast in */
}

/* ---- .overline — section/label/column-header text (brand guide: 11px · 3px tracking · 600 · uppercase) ---- */
.overline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-4);
  font-family: 'Poppins', sans-serif;
}

/* ---- .ico — inline Feather icon from the self-hosted sprite (/icons.svg, A8 v1.267).
   Sizes to the surrounding font (1em) and inherits text colour via currentColor.
   Replaces the legacy ✕/✓/⚠/⚙/✎ dingbats + 🚀/🔒 emoji. ---- */
.ico {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
  color: inherit;
}

/* ---- v1.268 (A7): one visible Sky focus ring for keyboard users on every
   interactive control (text inputs keep their own box-shadow ring). The outline
   follows each element's border-radius automatically in modern browsers. ---- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ---- v2 buttons ---- */
.btn-primary-v2, .btn-secondary-v2, .btn-ghost-v2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: var(--radius-button);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--motion), border-color var(--motion), color var(--motion);
  line-height: 1.2;
}
.btn-primary-v2 { background: var(--brand-navy); color: #fff; border: 1px solid var(--brand-navy); }
.btn-primary-v2:hover:not(:disabled) { background: #0d2e70; border-color: #0d2e70; }
.btn-primary-v2:disabled { opacity: .5; cursor: not-allowed; }

.btn-secondary-v2 { background: var(--paper); color: var(--ink-2); border: 1px solid var(--line); }
.btn-secondary-v2:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.btn-secondary-v2:disabled { opacity: .5; cursor: not-allowed; }

.btn-ghost-v2 { background: transparent; color: var(--ink-3); border: 1px solid transparent; padding: 9px 12px; }
.btn-ghost-v2:hover:not(:disabled) { background: var(--panel-bg); color: var(--ink); }

.btn-primary-v2 svg, .btn-secondary-v2 svg, .btn-ghost-v2 svg { width: 13px; height: 13px; stroke-width: 2; }

/* ---- v2 form fields ---- */
.field-input, .field-select, .field-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  transition: border-color var(--motion), box-shadow var(--motion);
  box-sizing: border-box;
}
.field-input::placeholder, .field-textarea::placeholder { color: var(--ink-4); }
.field-input:focus, .field-select:focus, .field-textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--sky-ring);
}
.field-input.error, .field-select.error, .field-textarea.error {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(180,35,24,.08);
}
.field-textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.field-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6270' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.field-help { font-size: 11.5px; color: var(--ink-4); margin: 6px 0 0; line-height: 1.45; }
.field-error { font-size: 12px; color: var(--err); margin: 6px 0 0; display: flex; align-items: center; gap: 6px; }
.field-error svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ---- .seg — horizontal segmented control (2–5 options) ---- */
.seg {
  display: inline-grid;
  gap: 4px;
  padding: 4px;
  background: var(--panel-bg);
  border-radius: var(--radius-input);
}
.seg.seg-2 { grid-template-columns: repeat(2, 1fr); }
.seg.seg-3 { grid-template-columns: repeat(3, 1fr); }
.seg.seg-4 { grid-template-columns: repeat(4, 1fr); }
.seg.seg-5 { grid-template-columns: repeat(5, 1fr); }
.seg button {
  padding: 7px 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-input) - 4px);
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.seg button:hover { color: var(--ink); }
.seg button.active {
  background: var(--paper);
  color: var(--brand-navy);
  box-shadow: 0 1px 2px rgba(12,18,30,.06);
  font-weight: 600;
}

/* ---- .pri-seg — priority variant (Low / Normal / High / Urgent) ---- */
.pri-seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  overflow: hidden;
}
.pri-seg button {
  padding: 9px 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--paper);
  border: none;
  border-right: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.pri-seg button:last-child { border-right: none; }
.pri-seg button:hover { background: var(--sky-wash-soft); color: var(--ink); }
.pri-seg button.active { background: var(--sky-wash); color: var(--brand-navy); font-weight: 600; }
.pri-seg button.active.urgent { background: rgba(180,35,24,.08); color: var(--err); }

/* ---- .radio-chip — rectangular alternative to <input type=radio> ---- */
.radio-chip-row { display: flex; gap: 6px; }
.radio-chip {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--paper);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color var(--motion), background var(--motion), color var(--motion);
}
.radio-chip .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-4);
  background: var(--paper);
  flex-shrink: 0;
  transition: border-color var(--motion), background var(--motion), box-shadow var(--motion);
}
.radio-chip.checked {
  border-color: var(--brand-primary);
  background: rgba(21,162,227,.06);
  color: var(--brand-navy);
  font-weight: 600;
}
.radio-chip.checked .dot {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  box-shadow: inset 0 0 0 2px #fff;
}

/* ---- .pill — status / count / label (never wraps) ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--paper);
  white-space: nowrap;
  line-height: 1.5;
}
.pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* v1.174: tint the outline-only variants so RAIL Type/Status pills (and
   every other place these classes are used) read consistently next to
   pill-open / pill-critical / pill-info, which already had backgrounds. */
.pill.pill-progress  { background: var(--sky-wash-soft); border-color: #b3d9fa; color: var(--brand-navy); }
.pill.pill-waiting   { background: #fff7e6; border-color: #fcd9a8; color: #b45309; }
.pill.pill-done      { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-strong); }
.pill.pill-submitted { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-strong); }
.pill.pill-error     { background: var(--err-bg); border-color: var(--err-border); color: var(--err); }
.pill.pill-draft     { background: var(--panel-bg); border-color: var(--line); color: var(--ink-3); }
.pill.pill-open      { background: var(--sky-wash); color: var(--brand-navy); border-color: transparent; font-weight: 600; }
.pill.pill-critical  { background: var(--err-bg); border-color: var(--err-border); color: var(--err); font-weight: 600; }
.pill.pill-info      { background: var(--sky-wash-soft); border-color: #b3d9fa; color: var(--brand-navy); }
.pill.pill-warn      { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); font-weight: 600; }

/* ---- .tabs — nav-style tab strip (used in top nav and inside panels) ---- */
.tabs { display: flex; gap: 2px; }
.tab-btn {
  padding: 7px 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  background: transparent;
  border: none;
  text-decoration: none;
  border-radius: 7px;
  cursor: pointer;
  transition: color var(--motion-fast), background var(--motion-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab-btn:hover { color: var(--ink); background: var(--sky-wash-soft); }
.tab-btn.active { color: var(--brand-navy); background: var(--sky-wash); font-weight: 600; }
.tab-btn .count { font-size: 11px; color: var(--ink-4); font-weight: 600; }
.tab-btn.active .count { color: var(--brand-navy); }

/* ---- .panel — container card for tables / grouped content ---- */
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow-paper);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-2);
  flex-wrap: wrap;
}
.panel-head .panel-h {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-head .panel-h::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--brand-primary);
  border-radius: 1px;
}

/* ---- .card-action — launcher card (request-type picker, quick action) ---- */
.card-action {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--motion), transform var(--motion), box-shadow var(--motion);
  min-height: 128px;
}
.card-action:hover {
  border-color: var(--brand-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sky-pop);
}
.card-action .ico {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--panel-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  transition: background var(--motion), color var(--motion);
}
.card-action:hover .ico { background: var(--brand-navy); color: #fff; }
.card-action .ico svg { width: 18px; height: 18px; stroke-width: 1.6; }
.card-action .label { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.card-action .desc { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; margin-top: -6px; }
.card-action .arrow {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-4);
  font-weight: 500;
}
.card-action .arrow svg { width: 12px; height: 12px; }
.card-action:hover .arrow { color: var(--brand-navy); font-weight: 600; }

/* ---- .card-context — compact identity card (avatar + meta + edit) ---- */
.card-context {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  padding: 12px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  align-items: center;
}
.card-context .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.card-context .meta { line-height: 1.4; }
.card-context .meta .name { font-size: 13px; font-weight: 600; color: var(--ink); }
.card-context .meta .sub  { font-size: 11.5px; color: var(--ink-3); }
.card-context .edit { font-size: 12px; color: var(--ink-3); text-decoration: none; }
.card-context .edit:hover { color: var(--ink); }

/* ---- v2 modal (centred, 720px). Does not collide with v1 .modal-overlay/.modal-box ---- */
.modal-v2-overlay {
  position: fixed; inset: 0;
  background: rgba(11,15,23,.38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 60px var(--s-6) var(--s-6);
  z-index: 9998;
}
.modal-v2-overlay.open { display: flex; }
.modal-v2-overlay.device-detail-modal {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background: rgba(15,20,28,.48);
  align-items: center;
  padding: 24px;
}
.modal-v2-overlay.device-detail-modal .modal-v2-card { overflow: visible; position: relative; }
.modal-v2-overlay.device-detail-modal .modal-v2-close {
  background: rgba(255,255,255,.95);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 32px; height: 32px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.modal-v2-overlay.device-detail-modal .modal-v2-close:hover { background: var(--paper); color: var(--ink); }
.modal-v2-card {
  width: 100%;
  max-width: 720px;
  max-height: calc(100dvh - 84px);
  background: var(--paper);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-v2-pop var(--motion-mod);
}
@keyframes modal-v2-pop {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal-v2-head {
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--line-2);
  flex-shrink: 0;
}
.modal-v2-head .top-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.modal-v2-close {
  width: 28px; height: 28px;
  border: 1px solid var(--line); background: var(--paper);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink-3);
  transition: border-color var(--motion), color var(--motion);
}
.modal-v2-close:hover { border-color: var(--ink-3); color: var(--ink); }
.modal-v2-close svg { width: 14px; height: 14px; }
.modal-v2-title {
  font-family: 'Cal Sans', 'Poppins', sans-serif;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 4px;
}
.modal-v2-sub { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.modal-v2-body { flex: 1; overflow-y: auto; padding: 22px 28px 28px; }
.modal-v2-foot {
  flex-shrink: 0;
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.modal-v2-foot .note { font-size: 11.5px; color: var(--ink-4); display: inline-flex; align-items: center; gap: 8px; }
.modal-v2-foot .note b { color: var(--ink-2); font-weight: 600; }
.modal-v2-foot .btn-row { display: flex; gap: 8px; }

/* ── Modal → bottom sheet on phones (v1.255) ─────────────────────────
   Below 600px a centred 720px card wastes the full viewport width via
   overlay side-padding and card internal padding. Slide it up from the
   bottom instead: full-width, top corners rounded, 92dvh max-height so
   the page content peeks through above it. */
@media (max-width: 600px) {
  .modal-v2-overlay,
  .modal-v2-overlay.device-detail-modal {
    padding: 0;
    align-items: flex-end;
  }
  .modal-v2-card {
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
  }
  /* device-detail-modal sets overflow:visible for desktop tooltips;
     reset to hidden so the bottom sheet clips cleanly. */
  .modal-v2-overlay.device-detail-modal .modal-v2-card {
    overflow: hidden;
  }
  .modal-v2-head { padding: 16px 20px 12px; }
  .modal-v2-title { font-size: 20px; }
  .modal-v2-body { padding: 16px 20px 20px; }
  .modal-v2-foot { padding: 10px 20px; }
}

/* ---- .data-table — list table (used inside .panel) ---- */
.data-table { width: 100%; border-collapse: collapse; font-family: 'Poppins', sans-serif; }
.data-table thead th {
  padding: 10px 20px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--line-2);
  background: var(--panel-bg);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 12px 20px;
  font-size: 13px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--sky-wash-soft); }

/* Compact variant for RMM Devices / End Users tables — tighter padding + smaller letter-spacing so all columns fit */
.rmm-compact .data-table thead th { padding: 7px 10px; letter-spacing: 1.5px; font-size: 10px; }
.rmm-compact .data-table tbody td { padding: 6px 10px; font-size: 12.5px; }
.data-table .num     { color: var(--ink-4); font-variant-numeric: tabular-nums; font-size: 12px; }
.data-table .subject { font-weight: 500; color: var(--ink); }
.data-table .pri { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.data-table .pri.pri-high   { color: var(--warn); }
.data-table .pri.pri-urgent { color: var(--err); }

/* ---- .banner — non-blocking top-of-page notice ---- */
.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  background: var(--paper);
  color: var(--ink-2);
}
.banner .ico { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.banner .ico svg { width: 18px; height: 18px; }
.banner b { font-weight: 600; }
.banner .action { margin-left: auto; color: inherit; text-decoration: underline; font-size: 12.5px; font-weight: 500; }

.banner.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.banner.err  { background: var(--err-bg);  border-color: var(--err-border);  color: var(--err); }
.banner.info { background: var(--sky-wash-soft); border-color: #b3d9fa; color: var(--brand-navy); }
.banner.ok   { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-strong); }

/* ---- v2 toast (bottom-right; does not collide with v1 .toast-item) ---- */
.toast-v2-container {
  position: fixed;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 10000;
  pointer-events: none;
}
.toast-v2 {
  pointer-events: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px 14px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 320px;
  max-width: 380px;
  position: relative;
  animation: toast-v2-in var(--motion-slow);
  font-family: 'Poppins', sans-serif;
}
@keyframes toast-v2-in {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.toast-v2 .dot-wrap {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--panel-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  margin-top: 1px;
}
.toast-v2.ok  .dot-wrap { background: var(--ok-bg);   color: var(--ok); }
.toast-v2.err .dot-wrap { background: var(--err-bg);  color: var(--err); }
.toast-v2.warn .dot-wrap { background: var(--warn-bg); color: var(--warn); }
.toast-v2 .dot-wrap svg { width: 12px; height: 12px; }
.toast-v2 .body { line-height: 1.4; }
.toast-v2 .title { font-size: 13px; font-weight: 600; color: var(--ink); }
.toast-v2 .sub   { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.toast-v2 .actions { margin-top: 6px; display: flex; gap: 10px; }
.toast-v2 .actions a { font-size: 12px; color: var(--brand-navy); text-decoration: none; font-weight: 500; cursor: pointer; }
.toast-v2 .actions a.dismiss { color: var(--ink-3); }
.toast-v2 .close {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none;
  color: var(--ink-4);
  cursor: pointer; padding: 2px;
}
.toast-v2 .close svg { width: 14px; height: 14px; }

/* ---- .empty-state — panel body for "nothing to show yet" ---- */
.empty-state {
  padding: 44px 24px 48px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}
.empty-state .ico {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.empty-state .ico svg { width: 22px; height: 22px; stroke-width: 1.6; }
.empty-state h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.empty-state p {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 auto 18px;
  max-width: 380px;
  line-height: 1.5;
}
.empty-state .actions {
  display: inline-flex;
  gap: 8px;
  justify-content: center;
}
/* Error variant — panel-level failure (spec §10.3 / §4.14): the icon chip turns
   Err-tinted; an optional <code> carries the raw error/diagnostic hint. Used via
   the errorState() helper in core.js. */
.empty-state.is-error .ico {
  background: var(--err-bg);
  border-color: var(--err-border);
  color: var(--err);
}
.empty-state.is-error code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  background: var(--err-bg);
  color: var(--err);
  border: 1px solid var(--err-border);
  border-radius: 6px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* ---- .skeleton — shimmer placeholder for loading rows / cards ---- */
@keyframes skeleton-shimmer {
  0%   { background-position: -480px 0; }
  100% { background-position:  480px 0; }
}
.skeleton {
  background: #edf0f3;
  background-image: linear-gradient(90deg, #edf0f3 0%, #f6f8fa 50%, #edf0f3 100%);
  background-size: 480px 100%;
  background-repeat: no-repeat;
  border-radius: 6px;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

/* ---- .drop — attachments dropzone ---- */
.drop {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-input);
  padding: 22px 18px;
  text-align: center;
  background: var(--panel-bg);
  transition: border-color var(--motion), background var(--motion);
  font-family: 'Poppins', sans-serif;
}
.drop:hover, .drop.dragover { border-color: var(--brand-primary); background: var(--sky-wash-soft); }
.drop .title { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.drop .sub   { font-size: 11.5px; color: var(--ink-3); margin: 0; }
.drop .actions { display: flex; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.drop-btn {
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.drop-btn:hover { border-color: var(--ink-3); }
.drop-btn svg { width: 12px; height: 12px; }

/* ---- Login page (v2) — two-column pre-auth ---- */
#login-screen {
  position: fixed; inset: 0; z-index: 200;
  display: grid;
  grid-template-columns: 42fr 58fr;
  background: var(--paper);
  font-family: 'Poppins', sans-serif;
  color: var(--ink);
}

.login-brand {
  position: relative;
  background: var(--panel-bg);
  border-right: 1px solid var(--line);
  padding: 40px 48px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}
.login-brand-mark { display: flex; align-items: center; gap: 10px; }
.login-brand-mark img { width: 28px; height: 28px; display: block; }
.login-brand-mark .name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.login-brand-mark .sub  { font-size: 11px; color: var(--ink-4); line-height: 1.2; }

.login-brand-hero {
  display: flex; flex-direction: column; justify-content: center;
  gap: 14px;
}
.login-brand-hero .overline { color: var(--ink-4); }
.login-brand-hero .wordmark {
  font-family: 'Cal Sans', 'Poppins', sans-serif;
  font-size: var(--fs-hero); line-height: 1; letter-spacing: -.02em;
  color: var(--ink); margin: 0;
}
.login-brand-hero .wordmark .accent { color: var(--brand-primary); }

.login-brand-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--ink-4);
  gap: 16px;
}
.login-brand-foot .status { display: inline-flex; align-items: center; gap: 8px; }
.login-brand-foot .status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(22,163,74,.14);
  flex-shrink: 0;
}
.login-brand-foot .status.neutral .dot {
  background: var(--ink-4); box-shadow: none;
}

.login-auth {
  position: relative;
  padding: 40px 56px 80px;
  display: flex; align-items: center; justify-content: center;
}
.login-auth-top {
  position: absolute; top: 40px; right: 56px;
  font-size: 12px; color: var(--ink-3);
}
.login-auth-top a { color: var(--brand-navy); text-decoration: none; font-weight: 500; }
.login-auth-top a:hover { text-decoration: underline; }
.login-auth-foot {
  position: absolute; bottom: 28px; left: 56px; right: 56px;
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 12px; color: var(--ink-3);
}
.login-auth-foot a { color: inherit; text-decoration: none; }
.login-auth-foot a:hover { color: var(--ink-3); }
.login-auth-foot .right { display: flex; gap: 14px; }
.login-auth-foot .ver { cursor: pointer; }
.login-auth-foot .ver:hover { color: var(--ink-3); }
/* v1.173.3: visible version chip beside the LucenteOne wordmark on the brand
   panel so users always know which build they're on, even on short viewports
   where the foot chip falls below the fold. v1.173.1 used white-on-translucent
   colors that were invisible against the light brand panel — this reskin
   contrasts properly. */
.login-brand-mark .ver-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(21, 162, 227, 0.10);
  border: 1px solid rgba(21, 162, 227, 0.30);
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-primary, #15a2e3);
  letter-spacing: 0.02em;
  vertical-align: 4px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.login-brand-mark .ver-chip:hover {
  background: rgba(21, 162, 227, 0.18);
  color: #103889;
}
/* v1.173.4: matching version chip in the in-app footer so users can confirm
   the current build at a glance after sign-in (was rendered in ink-4 11.5px
   and was effectively invisible). */
.ver-chip-inline {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(21, 162, 227, 0.10);
  border: 1px solid rgba(21, 162, 227, 0.28);
  color: var(--brand-primary, #15a2e3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.ver-chip-inline:hover {
  background: rgba(21, 162, 227, 0.18);
  color: #103889;
}

.login-auth-inner { width: 100%; max-width: 420px; }
.login-auth-inner h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px; font-weight: 700; color: var(--ink);
  margin: 0 0 6px; letter-spacing: -.005em;
}
.login-auth-inner .lead {
  font-size: 13px; color: var(--ink-3); margin: 0 0 24px; line-height: 1.5;
}

.login-sso-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.login-sso {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 44px;
  border: 1px solid var(--line); background: var(--paper);
  border-radius: var(--radius-button);
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  cursor: pointer;
  transition: border-color var(--motion), background var(--motion);
}
.login-sso:hover { border-color: var(--ink-3); background: var(--panel-bg); }
.login-sso:disabled { opacity: .6; cursor: not-allowed; }
.login-sso svg { flex-shrink: 0; }

.login-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 3px;
  text-transform: uppercase; color: var(--ink-4);
}
.login-or::before, .login-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.login-field-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 3px;
  text-transform: uppercase; color: var(--ink-4);
  display: block; margin-bottom: 8px;
}

.login-primary {
  width: 100%; height: 44px; margin-top: 14px;
  background: var(--brand-navy);
  border: 1px solid var(--brand-navy); color: #fff;
  border-radius: var(--radius-button);
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--motion), border-color var(--motion);
}
.login-primary:hover { background: #0b2a66; border-color: #0b2a66; }
.login-primary:disabled { opacity: .6; cursor: not-allowed; }
.login-primary svg { width: 14px; height: 14px; }

.login-pw-toggle { margin-top: 14px; text-align: center; }
.login-pw-toggle summary {
  list-style: none; cursor: pointer;
  font-size: 12px; color: var(--ink-3);
  padding: 4px; user-select: none;
  display: inline-block;
}
.login-pw-toggle summary::-webkit-details-marker { display: none; }
.login-pw-toggle summary:hover { color: var(--ink); text-decoration: underline; }
.login-pw-toggle[open] summary { color: var(--ink-2); margin-bottom: 12px; }
.login-pw-toggle .field-input { margin-bottom: 0; }
.login-pw-toggle .cf-turnstile { margin-top: 12px; }
#turnstile-widget { contain: layout style; }

/* QW-10: demote passwordless CTA when password mode is expanded */
#login-form:has(details.login-pw-toggle[open]) #magiclink-btn {
  background: var(--paper);
  color: var(--brand-navy);
  border-color: var(--border);
}
#login-form:has(details.login-pw-toggle[open]) #magiclink-btn:hover {
  background: var(--sky-wash, #f1f7fd);
  border-color: var(--border);
}

#login-err { color: var(--err); font-size: 12.5px; margin: 10px 0 0; }
#login-info:not(.hidden) { display: flex; }

@media (max-width: 900px) {
  /* v1.263 (A15): minmax(0,1fr) + min-width:0 clamp the stacked column to the
     viewport. A plain `1fr` track resolves to minmax(auto,1fr); its auto-minimum
     is the column's min-content (the unbreakable "LucenteOne" wordmark + padding),
     which inflates the track past narrow phones and clips the form off the right. */
  #login-screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login-brand { min-width: 0; min-height: auto; padding: 28px 32px; border-right: none; border-bottom: 1px solid var(--line); grid-template-rows: auto auto auto; }
  .login-brand-hero { gap: 10px; padding: 16px 0; }
  /* Stack the auth column vertically so the static "New to Lucente?" link sits
     above the sign-in card (top-right) instead of becoming a flex-row sibling
     wedged beside it. */
  .login-auth { min-width: 0; padding: 36px 28px 80px; flex-direction: column; }
  .login-auth-top { position: static; align-self: flex-end; text-align: right; margin: 0 0 20px; }
  .login-auth-foot { bottom: 20px; left: 28px; right: 28px; }
}
@media (max-width: 480px) {
  .login-brand { padding: 24px; }
  .login-auth { padding: 28px 24px 88px; }
  .login-auth-foot { left: 24px; right: 24px; flex-wrap: wrap; gap: 8px; font-size: 10.5px; }
}

/* ---- Customer portal home (v1.59 — spec §8) ---- */
.portal {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 80px;
  font-family: 'Poppins', sans-serif;
  color: var(--ink);
}
.portal-greet {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  margin-bottom: 32px;
}
.portal-greet .lead .overline { margin-bottom: 10px; }
.portal-greet h1 {
  font-family: 'Cal Sans', 'Poppins', sans-serif;
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}
.portal-greet h1 .sub { color: var(--ink-4); font-weight: 400; }
.portal-greet .meta {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.55;
  text-align: right;
  white-space: nowrap;
}
.portal-greet .meta b { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  .portal-greet { grid-template-columns: 1fr; }
  .portal-greet .meta { text-align: left; white-space: normal; }
}

.portal-section { margin-bottom: 36px; }
.portal-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.portal-section-head .bar {
  width: 3px; height: 14px;
  background: var(--brand-primary);
  border-radius: 2px;
  flex-shrink: 0;
}
.portal-section-head .h {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  text-transform: uppercase;
}
.portal-section-head .aside { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.portal-section-head .aside a {
  font-size: 12px; font-weight: 500; color: var(--ink-3);
  text-decoration: none;
}
.portal-section-head .aside a:hover { color: var(--brand-navy); }
.portal-section-head .chip {
  display: inline-flex; align-items: center;
  background: var(--sky-wash); color: var(--brand-navy);
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: var(--radius-pill);
}
/* v1.276: chip-as-button interactive filter toggle */
button.chip { border: none; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s; }
button.chip:hover { background: var(--brand-navy); color: var(--paper); }
button.chip.chip-active { background: var(--brand-navy); color: var(--paper); }

.portal-action-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .portal-action-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .portal-action-grid { grid-template-columns: 1fr; } }

.portal-tabs { padding: 14px 20px 0; }
.portal-tabs .tab-btn { padding: 10px 16px; font-size: 12.5px; }

.portal-proj-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 720px) { .portal-proj-grid { grid-template-columns: 1fr; } }
.portal-proj-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--motion), box-shadow var(--motion);
}
.portal-proj-card:hover { border-color: var(--ink-3); box-shadow: var(--shadow-paper); }
.portal-proj-card .name { font-size: 14px; font-weight: 600; color: var(--ink); }
.portal-proj-card .meta { font-size: 11.5px; color: var(--ink-3); display: flex; justify-content: space-between; }
.portal-proj-card .bar {
  height: 4px; background: var(--line-2); border-radius: 999px; overflow: hidden;
}
.portal-proj-card .bar > span {
  display: block; height: 100%; background: var(--brand-navy); border-radius: 999px;
}
.portal-proj-card .pct { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.portal-foot {
  border-top: 1px solid var(--line-2);
  padding: 20px 0 0;
  margin-top: 48px;
  font-size: 11.5px;
  color: var(--ink-4);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}
.portal-foot a { color: var(--ink-3); text-decoration: none; }
.portal-foot a:hover { color: var(--brand-navy); }

/* Draft-row styling in requests table */
.data-table tr.draft .subject { color: var(--ink-3); font-weight: 400; }
.data-table tr.draft .num     { color: var(--ink-4); font-style: italic; }
.data-table tr.draft .del-draft {
  background: none; border: none; font-size: 12px; font-weight: 500;
  color: var(--ink-4); cursor: pointer; padding: 2px 6px;
  visibility: hidden;
}
.data-table tr.draft:hover .del-draft { visibility: visible; }
.data-table tr.draft .del-draft:hover { color: var(--err); }

/* Success wash on new rows (§10.6) */
@keyframes row-success-fade {
  0%   { background: rgba(22,163,74,.12); }
  100% { background: transparent; }
}
.data-table tr.row-success td { animation: row-success-fade 6s ease-out; }

/* Action-card skeleton (exact-shape per §10.2) */
.portal-action-grid .card-action.is-skel { cursor: default; }
.portal-action-grid .card-action.is-skel:hover { transform: none; box-shadow: none; }
.card-action.is-skel .ico,
.card-action.is-skel .label,
.card-action.is-skel .desc,
.card-action.is-skel .arrow { visibility: hidden; }

/* Employee dash middle row collapse */
@media (max-width: 720px) {
  #dash-middle-row { grid-template-columns: 1fr !important; }
}

/* ---- Stat card (v1.60 — employee dashboard) ---- */
.stat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color var(--motion), box-shadow var(--motion);
}
.stat-card:hover { border-color: var(--ink-3); box-shadow: var(--shadow-paper); }
.stat-card .num {
  font-family: 'Cal Sans', 'Poppins', sans-serif;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
}
.stat-card .lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 4px;
}

/* Status bar (quotes by status) — quiet v2 refresh */
.status-bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: var(--line-2);
  margin-bottom: 12px;
}
.status-bar > span { display:block; height:100%; }
.status-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 12px; color: var(--ink-3);
  font-family: 'Poppins', sans-serif;
}
.status-legend .swatch {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px;
}
.status-legend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 4px; }

/* Activity list (quiet) */
.activity-list { font-family: 'Poppins', sans-serif; }
.activity-list .row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--ink-2);
}
.activity-list .row:last-child { border-bottom: none; }
.activity-list .row.linkish { cursor: pointer; transition: color var(--motion); }
.activity-list .row.linkish:hover { color: var(--ink); }
.activity-list .row .when { color: var(--ink-4); font-size: 11.5px; flex-shrink: 0; }

/* ---- Admin scoped shims (v1.63 Phase 8) — make legacy Tailwind patterns look v2 ---- */
#v-admin .bg-white.border.border-gray-200.rounded-xl {
  border-color: var(--line) !important;
  border-radius: var(--radius-card) !important;
}
#v-admin .bg-white.border.border-gray-200.rounded-xl.shadow-sm {
  box-shadow: var(--shadow-paper) !important;
}
/* Admin tables: upgrade column headers, row hover, borders */
#v-admin table thead tr {
  border-bottom: 1px solid var(--line-2) !important;
  background: var(--panel-bg);
}
#v-admin table thead th {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-4) !important;
}
#v-admin table tbody tr {
  border-bottom: 1px solid var(--line-2) !important;
  transition: background var(--motion);
}
#v-admin table tbody tr:hover { background: var(--sky-wash-soft) !important; }
#v-admin table tbody tr:last-child { border-bottom: none !important; }
#v-admin table tbody td { color: var(--ink-2); }

/* v1.182: .data-table inside .rmm-compact must escape the legacy admin shim
 * above. The shim's #v-admin ID specificity + !important on font-size locked
 * those values for every admin table — but .data-table manages its own
 * typography, so we re-claim it here with matching specificity + !important.
 * Why this kept biting: padding from .rmm-compact won (the shim doesn't set
 * padding), but font-size and letter-spacing kept the shim's values. */
#v-admin .rmm-compact .data-table thead th {
  font-size: 10px !important;
  letter-spacing: 1.5px;
}
#v-admin .rmm-compact .data-table tbody td {
  font-size: 12.5px;
}

/* .qi / .qs in admin — calmer border + Sky focus ring */
#v-admin .qi,
#v-admin .qs,
#v-admin input.qi,
#v-admin select.qs,
#v-admin textarea.qi {
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  transition: border-color var(--motion), box-shadow var(--motion);
}
#v-admin .qi:focus,
#v-admin .qs:focus,
#v-admin input.qi:focus,
#v-admin select.qs:focus,
#v-admin textarea.qi:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--sky-ring);
}

/* Admin buttons: soften the raw Tailwind bg-[#15a2e3] pattern */
#v-admin button.bg-\[\#15a2e3\],
#v-admin button.bg-sky-500 {
  background: var(--brand-navy) !important;
  color: #fff !important;
  border-radius: var(--radius-button) !important;
  font-weight: 600 !important;
}
#v-admin button.bg-\[\#15a2e3\]:hover,
#v-admin button.bg-sky-500:hover {
  background: #0d2e70 !important;
}

/* Admin-nav buttons on mobile */
@media (max-width: 640px) {
  .admin-nav { gap: 16px; }
  .admin-nav-group { flex: 1 1 100%; }
}

/* Config pages: tone down the nested bg-gray-50 "panel-in-panel" treatment */
#v-admin .bg-gray-50.rounded-lg.border.border-gray-200 {
  background: var(--panel-bg) !important;
  border-color: var(--line) !important;
  border-radius: var(--radius-input) !important;
}
#v-admin .bg-gray-50.rounded-lg.border.border-gray-200 .font-semibold.text-gray-700 {
  color: var(--ink) !important;
  font-family: 'Poppins', sans-serif;
}
/* "+ Add item" buttons misuse .section-heading — kill the prefixed bar there */
#v-admin button.section-heading::before { display: none; }
#v-admin button.section-heading {
  color: var(--brand-navy) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* Compact the support-request modal density (v1.66 — less scrolling) */
#support-request-modal .modal-v2-head { padding: 18px 24px 14px; }
#support-request-modal .modal-v2-body { padding: 14px 24px 18px; }
#support-request-modal .modal-v2-sub { font-size: 11.5px; line-height: 1.45; }

/* ---- Quote builder scoped polish (v1.64 Phase 5) ---- */
/* Upgrade only labels whose pattern matches the Tailwind overline combo used throughout the builder — preserves any custom labels. */
#v-builder label.block,
#v-saved label.block {
  color: var(--ink-4) !important;
  font-size: 10.5px !important;
  letter-spacing: 3px !important;
  font-weight: 600 !important;
}

/* Ensure section headings don't lose spacing from prepended bar */
#v-builder .section-heading { margin-bottom: 14px; }

/* Builder top-action button refresh: soften the loud box-shadow/scale */
#v-builder .qb-top-actions button { transform: none !important; box-shadow: none !important; }

/* Field overline label (reuse .overline above a field) */
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-4);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 6px;
}
.field-label .req { color: var(--err); margin-left: 2px; }

/* SF-2: brand-wide content-width bump so 1920 viewports breathe instead of stranding gutters.
   Scoped to the employee app shell (#app) — login, portal, proposal views keep their narrower caps. */
#app .max-w-7xl { max-width: min(1680px, 100% - 96px); }
#app .max-w-6xl { max-width: min(1440px, 100% - 96px); }