/**
 * 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; }

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);
}
::selection { background: var(--ox-selection); }

#app { height: 100%; }

/* --- Config: yoğunluk --- */
: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;
}

/* --- 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%;
}

/* 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;
  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;
  /* İnce, tema uyumlu scrollbar (içerik zemini boyalıysa ona da uyar) */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ox-content-fg, var(--ox-fg)) 16%, transparent) transparent;
  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%; }

/* Tablet: sidebar daralmış moda düşer (F3'te mobil ayrı kabuğa geçer) */
@media (max-width: 900px) {
  .ox-sidebar { width: var(--ox-sidebar-w-collapsed); }
  :root[data-nav="top"] .ox-shell { grid-template-columns: 1fr; }
  .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));
  }
}

@media (max-width: 600px) {
  .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));
  }
}