/* =====================================================================
   [شكل] هيكل التحميل (Views/Shared/_GsBoot.cshtml + js/gs-boot.js)
   شكل السيستم نفسه رمادي لحد ما الشاشة تجهز — وكمان أول ما تدوس على صفحة تانية (بدل ما الصفحة القديمة تفضل ظاهرة)
   ===================================================================== */
.gs-boot {
    position: fixed; inset: 0; z-index: 5000; display: flex; overflow: hidden;
    background: var(--gs-bg, #f3f4f6); pointer-events: none;
    opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s linear .2s;
    animation: gbSafety 0s linear 12s forwards;   /* لو أي حاجة وقفت: بيختفي لوحده بعد 12 ثانية */
}
html.gs-booted .gs-boot { opacity: 0; visibility: hidden; }
html.gs-navigating .gs-boot { opacity: 1; visibility: visible; transition: none; animation: none; pointer-events: auto; }
@keyframes gbSafety { to { opacity: 0; visibility: hidden; } }

.gs-boot i { display: block; font-style: normal; }
.gb-sk { position: relative; overflow: hidden; background: #e6e8ec; border-radius: 10px; }
.gb-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); animation: gbShine 1.3s ease-in-out infinite; }
[dir="rtl"] .gb-sk::after { animation-name: gbShineR; }
@keyframes gbShine { to { transform: translateX(100%); } }
@keyframes gbShineR { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* القايمة الجانبية */
.gb-side { flex: 0 0 var(--gs-side-w, 250px); width: var(--gs-side-w, 250px); background: var(--gs-side-bg, #141414); padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
html.gs-collapsed .gb-side { flex-basis: var(--gs-side-w-collapsed, 68px); width: var(--gs-side-w-collapsed, 68px); padding: 18px 12px; }
html.gs-collapsed .gb-brand span { display: none; }
.gb-side .gb-sk { background: rgba(255, 255, 255, .07); }
.gb-side .gb-sk::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .07), rgba(255, 255, 255, 0)); }
.gb-brand { display: flex; align-items: center; gap: 10px; height: 44px; margin-bottom: 14px; }
.gb-logo { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; }
.gb-brand span { flex: 1; display: grid; gap: 7px; }
.gb-l1 { height: 11px; width: 70%; }
.gb-l2 { height: 9px; width: 45%; }
.gb-nav { height: 40px; border-radius: 12px; }

/* الشريط اللي فوق + المحتوى */
.gb-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gb-top { height: var(--gs-top-h, 60px); flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--gs-border, #e3e6ea); }
.gb-btn { width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto; }
.gb-title { width: 150px; height: 18px; }
.gb-sp { flex: 1; }
.gb-search { width: 300px; height: 40px; border-radius: 12px; }
.gb-av { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }
.gb-body { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.gb-hero { height: 150px; border-radius: 18px; }
.gb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gb-kpis .gb-sk { height: 104px; border-radius: 16px; background: #fff; border: 1px solid var(--gs-border, #e3e6ea); }
.gb-kpis .gb-sk::after { background: linear-gradient(90deg, rgba(236, 238, 241, 0), rgba(236, 238, 241, .9), rgba(236, 238, 241, 0)); }
.gb-card { background: #fff; border: 1px solid var(--gs-border, #e3e6ea); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.gb-ct { width: 180px; height: 16px; margin-bottom: 10px; }
.gb-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f2f4; }
.gb-row:last-child { border-bottom: 0; }
.gb-ra { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; }
.gb-row span { flex: 1; display: grid; gap: 8px; min-width: 0; }
.gb-r1 { height: 11px; width: 42%; }
.gb-r2 { height: 9px; width: 26%; }
.gb-re { width: 70px; height: 24px; border-radius: 999px; flex: 0 0 auto; }

/* الشريط اللي تحت (موبايل وتابلت) */
.gb-bnav { display: none; }

@media (max-width: 991.98px) {
    .gb-side, .gb-search { display: none; }
    .gb-top { padding: 0 12px; padding-top: env(safe-area-inset-top, 0px); height: calc(var(--gs-top-h, 60px) + env(safe-area-inset-top, 0px)); }
    .gb-body { padding: 12px; gap: 12px; }
    .gs-boot.has-bnav .gb-bnav {
        display: flex; align-items: center; justify-content: space-around; gap: 6px; position: absolute; left: 0; right: 0; bottom: 0;
        height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 0 10px env(safe-area-inset-bottom, 0px); background: #fff; border-top: 1px solid var(--gs-border, #e3e6ea);
    }
    .gb-bnav .gb-sk { width: 44px; height: 30px; border-radius: 10px; }
    .gb-bnav .gb-mid { width: 54px; height: 54px; border-radius: 50%; margin-top: -26px; }
}
@media (max-width: 767.98px) {
    .gb-hero { height: 112px; }
    .gb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .gb-kpis .gb-sk { height: 84px; }
    .gb-title { width: 110px; }
    .gb-re { width: 54px; }
}
@media (prefers-reduced-motion: reduce) { .gb-sk::after { animation: none; } }
@media print { .gs-boot { display: none !important; } }