/* =========================================================================
   Legacy ProposalChat tokens (pre-DesignKit pages)
   These names are kept only for pages that still use the classes in this file
   (wizard, detail pages, marketing library, AI edit dialogs). They no longer hold
   colors of their own: each one points at a DesignKit token from css/designkit.css,
   so these pages match Time Entry and follow the Light / Dark / Brand toggle.
   Convert a page to the kit classes and it stops needing this file; when no page
   uses these names any more, delete app.css.
   ========================================================================= */
:root {
    /* Main action + accents (ink = the kit's main-button color: navy in Brand) */
    --color-primary: var(--app-ink);
    --color-primary-hover: var(--app-ink-hover);
    --color-primary-soft: color-mix(in srgb, var(--app-accent) 14%, transparent);
    /* Neutrals */
    --color-bg: var(--bs-tertiary-bg);
    --color-surface: var(--bs-card-bg);
    --color-border: var(--bs-border-color);
    --color-border-soft: var(--app-hairline);
    --color-text: var(--bs-body-color);
    --color-text-muted: var(--app-muted);
    --color-text-faint: var(--app-faint);
    /* Status (same pairs as the kit's pills) */
    --color-success: var(--app-positive-text);
    --color-success-soft: var(--app-positive-bg);
    --color-danger: var(--app-danger-text);
    --color-danger-soft: color-mix(in srgb, var(--app-danger) 12%, transparent);
    --color-warning: var(--app-draft-text);
    --color-warning-soft: var(--app-draft-bg);
    --color-info: var(--app-accent);
    --color-info-soft: color-mix(in srgb, var(--app-accent) 12%, transparent);
    --color-neutral: var(--app-neutral-text);
    --color-neutral-soft: var(--app-neutral-bg);
    /* Layout */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.06);
}

/* =========================================================================
   Page header
   ========================================================================= */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

    .page-header h1 {
        font-size: 22px;
    }

.page-header__subtitle {
    margin: 6px 0 0;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* =========================================================================
   Buttons
   ========================================================================= */
/* Only the pre-DesignKit buttons (btn--primary / btn--secondary): a bare .btn here would
   override Bootstrap/DesignKit buttons (btn-ink, btn-quiet) on converted pages. */
.btn:is(.btn--primary, .btn--secondary) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.btn__icon {
    width: 16px;
    height: 16px;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--app-ink-contrast);
}

    .btn--primary:hover {
        background: var(--color-primary-hover);
    }

/* =========================================================================
   Toolbar (search + filters)
   ========================================================================= */
.toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 360px;
}

.search-box__icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-faint);
    pointer-events: none;
}

.search-box input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 14px;
    color: var(--color-text);
}

    .search-box input:focus,
    .select:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }

.select {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 14px;
    color: var(--color-text);
}

.toolbar__count {
    margin-left: auto;
    font-size: 13px;
    color: var(--color-text-faint);
}

/* =========================================================================
   Cards
   ========================================================================= */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card--empty {
    padding: 40px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

.card--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 72px 24px;
    color: var(--color-text-muted);
}

.card--placeholder__icon {
    width: 44px;
    height: 44px;
    color: var(--color-text-faint);
    margin-bottom: 8px;
}

.card--placeholder h2 {
    font-size: 16px;
    color: var(--color-text);
}

.card--placeholder p {
    margin: 0;
    max-width: 360px;
    font-size: 14px;
}

/* =========================================================================
   Data grid
   ========================================================================= */
.grid-card {
    overflow: hidden;
}

.table-scroll {
    overflow-x: auto;
}

.grid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

    .grid-table thead th {
        text-align: left;
        padding: 12px 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text-faint);
        border-bottom: 1px solid var(--color-border);
        background: var(--color-bg);
        white-space: nowrap;
    }

    .grid-table tbody td {
        padding: 14px 20px;
        border-bottom: 1px solid var(--color-border-soft);
        vertical-align: middle;
    }

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

    .grid-table tbody tr:hover {
        background: var(--color-bg);
    }

.grid-table__num {
    text-align: right;
}

.cell-primary {
    font-weight: 600;
    color: var(--color-text);
}

.cell-secondary {
    color: var(--color-text-muted);
    font-size: 12.5px;
    margin-top: 2px;
}

.cell-summary {
    color: var(--color-text-muted);
    max-width: 320px;
}

/* =========================================================================
   Pills / badges
   ========================================================================= */
.pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pill--success {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.pill--danger {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.pill--warning {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.pill--info {
    background: var(--color-info-soft);
    color: var(--color-info);
}

.pill--neutral {
    background: var(--color-neutral-soft);
    color: var(--color-neutral);
}

/* =========================================================================
   Chips (keywords)
   ========================================================================= */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.chip--muted {
    background: var(--color-neutral-soft);
    color: var(--color-text-faint);
}

/* =========================================================================
   Confidence meter
   ========================================================================= */
.confidence {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 96px;
}

.confidence__track {
    width: 56px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-neutral-soft);
    overflow: hidden;
}

.confidence__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--color-primary);
}

.confidence__value {
    font-size: 12.5px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Alerts
   ========================================================================= */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    margin-bottom: 16px;
}

.alert--error {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent);
}

.alert--success {
    background: var(--color-success-soft);
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 20%, transparent);
}

/* =========================================================================
   Secondary button
   ========================================================================= */
.btn--secondary {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

    .btn--secondary:hover {
        background: var(--color-bg);
    }

/* =========================================================================
   Generic form controls (wizard, and anywhere else a plain field is needed)
   ========================================================================= */
.text-input,
.textarea-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text);
}

.textarea-input {
    resize: vertical;
    min-height: 44px;
}

    .text-input:focus,
    .textarea-input:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }

    .text-input:disabled,
    .textarea-input:disabled {
        background: var(--color-bg);
        color: var(--color-text-faint);
    }

.select--block {
    width: 100%;
    padding: 9px 12px;
}

/* =========================================================================
   Wizard shell
   ========================================================================= */
.wizard-steps {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    max-width: 520px;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-faint);
    font-size: 13px;
    font-weight: 600;
}

    .wizard-step:not(:last-child) {
        flex: 1;
    }

        .wizard-step:not(:last-child)::after {
            content: "";
            flex: 1;
            height: 1px;
            background: var(--color-border);
            margin: 0 12px;
        }

.wizard-step__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    color: var(--color-text-faint);
    font-size: 12px;
    flex-shrink: 0;
}

    .wizard-step__dot svg {
        width: 14px;
        height: 14px;
    }

.wizard-step__label {
    white-space: nowrap;
}

.wizard-step--active .wizard-step__dot {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--app-ink-contrast);
}

.wizard-step--active .wizard-step__label {
    color: var(--color-text);
}

.wizard-step--done .wizard-step__dot {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.wizard-step--done .wizard-step__label {
    color: var(--color-text-muted);
}

.wizard-body {
    padding: 24px;
    margin-bottom: 16px;
}

.wizard-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 24px;
}

.wizard-actions__spacer {
    flex: 1;
}

.wizard-actions__field {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
}

    .wizard-actions__field .select {
        min-width: 160px;
    }

/* =========================================================================
   Step 1: Details form grid
   ========================================================================= */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

.form-field--wide {
    grid-column: 1 / -1;
}

.form-field__hint {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-faint);
}

/* =========================================================================
   Step 2: Content sections
   ========================================================================= */
.section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.section-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px;
    background: var(--color-bg);
    transition: opacity 120ms ease;
}

.section-card--excluded {
    opacity: 0.55;
}

.section-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 10px;
    cursor: pointer;
}

    .section-card__header input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--color-primary);
    }

/* New presentation, Review step (2026-11-05): one text size across a slide's content, using the
   card's full width. */
.slide-review {
    font-size: 0.85rem;
}

    .slide-review .cell-secondary {
        font-size: inherit;
    }

.slide-review__match {
    color: var(--color-text-muted);
}

    .slide-review__match strong {
        color: var(--color-text);
    }

    .slide-review__match > * {
        margin-top: 6px;
        margin-bottom: 0;
    }

    .slide-review__match ul {
        padding-left: 1.25rem;
    }

/* "Back to …" on detail pages (2026-11-06): a small secondary button above the title, with an
   arrow, in place of the old text link. Used by ProposalDetail and MarketingItemDetail. */
.btn.back-button {
    padding: 5px 12px 5px 10px;
    margin-bottom: 12px;
    font-size: 13px;
    text-decoration: none;

}

    .btn.back-button svg {
        transition: transform 0.15s ease;
    }

    .btn.back-button:hover svg {
        transform: translateX(-2px);
    }

.profile-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.profile-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--color-text);
    cursor: pointer;
}

    .profile-list__item input[type="checkbox"] {
        accent-color: var(--color-primary);
    }

/* =========================================================================
   Step 3: Review
   ========================================================================= */
.review {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* A heading above the two columns (New presentation review, 2026-11-05). */
.review__group--wide {
    grid-column: 1 / -1;
}

.review__group h3 {
    font-size: 14px;
    margin: 0 0 14px;
    color: var(--color-text);
}

.review__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .review__list > div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        font-size: 13.5px;
        border-bottom: 1px solid var(--color-border-soft);
        padding-bottom: 8px;
    }

    .review__list dt {
        color: var(--color-text-muted);
    }

    .review__list dd {
        margin: 0;
        font-weight: 500;
        color: var(--color-text);
        text-align: right;
    }

.review__sections {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .review__sections li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13.5px;
        color: var(--color-text);
    }

/* =========================================================================
   Step 4: Generated sections
   ========================================================================= */
.generated-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.generated-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    background: var(--color-bg);
}

.generated-section__content h1 {
    font-size: 19px;
    margin: 0 0 12px;
}

.generated-section__content h2 {
    font-size: 16px;
    margin: 16px 0 8px;
}

.generated-section__content h3 {
    font-size: 14px;
    margin: 14px 0 6px;
}

.generated-section__content p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
}

.generated-section__content ul {
    margin: 0 0 10px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.generated-section__sources {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-soft);
    font-size: 12px;
    color: var(--color-text-faint);
}

.review__sections-item--excluded {
    color: var(--color-text-faint);
}

/* =========================================================================
   Blazor default error UI (kept, restyled)
   ========================================================================= */
#blazor-error-ui {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 12px 20px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 14px;
}

    #blazor-error-ui .reload {
        color: var(--color-primary);
        font-weight: 600;
        margin-left: 8px;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        float: right;
        color: var(--color-text-faint);
    }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 860px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .review {
        grid-template-columns: 1fr;
    }

    .wizard-step__label {
        display: none;
    }
}

/* =========================================================================
   Button states (2026-11-06): one behaviour per kind of button, in every theme.
   - Main actions (btn--primary, btn-ink): solid ink, a shade lighter on hover, text stays
     the contrast colour. Bootstrap's .btn:hover was swapping btn--primary's text to the
     body colour, which made it unreadable on hover.
   - Neutral buttons (btn--secondary, btn-quiet, the back button, row buttons): surface
     background with a visible border; on hover an accent tint and accent border. The
     tint is strong enough to show on cards as well as the page.
   - Danger row buttons: same shape, red tint and red border on hover.
   Row buttons live in css/proposal.css, which loads after this file.
   ========================================================================= */
.btn.btn--primary,
.btn.btn--primary:hover,
.btn.btn--primary:active {
    color: var(--app-ink-contrast);
}

/* Disabled main buttons keep their solid colour, just faded (2026-11-07). Bootstrap's
   .btn:disabled cleared the background, which left the contrast-coloured text on the
   surface: "Regenerate section" in the Edit with AI dialog was invisible until you typed. */
.btn.btn--primary:disabled,
.btn.btn--primary.disabled {
    background: var(--color-primary);
    border-color: transparent;
    color: var(--app-ink-contrast);
    opacity: 0.45;
}

.btn.btn--secondary,
.btn.btn-quiet,
.btn.back-button {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .btn.btn--secondary:hover:not(:disabled),
    .btn.btn--secondary:active:not(:disabled),
    .btn.btn-quiet:hover:not(:disabled),
    .btn.btn-quiet:active:not(:disabled),
    .btn.back-button:hover {
        background: color-mix(in srgb, var(--app-accent) 20%, var(--color-surface));
        border-color: var(--app-accent);
        color: var(--color-text);
        text-decoration: none;
    }