/* ============================================================
   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;
  --brand-gradient:    linear-gradient(135deg, #103889, #15a2e3);

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

  /* Text */
  --text-primary:      #111827;
  --text-secondary:    #374151;
  --text-tertiary:     #6b7280;
  --text-faint:        #9ca3af;

  /* Borders */
  --border-default:    #e5e7eb;
  --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)
   ------------------------------------------------------------ */

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-navy) 50%, var(--brand-primary) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gshift 8s ease infinite;
}
@keyframes gshift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Glass panel */
.glass {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(21,162,227,0.1);
}

/* Cyber grid background */
.cyber-grid {
  background-image:
    linear-gradient(rgba(21,162,227,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,162,227,0.04) 1px, transparent 1px);
  background-size: 100px 100px;
}

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

/* Section card (.sc) — v1.64 quieted to v2 tokens */
.sc {
  background: #ffffff;
  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: #ffffff;
  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: #ffffff;
  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: #ffffff;
  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: white;
  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: white;
  border: 1px solid #e2e8f0;
  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.168 — per-section accents for nav buttons.
   Five groups: personal (Dashboard / My Tasks), quotes, contracts, ops, admin.
   Each group reuses the v2 token system: a strong colour for ink, a wash for
   active background, and a soft wash for hover. Colours are picked from the
   existing v2 status palette (--ok, --warn, --err) plus brand sky / a violet
   for ops; we add the violet + amber + rose tokens below since they don't
   exist in DS v2 yet. Quietly tinted so the nav still reads as a single bar,
   not a rainbow. */
:root {
  --violet:        #7c3aed;
  --violet-strong: #5b21b6;
  --violet-wash:   rgba(124,58,237,.10);
  --violet-soft:   rgba(124,58,237,.04);
  --amber:         #d97706;
  --amber-strong:  #92400e;
  --amber-wash:    rgba(217,119,6,.10);
  --amber-soft:    rgba(217,119,6,.04);
  --rose:          #e11d48;
  --rose-strong:   #9f1239;
  --rose-wash:     rgba(225,29,72,.10);
  --rose-soft:     rgba(225,29,72,.04);
  --ok-wash:       rgba(22,163,74,.10);
  --ok-soft:       rgba(22,163,74,.04);
}
/* personal (Dashboard, My Tasks) — sky / brand */
.tb[data-section="personal"]  { --tb-accent: var(--brand-primary); --tb-accent-strong: var(--brand-navy);   --tb-accent-wash: var(--sky-wash);   --tb-accent-soft: var(--sky-wash-soft); }
/* quotes — emerald / ok */
.tb[data-section="quotes"]    { --tb-accent: var(--ok);            --tb-accent-strong: var(--ok-strong);    --tb-accent-wash: var(--ok-wash);    --tb-accent-soft: var(--ok-soft); }
/* contracts — amber */
.tb[data-section="contracts"] { --tb-accent: var(--amber);         --tb-accent-strong: var(--amber-strong); --tb-accent-wash: var(--amber-wash); --tb-accent-soft: var(--amber-soft); }
/* operations — violet */
.tb[data-section="ops"]       { --tb-accent: var(--violet);        --tb-accent-strong: var(--violet-strong);--tb-accent-wash: var(--violet-wash);--tb-accent-soft: var(--violet-soft); }
/* admin — rose */
.tb[data-section="admin"]     { --tb-accent: var(--rose);          --tb-accent-strong: var(--rose-strong);  --tb-accent-wash: var(--rose-wash);  --tb-accent-soft: var(--rose-soft); }

/* Hamburger menu items — same accent system on hover */
[data-section]:not(.tb):hover { background: var(--tb-accent-soft, rgba(91,98,112,.06)); }
[data-section="personal"]:not(.tb)  { --tb-accent-soft: var(--sky-wash-soft); }
[data-section="quotes"]:not(.tb)    { --tb-accent-soft: var(--ok-soft); }
[data-section="contracts"]:not(.tb) { --tb-accent-soft: var(--amber-soft); }
[data-section="ops"]:not(.tb)       { --tb-accent-soft: var(--violet-soft); }
[data-section="admin"]:not(.tb)     { --tb-accent-soft: var(--rose-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; }

/* 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: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink);
}

/* Buttons — primary */
.btn-primary {
  background: var(--brand-gradient);
  color: white;
  border: none;
  border-radius: 7px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* 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: #ffffff;
  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: #fff;
  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:#9ca3af; }
.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: #9ca3af;
  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: #fff;
  border: 1px solid #e5e7eb;
  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: #111827; }
.addr-ac-secondary { color: #6b7280; font-size: 12px; }
.addr-ac-empty { padding: 10px 12px; color: #9ca3af; 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: #374151; 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: #fff;
  color: #111827;
  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: #6b7280; 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: #111827; margin-bottom: 10px; }
.form-check           { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: #374151; }
.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 #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  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)); }
}

/* ── Multi-select dropdown (v1.54) ─────────────────────────────── */
.msd-host{position:relative;display:inline-block;}
.msd-btn{
  border:1px solid #d1d5db;background:#fff;border-radius:8px;
  padding:6px 28px 6px 10px;font-size:13px;color:#374151;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:#9ca3af;font-size:11px;pointer-events:none;
}
.msd-btn:hover{border-color:#9ca3af;}
.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:#fff;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 #e5e7eb;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:#374151;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 #e5e7eb;margin-bottom:4px;padding-bottom:6px;font-weight:600;color:#111827;}
.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;
}
/* Each section gets a subtle background wash and a label in the matching tone */
.hdr-menu-platform  { background: var(--panel-bg); }
.hdr-menu-platform  .hdr-menu-label { color: var(--ink-3); }
.hdr-menu-quoting   { background: var(--sky-wash-soft); }
.hdr-menu-quoting   .hdr-menu-label { color: var(--brand-navy); }
.hdr-menu-customers { background: rgba(22,163,74,.04); }
.hdr-menu-customers .hdr-menu-label { color: var(--ok-strong); }
.hdr-menu-platform  button,
.hdr-menu-quoting   button,
.hdr-menu-customers button { background: transparent; color: var(--ink-2); }
.hdr-menu-platform  button:hover { background: rgba(91,98,112,.08); color: var(--ink); }
.hdr-menu-quoting   button:hover { background: var(--sky-wash); color: var(--brand-navy); }
.hdr-menu-customers button:hover { background: rgba(22,163,74,.10); color: var(--ok-strong); }

/* 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;

  /* 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;
}

/* ---- v2 tokens: shape, depth, motion ---- */
:root {
  /* 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;
}

/* ---- 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: #fff; 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: #fff;
  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: #fff;
  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: #fff;
  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: #fff;
  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: #fff;
  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: #fff;
  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-2, #f6f7f9); 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: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-paper);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  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: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: #fff;
  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 24px 24px;
  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: #fff; color: var(--ink); }
.modal-v2-card {
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 84px);
  background: #fff;
  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: #fff;
  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: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.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; }

/* ---- .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: #fafbfc;
  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: #fff;
  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: 20px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 10000;
  pointer-events: none;
}
.toast-v2 {
  pointer-events: auto;
  background: #fff;
  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;
}

/* ---- .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: #fafbfc;
  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: #fff;
  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: #fff;
  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: 100vh;
}
.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: 64px; 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: #fff;
  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: #fff;
  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) {
  #login-screen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-brand { 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; }
  .login-brand-hero .wordmark { font-size: 40px; }
  .login-auth { padding: 36px 28px 80px; }
  .login-auth-top { position: static; text-align: right; margin-bottom: 20px; }
  .login-auth-foot { bottom: 20px; left: 28px; right: 28px; }
}
@media (max-width: 480px) {
  .login-brand { padding: 24px; }
  .login-brand-hero .wordmark { font-size: 32px; }
  .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: 40px;
  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-greet h1 { font-size: 30px; }
}

.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);
}

.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: #fff;
  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: #fff;
  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: #fafbfc;
}
#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: #fff;
  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); }