/* ============================================================
   Component: sidebar
   ============================================================ */
.app-sidebar { display: flex; flex-direction: column; overflow-y: auto; }

.sb-head {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--topbar-height); padding: 0 var(--space-5);
  border-bottom: 1px solid var(--sb-border); flex-shrink: 0;
}
.sb-logo {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff; font-weight: 800; font-size: 14px;
  flex-shrink: 0; overflow: hidden;
}
/* Firma logosu varsa: turuncu yerine BEYAZ kutu, içinde logo */
.sb-logo--img { background: #fff; padding: 3px; }
.sb-logo--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sb-brand-wrap { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sb-brand { color: var(--sb-text-active); font-weight: 700; font-size: var(--fs-md); }
.sb-subtitle { color: var(--sb-text); font-weight: 500; font-size: var(--fs-xs); letter-spacing: .02em; }
.sb-close {
  margin-left: auto; color: var(--sb-text); font-size: 24px; line-height: 1;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
}
.sb-close:hover { background: var(--sb-hover); color: #fff; }

.sb-nav { padding: var(--space-3) var(--space-3) var(--space-6); }

/* — Statik bölüm başlığı (eski sistem; accordion YOK, öğeler hep görünür) — */
.sb-section { margin: 2px 0; }
.sb-section-label {
  padding: var(--space-3) var(--space-3) 6px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sb-text-muted, color-mix(in srgb, var(--sb-text) 60%, transparent));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nav-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 9px var(--space-3); margin: 2px 0;
  border-radius: 0;   /* düz dikdörtgen — aktif öğenin turuncu sol kenarı kıvrılmasın */
  color: var(--sb-text); font-size: var(--fs-sm); font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.nav-link:hover { background: var(--sb-hover); color: var(--sb-text-active); }
.nav-link.is-active {
  background: var(--sb-active); color: var(--sb-text-active);
  box-shadow: inset 3px 0 0 var(--brand);
}

.nav-ico {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* — Accordion (katlanabilir bölümler) — */
.sb-acc { margin: 2px 0; }
/* Bölüm başlıkları = ince CAPTION: küçük, soluk, harf-aralıklı + küçük ikon
   (tam-boy büyük-harf "bağıran" görünümün yerine). */
.sb-acc-head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px var(--space-3) 7px; margin: 12px 0 1px; border: none; background: transparent;
  color: color-mix(in srgb, var(--sb-text) 65%, transparent);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; text-align: left;
  cursor: pointer; border-radius: var(--radius-sm);
  transition: color var(--transition);
}
.sb-acc-head:hover { color: var(--sb-text-active); }
.sb-acc-head .nav-ico { width: 16px; height: 16px; opacity: .65; }
.sb-acc-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.sb-acc.is-open > .sb-acc-head { color: var(--sb-text-active); }
.sb-acc.is-open > .sb-acc-head .nav-ico { opacity: .85; }
/* Tek öğeli bölüm linki (örn. ÇALIŞANLAR) = bölüm başlığı caption'ı gibi */
.nav-link--section {
  text-transform: uppercase; letter-spacing: .07em;
  font-size: var(--fs-xs); font-weight: 700; gap: 9px;
  color: color-mix(in srgb, var(--sb-text) 65%, transparent);
  padding: 9px var(--space-3) 7px; margin-top: 12px;
}
.nav-link--section .nav-ico { width: 16px; height: 16px; opacity: .65; }
.sb-acc-chev {
  width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--transition); opacity: .45;
}
.sb-acc.is-open > .sb-acc-head .sb-acc-chev { transform: rotate(180deg); }
.sb-acc-body {
  max-height: 0; overflow: hidden; transition: max-height var(--transition);
}
.sb-acc.is-open > .sb-acc-body { max-height: 600px; }
/* Alt linkleri hafifçe içerle (gruba ait olduğu belli olsun) */
.sb-acc-body .nav-link { padding-left: calc(var(--space-3) + 14px); font-weight: 500; }

/* — Alt: daralt/genişlet butonu — */
.sb-foot {
  margin-top: auto; flex-shrink: 0;
  padding: var(--space-3);
  border-top: 1px solid var(--sb-border);
}
.sb-collapse {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: 10px var(--space-3); border-radius: var(--radius-sm);
  color: var(--sb-text); font: inherit; font-size: var(--fs-base); font-weight: 600;
  cursor: pointer; background: none; border: none;
  transition: background var(--transition), color var(--transition);
}
.sb-collapse:hover { background: var(--sb-hover); color: var(--sb-text-active); }
.sb-collapse-ico {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--transition);
}
.sb-collapse-txt { white-space: nowrap; }

@media (min-width: 1024px) {
  .sb-close { display: none; }
}

/* Mobilde (çekmece modu) daraltma anlamsız → gizle */
@media (max-width: 1023px) {
  .sb-foot { display: none; }
}

/* — Masaüstü daraltılmış mod (sadece ikon) — */
@media (min-width: 1024px) {
  .app-shell.is-collapsed { grid-template-columns: var(--sidebar-collapsed) 1fr; }
  .app-shell.is-collapsed .app-sidebar { width: var(--sidebar-collapsed); }
  .app-shell.is-collapsed .sb-head { padding: 0; justify-content: center; }
  .app-shell.is-collapsed .sb-brand-wrap { display: none; }
  /* Daralt: accordion başlıkları anlamsız → gizle, alt linkleri düz ikon olarak aç */
  .app-shell.is-collapsed .sb-section-label { display: none; }
  /* Daraltılmış mod: accordion başlıklarını gizle, gövdeleri hep aç → düz ikon listesi. */
  .app-shell.is-collapsed .sb-acc-head { display: none; }
  .app-shell.is-collapsed .sb-acc-body { max-height: none; overflow: visible; }
  .app-shell.is-collapsed .sb-acc-body .nav-link { padding-left: 0; padding-right: 0; }
  .app-shell.is-collapsed .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
  .app-shell.is-collapsed .nav-link span { display: none; }
  /* Tek-öğeli bölüm linki daraltılmışta düz ikon (caption ikonu küçülmesin) */
  .app-shell.is-collapsed .nav-link--section { margin-top: 2px; }
  .app-shell.is-collapsed .nav-link--section .nav-ico { width: 20px; height: 20px; opacity: 1; }
  .app-shell.is-collapsed .sb-collapse { justify-content: center; }
  .app-shell.is-collapsed .sb-collapse-txt { display: none; }
  .app-shell.is-collapsed .sb-collapse-ico { transform: rotate(180deg); }
}