/* 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: #fff;
    --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: #fff;
    --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: #fff;
    --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: #fff;
    --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;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: auto;
}

.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 rgb(0 0 0 / 30%);
    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 rgb(0 0 0 / 20%);
    padding: 0.5rem;
    min-width: 160px;
}

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

@keyframes fade-in {
    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: #fff;
    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 rgb(0 0 0 / 15%);
}

@media (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: rgb(0 0 0 / 50%);
    z-index: 40;
}

.overlay.active {
    display: block;
}

.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: rgb(255 255 255 / 70%) !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 rgb(59 130 246 / 10%);
}

.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;
}

/* ==================== LOGIN SAYFA STİLLERİ ==================== */
:root {
    --ana-renk: #1e40af;
    --vurgu-renk: #2563eb;
    --vurgu-renk-light: #dbeafe;
}

.login-btn {
    background-color: var(--vurgu-renk, #2563eb);
}

.login-btn:hover {
    filter: brightness(0.9);
}

.login-btn-success {
    background-color: #16a34a;
}

.login-btn-success:hover {
    filter: brightness(0.9);
}

.login-input:focus {
    border-color: var(--vurgu-renk, #2563eb) !important;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
}