/* =============================================================
   hub.css — modul HUB penceresinin YERLESIM sozlesmesi (tek kaynak).

   Yerlesim + kirilma YALNIZ burada tanimlanir; modul CSS'i sadece deri (renk, tipografi,
   hover) ekler. Yeni hub acan bu siniflari markup'a koyar, davranisi hazir gelir.

   Denetim: kok `node pencere-tara.js` — eksik sinifi ve kirilmasiz izgarayi bulur.
   ============================================================= */

:root {
    --p360-hub-sidebar-w: 252px;      /* acik menu genisligi */
    --p360-hub-sidebar-dar-w: 58px;   /* yalniz-ikon genisligi */
}

/* === GOVDE ===
   overflow:hidden SART: pencere kabugu kendi icinde kapali bir kutudur. Yoksa
   genis bir icerik (bento, tablo) flex kabini disari itip tum hub'a yatay
   scroll bindirir; sidebar da kayar. */
.p360-hub {
    height: 100%;
    display: flex;
    overflow: hidden;
    font-family: var(--font);
    color: var(--text);
    background: var(--gray-surface);
}

/* === SIDEBAR === */
.p360-hub-sidebar {
    width: var(--p360-hub-sidebar-w);
    flex-shrink: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
}

.p360-hub-sb-ust { flex-shrink: 0; }
/* Modulun kendi "sadece genis menude gorunsun" parcasi (Talep markasi gibi): bu sinifi
   alan oge iki daralma tetigi icin de gizlenir, modul kuralini iki kez yazmaz. */
.p360-hub-sb-kayan { flex: 1; min-height: 0; overflow-y: auto; }
/* Sidebar alti "Sistem Ozeti" karti. Deri BURADA: uc modul ayni yedi kurali kendi
   CSS'ine kopyalamisti, dordunculer de kopyalayacakti. Markup: Views/Shared/_HubOzetKart.cshtml */
.p360-hub-sb-kart {
    flex-shrink: 0;
    margin: 6px 10px 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.p360-hub-sb-kart .sb-bas {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    margin-bottom: 6px;
}
.p360-hub-sb-kart .birim {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}
.p360-hub-sb-kart .birim i { color: var(--mac-blue); flex-shrink: 0; }
.p360-hub-sb-kart .pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.p360-hub-sb-kart .pill-ist {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    background: var(--hover-bg);
    padding: 3px 8px;
    border-radius: 11px;
    color: var(--muted);
}
.p360-hub-sb-kart .pill-ist b {
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Yetki kapisi bir grubun BUTUN ogelerini gizlerse geriye yalniz baslik kalir — kullaniciya
   "burada bir sey olmali" diyen bos bir satir. Grup kendini de gizler. */
.p360-hub-grup:not(:has(.p360-hub-item)) { display: none; }

/* === ICERIK ===
   min-width:0 SART: flex item varsayilan min-width:auto ile icerigi kadar genisler
   -> uzun tablo/izgara sidebar'i ezer. min-height:0 ayni sey dikeyde (scroll cikmaz).

   DIKEY KAYDIRMA KABUGUN ISIDIR: ic ekran hicbir sey yazmasa da uzun icerik kayar.
   Yoksa .p360-hub'in overflow:hidden'i tasan icerigi scrollbar yerine KIRPAR — ekran
   render olur, veri az oldugunda kusur hic gorunmez.
   overflow-x acikca hidden: `overflow-y:auto` tek basina yazilirsa tarayici overflow-x'i
   de auto'ya cevirir ve genis tablo tum icerige yatay scroll bindirir (tablo kendi
   kabinda kayar — bilesenler/tablo.css). */
.p360-hub-icerik {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background: var(--gray-surface);
}
/* Ic ekran `height:100%` yazarsa bu kap tasmaz, kaydirmayi kendi ustlenir — cift scroll
   olmaz. O yol seciliyse kayan katmani kurmak ekranin sorumlulugu (pencere-tara F).

   TEK KATMAN: bes hub da icerigini dogrudan bu kaba basar. Talep bir donem araya ikinci bir
   host koyuyordu — ustunde kaymayan bir vekalet bandi tasiyacakti; bant hic yazilmadi, katman
   bos kaldi ve kabuk gereksiz yere iki desene bolundu. Icerikle kaymamasi gereken bir serit
   gerekirse desen wiki'de: kolon kap + `flex:1; min-height:0; overflow-y:auto` host. */

/* === DARALTILMIS MENU ===
   Iki yoldan tetiklenir: kullanici daraltma dugmesine basar (.dar) ya da pencere
   720px altina iner (asagidaki container sorgusu). Ikisi de ayni gorunume varir. */
.p360-hub-sidebar.dar { width: var(--p360-hub-sidebar-dar-w); }
.p360-hub-sidebar.dar .p360-hub-ara-sarmal,
.p360-hub-sidebar.dar .p360-hub-grup-bas,
.p360-hub-sidebar.dar .p360-hub-sb-kart,
.p360-hub-sidebar.dar .p360-hub-genis,
.p360-hub-sidebar.dar .etiket,
.p360-hub-sidebar.dar .adet,
.p360-hub-sidebar.dar .alarm { display: none; }
.p360-hub-sidebar.dar .p360-hub-sb-ust { justify-content: center; }
.p360-hub-sidebar.dar .p360-hub-item { justify-content: center; padding: 8px 0; }
/* Grup basligi gizlenince katlanir bir grubu acacak dugme de kalmaz — kapali dusen grubun
   ogeleri erisilemez olur. Dar menude govde daima acik. */
.p360-hub-sidebar.dar .p360-akordiyon-govde { grid-template-rows: 1fr; }

/* Olcu PENCERE genisligi (container appwin), tarayici degil — her pencere bagimsiz
   karar verir. Bu yuzden `@media` degil `@container`. */
@container appwin (max-width: 720px) {
    .p360-hub-sidebar { width: var(--p360-hub-sidebar-dar-w); }
    .p360-hub-sidebar .p360-hub-ara-sarmal,
    .p360-hub-sidebar .p360-hub-grup-bas,
    .p360-hub-sidebar .p360-hub-sb-kart,
    .p360-hub-sidebar .p360-hub-genis,
    .p360-hub-sidebar .etiket,
    .p360-hub-sidebar .adet,
    .p360-hub-sidebar .alarm { display: none; }
    .p360-hub-sidebar .p360-hub-sb-ust { justify-content: center; }
    .p360-hub-sidebar .p360-hub-item { justify-content: center; padding: 8px 0; }
    .p360-hub-sidebar .p360-akordiyon-govde { grid-template-rows: 1fr; }
}

/* === PANO IZGARASI (bento) — ortak ESIK sozlesmesi, ortak kural degil ===
   Panolar kutularini kendi siniflariyla yerlestirir (`.tgb-board .t5 { grid-column: 1/3 }`
   gibi); buradan yazilacak jenerik bir kural onlari ezemez (ozgulluk dusuk kalir) ya da
   ezmek icin yapay sekilde sisirilir. O yuzden kural degil ESIK paylasilir — her pano
   ayni iki basamagi kendi haritasiyla yazar:
       @container appwin (max-width: 1180px)  -> iki sutun
       @container appwin (max-width: 720px)   -> tek sutun
   Unutulani kok `node pencere-tara.js` yakalar. */