/* ============================================================================
EA CMS — modern chrome layer
Ported from the Onboarding Admin design language and wired to MudBlazor's
generated --mud-palette-* variables, so this styling follows the active
light/dark theme automatically. Component palette itself lives in
Theme/CmsTheme.cs; this file styles the shell + things Mud can't reach.
========================================================================= */
:root {
--cms-brand-gradient: linear-gradient(135deg, #b98a2c, #d5af64);
--cms-radius: 10px;
--cms-radius-sm: 6px;
--cms-radius-lg: 14px;
--cms-shadow-sm: 0 1px 2px rgb(16 24 40 / .05);
--cms-shadow-md: 0 4px 12px -2px rgb(16 24 40 / .08), 0 2px 4px -2px rgb(16 24 40 / .04);
--cms-shadow-lg: 0 16px 40px -8px rgb(16 24 40 / .18), 0 4px 12px -4px rgb(16 24 40 / .08);
/* Soft accent fill derived from the theme primary so it works in both modes */
--cms-accent-soft: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
--cms-surface-2: var(--mud-palette-background-gray);
}
.mud-theme-dark {
--cms-shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
--cms-shadow-md: 0 4px 12px -2px rgb(0 0 0 / .5);
--cms-shadow-lg: 0 16px 40px -8px rgb(0 0 0 / .65);
--cms-accent-soft: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}
html, body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* App-wide modern font (covers raw HTML: login page, CKEditor content, etc.) */
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Follow the theme so there's no white gap below page content in dark mode */
background-color: var(--mud-palette-background, #f5f6fa);
}
.mud-layout { min-height: 100vh; background-color: var(--mud-palette-background, #f5f6fa); }
/* Color field: tint the hex text + the palette adornment with the chosen colour. */
.cms-colorfield .mud-input-slot { color: var(--cms-swatch, inherit); font-weight: 600; letter-spacing: .3px; }
.cms-colorfield .mud-input-adornment .mud-icon-root { color: var(--cms-swatch, var(--mud-palette-text-secondary)); }
/* Uploader: a tidy card that shows ONE state at a time — preview when an image
is set, drop-zone only when picking a file. Keeps dialogs short. */
.cms-uploader { width: 100%; }
/* Fills a narrow dialog column, but stays tidy on a wide page (e.g. Home). */
.cms-image-upload { max-width: 420px; }
/* Upload preview thumbnail (fixed box so every uploader aligns) */
.cms-upload-preview {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 116px;
padding: 8px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius-sm);
background: var(--mud-palette-background-gray);
overflow: hidden;
}
.cms-upload-preview img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Broken/unreachable image: show a labelled placeholder instead of a blank box. */
.cms-upload-preview .cms-upload-broken {
display: none;
flex-direction: column;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--mud-palette-text-secondary);
}
.cms-upload-preview.is-broken img { display: none; }
.cms-upload-preview.is-broken .cms-upload-broken,
.cms-upload-preview.is-empty .cms-upload-broken { display: flex; }
.cms-upload-preview.is-empty .mud-icon-root { opacity: .45; }
.cms-upload-actions {
display: flex;
align-items: center;
gap: 4px;
margin-top: 8px;
flex-wrap: wrap;
}
/* Busy state while the file is going to the CDN. */
.cms-upload-busy {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 116px;
border: 1px dashed var(--mud-palette-lines-default);
border-radius: var(--cms-radius-sm);
background: var(--mud-palette-background-gray);
font-size: 13px;
color: var(--mud-palette-text-secondary);
}
/* The swapping pane. Animating height keeps the card from snapping as states swap. */
.cms-upload-pane { transition: height .22s ease-out; }
/* cms-card-in is the console's existing enter, so the switch reads in the same
motion language rather than introducing a second one. */
.cms-upload-pane.is-switching { animation: cms-card-in .2s ease-out both; }
/* Upload / URL segmented switch. margin-inline-start:auto (not margin-left) so it
sits at the trailing edge of the header in Arabic too. */
.cms-upload-modes {
position: relative;
display: inline-flex;
margin-inline-start: auto;
flex: 0 0 auto;
padding: 2px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 999px;
background: var(--mud-palette-background-gray);
/* Equal halves: the pill is exactly half the track, so both labels must be too. */
min-width: 118px;
}
/* The travelling indicator — one element that MOVES, rather than a highlight that
jumps between two. That movement is what makes it feel like a physical switch. */
.cms-upload-modes::before {
content: "";
position: absolute;
z-index: 0;
top: 2px;
bottom: 2px;
inset-inline-start: 2px;
width: calc(50% - 2px);
border-radius: 999px;
background: var(--mud-palette-primary);
transition: transform .24s cubic-bezier(.18, 1.22, .3, 1);
}
.cms-upload-modes.is-url::before { transform: translateX(100%); }
/* translateX is physical, so in Arabic the pill would travel off the wrong end. */
[dir="rtl"] .cms-upload-modes.is-url::before { transform: translateX(-100%); }
.cms-upload-mode {
position: relative;
z-index: 1;
flex: 1 1 0;
border: 0;
background: transparent;
color: var(--mud-palette-text-secondary);
font: inherit;
font-size: 11px;
font-weight: 600;
line-height: 1;
text-align: center;
white-space: nowrap;
padding: 5px 11px;
border-radius: 999px;
cursor: pointer;
/* Matches the pill, so the label turns as the pill arrives, not before it. */
transition: color .24s ease;
}
.cms-upload-mode:hover { color: var(--mud-palette-text-primary); }
.cms-upload-mode:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
/* No background here — the pill IS the background, and it travels. */
.cms-upload-mode.active { color: var(--mud-palette-primary-text); }
/* Preview shown under the address box in URL mode. */
.cms-upload-urlpreview { margin-top: 10px; }
/* ---- Form sections: a small label above a related group of fields -------- */
.cms-form-section-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mud-palette-text-secondary);
margin-bottom: 10px;
}
/* Two or more uploader cards side by side, wrapping on narrow dialogs. */
.cms-media-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-start;
}
.cms-media-row > .cms-image-upload { flex: 1 1 260px; max-width: none; }
/* Switches grouped in a bordered panel instead of loose grid cells. */
.cms-switch-panel {
display: flex;
flex-wrap: wrap;
gap: 8px 28px;
padding: 12px 16px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius-sm);
background: var(--mud-palette-background-gray);
}
.cms-switch-panel .mud-switch { margin: 0; }
/* ---- CKEditor 5: follow the MudBlazor palette (readable in light & dark) --- */
/* CKEditor injects its OWN :root variables at runtime (after this file loads),
so variable overrides alone lose the cascade. Force the concrete elements
with !important — this is what keeps text visible in the dark theme. */
:root {
--ck-color-base-background: var(--mud-palette-surface);
--ck-color-text: var(--mud-palette-text-primary);
--ck-color-base-border: var(--mud-palette-lines-default);
--ck-color-toolbar-background: var(--mud-palette-background-gray);
--ck-color-panel-background: var(--mud-palette-surface);
--ck-color-list-background: var(--mud-palette-surface);
--ck-color-input-background: var(--mud-palette-surface);
--ck-color-input-text: var(--mud-palette-text-primary);
}
/* Editable content surface + text — the critical readability fix. */
.ck.ck-content,
.ck.ck-editor__editable,
.ck.ck-editor__main > .ck-editor__editable,
.ck.ck-editor__editable_inline {
background-color: var(--mud-palette-surface) !important;
color: var(--mud-palette-text-primary) !important;
}
/* Editor height — comfortable default; per-instance override via InputCKEditor Height. */
.cms-ck-wrap .ck.ck-editor__editable_inline,
.cms-ck-wrap .ck.ck-editor__main > .ck-editor__editable {
min-height: var(--cms-ck-h, 160px) !important;
resize: vertical;
}
.ck.ck-editor__main > .ck-editor__editable,
.ck.ck-toolbar { border-color: var(--mud-palette-lines-default) !important; }
.ck .ck-placeholder::before,
.ck.ck-content .ck-placeholder::before { color: var(--mud-palette-text-secondary) !important; }
/* Toolbar + its buttons/icons/labels. */
.ck.ck-toolbar { background-color: var(--mud-palette-background-gray) !important; }
.ck.ck-toolbar .ck-button,
.ck.ck-toolbar .ck-button .ck-icon,
.ck.ck-toolbar .ck-button .ck-button__label,
.ck.ck-toolbar .ck-dropdown__button .ck-button__label {
color: var(--mud-palette-text-primary) !important;
}
.ck.ck-button:not(.ck-disabled):hover,
.ck.ck-button.ck-on {
background-color: var(--mud-palette-action-default-hover) !important;
}
.ck.ck-toolbar__separator { background: var(--mud-palette-lines-default) !important; }
/* Dropdown panels / lists (Paragraph, headings, font size, colors popovers). */
.ck.ck-dropdown__panel,
.ck.ck-list,
.ck.ck-balloon-panel {
background-color: var(--mud-palette-surface) !important;
color: var(--mud-palette-text-primary) !important;
border-color: var(--mud-palette-lines-default) !important;
}
.ck.ck-list .ck-button,
.ck.ck-list .ck-button .ck-button__label { color: var(--mud-palette-text-primary) !important; }
.ck.ck-list .ck-button:not(.ck-disabled):hover { background-color: var(--mud-palette-action-default-hover) !important; }
/* ---- App bar: glassmorphism ---------------------------------------------- */
.mud-appbar {
background-color: color-mix(in srgb, var(--mud-palette-surface) 82%, transparent) !important;
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--mud-palette-lines-default);
box-shadow: none !important;
}
/* ---- Brand mark ---------------------------------------------------------- */
.cms-brand {
display: flex;
align-items: center;
gap: 11px;
text-decoration: none;
color: var(--mud-palette-text-primary);
}
.cms-brand-mark {
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--cms-brand-gradient);
color: #fff;
display: grid;
place-items: center;
font-weight: 800;
font-size: 12px;
letter-spacing: .04em;
flex: 0 0 auto;
box-shadow: 0 2px 8px -2px rgb(79 70 229 / .5);
}
.cms-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.cms-brand-text strong { font-size: 15px; font-weight: 700; }
.cms-brand-text small { color: var(--mud-palette-text-disabled); font-size: 10.5px; letter-spacing: .02em; }
/* ---- Drawer / navigation ------------------------------------------------- */
.mud-drawer {
border-right: 1px solid var(--mud-palette-lines-default);
}
.mud-drawer .mud-drawer-content {
background-color: var(--mud-palette-drawer-background);
}
.mud-nav-menu {
padding: 8px 8px 24px;
}
.mud-nav-link {
position: relative;
border-radius: 8px;
margin: 2px 4px;
padding-top: 9px;
padding-bottom: 9px;
font-size: 13.5px;
font-weight: 500;
color: var(--mud-palette-text-secondary);
transition: background-color .12s ease, color .12s ease;
}
/* Kill the default black focus box; keep a subtle keyboard-visible cue only */
.mud-nav-link:focus { outline: none !important; }
.mud-nav-link:focus-visible { background-color: var(--cms-surface-2); }
.mud-nav-link:hover {
background-color: var(--cms-surface-2);
color: var(--mud-palette-text-primary);
}
.mud-nav-link.active {
background-color: var(--cms-accent-soft) !important;
color: var(--mud-palette-primary) !important;
font-weight: 600;
}
/* Accent bar on the active item */
.mud-nav-link.active::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 18px;
border-radius: 0 3px 3px 0;
background: var(--mud-palette-primary);
}
.mud-nav-link.active .mud-nav-link-icon {
color: var(--mud-palette-primary) !important;
}
/* Nav group header (the collapsible section toggles) */
.mud-nav-group > .mud-nav-link {
font-weight: 600;
color: var(--mud-palette-text-primary);
}
.mud-nav-group > .mud-nav-link:focus { outline: none !important; }
.mud-nav-group > .mud-nav-link .mud-nav-link-icon {
color: var(--mud-palette-text-secondary);
}
/* Nested items sit slightly indented under a group */
.mud-nav-group .mud-nav-group .mud-navlink,
.mud-nav-group .mud-nav-item .mud-nav-link { font-size: 13px; }
/* ---- Cards / papers ------------------------------------------------------ */
.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-popover) {
border-radius: var(--cms-radius);
}
.cms-card {
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius);
box-shadow: var(--cms-shadow-sm);
}
/* ---- Dashboard metric cards --------------------------------------------- */
.cms-metrics {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.cms-metric {
display: flex;
align-items: center;
gap: 14px;
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius);
padding: 18px;
box-shadow: var(--cms-shadow-sm);
transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.cms-metric:hover {
box-shadow: var(--cms-shadow-md);
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default));
}
.cms-metric-icon {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
flex: 0 0 auto;
color: #fff;
}
.cms-metric-icon .mud-icon-root { font-size: 24px; }
.cms-metric-icon.indigo { background: var(--cms-brand-gradient); }
.cms-metric-icon.emerald { background: linear-gradient(135deg, #059669, #10b981); }
.cms-metric-icon.amber { background: linear-gradient(135deg, #d97706, #f59e0b); }
.cms-metric-icon.rose { background: linear-gradient(135deg, #e11d48, #fb7185); }
.cms-metric-icon.sky { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.cms-metric-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cms-metric-label {
color: var(--mud-palette-text-secondary);
font-size: 12.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
}
.cms-metric-value {
font-size: 28px;
font-weight: 700;
letter-spacing: -.02em;
color: var(--mud-palette-text-primary);
margin-top: 2px;
}
.cms-eyebrow {
color: var(--mud-palette-primary);
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
/* ---- GridBlazor tables (styled toward the modern reference grid) --------- */
.table.grid-table {
border-collapse: separate;
border-spacing: 0;
font-size: 13.5px;
color: var(--mud-palette-text-primary);
margin: 0;
}
.table.grid-table thead th,
.table.grid-table .grid-header {
background: var(--mud-palette-background-gray);
color: var(--mud-palette-text-secondary);
font-size: 11px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
border-bottom: 1px solid var(--mud-palette-lines-default);
border-top: 0;
padding: 12px 16px;
vertical-align: middle;
}
.table.grid-table tbody td {
border-top: 0;
border-bottom: 1px solid var(--mud-palette-lines-default);
color: var(--mud-palette-text-primary);
padding: 13px 16px;
vertical-align: middle;
}
.table.grid-table tbody tr {
transition: background-color .1s ease;
cursor: pointer;
}
.table.grid-table tbody tr:hover {
background: var(--mud-palette-table-hover);
}
/* Selected row -> soft indigo tint (like the reference grid) */
.grid-mvc .grid-row-selected td,
.table.grid-table tbody tr.grid-row-selected td {
background: var(--cms-accent-soft) !important;
box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}
/* Row radio / checkbox uses the accent */
.grid-mvc input[type="radio"],
.grid-mvc input[type="checkbox"] { accent-color: var(--mud-palette-primary); cursor: pointer; }
.grid-mvc {
border-radius: var(--cms-radius);
overflow: hidden;
border: 1px solid var(--mud-palette-lines-default);
background: var(--mud-palette-surface);
box-shadow: var(--cms-shadow-sm);
}
/* Declutter: hide the "Drop columns here for grouping" bar (matches reference).
Tell me if any page relies on drag-to-group and I'll bring it back. */
.grid-mvc .grid-extsort-droppable { display: none !important; }
/* Column filter funnel icons: smaller + muted so they don't scatter visually */
.grid-mvc .grid-filter { color: var(--mud-palette-text-disabled); }
.grid-mvc .grid-filter.filtered { color: var(--mud-palette-primary); }
/* Pager buttons follow the accent */
.grid-mvc .grid-pager .btn,
.grid-mvc .pagination > li > a {
border-radius: var(--cms-radius-sm);
color: var(--mud-palette-text-primary);
}
.grid-mvc .pagination > .active > a,
.grid-mvc .pagination > .active > span {
background: var(--mud-palette-primary);
border-color: var(--mud-palette-primary);
color: #fff;
}
/* ---- GridBlazor: toolbar & CRUD buttons ---------------------------------
IMPORTANT: GridBlazor renders each button's icon as a `background-image`
SVG (layered over a gray gradient). We must NEVER set the `background`
shorthand or `background-image` on these buttons — doing so erases the
icon (blank squares). Only safe properties (radius / border / hover
background-color) are adjusted here. */
.grid-mvc .grid-header-buttons,
.grid-mvc .grid-toolbar {
padding: 12px 14px;
gap: 6px;
background-color: var(--mud-palette-surface);
border-bottom: 1px solid var(--mud-palette-lines-default);
}
/* Icon buttons: keep their SVG icon; only round corners + tidy border. */
.grid-mvc .grid-button,
.grid-mvc .grid-button-add,
.grid-mvc .grid-button-excel,
.grid-mvc .grid-button-sync,
.grid-mvc .grid-button-all-filters-clear,
.grid-mvc .grid-button-header-view,
.grid-mvc .grid-button-header-edit,
.grid-mvc .grid-button-header-delete,
.grid-mvc .grid-button-view,
.grid-mvc .grid-button-edit,
.grid-mvc .grid-button-delete {
border-radius: var(--cms-radius-sm) !important;
border: 1px solid var(--mud-palette-lines-inputs) !important;
box-shadow: none !important;
}
/* Text buttons in the toolbar (non-icon) -> modern secondary */
.grid-mvc .grid-header-buttons .btn:not([class*="grid-button-"]) {
border-radius: var(--cms-radius-sm) !important;
border: 1px solid var(--mud-palette-lines-inputs) !important;
background-color: var(--mud-palette-surface) !important;
color: var(--mud-palette-text-primary) !important;
font-weight: 600 !important;
box-shadow: none !important;
}
/* Harmonize GridBlazor's bootstrap blue -> brand indigo (safe: no icons here) */
.grid-mvc a { color: var(--mud-palette-primary); }
.grid-mvc thead a,
.grid-mvc .grid-header a,
.grid-mvc .grid-header-title a {
color: var(--mud-palette-text-primary);
font-weight: 600;
text-decoration: none;
}
.grid-mvc .btn-primary,
.grid-mvc .grid-filter-buttons .btn-primary,
.grid-mvc .grid-filter-btn {
background-color: var(--mud-palette-primary) !important;
border-color: var(--mud-palette-primary) !important;
color: #fff !important;
}
.grid-mvc .btn-primary:hover,
.grid-mvc .grid-filter-btn:hover { filter: brightness(1.06); }
/* ---- GridBlazor: filter/search/pager inputs ----------------------------- */
.grid-mvc .grid-filter-input,
.grid-mvc .grid-change-page-size-input,
.grid-mvc .grid-goto-page-input,
.grid-mvc input[type="text"].form-control,
.grid-mvc input[type="search"] {
border: 1px solid var(--mud-palette-lines-inputs);
border-radius: var(--cms-radius-sm);
background: var(--mud-palette-surface);
color: var(--mud-palette-text-primary);
padding: 6px 10px;
font-size: 13px;
}
.grid-mvc .grid-filter-input:focus,
.grid-mvc input.form-control:focus {
outline: none;
border-color: var(--mud-palette-primary);
box-shadow: 0 0 0 3px var(--cms-accent-soft);
}
.grid-mvc .grid-footer {
padding: 12px 14px;
background: var(--mud-palette-surface);
border-top: 1px solid var(--mud-palette-lines-default);
color: var(--mud-palette-text-secondary);
font-size: 12.5px;
}
.grid-mvc .pagination { gap: 4px; margin: 0; }
.grid-mvc .pagination .page-link {
border-radius: var(--cms-radius-sm) !important;
border: 1px solid var(--mud-palette-lines-default);
color: var(--mud-palette-text-primary);
background: var(--mud-palette-surface);
font-size: 13px;
padding: 6px 11px;
margin: 0;
}
.grid-mvc .pagination .page-link:hover { background: var(--cms-surface-2); }
.grid-mvc .pagination .page-item.active .page-link {
background: var(--mud-palette-primary);
border-color: var(--mud-palette-primary);
color: #fff;
}
/* ---- GridBlazor: CRUD add/edit/view forms ------------------------------- */
.grid-mvc .grid-popup-widget,
.grid-crud {
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius-lg);
box-shadow: var(--cms-shadow-lg);
overflow: hidden;
}
.grid-crud-header,
.grid-mvc .grid-crud-header {
background: var(--mud-palette-surface);
color: var(--mud-palette-text-primary);
font-size: 16px;
font-weight: 650;
padding: 18px 22px;
border-bottom: 1px solid var(--mud-palette-lines-default);
margin: 0;
}
.grid-crud .form-group,
.grid-crud .form-group.row {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
align-items: stretch;
}
.grid-crud .form-group label,
.grid-crud label.control-label {
font-size: 12.5px;
font-weight: 600;
color: var(--mud-palette-text-primary);
text-align: left !important;
padding: 0;
max-width: 100%;
flex: 0 0 auto;
}
.grid-crud .form-control,
.grid-crud input.form-control,
.grid-crud select.form-control,
.grid-crud textarea.form-control {
width: 100%;
border: 1px solid var(--mud-palette-lines-inputs);
border-radius: var(--cms-radius-sm);
background: var(--mud-palette-surface);
color: var(--mud-palette-text-primary);
padding: 9px 12px;
font-size: 13.5px;
transition: border-color .12s ease, box-shadow .12s ease;
}
.grid-crud .form-control:focus {
outline: none;
border-color: var(--mud-palette-primary);
box-shadow: 0 0 0 3px var(--cms-accent-soft);
}
/* CRUD footer buttons.
.grid-button-save is an ICON button (SVG background) -> only radius/border,
never `background`. Text buttons (.btn) can be recolored safely. */
.grid-crud .grid-button-save,
.grid-crud .grid-button-cancel,
.grid-crud .grid-button-back {
border-radius: var(--cms-radius-sm) !important;
border: 1px solid var(--mud-palette-lines-inputs) !important;
box-shadow: none !important;
}
.grid-crud .btn {
border-radius: var(--cms-radius-sm) !important;
font-weight: 600 !important;
box-shadow: none !important;
}
.grid-crud .btn-primary {
background-color: var(--mud-palette-primary) !important;
border-color: var(--mud-palette-primary) !important;
color: #fff !important;
}
.grid-crud .btn-primary:hover { filter: brightness(1.06); }
.grid-crud .btn-default,
.grid-crud .btn-secondary {
background-color: var(--mud-palette-surface) !important;
border: 1px solid var(--mud-palette-lines-inputs) !important;
color: var(--mud-palette-text-primary) !important;
}
/* ---- Buttons ------------------------------------------------------------- */
.mud-button-root {
border-radius: var(--cms-radius-sm);
text-transform: none;
font-weight: 600;
}
.mud-button-filled.mud-button-filled-primary {
box-shadow: 0 1px 2px rgb(79 70 229 / .25);
}
.mud-button-outlined {
border-color: var(--mud-palette-lines-inputs);
}
/* ============================================================================
MudBlazor component refinements — modern, consistent look for every component
(cards, inputs, tables, dialogs, tabs, chips, switches, alerts, panels…)
========================================================================= */
/* ---- Cards / Paper: soft border + subtle shadow (not heavy Material) ----- */
.mud-card {
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius) !important;
box-shadow: var(--cms-shadow-sm) !important;
}
.mud-card > .mud-card-header { padding: 18px 20px 0; }
.mud-card-header .mud-card-header-content .mud-typography { font-weight: 600; }
.mud-card > .mud-card-content { padding: 18px 20px; }
.mud-card > .mud-card-actions { padding: 8px 16px 16px; gap: 8px; }
/* Nested cards shouldn't double-shadow */
.mud-card .mud-card { box-shadow: none !important; background: var(--mud-palette-background-gray); }
/* ---- Inputs: rounded, clean focus --------------------------------------- */
.mud-input.mud-input-outlined .mud-input-outlined-border {
border-radius: var(--cms-radius-sm);
border-color: var(--mud-palette-lines-inputs);
transition: border-color .12s ease, box-shadow .12s ease;
}
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
border-width: 1px;
box-shadow: 0 0 0 3px var(--cms-accent-soft);
}
.mud-input.mud-input-filled {
border-radius: var(--cms-radius-sm) var(--cms-radius-sm) 0 0;
background-color: var(--mud-palette-background-gray);
}
.mud-input-control input::placeholder,
.mud-input-control textarea::placeholder { color: var(--mud-palette-text-disabled); }
/* ---- Selects / autocomplete / date popovers ----------------------------- */
.mud-popover.mud-popover-open {
border-radius: var(--cms-radius) !important;
box-shadow: var(--cms-shadow-lg) !important;
border: 1px solid var(--mud-palette-lines-default);
}
.mud-list-item { border-radius: var(--cms-radius-sm); }
.mud-list-item:hover { background: var(--cms-surface-2); }
.mud-selected-item { background: var(--cms-accent-soft) !important; color: var(--mud-palette-primary) !important; }
/* ---- MudTable ------------------------------------------------------------ */
.mud-table {
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius);
box-shadow: var(--cms-shadow-sm);
overflow: hidden;
}
.mud-table .mud-table-head .mud-table-cell {
background: var(--mud-palette-background-gray);
color: var(--mud-palette-text-secondary);
font-size: 11px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
border-bottom: 1px solid var(--mud-palette-lines-default);
}
.mud-table .mud-table-body .mud-table-cell {
border-bottom: 1px solid var(--mud-palette-lines-default);
font-size: 13.5px;
}
.mud-table .mud-table-row:hover { background: var(--mud-palette-table-hover) !important; }
.mud-table-toolbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
/* ---- Dialogs ------------------------------------------------------------- */
.mud-dialog {
border-radius: var(--cms-radius-lg) !important;
border: 1px solid var(--mud-palette-lines-default);
box-shadow: var(--cms-shadow-lg) !important;
overflow: hidden;
}
.mud-dialog-title {
font-size: 17px;
font-weight: 650;
padding: 20px 24px;
border-bottom: 1px solid var(--mud-palette-lines-default);
}
.mud-dialog-content { padding: 22px 24px; }
.mud-dialog-actions {
padding: 14px 24px;
gap: 8px;
border-top: 1px solid var(--mud-palette-lines-default);
background: var(--mud-palette-background-gray);
}
/* ---- Tabs ---------------------------------------------------------------- */
.mud-tabs .mud-tab {
text-transform: none;
font-weight: 600;
border-radius: var(--cms-radius-sm) var(--cms-radius-sm) 0 0;
min-width: unset;
}
.mud-tabs .mud-tab.mud-tab-active { color: var(--mud-palette-primary); }
.mud-tabs .mud-tab-slider { background: var(--mud-palette-primary); height: 2.5px; border-radius: 2px; }
/* ---- Chips --------------------------------------------------------------- */
.mud-chip {
border-radius: 999px;
font-weight: 600;
font-size: 12px;
}
.mud-chip.mud-chip-filled.mud-chip-color-primary { background: var(--cms-accent-soft); color: var(--mud-palette-primary); }
/* ---- Switches / checkboxes / radios ------------------------------------- */
.mud-switch .mud-switch-track { border-radius: 999px; }
.mud-checkbox .mud-icon-root,
.mud-radio .mud-icon-root { border-radius: 4px; }
/* ---- Alerts -------------------------------------------------------------- */
.mud-alert {
border-radius: var(--cms-radius);
font-size: 13.5px;
border: 1px solid transparent;
}
/* ---- Expansion panels ---------------------------------------------------- */
.mud-expand-panel {
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius) !important;
box-shadow: none !important;
margin-bottom: 8px;
overflow: hidden;
}
.mud-expand-panel .mud-expand-panel-header { font-weight: 600; }
/* ---- Snackbar / tooltip / badge ----------------------------------------- */
.mud-snackbar {
border-radius: var(--cms-radius) !important;
box-shadow: var(--cms-shadow-lg) !important;
}
.mud-tooltip {
border-radius: var(--cms-radius-sm) !important;
font-size: 12px;
padding: 6px 10px;
background: #0f172a;
color: #fff;
}
.mud-badge .mud-badge-badge { border-radius: 999px; font-weight: 700; }
/* ---- Progress ------------------------------------------------------------ */
.mud-progress-linear { border-radius: 999px; overflow: hidden; }
/* ---- Data grid (MudDataGrid, if used) ----------------------------------- */
.mud-table.mud-data-grid { border-radius: var(--cms-radius); }
.mud-data-grid .mud-table-head .mud-table-cell { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
/* ---- Dashboard admin-tool section cards --------------------------------- */
.cms-tool-card {
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default);
border-radius: 16px;
box-shadow: var(--cms-shadow-sm);
padding: 24px;
height: 100%;
display: flex;
flex-direction: column;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cms-tool-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(15, 23, 42, .12); }
.cms-tool-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cms-tool-ico {
width: 48px; height: 48px; border-radius: 13px;
display: grid; place-items: center; flex: 0 0 auto; color: #fff;
box-shadow: 0 6px 16px rgba(15, 23, 42, .20);
}
.cms-tool-ico .mud-icon-root { font-size: 24px; }
.cms-tool-title { font-size: 16px; font-weight: 700; color: var(--mud-palette-text-primary); }
.cms-tool-sub { font-size: 13px; color: var(--mud-palette-text-secondary); margin-top: 2px; }
/* pin the action to the bottom, separated by a divider — keeps unequal cards tidy */
.cms-tool-card form { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--mud-palette-divider); }
/* Muted secondary text (dialog subtitles, hints) — dark-mode aware. */
.cms-text-secondary { color: var(--mud-palette-text-secondary); }
/* ---- Export-to-Excel button ---------------------------------------------- */
.cms-export-btn.mud-button-root {
text-transform: none;
font-weight: 650;
letter-spacing: .1px;
border-radius: 9px;
padding-inline: 14px;
color: #fff;
background: linear-gradient(135deg, #21a366 0%, #197a4b 100%);
box-shadow: 0 2px 8px rgba(25, 122, 75, .32);
transition: background .18s ease, box-shadow .18s ease, transform .06s ease;
}
.cms-export-btn.mud-button-root:hover {
background: linear-gradient(135deg, #27b673 0%, #1c8a54 100%);
box-shadow: 0 5px 16px rgba(25, 122, 75, .42);
}
.cms-export-btn.mud-button-root:active { transform: translateY(1px); }
.cms-export-btn .mud-button-label,
.cms-export-btn .mud-icon-root,
.cms-export-btn svg { color: #fff; fill: currentColor; }
.cms-export-btn.mud-button-root.mud-button-disabled {
background: var(--mud-palette-action-disabled-background);
color: var(--mud-palette-action-disabled);
box-shadow: none;
}
/* ---- Redis management (RedisInsight-style browser + docked CLI) ---------- */
.cms-redis { display: flex; flex-direction: column; height: calc(100vh - 200px); min-height: 560px; position: relative; }
.cms-redis-topbar { display: flex; align-items: center; gap: 14px; padding: 8px 12px; margin-bottom: 12px;
border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; background: var(--mud-palette-surface); }
.cms-redis-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cms-redis-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
font-size: 12.5px; font-weight: 600; color: var(--mud-palette-text-secondary);
background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default); }
.cms-redis-chip .mud-icon-root { font-size: 16px; }
.cms-redis-tt { font-size: 12.5px; line-height: 1.7; }
.cms-redis-tt > div { white-space: nowrap; }
.cms-redis-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.cms-redis-tab { border: 0; background: transparent; cursor: pointer; padding: 8px 16px; font-size: 14px; font-weight: 600;
color: var(--mud-palette-text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cms-redis-tab:hover { color: var(--mud-palette-text-primary); }
.cms-redis-tab.active { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-primary); }
.cms-redis-body { flex: 1; display: grid; grid-template-columns: 380px 1fr; gap: 12px; min-height: 0; }
.cms-redis-body.full { grid-template-columns: 1fr; }
/* Per-row TTL/size columns — only shown in the full-width (detail-closed) list. */
.cms-key-meta { display: none; }
.cms-redis-body.full .cms-key-meta { display: inline-flex; align-items: center; gap: 32px; margin-left: 12px;
color: var(--mud-palette-text-secondary); font-size: 12.5px; }
.cms-redis-body.full .cms-key-ttl { min-width: 90px; text-align: right; }
.cms-redis-body.full .cms-key-size { min-width: 56px; text-align: right; }
/* Indexes view */
.cms-redis-indexes { flex: 1; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px;
display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.cms-redis-indexes-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
border-bottom: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-gray); }
.cms-redis-indexes-body { flex: 1; overflow: auto; }
.cms-redis-idxtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cms-redis-idxtable th { text-align: left; font-weight: 600; color: var(--mud-palette-text-secondary);
padding: 10px 14px; border-bottom: 1px solid var(--mud-palette-lines-default);
position: sticky; top: 0; background: var(--mud-palette-surface); }
.cms-redis-idxtable td { padding: 10px 14px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.cms-redis-idxtable th.num, .cms-redis-idxtable td.num { text-align: right; }
.cms-idx-types { display: flex; flex-wrap: wrap; gap: 6px; }
.cms-idx-badge { padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .3px;
border: 1px solid transparent; }
.cms-idx-badge.numeric { color: #b45309; border-color: #b45309; background: color-mix(in srgb, #b45309 12%, transparent); }
.cms-idx-badge.text { color: #64748b; border-color: #64748b; background: color-mix(in srgb, #64748b 12%, transparent); }
.cms-idx-badge.tag { color: #7c3aed; border-color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, transparent); }
.cms-idx-badge.geo { color: #16a34a; border-color: #16a34a; background: color-mix(in srgb, #16a34a 12%, transparent); }
.cms-idx-badge.vector { color: #0e7490; border-color: #0e7490; background: color-mix(in srgb, #0e7490 12%, transparent); }
.cms-redis-keys, .cms-redis-detail { border: 1px solid var(--mud-palette-lines-default); border-radius: 14px;
overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.cms-redis-detail { min-width: 0; }
.cms-redis-keys-tools { padding: 10px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-gray); }
.cms-redis-keys-count { display: flex; align-items: center; gap: 4px; margin-top: 6px;
font-size: 12px; color: var(--mud-palette-text-secondary); }
.cms-redis-keys-count span { margin-right: auto; }
.cms-redis-keys-list { flex: 1; overflow: auto; padding: 6px; }
.cms-key-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%;
text-align: left; cursor: pointer; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
color: var(--mud-palette-text-primary); }
.cms-key-row:hover { background: var(--mud-palette-action-default-hover); }
.cms-key-row.active { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); }
.cms-key-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-key-del { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 2px;
border: 0; border-radius: 6px; background: transparent; cursor: pointer; color: var(--mud-palette-error);
opacity: 0; transform: translateX(6px); transition: opacity .15s ease, transform .15s ease, background .15s ease; }
.cms-key-del .mud-icon-root { font-size: 18px; }
.cms-key-row:hover .cms-key-del { opacity: 1; transform: translateX(0); }
.cms-key-del:hover { background: color-mix(in srgb, var(--mud-palette-error) 18%, transparent); }
.cms-key-more { display: block; width: 100%; padding: 8px; margin-top: 4px; border: 0; cursor: pointer;
background: transparent; color: var(--mud-palette-primary); font-weight: 600; font-size: 13px; border-radius: 8px; }
.cms-key-more:hover { background: var(--mud-palette-action-default-hover); }
.cms-key-badge { flex: 0 0 auto; min-width: 46px; text-align: center; padding: 2px 7px; border-radius: 5px;
font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: #fff; background: #64748b; }
.cms-key-badge.string { background: #2563eb; }
.cms-key-badge.hash { background: #4f46e5; }
.cms-key-badge.json { background: #0e7490; }
.cms-key-badge.list { background: #16a34a; }
.cms-key-badge.set { background: #b45309; }
.cms-key-badge.zset { background: #a21caf; }
.cms-key-badge.stream { background: #db2777; }
.cms-redis-detail-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
border-bottom: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-gray); }
.cms-redis-detail-key { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-redis-detail-meta { display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 16px;
border-bottom: 1px solid var(--mud-palette-lines-default); font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.cms-redis-detail-meta b { color: var(--mud-palette-text-secondary); font-weight: 600; margin-right: 6px; }
.cms-redis-detail-body { flex: 1; overflow: auto; padding: 14px 16px; min-height: 0; }
.cms-redis-value { margin: 0; white-space: pre-wrap; word-break: break-word;
font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; font-size: 12.5px; line-height: 1.55;
color: var(--mud-palette-text-primary); background: var(--mud-palette-background-gray);
border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; padding: 12px; }
.cms-redis-fields { width: 100%; border-collapse: collapse; font-size: 13px; }
.cms-redis-fields th { text-align: left; font-weight: 600; color: var(--mud-palette-text-secondary);
padding: 8px 10px; border-bottom: 1px solid var(--mud-palette-lines-default); position: sticky; top: 0; background: var(--mud-palette-surface); }
.cms-redis-fields td { padding: 8px 10px; border-bottom: 1px solid var(--mud-palette-lines-default); vertical-align: top; }
.cms-redis-fields td:first-child { font-weight: 600; white-space: nowrap; }
.cms-redis-fieldval { font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; font-size: 12px;
word-break: break-word; display: block; max-height: 160px; overflow: auto; }
.cms-redis-center { flex: 1; display: grid; place-items: center; padding: 24px; text-align: center; }
.cms-redis-muted { color: var(--mud-palette-text-secondary); }
/* Docked CLI (RedisInsight-style, always dark) */
.cms-redis-cli-dock { margin-top: 12px; border: 1px solid #1f2937; border-radius: 12px; overflow: hidden; background: #0b1020; }
.cms-cli-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; cursor: pointer;
border: 0; background: #111827; color: #cbd5e1; font-weight: 700; font-size: 13px; }
.cms-cli-toggle .mud-icon-root { color: #22c55e; }
.cms-cli-panel { display: flex; flex-direction: column; height: 320px; min-height: 140px; border-top: 1px solid #1f2937; }
.cms-cli-resize { flex: 0 0 auto; height: 8px; cursor: row-resize; background: #0f172a; position: relative; }
.cms-cli-resize::after { content: ""; position: absolute; left: 50%; top: 3px; width: 44px; height: 2px;
transform: translateX(-50%); background: #334155; border-radius: 2px; }
.cms-cli-resize:hover { background: #1e293b; }
.cms-cli-resize:hover::after { background: #22c55e; }
.cms-cli-panel-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #0f172a; color: #94a3b8; font-size: 12px; }
.cms-cli-panel-bar .mud-icon-root { color: #22c55e; }
.cms-cli-linkbtn { border: 0; background: transparent; color: #94a3b8; cursor: pointer; font-size: 12px; }
.cms-cli-linkbtn:hover { color: #e5e7eb; }
.cms-cli-scroll { flex: 1; overflow: auto; padding: 12px 14px;
font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.55; color: #e5e7eb; }
.cms-cli-welcome { color: #64748b; margin-bottom: 10px; }
.cms-cli-cmdline { margin-top: 8px; }
.cms-cli-prompt { color: #22c55e; font-weight: 700; margin-right: 8px; white-space: nowrap; }
.cms-cli-cmd { color: #e5e7eb; }
.cms-cli-out { margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; color: #93c5fd;
font-family: inherit; font-size: 13px; background: transparent; border: 0; padding: 0; }
.cms-cli-out.err { color: #f87171; }
.cms-cli-inputrow { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #111827; border-top: 1px solid #1f2937; }
.cms-cli-native { flex: 1; background: transparent; border: 0; outline: 0; color: #e5e7eb;
font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; font-size: 13px; }
.cms-cli-native::placeholder { color: #64748b; }
@media (max-width: 900px) {
.cms-redis { height: auto; }
.cms-redis-body { grid-template-columns: 1fr; }
.cms-redis-keys { height: 320px; }
.cms-redis-detail { height: 420px; }
}
/* ---- User menu button in appbar ------------------------------------------ */
.cms-user-btn {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
padding: 4px 12px 4px 5px;
cursor: pointer;
user-select: none;
color: var(--mud-palette-appbar-text);
transition: background-color .12s ease;
}
.cms-user-btn:hover { background-color: var(--cms-surface-2); }
.cms-user-btn:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.cms-user-name { font-weight: 600; font-size: 14px; }
.cms-avatar {
background: var(--cms-brand-gradient) !important;
color: #fff !important;
font-weight: 700;
font-size: 13px;
}
/* ---- Profile dropdown menu ---------------------------------------------- */
.cms-profile-popover .mud-list {
padding: 0 !important;
}
.cms-user-wrap { position: relative; }
.cms-menu-backdrop {
position: fixed;
inset: 0;
z-index: 2000;
background: transparent;
}
.cms-menu-float {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 2001;
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius-lg);
box-shadow: var(--cms-shadow-lg);
animation: cms-menu-in .12s ease-out;
}
@keyframes cms-menu-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.cms-menu {
width: 288px;
padding: 6px;
}
.cms-menu-identity {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 10px;
}
.cms-menu-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--cms-brand-gradient);
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
font-size: 15px;
flex: 0 0 auto;
}
.cms-menu-id-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cms-menu-id-text strong { font-size: 14px; font-weight: 650; color: var(--mud-palette-text-primary); }
.cms-menu-id-text small { font-size: 12px; color: var(--mud-palette-text-secondary); word-break: break-all; }
.cms-menu-divider { height: 1px; background: var(--mud-palette-lines-default); margin: 5px 2px; }
.cms-menu-section { padding: 6px 8px 8px; }
.cms-menu-label {
color: var(--mud-palette-text-disabled);
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
margin-bottom: 8px;
}
.cms-theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cms-theme-opt {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 9px 4px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius-sm);
background: var(--mud-palette-background-gray);
color: var(--mud-palette-text-secondary);
font: inherit;
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.cms-theme-opt:hover { border-color: var(--mud-palette-lines-inputs); color: var(--mud-palette-text-primary); }
.cms-theme-opt.active {
border-color: var(--mud-palette-primary);
background: var(--cms-accent-soft);
color: var(--mud-palette-primary);
}
.cms-theme-opt .mud-icon-root { font-size: 18px; }
.cms-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 10px;
border: 0;
border-radius: var(--cms-radius-sm);
background: transparent;
color: var(--mud-palette-text-primary);
font: inherit;
font-size: 13.5px;
font-weight: 500;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background-color .12s ease;
}
.cms-menu-item:hover { background: var(--cms-surface-2); text-decoration: none; }
.cms-menu-item-icon { color: var(--mud-palette-text-secondary); }
.cms-menu-item-danger { color: var(--mud-palette-error); }
.cms-menu-item-danger .cms-menu-item-icon { color: var(--mud-palette-error); }
.cms-menu-item-danger:hover { background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); }
/* ---- Modern page header (TitleOfPage) ----------------------------------- */
.cms-page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.cms-page-head .cms-eyebrow { margin-bottom: 4px; }
.cms-page-title { font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; color: var(--mud-palette-text-primary); margin: 0; }
.cms-page-sub { color: var(--mud-palette-text-secondary); font-size: 13.5px; margin: 4px 0 0; max-width: 68ch; }
.cms-page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* ---- Skeleton loader (PageLoading) -------------------------------------- */
.cms-skeleton {
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius);
box-shadow: var(--cms-shadow-sm);
overflow: hidden;
}
.cms-skeleton-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 16px;
border-bottom: 1px solid var(--mud-palette-lines-default);
}
.cms-skel-spacer { flex: 1; }
.cms-skeleton-head {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
padding: 14px 16px;
background: var(--mud-palette-background-gray);
border-bottom: 1px solid var(--mud-palette-lines-default);
}
.cms-skeleton-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
padding: 15px 16px;
border-bottom: 1px solid var(--mud-palette-lines-default);
}
.cms-skeleton-row:last-child { border-bottom: 0; }
.cms-skel-bar {
display: block;
border-radius: 999px;
background: linear-gradient(90deg,
var(--mud-palette-background-gray) 25%,
color-mix(in srgb, var(--mud-palette-background-gray) 55%, var(--mud-palette-lines-inputs)) 37%,
var(--mud-palette-background-gray) 63%);
background-size: 400% 100%;
animation: cms-shimmer 1.4s ease-in-out infinite;
}
@keyframes cms-shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
.cms-skel-bar { animation: none; }
}
/* ---- MudDataGrid pages (the modern converted grids) --------------------- */
.cms-datagrid.mud-table {
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius);
box-shadow: var(--cms-shadow-sm);
overflow: hidden;
}
.cms-datagrid .mud-table-toolbar {
height: auto;
min-height: 0;
padding: 14px 16px;
border-bottom: 1px solid var(--mud-palette-lines-default);
}
.cms-datagrid .mud-table-toolbar .mud-input-control { margin-top: 0; }
.cms-datagrid .mud-table-cell { padding: 12px 16px; }
.cms-field-label {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--mud-palette-text-primary);
margin-bottom: 6px;
}
/* ---- Banner media preview cell (uniform image/video thumbnail) ---------- */
.cms-banner-media {
width: 132px;
height: 104px;
border-radius: 10px;
overflow: hidden;
background: var(--mud-palette-background-gray);
border: 1px solid var(--mud-palette-lines-default);
display: flex;
align-items: center;
justify-content: center;
}
.cms-banner-media img,
.cms-banner-media video {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
/* ---- Media upload groups (language-grouped, uniform tiles) --------------- */
.cms-media-group { margin-top: 4px; }
.cms-media-group + .cms-media-group { margin-top: 22px; }
.cms-media-group-head {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 0.92rem;
padding: 9px 14px;
margin-bottom: 14px;
border-radius: 9px;
color: var(--mud-palette-text-primary);
background: var(--mud-palette-background-gray);
border-left: 3px solid var(--mud-palette-primary);
}
.cms-media-group-head .mud-icon-root { color: var(--mud-palette-primary); }
.cms-media-tile {
display: flex;
flex-direction: column;
height: 100%;
padding: 12px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 11px;
background: var(--mud-palette-surface);
}
.cms-media-tile-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--mud-palette-lines-default);
}
.cms-media-tile-title { font-weight: 700; font-size: 0.85rem; color: var(--mud-palette-text-primary); }
.cms-media-tile-dim {
font-size: 0.72rem;
font-weight: 600;
color: var(--mud-palette-text-secondary);
background: var(--mud-palette-background-gray);
padding: 2px 8px;
border-radius: 20px;
white-space: nowrap;
}
.cms-empty {
display: grid;
place-items: center;
gap: 4px;
padding: 48px 16px;
color: var(--mud-palette-text-secondary);
}
/* Column filter row (per-column search under headers) */
.cms-datagrid .mud-table-cell.filter-header-cell,
.cms-datagrid .filter-header-cell {
background: var(--mud-palette-background-gray);
border-bottom: 1px solid var(--mud-palette-lines-default);
}
.cms-datagrid .filter-header-cell .mud-input-control { margin: 0; }
/* ---- Dialog header icon badge (ConfirmDialog + form dialogs) ------------- */
.cms-confirm-icon {
width: 40px;
height: 40px;
border-radius: 11px;
display: grid;
place-items: center;
flex: 0 0 auto;
}
.cms-confirm-icon .mud-icon-root { font-size: 22px; }
.cms-confirm-icon.danger { background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent); color: var(--mud-palette-error); }
.cms-confirm-icon.warning { background: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent); color: var(--mud-palette-warning); }
.cms-confirm-icon.primary { background: var(--cms-accent-soft); color: var(--mud-palette-primary); }
.cms-confirm-icon.success { background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent); color: var(--mud-palette-success); }
/* ---- Upload drop zone ---------------------------------------------------- */
/* Drop zone — only on screen while nothing is set, or while replacing. */
.cms-dropzone {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
text-align: center;
min-height: 132px;
padding: 14px 12px;
width: 100%;
border: 1.5px dashed var(--mud-palette-lines-inputs);
border-radius: var(--cms-radius);
background: var(--mud-palette-background-gray);
transition: border-color .12s ease, background-color .12s ease;
}
.cms-dropzone:hover,
.cms-dropzone.is-dragging {
border-color: var(--mud-palette-primary);
background: var(--cms-accent-soft);
}
/* The file input is invisible but still tabbable, so it cannot draw its own focus
ring. :focus-within on the zone IS the ring — without it a keyboard user is lost. */
.cms-dropzone:focus-within {
border-color: var(--mud-palette-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}
/* The real input, stretched over the zone: a dropped file lands ON it (which is what
makes drag & drop actually work rather than just look like it), a click anywhere
opens the picker, and it stays focusable — display:none would drop it from the
tab order entirely. */
.cms-upload-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
/* Firefox renders a wide "Browse…" box; this stops it stretching the zone. */
font-size: 0;
}
.cms-upload-input:disabled { cursor: default; }
.cms-dropzone-ico {
width: 38px;
height: 38px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--cms-accent-soft);
color: var(--mud-palette-primary);
margin-bottom: 3px;
}
.cms-dropzone-ico .mud-icon-root { font-size: 20px; }
.cms-dropzone-title { font-size: 13px; font-weight: 600; color: var(--mud-palette-text-primary); }
.cms-dropzone-hint {
font-size: 11.5px;
color: var(--mud-palette-text-secondary);
/* A long constraint line wraps instead of widening the card. */
max-width: 100%;
overflow-wrap: anywhere;
}
/* Above the overlay input so it keeps its hover state; `for` still opens the picker. */
.cms-dropzone-browse { position: relative; z-index: 1; margin-top: 6px; }
/* Media & logos grid inside dialogs (each uploader in a clear titled card) */
.cms-media-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}
.cms-media-item {
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius);
background: var(--mud-palette-surface);
padding: 14px;
}
.cms-media-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--mud-palette-text-primary);
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--mud-palette-lines-default);
}
.cms-media-title .mud-icon-root { color: var(--mud-palette-primary); }
/* Classification accordion (AuctionTypes) — each panel is a raised 3D card */
.cms-class-panels {
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.cms-class-panels .mud-expand-panel {
border: 1px solid var(--mud-palette-lines-default) !important;
border-radius: var(--cms-radius-lg) !important;
box-shadow: var(--cms-shadow-md) !important;
background: var(--mud-palette-surface);
margin-bottom: 12px !important;
overflow: hidden;
transition: box-shadow .18s ease, transform .18s ease;
}
.cms-class-panels .mud-expand-panel:hover {
box-shadow: var(--cms-shadow-lg) !important;
transform: translateY(-2px);
}
/* remove MudExpansionPanels' inter-panel divider line so cards look separate */
.cms-class-panels .mud-expand-panel::before { display: none !important; }
.cms-class-panels .mud-expand-panel-header { padding: 14px 18px; }
.cms-count-badge {
display: inline-flex;
align-items: center;
background: var(--cms-accent-soft);
color: var(--mud-palette-primary);
font-size: 12px;
font-weight: 600;
padding: 3px 11px;
border-radius: 999px;
white-space: nowrap;
}
/* ---- Page container spacing --------------------------------------------- */
/* ---- Multi-condition column filter popup -------------------------------- */
.cms-mfilter {
width: 380px;
max-width: 92vw;
padding: 6px 4px 4px;
display: flex;
flex-direction: column;
gap: 8px;
}
.cms-mfilter-head {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--mud-palette-text-secondary);
padding: 4px 6px 2px;
}
.cms-mfilter-head .mud-icon-root { font-size: 16px; }
.cms-mfilter-row {
display: flex;
align-items: center;
gap: 6px;
}
.cms-mfilter-op { flex: 0 0 155px; width: 155px; }
.cms-mfilter-val { flex: 1; min-width: 0; }
.cms-mfilter-add { align-self: flex-start; }
/* AND / OR conjunction selector */
.cms-conj {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 6px;
}
.cms-conj-label { font-size: 12px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.cms-conj-opt {
border: 1px solid var(--mud-palette-lines-inputs);
background: var(--mud-palette-surface);
color: var(--mud-palette-text-secondary);
font: inherit;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .03em;
padding: 3px 12px;
cursor: pointer;
transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.cms-conj-opt:first-of-type { border-radius: 999px 0 0 999px; }
.cms-conj-opt:last-of-type { border-radius: 0 999px 999px 0; border-left: 0; }
.cms-conj-opt.active {
background: var(--mud-palette-primary);
border-color: var(--mud-palette-primary);
color: #fff;
}
.cms-conj-hint { font-size: 11px; color: var(--mud-palette-text-disabled); margin-left: 2px; }
.cms-mfilter-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid var(--mud-palette-lines-default);
padding-top: 8px;
margin-top: 2px;
}
/* Set the content area's base text color so un-colored MudText (which inherits)
is readable in dark mode. Colored MudText keeps its own class-based color. */
.mud-main-content {
background: var(--mud-palette-background);
color: var(--mud-palette-text-primary);
}
.mud-main-content h1,
.mud-main-content h2,
.mud-main-content h3,
.mud-main-content h4,
.mud-main-content h5,
.mud-main-content h6 {
color: var(--mud-palette-text-primary);
}
/* ============================================================================
GridBlazor polish v2 — clean flat icon buttons, floating filter popup,
clean funnel icon, and modern nested (grid-in-grid) styling.
These override GridBlazor's default gray-gradient buttons by restating the
icon SVG WITHOUT the gradient, on a clean surface plate.
========================================================================= */
/* ---- Clean flat icon buttons -------------------------------------------- */
.grid-mvc .grid-button-add,
.grid-mvc .grid-button-excel,
.grid-mvc .grid-button-sync,
.grid-mvc .grid-button-header-view,
.grid-mvc .grid-button-header-edit,
.grid-mvc .grid-button-header-delete,
.grid-mvc .grid-button-view,
.grid-mvc .grid-button-edit,
.grid-mvc .grid-button-delete {
width: 34px !important;
height: 34px !important;
background-color: var(--mud-palette-surface) !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 15px 15px !important;
border: 1px solid var(--mud-palette-lines-inputs) !important;
border-radius: var(--cms-radius-sm) !important;
box-shadow: none !important;
transition: background-color .12s ease, border-color .12s ease, filter .12s ease;
}
.grid-mvc .grid-button-add:hover,
.grid-mvc .grid-button-excel:hover,
.grid-mvc .grid-button-sync:hover,
.grid-mvc .grid-button-header-view:hover,
.grid-mvc .grid-button-header-edit:hover,
.grid-mvc .grid-button-view:hover,
.grid-mvc .grid-button-edit:hover {
background-color: var(--cms-surface-2) !important;
}
/* Icons (restated SVG, no gradient) */
.grid-mvc .grid-button-view,
.grid-mvc .grid-button-header-view {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.grid-mvc .grid-button-edit,
.grid-mvc .grid-button-header-edit {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.grid-mvc .grid-button-delete,
.grid-mvc .grid-button-header-delete {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.grid-mvc .grid-button-delete:hover,
.grid-mvc .grid-button-header-delete:hover {
background-color: var(--mud-palette-error) !important;
border-color: var(--mud-palette-error) !important;
background-image: url('data:image/svg+xml;utf8,') !important;
}
.grid-mvc .grid-button-excel {
background-image: url('data:image/svg+xml;utf8,') !important;
}
/* Add button = primary (indigo plate, white icon) */
.grid-mvc .grid-button-add {
background-color: var(--mud-palette-primary) !important;
border-color: var(--mud-palette-primary) !important;
background-image: url('data:image/svg+xml;utf8,') !important;
}
.grid-mvc .grid-button-add:hover {
filter: brightness(1.06);
background-color: var(--mud-palette-primary) !important;
}
/* ---- Filter popup: float ON TOP, don't expand the header ---------------- */
.grid-mvc .grid-dropdown {
position: absolute !important;
z-index: 60 !important;
min-width: 300px;
background: var(--mud-palette-surface) !important;
border: 1px solid var(--mud-palette-lines-default) !important;
border-radius: var(--cms-radius) !important;
box-shadow: var(--cms-shadow-lg) !important;
}
.grid-mvc .grid-dropdown-inner { padding: 14px !important; }
.grid-mvc .grid-dropdown-arrow { display: none !important; }
/* Make sure the header cell anchors the absolute popup and never grows */
.grid-mvc .grid-table thead th { position: relative; }
/* ---- Clean funnel filter icon ------------------------------------------- */
.grid-mvc .grid-filter-btn {
width: 14px !important;
height: 14px !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
opacity: .7;
background-image: url('data:image/svg+xml;utf8,') !important;
transition: opacity .12s ease;
}
.grid-mvc .grid-filter-btn:hover { opacity: 1; }
/* ---- Nested grid-in-grid (subgrid) -------------------------------------- */
.grid-mvc .grid-mvc {
margin: 10px 8px;
box-shadow: none;
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius-sm);
background: var(--mud-palette-background-gray);
}
.grid-mvc .grid-mvc .table.grid-table thead th {
background: var(--mud-palette-surface);
font-size: 10.5px;
}
.grid-mvc .grid-mvc .table.grid-table tbody td { background: transparent; }
/* Expand/collapse caret for subgrid rows */
.grid-mvc .grid-button-cell,
.grid-mvc .grid-group-caret {
color: var(--mud-palette-text-secondary);
cursor: pointer;
}
/* ---- Grouped rows (e.g. Roles grouped by role) -------------------------- */
.grid-mvc .grid-group-row,
.grid-mvc .grid-group-row td {
background: var(--mud-palette-background-gray) !important;
color: var(--mud-palette-text-primary) !important;
font-weight: 600;
box-shadow: none !important;
border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}
/* Don't let the row-selection tint bleed onto group header rows */
.grid-mvc .grid-group-row.grid-row-selected td {
background: var(--mud-palette-background-gray) !important;
box-shadow: none !important;
}
.grid-mvc .grid-group-tab { color: var(--mud-palette-text-secondary); }
/* =========================================================================
Responsive / mobile layer
Tuned for large phones & foldables: Samsung S24 Ultra (~412px),
iPhone 17 Pro Max (~440px), Galaxy Fold 5 unfolded (~768px tablet) and
— the tightest case — Fold 5 folded cover screen (~344px).
========================================================================= */
/* ---- Phones & foldables (<= 600px, MudBlazor xs) ------------------------- */
@media (max-width: 600px) {
/* Reclaim horizontal space: trim the page container padding. */
.mud-main-content .mud-container { padding-left: 10px; padding-right: 10px; }
.mud-main-content > .mud-container { padding-top: 12px; padding-bottom: 12px; }
/* Page header stacks; the action button(s) go full-width and easy to tap. */
.cms-page-head { flex-direction: column; align-items: stretch; gap: 10px; }
.cms-page-title { font-size: 21px; }
.cms-page-actions { width: 100%; }
.cms-page-actions > .mud-button-root { flex: 1 1 auto; }
/* Data grids: keep the wide table scrolling INSIDE its card (never break the
page), and tighten cells so more fits on screen. */
.cms-datagrid .mud-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cms-datagrid .mud-table-cell,
.cms-datagrid .mud-table-cell.mud-table-cell-hide { padding: 6px 8px; font-size: 12.5px; }
/* Grid toolbars (title + count + search) wrap; search takes the full width. */
.mud-table-toolbar { height: auto; flex-wrap: wrap; gap: 8px; padding: 10px 8px; }
.mud-table-toolbar .mud-input-control { max-width: 100% !important; width: 100%; }
/* Accordion header rows (Cities / AuctionTypes / FAQ …) wrap tidily. */
.cms-class-panels .mud-expand-panel-header { padding: 12px; }
/* Uploader tiles & media previews: one per row. */
.cms-media-grid { grid-template-columns: 1fr; gap: 12px; }
.cms-uploader, .cms-image-upload { max-width: 100%; }
/* Dialogs: use the width, trim the padding. */
.mud-dialog { width: 100%; margin: 8px; }
.mud-dialog-content { padding: 12px 14px !important; max-height: 82vh; }
.mud-dialog-title { padding: 14px 14px 0 !important; }
.mud-dialog-actions { padding: 10px 14px !important; }
/* Multi-condition filter popup must never exceed the viewport. */
.cms-mfilter { width: min(380px, 92vw) !important; }
.cms-mfilter-op { flex: 1 1 130px; width: auto; min-width: 120px; }
.cms-mfilter-row { flex-wrap: wrap; }
/* Profile dropdown fits narrow screens. */
.cms-menu { width: min(288px, 90vw); }
/* Dashboard metric cards: one column. */
.cms-metrics { grid-template-columns: 1fr; }
}
/* ---- Extra-narrow: Fold 5 folded cover screen (~344px) ------------------- */
@media (max-width: 400px) {
.mud-main-content .mud-container { padding-left: 6px; padding-right: 6px; }
.cms-page-title { font-size: 19px; }
.cms-page-sub { font-size: 12.5px; }
/* Even tighter grid cells + smaller row images to reduce sideways scroll. */
.cms-datagrid .mud-table-cell { padding: 5px 6px; font-size: 12px; }
.cms-banner-media { width: 104px; height: 84px; }
.cms-menu { width: min(288px, 94vw); }
.cms-mfilter { width: 94vw !important; }
.cms-media-grid { gap: 10px; }
}
/* ---- Tablet range incl. Fold 5 unfolded (601–900px) --------------------- */
@media (min-width: 601px) and (max-width: 900px) {
/* Media/upload tiles: two per row rather than forcing 300px minimums. */
.cms-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---- Performance / report pages ------------------------------------------ */
.report-filter-panel {
border: 1px solid var(--mud-palette-lines-default);
border-radius: 16px;
background: var(--mud-palette-surface);
}
.fancy-report-container { animation: cms-report-in .45s ease both; }
@keyframes cms-report-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* gradient header banner */
.report-header-section {
position: relative; overflow: hidden; border: 0; border-radius: 18px; color: #fff;
background: linear-gradient(135deg, #4f46e5, #7c3aed 55%, #0ea5e9);
box-shadow: 0 16px 40px rgba(79, 70, 229, .28);
}
.report-header-section::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(620px 220px at 15% -30%, rgba(255,255,255,.28), transparent 60%);
}
.report-header-section .mud-typography { position: relative; z-index: 1; }
/* animated stat cards */
.summary-card {
position: relative; overflow: hidden; height: 100%;
border: 1px solid var(--mud-palette-lines-default); border-radius: 16px;
background: var(--mud-palette-surface);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
animation: cms-card-in .5s cubic-bezier(.2, .7, .2, 1) both;
animation-delay: calc(var(--i, 0) * .07s);
}
.summary-card::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--accent, #4f46e5);
}
.summary-card::after {
content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--accent, #4f46e5) 14%, transparent), transparent);
pointer-events: none;
}
.summary-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 32px rgba(15, 23, 42, .13);
border-color: color-mix(in srgb, var(--accent, #4f46e5) 40%, var(--mud-palette-lines-default));
}
.summary-card .sc-ico {
position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 14px;
color: var(--accent, #4f46e5); background: color-mix(in srgb, var(--accent, #4f46e5) 15%, transparent);
}
.summary-card .sc-ico .mud-icon-root { font-size: 25px; }
.summary-card .sc-label {
position: relative; z-index: 1; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
color: var(--mud-palette-text-secondary);
}
.summary-card .sc-value {
position: relative; z-index: 1; margin-top: 3px; font-size: 30px; font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums;
}
@keyframes cms-card-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
/* report tables */
.report-table-card {
border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; background: var(--mud-palette-surface);
animation: cms-card-in .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .15s;
}
.report-table-card .mud-table-root, .report-table-card .mud-table-container { background: transparent; }
.report-table-card .mud-table-root th { color: var(--mud-palette-text-secondary); font-weight: 600; }
.report-table-card .text-right { text-align: right; }
@media print {
.summary-card, .report-table-card, .fancy-report-container { animation: none !important; }
.report-header-section { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* donut chart under report sections */
.report-donut-wrap {
display: flex; align-items: center; gap: 20px; margin-top: 16px; flex-wrap: wrap;
padding-top: 14px; border-top: 1px dashed var(--mud-palette-lines-default);
}
.report-donut { width: 138px; height: 138px; flex: 0 0 auto; transform-origin: center;
animation: cms-donut-in .6s cubic-bezier(.2, .7, .2, 1) both; }
.report-donut .donut-hole { fill: none; stroke: var(--mud-palette-lines-default); stroke-width: 3.4; }
.report-donut .donut-seg { fill: none; stroke-width: 3.8; }
.report-donut .donut-total { fill: var(--mud-palette-text-primary); font-size: 7px; font-weight: 800;
text-anchor: middle; dominant-baseline: central; }
.report-legend { display: flex; flex-direction: column; gap: 7px; font-size: 13px; min-width: 160px; }
.report-legend .rl-item { display: flex; align-items: center; gap: 9px; color: var(--mud-palette-text-secondary); }
.report-legend .rl-item i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.report-legend .rl-item b { margin-left: auto; color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
@keyframes cms-donut-in { from { opacity: 0; transform: rotate(-90deg) scale(.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .report-donut { animation: none; } }
@media print { .report-donut { animation: none !important; } }
/* ---- Dashboard quick links ------------------------------------------------ */
.cms-quicklinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.cms-quicklink {
display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; text-decoration: none;
border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface);
color: var(--mud-palette-text-primary);
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.cms-quicklink:hover {
transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15, 23, 42, .12);
border-color: color-mix(in srgb, var(--accent, #4f46e5) 40%, var(--mud-palette-lines-default));
}
.cms-quicklink .ql-ico {
width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
color: var(--accent, #4f46e5); background: color-mix(in srgb, var(--accent, #4f46e5) 14%, transparent);
}
.cms-quicklink .ql-ico .mud-icon-root { font-size: 23px; }
.cms-quicklink .ql-label { font-weight: 650; font-size: 14px; }
/* ============================================================================
EJE overrides — brown nav bar (logo + title) in LIGHT mode; EA dark as-is.
The base .mud-appbar rule above forces a translucent surface with !important,
so we re-assert the brown app-bar background for light and restore EA's
translucent blur only under the dark theme.
========================================================================= */
.mud-appbar {
background-color: var(--mud-palette-appbar-background) !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.mud-theme-dark .mud-appbar {
background-color: color-mix(in srgb, var(--mud-palette-surface) 82%, transparent) !important;
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
}
/* App-bar brand (logo + title) shown inside the nav bar itself. */
.cms-appbar-brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: inherit;
min-width: 0;
}
.cms-appbar-logo {
height: 30px;
width: auto;
flex: 0 0 auto;
}
.cms-appbar-title {
font-weight: 700;
letter-spacing: -.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Drawer brand: use the EJE logo image instead of the EA "mark" tile. */
.cms-brand-logo {
height: 30px;
width: auto;
flex: 0 0 auto;
}
/* ---- EJE fixes: dark-mode logo legibility + appbar profile hover ---------- */
/* The EJE logo art is dark ink on transparent — readable on the light brown bar,
invisible on the dark bar. Render it white under the dark theme. */
/* App-bar logo is ALWAYS white — the app bar is brown in light and dark-navy in
dark, and the EJE logo's own gold elements blend into the brown otherwise. */
.cms-appbar-logo {
filter: brightness(0) invert(1);
}
/* Drawer brand logo: white only on the dark drawer (light drawer is white). */
.mud-theme-dark .cms-brand-logo {
filter: brightness(0) invert(1);
}
/* Profile button lives on the app bar. The base rule tints hover with a light
grey surface, which is wrong on the brown (light) bar. Use a translucent
overlay that reads correctly on both the brown and the dark app bar. */
.mud-appbar .cms-user-btn:hover {
background-color: rgba(255, 255, 255, 0.16) !important;
}
.mud-theme-dark .mud-appbar .cms-user-btn:hover {
background-color: rgba(255, 255, 255, 0.08) !important;
}
/* ---- EJE fixes round 3: title colors follow the theme in dark mode -------- */
/* MudDialog titles (string- or TitleContent-based) must use the theme text
colour so headers stay legible on the dark dialog surface. */
.mud-dialog-title,
.mud-dialog-title .mud-typography {
color: var(--mud-palette-text-primary);
}
/* App-bar brand title ("EJE CMS") — always the on-bar text colour
(white on the brown light bar, light on the dark bar). */
.cms-appbar-title {
color: var(--mud-palette-appbar-text) !important;
}
/* ---- EJE fix: readable text selection in both themes ---------------------- */
::selection {
background: color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
color: var(--mud-palette-text-primary);
}
::-moz-selection {
background: color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
color: var(--mud-palette-text-primary);
}
/* ---- EJE fix: page background must follow dark mode (no light strip) ------ */
/* MudBlazor's --mud-palette-* vars are not in scope on /, so a
var()-based rule falls back to the light colour. Set explicit backgrounds
keyed on the theme class that ejeCmsApplyTheme() stamps on /. */
html, body { min-height: 100%; background-color: #f5f6fa; }
html.mud-theme-dark, body.mud-theme-dark { background-color: #0a0f1e !important; }
/* ---- EJE fix: kill residual light strip + horizontal overflow (dark) ------ */
html, body { margin: 0; height: 100%; overflow-x: hidden; }
.mud-theme-dark .mud-layout,
.mud-theme-dark .mud-main-content,
.mud-theme-dark .mud-content { background-color: #0a0f1e !important; }
.mud-layout { min-height: 100vh; }
/* wide data grids scroll inside their own container, not the whole page */
.cms-datagrid .mud-table-container,
.cms-datagrid .mud-data-grid { max-width: 100%; overflow-x: auto; }
/* ---- Home CDN uploader: modern result card ------------------------------ */
.cms-upload-result {
display: flex;
gap: 16px;
align-items: center;
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--cms-radius);
padding: 14px;
background: var(--mud-palette-surface);
box-shadow: var(--cms-shadow-sm);
}
.cms-upload-result-thumb {
position: relative;
width: 76px;
height: 76px;
flex: 0 0 auto;
border-radius: 12px;
overflow: hidden;
background: var(--mud-palette-background-gray);
border: 1px solid var(--mud-palette-lines-default);
display: grid;
place-items: center;
}
.cms-upload-result-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cms-upload-result-fallback { display: none; color: var(--mud-palette-text-disabled); }
.cms-upload-result-fallback .mud-icon-root { font-size: 32px; }
.cms-upload-result-body { min-width: 0; flex: 1 1 auto; }
.cms-upload-result-label {
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
color: var(--mud-palette-text-secondary); margin-bottom: 6px;
}
.cms-upload-result-link {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px; color: var(--mud-palette-text-primary); word-break: break-all;
background: var(--mud-palette-background-gray);
border: 1px solid var(--mud-palette-lines-default);
border-radius: 8px; padding: 8px 10px;
}
.cms-upload-result-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* ---- Nav: page search box + results -------------------------------------- */
.cms-nav-search {
padding: 4px 12px 8px;
}
/* Slightly softer than page inputs so it reads as chrome, not content. */
.cms-nav-search .mud-input-outlined .mud-input-outlined-border {
border-color: var(--mud-palette-lines-default);
}
.cms-nav-search .mud-input-root {
font-size: .875rem;
border-radius: var(--cms-radius-sm);
}
/* Area heading above each block of search results. */
.cms-nav-result-head {
padding: 10px 16px 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mud-palette-text-secondary);
}
.cms-nav-result-head:first-child { padding-top: 4px; }
/* Empty state when nothing matches. */
.cms-nav-empty {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 16px;
font-size: 13px;
color: var(--mud-palette-text-secondary);
}
/* ============================================================================
Dialog & form density
Applies to every dialog at once: tighter rhythm so more fields are reachable
without scrolling, while keeping fields comfortably separated.
========================================================================= */
/* Header: keep the title block, trim its padding. */
.mud-dialog .mud-dialog-title { padding: 14px 20px 10px; }
/* Body: less padding, and never taller than the viewport. */
.mud-dialog .mud-dialog-content {
padding: 12px 20px 16px;
max-height: calc(100vh - 200px);
overflow-y: auto;
}
/* Halve the vertical gutter between grid rows (horizontal gutter untouched,
so columns keep breathing room). */
.mud-dialog .mud-grid-item { padding-top: 7px !important; padding-bottom: 7px !important; }
/* A nested grid inside a section shouldn't add a second layer of padding. */
.mud-dialog .mud-grid-item > .mud-grid { margin-top: 0; margin-bottom: 0; }
/* Section label sits close to the fields it introduces. */
.mud-dialog .cms-form-section-label { margin-bottom: 6px; }
/* Footer: compact, with a divider so it reads as a distinct bar. */
.mud-dialog .mud-dialog-actions {
padding: 10px 20px;
border-top: 1px solid var(--mud-palette-lines-default);
margin: 0;
}
/* Uploader card inside a dialog: trim padding to match the tighter rhythm. */
.mud-dialog .cms-media-item { padding: 12px; }
.mud-dialog .cms-media-title { margin-bottom: 8px; padding-bottom: 6px; }
/* Helper/validation text shouldn't reserve a full line when empty. */
.mud-dialog .mud-input-helper-text:empty { display: none; }
/* Switch rows: no stray margins that push the panel open. */
.mud-dialog .mud-switch { margin-left: 0; margin-right: 0; }
/* Alerts inside dialogs: compact. */
.mud-dialog .mud-alert { padding: 8px 12px; }
/* ---- /Error page: plain CSS, must render without the Blazor circuit ------ */
.cms-error-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: var(--mud-palette-background, #0a0f1e);
}
.cms-error-card {
width: 100%;
max-width: 560px;
padding: 28px;
border: 1px solid var(--mud-palette-lines-default, #232c40);
border-radius: 14px;
background: var(--mud-palette-surface, #131a2c);
color: var(--mud-palette-text-primary, #e7ecf6);
text-align: center;
}
.cms-error-badge {
width: 46px; height: 46px; margin: 0 auto 14px;
display: grid; place-items: center;
border-radius: 50%;
font-size: 24px; font-weight: 800;
background: color-mix(in srgb, var(--mud-palette-error, #f87171) 18%, transparent);
color: var(--mud-palette-error, #f87171);
}
.cms-error-card h1 { margin: 0 0 8px; font-size: 22px; }
.cms-error-card p { margin: 0 0 10px; color: var(--mud-palette-text-secondary, #93a0b6); font-size: 14px; }
.cms-error-meta code {
font-family: ui-monospace, Consolas, monospace;
font-size: 12px;
padding: 2px 6px; border-radius: 4px;
background: var(--mud-palette-background-gray, #0f1526);
}
.cms-error-detail {
text-align: left; max-height: 260px; overflow: auto;
font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
padding: 12px; border-radius: 8px; margin: 12px 0;
background: var(--mud-palette-background-gray, #0f1526);
border: 1px solid var(--mud-palette-lines-default, #232c40);
white-space: pre-wrap;
}
.cms-error-link {
display: inline-block; margin-top: 8px;
color: var(--mud-palette-primary, #d5af64); font-weight: 600; text-decoration: none;
}
.cms-error-link:hover { text-decoration: underline; }
/* Uploader: honour a reduced-motion preference — the switch still works, it just
arrives instead of travelling. */
@media (prefers-reduced-motion: reduce) {
.cms-upload-modes::before { transition: none; }
.cms-upload-mode { transition: none; }
.cms-upload-pane.is-switching { animation: none; }
.cms-upload-pane { transition: none; }
}