@import "variables.css";

/* Row-level saving state: dims the entire row while the API call is in-flight */
.row-saving {
    opacity: 0.42;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Spinner + label shown in the action cell of a saving row */
.saving-cell-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    color: var(--accent-secondary-cold-500);
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-style: italic;
    white-space: nowrap;
}

.saving-cell-indicator::before {
    content: "";
    flex: 0 0 auto;
    width: var(--space-14);
    height: var(--space-14);
    border-radius: 50%;
    border: 2px solid rgba(176, 44, 206, 0.2);
    border-top-color: #b02cce;
    animation: loading-spin 0.9s linear infinite;
}
* {
    box-sizing: border-box;
}
html {
    font-size: 16px;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.45;
    color: var(--text-700);
    background: var(--bg-light-page);
}

.app-shell {
    min-height: 100vh;
}

/* ============================================================================
   Component Base Classes — Consolidated Styles for Reusable Patterns
   ============================================================================ */

/* Base styles for all button variants — primary, secondary, ghost, destructive */

/* Ensure [hidden] always wins over display overrides on button elements */
button[hidden] {
    display: none !important;
}

.button-base,
button,
a.primary-button,
a.secondary-button,
a.ghost-button,
label.primary-button,
label.secondary-button,
label.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: var(--padding-label);
    border-radius: 999px;
    border: var(--border-1-transparent);
    cursor: pointer;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.button-base:hover,
button:hover,
a.primary-button:hover,
a.secondary-button:hover,
a.ghost-button:hover,
label.primary-button:hover,
label.secondary-button:hover,
label.ghost-button:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.button-base:disabled,
button:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Base styles for form fields — input, textarea, and input-like elements */
.form-field-base,
input,
textarea {
    width: 100%;
    font-family: inherit;
    font-size: var(--font-size-base);
    border-radius: var(--border-radius-8);
    border: 1px solid var(--color-gray-light);
    background: var(--surface-white);
    color: var(--text-700);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field-base:hover,
input:hover,
textarea:hover {
    border-color: var(--accent-primary-200);
}

.form-field-base:focus,
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-primary-400);
    box-shadow: 0 0 0 3px rgba(63, 79, 237, 0.14);
}

.form-field-base::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-400);
}

/* Base styles for cards and panels */
.card-base,
.hero-card,
.summary-card,
.quick-card,
.community-card,
.form-panel,
.history-panel,
.result-panel,
.panel {
    display: grid;
    align-content: start;
    background: var(--surface-white);
    border: var(--border-1-light-gray);
    border-radius: var(--space-14);
    box-shadow: var(--shadow-panel);
}

.card-base > *,
.hero-card > *,
.summary-card > *,
.quick-card > *,
.community-card > *,
.form-panel > *,
.history-panel > *,
.result-panel > * {
    min-width: 0;
}

/* Base styles for form field grouping and layout */
.field-group-base,
.field-group {
    display: grid;
    align-content: start;
    gap: var(--space-8);
    margin-top: 0rem;
}

.field-grid-base,
.field-grid {
    display: grid;
    gap: var(--space-16);
}

/* Base styles for labels */
.label-base,
.estimate-form label {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    color: var(--text-600);
    font-weight: 600;
}

html.app-loading,
html.app-booting {
    overflow: hidden;
}

html.app-booting #page-shell,
html.app-booting #login-screen {
    visibility: hidden;
}

html.app-loading #loading-screen,
html.app-booting #loading-screen {
    opacity: 1;
    pointer-events: auto;
}

html.app-loading #loading-screen {
    visibility: visible;
}

html.app-booting.has-session-token #page-shell {
    display: grid;
    visibility: visible;
}

html.app-booting.has-session-token #login-screen {
    display: none;
}

/* Cover the page shell with the loading overlay before JS validates the token.
   Overrides .loading-screen[hidden] { display: none } via higher specificity. */
html.app-booting.has-session-token #loading-screen {
    display: grid;
    visibility: visible;
}

html.app-booting:not(.has-session-token) #login-screen {
    visibility: visible;
}

html.app-booting:not(.has-session-token) #page-shell {
    display: none;
}

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: var(--space-32);
    background: rgba(255, 255, 255, 0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.loading-screen[hidden] {
    display: none;
}

/* Section-scoped loading overlay.
 * Activated by toggling .is-loading on a container (panel, table wrap, etc.).
 * The container must establish a positioning context; we enforce that on
 * .is-loading itself so callers don't have to add inline styles. */
.section-loader {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    background: #ffffff;
    border-radius: inherit;
    pointer-events: auto;
}

.section-loader[hidden] {
    display: none !important;
}

.section-loader-content {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
}

.section-loader-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 0.25rem solid rgba(176, 44, 206, 0.18);
    border-top-color: #b02cce;
    border-right-color: #b02cce;
    animation: loading-spin 0.9s linear infinite;
}

.section-loader-message {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2a69;
    text-align: center;
}

.section-loader-message:empty {
    display: none;
}

.is-loading {
    position: relative;
}

.is-loading > :not(.section-loader) {
    /* Hide the section's content entirely while loading so partially
     * rendered / "bunched up" content does not bleed through the overlay.
     * visibility (rather than display:none) preserves the container's
     * layout so the panel doesn't collapse to fit just the spinner. */
    visibility: hidden;
    pointer-events: none;
}

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

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    isolation: isolate;
    display: grid;
    place-items: center;
    padding: var(--space-24);
}

/* The generic React modal host renders at the end of <body> and assigns each
   stacked dialog an explicit inline z-index (10010 base, +10 per stack level,
   10020 for elevated modals), so it always sits above the in-place legacy
   modals (ai-details, comments) which use the 10000 base above. */

.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay-dark-subtle);
}

.confirm-modal-dialog {
    position: relative;
    width: 30rem;
    padding: var(--space-24);
    border: var(--border-1-light-gray);
    border-radius: var(--space-14);
    background: var(--surface-white);
    box-shadow: var(--shadow-modal);
}

.confirm-modal-dialog--wide {
    width: min(100%, 60rem);
}

/* Native <dialog> for TTFV import modal — fills viewport, centres card with grid */
dialog#new-project-import-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    border: 0;
    padding: var(--space-24);
    background: transparent;
    box-sizing: border-box;
}

dialog#new-project-import-modal[open] {
    display: grid;
    place-items: center;
}

dialog#new-project-import-modal::backdrop {
    background: var(--overlay-dark-subtle);
}

dialog#new-project-import-modal .confirm-modal-dialog {
    margin: 0;
    /* Width is left to the card itself: 30rem for the upload step, and the
       `--wide` modifier (min(100%, 60rem)) for the review step. place-items:
       center keeps the card at its own width rather than stretching it. */
    max-width: 100%;
    max-height: calc(100vh - 2 * var(--space-24));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

dialog#new-project-import-modal .np-import-header {
    flex: 0 0 auto;
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-gray-light);
}

dialog#new-project-import-modal .confirm-modal-copy {
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    margin-right: -24px;
    padding-right: 24px;
    margin-top: 1rem;
}

dialog#new-project-import-modal .confirm-modal-actions {
    flex: 0 0 auto;
}

.zyte-data-estimate-modal-dialog {
    width: min(100%, 46rem);
}

.zyte-api-estimate-modal-dialog {
    width: min(100%, 52rem);
}

.zyte-api-customer-lookup-modal-dialog {
    width: min(100%, 46rem);
}

.org-lookup-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
    align-items: center;
}

.org-lookup-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 3rem;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
    color: var(--text-600);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.org-lookup-trigger:hover,
.org-lookup-trigger:focus-visible {
    border-color: var(--accent-secondary-cold-500);
    background: var(--surface-light-blue);
    color: var(--accent-secondary-cold-500);
}

.org-lookup-trigger .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

.zyte-api-selected-customer {
    margin-top: var(--space-8);
}

.confirm-modal-dialog .field-grid label {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-600);
}

.comments-modal-dialog {
    width: min(100%, 36rem);
}

/* ============================================================
   Comments / Chat UI (inside comments modal)
   ============================================================ */

.comments-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    overflow-y: auto;
    padding: var(--space-12) 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.comments-list[hidden] {
    display: none;
}

.comments-empty {
    margin: auto;
    color: var(--text-400);
    font-size: var(--font-size-sm);
    font-style: italic;
    text-align: center;
}

.comment-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(176, 44, 206, 0.12);
    color: var(--accent-secondary-cold-500);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.comment-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-12);
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.comment-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.comment-header-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Kebab (⋮) menu trigger on each comment, shown only for the caller's own
   comments. Subtle at rest, becomes opaque on hover/focus. */
.comment-kebab {
    position: relative;
    flex-shrink: 0;
}

.comment-kebab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-400, #9ca3af);
    opacity: 0.7;
    transition: background-color 120ms ease-in-out, color 120ms ease-in-out, opacity 120ms ease-in-out;
}

.comment-item:hover .comment-kebab-button,
.comment-kebab-button:focus-visible,
.comment-kebab.is-open .comment-kebab-button {
    opacity: 1;
}

.comment-kebab-button:hover {
    background-color: var(--surface-100, #f3f4f6);
    color: var(--text-700, #374151);
}

.comment-kebab-button .material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
}

.comment-kebab-button[disabled] {
    cursor: not-allowed;
    opacity: 0.35;
}

.comment-kebab-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 140px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--border-100, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 20;
    display: none;
}

.comment-kebab.is-open .comment-kebab-menu {
    display: block;
}

.comment-kebab-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-8);
    width: 100%;
    padding: 6px 10px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-700, #374151);
    text-align: left;
}

.comment-kebab-menu-item:hover {
    background-color: var(--surface-100, #f3f4f6);
}

.comment-kebab-menu-item .material-symbols-outlined {
    font-size: 1rem;
}

.comment-kebab-menu-item--danger {
    color: var(--color-danger, #dc2626);
}

.comment-kebab-menu-item--danger:hover {
    background-color: rgba(220, 38, 38, 0.08);
}

/* Inline edit form rendered in place of a comment's text when the user picks
   "Edit" from the kebab menu. */
.comment-edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: var(--space-4) 0 0;
}

.comment-edit-form textarea {
    width: 99%;
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--text-700, #374151);
    background: var(--surface-0, #fff);
    border: 1px solid var(--border-300, #d1d5db);
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    resize: vertical;
}

.comment-edit-form textarea:focus-visible {
    outline: 2px solid var(--accent-500, #2563eb);
    outline-offset: 1px;
}

.comment-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
}

.comment-item--editing .comment-text {
    display: none;
}

/* Pagination bar shown below the comments list. */
.comments-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-8) 0 0;
    margin-top: var(--space-8);
    border-top: 1px solid var(--border-100, #e5e7eb);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-500, #6b7280);
}

.comments-pagination-size {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
}

.comments-pagination-size select {
    font: inherit;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--text-700);
    background: var(--surface-0, #fff);
    border: 1px solid var(--border-300, #d1d5db);
    border-radius: 6px;
    padding: 0.2rem 1.5rem 0.2rem 0.45rem;
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23b0b0b0" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');    background-repeat: no-repeat;
    background-position: right 0.45rem center;
    min-height: 1.85rem;
}

.comments-pagination-size select:focus-visible {
    outline: 2px solid var(--accent-500, #2563eb);
    outline-offset: 1px;
}

.comments-pagination-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
}

.comments-pagination-nav .icon-button[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

.comments-pagination-info {
    min-width: 6.5rem;
    text-align: center;
}

.comment-author {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-700, #374151);
}

.comment-time {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-400);
}

.comment-text {
    margin: 0.25rem 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-700, #374151);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}

.comments-composer {
    display: flex;
    gap: var(--space-8);
    align-items: flex-start;
}

.comments-composer-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.comments-composer-avatar {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.comments-composer textarea {
    width: 100%;
    min-height: 2.75rem;
    resize: vertical;
    padding: var(--padding-form-field);
    line-height: 1.45;
}

.comments-composer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-8);
}

.comments-composer-actions button {
    flex-shrink: 0;
    white-space: nowrap;
}

.customer-info-modal-dialog {
    width: min(100%, 75rem);
}

.maintenance-monthly-modal-dialog {
    width: min(100%, 48rem);
}

.maintenance-monthly-content {
    margin-top: var(--space-16);
    max-height: min(75vh, 40rem);
    overflow-y: auto;
}

/* Maintenance modal chart palette + summary tiles.
   Reuses .zd-chart / .zd-bar / .zd-line / legend infrastructure but with
   its own colour pair (purple bars for tickets, amber line for hrs/ticket)
   so it's visually distinct from the Zyte Data requests/records chart. */
.mm-bar--tickets       { fill: #7c3aed; }
.mm-swatch--tickets    { background: #7c3aed; }
.mm-line--hpt          { stroke: #f59e0b; }
.mm-line-dot--hpt      { stroke: #f59e0b; }
.mm-swatch--hpt        { background: transparent; border: 2px solid #f59e0b; border-radius: 999px; height: 4px; width: 16px; }

.mm-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
    margin-bottom: var(--space-16);
    align-items: stretch;
}

.mm-hero {
    background: var(--surface-50, #f9fafb);
    border: 1px solid var(--border-100, #e5e7eb);
    border-radius: 12px;
    padding: var(--space-16);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.mm-hero-label {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-500, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mm-hero-value {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--text-900, #111827);
    line-height: 1.1;
}

.mm-hero-unit {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-500, #6b7280);
}

.mm-hero-sub {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-500, #6b7280);
}

.mm-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
}

.mm-stat {
    background: var(--surface-0, #fff);
    border: 1px solid var(--border-100, #e5e7eb);
    border-radius: 10px;
    padding: var(--space-12) var(--space-12);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mm-stat-label {
    font-size: 0.6875rem;
    color: var(--text-500, #6b7280);
    line-height: 1.25;
}

.mm-stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-900, #111827);
}

@media (max-width: 640px) {
    .mm-summary {
        grid-template-columns: 1fr;
    }
}

/* Zyte Data per-feed monthly chart popup. Wider than the maintenance modal
   so the bar+line combo chart can breathe. */
.zyte-data-monthly-modal-dialog {
    width: min(100%, 48rem);
}

.zyte-data-monthly-content {
    margin-top: var(--space-16);
    max-height: min(75vh, 40rem);
    overflow-y: auto;
}

.zd-chart {
    width: 100%;
    height: auto;
    display: block;
}

.zd-chart-legend {
    display: flex;
    gap: var(--space-16);
    flex-wrap: wrap;
    margin-bottom: var(--space-12);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-600, #4b5563);
}

.zd-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.zd-chart-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.zd-chart-legend-swatch--requests { background: #2563eb; }
.zd-chart-legend-swatch--records  { background: #10b981; }
.zd-chart-legend-swatch--ratio    { background: transparent; border: 2px solid #f59e0b; border-radius: 999px; height: 4px; width: 16px; }

.zd-bar--requests { fill: #2563eb; }
.zd-bar--records  { fill: #10b981; }
.zd-line          { stroke: #f59e0b; stroke-width: 2; }
.zd-line-dot      { fill: #fff; stroke: #f59e0b; stroke-width: 2; }
.zd-gridline      { stroke: var(--border-100, #e5e7eb); stroke-width: 1; }

.maintenance-monthly-content .zd-axis-label {
    font-size: 12px !important;
}

.zd-axis-label {
    font-size: 8px;
    vector-effect: non-scaling-stroke;
    fill: var(--text-500, #6b7280);
}
.zd-axis-label--right { fill: #b45309; }

/* Interactive chart hover: per-month invisible hit zones drive a floating
 * tooltip card + a vertical guide line. The wrapper establishes a
 * positioning context for the absolutely-positioned tooltip. */
.zd-chart-wrap {
    position: relative;
}
.zd-hover-zone {
    fill: transparent;
    cursor: crosshair;
}
.zd-hover-zone:hover {
    /* Subtle column highlight on hover. */
    fill: rgba(99, 102, 241, 0.06);
}
.zd-hover-guide {
    stroke: rgba(99, 102, 241, 0.55);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms ease;
}
.zd-chart-tooltip {
    position: absolute;
    z-index: 20;
    min-width: 9rem;
    max-width: 16rem;
    padding: 0.5rem 0.65rem;
    background: rgba(17, 24, 39, 0.94);
    color: #f9fafb;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
    font-size: 0.75rem;
    line-height: 1.35;
    pointer-events: none;
    transform: translateZ(0);
}
.zd-chart-tooltip[hidden] { display: none; }
.zd-chart-tooltip-title {
    font-weight: 700;
    font-size: 0.78rem;
    margin-bottom: 0.25rem;
    color: #ffffff;
}
.zd-chart-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.zd-chart-tooltip-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(243, 244, 246, 0.85);
}
.zd-chart-tooltip-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}
.zd-chart-tooltip-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #ffffff;
}


.maintenance-monthly-table-wrap {
    overflow-x: auto;
}

.maintenance-monthly-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-24) 0;
    min-height: 6rem;
}

.maintenance-monthly-avg-row td {
    border-top: 2px solid var(--color-gray-light);
    padding-top: 0.5rem;
}

.maintenance-monthly-total-row td {
    color: var(--text-400, #6b7280);
    font-size: var(--font-size-sm);
}


.analysis-log-modal-dialog {
    width: min(100%, 56rem);
}

.analysis-log-content {
    max-height: min(65vh, 34rem);
    margin-top: var(--space-16);
    overflow-y: auto;
}

.customer-info-content {
    margin-top: var(--space-16);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-16);
    align-items: start;
}

.analysis-customer-section + .analysis-customer-section {
    margin-top: 0;
}

.analysis-customer-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin: 0 0 var(--space-10);
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-500);
}

.analysis-customer-section-icon {
    font-size: 1rem;
    line-height: 1;
    color: var(--text-400);
}

.analysis-customer-section-icon.quick-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    font-size: 1.2rem;
    color: inherit;
    font-weight: normal;
}

.confirm-modal-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.confirm-modal-copy h2,
.confirm-modal-copy p {
    margin: 0;
}

.confirm-modal-copy h2 {
    margin-bottom: var(--space-8);
    font-size: 1.35rem;
    color: #1f2437;
}

.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-12);
    margin-top: var(--space-20);
}

.confirm-modal-actions button {
    white-space: nowrap;
}

.comments-modal-dialog .confirm-modal-actions {
    justify-content: flex-end;
}

.comments-modal-dialog .confirm-modal-actions button {
    flex: 0 0 auto;
}

.modal-input-group {
    display: grid;
    gap: var(--space-8);
    margin-top: 0;
}

.modal-input-group span {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-600);
}

input,
textarea {
    width: 100%;
    font-family: inherit;
    font-size: var(--font-size-base);
    min-height: auto;
    resize: none;
}

textarea {
    padding: var(--padding-form-field);
    line-height: 1.45;
}

textarea::placeholder {
    color: var(--text-400);
}

.modal-search-status {
    margin-top: 0;
}

.zyte-data-customer-result {
    display: grid;
    margin-top: 0.5rem;
    gap: 0.3rem;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
    color: var(--text-700);
    text-align: left;
    cursor: pointer;
    transform: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    justify-content: space-between;
    grid-auto-flow: column;
    align-content: space-evenly;
}

.zyte-data-customer-result:hover:not(:disabled),
.zyte-data-customer-result:focus-visible {
    border-color: var(--accent-secondary-cold-500);
    background: var(--surface-light-blue);
}

.zyte-data-customer-result.is-selected {
    border-color: rgba(0, 138, 105, 0.28);
    background: var(--success-100);
}

.zyte-data-customer-result:disabled,
.zyte-data-customer-result-disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.zyte-data-customer-result-name {
    font-size: 0.9375rem;
    font-weight: 700;
}

.zyte-data-customer-result-meta {
    color: var(--text-500);
    font-size: var(--font-size-sm);
}

.zyte-data-customer-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
}

.zyte-data-customer-result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(0, 138, 105, 0.12);
    color: var(--success-600);
    font-size: var(--font-size-xxs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.destructive-button {
    background: linear-gradient(135deg, var(--error-500), #9f0003);
    box-shadow: 0 10px 22px var(--overlay-dark-medium);
}

.destructive-button:hover:not(:disabled) {
    box-shadow: 0 14px 28px var(--overlay-dark-medium);
}

.loading-screen-content {
    display: grid;
    justify-items: center;
    gap: 1rem;
}

.loading-message {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2a69;
}

.loading-spinner {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 0.35rem solid rgba(176, 44, 206, 0.18);
    border-top-color: #b02cce;
    border-right-color: #b02cce;
    animation: loading-spin 0.9s linear infinite;
}

.pricing-rounding-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 0.2rem solid rgba(176, 44, 206, 0.18);
    border-top-color: #b02cce;
    border-right-color: #b02cce;
    animation: loading-spin 0.9s linear infinite;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.pricing-rounding-spinner[hidden] {
    display: none !important;
}

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

.login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: var(--space-32);
    background:
        radial-gradient(circle at 50% 35%, rgba(196, 71, 255, 0.18), transparent 34%),
        linear-gradient(135deg, #1b2562 0%, #4d2188 58%, #2d226d 100%);
}

.login-card {
    width: min(100%, 29.5rem);
    margin: 0 auto;
    padding: 2rem 2.25rem 2.25rem;
    border: 1px solid var(--border-subtle-info);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-xl);
    text-align: center;
}

.login-brand {
    margin-bottom: 1rem;
    color: var(--accent-secondary-cold-500);
}

.brand-logo {
    display: block;
    height: 1.875rem;
    width: auto;
}

.login-card h1,
.login-copy,
.login-note {
    margin: 0;
}

.login-card h1 {
    margin-bottom: 1rem;
    font-size: 2.4rem;
    line-height: 1.08;
    color: #10185d;
}

.login-copy {
    margin-bottom: 1.75rem;
    color: #486170;
    font-size: 1rem;
}

.login-signin-container {
    min-height: 3.5rem;
}

.panel-label,
.field-group-title,
.stat-label {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: var(--space-8) 0 0 0;
}


button,
input {
    font: inherit;
}

.page-shell {
    display: grid;
    grid-template-columns: 214px minmax(0, 1fr);
    min-height: 100vh;
    align-items: start;
    transition: grid-template-columns 180ms ease;
}

/* Collapsed sidebar: shrink to an icon rail and hide text labels. */
.page-shell.sidebar-collapsed {
    grid-template-columns: 64px minmax(0, 1fr);
}

.page-shell.sidebar-collapsed .sidebar-brand,
.page-shell.sidebar-collapsed .sidebar-search,
.page-shell.sidebar-collapsed .nav-parent-chevron,
.page-shell.sidebar-collapsed .user-details,
.page-shell.sidebar-collapsed .user-card .ghost-button {
    display: none !important;
}

/* Collapsed sidebar: allow flyout to escape the sidebar's overflow clipping
   and establish a stacking context above the main content column */
.page-shell.sidebar-collapsed .sidebar {
    overflow: visible;
    z-index: 10;
}

/* Collapsed sidebar: nav subgroups become hover flyout panels instead of hidden */
.page-shell.sidebar-collapsed .nav-parent-group {
    position: relative;
}

.page-shell.sidebar-collapsed .nav-subgroup {
    display: none;
    position: absolute;
    left: calc(100% + 4px);
    top: 0;
    background: var(--surface-white, #fff);
    border: 1px solid #ececec;
    border-radius: 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 11rem;
    z-index: 200;
    margin-left: 0;
    padding: 0.25rem;
    gap: 0.25rem;
}

.page-shell.sidebar-collapsed .nav-parent-group:hover .nav-subgroup,
.page-shell.sidebar-collapsed .nav-parent-group:focus-within .nav-subgroup {
    display: grid !important;
}

/* Inside the flyout: restore link text and left-align */
.page-shell.sidebar-collapsed .nav-subgroup .nav-link {
    justify-content: flex-start;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.page-shell.sidebar-collapsed .nav-subgroup .nav-link > span {
    display: block !important;
}

.page-shell.sidebar-collapsed .nav-link > span:not(.nav-icon):not(.material-symbols-outlined):not(.nav-parent-chevron) {
    display: none;
}

.page-shell.sidebar-collapsed .sidebar-brand-row {
    justify-content: center;
    margin-bottom: 1rem;
}

.page-shell.sidebar-collapsed .sidebar-top,
.page-shell.sidebar-collapsed .sidebar-nav {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.page-shell.sidebar-collapsed .nav-link {
    display: flex;
    justify-content: center;
    grid-template-columns: none;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    gap: 0;
}

.page-shell.sidebar-collapsed .user-card {
    justify-content: center;
}

.page-shell.sidebar-collapsed .user-card-main {
    justify-content: center;
    gap: 0;
}

.sidebar,
.main-column {
    display: flex;
    flex-direction: column;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    padding: 0.25rem 0;
    background: var(--surface-white);
    border-right: 1px solid #ececec;
    justify-content: space-between;
    overflow-y: auto;
}

.sidebar-top {
    padding: 0.75rem 0.875rem 0;
}

.sidebar-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.sidebar-brand {
    color: var(--accent-secondary-cold-500);
}

.sidebar-collapse {
    min-height: 2rem;
    width: 2rem;
    padding: 0;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-300);
    box-shadow: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

.sidebar-collapse:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-500, #1f2937);
}

.sidebar-search {
    position: relative;
    display: block;
    margin-bottom: 1rem;
}

.sidebar-search input {
    min-height: 2.25rem;
    width: 100%;
    padding: 0.625rem 0.875rem 0.625rem 2.15rem;
    border: 1px solid #dfe4ea;
    border-radius: var(--border-radius-4);
    background: var(--surface-white);
    font-size: var(--font-size-sm);
}

.sidebar-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--text-300);
}

.sidebar-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0.75rem 1rem;
}

.sidebar__section-divider {
    width: 100%;
    height: .0625rem;
    background: linear-gradient(90deg, #fff, #e6e7eb, #fff);
    margin: 1rem 0;
}

.nav-group {
    display: grid;
    gap: var(--space-6);
}

.nav-parent-group {
    display: grid;
    gap: 0.25rem;
}

.nav-parent-toggle {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
}

.nav-parent-toggle:hover {
    background: rgba(241, 245, 249, 0.8);
}

.nav-parent-chevron {
    color: inherit;
    opacity: 0.9;
    transition: transform 160ms ease;
}

.nav-parent-group.is-expanded .nav-parent-chevron {
    transform: rotate(90deg);
}

.nav-parent-group:not(.is-expanded) .nav-parent-chevron {
    transform: rotate(0deg);
}

.nav-subgroup {
    display: grid;
    gap: 0.25rem;
    margin-left: 0.75rem;
    padding-left: 0.5rem;
    border-left: 1px solid #ececf5;
}

.nav-subgroup[hidden] {
    display: none;
}

.nav-link-nested {
    grid-template-columns: 1fr !important;
}

.nav-parent-active > .nav-parent-toggle {
    background: rgba(226, 175, 238, 0.2);
    color: var(--accent-secondary-cold-500);
}

.nav-group-secondary {
    margin-top: auto;
    padding-top: 1.25rem;
}

.nav-link {
    display: grid;
    grid-template-columns: 1.125rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.875rem;
    padding: 0.75rem 0.875rem;
    color: var(--zyte-navy-muted);
    text-decoration: none;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    position: relative;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.nav-link:hover {
    background: var(--accent-primary-50);
    color: var(--accent-secondary-cold-500);
}

.nav-link-active {
    background: rgba(176, 44, 206, 0.12);
    color: var(--accent-secondary-cold-500);
    font-weight: 600;
}

.nav-icon,
.nav-chevron {
    color: var(--color-gray-darker);
    opacity: 0.9;
}

.mat-icon {
    user-select: none;
    background-repeat: no-repeat;
    display: inline-block;
    fill: #9ba3af;
    height: 24px;
    width: 24px;
    overflow: hidden;
}

.nav-link-loading::after {
    content: "";
    position: absolute;
    right: 0.875rem;
    top: 50%;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: -0.4375rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    opacity: 0.7;
    animation: loading-spin 0.9s linear infinite;
}

.nav-link-loading .nav-chevron {
    opacity: 0;
}

.sidebar-footer {
    padding: 0 0.875rem 1rem;
}

.sidebar-system-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.25rem;
    color: var(--text-400);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.system-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #00b388;
}

.session-footer {
    padding-top: 0.75rem;
    border-top: 1px solid #ececec;
}

.session-footer-copy {
    margin-bottom: 0.75rem;
}

.signin-container-shell {
    position: relative;
}

.custom-signin-button {
    width: 100%;
    min-height: 3.25rem;
    justify-content: center;
    border: 1px solid var(--border-subtle-primary);
    background: linear-gradient(135deg, #c62fe4, #a926d7);
    color: var(--text-50);
    box-shadow: 0 14px 26px rgba(169, 38, 215, 0.24);
    font-size: 0.95rem;
}

.custom-signin-button:hover {
    background: linear-gradient(135deg, #d748ee, #b730df);
    border-color: rgba(24, 30, 90, 0.08);
}

.google-signin-shadow {
    position: absolute;
    inset: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.subtle,
.placeholder,
.result-label,
.result-value,
.user-email,
.panel p,
.topbar-copy p,
.summary-footer,
.quick-card p,
.community-card p {
    color: var(--text-500);
}

.extra-subtle {
    font-size: small;
    color: var(--color-gray-dark) !important;
    margin: 0.25rem 0;
}

.panel-label-danger {
    color: var(--error-500);
}

.user-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0 0;
    border: none;
    background: transparent;
}

.user-card-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: rgba(176, 44, 206, 0.12);
    color: var(--accent-secondary-cold-500);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.user-details {
    min-width: 0;
}

.user-name,
.user-email {
    margin: 0;
}

.ghost-button {
    min-height: 2rem;
    justify-content: center;
    font-size: var(--font-size-sm);
}

.main-column {
    padding: 1.5rem 1.75rem 2.5rem;
    gap: 1.5rem;
}

.topbar {
    display: flex;
    align-items: center;
    margin: -1.5rem -1.75rem 0;
    border-top: 1px solid #dfe4ea;
    border-bottom: 1px solid #dfe4ea;
    background: #f4f6f9;
}

.breadcrumbs {
    display: block;
    flex: 1;
    min-width: 0;
    padding: 1rem 1rem 1rem 1rem;
}

.breadcrumbs-list {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .75rem;
    line-height: 1;
}

.breadcrumbs-item {
    display: inline-flex;
    align-items: center;
    color: #6e808e;
    font-weight: 500;
}

.breadcrumbs-item + .breadcrumbs-item::before {
    content: "/";
    margin: 0 0.5rem;
    color: #8fa0ac;
}

.breadcrumbs-item a {
    color: inherit;
    text-decoration: none;
}

.breadcrumbs-item a:hover {
    color: #4b6070;
}

.breadcrumbs-current {
    color: var(--action-primary-500);
}

.hero-panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(290px, 0.92fr);
    gap: 0.5rem;
    align-items: stretch;
    margin-bottom: 0.5rem;
}

.panel {
    padding: var(--space-12) var(--space-20);
    box-shadow: var(--shadow-panel);
}

/* .panel-heading {
    margin-bottom: var(--space-12);
} */

.panel-heading-split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-16);
    margin-bottom: var(--space-12);
}

.panel-heading-actions {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: var(--space-12);
}

.zyte-data-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
}

.zyte-data-back-link[hidden],
.topbar-back-button[hidden] {
    display: none;
}

.topbar-back-button {
    flex-shrink: 0;
    margin-right: 1rem;
    background: none !important;
    height: 1rem !important;
    padding-right: 1.75rem !important;
    gap: 1rem;
}

.topbar-back-button:hover {
    background: var(--accent-secondary-cold-100) !important;
}

.zyte-data-feeds-table td.placeholder {
    text-align: center;
}

.zyte-data-feeds-table td,
.zyte-data-feeds-table th {
    vertical-align: middle;
}

.history-panel .panel-heading-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-bottom: var(--space-12);
}

.history-panel .panel-heading-split > div {
    min-width: 0;
}

.hero-card .panel-heading,
.summary-card .panel-heading {
    margin-bottom: var(--space-12);
}

.card-action,
.quick-link {
    color: var(--accent-secondary-cold-500);
    text-decoration: none;
    font-weight: 700;
    margin: var(--space-6) 0 0 0;
}

.card-action:hover,
.quick-link:hover {
    text-decoration: underline;
}

.hero-chart-placeholder {
    display: flex;
    align-items: center;
    min-height: 15rem;
    padding: 0.75rem 0.5rem 0;
    border-top: 1px solid #eef1f5;
}

.chart-bars {
    display: grid;
    grid-template-columns: repeat(28, minmax(0, 1fr));
    gap: 0.35rem;
    align-items: end;
    width: 100%;
    height: 12rem;
}

.chart-bars span {
    display: block;
    border-radius: 0.25rem 0.25rem 0 0;
    background: linear-gradient(180deg, #c96ce6, #b44ed9);
}

.summary-card {
    grid-template-rows: auto 1fr auto;
}

.usage-ring {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.usage-ring-donut {
    position: relative;
    width: 12rem;
    height: 12rem;
}

.usage-ring-donut svg {
    width: 100%;
    height: 100%;
    display: block;
}

.usage-ring-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    pointer-events: none;
}

.usage-ring-inner strong {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-700);
}

.usage-ring-inner > span:not(.dashboard-risk-pct-inline) {
    color: var(--text-500);
    font-size: var(--font-size-sm);
}

.dashboard-risk-pct-inline {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--accent-secondary-cold-500);
    white-space: nowrap;
}

.summary-footer {
    padding-top: 1rem;
    border-top: 1px solid #eef1f5;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.quick-card,
.community-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-height: 12rem;
}

.quick-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.quick-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    background: rgba(226, 175, 238, 0.2);
    color: var(--accent-secondary-cold-500);
    font-weight: 700;
}

.quick-card-header .dashboard-card-label {
    margin: 0;
    flex: 1;
}

.quick-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.quick-card-body h3 {
    display: flex;
    justify-content: space-between;
}

.quick-card h3,
.community-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    line-height: 1.25;
    color: #1f2437;
}

.community-card {
    background: linear-gradient(135deg, #5e61ea, #5560e8);
    color: #fff;
}

.community-card h3,
.community-card p {
    color: #fff;
}

.content-grid {
    display: grid;
    /* grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.74fr); */
    gap: 1rem;
    align-items: start;
}

.output-grid {
    grid-template-columns: minmax(0, 1fr);
}

.content-grid > * {
    min-width: 0;
}

.estimate-form {
    display: grid;
    gap: var(--space-20);
}

.estimate-form label {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    color: var(--text-600);
    font-weight: 600;
}

.estimate-form label span {
    font-size: var(--font-size-sm);
    line-height: 1rem;
    color: hsl(270 55% 45%);
}

.estimate-form label.wide,
.actions.wide {
    grid-column: 1 / -1;
}

.field-grid {
    display: grid;
    gap: var(--space-8);
}

.field-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.field-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.estimator-options-grid {
    gap: var(--space-12);
}

.option-toggle {
    display: flex;
    flex-direction: row !important;
    position: relative;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.16s ease;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
}

.option-toggle:hover {
    border-color: var(--accent-primary-200);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(239, 244, 255, 0.96));
}

.option-toggle:has(input:checked) {
    border-color: var(--accent-secondary-cold-500);
    background: linear-gradient(180deg, rgba(226, 175, 238, 0.24), rgba(226, 175, 238, 0.18));
    box-shadow: 0 0 0 3px rgba(176, 44, 206, 0.12);
}

.option-toggle input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.option-toggle-copy {
    margin: 0;
    color: var(--text-700);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
}

.option-toggle-switch {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    width: 3.25rem;
    height: 1.9rem;
    padding: 0.16rem;
    border-radius: 999px;
    background: #cfd8e6;
    box-shadow: inset 0 1px 2px rgba(27, 39, 94, 0.12);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.option-toggle-knob {
    display: block;
    width: 1.58rem;
    height: 1.58rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff, #eef2f8);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
    transition: transform 0.2s ease;
}

.option-toggle:has(input:checked) .option-toggle-switch {
    background: linear-gradient(135deg, var(--accent-secondary-cold-100), var(--accent-secondary-cold-500));
}

.option-toggle:has(input:checked) .option-toggle-knob {
    transform: translateX(1.34rem);
}

.option-toggle:has(input:focus-visible) {
    border-color: var(--accent-secondary-cold-500);
    box-shadow: 0 0 0 3px rgba(176, 44, 206, 0.16);
}

input {
    height: 3rem;
    padding: var(--padding-form-field);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
    color: var(--text-700);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input::placeholder {
    color: var(--text-400);
}

input:hover {
    border-color: var(--accent-primary-200);
}

input:focus {
    border-color: var(--accent-primary-400);
    box-shadow: 0 0 0 3px rgba(63, 79, 237, 0.14);
}

.actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: var(--space-8);
}
.topbar > .secondary-button {
    border: 0;
    margin-right: 2rem;
}

.primary-button {
    color: var(--text-50);
    background: var(--accent-secondary-cold-500);
    box-shadow: 0 4px 12px rgba(176, 44, 206, 0.24);
}

.primary-button:hover:not(:disabled) {
    background: var(--action-primary-700);
    box-shadow: 0 8px 18px rgba(176, 44, 206, 0.32);
}

.blue-button {
    color: var(--text-50);
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}

.blue-button:hover:not(:disabled) {
    background: #1d4ed8;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.32);
}

.secondary-button,
.ghost-button,
a.secondary-button,
a.ghost-button,
label.secondary-button,
label.ghost-button {
    color: var(--text-600);
    border-color: var(--color-gray-light);
}

/* .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    padding: 0rem 0.25rem;
    background: none;
    border: none;
    outline: none;
    border-radius: 0;
    cursor: pointer;
    color: var(--text-400);
    font-size: 0.95rem;
    line-height: 1;
    transition: color 0.1s;
    min-height: 0;
}

.icon-button-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    line-height: 1;
    color: inherit;
    opacity: 0.9;
}

.icon-button.is-refreshing .icon-button-glyph {
    animation: loading-spin 0.9s linear infinite;
} */

.secondary-button:hover:not(:disabled),
.ghost-button:hover:not(:disabled),
a.secondary-button:hover,
a.ghost-button:hover,
label.secondary-button:hover,
label.ghost-button:hover {
    border-color: var(--accent-primary-200);
    background: var(--accent-primary-50);
}

.icon-button:hover:not(:disabled) {
    border-color: var(--accent-primary-200);
    background: var(--accent-primary-50);
}

.heading-badge {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.875rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(176, 44, 206, 0.12);
    color: var(--accent-secondary-cold-500);
}

/* ── Toast notification system ──────────────────────────────────────────── */
.toast-container {
    position: fixed;
    top: var(--space-16);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    pointer-events: none;
    width: max-content;
    max-width: min(520px, calc(100vw - 2rem));
}

.toast {
    pointer-events: all;
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-8);
    font-size: var(--font-size-sm);
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    animation: toast-in 0.18s ease;
    border: 1px solid transparent;
    min-width: 240px;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.toast--busy {
    color: var(--warning-600);
    background: var(--warning-100);
    border-color: rgba(255, 158, 27, 0.3);
}

.toast--success {
    color: var(--success-600);
    background: var(--success-100);
    border-color: rgba(0, 138, 105, 0.2);
}

.toast--error {
    color: var(--error-500);
    background: var(--error-50);
    border-color: rgba(219, 0, 4, 0.2);
}

.toast--progress {
    color: #1e3a8a;
    background: #eef2ff;
    border-color: #c7d2fe;
    font-weight: 500;
    flex-direction: column;
    align-items: flex-start;
}

.toast-close {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: inherit;
    opacity: 0.6;
    padding: 0 0 0 var(--space-8);
    line-height: 1;
}

.toast-close:hover {
    opacity: 1;
}

/* Legacy .status-banner — kept for any remaining inline usages */
.status-banner {
    display: none;
}

/* ============================================================================
   Zyte-Inspired Component Styles — Notifications and Refined Buttons
   ============================================================================ */

/* Notification card (Zyte-inspired warning style) */
.notification-card,
.alert-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-12);
    padding: var(--space-16);
    border: 1px solid var(--zyte-warning-border);
    border-radius: var(--border-radius-8);
    background: var(--zyte-warning-bg);
    color: var(--zyte-navy-dark);
    font-size: var(--font-size-sm);
}

.notification-card.info {
    border-color: rgba(50, 141, 178, 0.3);
    background: #ecf8fc;
    color: #328db2;
}

.notification-card.success {
    border-color: rgba(0, 138, 105, 0.3);
    background: #d1f0e8;
    color: #008a69;
}

.notification-card.error {
    border-color: rgba(219, 0, 4, 0.3);
    background: #fee7e7;
    color: #db0004;
}

.notification-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1rem;
    margin-top: 0.125rem;
}

.notification-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1;
}

.notification-title {
    font-weight: 600;
    color: inherit;
}

.notification-message {
    color: inherit;
    opacity: 0.9;
}

/* Enhanced button styles inspired by Zyte's cleaner approach */
button.clean-button,
a.clean-button {
    background: var(--surface-white);
    border-color: var(--color-gray-light);
    color: var(--text-700);
    font-weight: 500;
}

button.clean-button:hover,
a.clean-button:hover {
    background: var(--surface-light-blue);
    border-color: var(--color-gray);
}

/* Pill-shaped button variant (Zyte-style) */
button.pill-button,
a.pill-button {
    border-radius: var(--border-radius-full);
    padding: 0.25rem 1.5rem;
    font-weight: 600;
}

/* Outlined button variant */
button.outlined-button,
a.outlined-button {
    background: transparent;
    border: 2px solid var(--color-gray-light);
    color: var(--text-700);
}

button.outlined-button:hover,
a.outlined-button:hover {
    border-color: var(--accent-secondary-cold-500);
    color: var(--accent-secondary-cold-500);
    background: rgba(176, 44, 206, 0.04);
}

.result-link {
    color: var(--text-700);
}

.result-card {
    padding: var(--space-24);
    border-radius: var(--border-radius-8);
    border: 1px solid var(--color-gray-light);
    background: linear-gradient(180deg, rgba(221, 223, 243, 0.34), rgba(255, 255, 255, 0.92));
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-24) var(--space-32);
}

.result-grid > div {
    padding-right: var(--space-8);
}

.result-label {
    margin: 0 0 var(--space-8);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.result-value {
    margin: 0;
    color: var(--text-600);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.result-link {
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.result-link:hover {
    color: var(--accent-primary-400);
    text-decoration: underline;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
    padding-bottom: var(--space-16);
}

.history-item {
    padding: var(--space-8) var(--space-16);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
    min-width: 0;
    transition: opacity 0.2s ease;
    box-shadow: var(--shadow-panel);
}

.history-item.is-deleting,
.job-item.is-deleting {
    opacity: 0.4;
    pointer-events: none;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.job-list[aria-busy="true"] {
    opacity: 0.96;
}

.job-items-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.job-item {
    padding: var(--space-20);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.92));
}

.job-item-active {
    border-color: rgba(63, 79, 237, 0.35);
    box-shadow: 0 0 0 1px rgba(63, 79, 237, 0.12);
}

.job-item-head {
    align-items: start;
}

.job-title-block {
    min-width: 0;
    display: grid;
    grid-template-columns: auto auto 10rem;
}

.job-title-block--list {
    grid-template-columns: 2fr 1fr 1.3fr 0.75fr 1fr;
    gap: var(--space-16);
}

.job-item-badges,
.job-item-status-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.job-item-status-detail {
    font-size: var(--font-size-xs);
    color: var(--text-400);
    line-height: 1.4;
}

.job-badge-col-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.job-title-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-12);
}

.job-title-link {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-700);
}

.job-subtitle {
    color: var(--text-700) !important;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.job-link-muted {
    color: var(--text-400);
    font-size: 0.875rem;
}

.job-options-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-16);
}

.job-option-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    flex: 1 1 auto;
}

.job-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    flex: 0 0 auto;
    margin-left: auto;
}

.job-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: 0.25rem 1rem;
    border: var(--border-1-transparent);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

/* Icon-only round action buttons (Download / Note / Delete) */
.job-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border: none;
    border-radius: var(--radius-4);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}

.job-icon-button .material-symbols-outlined {
    font-size: 1.25rem;
    display: block;
}

.job-download-button {
    color: hsl(152 55% 40%);
}

.job-download-button:hover {
    color: hsl(152 60% 26%);
    text-decoration: none;
}

.job-option-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.875rem;
    width: 10rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
}

.job-detail-chips{
    display: flex;
    gap: var(--space-8);
}

.job-option-chip-enabled {
    border: 1px solid var(--border-subtle-action);
    background: rgba(226, 175, 238, 0.2);
    color: var(--accent-secondary-cold-500);
}

.job-option-chip-disabled {
    border: 1px solid var(--border-subtle-muted);
    background: rgba(243, 244, 245, 0.92);
    color: var(--text-400);
}

.job-delete-button {
    color: hsl(0 70% 52%);
}

.job-delete-button--busy {
    gap: 0.375rem;
    padding-inline: 0.5rem;
}

.job-delete-button-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.job-delete-button:hover:not(:disabled) {
    color: hsl(0 80% 38%);
}

.job-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    border: var(--border-1-transparent);
    border-radius: 999px;
    font-size: var(--font-size-xxs);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.job-options-row .job-action-button {
    width: 8rem;
}

.job-status-badge.neutral {
    background: var(--surface-light-blue);
    color: var(--text-500);
}

.job-status-badge.raw {
    background: var(--action-primary-700);
    color: var(--surface-light-blue);
}
.job-status-badge.render {
    background: var(--accent-primary-400);
    color: var(--surface-light-blue);
}

.job-status-badge.pending {
    background: var(--warning-100);
    color: #9a5f00;
}

.job-status-badge.running {
    background: var(--info-100);
    color: var(--info-600);
}

/* Live running phases: a cool progression teal → blue → indigo → violet so the
   badge conveys how far the job has got while still reading as "in progress". */
.job-status-badge--phase-querying {
    background: var(--info-100);
    color: var(--info-600);
}

.job-status-badge--phase-pricing {
    background: color-mix(in srgb, var(--info-100) 55%, var(--accent-primary-100));
    color: color-mix(in srgb, var(--info-600) 45%, var(--accent-primary-400));
}

.job-status-badge--phase-writing {
    background: var(--accent-primary-100);
    color: var(--accent-primary-400);
}

.job-status-badge--phase-saving {
    background: var(--accent-secondary-cold-100);
    color: var(--accent-secondary-cold-500);
}

.job-status-badge--phase-finalizing {
    background: color-mix(in srgb, var(--accent-secondary-cold-100) 55%, var(--success-100));
    color: color-mix(in srgb, var(--accent-secondary-cold-500) 45%, var(--success-600));
}

.job-status-badge.success {
    background: var(--success-100);
    color: var(--success-600);
}

.job-status-badge--simple{
    background: var(--success-100);
    color: var(--success-600);
}

.job-status-badge--medium{
    background: var(--info-100);
    color: var(--info-600);
}

.job-status-badge--complex{
    background: var(--warning-100);
    color: #9a5f00;
}

.job-status-badge--custom{
    background: var(--error-50);
    color: var(--error-500);
}

.job-status-badge.error {
    background: var(--error-50);
    color: var(--error-500);
}

.badge-pricing-standard {
  background-color: #f3f4f6;
  color: #374151;
}

.badge-pricing-refresh {
  background-color: #7e77e3;
  color: #fbfbfb;
}

.badge-costs-standard {
  background-color: #f3f4f6;
  color: #374151;
}

.badge-costs-org {
  background-color: #e0e7ff; 
  color: #3730a3;
}

/* Inline spinner for active (pending/running) jobs in the list */
.job-status-spinner {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-right: 0.45em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: job-status-spinner-spin 0.9s linear infinite;
    vertical-align: -2px;
}

@keyframes job-status-spinner-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .job-status-spinner { animation-duration: 2.4s; }
}

/* Renewal "Generating…" button shown while a just-submitted estimate runs. */
.renewal-action-button--generating {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    cursor: progress;
    opacity: 0.85;
}

.renewal-action-spinner {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: job-status-spinner-spin 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .renewal-action-spinner { animation-duration: 2.4s; }
}

.history-item--active {
    /* Subtle visual cue that a row is in flight */
    background: linear-gradient(90deg, rgba(63, 131, 248, 0.04), transparent 60%);
}

.job-meta-grid {
    gap: var(--space-20) var(--space-32);
}

.job-meta-full {
    grid-column: 1 / -1;
}

/* Compact job item layout */
.job-item-wrapper {
    margin-bottom: var(--space-12);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.92));
    overflow: hidden;
}

.job-item-summary {
    display: grid;
    grid-template-columns: auto minmax(150px, 1.4fr) auto minmax(150px, 1.5fr) minmax(120px, 0.8fr) auto;
    grid-template-areas: "expand org renewal flags meta actions";
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
    border: none;
    border-radius: 0;
    margin: 0;
}

.job-expand-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-400);
    font-size: 1rem;
    transition: transform 160ms ease, color 160ms ease;
    grid-area: expand;
}

.job-expand-button:hover {
    color: var(--text-600);
}

.job-item-summary .job-expand-button {
    transform: rotate(0deg);
}

.job-item-summary[aria-expanded="true"] .job-expand-button {
    transform: rotate(90deg);
}

.job-summary-org {
    grid-area: org;
    font-weight: 600;
    color: var(--text-700);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.job-summary-org-name {
    font-weight: 600;
    color: var(--text-700);
    overflow-wrap: anywhere;
}

.job-summary-org-id {
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--text-400);
}

.job-summary-org-sep {
    display: none;
}

.job-summary-renewal {
    grid-area: renewal;
    display: flex;
    align-items: center;
}

.job-summary-flags {
    grid-area: flags;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.job-summary-meta {
    grid-area: meta;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    text-align: right;
}

.job-summary-requester {
    color: var(--text-700);
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.job-summary-timestamp {
    color: var(--text-400);
    font-size: var(--font-size-xs);
    min-width: 0;
    white-space: nowrap;
}

.job-summary-actions {
    grid-area: actions;
    display: flex;
    flex: 0 0 auto;
    justify-self: end;
}

.job-item-details {
    display: none;
    grid-column: 1 / -1;
    padding: var(--space-16);
    background: rgba(241, 245, 249, 0.5);
    border-top: 1px solid var(--color-gray-light);
    border-radius: 0;
    gap: var(--space-12);
}

.job-item-summary[aria-expanded="true"] + .job-item-details {
    display: grid;
    grid-template-columns: repeat(5, minmax(200px, 1fr));
}

.job-detail-field {
    display: grid;
    gap: var(--space-4);
}

.job-detail-field-options {
    grid-column: 1 / -1;
}

.job-detail-label {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-400);
    min-height: 2.25rem;
}

.job-detail-value {
    margin: 0;
    color: var(--text-600);
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.job-detail-value.error {
    color: var(--error-500);
}

.job-option-error {
    margin: var(--space-12) 0;
    padding: var(--space-12);
    border: 1px solid var(--border-subtle-error);
    border-radius: var(--border-radius-8);
    background: var(--error-50);
}

.job-option-error-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--error-500);
}

.job-option-error-summary {
    margin: var(--space-8) 0 0;
    color: var(--text-700);
    font-size: 0.875rem;
    line-height: 1.45;
}

.job-option-error-hint {
    margin: var(--space-8) 0 0;
    color: var(--text-600);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.job-option-error-raw {
    margin-top: var(--space-12);
    border-top: 1px solid rgba(219, 0, 4, 0.14);
    padding-top: var(--space-8);
}

.job-option-error-raw > summary {
    cursor: pointer;
    color: var(--text-500);
    font-weight: 600;
    font-size: 0.8rem;
    user-select: none;
}

.job-option-error-raw pre {
    margin: var(--space-8) 0 0;
    padding: var(--space-12);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
    border: 1px solid var(--border-subtle-text);
    color: var(--error-500);
    font-size: var(--font-size-xs);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Filter tabs */
.job-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-bottom: var(--space-12);
    flex-wrap: wrap;
}

.job-filter-tabs {
    display: flex;
    gap: var(--space-12);
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.job-search-wrap {
    position: relative;
    flex: 0 1 16rem;
    min-width: 20rem;
}

.job-search-input {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.5rem 0.875rem 0.5rem 2.25rem;
    border: 1px solid var(--color-gray-light);
    border-radius: 999px;
    background: var(--surface-white);
    color: var(--text-700);
    font: inherit;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.job-search-input::placeholder {
    color: var(--text-400);
}

.job-search-input:hover {
    border-color: var(--accent-primary-200);
}

.job-search-input:focus {
    border-color: var(--accent-primary-400);
    box-shadow: 0 0 0 3px rgba(63, 79, 237, 0.14);
}

.job-search-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--text-300);
    pointer-events: none;
    line-height: 1;
}

.job-filter-button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-gray-light);
    border-radius: 999px;
    background: var(--surface-white);
    color: var(--text-600);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 160ms ease;
}

.job-filter-button:hover {
    border-color: var(--accent-primary-200);
    background: var(--accent-primary-50);
}

.job-filter-button.active {
    background: var(--accent-secondary-cold-500);
    color: white;
    border-color: var(--accent-secondary-cold-500);
}

.job-item-hidden {
    display: none;
}

.renewal-list[aria-busy="true"] {
    opacity: 0.96;
}

.renewal-filter-bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, auto));
    gap: var(--space-8);
    margin-bottom: var(--space-20);
}

.renewal-filter-control {
    display: grid;
    align-content: start;
    gap: var(--space-8);
    font-weight: 600;
    color: var(--text-600);
}

.renewal-filter-control span {
    font-size: var(--font-size-sm);
}

.renewal-filter-control select {
    min-height: 3rem;
    padding: var(--padding-form-field);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
    color: var(--text-700);
    font: inherit;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23b0b0b0" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

/* Customer-name search input on the Renewals page. Styled to match the
   neighbouring <select> controls so the filter bar reads as a single
   coherent component. */
.renewal-filter-control input[type="search"] {
    min-height: 3rem;
    padding: var(--padding-form-field);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
    color: var(--text-700);
    font: inherit;
}

.renewal-filter-control input[type="search"]:focus {
    outline: none;
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Collapse the filter bar to a single column on narrow viewports so
   each control gets full width. */
@media (max-width: 720px) {
    .renewal-filter-bar {
        grid-template-columns: 1fr;
    }
}

.renewal-table-shell {
    overflow-x: auto;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
    box-shadow: var(--shadow-panel);
}

/* Column visibility component
   The toggle is injected as a real trailing <th> in the table header (and a
   matching empty <td> in every body row, or colspan+1 on placeholder rows).
   This keeps borders, padding and rounded corners fully consistent with the
   rest of the table.
*/
.column-toggle-th,
.column-toggle-td {
    width: 2rem;
    min-width: 2rem;
    padding: 0 !important;
    text-align: center !important;
    position: relative;
}

.column-toggle-th .column-toggle-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    transition: color 120ms ease, background-color 120ms ease;
}

.column-toggle-th .column-toggle-button:focus-visible {
    outline: 2px solid var(--accent-primary-500);
    outline-offset: -2px;
}

.column-toggle-th .column-toggle-button:hover {
    background: rgba(226, 232, 240, 0.6);
    color: var(--text-700);
}

.column-toggle-th .column-toggle-button[aria-expanded="true"] {
    color: var(--accent-primary-500);
    background: rgba(226, 232, 240, 0.6);
}

.column-toggle-icon {
    font-size: 1.125rem;
    line-height: 1;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.column-toggle-button:hover .column-toggle-icon,
.column-toggle-button[aria-expanded="true"] .column-toggle-icon {
    opacity: 1;
}

.column-toggle-popover {
    position: fixed;
    z-index: 2000;
    min-width: 14rem;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--surface-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.column-toggle-popover[hidden] {
    display: none;
}

.column-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.column-toggle-controls {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-gray-light);
}

.column-toggle-search {
    flex: 1 1 auto;
    min-width: 0;
    height: 1.875rem;
    padding: 0 0.5rem;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-4);
    background: var(--surface-white);
    color: var(--text-700);
    font: inherit;
    font-size: var(--font-size-sm);
}

.column-toggle-search:focus-visible {
    outline: 2px solid var(--accent-primary-500);
    outline-offset: -1px;
}

.column-toggle-showall {
    flex: 0 0 auto;
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: var(--border-radius-4);
    background: transparent;
    color: var(--accent-primary-500);
    font: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
    white-space: nowrap;
}

.column-toggle-showall:hover:not(:disabled) {
    background: rgba(226, 232, 240, 0.6);
}

.column-toggle-showall:disabled {
    color: var(--text-400);
    cursor: default;
}

.column-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
    border-radius: var(--border-radius-4);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-700);
    user-select: none;
}

.column-toggle-row:hover {
    background: rgba(241, 245, 249, 0.72);
}

.column-toggle-row input[type="checkbox"] {
    margin: 0;
    flex: 0 0 auto;
    min-height: 1rem;
    max-width: fit-content;
}

.column-toggle-empty {
    padding: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--text-400);
}

.renewal-table th.col-hidden,
.renewal-table td.col-hidden {
    display: none;
}

/* Compact inline selects / inputs used in pricing table edit rows */
.pricing-inline-select,
.pricing-inline-input {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    min-height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-4);
    background: var(--surface-white);
    color: var(--text-700);
    font: inherit;
    font-size: var(--font-size-sm);
    vertical-align: middle;
    box-sizing: border-box;
    width: 100%;
    min-width: 5rem;
    line-height: 1.4;
}

.pricing-inline-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Percent-encoded data URI (no ";utf8," prefix, "<"/">" escaped) so the
       arrow renders reliably in Chrome/Safari, which don't always accept the
       ";utf8," form. */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23b0b0b0" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 12px;
    padding-right: 1.75rem;
    cursor: pointer;
}

.pricing-inline-select:focus,
.pricing-inline-input:focus {
    outline: 2px solid var(--accent-primary-500);
    outline-offset: 1px;
    border-color: var(--accent-primary-500);
}

.pricing-inline-input {
    max-width: 6rem;
}

.pricing-maintenance-edit-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.pricing-maintenance-edit-inline .pricing-inline-select {
    width: auto;
    min-width: 7rem;
    flex: 1 1 auto;
}

.pricing-maintenance-edit-inline .pricing-inline-input {
    width: 6rem;
    min-width: 6rem;
    max-width: 6rem;
    flex: 0 0 6rem;
}

.renewal-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: var(--shadow-panel);
}

/* Target all th and td elements EXCEPT the first one in each row
th:not(:first-child),
td:not(:first-child) {
    text-align: center !important;
}

/* Explicitly set the first column to left-align (optional, but ensures consistency) */
/* th:first-child,
td:first-child {
    text-align: left;
    padding-left: 1rem !important;
} */

/* Last column specifically */
/* th:nth-last-child(3),
td:nth-last-child(3) {
    padding: 0rem 0.5rem !important;
} */

/* Last column specifically on history list table*/
.history-list th:last-child,
.history-list td:last-child,
.history-list th:nth-last-child(2),
.history-list td:nth-last-child(2) {
    text-align: center !important;
}

/* Last column specifically */
th:last-child,
td:last-child {
    text-align: right !important;
}
.bulk-edit-save-count{
    padding: 0 0.25rem !important;
}

.renewal-table th,
.renewal-table td {
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid #eef1f5;
    vertical-align: middle;
    font-size: small;
}

.renewal-table th {
    background: rgba(241, 245, 249, 0.72);
    color: var(--text-400);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

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

.renewal-table tbody tr:hover {
    background: rgba(241, 245, 249, 0.45);
}

@keyframes renewal-highlight-fade {
    0%   { background: rgba(63, 131, 248, 0.18); }
    60%  { background: rgba(63, 131, 248, 0.18); }
    100% { background: transparent; }
}

.renewal-row-highlight {
    animation: renewal-highlight-fade 3.5s ease forwards;
}

/* ── Zyte API Job detail page ────────────────────────────────────── */

.zyte-api-job-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
}

/* Two-panel layout: main content on the left, Activity & Comments on the
   right. Each child renders as its own card; the outer panel becomes a
   transparent grid wrapper so the two cards stand on their own. */
.zyte-api-job-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(18rem, 28vw, 24rem);
    gap: var(--space-20);
    align-items: start;
}

/* When the user collapses the comments panel, keep a slim 32px rail on the
   right (housing the chevron + vertical "Activity & Comments" label) so
   the user has an affordance to re-expand the panel. */
.zyte-api-job-layout--aside-collapsed {
    grid-template-columns: minmax(0, 1fr) 36px;
}

.zyte-api-job-layout:has(.zyte-api-job-comments-react-shell[data-aside-state="collapsed"]) {
    grid-template-columns: minmax(0, 1fr) 36px;
}

.zyte-api-job-layout--aside-collapsed .zyte-api-job-aside {
    display: none;
}

.zyte-api-job-layout:has(.zyte-api-job-comments-react-shell[data-aside-state="collapsed"]) .zyte-api-job-aside {
    display: none;
}

#zyte-api-job-comments-react-root {
    height: 100%;
}

.zyte-api-job-comments-react-shell{
    height: 100%;
}


@media (max-width: 1320px) {
    .zyte-api-job-layout--aside-expanded .zyte-api-hero-cards,
    .zyte-api-job-layout:has(.zyte-api-job-comments-react-shell[data-aside-state="expanded"]) .zyte-api-hero-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zyte-api-job-layout--aside-expanded .zyte-api-config-table,
    .zyte-api-job-layout:has(.zyte-api-job-comments-react-shell[data-aside-state="expanded"]) .zyte-api-config-table {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .zyte-api-job-layout--aside-expanded,
    .zyte-api-job-layout:has(.zyte-api-job-comments-react-shell[data-aside-state="expanded"]) {
        grid-template-columns: 1fr;
    }

    .zyte-api-job-layout--aside-expanded .zyte-api-job-aside,
    .zyte-api-job-layout--aside-expanded .zyte-api-job-aside-rail,
    .zyte-api-job-layout:has(.zyte-api-job-comments-react-shell[data-aside-state="expanded"]) .zyte-api-job-aside,
    .zyte-api-job-layout:has(.zyte-api-job-comments-react-shell[data-aside-state="expanded"]) .zyte-api-job-aside-rail {
        position: static;
    }
}

@media (max-width: 960px) {
    .zyte-api-job-layout {
        grid-template-columns: 1fr;
    }

    .zyte-api-job-aside,
    .zyte-api-job-aside-rail {
        position: static;
    }
}

/* Neutralise the outer .panel chrome on the detail page so the inner main
    and aside cards read as the two panels in the design. The React shell wraps
    the panel in #zyte-api-job-page-shell, so target the mounted panel rather
    than assuming it is a direct child of the page block. */
#zyte-api-job-page-shell > .panel.history-panel {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    min-height: calc(100vh - 6rem);
}

.zyte-api-job-aside {
    background: var(--surface-white);
    border: var(--border-1-light-gray);
    border-radius: var(--space-14);
    box-shadow: var(--shadow-panel);
    padding: var(--space-20);
}

/* The main column is now a transparent wrapper: its background, border and
   shadow are removed so the inner blocks (hero cards, Configuration Details
   and Estimate Insights) read as individual cards floating on the page, each
   carrying its own shadow. */
.zyte-api-job-main {
    min-width: 0;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.zyte-api-job-aside {
    min-width: 0;
    position: sticky;
    top: var(--space-16);
}

.zyte-api-job-aside-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.zyte-api-job-aside-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-8);
}

.zyte-api-job-aside-collapse {
    flex: 0 0 auto;
}

.zyte-api-job-aside-title {
    margin: 0;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 700;
    color: var(--text-900, #111827);
}

/* -------------------------------------------------------------------------
 * Zyte Data analysis page — two-column split (main content + comments aside)
 *
 * The page reuses the Zyte API job-detail layout: `.zyte-api-job-layout`
 * provides the two-column grid (main + comments aside) and owns the collapse
 * behaviour via `:has(.zyte-api-job-comments-react-shell[data-aside-state])`.
 * The outer panel only needs its chrome neutralised so the inner cards read
 * as separate panels.
 * ----------------------------------------------------------------------- */

[data-page="zyte-data-analysis"] > .panel.history-panel {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.zyte-data-analysis-main {
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

/* While the analysis detail is still loading the inner cards don't exist yet,
   so the bare spinner would otherwise float on the transparent page (the outer
   panel chrome is neutralised above). Wrap the loading state in a card that
   fills the content column and centre the spinner within it. */
[data-page="zyte-data-analysis"] .zyte-api-detail-loading-state {
    align-content: center;
    min-height: calc(100vh - 12rem);
    background: var(--surface-white);
    border: var(--border-1-light-gray);
    border-radius: var(--space-14);
    box-shadow: var(--shadow-panel);
    padding: var(--space-20);
}

/* Collapse the two-column main+comments grid to a single column while loading
   so the loading card spans the full width of the container (the comments
   aside has nothing to show until the detail loads). */
[data-page="zyte-data-analysis"] .zyte-api-job-layout:has(.zyte-api-detail-loading-state) {
    grid-template-columns: 1fr;
}

/* The analysis-detail header card, hero cards, AI overview and data tabs all
   live inside a single `.panel-heading`. Give it the same flex-column gap as
   the Zyte API job main column so those blocks read as evenly spaced cards
   instead of bunching together. */
.zyte-data-analysis-main > .panel-heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

/* The flex-gap above now owns the vertical rhythm; drop the tab row's own
   margin so it doesn't stack on top of the gap. */
.analysis-data-card > .analysis-data-tabs {
    margin: 0;
}

/* Outer panel wrapping the data tabs, search toolbar and active table so they
   read as one card (mirrors the Zyte API job panels). */
.analysis-data-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.zyte-data-analysis-main .renewal-table-shell {
    box-shadow: none;
}

#zyte-data-comments-react-root {
    height: 100%;
}

/* -------------------------------------------------------------------------
 * Zyte Data analysis page — header chips + 3-up hero cards
 *
 * The analysis-detail header was tidied to mirror Zyte API style: identity
 * (org / submitted / window) on the left, action buttons on the right, and
 * a chip row beneath identity. The legacy inline "Old → New" MRR flow and
 * comparison metric trio were lifted OUT of the header into a separate
 * 3-up hero cards panel (Price · Maintenance · Volume) that renders just
 * below the header card.
 * ----------------------------------------------------------------------- */

.zyte-data-detail-header .analysis-header-status-inline {
    color: var(--text-400);
    font-weight: 600;
    margin-left: var(--space-8);
}

/* The analysis summary div hosts the header card + hero cards. Use a flex
 * column with a controlled gap so they read as one cohesive block (avoiding
 * the visible gap that came from stacking elements with their own margins
 * inside .panel-heading). */
#zyte-data-analysis-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.zyte-data-header-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

/* Force 3-column layout for the Zyte Data hero cards (overrides the default
 * 2-column grid inherited from .zyte-api-hero-cards). The parent summary
 * flex-gap handles vertical spacing — no margin-top needed here. */
.zyte-data-hero-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
}

.zyte-data-hero-volume-denom {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-400);
    margin-left: 0.15em;
}

@media (max-width: 1100px) {
    .zyte-data-hero-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .zyte-data-hero-cards {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
 * Collapsed-aside rail — a slim vertical button that takes the place of
 * the comments aside when collapsed. Hosts a left-pointing chevron at the
 * top and a rotated "Activity & Comments" label below. Shared between the
 * Zyte API job-detail page and the Zyte Data analysis-detail page.
 * ----------------------------------------------------------------------- */
.zyte-api-job-aside-rail {
    display: none;
}

.zyte-api-job-layout--aside-collapsed .zyte-api-job-aside-rail,
.zyte-api-job-layout:has(.zyte-api-job-comments-react-shell[data-aside-state="collapsed"]) .zyte-api-job-aside-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-12);
    width: 36px;
    min-height: 100%;
    padding: var(--space-12) 0;
    background: var(--surface-white);
    border: var(--border-1-light-gray);
    border-radius: var(--space-14);
    box-shadow: var(--shadow-panel);
    cursor: pointer;
    color: var(--text-700);
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
    position: sticky;
    top: var(--space-16);
}

.zyte-api-job-layout--aside-collapsed .zyte-api-job-aside-rail:hover,
.zyte-api-job-layout:has(.zyte-api-job-comments-react-shell[data-aside-state="collapsed"]) .zyte-api-job-aside-rail:hover {
    background: var(--surface-gray, #f6f6fa);
    color: var(--text-900, #111827);
    box-shadow: var(--shadow-panel-hover, var(--shadow-panel));
}

.zyte-api-job-layout--aside-collapsed .zyte-api-job-aside-rail:focus-visible,
.zyte-api-job-layout:has(.zyte-api-job-comments-react-shell[data-aside-state="collapsed"]) .zyte-api-job-aside-rail:focus-visible {
    outline: 2px solid var(--color-primary, #6f42c1);
    outline-offset: 2px;
}

.zyte-api-job-aside-rail-chevron {
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
}

.zyte-api-job-aside-rail-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-400);
    white-space: nowrap;
}

.zyte-api-job-layout--aside-collapsed .zyte-api-job-aside-rail:hover .zyte-api-job-aside-rail-label,
.zyte-api-job-layout:has(.zyte-api-job-comments-react-shell[data-aside-state="collapsed"]) .zyte-api-job-aside-rail:hover .zyte-api-job-aside-rail-label {
    color: var(--text-700);
}

/* Compose area inside the aside: avatar on the left, textarea + buttons stack
   on the right. The textarea sits above the action row (Cancel + Post). */
.zyte-api-job-comment-compose {
    display: flex;
    gap: var(--space-12);
    align-items: flex-start;
}

.zyte-api-job-comment-compose-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.zyte-api-job-comment-compose textarea {
    width: 100%;
    resize: vertical;
}

.zyte-api-job-comment-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-8);
}

.zyte-api-job-comment-actions button {
    padding: 0.5rem 1rem;
}
/* Layout already stacks on all viewports while the aside is parked. */

/* Header tweaks for the detail page */
.zyte-api-detail-header .analysis-header-status-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-left: 0.5em;
}

.zyte-api-detail-header .analysis-header-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.analysis-header-date-em {
    color: var(--text-600);
    font-weight: 600;
}

.zyte-api-org-subtitle {
    margin: 0.15rem 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-400);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    align-items: center;
}

.zyte-api-org-name {
    color: var(--text-600);
    font-weight: 600;
}

.zyte-api-org-id {
    font-variant-numeric: tabular-nums;
}

.zyte-api-org-extra {
    font-style: italic;
}

.zyte-api-org-name-inline {
    color: var(--text-400);
    font-weight: 500;
}

.job-item-org-suffix {
    color: var(--text-400);
    font-weight: 500;
}

.job-item-date-range {
    display: inline-block;
    font-size: var(--font-size-xs);
    color: var(--text-400);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.zyte-api-header-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.header-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: hsl(0 80% 96%);
    color: hsl(0 65% 42%);
    border: 1px solid hsl(0 60% 88%);
}

.header-tag-chip--up {
    background: hsl(145 50% 94%);
    color: hsl(145 55% 30%);
    border-color: hsl(145 40% 82%);
}

.header-tag-chip--down {
    background: hsl(0 80% 96%);
    color: hsl(0 65% 42%);
    border-color: hsl(0 60% 88%);
}

.header-tag-chip--neutral {
    background: var(--surface-gray, hsl(220 14% 96%));
    color: var(--text-600);
    border-color: var(--color-gray-light);
}

.header-tag-chip--renewal {
    background: hsl(213 95% 96%);
    color: hsl(213 60% 38%);
    border-color: hsl(213 80% 86%);
    text-decoration: none;
}

.header-tag-chip--renewal:hover {
    background: hsl(213 95% 92%);
}

.header-tag-chip-mat {
    font-size: 0.95rem;
    line-height: 1;
}

.header-tag-chip-icon {
    font-weight: 700;
    line-height: 1;
}

/* ============================================================================
   Snapshot Chips — Domain Health page metadata row
   ============================================================================ */

.snapshot-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-16);
}

.snapshot-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1;
    background: var(--color-gray-lighter);
    color: var(--text-600);
    border: 1px solid var(--color-gray-light);
}

.snapshot-chip .mat-icon,
.snapshot-chip .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}

.snapshot-chip-text {
    line-height: 1;
}

.snapshot-chip--neutral {
    background: var(--color-gray-lighter);
    color: var(--text-600);
    border-color: var(--color-gray-light);
}

.snapshot-chip--info {
    background: var(--accent-primary-100);
    color: var(--accent-primary-500);
    border-color: var(--accent-primary-200);
}

.snapshot-chip--danger {
    background: var(--color-danger-bg) !important;
    color: var(--color-danger) !important;
    border: 1px solid var(--color-danger) !important;
}

/* Interactive button variant of snapshot chip */
.snapshot-chip--button {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.snapshot-chip--button:hover {
    background-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 0 2px var(--accent-primary-400);
}

.snapshot-chip--button:focus-visible {
    outline: 2px solid var(--accent-primary-400);
    outline-offset: 2px;
}

/* Override hover for danger tone */
.snapshot-chip--danger.snapshot-chip--button:hover {
    background-color: rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 0 2px var(--error-500);
}

/* Hero metric cards (Estimated Monthly Spend + Discount Multiplier) */
.zyte-api-hero-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-16);
}

.zyte-api-hero-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-12) var(--space-20);
    background: var(--surface-white, #fff);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    box-shadow: var(--shadow-panel);
}

.zyte-api-hero-card--margin-low {
    background: #fef2f2;
    border-color: #fecaca;
}

.zyte-api-hero-card--margin-mid {
    background: #fffbeb;
    border-color: #fde68a;
}

.zyte-api-hero-card--margin-high {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.zyte-api-hero-card--margin-low .zyte-api-hero-value strong {
    color: #991b1b;
}

.zyte-api-hero-card--margin-mid .zyte-api-hero-value strong {
    color: #92400e;
}

.zyte-api-hero-card--margin-high .zyte-api-hero-value strong {
    color: #166534;
}

.zyte-api-hero-label {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-400);
}

.zyte-api-hero-value {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.zyte-api-hero-value strong {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-strong-purple);
    line-height: 1.1;
}

/* Hero card — price pending state (unsaved edits in-flight) */
.hero-value--pending strong {
    color: var(--text-400);
}

/* Hero card — price committing state (POST /commit in-flight) */
.hero-value--committing {
    align-items: center;
    gap: 0.4rem;
    color: var(--text-400);
    font-size: 1.1rem;
    font-weight: 500;
}

.hero-value--committing .hero-spin {
    font-size: 1.4rem;
    animation: hero-spin 1s linear infinite;
}

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

.hero-metric-prior {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-400);
    text-decoration: line-through;
}

.zyte-api-hero-footer {
    margin-top: var(--space-4);
}

.zyte-api-hero-meta {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-500);
    display: inline-flex;
    gap: 0.3em;
    padding: 0.3rem 0rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    align-items: center;
}

.zyte-api-hero-sub-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: var(--space-4);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-gray-light);
}

.zyte-api-hero-sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--font-size-xs);
}

.zyte-api-hero-sub-label {
    color: var(--text-400);
    font-weight: 500;
}

.zyte-api-hero-sub-value {
    color: var(--text-700);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.zyte-api-hero-sub-value--up {
    color: var(--success-600);
}

.zyte-api-hero-sub-value--down {
    color: var(--error-500);
}

.hero-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero-card-chip .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
}

.hero-card-chip--down {
    background: hsl(145 50% 94%);
    color: hsl(145 55% 28%);
}

.hero-card-chip--up {
    background: hsl(145 50% 94%);
    color: hsl(145 55% 28%);
}

.hero-card-chip--neutral {
    background: var(--color-gray-lighter);
    color: var(--text-500);
}

/* Collapsible "Configuration Details" panel */
.zyte-api-config-details {
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white, #fff);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
}

.zyte-api-config-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-12) var(--space-16);
    user-select: none;
    background: var(--color-gray-lightest);
}

.zyte-api-config-summary::-webkit-details-marker {
    display: none;
}

.zyte-api-config-summary-title {
    font-weight: 700;
    color: var(--text-700);
    font-size: 0.95rem;
}

.zyte-api-config-summary-chevron {
    transition: transform 0.2s ease;
    color: var(--text-400);
}

.zyte-api-config-details[open] .zyte-api-config-summary-chevron {
    transform: rotate(180deg);
}

.zyte-api-config-body {
    padding: 0 var(--space-16) var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    border-top: 1px solid var(--color-gray-light);
    padding-top: var(--space-16);
}

/* Configuration Details: flat 5-column grid (2 rows of 5 fields). */
.zyte-api-config-table {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-16) var(--space-24);
    border-radius: var(--border-radius-8);
}

.zyte-api-config-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}

.zyte-api-config-label {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-400);
}

.zyte-api-config-value {
    margin: 0.25rem 0 0 0;
    font-size: 0.95rem;
    color: var(--text-700);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    overflow-wrap: anywhere;
    display: flex;
    align-items: center;
    min-height: 1.5rem;
}

@media (max-width: 1100px) {
    .zyte-api-config-table {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .zyte-api-hero-cards {
        grid-template-columns: 1fr;
    }
    .zyte-api-config-table {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Run details: actual tables used + per-stage timing breakdown. */
.zyte-api-rundetails-tables {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.zyte-api-rundetails-table-row {
    display: grid;
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: baseline;
}

.zyte-api-rundetails-table-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-400);
}

.zyte-api-rundetails-table-value {
    font-size: 0.9rem;
    color: var(--text-700);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.zyte-api-rundetails-path {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: var(--border-radius-8);
    background: var(--color-gray-lightest);
    color: var(--text-500);
}

.zyte-api-rundetails-path--aggregated {
    background: var(--success-100);
    color: var(--success-600);
}

.zyte-api-rundetails-path--raw,
.zyte-api-rundetails-path--refresh {
    background: var(--warning-100);
    color: var(--warning-600);
}

.zyte-api-rundetails-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--warning-600);
}

.zyte-api-timing-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.zyte-api-timing-row {
    display: grid;
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr) auto;
    gap: var(--space-12);
    align-items: center;
}

.zyte-api-timing-label {
    font-size: 0.85rem;
    color: var(--text-700);
    overflow-wrap: anywhere;
}

.zyte-api-timing-bar-wrap {
    height: 0.5rem;
    border-radius: var(--border-radius-8);
    background: var(--color-gray-lightest);
    overflow: hidden;
}

.zyte-api-timing-bar {
    display: block;
    height: 100%;
    margin-left: var(--bar-offset, 0%);
    width: var(--bar-pct, 0%);
    background: var(--accent-primary-400);
    border-radius: var(--border-radius-8);
}

.zyte-api-timing-row.is-dominant .zyte-api-timing-bar {
    background: var(--warning-600);
}

.zyte-api-timing-row.is-queued .zyte-api-timing-bar {
    background: var(--text-400);
}

.zyte-api-timing-row.is-queued .zyte-api-timing-label {
    color: var(--text-500);
    font-style: italic;
}

.zyte-api-timing-row.is-dominant .zyte-api-timing-label {
    font-weight: 700;
}

.zyte-api-timing-value {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-700);
    text-align: right;
    white-space: nowrap;
}

.zyte-api-timing-total {
    border-top: 1px dashed var(--color-gray-light);
    padding-top: var(--space-6);
}

.zyte-api-timing-total .zyte-api-timing-label {
    font-weight: 700;
    color: var(--text-500);
}

/* Estimator option toggle: disabled (forced) state + inline hint. */
.option-toggle--disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.option-toggle-hint {
    display: block;
    font-size: 0.7rem;
    color: var(--warning-600);
    margin-top: 0.1rem;
}

@media (max-width: 720px) {
    .zyte-api-timing-row,
    .zyte-api-rundetails-table-row {
        grid-template-columns: 1fr;
    }
    .zyte-api-timing-bar-wrap {
        display: none;
    }
}

.zyte-api-job-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(180px, 1fr));
    gap: var(--space-12) var(--space-16);
    padding: var(--space-16);
    background: rgba(241, 245, 249, 0.5);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
}

.zyte-api-job-metrics .job-detail-field-options {
    grid-column: 1 / -1;
}

.zyte-api-job-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.zyte-api-job-section-title {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-400);
}

.zyte-api-job-comments {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-16);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
}

.zyte-api-job-comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
}

.zyte-api-job-comment-compose {
    display: flex;
    flex-direction: row;
    gap: var(--space-8);
    align-items: flex-start;
}

.zyte-api-job-comment-compose .comments-composer-avatar {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.zyte-api-job-comment-compose textarea {
    width: 100%;
    min-height: 3rem;
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    font: inherit;
    font-size: var(--font-size-sm);
    resize: vertical;
    background: var(--surface-gray);
    box-sizing: border-box;
}

/* List item card styles for the Zyte API job list */
.job-item-org-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    overflow-wrap: anywhere;
    align-items: flex-start;
    justify-content: center;
}

.job-item-org-name {
    font-weight: 700;
    color: var(--text-700);
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
    line-height: 1.3;
    text-decoration: none;
}

.job-item-org-id {
    font-size: var(--font-size-sm);
    color: var(--text-400);
}

.job-item-timestamp {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-400);
    margin-top: var(--space-2);
    font-weight: 400;
}

.job-item-lifecycle {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-400);
    font-weight: 400;
}

.history-item .history-requester {
    font-size: var(--font-size-sm);
    color: var(--text-600);
    font-weight: 600;
    white-space: normal;
    text-align: left;
    margin: 0;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4);
}

.history-item .job-card-error {
    grid-column: 1 / -1;
    margin: var(--space-4) 0 0;
    padding: var(--space-8) var(--space-12);
    border-radius: var(--border-radius-4);
    background: var(--error-50);
    color: var(--error-500);
    font-size: var(--font-size-sm);
}

.text-left {
    text-align: left !important;
}
.text-right {
    text-align: right !important;
}
.text-center {
    text-align: center !important;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.renewal-customer-cell{
    display: grid;
    gap: 0.2rem;
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
}

.renewal-date-cell {
    display: grid;
    gap: 0.2rem;
    grid-auto-flow: row;
    align-items: center;
    justify-content: center;
}

.renewal-customer-cell strong,
.renewal-date-cell strong {
    color: var(--text-700);
}

.renewal-customer-cell span,
.renewal-date-cell span {
    color: var(--text-500);
    font-size: var(--font-size-sm);
}

.renewal-flag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.renewal-flag-ignored {
    color: var(--warning-600);
    background: var(--warning-100);
}

/* Product type badge on renewal rows */
.renewal-product-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.renewal-product-badge-zapi {
    color: var(--primary-700, #1a4fa0);
    background: var(--primary-100, #dce8ff);
}

.renewal-product-badge-zd {
    color: var(--success-700, #1a6b50);
    background: var(--success-100, #d0f4e8);
}

.renewal-product-badge-hybrid {
    color: #7c3aed;
    background: #ede9fe;
}

/* "Renewal" traceability chip */
.sourced-from-renewal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--primary-700, #1a4fa0);
    background: var(--primary-50, #eef4ff);
    border: 1px solid var(--primary-200, #bdd0f5);
    text-decoration: none;
}

.sourced-from-renewal-chip:hover {
    background: var(--primary-100, #dce8ff);
    text-decoration: none;
}

.zyte-data-customer-result-secondary {
    font-weight: 400;
    color: var(--text-400);
    font-size: 0.85em;
}

.renewal-no-action {
    display: block;
    text-align: center;
    color: var(--text-secondary, #6b7280);
    padding: 0.5rem !important;
}

.renewal-action-button {
    min-height: 2.2rem;
    min-width: 12rem;
    width: auto;
    padding: 0.5rem !important;
}

.renewal-action-button-queued {
    color: var(--success-600);
    border-color: rgba(0, 138, 105, 0.18);
    background: var(--success-100);
}

@media (max-width: 1200px) {
    .job-item-summary {
        grid-template-columns: auto minmax(160px, 1fr) auto minmax(120px, auto) auto;
        grid-template-areas:
            "expand org renewal flags actions"
            "expand meta meta   meta    actions";
        align-items: center;
    }

    .job-summary-requester,
    .job-summary-timestamp {
        text-align: left;
    }

    .job-summary-meta {
        text-align: left;
    }

    .job-item-summary .job-expand-button {
        align-self: start;
    }
}

.history-item-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-start;
    gap: var(--space-12);
    margin-bottom: 0;
    min-width: 0;
}

.history-item-head .result-link {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.history-meta,
.history-meta-secondary,
.history-requester {
    color: var(--text-500);
}

.history-meta {
    white-space: nowrap;
    font-size: var(--font-size-sm);
}

.history-meta-secondary {
    display: block;
    margin-left: 0;
}

.history-requester {
    font-size: 0.875rem;
    overflow-wrap: anywhere;
    white-space: pre-line;
    margin: 0;
}

.hidden {
    display: none !important;
}


.error-text {
    color: var(--error-500);
}

.saving-text {
    color: #1f2a69;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-left: 0.5rem;
    vertical-align: middle;
}

@media (max-width: 960px) {
    .page-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        min-height: auto;
    }

    .sidebar-nav {
        gap: 1rem;
    }

    .main-column {
        padding: 1.25rem;
    }

    .hero-panel-grid,
    .quick-links-grid,
    .content-grid,
    .field-grid-two,
    .field-grid-three,
    .field-grid-four {
        grid-template-columns: 1fr;
    }

    .job-options-row {
        flex-direction: column;
    }

    .job-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .job-item-summary {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "expand org actions"
            "expand flags actions"
            "expand meta meta";
        row-gap: var(--space-8);
    }

    .job-item-summary .job-expand-button {
        align-self: center;
    }

    .job-item-summary[aria-expanded="true"] + .job-item-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .renewal-filter-bar {
        grid-template-columns: 1fr 1fr;
    }
}

/* Active status icons */
.icon-active-yes {
    color: #22C55E;
    font-size: 1.375rem;
    font-variation-settings: "FILL" 1;
    display: block;
    line-height: 1;
}

.icon-active-no {
    color: #EF4444;
    font-size: 1.375rem;
    font-variation-settings: "FILL" 1;
    display: block;
    line-height: 1;
}

/* Active toggle (Feeds tab). Rendered as an iOS-style on/off switch so the
   interactive nature is obvious. Outer button keeps the same 2px padding
   and zero margin as the previous static icon so the table cell width and
   row height do not shift. The track height (~1.375rem) matches the prior
   icon's font-size to preserve vertical rhythm. */
.feed-active-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.feed-active-toggle-track {
    position: relative;
    display: inline-block;
    width: 2.25rem;
    height: 1.375rem;
    border-radius: 999px;
    background-color: #EF4444;
    transition: background-color 0.18s ease;
}

.feed-active-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.375rem - 4px);
    height: calc(1.375rem - 4px);
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
    transition: transform 0.18s ease;
}

.feed-active-toggle.is-on .feed-active-toggle-track {
    background-color: #22C55E;
}

.feed-active-toggle.is-on .feed-active-toggle-thumb {
    transform: translateX(calc(2.25rem - 1.375rem));
}

.feed-active-toggle:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.feed-active-toggle:hover:not(:disabled) .feed-active-toggle-track {
    filter: brightness(0.95);
}

.feed-active-toggle:disabled,
.feed-active-toggle.is-saving {
    cursor: progress;
    opacity: 0.6;
}

/* Static, non-interactive variant used inside Configuration Details to
   surface boolean options as a read-only switch. */
.feed-active-toggle--static {
    cursor: default;
    opacity: 0.85;
}

.feed-active-toggle--static:hover .feed-active-toggle-track {
    filter: none;
}

/* Comparison badges on outer list */
.comparison-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    vertical-align: middle;
    cursor: default;
    min-height: 1.75rem;
    padding: 0.25rem 1rem;
    letter-spacing: 0.04em;
}

.comparison-badge .material-symbols-outlined {
    font-size: 1rem;
}

.comparison-badge--no-change {
    background: var(--success-100);
    color: var(--success-600);
}

.comparison-badge--increase {
    background: var(--error-50);
    color: var(--error-500);
}

.comparison-badge--decrease {
    background: var(--warning-100);
    color: var(--warning-600);
}

/* Comparison summary box on detail page */
.comparison-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: var(--padding-form-field);
    border-radius: var(--border-radius-8);
    border: 1px solid var(--color-gray-light);
    background: var(--surface-light-blue);
}

.comparison-summary--increase {
    border-color: #fca5a5;
    background: var(--error-50);
}

.comparison-summary--decrease {
    border-color: rgba(255, 158, 27, 0.4);
    background: var(--warning-100);
}

.comparison-summary--no-change {
    border-color: var(--color-gray-light);
    background: var(--color-gray-lighter);
}

.comparison-summary-badge {
    flex: 0 0 auto;
}

.comparison-summary-metrics {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.comparison-metric {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-sm);
}

.comparison-metric-label {
    color: var(--text-400);
    font-weight: 600;
    font-size: var(--font-size-xxs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.1rem;
}

.comparison-metric strong {
    color: var(--text-700);
    font-size: 0.9375rem;
}

/* Feed toolbar — search + toggle filters above the feeds table */
.analysis-data-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin: var(--space-8) 0;
    border-bottom: 1px solid var(--color-gray-light);
}

.analysis-data-tab--right {
    margin-left: auto;
}

.analysis-data-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    position: relative;
    padding: 0.625rem 0.125rem 0.75rem;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-400);
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.analysis-data-tab-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.analysis-data-tab:hover,
.analysis-data-tab:focus-visible {
    color: var(--accent-secondary-cold-500);
}

.analysis-data-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: transparent;
    transition: background-color 0.2s ease;
}

.analysis-data-tab.is-active {
    color: var(--accent-secondary-cold-500);
}

.analysis-data-tab.is-active::after {
    background: var(--accent-secondary-cold-500);
}

.analysis-data-panel {
    display: none;
    min-width: 0;
}

.analysis-data-panel.is-active {
    display: block;
    min-width: 0;
}

/* Settings: key/value mapping table (used by New projects setup tab) */
.settings-mapping-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    margin-top: var(--space-8);
    margin-bottom: var(--space-12);
    table-layout: fixed;
}

.settings-mapping-table thead th {
    text-align: left;
    font-weight: 600;
    color: hsl(270 55% 45%);
    font-size: var(--font-size-sm);
    padding: var(--space-8) var(--space-12);
    border-bottom: 1px solid var(--color-gray-light);
}

.settings-mapping-table tbody td {
    padding: var(--space-8) var(--space-12);
    border-bottom: 1px solid var(--color-gray-light);
    vertical-align: middle;
}

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

.settings-mapping-table input[type="text"],
.settings-mapping-table select {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.45rem 0.65rem;
    font-size: var(--font-size-sm);
    font-family: inherit;
    border-radius: var(--border-radius-8);
    border: 1px solid var(--color-gray-light);
    background: var(--surface-white);
    color: var(--text-700);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23b0b0b0" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.settings-mapping-table input[type="text"]:focus,
.settings-mapping-table select:focus {
    outline: none;
    border-color: var(--accent-primary-400);
    box-shadow: 0 0 0 3px rgba(63, 79, 237, 0.14);
}

.settings-mapping-table input[readonly] {
    background: var(--surface-soft, #f7f7fb);
    color: var(--text-600);
}

.settings-mapping-table-action {
    width: 7rem;
    text-align: right;
}

.settings-mapping-table-action button {
    width: 100%;
}

.feeds-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    flex-wrap: wrap;
}

.feeds-search-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 12rem;
    max-width: 24rem;
}

.feeds-search-wrap input {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.5rem 0.875rem 0.5rem 2.25rem;
    font-size: 0.875rem;
}

.feeds-search-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    color: var(--text-300);
    pointer-events: none;
    line-height: 1;
}

.feeds-toggles {
    display: flex;
    gap: var(--space-16);
    margin-left: auto;
    flex-wrap: wrap;
    align-items: center;
}

.feed-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-600);
    user-select: none;
    white-space: nowrap;
}

.feed-toggle-label input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    min-height: unset;
}

.feed-toggle-track {
    display: inline-flex;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: #cfd8e6;
    padding: 0.125rem;
    flex: 0 0 auto;
    transition: background-color 0.2s ease;
}

.feed-toggle-knob {
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--surface-white);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
    transition: transform 0.2s ease;
}

.feed-toggle-label:has(input:checked) .feed-toggle-track {
    background: var(--accent-secondary-cold-500);
}

.feed-toggle-label:has(input:checked) .feed-toggle-knob {
    transform: translateX(1rem);
}

.feed-toggle-label:has(input:focus-visible) .feed-toggle-track {
    box-shadow: 0 0 0 3px rgba(176, 44, 206, 0.16);
}

/* Pricing tab rounding dropdown — only rendered on the Pricing tab. */
.pricing-rounding-wrap {
    cursor: default;
}

.pricing-rounding-wrap[hidden] {
    display: none !important;
}

.pricing-rounding-label {
    color: var(--text-500);
    font-weight: 500;
}

.pricing-rounding-select {
    font: inherit;
    font-weight: 600;
    color: var(--text-700);
    background: var(--surface-0, #fff);
    border: 1px solid var(--border-300, #d1d5db);
    border-radius: 6px;
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23b0b0b0" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    min-height: 2.25rem;
}

.pricing-rounding-select:focus-visible {
    outline: 2px solid var(--accent-500, #2563eb);
    outline-offset: 1px;
}

/* Highlighted feed cells that differ from contract baseline */
.feed-cell-changed {
    background: #fffbeb;
    color: #92400e;
    font-weight: 600;
}

/* Inline pencil marker shown beside any feed cell value that came from a
   manual pricing override (rather than a data-driven recompute). The icon
   inherits its line-box from the surrounding text and uses
   `vertical-align: middle` so it stays centered next to "Custom (4.5h)" or
   "V3 (1M - 5M)" regardless of cell padding or wrapping. Sized at 1em so
   it scales with the table font and never reflows the row height. */
.feed-cell-override-marker {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35em;
    color: #6b7280;
    vertical-align: middle;
    line-height: 1;
    padding-bottom: 0.25rem;
    color: #b02bce;
}

.feed-cell-override-marker .material-symbols-outlined {
    font-size: 1em;
    line-height: 1;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.feed-cell-changed .feed-cell-override-marker {
    color: #92400e;
}

/* "Inactive" pill rendered next to a feed name on every analysis sub-tab
   when the feed has been deactivated on the Feeds tab. The badge and the
   row-level dim (below) make inactive status legible across tabs without
   adding a per-row toggle to every tab \u2014 the toggle stays on the Feeds
   tab where it is the action surface. */
.feed-inactive-badge {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.1em 0.55em;
    border-radius: 999px;
    background: var(--color-gray-light, #e5e7eb);
    color: var(--text-600, #4b5563);
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    line-height: 1.3;
}

/* Dim every cell of an inactive-feed row so the row reads as muted without
   hiding it. Applies on every analysis sub-tab (Feeds, Requests, Records,
   Pricing, Pricing Debug, Maintenance) that emits data-active on its <tr>.
   The "Hide Inactive" toolbar checkbox still hides the row entirely when
   the user prefers a focused view. */
.renewal-table tr[data-active="false"] td,
.zyte-data-feeds-table tr[data-active="false"] td,
.pricing-debug-table tr[data-active="false"] td,
table tr[data-active="false"] td {
    opacity: 0.6;
}

/* The Inactive badge itself stays full-opacity so it remains scannable
   even within a dimmed row. */
.renewal-table tr[data-active="false"] td .feed-inactive-badge,
.zyte-data-feeds-table tr[data-active="false"] td .feed-inactive-badge,
.pricing-debug-table tr[data-active="false"] td .feed-inactive-badge,
table tr[data-active="false"] td .feed-inactive-badge {
    opacity: 1;
    background: #fef3c7;
    color: #92400e;
}

/* Pricing tab: semantic colour for price increases (red) and decreases (green).
   Overrides .feed-cell-changed when both classes are present. */
.feed-cell-price-increase {
    background: #fee2e2;
    color: #991b1b;
    font-weight: 600;
}

.feed-cell-price-decrease {
    background: #dcfce7;
    color: #166534;
    font-weight: 600;
}

/* Pricing tab: margin tiers. <40% red, 40–55% amber, >55% green. */
.feed-cell-margin-low {
    background: #fee2e2;
    color: #991b1b;
    font-weight: 600;
}

.feed-cell-margin-mid {
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
}

.feed-cell-margin-high {
    background: #dcfce7;
    color: #166534;
    font-weight: 600;
}

.zyte-data-feed-metrics-shell {
    margin-top: 0;
}

.zyte-data-feed-metrics-heading {
    margin: 0 0 var(--space-10);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-top: 1rem;
}

.zyte-data-feed-metrics-table {
    font-size: inherit;
}

.zyte-data-feed-metrics-table td,
.zyte-data-feed-metrics-table th {
    white-space: nowrap;
}

.zyte-data-analysis-log {
    margin-bottom: var(--space-16);
    padding: var(--space-16);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
}

.zyte-data-analysis-log-heading {
    margin: 0 0 var(--space-10);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-500);
}

.zyte-data-analysis-log-list {
    display: grid;
    gap: var(--space-8);
}

.zyte-data-analysis-log-item {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--space-12);
    padding: 0.625rem 0.75rem;
    border-radius: var(--border-radius-8);
    background: var(--color-gray-lighter);
}

.zyte-data-analysis-log-item--success {
    background: var(--success-100);
}

.zyte-data-analysis-log-item--error {
    background: var(--error-50);
}

.zyte-data-analysis-log-item--warning {
    background: var(--warning-100);
}

.zyte-data-analysis-log-time {
    color: var(--text-500);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.zyte-data-analysis-log-message {
    color: var(--text-700);
    font-size: 0.875rem;
}

.analysis-header {
    display: grid;
    grid-template-columns: 3fr auto !important;
    align-items: center;
    gap: 0;
    padding: var(--space-12) var(--space-20);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
    box-shadow: var(--shadow-panel);
    justify-content: space-between;
    align-content: space-between;
    align-items: center;
    grid-auto-flow: column;
    min-width: 0;
}

.analysis-header--decrease {
    border-color: rgba(255, 158, 27, 0.4);
    background: var(--warning-100);
}

.analysis-header--decrease .analysis-header-metric {
    border-left-color: rgba(255, 158, 27, 0.3);
}

.analysis-header--decrease .analysis-header-badge {
    border-left-color: rgba(255, 158, 27, 0.3);
}

.analysis-header--increase {
    border-color: rgba(219, 0, 4, 0.2);
    background: var(--error-50);
}

.analysis-header--increase .analysis-header-metric {
    border-left-color: rgba(219, 0, 4, 0.14);
}

.analysis-header--increase .analysis-header-badge {
    border-left-color: rgba(219, 0, 4, 0.14);
}

.analysis-header--no-change {
    border-color: rgba(0, 138, 105, 0.2);
    background: var(--success-100);
}

.analysis-header--no-change .analysis-header-metric {
    border-left-color: rgba(0, 138, 105, 0.2);
}

.analysis-header--no-change .analysis-header-badge {
    border-left-color: rgba(0, 138, 105, 0.2);
}

.analysis-header-identity {
    flex: 1 1 auto;
    min-width: 0;
}

.analysis-header-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
}

.analysis-header-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--text-700);
    color: var(--text-50);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.analysis-header-pill:hover:not(:disabled) {
    filter: brightness(1.08);
}

.analysis-header-pill:active:not(:disabled) {
    transform: translateY(1px);
}

.analysis-header-pill:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.analysis-header-pill .material-symbols-outlined {
    font-size: 1.25rem;
}

.analysis-header-pill--info {
    background: var(--accent-secondary-cold-500);
    box-shadow: 0 4px 12px rgba(176, 44, 206, 0.28);
    text-decoration: none;
}

.analysis-header-pill--renewal {
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
    text-decoration: none;
}

.analysis-header-pill--download {
    background: #111827;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.28);
}

.analysis-header-pill--delete {
    background: var(--color-danger);
    box-shadow: 0 4px 12px var(--color-danger-bg)
}

.analysis-header-org {
    margin: 0;
    font-weight: 700;
    color: var(--text-700);
    font-size: 1rem;
}

.analysis-header-date {
    margin: 0.15rem 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-400);
}

/* Two-item meta row directly under the submitted date: "Window: …  Status: …".
 * Labels are subdued, values are bold; the status badge renders as a green
 * pill via .job-status-badge.success. Wraps gracefully on narrow viewports. */
.analysis-header-meta {
    margin: 0.2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
    font-size: var(--font-size-sm);
    color: var(--text-400);
}

.analysis-header-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.analysis-header-meta-label {
    color: var(--text-400);
    font-weight: 500;
}

.analysis-header-meta-value {
    color: var(--text-700);
    font-weight: 700;
}

/* Renewal-link chip in the meta row — only rendered when the analysis was
 * sourced from a Renewals queue entry. Sits to the right of the status
 * badge and links to /renewals?renewal=<id>. */
.analysis-header-renewal-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0px 10px;
    border-radius: 999px;
    background: var(--accent-secondary-cold-50, #eef2ff);
    border: 1px solid var(--accent-secondary-cold-200, #c7d2fe);
    color: var(--accent-secondary-cold-700, #3730a3);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.analysis-header-renewal-link:hover,
.analysis-header-renewal-link:focus-visible {
    background: var(--accent-secondary-cold-100, #e0e7ff);
    border-color: var(--accent-secondary-cold-300, #a5b4fc);
    text-decoration: none;
}

.analysis-header-renewal-link .material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
}

.analysis-header-window {
    margin: 0.2rem 0 0;
    font-size: var(--font-size-sm);
    color: var(--accent-secondary-cold-500) !important;
    font-weight: 600;
}

.analysis-header-mrr-flow {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.analysis-header-mrr-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    align-items: center;
}

.analysis-header-mrr-arrow {
    font-size: 1rem;
    color: var(--text-400);
    flex-shrink: 0;
}

.analysis-header-metric {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 0 var(--space-24);
    border-left: 1px solid var(--color-gray-light);
}

.analysis-header-metric-label {
    color: var(--text-400);
    font-weight: 600;
    font-size: var(--font-size-xxs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.2rem;
}

.analysis-header-metric strong {
    color: var(--text-700);
    font-size: 0.9375rem;
    font-weight: 700;
}

.analysis-header-badge {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    padding-left: var(--space-20);
    border-left: 1px solid var(--color-gray-light);
}

.data-load-indicators {
    display: flex;
    flex-direction: row;
    gap: var(--space-6);
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.data-load-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem 0.2rem 0.35rem;
    border-radius: 999px;
    font-size: var(--font-size-xxs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

.data-load-chip-icon {
    font-size: 0.875rem;
    line-height: 1;
}

.data-load-chip--loaded {
    background: var(--success-100);
    color: var(--success-600);
}

.data-load-chip--loading {
    background: var(--warning-100);
    color: #9a5f00;
}

.data-load-chip--failed {
    background: var(--error-50);
    color: var(--error-500);
}

.data-load-chip--na {
    background: var(--surface-light-blue);
    color: var(--text-400);
}

.analysis-customer-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    margin-bottom: var(--space-16);
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
}

.analysis-customer-inline-text {
    margin: 0;
    color: var(--text-500);
    font-size: 0.875rem;
}

.analysis-customer-inline-text strong {
    color: var(--text-700);
}

.analysis-customer-inline-button {
    min-height: 2.25rem;
    white-space: nowrap;
}

.analysis-customer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

.analysis-customer-section--identification .analysis-customer-grid {
    grid-template-columns: 1fr;
}

.analysis-customer-section--organization-details .analysis-customer-grid {
    grid-template-columns: 1fr;
}

.analysis-customer-section--commercial-\&-access .analysis-customer-grid {
    grid-template-columns: 1fr;
}

.analysis-customer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
}

.analysis-customer-grid > .analysis-customer-card:first-child {
    border-top-width: 3px;
}

.analysis-customer-section--identification .analysis-customer-card {
    background: #eff6ff;
}

.analysis-customer-section--identification .analysis-customer-grid > .analysis-customer-card:first-child {
    border-top-color: #93c5fd;
}

.analysis-customer-section--organization-details .analysis-customer-card {
    background: #f5f3ff;
}

.analysis-customer-section--organization-details .analysis-customer-grid > .analysis-customer-card:first-child {
    border-top-color: #c4b5fd;
}

.analysis-customer-section--commercial-\&-access .analysis-customer-card {
    background: #ecfdf5;
}

.analysis-customer-section--commercial-\&-access .analysis-customer-grid > .analysis-customer-card:first-child {
    border-top-color: #5eead4;
}

.analysis-customer-label {
    color: var(--text-400);
    font-size: var(--font-size-xxs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.analysis-customer-value {
    color: var(--text-700);
    font-size: 0.9375rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.analysis-customer-card--status .analysis-customer-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 2.5rem;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    height: 1.36rem;
}

.analysis-customer-card--positive {
    background: #ecfdf5;
}

.analysis-customer-card--negative {
    background: #fef2f2 !important;
    border-color: #fecaca;
}

.analysis-customer-value--positive {
    color: #166534;
    background: #d1fae5;
}

.analysis-customer-value--negative {
    color: #b91c1c;
    background: #fee2e2;
}

/* Feed info modal */
.feed-info-modal-dialog {
    width: min(100%, 40rem);
}

.feed-info-content {
    margin-top: var(--space-12);
    max-height: min(70vh, 36rem);
    overflow-y: auto;
}

.feed-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feed-info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--color-gray-light);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.feed-info-row:last-child {
    border-bottom: none;
}

.feed-info-key {
    /* flex: 0 0 20rem; */
    color: var(--text-400);
    font-weight: 600;
    font-size: var(--font-size-xs);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.feed-info-val {
    flex: 1;
    color: var(--text-700);
    font-weight: 500;
    overflow-wrap: anywhere;
    text-align: right;
    padding-right: 0.5rem;
}

/* Important links — rendered as small tiles with favicon, shortened text,
   and a copy-to-clipboard button. */
.feed-info-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-6);
    padding-top: 0.5rem;
}

.feed-info-link-tile {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 28rem;
    padding: 0.25rem 0.375rem 0.25rem 0.5rem;
    background: var(--surface-1, #f3f4f6);
    border: 1px solid var(--border-200, #e5e7eb);
    border-radius: 9999px;
    font-size: var(--font-size-xs);
    line-height: 1.2;
    transition: background 120ms ease, border-color 120ms ease;
}

.feed-info-link-tile:hover {
    background: var(--surface-2, #e5e7eb);
    border-color: var(--border-300, #d1d5db);
}

.feed-info-link-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    object-fit: contain;
}

.feed-info-link-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-500, #6b7280);
}

.feed-info-link-text {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--text-700, #1f2937);
    text-decoration: none;
    font-weight: 600;
    overflow: hidden;
}

.feed-info-link-text:hover .feed-info-link-primary {
    text-decoration: underline;
}

.feed-info-link-primary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.feed-info-link-secondary {
    color: var(--text-400, #9ca3af);
    font-weight: 500;
    font-size: var(--font-size-xxs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.feed-info-link-copy {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    padding: 2px;
    margin: 0;
    line-height: 0;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-500, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1rem;
}

.feed-info-link-copy:hover {
    background: var(--surface-0, #fff);
    color: var(--text-700, #1f2937);
}

.feed-info-link-copy:focus-visible {
    outline: 2px solid var(--accent-500, #2563eb);
    outline-offset: 1px;
}

.feed-info-link-copy .material-symbols-outlined {
    font-size: 14px;
}

.feed-info-link-copy.is-copied {
    color: #16a34a;
}

.feed-info-nested-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
    padding: 0.2rem 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-gray-light);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    cursor: pointer;
    text-align: left;
    color: var(--text-700);
    border-radius: 0;
}

.feed-info-nested-toggle:last-child {
    border-bottom: none;
}

.feed-info-nested-key {
    flex: 0 0 5rem;
    color: var(--text-400);
    font-weight: 600;
    font-size: var(--font-size-xs);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.feed-info-nested-icon {
    font-size: 0.875rem;
    color: var(--text-400);
    transition: transform 0.15s ease;
    user-select: none;
}

.feed-info-nested-icon.is-open {
    transform: rotate(90deg);
}

.feed-info-nested-label {
    flex: 1;
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--text-500);
}

.feed-info-nested-body {
    padding-left: 5rem;
    border-bottom: 1px solid var(--color-gray-light);
}

.feed-info-nested-body:last-child {
    border-bottom: none;
}

.feed-info-nested-list {
    list-style: none;
    margin: 0;
    padding: 0.15rem 0 0.25rem;
}

.feed-info-nested-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.15rem 0;
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: var(--text-500);
}

.feed-info-nested-item-key {
    flex: 0 0 2rem;
    font-weight: 600;
    font-size: var(--font-size-xxs);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-400);
}

.feed-info-nested-item-val {
    flex: 1;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.feed-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    padding: 0rem 0.25rem;
    background: none;
    border: none;
    outline: none;
    border-radius: 0;
    cursor: pointer;
    color: var(--text-400);
    font-size: 0.95rem;
    line-height: 1;
    transition: color 0.1s;
    min-height: 0;
    margin: 0 0.125rem;
}

.feed-info-btn:hover {
    color: var(--text-700);
}

.feed-info-btn:focus-visible {
    outline: none;
}

.np-feed-cell-input {
    width: 100%;
    /*min-width: 6ch; */
    padding: 0.25rem 0.4rem;
    /* background: transparent;
    border: 1px solid transparent;
    border-radius: 4px; */
    /* Native form controls don't inherit the page font; pull it in so the
       feed-table inputs/selects match surrounding text instead of the
       browser default. */
    font: inherit;
    color: inherit;
}

.np-feed-cell-input:hover:not(:disabled),
.np-feed-cell-input:focus {
    /* background: var(--surface-100, #f7f7fb);
    border-color: var(--border-200, #e5e7eb); */
    outline: none;
}

.np-feed-cell-input.text-right {
    text-align: right;
}

.feed-info-cell {
    text-align: right;
    vertical-align: middle !important;
    white-space: nowrap;
    width: auto;
    padding: 0rem 0.5rem;
    display: table-cell;
}

.analysis-log-inline-button {
    margin-left: 1rem;
}

@media (max-width: 640px) {
    .panel-heading-split {
        flex-direction: column;
        align-items: flex-start;
    }

    .panel-heading-actions {
        width: 100%;
    }

    .panel-heading-actions > button {
        width: 100%;
    }

    .analysis-customer-inline {
        flex-direction: column;
        align-items: flex-start;
    }

    .analysis-header-actions {
        width: 100%;
        padding: var(--space-10) 0 0;
    }

    .analysis-customer-inline-button {
        width: 100%;
    }

    .analysis-header-pill {
        width: 100%;
    }

    .zyte-data-analysis-log-item {
        grid-template-columns: 1fr;
    }

    .analysis-customer-section--identification .analysis-customer-grid,
    .analysis-customer-section--organization-details .analysis-customer-grid,
    .analysis-customer-section--commercial-\&-access .analysis-customer-grid {
        grid-template-columns: 1fr;
    }

    .customer-info-content {
        grid-template-columns: 1fr;
    }

    .history-panel .panel-heading-split,
    .history-item-head {
        grid-template-columns: 1fr;
    }

    .job-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .job-item-summary {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "expand org"
            "expand flags"
            "expand meta"
            "actions actions";
        align-items: start;
    }

    .job-summary-actions {
        justify-self: stretch;
        width: 100%;
    }

    .job-summary-actions .job-status-badge {
        width: 100%;
        justify-content: center;
    }

    .job-item-summary[aria-expanded="true"] + .job-item-details {
        grid-template-columns: 1fr;
    }

    .job-action-button,
    .job-delete-button,
    .job-status-badge {
        width: 100%;
        justify-content: center;
    }

    .history-meta {
        white-space: normal;
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Granular Review Badges
   ============================================================ */

.badge-price-change {
    background: hsl(30 100% 92%);
    color: hsl(25 90% 40%);
}

.badge-discount-change {
    background: hsl(270 60% 93%);
    color: hsl(270 55% 45%);
}

.badge-low-margin {
    background: hsl(0 80% 94%);
    color: hsl(0 70% 45%);
}

/* ============================================================
   From → To Spend / Discount Display
   ============================================================ */

.spend-from-to,
.discount-from-to {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    flex-wrap: wrap;
}

.from-to-arrow {
    color: var(--color-gray-muted);
    font-weight: 400;
}

.spend-down,
.discount-down {
    color: hsl(0 65% 45%);
}

.spend-up,
.discount-up {
    color: hsl(145 55% 32%);
}

/* ============================================================
   Comments Button (job icon)
   ============================================================ */

.job-note-button {
    color: var(--text-400);
}

.job-note-button:hover {
    color: var(--text-600);
}

.job-note-button--pending {
    opacity: 0.72;
}

.job-note-button--pending:hover {
    opacity: 0.9;
}

.job-note-button--noted {
    color: hsl(270 50% 45%);
}

.job-note-button--noted:hover {
    color: hsl(270 55% 32%);
}

/* ============================================================
   Pagination Controls
   ============================================================ */

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    padding: var(--space-16) 0;
}

.pagination-info {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    min-width: 7rem;
    text-align: center;
}

.pagination-prev,
.pagination-next {
    min-width: 5rem;
}

.pagination-prev:disabled,
.pagination-next:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.disclosure-btn,
.disclosure-spacer {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.5rem;
}
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    padding: 0rem 0.25rem;
    background: none;
    border: none;
    outline: none;
    border-radius: 0;
    cursor: pointer;
    color: var(--text-400);
    font-size: 0.95rem;
    line-height: 1;
    transition: color 0.1s;
    min-height: 0;
}
.icon-button .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
}
.icon-button:hover:not(:disabled) {
  background: var(--surface-100, #f6f7fb);
  border-color: var(--border-200, #d6d8e3);
}

body.hide-optional-cols .col-optional {
  display: none !important;
}

/* ===========================================================================
 * Domain Health page
 * ======================================================================== */

.domain-health-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 0;
  align-items: center;
  justify-content: flex-start;
}

.domain-health-search,
.domain-health-filter {
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color, #d0d4dc);
  border-radius: 6px;
  background: var(--input-bg, #fff);
  color: inherit;
  min-height: 2.25rem;
  vertical-align: middle;
  line-height: 1.4;
}

.domain-health-search {
  flex: 1 1 240px;
  min-width: 180px;
}

.domain-health-filter {
  min-width: 180px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23b0b0b0" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.25rem;
  cursor: pointer;
  height: 3rem;
}

.domain-health-table-wrap {
  overflow-x: auto;
  margin-top: 1rem;
  background: var(--surface-white);
}
.domain-health-table-wrap .placeholder {
    margin-left: 1rem;
}

.domain-health-loader {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  padding: 3rem 1rem;
}

.domain-health-loader .section-loader-spinner {
  width: 2.25rem;
  height: 2.25rem;
}

.domain-health-loader .section-loader-message {
  margin: 0;
}

.zyte-data-loader {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  padding: 3rem 1rem;
}

.zyte-data-loader .section-loader-spinner {
  width: 2.25rem;
  height: 2.25rem;
}

.zyte-data-loader .section-loader-message {
  margin: 0;
}

.domain-health-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.domain-health-table th,
.domain-health-table td {
  padding: 0.55rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid var(--row-border, #e5e7eb);
  white-space: nowrap;
}

.domain-health-table th {
  background: rgba(241, 245, 249, 0.72);
  color: var(--text-400);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.domain-health-table .text-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.domain-health-row-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--link-color, #2563eb);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.domain-health-row-link:hover {
  text-decoration: underline;
}

.domain-health-trend-cell {
  width: 120px;
}

.domain-health-sparkline {
  width: 100px;
  height: 24px;
  color: var(--accent-color, #2563eb);
  display: block;
}

.domain-health-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(1000px, 100vw);
  height: 100vh;
  background: var(--panel-bg, #fff);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  border-left: 1px solid var(--border-color, #d0d4dc);
  z-index: 60;
  display: flex;
  flex-direction: column;
  transition: transform 180ms ease;
}

.domain-health-drawer.hidden {
  transform: translateX(100%);
  pointer-events: none;
}

.domain-health-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color, #d0d4dc);
}

.domain-health-drawer-domain {
  margin: 0.25rem 0 0;
  font-size: 1.15rem;
}

.domain-health-drawer-body {
  padding: 0rem 0rem 1.25rem 0rem;
  overflow-y: auto;
  flex: 1 1 auto;
}

.domain-health-drawer .placeholder {
    margin: 1rem;
}

/* Compact the breakdown table so wide drawers don't need horizontal/vertical
   scrolling. Tightens padding, font, sparkline size and column widths. */
.domain-health-breakdown-table {
  font-size: 0.8rem;
}

.domain-health-breakdown-table th,
.domain-health-breakdown-table td {
  padding: 0.3rem 0.45rem;
  white-space: nowrap;
}

.domain-health-breakdown-table th {
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}

.domain-health-breakdown-table .domain-health-trend-cell {
  width: 90px;
}

.domain-health-breakdown-table .domain-health-sparkline {
  width: 80px;
  height: 18px;
}

.domain-health-breakdown-table tr.domain-health-row-inactive td {
  color: var(--text-400, #6b7280);
}

.domain-health-inactive-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 0.25rem;
  font-size: 1rem;
  line-height: 1;
  color: #9ca3af;
  cursor: help;
}

.tier-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: #e5e7eb;
  color: #1f2937;
}

.tier-pill.tier-simple { background: #dcfce7; color: #166534; }
.tier-pill.tier-medium { background: #fef9c3; color: #854d0e; }
.tier-pill.tier-complex { background: #fed7aa; color: #9a3412; }
.tier-pill.tier-custom { background: #fee2e2; color: #991b1b; }

.badge.badge-muted {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  border-radius: 4px;
  background: #e5e7eb;
  color: #4b5563;
  vertical-align: middle;
}

.link-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--link-color, #2563eb);
  cursor: pointer;
  font: inherit;
}

/* Domain Health live progress banner — now routed through toast system */
.status-banner.progress {
  display: none;
}

/* Domain Health in-page status/progress banner */
.domain-health-status-banner {
    display: block;
    padding: 0.875rem 1rem;
    border-radius: var(--border-radius-8);
    margin-bottom: var(--space-16);
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.domain-health-status-banner--busy {
    color: var(--warning-600);
    background: var(--warning-100);
    border: 1px solid rgba(255, 158, 27, 0.24);
}

.domain-health-status-banner--success {
    color: var(--success-600);
    background: var(--success-100);
    border: 1px solid rgba(0, 138, 105, 0.18);
}

.domain-health-status-banner--error {
    color: var(--error-500);
    background: var(--error-50);
    border: 1px solid rgba(219, 0, 4, 0.18);
}

.domain-health-status-banner--progress {
    color: #1e3a8a;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
}


.domain-health-progress-text {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.domain-health-progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  border: 1px solid var(--border-subtle-info);
}

.domain-health-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #2563eb);
  transition: width 350ms ease;
}

.domain-health-progress-detail {
  margin-top: 0.4rem;
  color: #3730a3;
  font-variant-numeric: tabular-nums;
}

/* Sortable column headers on the Domain Health table */
.domain-health-table th.domain-health-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.domain-health-table th.domain-health-sortable:hover,
.domain-health-table th.domain-health-sortable:focus-visible {
  background: rgba(99, 102, 241, 0.08);
  outline: none;
}
.domain-health-table th.domain-health-sortable.active {
  color: #1e3a8a;
}
.domain-health-table th .sort-indicator {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 0.2rem;
  opacity: 0.75;
  font-size: 1.1em;
  line-height: 1;
  height: 1rem !important;
}
.domain-health-table th .sort-indicator.active {
  opacity: 1;
  color: #2563eb;
}

/* ============================================================================
   Setups tab — table, variance indicators, badges, drawer and per-epic cards
   ============================================================================ */

/* Variance cell — base styling for Estimated/Actual diff display */
.setups-variance {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Variance exceeds estimate — warning/red tone */
.setups-variance--over {
  color: var(--error-500);
}

/* Variance below estimate — positive/green tone */
.setups-variance--under {
  color: var(--success-600);
}

/* Variance unavailable or zero — muted tone */
.setups-variance--neutral {
  color: var(--text-400);
}

/* Percentage suffix next to variance hours — de-emphasised */
.setups-variance-pct {
  font-size: var(--font-size-xs);
  color: var(--text-400);
  font-weight: 400;
}

/* Overrides cell — stacked SA/Setup summary lines */
.setups-overrides-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* One muted line within overrides cell */
.setups-overrides-line {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-400);
  white-space: nowrap;
}

/* Override badge — base pill style */
.setups-override-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

/* Standard override tone — neutral pill */
.setups-override-badge--standard {
  background: var(--surface-grey);
  color: var(--text-500);
}

/* Custom override tone — accent pill */
.setups-override-badge--custom {
  background: var(--accent-primary-100);
  color: var(--accent-primary-400);
}

/* None/unavailable override — muted dash */
.setups-override-badge--none {
  background: var(--color-gray-lighter);
  color: var(--text-400);
}

/* Inline wrapper for "SA"/"Setup" label + badge pair */
.setups-override-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--font-size-xs);
  color: var(--text-400);
}

/* Vertical stack of epic/setup cards within drawer */
.setups-drawer-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-16);
}

/* ============================================================================
   Setups Cross-Tabulation Grid — Data Type × Input Type matrix
   CSS grid layout for crosstab cells; headers match domain-health table styling.
   ============================================================================ */

.setups-crosstab {
  display: grid;
  gap: 1px;
  background: var(--color-gray-light);
  border-radius: var(--border-radius-8);
  overflow: auto;
  max-width: 100%;
  /* Fallback grid template for out-of-range column counts */
  grid-template-columns: minmax(140px, auto) repeat(4, minmax(120px, 1fr));
}

/* Dynamic grid columns based on data-cols attribute (range 2-12 columns) */
.setups-crosstab[data-cols="2"]  { grid-template-columns: minmax(140px, auto) repeat(1, minmax(120px, 1fr)); }
.setups-crosstab[data-cols="3"]  { grid-template-columns: minmax(140px, auto) repeat(2, minmax(120px, 1fr)); }
.setups-crosstab[data-cols="4"]  { grid-template-columns: minmax(140px, auto) repeat(3, minmax(120px, 1fr)); }
.setups-crosstab[data-cols="5"]  { grid-template-columns: minmax(140px, auto) repeat(4, minmax(120px, 1fr)); }
.setups-crosstab[data-cols="6"]  { grid-template-columns: minmax(140px, auto) repeat(5, minmax(120px, 1fr)); }
.setups-crosstab[data-cols="7"]  { grid-template-columns: minmax(140px, auto) repeat(6, minmax(120px, 1fr)); }
.setups-crosstab[data-cols="8"]  { grid-template-columns: minmax(140px, auto) repeat(7, minmax(120px, 1fr)); }
.setups-crosstab[data-cols="9"]  { grid-template-columns: minmax(140px, auto) repeat(8, minmax(120px, 1fr)); }
.setups-crosstab[data-cols="10"] { grid-template-columns: minmax(140px, auto) repeat(9, minmax(120px, 1fr)); }
.setups-crosstab[data-cols="11"] { grid-template-columns: minmax(140px, auto) repeat(10, minmax(120px, 1fr)); }
.setups-crosstab[data-cols="12"] { grid-template-columns: minmax(140px, auto) repeat(11, minmax(120px, 1fr)); }

/* Top-left corner cell (empty header intersection) */
.setups-crosstab-corner {
  background: rgba(241, 245, 249, 0.72);
  border: none;
}

/* Column header cells (top axis — input types) */
.setups-crosstab-col-head {
  background: rgba(241, 245, 249, 0.72);
  color: var(--text-400);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-8) var(--space-8);
  text-align: center;
  border: none;
  justify-content: center;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}

/* Row header cells (left axis — data types) */
.setups-crosstab-row-head {
  background: rgba(241, 245, 249, 0.72);
  color: var(--text-400);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-8) var(--space-12);
  text-align: left;
  border: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  border-left: 3px solid transparent;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}

/* Row header icon (material symbol, 18px, colored by data type) */
.setups-crosstab-row-head-icon {
  font-size: 18px;
  flex-shrink: 0;
  color: var(--text-400);
}

/* Row header label: preserve uppercase and letter-spacing on text */
.setups-crosstab-row-head-label {
  display: inline;
}

/* Colour-code each data type: icon colour + left accent border */
.setups-crosstab-row-head[data-datatype="product"] {
  border-left-color: var(--datatype-product-accent);
}
.setups-crosstab-row-head[data-datatype="product"] .setups-crosstab-row-head-icon {
  color: var(--datatype-product-accent);
}

.setups-crosstab-row-head[data-datatype="product-list"] {
  border-left-color: var(--datatype-product-list-accent);
}
.setups-crosstab-row-head[data-datatype="product-list"] .setups-crosstab-row-head-icon {
  color: var(--datatype-product-list-accent);
}

.setups-crosstab-row-head[data-datatype="article"] {
  border-left-color: var(--datatype-article-accent);
}
.setups-crosstab-row-head[data-datatype="article"] .setups-crosstab-row-head-icon {
  color: var(--datatype-article-accent);
}

.setups-crosstab-row-head[data-datatype="article-list"] {
  border-left-color: var(--datatype-article-list-accent);
}
.setups-crosstab-row-head[data-datatype="article-list"] .setups-crosstab-row-head-icon {
  color: var(--datatype-article-list-accent);
}

.setups-crosstab-row-head[data-datatype="job"] {
  border-left-color: var(--datatype-job-accent);
}
.setups-crosstab-row-head[data-datatype="job"] .setups-crosstab-row-head-icon {
  color: var(--datatype-job-accent);
}

.setups-crosstab-row-head[data-datatype="real-estate"] {
  border-left-color: var(--datatype-real-estate-accent);
}
.setups-crosstab-row-head[data-datatype="real-estate"] .setups-crosstab-row-head-icon {
  color: var(--datatype-real-estate-accent);
}

.setups-crosstab-row-head[data-datatype="vehicle"] {
  border-left-color: var(--datatype-vehicle-accent);
}
.setups-crosstab-row-head[data-datatype="vehicle"] .setups-crosstab-row-head-icon {
  color: var(--datatype-vehicle-accent);
}

.setups-crosstab-row-head[data-datatype="serp"] {
  border-left-color: var(--datatype-serp-accent);
}
.setups-crosstab-row-head[data-datatype="serp"] .setups-crosstab-row-head-icon {
  color: var(--datatype-serp-accent);
}

.setups-crosstab-row-head[data-datatype="forum"] {
  border-left-color: var(--datatype-forum-accent);
}
.setups-crosstab-row-head[data-datatype="forum"] .setups-crosstab-row-head-icon {
  color: var(--datatype-forum-accent);
}

.setups-crosstab-row-head[data-datatype="business-listing"] {
  border-left-color: var(--datatype-business-listing-accent);
}
.setups-crosstab-row-head[data-datatype="business-listing"] .setups-crosstab-row-head-icon {
  color: var(--datatype-business-listing-accent);
}

.setups-crosstab-row-head[data-datatype="reviews"] {
  border-left-color: var(--datatype-reviews-accent);
}
.setups-crosstab-row-head[data-datatype="reviews"] .setups-crosstab-row-head-icon {
  color: var(--datatype-reviews-accent);
}

.setups-crosstab-row-head[data-datatype="social"] {
  border-left-color: var(--datatype-social-accent);
}
.setups-crosstab-row-head[data-datatype="social"] .setups-crosstab-row-head-icon {
  color: var(--datatype-social-accent);
}

.setups-crosstab-row-head[data-datatype="custom"] {
  border-left-color: var(--datatype-custom-accent);
}
.setups-crosstab-row-head[data-datatype="custom"] .setups-crosstab-row-head-icon {
  color: var(--datatype-custom-accent);
}

.setups-crosstab-row-head[data-datatype="other"] {
  border-left-color: var(--datatype-other-accent);
}
.setups-crosstab-row-head[data-datatype="other"] .setups-crosstab-row-head-icon {
  color: var(--datatype-other-accent);
}

/* Body cells (data cells) */
.setups-crosstab-cell {
  background: var(--surface-white);
  padding: var(--space-8);
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 70px;
  justify-content: flex-start;
}

/* Empty cell (no feeds): centre em-dash, muted */
.setups-crosstab-cell.is-empty {
  align-items: center;
  justify-content: center;
  color: var(--text-400);
  font-size: var(--font-size-sm);
}

/* Single metric row (label + value pair) */
.setups-crosstab-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
}

/* Metric label (left, muted, small) */
.setups-crosstab-metric-label {
  font-size: var(--font-size-xs);
  color: var(--text-400);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

/* Metric value (right, tabular, semibold) */
.setups-crosstab-metric-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================================
   Setups Cell State Modifiers — colour coding by comparison status
   Subtle tinted background + strong left accent border + state-aware delta text
   ============================================================================ */

/* On-target: actual within ±10% of estimate → GREEN */
.setups-crosstab-cell.is-on-target {
  background: color-mix(in srgb, var(--setups-state-success-solid) 12%, transparent);
  border-left: 3px solid var(--setups-state-success-solid);
}

.setups-crosstab-cell.is-on-target .setups-crosstab-metric-value {
  color: var(--text-700);
}

.setups-crosstab-cell.is-on-target .setups-crosstab-delta {
  color: var(--setups-state-success-solid);
}

/* Minor deviation: 10–20% either direction → AMBER */
.setups-crosstab-cell.is-minor {
  background: color-mix(in srgb, var(--setups-state-warning-solid) 12%, transparent);
  border-left: 3px solid var(--setups-state-warning-solid);
}

.setups-crosstab-cell.is-minor .setups-crosstab-metric-value {
  color: var(--text-700);
}

.setups-crosstab-cell.is-minor .setups-crosstab-delta {
  color: var(--setups-state-warning-solid);
}

/* Overrun: actual >20% OVER estimate → RED */
.setups-crosstab-cell.is-overrun {
  background: color-mix(in srgb, var(--setups-state-danger-solid) 12%, transparent);
  border-left: 3px solid var(--setups-state-danger-solid);
}

.setups-crosstab-cell.is-overrun .setups-crosstab-metric-value {
  color: var(--text-700);
}

.setups-crosstab-cell.is-overrun .setups-crosstab-delta {
  color: var(--setups-state-danger-solid);
}

/* Over-estimated: actual >20% UNDER estimate → BLUE */
.setups-crosstab-cell.is-over-estimated {
  background: color-mix(in srgb, var(--setups-state-info-solid) 12%, transparent);
  border-left: 3px solid var(--setups-state-info-solid);
}

.setups-crosstab-cell.is-over-estimated .setups-crosstab-metric-value {
  color: var(--text-700);
}

.setups-crosstab-cell.is-over-estimated .setups-crosstab-delta {
  color: var(--setups-state-info-solid);
}

/* No comparison possible: has feeds but no actual/estimate to compare → NEUTRAL */
.setups-crosstab-cell.is-nocompare {
  background: color-mix(in srgb, var(--setups-state-neutral-solid) 8%, transparent);
  border-left: 3px solid var(--setups-state-neutral-solid);
}

.setups-crosstab-cell.is-nocompare .setups-crosstab-metric-value {
  color: var(--text-400);
}

/* Clickable cell: cursor + hover/focus affordances (state left border and tint remain intact) */
.setups-crosstab-cell.is-clickable {
  cursor: pointer;
}

.setups-crosstab-cell.is-clickable:hover {
  filter: brightness(1.03);
}

.setups-crosstab-cell.is-clickable:focus-visible {
  outline: 2px solid var(--accent-primary-400);
  outline-offset: -1px;
}

/* Inline delta suffix (e.g. " (-61%)") after metric count */
.setups-crosstab-delta {
  font-size: var(--font-size-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-left: 0.25rem;
}

/* ============================================================================
   Setups Crosstab Legend — state swatch + label pairs
   Horizontal wrap layout above the grid with semantic state indicators.
   ============================================================================ */

.setups-crosstab-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
  font-size: var(--font-size-xs);
  color: var(--text-400);
}

/* Legend item: inline-flex row with swatch + label */
.setups-crosstab-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

/* Legend swatch: ~12px solid square with state colour, rounded */
.setups-crosstab-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--border-radius-4);
  flex-shrink: 0;
}

/* Legend swatch state colours — solid variants (match cell accent border colours) */
.setups-crosstab-legend-swatch.is-on-target {
  background: var(--setups-state-success-solid);
}

.setups-crosstab-legend-swatch.is-minor {
  background: var(--setups-state-warning-solid);
}

.setups-crosstab-legend-swatch.is-overrun {
  background: var(--setups-state-danger-solid);
}

.setups-crosstab-legend-swatch.is-over-estimated {
  background: var(--setups-state-info-solid);
}

.setups-crosstab-legend-swatch.is-nocompare {
  background: var(--setups-state-neutral-solid);
}

/* ============================================================================
   Setups Detail Card — Material 3 inspired layout
   White rounded card with soft elevation, generous padding, and clear grouping.
   ============================================================================ */

.setups-detail-card {
  background: var(--surface-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--border-radius-16);
  padding: var(--space-20);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* Header row: identity (avatar + headings) left, meta (chips + status) right */
.setups-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-24);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-gray-light);
}

/* Left side of header: avatar + headings */
.setups-detail-identity {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex: 1 1 0px;
}

/* Square avatar tile with light accent tint and icon */
.setups-detail-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--border-radius-12);
  background: var(--accent-primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.setups-detail-avatar .mat-icon,
.setups-detail-avatar .material-symbols-outlined {
  font-size: 24px;
  width: 24px;
  height: 24px;
  color: var(--accent-primary-500);
}

/* Vertical stack of title and subtitle */
.setups-detail-headings {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Row containing epic key and SAT ticket link */
.setups-detail-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
}

/* Large semibold epic key */
.setups-detail-key {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-700);
  text-decoration: none;
}

.setups-detail-key:hover {
  text-decoration: underline;
}

/* Muted subtitle text below headings (as span or link) */
.setups-detail-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-400);
  font-weight: 400;
}

/* Subtitle as an interactive link (opens Epic) */
.setups-detail-subtitle-link {
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.setups-detail-subtitle-link:hover {
  color: var(--accent-secondary-cold-500);
  text-decoration: underline;
}

/* Right side of header: chips, status pills, and SAT button — lays them out cleanly in a row with wrapping */
.setups-detail-header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1.2 1 0px;
}

/* Container for chip pills */
.setups-detail-chips {
  display: flex;
  gap: var(--space-8);
}

/* Single chip pill: label + override badge */
.setups-detail-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-12);
  border-radius: var(--border-radius-12);
  background: var(--surface-grey);
  font-size: var(--font-size-xs);
}

/* Chip label text */
.setups-detail-chip-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Status pill with check icon */
.setups-detail-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--border-radius-12);
  background: var(--success-100);
}

.setups-detail-status .mat-icon,
.setups-detail-status .material-symbols-outlined {
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: var(--success-600);
}

/* Status text (green, medium weight) */
.setups-detail-status-text {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--success-600);
}

/* Status date (small muted) */
.setups-detail-status-date {
  font-size: var(--font-size-xs);
  color: var(--text-400);
}

/* Main content row: facts grid (left) + metrics/button (right) */
.setups-detail-main {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Facts grid: 2 columns with airy spacing */
.setups-detail-facts {
  flex: 3;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-20) var(--space-12);
  border-right: 1px solid var(--color-gray-light);
}

/* Single fact: icon + label/value */
.setups-detail-fact {
  display: flex;
  gap: var(--space-12);
  align-items: center;
  justify-content: flex-start;
}

/* Icon container within fact */
.setups-detail-fact-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setups-detail-fact-icon .mat-icon,
.setups-detail-fact-icon .material-symbols-outlined {
  font-size: 22px;
  width: 22px;
  height: 22px;
  color: var(--text-400);
}

/* Body: label + value */
.setups-detail-fact-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Fact label (small muted) */
.setups-detail-fact-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Fact value */
.setups-detail-fact-value {
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--text-700);
}

/* Right side: metrics block only (SAT button moved to header-meta); stays right-aligned */
.setups-detail-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  flex: 1
}

/* Metrics row: Estimated / Actual / Variance (2-col grid; Variance spans full width below) */
.setups-detail-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-24);
}

/* Single metric: label over value, right/center aligned */
.setups-detail-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-end;
}

/* Variance metric spans full width on its own row */
.setups-detail-metric:nth-child(3) {
  grid-column: 1 / -1;
}

/* Metric label (uppercase muted) */
.setups-detail-metric-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Metric value (large, semibold, tabular) */
.setups-detail-metric-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-700);
  font-variant-numeric: tabular-nums;
}

/* M3 tonal/text button: Open SAT sheet — sits at the right edge of the detail footer */
.setups-detail-sat-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-left: auto;
  flex-shrink: 0;
  padding: var(--space-10) var(--space-16);
  border-radius: var(--border-radius-8);
  background: transparent;
  color: var(--accent-primary-500);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease;
}

.setups-detail-sat-button:hover {
  background: rgba(24, 30, 90, 0.08);
}

.setups-detail-sat-button .mat-icon,
.setups-detail-sat-button .material-symbols-outlined {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

/* ============================================================================
   Failed Epics List — Error-state cards inside setups-modal-body
   ============================================================================ */

/* Container for failed epic cards — vertical flex with gap */
.setups-failure-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Individual failed epic card — bordered, rounded, subtle danger accent */
.setups-failure-item {
  padding: var(--space-12);
  border: 1px solid var(--color-gray-light);
  border-left: 3px solid var(--error-500);
  border-radius: var(--border-radius-8);
  background: var(--surface-white);
  display: grid;
  justify-content: space-between;
  align-items: center;
  grid-auto-flow: column;
  align-content: space-between;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}

/* Header row: epic key + summary, wrapping flex */
.setups-failure-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  flex-wrap: wrap;
  flex-direction: column;
}

/* Epic key link — semibold, monospace-ish, no default blue */
.setups-failure-key {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-700);
  text-decoration: none;
  transition: text-decoration 0.2s ease;
}

.setups-failure-key:hover {
  text-decoration: underline;
}

/* Summary text — secondary colour, small font */
.setups-failure-summary {
  font-size: var(--font-size-sm);
  color: var(--text-400);
  font-weight: 400;
}

/* Error reason line — danger colour, small, breaks long text */
.setups-failure-reason {
  margin-top: var(--space-8);
  font-size: var(--font-size-sm);
  color: var(--error-500);
  font-weight: 500;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Per-row actions: SAT sheet link on the left, Retry button pushed right. */
.setups-failure-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: var(--space-8);
  gap: var(--space-8);
}

/* Per-row "Retry" button — mirrors the SAT link button but accent-filled so it
   reads as the primary action; sits on the right of the actions row. */
.setups-failure-retry-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-left: auto;
  padding: var(--space-10) var(--space-16);
  border: none;
  border-radius: var(--border-radius-8);
  background: var(--accent-primary-500);
  color: var(--surface-white);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.setups-failure-retry-button:hover:not(:disabled) {
  background: var(--accent-primary-700);
}

.setups-failure-retry-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.setups-failure-retry-button .mat-icon,
.setups-failure-retry-button .material-symbols-outlined {
  display: block;
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 18px;
}

/* Spin the refresh icon while the row's retry snapshot is in flight. */
.setups-failure-retry-button .mat-icon.is-spinning,
.setups-failure-retry-button .material-symbols-outlined.is-spinning {
  animation: loading-spin 0.9s linear infinite;
}

/* ============================================================================
   Setups Modal — Cell Trigger Button, Modal Dialog, & Feed Ticket Section
   ============================================================================ */

/* Small icon button appended inside non-empty crosstab cells for opening modal */
/* Full-viewport modal overlay — semi-transparent backdrop, high z-index */
.setups-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  background: rgba(15, 23, 42, 0.45);
}

/* Modal dialog card — white bg, rounded, shadow, max-width, flex column */
.setups-modal {
  width: min(92vw, 1000px);
  max-height: 85vh;
  background: var(--surface-white);
  border-radius: var(--border-radius-8);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Modal header — sticky, flex row space-between, bottom border */
.setups-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-20) var(--space-16);
  border-bottom: 1px solid var(--color-gray-light);
  flex: 0 0 auto;
}

/* Action buttons group — flex row with tight spacing */
.setups-modal-head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex: 0 0 auto;
}

/* Container for title and subtitle headings inside modal head */
.setups-modal-headings {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
}

/* Modal title — large, bold, primary text */
.setups-modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-700);
  line-height: 1.2;
}

/* Modal subtitle — muted, small, secondary info (feed count + metrics) */
.setups-modal-subtitle {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-400);
  font-weight: 400;
  line-height: 1.3;
}

/* Modal body — scrollable flex column, stacks feed cards with gaps */
.setups-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-20);
}

/* Ensure detail cards inside modal have consistent width and spacing */
.setups-modal-body .setups-detail-card {
  flex-shrink: 0;
}

/* ============================================================================
   Setups Detail Card — Ticket/DOD Section (Estimated vs Actual Hours)
   ============================================================================ */

/* Footer row — horizontally flexed, top border, tickets ~3/4 width, SAT button to right */
.setups-detail-footer {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-gray-light);
}

/* Ticket section container — flex: 3 to occupy ~75% of footer row */
.setups-detail-tickets {
  flex: 3;
}

/* Small uppercase label for ticket section */
.setups-detail-tickets-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--text-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-12);
  display: block;
}

/* Row of ticket chips — flex wrap with small gap */
.setups-detail-tickets-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* Individual ticket chip — pill link with subtle styling */
.setups-detail-ticket {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  background: var(--color-gray-lighter);
  border-radius: var(--border-radius-4);
  text-decoration: none;
  color: var(--text-700);
  font-size: var(--font-size-xs);
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

.setups-detail-ticket:hover {
  background-color: var(--color-gray-light);
  color: var(--accent-secondary-cold-500);
}

/* Hours suffix inside ticket chip — tabular, muted */
.setups-detail-ticket-hours {
  font-variant-numeric: tabular-nums;
  color: var(--text-400);
  font-size: var(--font-size-xs);
  font-weight: 500;
  margin-left: var(--space-4);
}

/* Dashboard — skeleton animations */
@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-cell {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s infinite;
  border-radius: var(--border-radius-4);
  display: inline-block;
  width:72px;
  height:1.4rem;
}

.skeleton-row {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s infinite;
  border-radius: var(--border-radius-8);
  width: 100%;
}

/* Dashboard — WIP badge on panel label */
.dashboard-wip-badge {
  display: inline-block;
  padding: 0.1em 0.45em;
  margin-left: var(--space-6);
  font-size: var(--font-size-xxs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--border-radius-4);
  background: var(--warning-100);
  color: #9a5f00;
  vertical-align: middle;
}

/* Dashboard — renewal items inside hero card */
.dashboard-renewal-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #eef1f5;
  margin-top: 0;
}

.dashboard-renewal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) 0;
  border-bottom: 1px solid #eef1f5;
}

.dashboard-renewal-item:last-child {
  border-bottom: none;
}

.dashboard-renewal-item-icon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(176, 44, 206, 0.08);
  border-radius: var(--border-radius-8);
  color: var(--accent-secondary-cold-500);
  font-size: 1.25rem;
}

.dashboard-renewal-item-main {
  min-width: 0;
  flex: 1;
}

.dashboard-renewal-name {
  margin: 0 0 0.15rem 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-renewal-meta {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-400);
}

.dashboard-renewal-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
  flex-shrink: 0;
}

.dashboard-renewal-mrr {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-700);
}

/* Dashboard — chart container inside summary-card */
.chart-container {
  width: 100%;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dashboard — complexity donut legend */
.complexity-donut-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-12);
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid #eef1f5;
}

.complexity-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--font-size-xs);
}

.complexity-legend-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.complexity-legend-label {
  flex: 1;
  color: var(--text-600);
  font-weight: 500;
}

.complexity-legend-count {
  font-weight: 700;
  color: var(--text-700);
}

.complexity-legend-pct {
  color: var(--text-400);
  min-width: 2.5rem;
  text-align: right;
}

/* Dashboard — hot domains two-panel layout */
.hot-domains-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  padding-top: var(--space-12);
}

.hot-domains-panel-head {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-400);
}

.hot-domains-panel-subhead {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-300);
}

.hot-domains-panel-list {
  display: flex;
  flex-direction: column;
}

.hot-domain-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) 0;
  border-bottom: 1px solid #eef1f5;
}

.hot-domain-item:last-child { border-bottom: none; }

.hot-domain-item-rank {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(176, 44, 206, 0.1);
  color: var(--accent-secondary-cold-500);
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--font-size-xs);
}

.hot-domain-item-rank--increase {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
}

.hot-domain-item-content {
  flex: 1;
  min-width: 0;
}

.hot-domain-item-domain {
  margin: 0 0 0.1rem 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.hot-domain-item-meta {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--text-400);
}

.hot-domain-item-badge {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.hot-domain-pct-badge {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--accent-secondary-cold-500);
  background: rgba(176, 44, 206, 0.08);
  border-radius: var(--border-radius-full);
  padding: 2px 7px;
  white-space: nowrap;
}

.hot-domain-inc-badge {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
  border-radius: var(--border-radius-full);
  padding: 2px 7px;
  white-space: nowrap;
}

.hot-domain-inc-badge--down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.hot-domain-tier {
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--border-radius-full);
  padding: 1px 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hot-domain-tier--simple  { background: #d1f0e8; color: #008a69; }
.hot-domain-tier--medium  { background: #fff5e9; color: #c26a00; }
.hot-domain-tier--complex { background: #fff0e0; color: #b94d00; }
.hot-domain-tier--custom  { background: #fce7f3; color: #9d174d; }

/* Placeholder — dashboard-kpi-grid stub (unused, kept for safety) */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-20);
  margin-bottom: var(--space-12);
}

/* Dashboard-scoped overrides — tighten & promote values */

/* KPI quick-cards: bigger value, tighter spacing, no fixed min-height */
[data-page="dashboard"] .quick-card,
[data-page="dashboard"] .community-card {
  min-height: auto;
  padding: var(--space-12) var(--space-20);
}

[data-page="dashboard"] .quick-card h3,
[data-page="dashboard"] .community-card h3 {
  font-size: 1.875rem;
  line-height: 1.1;
  margin: 0;
  color: var(--text-700);
}

[data-page="dashboard"] .quick-card p,
[data-page="dashboard"] .community-card p {
  margin: 0;
  font-size: var(--font-size-base);
}

[data-page="dashboard"] .quick-card .subtle,
[data-page="dashboard"] .community-card .subtle {
  margin: 0;
  font-size: var(--font-size-sm);
}

[data-page="dashboard"] .dashboard-card-comparison {
  margin: 0;
  gap: var(--space-6);
}

/* Tighten the heading gap in hero/summary cards on the dashboard */
[data-page="dashboard"] .panel-heading-split {
  margin-bottom: 0;
}

/* Dashboard — panel card icon row (icon badge + heading text block) */
.dashboard-panel-icon-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.dashboard-panel-icon-row .panel-label,
.dashboard-panel-icon-row .subtle {
  margin: 0;
}

/* Icon badge inside a panel heading (accent-purple default) */
.dashboard-panel-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  color: var(--accent-secondary-cold-500);
  background: rgba(176, 44, 206, 0.1);
  border-radius: var(--border-radius-8);
  padding: var(--space-6);
}

/* Danger (red) variant — fire_check on Hot Domains */
.dashboard-panel-icon--danger {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

/* Info (blue) variant — donut_large on Feed Complexity */
.dashboard-panel-icon--info {
  color: var(--quick-icon-info-fg);
  background: var(--quick-icon-info-bg);
}

/* Quick-icon colour variants */
.quick-icon--success { background: var(--quick-icon-success-bg); color: var(--quick-icon-success-fg); }
.quick-icon--info    { background: var(--quick-icon-info-bg);    color: var(--quick-icon-info-fg); }
.quick-icon--primary { background: var(--quick-icon-primary-bg); color: var(--quick-icon-primary-fg); }
.quick-icon--warning { background: var(--quick-icon-warning-bg); color: var(--quick-icon-warning-fg); }
.quick-icon--ghost   { background: rgba(255, 255, 255, 0.18);    color: #fff; }

/* Push quick-link to bottom of flex column inside quick-card */
[data-page="dashboard"] .quick-card .quick-link,
[data-page="dashboard"] .community-card .quick-link {
  margin-top: auto;
}

/* Community card text overrides (dark gradient card, white-on-grad text) */
.community-card .dashboard-card-label { color: rgba(255, 255, 255, 0.8); }
.community-card .quick-card-body p    { color: rgba(255, 255, 255, 0.85); font-size: var(--font-size-sm); }
.community-card .quick-link           { color: rgba(255, 255, 255, 0.9); }

/* Ensure the headline value reads white on the blue gradient card,
   overriding the dashboard-scoped `--text-700` rule above. */
[data-page="dashboard"] .community-card h3,
[data-page="dashboard"] .community-card h3 .skeleton-cell {
  color: #fff;
}
[data-page="dashboard"] .community-card .subtle {
  color: rgba(255, 255, 255, 0.85);
}

/* Period button expand icon */
.dashboard-period-button .material-symbols-outlined {
  font-size: 1rem;
  margin-left: var(--space-4);
}

/* Card footer schedule icon */
.dashboard-card-footer .material-symbols-outlined {
  font-size: 1rem;
  vertical-align: text-bottom;
  margin-right: var(--space-4);
}

/* Comparison row trend icon */
.dashboard-card-comparison > .material-symbols-outlined {
  font-size: 1rem;
  color: var(--quick-icon-success-fg);
}

/* Promote the renewal MRR value to stand out beside the badge */
.dashboard-renewal-mrr {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-700);
}

/* Keep renewal name slightly smaller than default to give MRR more weight */
.dashboard-renewal-name {
  font-size: var(--font-size-sm);
}

/* Tighten the gap between renewal list top border and first item */
.dashboard-renewal-list {
  margin-top: 0;
}

/* Dashboard — VIP badge (gold/orange) */
.dashboard-vip-badge {
  display: inline-block;
  padding: 0.1em 0.45em;
  margin-left: var(--space-6);
  font-size: var(--font-size-xxs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--border-radius-4);
  background: var(--warning-100);
  color: #9a5f00;
  vertical-align: middle;
}

/* Dashboard — main 2-column layout: left = counts + chart, right = total + breakdown */
.dashboard-renewal-main-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  align-items: stretch;
}

/* Left column: 3 counts + bar chart */
.dashboard-renewal-left {
  padding-right: var(--space-24);
  min-width: 0;
}

/* Right column: total value + breakdown, separated by vertical line */
.dashboard-renewal-right {
  padding-left: var(--space-24);
  border-left: 1px solid #eef1f5;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* 3 color-coded count metrics in a row */
.dashboard-renewal-metrics-row {
  display: flex;
  gap: var(--space-24);
  margin-bottom: var(--space-20);
}

.dashboard-renewal-metric {
  flex: 1;
  text-align: center;
  margin-top:2rem;
}

.dashboard-renewal-metric-value {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--space-4);
}

/* Color-coded metric values */
.dashboard-renewal-metric--past-due  { color: var(--color-status-past-due); }
.dashboard-renewal-metric--due-soon  { color: var(--color-status-due-soon); }
.dashboard-renewal-metric--upcoming  { color: var(--color-status-upcoming); }

.dashboard-renewal-metric-label {
  font-size: var(--font-size-xs);
  color: var(--text-500);
  line-height: 1.4;
  font-weight: 500;
}

/* Total value box inside right panel */
.dashboard-renewal-total-value-mini {
  padding: var(--space-12) var(--space-20);
  background: #f3f4f5;
  border-radius: var(--border-radius-8);
  text-align: center;
  border: 1px solid #eef1f5;
}

.dashboard-renewal-total-value-mini .dashboard-renewal-total-label {
  font-size: var(--font-size-xs);
  color: var(--text-400);
  display: block;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-renewal-total-value-large {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-700);
  display: block;
}

/* Dashboard — stacked bar chart for renewal distribution */
.dashboard-renewal-chart {
  margin: 0;
}

.dashboard-bar-container {
  margin-bottom: var(--space-10);
}

.dashboard-bar-stack {
  display: flex;
  height: 28px;
  border-radius: var(--border-radius-4);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dashboard-bar-segment {
  flex: 0 0 auto;
  transition: opacity 0.2s ease;
}

/* Status colours via data attribute — no inline styles needed */
.dashboard-bar-segment[data-status="past-due"]  { background: var(--color-status-past-due); }
.dashboard-bar-segment[data-status="due-soon"]  { background: var(--color-status-due-soon); }
.dashboard-bar-segment[data-status="upcoming"]  { background: var(--color-status-upcoming); }

.dashboard-bar-segment:hover {
  opacity: 0.9;
}

.dashboard-bar-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--text-300);
  padding: var(--space-6) 2px 0;
}

/* Dashboard — value breakdown by status */
.dashboard-renewal-breakdown {
  margin-top: 0;
  padding-top: 0;
}

.dashboard-breakdown-header {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--text-600);
  margin-bottom: var(--space-12);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.dashboard-breakdown-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-12);
  padding: 0;
  font-size: var(--font-size-sm);
}

.dashboard-breakdown-item:hover {
  background: transparent;
}

.dashboard-breakdown-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Status colours via data attribute — no inline styles needed */
.dashboard-breakdown-dot[data-status="past-due"]  { background: var(--color-status-past-due); }
.dashboard-breakdown-dot[data-status="due-soon"]  { background: var(--color-status-due-soon); }
.dashboard-breakdown-dot[data-status="upcoming"]  { background: var(--color-status-upcoming); }

.dashboard-breakdown-label {
  color: var(--text-600);
  font-size: var(--font-size-sm);
}

.dashboard-breakdown-value {
  font-weight: 700;
  color: var(--text-700);
  text-align: right;
  font-size: var(--font-size-sm);
}

/* Dashboard — period selector dropdown */
.dashboard-period-selector {
  display: flex;
  align-items: center;
}

.dashboard-period-button {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  background: var(--surface-grey);
  border: var(--border-1-light-gray);
  border-radius: var(--border-radius-8);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-600);
  cursor: pointer;
  gap: var(--space-4);
  white-space: nowrap;
}

.dashboard-period-button:hover {
  background: var(--bg-light-page);
  border-color: var(--color-gray-light);
}

/* Dashboard — at-risk risk percentage text */
.dashboard-risk-percent {
  display: none;
}

/* Dashboard — card footer with timestamp and link */
.dashboard-card-footer {
  margin: 0;
  padding-top: var(--space-12);
  border-top: 1px solid #eef1f5;
  font-size: var(--font-size-sm);
  color: var(--text-400);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.dashboard-card-link {
  color: var(--accent-secondary-cold-500);
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.dashboard-card-link:hover {
  text-decoration: underline;
}

/* Dashboard — card label (uppercase metric name) */
.dashboard-card-label {
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-xxs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-400);
}

/* Dashboard — card comparison row (e.g., trending up with % change) */
.dashboard-card-comparison {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.dashboard-card-comparison .subtle {
  margin: 0;
}

/* Dashboard — domain health circular gauge */
.dashboard-health-gauge {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--space-16) 0;
}

.dashboard-health-circle {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 3px solid rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.dashboard-health-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.dashboard-health-label {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.8);
  margin-top: var(--space-4);
}

/* Dashboard — bottom summary metrics row */
.dashboard-summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
  padding: var(--space-20);
  background: var(--surface-grey);
  border-radius: var(--border-radius-12);
  margin-top: var(--space-20);
}

.dashboard-summary-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.dashboard-summary-item > span:first-child {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(176, 44, 206, 0.1);
  color: var(--accent-secondary-cold-500);
  font-size: 1.25rem;
}

.dashboard-summary-item > div {
  flex: 1;
}

.dashboard-summary-content {
  flex: 1;
  min-width: 0;
}

.dashboard-summary-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-700);
}

.dashboard-summary-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-400);
  margin-top: var(--space-2);
}

.font-400 {
    font-weight:400;
    color:var(--text-400)
}

/* Spinner for the analysis header "Download" button while preparing. */
.download-spin {
    display: inline-block;
    animation: loading-spin 0.9s linear infinite;
    transform-origin: 50% 50%;
}


/* ===========================================================================
   AI Overview & Recommendations panel
   =========================================================================== */

.ai-overview-panel {
  border: 1px solid var(--border-color-light);
  border-radius: 8px;
  background: #e2d5ff;
  box-shadow: var(--shadow-panel);
  padding: var(--space-12) var(--space-20);
  margin: 0;
}

/* Legacy top loading row is replaced by the title-icon spinner state. */
.ai-overview-panel .ai-overview-loading {
    display: none !important;
}

.ai-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ai-overview-heading-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.ai-overview-title-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(124, 58, 237, 0.06) 100%);
    color: #6d28d9;
    flex-shrink: 0;
}

.ai-overview-title-icon .material-symbols-outlined {
    font-size: 1.35rem;
}

.ai-overview-title-spinner {
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid rgba(124, 58, 237, 0.24);
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: loading-spin 0.8s linear infinite;
    display: inline-block;
}

.ai-overview-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.ai-overview-title {
    font-size: var(--font-size-base);
    font-weight: 700;
  color: #5c2d91;
  margin: 0;
}

.ai-overview-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.ai-overview-refresh-btn {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    border: 1px solid var(--border-color-light);
    background: rgba(255, 255, 255, 0.72);
    padding: 0;
}

.ai-overview-refresh-btn .material-symbols-outlined {
    font-size: 1.25rem;
}

.ai-overview-summary {
  font-size: var(--font-size-sm);
  color: var(--text-300);
  line-height: 1.55;
}

.ai-overview-summary p {
  margin: 0.2rem 0 0 0;
}

.ai-overview-feed-highlight {
    font-weight: 600;
    color: var(--color-text-strong-purple);
    background: rgba(124, 58, 237, 0.1);
    border-radius: 4px;
    padding: 0 0.3rem;
}

.ai-overview-apply-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ai-overview-apply-all .material-symbols-outlined {
  font-size: 1rem;
}

.ai-overview-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--text-400);
  padding: 0.5rem 0;
}

.ai-overview-loading[hidden] {
    display: none !important;
}

.ai-overview-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(124, 58, 237, 0.25);
  border-top-color: #7c3aed;
  border-radius: 50%;
  animation: loading-spin 0.8s linear infinite;
  flex-shrink: 0;
}

.ai-overview-pending-text {
  font-size: var(--font-size-sm);
  color: var(--text-400);
  margin: 0.25rem 0 0;
}

.ai-overview-error {
  font-size: var(--font-size-sm);
  color: var(--text-error, #c0392b);
  margin: 0.25rem 0 0;
}

@media (max-width: 900px) {
    .ai-overview-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .ai-overview-header-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* AI Details modal */

.ai-details-modal-dialog {
    width: min(100%, 60rem);
    max-height: min(88vh, 52rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0; /* override confirm-modal-dialog default padding */
}

.ai-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-color-light);
    flex-shrink: 0;
}

.ai-details-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-700);
    margin: 0;
}

.ai-details-title .material-symbols-outlined {
    font-size: 1.1rem;
    color: #7c3aed;
}

.ai-details-header-actions {
    display: flex;
    gap: 0.5rem;
}

.ai-details-header-actions .ghost-button {
    background: rgba(124, 58, 237, 0.08);
    border-color: #c4b5fd;
    color: var(--color-text-strong-purple);
    font-size: var(--font-size-xs);
}

.ai-details-header-actions .ghost-button:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: #a78bfa;
}

.ai-details-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    min-height: 0;
}

.ai-details-results {
    display: flex;
    flex-direction: column;
}

.ai-details-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border-color-light);
    flex-shrink: 0;
}

.ai-details-footer #ai-details-apply-all {
    font-size: var(--font-size-xs);
}

.ai-details-close-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid var(--border-color-light) !important;
    flex-shrink: 0;
}

.ai-rec-section {
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    background: #fff;
}

.ai-rec-section-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-200);
    margin: 0;
    padding: 0.4rem 0.65rem;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    list-style: none;
}

.ai-rec-section-title::-webkit-details-marker {
    display: none;
}

.ai-rec-section[open] .ai-rec-section-title {
    border-bottom-color: var(--border-color-light);
}

.ai-rec-section-title .material-symbols-outlined {
  font-size: 1rem;
  color: var(--text-400);
}

.ai-rec-section-count {
  margin-left: auto;
  font-size: var(--font-size-xxs);
  background: var(--bg-light-page);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  color: var(--text-400);
}

.ai-rec-expand-all,
.ai-rec-collapse-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-300);
  font-size: 0.875rem;
  transition: all 0.15s ease;
}

.ai-rec-expand-all:hover,
.ai-rec-collapse-all:hover {
  background: var(--bg-light-page);
  color: var(--text-200);
  border-color: var(--border-color-light);
}

.ai-rec-expand-all:active,
.ai-rec-collapse-all:active {
  background: var(--bg-input);
  border-color: var(--primary-color);
}

.ai-rec-chevron {
    margin-left: 0.25rem;
    font-size: 1rem;
    color: var(--text-400);
    transition: transform 0.2s ease;
}

.ai-rec-section[open] .ai-rec-section-title .ai-rec-chevron,
.ai-rec-item[open] .ai-rec-item-summary .ai-rec-chevron {
    transform: rotate(180deg);
}

.ai-rec-list {
  list-style: none;
    padding: 0.4rem 0.5rem;
    margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ai-rec-item {
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border-color-light);
    border-left: 3px solid transparent;
    background: #fff;
    overflow: hidden;
}

.ai-rec-item-summary {
    cursor: pointer;
    list-style: none;
    padding: 0.5rem 0.75rem;
    transition: background 0.15s ease;
}

.ai-rec-item-summary:hover {
    background: var(--surface-grey, #f3f4f5);
}

.ai-rec-item-summary::-webkit-details-marker {
    display: none;
}

.ai-rec-item-body {
    padding: 0.55rem 0.75rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid var(--border-color-light);
}

.ai-rec-item.ai-rec-chip--suggest {
    border-left-color: #7c3aed;
}

.ai-rec-item.ai-rec-chip--warn {
    border-left-color: #d97706;
}

.ai-rec-item.ai-rec-chip--info {
    border-left-color: #3b82f6;
}

.ai-rec-item.ai-rec-item--applied {
    border-left-color: #16a34a;
}

.ai-rec-applied-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: var(--font-size-xxs);
    font-weight: 700;
    color: #16a34a;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

.ai-rec-applied-badge .material-symbols-outlined {
    font-size: 0.75rem;
}

/* Summary: stacked meta row + headline row */
.ai-rec-item-head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ai-rec-item-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ai-rec-item-headline-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.ai-rec-feed {
    font-size: var(--font-size-xxs);
    font-weight: 700;
    color: var(--text-400);
    background: var(--bg-light-page);
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
}

.ai-rec-severity-badge {
    font-size: var(--font-size-xxs);
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ai-rec-severity-badge--suggest {
    background: rgba(124, 58, 237, 0.1);
    color: var(--color-text-strong-purple);
}

.ai-rec-severity-badge--warn {
    background: rgba(217, 119, 6, 0.12);
    color: #92400e;
}

.ai-rec-severity-badge--info {
    background: rgba(59, 130, 246, 0.1);
    color: #1e40af;
}

.ai-rec-headline {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-700);
    line-height: 1.3;
    flex: 1;
}

/* 2-column grid: Key Findings (left) + Key Data (right) */
.ai-rec-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    align-items: start;
}

/* Labeled section blocks inside the body */
.ai-rec-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ai-rec-block-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--font-size-xxs);
    font-weight: 700;
    color: var(--text-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.ai-rec-block-label .material-symbols-outlined {
    font-size: 0.875rem;
    line-height: 1;
}

/* Key Data: side-by-side contracted / calculated tiles */
.ai-rec-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.ai-rec-metric-row {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: var(--surface-grey, #f3f4f5);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
}

.ai-rec-metric-label {
    font-size: var(--font-size-xxs);
    color: var(--text-400);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ai-rec-metric-value {
    font-size: var(--font-size-sm);
    color: var(--text-700);
    font-weight: 700;
}

.ai-rec-rationale {
    font-size: var(--font-size-sm);
    color: var(--text-500);
    line-height: 1.45;
    margin: 0;
}

/* Key Findings evidence list */
.ai-rec-evidence {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ai-rec-evidence li {
    font-size: var(--font-size-xs);
    color: var(--text-400);
    padding-left: 0.9rem;
    position: relative;
    line-height: 1.4;
}

.ai-rec-evidence li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--text-300);
    font-size: 0.7rem;
}

/* AI Recommendation highlight footer */
.ai-rec-recommended {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(92, 45, 145, 0.06) 0%, rgba(124, 58, 237, 0.11) 100%);
    border: 1.5px solid #7c3aed;
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
}

.ai-rec-recommended-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ai-rec-recommended-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-xxs);
    color: var(--color-text-strong-purple);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ai-rec-recommended-label .material-symbols-outlined {
    font-size: 0.875rem;
}

.ai-rec-recommended-value {
    font-size: 1rem;
    color: #3b0764;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Advisory-only variant — non-applicable recommendations */
.ai-rec-recommended.advisory {
    background: rgba(102, 125, 135, 0.07);
    border-color: #9badb5;
}

.ai-rec-recommended.advisory .ai-rec-recommended-label {
    color: var(--text-400);
}

.ai-rec-recommended.advisory .ai-rec-recommended-label .material-symbols-outlined {
    color: var(--text-400);
}

.ai-rec-recommended.advisory .ai-rec-recommended-value {
    font-size: var(--font-size-sm);
    color: var(--text-500);
    font-weight: 600;
    letter-spacing: 0;
}

/* ─── AI rec inline charts ─────────────────────────────────────────────────── */

.ai-rec-chart-details {
    border: 1px solid var(--border-color-light);
    border-radius: 6px;
    overflow: hidden;
}

.ai-rec-chart-summary {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-500);
    cursor: pointer;
    user-select: none;
    list-style: none;
    background: var(--bg-light-page);
}

.ai-rec-chart-summary::-webkit-details-marker { display: none; }

.ai-rec-chart-summary .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
}

.ai-rec-chart-summary .ai-rec-chevron {
    margin-left: auto;
    transition: transform 150ms ease;
}

.ai-rec-chart-details[open] .ai-rec-chart-summary .ai-rec-chevron {
    transform: rotate(180deg);
}

.ai-rec-chart-body {
    padding: 0.4rem 0.65rem 0.35rem;
    border-top: 1px solid var(--border-color-light);
}

/* Spike badge inside chart summary */
.ai-chart-spike-badge {
    font-size: var(--font-size-xxs);
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Footnote below chart */
.ai-chart-note {
    font-size: var(--font-size-xxs);
    color: var(--text-400);
    margin: 0;
    padding: 0 0.5rem;
    text-align: right;
}

/* SVG chart elements */
.ai-chart-line        { stroke: #f59e0b; stroke-width: 2; }
.ai-chart-dot         { fill: #fff; stroke: #f59e0b; stroke-width: 2; }
.ai-chart-dot--spike  { fill: #fee2e2; stroke: #ef4444; stroke-width: 2; }

.ai-chart-ref         { stroke-width: 1.5; stroke-dasharray: 5 3; }
.ai-chart-ref--contracted  { stroke: #9ca3af; }
.ai-chart-ref--recommended { stroke: #7c3aed; }

.ai-chart-ref-label   { font-size: 9px; fill: #9ca3af; }
.ai-chart-ref-label--contracted  { fill: #9ca3af; }
.ai-chart-ref-label--recommended { fill: #7c3aed; }

/* HTML legend row above each chart showing reference line labels */
.ai-chart-ref-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0rem;
    padding: 0.25rem 1rem 0rem 0rem;
    justify-content: flex-end;
}

.ai-chart-ref-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.ai-chart-ref-legend-item::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 0;
    border-top: 2px dashed;
    flex-shrink: 0;
}

.ai-chart-ref-legend-item--contracted {
    color: #6b7280;
}

.ai-chart-ref-legend-item--contracted::before {
    border-color: #9ca3af;
}

.ai-chart-ref-legend-item--recommended {
    color: #7c3aed;
}

.ai-chart-ref-legend-item--recommended::before {
    border-color: #7c3aed;
}

.ai-chart-bar              { fill: #2563eb; }
.ai-chart-bar--maintenance { fill: #f59e0b; }

.ai-rec-actions {
    flex-shrink: 0;
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}

.ai-rec-discard {
    background: transparent;
    border: 1px solid var(--border-color, #d1d5db);
    color: var(--text-secondary, #6b7280);
}

.ai-rec-discard:hover:not(:disabled) {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #374151;
}

.ai-rec-discarded-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 500;
}

.ai-rec-discarded-badge .material-symbols-outlined {
    font-size: 0.9rem;
}

.ai-rec-item--discarded {
    opacity: 0.6;
}

.ai-rec-item--discarded .ai-rec-headline,
.ai-rec-item--discarded .ai-rec-recommended-value {
    text-decoration: line-through;
}

.ai-rec-apply--applied {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
    cursor: default;
    gap: 0.3rem;
}

.ai-rec-apply--applied .material-symbols-outlined {
    font-size: 0.9rem;
}

@media (max-width: 520px) {
    .ai-rec-columns {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .ai-rec-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .ai-rec-item-summary {
        padding: 0.45rem 0.6rem;
    }

    .ai-rec-item-body {
        padding: 0.45rem 0.6rem 0.55rem;
    }

    .ai-details-header,
    .ai-details-footer {
        padding: 0.5rem 0.75rem;
    }
}


/* Feed-level AI recommendation indicator chip */

.ai-feed-chip {
  display: inline-flex;
  align-items: center;
    vertical-align: middle;
  gap: 0.25rem;
  padding: 0rem 0.5rem;
  margin-left: 0.5rem;
  border-radius: 4px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: 500;
    line-height: 1;
  transition: all 0.2s ease;
}

.ai-feed-chip:hover {
  transform: translateY(-1px);
}

.ai-feed-chip--applicable {
  border-color: #7c3aed;
  color: #5c2d91;
}

.ai-feed-chip--applicable:hover {
  border-color: #5c2d91;
  background: rgba(124, 58, 237, 0.15);
}

.ai-feed-chip--info {
  border-color: #3b82f6;
  color: #1e40af;
}

.ai-feed-chip--info:hover {
  border-color: #1e40af;
  background: rgba(59, 130, 246, 0.1);
}

.ai-feed-chip--applied {
  border-color: #16a34a;
  color: #15803d;
}

.ai-feed-chip--applied:hover {
  border-color: #15803d;
  background: rgba(22, 163, 74, 0.1);
}

.ai-feed-chip .material-symbols-outlined {
  font-size: 0.9rem;
  line-height: 1;
}

.pill-button .material-symbols-outlined {
    margin-right: 0.5rem;
}
/* ============================================================
   Estimate Insights section  (.ei-*)
   ============================================================ */

.ei-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

/* Two-column grid for Tier Distribution + Margin side-by-side */
.ei-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
}

@media (max-width: 1400px) {
    .ei-grid-2 {
        grid-template-columns: 1fr;
    }
}

.ei-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.ei-table-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.ei-card-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-500);
}

.ei-section-title {
    margin: 0 0 var(--space-12) 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-500);
}

.ei-card-sub {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-400);
    line-height: 1.4;
}

/* Donut chart layout */
/* Two-column grid holding the request-type and spend donuts */
.ei-mix-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
}

@media (max-width: 1400px) {
    .zyte-api-job-layout--aside-expanded .ei-mix-grid,
    .zyte-api-job-layout:has(.zyte-api-job-comments-react-shell[data-aside-state="expanded"]) .ei-mix-grid {
        grid-template-columns: 1fr;
    }
}

/* Feature mix — horizontal layout: big donut left, legend right */
.ei-mix-panel {
    display: flex;
    align-items: flex-start;
    gap: var(--space-24);
    margin-top: var(--space-8);
}

/* Override donut size for the insights context */
.ei-card--mix .usage-ring-donut {
    width: 12rem;
    height: 11.5rem;
    flex-shrink: 0;
}

/* Legend column */
.ei-mix-legend {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    justify-content: center;
    align-self: center;
}

.ei-mix-legend-group {
    display: flex;
    flex-direction: column;
}

.ei-mix-legend-head {
    margin: 0 0 var(--space-6);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-400);
}

.ei-mix-legend-sub {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-300);
}

.ei-mix-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--font-size-xs);
    padding: var(--space-6) 0;
    border-bottom: 1px solid #f0f2f5;
}

.ei-mix-legend-item:last-child {
    border-bottom: none;
}

.ei-mix-legend-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ei-mix-legend-label {
    flex: 1;
    color: var(--text-600);
    font-weight: 500;
}

.ei-mix-legend-count {
    font-weight: 700;
    color: var(--text-700);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ei-mix-legend-pct {
    color: var(--text-400);
    min-width: 2.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Type badge in tier distribution column */
.ei-type-badge {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.1em 0.45em;
    border-radius: 4px;
    font-size: 0.67rem;
    font-weight: 700;
    vertical-align: middle;
    font-family: var(--font-sans, sans-serif);
}

/* Tier section separator row inside the combined table */
.ei-tier-section-header {
    padding: var(--space-6) var(--space-8);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.ei-tier-section-header--browser {
    background: hsl(220 70% 96%);
    color: hsl(220 60% 38%);
}

.ei-tier-section-header--http {
    background: hsl(220 15% 94%);
    color: var(--text-500);
}

.ei-type-badge--browser {
    background: hsl(220 70% 92%);
    color: hsl(220 60% 35%);
}

.ei-type-badge--http {
    background: var(--color-gray-lighter);
    color: var(--text-500);
}

/* Compact tables */
.ei-table {
    width: 100%;
    min-width: 44rem;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.ei-th {
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-400);
    border-bottom: 1px solid var(--color-gray-light);
    white-space: nowrap;
}

.ei-th--num {
    text-align: right;
}

.ei-td {
    padding: 0.35rem 0.5rem;
    color: var(--text-700);
    border-bottom: 1px solid var(--color-gray-lighter);
    vertical-align: middle;
}

.ei-td--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ei-td--domain {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
}

/* Tier badge in domain column */
.ei-tier-badge {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.1em 0.45em;
    border-radius: 4px;
    font-size: 0.67rem;
    font-weight: 700;
    background: var(--color-gray-lighter);
    color: var(--text-500);
    vertical-align: middle;
    font-family: var(--font-sans, sans-serif);
}

/* Browser rendered badge */
.ei-rendered-badge {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.1em 0.45em;
    border-radius: 4px;
    font-size: 0.67rem;
    font-weight: 700;
    background: hsl(220 70% 88%);
    color: hsl(220 60% 35%);
    vertical-align: middle;
    font-family: var(--font-sans, sans-serif);
}

/* Margin badges — same thresholds as Zyte Data pricing tab */
.ei-margin-badge {
    display: inline-block;
    padding: 0.2em 0.5em;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.ei-margin-badge--low {
    background: hsl(0 70% 94%);
    color: hsl(0 60% 35%);
}

.ei-margin-badge--mid {
    background: hsl(40 80% 93%);
    color: hsl(40 65% 30%);
}

.ei-margin-badge--high {
    background: hsl(145 50% 92%);
    color: hsl(145 55% 28%);
}

.ei-margin-badge--neutral {
    background: var(--color-gray-lighter);
    color: var(--text-500);
}

/* Spend composition bar column */
.ei-table--spend .ei-th:last-child,
.ei-table--spend .ei-td:last-child {
    width: 35%;
    padding-left: 0.75rem;
}

.ei-spend-label {
    font-size: 0.82rem;
}

.ei-spend-bar-cell {
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
}

.ei-spend-bar {
    height: 8px;
    border-radius: 4px;
    min-width: 2px;
    max-width: 100%;
}

.ei-spend-bar--rendered {
    background: hsl(220 65% 58%);
}

.ei-spend-bar--http {
    background: hsl(220 20% 68%);
}

.ei-spend-bar--addon {
    background: hsl(145 45% 52%);
}

/* ---------------------------------------------------------------------------
 * Recalculating row indicator
 *
 * Applied to <tr> elements in the pricing & maintenance tables while the
 * server is recomputing prices after a manual override or AI Apply. The
 * input cells already show the new value optimistically; the rest of the
 * row gets a subtle animated background + a marker dot to communicate
 * "working on it" without dimming the whole row.
 * ------------------------------------------------------------------------- */

@keyframes recalc-shimmer {
    0%   { background-position:   0% 0; }
    100% { background-position: 200% 0; }
}

tr.is-recalculating {
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        hsl(210 60% 95% / 0.55) 30%,
        hsl(210 60% 90% / 0.85) 50%,
        hsl(210 60% 95% / 0.55) 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: recalc-shimmer 1.6s linear infinite;
}

tr.is-recalculating > td:first-child {
    position: relative;
}

tr.is-recalculating > td:first-child::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: hsl(210 80% 55%);
    transform: translateY(-50%);
    box-shadow: 0 0 0 0 hsl(210 80% 55% / 0.6);
    animation: recalc-pulse 1.2s ease-out infinite;
}

@keyframes recalc-pulse {
    0%   { box-shadow: 0 0 0 0   hsl(210 80% 55% / 0.55); }
    70%  { box-shadow: 0 0 0 7px hsl(210 80% 55% / 0); }
    100% { box-shadow: 0 0 0 0   hsl(210 80% 55% / 0); }
}


/* ──────────────────────────────────────────────────────────────────────────
 * Drafts toolbar (Update Pricing + Discard) — visible only while one or
 * more feeds carry `uncommitted=true`. Rendered by
 * `feeds_toolbar_react_shell.js`, driven by the analysis-detail
 * TanStack cache. The shell toggles the `hidden` attribute when the
 * pending count is zero.
 * ────────────────────────────────────────────────────────────────────── */
.drafts-controls {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    margin-left: var(--space-8);
}

.drafts-controls[hidden] {
    display: none;
}

.drafts-commit-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.drafts-commit-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: hsl(0 0% 100% / 0.22);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
}

.drafts-commit-count:empty {
    display: none;
}

.drafts-discard-button {
    font-size: var(--font-size-sm);
}

.drafts-countdown {
    font-size: var(--font-size-sm);
    color: var(--text-500);
    min-width: 7rem;
}

.drafts-countdown:empty {
    display: none;
}

/* Per-cell pending overlay — applied to any cell tied to a feed that has
 * `uncommitted=true`. Independent of the FieldStateV2 `status` enum. */
[data-uncommitted="true"] {
    border-bottom: 1px dotted hsl(35 85% 45%);
}

/* New Projects Modal — Create modal (import modal uses native <dialog> with its own rules above) */
#new-project-create-modal {
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
}

#new-project-create-modal::backdrop {
    background: var(--overlay-dark-subtle);
}

/* New Projects — TTFV import file input */
#import-file-input {
    font-size: var(--font-size-sm);
    color: var(--text-500);
    height: 4.2rem;
}

#import-file-input::file-selector-button {
    border: 1px solid var(--color-gray-light);
    border-radius: 999px;
    padding: var(--padding-label);
    margin-right: var(--space-12);
    cursor: pointer;
    color: var(--text-600);
    background: transparent;
    font-size: var(--font-size-sm);
    font-family: inherit;
    letter-spacing: 0.01em;
    transition:
        border-color 0.16s ease,
        background-color 0.16s ease,
        color 0.16s ease;
}

#import-file-input::file-selector-button:hover {
    border-color: var(--accent-primary-200);
    background: var(--accent-primary-50);
}

/* ============================================================================
   New Projects — Import Review Modal Content Styling
   ============================================================================ */

.np-import-review {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.np-import-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.np-import-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-700);
}

.np-import-section {
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-gray-light);
}

.np-import-section:first-of-type {
    padding-top: 0;
    border-top: none;
}

/* Project + Input file share a top row: two columns with a gap in the middle. */
.np-import-split {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-24);
    align-items: flex-start;
}
.np-import-split > .np-import-section {
    flex: 1 1 14rem;
    min-width: 0;
    padding-top: 0;
    border-top: none;
}
/* The first stacked section after the split keeps its divider. */
.np-import-split + .np-import-section {
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-gray-light);
}

.np-import-section-title {
    margin: 0 0 var(--space-12) 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-400);
}

.np-import-kv {
    display: grid;
    grid-template-columns: minmax(6rem, 12rem) 1fr;
    gap: var(--space-8) var(--space-16);
    margin: 0;
}

.np-import-kv-row {
    display: contents;
}

.np-import-kv dt {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-400);
}

.np-import-kv dd {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-700);
    font-weight: 500;
}

.np-import-table-wrap {
    overflow-x: auto;
}

.np-import-table {
    font-size: var(--font-size-sm);
}

.np-import-table td,
.np-import-table th {
    padding: var(--space-8) var(--space-12);
}

.np-import-error {
    margin-top: var(--space-8);
    font-size: var(--font-size-sm);
    color: var(--error-500);
}

.form-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--text-700);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 8px 12px;
    border: 1px solid var(--color-gray-light);
    border-radius: 4px;
    font-family: inherit;
    font-size: var(--font-size-base);
    background: var(--bg-light);
    color: var(--text-700);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary-500);
    box-shadow: 0 0 0 2px rgba(0, 113, 188, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-section {
    border: 1px solid var(--color-gray-light);
    border-radius: 4px;
    padding: 16px;
    margin: 0;
}

.form-section legend {
    font-weight: 600;
    font-size: var(--font-size-base);
    padding: 0 8px;
}

#feeds-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px 0;
}

.feed-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--color-gray-light);
    border-radius: 4px;
    background: var(--bg-light-secondary);
    align-items: flex-end;
}

.feed-row .form-group {
    gap: 4px;
}

.feed-row .form-group label {
    font-size: 12px;
}

.remove-feed-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    color: var(--error-500);
}

.remove-feed-button:hover {
    color: var(--error-700);
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid var(--color-gray-light);
}

.form-actions button {
    padding: 8px 16px;
}

/* Project Detail View Styles */
.project-detail-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    background: var(--bg-light-secondary);
    border-radius: 4px;
}

.project-header h3 {
    margin: 0 0 4px 0;
    font-size: var(--font-size-lg);
}

.project-customer {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-500);
}

.project-badges {
    display: flex;
    gap: 8px;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    background: var(--accent-primary-100);
    color: var(--accent-primary-700);
    border-radius: 3px;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.project-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.metric {
    padding: 12px;
    background: var(--bg-light-secondary);
    border-radius: 4px;
    text-align: center;
}

.metric-label {
    margin: 0 0 8px 0;
    font-size: var(--font-size-sm);
    color: var(--text-500);
    font-weight: 500;
}

.metric-value {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-700);
}

.feeds-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-gray-light);
    border-radius: 4px;
    overflow: hidden;
}

.feeds-table th {
    background: var(--bg-light-secondary);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-gray-light);
}

.feeds-table td {
    padding: 12px;
    border-bottom: 1px solid var(--color-gray-light);
}

.feeds-table tbody tr:hover {
    background: var(--bg-light-secondary);
}

.project-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* ============================================================================
 * New Project — Detail Page
 * Imported from the mockup at src/zapi_estimation/web/mockups/new-projects-detail.html
 * ============================================================================ */

.new-project-layout {
    display: grid;
    gap: var(--space-16, 1rem);
    align-items: start;
}
.new-project-main { display: grid; gap: var(--space-16, 1rem); min-width: 0; }

/* Header panel — name, status, actions. */
.np-header { padding: 1.25rem 1.5rem; }
.np-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.np-title-block { display: grid; gap: 0.35rem; min-width: 0; }
.np-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-700, #2a2a2a);
    letter-spacing: -0.01em;
}
.np-subtitle { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--text-500, #666); font-size: 0.9rem; }
.np-subtitle span { display: inline-flex; align-items: center; gap: 0.3rem; }
.np-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.np-header-actions .ghost-button.pill-button,
.np-header-actions .np-dropdown summary.secondary-button,
.np-header-actions .np-dropdown summary.primary-button {
    min-height: 0;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    gap: 0.45rem;
}
.np-header-actions .ghost-button.pill-button .material-symbols-outlined,
.np-header-actions .np-dropdown summary.secondary-button .material-symbols-outlined,
.np-header-actions .np-dropdown summary.primary-button .material-symbols-outlined {
    font-size: 1rem;
}
.np-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.np-status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d97706;
}

.np-section { padding: 1.25rem 1.5rem; }
.np-section .panel-heading-split { margin-bottom: var(--space-12) !important; }
.np-section-hint { color: var(--text-500, #666); font-size: 0.85rem; margin: 0; }

.np-tabbed-panel {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.np-tabbed-panel .analysis-data-tabs { margin-bottom: 1.25rem; flex-wrap: wrap; }
.np-tabbed-panel .analysis-data-panel { padding-top: 0.25rem;}
.np-tab-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--accent-secondary-cold-500, #3f4fed);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.2rem;
}
.np-tab-meta--warn { background: #d97706; }
.analysis-data-tab:not(.is-active) .np-tab-meta { background: var(--text-400, #94a3b8); }

/* .new-project-main .renewal-table th {
    text-align: left !important;
} */

.np-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-12);
}
.np-form-grid--single { grid-template-columns: minmax(0, 1fr); }
.np-field--span-all { grid-column: 1 / -1; }
.np-field--tall textarea { min-height: 9rem; }
.np-field { display: grid; gap: 0.8rem; }
.np-field > label { font-weight: 600; font-size: 0.85rem; color: var(--text-600, #444); }
.np-field input[type="text"],
.np-field input[type="url"],
.np-field textarea {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--color-gray-light, #e5e7eb);
    border-radius: 6px;
    background: white;
    color: var(--text-700, #222);
    font-size: 0.8rem;
}
.np-field textarea { min-height: 8rem; resize: vertical; font-family: inherit; }
#np-approach { height: 180px; }
.np-field-hint {
    font-size: 0.78rem;
    color: var(--text-400, #888);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.np-field-hint .material-symbols-outlined { font-size: 1rem; }

.np-field-label-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}
.np-field-label-row > label { font-weight: 600; font-size: 0.85rem; color: var(--text-600, #444); }
.np-field-ai-button {
    background: #f3efff;
    border: 1px solid #d6caff;
    color: #6d28d9;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.np-field-ai-button:hover {
    background: #f3f0ff;
    border-color: #d6caff;
    color: #4c1d95;
}
.np-field-ai-button .material-symbols-outlined { font-size: 0.95rem; }

.np-feeds-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.np-source-cell { color: var(--accent-primary-500, #3f4fed); font-size: 0.85rem; }

/* Give the domain input a real width and let the column shrink-wrap to
   "input + tier badges" (no fixed column width = no trailing whitespace).
   The freed space flows to the wider Data Type column. */
.np-col-datatype { width: 11%; }
.np-col-ratio { width: 5%; }
.np-col-source { width: 25%; }

/* Pricing + Pricing Debug tables: match the visual density of the Feeds table.
   The base renewal-table uses 4px horizontal padding which looks fine with 10
   narrow input-filled columns, but reads as floating content in the 5 wide
   columns here. Increasing horizontal padding and the header row height fixes
   all three: header looks too short, left/right padding too thin, cells too airy. */
.np-pricing-table th,
.np-pricing-table td,
.np-pricing-debug-table th,
.np-pricing-debug-table td {
    padding: 0.65rem 0.75rem;
}

.np-pricing-debug-table thead .np-debug-group-row th {
  text-align: center;
  font-weight: 700;
  border-bottom: 1px solid var(--border-200, #e5e7eb);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.np-pricing-debug-table thead .np-debug-group-setup {
  background: rgba(63, 79, 237, 0.1);
}

.np-pricing-debug-table thead .np-debug-group-maint {
  background: rgba(176, 44, 206, 0.1);
}

.np-pricing-debug-table thead .np-debug-group-infra {
  background: rgba(245, 158, 11, 0.1);
}

.np-domain-cell-wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: center;
  gap: 0.5rem;
}
.grid-container > div:only-child {
  grid-column: 1 / -1; 
}

.np-validation-error {
  color: #dc3545;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: -0.25rem;
}

.np-tier-loading {
  display: inline-block;
  color: #666;
  font-size: 0.75rem;
  font-style: italic;
  margin-top: -0.25rem;
}

.np-tier-display {
  display: flex;
  flex-direction: column;
  /* background: #f0f7ff;
  border-left: 3px solid #3f4fed; */
  padding: 0;
  border-radius: 3px;
  width: max-content;
}
/* .np-domain-cell-wrapper .np-tier-display {
    width: 100%;
} */

.np-tier-display small {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  color: #444;
  font-size: 0.75rem;
  font-weight: 500;
}

.np-type-tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.np-type-tag--detail { background: #ecfdf5; color: #047857; }
.np-type-tag--both { background: #fef3c7; color: #92400e; }

.np-output-format {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 0.75rem;
}
@media (max-width: 900px) {
    .np-form-grid { grid-template-columns: minmax(0, 1fr); }
    .np-output-format { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.np-pricing-summary {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-panel);
}
.np-pricing-summary-item { display: grid; gap: 0.15rem; min-width: 15rem; }
.np-pricing-summary-label {
    font-size: 0.72rem;
    color: var(--text-400, #888);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
}
.np-pricing-summary-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-700, #222);
}
.np-pricing-summary-value--accent { color: #047857; }

.np-compliance-table th:first-child,
.np-compliance-table td:first-child { width: 9rem; }
.np-compliance-table td:nth-child(2) { line-height: 1.4; }
.np-compliance-table td:nth-child(2),
.np-compliance-table th:nth-child(2) { text-align: left !important; }
.np-compliance-table th:nth-child(3),
.np-compliance-table td:nth-child(3) { width: 8.5rem; text-align: center; }
.np-compliance-table th:last-child,
.np-compliance-table td:last-child { width: 22rem; }
.np-compliance-table td:last-child,
.np-compliance-table th:last-child { padding-right: var(--space-12) !important; }
.np-compliance-table .feed-toggle-label { justify-content: center; }

/* Tri-state Yes/No choice — loads with neither selected; an explicit Yes or No
   is required to mark the question answered. */
.np-compliance-choice {
  display: inline-flex;
  gap: var(--space-4);
  justify-content: center;
}
.np-compliance-choice-btn {
  appearance: none;
  cursor: pointer;
  min-width: 3rem;
  padding: var(--space-4) var(--space-8);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-500);
  background: var(--surface-white);
  border: var(--border-1-light-gray);
  border-radius: var(--border-radius-full);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.np-compliance-choice-btn:hover {
  border-color: var(--text-500);
}
.np-compliance-choice-btn--yes.is-active {
  color: var(--success-600);
  background: var(--success-100);
  border-color: var(--success-600);
}
.np-compliance-choice-btn--no.is-active {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}
.np-compliance-choice-btn:focus-visible {
  outline: 2px solid var(--text-500);
  outline-offset: 1px;
}

.np-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.np-kpi-card {
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-gray-light, #e5e7eb);
    border-radius: 12px;
    background: white;
    display: grid;
    gap: 0.45rem;
}
.np-kpi-card .quick-card-header { gap: 0.55rem; margin-bottom: 0.1rem; }
.np-kpi-card .quick-icon { width: 1.65rem; height: 1.65rem; border-radius: 8px; }
.np-kpi-card .quick-icon .material-symbols-outlined { font-size: 1rem; }
.np-kpi-card .dashboard-card-label { margin: 0; flex: 1; }
.np-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-700, #222);
    line-height: 1.1;
}
.np-kpi-value--accent { color: var(--accent-secondary-cold-500, #3f4fed); }
.np-kpi-value--good { color: #047857; }
.np-kpi-value--warn { color: #d97706; }
.np-kpi-sub { font-size: 0.78rem; color: var(--text-400, #888); }

.np-overview-aside { display: grid; gap: 0.75rem; }
.np-overview-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 800px) { .np-overview-row { grid-template-columns: 1fr; } }
.np-overview-card { padding: 1rem 1.1rem; }

.np-sources-list { display: grid; gap: 0.4rem; }
.np-sources-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-gray-light, #e5e7eb);
    border-radius: 8px;
    background: white;
    font-size: 0.85rem;
    justify-content: space-between;
}
.np-sources-row .material-symbols-outlined { font-size: 1.05rem; color: var(--text-500, #666); }
.np-sources-row a { margin-left: auto; }

.np-sources-row-label {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* New Projects Readiness Row Status Modifiers */
.np-readiness-row--ok {
    background: var(--readiness-ok-bg);
    border-color: var(--readiness-ok-border);
}
.np-readiness-row--ok .material-symbols-outlined { color: var(--readiness-ok-icon); }

.np-readiness-row--warn {
    background: var(--readiness-warn-bg);
    border-color: var(--readiness-warn-border);
}
.np-readiness-row--warn .material-symbols-outlined { color: var(--readiness-warn-icon); }

.np-readiness-row--blocked {
    background: var(--readiness-blocked-bg);
    border-color: var(--readiness-blocked-border);
}
.np-readiness-row--blocked .material-symbols-outlined { color: var(--readiness-blocked-icon); }

.np-readiness-row--neutral {
    background: var(--readiness-neutral-bg);
    border-color: var(--readiness-neutral-border);
}
.np-readiness-row--neutral .material-symbols-outlined { color: var(--readiness-neutral-icon); }

.np-dropdown { position: relative; }
.np-dropdown summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.np-dropdown summary::-webkit-details-marker { display: none; }
.np-dropdown summary.secondary-button,
.np-dropdown summary.primary-button {
    min-height: 1.75rem;
    padding: var(--padding-label, 0.45rem 0.95rem);
    border-radius: 999px;
    border: 1px solid var(--color-gray-light, #e5e7eb);
    font: inherit;
    letter-spacing: 0.01em;
    transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}
.np-dropdown summary.secondary-button:hover {
    border-color: var(--accent-primary-200, #b9c2ff);
    background: var(--accent-primary-50, #f0f3ff);
    transform: translateY(-1px);
}
.np-dropdown summary.primary-button:hover {
    border-color: var(--accent-primary-200, #b9c2ff);
    background: var(--accent-primary-50, #f0f3ff);
    color: var(--accent-primary-600, #2a3eb1);
    transform: translateY(-1px);
}
.np-dropdown[open] > summary > .np-chevron { transform: rotate(180deg); }
.np-chevron { transition: transform 160ms ease; font-size: 1.05rem; }
.np-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    min-width: 280px;
    background: white;
    border: 1px solid var(--color-gray-light, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.35rem;
    display: grid;
    gap: 0.15rem;
    z-index: 30;
}
.np-dropdown-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-size: 0.9rem;
    width: 100%;
    color: var(--text-700, #222);
}
.np-dropdown-item:hover { background: #f3f4f6; }
.np-dropdown-item .material-symbols-outlined { color: var(--accent-secondary-cold-500, #3f4fed); }
.np-dropdown-item-sub { font-size: 0.78rem; color: var(--text-400, #888); justify-self: end; }
.np-dropdown-divider {
    height: 1px;
    background: var(--color-gray-light, #e5e7eb);
    margin: 0.25rem 0.35rem;
}
.np-dropdown-section-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-400, #888);
    padding: 0.45rem 0.7rem 0.2rem;
    font-weight: 700;
}

.np-status-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
}
.np-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.np-status--draft     { background: #fef3c7; color: #92400e; }
.np-status--draft .np-status-dot { background: #d97706; }
.np-status--review    { background: #dbeafe; color: #1e40af; }
.np-status--review .np-status-dot { background: #2563eb; }
.np-status--ready     { background: #ede9fe; color: #5b21b6; }
.np-status--ready .np-status-dot { background: #7c3aed; }
.np-status--won       { background: #dcfce7; color: #166534; }
.np-status--won .np-status-dot { background: #16a34a; }
.np-status--lost      { background: #fee2e2; color: #991b1b; }
.np-status--lost .np-status-dot { background: #dc2626; }
.np-status--archived  { background: #f1f5f9; color: #475569; }
.np-status--archived .np-status-dot { background: #64748b; }

.np-status-menu-item.is-current {
    background: #f3f4f6;
    font-weight: 700;
}
.np-status-menu-item .material-symbols-outlined.np-check {
    color: #16a34a;
    visibility: hidden;
}
.np-status-menu-item.is-current .material-symbols-outlined.np-check { visibility: visible; }

dialog.np-modal {
    border: 0;
    border-radius: 14px;
    padding: 0;
    width: min(800px, calc(100% - 2rem));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    color: var(--text-700, #222);
    background: var(--surface-white, #fff);
    position: fixed;
    inset: 0;
    margin: auto;
    max-height: min(88vh, 720px);
}
dialog.np-modal[open] {
    display: flex;
    flex-direction: column;
}
dialog.np-modal::backdrop { background: rgba(15, 23, 42, 0.45); }
.np-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    flex: 0 0 auto;
}
.np-modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--error-500);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-transform: uppercase;
}
.np-modal-close {
    background: none;
    border: 0;
    color: var(--text-500, #666);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
}
.np-modal-close:hover { background: #f3f4f6; color: var(--text-700, #222); }
.np-modal-body { padding: 0.5rem 1.25rem 0.75rem; display: grid; gap: 1rem; overflow-y: auto; flex: 1 1 auto; }
.np-modal-footer {
    padding: 0.85rem 1.25rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    background: #fafafa;
    border-radius: 0 0 14px 14px;
    flex: 0 0 auto;
}

.np-dropzone {
    margin-top: 0.6rem;
    border: 1.5px dashed #d6caff;
    border-radius: 10px;
    padding: 1rem;
    background: #fafaff;
    text-align: center;
    align-content: center;
    color: #4c1d95;
    font-size: 0.85rem;
    cursor: pointer;
    min-height: 167px;
}
.np-dropzone:hover { background: #f3f0ff; }
.np-dropzone .material-symbols-outlined { font-size: 1.4rem; display: block; margin: 0 auto 0.25rem; }

.np-feed-check-col {
    width: 2.5rem;
    padding-right: 0 !important;
    text-align: center !important;
    vertical-align: middle;
}
.np-feed-check-col input { min-height: 0 !important; }
.np-feed-checkbox {
    width: 1rem;
    min-height: 0 !important;
    height: 2rem !important;
    accent-color: var(--accent-secondary-cold-500, #3f4fed);
    cursor: pointer;
    vertical-align: middle;
}
tr.np-feed-selected > td { background: #eef2ff; }
.np-bulk-edit-btn { display: none !important; }
.np-bulk-edit-btn.is-visible { display: inline-flex !important; }

#schema-builder-modal { width: min(860px, calc(100% - 2rem)); }
#schema-builder-modal .np-modal-header { padding: 0.6rem 1rem; }
#schema-builder-modal .np-modal-body   { padding: 0.75rem 1rem; gap: 0.5rem; }
#schema-builder-modal .np-modal-footer { padding: 0.5rem 1rem; }

#schema-switch-modal { width: min(460px, calc(100% - 2rem)); }
#schema-switch-modal .np-modal-title {
    color: var(--text-700, #222);
    text-transform: none;
    font-size: 1.05rem;
}
#schema-switch-modal .np-modal-title .material-symbols-outlined { color: var(--warning-600); }
#schema-switch-modal .np-modal-body { padding: 0.25rem 1.5rem 0.75rem; }
#schema-switch-modal .np-modal-body p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-600, #555);
}

.renewal-table select,
.np-field select {
    padding: 0.15rem 0.75rem;
    border: 1px solid var(--color-gray-light, #e5e7eb);
    border-radius: var(--border-radius-8);
    font-size: 0.82rem;
    background: white;
    color: var(--text-700, #222);
    min-height: 2rem;
    width: 100%;
    text-align: center;
    font-family: inherit;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23b0b0b0" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
}
.np-schema-type-col { width: 7.5rem; }
.np-schema-req-col  { width: 5rem; text-align: center !important; }
.np-schema-del-col  { width: 2.5rem; text-align: center !important; }
.np-schema-del-btn {
    background: none;
    border: none;
    color: var(--text-300, #ccc);
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}
.np-schema-del-btn:hover { color: #dc2626; background: #fef2f2; }
.np-schema-del-btn .material-symbols-outlined { font-size: 1.1rem; }
.np-schema-std-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-400, #aaa);
    background: #f1f5f9;
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    vertical-align: middle;
    margin-left: 0.3rem;
}
.np-schema-custom-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-secondary-cold-500);
    background: rgba(176, 44, 206, 0.12);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    vertical-align: middle;
    margin-left: 0.3rem;
}
/* ── Schema tree nesting ──────────────────────────────────────────────────
   Nested rows are grouped with classic tree-connector rails: a vertical line
   per ancestor level plus an elbow (├ / └) into each child. The rails are
   absolutely-positioned spans inside the (relative) name cell so the vertical
   lines run flush across rows with no gaps from cell padding.

   Geometry is anchored so a parent's expand chevron sits directly above the
   vertical line dropping to its children. One indent STEP = 1.25rem. A row at
   depth d draws rails in columns 0…d-1 (the last is its elbow); the chevron/
   spacer is a fixed 1.25rem column whose centre lands on the next level's line:
     line/chevron centre x = 1.1rem + level × 1.25rem
   so padding-left(d) and rail left(c) share the base 0.475rem (= 1.1 − 0.625).
   [data-depth] drives indent; [data-col]/[data-guide] drive each rail. */

.np-schema-name-col {
    position: relative;
}

/* Indent the name content past the rails: base + depth × STEP. */
.np-schema-row[data-depth="0"] td.np-schema-name-col { padding-left: 0.475rem; }
.np-schema-row[data-depth="1"] td.np-schema-name-col { padding-left: 1.725rem; }
.np-schema-row[data-depth="2"] td.np-schema-name-col { padding-left: 2.975rem; }
.np-schema-row[data-depth="3"] td.np-schema-name-col { padding-left: 4.225rem; }
.np-schema-row[data-depth="4"] td.np-schema-name-col { padding-left: 5.475rem; }
.np-schema-row[data-depth="5"] td.np-schema-name-col { padding-left: 6.725rem; }
.np-schema-row[data-depth="6"] td.np-schema-name-col { padding-left: 7.975rem; }

.np-tree-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.25rem;
    pointer-events: none;
}
.np-tree-rail[data-col="0"] { left: 0.475rem; }
.np-tree-rail[data-col="1"] { left: 1.725rem; }
.np-tree-rail[data-col="2"] { left: 2.975rem; }
.np-tree-rail[data-col="3"] { left: 4.225rem; }
.np-tree-rail[data-col="4"] { left: 5.475rem; }
.np-tree-rail[data-col="5"] { left: 6.725rem; }

/* Vertical segment of a rail, drawn down the rail centre (0.625rem). "line"/
   "mid" run the full height; "end" (last child) stops at the elbow midpoint.
   "blank" draws nothing. */
.np-tree-rail[data-guide="line"]::before,
.np-tree-rail[data-guide="mid"]::before,
.np-tree-rail[data-guide="end"]::before {
    content: "";
    position: absolute;
    left: 0.625rem;
    width: 2px;
    background: var(--np-tree-line);
}
.np-tree-rail[data-guide="line"]::before,
.np-tree-rail[data-guide="mid"]::before {
    top: 0;
    bottom: 0;
}
.np-tree-rail[data-guide="end"]::before {
    top: 0;
    height: 50%;
}

/* Horizontal elbow from the rail centre out to the row's chevron/content. */
.np-tree-rail[data-guide="mid"]::after,
.np-tree-rail[data-guide="end"]::after {
    content: "";
    position: absolute;
    left: 0.625rem;
    top: 50%;
    height: 2px;
    width: 0.7rem;
    background: var(--np-tree-line);
}

/* Object/array rows: bolder name marks the grouping (no background tint). */
.np-schema-row--container .np-schema-name-cell input {
    font-weight: 600;
    color: var(--text-600);
}

/* Integrated "Add field" footer row — full-width add affordance at table bottom. */
.np-schema-add-footer td {
    padding: 0 !important;
    border-top: 1px solid var(--color-gray-light);
}

.np-schema-add-fieldbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    height: 2.5rem;
    padding: var(--space-12) var(--space-16);
    background: transparent;
    border: none;
    color: var(--text-400);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: color 0.15s ease, background 0.15s ease;
}

.np-schema-add-fieldbtn:hover {
    color: var(--accent-primary-400);
    background: rgba(63, 79, 237, 0.06);
}

.np-schema-add-fieldbtn .material-symbols-outlined {
    font-size: 1.1rem;
}

.np-schema-name-col { width: 20rem; }
.np-schema-default-col { width: 7rem; }
/* Value Format is the flexible column — fixing the others lets it absorb the
   remaining width so it stays the widest. */
.np-schema-format-col { width: auto; min-width: 18rem; }
/* Keep the Standard/Custom badge column tight so it doesn't pad out the row. */
.np-schema-badge-col { width: 4.5rem; padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.np-schema-add-child-btn {
    background: none;
    border: none;
    color: var(--text-400);
    cursor: pointer;
    padding: 0.1rem;
    border-radius: var(--border-radius-4);
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
    flex: 0 0 auto;
}
.np-schema-add-child-btn:hover {
    color: var(--accent-secondary-cold-500);
    background: rgba(176, 44, 206, 0.08);
}
.np-schema-add-child-btn .material-symbols-outlined {
    font-size: 1.1rem;
}

/* Schema fields table — tree structure with collapse/expand and add-child. */
.np-schema-name-cell {
    display: flex;
    align-items: center;
    gap: var(--space-5-5);
}
.np-schema-name-cell input.np-feed-cell-input {
    flex: 1;
    min-width: 0;
}

/* Fixed 1.25rem column so the chevron centre lands on the children's rail line
   (and leaf rows reserve the same width so all inputs line up by depth). */
.np-schema-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-400);
    padding: 0;
    border-radius: var(--border-radius-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    transition: color 0.15s ease;
    flex: 0 0 auto;
}
.np-schema-toggle:hover {
    color: var(--text-600);
}
.np-schema-toggle .material-symbols-outlined {
    font-size: 1.1rem;
}

.np-schema-toggle-spacer {
    display: inline-block;
    width: 1.25rem;
    flex: 0 0 auto;
}

.np-schema-panel {
    margin-top: var(--space-16);
}

/* ============================================================================
   New Projects: Feed Detail & Inputs UI Elements
   ============================================================================ */

.np-table-empty {
    padding: var(--space-16);
    text-align: center;
    color: var(--text-400);
    font-size: var(--font-size-sm);
    font-style: italic;
}

/* #new-project-detail-react-root table th:first-child,
#new-project-detail-react-root table td:first-child{
    padding-left: 0 !important;
} */

#new-project-detail-react-root input,
table input {
    height: 2rem !important;
}

.zyte-api-config-body .subtle {
    margin: 0 !important;
}

/* ============================================================================
   New Projects: Validation Gate (Completion Gate) Tab
   ============================================================================ */

/* Gate header row: status indicator and high-crit counter, laid out horizontally. */
.np-validation-gate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-16);
    padding: var(--space-16);
    border-bottom: 1px solid var(--color-gray-light);
    background: var(--color-gray-lighter);
}

.np-validation-gate > h3,
.np-validation-gate > h4 {
    margin: 0;
    flex: 0 1 auto;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-700);
}

.np-validation-gate > span {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    flex-wrap: wrap;
}

/* Status label and pill: "Status: [BLOCKED|READY]" */
.np-validation-status-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--text-400);
    font-weight: 500;
}

.np-validation-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-12);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xxs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: white;
}

.np-validation-status--blocked {
    background: var(--error-500);
}

.np-validation-status--ready {
    background: var(--success-600);
}

/* High-criticality counter: small badge showing open count */
.np-validation-highcrit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 var(--space-8);
    border-radius: var(--border-radius-full);
    background: var(--color-danger-bg, rgba(239, 68, 68, 0.1));
    color: var(--color-danger, #ef4444);
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
}

/* Validation group container: one per blocker class */
.np-validation-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-16);
    border-bottom: 1px solid var(--color-gray-light);
}

.np-validation-group:last-child {
    border-bottom: none;
}

/* Group title with count badge */
.np-validation-group-title {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-700);
}

.np-validation-group-count {
    font-size: var(--font-size-xs);
    color: var(--text-400);
    font-weight: 500;
    margin-left: auto;
}

/* Disclosure item: one per open item within a group */
.np-validation-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
    overflow: hidden;
}

/* Summary row: expandable header with item details */
.np-validation-summary {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
    cursor: pointer;
    user-select: none;
    background: var(--surface-white);
    transition: background-color 0.15s ease;
    list-style: none;
}

/* Remove default disclosure triangle; summary stays flex container */
.np-validation-item > summary {
    list-style: none;
}

.np-validation-item > summary::-webkit-details-marker {
    display: none;
}

.np-validation-summary:hover {
    background: var(--surface-grey);
}

/* Open-item ID: fixed-width monospace identifier */
.np-validation-oi-id {
    display: inline-block;
    min-width: 5rem;
    flex: 0 0 auto;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: var(--font-size-xs);
    color: var(--text-400);
    font-weight: 500;
}

/* Summary text: the main content, takes remaining space */
.np-validation-oi-summary {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-sm);
    color: var(--text-600);
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Criticality badge pill: --high (error), --medium (warning), --low (neutral) */
.np-validation-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-10);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xxxs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    flex: 0 0 auto;
    color: white;
}

.np-validation-badge--high {
    background: var(--error-500);
}

.np-validation-badge--medium {
    background: var(--warning-600);
}

.np-validation-badge--low {
    background: var(--color-gray);
}

/* Owner tag: small chip-like element for SA/AE/Customer, etc. */
.np-validation-owner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.6rem;
    padding: 0 var(--space-8);
    border-radius: var(--border-radius-8);
    background: var(--color-gray-lighter);
    color: var(--text-600);
    font-size: var(--font-size-xs);
    font-weight: 600;
    flex: 0 0 auto;
}

/* Expanded body: contains the details key-value list */
.np-validation-detail {
    padding: var(--space-12) var(--space-16);
    border-top: 1px solid var(--color-gray-light);
    background: var(--color-gray-lighter);
}

/* Key-value definition list inside expanded body */
.np-validation-kv {
    display: grid;
    grid-template-columns: minmax(7rem, 14rem) 1fr;
    gap: var(--space-8) var(--space-16);
    margin: 0;
}

/* Each key-value pair wrapper */
.np-validation-kv-row {
    display: contents;
}

.np-validation-kv-row dt {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-400);
    font-weight: 500;
}

.np-validation-kv-row dd {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-600);
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ==== Quick Quote ==== */

/* Height lock for Quick Quote pages: flex chain uses :has() to detect when
   Quick Quote is visible, lock the main-column height to viewport, and let
   the flex/grid chain fill available space. */
.main-column:has(> .page-block[data-page~="quick-quote"]:not(.hidden)) {
    height: 100dvh;
    overflow: hidden;
}

/* Make the Quick Quote content section stretch to fill available space.
   .content-grid is a grid with align-items: start (default); we override it
   to stretch, and set grid-template-rows to make the child fill height. */
.content-grid.output-grid[data-page~="quick-quote"]:not(.hidden) {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    grid-template-rows: minmax(0, 1fr);
}

/* Root element for Quick Quote React tree: pass height down to layout. */
#quick-quote-react-root {
    min-height: 0;
    height: 100%;
}

/* Page-level layout: form left, results right; single column under ~1100px.
   Above the breakpoint, both children scroll independently. Below it, reverts
   to normal document scrolling. */
.qq-layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--space-20);
    height: 100%;
}

.qq-layout > * {
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
}

@media (max-width: 1100px) {
    /* Unset the height lock and flex chain for narrow viewports */
    .main-column:has(> .page-block[data-page~="quick-quote"]:not(.hidden)) {
        height: auto;
        overflow: visible;
    }

    .content-grid.output-grid[data-page~="quick-quote"]:not(.hidden) {
        flex: initial;
        min-height: initial;
        align-items: start;
        grid-template-rows: initial;
    }

    #quick-quote-react-root {
        min-height: initial;
        height: auto;
    }

    .qq-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .qq-layout > * {
        overflow-y: visible;
        overscroll-behavior: auto;
    }
}

/* Single-column layout: when viewing a saved quote, form is hidden so only
   the results column exists. Makes it fill the full width. */
.qq-layout--single {
    grid-template-columns: 1fr;
}

/* Missing quote state: quote not found (404 or empty result). Centered
   informational dead-end with link back to calculator. */
.qq-missing-quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    min-height: 200px;
    padding: var(--space-24);
    border: 1px solid var(--color-gray-light);
    background: var(--surface-white);
    border-radius: var(--border-radius-8);
}

.qq-missing-quote > span {
    font-size: 3rem;
    color: var(--text-400);
}

.qq-missing-quote > div {
    text-align: center;
}

.qq-missing-quote p {
    margin: 0;
}

.qq-missing-quote p:first-child {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--text-700);
}

.qq-missing-quote p + p {
    margin-top: var(--space-8);
    font-size: var(--font-size-sm);
    color: var(--text-400);
}

.qq-missing-quote a {
    margin-top: var(--space-12);
}

/* Inline "Pricing…" row: the spinner sits beside the label rather than above
   it, so the row must flex. Without this the spinner is an inline span, which
   ignores width/height and collapses to a squashed sliver of its own border. */
.qq-loading-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.qq-loading-row .loading-spinner {
    flex: none;
    box-sizing: border-box;
    width: 1.15rem;
    height: 1.15rem;
    border-width: 0.15rem;
}

/* Vertical stack of result sections.
   Also the sizing context for everything inside it: the results column is only
   1.3fr of .qq-layout, so viewport media queries fire far too late — on a 1440px
   laptop this column is ~700px wide while `max-width: 768px` never matches. */
.qq-results {
    display: grid;
    gap: var(--space-20);
    container-type: inline-size;
    container-name: qq-results;
}

/* "Repricing…" while a new price is in flight. Deliberately a single quiet line
   at the top of the results rather than a spinner in place of them: replacing
   the results would unmount them, and the reader would lose their scroll
   position and any open disclosure on every edit. */
.qq-repricing {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--font-size-sm);
    color: var(--text-400);
}

.qq-repricing .loading-spinner {
    flex: none;
    box-sizing: border-box;
    width: 0.85rem;
    height: 0.85rem;
    border-width: 0.125rem;
}

/* Back-to-list link: secondary button with icon. Matches .zyte-data-back-link
   visual language; includes Material Symbols chevron/arrow before text. The
   page-level back link lives in the topbar (index.html); this is only the one
   inside the "quote not found" dead end. */
.qq-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    text-decoration: none;
}

/* Generate quote link: primary button with icon in list page heading.
   Already carries .primary-button styling; this adds anchor-specific needs. */
.qq-generate-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    text-decoration: none;
}

/* Empty state for saved quotes list: centred block offering the next action.
   Consistent with qq-missing-quote empty-state vocabulary. */
.qq-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    min-height: 200px;
    padding: var(--space-24);
}

.qq-list-empty > p {
    margin: 0;
}

/* Inline text link in prose: inherit size, use link colour, underline on hover.
   Used in confirmations ("Saved as …") and hint text linking to related quotes. */
.qq-inline-link {
    color: var(--accent-secondary-cold-500);
    text-decoration: none;
    cursor: pointer;
}

.qq-inline-link:hover,
.qq-inline-link:focus-visible {
    text-decoration: underline;
    outline: none;
}

/* Unmeasured vertical caveat: appears when no measured usage exists for a chosen
   vertical (real_estate, automotive). Informational tone (not error), hint scale,
   with top separation from the control above. Icon matches hint size. */
.qq-unmeasured-note {
    margin-top: var(--space-12);
    color: var(--info-600);
}

.qq-unmeasured-note .material-symbols-outlined {
    font-size: var(--font-size-xs);
}

/* Helper paragraph styling for form hints (tighter than body text) */
.qq-hint {
    font-size: var(--font-size-xs);
    line-height: 1.3;
    margin: var(--space-4) 0;
    color: var(--text-400);
}

/* Control row: generic one-line flex container for all form group controls.
   Used by volume (presets + input), vertical (select), domains (textarea),
   and requirements (textarea) groups. Wraps gracefully on narrow layouts. */
.qq-control-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-12);
}

/* Preset buttons: flexible space in control row */
.qq-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    flex: 1 1 auto;
}

/* Volume input: compact fixed-ish width wrapper stacked with input + hint */
.qq-volume-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    flex: 0 0 auto;
    min-width: 140px;
}

.qq-volume-input input {
    padding: var(--padding-input-compact);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
    color: var(--text-700);
    font-size: var(--font-size-sm);
    font-family: inherit;
    height: 2.5rem;
}

.qq-volume-input input::placeholder {
    color: var(--text-300);
}

/* Select controls in form groups: sized, styled, with dropdown arrow.
   The arrow fill color (#9badb5) is a literal hex value matching --text-300,
   because custom properties cannot be interpolated inside data URIs. Keep in
   sync with --text-300 if the palette changes. */
.qq-control-row select {
    padding: var(--padding-input-compact);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
    color: var(--text-700);
    font-size: var(--font-size-sm);
    font-family: inherit;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%239badb5" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    padding-right: 2rem;
    flex: 0 0 auto;
    min-width: 140px;
}

/* Block controls (textareas, etc.) inside control rows fill the full row width */
.qq-control-row > .np-field {
    flex: 1 1 100%;
    min-width: 0;
}

/* Tri-state segmented control: three adjacent job-filter-button elements
   forming one visually-joined pill widget. Compact styling for feature toggles.
   Corners are rounded on the end buttons; adjacent borders are collapsed with
   -1px margin overlap. Active/hover/focus states use z-index to prevent borders
   from being clipped by the overlap. */
.qq-segmented {
    display: inline-flex;
    flex: 0 0 auto;
}

.qq-segmented .job-filter-button {
    border: 1px solid var(--color-gray-light);
    border-radius: 0;
    flex: 0 1 auto;
    min-width: auto;
    padding: 0.35rem 0.75rem;
    font-size: var(--font-size-xs);
    white-space: nowrap;
    position: relative;
}

.qq-segmented .job-filter-button:not(:first-child) {
    margin-left: -1px;
}

.qq-segmented .job-filter-button:first-child {
    border-top-left-radius: var(--border-radius-full);
    border-bottom-left-radius: var(--border-radius-full);
}

.qq-segmented .job-filter-button:last-child {
    border-top-right-radius: var(--border-radius-full);
    border-bottom-right-radius: var(--border-radius-full);
}

.qq-segmented .job-filter-button.active,
.qq-segmented .job-filter-button:hover,
.qq-segmented .job-filter-button:focus-visible {
    position: relative;
    z-index: 1;
}

/* Feature row: label+hint left, segmented control right; wraps when narrow.
   Text block expands to fill available space; control drops to its own line
   if the column becomes too narrow. */
.qq-feature-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    align-items: center;
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-gray-light);
}

.qq-feature-row:last-child {
    border-bottom: none;
}

.qq-feature-row > div:first-child {
    flex: 1 1 200px;
    min-width: 0;
    overflow-wrap: break-word;
}

.qq-feature-controls {
    flex: 0 0 auto;
}

/* Three-column scenario grid. Column count is driven by the width of the
   results column, not the viewport — see .qq-results. minmax(0, 1fr) so a long
   unbreakable value can't push a track wider than its share. */
.qq-scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-12);
}

/* Roomy column: restore the generous gutter */
@container qq-results (min-width: 860px) {
    .qq-scenario-grid {
        gap: var(--space-20);
    }
}

/* Below ~600px of column there is no longer room for three readable cards */
@container qq-results (max-width: 600px) {
    .qq-scenario-grid {
        grid-template-columns: 1fr;
    }
}

/* No container-query support: fall back to the old viewport breakpoint */
@supports not (container-type: inline-size) {
    @media (max-width: 768px) {
        .qq-scenario-grid {
            grid-template-columns: 1fr;
        }
    }
}

/* Scenario card: summary-card with padding for pricing layout. Padding is the
   first thing to give when the column is tight — it buys back inner width for
   the labels without touching type size. */
.qq-scenario-card {
    padding: var(--space-12);
    min-width: 0;
}

@container qq-results (min-width: 860px) {
    .qq-scenario-card {
        padding: var(--space-20);
    }
}

/* Visual dominance for the "Likely" scenario: heavier border, stronger shadow */
.qq-scenario-card--likely {
    border: 2px solid var(--accent-secondary-cold-500);
    box-shadow: var(--shadow-accent-strong);
}

/* Big monthly price headline inside scenario cards. Scales with the results
   column (1cqi = 1% of it) so a laptop-width column gets a headline that still
   fits its ~200px card, while a wide column keeps the original 2rem/2.5rem. */
.qq-scenario-headline {
    margin: var(--space-4) 0 var(--space-8);
    font-size: clamp(1.5rem, 3.9cqi, 2rem);
    font-weight: 700;
    color: var(--text-700);
    line-height: 1.1;
}

.qq-scenario-card--likely .qq-scenario-headline {
    font-size: clamp(1.75rem, 4.4cqi, 2.5rem);
}

/* Inline "/month" unit suffix on the price headline */
.qq-scenario-headline-unit {
    margin-left: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-dark);
}

/* Label-left / value-right metric row (used in cards, band strip, assumptions, provenance) */
.qq-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    margin: var(--space-8) 0;
}

.qq-metric-row > * {
    min-width: 0;
}

/* Scenario card figures: one per line, value first with a small unit suffix,
   echoing the headline price. Replaces the label-left/value-right rows these
   cards used to use — at ~200px of card the two columns both wrapped, and the
   rows ended up at different heights in each of the three cards. */
.qq-figure-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Shares, not prices: separated from the money above so they don't read as
   another currency line */
.qq-figure-list--shares {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-gray-light);
}

.qq-figure {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.qq-figure-value {
    flex: 0 0 auto;
    font-size: 1rem;
    color: var(--text-700);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.qq-figure-unit {
    min-width: 0;
    font-size: var(--font-size-xs);
    color: var(--text-400);
    overflow-wrap: break-word;
}

/* The discount's "vs $1,000/mo starting rate" qualifier, printed once under the
   grid instead of once per card */
.qq-scenario-block {
    display: grid;
    gap: var(--space-8);
}

.qq-scenario-footnote {
    margin: 0;
}

/* What the three scenarios exclude. Weighted above the plain footnote because a
   range read as a negotiating floor is a commercial mistake, not a detail. */
.qq-scenario-footnote--caveat {
    padding: var(--space-12);
    border-left: 3px solid var(--warning-600);
    border-radius: var(--border-radius-4);
    background: var(--warning-100);
    color: var(--text-500);
    font-size: var(--font-size-sm);
}

.qq-metric-row:first-child {
    margin-top: 0;
}

.qq-metric-row:last-child {
    margin-bottom: 0;
}

/* Wrap row for badges on scenario cards */
.qq-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-12);
}

/* Component breakdown table total row: subtotal separator with top border */
.qq-breakdown-total {
    border-top: 1px solid var(--color-gray-light);
    font-weight: 600;
}

.qq-breakdown-total td {
    padding: 0.55rem 0.65rem;
}

/* Customer/deal name input: first form field, fills its row width */
.qq-customer-input {
    width: 100%;
    padding: var(--padding-input-compact);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
    color: var(--text-700);
    font-size: var(--font-size-sm);
    font-family: inherit;
}

.qq-customer-input::placeholder {
    color: var(--text-300);
}

/* Recent quote row in the saved quotes table */
.qq-recent-row {
    border-bottom: 1px solid var(--color-gray-light);
}

.qq-recent-row:hover {
    background: rgba(241, 245, 249, 0.45);
}

.qq-recent-row td:first-child {
    min-width: 0;
}

.qq-recent-row td:first-child > span:first-child {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Link wrapping a recent quote row */
.qq-recent-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.qq-recent-link:hover,
.qq-recent-link:focus-visible {
    color: var(--accent-secondary-cold-500);
    outline: none;
}

/* Row actions cell: Sheet link and delete button, side by side and centred so
   the column stays narrow whether or not a Sheet was exported. */
.qq-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
}

/* A row mid-delete: optimistically removed, so this only shows for the moment
   the request is in flight. */
.qq-recent-row.is-deleting {
    opacity: 0.55;
}

/* Saved quote detail banner: read-only state notice (informational, not error).
   One row — icon, two lines of copy, action on the right — so the provenance
   caption doesn't push the price below the fold. */
.status-banner.notification-card.qq-saved-banner {
    display: flex;
    /* Top-aligned, not centred: the settings chips make this block two to four
       lines tall, and a centred icon/action would drift away from the title
       they belong to. */
    align-items: center;
    gap: var(--space-12);
    border: 1px solid var(--info-600);
    background: var(--info-100);
    padding: var(--space-12) var(--space-16);
}

.qq-saved-banner .material-symbols-outlined {
    font-size: 1.25rem;
    flex: 0 0 auto;
    color: var(--info-600);
}

/* Text content block inside saved quote banner */
.qq-saved-banner-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.qq-saved-banner-copy p {
    margin: 0;
}

.qq-saved-banner-copy p:first-child {
    font-weight: 600;
    color: var(--text-700);
}

/* Applied settings inside the saved-quote banner: the non-default inputs as a
   wrapping row of chips. Defaults are omitted upstream, so this is often a
   single chip and must not reserve space it doesn't need. */
.qq-applied {
    margin-top: var(--space-8);
}

.qq-applied-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.qq-applied-chip {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: 0.125rem var(--space-8);
    border: 1px solid var(--info-600);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.qq-applied-chip-label {
    color: var(--text-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    font-weight: 600;
}

.qq-applied-chip-value {
    color: var(--text-700);
    font-weight: 600;
}

/* Free-text requirements: its own line under the chips, clamped so a long note
   can't push the price off screen. */
.qq-applied-note {
    margin: var(--space-6) 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The action sits in the banner row, not under the copy, so the banner keeps a
   fixed shape however many settings chips there are. */
.qq-saved-banner-action {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .status-banner.notification-card.qq-saved-banner {
        flex-wrap: wrap;
    }

    .qq-saved-banner-action {
        margin-left: auto;
    }
}

/* Seed-value warning: impossible to miss — heaviest border and the error tone —
   but a single line, since it sits above every result. */
.status-banner.notification-card.qq-seed-banner {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    border: 2px solid var(--error-500);
    padding: var(--space-12) var(--space-16);
}

.qq-seed-banner .material-symbols-outlined {
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.qq-seed-banner p {
    margin: 0;
}

/* Confidence badge + explanation + next-step hint: one line, wrapping only when
   it has to. A caption to the price rather than a panel beside it. Tinted per
   confidence level by the --high / --medium / --low modifiers below. */
.qq-confidence-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8) var(--space-12);
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-gray-light);
    border-left: 3px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-grey);
    justify-content: space-between;
    /* The strip is a flex ITEM in the results column too — without this it is
       sized by its content and pushes text past the panel edge. */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Text children must be allowed to shrink and wrap; only the badge is fixed.
   `flex: 0 0 auto` on everything is what used to overflow the panel. */
.qq-confidence-strip > * {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.qq-confidence-badge {
    flex: 0 0 auto;
}

.qq-confidence-hint {
    flex: 1 1 12rem;
}

/* The next step is the least urgent thing here: it goes to the far end of the
   row and is the first thing to wrap away on a narrow screen. */
.qq-confidence-next {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
    flex: 1 1 14rem;
    justify-content: flex-end;
    text-align: right;
    min-width: 0;
}

.qq-confidence-next .material-symbols-outlined {
    flex: 0 0 auto;
}

.qq-confidence-next > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The default hint grey is too light against the tinted backgrounds below. */
.qq-confidence-strip .np-field-hint {
    color: var(--text-500);
}

/* Confidence level colour coding: green when priced off named domains, amber
   when inferred from comparable traffic, neutral-red when volume alone. */
.qq-confidence-strip--high {
    background: var(--success-100);
    border-color: var(--border-subtle-success);
    border-left-color: var(--success-600);
}

.qq-confidence-strip--medium {
    background: var(--warning-100);
    border-color: var(--zyte-warning-border);
    border-left-color: var(--warning-600);
}

.qq-confidence-strip--low {
    background: var(--error-50);
    border-color: var(--border-subtle-error);
    border-left-color: var(--error-500);
}

/* Form panel tightening: reduce gaps and padding inside Quick Quote's form column */
.qq-layout .form-panel {
    gap: var(--space-16);
    padding: var(--space-16);
}

/* Estimate form: tighten gaps between field groups */
.qq-layout .estimate-form {
    gap: var(--space-12);
}

/* Field group: reduce gap and margins within form */
.qq-layout .field-group {
    gap: var(--space-6);
    margin-top: 0;
    margin-bottom: 0;
}

.qq-layout .field-group-title {
    margin: 0 0 var(--space-6) 0;
    padding: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-600);
}

/* Band strip: comparable-customers panel with metric rows */
.qq-band-strip {
    /* Inherits from panel and history-panel; no additional styling needed */
}

/* Target-domains table: one row per site, with optional volume and rendering
   columns. Built on the shared renewal-table shell so it reads as the same
   editable table as the New Projects feed grid. */
.qq-domain-table-shell {
    margin-top: var(--space-8);
}

.qq-domain-table th,
.qq-domain-table td {
    padding: 0.3rem 0.4rem;
}

/* The site column takes whatever is left; the two optional columns are sized to
   their content so the table doesn't drift wider than the form panel. */
.qq-domain-table .qq-domain-volume-col {
    width: 8.5rem;
}

.qq-domain-table .qq-domain-render-col {
    width: 7rem;
}

.qq-domain-table .qq-domain-actions-col,
.qq-domain-table .qq-domain-row-actions {
    width: 2.25rem;
    text-align: center;
}

/* A cell that was filled in but cannot be read. Flagged rather than dropped
   silently: an ignored volume changes the price. */
.qq-domain-table .np-feed-cell-input.is-invalid {
    border: 1px solid var(--error-500);
    border-radius: var(--border-radius-4);
    background: var(--error-50);
}

/* Spinners on the rendering column steal width from a two-character value. */
.qq-domain-table input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.qq-domain-table input[type="number"]::-webkit-outer-spin-button,
.qq-domain-table input[type="number"]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

/* Footer row: the add button on the left, the recognised-domain count on the
   right, both on the same baseline. */
.qq-domain-add-row-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    flex-direction: row-reverse;
    margin: 0.5rem;
}

.qq-domain-add-row .ghost-button {
    gap: var(--space-4);
}

.qq-domain-count {
    margin: 0;
}

/* Flex-wrap container for domain tier chips */
.qq-domain-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-12);
}

/* Details disclosure: assumptions panel, collapsed by default. The summary is a
   standard split panel heading plus a chevron, so a collapsed panel reads the
   same as every other panel header on the page. */
.qq-assumptions > summary {
    cursor: pointer;
    list-style: none;
}

.qq-assumptions > summary::-webkit-details-marker,
.qq-assumptions > summary::marker {
    display: none;
    content: "";
}

.qq-assumptions > summary:hover .panel-label,
.qq-assumptions > summary:focus-visible .panel-label {
    color: var(--accent-secondary-cold-500);
}

/* Chevron affordance: points down when collapsed, up when open */
.qq-assumptions-chevron {
    flex: 0 0 auto;
    color: var(--text-400);
    transition: transform 150ms ease, color 150ms ease;
}

.qq-assumptions > summary:hover .qq-assumptions-chevron {
    color: var(--accent-secondary-cold-500);
}

.qq-assumptions[open] > summary .qq-assumptions-chevron {
    transform: rotate(180deg);
}

.qq-assumptions[open] > summary {
    margin-bottom: var(--space-16);
    border-bottom: 1px solid var(--color-gray-light);
    padding-bottom: var(--space-16);
}

/* Assumption groups as columns rather than one long stack: on the full-width
   saved-quote view a single column left metric rows stretched edge to edge with
   the value stranded far from its label.

   Flex-wrap, not an auto-fit grid: a grid track that no group lands in still
   takes its share of the row, which left a dead column on the right. Here the
   groups on a line grow to consume it, and cards on the same line share a
   height. */
.qq-assumptions-body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16) var(--space-20);
}

.qq-assumption-group {
    flex: 1 1 18rem;
    min-width: 0;
    padding: var(--space-12) var(--space-16) var(--space-16);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-8);
    background: var(--surface-white);
}

/* Blocks whose content runs horizontally (tier mixes, domain lists, notes) take
   the whole row instead of being squeezed into one column. */
.qq-assumption-group--wide {
    flex-basis: 100%;
}

.qq-assumption-group .field-group-title {
    margin-top: 0;
    color: var(--text-400);
}

/* The group is a grid, so its gap sets row rhythm — the rows' own margins would
   double it. */
.qq-assumption-group .qq-metric-row {
    margin: 0;
}

/* Feature shares: as many columns as the group's width allows, so a long feature
   list grows sideways instead of making this the tallest block on the page. */
.qq-share-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-4) var(--space-20);
}

/* Share and its source ride together in the value column, on one line */
.qq-share-value {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-6);
    white-space: nowrap;
}

/* Tier mix: one column per scenario so the mixes can be compared vertically */
.qq-mix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-16);
}

.qq-mix-scenario {
    display: grid;
    gap: var(--space-8);
    min-width: 0;
}

.qq-mix-scenario-label {
    margin: 0;
    font-weight: 600;
    color: var(--text-700);
}

.qq-mix-track {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.qq-mix-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Tier and weight are separated inside the chip — the tier name is the label,
   the percentage is the number being read. Running them together as prose
   ("Tier-2 33%, Tier-1 32%, …") made neither scannable. */
.qq-mix-chip {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-6);
    padding: 0.125rem var(--space-8);
    border: 1px solid transparent;
    border-radius: var(--border-radius-full);
    background: var(--surface-grey);
    color: var(--text-700);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Both spans inherit the chip's tone, so one pair of tokens colours the whole
   chip. The tier is set apart by case and tracking rather than by fading it —
   at 11px, dimming the label drops it under 4.5:1 on the lighter ramp steps. */
.qq-mix-tier {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    font-weight: 600;
}

.qq-mix-share {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The tier ramp: Tier-1 cheapest through Tier-5 hardest. Tokens in
   variables.css; Blended Rate stays neutral because it is the absence of a tier,
   and an unrecognised tier borrows that same neutral rather than a ramp step. */
.qq-tier-1 {
    background: var(--tier-1-bg);
    color: var(--tier-1-fg);
}

.qq-tier-2 {
    background: var(--tier-2-bg);
    color: var(--tier-2-fg);
}

.qq-tier-3 {
    background: var(--tier-3-bg);
    color: var(--tier-3-fg);
}

.qq-tier-4 {
    background: var(--tier-4-bg);
    color: var(--tier-4-fg);
}

.qq-tier-5 {
    background: var(--tier-5-bg);
    color: var(--tier-5-fg);
}

.qq-tier-blended,
.qq-tier-unknown {
    background: var(--tier-blended-bg);
    color: var(--tier-blended-fg);
    border-color: var(--color-gray-light);
}

/* Domain lists: two labelled tracks of chips instead of comma-joined prose */
.qq-domain-tracks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-16);
}

.qq-domain-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem var(--space-8);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-full);
    background: var(--surface-grey);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-700);
}

/* Priced on the Blended Rate because no tier was on record — worth spotting. */
.qq-domain-chip--unknown {
    border-color: var(--setups-state-warning-solid);
    background: var(--setups-state-warning-light);
}

/* Named but not priced (excluded features): present, deliberately quiet. */
.qq-domain-chip--muted {
    background: transparent;
    color: var(--text-400);
}

/* Notes list: reset bullets and indent, tight leading */
.qq-note-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-8);
}

.qq-note-list li {
    margin: 0;
}

/* Copyable narrative block: preserve whitespace, enable text selection */
.qq-narrative {
    padding: var(--space-16);
    background: var(--surface-grey);
    border-radius: var(--border-radius-8);
    border: 1px solid var(--color-gray-light);
    white-space: pre-wrap;
    word-wrap: break-word;
    user-select: text;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--text-700);
}

/* Provenance footer: de-emphasised type scale and background */
.qq-provenance {
    font-size: var(--font-size-sm);
    color: var(--text-400);
}

.qq-provenance .panel-label {
    font-size: var(--font-size-base);
    color: var(--text-600);
}

/* Range input slider: track and thumb styling with accent color */
/* Rendering question: ONE control holding a default and the answer that replaces
   it. Side by side inside a single border so it reads as a single choice rather
   than two fields to fill in one after the other. The scale half is dimmed until
   it holds the answer — a live-looking thumb parked at zero would read as "no
   rendering", which is a different answer at roughly half the price. */
.qq-rendering-control {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius-full);
    overflow: hidden;
    background: var(--surface-white);
    line-height: 2;
}

.qq-rendering-default {
    flex: 0 0 auto;
    padding: 0.35rem 0.9rem;
    border: none;
    border-right: 1px solid var(--color-gray-light);
    background: transparent;
    color: var(--text-500);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    cursor: pointer;
}

.qq-rendering-default.active {
    background: var(--accent-secondary-cold-500);
    color: var(--surface-white);
}

.qq-rendering-scale {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: var(--space-12);
    padding: 0 var(--space-12);
    min-width: 0;
}

/* Dimmed, not disabled: operating the slider is how the question gets answered, so
   it stays focusable and operable. This only says it is not the current answer. */
.qq-rendering-control:not(.known) .qq-rendering-scale {
    opacity: 0.45;
}

.qq-rendering-control:not(.known) .qq-slider::-webkit-slider-thumb,
.qq-rendering-control:not(.known) .qq-slider::-moz-range-thumb {
    background: var(--color-gray-light);
}

.qq-rendering-readout {
    flex: 0 0 auto;
    min-width: 7.5rem;
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--text-400);
    white-space: nowrap;
}

.qq-slider {
    width: 100%;
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* `-runnable-track`, not `-slider-track`: the latter is not a pseudo-element
   Chrome implements, so the rule never applied and the slider rendered as a bare
   purple thumb floating with no track under it. */
.qq-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    background: var(--color-gray-light);
    border-radius: var(--border-radius-8);
    border: none;
}

.qq-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--accent-secondary-cold-500);
    cursor: pointer;
    border: none;
    /* With appearance:none the thumb sits at the top of the track box; half the
       height difference centres it. */
    margin-top: -0.375rem;
}

.qq-slider::-moz-range-track {
    background: var(--color-gray-light);
    border-radius: var(--border-radius-8);
    border: none;
    height: 0.5rem;
}

.qq-slider::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--accent-secondary-cold-500);
    cursor: pointer;
    border: none;
}

.qq-slider:focus {
    outline: none;
}

.qq-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--accent-secondary-cold-100);
}

.qq-slider:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--accent-secondary-cold-100);
}