/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
   MainLayout.razor.css  (Blazor CSS isolation)
   نکتهٔ مهم: ریشهٔ کامپوننت‌های MudBlazor (MudLayout, MudDrawer, MudNavMenu, MudMainContent, ...)
   صفت scope (b-xxxx) نمی‌گیرد. بنابراین:
   - هر چه به آن ریشه‌ها و فرزندانشان می‌رسد باید یا از یک <div> ساده‌ی همین فایل
     (مثل .nav-scroll-container) با ::deep لنگر بیندازد، یا در app.css (global) باشد.
   - tokens، اسکرول‌کنندهٔ بدنه، Drawer و print در بخش
     «MainLayout (global)» انتهای app.css هستند.
   ============================================================ */

/* ============================================================
   2) Avatar
   ============================================================ */

.account-avatar-image[b-iutzwst3ej] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ============================================================
   3) Drawer shell
   ============================================================ */

.drawer-layout[b-iutzwst3ej] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0; /* کل ارتفاع باقی‌ماندهٔ Drawer را می‌گیرد، بدون وابستگی به height:100% */
    overflow-x: hidden;
    min-height: 0; /* ضروری: بدون آن، فرزند اسکرول‌شونده کوچک نمی‌شود و روی فوتر می‌افتد */
}

/* دستگیرهٔ تغییر عرض: لبهٔ آزاد منو (در RTL سمت چپ، در LTR سمت راست) = inline-end */
.drawer-resize-handle[b-iutzwst3ej] {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 7px;
    z-index: 5;
    cursor: col-resize;
    touch-action: none;
}

    .drawer-resize-handle[b-iutzwst3ej]::after {
        content: "";
        position: absolute;
        top: 50%;
        inset-inline-end: 2px;
        width: 3px;
        height: 42px;
        border-radius: 3px;
        background: rgba(128,128,160,.38);
        transform: translateY(-50%);
        transition: background var(--transition-fast), height var(--transition-fast);
    }

    .drawer-resize-handle:hover[b-iutzwst3ej]::after,
    .drawer-resize-handle:focus-visible[b-iutzwst3ej]::after {
        height: 60px;
        background: var(--mud-palette-primary);
    }

@media (max-width: 959.98px), (pointer: coarse) {
    .drawer-resize-handle[b-iutzwst3ej] {
        display: none;
    }
}

/* ============================================================
   5) Navigation scroll area
   ============================================================ */

.nav-scroll-container[b-iutzwst3ej] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 10px 8px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(128,128,160,.35) transparent;
}

    .nav-scroll-container[b-iutzwst3ej]::-webkit-scrollbar {
        width: 6px;
    }

    .nav-scroll-container[b-iutzwst3ej]::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-scroll-container[b-iutzwst3ej]::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(128,128,160,.35);
    }

        .nav-scroll-container[b-iutzwst3ej]::-webkit-scrollbar-thumb:hover {
            background: rgba(128,128,160,.50);
        }

.nav-divider[b-iutzwst3ej] {
    height: 1px;
    margin: 10px 8px;
    background: var(--mud-palette-divider);
}

/* ============================================================
   6) Navigation links (base)
   ============================================================ */

.nav-scroll-container[b-iutzwst3ej]  .nav-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 42px;
        margin: 3px 0;
        padding: 8px 12px;
        border-radius: var(--radius-md);
        font-size: .88rem;
        font-weight: 600;
        transition: transform var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
    }

        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link .mud-icon-root {
            font-size: 20px;
        }

        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link .mud-nav-link-icon {
            margin-inline-end: 12px;
            opacity: .88;
            transition: transform var(--transition-normal), opacity var(--transition-normal);
        }

        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link .mud-nav-link-text {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link:hover {
            transform: translateY(-1px);
            background: rgba(116,101,220,.10);
            box-shadow: 0 3px 0 rgba(80,70,150,.06);
        }

            .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link:hover .mud-nav-link-icon {
                transform: scale(1.06);
                opacity: 1;
            }

        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link:active {
            transform: translateY(0);
        }

        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link.mud-disabled {
            opacity: .5;
            pointer-events: none;
        }

    /* ============================================================
   7) Dashboard tile
   ============================================================ */

    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-dashboard {
        margin-bottom: 10px;
        font-weight: 800;
        color: var(--mud-palette-text-primary);
        border: 1px solid rgba(89,70,210,.10);
        background: linear-gradient(145deg, #ffffff, #f2f4fc);
        box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.90);
    }

        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-dashboard .mud-nav-link-icon {
            color: var(--mud-palette-primary);
        }

    /* ============================================================
   8) Navigation groups
   ============================================================ */

    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-group {
        position: relative;
        overflow: hidden;
        margin: 11px 0;
        padding: 4px;
        border-radius: var(--radius-lg);
        border: 1px solid rgba(112,105,170,.20);
        background: linear-gradient(145deg, #ffffff, #f4f6ff);
        box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.90);
        transition: box-shadow var(--transition-normal);
    }

        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-group:hover {
            box-shadow: var(--shadow-hover), inset 0 1px 0 rgba(255,255,255,.90);
        }

        /* هدر گروه */
        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-group > .mud-nav-link {
            margin: 0;
            min-height: 43px;
            font-weight: 800;
            border-radius: 12px;
        }

            .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-group > .mud-nav-link:hover {
                background: rgba(255,255,255,.66);
            }

            /* آیکن هدر گروه (کاشی رنگی؛ padding برای این‌که گلیف داخل کاشی بماند) */
            .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-group > .mud-nav-link .mud-nav-link-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                width: 34px;
                height: 34px;
                padding: 7px;
                margin-inline-end: 10px;
                color: #fff;
                border-radius: 10px;
                opacity: 1;
            }

        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-group .mud-collapse-container {
            padding: 3px 4px 5px;
        }

    /* ============================================================
   9) Child links + top-level links (login / register)
   specificity عمداً پایین نگه داشته شده تا حالت active بعداً بتواند آن را override کند
   ============================================================ */

    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-collapse-container .mud-nav-link,
    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-top-link {
        margin-block: 2px;
        border: 1px solid rgba(89,70,210,.10);
        background: linear-gradient(145deg, #ffffff, #f2f4fc);
        box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.90);
    }

        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-collapse-container .mud-nav-link:hover,
        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-top-link:hover {
            border-color: rgba(89,70,210,.24);
            background: linear-gradient(145deg, #ffffff, #eeecff);
            box-shadow: 0 3px 0 rgba(68,76,112,.10), 0 7px 13px rgba(55,64,100,.12), inset 0 1px 0 rgba(255,255,255,1);
        }

        /* ============================================================
   10) Active states
   باید بعد از حالت‌های base/hover بیایند.
   (در نسخهٔ قبلی قبل از آن‌ها بود و background فعال بازنویسی می‌شد؛
   همچنین رنگ متن primary-text بود که روی پس‌زمینهٔ روشن نامرئی است.)
   ============================================================ */

        /* کلاس تکراری (.mud-nav-link.mud-nav-link) عمداً specificity را بالاتر از hover می‌برد
       تا متن سفید روی hover روی پس‌زمینهٔ روشن نیفتد. */
        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-top-link.nav-top-link.active,
        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-top-link.nav-top-link.mud-nav-link-active,
        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-collapse-container .mud-nav-link.mud-nav-link.active,
        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-collapse-container .mud-nav-link.mud-nav-link.mud-nav-link-active,
        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-dashboard.nav-dashboard.active,
        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-dashboard.nav-dashboard.mud-nav-link-active {
            color: #fff;
            border-color: #4b36bf;
            background: linear-gradient(125deg, #7357f2, #4f3bc9);
            box-shadow: 0 3px 0 #39299e, 0 7px 16px rgba(80,57,200,.3);
        }

            .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-top-link.nav-top-link.active .mud-nav-link-icon,
            .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-top-link.nav-top-link.mud-nav-link-active .mud-nav-link-icon,
            .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-collapse-container .mud-nav-link.mud-nav-link.active .mud-nav-link-icon,
            .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-collapse-container .mud-nav-link.mud-nav-link.mud-nav-link-active .mud-nav-link-icon,
            .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-dashboard.nav-dashboard.active .mud-nav-link-icon,
            .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-dashboard.nav-dashboard.mud-nav-link-active .mud-nav-link-icon {
                color: #fff;
            }

/* ============================================================
   11) Group colour themes
   ============================================================ */

.nav-scroll-container[b-iutzwst3ej]  .nav-group-base {
    --group-bg-1: #e4f2ff;
    --group-bg-2: #cce5ff;
    --group-border: #83b9f4;
    --group-ink: #155a9d;
    --group-icon: var(--grad-info);
    --group-icon-shadow: 0 3px 0 #2860ad, 0 5px 10px rgba(52,118,209,.22);
}

.nav-scroll-container[b-iutzwst3ej]  .nav-group-catalog {
    --group-bg-1: #e0fff3;
    --group-bg-2: #c3f4df;
    --group-border: #69d6b1;
    --group-ink: #087754;
    --group-icon: var(--grad-success);
    --group-icon-shadow: 0 3px 0 #087452, 0 5px 10px rgba(20,150,111,.20);
}

.nav-scroll-container[b-iutzwst3ej]  .nav-group-warehouse {
    --group-bg-1: #fff3dc;
    --group-bg-2: #ffe2b7;
    --group-border: #f0b858;
    --group-ink: #9c5700;
    --group-icon: var(--grad-warn);
    --group-icon-shadow: 0 3px 0 #b96c0c, 0 5px 10px rgba(229,138,27,.22);
}

.nav-scroll-container[b-iutzwst3ej]  .nav-group-finance {
    --group-bg-1: #f0eaff;
    --group-bg-2: #ddd3ff;
    --group-border: #a795ff;
    --group-ink: #4a35b5;
    --group-icon: var(--grad-primary);
    --group-icon-shadow: 0 3px 0 #4030a7, 0 5px 10px rgba(89,70,210,.24);
}

.nav-scroll-container[b-iutzwst3ej]  .nav-group-admin {
    --group-bg-1: #ffe8ee;
    --group-bg-2: #ffd1de;
    --group-border: #f58ba5;
    --group-ink: #a52e50;
    --group-icon: var(--grad-danger);
    --group-icon-shadow: 0 3px 0 #ad244b, 0 5px 10px rgba(216,61,104,.22);
}

.nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-base,
.nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-catalog,
.nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-warehouse,
.nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-finance,
.nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-admin {
    background: linear-gradient(130deg, var(--group-bg-1), var(--group-bg-2));
    border-color: var(--group-border);
}

    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-base > .mud-nav-link,
    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-catalog > .mud-nav-link,
    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-warehouse > .mud-nav-link,
    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-finance > .mud-nav-link,
    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-admin > .mud-nav-link {
        color: var(--group-ink);
    }

        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-base > .mud-nav-link .mud-nav-link-icon,
        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-catalog > .mud-nav-link .mud-nav-link-icon,
        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-warehouse > .mud-nav-link .mud-nav-link-icon,
        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-finance > .mud-nav-link .mud-nav-link-icon,
        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-admin > .mud-nav-link .mud-nav-link-icon {
            background: var(--group-icon);
            box-shadow: var(--group-icon-shadow);
        }

/* ============================================================
   12) Drawer footer
   ============================================================ */

.drawer-heading[b-iutzwst3ej],
.drawer-footer[b-iutzwst3ej] {
    /* app.css هنوز قاعدهٔ قدیمی .drawer-footer را دارد (absolute + bottom/left/right: 20px).
       با position: relative آن مقادیر فوتر را ۲۰px جابه‌جا می‌کردند؛ پس صریحاً خنثی می‌شوند. */
    position: relative;
    inset: auto;
    margin: 0;
    border-radius: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto; /* همیشه انتهای Drawer؛ هرگز کوچک یا روی لیست نمی‌افتد */
    gap: 10px;
    min-height: 68px;
    padding: 12px;
    border-top: 1px solid var(--border-soft);
    /* گرادیان روی رنگ مات Drawer تا محتوای زیر آن دیده نشود */
    background: linear-gradient(135deg, rgba(32,169,130,.12), rgba(89,70,210,.08)), var(--mud-palette-drawer-background);
}

.drawer-heading[b-iutzwst3ej] {
    border-top: 0;
    border-bottom: 1px solid var(--border-soft);
}

.drawer-heading-icon[b-iutzwst3ej],
.footer-security-icon[b-iutzwst3ej] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    color: #fff;
    border-radius: 11px;
    background: var(--grad-success);
    box-shadow: 0 3px 0 #11664f;
}

.drawer-heading-copy[b-iutzwst3ej],
.footer-copy[b-iutzwst3ej] {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-width: 0;
    gap: 2px;
    line-height: 1.45;
    text-align: center;
}

    .drawer-heading-copy strong[b-iutzwst3ej],
    .footer-copy strong[b-iutzwst3ej] {
        font-size: .79rem;
        font-weight: 800;
    }

    .drawer-heading-copy small[b-iutzwst3ej],
    .footer-copy small[b-iutzwst3ej] {
        font-size: .68rem;
        opacity: .68;
    }

.footer-status-dot[b-iutzwst3ej] {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #20a982;
    box-shadow: 0 0 0 4px rgba(32,169,130,.12);
}

.theme-dark .drawer-heading[b-iutzwst3ej],
.theme-dark .drawer-footer[b-iutzwst3ej] {
    background: linear-gradient(135deg, rgba(32,169,130,.18), rgba(89,70,210,.14)), #151a26;
}

/* ============================================================
   13) Workspace tabs
   ============================================================ */

.workspace-tabs[b-iutzwst3ej] {
    display: flex;
    align-items: stretch;
    gap: 5px;
    min-height: 48px;
    margin: 0 0 14px;
    padding: 6px 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    scrollbar-width: thin;
    scrollbar-color: rgba(128,128,160,.35) transparent;
}

    .workspace-tabs[b-iutzwst3ej]::-webkit-scrollbar {
        height: 6px;
    }

    .workspace-tabs[b-iutzwst3ej]::-webkit-scrollbar-track {
        background: transparent;
    }

    .workspace-tabs[b-iutzwst3ej]::-webkit-scrollbar-thumb {
        background: rgba(128,128,160,.35);
        border-radius: 10px;
    }

.workspace-tab[b-iutzwst3ej] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 112px;
    max-width: 230px;
    min-height: 40px;
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    background: var(--surface-3);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
}

    .workspace-tab:hover[b-iutzwst3ej] {
        color: var(--mud-palette-text-primary);
        background: var(--mud-palette-action-default-hover);
        transform: translateY(-1px);
    }

.workspace-tab-active[b-iutzwst3ej] {
    color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
    box-shadow: 0 -3px 10px rgba(70,65,130,.06);
}

    .workspace-tab-active:hover[b-iutzwst3ej] {
        color: var(--mud-palette-primary);
        background: var(--mud-palette-surface);
    }

    .workspace-tab-active[b-iutzwst3ej]::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 2px;
        background: var(--mud-palette-primary);
    }

.workspace-tab-select[b-iutzwst3ej] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    height: 100%;
    padding: 0 10px;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: .80rem;
    font-weight: 700;
    text-align: start;
}

    .workspace-tab-select span[b-iutzwst3ej] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.workspace-tab-close[b-iutzwst3ej] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-inline-end: 4px;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    opacity: .65;
    transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

    .workspace-tab-close:hover[b-iutzwst3ej] {
        opacity: 1;
        color: var(--mud-palette-error);
        background: var(--mud-palette-action-default-hover);
    }

    .workspace-tab-select:focus-visible[b-iutzwst3ej],
    .workspace-tab-close:focus-visible[b-iutzwst3ej] {
        z-index: 2;
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: -2px;
    }

/* ============================================================
   14) Dark theme
   ============================================================ */

.theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-dashboard {
    border-color: rgba(166,174,211,.13);
    background: linear-gradient(145deg, rgba(43,52,72,.92), rgba(29,36,53,.96));
    box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.04);
}

    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-dashboard:hover {
        background: linear-gradient(145deg, #303751, #252d43);
    }

.theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-group {
    background: linear-gradient(145deg, #20283a, #171d2b);
    border-color: rgba(166,174,211,.19);
    box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.035);
}

    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-group:hover {
        box-shadow: var(--shadow-hover), inset 0 1px 0 rgba(255,255,255,.04);
    }

.theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-base {
    background: linear-gradient(130deg, #183858, #1a2c46);
    border-color: #327dc1;
}

.theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-catalog {
    background: linear-gradient(130deg, #124337, #19352f);
    border-color: #168d70;
}

.theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-warehouse {
    background: linear-gradient(130deg, #503718, #342a22);
    border-color: #bb7925;
}

.theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-finance {
    background: linear-gradient(130deg, #34265e, #28243f);
    border-color: #755dd7;
}

.theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-group-admin {
    background: linear-gradient(130deg, #51283b, #382333);
    border-color: #b94a6d;
}

.theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-group > .mud-nav-link {
    color: #f0f3ff;
}

    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-group > .mud-nav-link:hover {
        background: rgba(255,255,255,.06);
    }

.theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-collapse-container .mud-nav-link,
.theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-top-link {
    border-color: rgba(166,174,211,.13);
    background: linear-gradient(145deg, rgba(43,52,72,.92), rgba(29,36,53,.96));
    box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.045);
}

    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-collapse-container .mud-nav-link:hover,
    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-top-link:hover {
        border-color: rgba(169,155,255,.34);
        background: linear-gradient(145deg, #303751, #252d43);
        box-shadow: 0 3px 0 rgba(0,0,0,.36), 0 8px 14px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07);
    }

    /* active در dark — بعد از hover */
    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-top-link.active,
    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-top-link.mud-nav-link-active,
    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-collapse-container .mud-nav-link.active,
    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-collapse-container .mud-nav-link.mud-nav-link-active {
        color: var(--mud-palette-primary);
        border-color: rgba(169,155,255,.38);
        background: var(--active-bg);
        box-shadow: var(--shadow-active), inset 0 1px 0 rgba(255,255,255,.08);
    }

.theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-dashboard.active,
.theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-dashboard.mud-nav-link-active {
    color: var(--mud-palette-primary);
    border-color: rgba(169,155,255,.34);
    background: linear-gradient(135deg, rgba(125,108,231,.33), rgba(32,169,130,.15));
    box-shadow: var(--shadow-active);
}

    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-top-link.active .mud-nav-link-icon,
    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-top-link.mud-nav-link-active .mud-nav-link-icon,
    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-collapse-container .mud-nav-link.active .mud-nav-link-icon,
    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-collapse-container .mud-nav-link.mud-nav-link-active .mud-nav-link-icon,
    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-dashboard.active .mud-nav-link-icon,
    .theme-dark .nav-scroll-container[b-iutzwst3ej]  .nav-menu .nav-dashboard.mud-nav-link-active .mud-nav-link-icon {
        color: var(--mud-palette-primary);
    }

.theme-dark .workspace-tabs[b-iutzwst3ej] {
    background: #171c2a;
    border-bottom-color: rgba(166,174,211,.10);
}

.theme-dark .workspace-tab[b-iutzwst3ej] {
    color: rgba(220,225,240,.70);
    background: linear-gradient(145deg, #232c40, #1d2536);
    border-color: rgba(166,174,211,.10);
}

    .theme-dark .workspace-tab:hover[b-iutzwst3ej] {
        color: #ffffff;
        background: linear-gradient(145deg, #303751, #252d43);
    }

.theme-dark .workspace-tab-active[b-iutzwst3ej],
.theme-dark .workspace-tab-active:hover[b-iutzwst3ej] {
    color: #b5a7ff;
    background: linear-gradient(145deg, #2b3147, #242b3d);
    box-shadow: 0 -3px 12px rgba(89,70,210,.15);
}

/* ============================================================
   15) Responsive
   ============================================================ */

@media (min-width: 1600px) {
    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link {
        min-height: 44px;
        font-size: .90rem;
    }

    .workspace-tab[b-iutzwst3ej] {
        max-width: 280px;
    }
}

@media (max-width: 959.98px) {
    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-group {
        margin: 6px 0;
    }

    .workspace-tabs[b-iutzwst3ej] {
        padding-inline: 4px;
    }
}

@media (max-width: 599.98px) {
    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link {
        min-height: 40px;
        padding: 6px 10px;
        font-size: .82rem;
    }

    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-group {
        margin: 4px 0;
    }

    .workspace-tabs[b-iutzwst3ej] {
        min-height: 44px;
        margin-bottom: 10px;
    }

    .workspace-tab[b-iutzwst3ej] {
        min-width: 96px;
        max-width: 165px;
        min-height: 37px;
    }

    .workspace-tab-select[b-iutzwst3ej] {
        font-size: .75rem;
    }

    .drawer-heading[b-iutzwst3ej],
    .drawer-footer[b-iutzwst3ej] {
        padding: 10px;
        gap: 8px;
    }

    .drawer-heading-copy strong[b-iutzwst3ej],
    .footer-copy strong[b-iutzwst3ej] {
        font-size: .75rem;
    }

    .drawer-heading-copy small[b-iutzwst3ej],
    .footer-copy small[b-iutzwst3ej] {
        font-size: .64rem;
    }
}

@media (max-height: 700px) {
    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link {
        min-height: 38px;
        padding-block: 6px;
    }

    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-group {
        margin-block: 5px;
    }

    .drawer-heading[b-iutzwst3ej],
    .drawer-footer[b-iutzwst3ej] {
        min-height: 56px;
        padding-block: 8px;
    }
}

@media (max-height: 550px) {
    .drawer-heading[b-iutzwst3ej],
    .drawer-footer[b-iutzwst3ej] {
        display: none;
    }

    .nav-scroll-container[b-iutzwst3ej]  .nav-menu {
        gap: 0;
    }
}

/* ============================================================
   16) Accessibility / input modes
   ============================================================ */

@media (pointer: coarse) {
    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link {
        min-height: 44px;
    }

    .workspace-tab[b-iutzwst3ej] {
        min-height: 42px;
    }

    .workspace-tab-close[b-iutzwst3ej] {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }
}

@media (prefers-contrast: more) {
    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link,
    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-group,
    .workspace-tab[b-iutzwst3ej] {
        border-width: 2px;
    }

    .workspace-tab-active[b-iutzwst3ej]::after {
        height: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link:hover,
    .workspace-tab:hover[b-iutzwst3ej] {
        transform: none;
    }

        .nav-scroll-container[b-iutzwst3ej]  .nav-menu .mud-nav-link:hover .mud-nav-link-icon {
            transform: none;
        }
}

/* ============================================================
   17) Print  (قاعده‌های مربوط به AppBar/Drawer در app.css هستند)
   ============================================================ */

@media print {
    .workspace-tabs[b-iutzwst3ej] {
        display: none !important;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-mj067ruftn],
.components-reconnect-repeated-attempt-visible[b-mj067ruftn],
.components-reconnect-failed-visible[b-mj067ruftn],
.components-pause-visible[b-mj067ruftn],
.components-resume-failed-visible[b-mj067ruftn],
.components-rejoining-animation[b-mj067ruftn] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-mj067ruftn],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-mj067ruftn],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-mj067ruftn],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-mj067ruftn],
#components-reconnect-modal.components-reconnect-retrying[b-mj067ruftn],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-mj067ruftn],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-mj067ruftn],
#components-reconnect-modal.components-reconnect-failed[b-mj067ruftn],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-mj067ruftn] {
    display: block;
}


#components-reconnect-modal[b-mj067ruftn] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-mj067ruftn 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-mj067ruftn 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-mj067ruftn 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-mj067ruftn]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-mj067ruftn 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-mj067ruftn {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-mj067ruftn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-mj067ruftn {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-mj067ruftn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-mj067ruftn] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-mj067ruftn] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-mj067ruftn] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-mj067ruftn] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-mj067ruftn] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-mj067ruftn] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-mj067ruftn 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-mj067ruftn] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-mj067ruftn {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}