:root {
  --bg: #0f172a;
  --surface: #0b1220;
  --surface-2: #111827;
  --accent: #10b981;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #1f2937;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px;
}
html[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f8fafc;
  --surface-2: #f1f5f9;
  --accent: #000000;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}
html[data-theme="dark"] {
  --bg: #0a0a0a;
  --surface: #1b1e22;
  --surface-2: #20242a;
  --border: #2a313a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--surface);
  color: var(--text);
}
a { color: var(--text); text-decoration: none; }
.app-header {
  position: static; top: auto; background: var(--bg);
  padding: var(--space-4) var(--space-6);
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
}
.logo { font-weight: 700; letter-spacing: .3px; }
.logo-img { height: 28px; width: auto; display: block; }
.logo-img { transition: filter .2s ease; }
html[data-theme="light"] .logo-img { filter: none; }
html[data-theme="dark"] .logo-img { filter: invert(1) brightness(1.5) contrast(1.05); }
.logo-text { font-weight: 700; letter-spacing: .3px; }
.user-info .btn { background: var(--surface-2); padding: 6px 12px; border-radius: 12px; margin-left: 8px; }
.app-container { display: flex; }
.sidebar {
  width: 260px; min-height: calc(100vh - 72px);
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  position: sticky; top: 72px;
  transition: width .2s ease;
}
.sidebar.collapsed { width: 76px; }
/* Early-apply ile HTML attribute üzerinden collapsed */
html[data-sidebar="collapsed"] .sidebar { width: 76px; }
html[data-sidebar="collapsed"] .sidebar .label { display: none; }
.sidebar ul { list-style: none; margin: 0; padding: var(--space-4); }
.sidebar li { margin-bottom: var(--space-2); }
.sidebar a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px 12px; border-radius: 8px; color: var(--text);
}
.sidebar a:hover { background: var(--surface-2); }
.sidebar a.active { background: #0e1a2f; border: 1px solid #1f2a45; }
html[data-theme="light"] .sidebar a.active { background: #e2e8f0; border-color: #cbd5e1; color: #111827; }
.sidebar a.disabled { opacity: 0.6; pointer-events: none; }
.sidebar .label { white-space: nowrap; }
.sidebar.collapsed .label { display: none; }
.content { flex: 1; padding: var(--space-6) var(--space-7); }
.card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  /* shadow effect disabled */
}
html[data-theme="light"] .card { background: #ffffff; }
html[data-theme="dark"] .card { background: var(--surface); }
.form { display: grid; gap: var(--space-4); max-width: 520px; }
label { font-size: 14px; color: var(--muted); }
input, select {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; color: var(--text);
}
.btn { display: inline-block; background: var(--surface-2); color: var(--text); border: none; padding: 10px 14px; border-radius: 8px; cursor: pointer; }
.btn.primary { background: var(--accent); color: #ffffff; }
.btn.btn-publish { background: #111827; color: #ffffff; }
html[data-theme="dark"] .btn.btn-publish { background: var(--accent); color: #ffffff; }
.btn.btn-delete { background: #ef4444; color: #ffffff; }
html[data-theme="dark"] .btn.btn-delete { background: #b91c1c; color: #ffffff; }
.alert { background: var(--surface-2); color: var(--text); padding: 8px 12px; border-radius: 8px; }
.alert.error { background: #d32f2f; color: #ffffff !important; }
.alert.success { background: #14532d; color: #ffffff !important; }
.app-footer { padding: var(--space-6); text-align: center; color: var(--muted); border-top: 1px solid var(--border); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.checkbox { display: flex; align-items: center; gap: var(--space-3); }

/* Auth sayfası düzeni */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.auth-card { width: 100%; max-width: 420px; }
.input-row { position: relative; }
.input-row input { padding-right: 42px; }
.input-action { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--muted); cursor: pointer; }
.input-action .material-symbols-outlined { font-size: 20px; }

/* Header butonları */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); width: 36px; height: 36px; padding: 0; border-radius: 8px; cursor: pointer; }
html[data-theme="dark"] .icon-btn { border-radius: 12px; }
.icon-btn:hover { background: var(--surface); }
/* Header icon sizing for symmetry */
.icon-btn .material-symbols-outlined { font-size: 22px; }

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 20px; line-height: 1;
}

/* Basit tab navigasyonu */
.tab-nav { display:flex; gap: 8px; }
.tab-nav .btn { background: var(--surface-2); }
.tab-nav .btn.primary { background: var(--accent); }

/* Tablo stilleri */
/* Ratings tablo alanı: boşlukları kaldır, içerik uzun olursa iç scroll yap */
.table-container { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); max-height: calc(100vh - 240px); }
.table { width: 100%; border-collapse: collapse; }
.table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: center; }
.table th { position: sticky; top: 0; background: var(--surface-2); text-align: center; z-index: 3; font-weight: 700; padding: 12px 14px; text-transform: uppercase; }
.table tr:nth-child(even) { background: rgba(255,255,255,0.03); }
.table .num { text-align: center; font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; font-size: 12px; }
.badge.up { background: #0b3a1e; color: #93e29f; }
.badge.down { background: #3a0b0b; color: #e29393; }
.badge.flat { background: var(--surface-2); color: var(--text); }

/* Filtre paneli */
.filters { margin-bottom: var(--space-4); }
.filters.hidden { display: none; }
.filters label { color: var(--muted); font-size: 13px; }
.filters input, .filters select { min-height: 36px; }
.filters.minimal { padding: var(--space-3); }
.filters.minimal input, .filters.minimal select { background: var(--surface-2); border: 1px solid var(--border); padding: 8px 10px; border-radius: 8px; }
.filters.minimal label { font-size: 12px; color: var(--muted); }
/* Profesyonel filtre bar düzeni */
.filters .filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.filters .group-left { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--space-4); }
.filters .group-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-left: auto; flex: 1 1 480px; }
.filters .field { display: flex; align-items: center; gap: 8px; }
.filters .field.grow { flex: 1; min-width: 300px; }
.filters .field.sm { width: 110px; }
.filters .field.md { width: 210px; }
.filters .field input, .filters .field select { width: 100%; }
.filters .field .label { display: none; }
.filters .actions { display: flex; gap: 8px; }
.filters.flat input, .filters.flat select { border-radius: 0 !important; }

/* Gün dropdown’u için tam genişlik */
.filters .field.md.md-full { flex: 1 1 480px; min-width: 480px; width: auto; }

/* Z-index düzeltmeleri: filtre açılır menülerinin üstte kalması için */
.filters { position: relative; z-index: 10; }
.table-container { position: relative; z-index: 1; }

/* Dropdown kesilmesini önlemek için overflow görünür yap ve sağ boşluk ekle */
.filters, .filters .filter-bar, .filters .group-right, .filters .group-left { overflow: visible; }
.filters .filter-bar { padding-right: 16px; }
.filters.card { overflow: visible; }

/* Sıralama ikonları için başlık stilleri */
.table th { white-space: nowrap; }
.table th .sort-icon.material-symbols-outlined { font-size: 18px; margin-left: 6px; vertical-align: middle; opacity: 0.6; }
.table th[data-sort="asc"] .sort-icon.material-symbols-outlined,
.table th[data-sort="desc"] .sort-icon.material-symbols-outlined { opacity: 1; color: var(--accent); }

/* Çoklu seçim drop-down için uygun yükseklik ve görünürlük */
.filters .field select[multiple] { min-height: 150px; overflow: auto; }

/* Gün seçimi: kapalı dropdown + checkbox listesi */
.dropdown { position: relative; width: 100%; }
.btn.btn-input { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 36px; padding: 8px 12px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px; }
.dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 0; box-shadow: var(--shadow-2); padding: 8px; max-height: 280px; overflow: auto; display: none; z-index: 20; }
.dropdown-menu.open { display: block; }
.dropdown-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 2px 8px; }
.md-list { list-style: none; margin: 0; padding: 0; }
.md-list li { display: flex; align-items: center; padding: 8px 6px; }
.checkbox input { margin-right: 8px; }
.checkbox span { font-size: 16px; }

/* Tablo genişliği: konteynere sığacak şekilde min-width 100% */
.table { min-width: 100%; }

/* Admin sayfasındaki düzenleme tablosu için responsive konteyner: iç scroll etkin */
.table-responsive { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); max-height: calc(100vh - 240px); }
.table-responsive .table { min-width: 980px; }
.table-container .table { min-width: 980px; }

/* İçerik genişliği: biraz daraltılmış merkezli görünüm */
.content { flex: 1; padding: var(--space-3) var(--space-6); max-width: none; width: 100%; margin: 0; }

/* Değerlendirme sayfası: iki sütun düzeni ve istatistikler */
.layout-2col { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-5); align-items: start; }
.aside { position: sticky; top: 84px; }
.stat-list { display: grid; gap: var(--space-4); }
.stat-card { display: grid; gap: 6px; }
.stat-title { font-size: 13px; color: var(--muted); }
.stat-value { font-size: 14px; display: flex; align-items: center; justify-content: space-between; }
.chart-card { padding: 0; }
.chart-card.full { height: 40vh; }
.chart-card.full canvas { width: 100%; height: 100%; display: block; }

/* Üstte yatay istatistik satırı */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-3); }

@media (max-width: 920px) {
  .layout-2col { grid-template-columns: 1fr; }
  .aside { position: static; }
}
/* --- Görsel düzen geri yüklendi: agresif küçültmeler kaldırıldı --- */
/* Liste Üretim Tarihi (as_of) ve kaynak tarih (source_as_of) için keskin köşeler */
#as_of, #source_as_of { border-radius: 0; }

/* Light mode badge görsel uyumluluk: koyu siyah yuvarlak yerine yumuşak arka plan + sınır */
html[data-theme="light"] .badge { border: 1px solid var(--border); }
html[data-theme="light"] .badge.up { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
html[data-theme="light"] .badge.down { background: #fee2e2; color: #7f1d1d; border-color: #fecaca; }
html[data-theme="light"] .badge.flat { background: #eef2f7; color: #334155; border-color: #d1d5db; }
/* Light mod zebra satırları: odd #ffffff, even #f9fafb */
html[data-theme="light"] .table tr:nth-child(odd) { background: #ffffff; }
html[data-theme="light"] .table tr:nth-child(even) { background: #f9fafb; }

/* Tema ikonu daha küçük */
#themeToggle .material-symbols-outlined { font-size: 18px; }

/* Aktif kullanıcı rozetini buton gibi göster */
.user-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
 .user-badge img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block; }
 .user-badge .material-symbols-outlined { font-size: 20px; }
.user-badge .user-name { font-weight: 500; font-size: 15px; }
html[data-theme="light"] .user-badge { background: #eef2f7; border-color: #d1d5db; color: #111827; }
html[data-theme="light"] .badge.up { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
html[data-theme="light"] .badge.down { background: #fee2e2; color: #7f1d1d; border-color: #fecaca; }
html[data-theme="light"] .badge.flat { background: #eef2f7; color: #334155; border-color: #d1d5db; }
/* Header nav aktif durum */
.user-info .btn.active { background: #0e1a2f; color: var(--text); border: 1px solid #1f2a45; }
html[data-theme="light"] .user-info .btn.active { background: #e2e8f0; border-color: #cbd5e1; color: #111827; }

/* Mobil görünüm: 480–600px aralığında önemli sütunları tut, diğerlerini gizle */
@media (max-width: 600px) {
  .table { min-width: 100%; }
  .table th:nth-child(3), .table td:nth-child(3),
  .table th:nth-child(4), .table td:nth-child(4),
  .table th:nth-child(5), .table td:nth-child(5),
  .table th:nth-child(6), .table td:nth-child(6),
  .table th:nth-child(7), .table td:nth-child(7),
  .table th:nth-child(8), .table td:nth-child(8) {
    display: none;
  }
}
@media (max-width: 480px) {
  .table td { padding: 6px 8px; }
  .table th { padding: 8px 10px; }
}
/* Sevkiyat statü seçimi kullanılabilirlik iyileştirme */
.status-select { appearance: none; font-size: 14px; padding: 8px 12px; height: 44px; min-width: 200px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.status-select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(68, 82, 217, 0.15); }
.status-badge { border: 1px solid var(--border); }
.status-badge.aktif { background: #e9f7ef; color: #2e7d32; border-color: #cde8da; }
.status-badge.gonderildi { background: #e3f2fd; color: #1565c0; border-color: #cfe5fb; }
.status-badge.planlama { background: #fff3e0; color: #ef6c00; border-color: #ffe0b2; }
.status-badge.uretildi { background: #ede7f6; color: #6a1b9a; border-color: #dcd0f0; }
/* Scroll-to-top button */
.scroll-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  align-items: center;
  justify-content: center;
}
.scroll-top:hover { background: var(--surface); }
.scroll-top .material-symbols-outlined { font-size: 22px; }
html[data-theme="light"] .scroll-top { background: #eef2f7; border-color: #d1d5db; }
/* Row selection highlight (global) */
.table tbody tr.row-selected { background: rgba(16, 185, 129, 0.18); }