/* ===========================================================
   GTA — صفحه‌های «سیستمی» سامانه یکپارچه
   (۴۰۴ آدرس اشتباه · دسترسی ندارید · نوار خطای Blazor)

   چرا فایل جدا و چرا CSS ساده (نه MudBlazor)؟
   این صفحه‌ها دقیقاً جایی دیده می‌شوند که ممکن است تم/داده/اتصال
   خراب باشد. پس مثل اسپلش و صفحه‌ی ورود، فقط به کلاس html.gta-dark
   تکیه می‌کنند (که اسکریپت اولِ index.html از localStorage ست می‌کند)
   و هیچ وابستگی به MudThemeProvider ندارند — حالت شب همیشه درست است.

   زبان بصری عمداً همان اسپلش است: همان چهار هاله‌ی سبز/طلایی،
   همان کارت شیشه‌ای صفحه‌ی ورود، و همان نوار گرادیان طلایی→زمردی.
   =========================================================== */

/* ── پوسته‌ی تمام‌صفحه (۴۰۴) — همان گرادیان دقیق اسپلش ── */
.gsys {
    position: fixed; inset: 0; z-index: 1400; overflow: auto;
    display: flex; align-items: center; justify-content: center;
    padding: 28px 20px; direction: rtl;
    font-family: 'Peyda','Segoe UI',Tahoma,sans-serif;
    background:
      radial-gradient(640px 480px at 0% -3%, rgba(46,139,91,.20), transparent 56%),
      radial-gradient(560px 470px at 100% 0%, rgba(206,160,52,.16), transparent 55%),
      radial-gradient(760px 660px at 102% 103%, rgba(24,160,130,.16), transparent 56%),
      radial-gradient(680px 580px at -2% 103%, rgba(31,122,75,.14), transparent 56%),
      radial-gradient(1300px 920px at 50% 50%, rgba(255,255,255,.42), transparent 62%),
      linear-gradient(135deg,#E9F2EC 0%,#E7F0E9 45%,#F2EDE0 100%);
}

/* ── پوسته‌ی داخل قاب سامانه (دسترسی ندارید) — منو و هدر سر جایشان می‌مانند
      تا کاربر حس گم‌شدن نگیرد و بتواند مستقیم سراغ کار دیگری برود ── */
.gsys-inline {
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px; direction: rtl;
    font-family: 'Peyda','Segoe UI',Tahoma,sans-serif;
    min-height: min(72vh, 620px);
}

/* ── کارت شیشه‌ای — دقیقاً هم‌خانواده‌ی .gl-card صفحه‌ی ورود ── */
.gsys-card {
    position: relative; width: min(560px, 100%);
    text-align: center; padding: 34px 30px 28px;
    background: rgba(255,255,255,.44);
    backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: var(--gta-radius-card, 22px);
    box-shadow: 0 30px 70px rgba(15,42,28,.18), inset 0 1px 0 rgba(255,255,255,.85);
    overflow: hidden;
}
/* نوار گرادیان بالای کارت = همان نوار پیشرفت اسپلش (امضای بصری سامانه) */
.gsys-card::before {
    content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
    background: linear-gradient(270deg, #C8911C 0%, #2A7D52 38%, #175C39 100%);
}

.gsys-logo { width: min(150px, 46%); height: auto; margin: 0 auto 14px; display: block;
    filter: drop-shadow(0 10px 22px rgba(15,42,28,.16)); }

/* عدد بزرگ (۴۰۴) با ارقام فارسی و متن گرادیانی */
.gsys-code {
    font-size: clamp(52px, 12vw, 76px); font-weight: 800; line-height: 1.05;
    letter-spacing: 2px; margin: 2px 0 10px;
    direction: rtl; unicode-bidi: isolate;
    background: linear-gradient(200deg, #C8911C 0%, #2A7D52 45%, #175C39 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #175C39;
}

/* آیکون دایره‌ای برای صفحه‌هایی که عدد ندارند (دسترسی ندارید) */
.gsys-ic {
    width: 68px; height: 68px; margin: 2px auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, rgba(200,145,28,.16), rgba(23,92,57,.16));
    border: 1px solid rgba(23,92,57,.16);
}
.gsys-ic svg { width: 34px; height: 34px; fill: none; stroke: #175C39; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; }

.gsys-title { font-size: 20px; font-weight: 800; color: #141A22; margin: 0 0 8px; }
.gsys-msg { font-size: 13.5px; line-height: 2; color: #46564C; margin: 0 auto 6px; max-width: 44ch; }

/* آدرسی که کاربر زده — تا بفهمد کجا اشتباه شده (اغلب یک حرف کم/زیاد است) */
.gsys-url {
    display: inline-block; max-width: 100%; margin: 8px 0 2px; padding: 6px 12px;
    font-size: 12.5px; direction: ltr; unicode-bidi: isolate; word-break: break-all;
    background: rgba(23,92,57,.07); border: 1px solid rgba(23,92,57,.14);
    border-radius: var(--gta-radius-chip, 999px); color: #2A7D52;
}

/* ── دکمه‌ها: همیشه حداقل یک راه خروج، اولی پررنگ ── */
.gsys-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.gsys-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px; border: 0; border-radius: 13px; cursor: pointer;
    font-family: inherit; font-weight: 800; font-size: 14px; text-decoration: none;
    background: linear-gradient(140deg,#2a7d52,#15583a); color: #fff;
    box-shadow: 0 12px 26px rgba(23,92,57,.3), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.gsys-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(23,92,57,.36); color: #fff; }
.gsys-btn.ghost {
    background: rgba(255,255,255,.6); color: #175C39;
    border: 1px solid rgba(23,92,57,.22); box-shadow: none;
}
.gsys-btn.ghost:hover { background: rgba(255,255,255,.85); color: #15583a; }
.gsys-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; }
.gsys-btn:focus-visible { outline: 2px solid #2A7D52; outline-offset: 3px; }

.gsys-help { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(20,26,34,.08);
    font-size: 12px; line-height: 1.9; color: #6B7686; }
.gsys-help b { color: #175C39; font-weight: 800; }

@media (max-width: 480px) {
    .gsys { padding: 18px 14px; align-items: flex-start; }
    .gsys-card { padding: 26px 20px 22px; }
    .gsys-acts { flex-direction: column; }
    .gsys-btn { width: 100%; min-height: 48px; }
    .gsys-msg { font-size: 13px; }
}

/* ── 🌙 حالت شب — هم‌راستا با اسپلش و صفحه‌ی ورود ── */
html.gta-dark .gsys {
    background:
      radial-gradient(640px 480px at 0% -3%, rgba(63,166,113,.14), transparent 56%),
      radial-gradient(560px 470px at 100% 0%, rgba(200,145,28,.10), transparent 55%),
      radial-gradient(760px 660px at 102% 103%, rgba(24,160,130,.10), transparent 56%),
      radial-gradient(680px 580px at -2% 103%, rgba(31,122,75,.12), transparent 56%),
      linear-gradient(135deg,#0E1712 0%,#101914 45%,#141A12 100%);
}
html.gta-dark .gsys-card {
    background: rgba(18,26,21,.74); border-color: rgba(255,255,255,.09);
    box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
html.gta-dark .gsys-card::before {
    background: linear-gradient(270deg, #E3B95A 0%, #3FA671 38%, #2A7D52 100%);
}
html.gta-dark .gsys-logo {
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(127,201,162,.18)) brightness(1.25);
}
html.gta-dark .gsys-code {
    background: linear-gradient(200deg, #E3B95A 0%, #3FA671 45%, #2A7D52 100%);
    -webkit-background-clip: text; background-clip: text; color: #8FD8B0;
}
html.gta-dark .gsys-ic { background: linear-gradient(140deg, rgba(227,185,90,.14), rgba(63,166,113,.14));
    border-color: rgba(127,201,162,.18); }
html.gta-dark .gsys-ic svg { stroke: #8FD8B0; }
html.gta-dark .gsys-title { color: #E4EDE7; }
html.gta-dark .gsys-msg { color: #A9BCB0; }
html.gta-dark .gsys-url { background: rgba(127,201,162,.10); border-color: rgba(127,201,162,.20); color: #8FD8B0; }
html.gta-dark .gsys-btn.ghost { background: rgba(255,255,255,.06); color: #8FD8B0; border-color: rgba(127,201,162,.24); }
html.gta-dark .gsys-btn.ghost:hover { background: rgba(255,255,255,.11); color: #A5DCC0; }
html.gta-dark .gsys-btn:focus-visible { outline-color: #7FC9A2; }
html.gta-dark .gsys-help { color: #93A79B; border-top-color: rgba(255,255,255,.08); }
html.gta-dark .gsys-help b { color: #8FD8B0; }

@media (prefers-reduced-motion: reduce) {
    .gsys-btn { transition: none; }
    .gsys-btn:hover { transform: none; }
}

/* ===========================================================
   نوار خطای Blazor (#blazor-error-ui)
   تا امروز متن پیش‌فرض انگلیسیِ قالب بود («An unhandled error…»)
   و هیچ استایلی نداشت. حالا فارسی، هم‌شکل برند، و مهم‌تر:
   به کاربر می‌گوید چه کار کند و همیشه یک راه خروج دارد.
   نکته: نمایش/پنهان‌شدن دست خود Blazor است (display را عوض می‌کند)،
   پس اینجا هرگز display ست نمی‌شود.
   =========================================================== */
#blazor-error-ui {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 20000;
    box-sizing: border-box; padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    direction: rtl; text-align: center;
    font-family: 'Peyda','Segoe UI',Tahoma,sans-serif; font-size: 13.5px; line-height: 1.9;
    color: #fff; background: linear-gradient(140deg, #8E3B33, #6E2A24);
    box-shadow: 0 -14px 34px rgba(0,0,0,.28);
    border-top: 3px solid; border-image: linear-gradient(270deg,#C8911C,#2A7D52,#175C39) 1;
}
#blazor-error-ui .beu-wrap {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px;
    max-width: 900px; margin: 0 auto;
}
#blazor-error-ui .beu-txt { text-align: start; }
#blazor-error-ui .beu-txt b { font-weight: 800; display: block; font-size: 14.5px; }
#blazor-error-ui .beu-txt span { opacity: .9; font-size: 12.5px; }
#blazor-error-ui .reload {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 18px;
    border-radius: 11px; font-weight: 800; font-size: 13.5px; text-decoration: none;
    background: #fff; color: #6E2A24; box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
#blazor-error-ui .reload:hover { background: #FFF3E4; }
#blazor-error-ui .dismiss {
    cursor: pointer; min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 17px; line-height: 1; color: #fff; opacity: .85;
}
#blazor-error-ui .dismiss:hover { opacity: 1; background: rgba(255,255,255,.14); }
#blazor-error-ui a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 480px) {
    #blazor-error-ui .beu-wrap { flex-direction: column; gap: 10px; }
    #blazor-error-ui .beu-txt { text-align: center; }
    #blazor-error-ui .reload { width: 100%; justify-content: center; min-height: 46px; }
}