/* Reset and Base Styles */
/* CSS Custom Properties for Theme Support */
:root {
    /* Light Mode Colors */
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --secondary-color: #6b7280;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;

    /* Text Colors */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;

    /* Background Colors */
    --bg-primary: #f9fafb;
    --bg-secondary: #f3f4f6;
    --card-bg: #ffffff;
    --sidebar-bg: #ffffff;

    /* Border Colors */
    --border-color: #e5e7eb;
    --border-light: #f1f5f9;
    --border-focus: #3b82f6;

    /* Shadow Colors */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* Interactive States */
    --hover-bg: #f9fafb;
    --active-bg: #f3f4f6;
}

/* Dark Mode CSS Custom Properties */
body.dark-mode {
    /* Override colors for dark mode */
    --primary-color: #60a5fa;
    --primary-hover: #3b82f6;
    --secondary-color: #9ca3af;
    --success-color: #34d399;
    --warning-color: #fbbf24;
    --danger-color: #f87171;

    /* Text Colors */
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;

    /* Background Colors */
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --card-bg: #1f2937;
    --sidebar-bg: #1f2937;

    /* Border Colors */
    --border-color: #374151;
    --border-light: #4b5563;
    --border-focus: #60a5fa;

    /* Shadow Colors */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

    /* Interactive States */
    --hover-bg: #374151;
    --active-bg: #4b5563;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    line-height: 1.6;
    color: #1f2937;
    background: #f9fafb;
    transition: all 0.3s ease;
}

body.dark-mode {
    background: #111827;
    color: #f9fafb;
}

/* App Container */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    padding: 24px 16px;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
}

.dark-mode .sidebar {
    background: #1f2937;
    border-right-color: #374151;
}

.logo h2 {
    color: #3b82f6;
    margin-bottom: 32px;
    text-align: center;
    font-weight: 700;
    font-size: 1.25rem;
}

.nav-menu {
    list-style: none;
}

.nav-menu li {
    margin-bottom: 8px;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;
    color: #6b7280;
    border-radius: 12px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.nav-link:hover {
    background: #f3f4f6;
    color: #3b82f6;
    transform: translateX(4px);
}

.dark-mode .nav-link {
    color: #9ca3af;
}

.dark-mode .nav-link:hover {
    background: #374151;
    color: #60a5fa;
}

.nav-link.active {
    background: #3b82f6;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.nav-link .icon {
    margin-right: 12px;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.theme-toggle {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.dark-mode .theme-toggle {
    border-top-color: #374151;
}

.theme-toggle button {
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: #f3f4f6;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.theme-toggle button:hover {
    background: #e5e7eb;
    transform: translateY(-2px);
}

.dark-mode .theme-toggle button {
    background: #374151;
    color: #f9fafb;
}

.dark-mode .theme-toggle button:hover {
    background: #4b5563;
}

/* Main Content */
.main-content {
    margin-left: 260px;
    padding: 32px;
    width: calc(100% - 260px);
    min-height: 100vh;
}

/* Sections */
.section {
    display: none;
    animation: fadeIn 0.3s ease;
}

.section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.section-header h1 {
    color: #111827;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.dark-mode .section-header h1 {
    color: #f9fafb;
}

/* Buttons */
.btn-primary {
    background: #3b82f6;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.btn-primary:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: #e5e7eb;
    transform: translateY(-2px);
}

.dark-mode .btn-secondary {
    background: #374151;
    color: #f9fafb;
    border-color: #4b5563;
}

.dark-mode .btn-secondary:hover {
    background: #4b5563;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

/* Widgets */
.widget {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    transition: all 0.3s ease;
}

.widget:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.dark-mode .widget {
    background: #1f2937;
    border-color: #374151;
}

.widget h3 {
    color: #111827;
    margin-bottom: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .widget h3 {
    color: #f9fafb;
}

.widget-content .stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #3b82f6;
    margin-bottom: 8px;
    line-height: 1;
}

.widget-content .stat-label {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}

.dark-mode .widget-content .stat-label {
    color: #9ca3af;
}

/* Progress Bar */
.progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 16px;
}

.dark-mode .progress-bar {
    background: #374151;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    transition: width 0.6s ease;
    border-radius: 8px;
}

/* Stats Cards */
.task-stats, .expense-stats, .food-stats, .fitness-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.stat-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    text-align: center;
    min-width: 160px;
    flex: 1;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark-mode .stat-card {
    background: #1f2937;
    border-color: #374151;
}

.stat-card span {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 8px;
}

.stat-card label {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}

.dark-mode .stat-card label {
    color: #9ca3af;
}

/* Filters */
.task-filters, .expense-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background: #f3f4f6;
}

.filter-btn.active {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.dark-mode .filter-btn {
    background: #374151;
    color: #f9fafb;
    border-color: #4b5563;
}

.dark-mode .filter-btn:hover {
    background: #4b5563;
}

/* Lists */
.task-list, .expense-list, .pantry-list {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    overflow: hidden;
}

.dark-mode .task-list,
.dark-mode .expense-list,
.dark-mode .pantry-list {
    background: #1f2937;
    border-color: #374151;
}

.task-item, .expense-item, .pantry-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s ease;
}

.dark-mode .task-item,
.dark-mode .expense-item,
.dark-mode .pantry-item {
    border-bottom-color: #374151;
}

.task-item:hover,
.expense-item:hover,
.pantry-item:hover {
    background: #f9fafb;
}

.dark-mode .task-item:hover,
.dark-mode .expense-item:hover,
.dark-mode .pantry-item:hover {
    background: #374151;
}

.task-item:last-child,
.expense-item:last-child,
.pantry-item:last-child {
    border-bottom: none;
}

.task-item.completed {
    opacity: 0.6;
}

.task-item .task-checkbox {
    margin-right: 16px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.task-item .task-content,
.expense-item .expense-info,
.pantry-item .pantry-info {
    flex: 1;
}

.task-item .task-title {
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.dark-mode .task-item .task-title {
    color: #f9fafb;
}

.task-item .task-meta {
    font-size: 0.8rem;
    color: #6b7280;
}

.dark-mode .task-item .task-meta {
    color: #9ca3af;
}

.task-item .task-actions,
.expense-item .expense-actions,
.pantry-item .pantry-actions {
    display: flex;
    gap: 8px;
}

.task-item .task-actions button,
.expense-item .expense-actions button,
.pantry-item .pantry-actions button {
    padding: 4px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

.task-item .task-actions button:hover,
.expense-item .expense-actions button:hover,
.pantry-item .pantry-actions button:hover {
    background: #f3f4f6;
}

.dark-mode .task-item .task-actions button:hover,
.dark-mode .expense-item .expense-actions button:hover,
.dark-mode .pantry-item .pantry-actions button:hover {
    background: #4b5563;
}

/* Expense specific */
.expense-item .expense-amount {
    font-weight: 700;
    color: #dc2626;
    font-size: 1.1rem;
}

.expense-item .expense-category {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

.dark-mode .expense-item .expense-category {
    color: #9ca3af;
}

/* Charts */
.expense-chart, .mood-chart, .weekly-trends {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
    text-align: center;
}

.dark-mode .expense-chart,
.dark-mode .mood-chart,
.dark-mode .weekly-trends {
    background: #1f2937;
    border-color: #374151;
}

/* Food specific */
.meal-planner {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .meal-planner {
    background: #1f2937;
    border-color: #374151;
}

.meal-planner h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .meal-planner h3 {
    color: #f9fafb;
}

.meal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.meal-card {
    background: #f9fafb;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    text-align: center;
    transition: all 0.2s ease;
}

.meal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark-mode .meal-card {
    background: #374151;
    border-color: #4b5563;
}

.meal-card h4 {
    color: #111827;
    margin-bottom: 8px;
    font-weight: 600;
}

.dark-mode .meal-card h4 {
    color: #f9fafb;
}

.meal-card p {
    color: #374151;
    margin-bottom: 8px;
    font-weight: 500;
}

.dark-mode .meal-card p {
    color: #d1d5db;
}

.meal-card span {
    color: #6b7280;
    font-size: 0.8rem;
}

.dark-mode .meal-card span {
    color: #9ca3af;
}

/* Meal Card Actions */
.meal-card .meal-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
}

.meal-card.planned {
    border-left: 4px solid #f59e0b;
}

.meal-card.eaten {
    border-left: 4px solid #10b981;
    opacity: 0.8;
}

.meal-status {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.meal-status.planned {
    background: #fef3c7;
    color: #92400e;
}

.meal-status.eaten {
    background: #dcfdf7;
    color: #059669;
}

.dark-mode .meal-status.planned {
    background: #451a03;
    color: #fbbf24;
}

.dark-mode .meal-status.eaten {
    background: #064e3b;
    color: #34d399;
}

.meal-source-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    margin-top: 8px;
}

.meal-source-indicator.home {
    color: #059669;
}

.meal-source-indicator.hotel {
    color: #dc2626;
}

/* Meal Status Options in Form */
.meal-status-options {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.status-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.status-option:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
}

.status-option.active {
    border-color: #3b82f6;
    background: #dbeafe;
    color: #1d4ed8;
}

.dark-mode .status-option {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.dark-mode .status-option:hover {
    background: #4b5563;
}

.dark-mode .status-option.active {
    border-color: #60a5fa;
    background: #1e3a8a;
    color: #93c5fd;
}

.status-option .icon {
    font-size: 1.2rem;
}

.comparison-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .comparison-card {
    background: #1f2937;
    border-color: #374151;
}

.comparison-card h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .comparison-card h3 {
    color: #f9fafb;
}

.comparison {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.option {
    flex: 1;
    min-width: 200px;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
}

.home-option {
    background: #dcfdf7;
    border: 1px solid #10b981;
}

.delivery-option {
    background: #fef2f2;
    border: 1px solid #dc2626;
}

.dark-mode .home-option {
    background: #064e3b;
}

.dark-mode .delivery-option {
    background: #7f1d1d;
}

.option h4 {
    margin-bottom: 8px;
    font-weight: 600;
}

.vs {
    font-weight: 700;
    color: #6b7280;
    font-size: 1.2rem;
}

.savings-highlight {
    color: #059669;
    font-weight: 600;
    text-align: center;
    background: #dcfdf7;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #10b981;
}

.dark-mode .savings-highlight {
    background: #064e3b;
    color: #34d399;
}

/* Fitness specific */
.exercise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.exercise-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.exercise-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.dark-mode .exercise-card {
    background: #1f2937;
    border-color: #374151;
}

.exercise-card h4 {
    color: #111827;
    margin-bottom: 8px;
    font-weight: 600;
}

.dark-mode .exercise-card h4 {
    color: #f9fafb;
}

.exercise-card p {
    color: #6b7280;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.dark-mode .exercise-card p {
    color: #9ca3af;
}

.badges-section {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .badges-section {
    background: #1f2937;
    border-color: #374151;
}

.badges-section h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .badges-section h3 {
    color: #f9fafb;
}

.badges {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.badge {
    background: #f9fafb;
    padding: 16px;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    text-align: center;
    min-width: 120px;
    transition: all 0.3s ease;
}

.badge.unlocked {
    background: #fef3c7;
    border-color: #f59e0b;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.badge.locked {
    opacity: 0.5;
}

.dark-mode .badge {
    background: #374151;
    border-color: #4b5563;
}

.dark-mode .badge.unlocked {
    background: #451a03;
    border-color: #f59e0b;
}

.badge span {
    display: block;
    font-size: 2rem;
    margin-bottom: 8px;
}

.badge p {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.dark-mode .badge p {
    color: #d1d5db;
}

/* Stress specific */
.mood-checkin {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
    text-align: center;
}

.dark-mode .mood-checkin {
    background: #1f2937;
    border-color: #374151;
}

.mood-checkin h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .mood-checkin h3 {
    color: #f9fafb;
}

.mood-options {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.mood-btn {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mood-btn:hover {
    transform: scale(1.1);
}

.mood-btn.selected {
    border-color: #3b82f6;
    background: #dbeafe;
    transform: scale(1.1);
}

.dark-mode .mood-btn {
    background: #374151;
    border-color: #4b5563;
}

.dark-mode .mood-btn.selected {
    background: #1e3a8a;
}

.insights-section {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .insights-section {
    background: #1f2937;
    border-color: #374151;
}

.insights-section h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .insights-section h3 {
    color: #f9fafb;
}

.insight-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.insight-card {
    background: #f9fafb;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.dark-mode .insight-card {
    background: #374151;
    border-color: #4b5563;
}

.insight-card h4 {
    color: #111827;
    margin-bottom: 8px;
    font-weight: 600;
}

.dark-mode .insight-card h4 {
    color: #f9fafb;
}

.insight-card p {
    color: #6b7280;
    font-size: 0.9rem;
}

.dark-mode .insight-card p {
    color: #9ca3af;
}

.stress-relief {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    text-align: center;
}

.dark-mode .stress-relief {
    background: #1f2937;
    border-color: #374151;
}

.stress-relief h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .stress-relief h3 {
    color: #f9fafb;
}

.relief-options {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.relief-btn {
    background: #3b82f6;
    color: #ffffff;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.relief-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
}

/* Report specific */
.report-summary {
    margin-bottom: 32px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.summary-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    text-align: center;
    transition: all 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.dark-mode .summary-card {
    background: #1f2937;
    border-color: #374151;
}

.summary-card h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 1.1rem;
}

.dark-mode .summary-card h3 {
    color: #f9fafb;
}

.big-stat {
    font-size: 3rem;
    font-weight: 800;
    color: #3b82f6;
    margin-bottom: 8px;
    line-height: 1;
}

.summary-card p {
    color: #6b7280;
    font-size: 0.9rem;
}

.dark-mode .summary-card p {
    color: #9ca3af;
}

.personalized-advice {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 32px;
}

.dark-mode .personalized-advice {
    background: #1f2937;
    border-color: #374151;
}

.personalized-advice h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .personalized-advice h3 {
    color: #f9fafb;
}

.advice-card {
    background: #f0f9ff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #0ea5e9;
}

.dark-mode .advice-card {
    background: #0c4a6e;
}

.advice-card p {
    color: #0c4a6e;
    font-weight: 500;
    line-height: 1.6;
}

.dark-mode .advice-card p {
    color: #7dd3fc;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: #ffffff;
    padding: 32px;
    border-radius: 20px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.3s ease;
}

.dark-mode .modal-content {
    background: #1f2937;
}

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #6b7280;
    transition: color 0.2s ease;
}

.close:hover {
    color: #111827;
}

.dark-mode .close {
    color: #9ca3af;
}

.dark-mode .close:hover {
    color: #f9fafb;
}

.modal-content h2 {
    color: #111827;
    margin-bottom: 24px;
    font-weight: 700;
}

.dark-mode .modal-content h2 {
    color: #f9fafb;
}

.modal-content form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-content input,
.modal-content select,
.modal-content textarea {
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dark-mode .modal-content input,
.dark-mode .modal-content select,
.dark-mode .modal-content textarea {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.modal-content label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-weight: 500;
}

.dark-mode .modal-content label {
    color: #d1d5db;
}

/* Breathing Exercise */
.breathing-circle {
    text-align: center;
    padding: 40px;
}

.circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(45deg, #3b82f6, #8b5cf6);
    margin: 0 auto 24px;
    transition: all 4s ease-in-out;
}

.circle.inhale {
    transform: scale(1.5);
}

.circle.exhale {
    transform: scale(1);
}

/* Enhanced Expense Tracker Styles */

/* Income Tracker Styles */
.income-tracker {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .income-tracker {
    background: #1f2937;
    border-color: #374151;
}

.income-tracker h3 {
    color: #111827;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .income-tracker h3 {
    color: #f9fafb;
}

.income-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.income-card {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.3s ease;
}

.income-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark-mode .income-card {
    background: #374151;
    border-color: #4b5563;
}

.income-card.savings-card {
    background: #dcfdf7;
    border-color: #10b981;
}

.dark-mode .income-card.savings-card {
    background: #064e3b;
    border-color: #059669;
}

.income-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.income-card span {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 8px;
}

.savings-card span {
    color: #10b981;
}

.income-card label {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}

.dark-mode .income-card label {
    color: #9ca3af;
}

.btn-link {
    background: none;
    border: none;
    color: #3b82f6;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
    font-weight: 500;
}

.btn-link:hover {
    color: #2563eb;
}

.dark-mode .btn-link {
    color: #60a5fa;
}

.dark-mode .btn-link:hover {
    color: #93c5fd;
}

/* Enhanced Task Form Styles */
.checkbox-group {
    margin: 16px 0;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-weight: 500;
    cursor: pointer;
}

.dark-mode .checkbox-group label {
    color: #d1d5db;
}

.checkmark {
    position: relative;
    height: 18px;
    width: 18px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.dark-mode .checkmark {
    background: #374151;
    border-color: #4b5563;
}

.checkbox-group input[type="checkbox"] {
    display: none;
}

.checkbox-group input[type="checkbox"]:checked + .checkmark {
    background: #3b82f6;
    border-color: #3b82f6;
}

.checkbox-group input[type="checkbox"]:checked + .checkmark:after {
    content: "✓";
    position: absolute;
    left: 3px;
    top: -1px;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

#expenseTaskDetails {
    background: #f9fafb;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dark-mode #expenseTaskDetails {
    background: #374151;
    border-color: #4b5563;
}

.expense-category-info {
    background: #f0f9ff;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #0ea5e9;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dark-mode .expense-category-info {
    background: #0c4a6e;
    border-color: #0284c7;
}

.expense-category-info label {
    color: #0c4a6e;
    font-weight: 500;
    margin: 0;
}

.dark-mode .expense-category-info label {
    color: #7dd3fc;
}

#selectedExpenseCategory {
    font-weight: 600;
    color: #0369a1;
}

.dark-mode #selectedExpenseCategory {
    color: #38bdf8;
}

#changeExpenseCategoryBtn {
    font-size: 0.8rem;
    padding: 4px 8px;
}

/* Enhanced Task Item Styles */
.task-item.expense-related {
    border-left: 4px solid #f59e0b;
}

.task-item.expense-related .task-meta {
    background: #fef3c7;
    color: #92400e;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 4px;
    font-size: 0.75rem;
}

.dark-mode .task-item.expense-related .task-meta {
    background: #451a03;
    color: #fbbf24;
}

/* Enhanced Meal Management Styles */
.meal-history-section {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .meal-history-section {
    background: #1f2937;
    border-color: #374151;
}

.meal-history-section h4 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .meal-history-section h4 {
    color: #f9fafb;
}

.meal-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meal-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.meal-history-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark-mode .meal-history-item {
    border-color: #4b5563;
}

.meal-history-item.planned {
    border-left: 4px solid #f59e0b;
    background: #fef3c7;
}

.meal-history-item.eaten {
    border-left: 4px solid #10b981;
    background: #f0fdf4;
}

.dark-mode .meal-history-item.planned {
    background: #451a03;
}

.dark-mode .meal-history-item.eaten {
    background: #064e3b;
}

.meal-info {
    flex: 1;
}

.meal-name {
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
    font-size: 1rem;
}

.dark-mode .meal-name {
    color: #f9fafb;
}

.meal-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.meal-meta span {
    font-size: 0.8rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 6px;
}

.dark-mode .meal-meta span {
    color: #9ca3af;
    background: #4b5563;
}

.meal-status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 12px;
}

.meal-status-badge.planned {
    background: #fef3c7;
    color: #92400e;
}

.meal-status-badge.eaten {
    background: #dcfdf7;
    color: #059669;
}

.dark-mode .meal-status-badge.planned {
    background: #451a03;
    color: #fbbf24;
}

.dark-mode .meal-status-badge.eaten {
    background: #064e3b;
    color: #34d399;
}

.meal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-small {
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-success {
    background: #10b981;
    color: #ffffff;
}

.btn-success:hover {
    background: #059669;
    transform: translateY(-1px);
}

.btn-danger {
    background: #ef4444;
    color: #ffffff;
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

/* Enhanced Empty States */
.empty-state-large {
    text-align: center;
    padding: 48px 24px;
    background: #f9fafb;
    border-radius: 16px;
    border: 2px dashed #d1d5db;
    margin: 24px 0;
}

.dark-mode .empty-state-large {
    background: #374151;
    border-color: #6b7280;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 16px;
}

.empty-state-large h3 {
    color: #111827;
    margin-bottom: 12px;
    font-weight: 600;
}

.dark-mode .empty-state-large h3 {
    color: #f9fafb;
}

.empty-state-large p {
    color: #6b7280;
    margin-bottom: 24px;
    font-size: 1rem;
}

.dark-mode .empty-state-large p {
    color: #9ca3af;
}

.habit-suggestions {
    margin: 24px 0;
}

.habit-suggestions h4 {
    color: #374151;
    margin-bottom: 16px;
    font-size: 1rem;
}

.dark-mode .habit-suggestions h4 {
    color: #d1d5db;
}

.suggested-habits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.habit-suggestion-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    text-align: left;
}

.habit-suggestion-btn:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark-mode .habit-suggestion-btn {
    background: #4b5563;
    border-color: #6b7280;
    color: #f9fafb;
}

.dark-mode .habit-suggestion-btn:hover {
    background: #6b7280;
}

.habit-icon {
    font-size: 1.2rem;
}

/* Performance Metrics Enhancement */
.performance-metric {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.performance-metric:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark-mode .performance-metric {
    border-color: #4b5563;
}

.performance-metric.excellent {
    background: #f0fdf4;
    border-color: #10b981;
}

.performance-metric.good {
    background: #f0f9ff;
    border-color: #3b82f6;
}

.performance-metric.needs-improvement {
    background: #fef3c7;
    border-color: #f59e0b;
}

.dark-mode .performance-metric.excellent {
    background: #064e3b;
}

.dark-mode .performance-metric.good {
    background: #1e3a8a;
}

.dark-mode .performance-metric.needs-improvement {
    background: #92400e;
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.metric-header h4 {
    margin: 0;
    font-weight: 600;
    color: #111827;
    font-size: 0.9rem;
}

.dark-mode .metric-header h4 {
    color: #f9fafb;
}

.metric-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: #059669;
}

.performance-metric.good .metric-value {
    color: #2563eb;
}

.performance-metric.needs-improvement .metric-value {
    color: #d97706;
}

.metric-description {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
}

.dark-mode .metric-description {
    color: #9ca3af;
}

.metric-insights {
    margin-top: 8px;
}

.metric-insights p {
    margin: 4px 0;
    font-size: 0.8rem;
    color: #374151;
}

.dark-mode .metric-insights p {
    color: #d1d5db;
}

/* Export buttons */
.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.export-btn {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.export-btn:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}

.dark-mode .export-btn {
    background: #334155;
    color: #e2e8f0;
    border-color: #475569;
}

.dark-mode .export-btn:hover {
    background: #475569;
}

/* Report Generator */
.report-period-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.period-buttons {
    display: flex;
    gap: 8px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
}

.dark-mode .period-buttons {
    background: #1e293b;
}

.period-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    color: #64748b;
    transition: all 0.2s ease;
}

.period-btn:hover {
    background: #e2e8f0;
    color: #334155;
}

.period-btn.active {
    background: #3b82f6;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.dark-mode .period-btn {
    color: #94a3b8;
}

.dark-mode .period-btn:hover {
    background: #334155;
    color: #e2e8f0;
}

.export-options {
    display: flex;
    gap: 8px;
}

.report-content {
    animation: fadeIn 0.3s ease;
}

.report-summary {
    margin-bottom: 32px;
}

.report-summary h2 {
    color: #1e293b;
    margin-bottom: 24px;
    font-size: 1.6rem;
    font-weight: 700;
}

.overall-report-section .summary-grid {
    gap: 24px;
}

.overall-report-section .summary-card {
    border-radius: 16px;
}

.dark-mode .report-summary h2 {
    color: #f1f5f9;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.summary-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    text-align: center;
    transition: all 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dark-mode .summary-card {
    background: #1f2937;
    border-color: #374151;
}

.summary-card h3 {
    color: #374151;
    margin-bottom: 16px;
    font-size: 1.1rem;
    font-weight: 600;
}

.dark-mode .summary-card h3 {
    color: #e5e7eb;
}

.big-stat {
    font-size: 2.5rem;
    font-weight: 800;
    color: #3b82f6;
    margin-bottom: 8px;
    line-height: 1;
}

.summary-card p {
    color: #6b7280;
    margin-bottom: 8px;
}

.dark-mode .summary-card p {
    color: #9ca3af;
}

.completion-rate,
.avg-daily,
.home-percentage,
.avg-workouts,
.avg-mood,
.score-breakdown {
    font-size: 0.9rem;
    color: #059669;
    font-weight: 600;
}

.overall-score {
    border: 2px solid #3b82f6;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.dark-mode .overall-score {
    background: linear-gradient(135deg, #1e40af 0%, #3730a3 100%);
    border-color: #60a5fa;
}

.overall-score .big-stat {
    color: #1e40af;
    font-size: 3rem;
}

.dark-mode .overall-score .big-stat {
    color: #bfdbfe;
}

.report-section {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.dark-mode .report-section {
    background: #1f2937;
    border-color: #374151;
}

.report-section h3 {
    color: #1e293b;
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-weight: 600;
}

.dark-mode .report-section h3 {
    color: #f1f5f9;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.insight-card {
    background: #f8fafc;
    padding: 16px;
    border-radius: 12px;
    border-left: 4px solid #3b82f6;
}

.dark-mode .insight-card {
    background: #334155;
}

.breakdown-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.dark-mode .breakdown-tabs {
    border-bottom-color: #374151;
}

.breakdown-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.breakdown-tab:hover {
    color: #3b82f6;
}

.breakdown-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.dark-mode .breakdown-tab {
    color: #9ca3af;
}

.dark-mode .breakdown-tab:hover,
.dark-mode .breakdown-tab.active {
    color: #60a5fa;
}

.breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.breakdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    border-left: 3px solid #e5e7eb;
}

.breakdown-item.completed {
    border-left-color: #10b981;
    background: #ecfdf5;
}

.breakdown-item.pending {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.dark-mode .breakdown-item {
    background: #374151;
    border-left-color: #4b5563;
}

.dark-mode .breakdown-item.completed {
    background: #064e3b;
    border-left-color: #10b981;
}

.dark-mode .breakdown-item.pending {
    background: #451a03;
    border-left-color: #f59e0b;
}

.item-status {
    font-size: 1.2rem;
    min-width: 24px;
}

.item-title {
    flex: 1;
    font-weight: 500;
    color: #374151;
}

.dark-mode .item-title {
    color: #e5e7eb;
}

.item-category,
.item-date {
    font-size: 0.85rem;
    color: #6b7280;
}

.dark-mode .item-category,
.dark-mode .item-date {
    color: #9ca3af;
}

.recommendations {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recommendation-item {
    background: #f0f9ff;
    padding: 16px;
    border-radius: 12px;
    border-left: 4px solid #0ea5e9;
}

.dark-mode .recommendation-item {
    background: #0c4a6e;
    border-left-color: #38bdf8;
}

.recommendation-item p {
    color: #0c4a6e;
    font-weight: 500;
    margin: 0;
}

.dark-mode .recommendation-item p {
    color: #7dd3fc;
}

/* Comprehensive download section */
.comprehensive-download {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0ea5e9;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    text-align: center;
}

.dark-mode .comprehensive-download {
    background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
    border-color: #0284c7;
}

.comprehensive-download h3 {
    color: #0c4a6e;
    margin-bottom: 12px;
    font-size: 1.2rem;
    font-weight: 600;
}

.dark-mode .comprehensive-download h3 {
    color: #7dd3fc;
}

.comprehensive-download p {
    color: #0369a1;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.dark-mode .comprehensive-download p {
    color: #38bdf8;
}

.download-options {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.download-options .btn-primary {
    background: #0ea5e9;
    border-color: #0ea5e9;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.download-options .btn-primary:hover {
    background: #0284c7;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.4);
}

.download-options .btn-secondary {
    background: #f0f9ff;
    color: #0c4a6e;
    border: 2px solid #0ea5e9;
}

.download-options .btn-secondary:hover {
    background: #e0f2fe;
    transform: translateY(-2px);
}

.dark-mode .download-options .btn-secondary {
    background: #1e3a8a;
    color: #7dd3fc;
    border-color: #3b82f6;
}

.dark-mode .download-options .btn-secondary:hover {
    background: #1e40af;
}

/* Chart containers for reports */
.chart-container {
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.dark-mode .chart-container {
    background: #1e293b;
}

.chart-container h3,
.chart-container h4 {
    color: #374151;
    margin-bottom: 16px;
    text-align: center;
}

.dark-mode .chart-container h3,
.dark-mode .chart-container h4 {
    color: #e5e7eb;
}

/* Food analytics specific styles */
.food-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    margin: 24px 0;
}

.nutrition-overview {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.dark-mode .nutrition-overview {
    background: #1f2937;
    border-color: #374151;
}

.nutrition-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.nutrition-stat {
    text-align: center;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
}

.dark-mode .nutrition-stat {
    background: #334155;
}

.nutrition-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 8px;
}

.nutrition-label {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.dark-mode .nutrition-label {
    color: #9ca3af;
}

.nutrition-change {
    font-size: 0.8rem;
    font-weight: 600;
}

.nutrition-change.positive {
    color: #059669;
}

.nutrition-change.negative {
    color: #dc2626;
}

/* Financial Insights */
.financial-insights {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .financial-insights {
    background: #1f2937;
    border-color: #374151;
}

.financial-insights h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .financial-insights h3 {
    color: #f9fafb;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.insight-item {
    background: #f8fafc;
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
}

.insight-item.warning {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.insight-item.success {
    border-left-color: #10b981;
    background: #f0fdf4;
}

.insight-item.danger {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.dark-mode .insight-item {
    background: #374151;
}

.dark-mode .insight-item.warning {
    background: #451a03;
}

.dark-mode .insight-item.success {
    background: #064e3b;
}

.dark-mode .insight-item.danger {
    background: #7f1d1d;
}

.insight-title {
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.dark-mode .insight-title {
    color: #f9fafb;
}

.insight-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 4px;
}

.insight-item.warning .insight-value {
    color: #f59e0b;
}

.insight-item.success .insight-value {
    color: #10b981;
}

.insight-item.danger .insight-value {
    color: #ef4444;
}

.insight-description {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.4;
}

.dark-mode .insight-description {
    color: #9ca3af;
}

/* Financial Health Score Styles */
.financial-health-section {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .financial-health-section {
    background: #1f2937;
    border-color: #374151;
}

.financial-health-section h3 {
    color: #111827;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .financial-health-section h3 {
    color: #f9fafb;
}

.health-score-container {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.health-score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(#10b981 0deg, #10b981 var(--score-angle, 0deg), #e5e7eb var(--score-angle, 0deg));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.health-score-circle::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background: #ffffff;
    border-radius: 50%;
    z-index: 1;
}

.dark-mode .health-score-circle::before {
    background: #1f2937;
}

.health-score-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #10b981;
    z-index: 2;
    position: relative;
}

.health-score-label {
    font-size: 0.7rem;
    color: #6b7280;
    z-index: 2;
    position: relative;
}

.dark-mode .health-score-label {
    color: #9ca3af;
}

.health-breakdown {
    flex: 1;
    min-width: 300px;
}

.health-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.dark-mode .health-breakdown-item {
    border-bottom-color: #334155;
}

.health-breakdown-item:last-child {
    border-bottom: none;
}

.breakdown-label {
    font-weight: 500;
    color: #374151;
}

.dark-mode .breakdown-label {
    color: #d1d5db;
}

.breakdown-value {
    font-weight: 600;
}

.breakdown-value.good {
    color: #10b981;
}

.breakdown-value.warning {
    color: #f59e0b;
}

.breakdown-value.danger {
    color: #ef4444;
}

/* Income vs Expenses Section */
.income-vs-expenses {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .income-vs-expenses {
    background: #1f2937;
    border-color: #374151;
}

/* Enhanced Food & Nutrition Styles */

.food-header-actions {
    display: flex;
    gap: 12px;
}

.daily-food-tracking {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .daily-food-tracking {
    background: #1f2937;
    border-color: #374151;
}

.food-tracking-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
}

.dark-mode .food-tracking-tabs {
    border-bottom-color: #374151;
}

.daily-summary {
    margin-bottom: 24px;
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.summary-card {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark-mode .summary-card {
    background: #374151;
    border-color: #4b5563;
}

.summary-card.home-cooking {
    border-left: 4px solid #10b981;
}

.summary-card.hotel-delivery {
    border-left: 4px solid #f59e0b;
}

.summary-card h4 {
    color: #111827;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 1rem;
}

.dark-mode .summary-card h4 {
    color: #f9fafb;
}

.summary-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-stats .count {
    font-size: 2rem;
    font-weight: 700;
    color: #3b82f6;
}

.home-cooking .count {
    color: #10b981;
}

.hotel-delivery .count {
    color: #f59e0b;
}

.summary-stats .calories,
.summary-stats .cost {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}

.dark-mode .summary-stats .calories,
.dark-mode .summary-stats .cost {
    color: #9ca3af;
}

.meals-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meal-item {
    background: #ffffff;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.meal-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.dark-mode .meal-item {
    background: #374151;
    border-color: #4b5563;
}

.meal-type-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.meal-type-icon.breakfast {
    background: #fef3c7;
    color: #f59e0b;
}

.meal-type-icon.lunch {
    background: #dbeafe;
    color: #3b82f6;
}

.meal-type-icon.dinner {
    background: #ede9fe;
    color: #8b5cf6;
}

.meal-type-icon.snack {
    background: #fecaca;
    color: #ef4444;
}

.meal-info {
    flex: 1;
}

.meal-name {
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.dark-mode .meal-name {
    color: #f9fafb;
}

.meal-details {
    display: flex;
    gap: 16px;
    color: #6b7280;
    font-size: 0.9rem;
}

.dark-mode .meal-details {
    color: #9ca3af;
}

.meal-source {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    flex-shrink: 0;
}

.meal-source.home {
    background: #dcfdf7;
    color: #064e3b;
}

.meal-source.hotel {
    background: #fef3c7;
    color: #92400e;
}

.dark-mode .meal-source.home {
    background: #064e3b;
    color: #a7f3d0;
}

.dark-mode .meal-source.hotel {
    background: #451a03;
    color: #fbbf24;
}

/* Home vs Hotel Analysis */
.home-vs-hotel-analysis {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .home-vs-hotel-analysis {
    background: #1f2937;
    border-color: #374151;
}

.analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.comparison-insights {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.dark-mode .comparison-insights {
    background: #374151;
    border-color: #4b5563;
}

.insight-card {
    background: #ffffff;
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    margin-bottom: 12px;
}

.dark-mode .insight-card {
    background: #1f2937;
}

.insight-card:last-child {
    margin-bottom: 0;
}

.insight-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.insight-content h5 {
    color: #111827;
    font-weight: 600;
    margin-bottom: 4px;
}

.dark-mode .insight-content h5 {
    color: #f9fafb;
}

.insight-content p {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.4;
}

.dark-mode .insight-content p {
    color: #9ca3af;
}

/* Meal Modal Styles */
.meal-source-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.source-option {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #374151;
}

.source-option:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.source-option.active {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1e40af;
}

.dark-mode .source-option {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

.dark-mode .source-option:hover {
    background: #4b5563;
    border-color: #6b7280;
}

.dark-mode .source-option.active {
    background: #1e3a8a;
    border-color: #3b82f6;
    color: #dbeafe;
}

.source-option .icon {
    font-size: 1.5rem;
}

.cooking-details {
    background: #f9fafb;
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
    border: 1px solid #e5e7eb;
}

.dark-mode .cooking-details {
    background: #374151;
    border-color: #4b5563;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem;
}

.dark-mode .form-group label {
    color: #d1d5db;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.dark-mode .form-actions {
    border-top-color: #374151;
}

/* Weekly Food Analysis */
.weekly-analysis {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.weekly-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.weekly-summary-card {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.dark-mode .weekly-summary-card {
    background: #374151;
    border-color: #4b5563;
}

.weekly-summary-card h4 {
    color: #111827;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.dark-mode .weekly-summary-card h4 {
    color: #f9fafb;
}

.weekly-summary-card .value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 4px;
}

.weekly-summary-card .label {
    color: #6b7280;
    font-size: 0.8rem;
}

.dark-mode .weekly-summary-card .label {
    color: #9ca3af;
}

/* Empty states */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

.dark-mode .empty-state {
    color: #9ca3af;
}

.empty-state h3 {
    color: #374151;
    margin-bottom: 8px;
    font-weight: 600;
}

.dark-mode .empty-state h3 {
    color: #d1d5db;
}

/* Wide modal for meal modal */
.modal-content.wide-modal {
    max-width: 600px;
}

/* Chart container responsiveness */
.chart-container {
    overflow: hidden;
    position: relative;
}

.chart-container canvas {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.chart-section {
    overflow: hidden;
    position: relative;
}

.chart-section canvas {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Interactive Meal Planner Styles */
.meal-planner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.date-selector {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-small {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #374151;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-small:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.dark-mode .btn-small {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

.dark-mode .btn-small:hover {
    background: #4b5563;
    border-color: #6b7280;
}

#currentPlanDate {
    font-weight: 600;
    color: #111827;
    min-width: 100px;
    text-align: center;
}

.dark-mode #currentPlanDate {
    color: #f9fafb;
}

/* Enhanced Meal Cards */
.meal-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.meal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #3b82f6;
}

.dark-mode .meal-card {
    background: #1f2937;
    border-color: #374151;
}

.dark-mode .meal-card:hover {
    border-color: #60a5fa;
}

.meal-card.clickable {
    border: 2px dashed #d1d5db;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #6b7280;
}

.meal-card.clickable:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #f8fafc;
}

.dark-mode .meal-card.clickable {
    border-color: #4b5563;
    color: #9ca3af;
}

.dark-mode .meal-card.clickable:hover {
    border-color: #60a5fa;
    color: #60a5fa;
    background: #1e293b;
}

.meal-status {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.meal-status.planned {
    background: #dbeafe;
    color: #1e40af;
}

.meal-status.eaten {
    background: #dcfdf7;
    color: #065f46;
}

.dark-mode .meal-status.planned {
    background: #1e3a8a;
    color: #93c5fd;
}

.dark-mode .meal-status.eaten {
    background: #064e3b;
    color: #6ee7b7;
}

.meal-source-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #6b7280;
}

.meal-source-indicator.home {
    color: #059669;
}

.meal-source-indicator.hotel {
    color: #d97706;
}

.dark-mode .meal-source-indicator {
    color: #9ca3af;
}

.dark-mode .meal-source-indicator.home {
    color: #10b981;
}

.dark-mode .meal-source-indicator.hotel {
    color: #f59e0b;
}


/* Meal Selection Modal */
.meal-selection-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.suggested-meal-info {
    background: #f8fafc;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.dark-mode .suggested-meal-info {
    background: #374151;
    border-color: #4b5563;
}

.suggested-meal-info .meal-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

.dark-mode .suggested-meal-info .meal-name {
    color: #f9fafb;
}

.suggested-meal-info .meal-meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    color: #6b7280;
    font-size: 0.9rem;
}

.dark-mode .suggested-meal-info .meal-meta {
    color: #9ca3af;
}

.meal-options h4 {
    color: #111827;
    margin-bottom: 12px;
    font-weight: 600;
}

.dark-mode .meal-options h4 {
    color: #f9fafb;
}

.source-selection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.source-btn {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #374151;
}

.source-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.source-btn.active {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1e40af;
}

.dark-mode .source-btn {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

.dark-mode .source-btn:hover {
    background: #4b5563;
    border-color: #6b7280;
}

.dark-mode .source-btn.active {
    background: #1e3a8a;
    border-color: #3b82f6;
    color: #dbeafe;
}

.source-btn .icon {
    font-size: 1.5rem;
}

.status-selection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.status-btn {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #374151;
}

.status-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.status-btn.active {
    background: #dcfdf7;
    border-color: #10b981;
    color: #065f46;
}

.dark-mode .status-btn {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

.dark-mode .status-btn:hover {
    background: #4b5563;
    border-color: #6b7280;
}

.dark-mode .status-btn.active {
    background: #064e3b;
    border-color: #10b981;
    color: #6ee7b7;
}

.cooking-options {
    background: #f9fafb;
    padding: 16px;
    border-radius: 8px;
    margin-top: 12px;
    border: 1px solid #e5e7eb;
}

.dark-mode .cooking-options {
    background: #374151;
    border-color: #4b5563;
}

.cooking-options label {
    display: block;
    margin-bottom: 8px;
    color: #374151;
    font-weight: 500;
}

.dark-mode .cooking-options label {
    color: #d1d5db;
}

.cooking-options input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    margin-bottom: 12px;
}

.dark-mode .cooking-options input {
    background: #1f2937;
    border-color: #4b5563;
    color: #f9fafb;
}

/* Regenerate Meal Modal */
.regenerate-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.regenerate-content p {
    color: #6b7280;
    text-align: center;
    margin: 0;
}

.dark-mode .regenerate-content p {
    color: #9ca3af;
}

.meal-suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    max-height: 400px;
    overflow-y: auto;
}

.meal-suggestion-card {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.meal-suggestion-card:hover {
    border-color: #3b82f6;
    background: #f8fafc;
    transform: translateY(-2px);
}

.dark-mode .meal-suggestion-card {
    background: #374151;
    border-color: #4b5563;
}

.dark-mode .meal-suggestion-card:hover {
    border-color: #60a5fa;
    background: #1e293b;
}

.meal-suggestion-card .meal-emoji {
    font-size: 2rem;
    margin-bottom: 8px;
}

.meal-suggestion-card .meal-name {
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.dark-mode .meal-suggestion-card .meal-name {
    color: #f9fafb;
}

.meal-suggestion-card .meal-details {
    color: #6b7280;
    font-size: 0.85rem;
}

.dark-mode .meal-suggestion-card .meal-details {
    color: #9ca3af;
}

.regenerate-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .meal-planner-header {
        flex-direction: column;
        align-items: stretch;
    }

    .date-selector {
        justify-content: center;
    }

    .source-selection {
        grid-template-columns: 1fr;
    }

    .status-selection {
        grid-template-columns: 1fr;
    }

    .meal-suggestions-grid {
        grid-template-columns: 1fr;
    }

    .regenerate-actions {
        flex-direction: column;
    }
}

.income-vs-expenses h3 {
    color: #111827;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .income-vs-expenses h3 {
    color: #f9fafb;
}

.comparison-chart-container {
    margin-bottom: 16px;
    text-align: center;
}

.comparison-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.comparison-stat {
    text-align: center;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.dark-mode .comparison-stat {
    background: #374151;
    border-color: #4b5563;
}

.comparison-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 4px;
}

.comparison-stat.positive .comparison-stat-value {
    color: #10b981;
}

.comparison-stat.negative .comparison-stat-value {
    color: #ef4444;
}

.comparison-stat-label {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

.dark-mode .comparison-stat-label {
    color: #9ca3af;
}

/* Category Insights */
.category-insights {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .category-insights {
    background: #1f2937;
    border-color: #374151;
}

.category-insights h3 {
    color: #111827;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .category-insights h3 {
    color: #f9fafb;
}

.category-analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.category-analysis-item {
    background: #f8fafc;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.dark-mode .category-analysis-item {
    background: #374151;
    border-color: #4b5563;
}

.category-analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.category-analysis-name {
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .category-analysis-name {
    color: #f9fafb;
}

.category-analysis-percentage {
    font-weight: 700;
    color: #3b82f6;
}

.category-analysis-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 8px;
}

.dark-mode .category-analysis-details {
    color: #9ca3af;
}

.category-recommendation {
    font-size: 0.8rem;
    padding: 8px;
    border-radius: 4px;
    margin-top: 8px;
}

.category-recommendation.success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.category-recommendation.warning {
    background: #fffbeb;
    color: #a16207;
    border: 1px solid #fed7aa;
}

.category-recommendation.info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.dark-mode .category-recommendation.success {
    background: #064e3b;
    color: #34d399;
    border-color: #059669;
}

.dark-mode .category-recommendation.warning {
    background: #451a03;
    color: #fbbf24;
    border-color: #f59e0b;
}

.dark-mode .category-recommendation.info {
    background: #1e3a8a;
    color: #93c5fd;
    border-color: #3b82f6;
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Tab Navigation */
.expense-tabs {
    display: flex;
    background: #f8fafc;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px;
    border: 1px solid #e2e8f0;
}

.dark-mode .expense-tabs {
    background: #1e293b;
    border-color: #334155;
}

.tab-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tab-btn:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.tab-btn.active {
    background: #3b82f6;
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.dark-mode .tab-btn {
    color: #94a3b8;
}

.dark-mode .tab-btn:hover {
    background: rgba(59, 130, 246, 0.1);
}

/* Tab Content */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Overview Tab Styles */
.expense-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .expense-overview-grid {
        grid-template-columns: 1fr;
    }
}

.budget-tracker {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.dark-mode .budget-tracker {
    background: #1f2937;
    border-color: #374151;
}

.budget-tracker h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .budget-tracker h3 {
    color: #f9fafb;
}

.budget-categories {
    space-y: 12px;
}

.budget-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.dark-mode .budget-item {
    border-bottom-color: #334155;
}

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

.budget-category {
    font-weight: 500;
    color: #374151;
}

.dark-mode .budget-category {
    color: #d1d5db;
}

.budget-progress {
    flex: 1;
    margin: 0 16px;
}

.budget-bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.dark-mode .budget-bar {
    background: #334155;
}

.budget-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.budget-fill.over-budget {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.budget-amount {
    font-size: 0.9rem;
    font-weight: 600;
    color: #10b981;
}

.budget-amount.over-budget {
    color: #ef4444;
}

.quick-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .quick-charts {
        grid-template-columns: 1fr;
    }
}

.chart-container {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.dark-mode .chart-container {
    background: #1f2937;
    border-color: #374151;
}

.chart-container h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
    text-align: center;
}

.dark-mode .chart-container h3 {
    color: #f9fafb;
}

.recent-expenses {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.dark-mode .recent-expenses {
    background: #1f2937;
    border-color: #374151;
}

.recent-expenses h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .recent-expenses h3 {
    color: #f9fafb;
}

/* Calendar Tab Styles */
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.calendar-header h2 {
    color: #111827;
    font-weight: 600;
    margin: 0;
}

/* Enhanced Expense Modal Styles */
.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    flex: 1;
}

.form-group {
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: #374151;
}

.dark-mode .form-group label {
    color: #d1d5db;
}

/* Smart Suggestions */
.smart-suggestions,
.auto-complete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.dark-mode .smart-suggestions,
.dark-mode .auto-complete-suggestions {
    background: #374151;
    border-color: #4b5563;
}

.suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
}

.suggestion-item:hover {
    background: #f9fafb;
}

.dark-mode .suggestion-item {
    border-bottom-color: #4b5563;
}

.dark-mode .suggestion-item:hover {
    background: #4b5563;
}

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

.smart-category-suggestion {
    margin-top: 8px;
    padding: 8px 12px;
    background: #dbeafe;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #1e40af;
}

.dark-mode .smart-category-suggestion {
    background: #1e3a8a;
    color: #93c5fd;
}

/* Amount Suggestions */
.suggestion-header {
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
    border-bottom: 1px solid #e5e7eb;
}

.dark-mode .suggestion-header {
    color: #9ca3af;
    border-bottom-color: #4b5563;
}

.suggestion-buttons {
    padding: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-suggestion {
    padding: 6px 12px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.btn-suggestion:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    transform: translateY(-1px);
}

.dark-mode .btn-suggestion {
    background: #4b5563;
    border-color: #6b7280;
    color: #d1d5db;
}

.dark-mode .btn-suggestion:hover {
    background: #6b7280;
    border-color: #9ca3af;
}

/* Expense Insights */
.forecast-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insight-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
}

.insight-item.positive {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #22c55e;
}

.insight-item.warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}

.insight-item.danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

.insight-item.info {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.dark-mode .insight-item.positive {
    background: #065f46;
    color: #86efac;
    border-color: #059669;
}

.dark-mode .insight-item.warning {
    background: #78350f;
    color: #fcd34d;
    border-color: #d97706;
}

.dark-mode .insight-item.danger {
    background: #7f1d1d;
    color: #fca5a5;
    border-color: #dc2626;
}

.dark-mode .insight-item.info {
    background: #1e3a8a;
    color: #93c5fd;
    border-color: #2563eb;
}

.insight-icon {
    font-size: 1rem;
}

.insight-text {
    flex: 1;
    line-height: 1.4;
}

/* Recurring and Shared Options */
.recurring-options {
    margin-top: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.dark-mode .recurring-options {
    background: #1e293b;
    border-color: #334155;
}


/* Expense Forecast */
.expense-forecast {
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 12px;
    border: 1px solid #0ea5e9;
}

.dark-mode .expense-forecast {
    background: linear-gradient(135deg, #0c4a6e, #164e63);
}

.expense-forecast h4 {
    margin: 0 0 8px 0;
    color: #0c4a6e;
    font-weight: 600;
}

.dark-mode .expense-forecast h4 {
    color: #7dd3fc;
}

.forecast-content {
    font-size: 0.9rem;
    color: #0369a1;
    line-height: 1.5;
}

.dark-mode .forecast-content {
    color: #bae6fd;
}

/* Enhanced Insights Tab */
.recurring-management {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .recurring-management {
    background: #1f2937;
    border-color: #374151;
}

.recurring-management h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .recurring-management h3 {
    color: #f9fafb;
}

.recurring-list {
    margin-bottom: 16px;
}

.recurring-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
}

.dark-mode .recurring-item {
    background: #374151;
    border-color: #4b5563;
}

.recurring-item-info h4 {
    margin: 0;
    font-weight: 600;
    color: #111827;
    font-size: 0.9rem;
}

.dark-mode .recurring-item-info h4 {
    color: #f9fafb;
}

.recurring-item-info p {
    margin: 4px 0 0 0;
    font-size: 0.8rem;
    color: #6b7280;
}

.dark-mode .recurring-item-info p {
    color: #9ca3af;
}

.recurring-item-amount {
    font-weight: 700;
    color: #dc2626;
    font-size: 1.1rem;
}

.recurring-item-actions {
    display: flex;
    gap: 8px;
}

.recurring-item-actions button {
    padding: 4px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.8rem;
    transition: background 0.2s ease;
}

.recurring-item-actions button:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Smart Alerts */
.smart-alerts {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .smart-alerts {
    background: #1f2937;
    border-color: #374151;
}

.smart-alerts h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .smart-alerts h3 {
    color: #f9fafb;
}

.alert-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #fef3c7;
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 4px solid #f59e0b;
}

.alert-item.warning {
    background: #fef3c7;
    border-left-color: #f59e0b;
}

.alert-item.danger {
    background: #fef2f2;
    border-left-color: #ef4444;
}

.alert-item.info {
    background: #eff6ff;
    border-left-color: #3b82f6;
}

.dark-mode .alert-item.warning {
    background: #78350f;
}

.dark-mode .alert-item.danger {
    background: #7f1d1d;
}

.dark-mode .alert-item.info {
    background: #1e3a8a;
}

.alert-item-icon {
    margin-right: 12px;
    font-size: 1.2rem;
}

.alert-item-content h4 {
    margin: 0;
    font-weight: 600;
    color: #92400e;
    font-size: 0.9rem;
}

.alert-item.danger .alert-item-content h4 {
    color: #991b1b;
}

.alert-item.info .alert-item-content h4 {
    color: #1d4ed8;
}

.dark-mode .alert-item-content h4 {
    color: #fbbf24;
}

.dark-mode .alert-item.danger .alert-item-content h4 {
    color: #fca5a5;
}

.dark-mode .alert-item.info .alert-item-content h4 {
    color: #93c5fd;
}

.alert-item-content p {
    margin: 4px 0 0 0;
    font-size: 0.8rem;
    color: #78350f;
}

.alert-item.danger .alert-item-content p {
    color: #7f1d1d;
}

.alert-item.info .alert-item-content p {
    color: #1e40af;
}

.dark-mode .alert-item-content p {
    color: #d97706;
}

.dark-mode .alert-item.danger .alert-item-content p {
    color: #f87171;
}

.dark-mode .alert-item.info .alert-item-content p {
    color: #bfdbfe;
}

/* Enhanced Expense Item Display */
.expense-category-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-right: 12px;
}

.expense-amount-display {
    font-weight: 700;
    color: #dc2626;
    font-size: 1.1rem;
    text-align: right;
}

.expense-info .expense-title {
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.dark-mode .expense-info .expense-title {
    color: #f9fafb;
}

.expense-info .expense-description {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 2px;
}

.dark-mode .expense-info .expense-description {
    color: #9ca3af;
}

.expense-info .expense-date {
    font-size: 0.75rem;
    color: #9ca3af;
}

.dark-mode .expense-info .expense-date {
    color: #6b7280;
}

/* Priority indicators */
.priority-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 8px;
}

.priority-low {
    background: #10b981;
}

.priority-medium {
    background: #f59e0b;
}

.priority-high {
    background: #ef4444;
}

.priority-essential {
    background: #7c2d12;
    box-shadow: 0 0 8px rgba(124, 45, 18, 0.5);
}

/* Recurring Expense Management Modal */
.wide-modal {
    max-width: 800px;
    width: 95%;
}

.recurring-tabs {
    display: flex;
    background: #f8fafc;
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 24px;
    border: 1px solid #e2e8f0;
}

.dark-mode .recurring-tabs {
    background: #1e293b;
    border-color: #334155;
}

.recurring-tabs .tab-btn {
    flex: 1;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.recurring-tabs .tab-btn:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.recurring-tabs .tab-btn.active {
    background: #3b82f6;
    color: white;
}

.dark-mode .recurring-tabs .tab-btn {
    color: #94a3b8;
}

.recurring-expenses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.recurring-expense-card {
    background: #ffffff;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.recurring-expense-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dark-mode .recurring-expense-card {
    background: #374151;
    border-color: #4b5563;
}

.recurring-expense-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.recurring-expense-title {
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.dark-mode .recurring-expense-title {
    color: #f9fafb;
}

.recurring-expense-amount {
    font-weight: 700;
    color: #dc2626;
    font-size: 1.1rem;
}

.recurring-expense-details {
    margin-bottom: 12px;
}

.recurring-expense-details p {
    margin: 4px 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.dark-mode .recurring-expense-details p {
    color: #9ca3af;
}

.recurring-expense-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-small {
    padding: 4px 12px;
    font-size: 0.8rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-small.btn-pause {
    background: #f59e0b;
    color: white;
}

.btn-small.btn-pause:hover {
    background: #d97706;
}

.btn-small.btn-resume {
    background: #10b981;
    color: white;
}

.btn-small.btn-resume:hover {
    background: #059669;
}

.btn-small.btn-edit {
    background: #3b82f6;
    color: white;
}

.btn-small.btn-edit:hover {
    background: #2563eb;
}

.btn-small.btn-delete {
    background: #ef4444;
    color: white;
}

.btn-small.btn-delete:hover {
    background: #dc2626;
}

/* Upcoming Expenses List */
.upcoming-expenses-list {
    max-height: 400px;
    overflow-y: auto;
}

.upcoming-expense-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 4px solid #3b82f6;
}

.dark-mode .upcoming-expense-item {
    background: #374151;
}

.upcoming-expense-info h4 {
    margin: 0;
    font-weight: 600;
    color: #111827;
    font-size: 0.9rem;
}

.dark-mode .upcoming-expense-info h4 {
    color: #f9fafb;
}

.upcoming-expense-info p {
    margin: 4px 0 0 0;
    font-size: 0.8rem;
    color: #6b7280;
}

.dark-mode .upcoming-expense-info p {
    color: #9ca3af;
}

.upcoming-expense-amount {
    font-weight: 700;
    color: #dc2626;
}

.upcoming-expense-date {
    font-size: 0.8rem;
    color: #3b82f6;
    font-weight: 500;
}

/* Enhanced Calendar Styles */
.calendar-day.expense-low {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
}

.calendar-day.expense-medium {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
}

.calendar-day.expense-high {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

/* Meal Calendar Indicator Styles */
.day-meal-indicator {
    width: 100%;
    margin-top: 4px;
}

.day-meal-indicator.meal-complete {
    background: rgba(16, 185, 129, 0.2);
    border-radius: 4px;
    padding: 2px;
}

.day-meal-indicator.meal-planned {
    background: rgba(59, 130, 246, 0.2);
    border-radius: 4px;
    padding: 2px;
}

.day-meal-indicator.meal-partial {
    background: rgba(245, 158, 11, 0.2);
    border-radius: 4px;
    padding: 2px;
}

.meal-dots {
    display: flex;
    justify-content: center;
    gap: 2px;
    font-size: 12px;
}

.meal-dot {
    color: #d1d5db;
    transition: color 0.2s ease;
}

.meal-dot.planned {
    color: #3b82f6;
}

.meal-dot.eaten {
    color: #10b981;
}

.meal-dot.empty {
    color: #e5e7eb;
}

/* Dark mode styles for meal indicators */
.dark-mode .day-meal-indicator.meal-complete {
    background: rgba(16, 185, 129, 0.3);
}

.dark-mode .day-meal-indicator.meal-planned {
    background: rgba(96, 165, 250, 0.3);
}

.dark-mode .day-meal-indicator.meal-partial {
    background: rgba(245, 158, 11, 0.3);
}

.dark-mode .meal-dot {
    color: #4b5563;
}

.dark-mode .meal-dot.planned {
    color: #60a5fa;
}

.dark-mode .meal-dot.eaten {
    color: #34d399;
}

.dark-mode .meal-dot.empty {
    color: #374151;
}

.day-expense-amount {
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 2px;
    padding: 2px 4px;
    border-radius: 4px;
}

.day-expense-amount.expense-low {
    background: #10b981;
    color: white;
}

.day-expense-amount.expense-medium {
    background: #f59e0b;
    color: white;
}

.day-expense-amount.expense-high {
    background: #ef4444;
    color: white;
}

/* Empty states */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

.dark-mode .empty-state {
    color: #9ca3af;
}

.empty-state h3 {
    margin-bottom: 8px;
    color: #374151;
}

.dark-mode .empty-state h3 {
    color: #d1d5db;
}

/* Loading states */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f4f6;
    border-radius: 50%;
    border-top-color: #3b82f6;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Habit Tracking Styles */
.habit-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.habit-tabs {
    display: flex;
    background: #f8fafc;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px;
    border: 1px solid #e2e8f0;
}

.dark-mode .habit-tabs {
    background: #1e293b;
    border-color: #334155;
}

.habit-tabs .tab-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.habit-tabs .tab-btn:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.habit-tabs .tab-btn.active {
    background: #3b82f6;
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.dark-mode .habit-tabs .tab-btn {
    color: #94a3b8;
}

/* Daily Habits */
.daily-tracker {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .daily-tracker {
    background: #1f2937;
    border-color: #374151;
}

.daily-tracker h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .daily-tracker h3 {
    color: #f9fafb;
}

.habit-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.habit-check-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s ease;
}

.habit-check-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.habit-check-item.completed {
    background: #dcfdf7;
    border-color: #10b981;
}

.dark-mode .habit-check-item {
    background: #374151;
    border-color: #4b5563;
}

.dark-mode .habit-check-item.completed {
    background: #064e3b;
}

.habit-checkbox {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
}

.habit-info h4 {
    margin: 0;
    font-weight: 600;
    color: #111827;
    font-size: 0.9rem;
}

.dark-mode .habit-info h4 {
    color: #f9fafb;
}

.habit-info p {
    margin: 4px 0 0 0;
    font-size: 0.8rem;
    color: #6b7280;
}

.dark-mode .habit-info p {
    color: #9ca3af;
}

.habit-streak {
    margin-left: auto;
    text-align: right;
}

.streak-number {
    font-weight: 700;
    color: #f59e0b;
    font-size: 1.1rem;
}

.streak-label {
    font-size: 0.75rem;
    color: #6b7280;
}

.dark-mode .streak-label {
    color: #9ca3af;
}

/* Habit Categories */
.habit-categories {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.category-section h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .category-section h3 {
    color: #f9fafb;
}

.habit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.habit-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    transition: all 0.3s ease;
}

.habit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.dark-mode .habit-card {
    background: #1f2937;
    border-color: #374151;
}

.habit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.habit-title {
    font-weight: 600;
    color: #111827;
    margin: 0;
    font-size: 1rem;
}

.dark-mode .habit-title {
    color: #f9fafb;
}

.habit-frequency {
    font-size: 0.8rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: 4px 8px;
    border-radius: 12px;
}

.dark-mode .habit-frequency {
    color: #9ca3af;
    background: #4b5563;
}

.habit-progress-section {
    margin-bottom: 16px;
}

.habit-progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.dark-mode .habit-progress-bar {
    background: #374151;
}

.habit-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    transition: width 0.6s ease;
    border-radius: 8px;
}

.habit-stats-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #6b7280;
}

.dark-mode .habit-stats-row {
    color: #9ca3af;
}

.habit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.habit-actions button {
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-complete {
    background: #10b981;
    color: white;
}

.btn-complete:hover {
    background: #059669;
}

.btn-skip {
    background: #f59e0b;
    color: white;
}

.btn-skip:hover {
    background: #d97706;
}

/* Correlations */
.correlations-dashboard {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.dark-mode .correlations-dashboard {
    background: #1f2937;
    border-color: #374151;
}

.correlations-dashboard h3 {
    color: #111827;
    margin-bottom: 8px;
    font-weight: 600;
}

.dark-mode .correlations-dashboard h3 {
    color: #f9fafb;
}

.correlation-intro {
    color: #6b7280;
    margin-bottom: 24px;
}

.dark-mode .correlation-intro {
    color: #9ca3af;
}

.correlation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.correlation-card {
    background: #f9fafb;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.correlation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark-mode .correlation-card {
    background: #374151;
    border-color: #4b5563;
}

.correlation-card h4 {
    margin: 0 0 12px 0;
    font-weight: 600;
    color: #111827;
    font-size: 1rem;
}

.dark-mode .correlation-card h4 {
    color: #f9fafb;
}

.correlation-strength {
    margin-bottom: 12px;
}

.correlation-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.dark-mode .correlation-bar {
    background: #4b5563;
}

.correlation-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
    border-radius: 8px;
    transition: width 0.6s ease;
}

.correlation-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

.dark-mode .correlation-value {
    color: #d1d5db;
}

.correlation-insight {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
    font-style: italic;
}

.dark-mode .correlation-insight {
    color: #9ca3af;
}

.habit-impact-chart {
    margin-top: 32px;
}

.habit-impact-chart h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .habit-impact-chart h3 {
    color: #f9fafb;
}

/* Insights */
.insights-dashboard {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.dark-mode .insights-dashboard {
    background: #1f2937;
    border-color: #374151;
}

.insights-dashboard h3 {
    color: #111827;
    margin-bottom: 24px;
    font-weight: 600;
}

.dark-mode .insights-dashboard h3 {
    color: #f9fafb;
}

.insight-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.insight-section h4 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .insight-section h4 {
    color: #f9fafb;
}

.performance-analysis,
.challenge-analysis,
.recommendations {
    background: #f9fafb;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.dark-mode .performance-analysis,
.dark-mode .challenge-analysis,
.dark-mode .recommendations {
    background: #374151;
    border-color: #4b5563;
}

.insight-item {
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

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

.dark-mode .insight-item {
    border-bottom-color: #4b5563;
}

.insight-item h5 {
    margin: 0 0 4px 0;
    font-weight: 600;
    color: #111827;
    font-size: 0.9rem;
}

.dark-mode .insight-item h5 {
    color: #f9fafb;
}

.insight-item p {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.dark-mode .insight-item p {
    color: #9ca3af;
}

/* Goals */
.goals-dashboard {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.dark-mode .goals-dashboard {
    background: #1f2937;
    border-color: #374151;
}

.goals-dashboard h3 {
    color: #111827;
    margin-bottom: 24px;
    font-weight: 600;
}

.dark-mode .goals-dashboard h3 {
    color: #f9fafb;
}

.goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.goal-card {
    background: #f9fafb;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.goal-card.active-goal {
    border-color: #3b82f6;
    background: #eff6ff;
}

.goal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark-mode .goal-card {
    background: #374151;
    border-color: #4b5563;
}

.dark-mode .goal-card.active-goal {
    background: #1e3a8a;
    border-color: #3b82f6;
}

.goal-card h4 {
    margin: 0 0 16px 0;
    font-weight: 600;
    color: #111827;
    font-size: 1.1rem;
}

.dark-mode .goal-card h4 {
    color: #f9fafb;
}

.goal-progress {
    display: flex;
    align-items: center;
    gap: 16px;
}

.progress-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(#3b82f6 0deg, #e5e7eb 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #3b82f6;
    flex-shrink: 0;
}

.goal-details p {
    margin: 0 0 8px 0;
    font-weight: 500;
    color: #374151;
}

.dark-mode .goal-details p {
    color: #d1d5db;
}

.goal-status {
    font-size: 0.85rem;
    color: #6b7280;
}

.dark-mode .goal-status {
    color: #9ca3af;
}

.goal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Enhanced responsive design */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 12px;
    }

    .wide-modal {
        width: 100%;
        margin: 20px;
    }

    .recurring-expenses-grid {
        grid-template-columns: 1fr;
    }

    .expense-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .expense-amount-display {
        text-align: left;
        margin-top: 8px;
    }

    .prediction-cards {
        flex-direction: column;
    }

    .correlation-grid,
    .goals-grid,
    .habit-grid {
        grid-template-columns: 1fr;
    }

    .habit-checklist {
        grid-template-columns: 1fr;
    }

    .insight-categories {
        grid-template-columns: 1fr;
    }

    .goal-progress {
        flex-direction: column;
        text-align: center;
    }
}

/* Checkbox styling */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkmark {
    font-size: 0.9rem;
}

/* Enhanced button styling */
.btn-link {
    background: none;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    font-weight: 500;
    text-decoration: underline;
    font-size: 0.9rem;
}

.btn-link:hover {
    color: #2563eb;
}

.dark-mode .btn-link {
    color: #60a5fa;
}

.dark-mode .btn-link:hover {
    color: #93c5fd;
}

/* Chart containers enhancement */
.chart-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.chart-controls select,
.chart-controls button {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    font-size: 0.85rem;
    cursor: pointer;
}

.dark-mode .chart-controls select,
.dark-mode .chart-controls button {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.chart-controls button.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.dark-mode .calendar-header h2 {
    color: #f9fafb;
}

.btn-icon {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    color: #64748b;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: #e2e8f0;
    color: #3b82f6;
}

.dark-mode .btn-icon {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

.dark-mode .btn-icon:hover {
    background: #334155;
    color: #3b82f6;
}

.calendar-legend {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #64748b;
}

.dark-mode .legend-item {
    color: #94a3b8;
}

.color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.color-dot.low {
    background: #10b981;
}

.color-dot.medium {
    background: #f59e0b;
}

.color-dot.high {
    background: #ef4444;
}

.expense-calendar {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .expense-calendar {
    background: #1f2937;
    border-color: #374151;
}

.calendar-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.dark-mode .calendar-header-row {
    background: #1e293b;
    border-bottom-color: #334155;
}

.calendar-day-header {
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    color: #64748b;
    font-size: 0.85rem;
}

.dark-mode .calendar-day-header {
    color: #94a3b8;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day {
    aspect-ratio: 1;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    background: #ffffff;
}

.dark-mode .calendar-day {
    border-color: #334155;
    background: #1f2937;
}

/* Removed hover effects for calendar days to better see meal status colors */

.calendar-day.other-month {
    color: #cbd5e1;
    background: #f8fafc;
}

.dark-mode .calendar-day.other-month {
    color: #64748b;
    background: #0f172a;
}

.calendar-day.selected {
    background: #dbeafe;
    border-color: #3b82f6;
}

.dark-mode .calendar-day.selected {
    background: #1e3a8a;
}

.calendar-day.today {
    background: #fef3c7;
    border-color: #f59e0b;
}

.dark-mode .calendar-day.today {
    background: #451a03;
}

.day-number {
    font-weight: 500;
    margin-bottom: 4px;
    color: #374151;
}

.dark-mode .day-number {
    color: #d1d5db;
}

.day-expense-amount {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    text-align: center;
}

.expense-low {
    background: #d1fae5;
    color: #065f46;
}

.expense-medium {
    background: #fef3c7;
    color: #92400e;
}

.expense-high {
    background: #fee2e2;
    color: #991b1b;
}

.dark-mode .expense-low {
    background: #064e3b;
    color: #6ee7b7;
}

.dark-mode .expense-medium {
    background: #451a03;
    color: #fbbf24;
}

.dark-mode .expense-high {
    background: #7f1d1d;
    color: #fca5a5;
}

.selected-date-expenses {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.dark-mode .selected-date-expenses {
    background: #1f2937;
    border-color: #374151;
}

.selected-date-expenses h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .selected-date-expenses h3 {
    color: #f9fafb;
}

.date-expense-list {
    space-y: 12px;
}

.date-expense-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.dark-mode .date-expense-item {
    background: #1e293b;
    border-color: #334155;
}

.expense-category-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-right: 12px;
}

.expense-details {
    flex: 1;
}

.expense-title {
    font-weight: 500;
    color: #374151;
    margin-bottom: 2px;
}

.dark-mode .expense-title {
    color: #d1d5db;
}

.expense-description {
    font-size: 0.85rem;
    color: #64748b;
}

.dark-mode .expense-description {
    color: #94a3b8;
}

.expense-amount-display {
    font-weight: 600;
    color: #ef4444;
    font-size: 1.1rem;
}

/* Analytics Tab Styles */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .analytics-grid {
        grid-template-columns: 1fr;
    }
}

.chart-section {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.dark-mode .chart-section {
    background: #1f2937;
    border-color: #374151;
}

.chart-section h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .chart-section h3 {
    color: #f9fafb;
}

.chart-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.chart-controls select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    font-size: 0.9rem;
}

.dark-mode .chart-controls select {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

.btn-small {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #64748b;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-small:hover {
    background: #f8fafc;
    color: #3b82f6;
}

.btn-small.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.dark-mode .btn-small {
    background: #374151;
    border-color: #4b5563;
    color: #94a3b8;
}

.dark-mode .btn-small:hover {
    background: #4b5563;
}

.analytics-summary {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.dark-mode .analytics-summary {
    background: #1f2937;
    border-color: #374151;
}

.analytics-summary h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .analytics-summary h3 {
    color: #f9fafb;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.insight-item {
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.dark-mode .insight-item {
    background: #1e293b;
    border-color: #334155;
}

.insight-title {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.dark-mode .insight-title {
    color: #d1d5db;
}

/* Exercise Timer Styles */
.exercise-timer-section {
    margin: 20px 0;
    padding: 24px;
    background: #f8fafc;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.dark-mode .exercise-timer-section {
    background: #1e293b;
    border-color: #334155;
}

.timer-circle {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.timer-display {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 8px auto;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.timer-display.timer-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    animation: pulse-warning 1s infinite;
}

.timer-display.timer-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    animation: pulse-danger 0.5s infinite;
}

@keyframes pulse-warning {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes pulse-danger {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.timer-label {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.dark-mode .timer-label {
    color: #9ca3af;
}

.timer-controls {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.timer-controls button {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.timer-controls .btn-secondary {
    background: #e5e7eb;
    color: #374151;
}

.timer-controls .btn-secondary:hover {
    background: #d1d5db;
    transform: translateY(-1px);
}

.dark-mode .timer-controls .btn-secondary {
    background: #4b5563;
    color: #f9fafb;
}

.dark-mode .timer-controls .btn-secondary:hover {
    background: #6b7280;
}

.timer-progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 16px;
}

.dark-mode .timer-progress-bar {
    background: #374151;
}

.timer-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 4px;
}

.exercise-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
    flex-wrap: wrap;
}

.exercise-info {
    margin-bottom: 20px;
}

.exercise-meta {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.exercise-duration,
.exercise-calories {
    background: #dbeafe;
    color: #1e40af;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dark-mode .exercise-duration,
.dark-mode .exercise-calories {
    background: #1e3a8a;
    color: #bfdbfe;
}

.exercise-instructions {
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
}

.exercise-instructions h4 {
    color: #111827;
    margin-bottom: 12px;
    font-weight: 600;
}

.dark-mode .exercise-instructions h4 {
    color: #f9fafb;
}

.exercise-instructions ol {
    padding-left: 20px;
}

.exercise-instructions li {
    margin-bottom: 8px;
    color: #374151;
    line-height: 1.5;
}

.dark-mode .exercise-instructions li {
    color: #d1d5db;
}

/* Responsive timer styles */
@media (max-width: 480px) {
    .timer-display {
        width: 100px;
        height: 100px;
        font-size: 1.25rem;
    }

    .timer-controls {
        flex-direction: column;
        align-items: center;
    }

    .timer-controls button {
        min-width: 120px;
    }

    .exercise-meta {
        flex-direction: column;
        align-items: center;
    }
}

/* Enhanced Badge Styles */
.badges-section {
    margin-top: 32px;
}

.badges-section h3 {
    color: #111827;
    margin-bottom: 20px;
    font-weight: 600;
    text-align: center;
}

.dark-mode .badges-section h3 {
    color: #f9fafb;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
}

.badge {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dark-mode .badge {
    background: #1e293b;
    border-color: #334155;
}

.badge.locked {
    opacity: 0.6;
    filter: grayscale(100%);
}

.badge.unlocked {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-color: #3b82f6;
    opacity: 1;
    filter: grayscale(0%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.dark-mode .badge.unlocked {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
    border-color: #60a5fa;
}

.badge span {
    font-size: 2rem;
    margin-bottom: 8px;
    display: block;
}

.badge p {
    font-weight: 600;
    color: #374151;
    margin: 8px 0 4px 0;
    font-size: 0.9rem;
}

.dark-mode .badge p {
    color: #d1d5db;
}

.badge small {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.3;
    text-align: center;
}

.dark-mode .badge small {
    color: #9ca3af;
}

.badge.unlocked::after {
    content: '✨';
    position: absolute;
    top: -8px;
    right: -8px;
    background: #fbbf24;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    animation: sparkle 2s infinite;
}

@keyframes sparkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.8;
    }
}

.badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.badge.unlocked:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
}

/* Responsive badge styles */
@media (max-width: 768px) {
    .badges-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
        max-height: 350px;
    }

    .badge {
        padding: 12px;
        min-height: 100px;
    }

    .badge span {
        font-size: 1.5rem;
        margin-bottom: 6px;
    }

    .badge p {
        font-size: 0.8rem;
    }

    .badge small {
        font-size: 0.7rem;
    }
}

/* Enhanced Meal Plan Styles */
.meal-planner h3 {
    color: #111827;
    margin-bottom: 20px;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dark-mode .meal-planner h3 {
    color: #f9fafb;
}

.meal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.meal-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dark-mode .meal-card {
    background: #1f2937;
    border-color: #374151;
}

.meal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.meal-emoji {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 8px;
}

.meal-card h4 {
    color: #111827;
    margin-bottom: 12px;
    font-weight: 600;
    text-align: center;
    font-size: 1.1rem;
}

.dark-mode .meal-card h4 {
    color: #f9fafb;
}

.meal-card p {
    color: #374151;
    font-weight: 500;
    text-align: center;
    margin-bottom: 16px;
    font-size: 0.95rem;
    line-height: 1.4;
    min-height: 42px;
}

.dark-mode .meal-card p {
    color: #d1d5db;
}

.meal-details {
    display: flex;
    justify-content: space-around;
    margin-bottom: 16px;
    padding: 8px 0;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
}

.dark-mode .meal-details {
    border-color: #374151;
}

.calories,
.cost {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.calories {
    background: #fef3c7;
    color: #92400e;
}

.dark-mode .calories {
    background: #451a03;
    color: #fbbf24;
}

.cost {
    background: #d1fae5;
    color: #065f46;
}

.dark-mode .cost {
    background: #022c22;
    color: #34d399;
}

.btn-edit-meal {
    width: 100%;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit-meal:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #334155;
}

.dark-mode .btn-edit-meal {
    background: #334155;
    border-color: #475569;
    color: #cbd5e1;
}

.dark-mode .btn-edit-meal:hover {
    background: #475569;
    border-color: #64748b;
    color: #e2e8f0;
}

.meal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
    flex-wrap: wrap;
}

.meal-actions button {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Responsive meal plan styles */
@media (max-width: 768px) {
    .meal-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .meal-card {
        padding: 16px;
    }

    .meal-emoji {
        font-size: 1.5rem;
    }

    .meal-actions {
        flex-direction: column;
        align-items: center;
    }

    .meal-actions button {
        min-width: 200px;
    }
}

/* Food Analytics Dashboard Styles */
.food-analytics-section {
    margin-top: 32px;
    padding: 24px;
    background: #f8fafc;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.dark-mode .food-analytics-section {
    background: #1e293b;
    border-color: #334155;
}

.food-analytics-section h3 {
    color: #111827;
    margin-bottom: 24px;
    font-weight: 600;
    text-align: center;
}

.dark-mode .food-analytics-section h3 {
    color: #f9fafb;
}

.nutrition-overview {
    margin-bottom: 32px;
}

.nutrition-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.nutrition-stat {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.dark-mode .nutrition-stat {
    background: #1f2937;
    border-color: #374151;
}

.nutrition-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 4px;
}

.dark-mode .nutrition-value {
    color: #60a5fa;
}

.nutrition-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 8px;
    font-weight: 500;
}

.dark-mode .nutrition-label {
    color: #9ca3af;
}

.nutrition-change {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
}

.nutrition-change.positive {
    background: #dcfdf7;
    color: #065f46;
}

.nutrition-change.negative {
    background: #fef2f2;
    color: #991b1b;
}

.dark-mode .nutrition-change.positive {
    background: #022c22;
    color: #34d399;
}

.dark-mode .nutrition-change.negative {
    background: #450a0a;
    color: #f87171;
}

.food-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.chart-container {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.dark-mode .chart-container {
    background: #1f2937;
    border-color: #374151;
}

.chart-container h4 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
    text-align: center;
    font-size: 1rem;
}

.dark-mode .chart-container h4 {
    color: #f9fafb;
}

.food-insights h4 {
    color: #111827;
    margin-bottom: 20px;
    font-weight: 600;
}

.dark-mode .food-insights h4 {
    color: #f9fafb;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.insight-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.2s ease;
}

.dark-mode .insight-card {
    background: #1f2937;
    border-color: #374151;
}

.insight-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.insight-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #dbeafe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-mode .insight-icon {
    background: #1e3a8a;
}

.insight-content h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}

.dark-mode .insight-content h5 {
    color: #f9fafb;
}

.insight-content p {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.4;
    margin: 0;
}

.dark-mode .insight-content p {
    color: #d1d5db;
}

/* Responsive food analytics styles */
@media (max-width: 768px) {
    .nutrition-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }

    .nutrition-stat {
        padding: 16px;
    }

    .nutrition-value {
        font-size: 1.5rem;
    }

    .food-charts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .chart-container {
        padding: 16px;
    }

    .insights-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .insight-card {
        padding: 12px;
    }

    .insight-icon {
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .food-analytics-section {
        padding: 16px;
        margin-top: 24px;
    }

    .nutrition-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .nutrition-stat {
        padding: 12px;
    }

    .nutrition-value {
        font-size: 1.25rem;
    }

    .nutrition-label {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .badges-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 8px;
        max-height: 300px;
    }

    .badge {
        padding: 10px;
        min-height: 90px;
    }

    .badge span {
        font-size: 1.3rem;
        margin-bottom: 4px;
    }

    .badge p {
        font-size: 0.75rem;
        margin: 4px 0 2px 0;
    }

    .badge small {
        font-size: 0.65rem;
    }
}

.insight-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 4px;
}

.insight-description {
    font-size: 0.85rem;
    color: #64748b;
}

.dark-mode .insight-description {
    color: #94a3b8;
}

/* Insights Tab Styles */
.insights-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
}

@media (max-width: 768px) {
    .insights-dashboard {
        grid-template-columns: 1fr;
    }
}

.prediction-section,
.patterns-section,
.recommendations-section,
.goals-section {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
}

.dark-mode .prediction-section,
.dark-mode .patterns-section,
.dark-mode .recommendations-section,
.dark-mode .goals-section {
    background: #1f2937;
    border-color: #374151;
}

.prediction-section h3,
.patterns-section h3,
.recommendations-section h3,
.goals-section h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dark-mode .prediction-section h3,
.dark-mode .patterns-section h3,
.dark-mode .recommendations-section h3,
.dark-mode .goals-section h3 {
    color: #f9fafb;
}

.prediction-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.prediction-card {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.dark-mode .prediction-card {
    background: #1e293b;
    border-color: #334155;
}

.prediction-card h4 {
    color: #64748b;
    margin-bottom: 12px;
    font-size: 0.9rem;
    font-weight: 500;
}

.dark-mode .prediction-card h4 {
    color: #94a3b8;
}

.prediction-amount {
    font-size: 1.8rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 8px;
}

.prediction-confidence {
    font-size: 0.8rem;
    color: #10b981;
    font-weight: 500;
}

.pattern-analysis,
.recommendations-list,
.goals-list {
    space-y: 12px;
}

.pattern-item,
.recommendation-item,
.goal-item {
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.dark-mode .pattern-item,
.dark-mode .recommendation-item,
.dark-mode .goal-item {
    background: #1e293b;
    border-color: #334155;
}

.pattern-title,
.recommendation-title,
.goal-title {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.dark-mode .pattern-title,
.dark-mode .recommendation-title,
.dark-mode .goal-title {
    color: #d1d5db;
}

.pattern-description,
.recommendation-description {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.dark-mode .pattern-description,
.dark-mode .recommendation-description {
    color: #94a3b8;
}

.goal-progress-bar {
    width: 100%;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.dark-mode .goal-progress-bar {
    background: #334155;
}

.goal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.goal-amount {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-top: 8px;
}

.goal-current {
    color: #10b981;
    font-weight: 600;
}

.goal-target {
    color: #64748b;
}

.dark-mode .goal-target {
    color: #94a3b8;
}

/* Enhanced Form Styles */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 480px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #374151;
}

.dark-mode .form-group label {
    color: #d1d5db;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dark-mode .form-group input,
.dark-mode .form-group select {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
    position: relative;
    cursor: pointer;
}

.dark-mode .checkmark {
    border-color: #4b5563;
    background: #374151;
}

.checkbox-group input[type="checkbox"]:checked + .checkmark {
    background: #3b82f6;
    border-color: #3b82f6;
}

.checkbox-group input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.dark-mode .form-actions {
    border-top-color: #334155;
}

/* Button Variants */
.btn-link {
    background: none;
    border: none;
    color: #3b82f6;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.9rem;
    padding: 4px 0;
    transition: color 0.2s ease;
}

.btn-link:hover {
    color: #1d4ed8;
}

/* Responsive Enhancements */
@media (max-width: 1024px) {
    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .quick-charts {
        grid-template-columns: 1fr;
    }

    .expense-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .calendar-legend {
        justify-content: center;
    }

    .header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .expense-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .tab-btn {
        font-size: 0.85rem;
        padding: 10px 8px;
    }
}

@media (max-width: 480px) {
    .prediction-cards {
        grid-template-columns: 1fr;
    }

    .calendar-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .calendar-legend {
        flex-direction: column;
        gap: 8px;
    }
}

/* Animation Enhancements */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-content.active {
    animation: fadeInUp 0.3s ease;
}

/* Removed calendar hover transform effect */

.insight-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark-mode .insight-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Loading States */
.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #64748b;
    font-style: italic;
}

.dark-mode .chart-loading {
    color: #94a3b8;
}

/* Empty States */
.empty-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #64748b;
    text-align: center;
}

.dark-mode .empty-chart {
    color: #94a3b8;
}

.empty-chart-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-chart-text {
    font-size: 0.9rem;
    line-height: 1.5;
}

#breathingText {
    font-size: 1.2rem;
    font-weight: 600;
    color: #374151;
}

.dark-mode #breathingText {
    color: #d1d5db;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        padding: 16px;
    }
    
    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 16px;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .task-stats, .expense-stats, .food-stats, .fitness-stats {
        flex-direction: column;
        gap: 16px;
    }
    
    .section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    
    .comparison {
        flex-direction: column;
    }
    
    .vs {
        order: 2;
    }
    
    .exercise-grid {
        grid-template-columns: 1fr;
    }
    
    .mood-options {
        gap: 12px;
    }
    
    .mood-btn {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        margin: 16px;
        width: calc(100% - 32px);
    }
}

/* Animations */
.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.bounce {
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.hidden { display: none !important; }
.visible { display: block !important; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* Special widgets */
.stress-emoji {
    font-size: 3rem;
    margin-bottom: 8px;
}

/* Dashboard: Amount in Purse styling */
#purseAmount {
    font-weight: 700;
    color: #059669;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 10px;
    background: #ecfdf5;
    border: 1px solid #d1fae5;
    line-height: 1.2;
}

.dark-mode #purseAmount {
    color: #10b981;
    background: #064e3b;
    border-color: #065f46;
}

.savings-goal {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.dark-mode .savings-goal {
    background: #1f2937;
    border-color: #374151;
}

.savings-goal h3 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .savings-goal h3 {
    color: #f9fafb;
}

.goal-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.goal-progress span {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}

.dark-mode .goal-progress span {
    color: #9ca3af;
}

/* Empty states */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #6b7280;
}

.dark-mode .empty-state {
    color: #9ca3af;
}

.empty-state h3 {
    margin-bottom: 8px;
    font-size: 1.1rem;
    font-weight: 600;
}

.empty-state p {
    margin-bottom: 24px;
}