/* استایل پایه برنامه - راست‌چین (RTL) و فونت فارسی وزیرمتن */

html, body {
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
    direction: rtl;
    text-align: right;
    margin: 0;
}

/* صفحه لودینگ اولیه قبل از آماده شدن Blazor */
.loading-splash {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 1.1rem;
    color: #555;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        left: 0.75rem;
        top: 0.5rem;
    }

/* رنگ‌بندی سطح اهمیت (Priority) سیگنال‌ها در جدول و دیالوگ‌ها */
.priority-critical {
    background-color: #d32f2f !important;
    color: #fff !important;
}

.priority-high {
    background-color: #f57c00 !important;
    color: #fff !important;
}

.priority-medium {
    background-color: #fbc02d !important;
    color: #212121 !important;
}

.priority-low {
    background-color: #388e3c !important;
    color: #fff !important;
}

/* ردیف‌های جدول آلارم که هنوز دیده نشده‌اند - برجسته‌سازی */
.alarm-row-unseen {
    font-weight: 700;
}

/* رنگ‌بندی سطر جدول بر اساس سطح اهمیت آلارم - یک نوار رنگی سمت راست ردیف
   (بند ۷ مستندات: سطر هر آلارم باید بر اساس نوع آن قابل تشخیص باشد) */
/* رنگ‌بندی کامل سطر جدول بر اساس سطح اهمیت آلارم (نه فقط یک نوار کناری) -
   چون MudTable به‌صورت پیش‌فرض برای هر <td> پس‌زمینه مخصوص به خودش دارد،
   این‌جا با اولویت بالاتر (تگ tr + td با هم) پس‌زمینه سطر را اعمال می‌کنیم
   تا رنگ واقعا کل عرض ردیف را بپوشاند و اپراتور در نگاه اول اهمیت را متوجه شود. */
.alarm-row-priority-critical,
.alarm-row-priority-critical td {
    border-right: 6px solid #d32f2f !important;
    background-color: rgba(211, 47, 47, 0.16) !important;
}

.alarm-row-priority-high,
.alarm-row-priority-high td {
    border-right: 6px solid #f57c00 !important;
    background-color: rgba(245, 124, 0, 0.13) !important;
}

.alarm-row-priority-medium,
.alarm-row-priority-medium td {
    border-right: 6px solid #fbc02d !important;
    background-color: rgba(251, 192, 45, 0.10) !important;
}

.alarm-row-priority-low,
.alarm-row-priority-low td {
    border-right: 6px solid #388e3c !important;
    background-color: rgba(56, 142, 60, 0.07) !important;
}

/* حالت Hover باید همچنان کمی تیره‌تر شود، نه رنگ اهمیت را از بین ببرد */
.alarm-row-priority-critical:hover td { background-color: rgba(211, 47, 47, 0.24) !important; }
.alarm-row-priority-high:hover td { background-color: rgba(245, 124, 0, 0.2) !important; }
.alarm-row-priority-medium:hover td { background-color: rgba(251, 192, 45, 0.16) !important; }
.alarm-row-priority-low:hover td { background-color: rgba(56, 142, 60, 0.13) !important; }

/* ===================================================================
   واکنش‌گرایی پایه برای موبایل - جداول عریض به‌جای شکستن صفحه، اسکرول
   افقی می‌گیرند و فاصله‌های داخلی روی صفحه‌های کوچک کاهش پیدا می‌کند.
   =================================================================== */
.mud-table-container {
    overflow-x: auto;
}

@media (max-width: 600px) {
    .mud-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }

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

/* ===================================================================
   لمس‌های نهایی ظاهر حرفه‌ای‌تر شبیه نرم‌افزارهای مانیتورینگ امنیتی
   =================================================================== */

/* شماره حساب/کدها با فونت با-عرض-ثابت خوانده می‌شوند - رایج توی نرم‌افزارهای
   مانیتورینگ امنیتی برای اینکه ارقام راحت‌تر از هم تشخیص داده بشن */
.mud-mono {
    font-family: 'Courier New', Consolas, monospace;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* آیتم فعال منو با رنگ کهربایی مشخص بشه */
.mud-nav-link.active,
.mud-nav-link[aria-current="page"] {
    border-right: 3px solid var(--mud-palette-secondary);
    background-color: rgba(245, 166, 35, 0.08);
}

/* هدر برنامه یک سایه ملایم‌تر و مشخص‌تر داشته باشه */
.mud-appbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* آیکون کوچک اطلاعات کنار فیلدها */
.mud-info-icon-hint {
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
    cursor: help;
    vertical-align: middle;
    margin-right: 4px;
}
.mud-info-icon-hint:hover {
    opacity: 1;
    color: var(--mud-palette-info);
}

/* ===================================================================
   فونت فارسی یکدست در کل سامانه - Vazirmatn روی همه‌چیز اعمال بشه، حتی
   اگر یه کامپوننت MudBlazor به‌طور پیش‌فرض فونت دیگه‌ای (مثل Roboto) بخواد
   =================================================================== */
html, body, .mud-typography, .mud-button-root, .mud-input, .mud-table, .mud-tab {
    font-family: 'Vazirmatn', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* ===================================================================
   استایل حرفه‌ای‌تر جداول - هدر پررنگ با رنگ اصلی سامانه، ردیف‌ها با
   خط‌جداکننده واضح‌تر و Hover نرم‌تر
   =================================================================== */
.mud-table-head {
    background-color: var(--mud-palette-primary);
}

.mud-table-head .mud-table-cell {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.mud-table-row {
    transition: background-color 0.15s ease;
}

.mud-table-row:hover {
    background-color: var(--mud-palette-table-hover) !important;
}

.mud-table-cell {
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding: 10px 12px !important;
    font-size: 0.875rem;
}

/* سطرهای Striped با کنتراست ملایم‌تر از پیش‌فرض */
.mud-table-striped .mud-table-row:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* ===================================================================
   لمس‌های نهایی حرفه‌ای‌تر برای دمو - فقط CSS خالص (بدون تغییر Theme اصلی
   C#، طبق تجربه‌ای که قبلا باعث یه باگ جدی شد)
   =================================================================== */

/* دکمه‌ها گردتر و با سایه ملایم به‌جای گوشه‌های تیز پیش‌فرض */
.mud-button-root.mud-button-filled {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
    text-transform: none;
    font-weight: 600;
}

.mud-button-root.mud-button-outlined {
    border-radius: 8px;
    text-transform: none;
}

/* کارت‌های شمارنده (Dashboard/پنل مانیتورینگ) با سایه و گوشه گردتر */
.mud-paper {
    border-radius: 10px;
}

/* چیپ‌های وضعیت/اهمیت کمی پررنگ‌تر و خواناتر */
.mud-chip.mud-chip-filled {
    font-weight: 600;
    border-radius: 6px;
}

/* فاصله یکنواخت‌تر بین ستون‌های فیلتر بالای جدول‌ها */
.mud-grid.mb-4 {
    row-gap: 12px;
}

/* ===================================================================
   واکنش‌گرایی بیشتر برای موبایل - این‌بار جامع‌تر
   =================================================================== */
@media (max-width: 960px) {
    .mud-appbar .mud-typography-h6 {
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .mud-container, .mud-main-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

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

    /* توی موبایل، کارت‌های شمارنده زیر هم بیفتن نه فشرده کنار هم */
    .mud-table-cell, .mud-table-head-cell {
        min-width: 90px;
    }
}

/* ===================================================================
   واکنش‌گرایی کامل - رفع مشکلات مشخص‌شده روی موبایل/تبلت:
   ۱. هم‌پوشانی عنوان دیالوگ‌ها با محتوای زیرش
   ۲. سرریز نمودارها/نمودار دایره‌ای از عرض صفحه
   ۳. هم‌پوشانی متن تب‌ها وقتی جا کم میاد (باید اسکرول افقی بگیرن)
   ۴. فشردگی بیش‌ازحد فرم‌ها و فیلترهای بالای جدول
   =================================================================== */

/* هیچ‌جای صفحه (نه فقط یه المان خاص) نباید باعث اسکرول افقی کل صفحه بشه -
   رایج‌ترین علت به‌هم‌ریختگی کلی در موبایل */
html, body {
    overflow-x: hidden;
}

/* ---------- دیالوگ‌ها ---------- */
.mud-dialog-title {
    padding-bottom: 12px !important;
    word-break: break-word;
}

.mud-dialog-content {
    overflow-x: hidden;
}

@media (max-width: 960px) {
    .mud-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
    }

    .mud-dialog-title .mud-typography {
        font-size: 1.05rem !important;
        line-height: 1.5 !important;
    }
}

/* ---------- تب‌ها: به‌جای هم‌پوشانی متن، اسکرول افقی بگیرن ---------- */
.mud-tabs-toolbar {
    overflow-x: auto !important;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
}

.mud-tabs-toolbar .mud-tab {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---------- نمودارها: هیچ‌وقت از عرض کارتشون بیرون نزنن ---------- */
.mud-paper svg,
.mud-paper canvas,
.recharts-wrapper,
.recharts-responsive-container {
    max-width: 100% !important;
}

.recharts-wrapper {
    overflow: hidden;
}

@media (max-width: 600px) {
    /* عنوان‌های h4/h5 صفحات روی موبایل کوچیک‌تر بشن تا با دکمه‌های کنارشون تداخل نکنن */
    .mud-typography-h4 {
        font-size: 1.4rem !important;
    }
    .mud-typography-h5 {
        font-size: 1.2rem !important;
    }

    /* فاصله کمتر داخل دیالوگ‌ها روی موبایل */
    .mud-dialog-content {
        padding: 12px !important;
    }

    /* دکمه‌های Action پایین دیالوگ زیر هم بیفتن اگه جا کم بود */
    .mud-dialog-actions {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* فیلدهای فرم داخل MudGrid تمام‌عرض بشن روی موبایل حتی اگه xs مشخص نشده */
    .mud-dialog-content .mud-grid-item {
        min-width: 0;
    }
}