/* =============================================================
 * Giga Design System — Deep night, mountain vista. Cosmic, calm.
 *
 * Primary canvas: LIGHT (Ghost #fff, Obsidian #000 text).
 * Hero/marketing sections may go dark for atmospheric photography
 * but interior UI is mostly white with subtle hairline borders.
 *
 * "Theme: dark" in the spec refers to mood, not palette.
 * The Do's mandate Obsidian for primary text, which only sits on
 * light surfaces. See https://giga.ai for reference.
 * ============================================================= */

:root {
    /* Colors — Core palette */
    --color-obsidian: #000000;
    --color-ghost: #ffffff;
    --color-graphite: #cccccc;
    --color-shadow: #4d4d4d;
    --color-pebble-gray: #969696;
    --color-night-sky: #161717;
    --color-steel-gray: #808080;
    --color-cosmic-dust: #8a8f98;
    --color-ember-glow: #fe2c02;
    --color-growth-green: #49de80;

    /* Surfaces — light primary canvas */
    --surface-page: #ffffff;
    --surface-subtle: #fafafa;          /* near-white section bg */
    --surface-card: #ffffff;            /* card bg */
    --surface-inset: rgba(0, 0, 0, 0.02);  /* nested/inset card bg */
    --surface-elev: rgba(0, 0, 0, 0.04); /* hover/selected */
    --surface-dark: #000000;            /* hero/marketing dark sections */
    --surface-night: #161717;           /* dark filled buttons */

    /* Hairlines — black at very low alpha for refined dividers */
    --hairline: rgba(0, 0, 0, 0.06);
    --hairline-strong: rgba(0, 0, 0, 0.12);
    --hairline-faint: rgba(0, 0, 0, 0.04);

    /* Inverse hairlines for dark sections */
    --hairline-inv: rgba(255, 255, 255, 0.10);
    --hairline-inv-faint: rgba(255, 255, 255, 0.05);

    /* Typography — Font families */
    --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    /* Inter weight 300 with tight tracking stands in for Emilio Light */
    --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;

    /* Type scale */
    --text-body: 14px;
    --leading-body: 1.5;
    --text-heading: 22px;
    --leading-heading: 1.2;
    --text-heading-lg: 30px;
    --leading-heading-lg: 1.33;
    --text-display: 48px;
    --leading-display: 1.05;
    --tracking-display: -0.03em;

    /* Spacing */
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-40: 40px;
    --spacing-48: 48px;

    /* Radius */
    --radius-card: 16px;
    --radius-button: 1000px;
    --radius-icon: 9999px;
    --radius-default: 10px;

    /* Elevation — subtle, diffused */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04),
                   0 12px 32px -16px rgba(0, 0, 0, 0.10);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-ember: rgba(254, 44, 2, 0.4) 0px 0px 18px 0px;
    /* For dark sections */
    --shadow-card-dark: rgba(0, 0, 0, 0.7) 0px 12px 32px -16px,
                        rgba(0, 0, 0, 0.5) 0px 12px 60px 0px,
                        rgba(255, 255, 255, 0.10) 0px 0px 0px 1px;
}

/* =============================================================
 * Base — Light canvas
 * ============================================================= */

html, body {
    background: var(--surface-page);
    color: var(--color-obsidian);
    font-family: var(--font-inter);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: var(--text-body);
    line-height: var(--leading-body);
    letter-spacing: -0.005em;
}

::selection {
    background: rgba(0, 0, 0, 0.10);
    color: var(--color-obsidian);
}

/* Scrollbars (webkit) — minimal */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.10);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.20); background-clip: padding-box; border: 2px solid transparent; }

/* =============================================================
 * Tailwind utility overrides — adjust selected values to Giga
 * tokens. Light-mode is now native, so most utilities work as-is;
 * we only retune the saturated brand colours and dark sections.
 * ============================================================= */

/* Brand-coloured surfaces: tone toward Giga monochrome accents.
 * Blue (the previous brand) becomes Night Sky for filled actions. */
body .bg-blue-600,
body .bg-blue-700       { background-color: var(--color-night-sky) !important; color: var(--color-ghost) !important; }
body .bg-blue-600:hover,
body .hover\:bg-blue-700:hover { background-color: #2a2b2c !important; }

body .bg-emerald-600,
body .bg-emerald-700    { background-color: var(--color-growth-green) !important; color: var(--color-obsidian) !important; }
body .bg-red-600,
body .bg-red-700        { background-color: var(--color-ember-glow) !important; color: var(--color-ghost) !important; }
body .bg-amber-400,
body .bg-amber-500      { background-color: var(--color-ember-glow) !important; color: var(--color-ghost) !important; }

/* Subtle tinted surfaces — keep as light tinted bgs (these were
 * never deeply saturated). The amber/blue/emerald/red bg-*-50 stay
 * close to their original look, just retoned to Giga accents. */
body .bg-blue-50        { background-color: rgba(0, 0, 0, 0.03) !important; }
body .bg-emerald-50     { background-color: rgba(73, 222, 128, 0.10) !important; }
body .bg-amber-50,
body .bg-yellow-50      { background-color: rgba(254, 44, 2, 0.06) !important; }
body .bg-red-50         { background-color: rgba(254, 44, 2, 0.06) !important; }

/* Brand-coloured text: blue family -> Obsidian (neutral primary).
 * Keep emerald->growth, amber/red->ember as functional accents. */
body .text-blue-600,
body .text-blue-700,
body .text-blue-500,
body .text-blue-400     { color: var(--color-obsidian) !important; }
body .hover\:text-blue-700:hover,
body .hover\:text-blue-800:hover,
body .hover\:text-blue-300:hover { color: var(--color-obsidian) !important; }

body .text-emerald-400,
body .text-emerald-500,
body .text-emerald-600,
body .text-emerald-700,
body .text-green-400,
body .text-green-500    { color: var(--color-growth-green) !important; }

body .text-amber-500,
body .text-amber-600,
body .text-amber-700,
body .text-yellow-500,
body .text-yellow-600,
body .text-yellow-700,
body .text-red-300,
body .text-red-400,
body .text-red-500,
body .text-red-600,
body .text-red-700      { color: var(--color-ember-glow) !important; }

/* Indigo — used in some progress bars — neutralise to Obsidian */
body .bg-indigo-500     { background-color: var(--color-night-sky) !important; }

/* Strong-coloured backgrounds: the small accent badges (-100, -200) */
body .bg-blue-100,
body .bg-blue-200       { background-color: rgba(0, 0, 0, 0.06) !important; color: var(--color-obsidian) !important; }
body .bg-emerald-100,
body .bg-emerald-200,
body .bg-green-100,
body .bg-green-200      { background-color: rgba(73, 222, 128, 0.14) !important; color: #1a7f3f !important; }
body .bg-amber-100,
body .bg-amber-200,
body .bg-yellow-100,
body .bg-yellow-200     { background-color: rgba(254, 44, 2, 0.10) !important; color: var(--color-ember-glow) !important; }

/* Borders — collapse Tailwind's many gray scales to a hairline.
 * Pure neutral grays stay neutral; coloured borders pick up the
 * matching Giga accent. */
body .border-gray-100,
body .border-gray-200,
body .border-gray-300,
body .border-slate-100,
body .border-slate-300,
body .border-stone-200  { border-color: var(--hairline) !important; }
body .border-blue-100,
body .border-blue-200,
body .border-blue-300,
body .border-blue-500   { border-color: var(--hairline-strong) !important; }
body .border-emerald-100,
body .border-emerald-200,
body .border-emerald-300 { border-color: rgba(73, 222, 128, 0.35) !important; }
body .border-red-100,
body .border-red-200,
body .border-red-300    { border-color: rgba(254, 44, 2, 0.30) !important; }
body .border-amber-100,
body .border-amber-200,
body .border-yellow-100,
body .border-yellow-200 { border-color: rgba(254, 44, 2, 0.25) !important; }

/* Dark slate borders (used in dark hero sections) → inverse hairline */
body .border-slate-600,
body .border-slate-700,
body .border-slate-800  { border-color: var(--hairline-inv) !important; }

/* Dark slate surfaces — keep as dark sections, retuned to Giga */
body .bg-slate-700      { background-color: #1c1d1e !important; }
body .bg-slate-800      { background-color: var(--color-night-sky) !important; }
body .bg-slate-900      { background-color: #0a0a0a !important; }
body .bg-slate-950      { background-color: var(--color-obsidian) !important; }

/* Bright text on dark sections → Ghost */
body .text-white,
body .text-slate-100,
body .text-slate-200    { color: var(--color-ghost) !important; }
body .text-slate-300    { color: var(--color-graphite) !important; }
body .text-slate-400,
body .text-slate-500    { color: var(--color-pebble-gray) !important; }
body .text-slate-600    { color: var(--color-shadow) !important; }
body .text-slate-700,
body .text-slate-800    { color: var(--color-obsidian) !important; }

body .text-stone-900    { color: var(--color-obsidian) !important; }

/* Hover surfaces */
body .hover\:bg-gray-50:hover,
body .hover\:bg-gray-100:hover,
body .hover\:bg-slate-50:hover,
body .hover\:bg-slate-100:hover,
body .hover\:bg-stone-50:hover  { background-color: var(--surface-elev) !important; }
body .hover\:bg-blue-50:hover,
body .hover\:bg-blue-100:hover  { background-color: var(--surface-elev) !important; }
body .hover\:bg-emerald-50:hover { background-color: rgba(73, 222, 128, 0.10) !important; }
body .hover\:bg-stone-900:hover { background-color: #2a2b2c !important; }

/* Selected nav state */
body .bg-blue-50.text-blue-600,
body .bg-emerald-50.text-emerald-700 {
    background-color: var(--surface-elev) !important;
    color: var(--color-obsidian) !important;
}

/* Rings/focus */
body .ring-gray-200,
body .ring-slate-200    { --tw-ring-color: var(--hairline-strong) !important; }
body .focus\:ring-blue-500:focus,
body .focus\:ring-blue-200:focus,
body .focus\:ring-blue-100:focus { --tw-ring-color: rgba(0, 0, 0, 0.12) !important; }
body .focus\:border-blue-400:focus { border-color: var(--color-obsidian) !important; }

/* Tailwind .shadow-* — tone toward Giga subtle elevation */
body .shadow-sm,
body .shadow,
body .shadow-md { box-shadow: var(--shadow-soft) !important; }
body .shadow-lg,
body .shadow-xl { box-shadow: var(--shadow-card) !important; }

/* =============================================================
 * Form inputs — light, refined
 * ============================================================= */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="search"],
body input[type="url"],
body input[type="tel"],
body input[type="file"],
body select,
body textarea {
    background-color: var(--surface-card);
    color: var(--color-obsidian);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-default);
}
body input::placeholder,
body textarea::placeholder { color: var(--color-pebble-gray); }
body input:focus,
body select:focus,
body textarea:focus {
    border-color: var(--color-obsidian);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
/* Tag-input fields: the inner <input> sits inside a styled wrapper, so it
   must not render its own border, background, or focus ring — and must not
   show Chrome's yellow autofill background, which would visually leak through
   the otherwise-transparent input. */
body .tag-input-box input,
body #blocked-values-container input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body .tag-input-box input:focus,
body #blocked-values-container input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
body .tag-input-box input:-webkit-autofill,
body .tag-input-box input:-webkit-autofill:hover,
body .tag-input-box input:-webkit-autofill:focus,
body #blocked-values-container input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: var(--color-obsidian) !important;
    caret-color: var(--color-obsidian) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Code/pre/kbd */
body code, body pre, body kbd, body samp {
    font-family: var(--font-mono);
    background-color: var(--surface-inset);
    color: var(--color-obsidian);
    border-radius: 6px;
}

/* Links default to Obsidian; ember class for accents */
body a { color: var(--color-obsidian); }
body a.ember,
body a[href].text-ember { color: var(--color-ember-glow); }

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-obsidian);
    letter-spacing: -0.02em;
}

/* =============================================================
 * Components — pill buttons, cards
 * ============================================================= */

.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: var(--radius-button);
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: -0.005em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn-pill:active { transform: translateY(0.5px); }
.btn-pill:disabled, .btn-pill[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Primary — Night Sky on light surfaces (filled, signature CTA) */
.btn-pill-primary {
    background: var(--color-night-sky);
    color: var(--color-ghost);
    border-color: var(--color-night-sky);
}
.btn-pill-primary:hover { background: #2a2b2c; border-color: #2a2b2c; }

/* Inverse Primary — Ghost on dark surfaces (hero CTA) */
.btn-pill-on-dark {
    background: var(--color-ghost);
    color: var(--color-obsidian);
    border-color: var(--color-ghost);
}
.btn-pill-on-dark:hover { background: rgba(255, 255, 255, 0.88); }

/* Ghost (outline) — translucent, hairline border */
.btn-pill-ghost {
    background: rgba(0, 0, 0, 0.02);
    color: var(--color-obsidian);
    border-color: var(--hairline-strong);
}
.btn-pill-ghost:hover { background: rgba(0, 0, 0, 0.05); }

/* Ghost on dark sections */
.btn-pill-ghost-dark {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-ghost);
    border-color: var(--hairline-inv);
}
.btn-pill-ghost-dark:hover { background: rgba(255, 255, 255, 0.10); }

/* Ember — accent action */
.btn-pill-ember {
    background: var(--color-ember-glow);
    color: var(--color-ghost);
    border-color: var(--color-ember-glow);
}
.btn-pill-ember:hover { box-shadow: var(--shadow-ember); }

/* Apply pill shape to common Tailwind primary button patterns */
body button.bg-blue-600,
body a.bg-blue-600,
body button.bg-emerald-600,
body a.bg-emerald-600,
body button.bg-red-600,
body a.bg-red-600 {
    border-radius: var(--radius-button) !important;
}

/* Card — Giga standard */
.giga-card {
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    padding: var(--spacing-24);
}
.giga-card-transparent {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    padding: var(--spacing-24);
}

/* Tighten radius scale to Giga */
body .rounded-xl  { border-radius: var(--radius-card) !important; }
body .rounded-2xl { border-radius: 20px !important; }
body .rounded-lg  { border-radius: var(--radius-default) !important; }
body .rounded-md  { border-radius: 8px !important; }

/* =============================================================
 * Quill editor overrides
 * ============================================================= */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--hairline) !important;
    background: var(--surface-card);
    color: var(--color-obsidian);
}
.ql-toolbar.ql-snow { border-radius: 10px 10px 0 0; }
.ql-container.ql-snow { border-radius: 0 0 10px 10px; }
.ql-editor { font-size: 14px !important; color: var(--color-obsidian); }
.ql-snow .ql-stroke { stroke: var(--color-shadow); }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: var(--color-shadow); }
.ql-snow .ql-picker { color: var(--color-shadow); }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--color-obsidian); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--color-obsidian); }

.ql-custom-input {
    display: inline-flex;
    align-items: center;
    height: 24px;
    float: left;
}
.ql-custom-input label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-shadow);
    padding: 0 4px 0 8px;
    white-space: nowrap;
}
.ql-custom-input input {
    width: 32px;
    text-align: center;
    border: none;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    height: 22px;
    padding: 0;
    color: var(--color-obsidian);
    background: transparent;
    outline: none;
}
.ql-custom-input input:focus {
    border-bottom-color: var(--color-obsidian);
}
.ql-custom-input button {
    width: 28px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    padding: 0 5px;
    color: var(--color-shadow);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ql-custom-input button:hover { color: var(--color-obsidian); }

/* =============================================================
 * Layout: impersonation bar
 * ============================================================= */
body.impersonating aside {
    top: 36px;
    height: calc(100vh - 36px);
}
body.impersonating main {
    padding-top: calc(36px + 2rem);
}
body.impersonating .products-three-col,
body.impersonating .quotes-app,
body.impersonating .settings-two-col,
body.impersonating .costs-two-col {
    height: calc(100vh - 36px);
}
@media (max-width: 767px) {
    body.impersonating main { padding-top: calc(36px + 4rem); }
    body.impersonating .hamburger-btn { top: calc(36px + 1rem); }
}

/* =============================================================
 * Sidebar — light Giga
 * ============================================================= */

aside {
    background-color: var(--surface-page) !important;
    border-right: 1px solid var(--hairline) !important;
}

@media (max-width: 767px) {
    .sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }
    .sidebar-open aside {
        transform: translateX(0);
    }
}

/* Compact sidebar: icon-only by default */
body.sidebar-compact aside {
    width: 64px;
    overflow: hidden;
    transition: width 0.18s ease, box-shadow 0.18s ease;
}
body.sidebar-compact aside:hover {
    width: 260px;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.05);
}
body.sidebar-compact aside nav {
    overflow-x: hidden;
}
@media (min-width: 768px) {
    body.sidebar-compact aside .nav-link .nav-label,
    body.sidebar-compact aside .nav-brand .nav-label {
        white-space: nowrap;
        transition: opacity 0.15s ease;
    }
    body.sidebar-compact aside:not(:hover) .nav-link .nav-label,
    body.sidebar-compact aside:not(:hover) .nav-brand .nav-label {
        opacity: 0;
    }
    body.sidebar-compact aside:not(:hover) .nav-user .nav-label,
    body.sidebar-compact aside:not(:hover) .nav-logout {
        display: none;
    }
}

aside .nav-link {
    border-radius: var(--radius-default);
}

.hamburger-btn {
    background: var(--surface-card) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--color-obsidian) !important;
}

/* =============================================================
 * Tooltip / info icon
 * ============================================================= */

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    cursor: help;
    position: relative;
    vertical-align: text-bottom;
    line-height: 1;
}
/* Portaled tooltip element rendered at <body> level by app.js so it
   can escape scrolling containers (e.g. `.product-info-col`). */
.info-icon-portal-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px 14px;
    background: var(--color-night-sky);
    color: var(--color-ghost);
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-line;
    width: 240px;
    z-index: 9999;
    box-shadow: var(--shadow-card);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    font-weight: 400;
}
.info-icon-portal-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

/* =============================================================
 * Toggle switch
 * ============================================================= */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.toggle-switch input { display: none; }
.toggle-slider {
    width: 36px;
    height: 20px;
    background: rgba(0, 0, 0, 0.10);
    border-radius: 10px;
    position: relative;
    transition: background 0.2s;
}
.toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--color-ghost);
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--color-night-sky);
}
.toggle-switch input:checked + .toggle-slider::after {
    transform: translateX(16px);
    background: var(--color-ghost);
}
.toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-shadow);
}

/* =============================================================
 * Admin-only marker
 * ============================================================= */
.admin-only {
    border-left: 2px solid var(--color-growth-green);
    padding-left: 6px;
    color: #1a7f3f;
}

/* =============================================================
 * Validation / save feedback
 * ============================================================= */
.input-error {
    border-color: var(--color-ember-glow) !important;
    box-shadow: 0 0 0 3px rgba(254, 44, 2, 0.15) !important;
}

.save-feedback {
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s;
}
.save-feedback.visible { opacity: 1; }
.save-feedback.success { color: #1a7f3f; }
.save-feedback.error   { color: var(--color-ember-glow); }

/* =============================================================
 * Three-column product layout
 * ============================================================= */
.products-three-col {
    display: flex;
    height: calc(100vh);
    margin: -1rem -1rem;
}
@media (min-width: 768px) {
    .products-three-col { margin: -2rem -2rem; }
}

.products-list-col {
    overflow-y: auto;
    height: 100%;
    width: 240px;
    min-width: 200px;
    max-width: 60%;
    flex-shrink: 0;
}

.products-detail-col {
    overflow-y: auto;
    height: 100%;
    flex: 1;
    min-width: 0;
    border-left: 1px solid var(--hairline);
    background: var(--surface-card);
}

.products-resize-handle {
    width: 1px;
    cursor: col-resize;
    background: var(--hairline);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    padding: 0 6px;
    margin: 0 -6px;
    background-clip: content-box;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}
.products-resize-handle::after {
    content: '⋮';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface-card);
    border: 1px solid var(--hairline-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--color-pebble-gray);
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    transition: border-color 0.15s, color 0.15s;
}
.products-resize-handle:hover::after,
.products-resize-handle.dragging::after {
    border-color: var(--color-obsidian);
    color: var(--color-obsidian);
}

.product-detail-split {
    display: flex;
    min-width: 0;
}
.product-info-col,
.product-field-detail-col {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}
.product-field-detail-col {
    border-left: 1px solid var(--hairline);
    background: var(--surface-subtle);
    padding: 0;
    position: relative;
}
#fields-editor-container,
#improve-workspace-container {
    padding: 1.25rem 1.5rem 3rem;
}

/* Product info column — section rhythm */
.product-section {
    margin-bottom: 1.75rem;
}
.product-section + .product-section {
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
}
.product-section-heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-obsidian);
    margin-bottom: 0.5rem;
}
.product-section-fields {
    margin-bottom: 0;
}

.output-cell-segments-header {
    margin-top: 1rem;
    margin-bottom: 0.25rem;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-shadow);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Field editor — sectioned layout */
.field-editor-section + .field-editor-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
}

/* Default value, when in regular mode, sits visually under the Required toggle. */
.field-default-nested {
    margin-left: 0.875rem;
    padding-left: 1rem;
    border-left: 2px solid var(--hairline);
}
.field-editor-section-heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-obsidian);
    margin-bottom: 0.75rem;
}

/* Inline checkbox + label + help — for "Required field" style toggles */
.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--surface-card);
    transition: border-color 0.15s, background 0.15s;
}
.checkbox-row:hover {
    border-color: var(--hairline-strong);
}
.checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--color-obsidian);
}
.checkbox-row-title {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-obsidian);
}
.checkbox-row-help {
    display: block;
    font-size: 11.5px;
    color: var(--color-pebble-gray);
    margin-top: 2px;
    line-height: 1.4;
}

/* Field cards (compact list with metadata row) */
.field-card {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 0.5rem 0.625rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
    color: var(--color-obsidian);
}
.field-card:hover { border-color: var(--hairline-strong); background: var(--surface-elev); }
.field-card.field-card-active {
    border-color: var(--color-obsidian) !important;
    background: var(--surface-elev) !important;
}
.field-card .drag-handle {
    align-self: center;
}
.field-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.field-card-row-top {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.field-card .field-name-display {
    font-weight: 500;
    font-size: 13px;
    color: var(--color-obsidian);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.field-card .field-name-display.empty {
    color: var(--color-pebble-gray);
    font-style: italic;
}
.field-card-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--color-pebble-gray);
    line-height: 1.3;
    min-width: 0;
}
.field-card-row-meta > span[hidden] { display: none; }
.field-meta-type {
    font-family: var(--font-mono);
    text-transform: lowercase;
}
.field-meta-cell {
    font-family: var(--font-mono);
    color: var(--color-shadow);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.field-meta-sep {
    color: var(--hairline-strong);
}
.field-pill {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 9999px;
    line-height: 1.4;
    flex-shrink: 0;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.field-pill[hidden] { display: none; }
.field-pill-required {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-shadow);
}
.field-pill-source {
    background: rgba(26, 127, 63, 0.10);
    color: #1a7f3f;
    font-family: var(--font-mono);
}
.field-pill-common {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-shadow);
    font-family: var(--font-mono);
}
.field-pill-modified {
    background: rgba(254, 44, 2, 0.08);
    color: var(--color-ember-glow);
}
/* Common-field rows in the product editor are read-mostly — give them a
   slightly softer surface so they sit visually behind the product's own
   fields without being heavy-handed. */
.field-card-common {
    background: rgba(0, 0, 0, 0.02);
}
.field-card .btn-remove-field {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    color: var(--color-pebble-gray);
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 0.25rem;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
}
.field-card:hover .btn-remove-field,
.field-card.field-card-active .btn-remove-field { opacity: 1; }
.field-card .btn-remove-field:hover {
    color: var(--color-ember-glow);
    background: rgba(254, 44, 2, 0.08);
}
.drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: grab;
    color: var(--color-pebble-gray);
    padding: 0.125rem;
    border-radius: 0.25rem;
    transition: color 0.15s;
}
.drag-handle:hover { color: var(--color-obsidian); }
.drag-handle:active { cursor: grabbing; }
.field-card.dragging { opacity: 0.4; border-style: dashed; }
.field-card.drag-over-top    { border-top: 3px solid var(--color-obsidian); }
.field-card.drag-over-bottom { border-bottom: 3px solid var(--color-obsidian); }

.field-editor { display: none; }
.field-editor.active { display: block; }

.product-card-active {
    border-color: var(--color-obsidian) !important;
    background: var(--surface-elev) !important;
}

/* =============================================================
 * Settings two-column layout
 * ============================================================= */
.settings-two-col {
    display: grid;
    grid-template-columns: 30% 1fr;
    height: calc(100vh);
    margin: -1rem -1rem;
}
@media (min-width: 768px) {
    .settings-two-col { margin: -2rem -2rem; }
}

.settings-nav-col {
    overflow-y: auto;
    height: 100%;
}

.settings-content-col {
    overflow-y: auto;
    height: 100%;
    border-left: 1px solid var(--hairline);
    background: var(--surface-subtle);
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-shadow);
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: color 0.15s, background 0.15s;
}
.settings-tab:hover {
    background: var(--surface-elev);
    color: var(--color-obsidian);
}
.settings-tab.active {
    background: var(--surface-elev);
    color: var(--color-obsidian);
    font-weight: 500;
}

/* =============================================================
 * Quotes 2-column layout (threads · focus pane). The focus pane
 * internally splits into a unified email thread (left) and an
 * inspector (right) that re-renders per scroll-focused message.
 * ============================================================= */
.quotes-app {
    display: flex;
    height: calc(100vh);
    margin: -1rem -1rem;
}
@media (min-width: 768px) {
    .quotes-app { margin: -2rem -2rem; }
}

.quotes-list-col {
    overflow-y: auto;
    height: 100%;
    width: 200px;
    min-width: 170px;
    max-width: 40%;
    flex-shrink: 0;
}

.quotes-detail-col {
    height: 100%;
    flex: 1;
    min-width: 0;
    border-left: 1px solid var(--hairline);
    background: var(--surface-card);
    display: flex;
    flex-direction: column;
}

.quotes-resize-handle {
    width: 1px;
    cursor: col-resize;
    background: var(--hairline);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    padding: 0 6px;
    margin: 0 -6px;
    background-clip: content-box;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}
.quotes-resize-handle::after {
    content: '⋮';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface-card);
    border: 1px solid var(--hairline-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--color-pebble-gray);
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    transition: border-color 0.15s, color 0.15s;
}
.quotes-resize-handle:hover::after,
.quotes-resize-handle.dragging::after {
    border-color: var(--color-obsidian);
    color: var(--color-obsidian);
}

/* Detail split: thread (left, wider) + inspector (right, narrower). */
.detail-split {
    display: flex;
    min-width: 0;
}
.detail-thread-wrap {
    flex: 1 1 60%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.detail-thread-col {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}
/* Compose box pinned to the bottom of the unified thread column. The Send
 * button sits absolutely in the textarea's bottom-right corner (Slack-style)
 * so it doesn't claim its own row. The textarea inherits the app's standard
 * form-input chrome from `body textarea`; we only override sizing + the
 * right padding that keeps text from running under the button. */
.manual-reply-form {
    flex-shrink: 0;
    border-top: 1px solid var(--hairline);
    background: var(--surface-card);
    padding: 12px 16px 16px;
    position: relative;
}
.manual-reply-body {
    width: 100%;
    min-height: 64px;
    max-height: 240px;
    resize: vertical;
    padding: 10px 52px 10px 12px;
    font-family: var(--font-inter);
    font-size: 13px;
    line-height: 1.5;
    display: block;
}
/* Icon-only send button. Filled obsidian when enabled, ghost-outline when
 * disabled — keeps the corner from screaming for attention until there's
 * something to send. */
.manual-reply-send {
    position: absolute;
    right: 24px;
    bottom: 22px;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: var(--color-night-sky);
    color: var(--color-ghost);
    border: 1px solid var(--color-night-sky);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.manual-reply-send svg {
    width: 15px;
    height: 15px;
    /* The heroicon paper-airplane is balanced visually a hair left of center;
     * nudge it right so it doesn't look like it's leaning into the textarea. */
    transform: translateX(0.5px);
}
.manual-reply-send:hover:not(:disabled) { background: #2a2b2c; border-color: #2a2b2c; }
.manual-reply-send:active:not(:disabled) { transform: translateY(0.5px); }
.manual-reply-send:disabled {
    background: transparent;
    color: var(--color-pebble-gray);
    border-color: var(--hairline-strong);
    cursor: not-allowed;
}
.manual-reply-status {
    position: absolute;
    left: 24px;
    bottom: 24px;
    font-size: 11px;
    color: var(--color-pebble-gray);
    pointer-events: none;
}
.manual-reply-status.is-error {
    color: var(--color-ember-glow);
}
.manual-reply-status:empty { display: none; }
.detail-inspector-col {
    flex: 1 1 40%;
    min-width: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    border-left: 1px solid var(--hairline);
    background: var(--surface-subtle);
}
.detail-inspector-col.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-pebble-gray);
    font-size: 0.8125rem;
}

/* =============================================================
 * Email thread — every event in the thread rendered as a stacked
 * chronological list. Inbound customer emails + outbound MaxPax
 * replies + forwards + auto-reply acks all share the same card
 * vocabulary so the user reads one conversation, not bubbles.
 * Cards have aggressive wrap rules so raw reply_html (email-client
 * tables, fixed widths, long URLs) never overflows the column.
 * ============================================================= */
.email-thread {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.email-thread-subject {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.125rem 0.25rem;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0.25rem;
}
.email-thread-subject-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-obsidian);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-thread-chip {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #1d4ed8;
    background: #eff6ff;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    letter-spacing: 0.01em;
}

.email-msg {
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    overflow: hidden;
    min-width: 0;
    scroll-margin-top: 16px;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    /* Off-screen cards skip paint/layout. contain-intrinsic-size keeps the
     * scrollbar honest while a card is unrendered. */
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}
.email-msg:hover:not(.is-focused) {
    border-color: var(--hairline-strong);
}
/* Restore default cursor over interactive elements so the click affordance
 * matches what those elements actually do. */
.email-msg a,
.email-msg button,
.email-msg summary,
.email-msg input,
.email-msg textarea,
.email-msg select { cursor: auto; }
.email-msg a, .email-msg button, .email-msg summary { cursor: pointer; }
.email-msg-outbound {
    background: #fafbff;
    border-color: #e2e8f5;
    box-shadow: inset 3px 0 0 #c7d2fe;
}
.email-msg.is-focused {
    border-color: var(--color-obsidian);
    box-shadow: 0 0 0 1px var(--color-obsidian);
}
.email-msg-outbound.is-focused {
    box-shadow: inset 3px 0 0 var(--color-obsidian), 0 0 0 1px var(--color-obsidian);
}

.email-msg-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--hairline);
    background: rgba(0, 0, 0, 0.01);
}
.email-msg-outbound .email-msg-head {
    background: rgba(99, 102, 241, 0.03);
    border-bottom-color: #e2e8f5;
}
.email-msg-avatar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.email-msg-avatar-brand {
    background: #1e293b;
    color: #f8fafc;
}
.email-msg-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.2;
}
.email-msg-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-obsidian);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-msg-sub {
    font-size: 0.6875rem;
    color: var(--color-pebble-gray);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}
.email-msg-dot {
    opacity: 0.6;
    margin: 0 0.125rem;
}
.email-msg-pill {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    letter-spacing: 0.01em;
}
.email-msg-pill-pending { background: #fef3c7; color: #92400e; }
.email-msg-pill-sent { background: #d1fae5; color: #065f46; }
.email-msg-pill-rejected { background: #e5e7eb; color: #475569; }
.email-msg-pill-approval { background: var(--color-night-sky, #0f172a); color: var(--color-ghost, #f8fafc); }
.email-msg-pill-spam { background: #fee2e2; color: #991b1b; }
.email-msg-pill-revision { background: #fef3c7; color: #92400e; }

/* Inspector footer holding Playground / Rerun (+ menu) buttons for the
 * focused message. */
.inspector-actions {
    margin-top: 1.25rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.email-msg-body {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #1f2937;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    /* Scope style/layout invalidation to this card so re-rendering one body
     * doesn't reflow the whole reply column. */
    contain: layout style;
}
.email-msg-body-plain {
    white-space: pre-wrap;
    font-family: var(--font-sans, inherit);
}
/* Forwarded thread tail tucked behind a <details>. Closed = display:none on
 * .email-msg-body-more-rest, so the browser skips layout for it. */
.email-msg-body-more {
    display: block;
    margin-top: 0.5rem;
    white-space: normal;
}
.email-msg-body-more-toggle {
    cursor: pointer;
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 500;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.email-msg-body-more-toggle:hover { text-decoration: underline; }
.email-msg-body-more-toggle::before {
    content: '▸';
    font-size: 0.625rem;
    transition: transform 0.12s ease;
}
.email-msg-body-more[open] .email-msg-body-more-toggle::before {
    transform: rotate(90deg);
}
.email-msg-body-more-rest {
    white-space: pre-wrap;
    margin-top: 0.5rem;
}
.email-msg-body-empty {
    color: var(--color-pebble-gray);
    font-style: italic;
}

/* Isolation wrapper for raw outbound HTML. The reply HTML is real email
 * markup with inline styles, fixed-width tables, and long URLs aimed at
 * email clients. Keep it readable inside a narrow column without letting
 * it punch through. */
.email-msg-body-iso {
    background: var(--surface-card);
}
/* Only the elements that actually carry hard widths in real email HTML
 * need clamping. Applying max-width to every descendant (`*`) plus a
 * border-box override is a layout-cost trap on long replies. */
.email-msg-body-iso :is(img, table, video, iframe, embed, object, pre, svg) {
    max-width: 100% !important;
}
.email-msg-body-iso img {
    height: auto !important;
}
.email-msg-body-iso table {
    width: 100% !important;
    border-collapse: collapse;
    table-layout: auto;
    display: block;
    overflow-x: auto;
}
.email-msg-body-iso td,
.email-msg-body-iso th {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.email-msg-body-iso a {
    overflow-wrap: anywhere;
    word-break: break-all;
    color: #2563eb;
}
.email-msg-body-iso pre,
.email-msg-body-iso code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.email-msg-body-iso p {
    margin: 0 0 0.5rem;
}
.email-msg-body-iso p:last-child {
    margin-bottom: 0;
}

/* Collapsible details */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* =============================================================
 * Multi-quote reply: stacked siblings in the overview column
 * One inbound email can produce several sibling quotes that all ship out
 * in a single MaxPax reply. Each sibling renders as its own section
 * (header + decision + extraction + reasoning + workbook cards) so the
 * user can review every quote without click-driven state.
 * ============================================================= */
.multi-quote-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.multi-quote-stack-summary {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-pebble-gray);
    margin: 0;
}
.multi-quote-section {
    display: block;
    border-top: 1px solid var(--hairline);
    padding-top: 1rem;
}
.multi-quote-section:first-of-type {
    border-top: none;
    padding-top: 0;
}
.multi-quote-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.75rem;
    font-size: 12px;
}
.multi-quote-section-index {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-pebble-gray);
    flex-shrink: 0;
}
.multi-quote-section-id {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-obsidian);
    flex-shrink: 0;
}
.multi-quote-section-product {
    color: var(--color-shadow);
    flex-shrink: 0;
}
.multi-quote-section-spacer { flex: 1; }
.multi-quote-status-chip {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}
.multi-quote-status-chip.status-pending { background-color: #fef3c7; color: #92400e; }
.multi-quote-status-chip.status-sent    { background-color: #d1fae5; color: #065f46; }
.multi-quote-status-chip.status-rejected{ background-color: #f1f5f9; color: #475569; }
.multi-quote-status-chip.status-error   { background-color: #fee2e2; color: #991b1b; }

/* =============================================================
 * Generic filter button (used by costs / admin date-range filters)
 * ============================================================= */
.filter-btn {
    padding: 4px 12px;
    border-radius: var(--radius-button);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--hairline);
    background: var(--surface-card);
    color: var(--color-shadow);
    cursor: pointer;
    transition: all 0.15s;
}
.filter-btn:hover {
    border-color: var(--hairline-strong);
    color: var(--color-obsidian);
}
.filter-btn.active {
    background: var(--color-night-sky);
    border-color: var(--color-night-sky);
    color: var(--color-ghost);
}

/* =============================================================
 * Quote filter (single dropdown — fits any resizable column width)
 * ============================================================= */
.filter-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 4px 26px 4px 12px;
    border-radius: var(--radius-button);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--hairline);
    background-color: var(--surface-card);
    color: var(--color-obsidian);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
    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='%23969696' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
    max-width: 100%;
}
.filter-select:hover {
    border-color: var(--hairline-strong);
}
.filter-select:focus {
    outline: none;
    border-color: var(--color-obsidian);
}
.filter-select[data-filter="pending_review"] {
    color: var(--color-ember-glow);
    border-color: rgba(254, 44, 2, 0.4);
    background-color: rgba(254, 44, 2, 0.04);
}

/* Quote-number search input — shares look with .filter-select */
.quote-search-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.quote-search-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    color: var(--color-pebble, #969696);
    pointer-events: none;
}
.quote-search-input {
    width: 100%;
    padding: 4px 26px 4px 28px;
    border-radius: var(--radius-button);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--hairline);
    background-color: var(--surface-card);
    color: var(--color-obsidian);
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.quote-search-input::placeholder {
    color: var(--color-pebble, #969696);
    font-weight: 400;
}
.quote-search-input:hover {
    border-color: var(--hairline-strong);
}
.quote-search-input:focus {
    outline: none;
    border-color: var(--color-obsidian);
}
.quote-search-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-pebble, #969696);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s, background-color 0.15s;
}
.quote-search-clear:hover {
    color: var(--color-obsidian);
    background-color: rgba(0, 0, 0, 0.04);
}
.quote-search-status {
    font-size: 11px;
    color: var(--color-pebble, #969696);
    padding: 0 2px;
    margin: 0;
}
.quote-search-status.error {
    color: var(--color-ember-glow);
}

/* Quote card (left sidebar list) */
.quote-card {
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 0.4rem 0.625rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    color: var(--color-obsidian);
}
.quote-card:hover { border-color: var(--hairline-strong); background: var(--surface-elev); }
.quote-card-active {
    border-color: var(--color-obsidian) !important;
    background: var(--surface-elev) !important;
}
.quote-card .archive-card-btn {
    opacity: 0;
    transition: opacity 0.15s;
}
.quote-card:hover .archive-card-btn,
.quote-card.quote-card-active .archive-card-btn { opacity: 1; }

/* =============================================================
 * Focus pane header (slim chrome above the thread/inspector split)
 * ============================================================= */
.focus-head {
    flex-shrink: 0;
    padding: 8px 16px;
    border-bottom: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    gap: 8px;
}
.thread-subject {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--color-obsidian);
}
.thread-count {
    font-size: 11px;
    color: var(--color-pebble-gray);
    flex-shrink: 0;
}
.focus-head-spacer { flex: 1; }
.focus-close-btn {
    background: transparent;
    border: none;
    color: var(--color-pebble-gray);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.focus-close-btn:hover {
    background: var(--surface-elev);
    color: var(--color-obsidian);
}

/* =============================================================
 * Previous sends — collapsible card below the Reply block, matching the
 * "Why the AI chose these values" disclosure pattern. Each prior sent
 * version is an inner <details> showing date + price, expandable to the
 * old reply HTML.
 * ============================================================= */
.revision-entry {
    border-top: 1px solid var(--hairline-faint);
    padding: 10px 0;
}
.revision-entry:first-child { border-top: none; padding-top: 0; }
.revision-entry:last-child { padding-bottom: 0; }
.revision-entry > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    color: var(--color-shadow);
    user-select: none;
}
.revision-entry > summary::-webkit-details-marker { display: none; }
.revision-entry-summary span:first-child {
    font-weight: 500;
    color: var(--color-obsidian);
}
.revision-entry-chevron {
    color: var(--color-pebble-gray);
    font-size: 12px;
    transition: transform 120ms;
    flex-shrink: 0;
}
.revision-entry[open] .revision-entry-chevron { transform: rotate(180deg); }
.revision-entry-body {
    margin-top: 8px;
    padding: 12px;
    background: var(--surface-inset);
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-shadow);
}
.revision-entry-empty {
    margin: 8px 0 0;
    font-size: 11.5px;
    color: var(--color-pebble-gray);
    font-style: italic;
}
.revision-multi-note {
    margin: -6px 0 14px;
    font-size: 11.5px;
    color: var(--color-pebble-gray);
}

/* =============================================================
 * Costs two-column layout
 * ============================================================= */
.costs-two-col {
    display: grid;
    grid-template-columns: 30% 1fr;
    height: calc(100vh);
    margin: -1rem -1rem;
}
@media (min-width: 768px) {
    .costs-two-col { margin: -2rem -2rem; }
}
.admin-panel-costs .costs-two-col {
    height: 100%;
    margin: 0;
}
.admin-panel-costs { height: 100%; }

.costs-list-col,
.costs-detail-col {
    overflow-y: auto;
    height: 100%;
}

.costs-detail-col {
    border-left: 1px solid var(--hairline);
    background: var(--surface-card);
}

.cost-card {
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--color-obsidian);
}
.cost-card:hover { border-color: var(--hairline-strong); }
.cost-card-active {
    border-color: var(--color-obsidian) !important;
    background: var(--surface-elev) !important;
}

/* =============================================================
 * Responsive
 * ============================================================= */
@media (max-width: 767px) {
    .settings-two-col {
        grid-template-columns: 1fr;
        height: auto;
    }
    .settings-nav-col {
        height: auto;
        overflow-y: visible;
        border-bottom: 1px solid var(--hairline);
    }
    .settings-nav-col .p-6 { padding: 1rem; }
    .settings-nav-col h1 { margin-bottom: 0.75rem; }
    .settings-nav {
        flex-direction: row !important;
        overflow-x: auto;
        gap: 0.25rem !important;
    }
    .settings-tab {
        white-space: nowrap;
        width: auto;
    }
    .settings-tab svg { display: none; }
    .settings-content-col {
        height: auto;
        overflow-y: visible;
        border-left: none;
    }

    .products-three-col { flex-direction: column; }
    .products-list-col { width: 100% !important; max-width: 100%; }
    .products-resize-handle { display: none; }
    .products-detail-col { display: none; border-left: none; }
    .products-three-col.editing .products-detail-col {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    .products-three-col.editing .products-list-col { display: none; }
    .product-detail-split { flex-direction: column; }
    .product-detail-split.field-open .product-info-col { display: none; }
    .product-field-detail-col {
        display: none;
        border-left: none;
        border-top: 1px solid var(--hairline);
    }
    .product-detail-split.field-open .product-field-detail-col { display: block; }

    .quotes-app { flex-direction: column; }
    .quotes-list-col { width: 100% !important; max-width: 100%; }
    .quotes-resize-handle { display: none !important; }
    .quotes-detail-col { display: none; border-left: none; }
    .quotes-app.viewing .quotes-list-col { display: none; }
    .quotes-app.viewing .quotes-detail-col {
        display: flex;
        flex-direction: column;
        height: 100vh;
        border-top: 1px solid var(--hairline);
    }
    /* Mobile: stack thread above inspector so both are usable on one screen. */
    .detail-split { flex-direction: column; }
    .detail-inspector-col {
        border-left: none;
        border-top: 1px solid var(--hairline);
        max-height: 45vh;
    }

    .costs-two-col { grid-template-columns: 1fr; }
    .costs-detail-col { display: none; border-left: none; }
    .costs-two-col.viewing .costs-detail-col {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    .costs-two-col.viewing .costs-list-col { display: none; }
}

/* Display headline — Giga "Emilio Light" stand-in */
.giga-display {
    font-family: var(--font-display);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1.05;
}
.giga-mono {
    font-family: var(--font-mono);
    letter-spacing: 0.009em;
}

/* =============================================================
 * App-level typography — unified rhythm with marketing pages
 *
 * Marketing pages use display headlines at 48–112px; in-app uses
 * smaller variants (28–32px) but the same weight/tracking voice
 * so the two surfaces feel cut from the same cloth.
 * ============================================================= */

/* Eyebrow — small uppercase Geist Mono label sitting above a
   page or card heading. Same vocabulary as marketing eyebrows. */
.app-page-eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-pebble-gray);
    line-height: 1;
}

/* Page-level display headline — Inter weight 300 with negative
   tracking. ~30px so it punches without dominating data-dense
   dashboards. */
.app-page-headline {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 32px;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--color-obsidian);
}

/* Optional one-line lede under a page headline. */
.app-page-lede {
    color: var(--color-shadow);
    font-size: 15px;
    line-height: 1.5;
    max-width: 760px;
}

/* Card-level uppercase label — same Geist Mono voice as eyebrow,
   one shade quieter. Replaces the old `text-xs uppercase text-cosmic
   tracking-wider` ad-hoc pattern that was scattered across cards. */
.app-card-label {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-pebble-gray);
    line-height: 1;
}

/* Page header block — eyebrow + headline + optional lede. Sits
   above the first content card on each dashboard page. */
.app-page-header {
    margin-bottom: 32px;
}
.app-page-header > .app-page-eyebrow { margin-bottom: 12px; }
.app-page-header > .app-page-headline { margin-bottom: 8px; }

/* Section divider — same hairline gradient as marketing pages.
   Useful between major card groupings. */
.app-section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 50%, transparent 100%);
    margin: 32px 0;
}

/* ========================================================================
   Quote detail cards — decision first, then data, then evidence.
   Used by quotes.js: buildProcessingTabHtml() and the tier-1/2/3/4
   card renderers.
   ======================================================================== */

/* Base card shared by extraction, reasoning, and workbook cards
   — matches the existing .pane / .card convention. */
.detail-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
    cursor: default;
}
/* Clean sans-serif section title — replaces app-card-label for the
   card headers in quote detail (app-card-label is monospaced uppercase
   and reads too cold here). */
.detail-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}
.detail-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.detail-card-head-btn { padding: 5px 12px !important; font-size: 12px !important; }
.detail-card-helper {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 10px;
    line-height: 1.45;
}
.detail-card-fields {
    display: flex;
    flex-direction: column;
}

/* Single field row: label | input | marker, stacked horizontally. */
.quote-field-row {
    display: grid;
    grid-template-columns: 130px 1fr 28px;
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border-top: 1px solid #f1f5f9;
    font-size: 13px;
}
.quote-field-row:first-child { border-top: none; }
.quote-field-name  { font-weight: 500; color: #475569; }
.quote-field-input {
    width: 100%;
    padding: 5px 9px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    background: white;
    box-sizing: border-box;
}
.quote-field-input:focus { border-color: #93c5fd; outline: none; box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.2); }
.quote-field-value       { color: #1e293b; }
.quote-field-uncertain   {
    color: var(--color-ember-glow);
    font-weight: 700;
    font-size: 14px;
    cursor: help;
    text-align: center;
}
.quote-field-computed-badge {
    font-size: 10px;
    color: #94a3b8;
    margin-left: 4px;
}

/* Uncertainty highlight */
.quote-field-row.is-uncertain .quote-field-input {
    border-color: #fcd34d;
    background: #fffbeb;
}

/* ========================================================================
   Decision card — the top-of-detail block the user acts on.
   ======================================================================== */
.decision-card {
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 16px;
    border: 1px solid #e5e7eb;
}
.decision-card-default  { background: white; }
/* Needs-review uses amber/yellow to clearly distinguish from errored quotes,
   which use ember red. Same hue as the amber-400 status dot. */
.decision-card-review   { background: rgba(245, 158, 11, 0.04); border-color: rgba(245, 158, 11, 0.30); }
.decision-card-sent     { background: white; }
.decision-card-rejected { background: #f8fafc; border-color: #e2e8f0; }
.decision-card-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.decision-card-main { min-width: 0; }
.decision-card-label { font-size: 12px; font-weight: 500; color: #64748b; margin-bottom: 6px; text-transform: none; letter-spacing: normal; }
.decision-card-review .decision-card-label { color: #b45309; }

.decision-card-price {
    font-size: 36px;
    font-weight: 300;
    letter-spacing: -0.03em;
    color: var(--color-obsidian);
    line-height: 1;
    margin-bottom: 6px;
}
.decision-card-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 2px;
}
.decision-card-reason {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(254, 44, 2, 0.15);
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
}
.decision-card-review  .decision-card-reason { border-top-color: rgba(245, 158, 11, 0.25); }
.decision-card-rejected .decision-card-reason { border-top-color: #e2e8f0; color: #94a3b8; }
.decision-card-reason-label { font-weight: 600; color: #b45309; }

/* ========================================================================
   Reasoning card — <details> with a visible summary strip.
   ======================================================================== */
.detail-card-collapsible {
    padding: 0;
    cursor: default;
}
.detail-card-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
}
.detail-card-summary-main { min-width: 0; }
.detail-card-summary-meta {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}
.detail-card-summary-code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    background: #f1f5f9;
    padding: 1px 4px;
    border-radius: 3px;
}
.detail-card-summary-chevron {
    color: #94a3b8;
    font-size: 14px;
    transition: transform 0.15s;
    flex-shrink: 0;
    margin-left: 12px;
}
details[open] > .detail-card-summary .detail-card-summary-chevron {
    transform: rotate(180deg);
}
.detail-card-body {
    padding: 0 20px 16px 20px;
    border-top: 1px solid #f1f5f9;
    padding-top: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
}
.detail-card-body-mono {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
}

/* Reasoning content */
.reasoning-meta {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}
.reasoning-warn { color: var(--color-ember-glow); font-weight: 500; }
.reasoning-section { margin-bottom: 14px; }
.reasoning-section:last-child { margin-bottom: 0; }
.reasoning-section-label {
    font-weight: 600;
    font-size: 12px;
    color: var(--color-obsidian);
    margin-bottom: 6px;
}
.reasoning-divider { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0; }

/* Workbook trace rows — monospaced cell mapping */
.workbook-trace-row {
    display: grid;
    grid-template-columns: 120px 20px 120px 1fr;
    gap: 6px;
    padding: 3px 0;
    align-items: baseline;
}
.workbook-trace-row-result { padding-top: 8px; margin-top: 4px; border-top: 1px solid #e5e7eb; }
.workbook-trace-arrow { color: #94a3b8; text-align: center; }
.workbook-trace-cell  { color: #059669; }
.workbook-trace-value { color: #1e293b; }
.workbook-trace-result { font-weight: 600; color: var(--color-obsidian); }