/* SuperAdmin "glass" theme — see Components/Layout/SuperAdminGlassLayout.razor.
   Everything is scoped to .sa-glass-shell (or :root:has(.sa-glass-shell) for elements
   MudBlazor renders outside the layout, like dialogs and menus), so the classic look and
   every other panel are untouched. */

:root:has(.sa-glass-shell) body {
    background: #0a0920;
    color: #f2f0ff;
}

.sa-glass-shell {
    --glass-bg: rgba(255, 255, 255, .07);
    --glass-bg-strong: rgba(255, 255, 255, .11);
    --glass-border: rgba(255, 255, 255, .16);
    --glass-blur: blur(22px) saturate(170%);
    --accent-1: #9d8cff;
    --accent-2: #34e0c8;
    --accent-3: #ff8fb1;

    position: relative;
    min-height: 100vh;
    color: #f2f0ff;
    isolation: isolate;
    overflow-x: clip;
}

/* ---------- aurora background ---------- */
.sa-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #0a0920;
    overflow: hidden;
}

/* ---------- floating top bar ---------- */
.sa-topbar {
    position: sticky;
    top: 14px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 18px;
    width: min(1440px, calc(100% - 28px));
    margin: 14px auto 0;
    padding: 10px 14px;
    border-radius: 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.sa-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    flex-shrink: 0;
}

.sa-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--accent-1);
}

.sa-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.sa-brand-text strong { font-size: 1rem; font-weight: 800; }
.sa-brand-text small { font-size: .7rem; opacity: .65; }

.sa-nav {
    display: flex;
    gap: 6px;
    flex: 1;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
}

.sa-nav::-webkit-scrollbar { display: none; }

.sa-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    color: rgba(242, 240, 255, .7);
    text-decoration: none;
    font-weight: 600;
    font-size: .88rem;
    white-space: nowrap;
    transition: background .2s, color .2s, transform .2s;
}

.sa-pill:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.sa-pill.active {
    color: #fff;
    background: rgba(157, 140, 255, .55);
}

.sa-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sa-actions form { margin: 0; }

.sa-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.sa-icon-btn:hover { background: rgba(255, 255, 255, .18); transform: translateY(-1px); }

.sa-user { display: flex; align-items: center; gap: 9px; padding: 0 6px; }
.sa-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: var(--accent-3);
}
.sa-user-text { display: flex; flex-direction: column; line-height: 1.15; }
.sa-user-text strong { font-size: .85rem; }
.sa-user-text small { font-size: .7rem; opacity: .65; }

@media (max-width: 900px) {
    .sa-topbar { flex-wrap: wrap; }
    .sa-nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
    .sa-user-text, .sa-brand-text small { display: none; }
}

.sa-main {
    width: min(1440px, calc(100% - 28px));
    margin: 22px auto 60px;
}

/* ---------- glass surfaces ---------- */
/* Only the big top-level surfaces get the real backdrop blur — stacking blur on every nested
   paper is very expensive to paint (especially without a GPU) and looks the same. */
.sa-glass-shell .mud-card,
.sa-glass-shell .mud-table-container {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.sa-glass-shell .mud-paper,
.sa-glass-shell .mud-card,
.sa-glass-shell .mud-simple-table,
.sa-glass-shell .mud-table-container,
.sa-glass-shell .mud-expansion-panel {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border);
    border-radius: 22px !important;
    color: #f2f0ff;
}

.sa-glass-shell .mud-card { transition: transform .25s, background .25s; }
.sa-glass-shell .mud-card:hover {
    transform: translateY(-4px);
    background: var(--glass-bg-strong) !important;
}

/* page header */
.sa-glass-shell .page-header {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 26px 30px;
    color: #fff;
    background: rgba(157, 140, 255, .22) !important;
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.sa-glass-shell .page-header-icon {
    background: var(--accent-1);
}

/* stat cards */
.sa-glass-shell .stat-card {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border);
    border-radius: 22px !important;
    position: relative;
    overflow: hidden;
    transition: transform .25s, background .25s;
}

.sa-glass-shell .stat-card:hover { transform: translateY(-4px); background: var(--glass-bg-strong) !important; }
.sa-glass-shell .stat-card .mud-text-secondary { color: rgba(242, 240, 255, .62) !important; }
.sa-glass-shell .stat-card-icon {
    border-radius: 50%;
}
.sa-glass-shell .stat-card-icon.mud-primary   { background: #7c5cff; }
.sa-glass-shell .stat-card-icon.mud-secondary { background: #12c8b1; }
.sa-glass-shell .stat-card-icon.mud-tertiary  { background: #ff6fa5; }
.sa-glass-shell .stat-card-icon.mud-success   { background: #22c97f; }
.sa-glass-shell .stat-card-icon.mud-warning   { background: #f5a623; }
.sa-glass-shell .stat-card-icon.mud-error     { background: #ff4d63; }
.sa-glass-shell .stat-card-icon.mud-default   { background: #5b6086; }

/* tables */
.sa-glass-shell .mud-table { background: transparent !important; }
.sa-glass-shell .mud-table-container { overflow: hidden; }
.sa-glass-shell .mud-table-root .mud-table-head .mud-table-cell {
    background: rgba(255, 255, 255, .06);
    color: rgba(242, 240, 255, .8);
    font-weight: 700;
    border-bottom: 1px solid var(--glass-border);
}
.sa-glass-shell .mud-table-root .mud-table-body .mud-table-cell { border-bottom: 1px solid rgba(255, 255, 255, .07); color: #f2f0ff; }
.sa-glass-shell .mud-table-hover .mud-table-body .mud-table-row:hover { background: rgba(157, 140, 255, .14); }
.sa-glass-shell .mud-table-pagination { color: rgba(242, 240, 255, .7); }

/* tabs, chips, alerts, progress */
.sa-glass-shell .mud-tabs { background: transparent; }
.sa-glass-shell .mud-tabs-toolbar {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 4px;
    backdrop-filter: var(--glass-blur);
}
.sa-glass-shell .mud-tab { border-radius: 999px; color: rgba(242, 240, 255, .7); }
.sa-glass-shell .mud-tab.mud-tab-active { color: #fff; background: rgba(157, 140, 255, .28); }
.sa-glass-shell .mud-tab-slider { display: none; }
.sa-glass-shell .mud-chip { backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .12); font-weight: 600; }
.sa-glass-shell .mud-alert {
    border-radius: 18px;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}
.sa-glass-shell .mud-progress-linear { border-radius: 99px; background: rgba(255, 255, 255, .1); }

/* buttons */
.sa-glass-shell .mud-button-root { border-radius: 999px; text-transform: none; font-weight: 700; letter-spacing: 0; }
.sa-glass-shell .mud-button-filled-primary {
    background: #7c5cff !important;
    color: #fff;
}
.sa-glass-shell .mud-button-filled-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.sa-glass-shell .mud-button-outlined {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .28) !important;
    backdrop-filter: blur(8px);
}
.sa-glass-shell .mud-button-outlined:hover { background: rgba(255, 255, 255, .14); }
.sa-glass-shell .mud-button-text:hover { background: rgba(255, 255, 255, .1); }
.sa-glass-shell .mud-icon-button:hover { background: rgba(255, 255, 255, .12); }

/* text colours that the light theme hard-codes */
.sa-glass-shell .mud-typography-caption.mud-secondary-text,
.sa-glass-shell .mud-text-secondary { color: rgba(242, 240, 255, .62) !important; }

/* ---------- loader pieces re-tinted for the dark glass ---------- */
.sa-glass-shell .busy-spinner { border-color: rgba(255, 255, 255, .2); border-top-color: var(--accent-2); }
.sa-glass-shell .page-boot { min-height: 280px; }
:root:has(.sa-glass-shell) .busy-overlay { background: rgba(8, 6, 30, .5); }
:root:has(.sa-glass-shell) .busy-toast { background: rgba(124, 92, 255, .9); backdrop-filter: blur(12px); }

/* ---------- dialogs, menus, popovers, snackbars (rendered outside the shell) ---------- */
:root:has(.sa-glass-shell) .mud-dialog {
    background: rgba(24, 20, 66, .78);
    color: #f2f0ff;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 26px;
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
}
:root:has(.sa-glass-shell) .mud-dialog .mud-dialog-title { font-weight: 800; }
:root:has(.sa-glass-shell) .mud-overlay-dialog .mud-overlay-scrim { background: rgba(6, 5, 24, .55); backdrop-filter: blur(6px); }
:root:has(.sa-glass-shell) .mud-popover .mud-paper,
:root:has(.sa-glass-shell) .mud-popover.mud-popover-open {
    background: rgba(28, 24, 76, .82) !important;
    color: #f2f0ff;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 18px;
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
}
:root:has(.sa-glass-shell) .mud-list-item:hover,
:root:has(.sa-glass-shell) .mud-menu-item:hover { background: rgba(157, 140, 255, .2); }
:root:has(.sa-glass-shell) .mud-snackbar { backdrop-filter: blur(16px); border-radius: 16px; }
:root:has(.sa-glass-shell) .mud-input-outlined .mud-input-outlined-border { border-color: rgba(255, 255, 255, .25); border-radius: 14px; }
:root:has(.sa-glass-shell) .mud-input-control > .mud-input-control-input-container > .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border { border-color: #9d8cff; border-width: 2px; }


.sa-glass-shell .mud-tabs-tabbar,
.sa-glass-shell .mud-tabs-tabbar-inner,
.sa-glass-shell .mud-tabs-tabbar-wrapper { background: transparent !important; }

/* ---------- readability pass ---------- */
/* Comfortable base size and line height for Persian text on a dark, blurred background. */
.sa-glass-shell { font-size: 1rem; line-height: 1.75; }
.sa-glass-shell .mud-typography { line-height: 1.7; }

/* Brighter secondary text (was ~.62 opacity, too faint against the aurora). */
.sa-glass-shell .stat-card .mud-text-secondary,
.sa-glass-shell .mud-text-secondary,
.sa-glass-shell .mud-typography-caption { color: rgba(246, 245, 255, .8) !important; }

/* Page-header subtitle was teal-on-violet; make it plain and legible. */
.sa-glass-shell .page-header .mud-typography-body2 { color: rgba(255, 255, 255, .88) !important; font-size: 1rem; }
.sa-glass-shell .page-header .mud-typography-h5 { font-size: 1.6rem; }

/* Bigger, calmer stat numbers with plain labels above them. */
.sa-glass-shell .stat-card { padding: 6px 4px; }
.sa-glass-shell .stat-card .mud-typography-caption { font-size: .95rem; font-weight: 700 !important; }
.sa-glass-shell .stat-card .mud-typography-h4 { font-size: 2.1rem; }

/* Tables: larger text and taller rows. */
.sa-glass-shell .mud-table-root .mud-table-cell { font-size: .97rem; padding: 14px 16px; }

/* Visible keyboard focus everywhere. */
.sa-glass-shell a:focus-visible,
.sa-glass-shell button:focus-visible,
.sa-glass-shell .mud-button-root:focus-visible { outline: 3px solid #34e0c8; outline-offset: 2px; }

/* Rings and skeletons on glass. */
.sa-glass-shell .sa-ring .mud-progress-circular-circle { stroke-linecap: round; }
.sa-glass-shell .mud-skeleton { background: rgba(255, 255, 255, .08); }

/* ---------- flat: no shadows anywhere in the glass theme ---------- */
/* MudBlazor adds its own elevation shadows to papers, buttons, dialogs, menus and chips. */
.sa-glass-shell *,
:root:has(.sa-glass-shell) .mud-dialog,
:root:has(.sa-glass-shell) .mud-popover,
:root:has(.sa-glass-shell) .mud-snackbar,
:root:has(.sa-glass-shell) .mud-overlay-dialog * {
    box-shadow: none !important;
    text-shadow: none !important;
}