/* ============================================================
   MudBlazor integration
   ============================================================

   Global adaptations of MudBlazor's own rendered markup - the cases where the
   framework's output has to be reached from outside the component that renders
   it, and where CSS isolation therefore cannot do the job.

   Only adaptations that are true of MudBlazor generally belong here. Anything
   anchored on a consuming application's own class stays with that application,
   in a stylesheet linked after this one; anything that belongs to exactly one
   component stays in that component's .razor.css; and anything expressible
   through MudTheme belongs in the theme rather than in CSS.

   Load order: MudBlazor.min.css must be linked BEFORE this file, so these rules
   win ties by cascade order. The !important flags date from an arrangement where
   the framework was linked last and they were the only way to take effect. The
   table row hover still needs its flag outright - MudBlazor's own hover rule is
   `.mud-table-hover .mud-table-container .mud-table-root .mud-table-body
   .mud-table-row:hover` at (0,6,0), which order alone cannot beat. For the
   others, removing the flag is a per-declaration visual question, not cleanup.
   ============================================================ */

/* Card radius and border suppression, without touching MudBlazor's padding.

   `border-style: none` is what this rule has always done, written plainly.

   It used to read `border: 1px solid var(--border) !important`, and --border is
   defined nowhere and never has been. An invalid var() in a *shorthand* does not
   discard the declaration: it sets every longhand to the guaranteed-invalid
   value, which computes to `unset`, and `unset` for border-style is `none`.
   Carrying !important, that declaration was therefore actively suppressing
   MudBlazor's own card borders across the application - not, as it appears,
   doing nothing. Deleting it made a 1px border appear on every MudCard on seven
   routes, which is how this was found.

   So the border is stated rather than removed, and stated as the effect rather
   than as a width and a colour that never applied. */
.mud-elevation-1,
.mud-elevation-2,
.mud-elevation-3,
.mud-elevation-4 {
    border-style: none !important;
    border-radius: var(--ds-radius-lg) !important;
}

/* App bars, excepted. MudAppBar with Elevation="1" (or any level) renders that same
   .mud-elevation-N class, so the rule above was rounding the corners of a full-bleed,
   edge-to-edge header - not a card floating on the page, which is what it was written
   for. The rule above carries !important, so beating it takes an !important of this
   one's own too - specificity alone does not outrank it. With both important, two
   classes beats one, (0,2,0) against (0,1,0), and this wins on that. */
.mud-appbar.mud-elevation-1,
.mud-appbar.mud-elevation-2,
.mud-appbar.mud-elevation-3,
.mud-appbar.mud-elevation-4 {
    border-radius: 0 !important;
}

/* Table header and row hover, matching the plain-table rules in
   styles/foundations/base.css. */
/* There was a `font-weight: 600` here, to match the plain-table rule in base.css.
   It never took effect in any application that has used this file: MudBlazor sets
   500 from `.mud-table-root .mud-table-head .mud-table-cell` at (0,3,0), against
   this rule's (0,2,0), so no link order could win it - only raising the specificity
   or an !important, and neither is worth doing to a weight nobody has missed.
   Removed rather than escalated; MudBlazor's 500 is what these headers render and
   have always rendered. Making them 600 is a visual decision, not a repair. */
/* Painted from the MudBlazor palette, not the --ds-* tokens, because the palette is what follows
   an application's dark mode (Admin, PublicAPI.Admin) and the tokens are light-only: the token
   versions left white header rows - and a white flash on row hover - in dark mode. In the light
   palette these resolve to the token values: TextPrimary is --ds-text-body, and 40% of
   BackgroundGray over Surface is within one shade of --ds-surface-alt. */
.mud-table-head .mud-table-cell {
    background: color-mix(in srgb, var(--mud-palette-background-gray) 40%, var(--mud-palette-surface));
    font-size: var(--ds-text-13);
    color: var(--mud-palette-text-primary);
}

.mud-table-body .mud-table-row:hover {
    background: color-mix(in srgb, var(--mud-palette-background-gray) 40%, var(--mud-palette-surface)) !important;
}

/* Icon buttons, restored to a circle.

   MudIconButton renders both `mud-button-root` and `mud-icon-button` on the same
   element. MudBlazor's own stylesheet gives the first `border-radius:
   var(--mud-default-borderradius)` and the second `border-radius: 50%` - equal
   specificity, (0,1,0) each, so whichever rule is later in MudBlazor's own file
   wins the tie, and in the shipped stylesheet that is the button rule, not the
   circle. It goes unnoticed at MudBlazor's own 4px default; it does not at a
   theme's chosen radius, where every icon button in the application - the
   hamburger, the drawer toggles, every row action - renders as a rounded square
   instead of a circle.

   Two classes beats one on specificity alone, (0,2,0) against (0,1,0), so this
   wins without needing an !important and without touching MudBlazor's own
   stylesheet - the circle was always the intended shape; this is the other
   half of the same rule MudBlazor never finished applying. */
.mud-icon-button.mud-button-root {
    border-radius: 50%;
}

/* An outlined button with no Color (Color.Default). MudBlazor draws its edge in the
   primary text colour at the theme's border opacity - a solid near-black outline that read
   as a stray border around neutral actions. The system's role for that edge is
   --ds-border-emphasis ("outlined buttons, hover and drop states", tokens.css), darkening
   to --ds-border-hover on hover. Coloured outlines (Primary, Error, Inherit, ...) keep
   MudBlazor's own colour; a button on a coloured bar should use Color.Inherit.
   (0,2,0) beats MudBlazor's (0,1,0) `.mud-button-outlined` on specificity, no !important. */
.mud-button-outlined.mud-button-outlined-default {
    border-color: var(--ds-border-emphasis);
}

.mud-button-outlined.mud-button-outlined-default:hover {
    border-color: var(--ds-border-hover);
}

/* The keyboard focus ring (base.css, --ds-focus-ring) is the accent, which vanishes on an
   app bar painted in that same accent. Controls on the bar take their own ink, which is the
   bar's (Color.Inherit), for the ring. A custom property, so Ds* components on the bar (the
   wordmark) follow it too. */
.mud-appbar {
    --ds-focus-ring: currentColor;
}

/* Fields labelled above the input (DsField). The label is a real <label> outside
   MudBlazor's control, so the helper and error line should start at the same edge as
   the label rather than indented under the input text. MudBlazor puts its px-2
   spacing utility on the helper container, and its utilities are !important, so the
   flag is the only way to win; order and specificity cannot. */
.ds-field .mud-input-control-helper-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ds-field .mud-input-control {
    margin-top: 0;
}

/* A one-time code typed into a MudTextField: centred, spaced digits. Put
   Class="ds-otp-field" on the MudTextField. MudBlazor sets the input's alignment, size
   and family from its own input rules at higher specificity, hence the flags. */
.ds-otp-field input {
    text-align: center !important;
    font-size: var(--ds-text-22) !important;
    font-weight: var(--ds-weight-semibold) !important;
    letter-spacing: 0.25em !important;
    font-family: var(--ds-font-mono) !important;
}

/* MudBlazor's table pagination is a nowrap flex toolbar - "Rows per page", the range
   caption and the page buttons on one line. In a narrow content column those three add
   up to more than the column (533px inside 480px on an admin table at 768px), and
   because the toolbar neither wraps nor scrolls, the surplus pushed the whole page
   sideways.

   It wraps instead. The selector is (0,2,0) so it beats MudBlazor's own .mud-toolbar
   height at (0,1,0) on specificity rather than on which stylesheet is linked later, and
   the height has to give way too or a wrapped second line would be cut off by the
   toolbar's fixed height. Nothing changes where the three parts already fit. */
.mud-table-pagination .mud-table-pagination-toolbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 3.25rem;
    row-gap: 4px;
}

/* Wrapping changes what MudBlazor's spacer does: at `flex: 1 1 100%` it claimed a whole line of
   its own, so the caption, select, range and buttons dropped to a second, left-aligned line and
   the rows-per-page select grew to fill it. A zero basis lets it take only the space left on the
   pager's one line, which keeps the controls right-aligned at their own width; they still wrap
   when the column is too narrow for them. */
.mud-table-pagination .mud-table-pagination-spacer {
    flex: 1 1 0;
}

.mud-table-pagination .mud-table-pagination-select {
    flex: 0 0 auto;
}

/* Tab titles are shown exactly as written.

   MudBlazor hard-codes `text-transform: uppercase` on `.mud-tab` (MudTabs / MudTabPanel); unlike the buttons, it does not
   read it from the theme, so MudTheme's Typography.Button.TextTransform = "none" does not reach it and it cannot be fixed
   in the theme. There is no built-in MudBlazor class for it either. Same specificity, (0,1,0), and this file loads after
   MudBlazor.min.css, so cascade order is enough - no !important. Buttons already come out as written through the theme. */
.mud-tab {
    text-transform: none;
}