/* AbeTech brand colors — see Company-Branding skill */
:root {
    --ab-primary:       #243044;
    --ab-primary-light: #44546A;
    --ab-red:           #70181A;
    --ab-red-light:     #E03A3E;
    --ab-teal:          #458F9C;
    --ab-mint:          #38BDA0;
    --ab-gold:          #EEB959;
    --ab-orange:        #E98645;

    --ab-bg-page:       #F5F6F8;
    --ab-text:          #1a1a1a;
    --ab-text-muted:    #6b7585;
    --ab-border:        #dde1e7;

    /* Theme surface tokens — flipped under [data-theme="dark"] */
    --ab-surface:        #ffffff;   /* card / panel / source-panel background */
    --ab-surface-2:      #f4f7fb;   /* alt rows, summary header, secondary panels */
    --ab-surface-3:      #fafbfd;   /* table th, very subtle background */
    --ab-surface-hover:  #eef3fa;   /* clickable row / option hover */
    --ab-input-bg:       #ffffff;
    --ab-input-border:   var(--ab-border);
    --ab-shadow:         rgba(36, 48, 68, 0.10);
    --ab-heading:        var(--ab-primary); /* headings / labels — flips to light in dark mode */
    --ab-chip-bg:        #deeaf8;   /* soft brand-blue chip background */
    --ab-chip-text:      var(--ab-primary);
}

[data-theme="dark"] {
    --ab-bg-page:       #161b26;
    --ab-text:          #e8eaed;
    --ab-text-muted:    #9aa3b2;
    --ab-border:        #2d3548;
    --ab-surface:        #1f2533;
    --ab-surface-2:      #262d3d;
    --ab-surface-3:      #2a3142;
    --ab-surface-hover:  rgba(69, 143, 156, 0.12);  /* subtle teal-tint hover, not bright */
    --ab-input-bg:       #0f131c;
    --ab-input-border:   #3a4561;
    --ab-shadow:         rgba(0, 0, 0, 0.45);
    --ab-heading:        #c8d4e6;   /* readable on dark, retains brand cool tone */
    --ab-chip-bg:        rgba(69, 143, 156, 0.20);
    --ab-chip-text:      #bfdbfe;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'proxima-nova', Arial, sans-serif;
    font-size: 14px;
    color: var(--ab-text);
    background: var(--ab-bg-page);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'aktiv-grotesk', Arial, sans-serif;
}

/* ── Brand icons (Lucide outline style) ── */
.ab-icon {
    width: 16px;
    height: 16px;
    color: var(--ab-teal);
    display: inline-block;
    vertical-align: -0.2em;
    flex-shrink: 0;
}

.ab-icon-on-dark { color: #fff; }
.ab-icon-warn    { color: var(--ab-gold); }

.mismatch-badge .ab-icon,
.field-conflict .ab-icon {
    width: 13px;
    height: 13px;
    vertical-align: -0.15em;
}

/* Inline icons inside text-bearing titles get a small right margin */
.po-summary-title .ab-icon,
.llm-panel-title .ab-icon,
.additional-notes-label .ab-icon,
.mismatch-badge .ab-icon,
.disambig-title .ab-icon,
.xref-notes-label .ab-icon,
.field-conflict .ab-icon,
.btn-secondary .ab-icon,
.timing-bar .ab-icon {
    margin-right: 6px;
}

/* ── Header ── */
.app-header {
    background: var(--ab-primary);
    color: #fff;
    padding: 14px 24px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-home-link {
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
    padding: 2px 6px;
    margin: -2px -6px;
    transition: background 0.15s ease;
}

.header-home-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

.app-logo {
    height: 28px;
    width: auto;
    display: block;
}

.app-title-sep {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 300;
}

.app-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.app-subtitle {
    font-size: 12px;
    opacity: 0.65;
    align-self: baseline;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.user-name {
    font-size: 13px;
    opacity: 0.85;
}

/* GP USERID badge — sits just left of the email in the header. Always shown ("GP ID: …") so the field is visible
   even before a value resolves; a muted variant marks the unresolved placeholder. */
.user-gpid {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    white-space: nowrap;
}
.user-gpid-unset { opacity: 0.6; font-weight: 500; background: rgba(255, 255, 255, 0.06); }

.btn-signout {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.15s;
}

.btn-signout:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ── Main ── */
.app-main {
    max-width: 1400px;
    width: 100%;
    margin: 24px auto;
    padding: 0 24px;
    flex: 1;
}

/* ── Footer ── */
.app-footer {
    text-align: center;
    padding: 14px;
    font-size: 12px;
    color: var(--ab-text-muted);
    border-top: 1px solid var(--ab-border);
    flex-shrink: 0;
}

/* ── Search card ── */
.search-card {
    background: var(--ab-surface);
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09);
}

.search-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.search-controls select,
.search-controls input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--ab-border);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    background: var(--ab-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search-controls select {
    min-width: 175px;
}

.search-controls input[type="text"] {
    flex: 1;
    min-width: 220px;
}

.search-controls select:focus,
.search-controls input[type="text"]:focus {
    outline: none;
    border-color: var(--ab-primary);
    box-shadow: 0 0 0 2px rgba(36, 48, 68, 0.15);
}

.search-controls button {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

#searchBtn {
    background: var(--ab-primary);
    color: #fff;
    font-weight: 500;
}

#searchBtn:hover:not(:disabled) {
    background: var(--ab-primary-light);
}

#searchBtn:disabled {
    background: #8fa0b5;
    cursor: not-allowed;
}

#clearBtn {
    background: var(--ab-surface-2);
    color: var(--ab-text);
}

#clearBtn:hover {
    background: var(--ab-surface-3);
}

/* ── Progress row: stage-complete chips sit beside the active loading pill ── */
.progress-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.stage-strip {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    margin-bottom: 18px;
}

.stage-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.stage-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.25s ease;
}

.stage-marker .ab-icon {
    width: 13px;
    height: 13px;
}

.stage-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid currentColor;
    box-sizing: border-box;
}

.stage-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(69, 143, 156, 0.30);
    border-top-color: var(--ab-teal);
    border-radius: 50%;
    animation: stage-spin 0.7s linear infinite;
}

/* Pending — muted, hollow */
.stage-pending { color: var(--ab-text-muted); }

/* Active — teal accent, spinner */
.stage-active { color: var(--ab-teal); }
.stage-active .stage-marker { background: rgba(69, 143, 156, 0.12); }

/* Complete — filled teal check */
.stage-complete { color: var(--ab-teal); }
.stage-complete .stage-marker { background: var(--ab-teal); color: #fff; }

.stage-connector {
    width: 28px;
    height: 2px;
    background: var(--ab-border);
    flex-shrink: 0;
    transition: background-color 0.25s ease;
}

.stage-connector-done { background: var(--ab-teal); }

[data-theme="dark"] .stage-active,
[data-theme="dark"] .stage-complete { color: #7dd3c0; }
[data-theme="dark"] .stage-complete .stage-marker { background: #2f8a7a; }

@keyframes stage-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .stage-spinner { animation: none; }
}

/* ── LLM thinking animation ──
   Pill container with subtle brand-tinted gradient + shimmer pass.
   Three brand-colored dots (teal / gold / orange) pulse in a wave with an expanding
   glow halo. Timer reads as a small teal-tinted live metric pill. */
.llm-thinking {
    display: inline-flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    margin-bottom: 18px;
    padding: 9px 16px 9px 14px;
    background:
        linear-gradient(135deg,
            rgba(69, 143, 156, 0.08) 0%,
            rgba(238, 185, 89, 0.06) 50%,
            rgba(233, 134, 69, 0.08) 100%);
    border: 1px solid var(--ab-border);
    border-radius: 999px;
    box-shadow: 0 2px 10px var(--ab-shadow);
    position: relative;
    overflow: hidden;
}

.llm-thinking::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(69, 143, 156, 0.14) 50%,
        transparent 100%);
    transform: translateX(-100%);
    animation: thinking-shimmer 2.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes thinking-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.llm-thinking > * { position: relative; }

.thinking-dots {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
    padding: 4px 2px;
}

.thinking-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: scale(0.6);
    opacity: 0.35;
    animation: dot-wave 1.3s ease-in-out infinite;
    will-change: transform, opacity, box-shadow;
}

.thinking-dots span:nth-child(1) {
    background: var(--ab-teal);
    color: var(--ab-teal);
}
.thinking-dots span:nth-child(2) {
    background: var(--ab-gold);
    color: var(--ab-gold);
    animation-delay: 0.18s;
}
.thinking-dots span:nth-child(3) {
    background: var(--ab-orange);
    color: var(--ab-orange);
    animation-delay: 0.36s;
}

@keyframes dot-wave {
    0%, 100% {
        transform: scale(0.6);
        opacity: 0.35;
        box-shadow: 0 0 0 0 currentColor;
    }
    40% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 0 0 12px 3px currentColor;
    }
    70% {
        transform: scale(0.85);
        opacity: 0.75;
        box-shadow: 0 0 4px 0 currentColor;
    }
}

.thinking-label {
    font-size: 13px;
    color: var(--ab-text);
    font-weight: 500;
    letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
    .thinking-dots span {
        animation: dot-fade 1.6s ease-in-out infinite;
        transform: none;
    }
    @keyframes dot-fade {
        0%, 100% { opacity: 0.35; }
        50%      { opacity: 1; }
    }
}

/* ── Status areas ── */
.search-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ab-text-muted);
}

.error-area {
    margin-top: 14px;
    padding: 10px 14px;
    background: #fff5f5;
    border: 1px solid #f5a5a5;
    border-radius: 4px;
    color: var(--ab-red-light);
    font-size: 13px;
}

.loading-area {
    margin-top: 14px;
    padding: 8px 0;
    color: var(--ab-text-muted);
    font-style: italic;
    font-size: 13px;
}

.summary-area {
    margin-top: 14px;
    padding: 8px 12px;
    background: var(--ab-surface-2);
    border-radius: 4px;
    font-size: 13px;
    color: var(--ab-heading);
    font-weight: 500;
}

.no-results {
    margin-top: 16px;
    padding: 24px;
    text-align: center;
    color: var(--ab-text-muted);
    font-size: 13px;
}

/* ── Results table ── */
.table-wrap {
    margin-top: 14px;
    overflow-x: auto;
    border-radius: 4px;
    border: 1px solid var(--ab-border);
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.results-table th {
    background: var(--ab-primary);
    color: #fff;
    padding: 9px 12px;
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.results-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--ab-border);
    vertical-align: top;
}

.results-table tbody tr:last-child td {
    border-bottom: none;
}

.results-table tbody tr:hover td {
    background: var(--ab-surface-2);
}

.col-source,
.col-custnum,
.col-soptype,
.col-sopnum,
.col-date,
.col-time {
    white-space: nowrap;
}

.col-custname {
    min-width: 140px;
}

/* Note text: readable, wrapping, not cramped */
.col-notetext {
    white-space: pre-wrap;
    word-break: break-word;
    min-width: 240px;
    max-width: 520px;
    line-height: 1.5;
}

/* ── LLM summary panel ── */
.summarize-bar {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.summarize-bar select {
    padding: 7px 12px;
    border: 1px solid var(--ab-border);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    background: var(--ab-surface);
    min-width: 180px;
}

.summarize-bar select:focus {
    outline: none;
    border-color: var(--ab-primary);
    box-shadow: 0 0 0 2px rgba(36, 48, 68,0.15);
}

#summarizeBtn {
    background: var(--ab-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 18px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

#summarizeBtn:hover:not(:disabled) {
    background: var(--ab-primary-light);
}

#summarizeBtn:disabled {
    background: #8fa0b5;
    cursor: not-allowed;
}

.llm-panel {
    margin-top: 14px;
    background: var(--ab-surface-2);
    border: 1px solid #c5d3e8;
    border-left: 4px solid var(--ab-primary);
    border-radius: 4px;
    overflow: hidden;
}

.llm-panel-header {
    background: var(--ab-primary);
    color: #fff;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.llm-panel-title {
    font-size: 13px;
    font-weight: 600;
}

.llm-panel-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.8;
}

.llm-panel-close:hover {
    opacity: 1;
}

.llm-panel-content {
    padding: 16px 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ab-text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Resolved fields table ── */
.resolve-table {
    width: 100%;
    border-collapse: collapse;
}

.resolve-table th {
    padding: 6px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ab-heading);
    border-bottom: 2px solid var(--ab-border);
    text-align: left;
}

.resolve-table td {
    padding: 7px 0;
    border-bottom: 1px solid var(--ab-border);
    vertical-align: top;
    font-size: 13px;
}

.resolve-table tbody tr:last-child td {
    border-bottom: none;
}

.resolve-label {
    width: 160px;
    font-weight: 600;
    color: var(--ab-heading);
    padding-right: 16px;
    white-space: nowrap;
}

.resolve-value {
    color: var(--ab-text);
}

/* An OPTIONAL not-found field reads GRAY (muted) + italic. A REQUIRED not-found field is overridden back to red by the
   more-specific .resolve-row-required rule below, so "missing required" still stands out. */
.resolve-table td.resolve-empty {
    color: var(--ab-text-muted);
    font-style: italic;
}

#resolveBtn {
    background: var(--ab-surface-2);
    color: var(--ab-text);
    border: none;
    border-radius: 4px;
    padding: 8px 18px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

#resolveBtn:hover:not(:disabled) {
    background: var(--ab-surface-3);
}

#resolveBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Header nav ── */
.header-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    padding-left: 28px;
}

.nav-link {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
}

.nav-active {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.45);
}

/* ── PO Parser card ── */
.po-card {
    background: var(--ab-surface);
    border-radius: 6px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09);
}

.po-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ab-heading);
    margin-bottom: 16px;
}

/* While a parse is in flight, disable interaction with the upload + port controls
   so the user can't change the file or port mid-request. */
#step1.is-loading {
    pointer-events: none;
    opacity: 0.55;
    filter: saturate(0.75);
    transition: opacity 0.15s, filter 0.15s;
}

.po-section-sub {
    font-size: 13px;
    font-weight: 600;
    color: var(--ab-heading);
    margin: 16px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Drop zone ── */
.drop-zone {
    border: 2px dashed #b8c4d4;
    border-radius: 10px;
    padding: 44px 24px 36px;
    text-align: center;
    cursor: pointer;
    background: var(--ab-surface-3);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    margin-bottom: 14px;
    user-select: none;
}

.drop-zone:hover {
    border-color: var(--ab-primary);
    background: var(--ab-surface-hover);
    box-shadow: 0 0 0 4px rgba(36, 48, 68, 0.07);
}

.drop-zone-active {
    border-color: var(--ab-primary);
    background: var(--ab-surface-hover);
    box-shadow: 0 0 0 4px rgba(36, 48, 68, 0.1);
}

.drop-zone-icon {
    margin-bottom: 12px;
    line-height: 1;
}

.drop-zone-icon .ab-icon {
    width: 44px;
    height: 44px;
    color: var(--ab-teal);
    opacity: 0.55;
}

.drop-zone-text {
    font-size: 15px;
    color: var(--ab-text);
    line-height: 1.6;
}

.drop-zone-hint {
    font-size: 13px;
    color: var(--ab-text-muted);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.file-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--ab-heading);
    font-weight: 500;
    background: var(--ab-chip-bg);
    border: 1px solid #b3ccec;
    padding: 4px 14px;
    border-radius: 20px;
}

/* ── PO action row (model selector + parse button) ── */
.po-action-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

#parseBtn.btn-primary {
    background: var(--ab-mint);
    color: #0b1b1a;
}

#parseBtn.btn-primary:hover:not(:disabled) {
    background: #4DD0B3;
    color: #0b1b1a;
}

#parseBtn.btn-primary:disabled {
    background: #8fa0b5;
    color: #fff;
}

[data-theme="dark"] #parseBtn.btn-primary:disabled {
    background: #3a4156;
    color: var(--ab-text-muted);
}

.po-model-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.po-model-label {
    font-size: 13px;
    color: var(--ab-text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.po-model-group select {
    padding: 7px 12px;
    border: 1px solid var(--ab-border);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    background: var(--ab-surface);
    min-width: 200px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.po-model-group select:focus {
    outline: none;
    border-color: var(--ab-primary);
    box-shadow: 0 0 0 2px rgba(36, 48, 68, 0.15);
}

.po-spatial-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ab-text-muted);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.po-spatial-toggle input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* ── PO controls (GP lookup row) ── */
.po-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.po-controls input[type="text"] {
    flex: 1;
    min-width: 220px;
    padding: 8px 12px;
    border: 1px solid var(--ab-border);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    background: var(--ab-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.po-controls input[type="text"]:focus {
    outline: none;
    border-color: var(--ab-primary);
    box-shadow: 0 0 0 2px rgba(36, 48, 68, 0.15);
}

.btn-primary {
    padding: 8px 20px;
    background: var(--ab-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-primary:hover:not(:disabled) {
    background: var(--ab-primary-light);
}

.btn-primary:disabled {
    background: #8fa0b5;
    cursor: not-allowed;
}

.btn-secondary {
    padding: 8px 20px;
    background: var(--ab-surface-2);
    color: var(--ab-text);
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-secondary:hover:not(:disabled) {
    background: var(--ab-surface-3);
}

.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* "+ Add line item" — a distinct dashed teal affordance so it reads as an ADD action and stays visible in dark mode
   (the plain btn-secondary grey blended into the dark card). Works in both themes off the teal token + transparent bg. */
.li-add-btn {
    background: transparent;
    color: var(--ab-teal);
    border: 1px dashed var(--ab-teal);
    font-weight: 600;
}
.li-add-btn:hover:not(:disabled) {
    background: rgba(69, 143, 156, 0.14);
}
[data-theme="dark"] .li-add-btn {
    color: #99e2eb;
    border-color: #5fb0bd;
    background: transparent;
}
[data-theme="dark"] .li-add-btn:hover:not(:disabled) {
    background: rgba(69, 143, 156, 0.22);
}

/* ── Review action buttons — AbeTech brand button system, mapped by intent (review header + footer) ── */
/* Review-screen action buttons (header + footer). ONE shared box so Save/Deny/Approve line up EXACTLY with
   Reprocess (identical height, padding, border, icon size); colors follow the AbeTech button system —
   Approve = primary slate (solid), Deny = jasper red (solid), Save = teal (solid), Reprocess = outlined teal. */
.btn-approve,
.btn-deny,
.btn-save,
.btn-reprocess {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.04s;
}
.btn-approve .ab-icon,
.btn-deny .ab-icon,
.btn-save .ab-icon,
.btn-reprocess .ab-icon { width: 16px; height: 16px; margin-right: 0; }
.btn-approve:active:not(:disabled),
.btn-deny:active:not(:disabled),
.btn-save:active:not(:disabled),
.btn-reprocess:active:not(:disabled) { transform: translateY(1px); }

/* Approve = the primary action -> brand primary (dark slate blue) */
.btn-approve { background: var(--ab-primary); border-color: var(--ab-primary); }
.btn-approve:hover:not(:disabled) { background: var(--ab-primary-light); border-color: var(--ab-primary-light); }

/* Deny = destructive -> brand jasper red */
.btn-deny { background: var(--ab-red-light); border-color: var(--ab-red-light); }
.btn-deny:hover:not(:disabled) { background: var(--ab-red); border-color: var(--ab-red); }

/* Save = commit -> brand 1st accent (teal), solid */
.btn-save { background: var(--ab-teal); border-color: var(--ab-teal); }
.btn-save:hover:not(:disabled) { background: #3a7b86; border-color: #3a7b86; }

/* Reprocess = cautious replay -> brand secondary (outlined teal) */
.btn-reprocess { background: transparent; color: var(--ab-teal); border-color: var(--ab-teal); }
.btn-reprocess:hover:not(:disabled) { background: rgba(69, 143, 156, 0.10); }

.btn-approve:disabled,
.btn-deny:disabled,
.btn-save:disabled,
.btn-reprocess:disabled { opacity: 0.5; cursor: not-allowed; }

/* Bottom action footer on the review/viewing screen */
.review-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--ab-border);
}
.review-footer .review-actions-group {
    display: inline-flex;
    gap: 10px;
    margin-left: auto;   /* Reprocess sits left; Save/Deny/Approve group right */
}

/* Tighter button row at the top of the review screen — same box for ALL of them so they stay aligned */
#reviewHeader .btn-secondary,
#reviewHeader .btn-approve,
#reviewHeader .btn-deny,
#reviewHeader .btn-save,
#reviewHeader .btn-reprocess {
    min-height: 34px;
    padding: 6px 14px;
    font-size: 13px;
}
#reviewHeader .ab-icon { width: 15px; height: 15px; }

/* ── Not-a-PO card ── */
.not-po-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #fffbf0;
    border: 1px solid #f7dfa8;
    border-left: 4px solid var(--ab-gold);
    border-radius: 4px;
    margin-bottom: 16px;
}

.not-po-icon {
    flex-shrink: 0;
    line-height: 1;
}

.not-po-icon .ab-icon {
    width: 24px;
    height: 24px;
    color: var(--ab-gold);
}

.not-po-title {
    font-weight: 600;
    font-size: 14px;
    color: #7a5200;
    margin-bottom: 4px;
}

.not-po-reason {
    font-size: 13px;
    color: #5a3c00;
    line-height: 1.5;
}

/* ── PO summary card ── */
.po-summary-card {
    background: var(--ab-surface-2);
    border: 1px solid #c5d3e8;
    border-radius: 6px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.po-summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.po-summary-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ab-heading);
}

.mismatch-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 12px;
    font-size: 12px;
    color: #7a5200;
    font-weight: 500;
}

.po-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 20px;
    margin-bottom: 14px;
}

.po-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.po-meta-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ab-text-muted);
}

.po-meta-value {
    font-size: 13px;
    color: var(--ab-text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── PO totals ── */
.po-totals {
    margin-top: 12px;
    border-top: 1px solid var(--ab-border);
    padding-top: 10px;
}

.po-tc-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--ab-text-muted);
    padding: 3px 0;
}

.po-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 16px;
    padding: 8px 0 2px;
    margin-top: 2px;
}

.po-total-label {
    font-weight: 700;
    font-size: 16px;
    color: var(--ab-heading);
}

.po-total-value {
    font-weight: 800;
    font-size: 19px;
    color: var(--ab-heading);
}

/* ── GP lookup section ── */
.gp-lookup-section {
    border-top: 1px solid #edf0f4;
    padding-top: 16px;
    margin-top: 8px;
}

/* ── Step 3 actions ── */
.po-actions {
    margin-top: 14px;
}

/* ── Preview buttons (PO Document / GP Notes) — open the side panel ── */
.preview-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
    font-family: inherit;
}

.preview-btn:hover:not(:disabled) {
    background: var(--ab-surface-2);
    border-color: var(--ab-teal);
}

.preview-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.preview-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.preview-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(69, 143, 156, 0.12);
    color: var(--ab-teal);
    flex-shrink: 0;
}

.preview-btn-icon .ab-icon {
    width: 16px;
    height: 16px;
}

.preview-btn-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.preview-btn-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ab-heading);
}

.preview-btn-meta {
    font-size: 12px;
    color: var(--ab-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

/* GP notes side-panel formatting — left bar color matches the GP Notes pill background */
.source-panel-text .gp-note-block {
    font-family: 'proxima-nova', Arial, sans-serif;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-left: 3px solid #dbeafe;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.55;
}

[data-theme="dark"] .source-panel-text .gp-note-block {
    border-left-color: #1e3a64;
}

.source-panel-text .gp-note-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ab-heading);
    margin-bottom: 4px;
}

.source-panel-text .gp-note-text {
    color: var(--ab-text);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.6;
}

/* ── Source badges ── */
.source-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.source-po {
    background: #fef3c7;
    color: #854d0e;
}

.source-gp {
    background: #dbeafe;
    color: #1e3a8a;
}

.source-both {
    background: #dceaee;
    color: var(--ab-teal);
}

.source-none {
    background: #fee2e2;
    color: #b91c1c;
}

/* Muted dash shown in the Source column for an OPTIONAL field that wasn't found (vs the red "Not found" pill, which is
   reserved for required-and-empty fields). Plain text, not a pill — it just indicates "nothing here". */
.source-dash { color: var(--ab-text-muted); }

.source-lookup {
    background: #e0e7ff;
    color: #3730a3;
}

.source-derived {
    background: #ffedd5;
    color: #9a3412;
}

/* "Defaulted" — a value auto-filled from a GP default (Bill To Address ID -> customer's primary bill-to; Shipping
   Method -> matched ship-to's GP ship method). Rendered NEUTRAL gray like the other source badges (see the
   .source-badge.source-default override below, which wins on specificity); this base rule is kept for parity with the
   other per-source colors. */
.source-default {
    background: rgba(154, 103, 0, 0.14);
    color: #9a6700;
}

.resolve-source {
    white-space: nowrap;
    vertical-align: middle;
    padding-left: 12px;
}

.field-conflict {
    margin-top: 4px;
    font-size: 11px;
    color: #7a5200;
    font-style: italic;
}

/* Ship-to "already in GP for this customer?" flag, shown under the Ship To Address value.
   Translucent backgrounds so the same rule reads correctly in light and dark; text brightened in dark. */
.gp-addr-flag {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.gp-addr-known { color: #1f7a64; background: rgba(56, 189, 160, 0.15); }
.gp-addr-new   { color: #9a6700; background: rgba(154, 103, 0, 0.14); }
.gp-addr-none  { color: var(--ab-text-muted); background: rgba(68, 84, 106, 0.10); }
.gp-addr-required { color: var(--ab-red-light); background: rgba(224, 58, 62, 0.12); border: 1px solid rgba(224, 58, 62, 0.40); }
.gp-addr-required .ab-icon { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
[data-theme="dark"] .gp-addr-known { color: #6fd6bd; }
[data-theme="dark"] .gp-addr-new   { color: #e3b341; }
[data-theme="dark"] .gp-addr-none  { color: #9fb0c4; background: rgba(159, 176, 196, 0.14); }
[data-theme="dark"] .gp-addr-required { color: #f5878a; background: rgba(224, 58, 62, 0.22); }

/* Read-only Batch field — the routing decision pill + a click-to-toggle "why this batch" explanation. */
.batch-value { cursor: pointer; }
.batch-pill {
    display: inline-block; padding: 2px 10px; border-radius: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.batch-pill-process { color: #1f7a64; background: rgba(56, 189, 160, 0.15); border: 1px solid rgba(56, 189, 160, 0.45); }
/* ABEINT-REVIEW is a warning / heads-up (needs a human look), not an error — gold, not red. Red is reserved for
   "action needed / blocked" states. */
.batch-pill-review  { color: #9a6700; background: rgba(238, 185, 89, 0.20); border: 1px solid rgba(238, 185, 89, 0.55); }
.batch-why-cue { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--ab-teal); white-space: nowrap; }
.batch-detail {
    margin-top: 8px; padding: 8px 12px; border-radius: 6px;
    background: rgba(68, 84, 106, 0.08); border: 1px solid var(--ab-border);
}
.batch-detail-title { font-size: 12px; font-weight: 700; color: var(--ab-text); margin-bottom: 4px; }
.batch-reasons { margin: 0; padding-left: 18px; }
.batch-reasons li { font-size: 12px; color: var(--ab-text); margin: 2px 0; }
.batch-reasons-clean { font-size: 12px; color: var(--ab-text-muted); }
[data-theme="dark"] .batch-pill-process { color: #6fd6bd; }
[data-theme="dark"] .batch-pill-review  { color: #e3b341; background: rgba(238, 185, 89, 0.18); border-color: rgba(238, 185, 89, 0.45); }
[data-theme="dark"] .batch-detail { background: rgba(159, 176, 196, 0.08); }

/* GP Payment Terms — now a compact pill next to the Payment Terms value (no longer its own row). Match uses the
   same green as the line-item "Price Validated" pill; a mismatch is amber; absent/none is muted. */
.gp-term-pill {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
.gp-term-match { color: #1f7a64; background: rgba(56, 189, 160, 0.15); border: 1px solid rgba(56, 189, 160, 0.45); }
.gp-term-diff  { color: #9a6700; background: rgba(154, 103, 0, 0.14); }
.gp-term-muted { color: var(--ab-text-muted); background: rgba(68, 84, 106, 0.10); }
[data-theme="dark"] .gp-term-match { color: #6fd6bd; background: rgba(56, 189, 160, 0.22); }
[data-theme="dark"] .gp-term-diff  { color: #e3b341; }

/* Shipping Method cross-reference bubbles — the field text is PO-only; these two bubbles (GP notes, GP ship-to address)
   sit to its right. GREEN when the three sources reconcile, YELLOW when they don't (or the ship-to address has no GP
   ship method). A muted bubble = that source had no shipping method. Reuses the gp-term-pill palette. */
.sm-bubbles { display: inline; }
.sm-bubble {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
.sm-bubble-ok    { color: #1f7a64; background: rgba(56, 189, 160, 0.15); border: 1px solid rgba(56, 189, 160, 0.45); }
.sm-bubble-warn  { color: #9a6700; background: rgba(214, 158, 46, 0.16); border: 1px solid rgba(214, 158, 46, 0.50); }
.sm-bubble-muted { color: var(--ab-text-muted); background: rgba(68, 84, 106, 0.10); border: 1px solid transparent; }
[data-theme="dark"] .sm-bubble-ok   { color: #6fd6bd; background: rgba(56, 189, 160, 0.22); }
[data-theme="dark"] .sm-bubble-warn { color: #e3b341; background: rgba(214, 158, 46, 0.20); }

/* D365 Quote result cell — a clean stacked layout (matched line + "View in D365" link, then a pill row, then a note)
   so the quote #, status/expiry pills, and the deep link don't crowd onto one wrapping line. */
.d365-quote-result { display: flex; flex-direction: column; gap: 6px; }
.d365-quote-head { display: flex; align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.d365-quote-num { font-weight: 600; }   /* inherit the field-value text color (no special tint) */
.d365-quote-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.d365-quote-pills .gp-addr-flag { margin-top: 0; }   /* the flex row spaces them — drop the default stacked margin */
.d365-quote-note { font-size: 12px; color: var(--ab-text-muted); }
/* "View in D365" — a secondary (outlined-teal) BUTTON, per the brand button style. */
.quote-view-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border: 1px solid var(--ab-teal); border-radius: 6px;
    color: var(--ab-teal); background: transparent; text-decoration: none;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.quote-view-link:hover { background: var(--ab-teal); color: #fff; text-decoration: none; }
/* "View in D365" on the Customer ID row sits inline beside the value — give it breathing room + smaller footprint. */
.customer-d365-link { margin-left: 10px; padding: 2px 8px; font-size: 11px; vertical-align: middle; }

/* Matched D365 Quote row: a "view details ›" cue (the row is click-to-open). */
.d365-quote-detail-cue { font-size: 11px; color: var(--ab-teal); font-weight: 600; white-space: nowrap; }
[data-theme="dark"] .d365-quote-detail-cue { color: #6fd6bd; }

/* D365 quote-detail pop-out — content styles. The PANEL itself reuses .source-panel (docks like the PO panel); these
   style the body content inside it. */
.quote-detail-body { padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; }
.qd-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.qd-meta-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; align-items: center; }
.qd-meta-label { color: var(--ab-text-muted); }
.qd-meta-val { font-weight: 600; text-align: right; }
/* Status / expiry state pills: green = good (Active / not expired), red = attention (Closed/Won/Draft / expired). */
.qd-pill-ok  { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; color: #1f7a64; background: rgba(56, 189, 160, 0.15); }
.qd-pill-bad { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; color: var(--ab-red-light); background: rgba(224, 58, 62, 0.12); }
[data-theme="dark"] .qd-pill-ok  { color: #5fd081; }
[data-theme="dark"] .qd-pill-bad { color: #f5878a; background: rgba(224, 58, 62, 0.22); }
.qd-viewlink { display: inline-flex; margin-bottom: 14px; }
.qd-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ab-text-muted); font-weight: 700; margin: 8px 0 6px; }
.qd-lines { width: 100%; border-collapse: collapse; font-size: 13px; }
.qd-lines th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ab-text-muted); border-bottom: 1px solid var(--ab-border); padding: 4px 6px; }
.qd-lines td { padding: 6px; border-bottom: 1px solid var(--ab-border); vertical-align: top; }
.qd-lines .col-num { text-align: right; white-space: nowrap; }
.qd-mfg { font-size: 11px; color: var(--ab-text-muted); margin-top: 2px; }
/* Quote total — bottom-right, under the per-line totals column. */
.qd-lines tfoot .qd-total-label { text-align: right; font-weight: 600; color: var(--ab-text-muted); border-bottom: none; padding-top: 8px; }
.qd-lines tfoot .qd-total-val { font-weight: 700; font-size: 14px; border-bottom: none; border-top: 2px solid var(--ab-border); padding-top: 8px; }
.qd-total-standalone { margin-top: 12px; text-align: right; font-size: 14px; }
.qd-empty { font-size: 13px; color: var(--ab-text-muted); font-style: italic; }

/* Source-column badges are NEUTRAL by design — only "Not found" (source-none) stays colored, to flag a missing value.
   Higher specificity (.source-badge.source-X) overrides the per-source colors above in both light and dark mode. */
.source-badge.source-po, .source-badge.source-gp, .source-badge.source-both,
.source-badge.source-lookup, .source-badge.source-derived, .source-badge.source-override,
.source-badge.source-default {
    background: rgba(68, 84, 106, 0.10); color: var(--ab-text-muted);
}
[data-theme="dark"] .source-badge.source-po, [data-theme="dark"] .source-badge.source-gp,
[data-theme="dark"] .source-badge.source-both, [data-theme="dark"] .source-badge.source-lookup,
[data-theme="dark"] .source-badge.source-derived, [data-theme="dark"] .source-badge.source-override,
[data-theme="dark"] .source-badge.source-default {
    background: rgba(159, 176, 196, 0.14); color: #9fb0c4;
}

/* On-demand pickers: D365 active-quote picker (D365 Quote field) + GP item "Find part #" search (a part-less line).
   Outlined-teal trigger button (brand secondary) + a scrollable dropdown of clickable options. */
.quote-pick { margin-top: 6px; }
.li-find-part-wrap { margin-top: 6px; }
.quote-pick-btn, .li-find-part {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; padding: 3px 10px;
    border: 1px solid var(--ab-teal); border-radius: 6px;
    color: var(--ab-teal); background: transparent; cursor: pointer;
}
.quote-pick-btn:hover, .li-find-part:hover { background: var(--ab-teal); color: #fff; }
.quote-pick-results, .li-find-results {
    margin-top: 6px; border: 1px solid var(--ab-border); border-radius: 6px;
    background: var(--ab-surface); max-height: 240px; overflow-y: auto; max-width: 480px;
}
.pick-opt {
    display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
    padding: 6px 10px; cursor: pointer; font-size: 13px;
    border-bottom: 1px solid var(--ab-border);
}
.pick-opt:last-child { border-bottom: none; }
.pick-opt:hover, .pick-opt:focus { background: var(--ab-surface-hover); outline: none; }
.pick-pn { font-weight: 600; color: var(--ab-heading); }
.pick-desc { color: var(--ab-text-muted); flex: 1 1 200px; }
.pick-meta { color: var(--ab-teal); font-weight: 600; font-size: 12px; }
.pick-msg { padding: 8px 10px; font-size: 12px; color: var(--ab-text-muted); }

/* In-row GP item search (line-item editor part# cell): the input + a compact search button, with an inline results
   dropdown below (reuses .part-search-* / .pick-* like the part-less "Find part #" picker, so it isn't clipped by the
   table's overflow). Lets a reviewer search for an item while ADDING or editing a line. */
.li-pn-edit { display: flex; align-items: center; gap: 4px; }
.li-pn-edit .li-i-pn { flex: 1 1 auto; min-width: 0; }
.li-pn-search-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; border: 1px solid var(--ab-teal); border-radius: 4px;
    color: var(--ab-teal); background: transparent; cursor: pointer;
}
.li-pn-search-btn:hover { background: var(--ab-teal); color: #fff; }
/* Inline part-search results: a FLOATING dropdown below the Part # field (position: fixed + JS-set top/left so the
   line-items table's overflow can't clip it), rather than expanding the row vertically. */
.li-pn-search-results {
    position: fixed;
    z-index: 1000;
    max-height: 260px;
    overflow-y: auto;
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-radius: 7px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

/* Required-field marker (red *) + a subtle red accent on a row whose required value isn't filled yet. */
.required-star { color: var(--ab-red-light); font-weight: 700; margin-left: 2px; }
.resolve-table tbody tr.resolve-row-required .resolve-label { color: var(--ab-red-light); }
/* When a required field has no value, the value text ("Not found") is red too — not just the label. */
.resolve-table tbody tr.resolve-row-required td.resolve-value,
.resolve-table tbody tr.resolve-row-required td.resolve-value .rv-text { color: var(--ab-red-light); }
.resolve-table tbody tr.resolve-row-required td.resolve-value .field-edit-btn { color: var(--ab-text-muted); }

/* Ship To Address ID — click-to-view of the GP address the code resolves to. */
.addr-id-row { cursor: pointer; }
.addr-id-code { font-weight: 600; }
.addr-id-detail-cell { padding: 8px 10px; background: rgba(127, 127, 127, 0.08); font-size: 12px; }
.addr-id-detail-addr { font-weight: 600; }
.addr-id-detail-why { color: var(--ab-text-muted); margin-top: 3px; }
/* Pencil edit affordance — mirrors .field-edit-btn so the Address-ID override reads the same as the field edits. */
.addr-id-change { margin-left: 4px; padding: 6px; cursor: pointer; border-radius: 6px; border: 1px solid transparent;
    background: transparent; color: var(--ab-text); opacity: 0.6; vertical-align: middle;
    display: inline-flex; align-items: center; }
.addr-id-change:hover { opacity: 1; background: var(--ab-surface-hover); border-color: var(--ab-border); }
.addr-id-change .ab-icon { width: 18px; height: 18px; }
/* Match the Customer ID field's styled-input look (.site-id-input) so the Ship To / Bill To Address ID pickers
   read as the same control family as the Customer ID search rather than a bare native dropdown. */
.addr-id-select {
    margin-left: 8px;
    max-width: 340px;
    vertical-align: middle;
    padding: 5px 9px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ab-text);
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-radius: 4px;
}
.addr-id-select:focus {
    outline: none;
    border-color: var(--ab-teal);
    box-shadow: 0 0 0 2px rgba(69, 143, 156, 0.20);
}

/* ── Cross-reference notes ── */
.xref-notes {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 10px 14px;
    background: #fffbf0;
    border: 1px solid #f7dfa8;
    border-left: 3px solid var(--ab-gold);
    border-radius: 4px;
    font-size: 13px;
}

.xref-notes-label {
    font-weight: 600;
    color: #7a5200;
    white-space: nowrap;
    flex-shrink: 0;
}

.xref-notes-text {
    color: #5a3c00;
    line-height: 1.5;
}

/* ── Note count badge ── */
.note-count-badge {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

/* ── Numeric cells in line items table ── */
.col-num {
    text-align: right;
    white-space: nowrap;
}

/* Line Items, Additional Line Items, and Assemblies tables: left-align the numeric
   columns (Qty, Unit Price, /N, Line Total, Design Qty, Scrap %) so each value sits
   directly under its left-aligned header. The .po-totals summary block keeps its
   right alignment (it's not a .results-table). */
.results-table .col-num {
    text-align: left;
}

/* Header column with an explanatory tooltip (e.g. /N) — signal hoverability. */
.results-table th.col-help {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

/* Editable Site ID field (overridable by the user). */
.resolve-value-editable { padding-top: 6px; padding-bottom: 6px; }

.site-id-input {
    width: 100%;
    max-width: 240px;
    padding: 5px 9px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ab-text);
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-radius: 4px;
}

.site-id-input:focus {
    outline: none;
    border-color: var(--ab-teal);
    box-shadow: 0 0 0 2px rgba(69, 143, 156, 0.20);
}

/* Special Shipping Instructions — a full-width textarea that starts at one line and auto-grows (height set in JS).
   Overrides the site-id-input max-width + adds textarea behavior (no manual resize handle, no scrollbar). */
.ssi-input {
    max-width: 100%;
    min-height: 32px;
    line-height: 1.4;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    display: block;
}

/* Top-of-review identifiers strip: ConnectWise ticket / GP order # / owner. */
.review-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 10px 16px;
    margin: 0 0 6px;
    background: var(--ab-surface-2);
    border: 1px solid var(--ab-border);
    border-radius: 8px;
}
.review-meta-item { display: flex; flex-direction: column; gap: 2px; }
.review-meta-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ab-text-muted); }
.review-meta-value { font-size: 14px; color: var(--ab-text); font-family: var(--ab-mono, monospace); }
.review-meta-empty { color: var(--ab-text-muted); font-family: inherit; }

/* The free-text Order Notes box at the end of the Order Notes section (Initiative 1). */
.order-notes-input {
    width: 100%;
    margin-top: 10px;
    font-size: 13px;
}
.order-note-list:empty {
    display: none;
}

/* Initiative 7 — Approve button gets a clean green glow when the order is clean enough to auto-process
   (ABEINT-PROCESS): a soft, constant halo plus a slow, gentle "ping" ring. Subtle and professional — no scale,
   brightness, or color changes to the button itself. */
.btn-approve-glow {
    box-shadow: 0 0 8px 0 rgba(56, 189, 160, 0.35), 0 0 0 0 rgba(56, 189, 160, 0.5);
    animation: approve-glow 2s ease-in-out infinite;
}
@keyframes approve-glow {
    0%   { box-shadow: 0 0 8px 0 rgba(56, 189, 160, 0.35), 0 0 0 0 rgba(56, 189, 160, 0.5); }
    70%  { box-shadow: 0 0 8px 0 rgba(56, 189, 160, 0.35), 0 0 0 7px rgba(56, 189, 160, 0); }
    100% { box-shadow: 0 0 8px 0 rgba(56, 189, 160, 0.35), 0 0 0 0 rgba(56, 189, 160, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-approve-glow { animation: none; box-shadow: 0 0 10px 1px rgba(56, 189, 160, 0.45); }
}

/* Initiative 4 — line-item status pills shimmer while parts are being re-validated (Site ID change, re-check, etc.). */
.li-revalidating .li-c-status > * { visibility: hidden; }
.li-revalidating .li-c-status { position: relative; min-height: 18px; }
.li-revalidating .li-c-status::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, var(--ab-surface-2) 25%, var(--ab-surface-hover) 50%, var(--ab-surface-2) 75%);
    background-size: 200% 100%; animation: li-shimmer 1.1s linear infinite;
}
@keyframes li-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Initiative 3 — full-screen overlay while an Approve/Reject is submitting (until the redirect to /Automation). */
.review-submit-overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: none; align-items: center; justify-content: center;
    background: rgba(15, 23, 32, 0.55); backdrop-filter: blur(2px);
}
.review-submit-box {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 28px 36px; border-radius: 12px;
    background: var(--ab-surface); border: 1px solid var(--ab-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.review-submit-msg { font-size: 15px; font-weight: 600; color: var(--ab-text); }
.review-submit-spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--ab-border); border-top-color: var(--ab-teal);
    animation: review-submit-spin 0.8s linear infinite;
}
@keyframes review-submit-spin { to { transform: rotate(360deg); } }

/* Initiative 8 — the "Search part #" picker's type-to-search box + results. */
.part-search-input {
    width: 100%; box-sizing: border-box; padding: 6px 8px; margin-bottom: 6px;
    border: 1px solid var(--ab-border); border-radius: 6px; font-size: 13px;
    background: var(--ab-surface); color: var(--ab-text);
}
.part-search-input:focus { outline: none; border-color: var(--ab-teal); }
.part-search-results { max-height: 280px; overflow-y: auto; }
.pick-mfg { font-size: 11px; color: var(--ab-text-muted); margin-left: 8px; }

/* Reviewer GP customer search (#41) — in-cell search bar + dropdown overlay under the Customer ID field. */
/* Customer ID value cell: the search field and the "View in D365" button on one row (button to the right). */
.customer-id-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.customer-id-cell .customer-d365-link { margin-left: 0; } /* the flex gap handles spacing */
.customer-search-inputwrap {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 200px;
}

/* Override .site-id-input's 240px cap so the search bar fills the wrapper; pad right for the clear button. */
.customer-search-input {
    max-width: none;
    width: 100%;
    padding-right: 30px;
}

.customer-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ab-text);
    opacity: 0.55;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}

.customer-search-clear:hover { opacity: 1; background: var(--ab-surface-hover); }

.customer-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    margin-top: 4px;
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    max-height: 260px;
    overflow-y: auto;
}

/* Dark mode: lift the dropdown off the same-coloured card with a brighter surface, border, and stronger shadow. */
[data-theme="dark"] .customer-search-dropdown {
    background: #2a3346;
    border-color: #46516b;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
}

/* Review field edit (#45): pencil next to an editable field; the value stays click-to-evidence. */
.resolve-value .rv-text { margin-right: 8px; }
.resolve-value .rv-text.rv-edited { color: var(--ab-teal); font-weight: 600; } /* unsaved correction */
.resolve-value .rv-text.rv-multiline { white-space: pre-line; }                /* preserve address line breaks */

.field-edit-multiline {
    width: 100%;
    max-width: 320px;
    min-height: 64px;
    resize: vertical;
    white-space: pre-wrap;
    font-family: inherit;
}

.field-edit-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: 6px;
    cursor: pointer;
    color: var(--ab-text);
    opacity: 0.6;
    vertical-align: middle;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
}

.field-edit-btn:hover { opacity: 1; background: var(--ab-surface-hover); border-color: var(--ab-border); }
.field-edit-btn .ab-icon { width: 18px; height: 18px; }

.customer-search-option {
    padding: 8px 12px;
    cursor: pointer;
    color: var(--ab-text);
    font-size: 13px;
    border-bottom: 1px solid var(--ab-border);
}

.customer-search-option:last-child { border-bottom: none; }

.customer-search-option:hover,
.customer-search-option:focus {
    background: var(--ab-surface-hover);
    outline: none;
}

.customer-search-message {
    padding: 8px 12px;
    color: var(--ab-text);
    font-size: 13px;
    opacity: 0.75;
}

.source-badge.source-override {
    background: rgba(69, 143, 156, 0.15);
    color: var(--ab-teal);
    border: 1px solid rgba(69, 143, 156, 0.4);
}

/* ── Model name label (next to port selector) ── */
.model-name-label {
    font-size: 12px;
    color: var(--ab-text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.model-name-ok {
    color: #1c8a73;
    font-style: normal;
    font-weight: 500;
}

.model-name-warn {
    color: #7a5200;
    font-style: normal;
}

.model-name-error {
    color: var(--ab-red-light);
    font-style: normal;
}

/* ── Timer display (sits inside .llm-thinking pill) ── */
.timer-display {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    color: var(--ab-teal);
    font-weight: 700;
    min-width: 52px;
    text-align: center;
    padding: 3px 10px;
    background: rgba(69, 143, 156, 0.14);
    border-radius: 999px;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .timer-display {
    background: rgba(69, 143, 156, 0.22);
    color: #99e2eb;
}

/* ── Customer disambiguation panel ── */
.disambig-panel {
    margin-top: 10px;
    padding: 12px 14px;
    background: #fffbf0;
    border: 1px solid #f7dfa8;
    border-left: 4px solid var(--ab-gold);
    border-radius: 4px;
}

.disambig-title {
    font-size: 13px;
    font-weight: 600;
    color: #7a5200;
    margin-bottom: 8px;
}

.disambig-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.disambig-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}

.disambig-option:hover {
    background: var(--ab-surface-hover);
    border-color: var(--ab-primary);
}

.disambig-custnum {
    font-size: 12px;
    font-weight: 600;
    color: var(--ab-heading);
    background: var(--ab-chip-bg);
    padding: 2px 10px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 100px;
    text-align: center;
}

.disambig-custname {
    font-size: 13px;
    font-weight: 500;
    color: var(--ab-text);
    flex: 1;
}

.disambig-notecount {
    font-size: 12px;
    color: var(--ab-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.disambig-col-headers {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 12px 5px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7a5200;
}

.dch-gpid {
    min-width: 100px;
    flex-shrink: 0;
}

.dch-name {
    flex: 1;
}

/* ── Order Notes block (gold = attention, not success) ── */
.additional-notes {
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--ab-surface-2);
    border: 1px solid var(--ab-border);
    border-left: 3px solid var(--ab-gold);
    border-radius: 4px;
}

.additional-notes-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ab-heading);
    margin-bottom: 6px;
}

.additional-notes-text {
    font-size: 13px;
    color: var(--ab-text);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.order-note-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-note-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: var(--ab-text);
    line-height: 1.5;
    padding: 5px 8px;
    border-radius: 4px;
}

.order-note-row-clickable {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.order-note-row-clickable:hover {
    background: rgba(0, 0, 0, 0.05);
}

.order-note-row-clickable:focus-visible {
    background: rgba(0, 0, 0, 0.05);
    outline: 2px solid var(--ab-teal);
    outline-offset: 1px;
}

.order-note-bullet {
    color: var(--ab-gold);
    font-weight: 700;
    flex-shrink: 0;
}

.order-note-text {
    flex: 1;
    word-break: break-word;
}

.order-note-why {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ab-teal);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.order-note-row-clickable:hover .order-note-why,
.order-note-row-clickable:focus-visible .order-note-why {
    opacity: 1;
}

/* ── Assemblies section (expandable BOM rows) ── */
.assembly-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assembly-item {
    border: 1px solid rgba(238, 185, 89, 0.55);
    border-radius: 6px;
    overflow: hidden;
}

/* Assembly-required rows are an attention state (they route the order to ABEINT-REVIEW), so the parent row gets a
   gold tint + accent so it clearly stands out from the white card instead of blending in. */
.assembly-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    background: rgba(238, 185, 89, 0.18);
    border-left: 3px solid var(--ab-gold);
    transition: background-color 0.12s ease;
}

.assembly-row:hover { background: rgba(238, 185, 89, 0.28); }
[data-theme="dark"] .assembly-item { border-color: rgba(238, 185, 89, 0.45); }
[data-theme="dark"] .assembly-row { background: rgba(238, 185, 89, 0.13); }
[data-theme="dark"] .assembly-row:hover { background: rgba(238, 185, 89, 0.20); }

.assembly-chevron {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--ab-text-muted);
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
}

.assembly-chevron .ab-icon {
    width: 16px;
    height: 16px;
}

.assembly-row.expanded .assembly-chevron { transform: rotate(0deg); }

.assembly-pn {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    color: var(--ab-heading);
    flex-shrink: 0;
}

.assembly-desc {
    flex: 1;
    color: var(--ab-text);
    word-break: break-word;
}

.assembly-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--ab-gold);
    padding: 2px 8px;
    border-radius: 999px;
}

.assembly-qty {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ab-text);
}

.assembly-count {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--ab-text-muted);
}

.assembly-children {
    padding: 4px 14px 12px;
    background: var(--ab-surface);
}

.assembly-children[hidden] { display: none; }

.assembly-sub-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ab-teal);
    border: 1px solid var(--ab-teal);
    border-radius: 4px;
    padding: 0 4px;
    margin-left: 6px;
    white-space: nowrap;
}

/* ── Parse timing badge (PO summary header) ── */
.parse-timing-badge {
    margin-left: auto;
    font-size: 12px;
    color: var(--ab-text-muted);
}

/* ── Timing bar (step 3) ── */
.timing-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    padding: 6px 12px;
    background: var(--ab-surface-2);
    border: 1px solid var(--ab-border);
    border-radius: 4px;
    font-size: 12px;
    color: var(--ab-text-muted);
}

.timing-label {
    font-weight: 600;
    color: var(--ab-heading);
    margin-right: 2px;
}

.timing-label::after {
    content: ':';
}

.timing-sep {
    color: #c8cdd6;
}

/* ── Login page ── */
.login-body {
    background: var(--ab-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.login-container {
    width: 100%;
    max-width: 420px;
    padding: 24px;
}

.login-card {
    background: var(--ab-surface);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.login-header {
    background: var(--ab-primary);
    color: #fff;
    padding: 32px 32px 28px;
    text-align: center;
}

.login-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 6px;
}

.login-subtitle {
    font-size: 13px;
    opacity: 0.7;
}

.login-body-content {
    padding: 32px;
    text-align: center;
}

.login-description {
    font-size: 14px;
    color: var(--ab-text-muted);
    line-height: 1.6;
    margin-bottom: 28px;
}

.btn-microsoft {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: var(--ab-surface);
    color: var(--ab-text);
    border: 1px solid var(--ab-border);
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.btn-microsoft:hover {
    background: var(--ab-surface-2);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.ms-logo {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}

.login-footer {
    padding: 14px 32px;
    text-align: center;
    font-size: 12px;
    color: var(--ab-text-muted);
    border-top: 1px solid var(--ab-border);
}

/* ── Resolve table clickable rows ── */
.resolve-table tbody tr.resolve-row-clickable {
    cursor: pointer;
    transition: background 0.12s;
}

.resolve-table tbody tr.resolve-row-clickable:hover td {
    background: var(--ab-surface-hover);   /* visible teal-tint hover (surface-2 was ~identical to the row bg in light mode) */
}

.resolve-table tbody tr.resolve-row-clickable .resolve-value::after {
    content: '\203A';
    margin-left: 8px;
    color: var(--ab-text-muted);
    opacity: 0;
    transition: opacity 0.12s;
    font-weight: 700;
}

.resolve-table tbody tr.resolve-row-clickable:hover .resolve-value::after {
    opacity: 1;
}

/* ── Line items inside the Order Entry panel ── */
.oe-line-items {
    margin-top: 18px;
}

/* Give the line-items / additional-items tables a panel surface distinct from the Order Entry card behind them, so
   the table reads as its own block instead of blending into the card (was hard to see in dark mode). The .table-wrap
   border already frames it; this just lifts the fill one step. */
.oe-line-items .table-wrap { background: var(--ab-surface-2); }
.oe-line-items .results-table tbody tr:hover td,
.oe-line-items .results-table tbody tr.line-item-row-clickable:hover td { background: var(--ab-surface-hover); }
/* Slim rows: tighter cell padding than the default results-table so line items read compact, not chunky. */
.oe-line-items .results-table th,
.oe-line-items .results-table td { padding: 5px 10px; }
/* Description is the flexible column — let it wrap and absorb width so the table fits without horizontal scroll. */
.oe-line-items .results-table .li-c-desc { white-space: normal; }

.oe-line-items-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.oe-line-items-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ab-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.results-table tbody tr.line-item-row-clickable {
    cursor: pointer;
}

.results-table tbody tr.line-item-row-clickable:hover td {
    background: var(--ab-surface-2);
}

/* Keyboard focus for line-item rows (#16 follow-up). Outline on the row + a cell-background fallback, since a
   <tr> outline can be clipped by table rendering — guarantees a visible focus state either way. */
.line-item-row-clickable:focus-visible {
    outline: 2px solid var(--ab-teal);
    outline-offset: -2px;
}

.line-item-row-clickable:focus-visible td {
    background: var(--ab-surface-2);
}

[data-theme="dark"] .line-item-row-clickable:focus-visible td {
    background: rgba(69, 143, 156, 0.12);
}

/* ── Page-with-panel layout: po-card shrinks, source panel docks on the right ── */
.po-page-with-panel {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.po-page-with-panel > .po-card {
    flex: 1 1 0;
    min-width: 0;
    margin-right: 16px;
}

body.has-source-panel .po-page-with-panel > .po-card {
    margin-right: 0;
}

/* Drag handle that lets the user resize the panel by dragging its left edge */
.panel-resize-handle {
    display: none;
    flex: 0 0 12px;
    align-self: stretch;
    cursor: ew-resize;
    position: relative;
    background: transparent;
    user-select: none;
}

body.has-source-panel .panel-resize-handle {
    display: block;
    position: sticky;
    top: 0;
    height: 100vh;
}

.panel-resize-handle::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ab-border);
    transition: background 0.12s, left 0.12s, width 0.12s;
}

.panel-resize-handle:hover::before,
.panel-resize-handle.dragging::before {
    background: var(--ab-teal);
    left: 4px;
    width: 4px;
}

/* ── Source panel (in-page inspector — docks flush against viewport right edge) ── */
.source-panel {
    display: none;
    flex: 0 0 50vw;   /* default to half the viewport width; the drag handle still adjusts it */
    min-width: 0;
    max-width: 85vw;
    max-height: calc(100vh - 96px);
    position: sticky;
    top: 16px;
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(36, 48, 68, 0.10);
    flex-direction: column;
    overflow: hidden;
}

.source-panel.source-panel-open {
    display: flex;
}

/* When the panel is open, let .app-main span the full viewport so the panel docks
   to the right edge of the window (no leftover blank space from the centered max-width).
   .app-main's top/bottom margins are intentionally preserved — the panel is sticky
   100vh and covers the full viewport on its own. Removing those margins used to
   cause a visible page jump when toggling the panel at scrollY=0. */
body.has-source-panel .app-main {
    max-width: none;
    padding-right: 0;
}

body.has-source-panel .source-panel {
    /* Sticky at viewport top:0 with full 100vh height. Natural document position is at y=56
       (below the header), so the browser slides the panel up as you scroll, then pins it at
       the top once the header has scrolled out — all on the compositor, no main-thread work. */
    top: 0;
    height: 100vh;
    max-height: 100vh;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
}

@media (max-width: 1100px) {
    .po-page-with-panel { flex-direction: column; }
    .source-panel { flex: 1 1 auto; width: 100%; position: static; max-height: 80vh; }
}

.source-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--ab-primary);
    color: #fff;
    flex-shrink: 0;
}

.source-panel-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.source-panel-label {
    font-family: 'aktiv-grotesk', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.source-panel-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.8;
    flex-shrink: 0;
}

.source-panel-close:hover {
    opacity: 1;
}

.source-panel-value-row {
    padding: 14px 20px;
    border-bottom: 1px solid var(--ab-border);
    background: var(--ab-surface-2);
    flex-shrink: 0;
}

.source-panel-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ab-text-muted);
    margin-bottom: 4px;
}

.source-panel-value {
    font-size: 14px;
    color: var(--ab-text);
    white-space: pre-wrap;
    word-break: break-word;
    font-weight: 500;
}

.source-panel-body {
    padding: 14px 20px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.source-panel-body-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.source-panel-zoom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.source-panel-zoom .zoom-btn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--ab-border);
    background: var(--ab-surface);
    color: var(--ab-heading);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.source-panel-zoom .zoom-btn:hover {
    background: var(--ab-surface-2);
    border-color: var(--ab-primary);
}

#sourcePanelZoomLabel {
    font-size: 11px;
    color: var(--ab-text-muted);
    min-width: 38px;
    text-align: center;
}

.source-panel-pdf {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid var(--ab-border);
    border-radius: 4px;
    background: #4a4a4a;
    padding: 12px;
}

.pdf-page-wrap {
    position: relative;
    display: block;
    margin: 0 auto 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    background: var(--ab-surface);
}

.pdf-page-wrap canvas {
    display: block;
}

.pdf-highlight {
    position: absolute;
    background: rgba(238, 185, 89, 0.45);
    border: 1px solid rgba(112, 24, 26, 0.4);
    border-radius: 2px;
    pointer-events: none;   /* selection passes through to the text layer underneath */
    z-index: 3;             /* above the selectable text layer so the box stays visible */
    animation: pdf-highlight-pulse 1.2s ease-in-out 1;
}

/* PDF.js v4 selectable text layer (transparent text over the canvas) — enables click-drag highlight + Ctrl+F.
   Standard pdf.js text-layer styles, scoped to the source-panel viewer; spans are positioned via --scale-factor
   set on .pdf-page-wrap. */
.pdf-page-wrap .textLayer {
    position: absolute;
    inset: 0;
    text-align: initial;
    overflow: clip;
    opacity: 1;
    line-height: 1;
    text-size-adjust: none;
    forced-color-adjust: none;
    transform-origin: 0 0;
    z-index: 2;
    caret-color: CanvasText;
}
.pdf-page-wrap .textLayer span,
.pdf-page-wrap .textLayer br {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}
.pdf-page-wrap .textLayer span.markedContent {
    top: 0;
    height: 0;
}
.pdf-page-wrap .textLayer .endOfContent {
    display: block;
    position: absolute;
    inset: 100% 0 0;
    z-index: -1;
    cursor: default;
    user-select: none;
}
.pdf-page-wrap .textLayer.selecting .endOfContent { top: 0; }
.pdf-page-wrap .textLayer ::selection { background: rgba(69, 143, 156, 0.35); }

@keyframes pdf-highlight-pulse {
    0%   { background: rgba(238, 185, 89, 0.8); }
    100% { background: rgba(238, 185, 89, 0.45); }
}

.source-panel-text {
    margin-top: 8px;
    padding: 16px 18px;
    background: #fbf7ed;
    border: 1px solid #e6dcc0;
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(36, 48, 68, 0.06);
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.75;
    color: #2a2620;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-y: auto;
    flex: 1;
}

.source-panel-text .derived-explain-intro {
    font-family: 'proxima-nova', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ab-text);
    margin-bottom: 14px;
}

.source-panel-text .derived-explain-list-label {
    font-family: 'proxima-nova', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ab-heading);
    margin-bottom: 6px;
}

.source-panel-text .derived-explain-list {
    font-family: 'proxima-nova', Arial, sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

.source-panel-text .derived-explain-list li {
    padding: 8px 10px;
    margin-bottom: 6px;
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-left: 3px solid #f97316;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
}

.source-panel-text .derived-explain-pn {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    color: var(--ab-heading);
}

.source-panel-text .derived-explain-ds {
    color: var(--ab-text);
}

.source-panel-text .derived-explain-reason {
    color: var(--ab-teal);
    font-size: 12px;
    font-weight: 600;
    font-style: italic;
}

.source-panel-text .derived-explain-match {
    color: var(--ab-text-muted);
    font-size: 11px;
    font-style: italic;
}

.source-panel-text .derived-explain-empty {
    font-family: 'proxima-nova', Arial, sans-serif;
    font-size: 13px;
    color: var(--ab-text-muted);
    font-style: italic;
}

.source-panel-text .derived-explain-rules {
    font-family: 'proxima-nova', Arial, sans-serif;
    list-style: disc;
    padding-left: 22px;
    margin: 0 0 8px 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ab-text);
}

.source-panel-text .derived-explain-rules li {
    margin-bottom: 4px;
}

.source-panel-text .derived-explain-rules em {
    font-style: italic;
    color: var(--ab-text-muted);
}

.source-panel-text .derived-explain-detail {
    font-family: 'proxima-nova', Arial, sans-serif;
    font-size: 13px;
    color: var(--ab-text);
    background: var(--ab-surface-2);
    border: 1px solid var(--ab-border);
    border-radius: 6px;
    padding: 10px 12px;
}

.source-panel-text .derived-explain-detail > div {
    padding: 4px 0;
}

.source-panel-text .derived-explain-detail > div + div {
    border-top: 1px solid var(--ab-border);
}

.source-panel-text .derived-explain-key {
    font-weight: 600;
    color: var(--ab-heading);
    margin-right: 6px;
}

.source-panel-text .derived-explain-val {
    color: var(--ab-text);
}

/* Derived (CONFIGDETAILS) rows in the Additional Line Items section sit on the same panel surface as the other rows —
   no background fill and no left accent of their own (the old yellow "derived" bar was removed). */
.results-table tr.line-item-row-derived td {
    background: transparent;
    color: var(--ab-text);
}

[data-theme="dark"] .results-table tr.line-item-row-derived td {
    background: transparent;
    color: var(--ab-text);
}

/* A line item (primary OR additional) gets a RED left bar when something BLOCKS the GP push — the item isn't in GP, or
   isn't set up at the order's Site ID (the hard gates; same condition as lineStatusMeter's "Blocked" state)... */
.results-table tr[data-blocked="1"] td:first-child {
    box-shadow: inset 4px 0 0 0 var(--ab-red-light);
}
/* ...and a GREEN left bar when the line is fully validated and ready to push (lineStatusMeter's "Ready" state). */
.results-table tr[data-ready="1"] td:first-child {
    box-shadow: inset 4px 0 0 0 var(--ab-mint, #38bda0);
}

.li-pn-derived {
    color: var(--ab-text);
}

[data-theme="dark"] .li-pn-derived {
    color: var(--ab-text);
}

/* ── Line-item validation status (Option D): ONE slim line — a small labelled 3-segment meter (GP · SITE · PRICE) +
   a one-word severity. Segment fills use the brand semantics: mint = passed, gold = warning/review, red =
   failed/blocked, neutral = n/a. The labelled, colored segments (and their tooltips) show WHICH check failed; the
   word gives overall severity. Kept on one line + content-width so rows stay slim and the table never scrolls
   sideways. GP & Site failures are HARD push-gates (red); price/qty/ambiguous issues are warnings (gold → review). */
.li-status-col { width: 1%; white-space: nowrap; }
.li-c-status { white-space: nowrap; }
.li-status { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.li-meter { display: inline-flex; border: 1px solid var(--ab-border); border-radius: 6px; overflow: hidden; }
.li-seg {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 6px; line-height: 1.4;
    border-right: 1px solid rgba(255, 255, 255, 0.35); cursor: help; user-select: none;
}
.li-seg:last-child { border-right: none; }
.li-seg-ok   { background: #38BDA0; color: #0c2b24; }
.li-seg-warn { background: #EEB959; color: #4a3500; }
.li-seg-bad  { background: #E03A3E; color: #ffffff; }
.li-seg-na   { background: var(--ab-surface-3); color: var(--ab-text-muted); border-right-color: var(--ab-border); }
.li-status-word { font-size: 12px; font-weight: 600; }
.li-status-ready  { color: #1f7a64; }
.li-status-review { color: #8a6112; }
.li-status-block  { color: var(--ab-red-light); }
.li-status-na     { color: var(--ab-text-muted); }
[data-theme="dark"] .li-status-ready  { color: #6fd6bd; }
[data-theme="dark"] .li-status-review { color: #f0cb83; }

/* Part-resolution provenance — a quiet, MUTED sub-label under the part #. Informational only (the validation STATE
   lives in the status meter), so it never competes with the status colors. Replaces .li-orig-part + the old pills. */
.li-prov { margin-top: 2px; font-size: 10.5px; color: var(--ab-text-muted); }

/* Inline per-row line-item editing (review screen): a pencil + a red trashcan on every row, with the row's
   cells flipping to inputs (+ a check/cancel) on edit. */
.li-actions { white-space: nowrap; text-align: right; }
.li-actions-col { width: 1%; }

/* Pin the Actions column (edit / save / delete) to the right edge so it stays visible when the line-items table
   scrolls horizontally under a popped-out source panel — the reviewer never has to scroll right to reach the buttons.
   Opaque bg so the scrolling cells pass cleanly underneath; a soft left shadow separates it; hover/dirty rows match. */
#primaryLineItems td.li-actions, #additionalLineItems td.li-actions,
#primaryLineItems th.li-actions-col, #additionalLineItems th.li-actions-col {
    position: sticky; right: 0; z-index: 2;
    /* A step different from the table-wrap surface (surface-2) so the pinned column reads as its own column and isn't
       confused with whatever scrolls underneath it. Opaque + a left divider line + soft shadow. */
    background: var(--ab-surface-3);
    border-left: 1px solid var(--ab-border);
    box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.18);
}
#primaryLineItems th.li-actions-col, #additionalLineItems th.li-actions-col { z-index: 3; }
.oe-line-items .results-table tbody tr:hover td.li-actions { background: var(--ab-surface-hover); }
tr.li-row-dirty > td.li-actions { background: var(--ab-surface-3); }
.li-icon-btn {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    color: var(--ab-text);
    opacity: 0.65;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.li-icon-btn:hover { opacity: 1; background: var(--ab-surface-hover); border-color: var(--ab-border); }
.li-icon-btn:disabled { opacity: 0.25; cursor: default; background: none; border-color: transparent; }
.li-icon-btn .ab-icon { width: 16px; height: 16px; }
.li-row-del .ab-icon  { color: var(--ab-red-light); }
.li-row-done .ab-icon { color: var(--ab-mint); }

/* Lock the line-items tables (primary AND additional — they share the same column structure) so swapping a cell
   to an input never reflows the columns (fixed layout). The Assemblies table has a different structure and is
   intentionally NOT included here.
   Column order — cols 1-6 are identical in view & edit mode; Actions is the edit-only LAST column:
     1 Part #  ·  2 Description (auto — absorbs the slack + wraps)  ·  3 Qty  ·  4 Unit Price  ·  5 Line Total
     ·  6 Status (the GP·SITE·PRICE meter + severity word, sized to hold it on one line)  ·  7 Actions (edit only)
   The fixed widths sum to well under 100%, so Description takes the remainder and the table never scrolls
   sideways. NOTE: the Status column was previously clamped to 82px — a stale width meant for Actions back when
   the table had no Status column. The status-meter commit inserted Status at position 6 and pushed Actions to 7,
   so that 82px starved the nowrap meter and it overflowed its cell, forcing a horizontal scrollbar. (The
   additional-items table had the same latent bug via .li-status-col's width:1% under what is now fixed layout.) */
/* min-width floor so the (flex-remainder) Description column can't be squeezed to ~0 when the source
   pop-out narrows the card — at ~0 width, word-break:break-word wrapped the description ONE CHARACTER
   per line into a giant-tall row. Below this width the table holds its size and .table-wrap (overflow-x:auto)
   scrolls horizontally inside its own box instead of collapsing the column; the wide (panel-closed) layout
   is unaffected since the card is far wider than this floor. Part# 18% + Qty/Price/Total/Status/Actions
   (472px fixed) leaves Description ~150px at the floor — readable, wraps by word. */
#primaryLineItems table, #additionalLineItems table { table-layout: fixed; width: 100%; min-width: 760px; }
#primaryLineItems th:nth-child(1), #primaryLineItems td:nth-child(1),
#additionalLineItems th:nth-child(1), #additionalLineItems td:nth-child(1) { width: 18%; }    /* Part # */
#primaryLineItems th:nth-child(3), #primaryLineItems td:nth-child(3),
#additionalLineItems th:nth-child(3), #additionalLineItems td:nth-child(3) { width: 56px; }   /* Qty */
#primaryLineItems th:nth-child(4), #primaryLineItems td:nth-child(4),
#additionalLineItems th:nth-child(4), #additionalLineItems td:nth-child(4) { width: 88px; }   /* Unit Price */
#primaryLineItems th:nth-child(5), #primaryLineItems td:nth-child(5),
#additionalLineItems th:nth-child(5), #additionalLineItems td:nth-child(5) { width: 88px; }   /* Line Total */
#primaryLineItems th:nth-child(6), #primaryLineItems td:nth-child(6),
#additionalLineItems th:nth-child(6), #additionalLineItems td:nth-child(6) { width: 172px; }  /* Status meter */
#primaryLineItems th:nth-child(7), #primaryLineItems td:nth-child(7),
#additionalLineItems th:nth-child(7), #additionalLineItems td:nth-child(7) { width: 68px; }   /* Actions (edit mode) */
#primaryLineItems td, #additionalLineItems td { word-break: break-word; }   /* long part #s / descriptions wrap instead of overflowing */

/* Assemblies ("Assemblies Required for:") block — the SAME source-pop-out collapse the line-items floor above fixes,
   but this block was missed: the parent rows are flex (not a table) and the component table is ID-less, so neither
   got the #primaryLineItems floor. When the pop-out is enlarged and the Order Entry card narrows, the flex
   .assembly-desc was squeezed toward 0 and word-break:break-word shattered the description one char per line, and
   the component table collapsed the same way. Fix: floor the list to a usable width and let the block scroll
   horizontally inside its own box (mirrors .table-wrap), and give the component table a fixed layout so its
   Description column wraps by word. The wide (panel-closed) layout is far above the floor, so it's unaffected. */
.oe-assemblies { overflow-x: auto; }
.oe-assemblies .assembly-list { min-width: 560px; }
.oe-assemblies .results-table { table-layout: fixed; width: 100%; }
.oe-assemblies .results-table th:nth-child(1), .oe-assemblies .results-table td:nth-child(1) { width: 32%; }   /* Component # */
.oe-assemblies .results-table th:nth-child(3), .oe-assemblies .results-table td:nth-child(3) { width: 96px; }  /* Design Qty */
.oe-assemblies .results-table td { white-space: normal; overflow-wrap: anywhere; }   /* Description wraps by word, not per char */

/* Whole-order Site-ID suggestion under the Site ID combo: which site(s) stock every in-GP part. Advisory only. */
.site-suggestion-hint {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ab-text-muted);
}

/* min-width:0 so an input shrinks to its fixed cell instead of widening the column. */
.li-edit-input { width: 100%; min-width: 0; box-sizing: border-box; }
td.li-c-qty .li-edit-input, td.li-c-price .li-edit-input { text-align: right; }
/* Hide the native number-input spinner arrows on ALL number fields app-wide (line-item qty/price, Admin
   int settings, and any future ones). */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

tr.li-removed .li-c-pn, tr.li-removed .li-c-desc, tr.li-removed .li-c-qty,
tr.li-removed .li-c-price, tr.li-removed .li-c-total { text-decoration: line-through; opacity: 0.5; }
tr.li-row-dirty > td { background: rgba(69, 143, 156, 0.07); }

/* Transient bottom-of-viewport warning toast (e.g. "nothing to save") — visible regardless of scroll position. */
.bottom-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(10px);
    max-width: min(90vw, 520px);
    padding: 11px 18px;
    background: var(--ab-gold);
    color: var(--ab-primary);
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
    opacity: 0;
    pointer-events: none;
    z-index: 1200;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.bottom-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .bottom-toast { transition: opacity 0.2s ease; } }

.li-edit-footer { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.li-edit-footer-actions { margin-left: auto; display: inline-flex; gap: 8px; }
.li-save-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ab-teal); }
.li-save-spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(69, 143, 156, 0.30);
    border-top-color: var(--ab-teal);
    border-radius: 50%;
    animation: stage-spin 0.7s linear infinite;
}
[data-theme="dark"] .li-save-status { color: #7fc4d0; }
@media (prefers-reduced-motion: reduce) { .li-save-spinner { animation: none; } }

.li-derived-chip {
    margin-left: 8px;
    font-size: 10px;
    padding: 1px 6px;
    vertical-align: middle;
}

.source-panel-text mark {
    background: var(--ab-gold);
    color: var(--ab-heading);
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: 600;
}

.source-panel-empty {
    margin-top: 10px;
    padding: 12px 14px;
    background: #fffbf0;
    border: 1px solid #f7dfa8;
    border-left: 3px solid var(--ab-gold);
    border-radius: 4px;
    font-size: 12px;
    color: #5a4318;
    line-height: 1.5;
}

/* ── Settings menu (gear icon in header) ── */
.header-user { position: relative; }

.btn-settings {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    border-radius: 4px;
    padding: 5px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.btn-settings:hover { background: rgba(255, 255, 255, 0.25); }
.btn-settings .ab-icon { display: block; }

.settings-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: var(--ab-surface);
    color: var(--ab-text);
    border: 1px solid var(--ab-border);
    border-radius: 6px;
    box-shadow: 0 6px 20px var(--ab-shadow);
    padding: 6px 0;
    z-index: 100;
}

.settings-menu.open { display: block; }

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

.settings-row:hover { background: var(--ab-surface-2); }

.settings-label { color: var(--ab-text); }

.settings-row-link {
    text-decoration: none;
    color: inherit;
    border-top: 1px solid var(--ab-border);
}

.settings-row-link .ab-icon {
    color: var(--ab-text-muted);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: #c8ccd4;
    border-radius: 20px;
    transition: background 0.18s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.18s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--ab-teal);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(16px);
}

.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid var(--ab-teal);
    outline-offset: 2px;
}

/* ── Dark mode overrides for elements that use literal text/background colors ── */
[data-theme="dark"] body { color: var(--ab-text); }

[data-theme="dark"] .app-footer {
    color: var(--ab-text-muted);
    border-top-color: var(--ab-border);
}

[data-theme="dark"] .resolve-value,
[data-theme="dark"] .resolve-label,
[data-theme="dark"] .po-summary-row-value,
[data-theme="dark"] .po-summary-row-label,
[data-theme="dark"] .file-name,
[data-theme="dark"] .drop-zone-text,
[data-theme="dark"] .timing-label,
[data-theme="dark"] .source-panel-value,
[data-theme="dark"] .li-cell,
[data-theme="dark"] .resolve-table td,
[data-theme="dark"] .line-item-table td {
    color: var(--ab-text);
}

[data-theme="dark"] .timing-sep,
[data-theme="dark"] .drop-zone-hint,
[data-theme="dark"] .user-name {
    color: var(--ab-text-muted);
}

[data-theme="dark"] .drop-zone {
    border-color: var(--ab-border);
    color: var(--ab-text-muted);
}
[data-theme="dark"] .drop-zone:hover { border-color: var(--ab-teal); }
[data-theme="dark"] .drop-zone-active {
    border-color: var(--ab-teal);
    background: rgba(69, 143, 156, 0.10);
}

[data-theme="dark"] .resolve-table th,
[data-theme="dark"] .line-item-table th {
    color: var(--ab-text);
    border-color: var(--ab-border);
}

[data-theme="dark"] .resolve-table td,
[data-theme="dark"] .line-item-table td {
    border-color: var(--ab-border);
}

[data-theme="dark"] .resolve-table tbody tr.resolve-row-clickable:hover td,
[data-theme="dark"] .line-item-row-clickable:hover td {
    background: var(--ab-surface-2);
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--ab-input-bg);
    color: var(--ab-text);
    border-color: var(--ab-input-border);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] input[type="text"]::placeholder,
[data-theme="dark"] input[type="search"]::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--ab-text-muted);
}

/* Highlight chips: lighten background, keep colored text readable */
[data-theme="dark"] .source-po {
    background: #4a3a14;
    color: #fde68a;
}
[data-theme="dark"] .source-gp {
    background: #1e3a64;
    color: #bfdbfe;
}
[data-theme="dark"] .source-both {
    background: #1d4a52;
    color: #99e2eb;
}
[data-theme="dark"] .source-none {
    background: rgba(224, 58, 62, 0.18);
    color: var(--ab-red-light);
}
[data-theme="dark"] .source-lookup {
    background: rgba(99, 102, 241, 0.22);
    color: #c7d2fe;
}
[data-theme="dark"] .source-derived {
    background: rgba(249, 115, 22, 0.22);
    color: #fdba74;
}
[data-theme="dark"] .source-default {
    background: rgba(154, 103, 0, 0.30);
    color: #e3b341;
}

[data-theme="dark"] .field-conflict,
[data-theme="dark"] .xref-notes,
[data-theme="dark"] .additional-notes,
[data-theme="dark"] .source-panel-empty {
    background: #3a2f1a;
    border-color: #6b5526;
    color: #f3d99c;
}

[data-theme="dark"] .xref-notes-text,
[data-theme="dark"] .additional-notes-text {
    color: #f3d99c;
}

[data-theme="dark"] .order-note-row { color: #f3d99c; }
[data-theme="dark"] .order-note-row-clickable:hover,
[data-theme="dark"] .order-note-row-clickable:focus-visible { background: rgba(255, 255, 255, 0.07); }

/* PDF viewer canvas wraps stay white (PDF is white) — but soft border helps in dark mode */
[data-theme="dark"] .pdf-page-wrap {
    box-shadow: 0 0 0 1px var(--ab-border);
}

[data-theme="dark"] .source-panel-pdf {
    background: #11151d;
}

[data-theme="dark"] .source-panel-text {
    background: #0e131c;
    border-color: #3a4561;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
    color: #e8eaed;
}

[data-theme="dark"] .source-panel-text mark {
    background: #6b5526;
    color: #fde68a;
}

/* Buttons: keep brand primary, but soften disabled state in dark */
[data-theme="dark"] .btn-secondary {
    background: var(--ab-surface-2);
    color: var(--ab-text);
    border-color: var(--ab-border);
}
[data-theme="dark"] .btn-secondary:hover:not(:disabled) {
    background: var(--ab-surface-3);
}

/* Settings menu: thumb stays white, slider track darkens */
[data-theme="dark"] .toggle-slider { background: #3d4659; }

/* ── Dark mode: tinted surfaces (alerts, drop zones, summary cards) ── */

/* Drop zone — was light blue tints */
[data-theme="dark"] .drop-zone {
    background: var(--ab-surface-2);
    border-color: var(--ab-border);
    color: var(--ab-text-muted);
}
[data-theme="dark"] .drop-zone:hover {
    background: rgba(69, 143, 156, 0.10);
    border-color: var(--ab-teal);
}
[data-theme="dark"] .drop-zone-active {
    background: rgba(69, 143, 156, 0.15);
    border-color: var(--ab-teal);
}
[data-theme="dark"] .drop-zone-icon { color: var(--ab-teal); }
[data-theme="dark"] .file-label {
    background: rgba(69, 143, 156, 0.15);
    border-color: rgba(69, 143, 156, 0.45);
    color: var(--ab-text);
}
[data-theme="dark"] .file-name { color: var(--ab-text); }
[data-theme="dark"] .file-meta { color: var(--ab-text-muted); }

/* PO summary card variants (#f8faff, #c5d3e8, #eef2f8, #f6f8fb) */
[data-theme="dark"] .po-summary-card,
[data-theme="dark"] .po-summary-info {
    background: var(--ab-surface);
    border-color: var(--ab-border);
}
[data-theme="dark"] .po-summary-header { background: var(--ab-surface-2); }
[data-theme="dark"] .po-summary-title { color: var(--ab-text); }
[data-theme="dark"] .po-summary-row { border-color: var(--ab-border); }
[data-theme="dark"] .po-summary-row-label { color: var(--ab-text-muted); }
[data-theme="dark"] .po-summary-row-value { color: var(--ab-text); }
[data-theme="dark"] .po-totals { background: var(--ab-surface-2); }
[data-theme="dark"] .po-totals-row { color: var(--ab-text); }

/* Preview buttons (dark mode) */
[data-theme="dark"] .preview-btn { background: var(--ab-surface-2); }
[data-theme="dark"] .preview-btn:hover:not(:disabled) {
    background: var(--ab-surface-3);
    border-color: var(--ab-teal);
}
[data-theme="dark"] .preview-btn-icon {
    background: rgba(69, 143, 156, 0.20);
    color: #99e2eb;
}

/* Buttons — secondary/disabled */
[data-theme="dark"] .btn-secondary {
    background: var(--ab-surface-2);
    color: var(--ab-text);
    border-color: var(--ab-border);
}
[data-theme="dark"] .btn-secondary:hover:not(:disabled) { background: var(--ab-surface-3); }
[data-theme="dark"] .btn-secondary:active:not(:disabled) { background: var(--ab-surface); }
[data-theme="dark"] .btn-primary:disabled,
[data-theme="dark"] .btn-secondary:disabled,
[data-theme="dark"] .btn-microsoft:disabled {
    background: #3a4156;
    color: var(--ab-text-muted);
    border-color: var(--ab-border);
}

/* Microsoft sign-in button — was light grey */
[data-theme="dark"] .btn-microsoft {
    background: var(--ab-surface);
    color: var(--ab-text);
    border-color: var(--ab-border);
}
[data-theme="dark"] .btn-microsoft:hover { background: var(--ab-surface-2); }

/* Resize handle background (#f0f2f5) */
[data-theme="dark"] .panel-resize-handle::before { background: var(--ab-border); }

/* Source panel internals (#f8fafc, #f0f4f9, #eef3fa) */
[data-theme="dark"] .source-panel-body { background: var(--ab-surface-2); }
[data-theme="dark"] .source-panel-value-row { background: var(--ab-surface-2); }
[data-theme="dark"] .source-panel-section-label { color: var(--ab-text-muted); }
[data-theme="dark"] .source-panel-value { color: var(--ab-text); }

/* Alert / warning style blocks (the various #fffbf0 + #f7dfa8 / #fff3cd combos) */
[data-theme="dark"] .field-conflict,
[data-theme="dark"] .xref-notes,
[data-theme="dark"] .source-panel-empty,
[data-theme="dark"] .alert-warning {
    background: rgba(238, 185, 89, 0.10);
    border-color: rgba(238, 185, 89, 0.35);
    color: #f3d99c;
}
[data-theme="dark"] .xref-notes-label,
[data-theme="dark"] .field-conflict { color: #f3d99c; }
[data-theme="dark"] .xref-notes-text { color: #f3d99c; }

/* Order Notes: neutral surface with only a thin gold left accent (minimal yellow) — match the light treatment */
[data-theme="dark"] .additional-notes {
    background: var(--ab-surface-2);
    border-color: var(--ab-border);
    border-left-color: var(--ab-gold);
    color: var(--ab-text);
}
[data-theme="dark"] .additional-notes-label { color: var(--ab-gold); }
[data-theme="dark"] .additional-notes-text { color: var(--ab-text); }

/* Error/red soft block (#fff5f5 + #f5a5a5) */
[data-theme="dark"] .alert-error,
[data-theme="dark"] .error-banner {
    background: rgba(224, 58, 62, 0.12);
    border-color: rgba(224, 58, 62, 0.40);
    color: #f7b6b8;
}

/* Line item table — alternating rows / hover bg (#f0f5fb, #deeaf8) */
[data-theme="dark"] .line-item-table tbody tr:nth-child(even) td {
    background: var(--ab-surface-2);
}
[data-theme="dark"] .line-item-table tbody tr.line-item-row-clickable:hover td {
    background: rgba(69, 143, 156, 0.12);
}

/* Resolve table — same idea */
[data-theme="dark"] .resolve-table tbody tr:nth-child(even) td {
    background: var(--ab-surface-2);
}

/* Search/search input area card backgrounds — covered by --ab-surface refactor, but explicit overrides for input borders */
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="search"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--ab-teal);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(69, 143, 156, 0.25);
    outline: none;
}

/* Disabled button gradient sits on lighter grey (#8fa0b5) in light mode — already covered above */

/* Misc text colors */
[data-theme="dark"] .resolve-table td.resolve-empty { color: var(--ab-text-muted); }
[data-theme="dark"] .timing-sep { color: var(--ab-border); }
[data-theme="dark"] .timing-pill,
[data-theme="dark"] .timing-bar { color: var(--ab-text); }

/* Card box-shadows — soften in dark mode */
[data-theme="dark"] .search-card,
[data-theme="dark"] .po-card,
[data-theme="dark"] .po-summary-card,
[data-theme="dark"] .source-panel {
    box-shadow: 0 1px 4px var(--ab-shadow);
}

/* ── Customer disambiguation (warning yellow → soft amber in dark) ── */
[data-theme="dark"] .disambig-panel {
    background: rgba(238, 185, 89, 0.08);
    border-color: rgba(238, 185, 89, 0.28);
    border-left-color: var(--ab-gold);
}
[data-theme="dark"] .disambig-title,
[data-theme="dark"] .disambig-col-headers {
    color: #e8c87a;
}
[data-theme="dark"] .disambig-option {
    background: var(--ab-surface);
    border-color: var(--ab-border);
}
[data-theme="dark"] .disambig-option:hover {
    background: rgba(69, 143, 156, 0.10);
    border-color: var(--ab-teal);
}
[data-theme="dark"] .disambig-custnum {
    background: rgba(69, 143, 156, 0.20);
    color: #bfdbfe;
}
[data-theme="dark"] .disambig-custname { color: var(--ab-text); }
[data-theme="dark"] .disambig-notecount { color: var(--ab-text-muted); }

/* ── Other warning-yellow blocks (PO summary alerts, source panel empty) ── */
[data-theme="dark"] .alert-warning,
[data-theme="dark"] .po-totals-warning,
[data-theme="dark"] .source-panel-empty {
    background: rgba(238, 185, 89, 0.10);
    border-color: rgba(238, 185, 89, 0.32);
    color: #e8c87a;
}

/* Tighten harsh row hover in resolve / line-items tables — translucent teal instead of bright */
[data-theme="dark"] .resolve-table tbody tr.resolve-row-clickable:hover td,
[data-theme="dark"] .line-item-table tbody tr.line-item-row-clickable:hover td,
[data-theme="dark"] .results-table tbody tr.line-item-row-clickable:hover td,
[data-theme="dark"] .results-table tbody tr:hover td {
    background: rgba(69, 143, 156, 0.12);
}

/* Remove the alternating row stripe in dark mode — it looked patchy; let the table be flat */
[data-theme="dark"] .resolve-table tbody tr:nth-child(even) td,
[data-theme="dark"] .line-item-table tbody tr:nth-child(even) td {
    background: transparent;
}

/* Buttons that hover to light grey/blue — keep dark in dark mode */
[data-theme="dark"] #resolveBtn { background: var(--ab-surface-2); color: var(--ab-text); }
[data-theme="dark"] #resolveBtn:hover:not(:disabled) { background: var(--ab-surface-3); }
[data-theme="dark"] #searchBtn:hover:not(:disabled),
[data-theme="dark"] #clearBtn:hover,
[data-theme="dark"] #summarizeBtn:hover:not(:disabled) {
    background: var(--ab-primary-light);
}

/* PO summary alert chip (gold left-border block) */
[data-theme="dark"] .po-summary-row-warn,
[data-theme="dark"] [class*="warn-block"] {
    background: rgba(238, 185, 89, 0.10);
    border-color: rgba(238, 185, 89, 0.32);
    color: #e8c87a;
}

/* The .file-label uses --ab-chip-bg now — already auto-themed */

/* ── Admin dashboard ── */
.admin-page {
    max-width: 1100px;
    margin: 0 auto;
}

.admin-card {
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px var(--ab-shadow);
    padding: 24px;
}

.admin-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 6px;
}

.admin-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ab-teal);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 10px;
    border: 1px solid var(--ab-teal);
    border-radius: 6px;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.admin-back-link:hover {
    background: var(--ab-teal);
    color: #fff;
}

[data-theme="dark"] .admin-back-link {
    color: #93cccd;
    border-color: #93cccd;
}

[data-theme="dark"] .admin-back-link:hover {
    background: rgba(69, 143, 156, 0.20);
    color: #fff;
}

.admin-title {
    font-family: 'aktiv-grotesk', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--ab-heading);
    margin: 0;
}

.admin-subtitle {
    color: var(--ab-text-muted);
    font-size: 13px;
    margin: 0 0 20px 0;
}

.admin-profiles {
    margin: 0 0 20px 0;
    padding: 14px 16px;
    background: var(--ab-surface-3);
    border: 1px solid var(--ab-border);
    border-radius: 4px;
}

.admin-section-help {
    margin: 0 0 12px 0;
    font-size: 12.5px;
    color: var(--ab-text-muted);
    line-height: 1.45;
}

.admin-section-help code {
    font-family: var(--ab-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    padding: 1px 5px;
    background: var(--ab-surface-2);
    border-radius: 3px;
}

.admin-profiles-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

.admin-profiles-table thead th {
    text-align: left;
    font-weight: 700;
    color: var(--ab-heading);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 10px;
    border-bottom: 1px solid var(--ab-border);
}

.admin-profiles-table tbody td {
    padding: 8px 10px;
    border-top: 1px solid var(--ab-border);
    vertical-align: top;
    color: var(--ab-text);
}

.admin-profiles-table .profile-col-name      { width: 24%; font-weight: 600; }
.admin-profiles-table .profile-col-provider  { width: 14%; }
.admin-profiles-table .profile-col-url       { width: 50%; }
.admin-profiles-table .profile-col-actions   { width: 12%; white-space: nowrap; text-align: right; }

.profile-url {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-all;
    font-family: var(--ab-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    line-height: 1.4;
    color: var(--ab-text-muted);
}

.profile-row-active {
    background: rgba(56, 189, 160, 0.07);
}

.profile-active-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--ab-mint, #38bda0);
    color: #0b1b1a;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.profile-empty-row td {
    text-align: center;
    padding: 14px 10px;
    color: var(--ab-text-muted);
    font-style: italic;
}

.btn-apply-profile,
.btn-delete-profile {
    margin-left: 6px;
}

.btn-delete-profile {
    color: #b91c1c;
}

.profile-save-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ab-border);
}

.profile-name-input {
    flex: 1;
    max-width: 380px;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--ab-border);
    border-radius: 3px;
    background: var(--ab-surface);
    color: var(--ab-text);
}

.profile-save-result {
    font-size: 12.5px;
    color: var(--ab-text-muted);
}

.profile-save-result.profile-save-fail {
    color: #b91c1c;
}

.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 17, 27, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.confirm-overlay[hidden] {
    display: none;
}

.confirm-dialog {
    background: var(--ab-surface);
    color: var(--ab-text);
    border: 1px solid var(--ab-border);
    border-radius: 6px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25);
    max-width: 440px;
    width: 100%;
    padding: 18px 20px;
}

.confirm-title {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ab-heading);
}

.confirm-message {
    margin: 0 0 16px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ab-text);
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-danger {
    background: #b91c1c;
    color: #fff;
}

.btn-danger:hover:not(:disabled) {
    background: #991b1b;
}

[data-theme="dark"] .confirm-overlay {
    background: rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .confirm-dialog {
    background: var(--ab-surface-2);
    border-color: var(--ab-border);
}

[data-theme="dark"] .btn-danger {
    background: #dc2626;
}

[data-theme="dark"] .btn-danger:hover:not(:disabled) {
    background: #b91c1c;
}

.admin-connections {
    margin: 0 0 24px 0;
    padding: 14px 16px;
    background: var(--ab-surface-3);
    border: 1px solid var(--ab-border);
    border-radius: 4px;
}

.admin-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ab-heading);
    margin: 0 0 10px 0;
}

.admin-connections-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.admin-connections-head .admin-section-title { margin: 0; }

.admin-connections-list {
    margin-top: 12px;
    border: 1px solid var(--ab-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--ab-surface-2);
}

.admin-connections-list .connection-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-top: 1px solid var(--ab-border);
}
.admin-connections-list .connection-row:first-child { border-top: none; }
.admin-connections-list .connection-row:hover { background: var(--ab-surface-hover); }

.admin-connections-list .conn-info {
    flex: 1 1 46%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-connections-list .conn-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--ab-heading);
}
.admin-connections-list .conn-target {
    color: var(--ab-text-muted);
    font-family: var(--ab-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* The result fills the space BETWEEN the info and the button, so the Test button stays pinned to the right and never
   shifts as the result text changes length (the reported "buttons move around" bug). */
.admin-connections-list .test-result {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
}
.admin-connections-list .conn-note {
    flex: 0 0 auto;
    color: var(--ab-text-muted);
    font-style: italic;
    font-size: 12px;
}
.admin-connections-list .btn-test { flex: 0 0 auto; }

/* Collapsible per-system settings groups */
.settings-group {
    margin: 0 0 12px 0;
    border: 1px solid var(--ab-border);
    border-radius: 4px;
    overflow: hidden;
}

.settings-group-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--ab-surface-3);
    color: var(--ab-heading);
    font-weight: 700;
    font-size: 13px;
    -webkit-user-select: none;
    user-select: none;
}

.settings-group-summary::-webkit-details-marker { display: none; }
.settings-group-summary:hover { filter: brightness(0.97); }

.settings-group-chevron {
    width: 16px;
    height: 16px;
    color: var(--ab-teal, #458F9C);
    transition: transform 0.15s ease;
    flex: 0 0 auto;
}

.settings-group[open] > .settings-group-summary .settings-group-chevron { transform: rotate(90deg); }

.settings-group-name { text-transform: uppercase; letter-spacing: 0.06em; }

.settings-group-count {
    margin-left: auto;
    font-weight: 400;
    font-size: 11.5px;
    color: var(--ab-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.settings-group .admin-table thead th { border-top: 1px solid var(--ab-border); }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.admin-table thead th {
    text-align: left;
    font-weight: 700;
    color: var(--ab-heading);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ab-border);
    background: var(--ab-surface-3);
}

.admin-table .col-key       { width: 34%; }
.admin-table .col-value     { width: 28%; }
.admin-table .col-type      { width: 10%; }
.admin-table .col-meta      { width: 20%; }
.admin-table .col-actions   { width: 8%; text-align: right; }

.admin-table tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--ab-border);
    vertical-align: top;
    font-size: 14px;
    color: var(--ab-text);
    word-wrap: break-word;
}

.admin-table .setting-row:hover {
    background: var(--ab-surface-hover);
}

.admin-table .setting-row.row-editing {
    background: var(--ab-surface-2);
}

.setting-key {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
    color: var(--ab-heading);
}

.setting-description {
    color: var(--ab-text-muted);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.4;
}

.value-display {
    font-family: 'Courier New', Courier, monospace;
    color: var(--ab-text);
    word-break: break-all;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.value-text {
    flex: 0 1 auto;
}

/* Per-row test button = brand secondary (outlined teal); "Test all" = solid teal. Both real, consistently-sized buttons. */
.btn-test,
.btn-test-all {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: 34px;
    padding: 7px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: 'proxima-nova', Arial, sans-serif;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-test {
    background: transparent;
    border: 1px solid var(--ab-teal);
    color: var(--ab-teal);
}
.btn-test:hover:not(:disabled) {
    background: var(--ab-teal);
    color: #fff;
}

.btn-test-all {
    background: var(--ab-teal);
    border: 1px solid var(--ab-teal);
    color: #fff;
}
.btn-test-all:hover:not(:disabled) {
    background: #3a7b86;
    border-color: #3a7b86;
}

.btn-test:disabled,
.btn-test-all:disabled {
    opacity: 0.6;
    cursor: wait;
}

.test-result {
    font-family: 'proxima-nova', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    max-width: 100%;
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.test-result-ok {
    color: #166534;
}

.test-result-fail {
    color: #b91c1c;
}

[data-theme="dark"] .test-result-ok { color: #6ee7b7; }
[data-theme="dark"] .test-result-fail { color: var(--ab-red-light); }

.value-edit {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.value-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--ab-input-border);
    border-radius: 4px;
    background: var(--ab-input-bg);
    color: var(--ab-text);
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
}

.value-input:focus {
    outline: none;
    border-color: var(--ab-teal);
    box-shadow: 0 0 0 2px rgba(69, 143, 156, 0.25);
}

.value-textarea {
    resize: vertical;
    min-height: 60px;
}

.bool-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.bool-toggle-label {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    color: var(--ab-text);
    min-width: 36px;
}

.type-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: lowercase;
    background: var(--ab-chip-bg);
    color: var(--ab-chip-text);
    font-family: 'Courier New', Courier, monospace;
}

.type-pill.type-string  { background: #dceaee; color: #1f3a4a; }
.type-pill.type-int     { background: #e0e7ff; color: #2d2f78; }
.type-pill.type-bool    { background: #d1fae5; color: #065f46; }
.type-pill.type-json    { background: #fef3c7; color: #78350f; }
.type-pill.type-endpoint { background: #fce7f3; color: #831843; }
.type-pill.type-endpoint-provider { background: #ede9fe; color: #4c1d95; }

[data-theme="dark"] .type-pill.type-string  { background: rgba(69, 143, 156, 0.15); color: #93cccd; }
[data-theme="dark"] .type-pill.type-int     { background: rgba(124, 92, 230, 0.15); color: #c4b5fd; }
[data-theme="dark"] .type-pill.type-bool    { background: rgba(34, 197, 94, 0.15); color: #6ee7b7; }
[data-theme="dark"] .type-pill.type-json    { background: rgba(234, 179, 8, 0.15); color: #fde68a; }
[data-theme="dark"] .type-pill.type-endpoint { background: rgba(236, 72, 153, 0.15); color: #f9a8d4; }
[data-theme="dark"] .type-pill.type-endpoint-provider { background: rgba(139, 92, 246, 0.15); color: #c4b5fd; }

.endpoint-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.endpoint-url {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    color: var(--ab-text);
    word-break: break-all;
}

.endpoint-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.endpoint-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.endpoint-field-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ab-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.endpoint-provider,
.endpoint-url-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--ab-input-border);
    border-radius: 4px;
    background: var(--ab-input-bg);
    color: var(--ab-text);
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
}

.endpoint-provider:focus,
.endpoint-url-input:focus {
    outline: none;
    border-color: var(--ab-teal);
    box-shadow: 0 0 0 2px rgba(69, 143, 156, 0.25);
}

.meta-by {
    font-size: 13px;
    color: var(--ab-text);
}

.meta-at {
    font-size: 11px;
    color: var(--ab-text-muted);
    margin-top: 2px;
}

.col-actions button {
    background: none;
    border: 1px solid var(--ab-border);
    color: var(--ab-text-muted);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 4px;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.col-actions button:hover {
    background: var(--ab-surface-hover);
    color: var(--ab-text);
    border-color: var(--ab-teal);
}

.col-actions .btn-save {
    background: var(--ab-teal);
    color: #fff;
    border-color: var(--ab-teal);
    padding: 6px 12px;
    font-weight: 600;
}

.col-actions .btn-save:hover {
    background: var(--ab-primary);
    border-color: var(--ab-primary);
    color: #fff;
}

.col-actions .btn-cancel {
    padding: 6px 12px;
}

.history-row td {
    background: var(--ab-surface-2);
    padding: 0;
}

.history-container {
    padding: 12px 24px;
    border-top: 1px solid var(--ab-border);
}

.history-loading,
.history-empty {
    color: var(--ab-text-muted);
    font-size: 12px;
    font-style: italic;
    padding: 4px 0;
}

.history-entry {
    padding: 8px 0;
    border-bottom: 1px dashed var(--ab-border);
}

.history-entry:last-child {
    border-bottom: none;
}

.history-entry-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--ab-text-muted);
    margin-bottom: 4px;
}

.history-who {
    font-weight: 600;
}

.history-entry-vals {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    flex-wrap: wrap;
}

.history-old {
    color: var(--ab-text-muted);
    text-decoration: line-through;
}

.history-arrow {
    color: var(--ab-text-muted);
}

.history-new {
    color: var(--ab-text);
    font-weight: 600;
}

.admin-error {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(254, 226, 226, 1);
    color: #b91c1c;
    border: 1px solid rgba(252, 165, 165, 0.6);
    font-size: 13px;
}

[data-theme="dark"] .admin-error {
    background: rgba(127, 29, 29, 0.25);
    color: var(--ab-red-light);
    border-color: rgba(248, 113, 113, 0.35);
}

/* ── User management page (#42) ── */
.admin-success {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(220, 252, 231, 1);
    color: #166534;
    border: 1px solid rgba(134, 239, 172, 0.7);
    font-size: 13px;
}

[data-theme="dark"] .admin-success {
    background: rgba(20, 83, 45, 0.25);
    color: #86efac;
    border-color: rgba(74, 222, 128, 0.35);
}

.admin-intro { color: var(--ab-text); opacity: 0.8; font-size: 13px; margin: 4px 0 16px; }
.admin-subtle { color: var(--ab-text); opacity: 0.6; font-size: 12px; }

.user-inline-form { display: inline-flex; align-items: center; gap: 8px; }
.user-inline-form + .user-inline-form { margin-left: 8px; }

.btn-link-danger {
    background: transparent;
    border: none;
    color: var(--ab-red-light, #b91c1c);
    cursor: pointer;
    font-size: 12px;
    text-decoration: underline;
    padding: 0;
    margin-left: 8px;
}

.btn-link-danger:hover { opacity: 0.8; }

/* ── Admin store degraded banner (rendered site-wide when settings can't persist) ── */
.admin-store-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    background: #fff5f5;
    border-bottom: 2px solid #e03a3e;
    color: #7a1f22;
    font-size: 13px;
    line-height: 1.45;
}

.admin-store-banner .ab-icon {
    color: #e03a3e;
    flex-shrink: 0;
    margin-top: 1px;
}

.admin-store-banner a {
    color: inherit;
    text-decoration: underline;
}

[data-theme="dark"] .admin-store-banner {
    background: rgba(224, 58, 62, 0.14);
    border-bottom-color: rgba(248, 113, 113, 0.55);
    color: #f7b6b8;
}

[data-theme="dark"] .admin-store-banner .ab-icon {
    color: #f7b6b8;
}

/* SVG icons stay teal by default; for icons on dark backgrounds they already use currentColor */