/* ============================================================================ MyReptileFamily — Admin & Tickets design layer ---------------------------------------------------------------------------- The marketing site (landing.css) paints a photo background and floats translucent "bands" on top of it. That reads well for a landing page and badly for a dense admin tool: contrast depends on whatever pixel of the photo happens to be behind the text. Admin therefore opts out entirely and runs its own themed palette — see theme.css for the light ("tropical water") and dark (deep blue-teal) token sets. This file owns structure: the page shell, cards, tables and the component overrides that make MudBlazor sit on those tokens. It reads colours only through --mrff-* variables, so both modes work from one set of rules. Loaded AFTER MudBlazor.min.css so component overrides don't need !important for specificity alone. ========================================================================= */ :root { /* Sizing only. Every COLOUR token for admin — canvas, card, subpanel, border, inks and tonal tints — is defined per mode in theme.css and selected by the data-mrff-theme attribute on . Defaults here keep the file usable if theme.css fails to load. */ --mrff-admin-gutter: clamp(16px, 2vw, 32px); --mrff-admin-gap: 20px; } /* ─── App bar + drawer ──────────────────────────────────────────────────── The marketing bar is frosted glass over the photo. Admin has no photo, so a flat opaque bar with a hard bottom edge reads better and keeps the contrast of the title and the user's name fixed. */ html[data-mrff-surface="admin"] .mud-appbar.mrff-appbar { background-color: var(--mrff-admin-bar-bg) !important; color: var(--mrff-ink) !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--mrff-admin-border) !important; } html[data-mrff-surface="admin"] .mud-drawer { background-color: var(--mrff-admin-bar-bg) !important; border-right: 1px solid var(--mrff-admin-border); } html[data-mrff-surface="admin"] .mud-nav-link.active { background-color: var(--mrff-primary-tint) !important; color: var(--mrff-primary-ink) !important; } /* ─── Page shell (AdminPage.razor) ───────────────────────────────────────── */ .mrff-admin-page { width: 100%; max-width: none; margin: 0; padding: var(--mrff-admin-gutter); display: flex; flex-direction: column; gap: var(--mrff-admin-gap); color: var(--mrff-ink); } .mrff-admin-page__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; row-gap: 8px; } .mrff-admin-page__heading { min-width: 0; flex: 1 1 320px; } .mrff-admin-page__title { color: var(--mrff-ink-strong) !important; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; } .mrff-admin-page__desc { color: var(--mrff-ink-muted) !important; margin-top: 4px; max-width: 90ch; } .mrff-admin-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .mrff-admin-page__toolbar, .mrff-admin-page__body { display: block; } /* ─── Card (AdminCard.razor) ─────────────────────────────────────────────── */ .mrff-admin-card { background: var(--mrff-admin-card-bg); border: 1px solid var(--mrff-admin-border); border-radius: var(--mrff-radius-md); box-shadow: var(--mrff-admin-shadow); overflow: hidden; display: flex; flex-direction: column; height: 100%; } .mrff-admin-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--mrff-admin-border); } .mrff-admin-card__titles { min-width: 0; } .mrff-admin-card__title { color: var(--mrff-ink-strong) !important; font-weight: 600; } .mrff-admin-card__subtitle { color: var(--mrff-ink-muted) !important; margin-top: 2px; } .mrff-admin-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .mrff-admin-card__body { padding: 20px; flex: 1 1 auto; min-width: 0; } .mrff-admin-card--dense .mrff-admin-card__body { padding: 8px 12px; } /* Tables own their own edge padding, so a card that holds nothing but a table drops the body padding and lets the rows run to the card border. */ .mrff-admin-card--flush .mrff-admin-card__body { padding: 0; } /* Whole-card link target (ticket board tiles). */ .mrff-admin-card--clickable { cursor: pointer; transition: border-color 140ms ease, box-shadow 140ms ease; } .mrff-admin-card--clickable:hover, .mrff-admin-card--clickable:focus-visible { border-color: var(--mrff-primary-ink); box-shadow: var(--mrff-admin-shadow-lift); outline: none; } .mrff-admin-card--clickable:focus-visible { outline: 2px solid var(--mrff-primary-ink); outline-offset: 2px; } /* ─── Nested panel — the alternating shade used for permission grids etc. ── */ .mrff-admin-subpanel { background: var(--mrff-admin-subpanel-bg); border: 1px solid var(--mrff-admin-border); border-radius: var(--mrff-radius-sm); padding: 16px; } .mrff-admin-subpanel--flush { padding: 0; overflow: hidden; } /* ─── Stat tile (AdminStat.razor) ────────────────────────────────────────── */ .mrff-admin-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--mrff-admin-card-bg); border: 1px solid var(--mrff-admin-border); border-radius: var(--mrff-radius-md); box-shadow: var(--mrff-admin-shadow); height: 100%; } .mrff-admin-stat__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--mrff-admin-neutral-fill); color: var(--mrff-ink-muted); } .mrff-admin-stat__text { min-width: 0; } .mrff-admin-stat__value { font-size: 1.75rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--mrff-ink-strong); } .mrff-admin-stat__label { font-size: 0.8125rem; color: var(--mrff-ink-muted); margin-top: 2px; } .mrff-admin-stat--primary .mrff-admin-stat__value { color: var(--mrff-primary-ink); } .mrff-admin-stat--secondary .mrff-admin-stat__value { color: var(--mrff-secondary-ink); } .mrff-admin-stat--success .mrff-admin-stat__value { color: var(--mrff-success-ink); } .mrff-admin-stat--warning .mrff-admin-stat__value { color: var(--mrff-warning-ink); } .mrff-admin-stat--error .mrff-admin-stat__value { color: var(--mrff-error-ink); } .mrff-admin-stat--primary .mrff-admin-stat__icon { background: var(--mrff-primary-tint); color: var(--mrff-primary-ink); } .mrff-admin-stat--secondary .mrff-admin-stat__icon { background: var(--mrff-secondary-tint); color: var(--mrff-secondary-ink); } .mrff-admin-stat--success .mrff-admin-stat__icon { background: var(--mrff-success-tint); color: var(--mrff-success-ink); } .mrff-admin-stat--warning .mrff-admin-stat__icon { background: var(--mrff-warning-tint); color: var(--mrff-warning-ink); } .mrff-admin-stat--error .mrff-admin-stat__icon { background: var(--mrff-error-tint); color: var(--mrff-error-ink); } /* ─── Tabs — give the panel body a box so tabs read as tabs ─────────────── Without a bordered panel container the tab strip floats over the page and the content under it has nothing holding it, which is why "Run pipeline" was unreadable. Class names verified against MudBlazor 8.15.0. */ .mrff-admin-tabs .mud-tabs-tabbar { background: var(--mrff-admin-subpanel-bg) !important; border: 1px solid var(--mrff-admin-border); border-bottom: none; border-radius: var(--mrff-radius-md) var(--mrff-radius-md) 0 0; } .mrff-admin-tabs .mud-tabs-panels { background: var(--mrff-admin-card-bg); border: 1px solid var(--mrff-admin-border); border-radius: 0 0 var(--mrff-radius-md) var(--mrff-radius-md); padding: 20px; } .mrff-admin-tabs .mud-tab { color: var(--mrff-ink-muted); } .mrff-admin-tabs .mud-tab.mud-tab-active { color: var(--mrff-primary-ink); font-weight: 600; } .mrff-admin-tabs .mud-tab-slider { background: var(--mrff-primary-ink); } /* ─── MudBlazor surface resets inside the admin shell ────────────────────── */ /* A MudTable renders its own elevated paper. Inside a card that produces the "box inside a box" look, so flatten it and let the card be the box. */ .mrff-admin-card .mud-table, .mrff-admin-subpanel .mud-table, .mrff-admin-tabs .mud-table { background-color: transparent; box-shadow: none; border-radius: 0; } .mrff-admin-card .mud-table-cell, .mrff-admin-tabs .mud-table-cell { color: var(--mrff-ink); } .mrff-admin-card .mud-table-head .mud-table-cell, .mrff-admin-tabs .mud-table-head .mud-table-cell { color: var(--mrff-ink-strong); font-weight: 600; } .mrff-admin-page .mud-table-toolbar { padding-inline: 0; } .mrff-admin-card--flush .mud-table-toolbar { padding-inline: 16px; } /* Helper text, table placeholders and pager labels all resolve to the muted ink so they stay legible in both modes. */ .mrff-admin-page .mud-text-secondary, .mrff-admin-page .mud-input-helper-text, .mrff-admin-page .mud-table-pagination { color: var(--mrff-ink-muted) !important; } .mrff-admin-page .mud-input-label, .mrff-admin-page .mud-input-root { color: var(--mrff-ink); } /* Pages that still compose with raw MudPaper (the ticket detail view builds its columns that way) get the AdminCard treatment automatically, so they can't drift into a different surface style. Popovers, menus and dialogs are excluded — MudBlazor floats those and they own their own elevation. */ .mrff-admin-page .mud-paper:not(.mud-popover):not(.mud-menu-popover):not(.mud-dialog) { background-color: var(--mrff-admin-card-bg); color: var(--mrff-ink); } .mrff-admin-page > .mrff-admin-page__body .mud-paper.mud-elevation-1, .mrff-admin-page > .mrff-admin-page__body .mud-paper.mud-elevation-2, .mrff-admin-page > .mrff-admin-page__body .mud-paper.mud-elevation-3 { border: 1px solid var(--mrff-admin-border); border-radius: var(--mrff-radius-md); box-shadow: var(--mrff-admin-shadow); } .mrff-admin-page .mud-paper-outlined { background-color: var(--mrff-admin-subpanel-bg); border: 1px solid var(--mrff-admin-border); border-radius: var(--mrff-radius-sm); box-shadow: none; } /* ─── Chips ────────────────────────────────────────────────────────────── MudBlazor's filled chip paints white text straight onto the palette hue. painted straight onto a saturated hue, which fails AA in either mode. The outlined variant is no better: it uses the raw hue as the *text* colour. Admin renders every chip tonally instead: a 12% tint of the hue behind the matching ink. Same semantics, same colour language, legible at any size. Pages therefore keep using Color.Success / Color.Error / Color.Info on chips and the lint only bans those colours on text components. */ .mrff-admin-page .mud-chip { border: 1px solid transparent; } .mrff-admin-page .mud-chip.mud-chip-color-primary { background-color: var(--mrff-primary-tint) !important; color: var(--mrff-primary-ink) !important; border-color: var(--mrff-admin-border); } .mrff-admin-page .mud-chip.mud-chip-color-secondary, .mrff-admin-page .mud-chip.mud-chip-color-info { background-color: var(--mrff-secondary-tint) !important; color: var(--mrff-secondary-ink) !important; border-color: var(--mrff-admin-border); } .mrff-admin-page .mud-chip.mud-chip-color-success { background-color: var(--mrff-success-tint) !important; color: var(--mrff-success-ink) !important; border-color: var(--mrff-admin-border); } .mrff-admin-page .mud-chip.mud-chip-color-warning { background-color: var(--mrff-warning-tint) !important; color: var(--mrff-warning-ink) !important; border-color: var(--mrff-admin-border); } .mrff-admin-page .mud-chip.mud-chip-color-error { background-color: var(--mrff-error-tint) !important; color: var(--mrff-error-ink) !important; border-color: var(--mrff-admin-border); } .mrff-admin-page .mud-chip.mud-chip-color-tertiary, .mrff-admin-page .mud-chip.mud-chip-color-dark { background-color: var(--mrff-admin-neutral-fill) !important; color: var(--mrff-ink-strong) !important; border-color: var(--mrff-admin-neutral-fill); } /* The uncoloured chip — used for "Pending" / "Not sent" neutral states. */ .mrff-admin-page .mud-chip:not([class*="mud-chip-color-"]) { background-color: var(--mrff-admin-neutral-fill) !important; color: var(--mrff-ink) !important; border-color: var(--mrff-admin-neutral-fill); } /* ─── Ink utilities — the replacement for Color.Secondary/Info/Warning text ─ */ .mrff-ink { color: var(--mrff-ink) !important; } .mrff-ink-strong { color: var(--mrff-ink-strong) !important; } .mrff-ink-muted { color: var(--mrff-ink-muted) !important; } .mrff-ink-secondary { color: var(--mrff-secondary-ink) !important; } .mrff-ink-primary { color: var(--mrff-primary-ink) !important; } .mrff-ink-warning { color: var(--mrff-warning-ink) !important; } .mrff-ink-error { color: var(--mrff-error-ink) !important; } .mrff-ink-success { color: var(--mrff-success-ink) !important; } /* Outlined buttons in warning/secondary hues are hairline-thin and low contrast. Admin uses filled tonal buttons instead — same semantics, legible. Hover deliberately does NOT darken the background. Deepening the tint is what pushed the success and error buttons under AA (4.46:1 and 4.48:1 over the page canvas), and for success there is no alpha that gives visible feedback while staying above 5:1. Hover changes the border and adds a lift instead, so each tone has exactly one background and hover can never regress contrast. */ .mrff-btn-tonal-warning.mud-button-root, .mrff-btn-tonal-error.mud-button-root, .mrff-btn-tonal-success.mud-button-root, .mrff-btn-tonal-primary.mud-button-root { transition: border-color 140ms ease, box-shadow 140ms ease; } .mrff-btn-tonal-warning.mud-button-root:hover, .mrff-btn-tonal-error.mud-button-root:hover, .mrff-btn-tonal-success.mud-button-root:hover, .mrff-btn-tonal-primary.mud-button-root:hover { box-shadow: var(--mrff-admin-shadow-lift) !important; } .mrff-btn-tonal-warning.mud-button-root { background-color: var(--mrff-warning-tint) !important; color: var(--mrff-warning-ink) !important; border: 1px solid var(--mrff-admin-border) !important; } .mrff-btn-tonal-warning.mud-button-root:hover { border-color: var(--mrff-warning-ink) !important; } .mrff-btn-tonal-error.mud-button-root { background-color: var(--mrff-error-tint) !important; color: var(--mrff-error-ink) !important; border: 1px solid var(--mrff-admin-border) !important; } .mrff-btn-tonal-error.mud-button-root:hover { border-color: var(--mrff-error-ink) !important; } .mrff-btn-tonal-success.mud-button-root { background-color: var(--mrff-success-tint) !important; color: var(--mrff-success-ink) !important; border: 1px solid var(--mrff-admin-border) !important; } .mrff-btn-tonal-success.mud-button-root:hover { border-color: var(--mrff-success-ink) !important; } .mrff-btn-tonal-primary.mud-button-root { background-color: var(--mrff-primary-tint) !important; color: var(--mrff-primary-ink) !important; border: 1px solid var(--mrff-admin-border) !important; } .mrff-btn-tonal-primary.mud-button-root:hover { border-color: var(--mrff-primary-ink) !important; } /* ─── Distribution list (dashboard) ────────────────────────────────────── Replaces "