/* ====================================
   DARK THEME (Varsayılan)
   Ultra Premium Koyu Tema
==================================== */

/* Native select/dropdown - koyu tema (option listesi okunabilir) */
html[data-theme="dark"] {
    color-scheme: dark;
}

:root[data-theme="dark"] {
    /* Ana Renkler - referansın ötesinde derin ve zengin */
    --bg-primary: #05070c;
    --bg-secondary: #0a0d14;
    --bg-tertiary: #0f131c;
    --bg-card: rgba(12, 15, 24, 0.9);
    --bg-card-hover: rgba(18, 22, 34, 0.98);
    --bg-input: rgba(0, 0, 0, 0.4);
    
    /* Vurgu */
    --accent: #8b7cff;
    --accent-light: #b4a4ff;
    --accent-dark: #6b5ce8;
    --accent-glow: rgba(139, 124, 255, 0.4);
    --accent-glow-strong: rgba(139, 124, 255, 0.25);
    
    --success: #00e8a4;
    --warning: #ffb84d;
    --danger: #ff6b7a;
    --info: #5eb8ff;
    
    /* Metin */
    --text-primary: #f6f6fa;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-disabled: rgba(255, 255, 255, 0.32);
    
    --border: rgba(255, 255, 255, 0.055);
    --border-hover: rgba(139, 124, 255, 0.4);
    --border-focus: var(--accent);
    
    /* Gradyanlar */
    --gradient-primary: linear-gradient(135deg, #7c6bff 0%, #a78fff 40%, #8b7cff 100%);
    --gradient-primary-soft: linear-gradient(135deg, rgba(124, 107, 255, 0.25) 0%, rgba(167, 143, 255, 0.12) 100%);
    --gradient-success: linear-gradient(135deg, #00e8a4, #34f0b8);
    --gradient-warning: linear-gradient(135deg, #ffb84d, #ffd666);
    --gradient-danger: linear-gradient(135deg, #ff6b7a, #ff8e9a);
    --gradient-info: linear-gradient(135deg, #5eb8ff, #8bceff);
    
    /* Gölgeler */
    --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-lg: 0 28px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-xl: 0 36px 72px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 48px var(--accent-glow), 0 0 96px rgba(139, 124, 255, 0.12);
    --shadow-glow-subtle: 0 0 24px rgba(139, 124, 255, 0.15);
    --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    
    /* Scrollbar */
    --scrollbar-track: #1a1e2a;
    --scrollbar-thumb: var(--accent);
    --scrollbar-thumb-hover: var(--accent-light);
}

/* ====================================
   SCROLLBAR (Sadece Dark Theme)
==================================== */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: var(--radius-full);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
    border: 2px solid var(--scrollbar-track);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ====================================
   SIDEBAR ÖZEL (Dark)
==================================== */
[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, #0f1119 100%);
    border-right: 1px solid var(--border);
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .nav-link.active {
    background: linear-gradient(90deg, rgba(139, 124, 255, 0.2), rgba(139, 124, 255, 0.06));
    border-left-color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(139, 124, 255, 0.12), 0 0 24px rgba(139, 124, 255, 0.08);
}

/* ====================================
   CARD ÖZEL (Dark)
==================================== */
[data-theme="dark"] .card {
    background: linear-gradient(180deg, rgba(18, 22, 35, 0.95), rgba(10, 12, 18, 0.98));
    backdrop-filter: blur(10px);
}

[data-theme="dark"] .card-header {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border);
}

/* ====================================
   FORM ÖZEL (Dark)
==================================== */
[data-theme="dark"] .form-control {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus {
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-disabled);
}

/* Select dropdown - kapalı ve açık durumda okunabilir */
[data-theme="dark"] select.form-control,
[data-theme="dark"] select {
    background-color: rgba(0, 0, 0, 0.5) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] select option {
    background-color: #1a1e2a;
    color: #f6f6fa;
}

/* ====================================
   TABLO ÖZEL (Dark)
==================================== */
[data-theme="dark"] .table th {
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-secondary);
}

[data-theme="dark"] .table tbody tr:hover {
    background: rgba(124, 107, 255, 0.08);
}

[data-theme="dark"] .table td {
    border-bottom: 1px solid var(--border);
}

/* ====================================
   BUTON ÖZEL (Dark)
==================================== */
[data-theme="dark"] .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .btn-outline {
    background: transparent;
    border: 1px solid var(--border);
}

[data-theme="dark"] .btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ====================================
   MODAL ÖZEL (Dark)
==================================== */
[data-theme="dark"] .modal-container {
    background: linear-gradient(180deg, var(--bg-secondary), #0f1119);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
}

[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.9);
}

/* ====================================
   TOAST ÖZEL (Dark)
==================================== */
[data-theme="dark"] .toast {
    background: rgba(18, 22, 35, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

/* ====================================
   DROPDOWN ÖZEL (Dark)
==================================== */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .dropdown-divider {
    border-top: 1px solid var(--border);
}

/* ====================================
   PAGINATION ÖZEL (Dark)
==================================== */
[data-theme="dark"] .page-link {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

[data-theme="dark"] .page-link:hover {
    background: rgba(124, 107, 255, 0.18);
    border-color: var(--accent);
    color: white;
}

[data-theme="dark"] .page-link.active {
    background: var(--gradient-primary);
    color: white;
}

/* ====================================
   PROGRESS BAR ÖZEL (Dark)
==================================== */
[data-theme="dark"] .progress {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .progress-bar {
    background: var(--gradient-primary);
}

/* ====================================
   ALERT ÖZEL (Dark)
==================================== */
[data-theme="dark"] .alert-success {
    background: rgba(6, 214, 160, 0.15);
    border-color: rgba(6, 214, 160, 0.3);
}

[data-theme="dark"] .alert-warning {
    background: rgba(255, 209, 102, 0.15);
    border-color: rgba(255, 209, 102, 0.3);
}

[data-theme="dark"] .alert-danger {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.3);
}

[data-theme="dark"] .alert-info {
    background: rgba(74, 158, 255, 0.15);
    border-color: rgba(74, 158, 255, 0.3);
}

/* ====================================
   BADGE ÖZEL (Dark)
==================================== */
[data-theme="dark"] .badge-success {
    background: rgba(6, 214, 160, 0.2);
    border: 1px solid rgba(6, 214, 160, 0.3);
}

[data-theme="dark"] .badge-warning {
    background: rgba(255, 209, 102, 0.2);
    border: 1px solid rgba(255, 209, 102, 0.3);
}

[data-theme="dark"] .badge-danger {
    background: rgba(255, 107, 107, 0.2);
    border: 1px solid rgba(255, 107, 107, 0.3);
}

[data-theme="dark"] .badge-info {
    background: rgba(74, 158, 255, 0.2);
    border: 1px solid rgba(74, 158, 255, 0.3);
}

/* ====================================
   STATİSTİK KARTLARI (Dark)
==================================== */
[data-theme="dark"] .stat-card {
    background: linear-gradient(180deg, rgba(18, 22, 35, 0.95), rgba(10, 12, 18, 0.98));
    border: 1px solid var(--border);
}

[data-theme="dark"] .stat-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}

/* ====================================
   GRAFİK ALANLARI (Dark)
==================================== */
[data-theme="dark"] .chart-container {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

/* ====================================
   TAB NAVIGATION (Dark)
==================================== */
[data-theme="dark"] .nav-tabs {
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--border);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background: var(--bg-tertiary);
    border-color: var(--border);
    border-bottom-color: transparent;
    color: var(--accent);
}

/* ====================================
   ACCORDION (Dark)
==================================== */
[data-theme="dark"] .accordion-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
}

[data-theme="dark"] .accordion-button {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background: rgba(124, 107, 255, 0.12);
    color: var(--accent);
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

/* ====================================
   LİSTE GRUPLARI (Dark)
==================================== */
[data-theme="dark"] .list-group-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item.active {
    background: var(--accent);
    border-color: var(--accent);
}

/* ====================================
   BREADCRUMB (Dark)
==================================== */
[data-theme="dark"] .breadcrumb {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--accent);
}

/* ====================================
   CODE BLOCKS (Dark)
==================================== */
[data-theme="dark"] pre,
[data-theme="dark"] code {
    background: #1e1e2e;
    color: #f8f8f2;
    border: 1px solid var(--border);
}

/* ====================================
   MARK (Dark)
==================================== */
[data-theme="dark"] mark {
    background: rgba(255, 209, 102, 0.3);
    color: var(--warning);
}

/* ====================================
   SELECTION (Dark)
==================================== */
[data-theme="dark"] ::selection {
    background: var(--accent);
    color: white;
}

[data-theme="dark"] ::-moz-selection {
    background: var(--accent);
    color: white;
}