/* assets/css/main.css - Haupt-Styles und Variablen */

:root {
    /* Navy Palette */
    --navy-50: #F0F4F8;
    --navy-100: #D9E2EC;
    --navy-200: #BCCCDC;
    --navy-300: #9FB3C8;
    --navy-400: #627D98;
    --navy-500: #334E68;
    --navy-600: #243B53;
    --navy-700: #1A3B5C;
    --navy-800: #102A43;
    --navy-900: #0A1929;

    /* Teal Palette */
    --teal-50: #F0FDFA;
    --teal-100: #CCFBF1;
    --teal-200: #99F6E4;
    --teal-300: #5EEAD4;
    --teal-400: #2DD4BF;
    --teal-500: #14B8A6;
    --teal-600: #0D9488;
    --teal-700: #0F766E;

    /* Stimmungsfarben */
    --mood-1: #E85A2E;
    --mood-2: #F1744D;
    --mood-3: #F49275;
    --mood-4: #FFB453;
    --mood-5: #E6BE3A;
    --mood-6: #B8CC42;
    --mood-7: #79D197;
    --mood-8: #53C47A;
    --mood-9: #3BB765;
    --mood-10: #217B3D;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #1A3B5C 0%, #243B53 30%, #0D9488 70%, #5EEAD4 100%);
    --gradient-soft: linear-gradient(135deg, #D9E2EC 0%, #BCCCDC 30%, #CCFBF1 70%, #99F6E4 100%);
    
    /* Glasmorphism */
    --glass-bg: rgba(255, 255, 255, 0.25);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-shadow: 0 8px 32px 0 rgba(26, 59, 92, 0.15);
    --glass-blur: blur(10px);
    
    /* UI Farben */
    --bg-primary: #F7FAFC;
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --border: #E5E7EB;
    --shadow-sm: 0 2px 8px rgba(26, 59, 92, 0.08);
    --shadow-md: 0 4px 16px rgba(26, 59, 92, 0.12);
    --shadow-lg: 0 8px 24px rgba(26, 59, 92, 0.16);
    
    /* Abstände */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Semantic Colors */
    --surface: #ffffff;
    --surface-elevated: #ffffff;

    /* Font Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 100px;
}

/* ===== Dark Theme ===== */
[data-theme="dark"] {
    --navy-50: #1e293b;
    --navy-100: #334155;
    --navy-200: #475569;
    --navy-300: #64748b;
    --navy-400: #94a3b8;
    --navy-500: #93c5fd;
    --navy-600: #7bb8fc;
    --navy-700: #60a5fa;
    --navy-800: #bfdbfe;
    --navy-900: #f1f5f9;

    --teal-50: #134e4a;
    --teal-100: #115e59;
    --teal-200: #0f766e;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --teal-700: #99f6e4;

    --bg-primary: #0f172a;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border: #334155;
    --surface: #1e293b;
    --surface-elevated: #1e293b;

    --glass-bg: rgba(30, 41, 59, 0.8);
    --glass-border: rgba(148, 163, 184, 0.15);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    --gradient-primary: linear-gradient(135deg, #1e3a5f 0%, #0d9488 100%);
    --gradient-soft: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #134e4a 100%);

    color-scheme: dark;
}

/* Dark mode: alle Hintergründe/Borders überschreiben */
[data-theme="dark"] .glass-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .settings-section,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .bottom-sheet,
[data-theme="dark"] .bottom-sheet-content,
[data-theme="dark"] .bottom-sheet-body,
[data-theme="dark"] .bottom-sheet-header,
[data-theme="dark"] .module-card,
[data-theme="dark"] .trigger-card,
[data-theme="dark"] .connect-form,
[data-theme="dark"] .entry-item,
[data-theme="dark"] .wizard-step,
[data-theme="dark"] .wizard-btn,
[data-theme="dark"] .wizard-tag,
[data-theme="dark"] .wizard-quick-pick,
[data-theme="dark"] .wizard-custom-input input,
[data-theme="dark"] .wizard-custom-input button,
[data-theme="dark"] .wizard-custom-input textarea,
[data-theme="dark"] .wizard-text-input,
[data-theme="dark"] .wizard-time-input,
[data-theme="dark"] .toast,
[data-theme="dark"] .subscription-info,
[data-theme="dark"] .connection-item,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .pricing-card-featured,
[data-theme="dark"] .consent-banner,
[data-theme="dark"] .onboarding-card,
[data-theme="dark"] .onboarding-step,
[data-theme="dark"] .onboarding-module-item,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .admin-table-header,
[data-theme="dark"] .admin-table-row,
[data-theme="dark"] .admin-filter-chip,
[data-theme="dark"] .correlation-card,
[data-theme="dark"] .correlation-positive,
[data-theme="dark"] .correlation-negative,
[data-theme="dark"] .correlation-neutral,
[data-theme="dark"] .recent-entries,
[data-theme="dark"] .trends-section,
[data-theme="dark"] .trend-tab,
[data-theme="dark"] .flow-option,
[data-theme="dark"] .login-card,
[data-theme="dark"] .tag-chip,
[data-theme="dark"] .fab-menu-item,
[data-theme="dark"] .module-settings-card,
[data-theme="dark"] .goal-card,
[data-theme="dark"] .reminder-card,
[data-theme="dark"] .weather-toggle-card,
[data-theme="dark"] .file-upload-area {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--border);
}

[data-theme="dark"] .form-input,
[data-theme="dark"] select.form-input,
[data-theme="dark"] textarea.form-input {
    background: var(--navy-50);
    color: var(--text-primary);
    border-color: var(--border);
}

/* Dark mode: Logo besser sichtbar */
[data-theme="dark"] .logo {
    filter: brightness(1.8) saturate(0.8);
}

/* Dark mode: Trigger-Card Icons — heller und kontrastreicher */
[data-theme="dark"] .trigger-card-icon {
    filter: brightness(1.3) saturate(1.2);
}
[data-theme="dark"] .trigger-card-icon i,
[data-theme="dark"] .trigger-card-icon svg {
    filter: brightness(1.8) drop-shadow(0 0 1px rgba(255,255,255,0.3));
}
[data-theme="dark"] .trigger-card-name {
    color: var(--text-primary);
}
[data-theme="dark"] .trigger-card-plus {
    color: var(--text-secondary);
}

/* Dark mode: Hover-States */
[data-theme="dark"] .flow-option:hover,
[data-theme="dark"] .entry-item:hover,
[data-theme="dark"] .fab-menu-item:hover,
[data-theme="dark"] .bottom-sheet-close:hover {
    background: var(--navy-100) !important;
}

/* Dark mode: Skeleton Loader */
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--navy-50) 25%, var(--navy-100) 50%, var(--navy-50) 75%) !important;
}

/* Dark mode: Sub/Admin Badge Farben */
[data-theme="dark"] .admin-badge-pro {
    background: #6D28D930 !important;
    color: #c4b5fd;
}

[data-theme="dark"] .correlation-positive {
    background: var(--teal-50) !important;
    color: var(--teal-300);
}

[data-theme="dark"] .correlation-negative {
    background: #EF444420 !important;
    color: #fca5a5;
}

/* Dark mode: Diverses */
[data-theme="dark"] .bottom-sheet-footer {
    border-color: var(--border);
}

[data-theme="dark"] .wizard-emoji-item {
    border-color: var(--border);
}

[data-theme="dark"] .corr-strength-bar {
    background: linear-gradient(to right, #EF4444, var(--navy-100), var(--teal-400)) !important;
}

[data-theme="dark"] .corr-chip {
    background: var(--surface) !important;
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .corr-chip.active {
    background: rgba(20, 184, 166, 0.15) !important;
    border-color: var(--teal-400);
    color: var(--teal-300);
}

[data-theme="dark"] .corr-period-tabs {
    background: var(--navy-100) !important;
}

[data-theme="dark"] .corr-period-tab {
    color: var(--navy-400);
}

[data-theme="dark"] .corr-period-tab.active {
    background: var(--surface) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .corr-result-card {
    background: var(--surface) !important;
    border-color: var(--border);
}

[data-theme="dark"] .corr-mini-bar-marker {
    border-color: var(--surface);
}

[data-theme="dark"] .goal-group {
    background: var(--surface) !important;
    border-color: var(--border);
}

[data-theme="dark"] .goal-group-header {
    background: var(--navy-100) !important;
    border-color: var(--border);
}

[data-theme="dark"] .goal-row {
    border-color: var(--border);
}

[data-theme="dark"] .carousel-dot {
    background: var(--navy-200);
}

[data-theme="dark"] header {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(10px);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .app-footer {
    background: transparent;
}

[data-theme="dark"] .app-footer a {
    color: var(--text-secondary);
}

[data-theme="dark"] body::before {
    opacity: 0.08;
}

[data-theme="dark"] .stat-card.stat-empty {
    opacity: 0.5;
}

[data-theme="dark"] .button-secondary {
    background: var(--navy-100);
    color: var(--text-primary);
    border-color: var(--border);
}

[data-theme="dark"] .button-primary {
    background: var(--gradient-primary);
    color: #ffffff;
}

[data-theme="dark"] .tag-chip {
    background: var(--navy-100);
    color: var(--text-primary);
}

[data-theme="dark"] .chart-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .section-title {
    color: var(--text-primary);
}

[data-theme="dark"] .page-title {
    color: var(--text-primary);
}

[data-theme="dark"] .loading-placeholder {
    color: var(--text-secondary);
}

[data-theme="dark"] .theme-tile {
    border-color: var(--border);
}

[data-theme="dark"] .theme-tile-active {
    border-color: var(--teal-400);
}

/* Dark mode: Kontrastverbesserungen */
[data-theme="dark"] .correlation-negative {
    color: #f87171;
}

[data-theme="dark"] .corr-strong-neg .corr-result-value {
    color: #f87171;
}

[data-theme="dark"] .corr-mod-neg .corr-result-value {
    color: #fb923c;
}

[data-theme="dark"] .text-danger {
    color: #f87171;
}

[data-theme="dark"] .trend-tab {
    color: #94a3b8;
}

[data-theme="dark"] .streak-badge {
    color: #FCD34D;
}

/* ===== Ocean Theme ===== */
[data-theme="ocean"] {
    --navy-600: #0369a1;
    --navy-700: #0369a1;
    --teal-500: #06b6d4;
    --teal-600: #06b6d4;
    --bg-primary: #ecfeff;
    --text-primary: #164e63;
    --text-secondary: #64748b;
    --gradient-primary: linear-gradient(135deg, #0369a1 0%, #06b6d4 100%);
    --gradient-soft: linear-gradient(135deg, #cffafe 0%, #e0f2fe 50%, #ecfeff 100%);
}

/* ===== Forest Theme ===== */
[data-theme="forest"] {
    --navy-600: #166534;
    --navy-700: #166534;
    --teal-500: #65a30d;
    --teal-600: #65a30d;
    --bg-primary: #f0fdf4;
    --text-primary: #1a2e05;
    --text-secondary: #4b5563;
    --gradient-primary: linear-gradient(135deg, #166534 0%, #65a30d 100%);
    --gradient-soft: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 50%, #ecfccb 100%);
}

/* ===== Warm Theme ===== */
[data-theme="warm"] {
    --navy-600: #9a3412;
    --navy-700: #9a3412;
    --teal-500: #d97706;
    --teal-600: #d97706;
    --bg-primary: #fffbeb;
    --text-primary: #451a03;
    --text-secondary: #78716c;
    --gradient-primary: linear-gradient(135deg, #9a3412 0%, #d97706 100%);
    --gradient-soft: linear-gradient(135deg, #fef3c7 0%, #fffbeb 50%, #ffedd5 100%);
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
}

/* Hintergrund-Gradient */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-soft);
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

/* Links */
a {
    color: var(--navy-600);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--navy-700);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--navy-700);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* Forms */
input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* Focus States */
:focus-visible {
    outline: 2px solid var(--teal-400);
    outline-offset: 2px;
}

/* Selection */
::selection {
    background: var(--navy-100);
    color: var(--navy-900);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--navy-50);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: var(--navy-400);
    border-radius: 6px;
    border: 3px solid var(--navy-50);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--navy-500);
}

/* Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }