/* ============================================================================
   DDHD Dashboard — Light Theme  (Stitch "Defense & Intelligence System" reskin)

   Cosmetic-only refresh. Re-skins existing markup to the Stitch design system
   exported from stitch.googleapis.com (DESIGN.md). NO logic changes. NO
   id/event-handler/structural HTML changes. Loaded AFTER brand-vars.css and
   theme.css and per-page inline <style> blocks. !important is used wherever
   page-level inline styles would otherwise win the cascade.

   Token convention (kept stable so other files referencing these still work):
     --ddhd-bg-page        page background (Stitch surface)
     --ddhd-bg-card        elevated card surface (pure white)
     --ddhd-bg-subtle      faint container / input fill
     --ddhd-bg-muted       container / header strip / hover fill
     --ddhd-text           on-surface (near-black)
     --ddhd-text-muted     on-surface-variant (warm slate)
     --ddhd-text-faint     outline (warm gray) — labels, captions
     --ddhd-border         outline-variant (warm) — only used where unavoidable
     --ddhd-border-faint   barely-visible divider
     --ddhd-shadow-sm      Stitch Level 2: ambient card lift
     --ddhd-shadow-md      Stitch Level 3: hover / popover lift
     --ddhd-shadow-lg      modal lift
     --ddhd-accent         gold (primary action color)
     --ddhd-accent-strong  deep gold for hovered primary CTAs
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,-25..200&display=swap');

:root {
  /* Stitch surface palette — warm off-white background, pure-white elevation. */
  --ddhd-bg-page:        #f9f9fb;
  --ddhd-bg-card:        #ffffff;
  --ddhd-bg-subtle:      #f3f3f5;
  --ddhd-bg-muted:       #edeef0;

  /* On-surface text. Stitch ladder: on-surface → on-surface-variant → outline. */
  --ddhd-text:           #1a1c1d;
  --ddhd-text-muted:     #4d4637;
  --ddhd-text-faint:     #7e7665;

  /* Borders are intentionally rare in Stitch (depth via shadow). The values
     below are only consumed by elements that still need a hairline divider
     (tables, form inputs in unfocused state, etc.) — cards omit them entirely. */
  --ddhd-border:         #d0c5b2;   /* outline-variant */
  --ddhd-border-faint:   #e2e2e4;   /* surface-container-highest */

  /* Ambient shadow stack per Stitch elevation spec. */
  --ddhd-shadow-sm:      0 4px 20px rgba(0, 0, 0, 0.04);
  --ddhd-shadow-md:      0 10px 40px rgba(0, 0, 0, 0.08);
  --ddhd-shadow-lg:      0 24px 60px rgba(0, 0, 0, 0.12);

  /* Gold accent: primary-container in the Stitch token set (#c9a84c). */
  --ddhd-accent:         #c9a84c;
  --ddhd-accent-strong:  #b89636;
  --ddhd-accent-soft:    rgba(201, 168, 76, 0.18);

  /* Functional blue, used sparingly for links / informative sub-text. */
  --ddhd-link:           #005cbb;

  /* ── Stitch primary core + on-primary + error (Phase 1 additions) ─────── */
  /* Existing --ddhd-accent (#c9a84c) maps to Stitch primary-container (brand
     gold for CTAs). This triplet completes the primary-text pair and
     standardizes one error tone, replacing scattered ad-hoc reds. */
  --ddhd-primary:        #755b00;
  --ddhd-on-primary:     #ffffff;
  --ddhd-error:          #ba1a1a;

  /* ── Status-pill category palette (Stitch category-tinted system) ─────── */
  /* Low-saturation tints + high-contrast text per Stitch DESIGN.md.
     Pending = secondary-fixed slate (Stitch "Standby"), Sent = tertiary-fixed
     blue (Stitch "Active"), Success/Paid = muted forest green (DDHD
     extension; Stitch palette omits green), Rejected = error-container,
     Invoiced = primary-fixed gold-tint (Stitch "Deployed"), Info = indigo. */
  --ddhd-pill-pending-bg:    #dae2fd;
  --ddhd-pill-pending-fg:    #3f465c;
  --ddhd-pill-sent-bg:       #d7e2ff;
  --ddhd-pill-sent-fg:       #00458f;
  --ddhd-pill-success-bg:    #d5ead8;
  --ddhd-pill-success-fg:    #0f5132;
  --ddhd-pill-paid-bg:       #cbe6d3;
  --ddhd-pill-paid-fg:       #0f5132;
  --ddhd-pill-rejected-bg:   #ffdad6;
  --ddhd-pill-rejected-fg:   #93000a;
  --ddhd-pill-invoiced-bg:   #f5e8c4;
  --ddhd-pill-invoiced-fg:   #584400;
  --ddhd-pill-info-bg:       #dfe2fd;
  --ddhd-pill-info-fg:       #2e3c8a;

  /* ── Layout & spacing scale (Stitch breathable grid) ──────────────────── */
  /* Not consumed by existing rules; Phase 2+ wires page-margin clamp, card
     padding, and vertical rhythm. */
  --ddhd-page-margin:    clamp(2rem, 8vw, 12rem);
  --ddhd-section-gap:    clamp(4rem, 10vh, 8rem);
  --ddhd-card-padding:   2rem;
  --ddhd-gutter:         1.5rem;
  --ddhd-stack-md:       1rem;
  --ddhd-stack-sm:       0.5rem;

  /* ── Typography scale (Stitch standard, axis-split) ───────────────────── */
  /* Each level exports size/weight/lh/ls separately so any one axis can be
     overridden in a component rule. Inter is the family root (set on
     html/body). Not consumed by existing rules; Phase 2+ swaps hardcoded
     font-size/weight inside component selectors to these vars. */
  --ddhd-text-display-lg-size: 56px;
  --ddhd-text-display-lg-weight: 700;
  --ddhd-text-display-lg-lh: 1.1;
  --ddhd-text-display-lg-ls: -0.02em;

  --ddhd-text-headline-lg-size: 40px;
  --ddhd-text-headline-lg-weight: 600;
  --ddhd-text-headline-lg-lh: 1.2;
  --ddhd-text-headline-lg-ls: -0.01em;

  --ddhd-text-headline-lg-mobile-size: 32px;
  --ddhd-text-headline-lg-mobile-weight: 600;
  --ddhd-text-headline-lg-mobile-lh: 1.2;
  --ddhd-text-headline-lg-mobile-ls: 0;

  --ddhd-text-headline-md-size: 24px;
  --ddhd-text-headline-md-weight: 600;
  --ddhd-text-headline-md-lh: 1.3;
  --ddhd-text-headline-md-ls: 0;

  --ddhd-text-body-lg-size: 19px;
  --ddhd-text-body-lg-weight: 400;
  --ddhd-text-body-lg-lh: 1.5;
  --ddhd-text-body-lg-ls: 0;

  --ddhd-text-body-md-size: 16px;
  --ddhd-text-body-md-weight: 400;
  --ddhd-text-body-md-lh: 1.5;
  --ddhd-text-body-md-ls: 0;

  --ddhd-text-label-md-size: 14px;
  --ddhd-text-label-md-weight: 600;
  --ddhd-text-label-md-lh: 1.2;
  --ddhd-text-label-md-ls: 0.02em;

  --ddhd-text-label-sm-size: 12px;
  --ddhd-text-label-sm-weight: 500;
  --ddhd-text-label-sm-lh: 1.2;
  --ddhd-text-label-sm-ls: 0;
}

/* ── Typography (system-wide) ───────────────────────────────────────────── */

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  background: var(--ddhd-bg-page);
  color: var(--ddhd-text);
}

/* Override per-page inline body bg so every screen lands on Stitch surface. */
html { background: var(--ddhd-bg-page) !important; }
body { background: var(--ddhd-bg-page) !important; color: var(--ddhd-text) !important; }

/* Headings — Inter throughout, tight tracking per Stitch headline rules. */
h1, h2, h3, h4, h5, h6,
.kpi-value, .nav-logo, .modal-title, .page-header h1,
.phase-block h4, .sp-stat-val, .lead-count, .funnel-count,
.chart-card h3, .phase-panel h3 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -0.015em;
}

/* Stitch label-md / label-sm tracking on small-cap labels. */
.kpi-label, .form-label, .quote-table th, table th,
.chart-card h3, .phase-panel h3 {
  letter-spacing: 0.02em !important;
}

/* ── Material Symbols base (Stitch icon system, opt-in for Phase 2+) ────── */
/* Pages render icons via <span class="material-symbols-outlined">name</span>.
   No element in the dashboard uses this class yet in Phase 1 — the rule and
   font load are staged for Phase 2. */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ── Nav: semi-transparent white + backdrop-blur (Stitch signature) ─────── */

nav,
header,
.header,
.dashboard-header {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
          backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(208, 197, 178, 0.35) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02) !important;
  color: var(--ddhd-text);
}

nav .nav-logo,
header .company-name,
.company-name {
  color: var(--ddhd-text) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.header-sub,
nav .nav-link,
.nav-link {
  color: var(--ddhd-text-muted) !important;
  font-weight: 500;
}

/* Active nav: filled near-black with white text, gold underline accent. */
nav .nav-link.active,
.nav-link.active,
.nav-btn.active {
  color: #ffffff !important;
  background: var(--ddhd-text) !important;
  border-color: var(--ddhd-text) !important;
  box-shadow: inset 0 -2px 0 0 var(--ddhd-accent);
}

.nav-btn,
header .nav-btn {
  color: var(--ddhd-text) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  font-weight: 500;
}

.nav-btn:hover:not(.active),
.nav-link:hover:not(.active) {
  background: var(--ddhd-bg-muted) !important;
  color: var(--ddhd-text) !important;
  border-color: transparent !important;
}

/* ── Cards / panels — no borders, ambient shadow only (Stitch Level 2) ──── */

.kpi-card,
.chart-card,
.phase-panel,
.toolbar,
.card,
.quad,
.quad-panel,
.stat-card,
.stat-item,
.panel,
.section-card {
  background: var(--ddhd-bg-card) !important;
  border: none !important;
  box-shadow: var(--ddhd-shadow-sm) !important;
  border-radius: 12px !important;
}

/* Modals get a deeper soft round than cards. */
.modal-box {
  background: var(--ddhd-bg-card) !important;
  border: none !important;
  border-radius: 20px !important;
}

/* Generous internal padding per Stitch card rules (min 32px desktop). */
.kpi-card,
.chart-card,
.phase-panel,
.toolbar,
.quad-panel,
.section-card,
.panel {
  padding: 24px !important;
}

/* Subtle hover lift on interactive cards — Stitch Level 3. */
.kpi-card:hover,
.quad-item:hover,
.stat-card:hover,
.sp-card:hover {
  box-shadow: var(--ddhd-shadow-md) !important;
}

.modal-box {
  box-shadow: var(--ddhd-shadow-lg) !important;
  border: none !important;
}

.modal-overlay {
  background: rgba(26, 28, 29, 0.42) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── KPI values ─────────────────────────────────────────────────────────── */

.kpi-value,
.kpi-val,
.stat-val,
.val {
  color: var(--ddhd-text) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.kpi-label,
.kpi-sub,
.kpi-delta,
.stat-lbl,
.stat-sub,
.lbl {
  color: var(--ddhd-text-muted) !important;
  font-weight: 600;
}

/* ── Tables — whitespace separation, hover bg-shift, no divider lines ───── */

table,
.quote-table,
.parts-table,
.edit-parts-table {
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0;
}

table th,
.quote-table th,
.parts-table th,
.edit-parts-table th {
  background: transparent !important;
  color: var(--ddhd-text-faint) !important;
  border-bottom: 1px solid var(--ddhd-border-faint) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  padding-top: 14px !important;
  padding-bottom: 12px !important;
}

table td,
.quote-table td,
.parts-table td,
.edit-parts-table td {
  border-bottom: none !important;
  color: var(--ddhd-text) !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Subtle zebra striping so rows are still scannable without dividers. */
table tbody tr:nth-child(even) td,
.quote-table tbody tr:nth-child(even) td {
  background: var(--ddhd-bg-subtle);
}

table tr:hover td,
.quote-table tr:hover td {
  background: var(--ddhd-bg-muted) !important;
}

/* ── Status pills — fully pill-shaped, low-saturation tints ─────────────── */

.status-pill,
.qi-status,
.pill,
.badge,
.status-badge,
.src-inv,
.src-broker,
.qi-order-created {
  border-radius: 9999px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none !important;
  padding: 4px 11px !important;
  font-size: 11px;
}

.qi-s-pending,  .pill-pending, .badge-amber, .badge-pending,
.s-new, .s-sourcing, .s-ordered                          { background: var(--ddhd-pill-pending-bg) !important;  color: var(--ddhd-pill-pending-fg) !important; }
.qi-s-sent,     .qi-s-new,     .pill-sent,    .badge-blue, .badge-sent,
.s-shipped, .s-delivered                                 { background: var(--ddhd-pill-sent-bg) !important;     color: var(--ddhd-pill-sent-fg) !important; }
.qi-s-shipped,  .pill-success, .badge-green              { background: var(--ddhd-pill-success-bg) !important;  color: var(--ddhd-pill-success-fg) !important; }
.qi-s-paid,     .pill-won,     .s-paid, .s-invoiced      { background: var(--ddhd-pill-paid-bg) !important;     color: var(--ddhd-pill-paid-fg) !important; }
.qi-s-accepted, .badge-accepted                          { background: var(--ddhd-pill-success-bg) !important;  color: var(--ddhd-pill-success-fg) !important; }
.qi-s-rejected, .pill-lost,    .badge-red, .badge-rejected,
.badge-noresponse, .badge-expired                        { background: var(--ddhd-pill-rejected-bg) !important; color: var(--ddhd-pill-rejected-fg) !important; }
.qi-s-invoiced                                           { background: var(--ddhd-pill-invoiced-bg) !important; color: var(--ddhd-pill-invoiced-fg) !important; }
.pill-info                                               { background: var(--ddhd-pill-info-bg) !important;     color: var(--ddhd-pill-info-fg) !important; }
.pill-muted, .badge-muted                                { background: var(--ddhd-bg-muted) !important;         color: var(--ddhd-text-muted) !important; }

.src-inv                                                 { background: var(--ddhd-pill-success-bg) !important;  color: var(--ddhd-pill-success-fg) !important; }
.src-broker                                              { background: var(--ddhd-pill-sent-bg) !important;     color: var(--ddhd-pill-sent-fg) !important; }
.qi-order-created                                        { background: var(--ddhd-pill-success-bg) !important;  color: var(--ddhd-pill-success-fg) !important; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn,
.qi-act-btn,
button.btn-save,
button.btn-approve,
button.btn-reject,
.export-btn,
.new-quote-btn {
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* Primary CTA = gold per Stitch ("high-priority calls to action and critical
   focus states"). Subtle top-light inner shadow to feel tactile. Fully
   rounded pill to emphasize its priority over secondary actions. */
.btn-primary {
  background: var(--ddhd-accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--ddhd-accent) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(133, 100, 0, 0.18) !important;
}

.btn-primary:hover {
  background: var(--ddhd-accent-strong) !important;
  border-color: var(--ddhd-accent-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 4px 12px rgba(133, 100, 0, 0.22) !important;
}

/* Secondary = ghost (slate text, no background) per Stitch button rules. */
.btn-secondary,
.qi-act-btn:not(.qi-act-edit):not([style*="background"]) {
  background: transparent !important;
  color: var(--ddhd-text) !important;
  border: 1px solid var(--ddhd-border) !important;
}

.btn-secondary:hover {
  background: var(--ddhd-bg-subtle) !important;
  border-color: var(--ddhd-text-faint) !important;
}

.btn-success {
  background: #dcfce7 !important;
  color: #14532d !important;
  border: 1px solid transparent !important;
}
.btn-success:hover { background: #bbf7d0 !important; }

.btn-danger {
  background: transparent !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}
.btn-danger:hover { background: #fef2f2 !important; }

.btn-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid transparent !important;
}
.btn-warning:hover { background: #fde68a !important; }

/* ── Forms — borderless soft-gray, gold glow on focus ──────────────────── */

.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea {
  background: var(--ddhd-bg-subtle) !important;
  color: var(--ddhd-text) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  background: var(--ddhd-bg-card) !important;
  border-color: var(--ddhd-accent) !important;
  box-shadow: 0 0 0 3px var(--ddhd-accent-soft) !important;
}

::placeholder { color: var(--ddhd-text-faint) !important; opacity: 1; }

/* ── Banners ────────────────────────────────────────────────────────────── */

.banner,
.toast,
.timer-banner {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: var(--ddhd-shadow-sm);
}

.banner-amber, .timer-banner { background: #fffbeb !important; color: #92400e !important; }
.banner-blue                  { background: #eff6ff !important; color: #1d4ed8 !important; }
.banner-red                   { background: #fef2f2 !important; color: #991b1b !important; }
.banner-green                 { background: #f0fdf4 !important; color: #15803d !important; }

/* ── Empty states ───────────────────────────────────────────────────────── */

.empty-state,
.quad-empty {
  color: var(--ddhd-text-muted) !important;
}

.empty-state-icon,
.quad-empty-icon {
  opacity: 0.35;
}

/* ── Scrollbar — subtle ─────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ddhd-border-faint); border-radius: 9999px; border: 2px solid var(--ddhd-bg-page); }
::-webkit-scrollbar-thumb:hover { background: var(--ddhd-border); }

/* ── Funnel + lead bars (analytics page) ────────────────────────────────── */

.funnel-bar-wrap,
.lead-bar-wrap {
  background: var(--ddhd-bg-subtle) !important;
  border-radius: 9999px !important;
}

.funnel-bar, .lead-bar { border-radius: 9999px !important; }

.funnel-label,
.lead-name,
.lead-pct {
  color: var(--ddhd-text-muted) !important;
}

/* ── Salesperson cards ──────────────────────────────────────────────────── */

.sp-card {
  background: var(--ddhd-bg-card) !important;
  border: none !important;
  box-shadow: var(--ddhd-shadow-sm);
}

.sp-avatar {
  background: var(--ddhd-accent-soft) !important;
  color: var(--ddhd-accent-strong) !important;
}

/* ── Page header strip (theme.css .page-header) ─────────────────────────── */

.page-header {
  border-bottom: 1px solid var(--ddhd-border-faint) !important;
  background: var(--ddhd-bg-page);
}

.page-header h1 {
  color: var(--ddhd-text) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-header p {
  color: var(--ddhd-text-muted) !important;
}

/* ── Mailbox selector ───────────────────────────────────────────────────── */

#mailbox-selector,
#mailbox-selector-mount select {
  background: var(--ddhd-bg-subtle) !important;
  color: var(--ddhd-text) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500;
}

#mailbox-selector-mount span {
  color: var(--ddhd-text-muted) !important;
}

/* ── Quote-row inline metadata ──────────────────────────────────────────── */

.qi-id      { color: var(--ddhd-text) !important; font-weight: 700; }
.qi-name    { color: var(--ddhd-text) !important; }
.qi-detail  { color: var(--ddhd-text-muted) !important; }
.qi-amount  { color: var(--ddhd-text) !important; font-weight: 700; }

/* "Edit" qi-act-btn — keep gold accent, refined to Stitch palette. */
.qi-act-edit {
  background: var(--ddhd-accent-soft) !important;
  color: var(--ddhd-accent-strong) !important;
  border: 1px solid transparent !important;
}
.qi-act-edit:hover {
  background: var(--ddhd-accent) !important;
  color: #ffffff !important;
}

/* ── Legacy navy accents → muted warm slate ─────────────────────────────── */

.header-sub,
[style*="#4a6a9a"],
[style*="#6b8ab8"] {
  color: var(--ddhd-text-muted) !important;
}

/* Functional blue for inline informative links. */
a:not(.btn):not(.nav-link):not(.nav-btn):not(.qi-act-btn) {
  color: var(--ddhd-link);
}
a:not(.btn):not(.nav-link):not(.nav-btn):not(.qi-act-btn):hover {
  color: var(--ddhd-text);
}

/* ── Login page polish ──────────────────────────────────────────────────── */

body.login-body, .login-container {
  background: var(--ddhd-bg-page) !important;
}
.login-card {
  background: var(--ddhd-bg-card) !important;
  border: none !important;
  box-shadow: var(--ddhd-shadow-md);
  border-radius: 16px !important;
}

/* ── Per-page hard-coded surfaces (defeated by attribute selector) ──────── */
/* Pages with inline <style> blocks pin html/body to #eef2f6. Force them to
   the Stitch surface so the reskin is consistent without touching markup. */

[style*="#eef2f6"]:where(html, body, .container) {
  background: var(--ddhd-bg-page) !important;
}

/* ============================================================================
   .ds-* utility layer (Stitch components, opt-in for Phase 2+)
   ============================================================================ */

/* KPI tile underline accent — 32px × 4px gold bar inside each KPI card.
   Phase 2 markup adds <div class="ds-kpi-bar"></div> as the last child of
   each KPI tile. */
.ds-kpi-bar {
  width: 32px;
  height: 4px;
  background: var(--ddhd-accent);
  border-radius: 9999px;
  margin-top: 8px;
}

/* Glass header — sticky top, semi-transparent + backdrop-blur. Wraps the
   existing <nav> plus the mailbox-selector div in a single sticky element.
   Inside, items lay out as a flex row (nav on left, mailbox right-aligned
   via .ds-glass-mailbox margin-left auto) and flex-wrap to two lines on
   narrow viewports. */
.ds-glass-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  height: auto;
  padding: 0 var(--ddhd-page-margin, clamp(2rem, 8vw, 12rem));
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
          backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--ddhd-border-faint, #e2e2e4);
  border-radius: 0;
  box-shadow: none;
}

/* Mailbox selector slot inside the glass header — right-aligned, transparent,
   inherits the header's backdrop blur. */
.ds-glass-mailbox {
  margin-left: auto;
  padding: 6px 0;
  flex: 0 0 auto;
  background: transparent;
}

/* Home page content shell — applies Stitch page-margin clamp around the
   KPI strip + 8 quad panels. Sits between glass header and out-of-scope
   sections (Bid Tracker, RFQ table, modal triggers). */
.ds-home-shell {
  display: block;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--ddhd-stack-md, 1rem) var(--ddhd-page-margin, clamp(2rem, 8vw, 12rem))
           var(--ddhd-section-gap, 3rem);
}

/* ============================================================================
   Phase 3 — list-pages utilities (quotes / orders / customers / inventory /
   rfq-log). Stitch 02-asset-intelligence-list pattern: white rounded card
   wrapping a table, no inner divider lines, subtle row hover, generous
   cell padding. Shared across all 5 list pages.
   ============================================================================ */

/* Table card wrapper. Page markup: <div class="ds-list-card"><table>...</table></div>
   (or wrap an existing .table-wrap / #tableMount inside). */
.ds-list-card {
  background: var(--ddhd-bg-card, #ffffff);
  border: none !important;
  border-radius: 12px !important;
  box-shadow: var(--ddhd-shadow-sm, 0 4px 20px rgba(0,0,0,0.04)) !important;
  overflow: hidden;
  margin-bottom: 2rem;
}

.ds-list-card table,
.ds-list-card .table-wrap table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent !important;
}

.ds-list-card thead th {
  text-align: left;
  padding: 16px 24px !important;
  background: transparent !important;
  color: var(--ddhd-text-faint, #7e7665) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ddhd-border-faint, #e2e2e4) !important;
  white-space: nowrap;
}

.ds-list-card tbody td {
  padding: 16px 24px !important;
  background: transparent !important;
  color: var(--ddhd-text, #1a1c1d) !important;
  border-bottom: none !important;
  font-size: 13px;
  line-height: 1.5;
  vertical-align: middle;
}

.ds-list-card tbody tr {
  transition: background 0.15s ease;
}

.ds-list-card tbody tr:hover td,
.ds-list-card tbody tr:hover {
  background: var(--ddhd-bg-subtle, #f3f3f5) !important;
}

.ds-list-card tbody tr:last-child td {
  border-bottom: none !important;
}

/* ── Shared empty-state pattern ─────────────────────────────────────────── */
/* Covers both the new .ds-empty-state class AND the legacy .empty-state
   markup that already lives in quotes/orders/customers/inventory/rfq-log.
   Children use a variety of class names (.empty-icon vs .empty-state-icon,
   .empty-title vs .empty-state-title, .empty-sub vs .empty-state-body) —
   all covered below so existing JS templates render the new look without
   touching them. */
.ds-empty-state,
.empty-state {
  text-align: center;
  padding: 48px 24px !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
}

.ds-empty-state .ds-empty-icon,
.empty-state .empty-icon,
.empty-state .empty-state-icon,
.ds-empty-state .empty-icon,
.ds-empty-state .empty-state-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.4;
  display: block;
}

.ds-empty-state .ds-empty-title,
.empty-state .empty-title,
.empty-state .empty-state-title,
.ds-empty-state .empty-title,
.ds-empty-state .empty-state-title {
  font-size: var(--ddhd-text-body-lg-size, 19px);
  font-weight: 600;
  color: var(--ddhd-text, #1a1c1d);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.ds-empty-state .ds-empty-body,
.empty-state .empty-sub,
.empty-state .empty-body,
.empty-state .empty-state-sub,
.empty-state .empty-state-body,
.ds-empty-state .empty-sub,
.ds-empty-state .empty-body,
.ds-empty-state .empty-state-sub,
.ds-empty-state .empty-state-body {
  font-size: 13px;
  color: var(--ddhd-text-muted, #4d4637);
  line-height: 1.5;
}

/* ============================================================================
   Phase 4 — modals + customer-flow forms
   Stitch 03 (admin modal) + 04 (acceptance portal) + 05 (credit application)
   reference patterns. Phase 4a wires the customer-facing surfaces in
   approve-quote.html (payment-terms picker, credit application form, CC
   payment form). Phase 4b will consume the .ds-modal-* utilities for
   admin modals across index.html / orders.html / quotes.html.

   The approve-quote.html JS templates inject their own <style> blocks at
   render time — those styles load AFTER this file in source order. Every
   rule below that needs to win the cascade uses !important. Existing
   class names (.pt-card, .ca-section, .ca-fld, .ca-term-pill, .cc-fld,
   .ca-submit-btn, .pt-confirm-btn, .cc-submit-btn, .cage-fld, .ca-back-link,
   .ca-error, .cc-banner) are styled alongside the new .ds-* utility names
   so existing JS templates render the new look with zero JS file changes.
   ============================================================================ */

/* ── Modal overlay + container (.ds-modal-*, for Phase 4b) ───────────────── */

.ds-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(26, 28, 29, 0.4);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.ds-modal-card {
  background: var(--ddhd-bg-card, #ffffff);
  border-radius: 12px;
  box-shadow: var(--ddhd-shadow-lg, 0 24px 60px rgba(0, 0, 0, 0.12));
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ds-modal-card-sm { max-width: 480px; }
.ds-modal-card-md { max-width: 720px; }
.ds-modal-card-lg { max-width: 920px; }
.ds-modal-card-xl { max-width: 1000px; }

.ds-modal-header {
  padding: 20px 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--ddhd-border-faint, #e2e2e4);
  flex-shrink: 0;
}

.ds-modal-title {
  font-size: var(--ddhd-text-headline-md-size, 20px);
  font-weight: var(--ddhd-text-headline-md-weight, 600);
  line-height: var(--ddhd-text-headline-md-lh, 1.3);
  color: var(--ddhd-text, #1a1c1d);
  letter-spacing: -0.01em;
}

.ds-modal-subtitle {
  font-size: 13px;
  color: var(--ddhd-text-muted, #4d4637);
  margin-top: 4px;
}

.ds-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ddhd-text-muted, #4d4637);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.ds-modal-close:hover {
  background: var(--ddhd-bg-subtle, #f3f3f5);
  color: var(--ddhd-text, #1a1c1d);
}

.ds-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

.ds-modal-footer {
  padding: 16px 28px 20px;
  border-top: 1px solid var(--ddhd-border-faint, #e2e2e4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── Customer-flow form sections (.ds-form-section + .ca-section) ─────────── */
/* Each section becomes a white card with shadow + gold-accent title.
   Existing JS-injected .ca-section rules (background:#f8fafc, 14px padding,
   10px radius) are overridden via !important. */

.ds-form-section,
.ca-section {
  background: var(--ddhd-bg-card, #ffffff) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: var(--ddhd-shadow-sm, 0 4px 20px rgba(0, 0, 0, 0.04)) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}

.ds-form-section-title,
.ca-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ddhd-accent-strong, #b89636) !important;
  margin-bottom: 18px !important;
}

/* Section icons (CSS-only via nth-of-type). Material Symbols font loaded
   in Phase 1. Default = nothing renders; per-section content overrides
   below set the icon glyph via ligature. The font/color/sizing applies
   to whatever content is set. */
.ca-section .ca-section-title::before,
.ds-form-section .ds-form-section-title::before {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 22px !important;
  font-weight: normal !important;
  color: var(--ddhd-accent, #c9a84c) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  font-variation-settings: 'FILL' 0, 'wght' 500 !important;
}

/* Credit application form: 5 sections in fixed order — Company / Bank /
   Trade Refs / Requested Terms / Authorized Signer. nth-of-type assigns
   per-section icon. Stable as long as JS template doesn't reorder. */
.ca-section:nth-of-type(1) .ca-section-title::before { content: 'business' !important; }
.ca-section:nth-of-type(2) .ca-section-title::before { content: 'account_balance' !important; }
.ca-section:nth-of-type(3) .ca-section-title::before { content: 'handshake' !important; }
.ca-section:nth-of-type(4) .ca-section-title::before { content: 'schedule' !important; }
.ca-section:nth-of-type(5) .ca-section-title::before { content: 'edit_note' !important; }

/* ── Customer-flow form fields (.ds-form-field + .ca-fld + .cc-fld) ───────── */

.ds-form-field,
.ca-fld,
.cc-fld {
  margin-bottom: 16px !important;
}

.ds-form-field label,
.ca-fld label,
.cc-fld label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
  margin-bottom: 6px !important;
}

.ds-form-field input,
.ds-form-field select,
.ds-form-field textarea,
.ca-fld input,
.ca-fld select,
.ca-fld textarea,
.cc-fld input {
  width: 100% !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  background: var(--ddhd-bg-subtle, #f3f3f5) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--ddhd-text, #1a1c1d) !important;
  outline: none !important;
  font-family: 'Inter', sans-serif !important;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s !important;
}

/* Monospace inputs (CAGE, EIN, DUNS) — keep their character but match the
   new field styling otherwise. */
.ca-fld input[data-mono="1"] {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.ds-form-field input:focus,
.ds-form-field select:focus,
.ds-form-field textarea:focus,
.ca-fld input:focus,
.ca-fld select:focus,
.ca-fld textarea:focus,
.cc-fld input:focus {
  background: var(--ddhd-bg-card, #ffffff) !important;
  border-color: var(--ddhd-accent, #c9a84c) !important;
  box-shadow: 0 0 0 3px var(--ddhd-accent-soft, rgba(201, 168, 76, 0.18)) !important;
}

.ds-form-field input.invalid,
.ds-form-field select.invalid,
.ca-fld input.invalid,
.ca-fld select.invalid,
.cc-fld input.invalid {
  background: var(--ddhd-pill-rejected-bg, #ffdad6) !important;
  border-color: var(--ddhd-error, #ba1a1a) !important;
  box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.12) !important;
}

/* Inline error text under invalid CC fields */
.cc-error {
  color: var(--ddhd-pill-rejected-fg, #93000a) !important;
  font-size: 12px !important;
  margin-top: 6px !important;
  min-height: 16px !important;
}

/* ── Payment-method picker cards (.ds-payment-card + .pt-card) ────────────── */
/* Stitch 04 spec: 24px padding, 16px gap, 12px radius, gold-border-selected.
   Material Symbols icon per data-key (CSS-only via attribute selector — no
   JS template change). */

.ds-payment-card,
.pt-card {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 24px !important;
  margin-bottom: 12px !important;
  background: var(--ddhd-bg-card, #ffffff) !important;
  border: 2px solid var(--ddhd-border-faint, #e2e2e4) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s !important;
}

.ds-payment-card:hover,
.pt-card:hover {
  border-color: var(--ddhd-text-faint, #7e7665) !important;
  background: var(--ddhd-bg-subtle, #f3f3f5) !important;
}

.ds-payment-card.selected,
.pt-card.selected {
  border-color: var(--ddhd-accent, #c9a84c) !important;
  background: var(--ddhd-pill-invoiced-bg, #f5e8c4) !important;
  box-shadow: var(--ddhd-shadow-sm, 0 4px 20px rgba(0, 0, 0, 0.04)) !important;
}

/* Icon-above-title inside .pt-card-body — uses data-key attribute to pick
   the Material Symbols glyph. Renders as block so it sits above the title. */
.pt-card .pt-card-body::before {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 26px !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
  display: block !important;
  margin-bottom: 8px !important;
  line-height: 1 !important;
  font-variation-settings: 'FILL' 0, 'wght' 500 !important;
  transition: color 0.15s !important;
}
.pt-card[data-key="credit_card"]     .pt-card-body::before { content: 'credit_card' !important; }
.pt-card[data-key="wire_ach"]        .pt-card-body::before { content: 'account_balance' !important; }
.pt-card[data-key="net_15"]          .pt-card-body::before,
.pt-card[data-key="net_30"]          .pt-card-body::before,
.pt-card[data-key="net_60"]          .pt-card-body::before { content: 'schedule' !important; }
.pt-card[data-key="apply_net_terms"] .pt-card-body::before { content: 'assignment' !important; }
.pt-card.selected .pt-card-body::before { color: var(--ddhd-accent-strong, #b89636) !important; }

.pt-card .pt-card-body {
  flex: 1 !important;
}

.pt-card .pt-card-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ddhd-text, #1a1c1d) !important;
  margin-bottom: 4px !important;
  letter-spacing: -0.01em !important;
}

.pt-card .pt-card-sub {
  font-size: 13px !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
  line-height: 1.45 !important;
}

.pt-card .pt-card-radio {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: 2px solid var(--ddhd-border, #d0c5b2) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: border-color 0.15s !important;
}

.pt-card.selected .pt-card-radio {
  border-color: var(--ddhd-accent, #c9a84c) !important;
}

.pt-card .pt-card-radio span {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: transparent !important;
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  transition: background 0.15s !important;
}

.pt-card.selected .pt-card-radio span {
  background: var(--ddhd-accent, #c9a84c) !important;
}

/* ── Term pills (Net 15/30/60 picker inside credit application) ───────────── */

.ca-term-pill {
  flex: 1 !important;
  min-width: 120px !important;
  padding: 14px 18px !important;
  text-align: center !important;
  background: var(--ddhd-bg-card, #ffffff) !important;
  border: 2px solid var(--ddhd-border-faint, #e2e2e4) !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--ddhd-text, #1a1c1d) !important;
  letter-spacing: 0.02em !important;
  transition: all 0.15s !important;
}

.ca-term-pill:hover {
  border-color: var(--ddhd-text-faint, #7e7665) !important;
  background: var(--ddhd-bg-subtle, #f3f3f5) !important;
}

.ca-term-pill.selected {
  border-color: var(--ddhd-accent, #c9a84c) !important;
  background: var(--ddhd-pill-invoiced-bg, #f5e8c4) !important;
  color: var(--ddhd-accent-strong, #b89636) !important;
  box-shadow: var(--ddhd-shadow-sm, 0 4px 20px rgba(0, 0, 0, 0.04)) !important;
}

/* ── Cage-code field on payment-terms picker ──────────────────────────────── */

.cage-fld {
  margin: 0 0 20px !important;
  padding: 18px 20px !important;
  background: var(--ddhd-bg-card, #ffffff) !important;
  border: 1px solid var(--ddhd-border-faint, #e2e2e4) !important;
  border-radius: 12px !important;
  box-shadow: var(--ddhd-shadow-sm, 0 4px 20px rgba(0, 0, 0, 0.04)) !important;
}

.cage-fld label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
  margin-bottom: 8px !important;
}

.cage-fld input {
  width: 100% !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
  background: var(--ddhd-bg-subtle, #f3f3f5) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  outline: none !important;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
}

.cage-fld input:focus {
  background: var(--ddhd-bg-card, #ffffff) !important;
  border-color: var(--ddhd-accent, #c9a84c) !important;
  box-shadow: 0 0 0 3px var(--ddhd-accent-soft, rgba(201, 168, 76, 0.18)) !important;
}

.cage-fld .cage-help {
  font-size: 12px !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
  margin-top: 8px !important;
}

/* ── Customer-flow primary CTAs (.pt-confirm / .ca-submit / .cc-submit) ───── */

.pt-confirm-btn,
.ca-submit-btn,
.cc-submit-btn {
  width: 100% !important;
  padding: 16px 24px !important;
  background: var(--ddhd-accent, #c9a84c) !important;
  color: #ffffff !important;
  border: 1px solid var(--ddhd-accent, #c9a84c) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  font-family: 'Inter', sans-serif !important;
  cursor: pointer !important;
  margin-top: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(133, 100, 0, 0.18) !important;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s !important;
}

.pt-confirm-btn:hover:not(:disabled),
.ca-submit-btn:hover:not(:disabled),
.cc-submit-btn:hover:not(:disabled) {
  background: var(--ddhd-accent-strong, #b89636) !important;
  border-color: var(--ddhd-accent-strong, #b89636) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 4px 12px rgba(133, 100, 0, 0.22) !important;
}

.pt-confirm-btn:disabled,
.ca-submit-btn:disabled,
.cc-submit-btn:disabled {
  background: var(--ddhd-bg-muted, #edeef0) !important;
  color: var(--ddhd-text-faint, #7e7665) !important;
  border-color: var(--ddhd-border-faint, #e2e2e4) !important;
  cursor: default !important;
  box-shadow: none !important;
}

/* ── "Back to payment options" — ghost link button on credit-app ──────────── */

.ca-back-link {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 12px !important;
  padding: 10px !important;
  font-size: 13px !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  transition: color 0.15s !important;
}

.ca-back-link:hover {
  color: var(--ddhd-accent-strong, #b89636) !important;
}

/* ── Error mount on customer-flow forms (.ca-error inside #ca-error-mount) ── */

.ca-error {
  background: var(--ddhd-pill-rejected-bg, #ffdad6) !important;
  border: 1px solid rgba(186, 26, 26, 0.2) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: var(--ddhd-pill-rejected-fg, #93000a) !important;
  margin-bottom: 16px !important;
}

/* ── CC payment form: demo-only banner ────────────────────────────────────── */
/* Soften the bright amber banner into a Stitch-aligned advisory panel. */

.cc-banner {
  background: var(--ddhd-pill-pending-bg, #dae2fd) !important;
  border: 1px solid rgba(63, 70, 92, 0.2) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.cc-banner-icon {
  font-size: 22px !important;
  flex-shrink: 0 !important;
}

.cc-banner-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ddhd-pill-pending-fg, #3f465c) !important;
  margin-bottom: 6px !important;
}

.cc-banner-body {
  font-size: 13px !important;
  color: var(--ddhd-pill-pending-fg, #3f465c) !important;
  line-height: 1.55 !important;
}

/* ── Multi-column form grids — Stitch 6/16 spacing rhythm ─────────────────── */

.ca-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 16px !important;
}

.ca-grid.full {
  grid-template-columns: 1fr !important;
}

.ca-grid.triple {
  grid-template-columns: 2fr 1.5fr 1.2fr !important;
}

.ca-terms-row {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 4px !important;
}

@media (max-width: 560px) {
  .ca-grid,
  .ca-grid.triple,
  .ds-form-section .ca-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
   Phase 4b — admin modal chrome (RFQ details, CAGE lookup, CA review,
   margin calc, edit-quote, PDF preview, order detail, new-quote modal).
   Aliases the legacy modal class systems across index.html / orders.html /
   quotes.html to consume the Phase 4a Stitch modal styling. No HTML touched.

   Properties NOT overridden here: display, position, z-index, visibility.
   Those are owned by per-page JS (.open class toggle / [data-open] attribute /
   .hidden class / direct style.display assignment). This block only restyles
   the chrome (overlay backdrop, card surface, header, body, footer, close
   button) so the visibility logic stays intact.
   ============================================================================ */

/* ── Modal overlay aliases — Stitch backdrop on every legacy class system ── */

.modal-overlay,
.cage-overlay,
.ca-modal-overlay,
.edit-modal,
.pdf-modal {
  background: rgba(26, 28, 29, 0.4) !important;
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
}

/* #marginModal has an inline-style !important backdrop in index.html with
   (0,1,0) specificity. Beat it with element+id = (0,1,1). */
html #marginModal {
  background: rgba(26, 28, 29, 0.4) !important;
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
}

/* ── Modal card aliases — Stitch container look on every card-element class ─ */

.modal,
.modal-box,
.cage-modal,
.ca-modal,
.edit-modal-card,
.pdf-modal-card,
.margin-modal-box {
  background: var(--ddhd-bg-card, #ffffff) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: var(--ddhd-shadow-lg, 0 24px 60px rgba(0, 0, 0, 0.12)) !important;
  overflow: hidden;
}

/* Per-modal max-width — assigned via ID selector so no HTML class addition
   needed. Size tiers: sm 480 / md 640-720 / lg 920 / xl 1000. */
#modalOverlay .modal              { max-width: 920px !important; }
#cageOverlay .cage-modal          { max-width: 480px !important; }
#caApproveModal .ca-modal,
#caDeclineModal .ca-modal,
#caMoreInfoModal .ca-modal        { max-width: 640px !important; }
#marginModal .margin-modal-box    { max-width: 480px !important; }
#editQuoteModal .edit-modal-card  { max-width: 920px !important; }
#pdfModal .pdf-modal-card         { max-width: 1000px !important; }
#detailModal .modal-box           { max-width: 720px !important; }
#quoteModal .modal                { max-width: 640px !important; }

/* ── Modal headers — title row across all class systems ──────────────────── */

.modal-header,
.cage-modal-header,
.edit-modal-header,
.pdf-modal-header {
  padding: 20px 28px !important;
  border-bottom: 1px solid var(--ddhd-border-faint, #e2e2e4) !important;
  background: transparent !important;
  color: var(--ddhd-text, #1a1c1d) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-shrink: 0;
}

/* CA modal header (.ca-modal-hdr) is a single block element — stitch the same
   header treatment without forcing flex-row (close button is in the footer). */
.ca-modal-hdr {
  padding: 20px 28px !important;
  border-bottom: 1px solid var(--ddhd-border-faint, #e2e2e4) !important;
  background: transparent !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ddhd-text, #1a1c1d) !important;
  letter-spacing: -0.01em !important;
  flex-shrink: 0;
}

/* Modal title typography */
.modal-header h3,
.modal-header .modal-title,
.cage-modal-header h3,
.edit-modal-header > span:first-child,
.pdf-modal-header > span:first-child {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ddhd-text, #1a1c1d) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.modal-header p,
.modal-header .modal-subtitle {
  font-size: 13px !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
  margin-top: 4px !important;
}

/* ── Modal close buttons — unified across all systems ─────────────────────── */

.modal-close,
.edit-modal-close,
.pdf-modal-close,
.cage-modal-header > button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
  cursor: pointer !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: background 0.15s, color 0.15s !important;
}

.modal-close:hover,
.edit-modal-close:hover,
.pdf-modal-close:hover,
.cage-modal-header > button:hover {
  background: var(--ddhd-bg-subtle, #f3f3f5) !important;
  color: var(--ddhd-text, #1a1c1d) !important;
}

/* ── Modal bodies — scrollable content with consistent padding ────────────── */

.modal-body,
.cage-modal-body,
.ca-modal-body,
.edit-modal-body,
.pdf-modal-body {
  padding: 24px 28px !important;
  overflow-y: auto;
  color: var(--ddhd-text, #1a1c1d) !important;
}

/* CAGE modal body had a hardcoded dim text color (#9ca3af) in the JS-rendered
   placeholder. Force the body's default text to the Stitch on-surface color. */
#cageOverlay .cage-modal-body,
#cageOverlay .cage-modal-body > * {
  color: var(--ddhd-text, #1a1c1d) !important;
}

/* ── Modal footers — right-aligned action row ─────────────────────────────── */

.modal-footer,
.ca-modal-ftr,
.margin-modal-actions {
  padding: 16px 28px 20px !important;
  border-top: 1px solid var(--ddhd-border-faint, #e2e2e4) !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  flex-shrink: 0;
}

/* CA modal footer buttons — Cancel (ghost) + Submit (primary gold). The CA
   submit buttons (.ca-modal-submit) inherit from .btn already in theme-light;
   .ca-modal-cancel needs a ghost-button look. */
.ca-modal-cancel {
  padding: 10px 18px !important;
  background: transparent !important;
  color: var(--ddhd-text, #1a1c1d) !important;
  border: 1px solid var(--ddhd-border, #d0c5b2) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  transition: background 0.15s, border-color 0.15s !important;
}

.ca-modal-cancel:hover {
  background: var(--ddhd-bg-subtle, #f3f3f5) !important;
  border-color: var(--ddhd-text-faint, #7e7665) !important;
}

.ca-modal-submit {
  padding: 10px 20px !important;
  background: var(--ddhd-accent, #c9a84c) !important;
  color: #ffffff !important;
  border: 1px solid var(--ddhd-accent, #c9a84c) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(133, 100, 0, 0.18) !important;
  transition: background 0.15s, box-shadow 0.15s !important;
}

.ca-modal-submit:hover:not(:disabled) {
  background: var(--ddhd-accent-strong, #b89636) !important;
  border-color: var(--ddhd-accent-strong, #b89636) !important;
}

/* CA modal field group (.ca-modal-fld) — Phase 4a's .ca-fld styling was for
   approve-quote.html's customer form. The CA REVIEW modals on the home
   dashboard use .ca-modal-fld (different class). Extend the Phase 4a form-
   field pattern to it. */
.ca-modal-fld {
  margin-bottom: 16px !important;
}

.ca-modal-fld label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
  margin-bottom: 6px !important;
}

.ca-modal-fld input,
.ca-modal-fld textarea,
.ca-modal-fld select {
  width: 100% !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  background: var(--ddhd-bg-subtle, #f3f3f5) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--ddhd-text, #1a1c1d) !important;
  outline: none !important;
  font-family: 'Inter', sans-serif !important;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s !important;
}

.ca-modal-fld input:focus,
.ca-modal-fld textarea:focus,
.ca-modal-fld select:focus {
  background: var(--ddhd-bg-card, #ffffff) !important;
  border-color: var(--ddhd-accent, #c9a84c) !important;
  box-shadow: 0 0 0 3px var(--ddhd-accent-soft, rgba(201, 168, 76, 0.18)) !important;
}

.ca-modal-error {
  background: var(--ddhd-pill-rejected-bg, #ffdad6) !important;
  border: 1px solid rgba(186, 26, 26, 0.2) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: var(--ddhd-pill-rejected-fg, #93000a) !important;
  margin-bottom: 12px !important;
}

/* CA terms-pills inside review modal share the .ca-term-pill aliasing from
   Phase 4a — no additional rules needed. */

/* ── Edit-quote modal: extend form-field aliasing to its .fld class ───────── */

#editQuoteModal .fld {
  margin-bottom: 14px !important;
}

#editQuoteModal .fld label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
  margin-bottom: 6px !important;
}

#editQuoteModal .fld input,
#editQuoteModal .fld select,
#editQuoteModal .fld textarea {
  width: 100% !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  background: var(--ddhd-bg-subtle, #f3f3f5) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--ddhd-text, #1a1c1d) !important;
  outline: none !important;
  font-family: 'Inter', sans-serif !important;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s !important;
}

#editQuoteModal .fld input:focus,
#editQuoteModal .fld select:focus,
#editQuoteModal .fld textarea:focus {
  background: var(--ddhd-bg-card, #ffffff) !important;
  border-color: var(--ddhd-accent, #c9a84c) !important;
  box-shadow: 0 0 0 3px var(--ddhd-accent-soft, rgba(201, 168, 76, 0.18)) !important;
}

/* ── Margin Calculator modal: form-row + inputs ───────────────────────────── */

#marginModal .margin-input-wrap label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
  margin-bottom: 6px !important;
}

#marginModal .margin-input-wrap input {
  width: 100% !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
  background: var(--ddhd-bg-subtle, #f3f3f5) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--ddhd-text, #1a1c1d) !important;
  outline: none !important;
  font-family: 'Inter', sans-serif !important;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s !important;
}

#marginModal .margin-input-wrap input:focus {
  background: var(--ddhd-bg-card, #ffffff) !important;
  border-color: var(--ddhd-accent, #c9a84c) !important;
  box-shadow: 0 0 0 3px var(--ddhd-accent-soft, rgba(201, 168, 76, 0.18)) !important;
}

#marginModal .margin-output #marginResult {
  color: var(--ddhd-text, #1a1c1d) !important;
}

/* ── PDF preview modal: iframe full-bleed inside the card ─────────────────── */

.pdf-modal-frame {
  border: none !important;
  width: 100% !important;
  display: block !important;
}

.pdf-modal-loading {
  padding: 32px 20px !important;
  text-align: center !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
  font-size: 14px !important;
}

/* ── New Quote modal (quotes.html) — form-row-2 + line-items-editor inputs ── */

#quoteModal .form-row-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

#quoteModal .form-row {
  margin-bottom: 16px !important;
}

#quoteModal .form-input,
#quoteModal .form-textarea {
  /* already covered by theme-light.css .form-input rules from Phase 1+2b */
}

/* ── Mobile responsive: modals become full-bleed at narrow viewports ──────── */

@media (max-width: 560px) {
  .modal,
  .modal-box,
  .cage-modal,
  .ca-modal,
  .edit-modal-card,
  .pdf-modal-card,
  .margin-modal-box {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 32px) !important;
    border-radius: 12px !important;
  }

  .modal-header,
  .cage-modal-header,
  .edit-modal-header,
  .pdf-modal-header,
  .ca-modal-hdr,
  .modal-body,
  .cage-modal-body,
  .ca-modal-body,
  .edit-modal-body,
  .pdf-modal-body,
  .modal-footer,
  .ca-modal-ftr,
  .margin-modal-actions {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ============================================================================
   Phase 5 — final polish (history state panel)
   history.html has a unique sidebar/main layout; the right-side .state-panel
   acts as an empty-state-style placeholder until a date is selected.
   Give it a Stitch panel treatment so it doesn't read as un-themed.
   ============================================================================ */

.state-panel {
  background: var(--ddhd-bg-card, #ffffff) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: var(--ddhd-shadow-sm, 0 4px 20px rgba(0, 0, 0, 0.04)) !important;
  padding: 48px 28px !important;
  text-align: center !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
}

.state-panel .state-icon {
  font-size: 48px !important;
  opacity: 0.4 !important;
  margin-bottom: 16px !important;
  display: block !important;
  line-height: 1 !important;
}

.state-panel .state-title {
  font-size: var(--ddhd-text-body-lg-size, 19px) !important;
  font-weight: 600 !important;
  color: var(--ddhd-text, #1a1c1d) !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em !important;
}

.state-panel .state-sub {
  font-size: 13px !important;
  color: var(--ddhd-text-muted, #4d4637) !important;
  line-height: 1.5 !important;
}