/* Life Budget - Modern Budget App Styles */

:root {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --accent-primary: #3b82f6;
    --accent-primary-hover: #2563eb;
    --accent-success: #10b981;
    --accent-danger: #ef4444;
    --accent-warning: #f59e0b;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    --sidebar-width: 260px;
    --topbar-height: 64px;
    --radius: 12px;
    --radius-sm: 8px;
}

[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --border-color: #334155;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
}

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

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

.auth-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.auth-container { width: 100%; max-width: 400px; padding: 2rem; }

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.auth-logo svg { width: 40px; height: 40px; stroke: var(--accent-primary); }
.auth-logo h1 { font-size: 1.75rem; font-weight: 700; }

.auth-card {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.auth-card h2 { text-align: center; margin-bottom: 1.5rem; }

.auth-toggle {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.auth-toggle a { color: var(--accent-primary); text-decoration: none; font-weight: 500; }
.auth-toggle a:hover { text-decoration: underline; }

.form-group { margin-bottom: 1rem; }
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.input, .form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input:focus, .form-group input:focus, .form-group select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.input::placeholder { color: var(--text-muted); }

/* Hide number input spinners for cleaner look */
.budget-gen-item input[type="number"]::-webkit-inner-spin-button,
.budget-gen-item input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.budget-gen-item input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Budget input styling for Quick Start */
.budget-gen-item .budget-input {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.budget-gen-item .budget-input:hover {
    border-color: var(--accent-primary);
}
.budget-gen-item .budget-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    outline: none;
}

/* Responsive Quick Start Budget */
@media (max-width: 600px) {
    .budget-gen-item {
        grid-template-columns: 24px 1fr !important;
        grid-template-rows: auto auto !important;
    }
    .budget-gen-item > div:nth-child(3),
    .budget-gen-item > div:nth-child(4) {
        grid-column: 2;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.btn svg { width: 18px; height: 18px; }

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

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.btn-secondary:hover { background: var(--border-color); }

.btn-danger { background: var(--accent-danger); color: white; }
.btn-danger:hover { background: #dc2626; }
.btn-warning { background: #f59e0b; color: white; }
.btn-warning:hover { background: #d97706; }
.btn-block { width: 100%; }

.btn-link {
    background: none;
    border: none;
    color: var(--accent-primary);
    cursor: pointer;
    font-weight: 500;
}

.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}
.btn-icon:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.btn-icon svg { width: 20px; height: 20px; }

.app-layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transition: transform 0.3s;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-header svg { width: 28px; height: 28px; stroke: var(--accent-primary); }
.sidebar-header span { font-size: 1.125rem; font-weight: 700; }

.sidebar-nav { flex: 1; padding: 1rem 0; overflow-y: auto; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
    margin: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
}

.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.nav-item.active { background: var(--accent-primary); color: white; }

.nav-divider { height: 1px; background: var(--border-color); margin: 1rem 1.25rem; }

.sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-info { display: flex; align-items: center; gap: 0.75rem; }

.user-avatar {
    width: 36px;
    height: 36px;
    background: var(--accent-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.sidebar-footer span { font-size: 0.75rem; color: var(--text-muted); max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 50;
}

.page-title { font-size: 1.25rem; font-weight: 600; }
.topbar-actions { display: flex; gap: 0.75rem; }
.mobile-menu-toggle { display: none; }

.page-content { flex: 1; padding: 1.5rem; overflow-y: auto; }
.page { display: none; }
.page.active { display: block; }

.page-header {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.card-header h3 { font-size: 1rem; font-weight: 600; }
.view-all { font-size: 0.875rem; color: var(--accent-primary); text-decoration: none; }

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.summary-card { display: flex; align-items: center; gap: 1rem; }

.card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon svg { width: 24px; height: 24px; }

.summary-card.income .card-icon { background: rgba(16, 185, 129, 0.1); }
.summary-card.income .card-icon svg { stroke: var(--accent-success); }
.summary-card.expenses .card-icon { background: rgba(239, 68, 68, 0.1); }
.summary-card.expenses .card-icon svg { stroke: var(--accent-danger); }
.summary-card.balance .card-icon { background: rgba(59, 130, 246, 0.1); }
.summary-card.balance .card-icon svg { stroke: var(--accent-primary); }
.summary-card.budget .card-icon { background: rgba(245, 158, 11, 0.1); }
.summary-card.budget .card-icon svg { stroke: var(--accent-warning); }

.card-label { font-size: 0.75rem; color: var(--text-muted); display: block; }
.card-value { font-size: 1.5rem; font-weight: 700; }

.transactions-card { grid-column: span 2; }
.budget-card { grid-column: span 2; }

.transactions-list { max-height: 400px; overflow-y: auto; }

.transaction-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.transaction-row:last-child { border-bottom: none; }
.transaction-info { flex: 1; }
.transaction-desc { font-weight: 500; margin-bottom: 0.25rem; }
.transaction-meta { font-size: 0.75rem; color: var(--text-muted); }
.transaction-amount { font-weight: 600; }
.transaction-amount.expense { color: var(--accent-danger); }
.transaction-amount.income { color: var(--accent-success); }

.data-table { width: 100%; border-collapse: collapse; }

.data-table th, .data-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.data-table tbody tr:hover { background: var(--bg-tertiary); }
.text-right { text-align: right; }

.filters { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.filters .input { width: auto; min-width: 150px; }

.tx-totals {
    display: flex;
    gap: 1.5rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}
.tx-total { color: var(--text-secondary); }
.tx-total strong { font-weight: 600; }
.tx-total.income strong { color: var(--accent-success); }
.tx-total.expense strong { color: var(--accent-danger); }

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    flex-wrap: wrap;
    gap: 1rem;
}
.pagination-info {
    color: var(--text-secondary);
    font-size: 0.875rem;
}
.pagination-buttons {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
.pagination-ellipsis {
    padding: 0 0.5rem;
    color: var(--text-muted);
}
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}
.btn-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.empty-state { text-align: center; padding: 2rem; color: var(--text-muted); }
.empty-state p { margin-bottom: 1rem; }

.settings-container { max-width: 800px; }
.settings-container .card { margin-bottom: 1.5rem; }
.settings-container h3 { margin-bottom: 0.5rem; }

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.setting-item:last-child { border-bottom: none; }

.setting-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.setting-label strong { color: var(--text-primary); }
.setting-label .text-muted { font-size: 0.875rem; }

.setting-item.danger-zone {
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--accent-danger);
    border-bottom: none;
}

.theme-selector { display: flex; gap: 0.5rem; }

.theme-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.theme-btn svg { width: 24px; height: 24px; }
.theme-btn:hover { border-color: var(--border-color); }
.theme-btn.active { border-color: var(--accent-primary); color: var(--accent-primary); }

.import-container { max-width: 800px; }
.import-container .card { margin-bottom: 1.5rem; }

.import-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.import-option {
    padding: 1.5rem;
    text-align: center;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
}

.import-option:hover { border-color: var(--accent-primary); background: var(--bg-tertiary); }

.import-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-sm);
}

.import-icon svg { width: 24px; height: 24px; stroke: var(--accent-primary); }
.import-option h4 { margin-bottom: 0.5rem; }
.import-option p { font-size: 0.75rem; color: var(--text-muted); }

.upload-area { margin-top: 1.5rem; }

.upload-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius);
    padding: 3rem;
    text-align: center;
    transition: all 0.2s;
}

.upload-dropzone:hover, .upload-dropzone.dragover {
    border-color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.05);
}

.upload-dropzone svg { width: 48px; height: 48px; stroke: var(--text-muted); margin-bottom: 1rem; }

.mapping-area { margin-top: 1.5rem; }
.mapping-preview {
    overflow-x: auto;
    margin-bottom: 1rem;
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-sm);
}

.import-account-section {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
}
.import-account-section .form-group { margin-bottom: 0.5rem; }
.import-account-section .form-group:last-child { margin-bottom: 0; }
.import-account-section label input[type="checkbox"] { margin-right: 0.5rem; }

.mapping-section {
    margin-bottom: 1.5rem;
}
.mapping-section h5 {
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.mapping-section h5 .text-muted {
    font-weight: 400;
    font-size: 0.85rem;
}

.mapping-fields,
.mapping-fields-required,
.mapping-fields-amount,
.mapping-fields-optional {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.mapping-actions { display: flex; gap: 1rem; justify-content: flex-end; }

.import-progress { text-align: center; padding: 2rem; }
.progress-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.progress-fill { height: 100%; background: var(--accent-primary); width: 0%; transition: width 0.3s; }

.calculator-container { max-width: 500px; }
.calculator-form { margin-bottom: 1.5rem; }
.calculator-results {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 1rem;
}

.result-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.result-item:last-child { border-bottom: none; }
.result-item strong { color: var(--accent-primary); font-size: 1.125rem; }

.budgets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.budget-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.budget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.budget-name { font-weight: 600; }
.budget-amount { font-size: 0.875rem; color: var(--text-muted); }

.budget-progress {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.budget-progress-fill { height: 100%; background: var(--accent-primary); transition: width 0.3s; }
.budget-progress-fill.warning { background: var(--accent-warning); }
.budget-progress-fill.danger { background: var(--accent-danger); }

.budget-stats { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); }

/* Budget Summary Report */
.budget-summary-report {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
}

.budget-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.budget-summary-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.period-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
}

.budget-summary-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.budget-stat {
    text-align: center;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.budget-stat .stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.budget-stat .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
}

.budget-stat .stat-spent {
    color: var(--accent-warning);
}

.budget-stat .stat-remaining {
    color: var(--accent-success);
}

.budget-stat .stat-remaining.negative {
    color: var(--accent-danger);
}

.budget-stat .stat-percent {
    color: var(--accent-primary);
}

.budget-summary-progress {
    margin-bottom: 1.5rem;
}

.budget-summary-progress-bar {
    height: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.budget-summary-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-success), var(--accent-primary));
    border-radius: 6px;
    transition: width 0.5s ease, background 0.3s;
}

.budget-summary-progress-fill.warning {
    background: linear-gradient(90deg, var(--accent-warning), var(--accent-warning));
}

.budget-summary-progress-fill.danger {
    background: linear-gradient(90deg, var(--accent-danger), var(--accent-danger));
}

.budget-summary-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.budget-summary-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.breakdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.breakdown-item .breakdown-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.breakdown-item .breakdown-info {
    flex: 1;
    min-width: 0;
}

.breakdown-item .breakdown-name {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breakdown-item .breakdown-progress {
    height: 4px;
    background: var(--bg-secondary);
    border-radius: 2px;
    margin-top: 0.25rem;
    overflow: hidden;
}

.breakdown-item .breakdown-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}

.breakdown-item .breakdown-amounts {
    text-align: right;
    font-size: 0.75rem;
}

.breakdown-item .breakdown-spent {
    font-weight: 600;
    color: var(--text-primary);
}

.breakdown-item .breakdown-budget {
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .budget-summary-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .budget-stat .stat-value {
        font-size: 1.25rem;
    }
}

/* Budget target type badges */
.budget-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.budget-type-category {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.budget-type-envelope {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

.budget-type-account {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

[data-theme="dark"] .budget-type-category {
    background: rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .budget-type-envelope {
    background: rgba(99, 102, 241, 0.25);
}

[data-theme="dark"] .budget-type-account {
    background: rgba(16, 185, 129, 0.25);
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 1rem;
}

.modal {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal.modal-lg {
    max-width: 800px;
}

.modal.modal-sm {
    max-width: 380px;
}

/* Target selection groups for budgets */
.target-groups {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.target-group {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
}

.target-group-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color);
}

.target-group-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.target-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
}

.target-checkbox:hover {
    background: var(--border-color);
}

.target-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.target-checkbox input[type="checkbox"]:checked + span {
    box-shadow: 0 0 0 2px var(--accent-primary);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 { font-size: 1.125rem; }
.modal-close { font-size: 1.5rem; line-height: 1; }
.modal-body { padding: 1.5rem; overflow-y: auto; }
.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.danger-warning {
    text-align: center;
    padding: 1rem 0;
}
.danger-warning p {
    margin-bottom: 0.5rem;
}

.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.3s ease;
    min-width: 280px;
}

.toast-success { background: var(--accent-success); color: white; }
.toast-error { background: var(--accent-danger); color: white; }
.toast-info { background: var(--accent-primary); color: white; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.error-message {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--accent-danger);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.text-muted { color: var(--text-muted); }
.hidden { display: none !important; }

.categories-list { margin-bottom: 1rem; }
.category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.category-item:last-child { border-bottom: none; }
.category-color { width: 12px; height: 12px; border-radius: 50%; margin-right: 0.75rem; }

.connected-accounts-list { margin-bottom: 1rem; }
.account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
    .transactions-card, .budget-card { grid-column: span 2; }
}

@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .mobile-menu-toggle { display: flex; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .transactions-card, .budget-card { grid-column: span 1; }
    .import-options { grid-template-columns: 1fr; }
    .filters { flex-direction: column; }
    .filters .input { width: 100%; }
}

/* Envelopes (Sub-Accounts) Page */
.envelopes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.envelopes-summary {
    display: flex;
    gap: 2rem;
}

.envelopes-summary .summary-item {
    display: flex;
    flex-direction: column;
}

.envelopes-summary .label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.envelopes-summary .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.envelopes-summary .unallocated .value {
    color: var(--accent-warning);
}

.envelopes-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.envelopes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.envelope-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.envelope-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.envelope-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--envelope-color, var(--accent-primary));
}

.envelope-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.envelope-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.envelope-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--envelope-color, var(--accent-primary));
}

.envelope-actions {
    display: flex;
    gap: 0.5rem;
}

.envelope-name {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.envelope-balance {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.envelope-progress {
    margin-bottom: 0.75rem;
}

.envelope-progress-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.envelope-progress-fill {
    height: 100%;
    background: var(--envelope-color, var(--accent-primary));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.envelope-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--text-muted);
}

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

.envelope-rule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
    color: var(--text-muted);
}

.envelope-rule svg {
    width: 14px;
    height: 14px;
}

/* Allocation Rules Modal */
.rules-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.rule-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rule-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.rule-value {
    font-weight: 600;
    color: var(--accent-primary);
}

.rule-type {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Transfer Modal */
.transfer-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.transfer-accounts {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.transfer-accounts .form-group {
    flex: 1;
}

.transfer-arrow {
    color: var(--text-muted);
    font-size: 1.5rem;
}

/* Allocation History */
.allocation-history {
    max-height: 300px;
    overflow-y: auto;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

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

.history-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.history-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.history-name {
    font-weight: 500;
}

.history-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.history-amount {
    font-weight: 600;
}

.history-amount.positive {
    color: var(--accent-success);
}

.history-amount.negative {
    color: var(--accent-danger);
}

.envelope-history-card {
    margin-top: 1.5rem;
}

/* Empty State */
.empty-state .empty-icon {
    width: 64px;
    height: 64px;
    stroke: var(--text-muted);
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .envelopes-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .envelopes-actions {
        width: 100%;
    }

    .envelopes-actions .btn {
        flex: 1;
    }

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

/* Accounts Page */
.accounts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.accounts-summary {
    display: flex;
    gap: 2rem;
}

.accounts-summary .summary-item {
    display: flex;
    flex-direction: column;
}

.accounts-summary .label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.accounts-summary .value {
    font-size: 1.5rem;
    font-weight: 700;
}

.accounts-summary .value.positive {
    color: var(--accent-success);
}

.accounts-summary .value.negative {
    color: var(--accent-danger);
}

.accounts-summary .net-worth .value {
    color: var(--accent-primary);
}

.accounts-actions {
    display: flex;
    gap: 0.75rem;
}

.account-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

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

.account-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--account-color, var(--accent-primary));
}

.account-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.account-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.account-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--account-color, var(--accent-primary));
}

.account-details h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.account-type {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: capitalize;
}

.account-institution {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.account-actions {
    display: flex;
    gap: 0.5rem;
}

.account-balance {
    text-align: right;
}

.account-balance .balance-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.account-balance .balance-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.account-balance .balance-value.positive {
    color: var(--text-primary);
}

.account-balance .balance-value.negative {
    color: var(--accent-danger);
}

.account-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
    color: var(--text-muted);
}

.account-meta .last-reconciled {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.account-meta .last-reconciled svg {
    width: 14px;
    height: 14px;
}

.account-transactions-count {
    color: var(--text-secondary);
}

/* Account Type Icons */
.account-type-checking .account-icon svg,
.account-type-savings .account-icon svg {
    stroke: #3b82f6;
}

.account-type-credit_card .account-icon svg {
    stroke: #ef4444;
}

.account-type-cash .account-icon svg {
    stroke: #10b981;
}

.account-type-investment .account-icon svg {
    stroke: #8b5cf6;
}

.account-type-loan .account-icon svg {
    stroke: #f59e0b;
}

/* Reconcile Modal */
.reconcile-summary {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1rem;
}

.reconcile-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.reconcile-row.difference {
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    font-weight: 600;
}

.reconcile-row.difference .positive {
    color: var(--accent-success);
}

.reconcile-row.difference .negative {
    color: var(--accent-danger);
}

@media (max-width: 768px) {
    .accounts-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .accounts-summary {
        width: 100%;
        justify-content: space-between;
    }

    .accounts-actions {
        width: 100%;
    }

    .accounts-actions .btn {
        flex: 1;
    }
}

/* Reports Page Styles */
.reports-header {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.reports-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.reports-controls .control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reports-controls .control-group label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
}

.reports-controls .control-group .input {
    min-width: 150px;
}

.reports-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.reports-actions .control-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reports-actions .control-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.export-buttons {
    display: flex;
    gap: 0.5rem;
}

.report-content {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    min-height: 400px;
}

.report-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    color: var(--text-muted);
}

.report-placeholder h3 {
    margin-top: 1rem;
    color: var(--text-secondary);
}

.report-placeholder p {
    margin-top: 0.5rem;
    max-width: 400px;
}

/* Report Display */
.report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.report-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.report-header .report-period {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.report-header .report-type-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.report-type-badge.personal { background: #dbeafe; color: #1d4ed8; }
.report-type-badge.business { background: #dcfce7; color: #15803d; }
.report-type-badge.all { background: var(--bg-tertiary); color: var(--text-secondary); }

[data-theme="dark"] .report-type-badge.personal { background: #1e3a5f; color: #60a5fa; }
[data-theme="dark"] .report-type-badge.business { background: #14532d; color: #4ade80; }

/* P&L Report */
.pnl-report {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.pnl-section {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
}

.pnl-section h3 {
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pnl-section h3 svg {
    width: 18px;
    height: 18px;
}

.pnl-section.income h3 { color: var(--accent-success); }
.pnl-section.expenses h3 { color: var(--accent-danger); }

.pnl-categories {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pnl-category {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.pnl-category:last-child {
    border-bottom: none;
}

.pnl-category .category-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pnl-category .category-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.pnl-category .category-amount {
    font-family: 'SF Mono', monospace;
    font-weight: 500;
}

.pnl-total {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--border-color);
    font-weight: 700;
    font-size: 1.125rem;
}

.pnl-net {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pnl-net h3 {
    font-size: 1.125rem;
}

.pnl-net .net-amount {
    font-size: 2rem;
    font-weight: 700;
}

.pnl-net .net-amount.positive { color: var(--accent-success); }
.pnl-net .net-amount.negative { color: var(--accent-danger); }

/* Comparison section */
.pnl-comparison {
    grid-column: span 2;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    margin-top: 1rem;
}

.pnl-comparison h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.comparison-item {
    text-align: center;
}

.comparison-item .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.25rem;
}

.comparison-item .value {
    font-size: 1.125rem;
    font-weight: 600;
}

.comparison-item .change {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.comparison-item .change.positive { color: var(--accent-success); }
.comparison-item .change.negative { color: var(--accent-danger); }

/* Category Report (Pie Chart) */
.category-report {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.chart-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.chart-container canvas {
    max-width: 100%;
    max-height: 300px;
}

.category-table {
    max-height: 400px;
    overflow-y: auto;
}

.category-table table {
    width: 100%;
    border-collapse: collapse;
}

.category-table th,
.category-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.category-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
}

.category-table td.amount,
.category-table td.percentage {
    text-align: right;
    font-family: 'SF Mono', monospace;
}

.category-table .total-row {
    font-weight: 700;
    background: var(--bg-tertiary);
}

/* Top Merchants */
.top-merchants {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.top-merchants h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.merchant-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.merchant-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.merchant-item .merchant-name {
    font-weight: 500;
}

.merchant-item .merchant-stats {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.merchant-item .merchant-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.merchant-item .merchant-amount {
    font-family: 'SF Mono', monospace;
    font-weight: 600;
}

/* Trends Report (Bar/Line Chart) */
.trends-report {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.trends-chart {
    height: 350px;
    position: relative;
}

.trends-averages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.average-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 1rem;
    text-align: center;
}

.average-card .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.average-card .value {
    font-size: 1.5rem;
    font-weight: 700;
}

.average-card.income .value { color: var(--accent-success); }
.average-card.expenses .value { color: var(--accent-danger); }
.average-card.net .value.positive { color: var(--accent-success); }
.average-card.net .value.negative { color: var(--accent-danger); }

/* Tax Summary Report */
.tax-report {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tax-total {
    background: linear-gradient(135deg, var(--accent-success) 0%, #059669 100%);
    color: white;
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tax-total h3 {
    font-size: 1rem;
    opacity: 0.9;
}

.tax-total .amount {
    font-size: 2rem;
    font-weight: 700;
}

.tax-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.tax-category-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 1rem;
}

.tax-category-card h4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.tax-category-card h4 .cat-label {
    font-size: 0.875rem;
    text-transform: capitalize;
}

.tax-category-card h4 .cat-amount {
    font-family: 'SF Mono', monospace;
    font-weight: 600;
    color: var(--accent-success);
}

.tax-category-card .subcategories {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.tax-quarters {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
}

.tax-quarters h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.quarters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.quarter-item {
    text-align: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.quarter-item .quarter-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.quarter-item .quarter-amount {
    font-size: 1.125rem;
    font-weight: 600;
}

/* Loading state */
.report-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
}

.report-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 1024px) {
    .pnl-report,
    .category-report {
        grid-template-columns: 1fr;
    }

    .pnl-net,
    .pnl-comparison {
        grid-column: span 1;
    }

    .comparison-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .reports-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .reports-controls .control-group .input {
        min-width: auto;
    }

    .reports-actions {
        flex-direction: column;
        gap: 1rem;
    }

    .export-buttons {
        width: 100%;
    }

    .export-buttons .btn {
        flex: 1;
    }

    .trends-averages,
    .quarters-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tax-categories {
        grid-template-columns: 1fr;
    }
}

/* Badge styles */
.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.badge-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-success);
}

.badge-info {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning);
}

.badge-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-danger);
}

/* Spinner animation */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* History Budget Modal */
.history-budget-table tbody tr {
    border-bottom: 1px solid var(--border-color);
}

.history-budget-table tbody tr:last-child {
    border-bottom: none;
}

.history-budget-table td {
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
}

.history-budget-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.history-budget-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* Budget delete button */
.budget-item .delete-budget {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-radius: 50%;
    transition: all 0.2s;
}

.budget-item .delete-budget:hover {
    background: var(--accent-danger);
    color: white;
}

.budget-item:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
}

/* Budget Breakdown Modal */
.budget-breakdown-modal {
    max-height: 60vh;
    overflow-y: auto;
}

.breakdown-summary {
    display: flex;
    gap: 2rem;
    align-items: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.breakdown-progress-container {
    flex-shrink: 0;
}

.breakdown-progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(
        var(--accent-success) calc(var(--progress) * 1%),
        var(--bg-tertiary) calc(var(--progress) * 1%)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.breakdown-progress-circle::before {
    content: '';
    width: 75px;
    height: 75px;
    background: var(--bg-secondary);
    border-radius: 50%;
    position: absolute;
}

.breakdown-progress-circle.warning {
    background: conic-gradient(
        var(--accent-warning) calc(var(--progress) * 1%),
        var(--bg-tertiary) calc(var(--progress) * 1%)
    );
}

.breakdown-progress-circle.danger {
    background: conic-gradient(
        var(--accent-danger) calc(var(--progress) * 1%),
        var(--bg-tertiary) calc(var(--progress) * 1%)
    );
}

.breakdown-progress-value {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    font-weight: 700;
}

.breakdown-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    flex: 1;
}

.breakdown-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.breakdown-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.breakdown-stat-value {
    font-size: 1.125rem;
    font-weight: 600;
}

.breakdown-section {
    margin-top: 1rem;
}

.target-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.target-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.breakdown-transactions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 250px;
    overflow-y: auto;
}

.breakdown-tx-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

/* Budget Edit Modal - Target Items */
.edit-target-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.edit-target-item .remove-target-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.edit-target-item .remove-target-btn:hover {
    background: var(--accent-danger);
    color: white;
}

.budget-edit-modal {
    max-height: 70vh;
    overflow-y: auto;
}

/* Combined Budget Edit Modal */
.budget-edit-row {
    display: grid;
    grid-template-columns: 1fr 100px 130px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    transition: opacity 0.2s;
}

.budget-edit-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
}

.budget-edit-actions .btn-sm {
    white-space: nowrap;
}

.budget-edit-info {
    min-width: 0;
}

.budget-edit-progress {
    height: 4px;
    background: var(--bg-secondary);
    border-radius: 2px;
    margin-top: 0.375rem;
    overflow: hidden;
}

.budget-edit-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--accent-success);
    transition: width 0.3s;
}

.budget-edit-progress-fill.warning {
    background: var(--accent-warning);
}

.budget-edit-progress-fill.danger {
    background: var(--accent-danger);
}

.budget-edit-row .btn-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.budget-edit-row .view-budget-history:hover {
    background: var(--accent-primary);
    color: white;
}

.budget-edit-row .delete-budget-row:hover {
    background: var(--accent-danger);
    color: white;
}

.budget-edit-row .btn-icon:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Budget History Modal */
.budget-history-modal .data-table th,
.budget-history-modal .data-table td {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.budget-history-modal .data-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.budget-history-chart {
    position: relative;
}

/* Hide spinners on budget amount inputs */
.budget-amount-input::-webkit-inner-spin-button,
.budget-amount-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.budget-amount-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Combined Budget Card */
.budget-combined-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.budget-combined-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.budget-combined-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.budget-count-badge {
    background: var(--bg-tertiary);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 500px) {
    .breakdown-summary {
        flex-direction: column;
        text-align: center;
    }

    .breakdown-stats-grid {
        width: 100%;
    }
}

/* Budget Summaries Container - Side by Side */
.budget-summaries-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .budget-summaries-container {
        grid-template-columns: 1fr;
    }
}

/* Budget Type Indicator */
.budget-type-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.budget-type-indicator.personal {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.budget-type-indicator.business {
    background: linear-gradient(135deg, #10b981, #059669);
}

/* Personal budget progress bar */
.budget-summary-progress-fill.personal {
    background: linear-gradient(90deg, #3b82f6, #6366f1);
}

/* Business budget progress bar */
.budget-summary-progress-fill.business {
    background: linear-gradient(90deg, #10b981, #059669);
}

/* Budget summary compact styling */
.budget-summary-report .budget-summary-stats {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 500px) {
    .budget-summary-report .budget-summary-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Dashboard Period Selector */
.dashboard-period-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.period-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 160px;
}

#dashboard-period-label {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.period-type-select {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    text-align: center;
}

.period-type-select:hover {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.period-type-select:focus {
    outline: none;
    background: var(--bg-tertiary);
}

#dashboard-today-btn {
    margin-left: 0.5rem;
}

@media (max-width: 600px) {
    .dashboard-period-selector {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    #dashboard-period-label {
        font-size: 1rem;
    }

    .period-display {
        min-width: 120px;
    }

    #dashboard-today-btn {
        display: none;
    }
}

/* ============================================
   Virtual Scrolling for Transactions
   ============================================ */
.virtual-scroll-container {
    display: flex;
    flex-direction: column;
}

.virtual-scroll-viewport {
    height: 70vh;
    min-height: 400px;
    max-height: 800px;
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
    will-change: transform;
    -webkit-overflow-scrolling: touch;
}

.virtual-scroll-spacer {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    pointer-events: none;
}

.virtual-scroll-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    will-change: transform;
}

.tx-body-table {
    width: 100%;
    border-collapse: collapse;
}

.tx-body-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.tx-card .data-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-secondary);
}

/* ============================================
   Enhanced Mobile Responsiveness
   ============================================ */

/* Mobile-first transaction table */
@media (max-width: 900px) {
    .virtual-scroll-viewport {
        height: calc(100vh - 280px);
        min-height: 300px;
    }

    .tx-body-table td,
    .data-table td,
    .data-table th {
        padding: 0.5rem;
        font-size: 0.875rem;
    }

    /* Hide balance column on tablets */
    .data-table th:nth-child(5),
    .data-table td:nth-child(5),
    .tx-body-table td:nth-child(5) {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Better topbar on mobile */
    .topbar {
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }

    .topbar-actions .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .topbar-actions .btn svg {
        width: 16px;
        height: 16px;
    }

    /* Hide "Add Transaction" text on mobile, keep icon */
    .topbar-actions .btn span {
        display: none;
    }

    #quick-add-btn::after {
        content: '';
    }

    /* Improved sidebar overlay */
    .sidebar.open {
        box-shadow: 0 0 50px rgba(0,0,0,0.5);
    }

    .sidebar.open ~ .main-content::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.4);
        z-index: 90;
    }

    /* Transaction totals stack on mobile */
    .tx-totals {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .tx-total {
        font-size: 0.85rem;
    }

    /* Transaction filters improvements */
    .filters {
        gap: 0.5rem;
    }

    .filters .input {
        font-size: 0.875rem;
        padding: 0.5rem;
    }

    /* Cards on mobile */
    .card {
        padding: 1rem;
        border-radius: var(--radius-sm);
    }

    /* Page content padding */
    .page-content {
        padding: 1rem;
    }

    /* Summary cards grid */
    .summary-card {
        padding: 1rem;
    }

    .summary-card .card-value {
        font-size: 1.25rem;
    }
}

@media (max-width: 600px) {
    /* Further simplify transaction table on phones */
    .virtual-scroll-viewport {
        height: calc(100vh - 320px);
        min-height: 250px;
    }

    /* Stack table into cards on very small screens */
    .tx-body-table,
    .tx-body-table tbody,
    .tx-body-table tr {
        display: block;
    }

    .tx-body-table tr {
        background: var(--bg-secondary);
        margin-bottom: 0.5rem;
        border-radius: var(--radius-sm);
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        position: relative;
    }

    .tx-body-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.35rem 0;
        border: none;
        text-align: right;
    }

    .tx-body-table td::before {
        content: attr(data-label);
        font-weight: 500;
        color: var(--text-muted);
        text-align: left;
        flex-shrink: 0;
        margin-right: 0.5rem;
    }

    /* Hide header on mobile card view */
    #transactions-table thead {
        display: none;
    }

    /* Action buttons in row */
    .tx-body-table td:last-child {
        justify-content: flex-end;
        gap: 0.25rem;
        padding-top: 0.5rem;
        margin-top: 0.25rem;
        border-top: 1px solid var(--border-color);
    }

    .tx-body-table td:last-child::before {
        display: none;
    }

    /* Hide category column on very small phones - rely on editing */
    .tx-body-table td:nth-child(3) {
        display: none;
    }

    /* Filters - make search full width */
    .filters {
        flex-direction: column;
    }

    #tx-search {
        order: -1;
    }

    /* Two-column filter grid for selects */
    .filters select {
        width: calc(50% - 0.25rem);
    }

    /* Pagination on mobile */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    .pagination-info {
        width: 100%;
        text-align: center;
        font-size: 0.8rem;
    }

    .pagination-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    /* Auth screen on mobile */
    .auth-container {
        padding: 1rem;
    }

    .auth-card {
        padding: 1.5rem;
    }

    /* Modals on mobile */
    .modal {
        width: 95%;
        max-width: none;
        max-height: 90vh;
        margin: 1rem;
    }

    .modal-body {
        max-height: calc(90vh - 140px);
        overflow-y: auto;
    }

    /* Settings on mobile */
    .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .setting-item .btn {
        width: 100%;
    }

    /* Budget cards on mobile */
    .budgets-grid {
        grid-template-columns: 1fr;
    }

    /* Accounts grid on mobile */
    .accounts-grid {
        grid-template-columns: 1fr;
    }

    /* Envelopes on mobile */
    .envelopes-grid {
        grid-template-columns: 1fr;
    }

    .envelopes-header {
        flex-direction: column;
        align-items: stretch;
    }

    .envelopes-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .envelopes-actions .btn {
        flex: 1;
        min-width: 45%;
    }
}

/* Touch-friendly improvements */
@media (pointer: coarse) {
    .btn, .btn-icon {
        min-height: 44px;
        min-width: 44px;
    }

    .nav-item {
        padding: 0.875rem 1rem;
    }

    .category-option {
        padding: 0.75rem !important;
    }

    .data-table th,
    .data-table td {
        padding: 0.875rem;
    }
}

/* ============================================
   Freedom Calculator Page
   ============================================ */

.freedom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.freedom-grid-2col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
    .freedom-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .freedom-grid-2col {
        grid-template-columns: 1fr;
    }
}

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

/* Savings Detection Card */
.savings-card {
    background: linear-gradient(135deg, var(--accent-success), #059669);
    color: white;
    padding: 2rem;
}

.savings-card h3 {
    color: rgba(255,255,255,0.9);
    margin-bottom: 1rem;
}

.savings-amount {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.savings-subtitle {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.savings-breakdown {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.savings-breakdown-item {
    display: flex;
    flex-direction: column;
}

.savings-breakdown-item .label {
    font-size: 0.75rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.savings-breakdown-item .value {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Allocation Strategy Card */
.allocation-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.allocation-visual {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.allocation-side {
    flex: 1;
    text-align: center;
}

.allocation-percent {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.allocation-side.debt .allocation-percent {
    color: var(--accent-danger);
}

.allocation-side.invest .allocation-percent {
    color: var(--accent-success);
}

.allocation-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.allocation-amount {
    font-size: 1.125rem;
    font-weight: 600;
}

.allocation-slider-container {
    margin-bottom: 1.5rem;
}

.allocation-slider {
    width: 100%;
    height: 12px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, var(--accent-danger) 0%, var(--accent-danger) 50%, var(--accent-success) 50%, var(--accent-success) 100%);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}

.allocation-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: white;
    border: 3px solid var(--accent-primary);
    border-radius: 50%;
    cursor: grab;
    box-shadow: var(--shadow-md);
}

.allocation-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: white;
    border: 3px solid var(--accent-primary);
    border-radius: 50%;
    cursor: grab;
    box-shadow: var(--shadow-md);
}

.allocation-slider:active::-webkit-slider-thumb {
    cursor: grabbing;
}

.debt-strategy-selector {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.strategy-btn {
    flex: 1;
    min-width: 80px;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.strategy-btn:hover {
    border-color: var(--border-color);
}

.strategy-btn.active {
    border-color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.1);
}

.strategy-btn .name {
    font-weight: 600;
    font-size: 0.875rem;
    display: block;
}

.strategy-btn .desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Debts List Card */
.debts-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
}

.debt-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--accent-danger);
}

.debt-item.credit-card { border-left-color: #ef4444; }
.debt-item.mortgage { border-left-color: #f59e0b; }
.debt-item.auto-loan { border-left-color: #3b82f6; }
.debt-item.student-loan { border-left-color: #8b5cf6; }
.debt-item.personal-loan { border-left-color: #ec4899; }

.debt-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.debt-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--accent-danger);
}

.debt-info {
    flex: 1;
    min-width: 0;
}

.debt-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.debt-details {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    gap: 1rem;
}

.debt-balance {
    text-align: right;
}

.debt-balance .balance {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--accent-danger);
}

.debt-balance .minimum {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.add-debt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.add-debt-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Results Comparison Card */
.results-comparison {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.result-column {
    padding: 1.25rem;
    border-radius: var(--radius-sm);
    text-align: center;
}

.result-column.minimum {
    background: var(--bg-tertiary);
}

.result-column.optimized {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    border: 1px solid var(--accent-success);
}

.result-column.best {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    border: 1px solid var(--accent-primary);
}

.result-column h4 {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.result-column .time-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.result-column.minimum .time-value {
    color: var(--text-secondary);
}

.result-column.optimized .time-value {
    color: var(--accent-success);
}

.result-column.best .time-value {
    color: var(--accent-primary);
}

.result-column .interest-saved {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.result-column .interest-saved strong {
    color: var(--accent-success);
}

.results-summary {
    display: flex;
    gap: 1.5rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
}

.results-summary-item {
    flex: 1;
    min-width: 120px;
    text-align: center;
}

.results-summary-item .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.25rem;
}

.results-summary-item .value {
    font-size: 1.25rem;
    font-weight: 700;
}

.results-summary-item .value.positive {
    color: var(--accent-success);
}

@media (max-width: 600px) {
    .results-comparison {
        grid-template-columns: 1fr;
    }
}

/* Milestones Timeline */
.milestones-timeline {
    position: relative;
    padding-left: 2rem;
}

.milestones-timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}

.milestone-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.milestone-item:last-child {
    padding-bottom: 0;
}

.milestone-marker {
    position: absolute;
    left: -1.5rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.milestone-marker.completed {
    background: var(--accent-success);
    border-color: var(--accent-success);
}

.milestone-marker.completed svg {
    width: 12px;
    height: 12px;
    stroke: white;
}

.milestone-marker.upcoming {
    border-color: var(--accent-primary);
}

.milestone-marker.final {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    width: 24px;
    height: 24px;
    left: -1.625rem;
}

.milestone-marker.final svg {
    width: 14px;
    height: 14px;
    stroke: white;
}

.milestone-content {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-sm);
}

.milestone-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.milestone-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.milestone-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.milestone-item.debt-free .milestone-content {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    border: 1px solid var(--accent-success);
}

/* AI Insights Card */
.ai-insights-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-insight {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--accent-primary);
}

.ai-insight.warning {
    border-left-color: var(--accent-warning);
}

.ai-insight.success {
    border-left-color: var(--accent-success);
}

.ai-insight.danger {
    border-left-color: var(--accent-danger);
}

.ai-insight-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-insight-icon svg {
    width: 18px;
    height: 18px;
}

.ai-insight.warning .ai-insight-icon {
    background: rgba(245, 158, 11, 0.15);
}

.ai-insight.warning .ai-insight-icon svg {
    stroke: var(--accent-warning);
}

.ai-insight.success .ai-insight-icon {
    background: rgba(16, 185, 129, 0.15);
}

.ai-insight.success .ai-insight-icon svg {
    stroke: var(--accent-success);
}

.ai-insight.danger .ai-insight-icon {
    background: rgba(239, 68, 68, 0.15);
}

.ai-insight.danger .ai-insight-icon svg {
    stroke: var(--accent-danger);
}

.ai-insight-content {
    flex: 1;
}

.ai-insight-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.ai-insight-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.ai-insight-action {
    font-size: 0.8125rem;
    color: var(--accent-primary);
    font-weight: 500;
    cursor: pointer;
}

.ai-insight-action:hover {
    text-decoration: underline;
}

.ai-placeholder-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning);
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Wealth Projection Card */
.wealth-projection-chart {
    height: 300px;
    position: relative;
    margin-bottom: 1.5rem;
}

.projection-scenarios {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.scenario-card {
    flex: 1;
    min-width: 180px;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    text-align: center;
}

.scenario-card.highlighted {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    border: 1px solid var(--accent-primary);
}

.scenario-years {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.scenario-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-success);
}

.scenario-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Investment Goals Card */
.investment-goals-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.investment-goal {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.goal-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.goal-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--accent-primary);
}

.goal-info {
    flex: 1;
    min-width: 0;
}

.goal-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.goal-progress-bar {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.goal-progress-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 3px;
    transition: width 0.3s;
}

.goal-details {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.goal-amount {
    text-align: right;
}

.goal-current {
    font-size: 1.125rem;
    font-weight: 600;
}

.goal-target {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Quick Stats Row */
.freedom-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.freedom-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}

.freedom-stat-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.75rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.freedom-stat-icon svg {
    width: 24px;
    height: 24px;
}

.freedom-stat-card.debt-free .freedom-stat-icon {
    background: rgba(16, 185, 129, 0.15);
}

.freedom-stat-card.debt-free .freedom-stat-icon svg {
    stroke: var(--accent-success);
}

.freedom-stat-card.total-debt .freedom-stat-icon {
    background: rgba(239, 68, 68, 0.15);
}

.freedom-stat-card.total-debt .freedom-stat-icon svg {
    stroke: var(--accent-danger);
}

.freedom-stat-card.interest-save .freedom-stat-icon {
    background: rgba(59, 130, 246, 0.15);
}

.freedom-stat-card.interest-save .freedom-stat-icon svg {
    stroke: var(--accent-primary);
}

.freedom-stat-card.net-worth .freedom-stat-icon {
    background: rgba(139, 92, 246, 0.15);
}

.freedom-stat-card.net-worth .freedom-stat-icon svg {
    stroke: #8b5cf6;
}

.freedom-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.freedom-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 900px) {
    .freedom-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .freedom-stats-row {
        grid-template-columns: 1fr;
    }
}

/* Freedom Calculator Loading State */
.freedom-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    text-align: center;
}

.freedom-loading .spinner {
    width: 48px;
    height: 48px;
}

.freedom-loading p {
    color: var(--text-muted);
}

/* Debt Modal */
.debt-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.debt-form-grid .form-group.full-width {
    grid-column: span 2;
}

@media (max-width: 500px) {
    .debt-form-grid {
        grid-template-columns: 1fr;
    }
    .debt-form-grid .form-group.full-width {
        grid-column: span 1;
    }
}

/* Subscription Detection */
.subscription-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.subscription-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.subscription-item .merchant {
    font-weight: 500;
}

.subscription-item .amount {
    font-weight: 600;
    color: var(--accent-danger);
}

.subscription-item .frequency {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.subscription-total {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
    border-radius: var(--radius-sm);
    margin-top: 1rem;
}

.subscription-total .label {
    font-weight: 500;
}

.subscription-total .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-danger);
}

/* Spending Analysis Card */
.spending-analysis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.spending-analysis-item {
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.spending-analysis-item .category {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.spending-analysis-item .amount {
    font-size: 1.25rem;
    font-weight: 700;
}

.spending-analysis-item .change {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.spending-analysis-item .change.up {
    color: var(--accent-danger);
}

.spending-analysis-item .change.down {
    color: var(--accent-success);
}

@media (max-width: 500px) {
    .spending-analysis {
        grid-template-columns: 1fr;
    }
}

/* Import Debts Modal */
.import-debts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 1rem;
}

.import-debt-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s;
}

.import-debt-item:hover {
    background: var(--bg-secondary);
}

.import-debt-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.import-debt-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.import-debt-name {
    font-weight: 500;
}

.import-debt-details {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Savings Opportunities Detailed View */
.demo-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.opportunities-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.opportunity-item {
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--accent-primary);
}

.opportunity-item.priority-high {
    border-left-color: var(--accent-danger);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), transparent);
}

.opportunity-item.priority-medium {
    border-left-color: var(--accent-warning);
}

.opportunity-item.priority-low {
    border-left-color: var(--accent-success);
}

.opportunity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.opportunity-type {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}

.opportunity-savings {
    font-weight: 700;
    color: var(--accent-success);
}

.opportunity-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.opportunity-insight {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}

.opportunity-details {
    display: flex;
    gap: 1.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.opportunity-action {
    font-size: 0.8125rem;
    color: var(--accent-primary);
    font-weight: 500;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
}

.quick-wins, .behavioral-insights {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.quick-wins h4, .behavioral-insights h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

.quick-wins ul, .behavioral-insights ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-wins li, .behavioral-insights li {
    padding: 0.5rem 0;
    padding-left: 1.25rem;
    position: relative;
    font-size: 0.875rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.quick-wins li:last-child, .behavioral-insights li:last-child {
    border-bottom: none;
}

.quick-wins li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 6px;
    height: 6px;
    background: var(--accent-success);
    border-radius: 50%;
}

.behavioral-insights li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 6px;
    height: 6px;
    background: var(--accent-primary);
    border-radius: 50%;
}

.savings-summary-total {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    border-radius: var(--radius-sm);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.summary-row:first-child {
    padding-top: 0;
}

.summary-row:last-child {
    padding-bottom: 0;
}

.summary-row span {
    color: var(--text-secondary);
}

.summary-row strong.positive {
    color: var(--accent-success);
    font-size: 1.125rem;
}

/* Allocation bar improvements */
.allocation-bar {
    display: flex;
    height: 32px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.allocation-debt {
    background: linear-gradient(135deg, var(--accent-danger), #dc2626);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    transition: width 0.2s ease;
}

.allocation-invest {
    background: linear-gradient(135deg, var(--accent-success), #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    transition: width 0.2s ease;
}

.allocation-amounts {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

.allocation-amounts span:first-child {
    color: var(--accent-danger);
    font-weight: 500;
}

.allocation-amounts span:last-child {
    color: var(--accent-success);
    font-weight: 500;
}

.total-display {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-success);
    padding: 0.5rem 0;
}

/* ========================================
   AI BUDGET GENERATOR STYLES
   ======================================== */

.ai-budget-summary {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.ai-budget-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .ai-budget-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ai-stat-card {
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    padding: 1rem;
    text-align: center;
}

.ai-stat-card.highlight {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.ai-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.ai-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ai-stat-value.positive {
    color: var(--accent-success);
}

/* AI Budget Table */
.ai-budget-table-container {
    overflow-x: auto;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
}

.ai-budget-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ai-budget-table th,
.ai-budget-table td {
    padding: 0.75rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.ai-budget-table th {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-budget-table tbody tr:hover {
    background: var(--bg-primary);
}

.ai-budget-table tbody tr.priority-essential {
    border-left: 3px solid var(--accent-danger);
}

.ai-budget-table tbody tr.priority-important {
    border-left: 3px solid var(--accent-warning);
}

.ai-budget-table tbody tr.priority-discretionary {
    border-left: 3px solid var(--accent-info);
}

.ai-budget-table tfoot td {
    font-weight: 600;
    background: var(--bg-primary);
    border-top: 2px solid var(--border-color);
}

/* Priority & Confidence Badges */
.priority-badge,
.confidence-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-badge.essential {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-danger);
}

.priority-badge.important {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning);
}

.priority-badge.discretionary {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-info);
}

.confidence-badge.high {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-success);
}

.confidence-badge.medium {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning);
}

.confidence-badge.low {
    background: rgba(156, 163, 175, 0.15);
    color: var(--text-muted);
}

/* Trim Opportunities */
.ai-trim-opportunities {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-top: 1.5rem;
}

.trim-opportunities-list {
    display: grid;
    gap: 1rem;
}

.trim-opportunity-card {
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    padding: 1rem;
    border-left: 3px solid var(--accent-warning);
}

.trim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.trim-category {
    font-weight: 600;
    color: var(--text-primary);
}

.trim-savings {
    font-weight: 700;
    font-size: 1rem;
}

.trim-details {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.trim-details .annual-savings {
    color: var(--accent-success);
    font-weight: 500;
}

.trim-tip {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-color);
    font-style: italic;
}

.trim-total {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.trim-total strong {
    color: var(--text-primary);
}

/* AI Insights & Action Items */
.ai-insights-section,
.ai-action-items {
    margin-top: 1.5rem;
}

.ai-insights-list,
.ai-action-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ai-insights-list li,
.ai-action-list li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    font-size: 0.875rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.ai-insights-list li:last-child,
.ai-action-list li:last-child {
    border-bottom: none;
}

.ai-insights-list li::before {
    content: "💡";
    position: absolute;
    left: 0;
    top: 0.5rem;
}

.ai-action-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.5rem;
    color: var(--accent-success);
    font-weight: 700;
}

/* Button small size */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Demo badge */
.demo-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.15));
    color: #a855f7;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Loading spinner for modal */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}