/* ───────────────────────────────────────────────────────────────────────
   CWS · Sol Dikey Sidebar — Çelikkol Görünümü (2026-05-08)
   Yatay topbar+navtabs yapısını sol dikey sidebar + üst topbar yapısına çevirir.
   Eski .navtabs ve .stok-subtabs gizlenir, yeni #sb-c sidebar'ı aktif olur.
   gp() fonksiyonu mevcut .ntab.active class'ı ile çalışır — JS dokunulmamıştır.
   ─────────────────────────────────────────────────────────────────────── */

/* ── #app grid layout: sidebar (240px) + üstte topbar (64px) + content ── */
#app{
  display:grid !important;
  grid-template-columns:240px 1fr !important;
  grid-template-rows:64px 1fr !important;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content" !important;
  height:100vh !important;
  width:100vw !important;
  overflow:hidden !important;
}

/* === TOPBAR — yeni Çelikkol görünüm === */
#app .topbar{
  grid-area:topbar !important;
  height:64px !important;
  border-bottom:1px solid var(--border, #e5e1d8) !important;
  background:#fbf9f4 !important;
  display:flex !important;
  align-items:center !important;
  padding:0 24px !important;
  gap:16px !important;
  position:relative !important;
  box-shadow:none !important;
  font-family:'Mulish', system-ui, sans-serif !important;
}
#app .topbar .brand{ display:none !important }

/* Sol: aktif sayfa adı */
#app .topbar .tb-page-title{
  display:flex; align-items:center; gap:14px;
  font-family:'Mulish', sans-serif; font-weight:500;
  font-size:15px; color:#222;
  flex:0 0 auto; min-width:140px;
}
#app .topbar .tb-burger{
  font-size:18px; color:#888; cursor:pointer;
  padding:4px 6px; border-radius:3px;
  transition:background .15s;
}
#app .topbar .tb-burger:hover{ background:#eee }

/* Orta: arama */
#app .topbar .tb-search{
  flex:1 1 auto;
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid #e5e1d8; border-radius:3px;
  padding:7px 14px; max-width:520px; margin:0 auto;
}
#app .topbar .tb-search input{
  border:0; outline:0; flex:1;
  font-size:13px; color:#222; background:transparent;
  font-family:inherit;
}
#app .topbar .tb-search input::placeholder{ color:#aaa }
#app .topbar .tb-search-key{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; color:#aaa;
  border:1px solid #ddd; border-radius:2px; padding:2px 6px;
  letter-spacing:.04em;
}

/* Sağ: kur + icons + profil */
#app .topbar .tb-right{
  display:flex; align-items:center; gap:12px;
  flex:0 0 auto;
}
#app .topbar .tb-kur{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; color:#888; letter-spacing:.04em;
}
#app .topbar .tb-kur b{
  color:#222; font-weight:600;
  font-family:'Mulish', sans-serif; font-size:13px;
  margin-left:3px;
}

#app .topbar .tb-icon{
  position:relative;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:#666;
  cursor:pointer; border-radius:50%;
  transition:background .15s, color .15s;
}
#app .topbar .tb-icon:hover{ background:#f0ebe0; color:#222 }
#app .topbar .tb-bell-dot{
  position:absolute; top:0; right:0;
  background:#a04040; color:#fff;
  font-family:'IBM Plex Mono', monospace; font-size:9px; font-weight:700;
  padding:1px 5px; border-radius:8px; letter-spacing:0;
  min-width:14px; text-align:center;
}

#app .topbar .tb-profile{
  display:flex; align-items:center; gap:10px;
  padding:4px 8px 4px 4px;
  border:1px solid #e5e1d8; border-radius:3px;
  cursor:pointer; transition:background .15s, border-color .15s;
}
#app .topbar .tb-profile:hover{ background:#fff; border-color:#8b6f3f }
#app .topbar .tb-profile-avatar{
  width:30px; height:30px; flex:0 0 30px;
  background:#8b6f3f; color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bastliga One', Georgia, serif;
  font-size:13px; font-weight:600; letter-spacing:.05em;
}
#app .topbar .tb-profile-info{ line-height:1.15 }
#app .topbar .tb-profile-name{
  font-size:12px; font-weight:600; color:#222;
}
#app .topbar .tb-profile-role{
  font-family:'IBM Plex Mono', monospace;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:#888;
}
#app .topbar .tb-chev{
  font-size:9px; color:#888; margin-left:2px;
}

#app .topbar .tb-logout{
  background:transparent; border:1px solid #e5e1d8; border-radius:3px;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#888; font-size:14px;
  transition:background .15s, color .15s, border-color .15s;
}
#app .topbar .tb-logout:hover{ background:#f0ebe0; color:#a04040; border-color:#a04040 }

/* Eski rbadge stilini override (artık tb-profile içinde) */
#app .topbar .rbadge{
  background:transparent !important; border:0 !important;
  padding:0 !important; color:#888 !important;
  font-family:'IBM Plex Mono', monospace !important;
  font-size:9px !important; letter-spacing:.18em !important;
  text-transform:uppercase !important;
}

/* fb-durum nokta — yeşil/kırmızı */
#app .topbar #fb-durum{
  font-size:18px; line-height:1;
  color:#7a8b7a;
}

/* Eski yatay navtabs ve stok subtabs gizle */
#app .navtabs,
#app .stok-subtabs{
  display:none !important;
}

/* Sayfa alanı — content grid'in altında, scroll burada */
#app .pages-wrap, #app .pages-area{
  grid-area:content !important;
  overflow-y:auto !important;
}
#app .page{
  /* Eski .page sayfaları — content grid alanında scroll olsun */
  grid-area:content;
}

/* ─── SOL SIDEBAR ─────────────────────────────────────────────────────── */
#sb-c{
  grid-area:sidebar;
  background:#1f1f20;
  color:#cecece;
  display:flex; flex-direction:column;
  border-right:1px solid #2a2a2c;
  overflow:hidden;
  font-family:'Mulish', system-ui, -apple-system, sans-serif;
}

/* Üst — Brand */
#sb-c .sb-brand{
  display:flex; align-items:center; gap:10px;
  padding:18px 16px 16px;
  border-bottom:1px solid #2a2a2c;
}
#sb-c .sb-brand img{ width:38px; height:38px; flex:0 0 38px; object-fit:contain }
#sb-c .sb-brand .sb-title{ line-height:1.1 }
#sb-c .sb-brand .sb-title h1{
  font-family:'Bastliga One', Georgia, serif; font-weight:400;
  font-size:18px; letter-spacing:.18em; margin:0; color:#f4f4f4;
}
#sb-c .sb-brand .sb-title small{
  font-family:'IBM Plex Mono', monospace;
  font-size:9px; letter-spacing:.28em; color:#888;
  text-transform:uppercase; display:block; margin-top:3px;
}

/* Menü scroll alanı */
#sb-c .sb-nav{
  flex:1; overflow-y:auto;
  padding:8px 0;
}
#sb-c .sb-nav::-webkit-scrollbar{ width:6px }
#sb-c .sb-nav::-webkit-scrollbar-thumb{ background:#3a3a3c; border-radius:3px }

/* Grup başlığı */
#sb-c .sb-section{
  padding:12px 18px 4px;
  font-family:'IBM Plex Mono', monospace;
  font-size:9px; letter-spacing:.22em; color:#666;
  text-transform:uppercase; font-weight:500;
}

/* Menü item — .ntab class'ı korunuyor (JS uyumu için) */
#sb-c .sb-item, #sb-c .ntab.sb-i{
  display:flex; align-items:center; gap:10px;
  padding:9px 18px;
  font-size:13px; color:#cecece;
  cursor:pointer; user-select:none;
  border-left:3px solid transparent;
  transition:background .12s, color .12s, border-color .12s;
  text-decoration:none;
}
#sb-c .sb-item:hover, #sb-c .ntab.sb-i:hover{
  background:#26262a; color:#f4f4f4;
}
#sb-c .sb-item.active, #sb-c .ntab.sb-i.active{
  background:#2a2a2e; color:#f4f4f4;
  border-left-color:#cecece;
  font-weight:600;
}

/* İkon (emoji) — kompakt sabit genişlik */
#sb-c .sb-item .ic, #sb-c .ntab.sb-i .ic{
  width:18px; flex:0 0 18px; text-align:center;
  opacity:.85; font-size:14px;
}

/* Badge (sayaç) */
#sb-c .sb-item .badge{
  margin-left:auto;
  background:#a04040; color:#fff;
  font-family:'IBM Plex Mono', monospace; font-size:9px; font-weight:700;
  padding:2px 6px; border-radius:8px; letter-spacing:.04em;
}

/* Stok grubu — collapse */
#sb-c .sb-group{ position:relative }
#sb-c .sb-group-head{
  display:flex; align-items:center; gap:10px;
  padding:9px 18px;
  font-size:13px; color:#cecece;
  cursor:pointer; user-select:none;
  border-left:3px solid transparent;
  transition:background .12s;
}
#sb-c .sb-group-head:hover{ background:#26262a; color:#f4f4f4 }
#sb-c .sb-group-head.active{ background:#2a2a2e; color:#f4f4f4; border-left-color:#cecece; font-weight:600 }
#sb-c .sb-group-head .arr{
  margin-left:auto; font-size:10px; transition:transform .15s;
}
#sb-c .sb-group.open .sb-group-head .arr{ transform:rotate(180deg) }
#sb-c .sb-children{
  display:none;
  background:#181819;
  border-top:1px solid #2a2a2c;
  border-bottom:1px solid #2a2a2c;
}
#sb-c .sb-group.open .sb-children{ display:block }
#sb-c .sb-children .sb-item{
  padding-left:48px; font-size:12px; color:#999;
}
#sb-c .sb-children .sb-item.active{ color:#f4f4f4 }

/* Alt — kullanıcı footer */
#sb-c .sb-foot{
  border-top:1px solid #2a2a2c;
  padding:12px 16px;
  font-family:'IBM Plex Mono', monospace;
  font-size:9px; letter-spacing:.18em; color:#666;
  text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center;
}
#sb-c .sb-foot a{ color:#888; text-decoration:none }
#sb-c .sb-foot a:hover{ color:#cecece }

/* Mobile — sidebar gizle, hamburger ile aç (basitlik için şimdilik sadece desktop) */
@media (max-width: 900px){
  #app{ grid-template-columns:0 1fr !important }
  #sb-c{ display:none }
}