/* ═══════════════════════════════════════════════════════════════════════════
   Itinerise Admin design system.

   Colour tokens mirror the MAUI app's Colors.xaml (Primary teal, Mint, Amber,
   warm neutrals, the dark surface hierarchy) so the console reads as the same
   product as the phone. The teal→mint brand gradient is the single signature
   accent — active nav pill, primary buttons, stat chips — mirroring the
   mobile "gradient bank" rule: key actions only, never wholesale.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────────────────────────── */

:root {
    /* Surfaces + ink (light) */
    --it-canvas: #F4F3F1;
    --it-surface: #FFFFFF;
    --it-surface-2: #EEEDEA;
    --it-border: #E8E6E3;
    --it-border-strong: #D8D5D0;
    --it-ink: #1A2528;
    --it-ink-2: #5F6E72;
    --it-ink-3: #8A9598;

    /* Brand + semantic accents */
    --it-brand: #0A7085;
    --it-brand-strong: #2D95A5;
    --it-brand-soft: rgba(10, 112, 133, 0.10);
    --it-mint: #1F9E80;
    --it-mint-soft: rgba(31, 158, 128, 0.12);
    --it-amber: #C77F1A;
    --it-amber-soft: rgba(199, 127, 26, 0.13);
    --it-danger: #C4453A;
    --it-danger-soft: rgba(196, 69, 58, 0.10);
    --it-neutral-soft: rgba(26, 37, 40, 0.07);

    /* The signature gradient (PrimaryDarkButton → Mint, as on the phone) */
    --it-gradient: linear-gradient(135deg, #2D95A5 0%, #1F9E80 100%);
    --it-gradient-glow: rgba(45, 149, 165, 0.30);

    /* Sidebar (deep teal ink, both themes) */
    --it-sidebar-bg: #0C2227;
    --it-sidebar-ink: #AFC6CC;
    --it-sidebar-ink-dim: #6E8B92;
    --it-sidebar-hover: rgba(255, 255, 255, 0.06);
    --it-sidebar-border: rgba(255, 255, 255, 0.08);

    /* Shape + elevation */
    --it-radius-sm: 6px;
    --it-radius: 10px;
    --it-radius-lg: 14px;
    --it-shadow-card: 0 1px 2px rgba(16, 24, 26, 0.04), 0 4px 16px rgba(16, 24, 26, 0.05);
    --it-shadow-pop: 0 12px 40px rgba(16, 24, 26, 0.18);

    /* Type */
    --it-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --it-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
    --it-font-mono: "JetBrains Mono", Consolas, "Courier New", monospace;

    /* Bootstrap bridge */
    --bs-body-bg: var(--it-canvas);
    --bs-body-color: var(--it-ink);
    --bs-border-color: var(--it-border);
    --bs-secondary-color: var(--it-ink-2);
    --bs-tertiary-color: var(--it-ink-3);
    --bs-primary: #0A7085;
    --bs-primary-rgb: 10, 112, 133;
    --bs-success: #1F9E80;
    --bs-success-rgb: 31, 158, 128;
    --bs-warning: #C77F1A;
    --bs-warning-rgb: 199, 127, 26;
    --bs-danger: #C4453A;
    --bs-danger-rgb: 196, 69, 58;
    --bs-info: #2D95A5;
    --bs-info-rgb: 45, 149, 165;
    --bs-link-color: #0A7085;
    --bs-link-color-rgb: 10, 112, 133;
    --bs-link-hover-color: #085A6B;
    --bs-link-hover-color-rgb: 8, 90, 107;
    --bs-font-sans-serif: var(--it-font-body);
    --bs-font-monospace: var(--it-font-mono);
    --bs-body-font-size: 0.925rem;
}

[data-bs-theme="dark"] {
    --it-canvas: #121416;
    --it-surface: #1C1F22;
    --it-surface-2: #252830;
    --it-border: #2E3138;
    --it-border-strong: #3A3E44;
    --it-ink: #F0EFED;
    --it-ink-2: #9B9A97;
    --it-ink-3: #6E6D6A;

    --it-brand: #4DB8C9;
    --it-brand-strong: #4DB8C9;
    --it-brand-soft: rgba(77, 184, 201, 0.13);
    --it-mint: #4EC5A6;
    --it-mint-soft: rgba(78, 197, 166, 0.14);
    --it-amber: #E6A24A;
    --it-amber-soft: rgba(230, 162, 74, 0.15);
    --it-danger: #D4554A;
    --it-danger-soft: rgba(212, 85, 74, 0.14);
    --it-neutral-soft: rgba(240, 239, 237, 0.08);

    --it-sidebar-bg: #0B1A1E;

    --it-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.20), 0 4px 16px rgba(0, 0, 0, 0.22);
    --it-shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.45);

    --bs-body-bg: var(--it-canvas);
    --bs-body-color: var(--it-ink);
    --bs-border-color: var(--it-border);
    --bs-secondary-color: var(--it-ink-2);
    --bs-tertiary-color: var(--it-ink-3);
    --bs-primary: #4DB8C9;
    --bs-primary-rgb: 77, 184, 201;
    --bs-success: #4EC5A6;
    --bs-success-rgb: 78, 197, 166;
    --bs-warning: #E6A24A;
    --bs-warning-rgb: 230, 162, 74;
    --bs-danger: #D4554A;
    --bs-danger-rgb: 212, 85, 74;
    --bs-info: #4DB8C9;
    --bs-info-rgb: 77, 184, 201;
    --bs-link-color: #4DB8C9;
    --bs-link-color-rgb: 77, 184, 201;
    --bs-link-hover-color: #6FC7D5;
    --bs-link-hover-color-rgb: 111, 199, 213;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

html, body {
    font-family: var(--it-font-body);
    background-color: var(--it-canvas);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--it-font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--it-ink);
}

h1:focus {
    outline: none;
}

code, kbd, pre, samp, .font-monospace {
    font-family: var(--it-font-mono);
}

code {
    font-size: 0.85em;
    color: var(--it-brand);
    background: var(--it-brand-soft);
    border-radius: 4px;
    padding: 0.1em 0.35em;
}

pre code {
    background: none;
    padding: 0;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--it-brand-strong);
    outline-offset: 2px;
}

::selection {
    background: rgba(45, 149, 165, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Shell layout ──────────────────────────────────────────────────────── */

.admin-nav-toggle {
    display: none;
}

.admin-shell {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 264px;
    flex-shrink: 0;
    background-color: var(--it-sidebar-bg);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh; /* mobile browsers: track the dynamic viewport, not the largest one */
    z-index: 1030;
}

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

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 1.75rem;
    background-color: var(--it-surface);
    border-bottom: 1px solid var(--it-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.admin-topbar-left,
.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-content {
    padding: 1.75rem 1.75rem 3rem;
    width: 100%;
}

/* Mobile: sidebar slides in over the content */
@media (max-width: 991.98px) {
    .admin-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: var(--it-shadow-pop);
    }

    .admin-nav-toggle:checked ~ .admin-shell .admin-sidebar {
        transform: translateX(0);
    }

    .admin-nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(6, 10, 12, 0.5);
        z-index: 1025;
    }

    .admin-nav-toggle:checked ~ .admin-shell .admin-nav-backdrop {
        display: block;
    }
}

.admin-burger {
    display: none;
    border: none;
    background: none;
    font-size: 1.35rem;
    color: var(--it-ink-2);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

/* Compact brand shown beside the burger when the sidebar is off-canvas */
.topbar-brand {
    display: none;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--it-font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--it-ink);
    text-decoration: none;
}

.topbar-brand img {
    width: 1.35rem;
    height: 1.35rem;
}

@media (max-width: 991.98px) {
    .admin-burger,
    .topbar-brand {
        display: inline-flex;
    }
}

/* The public layout has no sidebar, so its brand shows at every width */
.topbar-brand.public-brand {
    display: inline-flex;
}

.public-nav-link {
    color: var(--it-ink-2);
    text-decoration: none;
    font-size: 0.9rem;
}

.public-nav-link:hover {
    color: var(--it-ink);
}

/* A trip's name column gives way to its dates, so a long address truncates instead of pushing them onto a new line */
.trip-name {
    min-width: 0;
}

/* Environment chip in the topbar */
.env-chip {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--it-amber);
    background: var(--it-amber-soft);
    border: 1px solid color-mix(in srgb, var(--it-amber) 35%, transparent);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
}

/* Theme toggle — shows the icon for the theme you would switch TO */
.theme-toggle {
    border: 1px solid var(--it-border);
    background: var(--it-surface);
    color: var(--it-ink-2);
    border-radius: 999px;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover {
    color: var(--it-brand);
    border-color: var(--it-brand-strong);
}

.theme-toggle .bi-moon-stars { display: inline; }
.theme-toggle .bi-sun { display: none; }

[data-bs-theme="dark"] .theme-toggle .bi-moon-stars { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-sun { display: inline; }

/* User chip (top-right) */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--it-border);
    background: var(--it-surface);
    border-radius: 999px;
    padding: 0.25rem 0.85rem 0.25rem 0.3rem;
    color: var(--it-ink);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.user-chip:hover {
    border-color: var(--it-brand-strong);
}

.user-chip::after {
    display: none; /* suppress Bootstrap's dropdown caret */
}

.user-chip-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--it-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ── Sidebar navigation ────────────────────────────────────────────────── */

.snav-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.1rem 1.25rem 1rem;
}

.snav-brand-tile {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 10px;
    background: #F4F3F1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.snav-brand-tile img {
    width: 1.7rem;
    height: 1.7rem;
}

.snav-brand-name {
    font-family: var(--it-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
}

.snav-brand-sub {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--it-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.snav-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0.75rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.snav-scroll::-webkit-scrollbar {
    width: 8px;
}

.snav-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.snav-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.snav-section {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--it-sidebar-ink-dim);
    padding: 1.1rem 0.55rem 0.35rem;
}

.snav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.48rem 0.65rem;
    margin-bottom: 1px;
    border-radius: 8px;
    color: var(--it-sidebar-ink);
    font-size: 0.865rem;
    font-weight: 450;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.snav-item .bi {
    font-size: 0.95rem;
    width: 1.2rem;
    text-align: center;
    opacity: 0.75;
    flex-shrink: 0;
}

.snav-item:hover {
    background: var(--it-sidebar-hover);
    color: #fff;
}

.snav-item.active {
    background: var(--it-gradient);
    color: #fff;
    font-weight: 550;
    box-shadow: 0 2px 10px var(--it-gradient-glow);
}

.snav-item.active .bi {
    opacity: 1;
}

.snav-caret {
    margin-left: auto;
    font-size: 0.7rem !important;
    width: auto !important;
    transition: transform 0.18s ease;
}

.snav-group.open > .snav-item .snav-caret {
    transform: rotate(90deg);
}

.snav-children {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.22s ease;
}

.snav-group.open > .snav-children {
    max-height: 24rem;
}

.snav-children .snav-item {
    padding-left: 2.5rem;
    font-size: 0.835rem;
}

/* Sub-items get a quieter active state so the gradient stays a single accent */
.snav-children .snav-item.active {
    background: rgba(255, 255, 255, 0.10);
    box-shadow: none;
}

.snav-children .snav-item.active::before {
    content: "";
    width: 3px;
    height: 1rem;
    border-radius: 2px;
    background: var(--it-gradient);
    position: absolute;
    margin-left: -1.15rem;
}

/* ── Page header ───────────────────────────────────────────────────────── */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.page-header-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--it-brand);
    margin-bottom: 0.2rem;
}

.page-header h1 {
    font-size: 1.45rem;
    margin-bottom: 0;
}

.page-header-lede {
    color: var(--it-ink-2);
    font-size: 0.9rem;
    margin: 0.35rem 0 0;
    max-width: 72ch;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

.card {
    --bs-card-bg: var(--it-surface);
    --bs-card-border-color: var(--it-border);
    --bs-card-border-radius: var(--it-radius-lg);
    --bs-card-inner-border-radius: calc(var(--it-radius-lg) - 1px);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--it-shadow-card);
}

.card-header {
    border-bottom: 1px solid var(--it-border);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.card-header h5, .card-header h6 {
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Flush card bodies host edge-to-edge tables; scroll them inside the card rather than
   letting a wide table stretch the whole page on small screens. */
.card-body.p-0 {
    overflow-x: auto;
}

/* Stat cards */
.stat-card {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.1rem 1.2rem;
    height: 100%;
}

.stat-card-chip {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    background: var(--it-brand-soft);
    color: var(--it-brand);
}

.stat-card-chip.tone-gradient {
    background: var(--it-gradient);
    color: #fff;
    box-shadow: 0 3px 12px var(--it-gradient-glow);
}

.stat-card-chip.tone-mint { background: var(--it-mint-soft); color: var(--it-mint); }
.stat-card-chip.tone-amber { background: var(--it-amber-soft); color: var(--it-amber); }
.stat-card-chip.tone-danger { background: var(--it-danger-soft); color: var(--it-danger); }
.stat-card-chip.tone-neutral { background: var(--it-neutral-soft); color: var(--it-ink-2); }

.stat-card-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--it-ink-2);
}

.stat-card-value {
    font-family: var(--it-font-display);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--it-ink);
}

.stat-card-body {
    min-width: 0;
    flex: 1;
}

.stat-card-extra {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--it-ink-2);
}

.stat-card a {
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
    --bs-btn-border-radius: 8px;
    font-weight: 500;
}

.btn-primary {
    --bs-btn-bg: #2D95A5;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: #27818f;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: #22727e;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: #2D95A5;
    --bs-btn-disabled-border-color: transparent;
    background-image: var(--it-gradient);
    border: none;
}

.btn-primary:hover:not(:disabled) {
    background-image: linear-gradient(135deg, #27818f 0%, #1b8a70 100%);
    box-shadow: 0 3px 12px var(--it-gradient-glow);
}

.btn-outline-primary {
    --bs-btn-color: var(--it-brand);
    --bs-btn-border-color: var(--it-brand-strong);
    --bs-btn-hover-bg: var(--it-brand-soft);
    --bs-btn-hover-color: var(--it-brand);
    --bs-btn-hover-border-color: var(--it-brand-strong);
    --bs-btn-active-bg: var(--it-brand-soft);
    --bs-btn-active-color: var(--it-brand);
    --bs-btn-active-border-color: var(--it-brand-strong);
}

.btn-secondary {
    --bs-btn-bg: var(--it-surface-2);
    --bs-btn-border-color: var(--it-border-strong);
    --bs-btn-color: var(--it-ink);
    --bs-btn-hover-bg: var(--it-border);
    --bs-btn-hover-border-color: var(--it-border-strong);
    --bs-btn-hover-color: var(--it-ink);
    --bs-btn-active-bg: var(--it-border);
    --bs-btn-active-border-color: var(--it-border-strong);
    --bs-btn-active-color: var(--it-ink);
}

.btn-outline-secondary {
    --bs-btn-color: var(--it-ink-2);
    --bs-btn-border-color: var(--it-border-strong);
    --bs-btn-hover-bg: var(--it-neutral-soft);
    --bs-btn-hover-color: var(--it-ink);
    --bs-btn-hover-border-color: var(--it-border-strong);
    --bs-btn-active-bg: var(--it-neutral-soft);
    --bs-btn-active-color: var(--it-ink);
    --bs-btn-active-border-color: var(--it-border-strong);
}

/* ── Badges ────────────────────────────────────────────────────────────── */

.badge {
    font-weight: 550;
    letter-spacing: 0.01em;
}

.it-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.28em 0.7em;
    line-height: 1.1;
    white-space: nowrap;
}

.it-badge.tone-brand { background: var(--it-brand-soft); color: var(--it-brand); }
.it-badge.tone-mint { background: var(--it-mint-soft); color: var(--it-mint); }
.it-badge.tone-amber { background: var(--it-amber-soft); color: var(--it-amber); }
.it-badge.tone-danger { background: var(--it-danger-soft); color: var(--it-danger); }
.it-badge.tone-neutral { background: var(--it-neutral-soft); color: var(--it-ink-2); }

/* ── Tables ────────────────────────────────────────────────────────────── */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--it-ink);
    --bs-table-border-color: var(--it-border);
    --bs-table-hover-bg: var(--it-neutral-soft);
    --bs-table-hover-color: var(--it-ink);
    --bs-table-striped-bg: color-mix(in srgb, var(--it-surface-2) 45%, transparent);
    --bs-table-striped-color: var(--it-ink);
    --bs-table-active-bg: var(--it-brand-soft);
    --bs-table-active-color: var(--it-ink);
    font-size: 0.875rem;
}

.table thead th {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--it-ink-2);
    border-bottom-width: 1px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    white-space: nowrap;
}

.table > :not(caption) > * > * {
    padding: 0.55rem 0.75rem;
}

/* A trip under way today reads mint in every trip grid (TripBrowser), the colour the app gives a live trip. */
.table > tbody > tr.row-current > * {
    --bs-table-bg: var(--it-mint-soft);
}

.table > tbody > tr.row-current > :first-child {
    box-shadow: inset 3px 0 0 var(--it-mint);
}

/* ── Forms ─────────────────────────────────────────────────────────────── */

.form-control, .form-select {
    background-color: var(--it-surface);
    border-color: var(--it-border-strong);
    color: var(--it-ink);
    border-radius: 8px;
}

.form-control:focus, .form-select:focus {
    background-color: var(--it-surface);
    border-color: var(--it-brand-strong);
    color: var(--it-ink);
    box-shadow: 0 0 0 0.2rem rgba(45, 149, 165, 0.18);
}

.form-control::placeholder {
    color: var(--it-ink-3);
}

.form-label {
    font-weight: 500;
    color: var(--it-ink);
    margin-bottom: 0.3rem;
}

.form-check-input:checked {
    background-color: #2D95A5;
    border-color: #2D95A5;
}

.form-check-input:focus {
    border-color: var(--it-brand-strong);
    box-shadow: 0 0 0 0.2rem rgba(45, 149, 165, 0.18);
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--it-mint);
}

.invalid {
    outline: 1px solid var(--it-danger);
}

.validation-message {
    color: var(--it-danger);
}

/* ── Page tabs (section sub-navigation) ────────────────────────────────── */

.page-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--it-border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none; /* scrollable on narrow screens, but never shows chrome */
}

.page-tabs::-webkit-scrollbar {
    display: none;
}

.page-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--it-ink-2);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.12s ease;
}

.page-tabs a:hover {
    color: var(--it-ink);
}

.page-tabs a.active {
    color: var(--it-brand);
    border-image: var(--it-gradient) 1;
    border-bottom: 2px solid;
}

/* ── Modals (component-rendered) ───────────────────────────────────────── */

.it-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 10, 12, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 3.5rem 1rem;
    animation: it-fade-in 0.15s ease;
}

.it-modal {
    background: var(--it-surface);
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius-lg);
    box-shadow: var(--it-shadow-pop);
    width: 100%;
    max-width: 560px;
    animation: it-rise-in 0.18s ease;
}

.it-modal.it-modal-lg {
    max-width: 800px;
}

.it-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--it-border);
}

.it-modal-header h5 {
    font-size: 1rem;
    margin: 0;
}

.it-modal-header.tone-danger h5 {
    color: var(--it-danger);
}

.it-modal-body {
    padding: 1.25rem;
}

.it-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--it-border);
}

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

@keyframes it-rise-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Toasts ────────────────────────────────────────────────────────────── */

.it-toast-host {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: min(420px, calc(100vw - 2.5rem));
}

.it-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    background: var(--it-surface);
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius);
    box-shadow: var(--it-shadow-pop);
    padding: 0.75rem 0.9rem;
    animation: it-rise-in 0.2s ease;
}

.it-toast .bi {
    font-size: 1rem;
    margin-top: 0.05rem;
}

.it-toast.tone-mint .bi { color: var(--it-mint); }
.it-toast.tone-danger .bi { color: var(--it-danger); }
.it-toast.tone-amber .bi { color: var(--it-amber); }
.it-toast.tone-brand .bi { color: var(--it-brand); }

.it-toast-message {
    font-size: 0.865rem;
    color: var(--it-ink);
    word-break: break-word;
    white-space: pre-wrap;
}

.it-toast-close {
    border: none;
    background: none;
    color: var(--it-ink-3);
    margin-left: auto;
    padding: 0 0.1rem;
    cursor: pointer;
    line-height: 1;
}

.it-toast-close:hover {
    color: var(--it-ink);
}

/* ── Small screens ─────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .admin-content {
        padding: 1rem 0.85rem 2.5rem;
    }

    .admin-topbar {
        padding: 0.5rem 0.85rem;
    }

    .page-header {
        margin-bottom: 1rem;
    }

    .page-header h1 {
        font-size: 1.25rem;
    }

    .page-header-lede {
        font-size: 0.85rem;
    }

    /* Denser tables — most admin tables scroll sideways on a phone; make each column earn its keep */
    .table {
        font-size: 0.82rem;
    }

    .table > :not(caption) > * > * {
        padding: 0.45rem 0.5rem;
    }

    .card-body {
        padding: 0.85rem;
    }

    .stat-card {
        padding: 0.85rem 0.9rem;
        gap: 0.7rem;
    }

    .stat-card-value {
        font-size: 1.35rem;
    }

    /* Modals go near-full-bleed */
    .it-modal-backdrop {
        padding: 0.75rem 0.5rem;
    }

    .it-modal-header,
    .it-modal-body,
    .it-modal-footer {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    /* Toasts sit above thumb-reach chrome and never span edge to edge */
    .it-toast-host {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        max-width: none;
    }

    /* Env chip is noise on a phone — identity comes from the topbar brand */
    .env-chip {
        display: none;
    }
}

/* Mini stat tiles (result summaries inside cards) */
.mini-stat {
    background: var(--it-surface-2);
    border-radius: var(--it-radius);
    padding: 0.6rem 0.75rem;
}

.mini-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--it-ink-2);
}

.mini-stat-value {
    font-family: var(--it-font-display);
    font-size: 1.35rem;
    font-weight: 600;
}

/* ── States (loading / empty) ──────────────────────────────────────────── */

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--it-ink-2);
}

.loading-state .spinner-border {
    color: var(--it-brand-strong);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 2.75rem 1rem;
    color: var(--it-ink-2);
}

.empty-state .bi {
    font-size: 1.9rem;
    color: var(--it-ink-3);
    margin-bottom: 0.25rem;
}

.empty-state-title {
    font-weight: 600;
    color: var(--it-ink);
}

.empty-state-hint {
    font-size: 0.85rem;
    max-width: 46ch;
}

/* ── Misc ──────────────────────────────────────────────────────────────── */

.dropdown-menu {
    --bs-dropdown-bg: var(--it-surface);
    --bs-dropdown-border-color: var(--it-border);
    --bs-dropdown-border-radius: var(--it-radius);
    --bs-dropdown-link-color: var(--it-ink);
    --bs-dropdown-link-hover-bg: var(--it-neutral-soft);
    --bs-dropdown-link-hover-color: var(--it-ink);
    box-shadow: var(--it-shadow-pop);
}

.alert {
    border-radius: var(--it-radius);
}

.progress {
    background-color: var(--it-surface-2);
}

.pagination {
    --bs-pagination-color: var(--it-ink-2);
    --bs-pagination-bg: var(--it-surface);
    --bs-pagination-border-color: var(--it-border);
    --bs-pagination-hover-color: var(--it-brand);
    --bs-pagination-hover-bg: var(--it-brand-soft);
    --bs-pagination-hover-border-color: var(--it-border);
    --bs-pagination-focus-color: var(--it-brand);
    --bs-pagination-focus-bg: var(--it-brand-soft);
    --bs-pagination-active-bg: #2D95A5;
    --bs-pagination-active-border-color: #2D95A5;
    --bs-pagination-disabled-bg: var(--it-surface);
    --bs-pagination-disabled-border-color: var(--it-border);
}

.accordion {
    --bs-accordion-bg: var(--it-surface);
    --bs-accordion-border-color: var(--it-border);
    --bs-accordion-btn-bg: var(--it-surface);
    --bs-accordion-active-bg: var(--it-brand-soft);
    --bs-accordion-active-color: var(--it-brand);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(45, 149, 165, 0.18);
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--it-border);
    --bs-list-group-color: var(--it-ink);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.user-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--it-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
}

.cursor-pointer {
    cursor: pointer;
}

/* Blazor plumbing */

.blazor-error-boundary {
    background: var(--it-danger);
    padding: 1rem;
    border-radius: var(--it-radius);
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

#blazor-error-ui {
    color-scheme: light only;
    background: #FFF8E1;
    color: #664D03;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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