/* ============================================================================
   RayanHub — لایه‌ی ظاهری سراسری  (v43.0)

   چرا داخل app.css و نه فایل تازه: app.css از قبل در index.html لینک شده.
   با این کار هیچ تغییر دستی در index.html لازم نیست.

   ─────────────────────────────────────────────────────────────────────
   فلسفه‌ی این فایل

   هیچ‌کدام از ۸۰ صفحه‌ی پروژه دست نمی‌خورد. همه‌ی زیباسازی از راه
   کلاس‌های خودِ MudBlazor انجام می‌شود که در تمام صفحات یکسان‌اند.
   مثلاً چون همه‌ی صفحات عنوانشان را با
       <MudText Typo="Typo.h5" Class="mb-4">…</MudText>
   می‌نویسند، یک قانون CSS به همه‌ی آن‌ها سرصفحه‌ی حرفه‌ای می‌دهد.

   نام کلاس‌ها حدسی نیستند — همان‌هایی‌اند که در
   persian-datepicker-fix.css و بخش قدیمی همین فایل استفاده شده‌اند.

   ─────────────────────────────────────────────────────────────────────
   فهرست بخش‌ها

     ۱. متغیرها و پایه
     ۲. سرصفحه‌ی صفحات
     ۳. کارت، کاغذ و سایه
     ۴. دیالوگ‌ها
     ۵. فرم‌ها و ورودی‌ها
     ۶. جدول و گرید
     ۷. چیپ، نشان و وضعیت
     ۸. نوار بالا و منوی کناری
     ۹. موبایل و تبلت
    ۱۰. حرکت و انیمیشن
    ۱۱. حالت شب
    ۱۲. چاپ
    ۱۳. قواعد قدیمی (دست‌نخورده)
   ============================================================================ */


/* ═══════════════════ ۱. متغیرها و پایه ═══════════════════ */

:root {
    /* سایه‌های لایه‌ای — نرم‌تر از پیش‌فرض */
    --rh-shadow-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
    --rh-shadow-2: 0 2px 4px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.08);
    --rh-shadow-3: 0 4px 8px rgba(16,24,40,.04), 0 12px 28px rgba(16,24,40,.10);

    --rh-radius: 12px;
    --rh-radius-sm: 8px;

    --rh-ring: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    --rh-tint: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    --rh-tint-strong: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);

    --rh-transition: .18s cubic-bezier(.4, 0, .2, 1);
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* اعداد با عرض یکسان، تا ستون‌های عددی جدول تکان نخورند */
.mud-table-cell,
.rh-num {
    font-variant-numeric: tabular-nums;
}

::selection {
    background: var(--rh-tint-strong);
}

/* ── اسکرول‌بار باریک در کل سامانه ── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(128,128,128,.35) transparent;
}

*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(128,128,128,.32);
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(128,128,128,.55);
}


/* ═══════════════════ ۲. سرصفحه‌ی صفحات ═══════════════════ */
/*
   همه‌ی صفحات عنوانشان را با Typo.h5 می‌نویسند. این قانون بدون دست زدن
   به هیچ فایلی، به همه‌شان سرصفحه‌ی یکدست می‌دهد: یک نوار رنگی کوتاه
   کنار عنوان که چشم را به ابتدای صفحه می‌برد.
*/
.mud-main-content .mud-typography-h5:first-of-type {
    position: relative;
    padding-right: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
}

    .mud-main-content .mud-typography-h5:first-of-type::before {
        content: "";
        position: absolute;
        right: 0;
        top: .22em;
        bottom: .22em;
        width: 4px;
        border-radius: 3px;
        background: linear-gradient(180deg,
            var(--mud-palette-primary),
            var(--mud-palette-secondary));
    }

/* توضیح زیر عنوان — خواناتر */
.mud-main-content .mud-typography-h5 + .mud-typography-body2 {
    max-width: 70ch;
    line-height: 1.85;
}


/* ═══════════════════ ۳. کارت، کاغذ و سایه ═══════════════════ */

.mud-paper {
    border-radius: var(--rh-radius);
    transition: box-shadow var(--rh-transition), transform var(--rh-transition);
}

.mud-elevation-1 { box-shadow: var(--rh-shadow-1) !important; }
.mud-elevation-2 { box-shadow: var(--rh-shadow-2) !important; }
.mud-elevation-3,
.mud-elevation-4 { box-shadow: var(--rh-shadow-3) !important; }

.mud-paper.pa-3,
.mud-paper.pa-4 {
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default, #e0e0e0) 60%, transparent);
}

/* کارت‌های آماری داشبورد — بازخورد ملایم */
.mud-grid-item > .mud-paper:hover {
    box-shadow: var(--rh-shadow-3) !important;
    transform: translateY(-2px);
}

.mud-alert {
    border-radius: var(--rh-radius-sm);
}


/* ═══════════════════ ۴. دیالوگ‌ها ═══════════════════ */

.mud-dialog {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 48px -12px rgba(16,24,40,.25);
}

/*  ⚠️ v98.0 — این بلوک به بخش ۱۷ منتقل شد.

    اینجا سربرگ پس‌زمینه‌ی کم‌رنگ داشت؛ در بخش ۱۷ سربرگ رنگی پر شده و
    اگر هر دو بمانند، ترتیب بارگذاری تعیین می‌کند کدام برنده شود — که
    غیرقابل پیش‌بینی است.
    
    نگه داشتن یک قاعده‌ی مرده بدتر از حذفش است: نفر بعدی وقت می‌گذارد
    تا بفهمد چرا اثری ندارد.  */


/* ═══════════════════ ۵. فرم‌ها و ورودی‌ها ═══════════════════ */

.mud-input-control {
    margin-bottom: 6px;
}

.mud-input-outlined-border {
    transition: border-color var(--rh-transition), box-shadow var(--rh-transition);
}

/* حلقه‌ی فوکوس — نشان می‌دهد کاربر کجاست */
.mud-input-control:focus-within .mud-input-outlined-border {
    box-shadow: 0 0 0 3px var(--rh-ring);
}

.mud-button-root {
    border-radius: var(--rh-radius-sm);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: transform var(--rh-transition), box-shadow var(--rh-transition);
}

.mud-button-filled:hover {
    transform: translateY(-1px);
    box-shadow: var(--rh-shadow-2);
}

.mud-button-root:active {
    transform: translateY(0);
}

.mud-switch,
.mud-checkbox {
    margin-inline-end: 12px;
}

.mud-file-upload {
    width: 100%;
}


/* ═══════════════════ ۶. جدول و گرید ═══════════════════ */

.mud-table {
    border-radius: var(--rh-radius);
    overflow: hidden;
}

.mud-table-cell {
    padding: 8px 12px !important;
}

/* سربرگ چسبان — هنگام اسکرول عنوان ستون‌ها می‌ماند */
.mud-table-head .mud-table-cell,
.mud-table-container thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-primary));
    font-weight: 700;
    white-space: nowrap;
}

.mud-table-body .mud-table-row:nth-of-type(even) {
    background: color-mix(in srgb, var(--mud-palette-primary) 2.5%, transparent);
}

.mud-table-body .mud-table-row:hover {
    background: var(--rh-tint) !important;
}

/* ستون عملیات نباید بشکند */
.mud-table-cell:last-child {
    white-space: nowrap;
}

.mud-table-toolbar {
    padding-inline: 8px;
    gap: 8px;
    flex-wrap: wrap;
}


/* ═══════════════════ ۷. چیپ، نشان و وضعیت ═══════════════════ */

.mud-chip {
    font-weight: 600;
    border-radius: 999px;
}

.mud-chip-size-small {
    height: 24px;
    font-size: .75rem;
}

.mud-badge {
    font-weight: 700;
}

.mud-avatar {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-surface) 100%, transparent);
}


/* ═══════════════════ ۸. نوار بالا و منوی کناری ═══════════════════ */

.mud-appbar {
    box-shadow: var(--rh-shadow-1) !important;
}

.mud-nav-link {
    position: relative;
    border-radius: 10px;
    margin: 2px 8px;
    padding-block: 8px;
    transition: background var(--rh-transition), color var(--rh-transition);
}

    .mud-nav-link:hover {
        background: var(--rh-tint);
    }

    .mud-nav-link.active {
        background: var(--rh-tint-strong);
        font-weight: 700;
    }

        /* نشانگر صفحه‌ی جاری */
        .mud-nav-link.active::after {
            content: "";
            position: absolute;
            inset-inline-end: 0;
            top: 20%;
            bottom: 20%;
            width: 3px;
            border-radius: 3px;
            background: var(--mud-palette-primary);
        }

.mud-nav-group > .mud-nav-link {
    font-weight: 600;
}


/* ═══════════════════ ۹. موبایل و تبلت ═══════════════════ */

/* ── تا ۹۶۰ پیکسل: تبلت ── */
@media (max-width: 960px) {

    .mud-main-content .mud-container {
        padding-inline: 12px !important;
    }

    /* جدول‌ها به‌جای شکستن، افقی اسکرول شوند */
    .mud-table-container,
    .mud-datagrid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mud-table {
        min-width: 640px;
    }
}

/* ── تا ۶۰۰ پیکسل: موبایل ── */
@media (max-width: 600px) {

    /* ── دیالوگ تمام‌صفحه ──
       با MaxWidth.Medium + FullWidth، دیالوگ روی گوشی حاشیه‌های بی‌فایده
       می‌گرفت و فرم فشرده می‌شد. روی صفحه‌ی کوچک، تمام‌صفحه درست‌تر است. */
    .mud-dialog-container {
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
    }

    .mud-dialog {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }

    .mud-dialog-content {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 16px !important;
    }

    /* دکمه‌ها همیشه در دسترس، بالای صفحه‌کلید */
    .mud-dialog-actions {
        position: sticky;
        bottom: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) 16px;
    }

        /* روی گوشی، دکمه‌ی تمام‌عرض راحت‌تر لمس می‌شود */
        .mud-dialog-actions .mud-button-root {
            flex: 1 1 0;
            min-height: 44px;
        }

    .mud-dialog-title {
        padding: 14px 16px;
        font-size: 1.05rem;
    }

    /* ── نوار بالا ── */
    .mud-appbar .mud-typography-h6 {
        font-size: 1rem;
    }

    .mud-appbar .mud-icon-button {
        padding: 6px;
    }

    /* ── محتوا ── */
    .mud-main-content .mud-container {
        padding-inline: 8px !important;
        padding-top: 8px !important;
    }

    .mud-main-content .mud-typography-h5 {
        font-size: 1.15rem;
    }

    .mud-dialog-content .mud-grid-item {
        padding-block: 4px !important;
    }

    /* ── هدف لمسی حداقل ۴۰ پیکسل ── */
    .mud-button-root,
    .mud-nav-link,
    .mud-table-cell .mud-icon-button {
        min-height: 40px;
    }

    /* ── جدول فشرده‌تر ── */
    .mud-table-cell {
        padding: 6px 8px !important;
        font-size: .8rem;
    }

    .mud-table-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding-block: 8px;
    }

    .mud-grid-item > .mud-paper .mud-typography-h5 {
        font-size: 1.1rem;
    }

    /* ── نوار فیلتر بالای صفحات (تاریخ، جستجو، شرکت) ──
       این‌ها با d-flex flex-wrap ساخته شده‌اند و روی گوشی
       عرض‌های ثابتشان صفحه را می‌شکست. */
    .mud-paper.d-flex.flex-wrap > * {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .mud-paper.d-flex.flex-wrap {
        gap: 8px !important;
    }

    /* ── منوی کناری ── */
    .mud-drawer {
        width: 82vw !important;
        max-width: 320px;
    }
}

/* ── گوشی‌های خیلی باریک ── */
@media (max-width: 380px) {
    .mud-appbar .mud-typography-h6 {
        display: none;
    }
}


/* ═══════════════════ ۱۰. حرکت و انیمیشن ═══════════════════ */

.mud-main-content > .mud-container {
    animation: rh-fade-in .22s ease-out;
}

@keyframes rh-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* احترام به تنظیم سیستمی «کاهش حرکت» */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ═══════════════════ ۱۱. حالت شب ═══════════════════ */

.mud-theme-dark .mud-paper.pa-3,
.mud-theme-dark .mud-paper.pa-4 {
    border-color: rgba(255,255,255,.07);
}

.mud-theme-dark .mud-table-head .mud-table-cell,
.mud-theme-dark .mud-table-container thead th {
    background: rgba(255,255,255,.045);
}

.mud-theme-dark .mud-table-body .mud-table-row:nth-of-type(even) {
    background: rgba(255,255,255,.022);
}

.mud-theme-dark .mud-dialog {
    box-shadow: 0 24px 48px -12px rgba(0,0,0,.6);
}

.mud-theme-dark .mud-dialog-actions {
    background: rgba(255,255,255,.03);
    border-top-color: rgba(255,255,255,.08);
}

.mud-theme-dark * {
    scrollbar-color: rgba(255,255,255,.22) transparent;
}

.mud-theme-dark *::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
}


/* ═══════════════════ ۱۲. چاپ ═══════════════════ */
/*
   صورت‌حساب، گزارش عملکرد و ریز مکالمات چاپ می‌شوند. بدون این بخش،
   منو و نوار بالا هم روی کاغذ می‌آیند و نیمی از برگه هدر می‌رود.
*/
@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-snackbar-provider,
    .mud-table-pagination,
    .mud-dialog-actions,
    .mud-button-root,
    .mud-icon-button {
        display: none !important;
    }

    .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .mud-paper {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .mud-table-row {
        break-inside: avoid;
    }
}


/* ═══════════════════ ۱۴. فشرده‌سازی و یکدستی  (v47.0) ═══════════════════ */
/*
   بازخورد: «صفحات فشرده بشه، پدینگ‌ها حذف بشه، فرم‌ها یکدست بشن، از
   تمام فضای فرم استفاده بشه».

   MudBlazor برای نمایشگرهای بزرگ و کم‌تراکم تنظیم شده. در یک سامانه‌ی
   کاری که کاربر تمام روز با آن سر و کار دارد، فضای خالی یعنی اسکرول
   بیشتر و اطلاعات کمتر در یک نگاه.

   همه‌ی اعداد اینجا نسبت به پیش‌فرض کم شده‌اند، نه صفر — فشردگی نباید
   به قیمت خوانایی تمام شود.
*/

/* ── ظرف اصلی: حاشیه‌ی تلف‌شده ── */
.mud-main-content .mud-container {
    padding-inline: 16px !important;
    padding-top: 12px !important;
    max-width: 100% !important;   /* از تمام عرض نمایشگر استفاده شود */
}

/* ── سرصفحه فشرده‌تر ── */
.mud-main-content .mud-typography-h5:first-of-type {
    margin-bottom: 10px !important;
    font-size: 1.25rem;
}

.mud-main-content .mud-typography-h4 {
    font-size: 1.35rem;
    margin-bottom: 10px !important;
}

/* ── کارت و کاغذ ── */
.mud-paper.pa-4 { padding: 14px !important; }
.mud-paper.pa-3 { padding: 12px !important; }
.mud-paper.pa-6 { padding: 18px !important; }

/* فاصله‌ی بین کارت‌ها */
.mud-grid { margin: -6px !important; }
.mud-grid > .mud-grid-item { padding: 6px !important; }

/* کلاس‌های فاصله‌ی MudBlazor که همه‌جا استفاده شده‌اند */
.mb-4 { margin-bottom: 12px !important; }
.mb-6 { margin-bottom: 16px !important; }
.mt-4 { margin-top: 12px !important; }
.my-4 { margin-block: 12px !important; }
.pa-4 { padding: 14px !important; }

/* ── فرم‌ها: یکدست و جمع‌وجور ── */
.mud-input-control {
    margin-bottom: 2px !important;
}

.mud-input-control-input-container > .mud-input.mud-input-outlined {
    min-height: 42px;
}

.mud-input-outlined input,
.mud-input-outlined .mud-input-slot {
    padding-block: 9px !important;
}

/* برچسب‌ها کمی کوچک‌تر — فضای بیشتری برای خودِ داده می‌ماند */
.mud-input-label {
    font-size: .88rem;
}

/* متن راهنمای زیر فیلد فضا نگیرد مگر خطا باشد */
.mud-input-helper-text:empty { display: none; }

/* ── دیالوگ: استفاده از تمام عرض ── */
/*  v98.2 — padding سربرگ به بخش ۱۷ منتقل شد  */
.mud-dialog-content { padding: 14px 18px !important; }
.mud-dialog-actions { padding: 10px 18px !important; }

/* دیالوگ‌های فرم‌دار روی نمایشگر بزرگ، بی‌جهت باریک بودند */
@media (min-width: 960px) {
    .mud-dialog-width-md { max-width: 820px !important; }
    .mud-dialog-width-sm { max-width: 620px !important; }
}

/* ── جدول: بیشترین تراکم مفید ── */
.mud-table-cell {
    padding: 6px 10px !important;
    font-size: .875rem;
}

.mud-table-head .mud-table-cell {
    padding: 8px 10px !important;
    font-size: .8rem;
}

.mud-table-row { height: auto !important; }

/* صفحه‌بندی جای کمتری بگیرد */
.mud-table-pagination { padding: 4px 8px !important; min-height: 44px; }

.mud-table-toolbar { min-height: 48px; }

/* ── دکمه‌ها ── */
.mud-button-root {
    padding-block: 6px;
    min-height: 36px;
}

.mud-button-root.mud-button-size-small { min-height: 30px; }

/* آیکون‌دکمه‌های داخل جدول */
.mud-table-cell .mud-icon-button {
    padding: 5px;
}

/* ── تب‌ها ── */
.mud-tabs-toolbar { min-height: 42px; }
.mud-tab { min-height: 42px; padding: 0 14px; }

/* ── هشدارها و چیپ‌ها ── */
.mud-alert { padding: 8px 14px; }
.mud-alert-message { padding-block: 2px; }

/* ── منوی کناری ── */
.mud-nav-link { padding-block: 6px !important; min-height: 38px; }
.mud-navmenu .mud-nav-link { font-size: .9rem; }

/* ── نوار بالا ── */
.mud-appbar { min-height: 56px; }
.mud-appbar .mud-toolbar { min-height: 56px; }

/* محتوا زیر نوار بالا نرود */
.mud-main-content { padding-top: 56px !important; }

/* ── expansion panel ── */
.mud-expand-panel-header { padding: 10px 14px; min-height: 46px; }
.mud-expand-panel-content { padding: 10px 14px; }

/* ── نمایشگرهای بزرگ: بیش از حد پهن نشود ── */
/*  متنِ تمام‌عرض روی نمایشگر ۲۷ اینچ خوانا نیست، ولی جدول‌ها باید پهن
    بمانند. پس فقط بخش‌های متنی محدود می‌شوند. */
@media (min-width: 1600px) {
    .mud-main-content .mud-container { padding-inline: 24px !important; }
}


/* ═══════════════════ ۱۵. اصلاح موبایل  (v47.0) ═══════════════════ */
/*
   مقادیر فشرده‌ی بالا روی گوشی هم اعمال می‌شوند و بعضی‌جا زیادی تنگ
   می‌شدند. اینجا تعادل برقرار می‌شود.
*/
@media (max-width: 600px) {

    .mud-main-content .mud-container {
        padding-inline: 10px !important;
        padding-top: 10px !important;
    }

    /* هدف لمسی نباید قربانی فشردگی شود */
    .mud-button-root { min-height: 40px; }
    .mud-nav-link { min-height: 44px !important; padding-block: 10px !important; }
    .mud-table-cell .mud-icon-button { padding: 8px; }

    /* فرم‌ها روی گوشی کمی بازتر — انگشت جای دقیق‌تری لازم دارد */
    .mud-input-control { margin-bottom: 6px !important; }
    .mud-input-control-input-container > .mud-input.mud-input-outlined { min-height: 46px; }

    /* دیالوگ‌ها روی گوشی محدودیت عرض ندارند */
    .mud-dialog-width-md,
    .mud-dialog-width-sm { max-width: 100% !important; }

    /* تب‌های زیاد افقی اسکرول شوند، نه اینکه بشکنند */
    .mud-tabs-toolbar { overflow-x: auto; }

    /* گرید کارت‌ها: فاصله‌ی کمتر */
    .mud-grid { margin: -4px !important; }
    .mud-grid > .mud-grid-item { padding: 4px !important; }
}

/* گوشی افقی یا تبلت کوچک */
@media (min-width: 601px) and (max-width: 960px) {
    .mud-main-content .mud-container { padding-inline: 12px !important; }
}


/* ============================================================================
   ۱۳. قواعد قدیمی — دست‌نخورده از نسخه‌ی پیشین
   ============================================================================ */

/* گرید انتخاب رنگ تم */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.theme-swatch {
    height: 48px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    transition: transform .12s ease, border-color .12s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

    .theme-swatch:hover {
        transform: translateY(-2px);
    }

    .theme-swatch.active {
        border-color: rgba(0,0,0,.35);
    }

/* کارت‌های جمع‌وجور */
.compact-card {
    padding: 12px !important;
}

/* منوی کناری از بالا شروع شود، نه پایین */
.mud-drawer .mud-navmenu {
    margin-top: 0 !important;
}

.mud-drawer-content {
    justify-content: flex-start !important;
}

.mud-drawer {
    justify-content: flex-start !important;
}

.mud-drawer .mud-divider {
    flex: 0 0 auto !important;
    height: 1px !important;
}


/* ████████████████████████████████████████████████████████████████████████████
   ۱۴. لایه‌ی فشرده‌سازی و رنگ  —  v56.0

   هدف: صفحات مرتب‌تر، فشرده‌تر، رنگی‌تر · دیالوگ‌ها زیباتر
   روش: باز هم **هیچ صفحه‌ای دست نمی‌خورد**. همه‌چیز از راه کلاس‌های
        MudBlazor که در تمام صفحات یکسان‌اند.

   ⚠️ این بخش عمداً **بعد از** بخش‌های قبلی آمده تا در تعارض، برنده شود.
      اگر چیزی زیادی فشرده شد، فقط همین بخش را حذف کنید — بقیه سالم می‌ماند.
   ████████████████████████████████████████████████████████████████████████████ */


/* ═══════════ ۱۴.۱ فشرده‌سازی فاصله‌ها ═══════════
   نسبت‌ها حفظ می‌شوند، فقط مقیاس کوچک‌تر می‌شود.
   نتیجه: حدود ۲۵٪ محتوای بیشتر در همان صفحه. */

.mud-main-content .mud-container {
    padding-top: 12px !important;
    padding-bottom: 16px !important;
}

/* فاصله‌ی زیر سرصفحه — mb-4 در همه‌ی صفحات، ۱۶px بود */
.mud-main-content .mud-typography-h5.mb-4,
.mud-main-content .d-flex.mb-4 {
    margin-bottom: 10px !important;
}

/* کاغذهای pa-3 و pa-4 — پرکاربردترین ظرف‌های پروژه */
.mud-main-content .mud-paper.pa-4 { padding: 14px !important; }
.mud-main-content .mud-paper.pa-3 { padding: 11px !important; }

.mud-main-content .mud-paper.mb-4 { margin-bottom: 10px !important; }
.mud-main-content .mud-paper.mb-3 { margin-bottom: 8px !important; }

/* فاصله‌ی خانه‌های گرید */
.mud-main-content .mud-grid { margin: -4px !important; }
.mud-main-content .mud-grid > .mud-grid-item { padding: 4px !important; }

/* ورودی‌ها — بلندی پیش‌فرض MudBlazor برای فرم‌های شلوغ زیاد است */
.mud-main-content .mud-input-control { margin-bottom: 2px; }
.mud-input-control .mud-input.mud-input-outlined { --mud-input-padding: 9px 12px; }


/* ═══════════ ۱۴.۲ رنگ — نوار بالای کارت‌ها ═══════════
   یک خط رنگی نازک بالای هر کارتِ برجسته. کم‌هزینه ولی صفحه را
   از «کاغذهای سفید روی هم» به چیزی ساختارمند تبدیل می‌کند. */

.mud-main-content .mud-paper.mud-elevation-2,
.mud-main-content .mud-paper.mud-elevation-3 {
    position: relative;
    overflow: hidden;
}

    .mud-main-content .mud-paper.mud-elevation-2::before,
    .mud-main-content .mud-paper.mud-elevation-3::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: 0;
        height: 3px;
        background: linear-gradient(90deg,
            var(--mud-palette-primary),
            var(--mud-palette-secondary));
        opacity: .85;
    }

/*  ⚠️ استثناها — جایی که نوار رنگی یا overflow:hidden مزاحم است:
      • ظرف‌های تمام‌ارتفاع (چت، تابلوی زنده) که با Style ارتفاع می‌گیرند
        و داخلشان ستون flex با اسکرول است
      • حباب‌های پیام و ردیف‌های فهرست
    تشخیص از روی وجود Style درون‌خطی ارتفاع — همان الگویی که این ظرف‌ها
    در پروژه دارند.  */
.mud-main-content .mud-paper[style*="height"],
.mud-main-content .mud-paper[style*="flex"] {
    overflow: visible;
}

    .mud-main-content .mud-paper[style*="height"]::before,
    .mud-main-content .mud-paper[style*="flex"]::before {
        display: none;
    }

/* کاغذهای تودرتو نوار دوم نگیرند — فقط بیرونی‌ترین */
.mud-main-content .mud-paper .mud-paper::before { display: none; }

/* نوار فیلتر بالای صفحات — پس‌زمینه‌ی کم‌رنگ تا از محتوا جدا شود */
.mud-main-content .mud-paper.d-flex.flex-wrap {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

    /* نوار فیلتر نوار رنگی نمی‌خواهد — خودش رنگی است */
    .mud-main-content .mud-paper.d-flex.flex-wrap::before { display: none; }


/* ═══════════ ۱۴.۳ کارت‌های آماری ═══════════ */

.mud-main-content .mud-paper.text-center .mud-typography-h5,
.mud-main-content .mud-paper.text-center .mud-typography-h4 {
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.mud-main-content .mud-paper.text-center .mud-typography-caption {
    opacity: .72;
    font-size: .72rem;
}


/* ═══════════ ۱۴.۴ دیالوگ‌ها ═══════════ */

/*  ⚠️ v98.2 — این بلوک (از v56) خنثی شد.

    «background: transparent !important» سربرگ رنگی بخش ۱۷ را کاملاً
    پاک می‌کرد — به همین دلیل سربرگ سفید و خالی دیده می‌شد و دکمه‌ی
    بستن سفید روی سفید ناپدید بود.

    فقط position نگه داشته شد، چون ::before به آن وابسته است.  */
.mud-dialog-title {
    position: relative;
}

    /*  ⚠️ v98.2 — نوار ۴ پیکسلی بالا حذف شد.
        سربرگ حالا خودش گرادیان رنگی دارد؛ نوار دوم فقط شلوغش می‌کند.  */
    .mud-dialog-title::before {
        display: none;
        content: "";
        position: absolute;
        inset-inline: 0;
        top: 0;
        height: 4px;
        background: linear-gradient(90deg,
            var(--mud-palette-primary),
            var(--mud-palette-secondary));
    }

.mud-dialog-content {
    padding: 16px 20px !important;
}

.mud-dialog-actions {
    padding: 10px 20px !important;
}

/* دکمه‌ی اصلی دیالوگ کمی برجسته‌تر */
.mud-dialog-actions .mud-button-filled {
    padding-inline: 20px;
}

/* هشدارهای داخل دیالوگ فشرده‌تر */
.mud-dialog-content .mud-alert {
    padding: 8px 12px;
    font-size: .82rem;
}

.mud-dialog-content .mud-alert .mud-alert-icon { padding: 0 8px 0 0; }


/* ═══════════ ۱۴.۵ جدول‌ها ═══════════ */

.mud-main-content .mud-table-cell {
    padding: 6px 10px !important;
    font-size: .84rem;
}

.mud-main-content .mud-table-head .mud-table-cell {
    font-size: .78rem;
    letter-spacing: .01em;
    text-transform: none;
}

/* خط جداکننده‌ی کم‌رنگ‌تر — جدول شلوغ به نظر نرسد */
.mud-main-content .mud-table-row td {
    border-bottom-color: color-mix(in srgb, var(--mud-palette-lines-default, #e0e0e0) 45%, transparent) !important;
}

/* دکمه‌های آیکونی ستون عملیات */
.mud-main-content .mud-table-cell .mud-icon-button {
    padding: 5px;
    margin-inline: 1px;
}

/* صفحه‌بندی فشرده‌تر */
.mud-table-pagination { padding: 4px 8px !important; min-height: 42px; }


/* ═══════════ ۱۴.۶ چیپ‌های وضعیت — رنگ معنادار ═══════════
   چیپ‌ها الان تخت‌اند. پس‌زمینه‌ی کم‌رنگ + متن پررنگ همان رنگ،
   خواناتر است و در جدول شلوغ زودتر پیدا می‌شود. */

.mud-chip.mud-chip-filled.mud-chip-color-success,
.mud-chip.mud-chip-filled.mud-chip-color-error,
.mud-chip.mud-chip-filled.mud-chip-color-warning,
.mud-chip.mud-chip-filled.mud-chip-color-info,
.mud-chip.mud-chip-filled.mud-chip-color-primary {
    font-weight: 700;
    letter-spacing: 0;
}

.mud-chip-size-small {
    height: 21px !important;
    font-size: .71rem !important;
    padding-inline: 8px !important;
}


/* ═══════════ ۱۴.۷ منوی کناری فشرده‌تر ═══════════ */

.mud-drawer .mud-nav-link {
    padding-block: 6px !important;
    font-size: .86rem;
    min-height: 36px;
}

.mud-drawer .mud-nav-group > .mud-nav-link { font-size: .88rem; }

.mud-drawer .mud-nav-link .mud-icon-root {
    font-size: 1.15rem;
    margin-inline-end: 8px;
}


/* ═══════════ ۱۴.۸ موبایل — فشرده‌سازی نباید لمس را سخت کند ═══════════ */

@media (max-width: 600px) {

    /* روی صفحه‌ی لمسی، هدف کوچک یعنی خطای کلیک.
       فشرده‌سازی بالا برای دسکتاپ است، اینجا برمی‌گردد. */
    .mud-main-content .mud-table-cell .mud-icon-button,
    .mud-drawer .mud-nav-link {
        min-height: 40px;
    }

    .mud-main-content .mud-paper.pa-4 { padding: 12px !important; }
    .mud-main-content .mud-paper.pa-3 { padding: 10px !important; }

    /* نوار رنگی روی گوشی نازک‌تر */
    .mud-main-content .mud-paper.mud-elevation-2::before,
    .mud-main-content .mud-paper.mud-elevation-3::before { height: 2px; }
}


/* ═══════════ ۱۴.۹ حالت شب ═══════════ */

.mud-theme-dark .mud-main-content .mud-paper.d-flex.flex-wrap {
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.08);
}

.mud-theme-dark .mud-main-content .mud-table-row td {
    border-bottom-color: rgba(255,255,255,.06) !important;
}

/*  v98.2 — حاشیه‌ی سربرگ در حالت شب لازم نیست:
    سربرگ رنگی است و حاشیه دیده نمی‌شود.  */



/* ═══════════ ۱۴.۱۰ چاپ ═══════════ */

@media print {
    /* نوارهای رنگی جوهر هدر می‌دهند و روی چاپگر سیاه‌وسفید خاکستری می‌شوند */
    .mud-paper::before,
    .mud-dialog-title::before { display: none !important; }
}


/* ═══════════ ۱۴.۱۱ ریزکاری‌های پایانی ═══════════ */

/* ── فرم‌های دوستونه در دیالوگ ──
   دیالوگ‌های پروژه فیلدها را پشت هم و تک‌ستونه می‌چینند. روی دسکتاپ
   نیمی از عرض هدر می‌رود و فرم بلند می‌شود. اینجا فیلدهای کوتاه
   کنار هم می‌نشینند. روی موبایل خودکار تک‌ستونه می‌شود. */
@media (min-width: 700px) {
    /*  ⚠️ v80.1 — فقط فرم‌هایی که MudGrid ندارند دوستونه می‌شوند.
    
        چرا: MudGrid خودش سامانه‌ی چیدمان دارد. اگر MudForm والدش گرید
        دوستونه باشد، کل MudGrid در **یک ستون** می‌نشیند و نیمی از
        دیالوگ خالی می‌ماند.
    
        :not(:has(.mud-grid)) دقیقاً همین را جدا می‌کند.  */
    .mud-dialog-content .mud-form:not(:has(.mud-grid)) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 14px;
        align-items: start;
    }

        /* عناصری که باید تمام‌عرض بمانند */
        .mud-dialog-content .mud-form:not(:has(.mud-grid)) > .mud-input-control:only-child,
        .mud-dialog-content .mud-form:not(:has(.mud-grid)) > .mud-switch,
        .mud-dialog-content .mud-form:not(:has(.mud-grid)) > .mud-checkbox,
        .mud-dialog-content .mud-form:not(:has(.mud-grid)) > .mud-alert,
        .mud-dialog-content .mud-form:not(:has(.mud-grid)) > .mud-file-upload,
        .mud-dialog-content .mud-form:not(:has(.mud-grid)) > .rich-editor-wrapper,

        /*  ⭐ v101.0 — ادیتور داخل ظرف هم تمام‌عرض بماند.
        
            در چند دیالوگ (پایگاه دانش، تسک، یادداشت انتشار) ادیتور داخل
            یک <div> برای فاصله‌گذاری گذاشته شده. پس فرزند مستقیم فرم
            نیست و استثنای بالا نمی‌گیرد — نتیجه: ادیتور نصف عرض می‌گرفت
            و نوار ابزارش روی هم می‌ریخت.
        
            :has() این را حل می‌کند: هر فرزند مستقیمی که ادیتور داخلش
            باشد، تمام‌عرض می‌شود.  */
        /*  برچسب فیلدهایی که ورودی MudBlazor نیستند — مثل ادیتور متن  */
        .mud-dialog-content .mud-form:not(:has(.mud-grid)) > .rh-field-label,
        .mud-dialog-content .mud-form:not(:has(.mud-grid)) > div:has(> .rich-editor-wrapper),
        .mud-dialog-content .mud-form:not(:has(.mud-grid)) > div:has(.rich-editor-wrapper),
        .mud-dialog-content .mud-form:not(:has(.mud-grid)) > .mud-select[multiple],
        /*  فیلد چندخطی (Lines=…) — MudBlazor آن را textarea می‌کند.
            اگر نصف عرض بگیرد، متن بلند غیرقابل استفاده می‌شود.  */
        .mud-dialog-content .mud-form:not(:has(.mud-grid)) > .mud-input-control:has(textarea) {
            grid-column: 1 / -1;
        }

        /*  فیلد آخر وقتی تعداد فیلدها فرد است، تنها می‌ماند و کنارش
            خالی است — بهتر است تمام‌عرض شود.  */
        .mud-dialog-content .mud-form:not(:has(.mud-grid)) > .mud-input-control:last-child:nth-child(odd) {
            grid-column: 1 / -1;
        }
}

/* ── دکمه‌ها ── */
.mud-button-root { padding-block: 6px; }

.mud-button-root.mud-button-filled-size-small,
.mud-button-root.mud-button-outlined-size-small { min-height: 30px; }

/* ── فاصله‌ی گروه دکمه‌های بالای صفحه ── */
.mud-main-content .d-flex.align-center.mb-4 > .mud-button-root { margin-inline-start: 6px; }

/* ── تب‌ها فشرده‌تر ── */
.mud-tabs .mud-tab {
    min-height: 40px;
    padding-inline: 14px;
    font-size: .86rem;
}

/* ── نوار پیشرفت باریک‌تر ── */
.mud-progress-linear { border-radius: 999px; }

/* ── فیلد جستجو در نوار ابزار جدول ── */
.mud-table-toolbar .mud-input-control { margin-bottom: 0; max-width: 320px; }

/* ── دیالوگ تأیید (MessageBox) کمی جمع‌وجورتر ── */
.mud-dialog .mud-dialog-content > .mud-typography-body1 { line-height: 1.9; }

/* ── حالت خالی: وقتی جدول رکوردی ندارد ── */
.mud-table-empty-row td {
    text-align: center;
    padding: 28px 12px !important;
    opacity: .65;
}


/* ████████████████████████████████████████████████████████████████████████████
   ۱۵. (حذف شد در v98.0)

   ارتفاع ثابت دیالوگ‌های تب‌دار به بخش ۱۷ منتقل شد، همراه بقیه‌ی سبک
   دیالوگ.

   ⚠️ دو بلوک با قواعد هم‌معنی، ترتیب بارگذاری را تعیین‌کننده می‌کند —
   و آن غیرقابل پیش‌بینی است. یک جا بهتر از دو جاست.
   ████████████████████████████████████████████████████████████████████████████ */


/* ████████████████████████████████████████████████████████████████████████████
   ۱۶. مقیاس فونت و پالایش گرافیکی  —  v79.0

   ⭐ برای تغییر اندازه‌ی کلی فونت، فقط همین یک عدد را عوض کنید:

        --rh-font-scale: 0.94;

        1.00 = اندازه‌ی اصلی MudBlazor
        0.94 = پیش‌فرض تازه (حدود ۶٪ کوچک‌تر)
        0.88 = فشرده‌تر، برای نمایشگرهای بزرگ
        1.05 = بزرگ‌تر، برای کسانی که ریز نمی‌بینند

   جای این خط: همین‌جا، بخش :root پایین.
   ████████████████████████████████████████████████████████████████████████████ */

:root {
    /*  v79.2 — از 0.94 به 1.00 برگشت: در فرم‌های شلوغ ریز به نظر می‌رسید.
        فشردگی باید از فاصله‌ها بیاید، نه از کوچک کردن متن — متن ریز فقط
        خواندن را سخت می‌کند بدون اینکه جای واقعی صرفه‌جویی شود.  */
    /*  v84.0 — پیش‌فرض ۰٫۹۴. کاربر می‌تواند از منوی تم عوضش کند و
        انتخابش ذخیره می‌شود؛ آن مقدار روی MudLayout می‌نشیند و این را
        بازنویسی می‌کند.  */
    --rh-font-scale: 0.94;

    /*  اندازه‌های مشتق — دست نزنید، از مقیاس بالا حساب می‌شوند  */
    --rh-fs-base: calc(0.875rem * var(--rh-font-scale));
    --rh-fs-sm: calc(0.8rem * var(--rh-font-scale));
    --rh-fs-xs: calc(0.72rem * var(--rh-font-scale));
}

/*  پایه  */
.mud-typography-body1,
.mud-typography-body2,
.mud-input,
.mud-input-root,
.mud-select-input,
.mud-table-cell,
.mud-button-label,
.mud-nav-link,
.mud-list-item-text {
    font-size: var(--rh-fs-base);
}

/*  برچسب ورودی‌ها  */
.mud-input-label,
.mud-input-helper-text {
    font-size: var(--rh-fs-xs);
}

/*  سربرگ‌ها — نسبت‌ها حفظ می‌شوند  */
.mud-typography-h4 { font-size: calc(1.6rem * var(--rh-font-scale)); }
.mud-typography-h5 { font-size: calc(1.28rem * var(--rh-font-scale)); }
.mud-typography-h6 { font-size: calc(1.08rem * var(--rh-font-scale)); }
.mud-typography-subtitle1 { font-size: calc(0.95rem * var(--rh-font-scale)); }
.mud-typography-subtitle2 { font-size: calc(0.86rem * var(--rh-font-scale)); }
.mud-typography-caption { font-size: var(--rh-fs-xs); }


/* ═══════════ پالایش گرافیکی ═══════════ */

/*  ── ورودی‌ها: حاشیه‌ی نرم‌تر و تمرکز روشن‌تر ── */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 8px;
    border-color: color-mix(in srgb, var(--mud-palette-lines-default, #cfd8dc) 80%, transparent);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 1.5px;
    box-shadow: 0 0 0 3px var(--rh-ring);
}

/*  ── دکمه‌ها: گردی یکدست و سایه‌ی ملایم ── */
.mud-button-root {
    border-radius: 8px;
    letter-spacing: 0;
    font-weight: 600;
}

.mud-button-filled {
    box-shadow: 0 1px 2px rgba(16,24,40,.08);
}

    .mud-button-filled:hover {
        box-shadow: 0 2px 6px rgba(16,24,40,.14);
    }

/*  ── چیپ‌ها: خواناتر ── */
.mud-chip {
    border-radius: 7px;
    font-weight: 600;
}

/*  ── جدول: سربرگ متمایز ── */
.mud-table-head .mud-table-cell {
    font-weight: 700;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

/*  ── اعداد و آی‌پی و مک: فونت یکسان‌عرض ──
    چرا: اعداد فارسی و لاتین در فونت متغیر جابه‌جا می‌شوند و ستون‌ها
    ناهم‌تراز می‌مانند.  */
.rh-num,
.mud-table-cell.rh-num {
    font-family: Consolas, 'Courier New', monospace;
    font-size: calc(0.8rem * var(--rh-font-scale));
    direction: ltr;
    display: inline-block;
}

/*  ── تاریخ شمسی در جدول‌ها ── */
.mud-table-cell time,
.mud-table-cell .rh-date {
    font-size: var(--rh-fs-sm);
    opacity: .82;
}


/* ████████████████████████████████████████████████████████████████████████████
   ۱۷. سبک یکپارچه‌ی دیالوگ‌ها  —  v98.0

   سبک ۲ از نمونه‌ها: سربرگ رنگی پر، هم‌رنگ تم فعلی.

   ⭐ همه‌ی ۳۵ دیالوگ سامانه را می‌گیرد، بدون دست زدن به فایلشان.

   ─────────────────────────────────────────────────────────────────────
   چهار هدف

   ۱. سربرگ رنگی که با تم عوض می‌شود
   ۲. ارتفاع ثابت — با تعویض تب، دیالوگ نمی‌پرد
   ۳. روی موبایل تقریباً تمام‌صفحه
   ۴. فونت و فاصله‌ی یکدست و فشرده
   ████████████████████████████████████████████████████████████████████████████ */

/* ═══════════ ۱. قاب دیالوگ ═══════════ */

.mud-dialog {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 48px -12px color-mix(in srgb, var(--mud-palette-primary) 32%, rgba(16,24,40,.3));
    border: none;
}


/* ═══════════ ۲. سربرگ رنگی ═══════════ */

.mud-dialog .mud-dialog-title {
    /*  گرادیان ملایم از رنگ اصلی به رنگ دوم — هر تم، ترکیب خودش  */
    background: linear-gradient(135deg,
                var(--mud-palette-primary),
                color-mix(in srgb, var(--mud-palette-primary) 68%, var(--mud-palette-secondary)));

    color: #fff;
    padding: 13px 20px;
    margin: 0;
    border-bottom: none;

    font-size: calc(1rem * var(--rh-font-scale, 1));
    font-weight: 700;
    line-height: 1.5;

    display: flex;
    align-items: center;
    gap: 10px;
}

    /*  متن و آیکون‌های داخل سربرگ سفید شوند  */
    .mud-dialog .mud-dialog-title,
    .mud-dialog .mud-dialog-title .mud-typography,
    .mud-dialog .mud-dialog-title .mud-icon-root,
    .mud-dialog .mud-dialog-title b,
    .mud-dialog .mud-dialog-title span {
        color: #fff;
    }

    /*  دکمه‌ی بستن  */
    .mud-dialog .mud-dialog-title .mud-icon-button {
        color: #fff;
        opacity: .82;
        margin-inline-start: auto;
    }

        .mud-dialog .mud-dialog-title .mud-icon-button:hover {
            opacity: 1;
            background: rgba(255,255,255,.16);
        }

    /*  ⚠️ چیپ‌های داخل سربرگ نباید سفید روی سفید شوند  */
    .mud-dialog .mud-dialog-title .mud-chip {
        background: rgba(255,255,255,.2) !important;
        color: #fff !important;
        border-color: rgba(255,255,255,.35) !important;
    }

    /*  ⚠️ v98.1 — زیرعنوان‌های خاکستری روی سربرگ رنگی ناخوانا می‌شدند.
    
        چند دیالوگ (سند، تفاوت ردپا، پیوست) در TitleContent یک متن کمکی
        با mud-text-secondary دارند — رنگ خاکستری روشن که روی پس‌زمینه‌ی
        تیره‌ی رنگی تقریباً دیده نمی‌شود.
    
        سفید نیمه‌شفاف می‌شود: هم خوانا، هم از عنوان اصلی متمایز.  */
    .mud-dialog .mud-dialog-title .mud-text-secondary,
    .mud-dialog .mud-dialog-title .mud-typography-caption,
    .mud-dialog .mud-dialog-title .mud-typography-body2 {
        color: rgba(255,255,255,.82) !important;
    }

    /*  عنوان اصلی و زیرعنوان زیر هم بنشینند، نه کنار هم  */
    .mud-dialog .mud-dialog-title > .mud-typography:first-child {
        line-height: 1.4;
    }

    /*  اگر TitleContent چند عنصر دارد، ستونی شود  */
    .mud-dialog .mud-dialog-title:has(.mud-typography + .mud-typography) {
        align-items: flex-start;
        flex-wrap: wrap;
    }


/* ═══════════ ۳. بدنه ═══════════ */

.mud-dialog .mud-dialog-content {
    padding: 16px 20px;
    font-size: calc(0.875rem * var(--rh-font-scale, 1));
}


/* ═══════════ ۴. نوار دکمه‌ها ═══════════ */

.mud-dialog .mud-dialog-actions {
    padding: 10px 20px;
    gap: 8px;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

    .mud-dialog .mud-dialog-actions .mud-button-root {
        min-width: 84px;
    }


/* ═══════════ ۵. ⭐ ارتفاع ثابت ═══════════

   با تعویض تب، دیالوگ نباید بپرد. ناحیه‌ی محتوا ارتفاع ثابت می‌گیرد و
   خودش اسکرول می‌شود؛ سربرگ و دکمه‌ها سر جایشان می‌مانند.

   ⚠️ فقط دیالوگ‌های تب‌دار — بقیه ارتفاعشان از محتوا می‌آید.          */

.mud-dialog:has(.mud-tabs) .mud-dialog-content {
    height: 62vh;
    max-height: 62vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 6px;
}

    .mud-dialog:has(.mud-tabs) .mud-dialog-content > div,
    .mud-dialog:has(.mud-tabs) .mud-dialog-content > .mud-tabs {
        flex: 1 1 auto;
        min-height: 0;              /* لازم است وگرنه flex اسکرول نمی‌دهد */
        display: flex;
        flex-direction: column;
    }

.mud-dialog .mud-tabs {
    flex: 1 1 auto;
    min-height: 0;
}

    .mud-dialog .mud-tabs .mud-tabs-toolbar {
        flex: 0 0 auto;
        min-height: 38px;
        border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    }

    .mud-dialog .mud-tabs .mud-tab {
        min-height: 38px;
        padding-inline: 12px;
        font-size: calc(0.82rem * var(--rh-font-scale, 1));
        text-transform: none;
    }

    /*  فقط این ناحیه اسکرول می‌شود  */
    .mud-dialog .mud-tabs .mud-tabs-panels {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-top: 10px;
    }


/* ═══════════ ۶. فرم فشرده و یکدست ═══════════ */

.mud-dialog .mud-input-control {
    margin-bottom: 0;
}

.mud-dialog .mud-input-label {
    font-size: calc(0.76rem * var(--rh-font-scale, 1));
}

.mud-dialog .mud-input,
.mud-dialog .mud-input-root,
.mud-dialog .mud-select-input {
    font-size: calc(0.88rem * var(--rh-font-scale, 1));
}

/*  فاصله‌ی خانه‌های MudGrid — فشرده‌تر از پیش‌فرض  */
.mud-dialog .mud-grid {
    margin: -5px !important;
    width: calc(100% + 10px) !important;
}

    .mud-dialog .mud-grid > .mud-grid-item {
        padding: 5px !important;
    }

/*  جدول‌های داخل دیالوگ  */
.mud-dialog .mud-table-cell {
    padding: 5px 9px !important;
    font-size: calc(0.84rem * var(--rh-font-scale, 1));
}

.mud-dialog .mud-table-head .mud-table-cell {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    font-weight: 700;
}


/* ═══════════ ۷. اسکرول‌بار باریک ═══════════ */

.mud-dialog *::-webkit-scrollbar { width: 7px; height: 7px; }

.mud-dialog *::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    border-radius: 999px;
}

    .mud-dialog *::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    }

.mud-dialog *::-webkit-scrollbar-track { background: transparent; }


/* ═══════════ ۸. صفحه‌های کوتاه ═══════════ */

@media (max-height: 760px) {
    .mud-dialog:has(.mud-tabs) .mud-dialog-content {
        height: 68vh;
        max-height: 68vh;
    }
}


/* ═══════════ ۹. ⭐ موبایل — تقریباً تمام‌صفحه ═══════════

   با فاصله‌ی جزئی از لبه‌ها، تا از تمام فضا استفاده شود.               */

@media (max-width: 600px) {

    .mud-dialog {
        margin: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        border-radius: 12px;
    }

    .mud-dialog .mud-dialog-title {
        padding: 11px 14px;
        font-size: calc(0.95rem * var(--rh-font-scale, 1));
    }

    .mud-dialog .mud-dialog-content {
        padding: 12px 14px;
    }

    .mud-dialog:has(.mud-tabs) .mud-dialog-content {
        height: calc(100vh - 150px);
        max-height: calc(100vh - 150px);
    }

    .mud-dialog .mud-dialog-actions {
        padding: 9px 14px;
    }

        /*  دکمه‌ها تمام‌عرض و راحت برای انگشت  */
        .mud-dialog .mud-dialog-actions .mud-button-root {
            flex: 1;
            min-height: 40px;
        }

    /*  هدف لمسی تب‌ها  */
    .mud-dialog .mud-tabs .mud-tab {
        min-height: 44px;
    }
}


/* ████████████████████████████████████████████████████████████████████████████
   ۱۸. برچسب فیلدهای غیر-MudBlazor  —  v101.0

   ادیتور متن غنی ورودی MudBlazor نیست، پس برچسب خودکار ندارد. این کلاس
   ظاهرش را با برچسب بقیه‌ی فیلدها یکدست می‌کند.
   ████████████████████████████████████████████████████████████████████████████ */

.rh-field-label {
    font-size: calc(0.76rem * var(--rh-font-scale, 1));
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
    line-height: 1.5;
}


/* ████████████████████████████████████████████████████████████████████████████
   ۱۹. مهار سرریز افقی  —  v133.0

   ⚠️ مسئله: کل صفحه اسکرول افقی داشت و می‌شد خیلی کشیدش.

   علتش این است که هیچ محافظی روی ظرف اصلی نبود — پس هر عنصری که از
   عرض بیرون بزند (جدول عریض، کارت با متن بلند، نمودار)، **کل چیدمان
   را می‌کشد**.

   ⭐ درمان درست: عرض را در سطح ظرف مهار کن، و اسکرول را به همان عنصری
   بده که واقعاً عریض است — نه به کل صفحه.
   ████████████████████████████████████████████████████████████████████████████ */

/* ═══════════ ۱. ریشه ═══════════ */

html, body {
    /*  ⚠️ v164.0 — «clip» به‌جای «hidden».

        تفاوتشان ظریف ولی مهم است:

          hidden  →  یک «ظرف اسکرول» می‌سازد. پنجره‌های شناور که
                     position: fixed دارند، نسبت به آن جایگاه
                     می‌گیرند — و بریده می‌شوند.

          clip    →  فقط می‌بُرد، ظرف اسکرول نمی‌سازد. پس تقویم و منو
                     آزادانه بیرون می‌آیند.

        ⭐ همه‌ی مرورگرهای امروزی پشتیبانی می‌کنند؛ برای قدیمی‌ها
        hidden پیش از آن می‌ماند.  */
    overflow-x: hidden;
    overflow-x: clip;

    max-width: 100%;
}

/*  ناحیه‌ی محتوا — جایی که صفحات رندر می‌شوند  */
.mud-main-content {
    /*  ⚠️ v164.0 — همان دلیل: clip ظرف اسکرول نمی‌سازد  */
    overflow-x: hidden;
    overflow-x: clip;

    max-width: 100%;
}

    /*  ⚠️ min-width: 0 روی فرزندان flex و grid لازم است.
    
        بدون آن، عنصر flex زیر عرض محتوایش کوچک نمی‌شود و ظرف را
        می‌کشد — حتی وقتی ظرف overflow: hidden دارد.
    
        این همان چیزی است که در v87 با MudFileUpload هم دیدیم.  */
    .mud-main-content > .mud-container,
    .mud-main-content > div {
        min-width: 0;
        max-width: 100%;
    }


/* ═══════════ ۲. جدول‌ها ═══════════

   جدول عریض طبیعی است — ولی اسکرولش باید **مال خودش** باشد، نه کل
   صفحه.                                                              */

.mud-table-container {
    overflow-x: auto;
    max-width: 100%;
}

.mud-table {
    max-width: 100%;
}


/* ═══════════ ۳. گریدهای کارت ═══════════

   ⚠️ minmax(280px, 1fr) روی صفحه‌ی باریک‌تر از ۲۸۰ پیکسل سرریز می‌کند —
   چون ۲۸۰ کف است، نه سقف.

   min(280px, 100%) این را حل می‌کند: روی صفحه‌ی باریک، کف هم کوچک
   می‌شود.                                                             */

.rh-pol-grid,
.rh-recur-grid,
.rh-check-grid,
.rh-set-grid {
    max-width: 100%;
}

    .rh-pol-grid > *,
    .rh-recur-grid > *,
    .rh-check-grid > *,
    .rh-set-grid > * {
        min-width: 0;
    }

@media (max-width: 340px) {
    .rh-pol-grid,
    .rh-recur-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════ ۴. متن بلند بدون فاصله ═══════════

   ⚠️ نشانی طولانی، مک‌آدرس یا رشته‌ی فنی بدون فاصله، ظرف را می‌کشد —
   چون مرورگر جایی برای شکستن خط پیدا نمی‌کند.                        */

.mud-table-cell,
.mud-chip,
.mud-alert-message {
    overflow-wrap: anywhere;
}

/*  ⚠️ ولی نه روی اعدادی که باید یک‌تکه بمانند  */
.rh-num,
.rh-ip,
.rh-mac,
.rh-cidr {
    overflow-wrap: normal;
    white-space: nowrap;
}


/* ═══════════ ۵. عناصر پیش‌فرض ═══════════ */

img, svg, video, canvas, iframe {
    max-width: 100%;
}

pre, code {
    max-width: 100%;
    overflow-x: auto;
}

/*  نوار تب — اگر تب‌ها زیاد باشند، خودش اسکرول شود  */
.mud-tabs-toolbar-wrapper {
    max-width: 100%;
}


/* ████████████████████████████████████████████████████████████████████████████
   ۲۰. تقویم و پنجره‌های شناور  —  v164.0

   ⚠️ مسئله: تقویم تاریخ **نصفه** باز می‌شد و از سمت راست بیرون می‌زد.

   دو علت داشت:

     ۱. overflow-x: hidden که در v133 برای مهار اسکرول افقی گذاشتم،
        پنجره‌ی شناور را هم می‌بُرید

     ۲. کلاس fa-datepicker در پروژه استفاده می‌شد ولی **هیچ‌جا تعریف
        نشده بود** — پس تقویم شمسی هیچ استایلی نداشت

   ⭐ درس: مهار سرریز نباید به عناصری برسد که **عمداً** بیرون از جریان
   صفحه‌اند — منو، تقویم، راهنمای موس.
   ████████████████████████████████████████████████████████████████████████████ */

/* ═══════════ ۱. پنجره‌های شناور بریده نشوند ═══════════ */

.mud-popover,
.mud-popover-provider,
.mud-overlay {
    /*  ⚠️ v171.0 — «!important» هم برداشته شد.

        این‌ها فرزند body هستند، نه صفحه — پس مهار سرریز v133 اصلاً
        به آن‌ها نمی‌رسد و این قاعده احتیاطی بود.

        ⭐ بدون !important، هر پنجره‌ای که خودش max-width بگذارد
        (مثل منوی اعلان با calc(100vw - 24px)) کار می‌کند.  */
    max-width: none;
}

/*  ⚠️⚠️ v171.0 — «overflow: visible !important» برداشته شد.

    چه شکست: منوی اعلان‌ها «overflow-y: auto» دارد تا فهرست بلند
    اسکرول شود. قاعده‌ی من با !important آن را باطل می‌کرد و همه‌ی
    اعلان‌ها بیرون می‌ریختند.

    ⭐ درس: «!important» روی قاعده‌ی سراسری، تنظیمات موضعی را می‌کشد.
    اینجا اصلاً لازم نبود — چون مهار سرریز v133 با «clip» انجام
    می‌شود که به فرزندان body نمی‌رسد.

    ⚠️ اگر روزی پنجره‌ای بریده شد، **همان یکی** را استثنا کنید، نه
    همه را.  */

/*  محتوای پنجره سقف عرض نداشته باشد — ولی اسکرول خودش دست‌نخورده  */
.mud-popover > .mud-picker-container,
.mud-popover > .mud-list {
    max-width: none;
}


/* ═══════════ ۲. تقویم شمسی ═══════════

   ⚠️ v164.2 — همه‌ی قاعده‌های تقویم برداشته شدند.
   
   سه بار سعی کردم «کمکش» کنم و هر بار بدترش کردم:
   
     v164    direction: ltr        →  جدول وارونه شد
     v164.1  width: max-content    →  جایگاه به هم ریخت
             margin-inline-end     →  از ورودی دور شد
   
   ⭐ MudBlazor جایگاه پنجره را با **جاوااسکریپت** حساب می‌کند.
   هر قاعده‌ی CSS که عرض یا حاشیه را عوض کند، آن محاسبه را باطل
   می‌کند — چون پس از محاسبه اعمال می‌شود.
   
   پس تنها چیزی که می‌ماند، کادر ورودی است — که به پنجره ربطی
   ندارد.                                                              */

.fa-datepicker .mud-input-slot,
.fa-datepicker input {
    /*  تاریخ شمسی همیشه چپ‌به‌راست است، حتی در صفحه‌ی راست‌به‌چپ.

        ⚠️ بدون این، «۱۴۰۵/۰۵/۲۲» به شکل «۲۲/۰۵/۱۴۰۵» دیده می‌شود.

        ⭐ این روی **کادر ورودی** است، نه پنجره‌ی تقویم — پس بی‌خطر
        است.  */
    direction: ltr;
    text-align: center;
    font-family: Consolas, monospace;
    font-size: .82rem;
}