/* ============================================================
   DRM Budget — Global UX Tweaks
    1) Desktop layout must use real dimensions, not CSS zoom
   2) Mobile NavMenu must always win over chat FAB / drawer
   3) Hide chat FAB / drawer while mobile NavMenu is open
   ============================================================ */

/* ---------- 1. Desktop layout scale ---------- */
/* Do not use CSS zoom on the root element or on .main-content: both the sidebar
   (position:fixed) and .top-header (position:fixed, nested inside .main-content)
   break because zoom creates a new coordinate/containing-block context that fixed
   descendants get miscalculated against. Scoping the scale to .content instead —
   the routed page body only, a sibling of .top-header inside .main-content — scales
   text/spacing uniformly for the actual work area while the sidebar and header stay
   full-size, fixed and functional regardless of the chosen density. Controlled by
   the "density" control in MainLayout's top-header (see wwwroot/js/ui-scale.js).

   DENENDİ VE GERİ ALINDI (10 Ağu 2026) — ölçeği KÖKE (`html { zoom }`) taşıyıp
   kenar çubuğunu, üst çubuğu ve body'ye eklenen Syncfusion popup'larını da kapsamak
   denendi. Kök zoom düzeni doğru ölçekliyor AMA JS ile konumlandırılan popup'ları
   bozuyor: Syncfusion çapanın `getBoundingClientRect()` değerini okuyup `left/top`u
   inline yazar, kök zoom bu değeri BİR KEZ DAHA ölçekler ve açılan liste çapasından
   kayar. `currentCSSZoom` ile bölen bir JS telafi katmanı da denendi, kaymayı
   gidermedi. Tarayıcının kendi zoom'unda bu sorun yoktur çünkü o CSS pikselinin
   boyutunu değiştirir — tek koordinat uzayı vardır, CSS `zoom` ise iki uzay yaratır.
   Tekrar denemeden önce gerçek tarayıcıda ölçüm yapın. */
:root { --ui-scale: 1; }
.content { zoom: var(--ui-scale); }

/* ---------- 1b. Tam-ekran overlay'lerin zoom telafisi ----------
   `zoom` yalnızca yazı/kutu ölçüsünü değil, viewport birimlerini de ölçekler:
   .content içinde zoom .9 iken `position:fixed; inset:0` bir overlay 100vw×100vh
   yerine 90vw×90vh boyutunda çizilir. Sonuç, ekran görüntüsünde bildirilen
   "gölge yarım kalıyor" hatasıdır — sağda ve altta karartılmamış birer şerit kalır.

   Çözüm: overlay'in kendisine ters zoom uygulayıp ölçeği 1'e döndürmek
   (0.9 × 1/0.9 = 1). --ui-scale:1 iken calc(1/1)=1 olduğu için varsayılan
   yoğunlukta hiçbir etkisi yoktur. Diyalog gövdesi de böylece tam boyda açılır.

   Yeni bir tam-ekran overlay yazarken ya aşağıdaki listeye ekleyin ya da
   elemente `ui-fixed-overlay` sınıfını verin. */
.content .modal,
.content .modal-backdrop,
.content .offcanvas,
.content .offcanvas-backdrop,
.content .e-dlg-container,
.content .e-dlg-overlay,
.content .ent-modal-overlay,
.content .comment-panel-overlay,
.content .ui-fixed-overlay {
    zoom: calc(1 / var(--ui-scale));
}

/* ---------- 2. Mobile sidebar wins over chat (z-index war) ---------- */
@media (max-width: 991.98px) {
    .sidebar { z-index: 11000 !important; }
    .mobile-overlay { z-index: 10999 !important; }

    /* While the mobile menu is open, hide chat FAB / drawer / overlay so
       NavMenu remains fully usable. We use the body-level marker class
       toggled by MainLayout. */
    body.mobile-menu-open .online-users-fab,
    body.mobile-menu-open .online-users-drawer,
    body.mobile-menu-open .drawer-overlay,
    .page.mobile-menu-open .online-users-fab,
    .page.mobile-menu-open .online-users-drawer,
    .page.mobile-menu-open .drawer-overlay {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Make sure the hamburger toggle is itself above the FAB even when
       the menu is closed, so the user can always reach the menu. */
    .mobile-menu-toggle { position: relative; z-index: 11050; }
}

/* ---------- 3. Mobile drawer should not steal full screen if user
              tries to scroll horizontally ---------- */
@media (max-width: 576px) {
    .online-users-fab { bottom: 88px !important; right: 12px !important; }
}