/* Global Theme Styles - Dark Mode Support */

/* =============================================================================
   MODERN BRAND COLOR PALETTE - Platform Geneli
   ============================================================================= */

/* CSS Variables for Light Mode (default) */
:root {
    /* Background Colors */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8f9fa;
    --theme-bg-tertiary: #e9ecef;
    
    /* Text Colors */
    --theme-text-primary: #111827;
    --theme-text-secondary: #374151;
    --theme-text-muted: #6b7280;
    
    /* Border Colors */
    --theme-border-color: #e5e7eb;
    
    /* Brand Colors - Modern, Güven Veren */
    --brand-primary: #2563eb;        /* Canlı mavi - güven ve profesyonellik */
    --brand-primary-dark: #1e40af;   /* Koyu mavi */
    --brand-primary-light: #3b82f6;  /* Açık mavi */
    --brand-primary-50: #eff6ff;     /* Çok açık arka plan */
    
    --brand-success: #059669;        /* Profesyonel yeşil - eylem ve büyüme */
    --brand-success-light: #10b981;  /* Açık yeşil */
    --brand-success-50: #ecfdf5;     /* Çok açık yeşil */
    
    --brand-accent: #ea580c;         /* Profesyonel turuncu - dikkat ve enerji */
    --brand-accent-light: #fb923c;   /* Açık turuncu */
    
    /* Neutral Colors - Modern Gri Tonları */
    --brand-neutral-900: #111827;    /* En koyu metin */
    --brand-neutral-700: #374151;     /* Ana metin */
    --brand-neutral-500: #6b7280;    /* İkincil metin */
    --brand-neutral-300: #d1d5db;    /* Border */
    --brand-neutral-100: #f3f4f6;    /* Açık arka plan */
    --brand-neutral-50: #f9fafb;     /* Çok açık arka plan */
    
    /* Semantic Colors */
    --brand-danger: #dc2626;         /* Hata */
    --brand-warning: #f59e0b;        /* Uyarı */
    --brand-info: #0284c7;           /* Bilgi */
    
    /* Shadows - Derinlik ve Hiyerarşi */
    --theme-shadow: rgba(0, 0, 0, 0.1);
    --theme-shadow-lg: rgba(0, 0, 0, 0.15);
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Border Radius - Modern Yuvarlaklık */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* Typography - Modern Font System */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                     'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */
    
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
}

/* Dark Mode Variables */
.dark-mode,
[data-theme="dark"] {
    --theme-bg-primary: #212529;
    --theme-bg-secondary: #343a40;
    --theme-bg-tertiary: #495057;
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #adb5bd;
    --theme-text-muted: #6c757d;
    --theme-border-color: #495057;
    --theme-shadow: rgba(0, 0, 0, 0.3);
    --theme-shadow-lg: rgba(0, 0, 0, 0.5);
}

/* Apply theme colors to body and main elements */
body {
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-primary);
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode adjustments for common elements */
.dark-mode .page-container,
[data-theme="dark"] .page-container {
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-primary);
}

/* Cards and containers */
.dark-mode .card,
[data-theme="dark"] .card {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);
}

.dark-mode .card-header,
[data-theme="dark"] .card-header {
    background-color: var(--theme-bg-tertiary);
    border-bottom-color: var(--theme-border-color);
}

/* Form elements */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="number"],
.dark-mode input[type="date"],
.dark-mode input[type="time"],
.dark-mode textarea,
.dark-mode select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);
}

.dark-mode input[type="text"]:focus,
.dark-mode input[type="email"]:focus,
.dark-mode input[type="password"]:focus,
.dark-mode input[type="number"]:focus,
.dark-mode input[type="date"]:focus,
.dark-mode input[type="time"]:focus,
.dark-mode textarea:focus,
.dark-mode select:focus,
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] input[type="date"]:focus,
[data-theme="dark"] input[type="time"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background-color: var(--theme-bg-secondary);
    border-color: var(--bs-primary, #0d6efd);
    color: var(--theme-text-primary);
}

/* Tables */
.dark-mode table,
[data-theme="dark"] table {
    color: var(--theme-text-primary);
}

.dark-mode .table,
[data-theme="dark"] .table {
    color: var(--theme-text-primary);
}

.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td,
.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > th,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--theme-bg-secondary);
}

.dark-mode .table-hover > tbody > tr:hover > td,
.dark-mode .table-hover > tbody > tr:hover > th,
[data-theme="dark"] .table-hover > tbody > tr:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > th {
    background-color: var(--theme-bg-tertiary);
}

/* Text colors */
.dark-mode .text-muted,
[data-theme="dark"] .text-muted {
    color: var(--theme-text-muted) !important;
}

.dark-mode .text-secondary,
[data-theme="dark"] .text-secondary {
    color: var(--theme-text-secondary) !important;
}

/* Borders */
.dark-mode .border,
[data-theme="dark"] .border {
    border-color: var(--theme-border-color) !important;
}

.dark-mode .border-top,
[data-theme="dark"] .border-top {
    border-top-color: var(--theme-border-color) !important;
}

.dark-mode .border-bottom,
[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--theme-border-color) !important;
}

.dark-mode .border-start,
[data-theme="dark"] .border-start {
    border-left-color: var(--theme-border-color) !important;
}

.dark-mode .border-end,
[data-theme="dark"] .border-end {
    border-right-color: var(--theme-border-color) !important;
}

/* Background colors */
.dark-mode .bg-light,
[data-theme="dark"] .bg-light {
    background-color: var(--theme-bg-secondary) !important;
}

.dark-mode .bg-white,
[data-theme="dark"] .bg-white {
    background-color: var(--theme-bg-primary) !important;
}

/* Dropdowns */
.dark-mode .dropdown-menu,
[data-theme="dark"] .dropdown-menu {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-border-color);
}

.dark-mode .dropdown-item,
[data-theme="dark"] .dropdown-item {
    color: var(--theme-text-primary);
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus,
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--theme-bg-tertiary);
    color: var(--theme-text-primary);
}

/* Modals */
.dark-mode .modal-content,
[data-theme="dark"] .modal-content {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);
}

.dark-mode .modal-header,
[data-theme="dark"] .modal-header {
    border-bottom-color: var(--theme-border-color);
}

.dark-mode .modal-footer,
[data-theme="dark"] .modal-footer {
    border-top-color: var(--theme-border-color);
}

/* Alerts */
.dark-mode .alert,
[data-theme="dark"] .alert {
    border-color: var(--theme-border-color);
}

.dark-mode .alert-light,
[data-theme="dark"] .alert-light {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);
}

/* List groups */
.dark-mode .list-group-item,
[data-theme="dark"] .list-group-item {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);
}

.dark-mode .list-group-item-action:hover,
.dark-mode .list-group-item-action:focus,
[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--theme-bg-tertiary);
    color: var(--theme-text-primary);
}

/* Navbar */
.dark-mode .navbar,
[data-theme="dark"] .navbar {
    background-color: var(--theme-bg-secondary) !important;
    border-bottom-color: var(--theme-border-color);
}

/* Sidebar */
.dark-mode .sidebar,
[data-theme="dark"] .sidebar {
    background-color: var(--theme-bg-secondary);
    border-right-color: var(--theme-border-color);
}

/* Smooth transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Override for elements that shouldn't transition */
.dark-mode img,
.dark-mode svg,
.dark-mode video,
[data-theme="dark"] img,
[data-theme="dark"] svg,
[data-theme="dark"] video {
    transition: none;
}

/* =============================================================================
   GENERAL DARK MODE OVERRIDES FOR ALL PAGES
   ============================================================================= */

/* General background overrides */
.dark-mode .bg-white,
[data-theme="dark"] .bg-white {
    background-color: var(--theme-bg-secondary, #343a40) !important;
}

.dark-mode .bg-light,
[data-theme="dark"] .bg-light {
    background-color: var(--theme-bg-tertiary, #495057) !important;
}

/* General text color overrides */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--theme-text-primary, #ffffff);
}

/* General link colors */
.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item),
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--bs-primary, #0d6efd);
}

.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--bs-primary, #0d6efd);
    opacity: 0.8;
}

/* General container backgrounds */
.dark-mode .container,
.dark-mode .container-fluid,
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid {
    background-color: transparent;
}

/* General section backgrounds */
.dark-mode section:not(.hero-marketing-section):not(.hero-logged-in-section):not(.problems-section),
[data-theme="dark"] section:not(.hero-marketing-section):not(.hero-logged-in-section):not(.problems-section) {
    background-color: var(--theme-bg-primary, #212529);
}

/* General badge and label colors */
.dark-mode .badge,
[data-theme="dark"] .badge {
    color: var(--theme-text-primary, #ffffff);
}

/* General code and pre blocks */
.dark-mode code,
.dark-mode pre,
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background-color: var(--theme-bg-tertiary, #495057);
    color: var(--theme-text-primary, #ffffff);
    border-color: var(--theme-border-color, #495057);
}

/* General hr (horizontal rule) */
.dark-mode hr,
[data-theme="dark"] hr {
    border-color: var(--theme-border-color, #495057);
    opacity: 0.5;
}

/* General blockquote */
.dark-mode blockquote,
[data-theme="dark"] blockquote {
    border-left-color: var(--theme-border-color, #495057);
    color: var(--theme-text-secondary, #adb5bd);
}

/* General breadcrumb */
.dark-mode .breadcrumb,
[data-theme="dark"] .breadcrumb {
    background-color: var(--theme-bg-secondary, #343a40);
}

.dark-mode .breadcrumb-item a,
[data-theme="dark"] .breadcrumb-item a {
    color: var(--theme-text-secondary, #adb5bd);
}

.dark-mode .breadcrumb-item.active,
[data-theme="dark"] .breadcrumb-item.active {
    color: var(--theme-text-primary, #ffffff);
}

/* General pagination */
.dark-mode .pagination .page-link,
[data-theme="dark"] .pagination .page-link {
    background-color: var(--theme-bg-secondary, #343a40);
    border-color: var(--theme-border-color, #495057);
    color: var(--theme-text-primary, #ffffff);
}

.dark-mode .pagination .page-link:hover,
[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--theme-bg-tertiary, #495057);
    border-color: var(--theme-border-color, #495057);
    color: var(--theme-text-primary, #ffffff);
}

.dark-mode .pagination .page-item.active .page-link,
[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
}

/* General progress bars */
.dark-mode .progress,
[data-theme="dark"] .progress {
    background-color: var(--theme-bg-tertiary, #495057);
}

/* General tooltips */
.dark-mode .tooltip .tooltip-inner,
[data-theme="dark"] .tooltip .tooltip-inner {
    background-color: var(--theme-bg-tertiary, #495057);
    color: var(--theme-text-primary, #ffffff);
}

/* General popovers */
.dark-mode .popover,
[data-theme="dark"] .popover {
    background-color: var(--theme-bg-secondary, #343a40);
    border-color: var(--theme-border-color, #495057);
}

.dark-mode .popover-header,
[data-theme="dark"] .popover-header {
    background-color: var(--theme-bg-tertiary, #495057);
    border-bottom-color: var(--theme-border-color, #495057);
    color: var(--theme-text-primary, #ffffff);
}

.dark-mode .popover-body,
[data-theme="dark"] .popover-body {
    color: var(--theme-text-primary, #ffffff);
}

/* General accordion */
.dark-mode .accordion-item,
[data-theme="dark"] .accordion-item {
    background-color: var(--theme-bg-secondary, #343a40);
    border-color: var(--theme-border-color, #495057);
}

.dark-mode .accordion-button,
[data-theme="dark"] .accordion-button {
    background-color: var(--theme-bg-secondary, #343a40);
    color: var(--theme-text-primary, #ffffff);
}

.dark-mode .accordion-button:not(.collapsed),
[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--theme-bg-tertiary, #495057);
    color: var(--theme-text-primary, #ffffff);
}

.dark-mode .accordion-body,
[data-theme="dark"] .accordion-body {
    background-color: var(--theme-bg-secondary, #343a40);
    color: var(--theme-text-primary, #ffffff);
}

/* General offcanvas */
.dark-mode .offcanvas,
[data-theme="dark"] .offcanvas {
    background-color: var(--theme-bg-secondary, #343a40);
    color: var(--theme-text-primary, #ffffff);
}

.dark-mode .offcanvas-header,
[data-theme="dark"] .offcanvas-header {
    border-bottom-color: var(--theme-border-color, #495057);
}

/* General carousel */
.dark-mode .carousel,
[data-theme="dark"] .carousel {
    background-color: var(--theme-bg-secondary, #343a40);
}

/* General toasts */
.dark-mode .toast,
[data-theme="dark"] .toast {
    background-color: var(--theme-bg-secondary, #343a40);
    border-color: var(--theme-border-color, #495057);
    color: var(--theme-text-primary, #ffffff);
}

.dark-mode .toast-header,
[data-theme="dark"] .toast-header {
    background-color: var(--theme-bg-tertiary, #495057);
    border-bottom-color: var(--theme-border-color, #495057);
    color: var(--theme-text-primary, #ffffff);
}