/* ============================================================
   Component: sidebar — TEK KATMANLI indigo + accordion
   Açık:        indigo #211C45, sağ kenar 3px #C8521E, 258px
   Daraltılmış: turuncu #C8521E, sağ kenar 3px #9B3D14, 78px, ikon-only
   Davranış: sidebar.js (tek-açık accordion + body.sb-collapsed).
   ============================================================ */
:root {
  --sb-w: 258px;
  --sb-w-collapsed: 78px;
  --sb-indigo: #211C45;
  --sb-orange: #C8521E;
  --sb-orange-dark: #9B3D14;
  --sb-arrow: #FF7A45;
  --sb-label: #6E6797;
}

/* Kabuk: tek kolon, dikey akış */
.app-sidebar {
  font-family: 'Manrope', var(--font-sans), system-ui, sans-serif;
  display: flex; flex-direction: column;
  width: var(--sb-w);
  background: var(--sb-indigo);
  border-right: 3px solid var(--sb-orange);
  color: #fff; padding: 0; overflow: hidden;
  transition: width .2s ease, background .2s ease, border-color .2s ease;
}
body.sb-collapsed .app-sidebar {
  width: var(--sb-w-collapsed);
  background: var(--sb-orange);
  border-right-color: var(--sb-orange-dark);
}

/* ── Üst başlık: logo + marka + daralt oku ── */
.sb-head { display: flex; align-items: center; gap: 11px; padding: 16px 14px 12px; flex: 0 0 auto; }
.sb-logo {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; cursor: pointer; user-select: none;
  font-weight: 800; font-size: 15px; letter-spacing: .02em;
  background: var(--sb-orange); color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
  transition: background .2s ease, color .2s ease;
}
body.sb-collapsed .sb-logo { background: #fff; color: var(--sb-orange); }
.sb-logo.sb-logo--img { padding: 4px; background: #fff; }
.sb-logo.sb-logo--img img { width: 100%; height: 100%; object-fit: contain; display: block; }

.sb-brand { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.sb-brand-title { font-size: 14.5px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-brand-sub { font-size: 11px; font-weight: 600; color: #A9A3D4; white-space: nowrap; }

.sb-collapse {
  width: 26px; height: 26px; border: none; border-radius: 8px; cursor: pointer; flex: 0 0 auto;
  display: grid; place-items: center; background: #fff; color: var(--sb-orange);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.sb-collapse-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.sb-collapsed .sb-collapse { background: var(--sb-orange-dark); color: #fff; transform: rotate(180deg); }

/* "MENÜ" etiketi */
.sb-menu-label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--sb-label); padding: 6px 18px 8px; flex: 0 0 auto; }

/* ── Nav (scrollbar gizli) ── */
.sb-nav { flex: 1 1 auto; overflow-y: auto; padding: 0 12px 16px; display: flex; flex-direction: column; gap: 3px; scrollbar-width: none; }
.sb-nav::-webkit-scrollbar { display: none; }
/* Alt-sabit alan (Ayarlar gibi foot:true öğeler) — nav kaydırılsa da en altta sabit kalır. */
.sb-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; padding: 8px 12px 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sb-foot:empty { display: none; }
/* Footer (Ayarlar) aktifken: beyaz zemin + turuncu yazı/ikon (üst aktif stilin tersi). */
.sb-foot .sb-item.is-active { background: #fff; color: var(--sb-orange); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }

.sb-acc { display: flex; flex-direction: column; }

/* Düz link + accordion başlığı (ortak) */
.sb-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 12px; border-radius: 11px; border: none; background: none;
  font-family: inherit; font-size: 14px; font-weight: 600; text-align: left;
  color: #B8B2DE; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.sb-item .sb-ico { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sb-item-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.sb-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sb-item.is-active { background: var(--sb-orange); color: #fff; font-weight: 700; box-shadow: 0 4px 14px rgba(200, 82, 30, .4); }

/* Kritik stok rozeti — menü öğesinin sağında (Tema Ayarları → Başlangıç).
   Daraltılmış menüde etiket gizlenir ama rozet KALIR (uyarı kaybolmasın);
   sayı yerine küçük noktaya döner, ikon şeridinde yer kaplamasın. */
.sb-badge {
  flex: 0 0 auto; min-width: 20px; height: 18px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.sb-badge--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }
body.sb-collapsed .sb-badge { min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; }

/* Accordion başlığı sağ chevron (açıkken 180°) */
.sb-caret { width: 16px; height: 16px; flex: 0 0 auto; opacity: .65; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.sb-acc.is-open > .sb-item .sb-caret { transform: rotate(180deg); }

/* Accordion alt-liste (SOL ÇİZGİ YOK, padding-left:20) */
.sb-sub { display: none; flex-direction: column; gap: 1px; padding-left: 20px; margin: 2px 0 4px; }
.sb-acc.is-open > .sb-sub { display: flex; }
.sb-sublink {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: #9A93C4; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-sub-arrow { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: color .12s ease; }
.sb-sublink-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.sb-sublink:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sb-sublink:hover .sb-sub-arrow { color: var(--sb-arrow); }
.sb-sublink.is-active { background: rgba(255, 255, 255, .08); color: #fff; font-weight: 700; }
.sb-sublink.is-active .sb-sub-arrow { color: var(--sb-arrow); }

/* ── DARALTILMIŞ MOD (ikon-only) ── */
body.sb-collapsed .sb-head { flex-direction: column; gap: 10px; padding: 16px 0 12px; }
body.sb-collapsed .sb-brand,
body.sb-collapsed .sb-menu-label,
body.sb-collapsed .sb-item-label,
body.sb-collapsed .sb-caret { display: none; }
body.sb-collapsed .sb-sub { display: none !important; }
body.sb-collapsed .sb-nav { padding: 0 0 16px; align-items: center; gap: 4px; }
body.sb-collapsed .sb-foot { padding: 8px 0 12px; align-items: center; }
body.sb-collapsed .sb-acc { align-items: center; width: 100%; }
body.sb-collapsed .sb-item { justify-content: center; width: 46px; padding: 11px 0; gap: 0; color: rgba(255, 255, 255, .92); }
body.sb-collapsed .sb-item:hover { background: rgba(255, 255, 255, .16); color: #fff; }
body.sb-collapsed .sb-item.is-active { background: #fff; color: var(--sb-orange); box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }

/* ── Dar ekran / tablet (≤1023): tüm sidebar drawer; daima açık (258) görünür ── */
@media (max-width: 1023px) {
  body.sb-collapsed .app-sidebar { width: var(--sb-w); background: var(--sb-indigo); border-right-color: var(--sb-orange); }
  body.sb-collapsed .sb-head { flex-direction: row; gap: 11px; padding: 16px 14px 12px; }
  body.sb-collapsed .sb-brand,
  body.sb-collapsed .sb-menu-label,
  body.sb-collapsed .sb-item-label,
  body.sb-collapsed .sb-caret { display: ''; }
  body.sb-collapsed .sb-brand { display: flex; }
  body.sb-collapsed .sb-menu-label { display: block; }
  body.sb-collapsed .sb-item-label { display: block; }
  body.sb-collapsed .sb-caret { display: block; }
  body.sb-collapsed .sb-item { justify-content: flex-start; width: 100%; padding: 11px 12px; gap: 11px; color: #B8B2DE; }
  body.sb-collapsed .sb-logo { background: var(--sb-orange); color: #fff; }
  body.sb-collapsed .sb-collapse { display: none; }
  .sb-collapse { display: none; }
}