@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html, body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    background: #1a1b1f;
    color: #f4f4f4;
}

/*
  Reserve the scrollbar's space whether or not there is one to show. The document is the scroll
  container, so this belongs on html and nowhere else.

  Without it every navigation that goes from a short page to a tall one — or from a page's own
  "Loading…" to its content — changes the viewport width by the width of a scrollbar. The backdrop
  canvas is fixed to the viewport, so that resize invalidated the procedural world behind every
  screen and rebuilt it from scratch, on the main thread, at exactly the moment the new page was
  arriving. That was the animation hanging on every tab click.
*/
html {
    scrollbar-gutter: stable;
}

h1:focus {
    outline: none;
}

.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6,
.mud-typography-overline,
.mud-typography-subtitle1,
.mud-typography-subtitle2 {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    letter-spacing: 0.01em;
}

.appbar-title {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    font-size: 0.88rem !important;
}

.appbar-blur {
    border-bottom: 1px solid rgba(165, 43, 217, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hamburger-btn {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

    .hamburger-btn:hover {
        transform: scale(1.12);
    }

.page-enter {
    animation: pageEnter 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.drawer-animate {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover {
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}

    .card-hover:hover {
        border-color: var(--mud-palette-primary) !important;
        transform: translateY(-3px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3) !important;
    }

*,
*::before,
*::after {
    transition: background-color 0.28s ease, color 0.15s ease, border-color 0.28s ease;
}

.fantasy-card {
    border: 1px solid var(--mud-palette-primary) !important;
    position: relative;
    background: linear-gradient(145deg, #23242bd9, #1b1c22d9) !important;
}

    .fantasy-card::before,
    .fantasy-card::after {
        content: '◆';
        position: absolute;
        color: var(--mud-palette-primary);
        font-size: 10px;
        line-height: 1;
        background: var(--mud-palette-surface);
        padding: 0 5px;
        z-index: 1;
        opacity: 0.9;
    }

    .fantasy-card::before {
        top: -7px;
        left: 18px;
    }

    .fantasy-card::after {
        bottom: -7px;
        right: 18px;
    }

/* Admin > Teams & users roster: makes each team's group of rows stand out from the next. */
.pf-user-group-header th {
    border-top: 2px solid var(--mud-palette-primary) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.pf-section-title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 18px;
}

    .pf-section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 56px;
        height: 2px;
        background: linear-gradient(to right, var(--mud-palette-primary), var(--mud-palette-secondary), transparent);
    }

.mud-nav-link .mud-nav-link-text {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.02em !important;
}

.mud-table-head .mud-table-cell {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
}

.mud-button-root .mud-button-label {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    letter-spacing: 0.02em !important;
    font-size: 0.76rem !important;
}

.mud-chip .mud-chip-content {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.01em !important;
}

/*
  The circuit-died card. Blazor toggles display on the outer element (inline display:block), so it
  only positions; the card inside does the layout. Same dark gradient as the reconnect modal, in the
  ember of the "error" verdict. Above everything, the grader scrim and the oracle included.
*/
/* Shown in place of the page while a sign-in's profile cannot be loaded (see UserSession). */
.ach-reconnecting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3, 0.75rem);
    min-height: 40vh;
    font-family: var(--font-body);
    color: var(--color-silver-100);
    opacity: 0.85;
}

#blazor-error-ui {
    color-scheme: dark;
    display: none;
    position: fixed;
    left: 50%;
    bottom: var(--space-6, 1.5rem);
    transform: translateX(-50%);
    width: min(40rem, calc(100% - 32px));
    z-index: 3000;
    animation: blazor-error-ui-rise 0.45s cubic-bezier(.05, .89, .25, 1.02);
}

.blazor-error-ui__card {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    font-family: var(--font-body);
    color: var(--color-silver-100);
    background: linear-gradient(160deg, #0d1428 0%, #060a18 100%);
    border: 1px solid rgb(249 115 22 / 0.45);
    border-radius: var(--radius-xl);
    box-shadow: 0 0 40px rgb(249 115 22 / 0.18), 0 20px 60px rgb(0 0 0 / 0.6);
}

.blazor-error-ui__sigil {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid rgb(249 115 22 / 0.5);
    background: rgb(28 12 4 / 0.7);
    color: var(--color-ember-400);
    font-size: 1.1rem;
}

.blazor-error-ui__copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.blazor-error-ui__title {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--text-sm);
    color: var(--color-ember-300);
}

.blazor-error-ui__text {
    font-size: var(--text-sm);
    color: var(--color-silver-300);
}

#blazor-error-ui .reload {
    flex: none;
    padding: 6px 20px;
    border: 1px solid var(--color-ember-400);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-ember-800), var(--color-ember-600));
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 0 18px rgb(234 88 12 / 0.35);
    transition: box-shadow var(--transition-fast);
}

#blazor-error-ui .reload:hover,
#blazor-error-ui .reload:focus-visible {
    box-shadow: 0 0 30px rgb(234 88 12 / 0.6);
}

#blazor-error-ui .dismiss {
    flex: none;
    width: 2rem;
    height: 2rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-silver-400);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

#blazor-error-ui .dismiss:hover,
#blazor-error-ui .dismiss:focus-visible {
    color: var(--color-silver-100);
    border-color: rgb(249 115 22 / 0.4);
}

@media (max-width: 560px) {
    .blazor-error-ui__card {
        flex-wrap: wrap;
    }

    .blazor-error-ui__copy {
        flex-basis: calc(100% - 3.5rem);
    }

    #blazor-error-ui .reload {
        flex: 1;
        text-align: center;
    }
}

@keyframes blazor-error-ui-rise {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

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

/* Admin control room ------------------------------------------------------ */

.admin-shell {
    --admin-border: rgb(var(--aug-400-rgb) / 0.18);
    --admin-border-strong: rgb(var(--aug-400-rgb) / 0.38);
    --admin-surface: linear-gradient(145deg, rgb(14 20 40 / 0.94), rgb(7 10 24 / 0.96));
    --admin-surface-soft: rgb(12 18 36 / 0.76);
    min-height: 100vh;
    color: var(--color-silver-100);
}

.admin-shell .mud-layout {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    background: transparent;
}

.admin-appbar {
    height: 64px !important;
    /* 20px puts the menu button's centre over the drawer's nav icons. */
    padding: 0 20px !important;
    border-bottom: 1px solid var(--admin-border) !important;
    background: rgb(5 8 20 / 0.96) !important;
    box-shadow: 0 12px 40px rgb(0 0 0 / 0.24) !important;
}

/*
    MudBlazor sizes the toolbar inside the bar to 48px (appbar height minus a quarter) and adds its
    own gutters, so in a 64px bar everything rode high and sat further in than the padding above says.
*/
.admin-appbar .mud-toolbar-appbar {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
}

/* The menu button and the logout button share one square, so they line up. */
.admin-menu-button,
.admin-logout-button {
    width: 38px;
    height: 38px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 10px !important;
    font-size: 1.25rem !important;
}

.admin-menu-button.hamburger-btn:hover {
    transform: none;
}

.admin-appbar__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-left: 10px;
}

.admin-appbar__brandcopy {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.admin-appbar__eyebrow,
.admin-hero__eyebrow,
.admin-section-heading__eyebrow {
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: var(--weight-extrabold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--aug-300);
}

.admin-appbar__title {
    margin-top: 4px;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: var(--weight-extrabold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The current section: set off from the brand by a divider, with a lit dot like a live channel. */
.admin-appbar__route {
    align-items: center;
    gap: 10px;
    height: 30px;
    margin-left: 22px;
    padding-left: 22px;
    border-left: 1px solid var(--admin-border-strong);
    font-family: var(--font-heading);
    font-size: 0.86rem;
    font-weight: var(--weight-extrabold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-white);
}

.admin-appbar__route span {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--aug-300);
    box-shadow: 0 0 10px var(--aug-300), 0 0 2px var(--aug-200, var(--aug-300));
}

/* The background world dots (WorldSwitch), set off from the identity like the route is from the brand. */
.admin-appbar .world-switch {
    margin-right: 14px;
    padding-right: 14px;
    border-right: 1px solid var(--admin-border-strong);
}

.admin-appbar__identity {
    align-items: center;
    gap: 9px;
    margin-right: 12px;
    font-size: 0.76rem;
}

.admin-appbar__identity span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.admin-appbar__identity small {
    color: var(--color-silver-400);
}

.admin-appbar__status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pur-400);
    box-shadow: 0 0 10px var(--pur-400);
}

/* MudBlazor clips the drawer under a Dense app bar (48px); ours is forced to 64px above. */
.admin-drawer.mud-drawer-clipped-always {
    top: 64px !important;
    height: calc(100% - 64px) !important;
}

.admin-drawer {
    border-right: 1px solid var(--admin-border) !important;
    background: rgb(5 8 20 / 0.94) !important;
}

.admin-nav {
    padding: 10px 10px 20px !important;
}

.admin-nav__label {
    display: none !important;
}

.admin-nav__group {
    margin: 13px 14px 5px;
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: var(--weight-extrabold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-silver-500);
}

.admin-nav .mud-nav-link {
    min-height: 38px;
    margin: 1px 0;
    border: 1px solid transparent;
    border-radius: 10px;
}

.admin-nav .mud-nav-link:hover {
    border-color: var(--admin-border);
    background: rgb(var(--aug-600-rgb) / 0.1) !important;
}

.admin-nav .mud-nav-link.active {
    border-color: var(--admin-border-strong);
    color: var(--color-white) !important;
    background: linear-gradient(90deg, rgb(var(--aug-700-rgb) / 0.44), rgb(var(--aug-600-rgb) / 0.12)) !important;
    box-shadow: inset 3px 0 0 var(--aug-400), 0 0 24px rgb(var(--aug-600-rgb) / 0.12);
}

.admin-nav .mud-nav-link.active .mud-icon-root {
    color: var(--aug-300) !important;
}

.admin-main {
    padding-top: 64px !important;
    background: transparent !important;
}

.admin-main__content {
    margin-top: 0 !important;
    padding: 28px 28px 72px !important;
}

.admin-shell .fantasy-card {
    overflow: hidden;
    border: 1px solid var(--admin-border) !important;
    border-radius: 18px !important;
    background: var(--admin-surface) !important;
    box-shadow: 0 24px 70px rgb(0 0 0 / 0.24), inset 0 1px 0 rgb(255 255 255 / 0.03) !important;
}

.admin-shell .fantasy-card::before,
.admin-shell .fantasy-card::after {
    display: none;
}

.admin-shell .pf-section-title {
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-extrabold) !important;
    letter-spacing: 0.01em;
}

.admin-shell .pf-section-title::after {
    width: 76px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--aug-400), var(--pur-400), transparent);
    box-shadow: 0 0 14px rgb(var(--aug-500-rgb) / 0.45);
}

.admin-shell .mud-table-container {
    overflow: hidden;
    border: 1px solid rgb(148 163 184 / 0.12);
    border-radius: 12px;
}

.admin-shell .mud-table {
    background: rgb(4 7 17 / 0.4) !important;
}

.admin-shell .mud-table-head {
    background: rgb(var(--aug-800-rgb) / 0.2);
}

.admin-shell .mud-table-head .mud-table-cell {
    height: 48px;
    color: var(--color-silver-300) !important;
}

.admin-shell .mud-table-body .mud-table-row {
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.admin-shell .mud-table-body .mud-table-row:hover {
    background: rgb(var(--aug-600-rgb) / 0.09) !important;
}

.admin-shell .mud-table-cell {
    border-color: rgb(148 163 184 / 0.1) !important;
}

.admin-shell .mud-input-control {
    margin-top: 5px;
}

.admin-shell .mud-input-outlined-border {
    border-color: rgb(148 163 184 / 0.2) !important;
    border-radius: 10px !important;
}

.admin-shell .mud-input-root:focus-within .mud-input-outlined-border {
    border-color: var(--aug-400) !important;
    box-shadow: 0 0 0 3px rgb(var(--aug-600-rgb) / 0.13);
}

.admin-shell .mud-button-root {
    min-height: 38px;
    border-radius: 9px !important;
}

.admin-shell .mud-button-filled-primary {
    background: linear-gradient(135deg, var(--aug-700), var(--aug-500)) !important;
    box-shadow: 0 8px 24px rgb(var(--aug-600-rgb) / 0.25);
}

.admin-shell .mud-button-filled-primary:hover {
    box-shadow: 0 10px 30px rgb(var(--aug-500-rgb) / 0.42);
}

.admin-shell .mud-alert,
.admin-shell .mud-expand-panel {
    border: 1px solid rgb(148 163 184 / 0.14);
    border-radius: 12px !important;
    background: rgb(8 12 27 / 0.78) !important;
}

.admin-shell .mud-expand-panel {
    margin-bottom: 8px;
    overflow: hidden;
}

.admin-shell pre,
.admin-shell .puzzle-editor-wrapper,
.admin-shell .ai-chat-log,
.admin-shell .chat-history-log {
    border-color: rgb(148 163 184 / 0.16) !important;
    border-radius: 12px !important;
    background: rgb(3 6 15 / 0.7);
}

.admin-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin: 10px 0 28px;
    padding: 34px 36px;
    border: 1px solid var(--admin-border);
    border-radius: 20px;
    background:
        radial-gradient(circle at 85% 20%, rgb(var(--aug-500-rgb) / 0.22), transparent 32%),
        radial-gradient(circle at 10% 120%, rgb(var(--pur-500-rgb) / 0.12), transparent 38%),
        var(--admin-surface);
    box-shadow: 0 28px 80px rgb(0 0 0 / 0.3);
}

.admin-hero__title {
    margin-top: 8px !important;
    font-family: var(--font-display) !important;
    font-size: clamp(2.4rem, 5vw, 4rem) !important;
    line-height: 0.95 !important;
    text-shadow: 0 0 28px rgb(var(--aug-500-rgb) / 0.4);
}

.admin-hero__lead {
    max-width: 700px;
    margin-top: 14px !important;
    color: var(--color-silver-300);
}

.admin-hero__action {
    flex: 0 0 auto;
}

.admin-stat-grid {
    margin-bottom: 30px !important;
}

.admin-stat {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 0 14px;
    height: 100%;
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    background: var(--admin-surface-soft);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-stat:hover {
    transform: translateY(-3px);
    border-color: var(--admin-border-strong);
    box-shadow: 0 16px 40px rgb(0 0 0 / 0.28), 0 0 28px rgb(var(--aug-600-rgb) / 0.1);
}

.admin-stat__icon {
    grid-row: 1 / 3;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: var(--aug-300);
    background: rgb(var(--aug-600-rgb) / 0.15);
}

.admin-stat__value {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.admin-stat__label {
    margin-top: 4px;
    color: var(--color-silver-400);
    font-size: 0.75rem;
}

.admin-stat__arrow {
    grid-row: 1 / 3;
    align-self: center;
    color: var(--color-silver-500);
}

.admin-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 2px 14px;
}

.admin-section-heading--spaced {
    margin-top: 34px;
}

.admin-section-heading .mud-typography-h5 {
    margin-top: 4px;
    font-family: var(--font-heading);
    font-weight: var(--weight-extrabold);
}

.admin-action-grid {
    align-items: stretch;
}

.admin-action-card {
    display: flex;
    flex-direction: column;
}

.admin-action-card__icon {
    display: grid;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    place-items: center;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    color: var(--aug-300);
    background: rgb(var(--aug-600-rgb) / 0.1);
}

.admin-action-card .mud-button-root {
    align-self: flex-start;
    margin-top: auto !important;
}

.admin-dialog {
    border: 1px solid rgb(var(--aug-400-rgb) / 0.3) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgb(14 20 40 / 0.99), rgb(6 9 22 / 0.99)) !important;
    box-shadow: 0 28px 90px rgb(0 0 0 / 0.65), 0 0 50px rgb(var(--aug-600-rgb) / 0.14) !important;
}

.admin-dialog--wide {
    width: min(760px, calc(100vw - 32px));
    max-width: 760px !important;
}

.admin-dialog .mud-dialog-title {
    border-bottom: 1px solid rgb(148 163 184 / 0.12);
    font-family: var(--font-heading);
}

.admin-dialog .mud-dialog-actions {
    border-top: 1px solid rgb(148 163 184 / 0.12);
    padding: 16px 24px;
}

@media (max-width: 959.98px) {
    .admin-main__content {
        padding: 22px 18px 56px !important;
    }

    .admin-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 28px 24px;
    }

    .admin-shell .fantasy-card {
        padding: 22px !important;
    }

    .admin-shell .fantasy-card > .mud-stack-row:first-child,
    .admin-shell .admin-section-heading {
        align-items: flex-start !important;
        flex-wrap: wrap;
    }
}

@media (max-width: 599.98px) {
    .admin-appbar {
        padding: 0 10px !important;
    }

    .admin-appbar__brandcopy {
        display: none;
    }

    .admin-main__content {
        padding: 16px 10px 44px !important;
    }

    .admin-hero {
        margin-top: 4px;
        padding: 24px 18px;
        border-radius: 16px;
    }

    .admin-hero__action {
        width: 100%;
    }

    .admin-shell .fantasy-card {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .admin-shell .mud-table-root {
        min-width: 660px;
    }

    .admin-shell .mud-table-container {
        overflow-x: auto;
    }
}

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

.validation-message {
    color: #e50000;
}

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

    .mud-navmenu {
        padding-top: 8px;
    }

    .mud-nav-link {
        margin: 2px 6px;
        border: 1px solid transparent;
        border-radius: 8px;
    }

        .mud-nav-link:hover {
            background: rgba(165, 43, 217, 0.16) !important;
            border-color: rgba(165, 43, 217, 0.38);
        }

        .mud-nav-link.active {
            background: linear-gradient(90deg, rgba(121, 41, 198, 0.42), rgba(53, 39, 167, 0.36)) !important;
            border-color: rgba(255, 25, 90, 0.45);
        }
}

/*
  Printing from the admin shell (the end-of-day sheet on /admin/coaching): drop the chrome and the
  backdrop, and print dark-on-white whatever the screen theme.
*/
@media print {
    .admin-shell .admin-appbar,
    .admin-shell .admin-drawer,
    .admin-shell canvas {
        display: none !important;
    }

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

    .admin-shell,
    .admin-shell * {
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
}