/* ============================================================================ AVALME 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.) ============================================================================ */ [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; } /* 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; } .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; } /* 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; } [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; } [data-density="comfortable"] .mud-table .mud-table-row { height: 48px; } [data-density="comfortable"] .mud-table .mud-table-cell { padding: 12px 20px; } .bp-tm-demo { font-family: var(--font-sans); color: var(--color-gray-800); } .bp-tm-demo button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; } .bp-tm-demo *, .bp-tm-demo *::before, .bp-tm-demo *::after { box-sizing: border-box; } .bp-tm-demo-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; } .bp-tm-demo-title-block { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; } .bp-tm-demo-title-icon { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%); color: var(--color-white); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -3px rgb(from var(--color-primary-600) r g b / 0.40); } .bp-tm-demo-title-icon .mud-icon-root { color: var(--color-white); } .bp-tm-demo-title { font-size: 24px; font-weight: 800; color: var(--color-gray-900); letter-spacing: -0.025em; line-height: 1.15; margin: 0; } html.dark .bp-tm-demo-title { color: var(--color-dark-50); } .bp-tm-demo-subtitle { font-size: 13px; color: var(--color-gray-500); margin: 5px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } html.dark .bp-tm-demo-subtitle { color: var(--color-dark-300); } .bp-tm-demo-dot-sep { color: var(--color-gray-300); font-weight: 700; } .bp-tm-demo-online { display: inline-flex; align-items: center; gap: 6px; color: var(--color-success-darker); font-weight: 600; } .bp-tm-demo-online::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 0 rgb(from var(--color-success) r g b / 0.6); animation: bp-tm-pulse-green 2s infinite; } @keyframes bp-tm-pulse-green { 0% { box-shadow: 0 0 0 0 rgb(from var(--color-success) r g b / 0.6); } 70% { box-shadow: 0 0 0 7px rgb(from var(--color-success) r g b / 0); } 100% { box-shadow: 0 0 0 0 rgb(from var(--color-success) r g b / 0); } } .bp-tm-demo-page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .bp-tm-demo-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: 12.5px; transition: all 0.15s; border: 1px solid transparent; white-space: nowrap; line-height: 1; } .bp-tm-demo-btn .mud-icon-root { width: 14px; height: 14px; } .bp-tm-demo-btn-primary { background: var(--color-primary-600); color: var(--color-white); box-shadow: 0 4px 12px rgb(from var(--color-primary-600) r g b / 0.25); } .bp-tm-demo-btn-primary:hover { background: var(--color-primary-700); transform: translateY(-1px); box-shadow: 0 6px 16px rgb(from var(--color-primary-600) r g b / 0.30); } .bp-tm-demo-btn-primary .mud-icon-root { color: var(--color-white); } .bp-tm-demo-btn-secondary { background: var(--color-white); color: var(--color-gray-700); border-color: var(--color-gray-200); } .bp-tm-demo-btn-secondary:hover { background: var(--color-gray-50); border-color: var(--color-gray-300); color: var(--color-gray-900); } html.dark .bp-tm-demo-btn-secondary { background: var(--color-dark-700); color: var(--color-dark-100); border-color: var(--color-dark-500); } html.dark .bp-tm-demo-btn-secondary:hover { background: var(--color-dark-600); border-color: var(--color-dark-400); } /* Vertical rhythm between the page header and the KPI grid below. */ .bp-tm-demo-header { margin-bottom: 20px; } /* Layout is handled by MudGrid (xs/sm/md). We only add bottom margin so the view-bar card sits below the KPIs with proper rhythm. */ .bp-tm-demo-kpi-grid { margin-bottom: 20px !important; } .bp-tm-demo-kpi-card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; transition: all 0.18s ease; position: relative; overflow: hidden; cursor: pointer; } html.dark .bp-tm-demo-kpi-card { background: var(--color-dark-700); border-color: var(--color-dark-500); } .bp-tm-demo-kpi-card:hover { border-color: var(--color-primary-300); transform: translateY(-2px); box-shadow: 0 8px 24px rgb(from var(--color-primary-700) r g b / 0.10), 0 2px 6px rgba(0, 0, 0, 0.05); } .bp-tm-demo-kpi-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--bp-tm-accent, var(--color-primary-600)); opacity: 0.85; border-radius: 14px 14px 0 0; } .bp-tm-demo-kpi-today { --bp-tm-accent: var(--color-primary-600); --bp-tm-accent-bg: var(--color-primary-50); --bp-tm-accent-fg: var(--color-primary-700); } .bp-tm-demo-kpi-overdue { --bp-tm-accent: var(--color-error); --bp-tm-accent-bg: rgb(from var(--color-error) r g b / 0.10); --bp-tm-accent-fg: var(--color-error-darker); } .bp-tm-demo-kpi-completed{ --bp-tm-accent: var(--color-success); --bp-tm-accent-bg: rgb(from var(--color-success) r g b / 0.10); --bp-tm-accent-fg: var(--color-success-darker); } .bp-tm-demo-kpi-team { --bp-tm-accent: var(--color-info); --bp-tm-accent-bg: rgb(from var(--color-info) r g b / 0.10); --bp-tm-accent-fg: var(--color-info-darker); } html.dark .bp-tm-demo-kpi-today { --bp-tm-accent-bg: rgb(from var(--color-primary-500) r g b / 0.15); --bp-tm-accent-fg: var(--color-primary-300); } .bp-tm-demo-kpi-top { display: flex; align-items: center; justify-content: space-between; } .bp-tm-demo-kpi-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--bp-tm-accent-bg); color: var(--bp-tm-accent-fg); display: flex; align-items: center; justify-content: center; } .bp-tm-demo-kpi-icon .mud-icon-root { color: var(--bp-tm-accent-fg); width: 20px; height: 20px; } .bp-tm-demo-kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 5px; font-family: var(--font-mono); line-height: 1; } .bp-tm-demo-kpi-trend.is-up { background: rgb(from var(--color-success) r g b / 0.10); color: var(--color-success-darker); } .bp-tm-demo-kpi-trend.is-down { background: rgb(from var(--color-error) r g b / 0.10); color: var(--color-error-darker); } .bp-tm-demo-kpi-trend.is-flat { background: var(--color-gray-100); color: var(--color-gray-700); } html.dark .bp-tm-demo-kpi-trend.is-flat { background: var(--color-dark-600); color: var(--color-dark-200); } .bp-tm-demo-kpi-value { font-size: 30px; font-weight: 800; color: var(--color-gray-900); letter-spacing: -0.03em; font-family: var(--font-mono); line-height: 1; margin: 0; } html.dark .bp-tm-demo-kpi-value { color: var(--color-dark-50); } .bp-tm-demo-kpi-label { font-size: 12.5px; font-weight: 600; color: var(--color-gray-700); margin: 0; } html.dark .bp-tm-demo-kpi-label { color: var(--color-dark-100); } .bp-tm-demo-kpi-meta { font-size: 11px; color: var(--color-gray-500); margin: 2px 0 0; } .bp-tm-demo-kpi-meta b { font-weight: 700; color: var(--color-gray-700); font-family: var(--font-mono); } html.dark .bp-tm-demo-kpi-meta { color: var(--color-dark-300); } html.dark .bp-tm-demo-kpi-meta b { color: var(--color-dark-100); } .bp-tm-demo-view-bar { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 14px; overflow: hidden; } html.dark .bp-tm-demo-view-bar { background: var(--color-dark-700); border-color: var(--color-dark-500); } /* All tab + tab-count + sync-dot rules now live further below under `.bp-tm-demo .mud-tabs.bp-tm-demo-tabs ...` (the MudBlazor-wrapped variant). The old HTML-primitive rules that lived here were causing the centered layout — `display: flex; align-items: center; padding: 0 14px;` was being applied to , fighting the actual MudTabs internals. */ .bp-tm-demo-filter-bar { display: flex; align-items: center; gap: 8px; padding: 14px; flex-wrap: wrap; background: var(--color-gray-50); border-bottom: 1px solid var(--color-gray-100); } html.dark .bp-tm-demo-filter-bar { background: var(--color-dark-800); border-bottom-color: var(--color-dark-600); } .bp-tm-demo-filter-search { display: flex; gap: 8px; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 10px; padding: 8px 12px; flex: 1; min-width: 240px; max-width: 340px; transition: all 0.15s; } html.dark .bp-tm-demo-filter-search { background: var(--color-dark-700); border-color: var(--color-dark-500); } .bp-tm-demo-filter-search:focus-within { border-color: var(--color-primary-500); box-shadow: 0 0 0 3px var(--color-primary-100); } html.dark .bp-tm-demo-filter-search:focus-within { box-shadow: 0 0 0 3px rgb(from var(--color-primary-500) r g b / 0.20); } .bp-tm-demo-filter-search input { border: none; outline: none; background: none; flex: 1; font-size: 12.5px; color: var(--color-gray-800); min-width: 0; font-family: inherit; padding: 0; } html.dark .bp-tm-demo-filter-search input { color: var(--color-dark-50); } .bp-tm-demo-filter-search input::placeholder { color: var(--color-gray-400); } .bp-tm-demo-filter-search .mud-icon-root { color: var(--color-gray-400); flex-shrink: 0; width: 15px; height: 15px; } .bp-tm-demo-filter-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 10px; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--color-gray-700); transition: all 0.15s; line-height: 1; } html.dark .bp-tm-demo-filter-pill { background: var(--color-dark-700); border-color: var(--color-dark-500); color: var(--color-dark-100); } .bp-tm-demo-filter-pill:hover { border-color: var(--color-primary-300); color: var(--color-primary-700); background: var(--color-primary-50); } .bp-tm-demo-filter-pill.has-value { border-color: var(--color-primary-400); background: var(--color-primary-50); color: var(--color-primary-700); } html.dark .bp-tm-demo-filter-pill.has-value { background: rgb(from var(--color-primary-500) r g b / 0.12); border-color: var(--color-primary-500); color: var(--color-primary-300); } .bp-tm-demo-filter-pill .lbl-key { color: var(--color-gray-500); font-weight: 500; } html.dark .bp-tm-demo-filter-pill .lbl-key { color: var(--color-dark-300); } .bp-tm-demo-filter-pill .lbl-val { color: var(--color-gray-800); font-weight: 700; } html.dark .bp-tm-demo-filter-pill .lbl-val { color: var(--color-dark-50); } .bp-tm-demo-filter-pill.has-value .lbl-val { color: var(--color-primary-700); } html.dark .bp-tm-demo-filter-pill.has-value .lbl-val { color: var(--color-primary-300); } .bp-tm-demo-filter-pill .mud-icon-root { width: 13px; height: 13px; color: currentColor; } .bp-tm-demo-filter-pill .chev { color: var(--color-gray-400); margin-left: 2px; } .bp-tm-demo-filter-spacer { flex: 1; } .bp-tm-demo-task-list { display: flex; flex-direction: column; } .bp-tm-demo-date-group { border-bottom: 1px solid var(--color-gray-100); } .bp-tm-demo-date-group:last-child { border-bottom: none; } html.dark .bp-tm-demo-date-group { border-bottom-color: var(--color-dark-600); } .bp-tm-demo-date-group-header { display: flex; align-items: center; gap: 10px; padding: 13px 18px; background: var(--color-white); user-select: none; transition: background 0.12s; width: 100%; text-align: left; } html.dark .bp-tm-demo-date-group-header { background: var(--color-dark-700); } .bp-tm-demo-date-group-header:hover { background: var(--color-gray-50); } html.dark .bp-tm-demo-date-group-header:hover { background: var(--color-dark-600); } .bp-tm-demo-chevron { color: var(--color-gray-500) !important; transition: transform 0.18s ease; flex-shrink: 0; width: 18px !important; height: 18px !important; } .bp-tm-demo-date-group.is-collapsed .bp-tm-demo-chevron { transform: rotate(-90deg); } .bp-tm-demo-group-title { display: flex; align-items: baseline; gap: 10px; } .bp-tm-demo-group-date { font-size: 14px; font-weight: 700; color: var(--color-gray-900); letter-spacing: -0.01em; } html.dark .bp-tm-demo-group-date { color: var(--color-dark-50); } .bp-tm-demo-group-day { font-size: 12.5px; font-weight: 500; color: var(--color-gray-500); } html.dark .bp-tm-demo-group-day { color: var(--color-dark-300); } .bp-tm-demo-today-badge { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: var(--color-primary-600); color: var(--color-white); line-height: 1; } .bp-tm-demo-group-count { font-size: 11px; font-weight: 700; font-family: var(--font-mono); padding: 2px 7px; border-radius: 5px; background: var(--color-gray-100); color: var(--color-gray-600); line-height: 1; } html.dark .bp-tm-demo-group-count { background: var(--color-dark-600); color: var(--color-dark-200); } .bp-tm-demo-group-spacer { flex: 1; } .bp-tm-demo-group-add { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; font-size: 11.5px; font-weight: 600; color: var(--color-primary-700); border-radius: 7px; transition: background 0.12s; line-height: 1; } .bp-tm-demo-group-add:hover { background: var(--color-primary-100); } html.dark .bp-tm-demo-group-add { color: var(--color-primary-300); } html.dark .bp-tm-demo-group-add:hover { background: rgb(from var(--color-primary-500) r g b / 0.15); } .bp-tm-demo-group-add .mud-icon-root { width: 11px; height: 11px; } .bp-tm-demo-date-group-body { display: flex; flex-direction: column; } .bp-tm-demo-date-group.is-collapsed .bp-tm-demo-date-group-body { display: none; } .bp-tm-demo-task-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 130px 170px 110px 100px 36px; align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--color-gray-100); background: var(--color-white); cursor: pointer; transition: background 0.12s; position: relative; } html.dark .bp-tm-demo-task-row { background: var(--color-dark-700); border-top-color: var(--color-dark-600); } .bp-tm-demo-task-row:first-child { border-top: none; } .bp-tm-demo-task-row:hover { background: var(--color-primary-50); } html.dark .bp-tm-demo-task-row:hover { background: rgb(from var(--color-primary-500) r g b / 0.10); } .bp-tm-demo-task-row:hover .bp-tm-demo-actions-btn { opacity: 1; } .bp-tm-demo-task-row::after { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 0 2px 2px 0; background: var(--bp-tm-row-accent, transparent); opacity: 0.6; } .bp-tm-demo-task-row[data-status="overdue"] { --bp-tm-row-accent: var(--color-error); } .bp-tm-demo-task-row[data-status="in-progress"] { --bp-tm-row-accent: var(--color-info); } .bp-tm-demo-task-row[data-status="pending"] { --bp-tm-row-accent: var(--color-warning); } .bp-tm-demo-task-row[data-status="completed"] { --bp-tm-row-accent: var(--color-success); } /* Custom checkbox */ .bp-tm-demo-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--color-gray-300); background: var(--color-white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; } html.dark .bp-tm-demo-check { background: var(--color-dark-700); border-color: var(--color-dark-450); } .bp-tm-demo-check:hover { border-color: var(--color-primary-500); } .bp-tm-demo-check.is-checked { background: var(--color-primary-600); border-color: var(--color-primary-600); } .bp-tm-demo-check.is-checked .mud-icon-root { color: var(--color-white) !important; width: 11px !important; height: 11px !important; } .bp-tm-demo-check:not(.is-checked) .mud-icon-root { display: none; } /* Body */ .bp-tm-demo-task-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .bp-tm-demo-task-title { font-size: 13.5px; font-weight: 600; color: var(--color-gray-900); letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; } html.dark .bp-tm-demo-task-title { color: var(--color-dark-50); } .bp-tm-demo-task-row[data-status="completed"] .bp-tm-demo-task-title { color: var(--color-gray-500); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--color-gray-400); } .bp-tm-demo-ctx-pill { font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; background: var(--color-primary-100); color: var(--color-primary-700); font-family: var(--font-mono); line-height: 1; } html.dark .bp-tm-demo-ctx-pill { background: rgb(from var(--color-primary-500) r g b / 0.15); color: var(--color-primary-300); } .bp-tm-demo-task-desc { font-size: 12px; color: var(--color-gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.dark .bp-tm-demo-task-desc { color: var(--color-dark-300); } /* Due time */ .bp-tm-demo-task-due { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-gray-600); font-weight: 500; } html.dark .bp-tm-demo-task-due { color: var(--color-dark-200); } .bp-tm-demo-task-due .mud-icon-root { color: var(--color-gray-400); flex-shrink: 0; width: 13px; height: 13px; } .bp-tm-demo-task-due.is-overdue { color: var(--color-error-darker); font-weight: 700; } .bp-tm-demo-task-due.is-overdue .mud-icon-root { color: var(--color-error); } .bp-tm-demo-task-due.is-soon { color: var(--color-warning-darker); font-weight: 600; } .bp-tm-demo-task-due.is-soon .mud-icon-root { color: var(--color-warning); } .bp-tm-demo-task-due.is-completed { color: var(--color-success-darker); } .bp-tm-demo-task-due.is-completed .mud-icon-root { color: var(--color-success); } /* Assignee */ .bp-tm-demo-task-assignee { display: flex; align-items: center; gap: 8px; min-width: 0; } .bp-tm-demo-av { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--color-white); font-weight: 700; font-size: 11px; border: 2px solid var(--color-white); box-shadow: 0 0 0 1px var(--color-gray-200); } html.dark .bp-tm-demo-av { border-color: var(--color-dark-700); box-shadow: 0 0 0 1px var(--color-dark-500); } /* Per-persona avatar gradients. Mostly token-driven; av-1 keeps a tan/beige fixed because the design palette doesn't have an equivalent neutral warm. */ .bp-tm-demo-av.av-1 { background: linear-gradient(135deg, #d4a574, #a87c54); } .bp-tm-demo-av.av-2 { background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700)); } .bp-tm-demo-av.av-3 { background: linear-gradient(135deg, var(--color-success-light), var(--color-success-darker)); } .bp-tm-demo-av.av-4 { background: linear-gradient(135deg, var(--color-warning-light), var(--color-warning-darker)); } .bp-tm-demo-av.av-5 { background: linear-gradient(135deg, var(--color-info-light), var(--color-info-darker)); } .bp-tm-demo-av.av-6 { background: linear-gradient(135deg, var(--color-error-light), var(--color-error-darker)); } .bp-tm-demo-assignee-name { font-size: 12.5px; font-weight: 600; color: var(--color-gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } html.dark .bp-tm-demo-assignee-name { color: var(--color-dark-100); } /* Status badge */ .bp-tm-demo-status { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; white-space: nowrap; line-height: 1; } .bp-tm-demo-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .bp-tm-demo-status.is-pending { background: rgb(from var(--color-warning) r g b / 0.12); color: var(--color-warning-darker); } .bp-tm-demo-status.is-pending .bp-tm-demo-status-dot { background: var(--color-warning); } .bp-tm-demo-status.is-in-progress { background: rgb(from var(--color-info) r g b / 0.12); color: var(--color-info-darker); } .bp-tm-demo-status.is-in-progress .bp-tm-demo-status-dot { background: var(--color-info); box-shadow: 0 0 0 3px rgb(from var(--color-info) r g b / 0.18); animation: bp-tm-pulse-blue 2s infinite; } @keyframes bp-tm-pulse-blue { 0% { box-shadow: 0 0 0 0 rgb(from var(--color-info) r g b / 0.4); } 70% { box-shadow: 0 0 0 5px rgb(from var(--color-info) r g b / 0); } 100% { box-shadow: 0 0 0 0 rgb(from var(--color-info) r g b / 0); } } .bp-tm-demo-status.is-completed { background: rgb(from var(--color-success) r g b / 0.12); color: var(--color-success-darker); } .bp-tm-demo-status.is-completed .bp-tm-demo-status-dot { background: var(--color-success); } .bp-tm-demo-status.is-overdue { background: rgb(from var(--color-error) r g b / 0.12); color: var(--color-error-darker); } .bp-tm-demo-status.is-overdue .bp-tm-demo-status-dot { background: var(--color-error); } /* Priority badge */ .bp-tm-demo-priority { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; line-height: 1; } .bp-tm-demo-priority .mud-icon-root { width: 10px; height: 10px; } .bp-tm-demo-priority.is-high { background: rgb(from var(--color-error) r g b / 0.12); color: var(--color-error-darker); } .bp-tm-demo-priority.is-medium { background: rgb(from var(--color-warning) r g b / 0.12); color: var(--color-warning-darker); } .bp-tm-demo-priority.is-low { background: var(--color-gray-100); color: var(--color-gray-600); } html.dark .bp-tm-demo-priority.is-low { background: var(--color-dark-600); color: var(--color-dark-200); } /* Actions button */ .bp-tm-demo-actions-btn { width: 30px; height: 30px; border-radius: 7px; color: var(--color-gray-500); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.15s; } .bp-tm-demo-actions-btn:hover { background: var(--color-gray-100); color: var(--color-primary-700); opacity: 1 !important; } html.dark .bp-tm-demo-actions-btn:hover { background: var(--color-dark-600); color: var(--color-primary-300); } .bp-tm-demo-actions-btn .mud-icon-root { width: 14px; height: 14px; } @media (max-width: 1280px) { .bp-tm-demo .bp-tm-demo-kpi-grid { grid-template-columns: repeat(2, 1fr); } .bp-tm-demo .bp-tm-demo-task-row { grid-template-columns: 32px minmax(0, 1fr) 110px 150px 100px 90px 32px; gap: 10px; padding: 12px 14px; } } @media (max-width: 900px) { .bp-tm-demo .bp-tm-demo-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .bp-tm-demo .bp-tm-demo-task-row { grid-template-columns: 28px minmax(0, 1fr) 90px 32px; gap: 10px; } .bp-tm-demo .bp-tm-demo-task-row > .bp-tm-demo-task-due, .bp-tm-demo .bp-tm-demo-task-row > .bp-tm-demo-task-assignee, .bp-tm-demo .bp-tm-demo-task-row > .bp-tm-demo-priority { display: none; } } .bp-tm-demo .bp-tm-demo-title-icon.mud-paper { width: 46px; height: 46px; border-radius: 12px !important; flex-shrink: 0; background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%) !important; color: var(--color-white); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -3px rgb(from var(--color-primary-600) r g b / 0.40) !important; border: none !important; } .bp-tm-demo .bp-tm-demo-title-icon .mud-icon-root { color: var(--color-white); width: 22px !important; height: 22px !important; } .bp-tm-demo .bp-tm-demo-subtitle-text { color: var(--color-gray-500); } html.dark .bp-tm-demo .bp-tm-demo-subtitle-text { color: var(--color-dark-300); } .bp-page-subtitle { color: var(--color-gray-500); } html.dark .bp-page-subtitle { color: var(--color-dark-300); } /* Online indicator — text + leading pulse dot via ::before */ .bp-tm-demo .bp-tm-demo-online { display: inline-flex; align-items: center; gap: 6px; color: var(--color-success-darker) !important; font-weight: 600; } .bp-tm-demo .bp-tm-demo-online::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 0 rgb(from var(--color-success) r g b / 0.6); animation: bp-tm-pulse-green 2s infinite; flex-shrink: 0; } .bp-tm-demo .mud-button-root.bp-tm-demo-btn { border-radius: 10px !important; padding: 9px 14px !important; font-size: 12.5px !important; font-weight: 600 !important; text-transform: none !important; line-height: 1 !important; min-height: unset !important; height: 38px; gap: 7px; } .bp-tm-demo .mud-button-root.bp-tm-demo-btn-primary.mud-button-filled { background-color: var(--color-primary-600) !important; color: var(--color-white) !important; border: 1px solid transparent !important; box-shadow: 0 4px 12px rgb(from var(--color-primary-600) r g b / 0.25) !important; } .bp-tm-demo .mud-button-root.bp-tm-demo-btn-primary.mud-button-filled:hover { background-color: var(--color-primary-700) !important; transform: translateY(-1px); box-shadow: 0 6px 16px rgb(from var(--color-primary-600) r g b / 0.30) !important; } .bp-tm-demo .mud-button-root.bp-tm-demo-btn-primary .mud-icon-root, .bp-tm-demo .mud-button-root.bp-tm-demo-btn-primary { color: var(--color-white) !important; } /* Outlined / secondary buttons in the page header */ .bp-tm-demo .mud-button-root.bp-tm-demo-btn-secondary.mud-button-outlined { background-color: var(--color-white) !important; color: var(--color-gray-700) !important; border: 1px solid var(--color-gray-200) !important; } .bp-tm-demo .mud-button-root.bp-tm-demo-btn-secondary.mud-button-outlined:hover { background-color: var(--color-gray-50) !important; border-color: var(--color-gray-300) !important; color: var(--color-gray-900) !important; } html.dark .bp-tm-demo .mud-button-root.bp-tm-demo-btn-secondary.mud-button-outlined { background-color: var(--color-dark-700) !important; color: var(--color-dark-100) !important; border-color: var(--color-dark-500) !important; } html.dark .bp-tm-demo .mud-button-root.bp-tm-demo-btn-secondary.mud-button-outlined:hover { background-color: var(--color-dark-600) !important; border-color: var(--color-dark-400) !important; } .bp-tm-demo .mud-button-root.bp-tm-demo-btn-secondary .mud-icon-root { color: var(--color-gray-600) !important; } html.dark .bp-tm-demo .mud-button-root.bp-tm-demo-btn-secondary .mud-icon-root { color: var(--color-dark-200) !important; } /* Filter pill buttons */ .bp-tm-demo .mud-button-root.bp-tm-demo-filter-pill.mud-button-outlined { border-radius: 10px !important; padding: 0 12px !important; height: 38px; font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; line-height: 1 !important; min-height: unset !important; background-color: var(--color-white) !important; border: 1px solid var(--color-gray-200) !important; color: var(--color-gray-700) !important; gap: 6px; } html.dark .bp-tm-demo .mud-button-root.bp-tm-demo-filter-pill.mud-button-outlined { background-color: var(--color-dark-700) !important; border-color: var(--color-dark-500) !important; color: var(--color-dark-100) !important; } .bp-tm-demo .mud-button-root.bp-tm-demo-filter-pill.mud-button-outlined:hover { border-color: var(--color-primary-300) !important; color: var(--color-primary-700) !important; background-color: var(--color-primary-50) !important; } .bp-tm-demo .mud-button-root.bp-tm-demo-filter-pill.has-value { border-color: var(--color-primary-400) !important; background-color: var(--color-primary-50) !important; color: var(--color-primary-700) !important; } html.dark .bp-tm-demo .mud-button-root.bp-tm-demo-filter-pill.has-value { background-color: rgb(from var(--color-primary-500) r g b / 0.12) !important; border-color: var(--color-primary-500) !important; color: var(--color-primary-300) !important; } .bp-tm-demo .bp-tm-demo-filter-pill .bp-tm-demo-filter-key { color: var(--color-gray-500); font-weight: 500; margin-right: 4px; } .bp-tm-demo .bp-tm-demo-filter-pill.has-value .bp-tm-demo-filter-key { color: inherit; opacity: 0.7; } html.dark .bp-tm-demo .bp-tm-demo-filter-pill .bp-tm-demo-filter-key { color: var(--color-dark-300); } .bp-tm-demo .bp-tm-demo-filter-pill .bp-tm-demo-filter-val { color: var(--color-gray-900); font-weight: 700; } html.dark .bp-tm-demo .bp-tm-demo-filter-pill .bp-tm-demo-filter-val { color: var(--color-dark-50); } .bp-tm-demo .bp-tm-demo-filter-pill.has-value .bp-tm-demo-filter-val { color: inherit; } .bp-tm-demo .mud-card.bp-tm-demo-kpi-card, .bp-tm-demo .mud-card.bp-tm-demo-view-bar { border-radius: 14px !important; border-color: var(--color-gray-200); background-color: var(--color-white); } html.dark .bp-tm-demo .mud-card.bp-tm-demo-kpi-card, html.dark .bp-tm-demo .mud-card.bp-tm-demo-view-bar { background-color: var(--color-dark-700); border-color: var(--color-dark-500); } .bp-tm-demo .mud-card.bp-tm-demo-kpi-card { padding: 0; transition: all 0.18s ease; cursor: pointer; } .bp-tm-demo .mud-card.bp-tm-demo-kpi-card:hover { border-color: var(--color-primary-300) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgb(from var(--color-primary-700) r g b / 0.10), 0 2px 6px rgba(0, 0, 0, 0.05); } .bp-tm-demo .mud-card.bp-tm-demo-kpi-card .mud-card-content { padding: 18px 20px; } .bp-tm-demo .bp-tm-demo-kpi-icon.mud-paper { width: 38px !important; height: 38px !important; border-radius: 10px !important; background-color: var(--bp-tm-accent-bg) !important; color: var(--bp-tm-accent-fg); display: flex !important; align-items: center; justify-content: center; border: none !important; box-shadow: none !important; } .bp-tm-demo .bp-tm-demo-kpi-icon .mud-icon-root { color: var(--bp-tm-accent-fg) !important; width: 20px !important; height: 20px !important; } .bp-tm-demo .mud-chip { text-transform: none; letter-spacing: 0; } .bp-tm-demo .mud-chip.bp-tm-demo-kpi-trend { height: auto !important; min-height: 0 !important; padding: 3px 7px !important; font-size: 11px !important; font-weight: 700 !important; border-radius: 5px !important; font-family: var(--font-mono); line-height: 1; margin: 0; background-color: transparent !important; color: inherit !important; } .bp-tm-demo .mud-chip.bp-tm-demo-kpi-trend.is-up { background-color: rgb(from var(--color-success) r g b / 0.10) !important; color: var(--color-success-darker) !important; } .bp-tm-demo .mud-chip.bp-tm-demo-kpi-trend.is-down { background-color: rgb(from var(--color-error) r g b / 0.10) !important; color: var(--color-error-darker) !important; } .bp-tm-demo .mud-chip.bp-tm-demo-kpi-trend.is-flat { background-color: var(--color-gray-100) !important; color: var(--color-gray-700) !important; } html.dark .bp-tm-demo .mud-chip.bp-tm-demo-kpi-trend.is-flat { background-color: var(--color-dark-600) !important; color: var(--color-dark-200) !important; } /* KPI value / label / meta typography */ .bp-tm-demo .bp-tm-demo-kpi-value.mud-typography { font-size: 30px !important; font-weight: 800 !important; color: var(--color-gray-900); letter-spacing: -0.03em; font-family: var(--font-mono) !important; line-height: 1 !important; margin: 0 !important; } html.dark .bp-tm-demo .bp-tm-demo-kpi-value.mud-typography { color: var(--color-dark-50); } .bp-tm-demo .bp-tm-demo-kpi-label.mud-typography { font-size: 12.5px !important; font-weight: 600 !important; color: var(--color-gray-700); margin-top: 8px !important; } html.dark .bp-tm-demo .bp-tm-demo-kpi-label.mud-typography { color: var(--color-dark-100); } .bp-tm-demo .bp-tm-demo-kpi-meta.mud-typography { font-size: 11px !important; color: var(--color-gray-500); margin-top: 2px !important; } .bp-tm-demo .bp-tm-demo-kpi-meta b { font-weight: 700; color: var(--color-gray-700); font-family: var(--font-mono); } html.dark .bp-tm-demo .bp-tm-demo-kpi-meta b { color: var(--color-dark-100); } .bp-tm-demo .mud-card.bp-tm-demo-view-bar { overflow: hidden; position: relative; } .bp-tm-demo .mud-tabs.bp-tm-demo-tabs, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tabs-toolbar, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tabs-tabbar-wrapper, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tabs-tabbar-inner, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tabs-panels, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tabs-panels-inner { background: transparent !important; box-shadow: none !important; } .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tabs-toolbar { min-height: 0; padding: 0 !important; border-bottom: 1px solid var(--color-gray-100); } html.dark .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tabs-toolbar { border-bottom-color: var(--color-dark-600); } /* Left-align the tabs across every possible MudBlazor 9 wrapper class. MudTabs centers by default and the exact wrapper name has shifted between minor versions (mud-tabs-tabbar, -content, -inner) — selecting all of them keeps this robust. */ .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tabs-tabbar, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tabs-tabbar-wrapper, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tabs-tabbar-content, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tabs-tabbar-inner { justify-content: flex-start !important; } /* Indent the first tab so it doesn't touch the card edge. */ .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab:first-of-type { margin-left: 14px; } /* Strip every form of background that legacy + Mud apply to a tab. Legacy uses `background: var(--clp-primary)` (shorthand) on .mud-tab-active, which would beat a `background-color` override — so we force the shorthand here. */ .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab:hover, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab:focus, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab:focus-visible, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab:active, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab.mud-tab-active, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab.mud-tab-active:hover, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab.mud-tab-active:focus { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; margin: 0 !important; } .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab { padding: 14px 16px 0px 16px !important; } /* Mud injects an absolute ::before on hovered/active tabs as a tinted overlay. Hide it so the tab stays visually flat. */ .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab::before, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab::after { display: none !important; } .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab .mud-ripple, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab .mud-ripple-visual { background-color: transparent !important; } /* Tab typography. Padding mirrors the rule above (zero bottom so the slider sits flush against the toolbar's border-bottom). */ .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab { font-size: 13px !important; font-weight: 600 !important; color: var(--color-gray-600) !important; text-transform: none !important; padding: 14px 16px 0px 16px !important; min-width: 0 !important; min-height: 0 !important; border-radius: 0 !important; } .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab .mud-icon-root { color: inherit !important; } html.dark .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab { color: var(--color-dark-300) !important; } .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab:hover { color: var(--color-gray-900) !important; } html.dark .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab:hover { color: var(--color-dark-50) !important; } .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab.mud-tab-active, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab.mud-tab-active:hover { color: var(--color-primary-700) !important; } html.dark .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab.mud-tab-active, html.dark .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab.mud-tab-active:hover { color: var(--color-primary-300) !important; } /* The 3-px underline. avalme-legacy.css hides the slider globally with `.mud-tabs .mud-tab-slider { display: none !important; }`; we have to force it back on inside the demo scope. */ .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab-slider { display: block !important; background-color: var(--color-primary-600) !important; height: 3px !important; } html.dark .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tab-slider { background-color: var(--color-primary-500) !important; } .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tabs-panels, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tabpanel, .bp-tm-demo .mud-tabs.bp-tm-demo-tabs .mud-tabpanel > div { padding: 0 !important; margin: 0 !important; width: 100% !important; } .bp-tm-demo .mud-chip.bp-tm-demo-calendar-sync { position: absolute !important; top: 14px; right: 14px; z-index: 2; background-color: rgb(from var(--color-success) r g b / 0.10) !important; color: var(--color-success-darker) !important; font-size: 11px !important; font-weight: 600 !important; padding: 5px 10px !important; border-radius: 8px !important; height: auto !important; min-height: 0 !important; text-transform: none !important; letter-spacing: 0; margin: 0; } .bp-tm-demo .mud-chip.bp-tm-demo-calendar-sync .mud-chip-icon { color: var(--color-success) !important; width: 8px !important; height: 8px !important; margin-right: 2px; } html.dark .bp-tm-demo .mud-chip.bp-tm-demo-calendar-sync { background-color: rgb(from var(--color-success-light) r g b / 0.15) !important; color: var(--color-success-light) !important; } /* Filter bar */ .bp-tm-demo .bp-tm-demo-filter-bar { padding: 14px; background-color: var(--color-gray-50); border-bottom: 1px solid var(--color-gray-100); } html.dark .bp-tm-demo .bp-tm-demo-filter-bar { background-color: var(--color-dark-800); border-bottom-color: var(--color-dark-600); } .bp-tm-demo .mud-input-control.bp-tm-demo-filter-search { flex: 1 1 100%; min-width: 240px; margin: 0 !important; } .bp-tm-demo .bp-tm-demo-filter-search .mud-input.mud-input-outlined { border-radius: 10px !important; background-color: var(--color-white); height: 38px; min-height: 38px; } html.dark .bp-tm-demo .bp-tm-demo-filter-search .mud-input.mud-input-outlined { background-color: var(--color-dark-700); } .bp-tm-demo .bp-tm-demo-filter-search .mud-input.mud-input-outlined input { font-size: 12.5px !important; padding-top: 8px !important; padding-bottom: 8px !important; } .bp-tm-demo .bp-tm-demo-filter-search .mud-input.mud-input-outlined input::placeholder { color: var(--color-gray-400); opacity: 1; } .bp-tm-demo .bp-tm-demo-filter-search .mud-input-outlined-border { border-color: var(--color-gray-200) !important; } html.dark .bp-tm-demo .bp-tm-demo-filter-search .mud-input-outlined-border { border-color: var(--color-dark-500) !important; } .bp-tm-demo .bp-tm-demo-filter-search .mud-input-adornment .mud-icon-root { color: var(--color-gray-400); width: 15px !important; height: 15px !important; } /* Empty state for Board / Calendar tab panels */ .bp-tm-demo .bp-tm-demo-empty { text-align: center; color: var(--color-gray-500); gap: 8px; } html.dark .bp-tm-demo .bp-tm-demo-empty { color: var(--color-dark-300); } .bp-tm-demo .bp-tm-demo-empty .mud-icon-root { width: 48px !important; height: 48px !important; color: var(--color-gray-400); } html.dark .bp-tm-demo .bp-tm-demo-empty .mud-icon-root { color: var(--color-dark-400); } .bp-tm-demo .mud-expansion-panels.bp-tm-demo-groups { box-shadow: none !important; background: transparent; } .bp-tm-demo .mud-expansion-panels.bp-tm-demo-groups .mud-expand-panel { background-color: var(--color-white) !important; border-bottom: 1px solid var(--color-gray-100) !important; border-radius: 0 !important; box-shadow: none !important; } html.dark .bp-tm-demo .mud-expansion-panels.bp-tm-demo-groups .mud-expand-panel { background-color: var(--color-dark-700) !important; border-bottom-color: var(--color-dark-600) !important; } .bp-tm-demo .mud-expansion-panels.bp-tm-demo-groups .mud-expand-panel:last-child { border-bottom: none !important; } .bp-tm-demo .mud-expand-panel .mud-expand-panel-header { padding: 13px 18px !important; } .bp-tm-demo .mud-expand-panel .mud-expand-panel-header:hover { background-color: var(--color-gray-50); } html.dark .bp-tm-demo .mud-expand-panel .mud-expand-panel-header:hover { background-color: var(--color-dark-600); } /* Strip every padding/margin from the collapse internals. MudExpansionPanel wraps its body in mud-collapse-container > mud-collapse-wrapper > mud-collapse-wrapper-inner — each layer can have its own padding. */ .bp-tm-demo .mud-expand-panel .mud-expand-panel-content, .bp-tm-demo .mud-expand-panel .mud-collapse-container, .bp-tm-demo .mud-expand-panel .mud-collapse-wrapper, .bp-tm-demo .mud-expand-panel .mud-collapse-wrapper-inner, .bp-tm-demo .mud-expand-panel .mud-expand-panel-content > * { padding: 0 !important; margin: 0 !important; } /* Date-group title content typography */ .bp-tm-demo .bp-tm-demo-group-date.mud-typography { font-size: 14px !important; font-weight: 700 !important; color: var(--color-gray-900); letter-spacing: -0.01em; margin: 0 !important; } html.dark .bp-tm-demo .bp-tm-demo-group-date.mud-typography { color: var(--color-dark-50); } .bp-tm-demo .bp-tm-demo-group-day.mud-typography { font-size: 12.5px !important; color: var(--color-gray-500); font-weight: 500; margin: 0 !important; } html.dark .bp-tm-demo .bp-tm-demo-group-day.mud-typography { color: var(--color-dark-300); } /* TODAY badge chip */ .bp-tm-demo .mud-chip.bp-tm-demo-today-badge { background-color: var(--color-primary-600) !important; color: var(--color-white) !important; font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 3px 8px !important; border-radius: 5px !important; height: auto !important; min-height: 0 !important; margin: 0; } /* Group count chip */ .bp-tm-demo .mud-chip.bp-tm-demo-group-count { background-color: var(--color-gray-100) !important; color: var(--color-gray-600) !important; font-size: 11px !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 5px !important; height: auto !important; min-height: 0 !important; font-family: var(--font-mono) !important; text-transform: none !important; letter-spacing: 0; margin: 0; } html.dark .bp-tm-demo .mud-chip.bp-tm-demo-group-count { background-color: var(--color-dark-600) !important; color: var(--color-dark-200) !important; } /* Group "Add task" inline button */ .bp-tm-demo .mud-button-root.bp-tm-demo-group-add { text-transform: none !important; font-size: 11.5px !important; font-weight: 600 !important; padding: 6px 10px !important; min-height: 0 !important; border-radius: 7px !important; } .bp-tm-demo .mud-paper.bp-tm-demo-task-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 130px 170px 110px 100px 36px; align-items: center; gap: 14px; padding: 13px 18px !important; background-color: var(--color-white) !important; border-top: 1px solid var(--color-gray-100); cursor: pointer; transition: background 0.12s; position: relative; border-radius: 0 !important; } html.dark .bp-tm-demo .mud-paper.bp-tm-demo-task-row { background-color: var(--color-dark-700) !important; border-top-color: var(--color-dark-600); } .bp-tm-demo .mud-paper.bp-tm-demo-task-row:hover { background-color: var(--color-primary-50) !important; } html.dark .bp-tm-demo .mud-paper.bp-tm-demo-task-row:hover { background-color: rgb(from var(--color-primary-500) r g b / 0.10) !important; } .bp-tm-demo .mud-paper.bp-tm-demo-task-row:hover .bp-tm-demo-actions-btn { opacity: 1; } .bp-tm-demo .mud-paper.bp-tm-demo-task-row::after { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 0 2px 2px 0; background: var(--bp-tm-row-accent, transparent); opacity: 0.6; } .bp-tm-demo .mud-paper.bp-tm-demo-task-row[data-status="overdue"] { --bp-tm-row-accent: var(--color-error); } .bp-tm-demo .mud-paper.bp-tm-demo-task-row[data-status="in-progress"] { --bp-tm-row-accent: var(--color-info); } .bp-tm-demo .mud-paper.bp-tm-demo-task-row[data-status="pending"] { --bp-tm-row-accent: var(--color-warning); } .bp-tm-demo .mud-paper.bp-tm-demo-task-row[data-status="completed"] { --bp-tm-row-accent: var(--color-success); } .bp-tm-demo .mud-checkbox.bp-tm-demo-check { margin: 0; padding: 0; } .bp-tm-demo .mud-checkbox.bp-tm-demo-check .mud-icon-button { padding: 0 !important; width: 18px; height: 18px; } .bp-tm-demo .mud-checkbox.bp-tm-demo-check .mud-icon-root { width: 18px !important; height: 18px !important; } /* Title + ctx chip */ .bp-tm-demo .bp-tm-demo-task-body { min-width: 0; gap: 3px; } .bp-tm-demo .bp-tm-demo-task-title.mud-typography { font-size: 13.5px !important; font-weight: 600 !important; color: var(--color-gray-900); letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 !important; min-width: 0; } html.dark .bp-tm-demo .bp-tm-demo-task-title.mud-typography { color: var(--color-dark-50); } .bp-tm-demo .mud-paper.bp-tm-demo-task-row[data-status="completed"] .bp-tm-demo-task-title.mud-typography { color: var(--color-gray-500); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--color-gray-400); } .bp-tm-demo .mud-chip.bp-tm-demo-ctx-pill { background-color: var(--color-primary-100) !important; color: var(--color-primary-700) !important; font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; padding: 3px 6px !important; border-radius: 4px !important; height: auto !important; min-height: 0 !important; font-family: var(--font-mono) !important; margin: 0; flex-shrink: 0; } html.dark .bp-tm-demo .mud-chip.bp-tm-demo-ctx-pill { background-color: rgb(from var(--color-primary-500) r g b / 0.15) !important; color: var(--color-primary-300) !important; } .bp-tm-demo .bp-tm-demo-task-desc.mud-typography { font-size: 12px !important; color: var(--color-gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 !important; } html.dark .bp-tm-demo .bp-tm-demo-task-desc.mud-typography { color: var(--color-dark-300); } /* Due time */ .bp-tm-demo .bp-tm-demo-task-due { color: var(--color-gray-600); } html.dark .bp-tm-demo .bp-tm-demo-task-due { color: var(--color-dark-200); } .bp-tm-demo .bp-tm-demo-task-due .mud-icon-root { color: var(--color-gray-400); width: 13px !important; height: 13px !important; flex-shrink: 0; } .bp-tm-demo .bp-tm-demo-task-due .mud-typography { font-size: 12px !important; font-weight: 500; color: inherit; margin: 0 !important; } .bp-tm-demo .bp-tm-demo-task-due.is-overdue { color: var(--color-error-darker); font-weight: 700; } .bp-tm-demo .bp-tm-demo-task-due.is-overdue .mud-icon-root { color: var(--color-error); } .bp-tm-demo .bp-tm-demo-task-due.is-overdue .mud-typography { font-weight: 700 !important; } .bp-tm-demo .bp-tm-demo-task-due.is-soon { color: var(--color-warning-darker); font-weight: 600; } .bp-tm-demo .bp-tm-demo-task-due.is-soon .mud-icon-root { color: var(--color-warning); } .bp-tm-demo .bp-tm-demo-task-due.is-soon .mud-typography { font-weight: 600 !important; } .bp-tm-demo .bp-tm-demo-task-due.is-completed { color: var(--color-success-darker); } .bp-tm-demo .bp-tm-demo-task-due.is-completed .mud-icon-root { color: var(--color-success); } /* Assignee */ .bp-tm-demo .bp-tm-demo-task-assignee { min-width: 0; } .bp-tm-demo .mud-avatar.bp-tm-demo-av { width: 26px !important; height: 26px !important; font-size: 11px !important; font-weight: 700 !important; color: var(--color-white) !important; border: 2px solid var(--color-white); box-shadow: 0 0 0 1px var(--color-gray-200); } html.dark .bp-tm-demo .mud-avatar.bp-tm-demo-av { border-color: var(--color-dark-700); box-shadow: 0 0 0 1px var(--color-dark-500); } /* Per-persona avatar gradients */ .bp-tm-demo .mud-avatar.bp-tm-demo-av.av-1 { background: linear-gradient(135deg, #d4a574, #a87c54) !important; } .bp-tm-demo .mud-avatar.bp-tm-demo-av.av-2 { background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700)) !important; } .bp-tm-demo .mud-avatar.bp-tm-demo-av.av-3 { background: linear-gradient(135deg, var(--color-success-light), var(--color-success-darker)) !important; } .bp-tm-demo .mud-avatar.bp-tm-demo-av.av-4 { background: linear-gradient(135deg, var(--color-warning-light), var(--color-warning-darker)) !important; } .bp-tm-demo .mud-avatar.bp-tm-demo-av.av-5 { background: linear-gradient(135deg, var(--color-info-light), var(--color-info-darker)) !important; } .bp-tm-demo .mud-avatar.bp-tm-demo-av.av-6 { background: linear-gradient(135deg, var(--color-error-light), var(--color-error-darker)) !important; } .bp-tm-demo .bp-tm-demo-assignee-name.mud-typography { font-size: 12.5px !important; font-weight: 600 !important; color: var(--color-gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; margin: 0 !important; } html.dark .bp-tm-demo .bp-tm-demo-assignee-name.mud-typography { color: var(--color-dark-100); } /* Status badge chip */ .bp-tm-demo .mud-chip.bp-tm-demo-status { height: auto !important; min-height: 0 !important; padding: 4px 9px !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; border-radius: 6px !important; margin: 0; } .bp-tm-demo .mud-chip.bp-tm-demo-status .mud-chip-icon { width: 6px !important; height: 6px !important; margin-right: 2px; } .bp-tm-demo .mud-chip.bp-tm-demo-status.is-pending { background-color: rgb(from var(--color-warning) r g b / 0.12) !important; color: var(--color-warning-darker) !important; } .bp-tm-demo .mud-chip.bp-tm-demo-status.is-pending .mud-chip-icon { color: var(--color-warning) !important; } .bp-tm-demo .mud-chip.bp-tm-demo-status.is-in-progress { background-color: rgb(from var(--color-info) r g b / 0.12) !important; color: var(--color-info-darker) !important; } .bp-tm-demo .mud-chip.bp-tm-demo-status.is-in-progress .mud-chip-icon { color: var(--color-info) !important; border-radius: 50%; box-shadow: 0 0 0 3px rgb(from var(--color-info) r g b / 0.18); animation: bp-tm-pulse-blue 2s infinite; } @keyframes bp-tm-pulse-blue { 0% { box-shadow: 0 0 0 0 rgb(from var(--color-info) r g b / 0.4); } 70% { box-shadow: 0 0 0 5px rgb(from var(--color-info) r g b / 0); } 100% { box-shadow: 0 0 0 0 rgb(from var(--color-info) r g b / 0); } } .bp-tm-demo .mud-chip.bp-tm-demo-status.is-completed { background-color: rgb(from var(--color-success) r g b / 0.12) !important; color: var(--color-success-darker) !important; } .bp-tm-demo .mud-chip.bp-tm-demo-status.is-completed .mud-chip-icon { color: var(--color-success) !important; } .bp-tm-demo .mud-chip.bp-tm-demo-status.is-overdue { background-color: rgb(from var(--color-error) r g b / 0.12) !important; color: var(--color-error-darker) !important; } .bp-tm-demo .mud-chip.bp-tm-demo-status.is-overdue .mud-chip-icon { color: var(--color-error) !important; } /* Priority badge chip */ .bp-tm-demo .mud-chip.bp-tm-demo-priority { height: auto !important; min-height: 0 !important; padding: 4px 8px !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; border-radius: 6px !important; margin: 0; } .bp-tm-demo .mud-chip.bp-tm-demo-priority .mud-chip-icon { width: 10px !important; height: 10px !important; margin-right: 2px; } .bp-tm-demo .mud-chip.bp-tm-demo-priority.is-high { background-color: rgb(from var(--color-error) r g b / 0.12) !important; color: var(--color-error-darker) !important; } .bp-tm-demo .mud-chip.bp-tm-demo-priority.is-high .mud-chip-icon { color: var(--color-error) !important; } .bp-tm-demo .mud-chip.bp-tm-demo-priority.is-medium { background-color: rgb(from var(--color-warning) r g b / 0.12) !important; color: var(--color-warning-darker) !important; } .bp-tm-demo .mud-chip.bp-tm-demo-priority.is-medium .mud-chip-icon { color: var(--color-warning) !important; } .bp-tm-demo .mud-chip.bp-tm-demo-priority.is-low { background-color: var(--color-gray-100) !important; color: var(--color-gray-600) !important; } .bp-tm-demo .mud-chip.bp-tm-demo-priority.is-low .mud-chip-icon { color: var(--color-gray-500) !important; } html.dark .bp-tm-demo .mud-chip.bp-tm-demo-priority.is-low { background-color: var(--color-dark-600) !important; color: var(--color-dark-200) !important; } /* MudIconButton actions */ .bp-tm-demo .mud-icon-button.bp-tm-demo-actions-btn { width: 30px; height: 30px; border-radius: 7px !important; color: var(--color-gray-500); opacity: 0; transition: all 0.15s; padding: 0 !important; } .bp-tm-demo .mud-icon-button.bp-tm-demo-actions-btn:hover { background-color: var(--color-gray-100) !important; color: var(--color-primary-700) !important; opacity: 1 !important; } html.dark .bp-tm-demo .mud-icon-button.bp-tm-demo-actions-btn:hover { background-color: var(--color-dark-600) !important; color: var(--color-primary-300) !important; } .bp-tm-demo .mud-icon-button.bp-tm-demo-actions-btn .mud-icon-root { width: 14px; height: 14px; } /* ============================================================================ §LAST GLOBAL TYPOGRAPHY SAFETY NET — Force Inter on MudBlazor surfaces ---------------------------------------------------------------------------- MudBlazor's bundled CSS sets `font-family: Roboto, "Helvetica Neue", sans-serif` on `.mud-application-layout` and a handful of typography primitives. We can't edit Mud's package CSS, but this file loads AFTER MudBlazor.min.css, so an explicit override here wins by source order. We re-route every visible Mud surface to `var(--font-sans)` (Inter) so the app inherits the design typography end-to-end. Icons, code blocks and monospaced cells are exempt — they use `var(--font-mono)` (system stack). Doctrine: ver "Typography" en CLAUDE.md. ============================================================================ */ html, body, .mud-application-layout, .mud-typography, .mud-input, .mud-input-input, .mud-input-label, .mud-input-helper-text, .mud-button-root, .mud-button-label, .mud-icon-button, .mud-table, .mud-table-cell, .mud-list-item-text, .mud-list-item-primary-text, .mud-list-item-secondary-text, .mud-card, .mud-card-content, .mud-card-header, .mud-dialog, .mud-dialog-title, .mud-dialog-content, .mud-dialog-actions, .mud-tab, .mud-tab-panel, .mud-tabs, .mud-tooltip, .mud-menu, .mud-menu-item, .mud-select, .mud-select-input, .mud-chip, .mud-paper, .mud-toolbar, .mud-appbar, .mud-drawer, .mud-drawer-header, .mud-drawer-content, .mud-nav-link, .mud-nav-group, .mud-expansion-panel, .mud-expansion-panel-content, .mud-expansion-panel-header, .mud-tree-view, .mud-tree-view-item, .mud-form-control, .mud-radio, .mud-checkbox, .mud-switch, .mud-snackbar, .mud-alert, .mud-badge, .mud-breadcrumbs, .mud-overlay-content { font-family: var(--font-sans); } code, pre, samp, kbd, .mono, .mud-typography-code { font-family: var(--font-mono); } /* ============================================================================ §LAST-2 GLOBAL FORM-CONTROL FONT-SIZE — Force design 14 px on Mud inputs ---------------------------------------------------------------------------- the baseline en el design system Guía Visual es `body { text-sm leading-5 }` = 14 px / 20 px. Form controls en Guía Visual (`.form-input`, `.form-select`, `.form-textarea`) NO setean font-size propio — heredan 14 px del body. MudBlazor ships its own defaults (16 px on inputs in some variants, 14 px in others, plus floating-label scaling), so the form-control surface is visually inconsistent with design until we override. We lock every form-control surface in Mud at: • font-family: var(--font-sans) = Inter (matches §LAST) • font-size: var(--text-sm) = 14 px (0.875 rem) • line-height: calc(var(--spacing) * 5) = 20 px (Tailwind leading-5) font-family MUST be repeated here (not just left to §LAST) because Mud's `mudblazor.min.css` applies `font: inherit` (shorthand) on selectors like `.mud-input > textarea.mud-input-root` (specificity 0,2,1). That shorthand RESETS font-family to `inherit`, breaking the inheritance chain when the element wraps content with its own font cascade. With our `!important` on `font-family` directly on `.mud-input-root`, the textarea/input is bullet- proofed against that `font: inherit` reset. What this DOES NOT touch (by design): • Typography headings (.mud-typography-h1..h6) keep their own scale. • Chips (.mud-chip) — design badges are 12 px, handled elsewhere. • Buttons (.mud-button-root) — covered by the density rules in §2 which set 12-13 px in compact mode. • Dialog title (.mud-dialog-title) — keeps its h6 scale. ============================================================================ */ .mud-input-root, .mud-input-input, .mud-input-slot, .mud-input-control input, .mud-input-control textarea, .mud-select, .mud-select-input, .mud-autocomplete, .mud-autocomplete .mud-input-input, .mud-picker-input, .mud-picker-input .mud-input-input, .mud-input-label, .mud-input-label-inputcontrol, .mud-input-label-animated, .mud-input-outlined-label, .mud-input-helper-text, .mud-form-control, .mud-checkbox .mud-typography, .mud-radio .mud-typography, .mud-switch .mud-typography, .mud-list-item .mud-typography, .mud-list-item-text, .mud-menu-item, .mud-select-popover .mud-list-item { font-family: var(--font-sans) !important; font-size: var(--text-sm) !important; line-height: calc(var(--spacing) * 5) !important; } .mud-input-root, .mud-input-input, .mud-input-slot, .mud-input-control input, .mud-input-control textarea, .mud-select-input, .mud-autocomplete .mud-input-input, .mud-picker-input .mud-input-input, .mud-list-item .mud-typography, .mud-list-item-text, .mud-menu-item, .mud-select-popover .mud-list-item { color: var(--color-gray-800) !important; } html.dark .mud-input-root, html.dark .mud-input-input, html.dark .mud-input-slot, html.dark .mud-input-control input, html.dark .mud-input-control textarea, html.dark .mud-select-input, html.dark .mud-autocomplete .mud-input-input, html.dark .mud-picker-input .mud-input-input, html.dark .mud-list-item .mud-typography, html.dark .mud-list-item-text, html.dark .mud-menu-item, html.dark .mud-select-popover .mud-list-item { color: var(--color-dark-100) !important; } .mud-input-root::placeholder, .mud-input-input::placeholder, .mud-input-control input::placeholder, .mud-input-control textarea::placeholder, .mud-select-input::placeholder, .mud-autocomplete .mud-input-input::placeholder, .mud-picker-input .mud-input-input::placeholder { color: var(--color-gray-600) !important; font-weight: 300 !important; /* placeholder:font-light */ opacity: 1 !important; /* override Firefox's default 0.54 opacity */ } html.dark .mud-input-root::placeholder, html.dark .mud-input-input::placeholder, html.dark .mud-input-control input::placeholder, html.dark .mud-input-control textarea::placeholder, html.dark .mud-select-input::placeholder, html.dark .mud-autocomplete .mud-input-input::placeholder, html.dark .mud-picker-input .mud-input-input::placeholder { color: var(--color-dark-200) !important; } /* ============================================================================ §LAST-3 BORDER STATE MACHINE — outlined form controls ---------------------------------------------------------------------------- The Input / Select / Textarea form-control components share the EXACT same border cascade. The error state OVERRIDES hover/focus (priority by source order + specificity). State | Light | Dark -----------|----------------------|---------------------- Normal | border-gray-300 | dark:border-dark-450 Hover | border-gray-400 | dark:border-dark-400 Focus | border-primary-600 | dark:border-primary-500 Error | border-error | dark:border-error-lighter Disabled | border-gray-300 | dark:border-dark-500 | + bg-gray-150 | + dark:bg-dark-600 | + opacity 60 % | + opacity 60 % MudBlazor's outlined input draws its border via a separate
element with class `.mud-input-outlined-border` inside the `.mud-input` wrapper. That fieldset — not the input itself — is what we paint. The `.mud-input.mud-input-outlined` chain prefix gives us enough specificity to beat Mud's own defaults without sprinkling `!important`. Doctrine: see CLAUDE.md `Design Guidelines` and the validation discussion in `UI Guidelines/canonical-examples`. ============================================================================ */ .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--color-gray-300) !important; border-width: 1px !important; transition: border-color 150ms ease; } html.dark .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--color-dark-450) !important; } .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):not(.mud-input-error):hover .mud-input-outlined-border { border-color: var(--color-gray-400) !important; border-width: 1px !important; } html.dark .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):not(.mud-input-error):hover .mud-input-outlined-border { border-color: var(--color-dark-400) !important; } .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border, .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--color-primary-600) !important; border-width: 1px !important; } html.dark .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border, html.dark .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--color-primary-500) !important; } .mud-input-error .mud-input.mud-input-outlined .mud-input-outlined-border, .mud-form-control.mud-input-error .mud-input-outlined-border, .mud-input-control.mud-input-error .mud-input-outlined-border, .mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border, .mud-input-error.mud-input-outlined .mud-input-outlined-border, .mud-input.mud-input-outlined.mud-input-error:hover .mud-input-outlined-border, .mud-input.mud-input-outlined.mud-input-error:focus-within .mud-input-outlined-border, .mud-input-error .mud-input.mud-input-outlined:hover .mud-input-outlined-border, .mud-input-error .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--color-error) !important; border-width: 1px !important; } html.dark .mud-input-error .mud-input.mud-input-outlined .mud-input-outlined-border, html.dark .mud-form-control.mud-input-error .mud-input-outlined-border, html.dark .mud-input-control.mud-input-error .mud-input-outlined-border, html.dark .mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border, html.dark .mud-input-error.mud-input-outlined .mud-input-outlined-border, html.dark .mud-input.mud-input-outlined.mud-input-error:hover .mud-input-outlined-border, html.dark .mud-input.mud-input-outlined.mud-input-error:focus-within .mud-input-outlined-border, html.dark .mud-input-error .mud-input.mud-input-outlined:hover .mud-input-outlined-border, html.dark .mud-input-error .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--color-error-lighter) !important; } .mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border, .mud-input.mud-input-outlined.mud-input-disabled .mud-input-outlined-border { border-color: var(--color-gray-300) !important; background-color: var(--color-gray-150) !important; } .mud-input.mud-input-outlined.mud-disabled, .mud-input.mud-input-outlined.mud-input-disabled { opacity: 0.6; cursor: not-allowed; } html.dark .mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border, html.dark .mud-input.mud-input-outlined.mud-input-disabled .mud-input-outlined-border { border-color: var(--color-dark-500) !important; background-color: var(--color-dark-600) !important; } .mud-input-helper-text.mud-input-error { color: var(--color-error) !important; font-family: var(--font-sans) !important; font-size: var(--text-xs, 0.75rem) !important; line-height: 1.4 !important; margin-top: 4px !important; font-weight: 400 !important; letter-spacing: 0 !important; } html.dark .mud-input-helper-text.mud-input-error { color: var(--color-error-lighter) !important; } /* ============================================================================ §NAV-RAIL — design side navigation rail with hover-flyout for NavGroups ---------------------------------------------------------------------------- Activated by the .av-nav-rail class on MudDrawer (see Shared/MainLayout.razor). The drawer toggles between two states (driven by DrawerOpen in MainLayout.cs): • .av-nav-rail--expanded → Width 240px, icons + labels (default desktop) • .av-nav-rail--collapsed → MiniWidth 64px, icons only + tooltip/flyout Doctrine: ver "Navigation rail" en CLAUDE.md (Mandatory UI Patterns). ============================================================================ */ /* Inactive: gray-600 (light) / dark-200 (dark). MATCHES design PrimePanel. This OVERRIDES MudBlazor's default --mud-palette-text-primary (near-black) which makes the menu read as muted, not shouty. */ .av-nav-rail--expanded .mud-nav-link { padding-left: 16px; padding-right: 12px; border-radius: 8px; margin: 2px 8px; position: relative; color: var(--color-gray-600); transition: background-color 120ms ease, color 120ms ease; } html.dark .av-nav-rail--expanded .mud-nav-link { color: var(--color-dark-200); } /* Hover (not active): goes to gray-900 (darker), NOT primary. design uses hover for subtle emphasis — primary is reserved for the active state. */ .av-nav-rail--expanded .mud-nav-link:hover { background-color: var(--color-gray-100); color: var(--color-gray-900); } html.dark .av-nav-rail--expanded .mud-nav-link:hover { background-color: var(--color-dark-600); color: var(--color-dark-50); } /* Active: primary-600 (light) / primary-400 (dark). the exact tokens. */ .av-nav-rail--expanded .mud-nav-link.active, .av-nav-rail--expanded .mud-nav-link.mud-nav-link-active { background-color: rgb(from var(--color-primary-500) r g b / 0.08); color: var(--color-primary-600); font-weight: 500; } html.dark .av-nav-rail--expanded .mud-nav-link.active, html.dark .av-nav-rail--expanded .mud-nav-link.mud-nav-link-active { background-color: rgb(from var(--color-primary-400) r g b / 0.16); color: var(--color-primary-400); } /* Purple accent bar on the left of the active item (design signature) */ .av-nav-rail--expanded .mud-nav-link.active::before, .av-nav-rail--expanded .mud-nav-link.mud-nav-link-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background-color: var(--color-primary-600); border-radius: 0 3px 3px 0; } /* Allow the flyout to spill out to the right of the drawer. We override every potential clipping ancestor: the drawer itself, its content wrapper, the nav menu UL, and the nav-group LI. */ .av-nav-rail--collapsed, .av-nav-rail--collapsed .mud-drawer-content, .av-nav-rail--collapsed .mud-nav-menu, .av-nav-rail--collapsed .mud-nav-group { overflow: visible !important; } /* Hide right-side decorations of TOP-LEVEL NavGroup parents only: • chevron (mud-nav-link-expand-icon) on the rail row • any secondary svg that is NOT the leading icon (catches expand markers that may use a different class in different Mud versions) • mobile-only action row that doesn't fit 64 px Scoped to `.nav-menu-styled > .mud-nav-group > .mud-nav-link` so nested NavGroup parents INSIDE flyouts keep their chevron visible as a "has sub-menu" indicator (see §3 chevron rotation). */ .av-nav-rail--collapsed .nav-menu-styled > .mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon, .av-nav-rail--collapsed .nav-menu-styled > .mud-nav-group > .mud-nav-link > svg:not(.mud-nav-link-icon), .av-nav-rail--collapsed .nav-mobile-actions { display: none !important; } /* TOP-LEVEL NavGroup parents (direct children of nav-menu in the rail): hide the inline title. The icon stands in for the title, and the flyout shows the children. Scope is `.nav-menu-styled > .mud-nav-group` — NESTED NavGroups inside flyouts (e.g. Form 1003 inside Settings) are NOT matched here, so they keep their title visible alongside the chevron. */ .av-nav-rail--collapsed .nav-menu-styled > .mud-nav-group > .mud-nav-link .mud-nav-link-text { display: none !important; } /* All nav links (top-level AND NavGroup parents) get IDENTICAL geometry in the collapsed rail. Fixed 48 × 40 box centered with 8 px lateral margin inside the 64 px rail. This is what guarantees vertical alignment of all icons regardless of whether they're a plain MudNavLink or a MudNavGroup. */ .av-nav-rail--collapsed .mud-nav-link { box-sizing: border-box !important; width: 48px !important; height: 40px !important; min-width: 48px !important; min-height: 40px !important; padding: 0 !important; margin: 4px 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; position: relative !important; color: var(--color-gray-500); /* design MainPanel inactive: text-gray-500 */ transition: background-color 120ms ease, color 120ms ease; } html.dark .av-nav-rail--collapsed .mud-nav-link { color: var(--color-dark-200); } /* Hover in the icon rail: background tint only, color stays gray. Matches design MainPanel: hover:bg-primary-600/20 with no color change. */ .av-nav-rail--collapsed .mud-nav-link:hover { background-color: rgb(from var(--color-primary-600) r g b / 0.20); } html.dark .av-nav-rail--collapsed .mud-nav-link:hover { background-color: rgb(from var(--color-dark-300) r g b / 0.20); } .av-nav-rail--collapsed .mud-nav-link.active, .av-nav-rail--collapsed .mud-nav-link.mud-nav-link-active { background-color: rgb(from var(--color-primary-600) r g b / 0.10); color: var(--color-primary-600); } html.dark .av-nav-rail--collapsed .mud-nav-link.active, html.dark .av-nav-rail--collapsed .mud-nav-link.mud-nav-link-active { background-color: rgb(from var(--color-primary-400) r g b / 0.15); color: var(--color-primary-400); } .av-nav-rail--collapsed .mud-nav-link.active::before, .av-nav-rail--collapsed .mud-nav-link.mud-nav-link-active::before { content: ""; position: absolute; left: -6px; top: 4px; bottom: 4px; width: 3px; background-color: var(--color-primary-600); border-radius: 0 3px 3px 0; } html.dark .av-nav-rail--collapsed .mud-nav-link.active::before, html.dark .av-nav-rail--collapsed .mud-nav-link.mud-nav-link-active::before { background-color: var(--color-primary-400); } /* Recursive flyout pattern. Every .mud-nav-group (top-level OR nested inside another flyout) gets its own absolute-positioned panel that opens to the right on hover. Direct-child selectors (`>`) are used everywhere so that hovering a parent NavGroup ONLY shows its own immediate flyout — it does NOT cascade to descendant NavGroups, which need their own hover trigger. Example: Settings → Form 1003 → (children). • Hover Settings → opens Settings' flyout (showing Form 1003 as a row with a chevron-right indicator). • Hover Form 1003 → opens Form 1003's sub-flyout to the right. • Both stay open while the cursor is inside either panel (ancestor :hover propagates up from descendant). */ /* Make every .mud-nav-group the positioning anchor of its own flyout */ .av-nav-rail--collapsed .mud-nav-group { position: relative; } /* The native MudCollapse container becomes an absolute-positioned flyout. Selector uses `>` (direct child) so the rules apply at EVERY level — the top-level flyout AND any sub-flyout of nested NavGroups. */ .av-nav-rail--collapsed .mud-nav-group > .mud-collapse-container { position: absolute !important; left: 95% !important; top: 0 !important; margin-left: 4px; min-width: 220px; max-width: 280px; width: auto !important; height: auto !important; max-height: none !important; padding: 6px 0; background: var(--surface-1, var(--color-white)); border: 1px solid var(--color-gray-200); border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.10), 0 2px 6px rgb(0 0 0 / 0.05); /* overflow: visible (NOT auto) is mandatory so sub-flyouts of nested NavGroups can escape this container horizontally. Trade-off: very long flyouts overflow the viewport instead of scrolling. The §3.bis bottom-anchor heuristic mitigates this for last-N NavGroups. */ overflow: visible !important; display: block !important; opacity: 0 !important; visibility: hidden !important; transform: translateX(-4px) !important; transition: transform 120ms ease; pointer-events: none; z-index: 1300; } /* Optional escape valve: flyouts WITHOUT any nested NavGroup (most of them) can use vertical scroll if too tall. Uses :has() to detect — supported by every Blazor WASM target browser. For flyouts WITH nested NavGroups (e.g. Settings → Form 1003), the rule does NOT apply, so overflow stays visible and the sub-flyout can escape. */ .av-nav-rail--collapsed .mud-nav-group > .mud-collapse-container:not(:has(.mud-nav-group)) { max-height: calc(100vh - var(--mud-appbar-height, 50px) - 24px) !important; overflow-x: visible !important; overflow-y: auto !important; } .av-nav-rail--collapsed .mud-nav-group:nth-last-child(-n+5) > .mud-collapse-container { top: auto !important; bottom: 0 !important; } .av-nav-rail--collapsed .nav-menu-styled:has(> .mud-nav-group:hover) > .mud-nav-group:not(:hover) > .mud-collapse-container, .av-nav-rail--collapsed .mud-collapse-wrapper-inner:has(> .mud-nav-group:hover) > .mud-nav-group:not(:hover) > .mud-collapse-container { opacity: 0 !important; visibility: hidden !important; transition: opacity 80ms ease 0s, transform 80ms ease 0s, visibility 0s linear 80ms !important; } /* Show the flyout when the user hovers either the NavGroup row OR the panel itself. Critical: `>` (direct child) instead of descendant — hovering a parent NavGroup must NOT cascade into showing descendant NavGroups' flyouts. Each NavGroup level has its own independent hover trigger. !important on opacity/visibility beats the base rule's !important (which forces them off in non-hover state). Open transition is instant. */ .av-nav-rail--collapsed .mud-nav-group:hover > .mud-collapse-container, .av-nav-rail--collapsed .mud-nav-group > .mud-collapse-container:hover { opacity: 1 !important; visibility: visible !important; transform: translateX(0) !important; pointer-events: auto; transition: opacity 120ms ease, transform 120ms ease; } .av-nav-rail--collapsed .mud-nav-group:hover > .mud-collapse-container > .mud-collapse-wrapper, .av-nav-rail--collapsed .mud-nav-group > .mud-collapse-container:hover > .mud-collapse-wrapper, .av-nav-rail--collapsed .mud-nav-group:hover > .mud-collapse-container > .mud-collapse-wrapper > .mud-collapse-wrapper-inner, .av-nav-rail--collapsed .mud-nav-group > .mud-collapse-container:hover > .mud-collapse-wrapper > .mud-collapse-wrapper-inner { height: auto !important; max-height: none !important; overflow: visible !important; transform: none !important; } /* Transparent bridge that extends the flyout's hover area back toward the icon, so the cursor doesn't fall into a gap when moving from rail → panel and accidentally close the flyout. `pointer-events: auto` overrides the inherited `pointer-events: none` of the hidden flyout, so the bridge zone triggers hover even before the panel is interactive. 16 px wide for fast diagonal cursor moves. */ .av-nav-rail--collapsed .mud-nav-group > .mud-collapse-container::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 16px; background: transparent; pointer-events: auto; } html.dark .av-nav-rail--collapsed .mud-nav-group > .mud-collapse-container { background: var(--color-dark-700); border-color: var(--color-dark-500); box-shadow: 0 8px 24px rgb(0 0 0 / 0.30), 0 2px 6px rgb(0 0 0 / 0.20); } .av-nav-rail--collapsed .mud-collapse-container .mud-nav-link { display: flex !important; box-sizing: border-box !important; width: calc(100% - 12px) !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; align-items: center !important; justify-content: flex-start !important; padding: 8px 14px !important; margin: 0 6px !important; border-radius: 6px !important; box-shadow: none !important; } .av-nav-rail--collapsed .mud-collapse-container .mud-nav-link .mud-nav-link-text { display: inline !important; position: static !important; /* IMPORTANT: do NOT force visibility / opacity here. The text must inherit them from the parent .mud-collapse-container — when the flyout is hidden (visibility: hidden), the text follows. If we forced `visibility: visible !important` here, the text would stay visible even when the flyout is invisible, leaking through during the click-collapse transition. */ transform: none !important; background: transparent !important; color: inherit !important; padding: 0 !important; margin: 0 0 0 12px !important; box-shadow: none !important; /* aligned: same text-xs-plus (13 px) as the expanded menu items */ font-size: var(--text-xs-plus); letter-spacing: 0.025em; } /* Nested NavGroup inside a flyout: show the expand chevron and rotate it 90° counter-clockwise so it points RIGHT (→) — the conventional "has sub-menu" indicator. The default ExpandIcon (KeyboardArrowDown) points down; the rotation makes it a sub-flyout affordance. The `!important` on transform beats MudBlazor's `.mud-transform` class that gets added on expand-state changes, so the chevron stays pointing right regardless of internal expand state. */ .av-nav-rail--collapsed .mud-collapse-container .mud-nav-link-expand-icon { display: inline-block !important; transform: rotate(-90deg) !important; color: var(--color-gray-400); opacity: 0.7; margin-left: auto; flex-shrink: 0; } html.dark .av-nav-rail--collapsed .mud-collapse-container .mud-nav-link-expand-icon { color: var(--color-dark-300); } .av-nav-rail--collapsed .mud-nav-group > .mud-nav-link::after { content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 20px; background: transparent; pointer-events: auto; } /* For NESTED NavGroup rows (inside a flyout, e.g. Form 1003 inside Settings): shift the bridge 6 px right so it starts OUTSIDE the parent flyout (the 6 px is the row's right margin to flyout edge), and make it wider (30 px) and much taller (400 px) so it covers the cursor's diagonal path from the row to deep sub-flyout items. The 6 px shift creates a gap inside the parent flyout — that gap is covered by the .mud-nav-group
  • 's natural hover area (it spans the full flyout width and row height), so hover continuity isn't lost. The tall bridge is positioned OUTSIDE the parent flyout horizontally, so it doesn't block sibling items inside the parent flyout. */ .av-nav-rail--collapsed .mud-collapse-container .mud-nav-group > .mud-nav-link::after { left: calc(100% + 6px); width: 30px; top: 0; bottom: auto; height: 400px; } /* Top-level NavLinks (direct descendants of MudNavMenu, NOT inside a NavGroup) keep their .mud-nav-link-text in the DOM but render it as a floating tooltip chip to the right of the icon, shown only on hover. We use the descendant selector to be tolerant of any wrapping Mud applies between .mud-nav-menu and .mud-nav-link. */ .av-nav-rail--collapsed .mud-nav-menu > .mud-nav-link > .mud-nav-link-text { position: absolute; left: 100%; top: 50%; transform: translateY(-50%) translateX(-4px); margin-left: 6px; padding: 6px 10px; background: var(--color-gray-900); color: var(--color-white); font-size: 12px; font-weight: 500; white-space: nowrap; border-radius: 6px; box-shadow: 0 4px 12px rgb(0 0 0 / 0.15); z-index: 1300; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms ease, transform 120ms ease, visibility 120ms; } .av-nav-rail--collapsed .mud-nav-menu > .mud-nav-link:hover > .mud-nav-link-text { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); } html.dark .av-nav-rail--collapsed .mud-nav-menu > .mud-nav-link > .mud-nav-link-text { background: var(--color-dark-50); color: var(--color-dark-900); } .av-nav-rail.mud-drawer { border-right: 1px solid var(--color-gray-200); box-shadow: none; background-color: var(--surface-1, var(--color-white)); transition: width 180ms ease; /* Force the drawer to sit below the AppBar in ALL states. MudBlazor's own rule (`.mud-drawer-fixed.mud-drawer-mini.mud-drawer-clipped-always`) requires all three classes simultaneously, and the `mud-drawer-fixed` class is sometimes missing in Mini-Closed state — leaving the drawer at `top: 0` and the first icon clipped behind the AppBar. */ top: var(--mud-appbar-height, 64px) !important; height: calc(100% - var(--mud-appbar-height, 64px)) !important; } html.dark .av-nav-rail.mud-drawer { border-right-color: var(--color-dark-500); background-color: var(--color-dark-700); } /* Inside NavMenu.razor's scoped