/* Shared presentation for native MudBlazor workspaces. Public CMS designs are independent.
   Keep data surfaces opaque enough to read; blur belongs to the shell, never to form values. */
.al-glass-shell {
    --al-edge: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-divider));
    --al-highlight: rgba(255, 255, 255, .88);
    --al-shade: rgba(28, 62, 69, .10);
    --al-soft-shadow: 8px 8px 24px var(--al-shade), -5px -5px 18px var(--al-highlight);
    --al-panel: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent);
    --al-glass: color-mix(in srgb, var(--mud-palette-surface) 87%, transparent);
    --al-radius: 18px;
    min-inline-size: 0;
    background: var(--mud-palette-background);
    background-image: radial-gradient(ellipse at 92% 0%, color-mix(in srgb, var(--mud-palette-primary) 9%, transparent), transparent 42rem),
        radial-gradient(ellipse at 8% 20%, rgba(197, 138, 50, .055), transparent 36rem);
}
html[data-cc-theme="dark"] .al-glass-shell,
.al-glass-shell[data-al-theme="dark"] {
    --al-highlight: rgba(113, 155, 165, .07);
    --al-shade: rgba(0, 7, 14, .32);
}
.al-glass-shell :where(.mud-main-content, .mud-container, .mud-grid-item, .mud-stack,
    .cc-catalog-tab-panel, .cc-content-layout, .cc-catalog-panel, .cc-catalog-table-wrap) {
    min-inline-size: 0;
}
.al-glass-shell .arta-main { background: transparent; }
.al-glass-shell .al-glass-header.mud-appbar,
.al-glass-shell .al-glass-nav {
    background: var(--al-glass) !important;
    border: 1px solid var(--al-edge);
    box-shadow: inset 0 1px 0 var(--al-highlight), 0 8px 28px var(--al-shade);
}
.al-glass-shell .al-glass-header.mud-appbar { border-width: 0 0 1px; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .al-glass-shell .al-glass-header.mud-appbar,
    .al-glass-shell .al-glass-nav {
        background: var(--al-glass) !important;
        -webkit-backdrop-filter: blur(18px) saturate(115%);
        backdrop-filter: blur(18px) saturate(115%);
    }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .al-glass-shell .al-glass-header.mud-appbar,
    .al-glass-shell .al-glass-nav { background: var(--mud-palette-surface) !important; }
}
.al-glass-shell .al-glass-panel,
.al-glass-shell .mud-paper.mud-paper-outlined {
    min-inline-size: 0;
    max-inline-size: 100%;
    border-color: var(--al-edge);
    border-radius: var(--al-radius);
    background: var(--al-panel);
    box-shadow: var(--al-soft-shadow), inset 0 1px 0 var(--al-highlight);
}
/* Nested panels organize a form; avoid stacking several competing raised shadows. */
.al-glass-shell .mud-paper-outlined .mud-paper-outlined {
    box-shadow: inset 0 1px 0 var(--al-highlight);
}
.al-glass-shell .al-glass-nav { border-radius: 20px; }
.al-glass-shell .al-glass-nav .mud-nav-link {
    border-radius: 12px;
    margin-block: 3px;
    min-block-size: 42px;
}
.al-glass-shell .al-glass-nav .mud-nav-link.active {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
    box-shadow: inset 0 1px 0 var(--al-highlight), 0 3px 8px var(--al-shade);
    font-weight: 700;
}
.al-glass-shell .al-glass-drawer {
    border-inline-end: 1px solid color-mix(in srgb, var(--mud-palette-drawer-text) 16%, transparent) !important;
    box-shadow: -6px 0 28px rgba(0, 15, 29, .14) !important;
}
.al-glass-shell .mud-button-root:not(.mud-icon-button) {
    border-radius: 12px;
    min-block-size: 38px;
    transition: box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.al-glass-shell .mud-button-filled:not(:disabled):not(.mud-disabled),
.al-glass-shell .mud-button-outlined:not(:disabled):not(.mud-disabled) {
    box-shadow: 3px 4px 10px var(--al-shade), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.al-glass-shell .mud-button-outlined.mud-button-outlined-default:not(:disabled):not(.mud-disabled) {
    background: color-mix(in srgb, var(--mud-palette-surface) 88%, var(--mud-palette-background));
    border-color: var(--mud-palette-lines-inputs);
}
@media (hover: hover) {
    .al-glass-shell .mud-button-root:not(:disabled):not(.mud-disabled):hover {
        box-shadow: 0 5px 14px var(--al-shade), inset 0 1px 0 rgba(255, 255, 255, .20);
    }
}
.al-glass-shell .mud-button-root:not(:disabled):not(.mud-disabled):active {
    box-shadow: inset 2px 2px 5px var(--al-shade);
}
.al-glass-shell .mud-button-root:focus-visible,
.al-glass-shell .mud-nav-link:focus-visible,
.al-glass-shell .mud-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}
.al-glass-shell .mud-input-outlined {
    border-radius: 12px;
    background: var(--mud-palette-surface);
}
.al-glass-shell .mud-input-outlined:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}
.al-glass-shell .mud-table { border-radius: 14px; }
.al-glass-shell .mud-table-container { max-inline-size: 100%; }
.al-glass-shell [data-testid="content-preview-frame"] {
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 38rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
    background: var(--mud-palette-surface);
}
.al-glass-shell .mud-table-head {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}
.al-glass-shell .mud-table-cell { border-color: var(--mud-palette-divider); }
.al-glass-shell .mud-table :where(th, td) { font-variant-numeric: tabular-nums; }
/* Dialogs and menus render in a MudBlazor portal outside the shell. Their content stays opaque. */
body:has(.al-glass-shell) :where(.mud-dialog, .mud-popover) {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 18px;
    background: var(--mud-palette-surface);
    box-shadow: 0 18px 60px rgba(0, 18, 30, .20);
}
body:has(.al-glass-shell) .mud-dialog :where(.mud-button-root, .mud-input-outlined) { border-radius: 12px; }
@media (max-width: 599.98px) {
    .al-glass-shell { --al-radius: 14px; --al-soft-shadow: 0 4px 14px var(--al-shade); }
    .al-glass-shell .mud-table-container { overflow-x: auto; }
    .al-glass-shell .al-glass-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .al-glass-shell td.mud-table-cell[data-label="عملیات"] { flex-direction: column; align-items: stretch; gap: 4px; }
    .al-glass-shell td.mud-table-cell[data-label="عملیات"]::before { white-space: nowrap; flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .al-glass-shell .mud-button-root { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
    .al-glass-shell { --al-panel: var(--mud-palette-surface); --al-glass: var(--mud-palette-surface); background-image: none; }
    .al-glass-shell :where(.al-glass-header, .al-glass-nav) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (forced-colors: active) {
    .al-glass-shell { background: Canvas; }
    .al-glass-shell :where(.mud-paper, .mud-appbar, .mud-button-root),
    body:has(.al-glass-shell) .mud-dialog {
        background: Canvas !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .al-glass-shell :where(.mud-paper, .mud-nav-link.active) { border: 1px solid CanvasText; }
}
@media print {
    .al-glass-shell {
        --mud-palette-background: #ffffff;
        --mud-palette-surface: #ffffff;
        --mud-palette-text-primary: #182b34;
        --mud-palette-text-secondary: #455a64;
        --mud-palette-primary: #14675f;
        --mud-palette-secondary: #805b20;
        --mud-palette-info: #285a8a;
        --mud-palette-success: #226646;
        --mud-palette-warning: #805013;
        --mud-palette-error: #a52a3e;
        --mud-palette-divider: #788c91;
        --mud-palette-appbar-text: #182b34;
        --cc-ink: #182b34;
        --cc-ink-soft: #455a64;
        --cc-surface: #ffffff;
        color: #182b34;
        background: white;
        background-image: none;
        color-scheme: light;
    }
    .al-glass-shell :where(.mud-paper, .mud-appbar, .mud-button-root) {
        box-shadow: none !important;
        background: white !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .al-glass-shell .mud-button-root { color: #182b34 !important; }
}