/* ============================================================
   KJFD Vehicle Checklists — global stylesheet
   Hand-rolled (no Tailwind) so the .NET project ships without a
   front-end build step. Visual language matches the legacy app:
   white cards on the Emergency Volunteer Firefighter backdrop.
   ============================================================ */

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

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 15px;
    line-height: 1.5;
    color: #0F172A;
    background: #0B1320;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

button {
    font: inherit;
    cursor: pointer;
}

/* ===== Emergency backdrop layers ===== */
.emergency-backdrop {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background: #0B1320;
}

.emergency-base {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(160deg, #0B1320 0%, #1D1F2F 45%, #3A0D0D 100%);
}

.emergency-glow-red {
    position: absolute;
    top: -120px;
    right: -80px;
    width: 320px;
    height: 320px;
    background-image: radial-gradient(circle, rgba(214,40,40,0.42) 0%, rgba(214,40,40,0.12) 45%, rgba(214,40,40,0) 75%);
    filter: blur(20px);
    z-index: 1;
}

.emergency-glow-orange {
    position: absolute;
    bottom: -140px;
    left: -90px;
    width: 360px;
    height: 360px;
    background-image: radial-gradient(circle, rgba(247,127,0,0.32) 0%, rgba(247,127,0,0.10) 48%, rgba(247,127,0,0) 78%);
    filter: blur(24px);
    z-index: 1;
}

.emergency-stripes {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.55;
    background-image: repeating-linear-gradient(-18deg, rgba(255,183,3,0.055) 0 18px, transparent 18px 42px);
}

.emergency-grid {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0.8;
    background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 32px 32px;
}

.emergency-watermark {
    position: absolute;
    inset: 0;
    z-index: 4;
    opacity: 0.75;
}

.emergency-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 160px;
    z-index: 5;
    overflow: hidden;
}

    .emergency-wave svg {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 200%;
        filter: blur(8px);
        animation: emergencySlowWaveMove 12s linear infinite;
    }

.emergency-scrim {
    position: absolute;
    inset: 0;
    z-index: 6;
    background-image: linear-gradient(180deg, rgba(11,19,32,0.28) 0%, rgba(11,19,32,0.48) 42%, rgba(11,19,32,0.72) 100%);
}

.emergency-pulse {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: #2ECC71;
    box-shadow: 0 0 16px rgba(46,204,113,0.85);
    animation: emergencySoftPulse 2.4s ease-in-out infinite;
    z-index: 8;
}

@keyframes emergencySoftPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.45);
        opacity: 1;
    }
}

@keyframes emergencySlowWaveMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-40px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .emergency-pulse, .emergency-wave svg, .app-wave svg, .app-status-dot {
        animation: none;
    }
}

/* ===== Light app backdrop (used on every authenticated page) ===== */
.app-backdrop {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background: #FDFDFD;
}

.app-backdrop-base {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(180deg, #FFF8F2 0%, #FDFDFD 52%, #FFE9DD 100%);
}

.app-glow-orange-bl {
    position: absolute;
    bottom: 80px;
    left: -60px;
    width: 260px;
    height: 260px;
    z-index: 1;
    background-image: radial-gradient(circle, rgba(255,153,0,0.45) 0%, rgba(255,153,0,0.18) 50%, rgba(255,153,0,0) 80%);
    filter: blur(70px);
}

.app-glow-red-tr {
    position: absolute;
    top: 110px;
    right: -40px;
    width: 220px;
    height: 220px;
    z-index: 1;
    background-image: radial-gradient(circle, rgba(230,57,70,0.22) 0%, rgba(230,57,70,0.10) 50%, rgba(230,57,70,0) 80%);
    filter: blur(65px);
}

.app-stripes-tl, .app-stripes-br {
    position: absolute;
    z-index: 3;
    width: 240px;
    height: 130px;
    background-image: repeating-linear-gradient(-45deg, #E63946 0 18px, transparent 18px 40px);
}

.app-stripes-tl {
    top: -10px;
    left: -10px;
    opacity: 0.9;
    -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 95%);
    mask-image: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 95%);
}

.app-stripes-br {
    bottom: 50px;
    right: -10px;
    opacity: 0.85;
    -webkit-mask-image: linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 95%);
    mask-image: linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 95%);
}

.app-dotgrid {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: radial-gradient(#D1D5DB 1.2px, transparent 1.2px);
    background-size: 14px 14px;
    opacity: 0.32;
}

.app-watermark {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0.18;
}

.app-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 210px;
    z-index: 4;
    overflow: hidden;
}

    .app-wave svg {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100%;
        width: 200%;
        filter: blur(8px);
        animation: emergencySlowWaveMove 14s linear infinite;
    }

.app-status {
    position: absolute;
    top: max(env(safe-area-inset-top), 18px);
    right: 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #102033;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    z-index: 9;
    pointer-events: none;
}

.app-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: #31D158;
    box-shadow: 0 0 18px rgba(49,209,88,0.55);
    animation: emergencySoftPulse 2.4s ease-in-out infinite;
}

@media (max-width: 767.98px) {
    /* Status indicator would collide with the mobile header — hide it. */
    .app-status {
        display: none;
    }
}

/* ===== Light app shell chrome (overrides the dark defaults) ===== */
.app-light {
    color: #111827;
}

    .app-light .sidebar {
        background: rgba(255, 255, 255, 0.78);
        border-right: 1px solid rgba(17, 24, 39, 0.08);
        backdrop-filter: blur(14px);
    }

    .app-light .sidebar-brand {
        border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    }

        .app-light .sidebar-brand a {
            color: #111827;
        }

        .app-light .sidebar-brand p {
            color: #6B7280;
        }

    .app-light .sidebar-foot {
        border-top: 1px solid rgba(17, 24, 39, 0.08);
    }

    .app-light .sidebar-nav a,
    .app-light .mobile-nav a {
        color: #4B5563;
    }

        .app-light .sidebar-nav a:hover,
        .app-light .mobile-nav a:hover {
            background: rgba(17, 24, 39, 0.06);
            color: #111827;
        }

        .app-light .sidebar-nav a.active,
        .app-light .mobile-nav a.active {
            background: linear-gradient(135deg, rgba(230,57,70,0.16), rgba(255,122,0,0.16));
            color: #111827;
        }

    .app-light .mobile-header,
    .app-light .desktop-header,
    .app-light .mobile-nav {
        background: rgba(255, 255, 255, 0.78);
        border-bottom: 1px solid rgba(17, 24, 39, 0.08);
        backdrop-filter: blur(14px);
    }

        .app-light .mobile-header .brand {
            color: #111827;
        }

        .app-light .desktop-header .who {
            color: #4B5563;
        }

    .app-light .btn-ghost {
        background: rgba(17, 24, 39, 0.04);
        color: #111827;
        border-color: rgba(17, 24, 39, 0.12);
    }

        .app-light .btn-ghost:hover {
            background: rgba(17, 24, 39, 0.08);
            color: #111827;
        }

    .app-light .badge-fire {
        background: rgba(230, 57, 70, 0.14);
        color: #B91C1C;
    }

    /* Main content text on the light backdrop. Cards keep their own dark
   text already (.card h2 / .card .muted rules below). */
    .app-light .main h1,
    .app-light .main h2,
    .app-light .main h3,
    .app-light .main h4 {
        color: #111827;
    }

    .app-light .main .muted {
        color: #6B7280;
    }

    .app-light .main .muted-strong {
        color: #374151;
    }

    .app-light .card .muted {
        color: #64748B;
    }

/* ===== App shell ===== */
.app {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    color: #F1F5F9;
}

.sidebar {
    display: none;
    flex-direction: column;
    width: 14rem;
    flex-shrink: 0;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255,255,255,0.08);
    /* Keep the navigation + Sign-out button pinned to the viewport on
     desktop so they stay visible while long checklists scroll. */
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

    .sidebar-brand a {
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.95rem;
    }

    .sidebar-brand p {
        margin: 0.25rem 0 0;
        font-size: 0.75rem;
        color: #94A3B8;
    }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem;
    flex: 1;
}

    .sidebar-nav a, .mobile-nav a {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.55rem 0.75rem;
        border-radius: 0.5rem;
        color: #cbd5e1;
        font-size: 0.9rem;
        text-decoration: none;
        font-weight: 500;
    }

    .sidebar-nav .nav-icon,
    .mobile-nav .nav-icon {
        display: inline-flex;
        flex-shrink: 0;
        width: 1.15rem;
        height: 1.15rem;
        color: inherit;
        opacity: 0.85;
    }

        .sidebar-nav .nav-icon svg,
        .mobile-nav .nav-icon svg {
            width: 100%;
            height: 100%;
        }

        .sidebar-nav a.active .nav-icon,
        .mobile-nav a.active .nav-icon {
            opacity: 1;
        }

        .sidebar-nav a:hover, .mobile-nav a:hover {
            background: rgba(255,255,255,0.07);
            color: #fff;
        }

        .sidebar-nav a.active, .mobile-nav a.active {
            background: rgba(214,40,40,0.20);
            color: #fff;
        }

.sidebar-foot {
    padding: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.shell-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.mobile-header, .desktop-header {
    display: flex;
    align-items: center;
    height: 3.5rem;
    background: rgba(15, 23, 42, 0.60);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0 1rem;
    /* Sign-out button lives in the mobile header — pin it so it stays
     reachable while a long checklist scrolls. */
    position: sticky;
    top: 0;
    z-index: 20;
}

.mobile-header {
    justify-content: space-between;
}

    .mobile-header .brand {
        color: #fff;
        font-weight: 600;
        font-size: 0.95rem;
        text-decoration: none;
    }

.mobile-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 0.5rem;
    background: rgba(15, 23, 42, 0.50);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

    .mobile-nav a {
        flex-shrink: 0;
    }

.desktop-header {
    display: none;
    justify-content: flex-end;
    padding: 0 1.5rem;
}

    .desktop-header .who {
        font-size: 0.85rem;
        color: #cbd5e1;
    }

.main {
    flex: 1;
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 1rem 0.75rem 2.5rem;
}

@media (min-width: 640px) {
    .main {
        padding: 1rem 1rem 2rem;
    }
}

@media (min-width: 768px) {
    .sidebar {
        display: flex;
    }

    .mobile-header, .mobile-nav {
        display: none;
    }

    .desktop-header {
        display: flex;
    }
}

/* ===== Typography ===== */
h1, h2, h3, h4 {
    margin: 0;
    color: #F8FAFC;
}

.h1 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.h2 {
    font-size: 1rem;
    font-weight: 600;
}

.muted {
    color: #94A3B8;
    font-size: 0.875rem;
    margin-bottom: 0;
    margin-top: 0
}

.muted-strong {
    color: #cbd5e1;
    font-size: 0.875rem;
}

.section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
/* Narrow variant — used on focus-heavy pages (portal checklist fill,
   vehicle editor, login design, new vehicle form, etc.) where we want
   the cards to sit in the centre of the page instead of stretching the
   full app-shell width. */
.section-narrow {
    max-width: 44rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #111827;
    border-left: 4px solid #E63946;
    padding: 0.15rem 0 0.15rem 0.75rem;
}

/* ===== Collapsible question sections (Portal/Fill page) ===== */
.qsection {
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(17, 24, 39, 0.08);
    margin-bottom: 1rem;
    overflow: hidden;
}

    .qsection > .qsection-summary {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.65rem 0.85rem;
        cursor: pointer;
        user-select: none;
        list-style: none;
        background: rgba(255,255,255,0.85);
        border-bottom: 1px solid transparent;
        transition: background 0.15s ease;
    }

        .qsection > .qsection-summary::-webkit-details-marker {
            display: none;
        }

    .qsection[open] > .qsection-summary {
        border-bottom-color: rgba(17, 24, 39, 0.06);
    }

    .qsection > .qsection-summary:hover {
        background: rgba(255,255,255,0.96);
    }

.qsection-chev {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #6B7280;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.qsection[open] > .qsection-summary .qsection-chev {
    transform: rotate(90deg);
}

.qsection-summary .section-title {
    flex: 1;
    min-width: 0;
}

.qsection-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.45rem;
    border-radius: 9999px;
    background: #DC2626;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
    animation: emergencySoftPulse 2.4s ease-in-out infinite;
}

.qsection-badge[hidden] {
    display: none;
}

.qsection-body {
    padding: 0.85rem;
    gap: 0.85rem;
}

/* Highlight an unanswered required question card after a submit attempt. */
.qcard.missing-answer {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

/* ===== Collapsed question editor rows (Vehicles/Edit page) ===== */
.qedit {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    margin-bottom: 0.4rem;
    overflow: hidden;
}

    .qedit > .qedit-summary {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.45rem 0.7rem;
        cursor: pointer;
        user-select: none;
        list-style: none;
        font-size: 0.85rem;
        color: #0F172A;
        transition: background 0.15s ease;
    }

        .qedit > .qedit-summary::-webkit-details-marker {
            display: none;
        }

        .qedit > .qedit-summary:hover {
            background: #EEF2F7;
        }

    .qedit[open] > .qedit-summary {
        background: #fff;
        border-bottom: 1px solid #E2E8F0;
    }

        .qedit[open] > .qedit-summary .qsection-chev {
            transform: rotate(90deg);
        }

.qedit-text {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qedit-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.qedit-body {
    padding: 0.75rem;
    background: #fff;
}

.section-head {
    display: flex;
    gap: 0.75rem;
    flex-direction: column;
}

@media (min-width: 640px) {
    .section-head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

/* ===== Cards ===== */
.card {
    background: #fff;
    color: #0F172A;
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.card-tight {
    padding: 0.75rem;
}

.card-spaced {
    padding: 1.5rem;
}

.card h2, .card h3, .card h4 {
    color: #0F172A;
}

.card .muted {
    color: #64748B;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.stack-lg {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

.row-end {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-end;
}

.grid {
    display: grid;
    gap: 1rem;
}

.grid-stats {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* ===== Buttons ===== */
.btn-wrap {
    flex-shrink: 0
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: opacity 0.15s, background 0.15s;
}

    .btn:disabled, .btn[aria-disabled="true"] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-primary {
    color: #fff;
    background-image: linear-gradient(135deg, #D62828 0%, #F77F00 100%);
    box-shadow: 0 8px 18px rgba(214,40,40,0.35);
}

    .btn-primary:hover {
        opacity: 0.95;
    }

.btn-secondary {
    background: #fff;
    color: #1E293B;
    border-color: #CBD5E1;
    flex-shrink: 0
}

    .btn-secondary:hover {
        background: #F1F5F9;
    }

.btn-ghost {
    background: rgba(255,255,255,0.06);
    color: #F1F5F9;
    border-color: rgba(255,255,255,0.15);
}

    .btn-ghost:hover {
        background: rgba(255,255,255,0.12);
    }

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

    .btn-danger:hover {
        background: #991B1B;
    }

.btn-success {
    background: #047857;
    color: #fff;
}

    .btn-success:hover {
        background: #065F46;
    }

.btn-sm {
    height: 2.125rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

.btn-xs {
    height: 1.75rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
}

.btn-block {
    width: 100%;
}

/* ===== Forms ===== */
.field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.875rem;
}

.field-label {
    font-weight: 500;
    color: #334155;
}

.field-hint {
    font-size: 0.75rem;
    color: #64748B;
}

/* Native color picker paired with a hex text box — they share a single
   underlying form field (the .color-hex carries the name= attribute that
   gets posted) and stay in sync via the small inline script on the
   Login Design page. */
.color-field {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    border: 1px solid #CBD5E1;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}

    .color-field:focus-within {
        outline: 2px solid rgba(214,40,40,0.35);
        outline-offset: 0;
    }

    .color-field .color-swatch {
        -webkit-appearance: none;
        appearance: none;
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.5rem;
        padding: 0;
        border: 0;
        border-right: 1px solid #CBD5E1;
        background: transparent;
        cursor: pointer;
    }

        .color-field .color-swatch::-webkit-color-swatch-wrapper {
            padding: 4px;
            border-radius: 0;
        }

        .color-field .color-swatch::-webkit-color-swatch {
            border: 0;
            border-radius: 4px;
        }

        .color-field .color-swatch::-moz-color-swatch {
            border: 0;
            border-radius: 4px;
        }

    .color-field .color-hex {
        flex: 1;
        border: 0;
        border-radius: 0;
        text-transform: uppercase;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.85rem;
    }

        .color-field .color-hex:focus {
            outline: none;
            box-shadow: none;
        }

.input, .select, .textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #fff;
    color: #0F172A;
    border: 1px solid #CBD5E1;
    border-radius: 0.5rem;
    font: inherit;
    line-height: 1.4;
}

    .input:focus, .select:focus, .textarea:focus {
        outline: 2px solid rgba(214,40,40,0.30);
        outline-offset: 1px;
        border-color: #D62828;
    }

.textarea {
    resize: vertical;
}

.input-error {
    border-color: #B91C1C;
}

.checkbox, .radio {
    width: 1rem;
    height: 1rem;
    margin: 0;
    vertical-align: middle;
    accent-color: #D62828;
}

/* ===== Badges ===== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-info {
    background: #DBEAFE;
    color: #1E40AF;
}

.badge-pending {
    background: #FEF3C7;
    color: #92400E;
}

.badge-approved {
    background: #D1FAE5;
    color: #065F46;
}

.badge-rejected {
    background: #FEE2E2;
    color: #991B1B;
}

.badge-muted {
    background: #E2E8F0;
    color: #334155;
}

.badge-fire {
    background: rgba(214,40,40,0.20);
    color: #FFB703;
}

/* ===== Banners / alerts ===== */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    border: 1px solid transparent;
}

.alert-error {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FECACA;
}

.alert-success {
    background: #D1FAE5;
    color: #065F46;
    border-color: #A7F3D0;
}

.alert-warning {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}

.alert-info {
    background: #DBEAFE;
    color: #1E40AF;
    border-color: #BFDBFE;
}

/* ===== Tables ===== */
.table-wrap {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 0.875rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: #0F172A;
}

    .table th, .table td {
        padding: 0.6rem 0.75rem;
        text-align: left;
        vertical-align: top;
    }

    .table thead {
        background: #F8FAFC;
        color: #475569;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 700;
    }

    .table tbody tr {
        border-top: 1px solid #E2E8F0;
    }

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

/* ===== Login (auth) page ===== */
.auth-screen {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    position: relative;
    z-index: 1;
}

.auth-card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 28rem;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.92);
    color: #111827;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.28);
}

.auth-header {
    color: #fff;
    padding: 1.25rem;
    background-image: linear-gradient(135deg, #D62828 0%, #F77F00 100%);
    box-shadow: 0 10px 24px rgba(214,40,40,0.35);
}

    .auth-header h1 {
        color: #fff;
        font-size: 1.25rem;
        font-weight: 800;
        letter-spacing: -0.3px;
    }

    .auth-header p {
        color: #fff;
        opacity: 0.9;
        margin: 0.25rem 0 0;
        font-size: 0.8rem;
        font-weight: 500;
    }

.auth-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-footer {
    text-align: center;
    font-size: 0.85rem;
    color: #475569;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .auth-footer a {
        color: #D62828;
        font-weight: 600;
        text-decoration: none;
    }

        .auth-footer a:hover {
            text-decoration: underline;
        }

.auth-logo {
    display: flex;
    margin-bottom: 0.75rem;
}

    .auth-logo img {
        max-height: 3rem;
    }

/* ===== Utility helpers ===== */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-xs {
    font-size: 0.75rem;
}

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

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.cover-thumb {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    background: #F1F5F9;
    flex-shrink: 0;
}

    .cover-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.question-image {
    display: inline-block;
    align-self: flex-start;
    max-height: 12rem;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
}

    .question-image img {
        object-fit: contain;
        max-height: 12rem;
        max-width: 100%;
        display: block;
    }

.option-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #0F172A;
}

    .option-row:hover {
        background: #F8FAFC;
    }

.danger-zone {
    border: 1px solid #FECACA;
    background: #FFF1F2;
    color: #991B1B;
}

/* ===== Vehicle card grid ===== */
.vehicle-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .vehicle-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .vehicle-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.vehicle-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 0.875rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s, transform 0.15s;
}

    .vehicle-card:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,0.10);
        transform: translateY(-1px);
    }

a.vehicle-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

a.vehicle-card.vehicle-card--link {
    cursor: pointer;
}

.vehicle-card-img {
    position: relative;
    width: 100%;
    height: 160px;
    background: #F1F5F9;
    overflow: hidden;
    flex-shrink: 0;
}

.vehicle-card-img-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #E2E8F0 0%, #F1F5F9 100%);
    color: #94A3B8;
}

.vehicle-card-img-photo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vehicle-card-img-placeholder-icon {
    flex-shrink: 0;
    display: block;
}

.vehicle-card-img-placeholder-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #94A3B8;
}

.vehicle-card-body {
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.vehicle-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.vehicle-card-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.vehicle-card-meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: #64748B;
    margin: 0;
}

.vehicle-card-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    margin-top: 0.15rem;
}

.vehicle-card-status-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748B;
}

.vehicle-card-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

    .vehicle-card-status-row .badge {
        white-space: nowrap;
    }

.vehicle-card-status-date {
    font-size: 0.72rem;
    color: #94A3B8;
    line-height: 1.3;
}

.vehicle-card-note {
    margin: 0;
    font-size: 0.72rem;
    color: #64748B;
    line-height: 1.4;
}

.vehicle-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.35rem;
}

    .vehicle-card-actions .btn-secondary {
        flex: 0 0 auto;
    }

    .vehicle-card-actions form {
        flex: 1;
    }


/* =========================================================================
   Responsive — mobile (≤ 480px) and tablet portrait (≤ 767px)
   Everything above this point is the desktop / default layout. The rules
   below are corrections so the same markup looks good on phones and
   tablets without horizontal scroll, with comfortable touch targets and
   without iOS auto-zoom on input focus.
   ========================================================================= */

/* iOS Safari zooms into any input/select/textarea whose font-size is
   below 16px when focused. Bump them up everywhere so that never
   happens — desktop is already 14–16px so visual impact is minimal. */
.input, .select, .textarea {
    font-size: 16px;
}

/* Tablet portrait and smaller phones (<768px — i.e. before the sidebar
   takes over and we use the mobile-header + mobile-nav). */
@media (max-width: 767.98px) {
    /* Honour the iPhone safe area on the pinned mobile header & nav so
     they don't disappear under the notch or home indicator. */
    .mobile-header {
        padding-top: env(safe-area-inset-top);
        padding-left: max(env(safe-area-inset-left), 1rem);
        padding-right: max(env(safe-area-inset-right), 1rem);
        height: calc(3.5rem + env(safe-area-inset-top));
    }

    .mobile-nav {
        padding-left: max(env(safe-area-inset-left), 0.5rem);
        padding-right: max(env(safe-area-inset-right), 0.5rem);
    }

    .main {
        padding-left: max(env(safe-area-inset-left), 0.75rem);
        padding-right: max(env(safe-area-inset-right), 0.75rem);
        padding-bottom: calc(3rem + env(safe-area-inset-bottom));
    }

    /* Tighter chrome on phones. */
    .section {
        gap: 1rem;
    }

    .card {
        padding: 0.75rem 0.85rem;
        border-radius: 0.625rem;
    }

    .h1 {
        font-size: 1.15rem;
    }

    .h2 {
        font-size: 0.95rem;
    }

    .stack-lg {
        gap: 1rem;
    }

    /* Stack the section header instead of trying to keep title + action
     side-by-side. The desktop side-by-side rule kicks in at 640px and
     we keep it there because tablets in landscape can still fit it. */
    .section-head {
        align-items: stretch;
    }

        .section-head form, .section-head .btn {
            width: 100%;
        }

        .section-head .btn {
            justify-content: center;
        }

    /* Touch targets: bump the absurdly-tiny .btn-xs to a comfortable
     mobile height (~36px) so they're easy to tap without making
     desktop tables explode in size. */
    .btn-xs {
        height: 2.25rem;
        padding: 0.3rem 0.65rem;
        font-size: 0.8rem;
    }

    .btn-sm {
        height: 2.375rem;
    }

    /* Backdrop accents: shrink the diagonal stripe corners so they don't
     dominate a narrow phone screen, and pull the soft glows in. */
    .app-stripes-tl, .app-stripes-br {
        width: 160px;
        height: 90px;
    }

    .app-glow-orange-bl {
        width: 180px;
        height: 180px;
        bottom: 40px;
        left: -40px;
    }

    .app-glow-red-tr {
        width: 160px;
        height: 160px;
        top: 60px;
        right: -30px;
    }

    /* Tables: comfier wrapping inside the .scroll-x wrapper. */
    .table {
        font-size: 0.8rem;
    }

        .table th, .table td {
            padding: 0.5rem 0.55rem;
        }

    /* On phones, hide the small "Answer type" hint to keep the collapsed
     question-editor row to one tight line. The Required badge stays. */
    .qedit-meta .muted {
        display: none;
    }

    /* Don't let a long Required badge push the collapsed summary onto
     two lines on tiny screens. */
    .qedit-summary, .qsection-summary {
        gap: 0.4rem;
    }

    /* The "Filled" / question-options rows inside the fill checklist sit
     more comfortably with a slightly bigger touch area. */
    .option-row {
        padding: 0.6rem 0.75rem;
        font-size: 0.95rem;
    }

    /* The auth (login) card already maxes at 28rem and is width:100%, so
     it adapts; just make sure the surrounding padding works on small
     phones with notch insets. */
    .auth-screen {
        padding-left: max(env(safe-area-inset-left), 1rem);
        padding-right: max(env(safe-area-inset-right), 1rem);
        padding-top: max(env(safe-area-inset-top), 1.25rem);
        padding-bottom: max(env(safe-area-inset-bottom), 1.25rem);
    }

    /* Color picker pair: the swatch + hex inputs side-by-side need
     room — stack the row of three colour fields naturally via the
     existing flex-wrap. Nothing extra needed beyond the global
     min-width: 12rem already on each label. */
}

/* Very small phones — iPhone SE / Galaxy Fold front cover. */
@media (max-width: 380px) {
    .main {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .card {
        padding: 0.65rem 0.7rem;
    }

    .h1 {
        font-size: 1.05rem;
    }

    .table th, .table td {
        padding: 0.4rem 0.45rem;
    }
    /* Drop the chevron a touch on the question rows so the text gets all
     the room it can. */
    .qedit-summary, .qsection-summary {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Tablet landscape and small laptops (≥ 768px but < 1024px): the
   sidebar is visible but content area is still constrained. Keep the
   sidebar slim so the main column doesn't get squeezed. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .sidebar {
        width: 12rem;
    }

    .sidebar-nav a, .mobile-nav a {
        font-size: 0.85rem;
        padding: 0.5rem 0.65rem;
    }
}

/* Prevent any rogue full-width child from forcing a horizontal scroll
   on the whole page (a classic responsive trap). */
html, body {
    overflow-x: hidden;
}

.shell-main, .main {
    min-width: 0;
}

.row > * {
    min-width: 0;
}

/* ===== Results detail modal (Admin / Results) ===== */
body.modal-open {
    overflow: hidden;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal[hidden] {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 19, 32, 0.62);
    backdrop-filter: blur(6px);
}

.result-detail-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 28rem;
    margin: 0;
    overflow: hidden;
    border-radius: 0.875rem;
    background: #fff;
    color: #0F172A;
    border: 1px solid #E2E8F0;
    box-shadow:
        0 4px 6px rgba(15, 23, 42, 0.06),
        0 20px 40px rgba(15, 23, 42, 0.14);
}

.result-detail-dialog--has-image {
    max-width: 32rem;
}

.result-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(180deg, #F8FAFC 0%, #fff 100%);
    border-bottom: 1px solid #E2E8F0;
    border-radius: 0.875rem 0.875rem 0 0;
}

.result-detail-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748B;
}

.result-detail-vehicle {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0F172A;
}

.result-detail-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    background: #fff;
    color: #64748B;
    font-size: 1.1rem;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .result-detail-close:hover {
        background: #F1F5F9;
        color: #0F172A;
        border-color: #CBD5E1;
    }

.result-detail-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.85rem;
    max-height: 84vh;
    overflow: auto;
    background: #F1F5F9;
}

.result-detail-question {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    color: #0F172A;
    margin-bottom: 3px
}

.result-detail-image {
    margin: 0;
    align-self: flex-start;
    max-width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
}

    .result-detail-image img {
        display: block;
        max-height: 7.5rem;
        max-width: 100%;
        object-fit: contain;
    }

    .result-detail-image figcaption {
        padding: 0.3rem 0.5rem;
        background: #F8FAFC;
        border-top: 1px solid #E2E8F0;
    }

.result-detail-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #94A3B8;
}

.result-answer-options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.result-answer-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: #64748B;
    background: #FAFAFA;
}

.result-answer-option.is-selected {
    border-color: #2563EB;
    background: linear-gradient(90deg, #EFF6FF 0%, #F8FAFC 100%);
    color: #1E3A8A;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #2563EB;
}

.result-answer-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: #2563EB;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}

.result-detail-note {
    padding: 0.55rem 0.65rem;
    border-radius: 0.5rem;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    margin-top: 12px;
}

    .result-detail-note .result-detail-label {
        color: #B45309;
        margin-bottom: 0.25rem;
    }

    .result-detail-note p {
        margin: 0;
        font-size: 0.8125rem;
        line-height: 1.45;
        color: #78350F;
    }

.result-detail-text-response {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #0F172A;
    white-space: pre-wrap;
}

.results-vehicle-cell {
    min-width: 6rem;
}
.submission-id-cell {
    min-width: 6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.results-vehicle-name {
    font-weight: 500;
    color: #0F172A;
    line-height: 1.35;
    font-size: 0.8125rem;
    word-break: break-all;
}

.result-submission-answers {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.result-submission-section {
    border-radius: 0.65rem;
    border: 1px solid #E2E8F0;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.result-submission-section-header {
    padding: 0.55rem 0.75rem;
    background: linear-gradient(90deg, #EEF2FF 0%, #F8FAFC 100%);
    border-bottom: 1px solid #E2E8F0;
    border-left: 3px solid #4F46E5;
}

.result-submission-section:nth-child(even) .result-submission-section-header {
    background: linear-gradient(90deg, #ECFDF5 0%, #F8FAFC 100%);
    border-left-color: #059669;
}

.result-submission-section:nth-child(3n) .result-submission-section-header {
    background: linear-gradient(90deg, #FFF7ED 0%, #F8FAFC 100%);
    border-left-color: #D97706;
}

.result-submission-section-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #334155;
}

.result-submission-section-body {
    display: flex;
    flex-direction: column;
    padding: 0.65rem 0.75rem 0.75rem;
}

.result-submission-section-body--flat {
    border-radius: 0.65rem;
    border: 1px solid #E2E8F0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.result-submission-answer + .result-submission-answer {
    padding-top: 0.85rem;
    margin-top: 0.85rem;
    border-top: 1px dashed #E2E8F0;
}

.results-vehicle-cell .results-answer-trigger {
    margin-top: 0;
    max-width: 100%;
    word-break: break-all;
    text-align: left;
}

/* ===== Dashboard (admin) ===== */
.dashboard-head {
    align-items: center;
}

.dashboard-head .h1 {
    font-size: 1.5rem;
    font-weight: 700;
}

.dashboard-stats {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .dashboard-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

.dash-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem 1.15rem 1rem;
    background: #fff;
    color: #0F172A;
    border: 1px solid #E2E8F0;
    border-radius: 0.875rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

    .dash-stat-card:hover {
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
        transform: translateY(-1px);
        border-color: #CBD5E1;
    }

.dash-stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.dash-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94A3B8;
}

.dash-stat-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    color: #B45309;
    opacity: 0.9;
}

    .dash-stat-icon svg {
        width: 100%;
        height: 100%;
    }

.dash-stat-value-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    margin-top: 0.15rem;
}

.dash-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #111827;
}

.dash-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #EA580C;
}

    .dash-stat-trend svg {
        width: 0.95rem;
        height: 0.95rem;
        flex-shrink: 0;
    }

.dash-stat-status {
    font-size: 0.875rem;
    font-weight: 600;
    color: #EA580C;
}

.dash-stat-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #FCE7F3;
    color: #9D174D;
    line-height: 1.3;
}

.dash-stat-foot {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: #94A3B8;
}

.dash-stat-card--vehicles .dash-stat-top,
.dash-stat-card--vehicles .dash-stat-value-row,
.dash-stat-card--vehicles .dash-stat-foot {
    position: relative;
    z-index: 1;
}

.dash-stat-vehicle-bg {
    position: absolute;
    right: 0.3rem;
    bottom: .2rem;
    width: 5.5rem;
    height: 5.5rem;
    color: #BFDBFE;
    opacity: 0.55;
    pointer-events: none;
}

    .dash-stat-vehicle-bg svg {
        width: 100%;
        height: 100%;
    }
.result-detail-answers{
    margin-top: 12px;
}

.dashboard-body {
    max-width: 22rem;
}

.dashboard-quicklinks {
    padding: 1.1rem 1.15rem;
}

    .dashboard-quicklinks .h2 {
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: 0.85rem;
    }

.dashboard-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.dashboard-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.625rem;
    background: #fff;
    color: #111827;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .dashboard-link:hover {
        background: #FFFBF7;
        border-color: #FDBA74;
        box-shadow: 0 2px 8px rgba(234, 88, 12, 0.08);
    }

.dashboard-link-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    color: #EA580C;
}

    .dashboard-link-icon svg {
        width: 100%;
        height: 100%;
    }

.dashboard-link-text {
    flex: 1;
    min-width: 0;
}

.dashboard-link-chevron {
    display: inline-flex;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: #94A3B8;
}

    .dashboard-link-chevron svg {
        width: 100%;
        height: 100%;
    }

.results-answer-trigger {
    display: inline-flex;
    align-items: center;
    margin-top: 0.35rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid #BFDBFE;
    border-radius: 0.375rem;
    background: #EFF6FF;
    font-size: 0.75rem;
    font-weight: 500;
    color: #1D4ED8;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .results-answer-trigger:hover {
        background: #DBEAFE;
        border-color: #93C5FD;
        color: #1E40AF;
    }