/* TEMA DEĞİŞKENLERİ */
:root,
[data-theme="light"] {
  --primary: #1e40af;
  --primary-light: #3b82f6;
  --sidebar-bg: #1e40af;
  --sidebar-border: #1d4ed8;
  --sidebar-text: #bfdbfe;
  --sidebar-hover: #1d4ed8;
  --bg-main: #f3f4f6;
  --bg-card: #ffffff;
  --text-main: #1f2937;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  /* Accent renkler */
  --green-bg: #dcfce7;
  --green-text: #166534;
  --red-bg: #fee2e2;
  --red-text: #dc2626;
  --blue-bg: #dbeafe;
  --blue-text: #1d4ed8;
  --yellow-bg: #fef9c3;
  --yellow-text: #a16207;
  --purple-bg: #f3e8ff;
  --purple-text: #7c3aed;
  --orange-bg: #ffedd5;
  --orange-text: #ea580c;
}

[data-theme="dark"] {
  --primary: #3b82f6;
  --primary-light: #60a5fa;
  --sidebar-bg: #1f2937;
  --sidebar-border: #374151;
  --sidebar-text: #9ca3af;
  --sidebar-hover: #374151;
  --bg-main: #111827;
  --bg-card: #1f2937;
  --text-main: #f9fafb;
  --text-muted: #9ca3af;
  --border: #374151;
  /* Accent renkler - koyu tema */
  --green-bg: #064e3b;
  --green-text: #6ee7b7;
  --red-bg: #7f1d1d;
  --red-text: #fca5a5;
  --blue-bg: #1e3a5f;
  --blue-text: #93c5fd;
  --yellow-bg: #713f12;
  --yellow-text: #fde047;
  --purple-bg: #4c1d95;
  --purple-text: #c4b5fd;
  --orange-bg: #7c2d12;
  --orange-text: #fdba74;
}

[data-theme="ocean"] {
  --primary: #0077b6;
  --primary-light: #00b4d8;
  --sidebar-bg: #023e8a;
  --sidebar-border: #0077b6;
  --sidebar-text: #90e0ef;
  --sidebar-hover: #0077b6;
  --bg-main: #caf0f8;
  --bg-card: #ffffff;
  --text-main: #03045e;
  --text-muted: #0077b6;
  --border: #90e0ef;
  /* Accent renkler - okyanus */
  --green-bg: #d1fae5;
  --green-text: #047857;
  --red-bg: #ffe4e6;
  --red-text: #be123c;
  --blue-bg: #e0f2fe;
  --blue-text: #0369a1;
  --yellow-bg: #fef3c7;
  --yellow-text: #b45309;
  --purple-bg: #ede9fe;
  --purple-text: #6d28d9;
  --orange-bg: #fed7aa;
  --orange-text: #c2410c;
}

[data-theme="forest"] {
  --primary: #2d6a4f;
  --primary-light: #40916c;
  --sidebar-bg: #1b4332;
  --sidebar-border: #2d6a4f;
  --sidebar-text: #95d5b2;
  --sidebar-hover: #2d6a4f;
  --bg-main: #d8f3dc;
  --bg-card: #ffffff;
  --text-main: #1b4332;
  --text-muted: #2d6a4f;
  --border: #95d5b2;
  /* Accent renkler - orman */
  --green-bg: #bbf7d0;
  --green-text: #15803d;
  --red-bg: #fecdd3;
  --red-text: #be123c;
  --blue-bg: #bfdbfe;
  --blue-text: #1d4ed8;
  --yellow-bg: #fef08a;
  --yellow-text: #a16207;
  --purple-bg: #e9d5ff;
  --purple-text: #7e22ce;
  --orange-bg: #fed7aa;
  --orange-text: #c2410c;
}

[data-theme="purple"] {
  --primary: #7c3aed;
  --primary-light: #8b5cf6;
  --sidebar-bg: #5b21b6;
  --sidebar-border: #7c3aed;
  --sidebar-text: #c4b5fd;
  --sidebar-hover: #7c3aed;
  --bg-main: #ede9fe;
  --bg-card: #ffffff;
  --text-main: #4c1d95;
  --text-muted: #7c3aed;
  --border: #c4b5fd;
  /* Accent renkler - mor */
  --green-bg: #d1fae5;
  --green-text: #059669;
  --red-bg: #ffe4e6;
  --red-text: #e11d48;
  --blue-bg: #ddd6fe;
  --blue-text: #6d28d9;
  --yellow-bg: #fef3c7;
  --yellow-text: #d97706;
  --purple-bg: #f3e8ff;
  --purple-text: #9333ea;
  --orange-bg: #ffedd5;
  --orange-text: #ea580c;
}

/* Gross Market Teması - Koyu Lacivert */
[data-theme="gross"] {
  --primary: #1a9fff;
  --primary-light: #38bdf8;
  --sidebar-bg: #0a1628;
  --sidebar-border: #1e3a5f;
  --sidebar-text: #64748b;
  --sidebar-hover: #162d50;
  --bg-main: #0d1b2a;
  --bg-card: #1b3a4b;
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --border: #1e4976;
  /* Accent renkler - gross market - parlak renkler */
  --green-bg: #052e16;
  --green-text: #4ade80;
  --red-bg: #450a0a;
  --red-text: #f87171;
  --blue-bg: #172554;
  --blue-text: #60a5fa;
  --yellow-bg: #422006;
  --yellow-text: #fde047;
  --purple-bg: #2e1065;
  --purple-text: #c4b5fd;
  --orange-bg: #431407;
  --orange-text: #fb923c;
}

body {
  background: var(--bg-main) !important;
  color: var(--text-main);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Ana içerik alanı */
.main-content {
  background: var(--bg-main) !important;
  transition: background 0.3s ease;
}

/* Kartlar ve beyaz alanlar */
.bg-white,
.bg-card {
  background: var(--bg-card) !important;
  transition: background 0.3s ease;
}

/* Gri arka planlar */
.bg-gray-50,
.bg-gray-100 {
  background: var(--bg-main) !important;
}

.bg-gray-200 {
  background: var(--border) !important;
}

/* Metin renkleri */
.text-gray-800,
.text-gray-900 {
  color: var(--text-main) !important;
}

.text-gray-500,
.text-gray-600,
.text-gray-700 {
  color: var(--text-muted) !important;
}

/* Border renkleri */
.border,
.border-t,
.border-b,
.border-gray-200,
.border-gray-300,
.divide-gray-100>*+*,
.divide-gray-200>*+* {
  border-color: var(--border) !important;
}

/* Hover durumları */
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover {
  background: var(--border) !important;
}

/* Input ve select alanları */
input,
select,
textarea {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

input::placeholder {
  color: var(--text-muted) !important;
}

/* Tablo başlıkları */
thead {
  background: var(--bg-main) !important;
}

thead th {
  color: var(--text-muted) !important;
}

/* ==================== ACCENT RENKLER ==================== */

/* Yeşil badge'ler */
.bg-green-100,
.bg-green-50 {
  background: var(--green-bg) !important;
}

.text-green-700,
.text-green-600,
.text-green-800 {
  color: var(--green-text) !important;
}

/* Kırmızı badge'ler */
.bg-red-100,
.bg-red-50 {
  background: var(--red-bg) !important;
}

.text-red-700,
.text-red-600,
.text-red-800 {
  color: var(--red-text) !important;
}

/* Mavi badge'ler */
.bg-blue-100,
.bg-blue-50 {
  background: var(--blue-bg) !important;
}

.text-blue-700,
.text-blue-600,
.text-blue-800 {
  color: var(--blue-text) !important;
}

/* Sarı badge'ler */
.bg-yellow-100,
.bg-yellow-50,
.bg-amber-100 {
  background: var(--yellow-bg) !important;
}

.text-yellow-700,
.text-yellow-600,
.text-yellow-800,
.text-amber-700 {
  color: var(--yellow-text) !important;
}

/* Mor badge'ler */
.bg-purple-100,
.bg-purple-50,
.bg-violet-100 {
  background: var(--purple-bg) !important;
}

.text-purple-700,
.text-purple-600,
.text-purple-800,
.text-violet-700 {
  color: var(--purple-text) !important;
}

/* Turuncu badge'ler */
.bg-orange-100,
.bg-orange-50 {
  background: var(--orange-bg) !important;
}

.text-orange-700,
.text-orange-600,
.text-orange-800 {
  color: var(--orange-text) !important;
}

/* Butonlar - yeşil */
.bg-green-600 {
  background: var(--green-text) !important;
}

.hover\:bg-green-700:hover {
  filter: brightness(0.9);
}

/* Butonlar - kırmızı */
.bg-red-600 {
  background: var(--red-text) !important;
}

.hover\:bg-red-700:hover {
  filter: brightness(0.9);
}

.sidebar {
  background: var(--sidebar-bg) !important;
  transition: transform 0.3s ease;
}

.sidebar .border-blue-700 {
  border-color: var(--sidebar-border) !important;
}

.sidebar .text-blue-300,
.sidebar .text-blue-200,
.sidebar .text-blue-400 {
  color: var(--sidebar-text) !important;
}

.sidebar .hover\:bg-blue-700:hover {
  background: var(--sidebar-hover) !important;
}

.sidebar .bg-blue-600 {
  background: var(--primary-light) !important;
}

.sidebar .bg-blue-500 {
  background: var(--primary) !important;
}

.bg-blue-800 {
  background: var(--sidebar-bg) !important;
}

.bg-blue-600 {
  background: var(--primary) !important;
}

.hover\:bg-blue-700:hover {
  background: var(--primary-light) !important;
}

/* THEME SWITCHER */
.theme-switcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.theme-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: transform 0.2s;
}

.theme-btn:hover {
  transform: scale(1.1);
}

.theme-menu {
  display: none;
  position: absolute;
  bottom: 60px;
  right: 0;
  background: var(--bg-card);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  padding: 0.5rem;
  min-width: 160px;
}

.theme-menu.show {
  display: block;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: #ffffff;
  cursor: pointer;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #1f2937 !important;
  transition: background 0.2s;
}

.theme-option:hover {
  background: var(--border);
}

.theme-option.active {
  background: var(--primary);
  color: white;
}

.theme-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
}

.theme-color.light {
  background: linear-gradient(135deg, #1e40af, #3b82f6);
}

.theme-color.dark {
  background: linear-gradient(135deg, #374151, #4b5563);
}

.theme-color.ocean {
  background: linear-gradient(135deg, #0077b6, #00b4d8);
}

.theme-color.forest {
  background: linear-gradient(135deg, #2d6a4f, #40916c);
}

.theme-color.purple {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
}

.theme-color.gross {
  background: linear-gradient(135deg, #0d2137, #1a5f7a);
}

.card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0 !important;
  }
}

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
}

.overlay.active {
  display: block;
}

/* Sidebar scroll + scrollbar gizle */
.sidebar {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-y: auto;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

/* Menü öğelerini kompakt yap */
.sidebar .nav-link {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem;
}

.sidebar .space-y-1>li {
  margin-bottom: 0 !important;
}

.sidebar .pt-2 {
  padding-top: 0.5rem !important;
}

/* Alt kısımdaki PostgreSQL bölümünü küçült */
.sidebar .border-t {
  padding: 0.5rem !important;
}

.sidebar .border-t .w-10 {
  width: 2rem !important;
  height: 2rem !important;
}

.sidebar .border-t .text-sm {
  font-size: 0.75rem !important;
}

.sidebar .border-t .text-xs {
  font-size: 0.625rem !important;
}

/* Ayarlar Stilleri */
.list-item {
  cursor: pointer;
  transition: all 0.2s;
}

.list-item:hover {
  background: var(--border);
}

.list-item.active {
  background: var(--primary);
  color: white;
}

.list-item.active .text-gray-500 {
  color: rgba(255, 255, 255, 0.7) !important;
}

.ayar-tab-btn {
  padding: 0.75rem 1.5rem;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  color: var(--text-main);
}

.ayar-tab-btn:hover {
  background: var(--border);
}

.ayar-tab-btn.active {
  border-bottom-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.grup-sub-tab-btn,
.gv-sub-tab-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.875rem;
  color: var(--text-main);
}

.grup-sub-tab-btn:hover,
.gv-sub-tab-btn:hover {
  background: var(--border);
}

.grup-sub-tab-btn.active,
.gv-sub-tab-btn.active {
  background: var(--primary);
  color: white;
}

.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg-card);
  color: var(--text-main);
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

/* Personel Kartları Tab Stilleri */
.pk-tab-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.875rem;
  color: var(--text-main);
}

.pk-tab-btn:hover {
  background: var(--border);
}

.pk-tab-btn.active {
  background: var(--primary);
  color: white;
}