/* ============================================================================
   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;
    /* 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 {
    width: 100%;
    max-width: 300px;
}

/* 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);
}
.cms-upload-preview .cms-upload-del {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
}
.cms-upload-empty-ico { opacity: 0.28; }

/* ---- 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: var(--cms-radius);
    box-shadow: var(--cms-shadow-sm);
    padding: 20px;
    height: 100%;
}

.cms-tool-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cms-tool-ico {
    width: 42px; height: 42px; border-radius: 11px;
    display: grid; place-items: center; flex: 0 0 auto; color: #fff;
}
.cms-tool-ico .mud-icon-root { font-size: 22px; }
.cms-tool-title { font-size: 15px; font-weight: 650; color: var(--mud-palette-text-primary); }
.cms-tool-sub { font-size: 12.5px; color: var(--mud-palette-text-secondary); margin-top: 1px; }

/* ---- 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)); }
}