/* ============================================================
   RideOps Design System — layout.css
   Sayfa iskeleti: içerik genişliği, üst/yan boşluklar,
   8px ritim sistemi ile hizalı bölüm aralıkları.
   ============================================================ */

.fi-main {
    padding-top: var(--ro-space-4);
    padding-bottom: var(--ro-space-6);
}

.fi-page {
    display: flex;
    flex-direction: column;
    gap: var(--ro-space-4);
}

/* İçerik genişliği — geniş ekranlarda nefes alan, taşmayan bir merkez sütun */
.fi-simple-page {
    max-width: 460px;
}

/* Sayfa içi bölüm grupları arası ritim */
.fi-section + .fi-section,
.fi-page-header-widgets + .fi-section {
    margin-top: 0;
}

.fi-page-header-widgets,
.fi-page-footer-widgets {
    display: flex;
    flex-direction: column;
    gap: var(--ro-space-4);
}

/* Widget grid'lerinin kart aralarını 8px sistemine sabitle */
.fi-wi-stats-overview-stats-ctn {
    gap: var(--ro-space-3) !important;
}

/* Ana içerik ile yan panel (AI asistan vb.) düzeni için ortak yardımcı sınıf */
.ro-layout {
    display: flex;
    flex-direction: row;  /* yatay 2 sütun — kolon yönünü açıkça sabitle */
    flex-wrap: nowrap;    /* sarılma yok */
    gap: var(--ro-space-4);
    align-items: flex-start;
    width: 100%;          /* grid parent içinde tam genişlik */
}
.ro-layout-main {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ro-space-4);
}
.ro-layout-aside {
    flex: 0 0 360px;
    width: 360px;
    min-width: 0;
    align-self: flex-start;
    position: sticky;
    top: calc(var(--ro-topbar-height) + 16px);
    max-height: calc(100vh - var(--ro-topbar-height) - 32px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ro-space-3);
}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD 3-SÜTUN DÜZENİ — KALICI (!important ile cascade kilitli)
   ----------------------------------------------------------------
   Tarayıcıda doğrulandı: !important OLMADAN başka bir kural
   .dash-aside'ı display:block + tam genişlik yapıp eziyor → sayfa
   yenilenince AI paneli alta düşüyordu. Tüm temel düzen özellikleri
   bu yüzden !important ile sabitlenir (.fi-*, Tailwind utility ve
   blade inline kuralları ezemesin). Responsive override (≤1100px)
   responsive.css'te, layout.css'ten SONRA yüklenir → orada da
   !important kullanılarak bu kuralları geçersiz kılar.
   ════════════════════════════════════════════════════════════════ */
.dash-layout{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:24px !important;align-items:flex-start !important;width:100% !important;}
.dash-main{flex:1 1 0% !important;min-width:0 !important;max-width:100% !important;}
.dash-aside{flex:0 0 360px !important;width:360px !important;position:sticky !important;top:88px !important;align-self:flex-start !important;max-height:calc(100vh - 104px) !important;overflow:auto !important;display:flex;flex-direction:column;gap:12px;transition:flex-basis .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),opacity .2s ease;}
.dash-main *{min-width:0;}
.sc-grid{display:grid !important;grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)) !important;gap:16px !important;width:100% !important;}
.dash-layout.aside-collapsed .dash-aside{flex:0 0 0 !important;width:0 !important;overflow:hidden !important;opacity:0 !important;pointer-events:none !important;}

/* ── Operasyon Panosu — aynı 3-sütun düzeni, !important kilitli ── */
/* NOT (2026-07-06, STICKY KALDIRILDI): Sağ ray artık sabitlenmez — doğal akar.
   Denenen sticky+iç-kaydırma (max-height:calc(100vh-104px)+overflow-y:auto) yine bir
   iç fold yarattı: viewport kısa olduğunda AI Asistan + Harita üst üste gelince Harita
   ray-scroll altına düştü → "harita+şoför yine gitti". Sticky'yi TAMAMEN kaldırdık:
   position:static + max-height:none + overflow:visible → ray tüm bölümleriyle sayfa
   akışında görünür, hiçbir bölüm fold/kırpma altına düşmez. Ray sayfayla birlikte kayar
   (yukarıda sabit KALMAZ) — kabul edilen davranış. Mobil (≤1100px) responsive.css'te
   zaten static → aynı davranış. */
.opboard-layout{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:24px !important;align-items:flex-start !important;width:100% !important;}
.opboard-main{flex:1 1 0% !important;min-width:0 !important;max-width:100% !important;}
.opboard-side{flex:0 0 360px !important;width:360px !important;position:static !important;align-self:flex-start !important;max-height:none !important;overflow:visible !important;display:flex;flex-direction:column;gap:12px;transition:flex-basis .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),opacity .2s ease;}
.opboard-main *{min-width:0;}
.opboard-layout.aside-collapsed .opboard-side{flex:0 0 0 !important;width:0 !important;overflow:hidden !important;opacity:0 !important;pointer-events:none !important;}

/* ── AI panelini GERİ AÇMA tutamağı ─────────────────────────────────
   .dash-aside / .opboard-side daraltılınca gizlenir; içindeki ▶ buton
   da gizlendiğinden geri açılamaz. Bu tutamak aside'ın DIŞINDA, sabit
   konumlu ayrı bir element → sadece KAPALIYKEN (x-show="!asideOpen")
   görünür ve paneli yeniden açar. */
[x-cloak]{display:none !important;}
.aside-reopen-handle{
    position:fixed;
    right:0;
    top:50%;
    transform:translateY(-50%);
    z-index:50;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    width:40px;
    padding:16px 0;
    border:none;
    cursor:pointer;
    background:var(--ro-primary);
    color:#fff;
    border-radius:12px 0 0 12px;
    box-shadow:-3px 0 14px rgba(0,0,0,.28);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    writing-mode:vertical-rl;
    transition:transform var(--ro-transition), background var(--ro-transition), box-shadow var(--ro-transition), filter var(--ro-transition);
}
.aside-reopen-handle:hover{
    transform:translateY(-50%) scale(1.06);
    filter:brightness(1.08);
    box-shadow:-5px 0 20px rgba(249,115,22,.45);
}
.aside-reopen-handle svg{ width:20px; height:20px; }
.dark .aside-reopen-handle{ box-shadow:-3px 0 14px rgba(0,0,0,.5); }
.dark .aside-reopen-handle:hover{ box-shadow:-5px 0 20px rgba(249,115,22,.55); }

/* ── Boşluk sıkılaştırma ─────────────────────────────────────── */
main.fi-main {
    padding-top: 12px !important;
}

.fi-page > section {
    padding-top: 8px !important;
    row-gap: 20px !important;
}

.fi-header {
    margin-bottom: 4px !important;
}

/* ── Stat kart etiketleri kesilmesin ─────────────────────────── */
.sc-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}