/* FinControl Theme System - Light & Dark Mode */

/* Light Theme (Default) */
:root[data-theme="light"],
:root:not([data-theme]) {
    /* Primary Colors */
    --color-primary: #007AFF;
    --color-primary-light: #5AC8FA;
    --color-secondary: #5AC8FA;

    /* Status Colors */
    --color-success: #34C759;
    --color-warning: #FF9500;
    --color-danger: #FF3B30;

    /* Neutral Colors */
    --color-background: #F2F2F7;
    --color-surface: #FFFFFF;
    --color-card: #FFFFFF;
    --color-border: #E5E5EA;

    /* Text Colors */
    --color-text-primary: #000000;
    --color-text-secondary: #666666;
    --color-text-tertiary: #8E8E93;
    --color-text-inverse: #FFFFFF;

    /* Component Colors */
    --color-input-background: #FFFFFF;
    --color-input-border: #E5E5EA;
    --color-input-text: #000000;
    --color-input-placeholder: #8E8E93;

    --color-button-hover: #F2F2F7;
    --color-button-active: #E5E5EA;

    --color-sidebar-background: #FFFFFF;
    --color-sidebar-border: #E5E5EA;
    --color-sidebar-text: #666666;
    --color-sidebar-text-active: #FFFFFF;
    --color-sidebar-active-bg: #007AFF;
    --color-sidebar-hover: #F2F2F7;

    --color-topbar-background: #FFFFFF;
    --color-topbar-border: #E5E5EA;
    --color-topbar-text: #000000;

    --color-list-divider: #E5E5EA;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Dark Theme */
:root[data-theme="dark"] {
    /* Primary Colors */
    --color-primary: #0A84FF;
    --color-primary-light: #64B5F6;
    --color-secondary: #64B5F6;

    /* Status Colors */
    --color-success: #30B0C0;
    --color-warning: #FF9500;
    --color-danger: #FF453A;

    /* Neutral Colors */
    --color-background: #0A0E27;
    --color-surface: #1C1E2E;
    --color-card: #252A3E;
    --color-border: #3A3F4F;

    /* Text Colors */
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #B0B0B9;
    --color-text-tertiary: #8E8E93;
    --color-text-inverse: #000000;

    /* Component Colors */
    --color-input-background: #1C1E2E;
    --color-input-border: #3A3F4F;
    --color-input-text: #FFFFFF;
    --color-input-placeholder: #8E8E93;

    --color-button-hover: #2A2F3F;
    --color-button-active: #3A3F4F;

    --color-sidebar-background: #1C1E2E;
    --color-sidebar-border: #3A3F4F;
    --color-sidebar-text: #B0B0B9;
    --color-sidebar-text-active: #FFFFFF;
    --color-sidebar-active-bg: #0A84FF;
    --color-sidebar-hover: #2A2F3F;

    --color-topbar-background: #1C1E2E;
    --color-topbar-border: #3A3F4F;
    --color-topbar-text: #FFFFFF;

    --color-list-divider: #3A3F4F;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* Apply Theme Variables to Components */

/* Background & Surface */
body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

.ios-layout-desktop {
    background-color: var(--color-background);
}

.ios-sidebar {
    background: var(--color-sidebar-background);
    border-right: 1px solid var(--color-sidebar-border);
    box-shadow: var(--shadow-sm);
}

.ios-sidebar-header {
    border-bottom: 1px solid var(--color-sidebar-border);
    color: var(--color-text-primary);
}

.ios-tagline {
    color: var(--color-text-tertiary);
}

/* Navigation Items */
.ios-nav-item {
    color: var(--color-sidebar-text);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ios-nav-item:hover {
    background-color: var(--color-sidebar-hover);
    color: var(--color-primary);
}

.ios-nav-item.ios-nav-active {
    background-color: var(--color-sidebar-active-bg);
    color: var(--color-sidebar-text-active);
}

.ios-nav-divider {
    border-top: 1px solid var(--color-sidebar-border);
}

/* Top Bar */
.ios-topbar-desktop {
    background: var(--color-topbar-background);
    border-bottom: 1px solid var(--color-topbar-border);
    box-shadow: var(--shadow-sm);
}

.ios-topbar-title {
    color: var(--color-topbar-text);
}

.ios-topbar-user {
    background: var(--color-button-hover);
    color: var(--color-text-primary);
    transition: background 0.3s ease;
}

.ios-topbar-user:hover {
    background: var(--color-button-active);
}

.ios-user-name {
    color: var(--color-text-primary);
}

/* Cards & Content */
.ios-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.ios-card:hover {
    box-shadow: var(--shadow-hover);
}

.ios-card-title {
    color: var(--color-text-primary);
}

.ios-card-subtitle {
    color: var(--color-text-secondary);
}

/* KPI Cards */
.ios-kpi-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
}

.ios-kpi-label {
    color: var(--color-text-secondary);
}

.ios-kpi-value {
    color: var(--color-primary);
}

.ios-kpi-trend {
    color: var(--color-success);
}

.ios-kpi-meta {
    color: var(--color-text-tertiary);
}

/* Lists */
.ios-list {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ios-list-item {
    border-bottom: 1px solid var(--color-list-divider);
    color: var(--color-text-primary);
    transition: background 0.2s ease;
}

.ios-list-item:last-child {
    border-bottom: none;
}

.ios-list-item:hover,
.ios-list-item:active {
    background: var(--color-button-hover);
}

/* Forms */
.ios-form-input,
.ios-form-textarea,
.ios-form-select {
    background: var(--color-input-background);
    border: 1px solid var(--color-input-border);
    color: var(--color-input-text);
    transition: all 0.3s ease;
}

.ios-form-input::placeholder,
.ios-form-textarea::placeholder {
    color: var(--color-input-placeholder);
}

.ios-form-input:focus,
.ios-form-textarea:focus,
.ios-form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.1);
}

.ios-form-label {
    color: var(--color-text-primary);
}

/* Buttons */
.ios-btn {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ios-btn-primary {
    background: var(--color-primary);
    color: white;
}

.ios-btn-primary:hover {
    opacity: 0.8;
}

.ios-btn-secondary {
    background: var(--color-button-hover);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}

.ios-btn-secondary:hover {
    background: var(--color-button-active);
}

.ios-btn-danger {
    background: var(--color-danger);
    color: white;
}

/* Text Colors */
.ios-text-primary {
    color: var(--color-primary);
}

.ios-text-success {
    color: var(--color-success);
}

.ios-text-danger {
    color: var(--color-danger);
}

.ios-text-secondary {
    color: var(--color-text-secondary);
}

.ios-text-tertiary {
    color: var(--color-text-tertiary);
}

.ios-text-headline {
    color: var(--color-text-primary);
}

.ios-text-caption {
    color: var(--color-text-secondary);
}

/* Badges */
.ios-badge {
    background: var(--color-primary);
    color: white;
}

.ios-badge-success {
    background: var(--color-success);
    color: white;
}

.ios-badge-danger {
    background: var(--color-danger);
    color: white;
}

/* Progress Bars */
.ios-progress-bar,
.ios-meta-bar {
    background: var(--color-border);
}

.ios-progress-fill,
.ios-meta-fill {
    background: linear-gradient(90deg, var(--color-success), var(--color-primary-light));
}

/* Links */
.ios-link {
    color: var(--color-primary);
    text-decoration: none;
}

.ios-link:hover {
    opacity: 0.8;
}

/* Alerts */
.ios-alert-info {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

/* Modals */
.ios-modal-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.ios-modal-content {
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.ios-modal-header {
    border-bottom: 1px solid var(--color-border);
}

.ios-modal-title {
    color: var(--color-text-primary);
}

.ios-modal-close {
    color: var(--color-text-secondary);
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
}

/* Transition Smooth */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode Specific Tweaks */
:root[data-theme="dark"] .ios-saldo-card {
    background: linear-gradient(135deg, #0A84FF, #30B0C0) !important;
}

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

:root[data-theme="dark"] .ios-action-btn {
    background: var(--color-card);
    border: 1px solid var(--color-border);
}

:root[data-theme="dark"] .ios-action-btn:hover {
    background: var(--color-button-hover);
}

/* Print Mode */
@media print {
    :root {
        --color-background: #FFFFFF;
        --color-surface: #FFFFFF;
        --color-text-primary: #000000;
        --color-text-secondary: #333333;
    }
}