/* ============================================================================ AVALME · TAILUX → MUDBLAZOR BRIDGE Component-level overrides that adapt MudBlazor's stock styles to the design design system. The CSS variable definitions (--mud-palette-*, --color-*, --av-status-*, --radius-*, etc.) live in the design tokens stylesheet — this file ONLY consumes tokens via var() and writes rules against MudBlazor / scope class selectors. Loaded AFTER the design tokens stylesheet and MudBlazor's own CSS, BEFORE avalme.css, so it wins by source order at equal specificity. Sections: 1. Card Skin (Brecha 2) — data-card-skin reskins MudCard. 2. Density (Brecha 3) — data-density="compact" tightens heights. (Plus the .bp-tm-demo task-manager scope, .bp-tm-demo-tabs, etc.) ============================================================================ */ /* ──────────────────────────────────────────────────────────────────────────── 1. CARD SKIN data-card-skin on reskins every MudCard / elevated MudPaper. "shadow" (default) keeps MudBlazor's default look. "bordered" replaces shadow with a 1px border. "filled" drops shadow and uses surface-2 fill. We exclude .mud-popover, .mud-menu and similar floating surfaces so menus keep their elevation regardless of skin. ──────────────────────────────────────────────────────────────────────────── */ [data-card-skin="bordered"] .mud-card, [data-card-skin="bordered"] .styled-table.mud-paper, [data-card-skin="bordered"] .mud-paper.bp-card { box-shadow: none !important; border: 1px solid var(--color-gray-200); } html.dark[data-card-skin="bordered"] .mud-card, html.dark[data-card-skin="bordered"] .styled-table.mud-paper, html.dark[data-card-skin="bordered"] .mud-paper.bp-card { border-color: var(--color-dark-500); } [data-card-skin="filled"] .mud-card, [data-card-skin="filled"] .styled-table.mud-paper, [data-card-skin="filled"] .mud-paper.bp-card { box-shadow: none !important; background-color: var(--color-gray-100) !important; border: 1px solid transparent; } html.dark[data-card-skin="filled"] .mud-card, html.dark[data-card-skin="filled"] .styled-table.mud-paper, html.dark[data-card-skin="filled"] .mud-paper.bp-card { background-color: var(--color-dark-600) !important; } /* shadow skin — default. No overrides; MudCard keeps its built-in elevation. */ /* ──────────────────────────────────────────────────────────────────────────── 2.b BORDER RADIUS NORMALIZATION BpAdminDashboardTheme.cs sets DefaultBorderRadius = 3px which makes inputs and cards look square. design uses rounded-lg (8px). Override component radii to match the design feel without touching the C# theme (other places may still want 3px). Order: override AFTER MudBlazor's own rules because MudBlazor sets these via inline runtime style. ──────────────────────────────────────────────────────────────────────────── */ /* Inputs (text fields, selects, autocomplete, date pickers, numeric fields) */ .mud-input.mud-input-outlined, .mud-input.mud-input-filled, .mud-input-control .mud-input-outlined-border, .mud-input-slot.mud-input-root-outlined, .mud-select .mud-input-root-outlined, .mud-autocomplete .mud-input-root-outlined, .mud-picker-input .mud-input-root-outlined { border-radius: var(--radius-lg) !important; } /* The fieldset that draws the outline in MudBlazor outlined inputs */ .mud-input-outlined-border { border-radius: var(--radius-lg) !important; } /* Buttons (default + filled + outlined) */ .mud-button-root:not(.mud-icon-button):not(.mud-fab) { border-radius: var(--radius-lg) !important; } /* Cards / Paper at default elevation */ .mud-card, .mud-paper { border-radius: var(--radius-lg) !important; } /* Popovers and floating surfaces — keep them slightly tighter */ .mud-popover, .mud-menu .mud-popover, .mud-list .mud-popover { border-radius: var(--radius-md) !important; } /* Chips */ .mud-chip { border-radius: var(--radius-sm) !important; } .mud-chip.mud-chip-pill { border-radius: var(--radius-full) !important; } /* Alerts */ .mud-alert { border-radius: var(--radius-lg) !important; } /* Dialogs */ .mud-dialog { border-radius: var(--radius-lg) !important; } /* ──────────────────────────────────────────────────────────────────────────── 2. DENSITY data-density="compact" (default) tightens heights and paddings on the interactive primitives. "comfortable" matches MudBlazor's stock spacing; no overrides needed for that case. ──────────────────────────────────────────────────────────────────────────── */ /* Buttons */ [data-density="compact"] .mud-button-root:not(.mud-icon-button):not(.mud-fab) { min-height: 32px; padding: 4px 16px; font-size: 13px; line-height: 1.4; } [data-density="compact"] .mud-button-root.mud-button-size-small:not(.mud-icon-button) { min-height: 28px; padding: 2px 12px; font-size: 12px; } /* Icon buttons */ [data-density="compact"] .mud-icon-button.mud-icon-button-size-medium { width: 36px; height: 36px; } [data-density="compact"] .mud-icon-button.mud-icon-button-size-small { width: 28px; height: 28px; } /* Inputs (outlined / filled) */ [data-density="compact"] .mud-input-control .mud-input-root.mud-input-outlined, [data-density="compact"] .mud-input-control .mud-input-root.mud-input-filled { min-height: 36px; } [data-density="compact"] .mud-input.mud-input-outlined input, [data-density="compact"] .mud-input.mud-input-filled input { padding-top: 8px; padding-bottom: 8px; } /* Tables — ensure compact rows even when Dense="false" wasn't set per call. */ [data-density="compact"] .mud-table .mud-table-row { height: 36px; } [data-density="compact"] .mud-table .mud-table-cell { padding: 6px 12px; line-height: 1.4; } [data-density="compact"] .mud-table .mud-table-head .mud-table-row, [data-density="compact"] .mud-table .mud-table-head .mud-table-cell { height: 32px; padding-top: 4px; padding-bottom: 4px; } /* Toolbars / app bar */ [data-density="compact"] .mud-toolbar { min-height: 48px; } [data-density="compact"] .mud-appbar.mud-appbar-dense .mud-toolbar { min-height: 48px; } /* Tabs */ [data-density="compact"] .mud-tabs .mud-tab { min-height: 40px !important; padding: 8px 16px !important; } /* List items */ [data-density="compact"] .mud-list .mud-list-item { min-height: 36px; padding-top: 4px; padding-bottom: 4px; } /* Chips */ [data-density="compact"] .mud-chip.mud-chip-size-medium { height: 28px; font-size: 12px; } [data-density="compact"] .mud-chip.mud-chip-size-small { height: 22px; font-size: 11px; } /* Comfortable — explicit overrides mostly to UNDO compact when the user picks it on a screen that defaults to dense styled-table etc. */ [data-density="comfortable"] .mud-table .mud-table-row { height: 48px; } [data-density="comfortable"] .mud-table .mud-table-cell { padding: 12px 20px; } /* ──────────────────────────────────────────────────────────────────────────── 4. .bp-tm-demo SCOPE — design task-manager template replica. The page uses MudBlazor primitives (MudCard, MudButton, MudChip, MudCheckBox, MudExpansionPanels, MudTabs, MudTextField, MudIconButton, MudAvatar) — the rules below override Mud's internal chrome (.mud-card, .mud-chip-root, etc.) so the visual matches avalme-task-manager.html exactly. Every value resolves to a semantic token so the theme picker flips this page too. Per-persona avatar gradients are the only HEX kept (av-1 tan/beige), intentionally isolated. Anti-pattern check: no inline Style in the .razor; no raw /