/**
 * Omnex Layout — layouts/shell.css
 * Kabuk ızgarası: sidebar + (topbar / content / footer).
 * Config data-attribute'ları :root üzerindedir:
 *   data-density="compact"  data-sidebar="narrow"  data-footer="off"
 * Shell durumu: .ox-shell[data-collapsed="yes"] (ikon modu).
 */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* Kit genel gizleme kurali (kullanici karari 2026-09-14): `hidden` ozniteligi HER ZAMAN gizler. Tarayicinin kendi
   `[hidden] { display: none }` kurali `display` veren her sinifa (.ox-btn, .ox-badge, .ox-count...) yeniliyordu: tablo
   arama "x" dugmesi bos aramada, filtre sayaci "0", medya sayfasinda tablo disi ayar dugmesi gorunur kaliyordu (46 sayfa
   olculdu). Gostermek icin `hidden` kaldirilir; `style.display` ile gosterme bu kuralla CALISMAZ (kapi 49 kurali korur). */
[hidden]:not([hidden="until-found"]) { display: none !important; }

body {
  font-family: var(--ox-font-sans);
  font-size: var(--ox-text-base);
  line-height: var(--ox-leading-normal);
  color: var(--ox-fg);
  background: var(--ox-bg);
  /* Tipografi cilası (2026-07-21): IBM Plex antialiasing'siz KALIN/kaba basıyordu (daktilo hissi).
     Smoothing + optik boyut + legibility -> hafif, net, modern render. Font AYNI (IBM Plex Sans). */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}
::selection { background: var(--ox-selection); }

#app { height: 100%; }

/* --- Config: yoğunluk ---
   Üç seçenek var (`LayoutConfig` enum): compact · comfortable (VARSAYILAN, token'ların kendisi) · spacious.
   2026-09-09: `spacious` için kural HİÇ YOKTU → "Ferah" seçilince `data-density` yazılıyor ama hiçbir şey
   değişmiyordu. Aşağıdaki blok compact'in AYNA'sı: compact varsayılandan ne kadar kısaltıyorsa spacious o
   kadar uzatır (kontroller -4/+4, içerik dolgusu -6/+6, üst şerit -8/+8, taban punto -0.5/+0.5). */
:root[data-density="compact"] {
  --ox-control-h-sm: 26px;
  --ox-control-h-md: 32px;
  --ox-control-h-lg: 40px;
  --ox-text-base: 13.5px;
  --ox-content-pad: 18px;
  --ox-topbar-h: 48px;
}
:root[data-density="spacious"] {
  --ox-control-h-sm: 34px;
  --ox-control-h-md: 40px;
  --ox-control-h-lg: 48px;
  --ox-text-base: 14.5px;
  --ox-content-pad: 30px;
  --ox-topbar-h: 64px;
}

/* --- Config: durum çubuğu --- */
:root[data-footer="off"] .ox-footer { display: none; }

/* --- Config: kenar çizgileri --- */
:root[data-borders="off"] .ox-topbar,
:root[data-borders="off"] .ox-topnav,
:root[data-borders="off"] .ox-sidebar,
:root[data-borders="off"] .ox-footer { border-color: transparent !important; }

/* --- Iskelet --- */
/* Kolon "auto": genişlik .ox-sidebar'ın width'inden gelir; daralt/genişlet
   animasyonu width üzerinde yapılır (sidebar.css). grid-template-columns'a
   transition VERME — fr<->px karışımında Chrome ara değerde takılı
   kalabiliyor (2026-07-09'da canlı görüldü). */
.ox-shell {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100%;
  /* Kabuk viewport'a sabit: içerik/sidebar KENDİ içinde kayar, sayfa (ve
     böylece sidebar avatarı) kaymaz. min-height:0 olmadan grid çocuğu
     içeriğe göre büyüyüp tüm sayfayı kaydırır. */
  overflow: hidden;
}

/* Kenar çubuğu sağda */
:root[data-side="right"] .ox-shell { grid-template-columns: 1fr auto; }
:root[data-side="right"] .ox-sidebar { order: 2; }
:root[data-side="right"] .ox-main { order: 1; }

/* Üst menü modu: sidebar tamamen gizlenir, tek kolon */
:root[data-nav="top"] .ox-shell,
:root[data-nav="top"] .ox-shell[data-collapsed="yes"] { grid-template-columns: 1fr; }
:root[data-nav="top"] .ox-sidebar { display: none; }
:root[data-nav="top"] #oxSidebarToggle { display: none; }

.ox-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0; /* grid çocuğunun içeriğe göre büyümesini engelle -> .ox-content scroll'u devreye girer */
  height: 100%;
  position: relative;
}

/* Route geçişinde header altında ince accent süpürme çubuğu */
.ox-progress {
  position: absolute;
  top: var(--ox-topbar-h);
  left: 0;
  height: 2px;
  width: 0;
  background: var(--ox-accent);
  z-index: var(--ox-z-nav);
  pointer-events: none;
}
.ox-progress.is-run { animation: ox-progress-sweep 500ms var(--ox-ease) forwards; }
@keyframes ox-progress-sweep {
  0% { width: 0; opacity: 1; }
  80% { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

.ox-content {
  flex: 1;
  overflow-y: auto;
  /* Kaydırma çubuğu merkezi standarttan (components/scrollbar.css). Buraya scrollbar-color YAZMA: miras alınır ve
     sayfadaki bütün alanlarda standardı kapatır. */
  padding: var(--ox-cpad-d-top, var(--ox-content-pad))
    var(--ox-cpad-d-right, var(--ox-content-pad))
    var(--ox-cpad-d-bottom, var(--ox-content-pad))
    var(--ox-cpad-d-left, var(--ox-content-pad));
  outline: none;
  background: var(--ox-content-bg, transparent);
  color: var(--ox-content-fg, var(--ox-fg));
}
/* İçerik HER İKİ yerleşimde de tam genişlik kullanır: tek boşluk kaynağı
   panelden ayarlanan padding'dir (--ox-content-max sınırı kaldırıldı;
   ileride sayfa bazında opt-in daraltma sınıfı eklenebilir). */

/* --- Sayfa başlığı deseni --- */
.ox-page__title {
  margin: 0;
  font-size: var(--ox-text-xl);
  font-weight: var(--ox-weight-bold);
  letter-spacing: var(--ox-tracking-tight);
}
.ox-page__desc {
  margin: 4px 0 0;
  color: var(--ox-fg-muted);
  font-size: var(--ox-text-sm);
}

/* --- Public (kabuksuz) sayfa kapsayıcısı --- */
.ox-public { height: 100%; }

/* Dar-masaüstü: sidebar daralmış moda düşer. GENİŞLİK reflow'u (Win shell içi),
   cihaz DEĞİL — masaüstü penceresi daralınca kenar çubuğu ikonlaşır. */
@media (max-width: 900px) {
  .ox-sidebar { width: var(--ox-sidebar-w-collapsed); }
}

/* İçerik padding'i CİHAZA bağlı (LayoutConfig profilleri: tablet / telefon).
   Tek kaynak html[data-device]; kabuk mobil olsa da padding cihaz profiliyle gelir.
   padding-bottom (alt-nav payı) mobile.css'te sonradan gelip bu shorthand'i ezer. */
html[data-device="tablet"] .ox-content {
  padding: var(--ox-cpad-t-top, var(--ox-content-pad))
    var(--ox-cpad-t-right, var(--ox-content-pad))
    var(--ox-cpad-t-bottom, var(--ox-content-pad))
    var(--ox-cpad-t-left, var(--ox-content-pad));
}
html[data-device="phone"] .ox-content {
  padding: var(--ox-cpad-m-top, var(--ox-content-pad))
    var(--ox-cpad-m-right, var(--ox-content-pad))
    var(--ox-cpad-m-bottom, var(--ox-content-pad))
    var(--ox-cpad-m-left, var(--ox-content-pad));
}