/* skin-propgenie.css - HB-25796: Admin's cards, tables, inputs, buttons and dialogs take the
   PropGenie Preview v3 component shapes (plan "PropGenie Shell Contract" §04: Radius, Shadows,
   Tables, Inputs/buttons; workplan T2.4-T2.7).

   ONLY UNDER admin_theme = propgenie. _Layout.cshtml links this file only when the theme is on,
   and every rule is ALSO gated on html[data-theme] like site.css, so a classic build is untouched
   twice over. Load order: MudBlazor.min.css, tokens.css, site.css, then this file.

   What lives where:
     AdminTheme.cs   10px default radius, no elevation on resting surfaces (Shadows 1-7), the
                     table palette (hairline, hover, NO stripes) and the button weight. Colours are
                     never declared here as --mud-palette-* variables: they are read, not set.
     this file       the shapes a MudTheme slot cannot express - the card's 14px radius, line and
                     surface gradient, the inset input box, the ghost button, the table header.

   DENSITY (risk §09.5): the admin sets Dense="true" ~380 times, and operators read these grids
   all day. Nothing here adds vertical padding to a dense row or a control. Normal table rows get
   SHORTER (MudBlazor's 16px cell padding becomes the Preview's 12px); dense rows keep MudBlazor's
   6px; text inputs become boxes by adding horizontal padding only. A screen shows at least as
   many rows as before.

   Values come from tokens.css (--pg-*) through site.css's --pa-* aliases where one exists. */

/* ----- Cards and paper (T2.4) -------------------------------------------------------------
   The Preview's .card: a 1px line, the faint --pg-grad-surface gradient over the Surface colour,
   the 14px card radius, and no shadow. MudBlazor's paper family (MudPaper, MudCard, MudTable,
   MudDataGrid) all carry .mud-paper.

   Top-level surfaces only: a paper inside another paper (a table in a card, a card in a dialog)
   is part of its parent's card, and giving it a second line and gradient draws boxes inside
   boxes. Popovers are papers too, but they float - they keep MudBlazor's shadow and get their own
   edge below. */
html[data-theme] .mud-paper:not(.mud-popover):not(.mud-paper .mud-paper):not(.mud-dialog .mud-paper),
html[data-theme] .mud-card:not(.mud-paper .mud-card):not(.mud-dialog .mud-card) {
    border: 1px solid var(--pa-border-soft);
    background-image: var(--pa-card);
    border-radius: var(--pa-radius);
    box-shadow: none;
}

/* Nested papers: the control radius, flat. One that asked to stand out (any elevation, or
   Outlined) keeps a hairline so it still reads as a separate block. */
html[data-theme] .mud-paper .mud-paper:not(.mud-popover),
html[data-theme] .mud-dialog .mud-paper:not(.mud-popover) {
    border-radius: var(--pa-radius-sm);
    box-shadow: none;
}

html[data-theme] .mud-paper .mud-paper:not(.mud-popover):not(.mud-elevation-0),
html[data-theme] .mud-dialog .mud-paper:not(.mud-popover):not(.mud-elevation-0),
html[data-theme] .mud-paper .mud-paper.mud-paper-outlined {
    border: 1px solid var(--pa-border-soft);
}

/* Square="true" is an explicit request for corners; keep it. */
html[data-theme] .mud-paper.mud-paper-square {
    border-radius: 0;
}

/* Expansion panels are not papers, and Shadows 1-7 took away the elevation that was their only
   edge. The group becomes one card; the panels inside keep MudBlazor's dividing line. */
html[data-theme] .mud-expansion-panels:not(.mud-expansion-panels-square) {
    border: 1px solid var(--pa-border-soft);
    border-radius: var(--pa-radius);
    overflow: hidden;
}

html[data-theme] .mud-expansion-panels .mud-expand-panel {
    box-shadow: none;
    background-image: var(--pa-card);
}

html[data-theme] .mud-expansion-panels .mud-expand-panel:last-child {
    border-bottom: 0;
}

/* Menus, select lists and pickers: the control radius and an edge. The shadow stays (elevation
   8 is not flattened) but is invisible on the dark ground, so the edge is what separates the
   list from the page there - the input line, as for the global search dropdown in site.css. */
html[data-theme] .mud-popover.mud-paper {
    border: 1px solid var(--pa-border-soft);
    border-radius: var(--pa-radius-sm);
}

html[data-theme="dark"] .mud-popover.mud-paper {
    border-color: var(--mud-palette-lines-inputs);
}

/* Tooltips are popovers with their own dark plate; an edge on them is noise. */
html[data-theme] .mud-popover.mud-tooltip,
html[data-theme] .mud-popover .mud-tooltip {
    border: 0;
}

/* ----- Dialogs (T2.7, dialog part) ----------------------------------------------------------
   Dialogs follow the card: line, surface gradient, 14px radius. Unlike a card a dialog floats,
   so it keeps a shadow - the Preview's own modal shadow in light, a deeper one in dark where a
   soft shadow vanishes - and MudBlazor's three-layer Material shadow goes. */
html[data-theme] .mud-dialog {
    border: 1px solid var(--pa-border-soft);
    background-image: var(--pa-card);
    border-radius: var(--pa-radius);
    box-shadow: 0 24px 60px -24px rgba(16, 24, 40, .45);
}

html[data-theme="dark"] .mud-dialog {
    border-color: var(--mud-palette-lines-inputs);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9);
}

html[data-theme] .mud-dialog .mud-dialog-title {
    padding: 18px 24px 8px;
}

html[data-theme] .mud-dialog .mud-dialog-actions {
    padding: 12px 16px 16px;
    gap: 8px;
}

/* A full-screen dialog is a page, not a card. */
html[data-theme] .mud-dialog.mud-dialog-fullscreen {
    border: 0;
    border-radius: 0;
}

/* ----- Tables (T2.6) --------------------------------------------------------------------------
   The Preview's table: small uppercase headers in a muted ink, 12px cells, a hairline between
   rows, hover, no stripes. Stripes and the hairline/hover colours are the palette's (AdminTheme.cs
   sets TableStriped transparent), so no page needs Striped edited and no row class loses to a
   new rule here.

   Header ink is TextSecondary, NOT the Preview's --dim: --pg-dim is 3.0:1 on white and a column
   header is text that has to clear 4.5:1 (TextSecondary is 6.0:1 light, 7.9:1 dark). */
html[data-theme] .mud-table-root .mud-table-head .mud-table-cell,
html[data-theme] .mud-simple-table table thead th {
    font-size: 11px;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* MudDataGrid puts its filter row and column menus in the header; their inputs and buttons are
   content, not labels. A sortable header's label is a .mud-button-root too, and stays a label. */
html[data-theme] .mud-table-root .mud-table-head .mud-table-cell :is(.mud-input-control, .mud-button-root:not(.mud-table-sort-label), .mud-chip) {
    font-size: .875rem;
    letter-spacing: normal;
    text-transform: none;
}

/* 12px cells: shorter than MudBlazor's 16px, so a normal table shows more rows, not fewer. */
html[data-theme] .mud-table:not(.mud-table-dense) .mud-table-root .mud-table-row .mud-table-cell,
html[data-theme] .mud-simple-table:not(.mud-table-dense) table tr :is(td, th) {
    padding: 12px;
}

/* The compact variant for dense grids: MudBlazor's 6px rows are kept exactly, only the sides go
   to 12px to line up with the normal tables. (0,4,1) beats MudBlazor's (0,3,0) dense rule. */
html[data-theme] .mud-table-dense * .mud-table-row .mud-table-cell,
html[data-theme] .mud-simple-table.mud-table-dense table tr :is(td, th) {
    padding: 6px 12px;
}

/* Row hover on every table, not only those with Hover="true", in the palette's TableHover.
   :nth-of-type(n) lifts this over MudBlazor's striped rule so hover still shows on an odd row of a
   Striped table. Hover-capable pointers only, like MudBlazor's own. */
@media (hover: hover) and (pointer: fine) {
    html[data-theme] .mud-table .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(n):hover,
    html[data-theme] .mud-simple-table .mud-table-container table tbody tr:nth-of-type(n):hover {
        background-color: var(--mud-palette-table-hover);
    }
}

/* The last row's hairline doubles the card's own edge. */
html[data-theme] .mud-table-root .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom-color: transparent;
}

/* LONG TAIL (plan §04): 89 tables - Customers, Plans and Discount Codes among them - wrap their
   PagerContent in <MudPaper Elevation="0" Style="border-top: solid 1px #e0e0e0;"> (and give the
   MudTablePager inside it border-top: none). That literal grey is a bright bar across a dark
   table. The line itself is right - it is the pager's hairline - so only its colour moves onto
   the palette's table line. !important is the only thing that out-ranks an inline style; the
   rule is scoped to papers inside a pager. */
html[data-theme] .mud-table .mud-table-pagination .mud-paper {
    border-top-color: var(--mud-palette-table-lines) !important;
    background-color: transparent;
    background-image: none;
}

/* ----- Inputs (T2.5) ------------------------------------------------------------------------
   The Preview's .input: an inset plate, a 1px line, the 10px control radius, a gold ring on
   focus. MudBlazor's three variants converge on it:
     Outlined   the plate goes behind the existing outline;
     Filled     its grey plate becomes the inset one and its underline becomes the outline;
     Text       (MudBlazor's default, most of the admin's ~1,700 fields) its underline becomes the
                outline and the field gets 12px of horizontal padding - never vertical, so a form
                is exactly as tall as before.
   The line is LinesInputs, not the Preview's --line: an input's outline is the only thing that
   identifies it as a control, and WCAG 1.4.11 wants 3:1 for that (LinesInputs is 3.30:1 light,
   3.79:1 dark; --pg-line is 1.2:1). Text fields with Underline="false" are left alone - they are
   the admin's inline and embedded fields (table filters, the pager) and are unboxed on purpose. */
html[data-theme] .mud-input.mud-input-outlined,
html[data-theme] .mud-input.mud-input-filled,
html[data-theme] .mud-input.mud-input-text.mud-input-underline {
    background-color: var(--pg-inset);
    border-radius: var(--pa-radius-sm);
}

/* Filled: MudBlazor's hover and focus plates are light-mode greys; the inset plate stays put and
   hover moves the line instead, as Outlined does. */
html[data-theme] .mud-input.mud-input-filled:hover,
html[data-theme] .mud-input.mud-input-filled.mud-focused {
    background-color: var(--pg-inset);
}

html[data-theme] .mud-input.mud-input-text.mud-input-underline {
    padding-inline: 12px;
}

/* The underline is MudBlazor's ::before (resting line) and ::after (2px focus bar). ::before is
   stretched into the full outline; ::after is retired for the ring below. */
html[data-theme] .mud-input.mud-input-underline::before {
    top: 0;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: inherit;
}

html[data-theme] .mud-input.mud-input-underline::after {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    html[data-theme] .mud-input.mud-input-underline:hover:not(.mud-disabled)::before {
        border: 1px solid var(--mud-palette-action-default);
    }
}

html[data-theme] .mud-input.mud-input-underline.mud-disabled::before {
    border-style: dotted;
}

/* Errors: the outline turns red, as Outlined's already does (MudBlazor's !important rule). */
html[data-theme] .mud-input.mud-input-underline.mud-input-error::before {
    border-color: var(--mud-palette-error);
}

/* Focus, every variant: a 1px gold line and the Preview's 3px gold wash ring, instead of
   MudBlazor's 2px Primary border (which on light Primary is the HB-25293 text gold anyway).
   --pa-gold-ic is the gold for UI boundaries, 3.56:1 on white. */
html[data-theme] .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-width: 1px;
    border-color: var(--pa-gold-ic);
}

html[data-theme] .mud-input.mud-input-underline:focus-within::before {
    border-color: var(--pa-gold-ic);
}

html[data-theme] .mud-input:is(.mud-input-outlined, .mud-input-filled, .mud-input-text.mud-input-underline):focus-within:not(.mud-input-error) {
    box-shadow: 0 0 0 3px var(--pa-gold-wash);
}

/* A Text field's label sat flush left over a bare underline; inside the box it has to start
   where the text does. At rest it moves in by the 12px padding; shrunk it sits above the box,
   where MudBlazor puts it, with the same 12px inset so it lines up with the value. */
html[data-theme] .mud-input.mud-input-text.mud-input-underline ~ label.mud-input-label-inputcontrol {
    transform: translate(12px, 24px) scale(1);
    max-width: calc(100% - 24px);
}

html[data-theme] .mud-input.mud-input-text.mud-input-underline.mud-shrink ~ label.mud-input-label-inputcontrol,
html[data-theme] .mud-input.mud-input-text.mud-input-underline:focus-within ~ label.mud-input-label-inputcontrol {
    transform: translate(12px, 1.5px) scale(.75);
}

/* An Outlined label floats on the outline and MudBlazor cuts the line with a solid Surface
   notch behind it, which shows as a light patch on the inset plate. The notch is two-tone
   instead: Surface above the outline, the plate's inset over Surface below it. The shrunk label
   is 18px tall before its .75 scale and sits 6px above the box, so the outline crosses it 8px
   (6 / .75) down. */
html[data-theme] .mud-input.mud-input-outlined ~ label.mud-input-label-outlined {
    background-color: var(--mud-palette-surface);
    background-image: linear-gradient(to bottom, transparent 8px, var(--pg-inset) 8px);
}

/* The pager's rows-per-page select keeps its bare look: it is chrome, not a form field. */
html[data-theme] .mud-table-pagination .mud-input.mud-input-text.mud-input-underline {
    background-color: transparent;
    padding-inline: 0;
    box-shadow: none;
}

html[data-theme] .mud-table-pagination .mud-input.mud-input-text.mud-input-underline::before {
    border: 0;
}

/* ----- Buttons (T2.5) -----------------------------------------------------------------------
   The 10px radius comes from the theme. Filled buttons lose MudBlazor's Material shadow (it is
   hard-coded on .mud-button-filled, not read from the elevation array). The gold CTA gets the
   Preview's soft gold glow instead; its gradient, ink and size are site.css's (HB-25795). */
html[data-theme] .mud-button-filled,
html[data-theme] .mud-button-filled:hover,
html[data-theme] .mud-button-filled:active,
html[data-theme] .mud-button-filled:focus-visible {
    box-shadow: none;
}

html[data-theme] .mud-button-filled.mud-button-filled-primary:not(:disabled):not([disabled]) {
    box-shadow: 0 10px 26px -14px rgba(242, 205, 122, .8);
}

/* Secondary actions are the Preview's .btn-ghost: the flat plate, a 1px line, body ink. Only the
   neutral and brand colours - an outlined Error, Success, Warning or Info button is saying
   something with its colour and keeps it. Disabled keeps MudBlazor's look. */
html[data-theme] .mud-button-outlined:is(.mud-button-outlined-default, .mud-button-outlined-primary, .mud-button-outlined-secondary, .mud-button-outlined-tertiary, .mud-button-outlined-dark):not(:disabled):not([disabled]) {
    background-color: var(--pg-flat);
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-primary);
    --mud-ripple-color: var(--mud-palette-text-primary);
}

@media (hover: hover) and (pointer: fine) {
    html[data-theme] .mud-button-outlined:is(.mud-button-outlined-default, .mud-button-outlined-primary, .mud-button-outlined-secondary, .mud-button-outlined-tertiary, .mud-button-outlined-dark):not(:disabled):not([disabled]):hover {
        background-color: var(--pg-flat-2);
    }
}

/* ----- Page header (HB-25799) ---------------------------------------------------------------
   Components/PageHeader.razor: title and subtitle on the left, the page's actions on the right,
   wrapping under the title on a narrow screen. The title is MudText h4, which AdminTheme sets to
   the Preview's 24px / 700. Classic has no .page-header rule at all, so there it stays the old
   stack: h4, then the buttons underneath.
   The header owns the spacing below it, so the mb-2 / mb-4 / my-3 a page's old h4 and buttons
   carried are neutralised here rather than edited on ~70 pages (they still apply under classic). */
html[data-theme] .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 20px;
}

html[data-theme] .page-header__text {
    flex: 1 1 auto;
    min-width: 0;
}

html[data-theme] .page-header .page-header__title {
    margin: 0 !important;
}

html[data-theme] .page-header__subtitle {
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
}

html[data-theme] .page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

/* The old stacks wrapped their buttons in a div or MudStack (often two deep) carrying mb-4 or
   my-3; inside a centred row that margin only pushes the buttons off the title's line. */
html[data-theme] .page-header__actions > *,
html[data-theme] .page-header__actions div,
html[data-theme] .page-header__actions .mud-button-root {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}