:root {
    --color-bg: #0b0c0f;
    --color-surface: #14161a;
    --color-surface-2: #1a1e24;
    --color-border: #272b33;
    --color-text: #e5e5e5;
    --color-muted: #9aa0a6;
    --color-accent: #ff8a00;
    --color-accent-2: #ffb347;
    --color-shadow: rgba(0, 0, 0, 0.4);
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Barlow", system-ui, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255, 138, 0, 0.12), transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(255, 255, 255, 0.06), transparent 40%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, rgba(16, 17, 20, 0.96) 0%, rgba(11, 12, 15, 0.98) 55%, rgba(10, 11, 14, 1) 100%);
    background-attachment: fixed;
}

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

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

::selection {
    background: rgba(255, 138, 0, 0.35);
}

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

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

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

.app-bar {
    border-bottom: 1px solid var(--color-border);
    background: rgba(16, 17, 20, 0.92);
    backdrop-filter: blur(18px);
}

.landing-app-bar {
    background: rgba(10, 11, 14, 0.6);
    backdrop-filter: blur(22px);
    border-bottom: 1px solid rgba(39, 43, 51, 0.7);
}

.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;
}

.landing-brand__logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

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

.brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
}

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

.status-chip {
    box-shadow: 0 0 20px rgba(255, 138, 0, 0.35);
}

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

.user-avatar {
    background: rgba(255, 138, 0, 0.25);
    color: #fff;
    font-weight: 600;
}

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

.app-drawer {
    border-right: 1px solid var(--color-border);
}

.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;
}

.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 var(--color-border);
    border-radius: 14px;
    background: rgba(20, 22, 26, 0.6);
}

.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 rgba(255, 138, 0, 0.5);
    background: linear-gradient(135deg, rgba(255, 138, 0, 0.85), rgba(255, 138, 0, 0.45));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(255, 138, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.file-upload__button:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 138, 0, 0.8);
    box-shadow: 0 14px 26px rgba(255, 138, 0, 0.32);
}

.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: var(--color-text);
    transition: all 0.2s ease;
}

.app-nav .mud-nav-link:hover {
    background: rgba(255, 138, 0, 0.14);
    color: #fff;
}

.app-nav .mud-nav-link.active {
    background: linear-gradient(90deg, rgba(255, 138, 0, 0.28), rgba(255, 138, 0, 0.08));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 138, 0, 0.35);
}

.landing-hero {
    padding: 3rem;
    background: linear-gradient(135deg, rgba(255, 138, 0, 0.14), rgba(255, 138, 0, 0)),
        radial-gradient(circle at right, rgba(255, 255, 255, 0.08), transparent 45%),
        var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45);
    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;
}

.landing-hero__logo {
    display: flex;
    justify-content: center;
}

.landing-hero__image {
    max-width: 320px;
    width: 100%;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6));
}

.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-stat,
   .landing-offer__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: rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.landing-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 138, 0, 0.45);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.32);
}

.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 16px 28px rgba(0, 0, 0, 0.3);
}

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

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

.landing-offer__card {
    padding: 1.5rem;
    display: grid;
    gap: 0.5rem;
}

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

.landing-stat {
    padding: 1.25rem;
    text-align: center;
}

.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-stats-section {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}

.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(255, 138, 0, 0.18);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Generic section container for Supported + FAQ blocks. Mirrors landing-process
   / landing-offer 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: rgba(255, 255, 255, 0.02);
}

.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(255, 138, 0, 0.14), rgba(255, 138, 0, 0.04));
    border-color: rgba(255, 138, 0, 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: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--color-border);
}

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

.landing-cta {
    margin-top: 3rem;
    padding: 2.25rem;
    border-radius: 22px;
    border: 1px solid var(--color-border);
    background: linear-gradient(120deg, rgba(255, 138, 0, 0.18), rgba(255, 138, 0, 0));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.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-2);
    border: 1px solid var(--color-border);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.32);
    animation: rise 0.7s ease-out;
}

.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 16px 30px rgba(0, 0, 0, 0.3);
}

.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: rgba(255, 255, 255, 0.02);
}

.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);
}

.data-table {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.data-table .mud-table-head {
    background: rgba(255, 255, 255, 0.03);
}

.data-table .mud-table-row:hover {
    background: rgba(255, 138, 0, 0.08);
}

/* 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;
    }

    .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: rgba(255, 255, 255, 0.02);
    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: rgba(255, 255, 255, 0.02);
}

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

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

.login-grid {
    margin-top: 1.5rem;
}

.login-card {
    height: 100%;
}

.login-intro {
    height: 100%;
}

.login-feature {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0.75rem;
    align-items: center;
}

.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;
}

.native-form__input:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(94, 53, 177, 0.25);
}

.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: #1d1f24;
    color: #f7f7f7;
    bottom: 0;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.4);
    display: none;
    left: 0;
    padding: 0.75rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.65rem;
}

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

@media (max-width: 900px) {
    .landing-app-bar__inner {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

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

    .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;
}

/* 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(255, 255, 255, 0.08);
    font-size: 0.85em;
}