/* ---------------------------------------------------------------------------
   XRoad base. All styling lives in this file - no component-scoped CSS.
   --------------------------------------------------------------------------- */
:root {
    --xr-bg: #0b0f14;
    --xr-surface: #111820;
    --xr-panel: #151d27;
    --xr-panel-raised: #1b2531;
    --xr-ink: #e6edf5;
    --xr-muted: #8b99ab;
    --xr-border: #263242;
    --xr-accent: #3a7d9b;
    --xr-accent-strong: #4d9fc2;
    --xr-accent-soft: rgba(77, 159, 194, 0.14);
    --xr-error: #ff8f85;
    --xr-error-bg: rgba(180, 35, 24, 0.16);
    --xr-info: #7cb9ff;
    --xr-info-bg: rgba(23, 92, 211, 0.16);
    --xr-success: #3fb27f;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--xr-ink);
    background: var(--xr-bg);
    color-scheme: dark;
}

h1:focus {
    outline: none;
}

/* --- Generic page shell --------------------------------------------------- */
.page {
    max-width: 68rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

.page__lead,
.page__muted {
    color: var(--xr-muted);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--xr-panel);
    border: 1px solid var(--xr-border);
    border-radius: 12px;
    overflow: hidden;
}

    .data-table th,
    .data-table td {
        text-align: left;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--xr-border);
        font-size: 0.95rem;
    }

    .data-table th {
        font-weight: 600;
        color: var(--xr-muted);
        background: var(--xr-panel-raised);
    }

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

.data-table__actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* --- Auth page: 70 / 30 split -------------------------------------------- */
.auth-page {
    display: grid;
    grid-template-columns: 70% 30%;
    min-height: 100vh;
    background: var(--xr-bg);
}

.auth-page__visual {
    position: relative;
    overflow: hidden;
}

.auth-page__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xr-panel);
    padding: 2.5rem 2rem;
    overflow-y: auto;
}

/* --- Carousel ------------------------------------------------------------- */
.auth-carousel {
    position: absolute;
    inset: 0;
}

.auth-carousel__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.1s ease, transform 6s ease;
    pointer-events: none;
}

.auth-carousel__slide--active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.auth-carousel__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.05) 55%);
}

.auth-carousel__caption {
    position: absolute;
    left: 3.5rem;
    right: 3.5rem;
    bottom: 5rem;
    color: #fff;
}

    .auth-carousel__caption h2 {
        margin: 0 0 0.5rem;
        font-size: 2.25rem;
        font-weight: 600;
        letter-spacing: -0.02em;
    }

    .auth-carousel__caption p {
        margin: 0;
        font-size: 1.05rem;
        color: rgba(255, 255, 255, 0.82);
        max-width: 34rem;
    }

.auth-carousel__brand {
    position: absolute;
    top: 2.25rem;
    left: 3.5rem;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
}

.auth-carousel__dots {
    position: absolute;
    left: 3.5rem;
    bottom: 2.5rem;
    display: flex;
    gap: 0.5rem;
}

.auth-carousel__dot {
    width: 2rem;
    height: 0.25rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, width 0.3s ease;
}

.auth-carousel__dot--active {
    background: #fff;
    width: 3rem;
}

/* --- Auth panel ----------------------------------------------------------- */
.auth-panel {
    width: 100%;
    max-width: 24rem;
    animation: auth-fade-in 0.35s ease both;
}

@keyframes auth-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.auth-panel__header {
    margin-bottom: 1.75rem;
}

.auth-panel__title {
    margin: 0 0 0.35rem;
    font-size: 1.85rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.auth-panel__lead {
    margin: 0;
    color: var(--xr-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.auth-panel__state {
    text-align: center;
}

.auth-panel__badge {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #fff;
    background: var(--xr-success);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .auth-field label {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--xr-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

.auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.9rem;
    font-size: 0.95rem;
    color: var(--xr-ink);
    background: var(--xr-panel-raised);
    border: 1px solid var(--xr-border);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .auth-input:focus {
        border-color: var(--xr-accent-strong);
        box-shadow: 0 0 0 3px var(--xr-accent-soft);
    }

    .auth-input::placeholder {
        color: #5f6d7e;
    }

.auth-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--xr-muted);
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem 1rem;
    margin-top: 0.35rem;
    font-size: 0.98rem;
    font-weight: 600;
    color: #fff;
    background: var(--xr-accent);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}

    .auth-btn:hover:not(:disabled) {
        background: var(--xr-accent-strong);
        color: #061019;
    }

    .auth-btn:active:not(:disabled) {
        transform: translateY(1px);
    }

    .auth-btn:disabled {
        opacity: 0.65;
        cursor: progress;
    }

.auth-btn--small {
    width: auto;
    margin-top: 0;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
}

.auth-btn--ghost {
    background: var(--xr-panel-raised);
    color: var(--xr-error);
    border-color: var(--xr-border);
}

    .auth-btn--ghost:hover:not(:disabled) {
        background: var(--xr-error-bg);
    }

.auth-switch {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--xr-muted);
    text-align: center;
}

.auth-link {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.25rem;
    font: inherit;
    font-weight: 600;
    color: var(--xr-accent);
    cursor: pointer;
    text-decoration: underline;
}

.auth-alert {
    margin-bottom: 1.1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.4;
    animation: auth-fade-in 0.25s ease both;
}

.auth-alert--error {
    color: var(--xr-error);
    background: var(--xr-error-bg);
    border: 1px solid rgba(255, 143, 133, 0.35);
}

.auth-alert--info {
    color: var(--xr-info);
    background: var(--xr-info-bg);
    border: 1px solid rgba(124, 185, 255, 0.35);
}

.auth-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin 0.7s linear infinite;
}

@keyframes auth-spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
    .auth-page {
        grid-template-columns: 1fr;
        grid-template-rows: 32vh auto;
        min-height: 100vh;
    }

    .auth-carousel__caption {
        left: 1.5rem;
        right: 1.5rem;
        bottom: 2.5rem;
    }

        .auth-carousel__caption h2 {
            font-size: 1.5rem;
        }

        .auth-carousel__caption p {
            font-size: 0.9rem;
        }

    .auth-carousel__brand,
    .auth-carousel__dots {
        left: 1.5rem;
    }

    .auth-carousel__dots {
        bottom: 1rem;
    }
}

@media (max-width: 600px) {
    .auth-page {
        grid-template-rows: 22vh auto;
    }

    .auth-page__panel {
        padding: 2rem 1.25rem;
    }

    .auth-carousel__caption {
        display: none;
    }

    .data-table__actions {
        flex-direction: column;
    }
}

/* --- Framework defaults --------------------------------------------------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: var(--xr-error);
    font-size: 0.82rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* --- Admin shell ---------------------------------------------------------- */
.admin-shell {
    display: flex;
    min-height: 100vh;
    background: var(--xr-bg);
}

.admin-shell__sidebar {
    width: 16.5rem;
    flex: 0 0 16.5rem;
    background: var(--xr-surface);
    border-right: 1px solid var(--xr-border);
}

.admin-shell__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-shell__topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 3.75rem;
    padding: 0 1.5rem;
    background: var(--xr-surface);
    border-bottom: 1px solid var(--xr-border);
}

.admin-shell__title {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--xr-muted);
}

.admin-shell__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--xr-ink);
    background: var(--xr-panel-raised);
    border: 1px solid var(--xr-border);
    border-radius: 9px;
    cursor: pointer;
}

.admin-shell__content {
    flex: 1 1 auto;
    overflow-x: hidden;
}

/* --- Admin navigation ----------------------------------------------------- */
.admin-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem 0.9rem 1rem;
}

.admin-nav__brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.25rem 0.6rem 1.25rem;
    color: var(--xr-ink);
}

.admin-nav__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--xr-accent), var(--xr-accent-strong));
    color: #06121a;
}

.admin-nav__brand-text {
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.admin-nav__section {
    padding: 0 0.6rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--xr-muted);
}

.admin-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.admin-nav__link,
.admin-nav__signout {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.62rem 0.75rem;
    border-radius: 10px;
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--xr-muted);
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}

    .admin-nav__link:hover,
    .admin-nav__signout:hover {
        background: var(--xr-panel-raised);
        color: var(--xr-ink);
    }

    .admin-nav__link.active {
        background: var(--xr-accent-soft);
        color: var(--xr-accent-strong);
        box-shadow: inset 3px 0 0 var(--xr-accent-strong);
    }

.admin-nav__icon {
    width: 1.1rem;
    text-align: center;
}

.admin-nav__footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--xr-border);
}

.admin-nav__user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem 0.75rem;
    color: var(--xr-ink);
    font-size: 0.9rem;
}

.admin-nav__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--xr-panel-raised);
    color: var(--xr-muted);
    font-size: 0.8rem;
}

.admin-nav__user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Page header ---------------------------------------------------------- */
.page__header {
    margin-bottom: 1.75rem;
}

    .page__header h1 {
        margin: 0 0 0.35rem;
        font-size: 1.7rem;
        font-weight: 650;
        letter-spacing: -0.02em;
    }

/* --- Stat tiles ----------------------------------------------------------- */
.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height: 100%;
    padding: 1.4rem 1.5rem;
    background: linear-gradient(180deg, var(--xr-panel-raised), var(--xr-panel));
    border: 1px solid var(--xr-border);
    border-radius: 14px;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

    .stat-tile:hover {
        transform: translateY(-2px);
        border-color: var(--xr-accent);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    }

.stat-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.65rem;
    border-radius: 12px;
    background: var(--xr-accent-soft);
    color: var(--xr-accent-strong);
    font-size: 1.15rem;
}

.stat-tile__label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--xr-muted);
}

.stat-tile__value {
    font-size: 2.35rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--xr-ink);
}

.stat-tile__value--loading {
    color: var(--xr-muted);
}

.stat-tile__hint {
    font-size: 0.85rem;
    color: var(--xr-muted);
}

@media (max-width: 991.98px) {
    .admin-shell__sidebar {
        width: 16.5rem;
        flex: 0 0 auto;
    }

    .page {
        padding: 1.5rem 1rem;
    }
}

/* Account status badges on the user roster. The text steps are the status
   palette's, chosen to clear 4.5:1 on the dark panels. */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.status-badge--active {
    background: rgba(63, 178, 127, 0.14);
    color: #3fb27f;
}

.status-badge--pending {
    background: rgba(250, 178, 25, 0.14);
    color: #fab219;
}

.status-badge--deleted {
    background: rgba(208, 59, 59, 0.16);
    color: #ff8f85;
}

/* ===========================================================================
   User administration & analytics
   =========================================================================== */
:root {
    --xr-ink-2: #c3cedb;
    --xr-good: #3fb27f;
    --xr-warning: #fab219;
    --xr-critical: #ff8f85;

    /* Chart roles. Categorical slots 1-3 are the dark steps of the documented
       palette, validated against --xr-panel (#151d27): lightness band, chroma
       floor, CVD separation (worst adjacent dE 9.4), normal-vision floor and
       3:1 contrast all pass. Slots follow the series, never its rank. */
    --viz-series-1: #3987e5;
    --viz-series-2: #d95926;
    --viz-series-3: #199e70;
    --viz-grid: #263242;
    --viz-axis: #3a4a5e;
    --viz-surface: var(--xr-panel);
}

/* --- Page layout ---------------------------------------------------------- */
.page--wide {
    max-width: 90rem;
}

.page__header--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

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

.page__count {
    color: var(--xr-muted);
    font-size: 0.85rem;
}

.xr-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--xr-muted);
    font-size: 0.9rem;
    text-decoration: none;
}

    .xr-back:hover {
        color: var(--xr-accent-strong);
    }

.xr-section {
    margin-top: 1.75rem;
}

.xr-section__title {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.xr-section__lead {
    margin: -0.35rem 0 1rem;
    color: var(--xr-muted);
    font-size: 0.9rem;
}

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

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

.xr-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.xr-grid--overview {
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.xr-grid--vehicle {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

/* --- Cards ---------------------------------------------------------------- */
.xr-card {
    padding: 1.25rem 1.35rem;
    background: var(--xr-panel);
    border: 1px solid var(--xr-border);
    border-radius: 14px;
    min-width: 0;
}

.xr-card--critical {
    border-color: rgba(255, 143, 133, 0.35);
}

.xr-card--warning {
    border-color: rgba(250, 178, 25, 0.35);
}

.xr-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.xr-card__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
}

    .xr-card__title i {
        color: var(--xr-muted);
    }

.xr-card__subtitle {
    margin: 0.2rem 0 0;
    color: var(--xr-muted);
    font-size: 0.84rem;
}

.xr-card__link {
    color: var(--xr-accent-strong);
    font-size: 0.85rem;
    text-decoration: none;
}

    .xr-card__link:hover {
        text-decoration: underline;
    }

.xr-callout {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.75rem;
    padding: 1.1rem 1.35rem;
    background: var(--xr-accent-soft);
    border: 1px solid rgba(77, 159, 194, 0.3);
    border-radius: 14px;
    flex-wrap: wrap;
}

    .xr-callout > div {
        flex: 1 1 16rem;
    }

    .xr-callout p {
        margin: 0;
    }

.xr-callout__icon {
    font-size: 1.5rem;
    color: var(--xr-accent-strong);
}

.xr-callout__title {
    font-weight: 650;
}

/* --- Stat tiles: links and tones ------------------------------------------ */
.stat-tile__value {
    font-size: clamp(1.45rem, 1.05rem + 1vw, 2.2rem);
    overflow-wrap: anywhere;
}

.stat-tile--link {
    color: inherit;
    text-decoration: none;
}

    .stat-tile--link:hover {
        color: inherit;
    }

    .stat-tile--link:focus-visible {
        outline: 2px solid var(--xr-accent-strong);
        outline-offset: 2px;
    }

.stat-tile__go {
    margin-left: 0.25rem;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.stat-tile--link:hover .stat-tile__go,
.stat-tile--link:focus-visible .stat-tile__go {
    opacity: 1;
    transform: translateX(2px);
}

.stat-tile__icon--good {
    background: rgba(63, 178, 127, 0.14);
    color: var(--xr-good);
}

.stat-tile__icon--info {
    background: var(--xr-info-bg);
    color: var(--xr-info);
}

.stat-tile__icon--warning {
    background: rgba(250, 178, 25, 0.14);
    color: var(--xr-warning);
}

.stat-tile__icon--critical {
    background: rgba(208, 59, 59, 0.16);
    color: var(--xr-critical);
}

/* --- Badges: always an icon and a word ------------------------------------ */
.xr-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.16rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

    .xr-badge i {
        font-size: 0.72rem;
    }

.xr-badge--good {
    color: var(--xr-good);
    background: rgba(63, 178, 127, 0.12);
    border-color: rgba(63, 178, 127, 0.28);
}

.xr-badge--info {
    color: var(--xr-info);
    background: rgba(124, 185, 255, 0.12);
    border-color: rgba(124, 185, 255, 0.28);
}

.xr-badge--warning {
    color: var(--xr-warning);
    background: rgba(250, 178, 25, 0.12);
    border-color: rgba(250, 178, 25, 0.28);
}

.xr-badge--critical {
    color: var(--xr-critical);
    background: rgba(208, 59, 59, 0.16);
    border-color: rgba(255, 143, 133, 0.3);
}

.xr-badge--neutral {
    color: #b6c2d1;
    background: rgba(139, 153, 171, 0.12);
    border-color: rgba(139, 153, 171, 0.24);
}

/* --- Buttons -------------------------------------------------------------- */
.xr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--xr-ink);
    background: var(--xr-panel-raised);
    border: 1px solid var(--xr-border);
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

    .xr-btn:hover:not(:disabled) {
        border-color: var(--xr-accent);
        color: var(--xr-ink);
    }

    .xr-btn:focus-visible {
        outline: 2px solid var(--xr-accent-strong);
        outline-offset: 2px;
    }

    .xr-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

.xr-btn--primary {
    color: #fff;
    background: var(--xr-accent);
    border-color: transparent;
}

    .xr-btn--primary:hover:not(:disabled) {
        background: var(--xr-accent-strong);
        color: #061019;
    }

.xr-btn--ghost {
    background: transparent;
}

.xr-btn--danger {
    color: #fff;
    background: #b42a2a;
    border-color: transparent;
}

    .xr-btn--danger:hover:not(:disabled) {
        background: #d03b3b;
        color: #fff;
    }

.xr-btn--danger-outline {
    color: var(--xr-critical);
    background: transparent;
    border-color: rgba(255, 143, 133, 0.4);
}

    .xr-btn--danger-outline:hover:not(:disabled) {
        color: var(--xr-critical);
        background: var(--xr-error-bg);
        border-color: var(--xr-critical);
    }

.xr-btn--link {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    color: var(--xr-accent-strong);
    background: none;
    border-color: transparent;
}

    .xr-btn--link:hover:not(:disabled) {
        border-color: transparent;
        color: var(--xr-ink);
    }

.xr-btn--sm {
    padding: 0.38rem 0.7rem;
    font-size: 0.82rem;
}

.xr-btn--icon {
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
}

/* --- Forms and filters ---------------------------------------------------- */
.xr-filters {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.xr-filters__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.xr-filter {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
}

.xr-filter__label,
.xr-field__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--xr-muted);
}

.xr-input,
.xr-select {
    min-height: 2.35rem;
    padding: 0.45rem 0.75rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--xr-ink);
    background: var(--xr-panel-raised);
    border: 1px solid var(--xr-border);
    border-radius: 10px;
    outline: none;
    color-scheme: dark;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

    .xr-input:focus,
    .xr-select:focus {
        border-color: var(--xr-accent-strong);
        box-shadow: 0 0 0 3px var(--xr-accent-soft);
    }

    .xr-input:disabled,
    .xr-select:disabled {
        opacity: 0.6;
    }

.xr-select--sm {
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.82rem;
}

.xr-input--area {
    width: 100%;
    resize: vertical;
}

.xr-input--year {
    width: 7rem;
}

.xr-search {
    position: relative;
    flex: 1 1 20rem;
    max-width: 30rem;
}

.xr-search__icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--xr-muted);
    pointer-events: none;
}

.xr-search__input {
    width: 100%;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
}

    .xr-search__input::-webkit-search-cancel-button {
        display: none;
    }

.xr-search__clear {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.8rem;
    height: 1.8rem;
    color: var(--xr-muted);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

    .xr-search__clear:hover {
        color: var(--xr-ink);
        background: var(--xr-panel);
    }

.xr-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.xr-field__optional {
    margin-left: 0.35rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.xr-field__hint {
    font-size: 0.78rem;
    color: var(--xr-muted);
}

.xr-field__error {
    margin: -0.4rem 0 0.9rem;
    font-size: 0.84rem;
    color: var(--xr-critical);
}

.xr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: -0.25rem 0 1rem;
    padding: 0;
    list-style: none;
}

.xr-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.8rem;
    color: var(--xr-ink-2);
    background: var(--xr-accent-soft);
    border: 1px solid rgba(77, 159, 194, 0.3);
    border-radius: 999px;
}

    .xr-chip i {
        color: var(--xr-accent-strong);
        font-size: 0.72rem;
    }

/* --- Segmented control ---------------------------------------------------- */
.xr-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--xr-surface);
    border: 1px solid var(--xr-border);
    border-radius: 10px;
}

.xr-segmented__option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.75rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--xr-muted);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

    .xr-segmented__option:hover {
        color: var(--xr-ink);
        background: rgba(255, 255, 255, 0.04);
    }

    .xr-segmented__option[aria-pressed="true"],
    .xr-segmented__option[aria-current="true"] {
        color: var(--xr-ink);
        background: var(--xr-panel-raised);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }

    .xr-segmented__option:focus-visible {
        outline: 2px solid var(--xr-accent-strong);
        outline-offset: 1px;
    }

.xr-segmented--window {
    margin-bottom: 1.25rem;
}

/* --- Tables --------------------------------------------------------------- */
/* Every scroll container is also a containing block: an absolutely positioned
   descendant - Bootstrap's visually-hidden labels included - would otherwise
   escape the clip and widen the whole page on a phone. */
.xr-table-wrap,
.xr-tabs,
.viz-scroll,
.viz-table-wrap {
    position: relative;
}

.xr-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    transition: opacity 0.2s ease;
}

.data-table--hover tbody tr:hover > td {
    background: rgba(230, 237, 245, 0.025);
}

.data-table td {
    vertical-align: top;
}

.data-table__num,
.data-table th.data-table__num,
.data-table td.data-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data-table--compact th,
.data-table--compact td {
    padding: 0.55rem 0.75rem;
    font-size: 0.88rem;
}

.xr-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--xr-muted);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

    .xr-sort:hover,
    th[aria-sort="ascending"] .xr-sort,
    th[aria-sort="descending"] .xr-sort {
        color: var(--xr-ink);
    }

    .xr-sort i {
        font-size: 0.75rem;
        opacity: 0.8;
    }

    .xr-sort:focus-visible {
        outline: 2px solid var(--xr-accent-strong);
        outline-offset: 2px;
        border-radius: 4px;
    }

.xr-caption {
    caption-side: top;
    padding: 0 0 0.6rem;
    color: var(--xr-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.xr-empty-row {
    padding: 2rem 1rem !important;
    text-align: center !important;
    color: var(--xr-muted);
}

    .xr-empty-row i {
        margin-right: 0.4rem;
    }

/* clip rather than .data-table's hidden: it still rounds the corners but is
   not a scroll container, so the pinned actions column sticks to the
   scrolling wrapper instead of to the table itself. */
.xr-users-table {
    min-width: 62rem;
    overflow: clip;
}

    .xr-users-table th,
    .xr-users-table td {
        padding: 0.8rem 0.65rem;
    }

.xr-col-user {
    min-width: 14rem;
}

/* A plain table cell: display:flex on a td takes it out of the table layout.
   Pinned to the right edge so the action menu stays in reach while the table
   scrolls sideways; opaque, because the rest of the row slides beneath it. */
.xr-actions-cell {
    position: sticky;
    right: 0;
    z-index: 1;
    width: 3.25rem;
    text-align: right;
}

.data-table td.xr-actions-cell {
    background: var(--xr-panel);
}

.data-table--hover tbody tr:hover > td.xr-actions-cell {
    background: linear-gradient(rgba(230, 237, 245, 0.025), rgba(230, 237, 245, 0.025)), var(--xr-panel);
}

/* A sticky cell is its own stacking context: an open menu must rise above the
   pinned cells of the rows below it. */
.xr-actions-cell:focus-within,
.xr-actions-cell:has(.dropdown-menu.show) {
    z-index: 3;
}

.xr-col-activity {
    min-width: 12.5rem;
}

.xr-nowrap {
    white-space: nowrap;
}

/* A section heading after a list of links needs air above it. */
.admin-nav__list + .admin-nav__section {
    margin-top: 1.1rem;
}

.xr-records-table {
    min-width: 46rem;
}

.xr-expand-cell {
    width: 3rem;
}

.data-table tr.is-open > td {
    background: rgba(77, 159, 194, 0.06);
}

.xr-details-row > td {
    padding: 1rem 1.25rem 1.25rem !important;
    background: var(--xr-surface);
}

.xr-indicators {
    white-space: nowrap;
    color: var(--xr-muted);
}

    .xr-indicators i + i {
        margin-left: 0.6rem;
    }

/* Refetch keeps the frame: the previous render stays, dimmed, until the new
   one lands - no skeleton flash, no layout jump. */
.is-refreshing {
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

/* --- Users list ----------------------------------------------------------- */
.xr-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 14rem;
    color: inherit;
    text-decoration: none;
}

    .xr-user:hover .xr-user__name {
        color: var(--xr-accent-strong);
    }

    .xr-user:focus-visible {
        outline: 2px solid var(--xr-accent-strong);
        outline-offset: 3px;
        border-radius: 6px;
    }

.xr-user__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.xr-user__name {
    font-weight: 600;
    transition: color 0.18s ease;
}

.xr-user__meta {
    color: var(--xr-muted);
    font-size: 0.82rem;
    overflow-wrap: break-word;
}

.xr-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--xr-accent-strong);
    background: var(--xr-accent-soft);
}

.xr-avatar--lg {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 1.2rem;
}

.xr-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.xr-stack--end {
    align-items: flex-end;
}

.xr-muted-sm {
    color: var(--xr-muted);
    font-size: 0.8rem;
}

.xr-record-split i {
    margin-left: 0.35rem;
    font-size: 0.72rem;
}

.xr-block {
    display: block;
}

.xr-mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.9em;
}

.xr-prewrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.xr-menu {
    min-width: 12rem;
    background: var(--xr-panel-raised);
    border: 1px solid var(--xr-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

    .xr-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 0.9rem;
    }

        .xr-menu .dropdown-item i {
            width: 1.1rem;
            text-align: center;
            color: var(--xr-muted);
        }

.xr-menu__danger,
.xr-menu__danger i {
    color: var(--xr-critical) !important;
}

/* --- Pager ---------------------------------------------------------------- */
.xr-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.xr-pager__range,
.xr-pager__page {
    color: var(--xr-muted);
    font-size: 0.85rem;
}

.xr-pager__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.xr-pager__size {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0.5rem 0 0;
    color: var(--xr-muted);
    font-size: 0.85rem;
}

/* --- User details --------------------------------------------------------- */
.xr-profile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    padding: 1.35rem 1.5rem;
    background: linear-gradient(180deg, var(--xr-panel-raised), var(--xr-panel));
    border: 1px solid var(--xr-border);
    border-radius: 16px;
}

.xr-profile__name {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.xr-profile__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.25rem 0 0.6rem;
    color: var(--xr-muted);
    font-size: 0.88rem;
}

.xr-profile__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.xr-profile__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.xr-profile__last {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.xr-profile__last-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--xr-muted);
}

.xr-profile__last-value {
    font-size: 1.05rem;
    font-weight: 600;
}

.xr-tabs {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--xr-border);
    scrollbar-width: thin;
}

.xr-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    color: var(--xr-muted);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.18s ease, border-color 0.18s ease;
}

    .xr-tab:hover {
        color: var(--xr-ink);
    }

    .xr-tab:focus-visible {
        outline: 2px solid var(--xr-accent-strong);
        outline-offset: -2px;
        border-radius: 6px;
    }

.xr-tab--active {
    color: var(--xr-accent-strong);
    border-bottom-color: var(--xr-accent-strong);
}

.xr-tab-panel {
    padding-top: 1.5rem;
}

.xr-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.55rem 1.25rem;
    margin: 0;
}

    .xr-facts dt {
        color: var(--xr-muted);
        font-size: 0.85rem;
        font-weight: 500;
    }

    .xr-facts dd {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 0.5rem;
        margin: 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

.xr-facts--compact {
    gap: 0.35rem 1rem;
    font-size: 0.9rem;
}

.xr-mini-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.xr-mini-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 0.9rem;
    background: var(--xr-panel-raised);
    border-radius: 10px;
}

.xr-mini-stat__value {
    font-size: 1.2rem;
    font-weight: 700;
    white-space: nowrap;
}

.xr-mini-stat__label {
    color: var(--xr-muted);
    font-size: 0.8rem;
}

.xr-money-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--xr-border);
}

    .xr-money-block:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
    }

.xr-money-block__total {
    font-size: 1.35rem;
    font-weight: 700;
}

.xr-last-activity {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.xr-last-activity__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    color: var(--xr-accent-strong);
    background: var(--xr-accent-soft);
}

.xr-last-activity__label {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.xr-last-activity__when {
    margin: 0;
    color: var(--xr-ink-2);
    font-size: 0.88rem;
}

.xr-note {
    display: flex;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
    color: var(--xr-muted);
    font-size: 0.83rem;
}

    .xr-note i {
        margin-top: 0.2rem;
    }

.xr-warning-text {
    color: var(--xr-warning);
}

.xr-hint-line {
    margin-top: 1rem;
}

.xr-consequences {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--xr-ink-2);
}

    .xr-consequences li + li {
        margin-top: 0.3rem;
    }

.xr-restriction-state {
    margin: 0 0 1rem;
    font-weight: 600;
}

.xr-override {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    background: var(--xr-info-bg);
    border: 1px solid rgba(124, 185, 255, 0.28);
    border-radius: 12px;
}

    .xr-override p {
        margin: 0 0 0.5rem;
    }

.xr-override__reason {
    color: var(--xr-ink-2);
    font-style: italic;
}

.xr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
}

.xr-empty__icon {
    font-size: 2.4rem;
    color: var(--xr-muted);
}

.xr-empty__title {
    margin: 0;
    font-size: 1.3rem;
}

.xr-empty-inline {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    color: var(--xr-muted);
}

/* --- Timeline ------------------------------------------------------------- */
.xr-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.xr-timeline__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--xr-border);
}

    .xr-timeline__item:first-child {
        padding-top: 0;
    }

    .xr-timeline__item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.xr-timeline__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    color: var(--xr-accent-strong);
    background: var(--xr-panel-raised);
}

.xr-timeline__item--admin .xr-timeline__icon {
    color: var(--xr-info);
    background: var(--xr-info-bg);
}

.xr-timeline__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.15rem 0 0;
    font-weight: 600;
}

.xr-timeline__detail {
    margin: 0.2rem 0 0;
    color: var(--xr-ink-2);
    font-size: 0.9rem;
}

.xr-timeline__meta {
    margin: 0.25rem 0 0;
    color: var(--xr-muted);
    font-size: 0.8rem;
}

.xr-timeline__time {
    color: var(--xr-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    text-align: right;
    padding-top: 0.2rem;
}

/* --- Vehicles ------------------------------------------------------------- */
.xr-vehicle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.xr-vehicle {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: var(--xr-panel);
    border: 1px solid var(--xr-border);
    border-radius: 14px;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

    .xr-vehicle:hover {
        color: inherit;
        transform: translateY(-2px);
        border-color: var(--xr-accent);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    }

    .xr-vehicle:focus-visible {
        outline: 2px solid var(--xr-accent-strong);
        outline-offset: 2px;
    }

.xr-vehicle--selected {
    border-color: var(--xr-accent-strong);
    box-shadow: 0 0 0 3px var(--xr-accent-soft);
}

.xr-vehicle__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--xr-surface);
}

.xr-vehicle__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xr-vehicle__placeholder {
    font-size: 2.2rem;
    color: var(--xr-border);
}

.xr-vehicle__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem 1rem;
}

.xr-vehicle__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-weight: 650;
}

.xr-vehicle__model {
    color: var(--xr-muted);
    font-size: 0.85rem;
}

.xr-vehicle__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-top: 0.35rem;
    color: var(--xr-ink-2);
    font-size: 0.82rem;
}

    .xr-vehicle__stats i {
        color: var(--xr-muted);
        margin-right: 0.25rem;
    }

.xr-vehicle-detail {
    margin-top: 1.5rem;
}

    .xr-vehicle-detail > .xr-section__title {
        margin-top: 1.75rem;
    }

/* --- Records -------------------------------------------------------------- */
.xr-record-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.xr-record-cell__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--xr-accent-strong);
    background: var(--xr-panel-raised);
    font-size: 0.85rem;
}

.xr-record-details {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 1.5rem;
}

.xr-record-details__media {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.xr-photo {
    display: block;
    width: 100%;
    max-height: 20rem;
    object-fit: contain;
    background: var(--xr-bg);
    border: 1px solid var(--xr-border);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.xr-photo--none {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 8rem;
    margin-bottom: 0;
    color: var(--xr-muted);
    font-size: 0.85rem;
}

    .xr-photo--none i {
        font-size: 1.5rem;
    }

.xr-photo-link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
}

    .xr-photo-link .xr-photo {
        margin-bottom: 0;
    }

/* --- Location ------------------------------------------------------------- */
.xr-location {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.xr-location__facts {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.xr-location__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--xr-muted);
}

.xr-location__name {
    font-weight: 600;
}

.xr-location__coordinates {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.85rem;
    color: var(--xr-ink-2);
}

.xr-location__none {
    color: var(--xr-muted);
}

/* The slot a map provider renders into later: it already carries its position. */
.xr-map-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 9rem;
    padding: 1rem;
    text-align: center;
    color: var(--xr-muted);
    background: var(--xr-bg);
    border: 1px solid var(--xr-border);
    border-radius: 12px;
}

.xr-map-slot--empty {
    opacity: 0.7;
}

.xr-map-slot__icon {
    font-size: 1.6rem;
}

.xr-map-slot__text {
    font-size: 0.8rem;
}

/* --- Confirmation dialog -------------------------------------------------- */
.xr-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(4, 8, 12, 0.72);
    backdrop-filter: blur(2px);
    animation: auth-fade-in 0.2s ease both;
}

.xr-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1055;
    width: min(32rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.5rem;
    transform: translate(-50%, -50%);
    background: var(--xr-panel);
    border: 1px solid var(--xr-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

    .xr-modal:focus {
        outline: none;
    }

.xr-modal__header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.xr-modal__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: var(--xr-info);
    background: var(--xr-info-bg);
}

.xr-modal__icon--danger {
    color: var(--xr-critical);
    background: var(--xr-error-bg);
}

.xr-modal__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 650;
}

.xr-modal__body {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    color: var(--xr-ink-2);
}

    .xr-modal__body p {
        margin: 0;
    }

    .xr-modal__body .auth-alert {
        margin-bottom: 0;
    }

.xr-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* --- Charts --------------------------------------------------------------- */
.viz-s1 {
    --viz-color: var(--viz-series-1);
}

.viz-s2 {
    --viz-color: var(--viz-series-2);
}

.viz-s3 {
    --viz-color: var(--viz-series-3);
}

.viz-card {
    min-width: 0;
}

.viz-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.viz-card.is-refreshing {
    opacity: 1;
}

    .viz-card.is-refreshing .viz-card__body {
        opacity: 0.55;
        transition: opacity 0.2s ease;
    }

.viz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
    color: var(--xr-ink-2);
    font-size: 0.82rem;
}

.viz-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.viz-key {
    display: inline-block;
    background: var(--viz-color);
}

.viz-key--bar {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 3px;
}

.viz-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

.viz-chart {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    min-width: 20rem;
    /* Room for the last axis label, which is centred on the last band and
       would otherwise be clipped by the scroll container. */
    padding-right: 1.25rem;
}

.viz-chart--medium {
    min-width: 32rem;
}

.viz-chart--dense {
    min-width: 38rem;
}

.viz-chart svg {
    display: block;
    overflow: visible;
}

.viz-axis-y text,
.viz-axis-x text {
    fill: var(--xr-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.viz-grid line {
    stroke: var(--viz-grid);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.viz-grid .viz-baseline {
    stroke: var(--viz-axis);
}

.viz-bar {
    fill: var(--viz-color);
}

.viz-label {
    fill: var(--xr-ink);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.viz-line {
    fill: none;
    stroke: var(--viz-color);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.viz-area {
    fill: var(--viz-color);
    fill-opacity: 0.1;
    stroke: none;
}

.viz-dot {
    fill: var(--viz-color);
    stroke: var(--viz-surface);
    stroke-width: 2;
}

/* The hover layer is CSS only, so a pointer move never costs a round trip to
   the server. Each band is a hit target the full height of the plot and is
   focusable, and focus shows the same tooltip as hover. */
.viz-hit {
    outline: none;
}

.viz-hit__band {
    fill: transparent;
}

.viz-hit:hover .viz-hit__band,
.viz-hit:focus .viz-hit__band {
    fill: rgba(230, 237, 245, 0.05);
}

.viz-hit:focus-visible .viz-hit__band {
    stroke: var(--xr-accent-strong);
    stroke-width: 1;
}

.viz-crosshair {
    stroke: var(--viz-axis);
    stroke-width: 1;
    visibility: hidden;
}

.viz-hit__dot,
.viz-tip {
    visibility: hidden;
}

/* Only the band takes the pointer: what hover reveals never competes with it. */
.viz-tip,
.viz-crosshair,
.viz-hit__dot {
    pointer-events: none;
}

.viz-hit:hover .viz-tip,
.viz-hit:focus .viz-tip,
.viz-hit:hover .viz-crosshair,
.viz-hit:focus .viz-crosshair,
.viz-hit:hover .viz-hit__dot,
.viz-hit:focus .viz-hit__dot {
    visibility: visible;
}

.viz-tip__bg {
    fill: var(--xr-panel-raised);
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
}

.viz-tip text {
    font-size: 12px;
    fill: var(--xr-ink);
}

.viz-tip .viz-tip__title {
    fill: var(--xr-muted);
    font-weight: 600;
}

.viz-tip .viz-tip__value {
    fill: var(--xr-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.viz-tip .viz-tip__name {
    fill: var(--xr-muted);
}

.viz-tip__key {
    stroke: var(--viz-color);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.viz-table-wrap {
    overflow-x: auto;
}

.viz-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    .viz-table th,
    .viz-table td {
        padding: 0.45rem 0.6rem;
        text-align: left;
        border-bottom: 1px solid var(--xr-border);
    }

    .viz-table thead th {
        color: var(--xr-muted);
        font-weight: 600;
    }

    .viz-table tbody th {
        font-weight: 500;
    }

    .viz-table .viz-table__num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

.viz-barlist {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.viz-barlist__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.35rem 1rem;
}

.viz-barlist__label {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.viz-barlist__icon {
    width: 1rem;
    color: var(--xr-muted);
    text-align: center;
}

.viz-barlist__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viz-barlist__hint {
    color: var(--xr-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

.viz-barlist__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.viz-barlist__bar {
    grid-column: 1 / -1;
    display: block;
    overflow: visible;
}

.viz-empty {
    margin: 0;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .xr-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .xr-grid--2,
    .xr-grid--3,
    .xr-grid--2-1,
    .xr-grid--vehicle,
    .xr-record-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .xr-profile {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .xr-profile__side {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .xr-profile__last {
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 600px) {
    .xr-profile {
        padding: 1.1rem;
    }

    .xr-profile__name {
        font-size: 1.3rem;
    }

    .xr-search {
        max-width: none;
    }

    .xr-filter,
    .xr-filter .xr-select,
    .xr-filter .xr-input {
        width: 100%;
    }

    .xr-timeline__item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .xr-timeline__time {
        grid-column: 2;
        text-align: left;
        padding-top: 0;
    }

    .xr-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }

        .xr-facts dd {
            margin-bottom: 0.5rem;
        }
}