/* Koyu mod temasi - token override, masaustu kabugu cam override, tema toggle butonu, komponent dark override'lari */

/* ============================================================
   32. DARK MODE — body[data-theme="dark"]
   Token override + masaüstü kabuğu glass override + toggle button
   Apple macOS Sonoma dark mode renk paletine yakın.
   ============================================================ */

body[data-theme="dark"] {
  /* Text + surface */
  --text:               #F5F5F7;
  --muted:              #98989D;
  --surface:            #1C1C1E;
  --gray-surface:       #2C2C2E;
  --sidebar-bg:         rgba(28, 28, 30, 0.78);
  --hover-bg:           rgba(255, 255, 255, 0.06);
  --row-hover-bg:       rgba(255, 255, 255, 0.04);

  /* Border */
  --border:             rgba(255, 255, 255, 0.10);
  --border-soft:        rgba(255, 255, 255, 0.06);
  --border-strong:      rgba(255, 255, 255, 0.20);

  /* Focus — biraz daha belirgin */
  --focus-ring:         0 0 0 3px rgba(0, 122, 255, 0.30);

  /* Shadow — koyu zeminde daha derin */
  --window-shadow:      0 25px 50px rgba(0, 0, 0, 0.50), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --card-shadow:        0 4px 15px rgba(0, 0, 0, 0.30);
  --card-shadow-hover:  0 8px 24px rgba(0, 0, 0, 0.45);

  /* Marka yumuşak — açıkta opaklık düşük, koyuda kontrast için arttırılır */
  --mac-blue-soft:      rgba(0, 122, 255, 0.20);

  /* Anlamsal arka plan tonları — koyuda görünür kalsın diye opaklık yükseltildi */
  --green-bg:           rgba(52, 199, 89, 0.22);
  --red-bg:             rgba(255, 59, 48, 0.22);
  --yellow-bg:          rgba(255, 189, 46, 0.28);
  --purple-bg:          rgba(175, 82, 222, 0.22);
  --orange-soft:        rgba(255, 149, 0, 0.22);
  --orange-bg:          rgba(255, 149, 0, 0.24);
  --blue-deep-bg:       rgba(0, 64, 160, 0.30);

  /* Anlamsal koyu metin renkleri — açıkta koyu hex (#1F7F3F gibi), koyuda
     okunur açık ton; rozet/pill yazıları için */
  --green-dark:         #6FE08E;
  --red-dark:           #FF7E76;
  --yellow-dark:        #FFD583;
  --purple-dark:        #C68DFF;
  --orange-dark:        #FFB854;

  /* Cam yüzey — koyu cam */
  --glass-surface:      rgba(28, 28, 30, 0.78);
  --glass-strong:       rgba(28, 32, 40, 0.86);
  --glass-border:       rgba(255, 255, 255, 0.10);
  --glass-inner-border: rgba(255, 255, 255, 0.06);

  /* Harita üstü perde — koyu temada haritalar zaten koyu olacak, perde
     daha hafif olabilir */
  --map-veil-inner:     rgba(0, 0, 0, 0.20);
  --map-veil-outer:     rgba(0, 0, 0, 0.55);
  --map-fade-top:       rgba(0, 0, 0, 0.25);
}

/* Body bg gradient dark */
body[data-theme="dark"] {
  background: radial-gradient(ellipse at top, #2c2c30 0%, #1c1c20 60%, #141418 100%);
  color: var(--text);
}

/* === Masaüstü kabuğu glass override === */
body[data-theme="dark"] .desk-chip {
  background: rgba(40, 40, 42, 0.72);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.40);
}
body[data-theme="dark"] .desk-chip:hover,
body[data-theme="dark"] .search-pill:hover,
body[data-theme="dark"] .icon-pill:hover,
body[data-theme="dark"] .canli-akis:hover {
  background: rgba(54, 54, 56, 0.85) !important;
}
body[data-theme="dark"] .dock-container {
  background: rgba(40, 40, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.50),
              0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
body[data-theme="dark"] .dock-item .label {
  background: rgba(20, 20, 22, 0.92);
}

/* Profile chip active (06-ProfilSuite tarzı) — dark */
body[data-theme="dark"] .profile-chip.active {
  background: rgba(0, 122, 255, 0.24);
  border-color: rgba(0, 122, 255, 0.42);
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.18),
              inset 0 0 0 1px rgba(0, 122, 255, 0.35);
}

/* Belediye chip name small — muted rengi */
body[data-theme="dark"] .belediye-chip .name small { color: var(--muted); }

/* Auth layout — glass-card */
body[data-theme="dark"] .auth-card,
body[data-theme="dark"] .auth-chip {
  background: rgba(36, 36, 38, 0.84);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.60),
              inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
body[data-theme="dark"] .auth-version-chip {
  background: rgba(40, 40, 42, 0.72);
  border-color: rgba(255, 255, 255, 0.10);
}

/* Empty hint card (05-Masaustu) */
body[data-theme="dark"] .empty-hint {
  background: rgba(40, 40, 42, 0.72);
  border-color: rgba(255, 255, 255, 0.10);
}
body[data-theme="dark"] .desktop-hero .greeting {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
body[data-theme="dark"] .desktop-hero .hint .kbd {
  background: rgba(40, 40, 42, 0.8);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

/* KBD chip search-pill içinde */
body[data-theme="dark"] .search-pill .kbd {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--muted);
}

/* Harita — dark modda biraz yumuşat (Leaflet light tile koyu zeminle çelişir, hafif desature + brightness) */
body[data-theme="dark"] #map {
  filter: brightness(0.55) saturate(0.75) hue-rotate(195deg) invert(0.92) contrast(0.95);
}
/* Harita filter düşük opasiteli polygon overlay'leri koruyalım — yine de filter tüm harita için çalışır */
/* Marker pulse rengini dark modda biraz daha parlat */
body[data-theme="dark"] .edremit-marker::before {
  background: #4A9CFF;
}

/* Mac-window dark — toolbar/sidebar background sidebar-bg token'ı zaten dark */
body[data-theme="dark"] .mac-window {
  background: var(--surface);
}

/* p360-modal backdrop daha koyu */
body[data-theme="dark"] .p360-modal-backdrop { background: rgba(0, 0, 0, 0.65); }

/* p360-modal + p360-toast koyu yuzey — modal.css/anlik-bildirim.css sabit beyaz
   arka planini override eder (Mert: tek yerden dark mod). Metin --text/--muted
   token'lari zaten dark'ta acik; sadece yuzeyi koyultmak okunurlugu saglar.
   Tum onay diyaloglari (P360.confirm) ve toast'lar bundan faydalanir. */
body[data-theme="dark"] .p360-modal {
  background: rgba(44, 44, 48, 0.98);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body[data-theme="dark"] .p360-modal-head .mh-close:hover { background: rgba(255, 255, 255, 0.10); }
body[data-theme="dark"] .p360-toast {
  background: rgba(44, 44, 48, 0.98);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Card ve tablo — token-aware ama açık değerler kullanıyorsa tweakle */
body[data-theme="dark"] .mac-card,
body[data-theme="dark"] .lines-table thead th,
body[data-theme="dark"] .dtable thead th,
body[data-theme="dark"] .mac-table thead th {
  background: rgba(255, 255, 255, 0.02);
}

/* Info-box variants dark */
body[data-theme="dark"] .info-box {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   33. TEMA TOGGLE BUTTON (.theme-toggle-pill)
   JS auto-inject — profile-chip yanına / auth-bar'a / floating
   ============================================================ */

.theme-toggle-pill {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  color: var(--text);
  font-size: 17px;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle-pill:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}
.theme-toggle-pill:focus-visible {
  outline: 2px solid var(--mac-blue);
  outline-offset: 2px;
}
.theme-toggle-pill i { display: block; line-height: 1; }

body[data-theme="dark"] .theme-toggle-pill {
  background: rgba(40, 40, 42, 0.72);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.40);
  color: var(--text);
}
body[data-theme="dark"] .theme-toggle-pill:hover {
  background: rgba(54, 54, 56, 0.85);
}

/* Floating (sayfada profile-chip + auth-bar yoksa) */
.theme-toggle-pill-floating {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 500;
}

/* Auth-bar içine eklendiğinde küçük margin */
.theme-toggle-pill-auth { margin-left: 4px; }

/* ============================================================
   35. DARK MODE — kapsamlı override (yaygın komponentler)
   Sayfa-spesifik <style> bloklarında hardcoded değerler varsa
   da görsel tutarlılığı sağlar.
   ============================================================ */

/* Genel — body içindeki standart elementler */
body[data-theme="dark"] {
  color-scheme: dark;
}

/* Inputs */
body[data-theme="dark"] .mac-input,
body[data-theme="dark"] .mac-textarea,
body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="email"],
body[data-theme="dark"] input[type="password"],
body[data-theme="dark"] input[type="search"],
body[data-theme="dark"] input[type="date"],
body[data-theme="dark"] input[type="tel"],
body[data-theme="dark"] input[type="number"],
body[data-theme="dark"] textarea,
body[data-theme="dark"] select {
  background-color: var(--gray-surface);
  color: var(--text);
  border-color: var(--border);
}
body[data-theme="dark"] .mac-input::placeholder,
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
}

/* Labels */
body[data-theme="dark"] label,
body[data-theme="dark"] .field-label {
  color: var(--muted);
}

/* Buttons (mac-blue zaten dark'a uygun) — outline button rengi */
body[data-theme="dark"] .btn.outline {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
body[data-theme="dark"] .btn.outline:hover {
  background-color: var(--hover-bg);
}

/* Tablo header arka planı sayfa-spesifik #F5F5F7 yerine token */
body[data-theme="dark"] table thead th,
body[data-theme="dark"] .dtable thead th,
body[data-theme="dark"] .lines-table thead th,
body[data-theme="dark"] .mac-table thead th {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border-color: var(--border);
}
body[data-theme="dark"] table tbody td,
body[data-theme="dark"] .dtable tbody td,
body[data-theme="dark"] .lines-table tbody td,
body[data-theme="dark"] .mac-table tbody td {
  border-color: var(--border-soft);
  color: var(--text);
}

/* Sayfa-spesifik #fff hardcoded — token'a çevirmek zor olduğu için
   en sık komponentleri zorla beyaza karşı korumaya alalım */
body[data-theme="dark"] .mac-card {
  background-color: var(--surface);
  color: var(--text);
}

/* Modüllerde sıkça kullanılan .info-box / .breadcrumb-bar / .doc-header */
body[data-theme="dark"] .info-box {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--text);
}
body[data-theme="dark"] .breadcrumb-bar,
body[data-theme="dark"] .action-footer {
  background-color: rgba(20, 20, 22, 0.78);
  border-color: var(--border-soft);
}
body[data-theme="dark"] .doc-header {
  background-color: var(--surface);
  border-color: var(--border-soft);
}

/* Pill, badge, src-badge: opaklık hafif arttırılır dark'ta okunsun */
body[data-theme="dark"] .pill { filter: saturate(1.1); }

/* Wizard step indicator */
body[data-theme="dark"] .wizard-step {
  background-color: var(--gray-surface);
  color: var(--muted);
}
body[data-theme="dark"] .wizard-step.active {
  background-color: var(--mac-blue);
  color: #fff;
}
body[data-theme="dark"] .wizard-step.done {
  background-color: var(--green);
  color: #fff;
}
body[data-theme="dark"] .wizard-conn { background-color: var(--border); }
body[data-theme="dark"] .wizard-conn.done { background-color: var(--green); }

/* Suite switcher tab */
body[data-theme="dark"] .suite-tab {
  color: var(--muted);
}
body[data-theme="dark"] .suite-tab.active {
  color: var(--text);
  background-color: var(--gray-surface);
}

/* Segment tabs */
body[data-theme="dark"] .segment-tab {
  color: var(--muted);
}
body[data-theme="dark"] .segment-tab.active {
  color: var(--text);
  background-color: var(--gray-surface);
}

/* Timeline */
body[data-theme="dark"] .timeline { border-left-color: var(--border); }
body[data-theme="dark"] .tl-item .tl-body { color: var(--text); }
body[data-theme="dark"] .tl-item .tl-meta { color: var(--muted); }

/* Hardcoded #fff backgrounds in style blocks — son çare !important kuralı */
body[data-theme="dark"] *[style*="background: #fff"],
body[data-theme="dark"] *[style*="background:#fff"],
body[data-theme="dark"] *[style*="background-color: #fff"],
body[data-theme="dark"] *[style*="background-color:#fff"] {
  background-color: var(--surface) !important;
}
body[data-theme="dark"] *[style*="color: var(--text)"],
body[data-theme="dark"] *[style*="color:#1e293b"],
body[data-theme="dark"] *[style*="color: var(--text)"],
body[data-theme="dark"] *[style*="color:#1d1d1f"] {
  color: var(--text) !important;
}

/* ============================================================
   36. DARK MODE TEXT — kritik okunabilirlik (Mert geri bildirimi)
   DNA componentlerinin dark moda explicit color tanımları.
   ============================================================ */

/* Pill text renkleri — light'ta pastel bg üstü koyu text;
   dark'ta açık tonlara çevrilir */
body[data-theme="dark"] .pill.gray {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
body[data-theme="dark"] .pill.blue   { color: #5BAEFF; }
body[data-theme="dark"] .pill.green  { color: #6FE08E; }
body[data-theme="dark"] .pill.red    { color: #FF7E76; }
body[data-theme="dark"] .pill.yellow { color: #FFD583; }
body[data-theme="dark"] .pill.purple { color: #C68DFF; }
body[data-theme="dark"] .pill.orange { color: #FFB854; }

/* Polymorphic kaynak badge text renkleri */
body[data-theme="dark"] .src-badge.tedarik       { color: #6FE08E; }
body[data-theme="dark"] .src-badge.depo-talep    { color: #5BAEFF; }
body[data-theme="dark"] .src-badge.urun-zimmet   { color: #C68DFF; }
body[data-theme="dark"] .src-badge.depo-aktarim  { color: #7AB8FF; }
body[data-theme="dark"] .src-badge.urun-hurda    { color: #FF7E76; }
body[data-theme="dark"] .src-badge.depo-sayim    { color: #FFD583; }
body[data-theme="dark"] .src-badge.manuel        { color: #FFD583; }

/* Info-box — varsayılan + uyarı tonları */
body[data-theme="dark"] .info-box {
  color: var(--text);
}
body[data-theme="dark"] .info-box.warn { color: #FFD583; }
body[data-theme="dark"] .info-box.danger { color: #FF7E76; }

/* Sidebar nav-item — sol panel ASIL kritik */
body[data-theme="dark"] .nav-item {
  color: var(--text);
}
body[data-theme="dark"] .nav-item:hover {
  background: var(--hover-bg);
}
body[data-theme="dark"] .nav-item.active {
  background: var(--mac-blue);
  color: #fff;
}
body[data-theme="dark"] .sidebar-group-title {
  color: var(--muted);
}
body[data-theme="dark"] .sidebar-search-input {
  background: var(--gray-surface);
  color: var(--text);
  border-color: var(--border);
}
body[data-theme="dark"] .sidebar-search-input::placeholder {
  color: var(--muted);
}

/* Toolbar (sidebar üst) */
body[data-theme="dark"] .toolbar {
  background: var(--surface);
  border-color: var(--border-soft);
  color: var(--text);
}
body[data-theme="dark"] .toolbar .global-search input {
  background: var(--gray-surface);
  color: var(--text);
}
body[data-theme="dark"] .toolbar .global-search input::placeholder {
  color: var(--muted);
}
body[data-theme="dark"] .toolbar .user-menu .name { color: var(--text); }
body[data-theme="dark"] .toolbar .user-menu .role { color: var(--muted); }
body[data-theme="dark"] .toolbar .toolbar-shortcut {
  background: var(--gray-surface);
  color: var(--muted);
  border-color: var(--border);
}

/* Mac-card içerikleri */
body[data-theme="dark"] .mac-card { color: var(--text); }
body[data-theme="dark"] .mac-card .card-title { color: var(--text); }
body[data-theme="dark"] .mac-card .card-sub { color: var(--muted); }
body[data-theme="dark"] .mac-card .card-link { color: var(--mac-blue); }

/* Title-bar + breadcrumb */
body[data-theme="dark"] .title-bar { color: var(--text); }
body[data-theme="dark"] .title-bar .title-text { color: var(--text); }
body[data-theme="dark"] .breadcrumb-chip {
  background: var(--gray-surface);
  color: var(--text);
  border-color: var(--border-soft);
}
body[data-theme="dark"] .breadcrumb-chip i { color: var(--muted); }
body[data-theme="dark"] .breadcrumb a { color: var(--mac-blue); }
body[data-theme="dark"] .breadcrumb .current { color: var(--text); }
body[data-theme="dark"] .breadcrumb .sep { color: var(--muted); }

/* Suite + segment tab — Mert'in spesifik geri bildirimi: "tab menülerinde" */
body[data-theme="dark"] .suite-switcher {
  background: var(--gray-surface);
  border-color: var(--border-soft);
}
body[data-theme="dark"] .suite-tab,
body[data-theme="dark"] .segment-tab {
  color: var(--muted);
}
body[data-theme="dark"] .suite-tab:hover,
body[data-theme="dark"] .segment-tab:hover {
  background: var(--hover-bg);
  color: var(--text);
}
body[data-theme="dark"] .suite-tab.active,
body[data-theme="dark"] .segment-tab.active {
  color: var(--text);
  background: var(--surface);
}
body[data-theme="dark"] .suite-tab .tab-num {
  background: var(--gray-surface);
  color: var(--text);
}
body[data-theme="dark"] .suite-tab.active .tab-num {
  background: var(--mac-blue);
  color: #fff;
}

/* Footer pill (sidebar footer) */
body[data-theme="dark"] .footer-pill {
  background: var(--hover-bg);
  color: var(--text);
}
body[data-theme="dark"] .footer-pill .pill-value { color: var(--text); }
body[data-theme="dark"] .sidebar-footer .unit,
body[data-theme="dark"] .sidebar-footer .footer-title,
body[data-theme="dark"] .sidebar-footer .footer-sync { color: var(--muted); }
body[data-theme="dark"] .sidebar-footer { color: var(--text); }

/* Field-help / form */
body[data-theme="dark"] .field-help { color: var(--muted); }
body[data-theme="dark"] .ro-chip {
  background: var(--gray-surface);
  color: var(--text);
  border-color: var(--border-soft);
}

/* Tablo header rengi (zaten section 35'te ama explicit) */
body[data-theme="dark"] .lines-table th,
body[data-theme="dark"] .dtable th,
body[data-theme="dark"] .mac-table th { color: var(--muted); }

/* Buton */
body[data-theme="dark"] .btn { color: var(--text); }
body[data-theme="dark"] .btn.link { color: var(--mac-blue); background: transparent; }
body[data-theme="dark"] .btn:disabled { color: var(--muted); }
body[data-theme="dark"] .btn.outline {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

/* Mac-window genel container */
body[data-theme="dark"] .mac-window { color: var(--text); }
body[data-theme="dark"] .main-content { color: var(--text); }
body[data-theme="dark"] .page { color: var(--text); }
body[data-theme="dark"] .app-body { color: var(--text); }
body[data-theme="dark"] .sidebar {
  background: var(--sidebar-bg);
  color: var(--text);
  border-color: var(--border-soft);
}
body[data-theme="dark"] .sidebar-nav { color: var(--text); }

/* Body cascade — son güvence */
body[data-theme="dark"] {
  color: var(--text);
}
