/* Life Balance & Insights Section */
.life-balance-overview {
    background: #ffffff;
    padding: 32px;
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 32px;
    text-align: center;
}

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

.balance-score-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}

.balance-score-circle {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: conic-gradient(#10b981 0deg, #10b981 180deg, #e5e7eb 180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 24px;
}

.balance-score-circle::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    background: #ffffff;
    border-radius: 50%;
    z-index: 1;
}

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

.balance-score-value {
    position: relative;
    z-index: 2;
    font-size: 2.5rem;
    font-weight: 800;
    color: #10b981;
    line-height: 1;
}

.balance-score-label {
    position: relative;
    z-index: 2;
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
    margin-top: 4px;
}

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

.balance-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 250px;
}

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

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

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

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

.breakdown-value {
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
}

.breakdown-value.excellent {
    background: #dcfdf7;
    color: #059669;
}

.breakdown-value.good {
    background: #dbeafe;
    color: #2563eb;
}

.breakdown-value.fair {
    background: #fef3c7;
    color: #d97706;
}

.breakdown-value.poor {
    background: #fee2e2;
    color: #dc2626;
}

.dark-mode .breakdown-value.excellent {
    background: #064e3b;
    color: #6ee7b7;
}

.dark-mode .breakdown-value.good {
    background: #1e3a8a;
    color: #93c5fd;
}

.dark-mode .breakdown-value.fair {
    background: #92400e;
    color: #fbbf24;
}

.dark-mode .breakdown-value.poor {
    background: #7f1d1d;
    color: #fca5a5;
}

/* Analysis Tabs */
.analysis-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 12px;
    flex-wrap: wrap;
}

.dark-mode .analysis-tabs {
    background: #374151;
}

.analysis-tabs .tab-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 140px;
}

.analysis-tabs .tab-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.dark-mode .analysis-tabs .tab-btn {
    color: #9ca3af;
}

.dark-mode .analysis-tabs .tab-btn:hover {
    background: #4b5563;
    color: #f9fafb;
}

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

/* Insights Grid */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
}

.insight-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 .insight-section {
    background: #1f2937;
    border-color: #374151;
}

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

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

.performance-metrics {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.performance-metric {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    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;
}

/* Behavior Patterns */
.patterns-analysis {
    background: #ffffff;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 32px;
}

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

.patterns-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 32px;
    margin-top: 32px;
}

.chart-container {
    text-align: center;
}

.chart-container h4 {
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

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

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

.recommendation-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 .recommendation-container {
    background: #1f2937;
    border-color: #374151;
}

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

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

.highlight-item,
.improvement-item,
.recommendation-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

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

.dark-mode .highlight-item,
.dark-mode .improvement-item,
.dark-mode .recommendation-item {
    border-color: #4b5563;
}

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

.improvement-item.improvement {
    background: #fef3c7;
    border-color: #f59e0b;
}

.recommendation-item.high {
    background: #fee2e2;
    border-color: #dc2626;
}

.recommendation-item.medium {
    background: #fef3c7;
    border-color: #f59e0b;
}

.recommendation-item.low {
    background: #f0f9ff;
    border-color: #3b82f6;
}

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

.dark-mode .improvement-item.improvement {
    background: #92400e;
}

.dark-mode .recommendation-item.high {
    background: #7f1d1d;
}

.dark-mode .recommendation-item.medium {
    background: #92400e;
}

.dark-mode .recommendation-item.low {
    background: #1e3a8a;
}

.highlight-icon,
.improvement-icon,
.recommendation-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.highlight-content,
.improvement-content,
.recommendation-content {
    flex: 1;
}

.highlight-content h4,
.improvement-title,
.recommendation-title {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: #111827;
    font-size: 1rem;
}

.dark-mode .highlight-content h4,
.dark-mode .improvement-title,
.dark-mode .recommendation-title {
    color: #f9fafb;
}

.highlight-content p,
.improvement-description,
.recommendation-description {
    margin: 0;
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.5;
}

.dark-mode .highlight-content p,
.dark-mode .improvement-description,
.dark-mode .recommendation-description {
    color: #9ca3af;
}

/* Action Plan */
.action-plan-header {
    text-align: center;
    margin-bottom: 24px;
}

.action-plan-header h4 {
    color: #111827;
    margin-bottom: 8px;
    font-weight: 600;
}

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

.action-plan-header p {
    color: #6b7280;
    font-size: 0.9rem;
}

.dark-mode .action-plan-header p {
    color: #9ca3af;
}

.action-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

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

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

.action-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #3b82f6;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.action-content {
    flex: 1;
}

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

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

.action-description {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

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

.action-frequency {
    color: #3b82f6;
    font-size: 0.8rem;
    font-weight: 500;
}

.action-category {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.action-category.fitness {
    background: #f0fdf4;
    color: #059669;
}

.action-category.nutrition {
    background: #fef3c7;
    color: #d97706;
}

.action-category.productivity {
    background: #f0f9ff;
    color: #2563eb;
}

.action-category.financial {
    background: #f3e8ff;
    color: #7c3aed;
}

.action-category.wellness {
    background: #fdf2f8;
    color: #db2777;
}

.dark-mode .action-category.fitness {
    background: #064e3b;
}

.dark-mode .action-category.nutrition {
    background: #92400e;
}

.dark-mode .action-category.productivity {
    background: #1e3a8a;
}

.dark-mode .action-category.financial {
    background: #581c87;
}

.dark-mode .action-category.wellness {
    background: #831843;
}

/* Progress Analysis */
.progress-overview {
    background: #ffffff;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    margin-bottom: 32px;
}

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

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

.progress-metric {
    background: #f9fafb;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

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

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

.metric-title {
    font-weight: 600;
    color: #111827;
    font-size: 0.9rem;
}

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

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

.current-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
}

.metric-change {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
}

.metric-change.positive {
    background: #dcfdf7;
    color: #059669;
}

.metric-change.negative {
    background: #fee2e2;
    color: #dc2626;
}

.metric-change.neutral {
    background: #f3f4f6;
    color: #6b7280;
}

.dark-mode .metric-change.positive {
    background: #064e3b;
}

.dark-mode .metric-change.negative {
    background: #7f1d1d;
}

.dark-mode .metric-change.neutral {
    background: #4b5563;
}

.metric-bar {
    position: relative;
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.dark-mode .metric-bar {
    background: #4b5563;
}

.metric-progress {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    border-radius: 4px;
    transition: width 0.6s ease;
}

.metric-previous {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: #6b7280;
}

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

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

.progress-trends h3 {
    color: #111827;
    margin-bottom: 24px;
    font-weight: 600;
    text-align: center;
}

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

.insight-card {
    background: #f9fafb;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

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

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

.insight-card.improvement {
    background: #fef3c7;
    border-color: #f59e0b;
}

.insight-card.info {
    background: #f0f9ff;
    border-color: #3b82f6;
}

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

.dark-mode .insight-card.improvement {
    background: #92400e;
}

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

.insight-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.insight-content h4 {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: #111827;
    font-size: 1rem;
}

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

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

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

/* Reports Section */
.reports-dashboard {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.report-preview-section {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    overflow: hidden;
}

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

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    color: #111827;
}

.dark-mode .report-header {
    background: #374151;
    border-bottom-color: #4b5563;
    color: #f9fafb;
}

.report-header h3 {
    color: #111827;
    margin: 0;
    font-weight: 600;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.export-buttons {
    display: flex;
    gap: 12px;
}

.export-buttons .btn-secondary {
    padding: 8px 16px;
    font-size: 0.85rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.export-buttons .btn-secondary:hover {
    background: #f3f4f6;
    border-color: #3b82f6;
    transform: translateY(-1px);
}

.dark-mode .export-buttons .btn-secondary {
    background: #1f2937;
    border-color: #4b5563;
    color: #f9fafb;
}

.dark-mode .export-buttons .btn-secondary:hover {
    background: #374151;
}

.report-content {
    padding: 32px;
}

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

.report-stat-card {
    background: #f9fafb;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    text-align: center;
}

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

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

.stat-label {
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.dark-mode .stat-label {
    color: #f9fafb;
}

.stat-period {
    font-size: 0.8rem;
    color: #6b7280;
}

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

.category-breakdown-table,
.payment-method-breakdown,
.monthly-comparison-table,
.budget-comparison-table,
.detailed-expenses-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.category-breakdown-table th,
.payment-method-breakdown th,
.monthly-comparison-table th,
.budget-comparison-table th,
.detailed-expenses-table th {
    background: #f9fafb;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #111827;
    border-bottom: 2px solid #e5e7eb;
}

.dark-mode .category-breakdown-table th,
.dark-mode .payment-method-breakdown th,
.dark-mode .monthly-comparison-table th,
.dark-mode .budget-comparison-table th,
.dark-mode .detailed-expenses-table th {
    background: #374151;
    color: #f9fafb;
    border-bottom-color: #4b5563;
}

.category-breakdown-table td,
.payment-method-breakdown td,
.monthly-comparison-table td,
.budget-comparison-table td,
.detailed-expenses-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
}

.dark-mode .category-breakdown-table td,
.dark-mode .payment-method-breakdown td,
.dark-mode .monthly-comparison-table td,
.dark-mode .budget-comparison-table td,
.dark-mode .detailed-expenses-table td {
    border-bottom-color: #4b5563;
    color: #f9fafb;
}

.trend-analysis-content,
.weekly-report-content,
.daily-report-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.trend-item,
.weekly-item,
.daily-item {
    background: #f9fafb;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.dark-mode .trend-item,
.dark-mode .weekly-item,
.dark-mode .daily-item {
    background: #374151;
    border-color: #4b5563;
}

.trend-item h4,
.weekly-item h4,
.daily-item h4 {
    color: #111827;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 1rem;
}

.dark-mode .trend-item h4,
.dark-mode .weekly-item h4,
.dark-mode .daily-item h4 {
    color: #f9fafb;
}

.trend-value,
.weekly-value,
.daily-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 8px;
}

.trend-description,
.weekly-description,
.daily-description {
    color: #6b7280;
    font-size: 0.9rem;
}

.dark-mode .trend-description,
.dark-mode .weekly-description,
.dark-mode .daily-description {
    color: #9ca3af;
}

/* Enhanced Predictions */
.prediction-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

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

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

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

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

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

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

.prediction-confidence {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

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

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

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

.category-prediction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.category-prediction-item {
    background: #f9fafb;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

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

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

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

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

.category-prediction-amount {
    font-weight: 700;
    color: #3b82f6;
}

.category-prediction-trend {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 8px;
}

.dark-mode .category-prediction-trend {
    color: #9ca3af;
}


/* Responsive Design for Insights */
@media (max-width: 768px) {
    .balance-score-container {
        flex-direction: column;
        gap: 24px;
    }

    .insights-grid {
        grid-template-columns: 1fr;
    }

    .recommendations-grid {
        grid-template-columns: 1fr;
    }

    .progress-metrics {
        grid-template-columns: 1fr;
    }

    .patterns-charts {
        grid-template-columns: 1fr;
    }

    .analysis-tabs {
        flex-direction: column;
        gap: 4px;
    }

    .analysis-tabs .tab-btn {
        min-width: auto;
    }

    .report-stats-grid {
        grid-template-columns: 1fr;
    }

    .export-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .report-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .trend-analysis-content,
    .weekly-report-content,
    .daily-report-content {
        grid-template-columns: 1fr;
    }

    .prediction-cards {
        grid-template-columns: 1fr;
    }

    .category-prediction-grid {
        grid-template-columns: 1fr;
    }

    .seasonal-prediction-cards {
        grid-template-columns: 1fr;
    }

    .category-checkboxes,
    .report-sections-checkboxes {
        grid-template-columns: 1fr;
    }

    .date-range-selector {
        flex-direction: column;
        align-items: stretch;
    }

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

    .report-controls {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Additional Report Styles */
.overall-report-section {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    overflow: hidden;
}

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

.overall-report-section .report-header h2 {
    font-size: 1.5rem;
    color: #111827;
    margin: 0;
    font-weight: 700;
}

.dark-mode .overall-report-section .report-header h2 {
    color: #f9fafb;
}

.report-navigation {
    padding: 20px 32px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.dark-mode .report-navigation {
    background: #1f2937;
    border-bottom-color: #4b5563;
}

.period-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
}

.period-navigation .nav-btn {
    min-width: 120px;
    justify-content: center;
}

@media (max-width: 640px) {
    .period-navigation {
        gap: 12px;
    }
    .period-navigation .nav-btn {
        min-width: 96px;
        padding: 8px 14px;
    }
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #d1d5db;
    background: #f3f4f6;
    color: #374151;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.nav-btn:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #374151;
    transform: translateY(-1px);
}

.nav-btn:active {
    transform: translateY(0);
}

.nav-btn:focus-visible {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f9fafb;
}

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

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

.dark-mode .nav-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35);
    border-color: #60a5fa;
}

.dark-mode .nav-btn:disabled {
    background: #1f2937;
}

.current-period {
    text-align: center;
    min-width: 250px;
}

.current-period h3 {
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #111827;
}

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

.current-period select {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    font-size: 0.85rem;
    cursor: pointer;
}

.dark-mode .current-period select {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.custom-date-range {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.dark-mode .custom-date-range {
    background: #374151;
    border-color: #4b5563;
}

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

.date-inputs input {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    font-size: 0.9rem;
}

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

.date-inputs span {
    color: #6b7280;
    font-weight: 500;
}

.dark-mode .date-inputs span {
    color: #9ca3af;
}

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

.btn-small:hover {
    background: #f3f4f6;
    border-color: #3b82f6;
}

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

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

.report-info {
    padding: 16px 32px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
}

.dark-mode .report-info {
    background: #374151;
    border-bottom-color: #4b5563;
    color: #9ca3af;
}

.report-meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #6b7280;
}

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

.report-meta span {
    font-weight: 500;
}

.report-section {
    padding: 32px;
    border-bottom: 1px solid #e5e7eb;
}

.dark-mode .report-section {
    border-bottom-color: #4b5563;
}

.report-section:last-child {
    border-bottom: none;
}

.report-section h3 {
    color: #111827;
    margin-bottom: 24px;
    font-weight: 600;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.category-breakdown-container,
.payment-method-container,
.monthly-trends-container,
.top-expenses-container,
.recent-transactions-container,
.budget-performance-container {
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-top: 12px;
    overflow: hidden;
}

.dark-mode .category-breakdown-container,
.dark-mode .payment-method-container,
.dark-mode .monthly-trends-container,
.dark-mode .top-expenses-container,
.dark-mode .recent-transactions-container,
.dark-mode .budget-performance-container {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Budget progress bar */
.budget-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.budget-progress-track {
    width: 100%;
    max-width: 180px;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.dark-mode .budget-progress-track {
    background: #4b5563;
}

.budget-progress-fill {
    height: 100%;
    background: #10b981;
    transition: width 0.3s ease;
}

.budget-progress-fill.status-warning {
    background: #f59e0b;
}

.budget-progress-fill.status-over {
    background: #ef4444;
}

.budget-progress-value {
    font-size: 0.8rem;
    color: #6b7280;
}

.dark-mode .budget-progress-value {
    color: #9ca3af;
}

.category-breakdown-table,
.payment-method-table,
.monthly-trends-table,
.top-expenses-table,
.recent-transactions-table,
.budget-performance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.category-breakdown-table thead th,
.payment-method-table thead th,
.monthly-trends-table thead th,
.top-expenses-table thead th,
.recent-transactions-table thead th,
.budget-performance-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.category-breakdown-table th,
.payment-method-table th,
.monthly-trends-table th,
.top-expenses-table th,
.recent-transactions-table th,
.budget-performance-table th {
    background: #f9fafb;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #111827;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.dark-mode .category-breakdown-table th,
.dark-mode .payment-method-table th,
.dark-mode .monthly-trends-table th,
.dark-mode .top-expenses-table th,
.dark-mode .recent-transactions-table th,
.dark-mode .budget-performance-table th {
    background: #374151;
    color: #f9fafb;
    border-bottom-color: #4b5563;
}

.category-breakdown-table td,
.payment-method-table td,
.monthly-trends-table td,
.top-expenses-table td,
.recent-transactions-table td,
.budget-performance-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
}

.dark-mode .category-breakdown-table td,
.dark-mode .payment-method-table td,
.dark-mode .monthly-trends-table td,
.dark-mode .top-expenses-table td,
.dark-mode .recent-transactions-table td,
.dark-mode .budget-performance-table td {
    border-bottom-color: #4b5563;
    color: #f9fafb;
}

.category-breakdown-table tr:nth-child(even),
.payment-method-table tr:nth-child(even),
.monthly-trends-table tr:nth-child(even),
.top-expenses-table tr:nth-child(even),
.recent-transactions-table tr:nth-child(even),
.budget-performance-table tr:nth-child(even) {
    background: #f8fafc;
}

.dark-mode .category-breakdown-table tr:nth-child(even),
.dark-mode .payment-method-table tr:nth-child(even),
.dark-mode .monthly-trends-table tr:nth-child(even),
.dark-mode .top-expenses-table tr:nth-child(even),
.dark-mode .recent-transactions-table tr:nth-child(even),
.dark-mode .budget-performance-table tr:nth-child(even) {
    background: #374151;
}

.category-breakdown-table tr:hover,
.payment-method-table tr:hover,
.monthly-trends-table tr:hover,
.top-expenses-table tr:hover,
.recent-transactions-table tr:hover,
.budget-performance-table tr:hover {
    background: #f3f4f6;
}

.dark-mode .category-breakdown-table tr:hover,
.dark-mode .payment-method-table tr:hover,
.dark-mode .monthly-trends-table tr:hover,
.dark-mode .top-expenses-table tr:hover,
.dark-mode .recent-transactions-table tr:hover,
.dark-mode .budget-performance-table tr:hover {
    background: #4b5563;
}

/* Status colors for trends and budget */
.positive {
    color: #059669;
    font-weight: 600;
}

.negative {
    color: #dc2626;
    font-weight: 600;
}

.neutral {
    color: #6b7280;
}

.status-good {
    color: #059669;
    font-weight: 600;
}

.status-warning {
    color: #d97706;
    font-weight: 600;
}

.status-over {
    color: #dc2626;
    font-weight: 600;
}

/* Mobile responsiveness for tables */
@media (max-width: 768px) {
    .report-section {
        padding: 20px;
    }

    .overall-report-section .report-header {
        padding: 16px 20px;
    }

    .report-info {
        padding: 12px 20px;
    }

    .report-meta {
        flex-direction: column;
        gap: 8px;
    }

    .category-breakdown-table,
    .payment-method-table,
    .monthly-trends-table,
    .top-expenses-table,
    .recent-transactions-table,
    .budget-performance-table {
        font-size: 0.8rem;
    }

    .category-breakdown-table th,
    .payment-method-table th,
    .monthly-trends-table th,
    .top-expenses-table th,
    .recent-transactions-table th,
    .budget-performance-table th,
    .category-breakdown-table td,
    .payment-method-table td,
    .monthly-trends-table td,
    .top-expenses-table td,
    .recent-transactions-table td,
    .budget-performance-table td {
        padding: 8px 12px;
    }

    .budget-progress-track {
        max-width: 140px;
    }
}