/* Auction Bot site — global tokens and base styles.
   Source of truth: docs/design/site-redesign/DESIGN_SYSTEM.md (dark theme only). */

/* #175: self-hosted fonts (replaces the Google Fonts CDN link in App.razor) — latin-subset variable
   woff2 files under wwwroot/fonts, each covering the weight range App.razor used to request from Google.
   SIL Open Font License 1.1 (Space Grotesk, Public Sans, JetBrains Mono are all OFL-licensed). */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('fonts/space-grotesk-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/public-sans-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
}

:root {
    --bg-page: #111019;
    --bg-surface: #151521;
    --bg-sidebar: #0d0c14;
    --bg-code: #0b0b12;
    --brand-gradient: linear-gradient(82deg, #03b1ca, #0fa38d);
    --accent-cyan: #03b1ca;
    --accent-teal: #0fa38d;
    --cyan-soft: #5fc9da;
    --teal-soft: #4fd0b6;
    --text-primary: #ffffff;
    --text-body: #c3c7d9;
    --text-secondary: #9aa0b8;
    --text-tertiary: #8898aa;
    --text-muted: #7b8096;
    --text-disabled: #3c4055;
    --warn: #e8b46a;
    --danger: #c95b4d;
    --danger-soft: #e07a6c;
}

html,
body {
    margin: 0;
    background: var(--bg-page);
    color: var(--text-secondary);
    font-family: 'Public Sans', sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(232, 180, 106, 0.12);
    border-top: 1px solid rgba(232, 180, 106, 0.35);
    color: var(--warn);
    padding: 12px 18px;
    font-size: 13.5px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

/* #171 — no :focus-visible styling existed anywhere, so the browser's default ring (faint on
   these dark backgrounds) was the only indicator for keyboard users. A bare :focus-visible
   selector applies to every focusable element site-wide, including MudBlazor's own components
   (outline doesn't affect layout and coexists fine with Mud's own box-shadow-based focus styles,
   so this doesn't need to special-case which controls are and aren't migrated). No border-radius
   here — modern browsers already round the outline to match each element's own radius (pills,
   circular avatars, cards), so setting one globally would override their actual shape on focus. */
:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

/* Shared component primitives (DESIGN_SYSTEM.md §6) — utility classes layered over plain
   elements or MudBlazor components, per the "what MudBlazor gives you vs. hand-roll"
   guidance in DESIGN_SYSTEM.md §4. Badge/InfoBanner/SaveBar are Razor components instead,
   since they carry structured markup, not just styling. */

.btn-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-gradient);
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    transition: filter 140ms ease-out;
}

.btn-gradient:hover {
    filter: brightness(1.08);
}

.btn-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 140ms ease-out;
}

.btn-outlined:hover {
    border-color: rgba(255, 255, 255, 0.35);
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(201, 91, 77, 0.5);
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--danger-soft);
    cursor: pointer;
}

.btn-small {
    padding: 4px 15px;
    font-size: 12.5px;
    border-radius: 7px;
}

.pill-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 99px;
    padding: 5px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-body);
    background: transparent;
    cursor: pointer;
}

.pill.active {
    background: var(--brand-gradient);
    border-color: transparent;
    color: #ffffff;
}

.card {
    background: var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 22px;
}

.table-container {
    background: var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    overflow: hidden;
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
}

.table-container th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 11px 22px;
}

.table-container td {
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 14px 22px;
}

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

/* #144 (Mobile [P·2h], docs-page-specific pass): below 640px a wide reference table (parameters, settings,
   fees) stacks each row into a label/value card instead of clipping or squeezing columns — the header row
   is hidden and each cell's own data-label attribute re-supplies its column heading via ::before. Scoped
   to .table-container specifically since only the /docs pages use this class (dashboard pages use their
   own per-page table classes), so this can't affect anything outside docs. */
@media (max-width: 640px) {
    .table-container table,
    .table-container thead,
    .table-container tbody,
    .table-container th,
    .table-container td,
    .table-container tr {
        display: block;
    }

    .table-container thead {
        position: absolute;
        left: -9999px;
    }

    .table-container tr {
        padding: 10px 0;
    }

    .table-container tr:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .table-container td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 6px 16px;
        border-bottom: none;
        text-align: right;
    }

    .table-container td::before {
        content: attr(data-label);
        flex: none;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-tertiary);
        text-align: left;
    }

    /* A td with more than one direct child (e.g. Settings.razor's name+pill or value+note cells) would
       otherwise have justify-content: space-between spread those children apart from each other instead
       of keeping them as one right-aligned value — wrapping the payload in .cell-value keeps it a single
       flex item so space-between only ever separates the label (::before) from the value. */
    .table-container td > .cell-value {
        min-width: 0;
        margin-left: auto;
    }
}

/* Visually hidden but still announced by screen readers (standard clip-based sr-only pattern) — used
   by #290's aria-live load-more counts, which must not change visible layout. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* #292 review follow-up: a MudTooltip only reacts to focus on its own ChildContent (ShowOnFocus), so
   wrapping plain text — a span/div with no naturally focusable descendant, e.g. a truncated title or a
   disabled button — needs tabindex="0" itself or the tooltip is unreachable by keyboard entirely.
   Pair tabindex="0" with this class for the visible focus ring a focusable-but-inert element still
   needs (WCAG 2.4.7). Global since it's shared across several pages' tooltip triggers. */
.a11y-tooltip-target:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
    border-radius: 4px;
}

/* #290: shared MudTable restyle to the DESIGN_SYSTEM.md §6 "Table container" recipe. Global (not a
   page's own .razor.css) because MudTable renders its DOM from MudBlazor's own component tree — a
   consuming page's Blazor CSS-isolation scope hash never reaches into it (same lesson as #289's
   isolation fixes). Apply via Class="app-table" on <MudTable>/<MudSimpleTable> (pair with
   Elevation="0" Square="false" so Mud's own Paper shadow/corners don't fight this card chrome). */
/* overflow: hidden lives on .app-table only (the outer div MudTable's Class param lands on) so the
   rounded corners still clip the header/rows underneath. .mud-table-container is the INNER div
   MudBlazor itself sets overflow-x: auto on for horizontal scroll — a more-specific override here
   would silently defeat that (a wide table or a long Audit diff would just get clipped instead of
   scrolling), so it only gets background/border, never overflow. */
.app-table {
    background: var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    overflow: hidden;
}

.app-table .mud-table-container {
    background: var(--bg-surface);
}

.app-table {
    margin-top: 20px;
}

.app-table .mud-table-toolbar {
    background: transparent;
    padding-left: 22px;
    padding-right: 22px;
}

.app-table .mud-table-head .mud-table-cell {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 22px;
}

.app-table .mud-table-body .mud-table-cell {
    font-size: 14.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 14px 22px;
}

.app-table .mud-table-body tr.mud-table-row:last-child .mud-table-cell {
    border-bottom: none;
}

/* #291: shared MudChipSet restyle so a chip looks exactly like the legacy .pill/.pill.active button
   it replaces. Global (not a page's own .razor.css): MudChip renders from MudBlazor's own component
   tree, so no page's Blazor CSS-isolation scope hash reaches it (same #289/#290 lesson). Apply
   Class="pill-chips" on <MudChipSet> — MudBlazor itself marks the selected chip with
   mud-chip-selected, so no manual per-chip class-swap is needed to show the active state. */
.pill-chips .mud-chip {
    height: auto;
    margin: 0;
    padding: 5px 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-body);
    background: transparent;
    cursor: pointer;
}

.pill-chips .mud-chip.mud-chip-selected {
    background: var(--brand-gradient);
    border-color: transparent;
    color: #ffffff;
}

/* Commands page's /group pills — monospace, smaller (was .pill-mono); a per-chip class since a pill
   row can mix plain and mono chips (e.g. "All" / "Message & user apps" stay plain). */
.pill-chips .mud-chip.pill-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

/* #291: FAQs/Commands docs-page search fields and pill-row spacing. AppTextField's own Outlined
   variant already supplies the app-standard input chrome (border/background/focus ring) — these rules
   only control width/spacing, they don't re-implement input chrome. Global for the same reason as
   .pill-chips: Class lands on a child-component-rendered element these pages don't author directly. */
.faqs-search {
    display: block;
    max-width: 320px;
    margin-bottom: 16px;
}

.commands-search {
    display: block;
    max-width: 420px;
    margin-bottom: 20px;
}

.faqs-pills {
    padding-bottom: 16px;
}

.commands-filters {
    padding: 8px 0 16px;
}

.concepts-tabs {
    padding: 20px 0 28px;
}

/* #291: FAQs accordion — MudExpansionPanels restyled to the existing card-per-question look (own
   card chrome per panel, cyan border while expanded, Space Grotesk question heading). Global for the
   same reason as .app-table: MudExpansionPanel renders its own DOM. */
.faqs-accordion .mud-expand-panel {
    background: var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    margin-bottom: 16px;
    transition: border-color 140ms ease-out;
}

.faqs-accordion .mud-expand-panel:last-child {
    margin-bottom: 0;
}

.faqs-accordion .mud-expand-panel.mud-panel-expanded {
    border-color: rgba(3, 177, 202, 0.35);
}

.faqs-accordion .mud-expand-panel-header {
    padding: 20px 24px;
    min-height: 0;
}

.faqs-accordion .mud-expand-panel-text {
    display: flex;
    align-items: center;
    width: 100%;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

.faqs-accordion .mud-expand-panel-text > span:first-child {
    flex: 1;
}

.faqs-accordion .mud-expand-panel-content {
    padding: 0 24px 20px;
}

/* Shared lede text — reused by any dashboard page, not just the guild picker (Blazor CSS isolation means
   this needs to live globally, not in one page's own .razor.css, to actually apply where it's used:
   originally only defined in GuildPicker.razor.css, which silently didn't style Settings.razor's or
   Roles.razor's own lede text since scoped CSS doesn't cross component boundaries). The sibling
   page-status empty-state class this comment used to describe was retired in favor of the shared
   EmptyState component (#288). */
.picker-lede {
    color: var(--text-secondary);
    font-size: 15px;
    margin: 0;
    max-width: 660px;
}

.picker-lede strong {
    color: var(--text-body);
}

/* Reference-page primitives (DESIGN_SYSTEM.md §6) — global from the start rather than scoped to the
   commands detail page, since /docs/settings [P·1f] and /docs/api [P·2c] will want the same eyebrow/
   gate-pill/code-block treatment (same cross-page-reuse trap picker-lede/requirements-error-example
   already document above). */
.eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-muted);
}

.gate-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(3, 177, 202, 0.1);
    border: 1px solid rgba(3, 177, 202, 0.3);
    color: var(--cyan-soft);
    border-radius: 99px;
    padding: 4px 13px;
    font-size: 12.5px;
    font-family: 'JetBrains Mono', monospace;
}

.code-block {
    display: block;
    background: var(--bg-code);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 18px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    color: var(--text-body);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Inline code styling for a literal command/message example — shared across pages (originally scoped to
   Requirements.razor.css only, which silently didn't style Templates.razor's own use of the same class,
   the same cross-component CSS-isolation trap picker-lede/picker-status hit earlier). */
.requirements-error-example {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--warn);
}

/* #294: prefers-reduced-motion. This file is the one place a global override can reach MudBlazor's own
   shipped transitions (MudBlazor.min.css, loaded just before this file in App.razor so specificity ties
   go to these rules) — a component's own scoped CSS can't reach into a child component's rendered markup
   for a package-level override like this, even with ::deep, since ::deep only applies within one
   component's own scope hash, not globally across every page that renders a MudDrawer. Targets the
   drawer's slide-in/out (used by every nav/settings drawer below the Md breakpoint) and its scrim fade;
   the handful of local hover-transition rules above (button border/filter, ~140ms) are left alone —
   they're a color fade, not motion, and don't trigger vestibular discomfort the way sliding panels do. */
@media (prefers-reduced-motion: reduce) {
    .mud-drawer-temporary,
    .mud-overlay {
        transition: none !important;
    }
}