/* ============================================================
   YUNIGE — Unified Sidebar CSS
   Yunige dizayn sistemine uygun tek sidebar CSS.
   Tüm sayfalar bu dosyayı link etmeli.
   ============================================================ */

/* Renk değişkenleri (yunige-theme.css ile uyumlu) */
:root {
  --yunige-navy:      #27206f;
  --yunige-navy-dark: #1d1757;
  --yunige-blue:      #2d7ed3;
  --yunige-blue-light:#eaf3ff;
  --yunige-pink:      #e97ab0;
  --yunige-orange:    #d85d1f;
  --yunige-bg:        #f3f3f3;
  --yunige-surface:   #ffffff;
  --yunige-border:    #d7dde8;
  --yunige-text:      #22304a;
  --yunige-muted:     #70809a;
  --yunige-shadow:    0 8px 24px rgba(39, 32, 111, 0.08);
  --yunige-radius:    14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: var(--yunige-bg);
  color: var(--yunige-text);
}

a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; }

.hidden { display: none !important; }

/* ---- Sayfa kabuğu ---- */
.page-shell { min-height: 100vh; }

/* ---- Üst bar ---- */
.top-header {
  background: #efefef;
  border-bottom: 1px solid #e4e4e4;
}
.top-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 24px 18px;
  text-align: center;
}
.logo-text {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--yunige-navy);
  line-height: 1;
}
.logo-text span { color: var(--yunige-pink); }
.logo-subtitle {
  margin-top: 8px;
  font-size: 13px;
  color: #6d6d6d;
  font-weight: 700;
}
.blue-line { height: 6px; background: var(--yunige-blue); }
.notice-bar {
  background: var(--yunige-orange);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
}

/* ---- Layout ---- */
.app-layout {
  display: flex;
  min-height: calc(100vh - 96px);
}

/* ---- Sidebar ---- */
.sidebar {
  width: 280px;
  min-width: 280px;
  background: #ffffff;
  border-right: 1px solid var(--yunige-border);
  padding: 24px 16px;
  box-shadow: var(--yunige-shadow);
  display: flex;
  flex-direction: column;
}

/* ---- Brand block ---- */
.sidebar-brand-block {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--yunige-border);
}
.sidebar-brand-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--yunige-navy);
  margin-bottom: 4px;
}
.sidebar-brand-caption {
  font-size: 13px;
  color: var(--yunige-muted);
}

/* ---- Accordion nav ---- */
.sidebar-accordion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

/* Section başlığı (flat, grup olmayan) */
.sidebar-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--yunige-muted);
  letter-spacing: 0.06em;
  padding: 14px 10px 4px;
}

/* Flat link (Home gibi) */
.sidebar-link {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--yunige-text);
  transition: background 0.15s, color 0.15s;
  border: 1px solid transparent;
  cursor: pointer;
}
.sidebar-link:hover {
  background: var(--yunige-blue-light);
  color: var(--yunige-blue);
}
.sidebar-link.active {
  background: var(--yunige-navy);
  color: #fff;
}

/* ---- Grup (accordion) ---- */
.sidebar-group {
  display: flex;
  flex-direction: column;
}

/* Grup başlığı butonu */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--yunige-text);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sidebar-toggle:hover {
  background: var(--yunige-blue-light);
  color: var(--yunige-navy);
}
.sidebar-group.open > .sidebar-toggle {
  color: var(--yunige-navy);
  background: #f0f4ff;
}

/* Ok ikonu */
.sidebar-toggle::after {
  content: '›';
  font-size: 20px;
  line-height: 1;
  opacity: 0.5;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.sidebar-group.open > .sidebar-toggle::after {
  transform: rotate(90deg);
}

/* Submenu */
.sidebar-submenu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding-left: 10px;
  margin-top: 2px;
}
.sidebar-group.open > .sidebar-submenu {
  display: flex;
}

/* Submenu link */
.sidebar-sublink {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--yunige-muted);
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.sidebar-sublink:hover {
  background: var(--yunige-blue-light);
  color: var(--yunige-blue);
}
.sidebar-sublink.active {
  background: var(--yunige-navy);
  color: #fff;
}

/* İç içe grup (Shipments > Ocean) */
.sidebar-group.nested > .sidebar-toggle {
  font-size: 13px;
  font-weight: 600;
  color: var(--yunige-muted);
  padding: 8px 14px;
}
.sidebar-group.nested > .sidebar-toggle:hover {
  color: var(--yunige-navy);
}
.sidebar-group.nested > .sidebar-submenu {
  padding-left: 10px;
}

/* Ayırıcı çizgi */
.sidebar-divider {
  height: 1px;
  background: var(--yunige-border);
  margin: 10px 0;
}

/* ---- Language switcher ---- */
.language-switcher {
  width: 100%;
  height: 38px;
  border: 1px solid var(--yunige-border);
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
  color: var(--yunige-text);
  font-size: 13px;
  margin-top: 6px;
  cursor: pointer;
}

/* ---- User paneli ---- */
.sidebar-user-panel {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #f8fbff;
  border: 1px solid #e2ebf7;
}
.sidebar-user-row {
  font-size: 13px;
  line-height: 1.8;
  color: var(--yunige-text);
}
.sidebar-logout-btn {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: var(--yunige-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.sidebar-logout-btn:hover {
  background: var(--yunige-navy-dark);
}

/* ---- Main içerik alanı ---- */
.main-content {
  flex: 1;
  min-width: 0;
  padding: 24px;
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .app-layout { flex-direction: column; }
  .sidebar {
    width: 100%;
    min-width: unset;
    border-right: none;
    border-bottom: 1px solid var(--yunige-border);
  }
  .main-content { padding: 20px; }
  .logo-text { font-size: 40px; }
}