:root {
    --color-bg: #f4f5f7;
    --color-surface: #ffffff;
    --color-surface-2: #f7f8fa;
    --color-border: #e2e5ea;
    --color-text: #16181d;
    --color-muted: #5f6672;
    /* Brand accent of this instance. White-label themes override the three
       --brand-accent* vars via an inline <style> emitted from App.razor; the
       --color-accent indirection lets dark mode swap the working accent while
       the landing page re-pins back to the brand colour. */
    --brand-accent: #e31e24;
    --brand-accent-2: #b8151a;
    --brand-accent-light: #f15a5f;
    --brand-accent-rgb: 227, 30, 36;
    --color-accent: var(--brand-accent);
    --color-accent-2: var(--brand-accent-2);
    --color-ink: #101114;
    --color-shadow: rgba(16, 24, 40, 0.10);
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Poppins", system-ui, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    /* FLEX-inspired backdrop: clean white top fading into light gray with
       horizontal "speed stripes" near the bottom of the viewport. */
    /* The accent radials tint the light gray with the instance colour (red on
       the master, the chosen palette on white-label) — visible around cards in
       the logged-in views, not just behind the drawer. */
    background-image:
        radial-gradient(circle at 15% 0%, rgba(var(--brand-accent-rgb), 0.06), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(var(--brand-accent-rgb), 0.05), transparent 45%),
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 78vh,
            rgba(16, 24, 40, 0.045) 78vh,
            rgba(16, 24, 40, 0.045) calc(78vh + 5px),
            transparent calc(78vh + 5px),
            transparent calc(78vh + 26px),
            rgba(16, 24, 40, 0.04) calc(78vh + 26px),
            rgba(16, 24, 40, 0.04) calc(78vh + 30px),
            transparent calc(78vh + 30px),
            transparent calc(78vh + 48px),
            rgba(16, 24, 40, 0.035) calc(78vh + 48px),
            rgba(16, 24, 40, 0.035) calc(78vh + 51px),
            transparent calc(78vh + 51px),
            transparent 100vh
        ),
        linear-gradient(180deg, #ffffff 0%, #f6f7f9 55%, #eef0f3 100%);
    background-attachment: fixed;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    color: var(--color-accent-2);
}

::selection {
    background: rgba(var(--brand-accent-rgb), 0.25);
}

h1:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

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

.landing-layout {
    min-height: 100vh;
}

/* Black automotive app bar — keeps the white "TEST DRIVE" logo readable and
   anchors the FLEX black/red/white palette. */
.app-bar {
    border-bottom: 3px solid var(--color-accent);
    background: rgba(16, 17, 20, 0.96);
    backdrop-filter: blur(18px);
}

/* Same visual identity as the in-app bar (.app-bar) so the transition from the
   marketing page to the client panel feels seamless. */
.landing-app-bar {
    background: rgba(16, 17, 20, 0.96);
    backdrop-filter: blur(18px);
    border-bottom: 3px solid var(--color-accent);
}

.landing-app-bar__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.language-flags {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 0.25rem 0.5rem;
}

.flag-btn {
    background: transparent;
    border: none;
    padding: 2px 6px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
}

.flag-btn.active {
    outline: 2px solid var(--color-accent);
}

.app-bar__menu {
    margin-right: 0.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.landing-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* The TEST DRIVE logo is a wide horizontal mark — constraining it to a square
   made it tiny. Fix the height, let the width follow the aspect ratio. */
.landing-brand__logo {
    height: 44px;
    width: auto;
    object-fit: contain;
}

.landing-brand__title {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
}

.brand-title {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.status-chip {
    box-shadow: 0 0 14px rgba(var(--brand-accent-rgb), 0.35);
}

.user-panel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-right: 1rem;
}

.user-avatar {
    background: var(--color-accent);
    color: #fff;
    font-weight: 600;
}

.user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

/* ===== Top bar responsive behavior =====
   The bar holds: menu, brand, service pills, search (admin), language, user
   panel and a role chip — ~750px of content. Below ~1500px we progressively
   drop the least essential pieces so nothing ever clips or wraps. */
.brand-title {
    white-space: nowrap;
}

.app-bar .logout-icon-btn {
    display: none;
}

.app-bar .logout-text-btn {
    white-space: nowrap;
}

@media (max-width: 1500px) {
    .app-bar .user-meta {
        display: none;
    }

    .app-bar .user-panel {
        gap: 0.5rem;
        margin-right: 0.5rem;
    }

    .app-bar .global-search {
        width: 230px;
    }
}

@media (max-width: 1300px) {
    .app-bar .status-chip {
        display: none;
    }

    .app-bar .brand-logo {
        height: 38px;
    }

    .app-bar .global-search {
        width: 190px;
    }
}

@media (max-width: 1100px) {
    .app-bar .service-pill--schedule {
        display: none;
    }
}

@media (max-width: 700px) {
    .app-bar .service-pill {
        display: none;
    }

    .app-bar .brand-title {
        display: none;
    }

    .app-bar .brand {
        gap: 0.4rem;
    }

    .app-bar .brand-logo {
        height: 34px;
    }

    .app-bar .mud-toolbar {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Swap the text logout button for a compact icon so the bar fits phones. */
    .app-bar .logout-text-btn {
        display: none;
    }

    .app-bar .logout-icon-btn {
        display: inline-flex;
    }

    .app-bar .language-flags {
        padding: 0.25rem 0.2rem;
        gap: 2px;
    }
}

/* Dark sidebar: light text on graphite, red active state. */
.app-drawer {
    border-right: 1px solid #1d2026;
}

.app-drawer .drawer-subtitle,
.app-drawer .drawer-footer,
.app-drawer .nav-section {
    color: #8b919b;
}

.app-drawer .drawer-divider,
.app-drawer .nav-divider {
    border-color: rgba(255, 255, 255, 0.10);
}

.drawer-header {
    padding: 1.5rem 1.5rem 0.75rem;
}

.drawer-title {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.drawer-subtitle {
    color: var(--color-muted);
}

.drawer-footer {
    padding: 1rem 1.5rem 1.5rem;
    color: var(--color-muted);
}

.drawer-divider {
    margin-bottom: 0.75rem;
    border-color: var(--color-border);
}

.drawer-footnote {
    display: block;
}

.app-content {
    padding: 2.5rem 0 3rem;
}

/* Clearance for the floating Help button (customers only): the fab occupies
   ~4.5rem of the bottom-right corner, so fully-scrolled pages need enough
   bottom padding that their last buttons land ABOVE it (bug: it covered the
   order wizard's Continue). */
.app-content--with-fab {
    padding-bottom: 6.5rem;
}

.landing-content {
    padding: 3.5rem 0 4rem;
}

.landing-content__container {
    padding-top: 1rem;
}

.content-container {
    padding-top: 1.5rem;
}

.app-nav {
    padding: 0.25rem 0.75rem 1rem;
}

.nav-section {
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin: 1.25rem 0 0.5rem;
}

.file-upload {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    border: 1px dashed #c9ced6;
    border-radius: 14px;
    background: var(--color-surface-2);
}

.file-upload__input {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.file-upload__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    border: 1px solid var(--color-accent);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(var(--brand-accent-rgb), 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.file-upload__button:hover {
    transform: translateY(-1px);
    border-color: var(--color-accent-2);
    box-shadow: 0 12px 24px rgba(var(--brand-accent-rgb), 0.36);
}

.file-upload__text {
    flex: 1 1 auto;
}

.nav-divider {
    margin: 0.75rem 0;
    border-color: var(--color-border);
}

.app-nav .mud-nav-link {
    border-radius: 14px;
    margin: 0.2rem 0;
    padding: 0.6rem 0.75rem;
    color: #d6d9de;
    transition: all 0.2s ease;
}

.app-nav .mud-nav-link:hover {
    background: rgba(var(--brand-accent-rgb), 0.16);
    color: #ffffff;
}

.app-nav .mud-nav-link.active {
    background: linear-gradient(90deg, rgba(var(--brand-accent-rgb), 0.85), rgba(var(--brand-accent-rgb), 0.45));
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(var(--brand-accent-rgb), 0.30);
    font-weight: 600;
}

.app-nav .mud-nav-link.active .mud-icon-root {
    color: #ffffff;
}

/* Collapsible admin menu groups (NavGroup.razor). The header mirrors the
   geometry of .mud-nav-link so headers and links sit on one grid; the links
   inside are indented and separated by a thin rail on the left. */
.nav-group {
    margin: 0.35rem 0 0.15rem;
}

.nav-group__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #9ea5b0;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-group__header:hover,
.nav-group__header:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    outline: none;
}

.nav-group--open .nav-group__header {
    color: #d6d9de;
}

.nav-group__icon {
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.nav-group__title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-group__header .nav-badge {
    margin-left: 0;
}

.nav-group__chevron {
    font-size: 1.25rem;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.nav-group--open .nav-group__chevron {
    transform: rotate(180deg);
}

.nav-group__items {
    margin: 0.1rem 0 0.25rem 1.1rem;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.10);
}

.nav-group__items .mud-nav-link {
    padding: 0.5rem 0.65rem;
}

.landing-hero {
    padding: 3rem;
    background:
        linear-gradient(135deg, rgba(var(--brand-accent-rgb), 0.07), rgba(var(--brand-accent-rgb), 0) 55%),
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 82%,
            rgba(16, 24, 40, 0.05) 82%,
            rgba(16, 24, 40, 0.05) calc(82% + 4px),
            transparent calc(82% + 4px),
            transparent calc(82% + 16px),
            rgba(16, 24, 40, 0.04) calc(82% + 16px),
            rgba(16, 24, 40, 0.04) calc(82% + 18px),
            transparent calc(82% + 18px)
        ),
        var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.12);
    position: relative;
    overflow: hidden;
    animation: rise 0.6s ease-out;
}

.landing-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2rem;
    align-items: center;
}

.landing-hero__title {
    margin-bottom: 0.6rem;
}

.landing-hero__subtitle {
    color: var(--color-muted);
    max-width: 520px;
}

.landing-hero__actions {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.landing-hero__chips {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* The white "TEST DRIVE" logo needs a dark plate on the light hero card —
   a black panel with a red edge keeps the FLEX black/red/white contrast. */
.landing-hero__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 2rem;
    border-radius: 18px;
    background:
        radial-gradient(circle at 80% 0%, rgba(var(--brand-accent-rgb), 0.22), transparent 55%),
        linear-gradient(160deg, #1a1c21 0%, #0f1114 70%);
    border-bottom: 4px solid var(--color-accent);
    box-shadow: 0 20px 40px rgba(16, 24, 40, 0.30);
}

.landing-hero__image {
    max-width: 320px;
    width: 100%;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
}

.metrics-grid {
    margin-top: 2rem;
}

.landing-highlight-grid {
    margin-top: 2.5rem;
}

/* Shared card surface for all landing cards — sets the common radius, border,
   transition, and hover lift. Variants below (.landing-highlight,
   .landing-tunings__card, .landing-step, .landing-brand-card) override background
   and padding but inherit a consistent feel. */
.landing-card {
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Optional illustration attached to a news post / custom section (mini-CMS). */
.landing-media-img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 12px;
    margin: 12px 0;
}

/* Responsive 16:9 wrapper for YouTube/Vimeo embeds and native video. */
.landing-media-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 12px 0;
}

.landing-media-video iframe,
.landing-media-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
    background: #000;
}

.landing-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--brand-accent-rgb), 0.5);
    box-shadow: 0 16px 28px rgba(16, 24, 40, 0.14);
}

.landing-highlight {
    padding: 1.5rem;
    display: grid;
    gap: 0.5rem;
    /* Highlights sit on the bare page (no wrapping .landing-section), so they
       get a solid surface + subtle shadow to carry visual weight. */
    background: var(--color-surface);
    box-shadow: 0 12px 24px rgba(16, 24, 40, 0.08);
}

.landing-highlight__icon {
    font-size: 2rem;
}

.landing-tunings__grid {
    margin-top: 1.5rem;
}

.landing-tunings__card {
    padding: 1.4rem;
    display: grid;
    gap: 0.45rem;
    align-content: start;
    height: 100%;
}

.landing-tunings__icon {
    font-size: 1.7rem;
    margin-bottom: 0.15rem;
}

.landing-tunings__name {
    font-weight: 600;
}

.landing-section__title {
    margin-bottom: 0.6rem;
}

.landing-hero__eyebrow {
    color: var(--color-accent);
    letter-spacing: 0.18em;
    margin-bottom: 0.4rem;
    display: block;
}

.ticket-options-grid {
    row-gap: 0.35rem;
}

.ticket-option-checkbox .mud-checkbox-label {
    font-size: 0.82rem;
    line-height: 1.2;
}

.landing-process__steps {
    margin-top: 1.5rem;
    display: grid;
    gap: 1rem;
}

.landing-process__steps--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .landing-process__steps--grid {
        grid-template-columns: 1fr;
    }
}

.landing-step {
    padding: 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.landing-step__number {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(var(--brand-accent-rgb), 0.12);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Generic section container for Tunings + Process + Platforms + FAQ blocks.
   Mirrors landing-process padding + border so the sections read as siblings. */
.landing-section {
    margin-top: 3rem;
    padding: 2.25rem;
    border-radius: 22px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
}

.landing-brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.landing-brand-card {
    /* Smaller than the other .landing-card variants — these are chip-like tiles
       in a dense grid, so radius + padding scale down. */
    padding: 0.85rem 1rem;
    border-radius: 12px;
}

.landing-brand-card__name {
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.landing-brand-footnote {
    display: block;
    margin-top: 0.75rem;
    font-style: italic;
}

/* Last tile in the brand grid — the "…and many more" catch-all. Tints the
   accent color and nudges the caption to a lighter shade so the tile reads
   as a label rather than a specific brand. */
.landing-brand-card--more {
    background: linear-gradient(135deg, rgba(var(--brand-accent-rgb), 0.10), rgba(var(--brand-accent-rgb), 0.02));
    border-color: rgba(var(--brand-accent-rgb), 0.45);
}

.landing-brand-card--more .landing-brand-card__name {
    color: var(--color-accent-2);
}

.landing-faq {
    margin-top: 1rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.landing-faq .mud-expand-panel {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.landing-faq .mud-expand-panel:last-child {
    border-bottom: none;
}

/* Cooperation cards: two side-by-side offers with
   check-marked feature lists. */
.landing-coop-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.landing-coop-card__eyebrow {
    color: var(--color-accent-2);
    letter-spacing: 0.14em;
}

.landing-coop-card__list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

.landing-coop-card__list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
}

.landing-coop-card__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-accent-2);
    font-weight: 700;
}

/* Contact section ("Talk to us"): three info cards + centered message form. */
.landing-contact-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.landing-contact-card__link {
    font-weight: 600;
    color: var(--color-accent-2);
    word-break: break-all;
}

.landing-contact-form {
    margin: 2rem auto 0;
    max-width: 720px;
    padding: 2rem;
}

.landing-cta {
    margin-top: 3rem;
    padding: 2.25rem;
    border-radius: 22px;
    border: 1px solid rgba(var(--brand-accent-rgb), 0.35);
    background: linear-gradient(120deg, rgba(var(--brand-accent-rgb), 0.10), rgba(var(--brand-accent-rgb), 0)), var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-shadow: 0 16px 32px rgba(16, 24, 40, 0.10);
}

.landing-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 0;
}

.stat-card {
    padding: 1.5rem;
    border-radius: 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    box-shadow: 0 14px 28px rgba(16, 24, 40, 0.10);
    animation: rise 0.7s ease-out;
}

/* Colored metric tiles in the portal palette:
   gray / red / black. Colored variants drop the red top border and
   carry their own text colors. */
.stat-card--gray {
    background: #eceef1;
    border: none;
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.08);
}

.stat-card--red {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    border: none;
    box-shadow: 0 14px 28px rgba(var(--brand-accent-rgb), 0.35);
}

.stat-card--dark {
    background: linear-gradient(150deg, #1c1e24, #101114);
    border: none;
    box-shadow: 0 14px 28px rgba(16, 24, 40, 0.30);
}

.stat-card--red .stat-label,
.stat-card--red .stat-value,
.stat-card--red .stat-note,
.stat-card--dark .stat-value {
    color: #ffffff;
}

.stat-card--red .stat-note,
.stat-card--red .stat-label {
    opacity: 0.85;
}

.stat-card--dark .stat-label,
.stat-card--dark .stat-note {
    color: #aab0b9;
}

.stat-label {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-muted);
}

.stat-value {
    margin: 0.4rem 0;
}

.stat-note {
    color: var(--color-muted);
}

.panel-grid {
    margin-top: 2.5rem;
}

.panel-card {
    padding: 1.75rem;
    border-radius: 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.08);
}

/* Axis titles around MudChart — the library draws ticks but not axis names. */
.chart-frame {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
}
.chart-frame__y {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    max-width: 1.4rem;
}
.chart-frame__plot {
    flex: 1 1 auto;
    min-width: 0;
}
.chart-frame__x {
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    margin-top: 0.15rem;
}

.queue-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.65rem;
    margin: 0.75rem 0 1rem;
}
.queue-chip {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0.7rem 0.85rem;
    background: var(--color-surface);
}
.queue-chip__value {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
}
.queue-chip__label {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 0.15rem;
}
.queue-chip--zero .queue-chip__value {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

/* Horizontal bar list (HBarList.razor): label | bar | count rows. */
.hbar-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.35rem 0;
}
.hbar-row {
    display: grid;
    grid-template-columns: minmax(130px, 36%) 1fr 2.8rem;
    align-items: center;
    gap: 0.6rem;
}
.hbar-label {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}
.hbar-track {
    background: var(--color-border);
    border-radius: 6px;
    height: 13px;
    overflow: hidden;
}
.hbar-fill {
    height: 100%;
    border-radius: 6px;
}
.hbar-value {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
}

/* ============================================================
   Customer dashboard: header row, notice banner,
   "submitted tickets" card with colored tiles, action cards and
   a wide promo card — all in the light red/gray palette.
   ============================================================ */
.dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* Intake box (admin approval queue) */
.intake-card {
    border-left: 4px solid #f59e0b;
}

.intake-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.intake-card__ref {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.intake-card__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.intake-card__price {
    font-weight: 700;
    color: var(--color-primary, var(--color-accent));
}

.nav-badge {
    margin-left: 0.5rem;
}

/* Ticket chat (complaint / correction conversation).
   The OUTER box is a plain block scroller — a flex column here made
   scrollHeight ≈ clientHeight, so JS pin-to-bottom was a no-op and
   long threads always opened at the first message. Layout/gap live
   on the inner stack. */
.chat-window {
    max-height: 420px;
    overflow-y: auto;
    padding: 0.75rem;
    background: #f6f7f9;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
}

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

.chat-empty {
    text-align: center;
    padding: 1.5rem 0;
}

.chat-msg {
    display: flex;
}

.chat-msg--own {
    justify-content: flex-end;
}

.chat-msg--other {
    justify-content: flex-start;
}

.chat-msg__bubble {
    max-width: 78%;
    padding: 0.55rem 0.8rem;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.chat-msg--own .chat-msg__bubble {
    background: #fdecec;
    border-color: rgba(var(--brand-accent-rgb), 0.25);
    border-bottom-right-radius: 4px;
}

.chat-msg--other .chat-msg__bubble {
    border-bottom-left-radius: 4px;
}

.chat-msg__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}

.chat-msg__sender {
    font-weight: 600;
    font-size: 0.78rem;
}

.chat-msg__time {
    font-size: 0.7rem;
    color: var(--color-text-muted, #6b7280);
}

.chat-msg__text {
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Chat photo attachments: bounded thumbnail in the bubble (click = full size in a
   new tab), staged-preview strip above the input, and the hidden file input whose
   visible face is the label-button next to the emoji picker. */
/* Admin vehicle DB: expanded stage sub-table under a grouped engine-variant row.
   Slightly inset + tinted so the child rows read as details of the row above. */
.vehicle-stage-cell {
    padding: 0 0 0 3rem !important;
    background: rgba(0, 0, 0, 0.02);
}

.vehicle-stage-table {
    box-shadow: none !important;
}

.vehicle-stage-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
}

body.theme-dark .vehicle-stage-cell {
    background: rgba(255, 255, 255, 0.03);
}

.chat-msg__image {
    display: block;
    max-width: min(280px, 100%);
    max-height: 240px;
    border-radius: 10px;
    margin-top: 0.375rem;
    object-fit: cover;
    cursor: zoom-in;
}

.chat-staged-image {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.625rem;
    border: 1px dashed rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    width: fit-content;
    max-width: 100%;
}

.chat-staged-image img {
    max-width: 96px;
    max-height: 72px;
    border-radius: 6px;
    object-fit: cover;
}

.chat-staged-image__name {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-image-input {
    display: none;
}

.chat-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--mud-palette-action-default, #757575);
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.chat-attach-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

body.theme-dark .chat-staged-image {
    border-color: rgba(255, 255, 255, 0.3);
}

body.theme-dark .chat-attach-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.chat-msg--system {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #1e40af;
    font-size: 0.78rem;
    max-width: 92%;
}

.chat-input {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.chat-input .mud-input-control {
    flex: 1;
}

.chat-input .mud-button-root {
    margin-top: 0.5rem;
}

/* Quick emoji picker attached to the chat input. */
.chat-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 6px 8px;
    max-width: 300px;
}

.chat-emoji-btn {
    border: none;
    background: transparent;
    font-size: 1.3rem;
    line-height: 1.5;
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 4px;
    transition: background-color 0.12s ease;
}

.chat-emoji-btn:hover {
    background: #f1f5f9;
}

/* Follow-up ("duplicate") source-scope card on ticket detail */
.source-scope-card {
    border-left: 4px solid #3b82f6;
}

.dashboard-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.25rem;
    border-radius: 14px;
    background: rgba(var(--brand-accent-rgb), 0.07);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.25);
    margin-bottom: 1.5rem;
}

.dashboard-banner__icon {
    color: var(--color-accent);
}

.dashboard-banner__text {
    color: var(--color-text);
}

.dashboard-banner__btn {
    margin-left: auto;
    white-space: nowrap;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}

.dashboard-banner__btn:hover {
    background: var(--color-accent-2);
}

.files-card {
    margin-bottom: 1.5rem;
}

.files-card__head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.files-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eceef1;
    color: var(--color-accent);
    flex-shrink: 0;
}

.file-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.file-tile {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
}

.file-tile__label {
    font-size: 0.85rem;
    font-weight: 600;
}

.file-tile.stat-card--gray .file-tile__label {
    color: var(--color-text);
}

.file-tile.stat-card--red .file-tile__label,
.file-tile.stat-card--dark .file-tile__label {
    color: #ffffff;
}

.file-tile__count {
    align-self: flex-start;
    min-width: 2.2rem;
    text-align: center;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
}

.file-tile.stat-card--gray .file-tile__count {
    background: #ffffff;
    color: var(--color-text);
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.10);
}

.file-tile.stat-card--red .file-tile__count {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.file-tile.stat-card--dark .file-tile__count {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.action-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    height: 100%;
}

.action-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eceef1;
    color: var(--color-accent);
}

.action-card__icon--light {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.action-card__actions {
    margin-top: auto;
    padding-top: 0.75rem;
}

.action-card--accent {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    border: none;
    box-shadow: 0 16px 32px rgba(var(--brand-accent-rgb), 0.30);
}

.action-card--accent .mud-typography {
    color: #ffffff;
}

.action-card__btn-light {
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #ffffff !important;
}

.action-card__btn-light:hover {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.promo-card {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 1.5rem;
    overflow: hidden;
}

.promo-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1 1 55%;
}

.promo-card__badge {
    align-self: flex-start;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: rgba(var(--brand-accent-rgb), 0.1);
    color: var(--color-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.promo-card__image {
    flex: 1 1 40%;
    max-width: 420px;
    min-width: 0;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 16px 32px rgba(16, 24, 40, 0.18);
}

/* Mini stats chart in the promo card (replaces the static photo). */
.promo-card__chart {
    flex: 1 1 45%;
    max-width: 460px;
    min-width: 0;
    padding: 1rem 1.25rem 0.5rem;
    background: #ffffff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 16px 32px rgba(16, 24, 40, 0.08);
}

@media (max-width: 900px) {
    .file-tiles {
        grid-template-columns: 1fr;
    }

    .promo-card {
        flex-direction: column;
        align-items: stretch;
    }

    .promo-card__image {
        max-width: none;
        height: 180px;
    }

    .promo-card__chart {
        max-width: none;
    }
}

/* Saved-vehicle cards on /vehicles. */
.vehicle-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    height: 100%;
}

.vehicle-card__head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.vehicle-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eceef1;
    color: var(--color-accent);
    flex-shrink: 0;
}

.vehicle-card__rows {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vehicle-card__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
}

.vehicle-card__row span {
    color: var(--color-muted);
}

.vehicle-card__row strong {
    text-align: right;
    word-break: break-word;
}

.vehicle-card__actions {
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Monospace DTC code badge on /dtc. */
.dtc-code {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 8px;
    background: #16181d;
    color: #ffffff;
    font-family: 'Consolas', 'SF Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Knowledge-base expansion panels — flat list separated by hairlines. */
.kb-panels .mud-expand-panel {
    border-bottom: 1px solid var(--color-border);
}

/* Service status pill in the dark app bar ("Obsługa plików: online"). */
.service-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: 1.25rem;
    padding: 0.28rem 0.85rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.service-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.service-pill--online {
    background: rgba(29, 158, 87, 0.16);
    color: #4cd07d;
}

.service-pill--offline {
    background: rgba(var(--brand-accent-rgb), 0.18);
    color: #f1666b;
}

/* Clickable top-bar schedule indicator ("Dziś do 22:00") — opens the file-service
   schedule dialog. Rendered as a <button> so it stays keyboard accessible. */
.service-pill--schedule {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: none;
    margin-left: 0.6rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.service-pill--schedule:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Admin-only top-bar mail alert — rendered ONLY when outgoing e-mails failed in the
   last 24 h (see IEmailHealthMonitor); clicking opens the dashboard mail widget. */
.service-pill--mail-alert {
    background: rgba(var(--brand-accent-rgb), 0.18);
    color: #f1666b;
    border: none;
    margin-left: 0.6rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.service-pill--mail-alert:hover {
    background: rgba(var(--brand-accent-rgb), 0.3);
}

@media (max-width: 700px) {
    .service-pill--schedule {
        display: none;
    }
}

/* Admin global search in the dark top bar — light glassy input so it reads well
   against the app-bar background. */
.global-search {
    width: 320px;
    margin-right: 1rem;
}

.global-search .mud-input-control-input-container .mud-input {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 8px;
}

.global-search input.mud-input-slot {
    color: #ffffff;
}

.global-search .mud-input-slot::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.global-search .mud-input-adornment .mud-icon-root,
.global-search .mud-icon-button .mud-icon-root {
    color: rgba(255, 255, 255, 0.7);
}

.global-search .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 960px) {
    .global-search {
        display: none;
    }
}

/* Customer order progress timeline (TicketProgress component). */
.ticket-progress {
    display: flex;
    align-items: flex-start;
    margin: 0.5rem 0 0.25rem;
}

.ticket-progress__step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.ticket-progress__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6e8ec;
    color: #7a8089;
    font-size: 0.78rem;
    font-weight: 700;
    z-index: 1;
    transition: background 0.2s ease, color 0.2s ease;
}

.ticket-progress__label {
    margin-top: 0.35rem;
    text-align: center;
    color: #7a8089;
    line-height: 1.15;
    padding: 0 0.2rem;
}

.ticket-progress__bar {
    position: absolute;
    top: 14px;
    left: calc(50% + 16px);
    width: calc(100% - 32px);
    height: 3px;
    border-radius: 2px;
    background: #e6e8ec;
}

.ticket-progress__bar--done {
    background: var(--mud-palette-success, #1d9e57);
}

.ticket-progress__step--done .ticket-progress__dot {
    background: var(--mud-palette-success, #1d9e57);
    color: #fff;
}

.ticket-progress__step--done .ticket-progress__label {
    color: var(--mud-palette-success, #1d9e57);
}

.ticket-progress__step--active .ticket-progress__dot {
    background: var(--mud-palette-primary, var(--color-accent));
    color: #fff;
    box-shadow: 0 0 0 5px rgba(var(--brand-accent-rgb), 0.15);
}

.ticket-progress__step--active .ticket-progress__label {
    color: var(--mud-palette-primary, var(--color-accent));
    font-weight: 600;
}

.ticket-progress__step--warning .ticket-progress__dot {
    background: #f5a623;
    color: #fff;
    box-shadow: 0 0 0 5px rgba(245, 166, 35, 0.18);
}

.ticket-progress__step--warning .ticket-progress__label {
    color: #b97400;
    font-weight: 600;
}

/* --- Progress animations ------------------------------------------------- */

/* Completed checkmarks pop in one after another when the page opens. */
.ticket-progress__step--done .ticket-progress__dot .mud-icon-root {
    animation: tp-pop 0.35s ease both;
}

.ticket-progress__step:nth-child(2).ticket-progress__step--done .ticket-progress__dot .mud-icon-root {
    animation-delay: 0.1s;
}

.ticket-progress__step:nth-child(3).ticket-progress__step--done .ticket-progress__dot .mud-icon-root {
    animation-delay: 0.2s;
}

.ticket-progress__step:nth-child(4).ticket-progress__step--done .ticket-progress__dot .mud-icon-root {
    animation-delay: 0.3s;
}

@keyframes tp-pop {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* The active step emits an expanding "radar ping" ring. */
.ticket-progress__step--active .ticket-progress__dot,
.ticket-progress__step--warning .ticket-progress__dot {
    position: relative;
}

.ticket-progress__step--active .ticket-progress__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: tp-ping-accent 2s ease-out infinite;
}

@keyframes tp-ping-accent {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--brand-accent-rgb), 0.45);
    }

    100% {
        box-shadow: 0 0 0 16px rgba(var(--brand-accent-rgb), 0);
    }
}

/* Warning ("needs attention"): slower amber pulse — work paused, waiting for the user. */
.ticket-progress__step--warning .ticket-progress__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: tp-ping-warning 2.6s ease-out infinite;
}

@keyframes tp-ping-warning {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.45);
    }

    100% {
        box-shadow: 0 0 0 14px rgba(245, 166, 35, 0);
    }
}

/* "Matrix" binary stream on the segment feeding the active step: the line itself
   dims so the flowing digits riding on it stay readable. */
.ticket-progress__bar--flow {
    background: rgba(29, 158, 87, 0.25);
}

.ticket-progress__bits {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 14px;
    margin-top: -7px;
    overflow: hidden;
    white-space: nowrap;
    /* Digits fade in/out at the ends instead of getting chopped off. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.ticket-progress__bits-track {
    display: inline-block;
    animation: tp-bits 9s linear infinite;
}

.ticket-progress__bits-track > span {
    display: inline-block;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--mud-palette-success, #1d9e57);
}

/* Two identical halves + a half-width shift = seamless left-to-right flow. */
@keyframes tp-bits {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

/* Accessibility: honour the OS-level "reduce motion" preference. */
@media (prefers-reduced-motion: reduce) {
    .ticket-progress *,
    .ticket-progress *::after {
        animation: none !important;
    }

    .ticket-progress__bits {
        display: none;
    }

    .ticket-progress__bar--flow {
        background: var(--mud-palette-success, #1d9e57);
    }
}

@media (max-width: 600px) {
    .ticket-progress__label {
        font-size: 0.62rem;
    }
}

/* --- "Data stream" visual language (shared by uploads, loaders, login) -------- */

/* DataFlowBar: upload/transfer indicator — binary digits flowing along a dim line. */
.data-flow {
    position: relative;
    height: 14px;
    overflow: hidden;
}

.data-flow::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 2px;
    background: rgba(29, 158, 87, 0.22);
}

.data-flow__bits {
    position: absolute;
    inset: 0;
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.data-flow__track {
    display: inline-block;
    animation: tp-bits 7s linear infinite;
}

.data-flow__track > span {
    display: inline-block;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--mud-palette-success, #1d9e57);
}

body.theme-dark .data-flow::before {
    background: rgba(74, 222, 128, 0.18);
}

body.theme-dark .data-flow__track > span {
    color: #4ade80;
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.75);
}

/* Upload finished: the success checkmark pops in. */
.upload-pop {
    animation: tp-pop 0.4s ease both;
}

/* BinaryLoader: digits flicker while a list/page loads. */
.binary-loader {
    display: inline-flex;
    gap: 3px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mud-palette-primary, var(--color-accent));
}

.binary-loader > span {
    animation: bin-flicker 1.1s ease-in-out infinite;
}

.binary-loader > span:nth-child(2n) { animation-delay: 0.15s; }
.binary-loader > span:nth-child(3n) { animation-delay: 0.3s; }
.binary-loader > span:nth-child(4n) { animation-delay: 0.45s; }
.binary-loader > span:nth-child(5n) { animation-delay: 0.6s; }
.binary-loader > span:nth-child(7n) { animation-delay: 0.75s; }

@keyframes bin-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.15; }
}

/* Fresh delivered file the customer hasn't downloaded yet: the download button
   pulses green a few times to pull the eye, then stays calm. */
.download-glow {
    animation: dl-glow 1.3s ease-in-out 4;
    border-radius: var(--mud-default-borderradius, 4px);
}

@keyframes dl-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(29, 158, 87, 0); }
    50% { box-shadow: 0 0 0 6px rgba(29, 158, 87, 0.25), 0 0 14px rgba(29, 158, 87, 0.35); }
}

/* Page-body slide-in, played ONCE when the layout mounts (login / full load).
   No fill mode on purpose: after the animation the element returns to its
   natural style (transform: none), so position:sticky/fixed descendants are
   never left inside a transformed containing block. */
.page-anim--in {
    animation: page-in 0.35s ease;
}

/* In-app page switches use the browser's View Transitions API (dec-truck.js:
   viewTransitionBegin/End). Only the page body carries a transition name and
   animates; everything OUTSIDE it (app bar, drawer, nav highlight) swaps
   INSTANTLY via the zeroed root animations below — a cross-fade there reads
   as the old tab staying lit. Browsers without the API switch instantly. */
.page-anim {
    view-transition-name: page-body;
}

/* --- Global print rules --------------------------------------------------------
   Lesson from the blank Partner-API printout (2026-08-26): screen-only visual
   machinery must be neutralised for print or pages come out blank/unreadable.
   Applied globally so ANY page the user prints / saves as PDF just works.
   On-screen behaviour is untouched. */
@media print {
    /* Chromium renders an element that carries a view-transition-name as an
       EMPTY box in print/PDF output (the name promotes it to a transition
       snapshot layer that the print pipeline skips) — this alone blanked the
       whole page body. */
    .page-anim {
        view-transition-name: none;
        animation: none !important;
    }

    /* Stat tiles are hidden by JS (inline opacity: 0) until scrolled into view
       (decTruck.statReveal) — tiles below the fold would print as empty boxes.
       !important is required to beat the inline style. */
    .stat-card {
        opacity: 1 !important;
        animation: none !important;
    }

    /* Entry animations caught mid-flight would print their keyframe state
       (odometer digits stuck on 0, wizard pane transparent). animation: none
       snaps each element to its natural style — the finished look. */
    .stat-card--in .odometer__strip,
    .wizard-pane,
    .page-anim--in,
    .upload-pop,
    .online-count {
        animation: none !important;
    }

    /* App chrome has no place on paper; MudBlazor pads the content area to
       clear the (now hidden) app bar. */
    .mud-appbar,
    .mud-drawer,
    .mud-drawer-overlay,
    .mud-snackbar,
    .cookie-banner,
    .skip-to-main {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Decorative binary streams frozen mid-animation read as noise on paper. */
    .ticket-progress__bits,
    .data-flow__bits,
    .binary-loader {
        display: none !important;
    }

    /* Dark theme: the dark palette's light text would print light-on-white
       (backgrounds are dropped by default in print) — force black-on-white. */
    body.theme-dark,
    body.theme-dark * {
        color: #111 !important;
        background: #fff !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }
}

/* The group wrapper would otherwise MORPH its position/size from the old page's
   box to the new one (browser default) — with pages of different heights that
   read as a visible "hop" right after the fade (user feedback 2026-08-25).
   Snap the geometry instantly; only the opacity fades below animate. */
::view-transition-group(page-body) {
    animation: none;
}

/* Old and new snapshots are pinned to the top of the group and keep their own
   captured height, so a height mismatch never stretches or shifts content. */
::view-transition-old(page-body),
::view-transition-new(page-body) {
    height: auto;
    object-fit: none;
    object-position: top left;
}

/* Pure cross-fade — deliberately NO translateY: any vertical motion at the end
   of a page switch reads as a jump, not as polish (user feedback 2026-08-25). */
::view-transition-old(page-body) {
    animation: vt-out 180ms ease both;
}

::view-transition-new(page-body) {
    animation: vt-in 180ms ease both;
}

::view-transition-old(root) {
    animation: none;
    opacity: 0;
}

::view-transition-new(root) {
    animation: none;
    opacity: 1;
}

@keyframes vt-out {
    to {
        opacity: 0;
    }
}

@keyframes vt-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes page-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Wizard (ticket create): panes slide in on step change; active step number pings. */
.wizard-pane {
    animation: wiz-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes wiz-in {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wizard-step--active .wizard-step__num {
    position: relative;
}

.wizard-step--active .wizard-step__num::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: tp-ping-accent 2s ease-out infinite;
}

/* Online counter (admin top bar): the number pops when it changes. */
.online-count {
    display: inline-block;
    animation: tp-pop 0.45s ease both;
}

/* Stat tiles: entrance + digit shuffle are triggered from JS (decTruck.statReveal)
   the moment a tile scrolls into view — tiles below the fold animate when the user
   actually sees them, not invisibly at page load. JS hides them first (inline
   opacity), so with JS unavailable the tiles simply render normally. */
.stat-card--in {
    animation: wiz-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Odometer stat values (OdometerValue component): every digit is a vertical
   0–9 strip. The DEFAULT transform already points at the target digit, so the
   correct value shows even with JS off / reduced motion / no reveal class —
   the reveal animation only replays the roll starting from 0. */
.odometer {
    white-space: pre; /* keep literal spaces in values like "43 h 02 min" */
}

.odometer__char,
.odometer__digit {
    display: inline-block;
    height: 1em;
    line-height: 1;
    vertical-align: bottom;
}

.odometer__digit {
    overflow: hidden;
    position: relative;
}

/* Invisible copy of the TARGET digit — it alone dictates the box width, so the
   number keeps the font's natural proportional spacing. Sizing off the strip
   would widen every box to the fattest of 0–9, leaving a gap after narrow
   digits like "1" ("1 056,45" instead of "1056,45"). */
.odometer__sizer {
    visibility: hidden;
}

.odometer__strip {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    white-space: normal;
    transform: translateY(calc(var(--d, 0) * -1em));
}

/* Wider digits passing through mid-roll get clipped a hair at the edges
   (centred), which is imperceptible at animation speed. */
.odometer__strip > span {
    display: block;
    height: 1em;
    line-height: 1;
    text-align: center;
}

/* Roll when the tile reveals; per-digit stagger via --i. "backwards" holds the
   0-position during the delay; after the animation the strip simply returns to
   its natural transform — the target digit. */
.stat-card--in .odometer__strip {
    animation: odo-roll 1.2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes odo-roll {
    from {
        transform: translateY(0);
    }
}

/* Accessibility: honour the OS-level "reduce motion" preference. */
@media (prefers-reduced-motion: reduce) {
    .data-flow__track,
    .binary-loader > span,
    .download-glow,
    .wizard-pane,
    .wizard-step--active .wizard-step__num::after,
    .online-count,
    .stat-card--in,
    .stat-card--in .odometer__strip,
    .page-anim--in,
    .upload-pop {
        animation: none !important;
    }

    /* View transitions: JS already skips them under reduced motion; this is the
       CSS-side belt-and-braces for the browser's default cross-fade. */
    ::view-transition-old(page-body),
    ::view-transition-new(page-body),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }

    .data-flow::before {
        background: var(--mud-palette-success, #1d9e57);
    }
}

/* Maintenance-mode splash (MainLayout) shown to non-admins while the portal is locked. */
.maintenance-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    padding: 2rem;
}

.maintenance-splash__icon {
    font-size: 4.5rem !important;
    width: 4.5rem !important;
    height: 4.5rem !important;
    color: var(--mud-palette-primary, var(--color-accent));
}

.platform-card {
    margin-top: 2rem;
}

.platform-chips {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.panel-title {
    margin-bottom: 1rem;
}

/* Section heading that sits next to an info/help icon. Keeps the inline text
   on the same optical baseline as the icon button (which has its own 32px
   hit target) and carries the same margin-bottom as a standalone panel-title. */
.panel-title-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.panel-title-inline {
    margin: 0;
}

.panel-title-info-btn {
    padding: 4px !important;
}

.counter-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.panel-action {
    margin-top: 1.25rem;
}

.activity-list .mud-list-item {
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.35rem;
    background: var(--color-surface-2);
}

.activity-list .mud-list-item:last-child {
    margin-bottom: 0;
}

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

.health-list {
    margin: 1rem 0 1.5rem;
}

.health-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 0.75rem;
    align-items: center;
}

.health-bar .mud-progress-linear {
    height: 8px;
}

.health-action {
    margin-top: 0.5rem;
}

.page-title {
    margin-bottom: 0.4rem;
}

.section-divider {
    margin: 1rem 0 1.5rem;
    border-color: var(--color-border);
}

/* ─── Admin settings: tabbed layout ─────────────────────────────────────── */
.settings-tabs .mud-tabs-toolbar {
    margin-bottom: 1rem;
}

.settings-tabs .mud-tabs-panels {
    overflow: visible;
}

/* Per-tab save bar: sticks to the bottom of the viewport while the (long) tab
   scrolls, so "Save" is always one click away. Opaque background so the content
   sliding underneath never bleeds through. */
.settings-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding: 0.85rem 0 0.25rem;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.settings-save-bar .mud-typography {
    display: inline-flex;
    align-items: center;
}

.settings-dirty {
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
}

/* Integrations tab: at-a-glance status tiles above the collapsible panels. */
.settings-status-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.settings-status-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-2);
}

.settings-status-tile .mud-chip {
    margin: 0;
}

.settings-integration-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.settings-integration-title .mud-chip {
    margin: 0;
}

.settings-collapsible .mud-expand-panel {
    border: 1px solid var(--color-border);
    border-radius: 12px !important;
    margin-bottom: 0.6rem;
    background: transparent;
}

.settings-collapsible .mud-expand-panel::before {
    display: none;
}

.settings-collapsible .mud-expand-panel-content {
    padding: 0.5rem 1rem 1.25rem;
}

.data-table {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
}

.data-table .mud-table-head {
    background: var(--color-surface-2);
}

/* Tickets list: fixed column layout so the table always fits the viewport width
   with no horizontal scrollbar. Long content (customer e-mails, vehicle names,
   ticket ids) wraps inside its column instead of stretching the table. Only
   applies on desktop — below 960px MudTable stacks rows as cards anyway. */
@media (min-width: 961px) {
    .tickets-table table {
        table-layout: fixed;
        width: 100%;
    }

    .tickets-table td.mud-table-cell {
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Headers wrap between words only — never letter-by-letter ("Ł-ą-c-z-n-i-e"
       towers on 13" screens came from break-word + narrow fixed columns).
       MudBlazor renders header cells as th.mud-table-cell. */
    .tickets-table th.mud-table-cell {
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }

    .tickets-table .mud-table-cell {
        font-size: 0.85rem;
    }

    .tickets-table .mud-chip {
        height: auto;
        min-height: 22px;
        padding: 0.1rem 0.5rem;
        font-size: 0.72rem;
        margin: 1px 2px 1px 0;
    }
}

/* Ticket status chips (TicketStatusChip.razor) — one palette for admins and
   customers. Filled chips need a bit of weight to read as a status, not a tag. */
.ticket-status-chip .mud-chip-content {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ticket-status-chip.ticket-status-cancelled .mud-chip-content {
    text-decoration: line-through;
    opacity: 0.75;
}

/* Dark theme: palette Dark (#0b1019) is the same shade as the surface, so a
   filled "Closed" chip would vanish. Slate keeps it dark-but-visible. */
body.theme-dark .ticket-status-chip.mud-chip-color-dark.mud-chip-filled {
    background-color: #334155;
    color: #e2e8f0;
}

/* Finished tickets (delivered / closed / cancelled) sit at the bottom of the list
   and are dimmed so the open work above stands out. Hover restores full opacity
   so the row is still easy to read when you actually look for it. */
.tickets-table tr.ticket-row-finished > td {
    opacity: 0.6;
}

.tickets-table tr.ticket-row-finished:hover > td {
    opacity: 1;
}

/* Users list: same "always fits the viewport" treatment as the tickets table.
   Column widths come from the <ColGroup> in AdminUsers.razor; content wraps
   inside its cell instead of forcing a horizontal scrollbar. */
@media (min-width: 961px) {
    .users-table table {
        table-layout: fixed;
        width: 100%;
    }

    .users-table .mud-table-cell {
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
        padding: 0.4rem 0.45rem;
    }

    .users-table th.mud-table-cell {
        overflow-wrap: normal;
        word-break: normal;
    }

    .users-table .mud-table-cell {
        font-size: 0.85rem;
    }

    .users-table .mud-chip {
        height: auto;
        min-height: 22px;
        padding: 0.1rem 0.45rem;
        font-size: 0.72rem;
        margin: 1px 2px 1px 0;
    }

    /* Dense inputs (client type select, discount %) — trim MudBlazor's default
       vertical margins so rows stay flat. */
    .users-table .mud-input-control {
        margin-top: 0;
        margin-bottom: 0;
    }

    .users-table .mud-input-control .mud-input {
        font-size: 0.82rem;
    }

    .users-table .mud-button {
        padding: 0.25rem 0.5rem;
        font-size: 0.78rem;
    }

    .users-table .mud-icon-button {
        padding: 5px;
    }

    /* The VIP switch does not need the trailing label gutter. */
    .users-table .mud-switch {
        margin-right: 0;
    }

    /* Balance amounts ("1 234,00 zł") never break across lines. */
    .users-table td.mud-table-cell .mud-link {
        white-space: nowrap;
    }
}

/* 13" laptops: drop the "max 50%" helper under the discount field — it wraps
   letter-by-letter in the narrow column and the limit is enforced anyway. */
@media (max-width: 1500px) {
    .users-table .discount-field .mud-input-helper-text {
        display: none;
    }
}

/* Honeypot wrapper on the landing contact form: parked far off-screen (not
   display:none, which some bots detect) and excluded from tab order. */
.lp-extra {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.data-table .mud-table-row:hover {
    background: rgba(var(--brand-accent-rgb), 0.05);
}

/* Compact cell gutters — base defaults are fine on wide screens; we tighten
   progressively at narrower viewports so dense columns don't crowd each
   other. MudTable already stacks rows as cards on small screens via
   DataLabel, so the 600px rules target the stacked layout's inner padding. */
.data-table .mud-table-cell,
.data-table .mud-table-head-cell {
    padding: 0.45rem 0.7rem;
}

@media (max-width: 960px) {
    .data-table .mud-table-cell,
    .data-table .mud-table-head-cell {
        padding: 0.4rem 0.55rem;
        font-size: 0.85rem;
    }

    /* Stacked card mode: cells with several lines of content (order number +
       vehicle + ECU) wrap into a right-aligned column instead of squeezing
       into one flex row next to the data label. */
    .data-table td.mud-table-cell {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .data-table td.mud-table-cell .mud-typography-body2,
    .data-table td.mud-table-cell .mud-typography-caption {
        flex-basis: 100%;
        text-align: right;
    }

    .data-table .mud-button {
        padding: 0.25rem 0.55rem;
        font-size: 0.8rem;
    }

    .data-table .mud-chip {
        height: auto;
        padding: 0.1rem 0.5rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 600px) {
    .data-table .mud-table-cell,
    .data-table .mud-table-head-cell {
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
    }

    /* Stacked/card rows: tighten the gap between cells and the row margin so
       a single ticket/user/invoice row stays on one thumb-scroll. */
    .data-table .mud-table-row {
        margin-bottom: 0.35rem;
    }

    .data-table .mud-table-row .mud-table-cell[data-label]::before {
        font-size: 0.7rem;
    }
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 0;
}

.dashboard-hero {
    margin-bottom: 2rem;
}

.dashboard-select {
    margin-top: 0.5rem;
}

.dashboard-action {
    height: 56px;
}

.dashboard-tabs {
    margin-top: 2rem;
}

.file-list .file-item,
.chat-list .chat-item {
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.3rem;
    background: var(--color-surface-2);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.file-list .file-item:last-child,
.chat-list .chat-item:last-child {
    margin-bottom: 0;
}

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

.activity-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    background: var(--color-surface-2);
}

.activity-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.file-text,
.chat-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Full-screen split login: dark branding panel on the left
   (logo + tagline anchored low), clean white
   column with the form on the right. */
.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(320px, 40%) 1fr;
}

.auth-aside {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 3rem 2.5rem 4rem;
    color: #f2f3f5;
    background-color: #0f1114;
    overflow: hidden;
}

/* Crossfading photo slideshow (truck / agri / OHW / electronics). Each slide
   fades in for ~6s of a 24s loop; delays are staggered per slide. */
.auth-aside__slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.auth-aside__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: auth-slide-fade 24s infinite;
}

.auth-aside__slide:nth-child(1) { animation-delay: 0s; }
.auth-aside__slide:nth-child(2) { animation-delay: 6s; }
.auth-aside__slide:nth-child(3) { animation-delay: 12s; }
.auth-aside__slide:nth-child(4) { animation-delay: 18s; }

@keyframes auth-slide-fade {
    0% { opacity: 0; }
    5% { opacity: 1; }
    25% { opacity: 1; }
    33% { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-aside__slide {
        animation: none;
    }
    .auth-aside__slide:first-child {
        opacity: 1;
    }
}

/* Dark + red-tinted overlays above the slides so the white logo and text stay
   readable on any photo. */
.auth-aside::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(200deg, rgba(var(--brand-accent-rgb), 0.16), transparent 45%),
        linear-gradient(180deg, rgba(10, 11, 14, 0.25) 0%, rgba(10, 11, 14, 0.35) 55%, rgba(10, 11, 14, 0.82) 100%);
    pointer-events: none;
}

.auth-aside__content {
    max-width: 380px;
    position: relative;
    z-index: 2;
}

.auth-aside__logo {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
    margin-bottom: 1rem;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
}

.auth-aside__tagline {
    color: #ffffff;
    letter-spacing: 0.04em;
}

.auth-aside__description {
    margin-top: 0.75rem;
    color: #aab0b9;
}

.auth-main {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
}

.auth-main__top {
    display: flex;
    justify-content: flex-end;
    padding: 1.25rem 2rem 0;
}

.auth-main__body {
    flex: 1;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem 3rem;
}

.auth-title {
    margin-bottom: 0.35rem;
}

/* MudDivider defaults to flex-grow inside a flex column — pin it so it never
   swallows the vertical space between the heading and the form. */
.auth-main__body .mud-divider {
    flex-grow: 0;
}

.native-form__label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.native-form__forgot {
    font-size: 0.82rem;
    font-weight: 500;
}

.native-form {
    margin-top: 1rem;
}

/* FocusOnNavigate lands on the page heading for screen readers — keep the focus
   programmatic but hide the visible ring on the auth title. */
.auth-title:focus,
.auth-title:focus-visible {
    outline: none;
}

/* Two-up field row on the register panel; collapses to one column on phones. */
.native-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Long values (e.g. a long city name) must shrink with the column instead of
   pushing the input past the card edge: grid items default to min-width:auto. */
.native-form__row > .native-form__label {
    min-width: 0;
}

.native-form__row .native-form__input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .native-form__row {
        grid-template-columns: 1fr;
    }
}

.native-form__hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--color-muted);
}

.native-form__captcha {
    margin: 0.35rem 0 0.1rem;
    min-height: 78px;
}

.native-form__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.2rem;
    cursor: pointer;
}

/* Company-account toggle: pure CSS reveal. The hidden checkbox is a *sibling* of the
   .native-form__company block so :checked ~ works without any JS or Blazor re-render. */
.native-check__box {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.native-check__label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.55rem 0 0.15rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}

.native-check__mark {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 2px solid #c3c8d0;
    border-radius: 4px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.native-check__box:checked + .native-check__label .native-check__mark {
    background: var(--color-primary, #d32f2f);
    border-color: var(--color-primary, #d32f2f);
}

.native-check__box:checked + .native-check__label .native-check__mark::after {
    content: "";
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

.native-form__company {
    display: none;
}

.native-check__box:checked ~ .native-form__company {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.35rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    background: #fafbfc;
}

.native-form__section {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

/* Sign-in <-> register toggle under the form. */
.auth-switch {
    display: inline-block;
    margin-top: 1.25rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

.auth-switch:hover {
    text-decoration: underline;
}

.auth-back {
    margin-top: 2.5rem;
    font-size: 0.9rem;
}

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

    .auth-aside {
        align-items: center;
        padding: 2rem 1.5rem;
    }

    .auth-aside__logo {
        max-width: 220px;
    }
}

/* Still used by ForgotPassword / ResetPassword / AccountDeleted cards. */
.login-card {
    height: 100%;
}

/* "Account awaiting admin approval" modal on the login page — deliberately loud:
   customers kept missing the inline alert and reported login as broken. */
.approval-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(15, 17, 20, 0.55);
    backdrop-filter: blur(3px);
    animation: approval-modal-fade 0.25s ease-out;
}

.approval-modal__card {
    max-width: 440px;
    width: 100%;
    background: #fff;
    border-radius: 14px;
    border-top: 5px solid #f59e0b;
    box-shadow: 0 24px 64px rgba(15, 17, 20, 0.35);
    padding: 1.75rem 1.75rem 1.5rem;
    text-align: center;
    animation: approval-modal-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.approval-modal__icon {
    font-size: 2.75rem !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    color: #f59e0b;
}

.approval-modal__title {
    margin: 0.5rem 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #d97706;
}

.approval-modal__text {
    margin: 0 0 1.25rem;
    color: #374151;
    line-height: 1.55;
}

.approval-modal__steps {
    margin: 0 0 1.25rem;
    padding-left: 1.4rem;
    text-align: left;
    color: #374151;
    line-height: 1.55;
}

.approval-modal__steps li + li {
    margin-top: 0.6rem;
}

.approval-modal__steps li::marker {
    color: #d97706;
    font-weight: 700;
}

/* Approval-queue intel (IP / mail / phone hints in the admin users table):
   cap the width and let captions/chips wrap, so long values stay inside the
   Status column instead of overlapping the VIP column. */
.reg-intel {
    max-width: 300px;
}

.reg-intel .mud-typography-caption {
    overflow-wrap: anywhere;
    white-space: normal;
}

.reg-intel .mud-chip {
    height: auto;
    min-height: 24px;
    max-width: 100%;
    white-space: normal;
    margin: 2px 4px 2px 0;
}

.reg-intel .mud-chip .mud-chip-content {
    white-space: normal;
    overflow-wrap: anywhere;
    padding-top: 2px;
    padding-bottom: 2px;
}

.approval-modal__button {
    display: inline-block;
    padding: 0.625rem 2rem;
    border-radius: 8px;
    background: #f59e0b;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.approval-modal__button:hover {
    filter: brightness(1.05);
    text-decoration: none;
}

@keyframes approval-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes approval-modal-pop {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .approval-modal,
    .approval-modal__card {
        animation: none;
    }
}

.login-form {
    margin-top: 0.5rem;
}

.login-error {
    margin-top: 0.5rem;
}

.native-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.native-form__label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.native-form__input {
    padding: 0.625rem 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    outline: none;
}

/* Show/hide-password eye inside the native password inputs. */
.native-form__password-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}

.native-form__password-wrap .native-form__input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 2.75rem;
}

.native-form__eye {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    border: none;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 6px;
}

.native-form__eye:hover {
    color: #374151;
    background: rgba(0, 0, 0, 0.04);
}

.native-form__eye svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.native-form__eye .eye-off {
    display: none;
}

.native-form__eye.is-visible .eye-on {
    display: none;
}

.native-form__eye.is-visible .eye-off {
    display: block;
}

.native-form__input:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(var(--brand-accent-rgb), 0.2);
}

.native-form__button {
    padding: 0.625rem 1rem;
    border-radius: 4px;
    border: none;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
    cursor: pointer;
    font: inherit;
}

.native-form__button:hover {
    filter: brightness(1.05);
}

.empty-state {
    text-align: center;
}

.empty-action {
    margin-top: 1.5rem;
}

.error-alert {
    margin-bottom: 1.25rem;
}

.request-id {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

#blazor-error-ui {
    background: var(--color-ink);
    color: #f7f7f7;
    bottom: 0;
    box-shadow: 0 -1px 10px rgba(16, 24, 40, 0.25);
    display: none;
    left: 0;
    padding: 0.75rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem 0.4rem;
    position: absolute;
    right: 1rem;
    top: 0.5rem;
}

#blazor-error-ui .dismiss:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Skip-to-main link: hidden until focused (keyboard users), then surfaces at the top
   of the viewport with high-contrast styling so screen-reader and keyboard users can
   jump past the app bar / drawer. */
.skip-to-main {
    background: var(--color-accent);
    color: #ffffff;
    font-weight: 600;
    left: 0.5rem;
    padding: 0.5rem 0.9rem;
    position: fixed;
    top: 0.5rem;
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform 120ms ease-out;
    z-index: 2000;
}

.skip-to-main:focus,
.skip-to-main:focus-visible {
    color: #ffffff;
    transform: translateY(0);
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
}

/* Don't render a focus ring when the main landmark receives focus
   programmatically via FocusOnNavigate — it's not an interactive element.
   Keyed on the id so the rule survives any MudMainContent tag swap (today the
   component renders a <main> element; in the future it might render a <div>
   with role=main, and we'd still want this rule to apply to #main-content). */
[id="main-content"]:focus {
    outline: none;
}

@keyframes rise {
    from {
        transform: translateY(12px);
        opacity: 0.6;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 900px) {
    /* No room for section links on a phone — keep a single clean row:
       logo, language flags, login. The sections are all reachable by
       scrolling anyway, so nothing important is lost. */
    .landing-app-bar__inner {
        gap: 0.5rem;
    }

    .landing-app-bar__inner > .mud-button-root:not(.landing-login-pill) {
        display: none;
    }

    .landing-login-pill {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Scale the logo down rather than letting flexbox crop it. */
    .landing-brand__logo {
        height: 30px;
    }

    .landing-hero {
        padding: 2rem 1.5rem;
    }

    /* "oprogramowania" at the default h1 size is wider than a phone
       screen — scale the hero headings down so no word overflows. */
    .landing-hero__title,
    .landing-hero2 h1,
    .landing-hero2 .mud-typography-h1 {
        font-size: clamp(1.7rem, 8vw, 2.6rem) !important;
        line-height: 1.2 !important;
        overflow-wrap: break-word;
    }

    .landing-hero__grid {
        grid-template-columns: 1fr;
    }

    .landing-hero__image {
        max-width: 240px;
    }

    .landing-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .health-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .user-meta {
        display: none;
    }

    .user-panel {
        gap: 0.4rem;
        margin-right: 0.5rem;
    }
}

/* Chip + badge text containment. Long status labels (e.g. "PendingSurcharge",
   "NeedsAttention") would otherwise overflow the pill boundary in tight columns.
   Cap at the parent width and ellipsize the inner label — MudBlazor's v7 chip
   uses white-space: nowrap internally so overflow is horizontal. Covers both
   MudChip (inline pills) and MudBadge (numeric overlay). */
.mud-chip {
    max-width: 100%;
    min-width: 0;
}

.mud-chip .mud-chip-label,
.mud-chip .mud-chip-content,
.mud-chip > span:not(.mud-icon-root) {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mud-badge .mud-badge {
    max-width: calc(100% - 4px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Closed-day date field in admin settings. Scoped to .mud-picker-inline (the
   input anchor) on purpose — the calendar popover paper must keep its natural
   ~310px width, otherwise the day grid gets clipped after Thursday. */
.mud-picker-inline.closed-day-picker {
    max-width: 170px;
}

/* Bullet list used inside the admin settings info guides. Slightly tighter
   than a raw <ul>, with code spans styled to hint "copy this literal". */
.settings-guide-list {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.settings-guide-list li {
    margin-bottom: 0.25rem;
}

.settings-guide-list code {
    padding: 0 0.3em;
    border-radius: 3px;
    background: rgba(16, 24, 40, 0.07);
    font-size: 0.85em;
}

/* ============================================================
   Landing structure in the portal's light palette:
   white background, gray shadows, red accents. Only the top app bar
   stays black (keeps the white TEST DRIVE logo readable).
   ============================================================ */
.landing-login-pill {
    background: #ffffff !important;
    color: #101114 !important;
    border-radius: 999px !important;
    padding: 0.35rem 1.4rem !important;
    font-weight: 600;
    margin-left: 0.5rem;
}

.landing-login-pill:hover {
    background: #e9ebee !important;
}

/* Hero: centered, oversized gradient heading. */
.landing-hero2 {
    text-align: center;
    padding: 4rem 1rem 3rem;
}

.landing-hero2__title {
    margin: 0.75rem auto 1rem;
    max-width: 900px;
    font-size: clamp(2.4rem, 6vw, 3.8rem);
    font-weight: 700;
    line-height: 1.12;
    background: linear-gradient(180deg, #16181d 20%, #767c85 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.landing-hero2__subtitle {
    color: var(--color-muted);
    max-width: 620px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.6;
}

.landing-hero2__actions {
    margin-top: 1.9rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.landing-pill {
    border-radius: 999px !important;
    padding: 0.5rem 1.7rem !important;
}

.landing-pill--ghost {
    border-color: rgba(16, 24, 40, 0.25) !important;
    color: var(--color-text) !important;
}

.landing-pill--ghost:hover {
    border-color: rgba(16, 24, 40, 0.5) !important;
    background: rgba(16, 24, 40, 0.04) !important;
}

/* Glow panel wrapping the showcase card — soft red spots on a light gray
   plate (teal/orange glows, in the portal palette). */
.landing-glow {
    border-radius: 28px;
    padding: clamp(1.5rem, 4vw, 3rem);
    background:
        radial-gradient(520px 340px at 6% 92%, rgba(var(--brand-accent-rgb), 0.28), transparent 65%),
        radial-gradient(520px 340px at 96% 42%, rgba(var(--brand-accent-rgb), 0.18), transparent 62%),
        radial-gradient(420px 280px at 60% 0%, rgba(255, 255, 255, 0.9), transparent 60%),
        #eceef1;
    overflow: hidden;
}

.landing-showcase {
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: 0 26px 52px rgba(16, 24, 40, 0.22);
    max-width: 880px;
    margin: 0 auto;
}

.landing-showcase__image {
    display: block;
    width: 100%;
    height: 380px;
    object-fit: cover;
}

/* Hero slideshow — same photo set and crossfade rhythm as the login aside. */
.landing-showcase__slides {
    position: relative;
    width: 100%;
    height: 380px;
}

.landing-showcase__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: auth-slide-fade 24s infinite;
}

.landing-showcase__slide:nth-child(1) { animation-delay: 0s; }
.landing-showcase__slide:nth-child(2) { animation-delay: 6s; }
.landing-showcase__slide:nth-child(3) { animation-delay: 12s; }
.landing-showcase__slide:nth-child(4) { animation-delay: 18s; }

@media (prefers-reduced-motion: reduce) {
    .landing-showcase__slide {
        animation: none;
    }
    .landing-showcase__slide:first-child {
        opacity: 1;
    }
}

.landing-showcase__quotes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

.landing-quote {
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    text-align: center;
}

.landing-quote__stars {
    color: var(--color-accent);
    letter-spacing: 2px;
    font-size: 0.8rem;
}

.landing-quote .mud-typography {
    color: var(--color-text);
    font-style: italic;
}

/* Landing sections: white surfaces from the base styles, with centered,
   oversized gradient headings. */
.landing-layout .landing-section {
    background: var(--color-surface);
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.07);
    margin-top: 4rem;
}

.landing-layout .landing-section__title {
    text-align: center;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    background: linear-gradient(180deg, #16181d 20%, #767c85 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.landing-layout .landing-section > .mud-typography-body2 {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .landing-showcase__image {
        height: 240px;
    }

    .landing-showcase__slides {
        height: 240px;
    }

    .landing-showcase__quotes {
        grid-template-columns: 1fr;
    }
}

/* Legal footer (landing + auth pages) */
.site-footer {
    margin-top: 4rem;
    padding: 1.25rem 1rem 1.5rem;
    border-top: 1px solid rgba(16, 24, 40, 0.08);
}

.site-footer__inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--color-text-secondary, #6b7280);
}

.site-footer__links a {
    color: inherit;
    text-decoration: none;
}

.site-footer__links a:hover {
    color: var(--color-primary, #d32f2f);
    text-decoration: underline;
}

.site-footer__sep {
    margin: 0 0.4rem;
}

.site-footer--compact {
    margin-top: 1.5rem;
    border-top: none;
    padding: 0;
}

/* Link columns above the legal line (landing variant only). */
.site-footer__columns {
    max-width: 1120px;
    margin: 0 auto 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
    padding-top: 0.5rem;
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.82rem;
}

.site-footer__col a {
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
}

.site-footer__col a:hover {
    color: var(--color-primary, #d32f2f);
    text-decoration: underline;
    opacity: 1;
}

.site-footer__col-title {
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
    margin-bottom: 0.2rem;
}

/* Subtle social icons in the legal line — muted by default, brand-red on hover. */
.site-footer__social {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.site-footer__social .mud-icon-button {
    color: rgba(16, 24, 40, 0.45);
}

.site-footer__social .mud-icon-button:hover {
    color: var(--color-primary, #d32f2f);
}

/* Cookie consent banner */
.cookie-banner {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    z-index: 1500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    max-width: min(720px, calc(100vw - 2rem));
    padding: 0.9rem 1.2rem;
    border-radius: 12px;
    background: #16181d;
    color: #f3f4f6;
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.35);
    font-size: 0.85rem;
}

.cookie-banner__text {
    flex: 1 1 320px;
    line-height: 1.4;
}

.cookie-banner__link {
    color: var(--brand-accent-light);
    margin-left: 0.35rem;
}

/* Long legal texts: keep readable line lengths */
.legal-page {
    max-width: 920px;
    margin: 2rem auto;
    /* Deter casual copying of the legal text (selection + drag disabled;
       copy/cut/context-menu are additionally blocked via inline handlers). */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.legal-page a {
    -webkit-user-drag: none;
}

/* ── Ticket wizard (two-step form) ─────────────────── */
.wizard-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wizard-step:hover {
    border-color: #d1d5db;
}

.wizard-step--active {
    border-color: var(--color-accent);
    box-shadow: 0 8px 22px rgba(var(--brand-accent-rgb), 0.12);
}

.wizard-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: 0 0 34px;
    font-weight: 700;
    background: #f3f4f6;
    color: #6b7280;
}

.wizard-step--active .wizard-step__num {
    background: var(--color-accent);
    color: #ffffff;
}

.wizard-step--done .wizard-step__num {
    background: #16181d;
    color: #ffffff;
}

.wizard-step__title {
    line-height: 1.2;
}

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

/* Large drag/drop-style upload panel */
.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 220px;
    padding: 1.5rem;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    background: #fafafa;
    text-align: center;
}

.upload-dropzone__icon {
    color: #9ca3af;
}

/* Segmented two-value toggle (file type, transmission, master/slave tool) */
.toggle-pair {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.toggle-pair__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 1;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.toggle-pair__btn:hover {
    border-color: #d1d5db;
}

.toggle-pair__btn--active {
    border-color: var(--color-accent);
    background: rgba(var(--brand-accent-rgb), 0.07);
    color: var(--color-accent-2);
}

/* Stage picker rows */
.stage-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stage-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stage-row:hover {
    border-color: #d1d5db;
}

.stage-row--selected {
    border-color: var(--color-accent);
    box-shadow: 0 6px 16px rgba(var(--brand-accent-rgb), 0.1);
}

.stage-row__body {
    flex: 1;
    min-width: 0;
}

.stage-row__note {
    display: block;
    margin-top: 0.35rem;
    color: #b45309;
}

/* Option checkbox label (names only; prices show in the estimated total) */
.option-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}

.option-label__name {
    font-weight: 500;
}

/* Sticky price summary card on step 2 */
.price-panel {
    position: sticky;
    top: 84px;
}

.price-panel__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    margin: -0.25rem -0.25rem 0.75rem;
    border-radius: 10px;
    background: #16181d;
    color: #ffffff;
}

.price-panel__header .mud-icon-root {
    color: var(--brand-accent-light);
}

.price-panel__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.2rem 0;
}

.price-panel__total {
    color: var(--color-accent);
    font-weight: 800;
}


/* Price matrix: hidden-service cells stay clickable (eye adornment) but the
   value itself looks muted. Opacity goes on the <input> only, so the eye icon
   keeps full contrast. */
.matrix-cell-hidden input {
    opacity: 0.4;
    text-decoration: line-through;
}

/* ============================================================
   DARK MODE: near-black navy background, blue
   primary actions, cyan-tinted borders and glows. Activated by
   the `theme-dark` class on <body> (dec-truck.js) together with
   the MudBlazor PaletteDark (DecTheme.cs). Rules below only cover
   what the Mud palette can't reach: our CSS variables and custom
   components with hard-coded light colors.
   ============================================================ */
body.theme-dark {
    --color-bg: #0a0d13;
    --color-surface: #101622;
    --color-surface-2: #0d1420;
    --color-border: rgba(56, 189, 248, 0.16);
    --color-text: #dbe4f0;
    --color-muted: #8b98ac;
    --color-accent: #3b82f6;
    --color-accent-2: #60a5fa;
    --color-ink: #0b1019;
    --color-shadow: rgba(34, 211, 238, 0.12);
    color: var(--color-text);
    background-color: var(--color-bg);
    background-image:
        radial-gradient(circle at 15% 0%, rgba(56, 189, 248, 0.07), transparent 40%),
        linear-gradient(180deg, #0b0f16 0%, #0a0d13 55%, #090c11 100%);
}

body.theme-dark ::selection {
    background: rgba(56, 189, 248, 0.35);
}

/* Thin blue top bar with a cyan glow instead of the red 3px stripe. */
body.theme-dark .app-bar {
    background: rgba(11, 16, 25, 0.96);
    border-bottom: 2px solid #38bdf8;
    box-shadow: 0 2px 18px rgba(56, 189, 248, 0.25);
}

body.theme-dark .app-drawer {
    border-right: 1px solid rgba(56, 189, 248, 0.12);
}

/* Sidebar navigation: red hover/active becomes blue in dark mode. */
body.theme-dark .app-nav .mud-nav-link {
    color: #aebacd;
}

body.theme-dark .app-nav .mud-nav-link:hover {
    background: rgba(37, 99, 235, 0.20);
}

body.theme-dark .app-nav .mud-nav-link.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.85), rgba(37, 99, 235, 0.40));
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.30);
}

body.theme-dark .nav-group__header {
    color: #8fa0b8;
}

body.theme-dark .nav-group__header:hover,
body.theme-dark .nav-group__header:focus-visible {
    background: rgba(37, 99, 235, 0.16);
    color: #ffffff;
}

body.theme-dark .nav-group--open .nav-group__header {
    color: #aebacd;
}

body.theme-dark .nav-group__items {
    border-left-color: rgba(56, 189, 248, 0.16);
}

/* Cards: swap gray drop-shadows for a soft cyan glow. */
body.theme-dark .stat-card,
body.theme-dark .panel-card,
body.theme-dark .data-table {
    box-shadow: 0 0 22px rgba(34, 211, 238, 0.08), 0 8px 24px rgba(0, 0, 0, 0.45);
}

body.theme-dark .stat-card {
    border-top-color: #38bdf8;
}

body.theme-dark .stat-card--gray {
    background: #131b2a;
    border: 1px solid rgba(56, 189, 248, 0.18);
}

body.theme-dark .stat-card--red {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 0 18px rgba(37, 99, 235, 0.40);
}

body.theme-dark .stat-card--dark {
    background: linear-gradient(150deg, #101622, #0b1019);
    border: 1px solid rgba(56, 189, 248, 0.22);
}

body.theme-dark .file-tile.stat-card--gray .file-tile__count {
    background: rgba(56, 189, 248, 0.15);
    color: var(--color-text);
    box-shadow: none;
}

body.theme-dark .files-card__icon,
body.theme-dark .action-card__icon,
body.theme-dark .vehicle-card__icon {
    background: rgba(37, 99, 235, 0.18);
    color: #7dd3fc;
}

body.theme-dark .action-card--accent {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    box-shadow: 0 0 24px rgba(37, 99, 235, 0.35);
}

body.theme-dark .promo-card__badge {
    background: rgba(56, 189, 248, 0.14);
    color: #7dd3fc;
}

body.theme-dark .promo-card__chart {
    background: var(--color-surface-2);
}

/* Chart axis labels/legends render as SVG text — Mud palette doesn't recolor them. */
body.theme-dark .mud-chart text {
    fill: #8b98ac;
}

body.theme-dark .mud-chart-legend .mud-typography {
    color: var(--color-text);
}

/* Ticket chat */
body.theme-dark .chat-window {
    background: #0d1420;
    border-color: rgba(56, 189, 248, 0.14);
}

body.theme-dark .chat-msg__bubble {
    background: #131b2a;
    border-color: rgba(56, 189, 248, 0.16);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

body.theme-dark .chat-msg--own .chat-msg__bubble {
    background: rgba(37, 99, 235, 0.22);
    border-color: rgba(56, 189, 248, 0.35);
}

/* Order progress bar: neutral dark for pending steps (active/done use Mud vars). */
body.theme-dark .ticket-progress__dot {
    background: #1a2230;
    color: #64748b;
}

body.theme-dark .ticket-progress__label {
    color: #64748b;
}

body.theme-dark .ticket-progress__bar {
    background: #1a2230;
}

/* Matrix stream in the dark theme: brighter green digits with a soft glow. */
body.theme-dark .ticket-progress__bar--flow {
    background: rgba(74, 222, 128, 0.2);
}

body.theme-dark .ticket-progress__bits-track > span {
    color: #4ade80;
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.75);
}

/* Ticket-create wizard */
body.theme-dark .wizard-step {
    background: var(--color-surface);
    border-color: rgba(56, 189, 248, 0.16);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

body.theme-dark .wizard-step:hover {
    border-color: rgba(56, 189, 248, 0.35);
}

body.theme-dark .wizard-step--active {
    border-color: #38bdf8;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.20);
}

body.theme-dark .wizard-step__num {
    background: #1a2230;
    color: #8b98ac;
}

body.theme-dark .wizard-step--active .wizard-step__num {
    background: #2563eb;
    color: #ffffff;
}

body.theme-dark .wizard-step--done .wizard-step__num {
    background: #38bdf8;
    color: #06121f;
}

body.theme-dark .toggle-pair__btn {
    background: var(--color-surface-2);
    border-color: rgba(56, 189, 248, 0.16);
    color: #aebacd;
}

body.theme-dark .toggle-pair__btn:hover {
    border-color: rgba(56, 189, 248, 0.35);
}

body.theme-dark .toggle-pair__btn--active {
    border-color: #38bdf8;
    background: rgba(37, 99, 235, 0.22);
    color: #7dd3fc;
}

body.theme-dark .stage-row {
    background: var(--color-surface);
    border-color: rgba(56, 189, 248, 0.16);
}

body.theme-dark .stage-row:hover {
    border-color: rgba(56, 189, 248, 0.35);
}

body.theme-dark .stage-row--selected {
    border-color: #38bdf8;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.18);
}

body.theme-dark .upload-dropzone {
    background: #0d1420;
    border-color: rgba(56, 189, 248, 0.28);
}

body.theme-dark .upload-dropzone__icon {
    color: #4a5a72;
}

body.theme-dark .file-upload__button {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
}

body.theme-dark .dashboard-banner__btn:hover {
    background: #1d4ed8;
}

/* Table row hover: red tint reads muddy on navy — use the blue accent. */
body.theme-dark .data-table .mud-table-row:hover {
    background: rgba(37, 99, 235, 0.10);
}

/* Price summary panel in the wizard. */
body.theme-dark .price-panel__header {
    background: #0b1019;
    border: 1px solid rgba(56, 189, 248, 0.22);
}

body.theme-dark .price-panel__header .mud-icon-root {
    color: #38bdf8;
}

body.theme-dark .price-panel__total {
    color: #60a5fa;
}

body.theme-dark .intake-card__price {
    color: #60a5fa;
}

body.theme-dark .dtc-code {
    background: #1a2230;
    color: #7dd3fc;
}

/* Login/register (native form controls that don't use Mud palette vars). */
body.theme-dark .native-check__mark {
    background: #0d1420;
    border-color: rgba(139, 152, 172, 0.5);
}

body.theme-dark .native-check__box:checked + .native-check__label .native-check__mark {
    background: #2563eb;
    border-color: #2563eb;
}

body.theme-dark .native-check__box:checked ~ .native-form__company {
    background: #0d1420;
    border-color: rgba(56, 189, 248, 0.18);
}

body.theme-dark .native-form__input:focus {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

body.theme-dark .auth-aside::after {
    background:
        linear-gradient(200deg, rgba(56, 189, 248, 0.18), transparent 45%),
        linear-gradient(10deg, rgba(6, 10, 16, 0.72), rgba(6, 10, 16, 0.25) 55%);
}

/* ── Quick-search hero (order wizard) ─────────────────── */
.quick-search-hero {
    padding: 0.9rem 1rem 1rem;
    border-radius: 12px;
    border: 1.5px solid rgba(var(--brand-accent-rgb), 0.45);
    background: linear-gradient(135deg, rgba(var(--brand-accent-rgb), 0.06), rgba(var(--brand-accent-rgb), 0.015));
    box-shadow: 0 6px 18px rgba(var(--brand-accent-rgb), 0.08);
}

.quick-search-hero__head {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.quick-search-hero__icon {
    color: var(--color-accent);
    margin-top: 2px;
}

.quick-search-hero__title {
    font-weight: 700;
    line-height: 1.2;
}

/* White field on the tinted background so the input clearly reads as "type here". */
.quick-search-hero__input .mud-input-control-input-container .mud-input {
    background: var(--color-surface, #ffffff);
    border-radius: 8px;
}

body.theme-dark .quick-search-hero {
    border-color: rgba(56, 189, 248, 0.40);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.04));
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.10);
}

/* ── Floating help widget (customers) ─────────────────── */
.support-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1250;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.15rem;
    border: none;
    border-radius: 999px;
    background: var(--color-accent, #d32f2f);
    color: #ffffff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.support-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.34);
}

/* Transparent click-catcher behind the panel (click outside = close). */
.support-overlay {
    position: fixed;
    inset: 0;
    z-index: 1249;
}

.support-panel {
    position: fixed;
    right: 1.25rem;
    bottom: 4.9rem;
    z-index: 1251;
    width: 340px;
    max-width: calc(100vw - 2rem);
    border-radius: 16px;
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #16181d);
    border: 1px solid var(--color-border, #e2e5ea);
    box-shadow: 0 18px 44px rgba(16, 24, 40, 0.30);
    overflow: hidden;
    animation: support-pop 0.16s ease-out;
}

@keyframes support-pop {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.support-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.6rem;
}

.support-panel__title {
    font-weight: 800;
    font-size: 1rem;
}

.support-panel__subtitle {
    font-size: 0.8rem;
    color: var(--color-muted, #5f6672);
    margin-top: 2px;
}

.support-panel__close {
    display: flex;
    border: none;
    background: transparent;
    color: var(--color-muted, #5f6672);
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 8px;
}

.support-panel__close:hover {
    color: var(--color-text, #16181d);
}

.support-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 1rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(22, 163, 74, 0.09);
    color: #15803d;
}

.support-status__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 9px;
    background: #22c55e;
    animation: support-pulse 1.8s ease-out infinite;
}

@keyframes support-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.support-status--offline {
    background: rgba(107, 114, 128, 0.12);
    color: var(--color-muted, #5f6672);
}

.support-status--offline .support-status__dot {
    background: #9ca3af;
    animation: none;
}

.support-action {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border: none;
    border-top: 1px solid var(--color-border, #e2e5ea);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.support-action:hover {
    background: rgba(16, 24, 40, 0.04);
    text-decoration: none;
    color: inherit;
}

.support-action__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex: 0 0 40px;
}

.support-action__icon--wa {
    background: rgba(37, 211, 102, 0.16);
    color: #1faa53;
}

.support-action__icon--ticket {
    background: rgba(var(--brand-accent-rgb), 0.12);
    color: var(--color-accent);
}

.support-action__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.support-action__label {
    font-weight: 700;
    font-size: 0.88rem;
}

.support-action__caption {
    font-size: 0.76rem;
    color: var(--color-muted, #5f6672);
    line-height: 1.3;
}

@media (max-width: 640px) {
    .support-fab__label {
        display: none;
    }

    .support-fab {
        padding: 0.85rem;
    }
}

body.theme-dark .support-action:hover {
    background: rgba(56, 189, 248, 0.08);
}

body.theme-dark .support-status {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
}

/* The marketing landing page keeps its approved light look regardless of the
   portal theme — re-pin the light palette variables and body backdrop here. */
body.theme-dark .landing-layout {
    --color-bg: #f4f5f7;
    --color-surface: #ffffff;
    --color-surface-2: #f7f8fa;
    --color-border: #e2e5ea;
    --color-text: #16181d;
    --color-muted: #5f6672;
    --color-accent: var(--brand-accent);
    --color-accent-2: var(--brand-accent-2);
    --color-ink: #101114;
    --color-shadow: rgba(16, 24, 40, 0.10);
    color: var(--color-text);
    background:
        radial-gradient(circle at 15% 0%, rgba(var(--brand-accent-rgb), 0.05), transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f6f7f9 55%, #eef0f3 100%);
}