/* =============================================================================
   TOYOTA REDESIGN — global design system layer
   Loaded LAST so it standardises typography, motion, dialogs, forms, buttons,
   cards and responsiveness across every page skin without rewriting them.
   Aesthetic: "Toyota precision" — engineered minimalism. White/charcoal
   surfaces, Toyota red used sharply (active, accent, the premium figure),
   one disciplined easing curve everywhere.
   ============================================================================= */

/* Saira/Figtree @import removed: the console revamp (theme.css) remaps the font tokens to
   Inter / Space Grotesk / JetBrains Mono, loaded non-blocking via <link> in App.razor. This
   render-blocking @import loaded two now-unused families and delayed first paint. */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS (extends the Toyota palette already defined in app.css)
   --------------------------------------------------------------------------- */
:root {
    /* Typography */
    --font-display: 'Saira', 'Segoe UI', sans-serif;
    --font-body: 'Figtree', 'Segoe UI', sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.855rem;
    --text-base: 0.95rem;
    --text-lg: 1.1rem;
    --text-xl: 1.35rem;
    --text-2xl: 1.7rem;
    --text-3xl: 2.15rem;
    --leading-tight: 1.2;
    --leading-normal: 1.55;
    --tracking-wide: 0.06em;

    /* Spacing scale (4px base) */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 999px;

    /* Elevation */
    --elev-1: 0 1px 2px rgba(26, 26, 26, 0.06), 0 1px 3px rgba(26, 26, 26, 0.08);
    --elev-2: 0 4px 12px rgba(26, 26, 26, 0.08), 0 2px 4px rgba(26, 26, 26, 0.05);
    --elev-3: 0 12px 32px rgba(26, 26, 26, 0.14), 0 4px 8px rgba(26, 26, 26, 0.06);
    --elev-4: 0 24px 64px rgba(26, 26, 26, 0.22);

    /* Motion — ONE curve, three speeds */
    --ease: cubic-bezier(0.32, 0.72, 0.24, 1);
    --dur-fast: 140ms;
    --dur-med: 260ms;
    --dur-slow: 420ms;

    /* Z scale */
    --z-sticky: 40;
    --z-topbar: 60;
    --z-drawer: 70;
    --z-dialog: 80;
    --z-toast: 90;

    /* Layout — compact console proportions */
    --sidebar-w: 232px;
    --sidebar-w-rail: 68px;
    --topbar-h: 54px;
    --touch-target: 44px;
    --content-max: 1440px;
}

/* ---------------------------------------------------------------------------
   2. BASE — typography, scrolling, focus, selection
   --------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body) !important;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    overflow-x: hidden;              /* no horizontal body scroll, ever */
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .page-title, .modal-title, .dialog-header h3, .qp-modal-header h3,
.section-title, .card-title {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: 0.01em;
}

/* Premium figures & totals read as engineered data */
.premium-amount, .premium-value, .total-premium, .rc-premium, .amount,
[class*='premium-figure'], [class*='product-premium'] {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

::selection {
    background: rgba(var(--toyota-red-rgb), 0.18);
}

:focus-visible {
    outline: 2px solid var(--toyota-red);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Slim engineered scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}

/* ---------------------------------------------------------------------------
   3. INTERACTIVE PRIMITIVES — buttons, inputs, selects
   --------------------------------------------------------------------------- */
button, .btn, input, select, textarea {
    font-family: var(--font-body);
}

button, .btn, a.nav-link, .clickable, [role='button'] {
    transition: background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}

button:not(:disabled):active, .btn:not(:disabled):active {
    transform: translateY(1px) scale(0.99);
}

input[type='text'], input[type='number'], input[type='email'], input[type='tel'],
input[type='date'], input[type='password'], input[type='search'], select, textarea {
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                background-color var(--dur-fast) var(--ease);
    min-height: 42px;
    font-size: max(16px, var(--text-base)); /* prevents iOS zoom-on-focus */
}

@media (min-width: 768px) {
    input[type='text'], input[type='number'], input[type='email'], input[type='tel'],
    input[type='date'], input[type='password'], input[type='search'], select, textarea {
        font-size: var(--text-base);
    }
}

input:focus, select:focus, textarea:focus {
    border-color: var(--toyota-red) !important;
    box-shadow: 0 0 0 3px rgba(var(--toyota-red-rgb), 0.12) !important;
    outline: none;
}

/* Comfortable touch targets on coarse pointers */
@media (pointer: coarse) {
    button, .btn, a.nav-link, select, input[type='checkbox'] + label, [role='button'] {
        min-height: var(--touch-target);
    }
}

/* ---------------------------------------------------------------------------
   4. SURFACES — cards, tables, sections
   --------------------------------------------------------------------------- */
.card, [class*='-card']:not([class*='card-overlay']) {
    border-radius: var(--radius-lg);
}

/* .stat-card / .lead-card / .dashboard-card intentionally NOT styled here — those
   pages were stripped to a blank slate for the redesign (kept: .card generic
   component + .quote-card, which belongs to the out-of-scope quote-creation flow). */
.card, .quote-card {
    box-shadow: var(--elev-1);
    transition: box-shadow var(--dur-med) var(--ease),
                transform var(--dur-med) var(--ease),
                border-color var(--dur-med) var(--ease);
}

.card:hover, .quote-card:hover {
    box-shadow: var(--elev-2);
}

/* Any data table lives in a scroll container instead of forcing page width */
.table-responsive, .tds-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border-radius: var(--radius-md);
}

table {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   5. DIALOGS — right-sized, sticky chrome, bottom-sheet on mobile
   Applies to every dialog family in the app:
   .modal-backdrop/.modal-content, .dialog-overlay/.dialog-content,
   .qp-modal-*, .vaps-modal-*, .pud-overlay, .vehicle-insurance-* prompts.
   --------------------------------------------------------------------------- */
.modal-backdrop, .dialog-overlay, .qp-modal-overlay, .pud-overlay,
.alert-overlay, .vehicle-insurance-prompt-overlay {
    background: rgba(26, 26, 26, 0.55) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: var(--z-dialog);
    animation: tds-fade-in var(--dur-med) var(--ease);
    /* The chrome below assumes a flex-centered overlay (the mobile block flips
       align-items to flex-end for the bottom sheet). That centering used to come
       from the per-page skins, which are unlinked — own it here so every dialog
       family centers without page CSS. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}

.modal-content, .dialog-content, .qp-modal-content, .vaps-modal-content,
.modal-dialog > .modal-content {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--elev-4) !important;
    border: 1px solid var(--border-light);
    /* Opaque body — bootstrap's --bs-modal-bg only resolves under .modal, and the
       old skins' white background is unlinked; without this the body is see-through. */
    background: var(--modal-bg);
    /* RIGHT-SIZED: forms don't need the whole screen */
    width: min(94vw, 760px);
    max-width: 94vw !important;
    max-height: min(90dvh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tds-dialog-in var(--dur-med) var(--ease);
}

.modal-content.modal-lg, .tds-dialog-wide {
    width: min(96vw, 1040px);
}

.tds-dialog-narrow {
    width: min(94vw, 520px) !important;
}

/* Sticky header / scrolling body / sticky action bar */
.modal-header, .dialog-header, .qp-modal-header, .vaps-modal-header {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--modal-bg);
    border-bottom: 1px solid var(--border-light) !important;
    padding: var(--sp-4) var(--sp-5) !important;
}

.modal-body, .dialog-body, .qp-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-5) !important;
}

.modal-footer, .dialog-footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--modal-bg);
    border-top: 1px solid var(--border-light) !important;
    padding: var(--sp-3) var(--sp-5) !important;
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Mobile: dialogs become bottom sheets that slide up */
@media (max-width: 767px) {
    .modal-backdrop, .dialog-overlay, .qp-modal-overlay, .pud-overlay,
    .vehicle-insurance-prompt-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal-content, .dialog-content, .qp-modal-content, .vaps-modal-content,
    .modal-dialog > .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 94dvh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        margin: 0 !important;
        animation: tds-sheet-up var(--dur-slow) var(--ease);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Grab handle so the sheet reads as a sheet */
    .modal-header::before, .dialog-header::before, .qp-modal-header::before {
        content: '';
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 42px;
        height: 4px;
        border-radius: var(--radius-full);
        background: var(--toyota-grey-light);
        opacity: 0.6;
    }

    .modal-footer, .dialog-footer {
        padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)) !important;
    }

    .modal-footer .btn, .dialog-footer button {
        flex: 1 1 auto; /* full-width action buttons on mobile */
    }
}

/* ---------------------------------------------------------------------------
   6. FORM LAYOUT — grouped sections instead of one huge scroll
   --------------------------------------------------------------------------- */
.tds-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-3) var(--sp-4);
}

.tds-form-section {
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--border-light);
}

.tds-form-section:first-child { border-top: 0; }

.tds-form-section > legend, .tds-form-section-title {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.tds-form-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

/* ---------------------------------------------------------------------------
   7. STICKY SUMMARY — quote premium docked bar (mobile) / rail (desktop)
   --------------------------------------------------------------------------- */
.tds-summary-dock {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    background: var(--content-bg);
    border-top: 2px solid var(--toyota-red);
    box-shadow: 0 -8px 24px rgba(26, 26, 26, 0.12);
    padding: var(--sp-3) var(--sp-4);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

@media (min-width: 1024px) {
    .tds-summary-rail {
        position: sticky;
        top: var(--sp-4);
        align-self: flex-start;
    }
}

/* ---------------------------------------------------------------------------
   8. SKELETONS + MOTION
   --------------------------------------------------------------------------- */
.tds-skeleton {
    background: linear-gradient(100deg,
        var(--toyota-silver) 40%, #f7f7f7 50%, var(--toyota-silver) 60%);
    background-size: 200% 100%;
    animation: tds-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
    color: transparent !important;
    pointer-events: none;
}

@keyframes tds-shimmer {
    from { background-position: 130% 0; }
    to   { background-position: -30% 0; }
}

@keyframes tds-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes tds-dialog-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tds-sheet-up {
    from { transform: translateY(38%); opacity: 0.6; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes tds-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Page content rises in once per navigation */
main > article.content {
    animation: tds-rise var(--dur-slow) var(--ease);
}

/* Staggered card entrance helper (apply .tds-stagger to a grid/list parent) */
.tds-stagger > * { animation: tds-rise var(--dur-slow) var(--ease) backwards; }
.tds-stagger > *:nth-child(1) { animation-delay: 30ms; }
.tds-stagger > *:nth-child(2) { animation-delay: 70ms; }
.tds-stagger > *:nth-child(3) { animation-delay: 110ms; }
.tds-stagger > *:nth-child(4) { animation-delay: 150ms; }
.tds-stagger > *:nth-child(5) { animation-delay: 190ms; }
.tds-stagger > *:nth-child(6) { animation-delay: 230ms; }
.tds-stagger > *:nth-child(n+7) { animation-delay: 260ms; }

/* ---------------------------------------------------------------------------
   9. ACCESSIBILITY — reduced motion kills all movement, keeps opacity
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   10. RESPONSIVE GUARDRAILS — nothing may break the viewport
   --------------------------------------------------------------------------- */
img, svg, video, canvas { max-width: 100%; height: auto; }

main > article.content {
    padding-left: clamp(var(--sp-3), 3vw, var(--sp-6));
    padding-right: clamp(var(--sp-3), 3vw, var(--sp-6));
}

@media (max-width: 767px) {
    main > article.content {
        padding-left: var(--sp-3);
        padding-right: var(--sp-3);
        padding-top: calc(var(--topbar-h) + var(--sp-3)); /* clear the fixed top bar */
    }
}

/* ---------------------------------------------------------------------------
   11. RESPONSIVE DATA TABLE → CARD LIST  (mobile)
   Add class .tds-table-cards to a <table>. On phones each row becomes a
   stacked card and each cell shows its column name via the data-label
   attribute the markup provides (data-label="Make" etc.). Prevents the
   crushed / horizontally-scrolling wide tables (vehicle search results,
   quote/underwriting lists) from being unusable on mobile.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    table.tds-table-cards,
    table.tds-table-cards thead,
    table.tds-table-cards tbody,
    table.tds-table-cards tr,
    table.tds-table-cards td {
        display: block;
        width: 100%;
    }

    table.tds-table-cards thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    table.tds-table-cards tr {
        margin-bottom: var(--sp-3);
        border: 1px solid var(--border-light);
        border-radius: var(--radius-md);
        background: var(--content-bg);
        box-shadow: var(--elev-1);
        padding: var(--sp-2) var(--sp-3);
        overflow: hidden;
    }

    table.tds-table-cards td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--sp-3);
        padding: 6px 0;
        border: 0;
        text-align: right;
        font-size: var(--text-sm);
        min-height: 0;
    }

        table.tds-table-cards td::before {
            content: attr(data-label);
            flex: 0 0 auto;
            font-family: var(--font-display);
            font-size: var(--text-xs);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: var(--tracking-wide);
            color: var(--text-secondary);
            text-align: left;
        }

        /* A cell can opt to be the card's title row (full-width, no label) */
        table.tds-table-cards td.tds-cell-title {
            justify-content: flex-start;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: var(--text-base);
            color: var(--text-primary);
            text-align: left;
            padding-top: 2px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 6px;
        }

            table.tds-table-cards td.tds-cell-title::before { content: none; }
}