/* ============================================================================
   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, #4f46e5, #8b5cf6);
    --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: keep it a tidy fixed-width card everywhere so the preview,
   delete button, switch and drop-zone always align (not full dialog width). */
.cms-uploader {
    /* fills its tile — the media grid controls the column width */
    width: 100%;
}

/* 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: 122px;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--cms-radius-sm);
    background: var(--mud-palette-background-gray);
}

/* ---- 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 ---------------------------------------------------- */

.cms-dropzone {
    border: 1.5px dashed var(--mud-palette-lines-inputs) !important;
    border-radius: var(--cms-radius) !important;
    background: var(--mud-palette-background-gray) !important;
    transition: border-color .12s ease, background-color .12s ease;
}
.cms-dropzone:hover {
    border-color: var(--mud-palette-primary) !important;
    background: var(--cms-accent-soft) !important;
}
.cms-dropzone.mud-border-primary { border-color: var(--mud-palette-primary) !important; background: var(--cms-accent-soft) !important; }

.cms-dropzone-ico {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cms-accent-soft);
    color: var(--mud-palette-primary);
}
.cms-dropzone-ico .mud-icon-root { font-size: 26px; }

/* 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,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 8 8" fill="%23475569"><path d="M4.03 0c-2.53 0-4.03 3-4.03 3s1.5 3 4.03 3c2.47 0 3.97-3 3.97-3s-1.5-3-3.97-3zm-.03 1c1.11 0 2 .9 2 2 0 1.11-.89 2-2 2-1.1 0-2-.89-2-2 0-1.1.9-2 2-2zm0 1c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1c0-.1-.04-.19-.06-.28-.08.16-.24.28-.44.28-.28 0-.5-.22-.5-.5 0-.2.12-.36.28-.44-.09-.03-.18-.06-.28-.06z" transform="translate(0 1)"/></svg>') !important;
}
.grid-mvc .grid-button-edit,
.grid-mvc .grid-button-header-edit {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 8 8" fill="%23475569"><path d="M6 0l-1 1 2 2 1-1-2-2zm-2 2l-4 4v2h2l4-4-2-2z"/></svg>') !important;
}
.grid-mvc .grid-button-delete,
.grid-mvc .grid-button-header-delete {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 8 8" fill="%23b91c1c"><path d="M3 0c-.55 0-1 .45-1 1h-1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1h-1c0-.55-.45-1-1-1h-1zm-2 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19v-4.81h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1z"/></svg>') !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,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 8 8" fill="%23ffffff"><path d="M3 0c-.55 0-1 .45-1 1h-1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1h-1c0-.55-.45-1-1-1h-1zm-2 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19v-4.81h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1z"/></svg>') !important;
}
.grid-mvc .grid-button-excel {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 8 8" fill="%23475569"><path d="M3 0v3h-2l3 3 3-3h-2v-3h-2zm-3 7v1h8v-1h-8z"/></svg>') !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,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 8 8" fill="%23ffffff"><path d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"/></svg>') !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,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="%2394a3b8"><path d="M1.5 2h13a.5.5 0 0 1 .4.8L10 9.2V14a.5.5 0 0 1-.75.43l-2-1.2A.5.5 0 0 1 7 12.8V9.2L1.1 2.8A.5.5 0 0 1 1.5 2z"/></svg>') !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 { 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; }

/* ---- Redis auto-refresh popover ------------------------------------------ */
/* refresh + caret sit together as one segmented control */
.cms-ar-wrap { position: relative; display: inline-flex; align-items: center; gap: 0; }
.cms-ar-refresh, .cms-ar-caret {
    display: inline-flex; align-items: center; justify-content: center; height: 32px;
    border: 0; background: transparent; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.cms-ar-refresh { width: 34px; border-radius: 8px 0 0 8px; color: var(--mud-palette-primary); }
.cms-ar-caret   { width: 26px; border-radius: 0 8px 8px 0; color: var(--mud-palette-text-secondary); }
.cms-ar-refresh:hover, .cms-ar-caret:hover { background: var(--mud-palette-action-default-hover); }
.cms-ar-caret:hover { color: var(--mud-palette-text-primary); }

.cms-autorefresh {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 2001; min-width: 264px; padding: 18px 20px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .28);
    animation: cms-ar-in .14s ease-out;
}
.cms-autorefresh::after {                    /* little caret pointing at the button */
    content: ""; position: absolute; top: -6px; right: 12px; width: 11px; height: 11px; transform: rotate(45deg);
    background: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default); border-top: 1px solid var(--mud-palette-lines-default);
}
@keyframes cms-ar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cms-autorefresh .mud-switch { margin: 0; }
.cms-ar-title { font-size: 15px; font-weight: 650; }
.cms-ar-lbl { font-size: 13px; color: var(--mud-palette-text-secondary); }
.cms-ar-val { font-size: 13.5px; font-weight: 700; }
.cms-ar-icobtn {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border: 0; border-radius: 7px; background: transparent; cursor: pointer; color: var(--mud-palette-text-secondary);
    transition: background .15s ease, color .15s ease;
}
.cms-ar-icobtn:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-primary); }
.cms-ar-icobtn.confirm { color: var(--mud-palette-primary); }
.cms-ar-input {
    width: 74px; padding: 6px 8px; border-radius: 6px; font: inherit; font-size: 13px;
    background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-primary); outline: none;
}
.cms-ar-input::-webkit-outer-spin-button, .cms-ar-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cms-ar-input { -moz-appearance: textfield; }

/* ---- Redis list / tree view toggle + tree rows --------------------------- */
.cms-viewtoggle { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px;
    background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default); }
.cms-viewtoggle button {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px;
    border: 0; border-radius: 6px; background: transparent; cursor: pointer;
    color: var(--mud-palette-text-secondary); transition: background .15s ease, color .15s ease;
}
.cms-viewtoggle button:hover { color: var(--mud-palette-text-primary); }
.cms-viewtoggle button.active { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }

.cms-tree-folder {
    display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer;
    font-size: 13.5px; font-weight: 650; color: var(--mud-palette-text-primary);
}
.cms-tree-folder:hover { background: var(--mud-palette-action-default-hover); }
.cms-tree-folder-ico { color: var(--mud-palette-warning); }
.cms-tree-folder-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-tree-pct, .cms-tree-count {
    flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}
.cms-tree-count { min-width: 54px; text-align: right; }
.cms-key-row.cms-tree-child { padding-left: 30px; }
.cms-tree-more { padding: 6px 10px 10px 30px; font-size: 12px; color: var(--mud-palette-text-secondary); }

/* index / not-yet-resolved key badges */
.cms-key-badge.index   { background: #0f766e; }
.cms-key-badge.pending { background: var(--mud-palette-action-disabled-background); color: var(--mud-palette-text-secondary); }

/* ---- Redis filter bar (pattern / value search) --------------------------- */
/* full-width row above the browser, like RedisInsight: [toggle] [type] [search ->] */
.cms-filterbar {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px;
    margin-bottom: 12px; padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 12px;
    background: var(--mud-palette-surface);
}
.cms-modetoggle {
    display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px;
    background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default);
}
.cms-modetoggle button {
    display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 36px;
    border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    color: var(--mud-palette-text-secondary); transition: background .15s ease, color .15s ease;
}
.cms-modetoggle button:hover { color: var(--mud-palette-text-primary); background: var(--mud-palette-action-default-hover); }
.cms-modetoggle button.active { background: #7dd3fc; color: #0b3a4a; }
.cms-modetoggle button.active .mud-icon-root { color: #0b3a4a; }
.cms-filter-select { flex: 0 0 auto; width: 200px; }
.cms-filter-input { flex: 1 1 auto; min-width: 260px; }
/* taller, larger-text search field sitting right beside the type dropdown */
.cms-filterbar .cms-filter-input .mud-input.mud-input-outlined,
.cms-filterbar .cms-filter-select .mud-input.mud-input-outlined { height: 44px; }
.cms-filterbar .cms-filter-input input { font-size: 15px; }
.cms-filterbar .cms-filter-input input::placeholder { font-size: 15px; opacity: .75; }
.cms-filterbar .cms-filter-select .mud-input-slot { font-size: 14.5px; }
/* keep the dropdown list readable — no wrapped, squeezed option text */
.cms-filter-select .mud-select-input input { white-space: nowrap; }
.mud-popover .mud-list-item-text, .mud-popover .mud-list-item { white-space: nowrap; }

/* skeleton placeholder for a stat-card number while counts load */
.summary-card .sc-value .sc-skeleton { border-radius: 8px; margin-top: 4px; }

/* key-type dropdown: colour dot matching the key chip colours */
.cms-typeopt { display: inline-flex; align-items: center; gap: 10px; }
.cms-typedot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #64748b; }
.cms-typedot.placeholder { background: transparent; }

/* selected key type shows its colour dot in the closed field too */
.cms-filter-select.has-dot { position: relative; }
.cms-filter-select.has-dot::before {
    content: ""; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 50%; background: var(--dot, #64748b);
    pointer-events: none; z-index: 2;
}
.cms-filter-select.has-dot input,
.cms-filter-select.has-dot .mud-input-slot { padding-left: 26px !important; }

/* ---- Sidebar screen search ----------------------------------------------- */
.cms-navsearch { padding: 10px 12px 6px; }
/* compact, rounded search field that sits on the drawer background */
.cms-navsearch .mud-input.mud-input-outlined {
    height: 34px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
}
.cms-navsearch .mud-input-outlined-border {
    border-radius: 9px;
    border-color: var(--mud-palette-lines-default) !important;
}
.cms-navsearch .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs) !important;
}
.cms-navsearch input { font-size: 13px; }
.cms-navsearch input::placeholder { color: var(--mud-palette-text-secondary); opacity: .85; }
.cms-navsearch .mud-input-adornment .mud-icon-root { font-size: 17px; color: var(--mud-palette-text-secondary); }
.cms-navresults { padding: 0 6px 10px; }
.cms-navresults .mud-nav-link { border-radius: 8px; }
.cms-navresult-group {
    margin-left: auto; padding-left: 10px; font-size: 11px; font-weight: 600;
    color: var(--mud-palette-text-secondary); white-space: nowrap;
}
.cms-navresult-empty { padding: 10px 14px; font-size: 13px; color: var(--mud-palette-text-secondary); }

/* ---- Uploader: EJE look & feel (segmented switcher, compact preview) ------ */
.cms-upload-modes-row { display: flex; margin-bottom: 10px; }
.cms-upload-modes {
    display: inline-flex; margin-inline-start: auto; padding: 2px; gap: 2px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 999px;
    background: var(--mud-palette-background-gray);
}
.cms-upload-mode {
    border: 0; background: transparent; color: var(--mud-palette-text-secondary);
    font: inherit; font-size: 11px; font-weight: 600; line-height: 1;
    padding: 4px 10px; border-radius: 999px; cursor: pointer;
}
.cms-upload-mode:hover { color: var(--mud-palette-text-primary); }
.cms-upload-mode.active { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }

.cms-upload-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.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 { display: flex; }

.cms-upload-actions { display: flex; align-items: center; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.cms-upload-busy {
    display: flex; align-items: center; justify-content: center; gap: 10px; height: 122px;
    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);
}
/* dropzone sizing to match the reference */
.cms-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; text-align: center; min-height: 132px; padding: 12px; width: 100%;
}

/* video / file preview variants of the uploader preview box */
.cms-upload-preview-video video { width: 100%; max-height: 100%; border-radius: 6px; }
.cms-upload-preview-file { flex-direction: column; gap: 6px; }
.cms-upload-preview-file .cms-upload-filename { font-size: 12.5px; word-break: break-all; text-align: center; }

/* ---- Uploader mode switch: sliding pill (as in the CarCheck console) ------
   The track has a fixed min-width and both labels flex to equal halves, so a
   50%-wide pill lands exactly on either side — that alignment is what makes the
   slide read correctly. */
.cms-upload-modes { position: relative; min-width: 118px; overflow: hidden; }
.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);
    /* gentle overshoot that settles, matching the console's movement curve */
    transition: transform .24s cubic-bezier(.18, 1.22, .3, 1);
}
.cms-upload-modes.is-url::before { transform: translateX(100%); }
/* translateX is physical, so RTL has to travel the other way */
[dir="rtl"] .cms-upload-modes.is-url::before { transform: translateX(-100%); }

.cms-upload-modes .cms-upload-mode {
    /* min-width:0 matters: flex items default to min-content, and "Upload" is wider than
       "URL", so without it the two halves stop being equal and the 50% pill overhangs. */
    position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
    text-align: center; white-space: nowrap; padding: 5px 11px;
    /* matches the pill, so the label turns as the pill arrives rather than before it */
    transition: color .24s ease;
}
.cms-upload-modes .cms-upload-mode.active { background: transparent; color: var(--mud-palette-primary-text); }

@media (prefers-reduced-motion: reduce) {
    .cms-upload-modes::before, .cms-upload-mode { transition: none; }
    .cms-upload-pane.is-switching { animation: none; }
}

/* The dropzone / URL field / preview cross-fade as they swap — but only after a real
   switch (is-switching), so a card built inside a dialog or a freshly-opened tab
   arrives already at rest instead of animating in. */
.cms-upload-pane.is-switching { animation: cms-pane-in .26s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes cms-pane-in {
    from { opacity: 0; transform: translateY(6px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cms-upload-modes::before { transition: none; }
    .cms-upload-pane { animation: none; }
}

/* video preview needs more room than a thumbnail box */
.cms-uploader:has(.cms-upload-preview-video) { max-width: none; }
.cms-upload-preview-video { height: auto; min-height: 160px; max-height: 320px; }
.cms-upload-preview-video video { width: 100%; max-height: 300px; }
/* keep the card height steady across states */
.cms-upload-busy, .cms-upload-preview { min-height: 132px; }

/* uploader header: title on the left, Upload/URL switcher at the far right */
.cms-upload-head { display: flex; align-items: center; gap: 8px; }
.cms-upload-head .cms-upload-modes { margin-inline-start: auto; }

/* URL field inside an uploader: full width, regular weight, smaller text */
.cms-uploader .mud-input-control { width: 100%; }
.cms-uploader .mud-input input {
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: normal;
}

/* ---- Operation users: permission panels + bidder confirmation ------------- */
.cms-perm-panel {
    display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 12px;
    background: var(--mud-palette-background-gray);
}
.cms-perm-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; font-weight: 650; }
.cms-perm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cms-bidder-found, .cms-bidder-confirmed {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface);
}
.cms-bidder-confirmed { border-color: color-mix(in srgb, var(--mud-palette-success) 45%, var(--mud-palette-lines-default)); }
.cms-bidder-name { font-weight: 700; font-size: 14.5px; }
.cms-bidder-meta { font-size: 12.5px; color: var(--mud-palette-text-secondary); }

/* Two chips sharing one grid cell (e.g. the auction type's Asset column). MudChip ships
   its own margins, which stack unevenly inside a dense row — the gap here does the spacing. */
.cms-chip-pair { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cms-chip-pair .mud-chip { margin: 0; }

/* Surplus taxonomy: the allowed-brands tick list. Columns rather than a long single
   column, so a category with 40 brands still fits on one screen. */
.cms-brand-picker {
    display: grid; gap: 2px 18px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    max-height: 420px; overflow-y: auto;
}

/* Read-only JSON payloads (taxonomy snapshots). Scrolls in its own box so a large
   snapshot can't push the dialog wider than the viewport. */
.cms-json-view {
    margin: 0; padding: 14px 16px; border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; line-height: 1.55;
    max-height: 60vh; overflow: auto; white-space: pre;
}

/* Clickable status tiles above a queue grid (AI categorisation queue). Each one is a
   filter, so it gets a pressed state rather than only a hover. */
.cms-stat-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cms-stat-tile {
    flex: 1 1 120px; min-width: 110px; padding: 12px 14px;
    border-radius: 12px; border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface); cursor: pointer; user-select: none;
    transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}
.cms-stat-tile:hover { transform: translateY(-2px); background: var(--mud-palette-background-gray); }
.cms-stat-tile.is-active {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}
.cms-stat-value { font-size: 22px; font-weight: 700; line-height: 1.1; }
.cms-stat-label { font-size: 12px; color: var(--mud-palette-text-secondary); margin-top: 2px; }

/* One-line clamp for long error text inside a dense grid cell; the full text is in the
   tooltip, so nothing is lost. */
.cms-truncate-1 {
    display: block; max-width: 320px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}