/* Billetsalg semantic component classes.
   Only --bs-* semantic tokens appear here — no hex, no --mud-palette-*, no magic numbers.
   Tokens are defined in tokens.generated.css, which must be loaded first. */

/* ── Typography ────────────────────────────────────────────────── */
/* The application-wide font. MudBlazor sets its own components from the same token via
   MudTheme.Typography, so this rule is what covers everything outside MudBlazor: plain
   semantic markup, scoped component CSS and unstyled browser controls. Loaded after
   MudBlazor.min.css, so it also wins over MudBlazor's own body rule. */

html,
body {
    font-family: var(--bs-font-family-sans);
}

/* ── Text ──────────────────────────────────────────────────────── */

.bs-text-primary {
    color: var(--bs-color-text-primary);
}

.bs-text-secondary {
    color: var(--bs-color-text-secondary);
}

.bs-link {
    color: var(--bs-color-action-secondary);
    text-decoration: underline;
}

.bs-link:hover {
    color: var(--bs-color-action-secondary-hover);
}

.bs-link:active {
    color: var(--bs-color-action-secondary-pressed);
}

/* ── Focus — one ring for every interactive surface ────────────── */

.bs-btn:focus-visible,
.bs-link:focus-visible,
.bs-selectable:focus-visible {
    outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
    outline-offset: var(--bs-focus-ring-offset);
}

/* <FocusOnNavigate Selector="h1" /> moves focus to the page heading after every navigation, so
   screen readers announce the new page instead of leaving the cursor where the old one was. To
   make a heading focusable it is given tabindex="-1", which keeps it out of the tab order — the
   ring the browser then paints marks a move the user never made, and shows up on plain page load.
   Suppressed only for that case; anything a keyboard can actually reach keeps its ring. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

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

/* Flat buttons everywhere: no drop shadow in any state.
   Per button MudBlazor expresses this as DropShadow="false", which just adds its own
   .mud-button-disable-elevation class — but there is no global switch, and setting the parameter
   at every call site is not maintainable. These selectors mirror exactly what that class does
   (base + hover + focus-visible + active, for buttons, icon buttons, FABs, groups and pagination).
   Specificity matches MudBlazor's own rules and this file loads after MudBlazor.min.css, so it
   wins on source order rather than !important. */

.mud-button-root,
.mud-button-root:hover,
.mud-button-root:focus-visible,
.mud-button-root:active,
/* Also matched on its own: the frontpage search submit is a native <button> that borrows the
   Mud classes so the form still posts without JavaScript, so it never gets .mud-button-root. */
.mud-button-filled,
.mud-button-filled:hover,
.mud-button-filled:focus-visible,
.mud-button-filled:active,
.mud-fab,
.mud-fab:hover,
.mud-fab:focus-visible,
.mud-fab:active,
.mud-button-group-filled,
.mud-button-group-filled .mud-button-root:hover,
.mud-button-group-filled .mud-button-root:focus-visible,
.mud-button-group-filled .mud-button-root:active,
.mud-pagination-filled .mud-pagination-item .mud-button {
    box-shadow: none;
}
/* Colour comes from the MudBlazor palette via BsButton's intent mapping; these rules add the
   Billetsalg-specific shape and the hover/pressed steps the palette does not express. */

.bs-btn {
    border-radius: var(--bs-button-radius);
    text-transform: none;
}

/* Admin section toolbars: sentence case + card radius (not customer pill buttons). */
.bs-admin-toolbar-btn.mud-button-root {
    border-radius: var(--bs-radius-md);
    letter-spacing: normal;
    white-space: nowrap;
}

.bs-admin-toolbar-btn .mud-button-label {
    text-transform: none;
    font-weight: 500;
}

.bs-btn-primary:hover {
    background-color: var(--bs-color-action-primary-hover);
}

.bs-btn-primary:active {
    background-color: var(--bs-color-action-primary-pressed);
}

.bs-btn-secondary:hover {
    border-color: var(--bs-color-action-secondary-hover);
    color: var(--bs-color-action-secondary-hover);
}

.bs-btn-secondary:active {
    border-color: var(--bs-color-action-secondary-pressed);
    color: var(--bs-color-action-secondary-pressed);
}

.bs-btn-destructive {
    border-color: var(--bs-color-action-destructive);
    color: var(--bs-color-action-destructive);
}

.bs-btn-destructive:hover {
    border-color: var(--bs-color-action-destructive-hover);
    color: var(--bs-color-action-destructive-hover);
}

.bs-btn-destructive:active {
    border-color: var(--bs-color-action-destructive-pressed);
    color: var(--bs-color-action-destructive-pressed);
}

/* ── Cards and editorial surfaces ──────────────────────────────── */

.bs-card {
    background: var(--bs-color-surface-default);
    /* border.subtle is decorative by design — never the sole identifier of a control */
    border: 1px solid var(--bs-color-border-subtle);
    border-radius: var(--bs-radius-lg);
    padding: var(--bs-space-6);
}

.bs-card--accent-green {
    background: var(--bs-color-accent-surface-green);
    border-color: transparent;
}

.bs-card--accent-blue {
    background: var(--bs-color-accent-surface-blue);
    border-color: transparent;
}

.bs-card--accent-cream {
    background: var(--bs-color-accent-surface-cream);
    border-color: transparent;
}

.bs-card--accent-red {
    background: var(--bs-color-accent-surface-red);
    border-color: transparent;
}

/* ── Selectable options ────────────────────────────────────────── */
/* Selection is its own semantic concept. It uses the navigation blue, never Success/Error,
   and never relies on colour alone — callers must also render a state icon. */

.bs-selectable {
    background: var(--bs-color-surface-default);
    border: 1px solid var(--bs-color-border-default);
    border-radius: var(--bs-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--bs-space-2);
    padding: var(--bs-space-3) var(--bs-space-4);
}

.bs-selectable:hover {
    background: var(--bs-color-surface-subtle);
    border-color: var(--bs-color-border-strong);
}

.bs-selectable--selected {
    background: var(--bs-color-accent-surface-blue);
    border: 2px solid var(--bs-color-border-focus);
}

.bs-selectable--selected:hover {
    border-color: var(--bs-color-action-secondary-hover);
}

.bs-selectable[aria-disabled="true"] {
    background: var(--bs-color-surface-subtle);
    border-color: var(--bs-color-border-subtle);
    color: var(--bs-color-text-disabled);
    cursor: not-allowed;
}

.bs-selectable[aria-invalid="true"] {
    border-color: var(--bs-color-border-error);
}

/* ── Inputs ────────────────────────────────────────────────────── */

.bs-input .mud-input-outlined-border {
    border-color: var(--bs-input-border);
}

.bs-input[aria-invalid="true"] .mud-input-outlined-border {
    border-color: var(--bs-color-border-error);
}