/* Welch Packaging brand overrides for MudBlazor */

:root {
    --welch-red: #ED1C24;
    --welch-red-dark: #9E1518;
    --welch-red-light: #F38A8C;
    --welch-red-lightest: #F9B1B3;
    --welch-black: #000000;
    --welch-charcoal: #343434;
    --welch-gray-dark: #676767;
    --welch-gray-medium: #757575;
    --welch-gray-light: #C7C7C7;
    --welch-gray-lightest: #F7F7F7;
    --welch-white: #FFFFFF;
    --welch-blue: #0088CB;

    /* #649: Primary fill is mode-invariant, so it needs no dark selector. It matches
       WelchTheme.PaletteLight.Primary and PrimaryContrastText; tests pin the pair. */
    --welch-primary-fill: #E71921;
    --welch-on-primary-fill: #FFFFFF;

    /* Status-fail surface (light red) — backs the active Settings tile icon chip;
       value from the locked #252 Settings mockup (--fail-bg: #FCE9EA). */
    --fail-bg: #FCE9EA;

    /* ── Dark-mode-responsive brand roles ─────────────────────────────────────
       MudBlazor 9 activates dark mode by REGENERATING the --mud-palette-* custom
       properties on :root (there is no dark class/attribute/color-scheme to key a
       selector off — verified empirically on the #427 live render). So the only way
       a brand surface can flip with IsDarkMode is to track the palette. Each role
       below binds to the --mud-palette-* var whose LIGHT value is byte-identical to
       the literal it replaces, so light mode is pixel-for-pixel unchanged; the dark
       value comes from WelchTheme.PaletteDark (background #1A1A1A / surface #2D2D2D /
       appbar #1A1A1A / text #FFFFFF) and reads correctly on the dark ground. Brand
       --welch-red is the fixed non-text brand accent. Red text tracks
       var(--mud-palette-primary), while red fills use --welch-primary-fill. */
    --welch-surface: var(--mud-palette-surface);                     /* #FFFFFF -> #2D2D2D : cards, tiles, chips, frozen cells, hover-invert fill */
    --welch-appbar-bg: var(--mud-palette-appbar-background);         /* #FFFFFF -> #1A1A1A : app bar, status/version bar */
    --welch-page-bg: var(--mud-palette-background);                  /* #FFFFFF -> #1A1A1A : auth splash full screen */
    --welch-ink: var(--mud-palette-text-primary);                    /* #000000 -> #FFFFFF : strong tile label */
    --welch-ink-muted: var(--mud-palette-text-secondary);            /* #757575 -> #B0B0B0 : secondary text */
    --welch-ink-faint: var(--mud-palette-text-disabled);             /* #C7C7C7 -> #676767 : disabled / 'coming soon' text */
    --welch-hairline: var(--mud-palette-divider-light);              /* #F7F7F7 -> rgba(255,255,255,.06) : subtle 1px dividers */
    --welch-border: var(--mud-palette-text-disabled);                /* #C7C7C7 -> #676767 : card / panel / chip borders */
    --welch-inset: var(--mud-palette-action-disabled-background);    /* #F7F7F7 -> rgba(255,255,255,.12) : inset gray fills (toolbar, tracks, disabled tile) */
}

/* Sharp corners on all buttons */
.mud-button-root {
    border-radius: 0px !important;
}

/* Button hover inversion: red fill becomes the surface with a readable red border. */
.mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--welch-surface) !important;
    color: var(--mud-palette-primary) !important;
    border: 1px solid var(--mud-palette-primary);
}

/* #649: Use the same deep fill and white text in both modes. Disabled controls keep
   MudBlazor's own text color; the utility needs !important to override MudBlazor. */
.mud-button-filled.mud-button-filled-primary:not(:disabled):not(.mud-disabled),
.mud-chip-filled.mud-chip-color-primary:not(.mud-disabled),
.mud-avatar-filled.mud-avatar-filled-primary,
.mud-fab-primary:not(:disabled) {
    background-color: var(--welch-primary-fill);
    color: var(--welch-on-primary-fill);
    --mud-ripple-color: var(--welch-on-primary-fill);
}
.mud-theme-primary {
    background-color: var(--welch-primary-fill) !important;
    color: var(--welch-on-primary-fill) !important;
}

/* R-A's :not() guards outrank MudBlazor's filled hover, focus and active rules.
   Restore the darker state fill so focus and pressed differ from rest; white on
   PrimaryDarken #9E1518 is 8.16:1. The inversion rule above handles button hover. */
.mud-button-filled.mud-button-filled-primary:not(:disabled):not(.mud-disabled):focus-visible,
.mud-button-filled.mud-button-filled-primary:not(:disabled):not(.mud-disabled):active,
.mud-fab-primary:not(:disabled):hover,
.mud-fab-primary:not(:disabled):focus-visible,
.mud-fab-primary:not(:disabled):active {
    background-color: var(--mud-palette-primary-darken);
}

/* MudBlazor's outlined hover tint lowers light-mode red text below 4.5:1. */
.mud-button-outlined.mud-button-outlined-primary:not(:disabled):hover,
.mud-button-outlined.mud-button-outlined-primary:not(:disabled):focus-visible,
.mud-button-outlined.mud-button-outlined-primary:not(:disabled):active {
    background-color: var(--welch-primary-fill);
    border-color: var(--welch-primary-fill);
    color: var(--welch-on-primary-fill);
}

/* The date picker's today marker also has .mud-primary-text, whose !important color
   would leave Primary text on this fill (1.00:1 light, 2.06:1 dark). This selector
   outranks it and gives white on the fill, 4.61:1 in both modes. */
.mud-picker-calendar-day.mud-current.mud-button-outlined-primary:not(:disabled):hover,
.mud-picker-calendar-day.mud-current.mud-button-outlined-primary:not(:disabled):focus-visible,
.mud-picker-calendar-day.mud-current.mud-button-outlined-primary:not(:disabled):active {
    color: var(--welch-on-primary-fill) !important;
}

/* Keep text buttons on the ground, with an underline on hover or press and a
   visible ring on keyboard focus. MudBlazor's tint would lower contrast. */
.mud-button-text.mud-button-text-primary:hover,
.mud-button-text.mud-button-text-primary:active {
    background-color: transparent;
    text-decoration: underline;
}
.mud-button-text.mud-button-text-primary:focus-visible {
    background-color: transparent;
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* MudBlazor's grey active-link tint puts light Primary at only 4.30:1. The 3 px
   bar marks the active link without relying on color alone. Repeat MudBlazor's
   trailing :not() selectors to match its specificity and win by load order. */
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):active:not(.mud-nav-link-disabled) {
    background-color: transparent;
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible:not(.mud-nav-link-disabled) {
    background-color: transparent;
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: -2px;
}

/* Navigation bar styling -- white bg, subtle bottom border */
.welch-appbar,
.mud-appbar.welch-appbar {
    box-shadow: none !important;
    border-bottom: 1px solid var(--welch-hairline);
    background-color: var(--welch-appbar-bg);
}

/* Card styling -- subtle shadow, sharp corners */
.mud-card {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    border-radius: 0px;
}

/* Table header -- bold Roboto */
.mud-table-head th {
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
}

/* Smooth transitions like the Welch site */
.mud-button-root,
.mud-nav-link {
    transition: background-color 0.4s ease 0s, color 0.4s ease 0s;
}

/* Chip styling -- sharp corners */
.mud-chip {
    border-radius: 0px;
}

/* Keyboard focus ring for non-interactive status chips (#535). MudBlazor 9.3 sets
   .mud-chip { outline: 0 } and styles :focus-visible only on clickable chips, so a
   focusable status chip (tabindex=0, tooltip on focus) would show no focus indicator.
   The ring uses the theme text colour, not the chip colour, so it meets WCAG 2.2 AA
   3:1 non-text contrast whatever the Warning colour is (21:1 light, 13.77:1 dark). */
.welch-status-chip:focus-visible {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: 2px;
}

/* Dialog styling -- sharp corners */
.mud-dialog {
    border-radius: 0px;
}

/* Paper/surfaces -- sharp corners */
.mud-paper {
    border-radius: 0px;
}

/* Breakpoint-sized logo and culture selector stay on one app-bar row. */
.welch-appbar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

/* A hair of breathing room around the Welch inline logo so it isn't flush against
   the app bar / nav edges. Scoped to the logo <svg> (.welch-logo) specifically — not
   the whole group — so the ~2px gap shows around the logo itself. Subtle; does not
   change the logo size or the group's centering. */
.welch-appbar-logo .welch-logo {
    margin: 1px;
}

/* Smaller font and centered text for culture selector */
.welch-culture-selector,
.welch-culture-selector .mud-input,
.welch-culture-selector .mud-select-input {
    font-size: 0.875rem;
    text-align: center;
}

.welch-culture-selector .mud-input-slot {
    text-align: center;
}

.welch-appbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-right: 0.75rem;
    flex: 0 1 auto;
    min-width: 0;
}

/* The title keeps one line while the user name yields space. */
.welch-appbar-right > .mud-typography {
    white-space: nowrap;
    flex-shrink: 0;
}

.welch-appbar-user {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* The user name yields space before the fixed logo, picker or theme toggle. */
.welch-user-menu,
.welch-user-menu .mud-menu,
.welch-user-menu__label,
.welch-user-menu__icon {
    min-width: 0;
    max-width: 100%;
}

/* Keep the signed-in name in normal case and allow its activator to shrink. */
.welch-user-menu .mud-button-root {
    text-transform: none;
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: normal;
    max-width: 100%;
    min-width: 0;
}

.welch-user-menu .mud-button-label {
    display: block;
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.welch-user-menu .mud-button-icon-start {
    display: inline-flex;
    vertical-align: middle;
}

/* MudBlazor's text button has 8px left padding and its start icon has a -4px
   start margin. Move that 4px from padding to margin so the icon is not clipped. */
.welch-user-menu .mud-menu-button-activator {
    padding-left: 4px;
    padding-inline-start: 4px;
}

.welch-user-menu .mud-menu-button-activator .mud-button-icon-start {
    margin-left: 0;
    margin-inline-start: 0;
}

/* ActivatorContent adds a button-role wrapper in MudBlazor 9.3; the caret must
   sit outside the truncating label. The 10x5 triangle is centered in the
   former 24px icon footprint, including its 8px/-4px end margins. */
.welch-user-menu .mud-menu-button-activator::after {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    margin-left: 15px;
    margin-right: 3px;
    margin-inline-start: 15px;
    margin-inline-end: 3px;
    align-self: center;
}

@media (forced-colors: active) {
  .welch-user-menu .mud-menu-button-activator::after { border-left-color: Canvas; border-right-color: Canvas; }
}

/* ── Auth splash screen ────────────────────────────────────────────────────── */

.welch-auth-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: var(--welch-page-bg);
    font-family: 'Montserrat', sans-serif;
}

.welch-auth-splash__logo {
    width: 280px;
    margin-bottom: 2rem;
}

.welch-auth-splash__bar-track {
    width: 200px;
    height: 3px;
    background-color: var(--welch-inset);
    overflow: hidden;
}

.welch-auth-splash__bar-fill {
    width: 40%;
    height: 100%;
    background-color: var(--welch-red);
    animation: welch-loading 1.5s ease-in-out infinite;
}

.welch-auth-splash__label {
    margin-top: 1rem;
    color: var(--welch-ink-muted);
    font-size: 14px;
    font-weight: 400;
}

@keyframes welch-loading {
    0% { margin-left: -40%; }
    100% { margin-left: 100%; }
}

/* Signed-out landing (SignedOut, rendered inside the splash frame by /authentication/logged-out).
   The splash's sweeping bar is an "in progress" cue and reads wrong under "You have signed
   out", so on this page it settles into a static brand rule under the logo. */
.welch-auth-splash:has(.welch-signed-out) .welch-auth-splash__bar-fill {
    animation: none;
    width: 100%;
    margin-left: 0;
}

.welch-signed-out {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    text-align: center;
}

.welch-signed-out__body {
    color: var(--welch-ink-muted);
}

.welch-signed-out__sign-in {
    margin-top: 0.5rem;
}

/* Fill-height scroll viewport primitive */
.welch-fill-height-scroll-viewport {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

/* Diagnostics page reshape */

/* Fill-height chain: MudLayout defaults to display:block, which makes the flex:1 on
   .mud-main-content inert (a block parent doesn't lay its children out as flex items), so the
   main content never grows past its content height and the diagnostics grid viewport stays
   pinned at its min-height floor regardless of window height. Make the layout a flex column so
   main content can claim the full window height; the fixed app bar is position:fixed and stays
   out of this flow. */
.mud-layout {
    display: flex;
    flex-direction: column;
    /* Shared height of the fixed full-width status bar (mirrors the app bar). Declared
       here on the common ancestor so both .mud-main-content (reserves the bottom strip) and
       .welch-status-bar (sets its own height) read one source of truth. */
    --welch-footer-height: 2rem;
}

.mud-main-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.mud-main-content > div.px-4.pb-4 {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 0;
    /* This wrapper is the shared per-page scroll container around @Body in both products. The
       footer is now an in-flow flex sibling (position:static below), so it reserves its own space
       structurally - no numeric padding reservation is needed (the old var(--welch-footer-height)
       reservation was also overridden by MudBlazor's .pb-4 utility). */
}

/* First-class STATUS BAR as a FULL-WIDTH bottom bar that mirrors the MudAppBar. Now in-flow
   (position:static, flex:0 0 auto) as the last natural-height sibling in the .mud-layout flex
   column, so the column distributes leftover height to .mud-main-content and content (incl. a
   grid's H-scrollbar) always ends above the bar at ANY bar height - no numeric reservation, no
   fixed overlay clipping the grid bottom. .mud-layout is full-window-width, so the in-flow bar
   still spans edge-to-edge (incl. the strip under the left nav drawer); the solid background +
   top border keep it a real bar edge to edge. A scrolling non-grid page keeps the bar pinned to
   the viewport bottom because .mud-main-content (not the page) is the scroller, so the layout
   column never grows past the window and the bar stays at the bottom edge (#230 behaviour).
   Layout: live status message (left, colored by severity) + version (right-justified). */
.welch-status-bar {
    position: static;
    flex: 0 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    width: 100%;
    height: var(--welch-footer-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
    background-color: var(--mud-palette-surface, #fff);
    border-top: 1px solid var(--welch-hairline);
}

/* Status message (left). Inherits a severity color; the MudIcon (Color.Inherit) and text both
   pick it up via currentColor. min-width:0 lets a long message truncate instead of shoving the
   version off the right edge. */
.welch-status-bar__status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    overflow: hidden;
}

.welch-status-bar__icon {
    flex: 0 0 auto;
}

.welch-status-bar__text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
}

/* Version (right). margin-left:auto pins it to the right edge regardless of message length. */
.welch-status-bar__version {
    flex: 0 0 auto;
    margin-left: auto;
}

.welch-status-bar__status--info {
    color: var(--mud-palette-info, #1976d2);
}

.welch-status-bar__status--success {
    color: var(--mud-palette-success, #2e7d32);
}

.welch-status-bar__status--warning {
    color: var(--mud-palette-warning, #ed6c02);
}

.welch-status-bar__status--error {
    color: var(--mud-palette-error, #d32f2f);
}

.welch-status-bar__status--none {
    color: inherit;
}

.diagnostics-workspace {
    min-height: 0;
    /* Grow to fill the remaining column height (below the selector/description/toolbar) so the
       results column — and the flex:1 grid viewport inside it — can claim the full window height
       on a tall window and clamp at the viewport's min-height floor on a short one. Without this
       the row sizes to its content and the viewport never grows past its floor. */
    flex: 1 1 auto;
}

.diagnostics-results-column {
    min-height: 0;
    min-width: 0;
}

.diagnostics-params-panel {
    flex: 0 0 270px;
    border: 1px solid var(--welch-border);
    border-left: 4px solid var(--welch-red);
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    min-height: 0;
}

/* MudBlazor's `.mud-table-root` defaults to width:100%, which stretches the columns to
   fill a wide viewport and inflates inter-column whitespace as the page widens. Size the
   inner table to its content so column widths (and therefore inter-column spacing) stay
   constant at any page width; the shared scroll grid still fills the full page width and
   horizontal scroll reveals overflowing columns (wider window -> more columns visible at
   constant spacing, no right-side gutter). */
.welch-scroll-grid .mud-table-root {
    width: max-content;
}

.diagnostics-params-panel__header {
    border-bottom: 1px solid var(--welch-hairline);
}

.diagnostics-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.diagnostics-field__label {
    color: var(--welch-ink-muted);
    font-weight: 600;
}

.diagnostics-field__label--required {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.diagnostics-field--required-empty .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
}

/* The shared scroll grid is the flex:1 absorber inside the bounded .mud-main-content column,
   which is itself a flex:1 sibling of the layout-level .welch-status-bar (flex:0 0 auto)
   in the .mud-layout flex column. A hard min-height floor here (was 24rem) stopped the
   viewport shrinking on short windows, so the main-content column overflowed past the
   layout's height - and since the viewport (not the page) is the scroller, oversized content
   stayed clipped. min-height:0 lets the viewport yield so .mud-main-content stays within the
   height left above the pinned footer; the viewport still fills all space between the app bar
   and the footer and still absorbs extra height on taller windows (more rows), and still
   scrolls its own rows when they overflow. The footer, being a layout-level sibling, is always
   visible regardless. */
.welch-scroll-grid {
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-width: auto;
    scrollbar-color: var(--welch-ink-muted) var(--welch-inset);
    /* No bottom margin: the grid's bottom aligns flush with the Parameters drawer's bottom (the
       grid fills the wrapper content box). Clearance above the footer comes structurally from the
       in-flow flex column + the wrapper's 4px sliver below - footer-height independent. */
    margin-bottom: 0;
}

/* On grid pages the shared per-page wrapper must NOT be the vertical scroller - the grid
   (.welch-scroll-grid) is. Letting the wrapper scroll lets the bounded flex chain leak. SCOPED
   via :has() so plain scrolling pages (Users, etc.) keep normal scroll behaviour.
   padding-bottom: a thin 4px sliver so the grid's H-scrollbar bottom (== params-drawer bottom)
   sits 4px above the footer; !important is REQUIRED to beat MudBlazor's
   .pb-4 { padding-bottom:16px !important }. The :has() scope keeps plain pages on Mud's 16px. */
.mud-main-content > div.px-4.pb-4:has(.welch-scroll-grid) {
    overflow-y: hidden;
    padding-bottom: 4px !important;
}

/* The inner MudDataGrid container expands to its full content size, so it never overflows
   itself; make it non-scrolling so the bounded shared scroll grid is the real scroller and
   its conditional-but-visible bars appear when wide content overflows. */
.welch-scroll-grid .mud-table-container {
    overflow: visible;
}

.welch-scroll-grid::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.welch-scroll-grid::-webkit-scrollbar-track {
    background-color: var(--welch-inset);
}

.welch-scroll-grid::-webkit-scrollbar-thumb {
    background-color: var(--welch-ink-muted);
    border: 2px solid var(--welch-inset);
}

.welch-scroll-grid::-webkit-scrollbar-thumb:hover {
    background-color: var(--welch-gray-dark);
}

.diagnostics-toolbar {
    background-color: var(--welch-inset);
    border: 1px solid var(--welch-border);
    border-radius: 0;
}

/* Flush the params toggle so the hover square aligns with the toolbar edge. */
.diagnostics-toolbar .mud-icon-button {
    margin-left: 0;
}

.diagnostics-filter-summary {
    color: var(--welch-ink-muted);
}

.welch-scroll-grid--sticky-first .welch-scroll-grid__sticky-header,
.welch-scroll-grid--sticky-first .welch-scroll-grid__sticky-cell {
    background-color: var(--welch-surface) !important;
    position: sticky;
    left: 0;
}

/* #586: the Loading progress bar sits directly under the header row. MudBlazor makes the
   loading row sticky on its own at a fixed `top: 39px` (dense), but this grid's header row is
   about 35px tall, so on a scrolled grid the bar floated over the first visible row, and the
   frozen first-column cells (painted later) hid its left end. Make the whole head sticky
   instead: the loading row then rides directly under the header at any header height, and the
   head paints above the body's frozen cells (z-index 2). */
.welch-scroll-grid .mud-table-sticky-header .mud-table-head {
    position: sticky;
    top: 0;
    z-index: 3;
}

.welch-scroll-grid .mud-table-sticky-header .mud-table-root .mud-table-head .mud-table-loading {
    top: auto;
}

/* Settings landing slice */

.settings-page {
    min-height: 0;
}

.settings-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 620px;
}

@media (max-width: 620px) {
    .settings-tile-grid {
        grid-template-columns: 1fr;
    }
}

.settings-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 22px 22px 20px;
    background-color: var(--welch-surface);
    border: 1px solid var(--welch-border);
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.settings-tile--link {
    color: inherit;
}

.settings-tile--active {
    border-left: 4px solid var(--welch-red);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    cursor: pointer;
}

.settings-tile--active:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}

.settings-tile--soon {
    background-color: var(--welch-inset);
    border-style: dashed;
    cursor: not-allowed;
}

.settings-tile__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background-color: var(--fail-bg);
}

.settings-tile__icon .mud-icon-root {
    color: var(--welch-red);
    font-size: 30px;
}

.settings-tile--soon .settings-tile__icon {
    background-color: #EFEFEF;
}

.settings-tile--soon .settings-tile__icon .mud-icon-root {
    color: var(--welch-gray-light);
}

.settings-tile__label {
    margin: 0 0 6px;
    color: var(--welch-ink);
    font-family: 'Montserrat', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.1px;
}

.settings-tile--soon .settings-tile__label {
    color: var(--welch-ink-muted);
}

.settings-tile__desc {
    margin: 0;
    color: var(--welch-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.settings-tile--soon .settings-tile__desc {
    color: var(--welch-ink-faint);
}

.settings-tile__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 16px;
    color: var(--mud-palette-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.settings-tile__foot .mud-icon-root {
    font-size: 16px;
}

.settings-tile--soon .settings-tile__foot {
    color: var(--welch-ink-faint);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.settings-tile__chip {
    position: absolute;
    top: 16px;
    right: 16px;
    height: auto;
    padding: 3px 8px;
    color: var(--welch-ink-muted);
    background-color: var(--welch-surface);
    border: 1px solid var(--welch-border);
    border-radius: 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.welch-scroll-grid--sticky-first .welch-scroll-grid__sticky-header {
    z-index: 4;
    box-shadow: 1px 0 0 var(--welch-hairline);
}

.welch-scroll-grid--sticky-first .welch-scroll-grid__sticky-cell {
    z-index: 2;
    box-shadow: 1px 0 0 var(--welch-hairline);
}

/* Frozen first column highlights WITH the row on hover/selection. The static opaque
   white above prevents horizontal-scroll bleed-through on non-hovered rows; on hover/select
   we swap that opaque white for the SAME opaque tone MudBlazor paints the row with
   (var(--mud-palette-table-hover), a fully-opaque rgba(...,1) — NOT a translucent overlay,
   so the cell still fully covers scrolled content), keyed off the exact same
   .mud-table-row:hover hook MudBlazor uses, so the frozen cell tints in lockstep with the
   rest of the row instead of overriding the highlight. */
.welch-scroll-grid--sticky-first .mud-table-row:hover .welch-scroll-grid__sticky-cell,
.welch-scroll-grid--sticky-first .mud-table-row.mud-selected-row .welch-scroll-grid__sticky-cell {
    background-color: var(--mud-palette-table-hover) !important;
}

/* Palette values verified on the live app in both themes.
   Leave --welch-logo-panel unset: each lockup supplies its source red. */
:root {
    --welch-logo-ink: var(--mud-palette-text-primary, #000000);
    --welch-logo-face: var(--mud-palette-background, #FFFFFF);
    --welch-logo-frame: var(--welch-logo-ink);
    --welch-logo-wordmark: var(--welch-logo-ink);
    --welch-logo-reg: var(--welch-logo-wordmark);
}

/* Explicit near-white override. Apply only while the host theme is dark. */
.wl-dark-muted {
    --welch-logo-ink: #EDEDED;
    --welch-logo-frame: var(--welch-logo-ink);
    --welch-logo-wordmark: var(--welch-logo-ink);
    --welch-logo-reg: var(--welch-logo-wordmark);
}

/* #646: reserve room for Refresh from 600px up and let it wrap below the heading at xs.
   Stack memory table cells at xs so labels and values each get the full width; keep the 40%
   label column and unbroken values above xs. MudBlazor's table-cell selector outranks a lone
   label class, so the xs padding and display rules need the full table selector. SVG axis text
   uses a 12px presentation attribute in a fixed 700px viewBox; chart-width steps keep it readable. */
.welch-system-memory__heading {
    flex: 1 1 16rem;
    min-width: 0;
}

.welch-system-memory__label {
    width: 40%;
    padding-right: 16px;
}

.welch-system-memory__chart {
    container-type: inline-size;
}

@media (max-width: 599.98px) {
    .welch-system-memory .mud-simple-table table * tr > th,
    .welch-system-memory .mud-simple-table table * tr > td {
        display: block;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .welch-system-memory .mud-simple-table table * tr > th {
        padding-top: 8px;
        padding-bottom: 2px;
        border-bottom: 0;
    }

    .welch-system-memory .mud-simple-table table * tr > td {
        padding-top: 2px;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .welch-system-memory__chart text {
        font-size: 30px;
    }
}

@media (max-width: 599.98px) {
    @container (min-width: 240px) {
        .welch-system-memory__chart text { font-size: 26px; }
    }
    @container (min-width: 280px) {
        .welch-system-memory__chart text { font-size: 22px; }
    }
    @container (min-width: 330px) {
        .welch-system-memory__chart text { font-size: 19px; }
    }
    @container (min-width: 390px) {
        .welch-system-memory__chart text { font-size: 17px; }
    }
}

@media (min-width: 600px) {
    .welch-system-memory td {
        white-space: nowrap;
    }
}