/* Tax Calculator Page - Modern UI Enhancements */

/* =============================================================================
   FEDERAL & PROVINCIAL TAX BRACKETS (light + dark theme)
   ============================================================================= */
.tax-bracket-breakdown {
    color: var(--text-primary);
}

.tax-bracket-breakdown .table {
    --bs-table-bg: var(--bg-primary);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-subtle);
    --bs-table-hover-bg: var(--bg-secondary);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-striped-bg: var(--bg-secondary);
    --bs-table-striped-color: var(--text-primary);
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.tax-bracket-breakdown .table thead th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-subtle) !important;
}

.tax-bracket-breakdown .table tbody tr {
    background-color: var(--bg-primary) !important;
}

.tax-bracket-breakdown .table tbody td {
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
    background-color: inherit !important;
}

.tax-bracket-breakdown .table-hover tbody tr:hover {
    --bs-table-hover-bg: var(--bg-secondary);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-accent-bg: var(--bg-secondary);
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tax-bracket-breakdown .table {
    --bs-table-bg: #1a1d2e;
    --bs-table-color: #e8eaed;
    --bs-table-border-color: #252938;
    --bs-table-hover-bg: #13161f;
    --bs-table-hover-color: #e8eaed;
    --bs-table-striped-bg: #13161f;
    --bs-table-striped-color: #e8eaed;
    background-color: #1a1d2e !important;
    color: #e8eaed !important;
}

[data-theme="dark"] .tax-bracket-breakdown .table thead th {
    background-color: #13161f !important;
    color: #bdc1c6 !important;
    border-color: #252938 !important;
}

[data-theme="dark"] .tax-bracket-breakdown .table tbody tr {
    background-color: #1a1d2e !important;
    color: #e8eaed !important;
}

[data-theme="dark"] .tax-bracket-breakdown .table tbody td {
    color: #e8eaed !important;
    border-color: #252938 !important;
    background-color: inherit !important;
}

[data-theme="dark"] .tax-bracket-breakdown .table-hover tbody tr:hover {
    --bs-table-hover-bg: #13161f;
    --bs-table-accent-bg: #13161f;
    background-color: #13161f !important;
    color: #e8eaed !important;
}

.tax-bracket-breakdown #back-to-deduction-btn {
    color: var(--text-secondary) !important;
    border-color: var(--border-primary) !important;
    background-color: var(--bg-primary) !important;
}

.tax-bracket-breakdown #back-to-deduction-btn:hover {
    color: var(--text-primary) !important;
    border-color: var(--text-secondary) !important;
    background-color: var(--bg-secondary) !important;
}

.tax-calculators-page-content {
    padding-bottom: 2rem;
}

#summary-total-planned {
    color: var(--brand-purple) !important;
}

#summary-total-savings {
    color: var(--success-green) !important;
}

/* Input styling with focus effects */
#tax-income-input:focus {
    border-color: var(--brand-purple) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-purple) 15%, transparent) !important;
}

/* Dropdown focus styling */
.Select-control:focus,
.Select--is-focused .Select-control {
    border-color: var(--brand-purple) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-purple) 15%, transparent) !important;
}

/* Period toggle buttons styling */
#period-annual,
#period-monthly,
#period-biweekly,
#period-weekly {
    transition: all 0.2s ease;
    border: 1.5px solid var(--border-primary);
}

#period-annual:hover,
#period-monthly:hover,
#period-biweekly:hover,
#period-weekly:hover {
    border-color: color-mix(in srgb, var(--brand-purple) 50%, transparent);
    background: color-mix(in srgb, var(--brand-purple) 5%, transparent);
}

/* =============================================================================
   TAB NAVIGATION BUTTONS (matching raw data page style)
   ============================================================================= */

/* Navigation tab buttons - individual rounded buttons */
.nav-buttons-group {
    border-radius: 0;
    padding: 10px 24px;
    font-size: 0.92rem;
    font-weight: 500;
    transition: all 0.25s ease;
    position: relative;
    white-space: nowrap;
}

.nav-buttons-group:hover:not(:disabled) {
    transform: none;
    box-shadow: none;
}

.nav-buttons-group:active {
    transform: none;
}

.nav-buttons-group:focus {
    box-shadow: none !important;
}

/* Active tab - solid brand purple */
.btn-purple.nav-buttons-group {
    background-color: var(--brand-purple) !important;
    color: white !important;
    border-color: var(--brand-purple) !important;
    font-weight: 600 !important;
}

.btn-purple.nav-buttons-group:hover:not(:disabled) {
    background-color: var(--brand-purple-hover) !important;
    border-color: var(--brand-purple-hover) !important;
    color: white !important;
}

.btn-purple.nav-buttons-group:focus {
    background-color: var(--brand-purple) !important;
    border-color: var(--brand-purple) !important;
    box-shadow: none !important;
}

.btn-purple.nav-buttons-group:active {
    background-color: var(--brand-purple-hover) !important;
    border-color: var(--brand-purple-hover) !important;
}

/* Inactive tabs - outlined with visible border, theme-aware */
.btn-outline-secondary.nav-buttons-group {
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    background-color: var(--bg-primary) !important;
}

.btn-outline-secondary.nav-buttons-group:hover:not(:disabled) {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
    border-color: var(--text-secondary) !important;
}

/* Financial Calculators button: calendar-mode style (matches Cash flow view) */
#tab-btn-calculators.btn-outline-secondary.nav-buttons-group {
    background-color: var(--bg-hover) !important;
    border: 1px solid rgba(180, 100, 255, 0.4) !important;
    color: var(--brand-purple) !important;
}

#tab-btn-calculators.btn-outline-secondary.nav-buttons-group:hover:not(:disabled) {
    background-color: rgba(180, 100, 255, 0.15) !important;
    border-color: var(--brand-purple) !important;
    color: var(--brand-purple) !important;
    box-shadow: 0 2px 8px rgba(180, 100, 255, 0.25) !important;
}

/* Disabled button styling */
.nav-buttons-group:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Card hover - scoped to tax breakdown tab only to avoid overriding flat theme */
.tax-breakdown-tab-content .card {
    transition: all 0.3s ease;
}

.tax-breakdown-tab-content .card:hover {
    box-shadow: var(--card-hover-shadow);
}

/* Smooth animations for results */
#tax-results-container {
    animation: fadeIn 0.5s ease-in;
}

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

/* Responsive adjustments */
@media (max-width: 968px) {
    /* Tab buttons responsive */
    .nav-buttons-group {
        font-size: 0.82rem !important;
        padding: 8px 14px !important;
    }
    
    .tax-nav-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .tax-nav-row > .col-auto {
        width: 100% !important;
        max-width: 100% !important;
    }

    .tax-nav-row .nav-buttons-group {
        width: 100%;
    }
}

/* Take-home card: side-by-side layout, stacks on mobile */
.takehome-card-layout {
    display: flex;
    align-items: center;
    gap: 24px;
}

@media (max-width: 600px) {
    .takehome-card-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .takehome-chart-col {
        width: 100% !important;
        max-width: 220px;
        margin: 0 auto;
    }
}

/* Enhanced number display */
.big-number-display {
    animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Breakdown list hover effects */
.breakdown-list li {
    transition: background-color 0.2s ease;
}

.breakdown-list li:hover {
    background-color: color-mix(in srgb, var(--brand-purple) 5%, transparent);
    border-radius: 8px;
}

/* Insight box enhancements - purple hover for both modes */
.insight-box {
    transition: all 0.3s ease;
}

.insight-box:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 12px color-mix(in srgb, var(--brand-purple) 25%, transparent);
}

/* =============================================================================
   TAX BRACKET INSIGHTS CARD
   ============================================================================= */
.bracket-insights-card {
    color: var(--text-primary);
}

.bracket-insights-card .bracket-card-title {
    margin-bottom: 4px;
}

.bracket-insights-card .bracket-big-number {
    animation: countUp 0.4s ease-out;
}

.bracket-next-box {
    border-radius: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.bracket-next-box:hover {
    border-color: color-mix(in srgb, var(--brand-purple) 25%, transparent);
}

.bracket-opportunity-box {
    border-radius: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.bracket-opportunity-box:hover {
    border-color: color-mix(in srgb, var(--success-green) 40%, transparent);
}

/* =============================================================================
   PROVINCIAL COMPARISON BOX
   ============================================================================= */
.provincial-comparison-box {
    border-radius: 0;
    transition: all 0.3s ease;
}

.provincial-comparison-box:hover {
    box-shadow: 0 6px 12px color-mix(in srgb, var(--brand-purple) 25%, transparent);
}

.provincial-comparison-row {
    transition: background-color 0.2s ease;
}

.provincial-comparison-row:hover {
    background-color: color-mix(in srgb, var(--brand-purple) 5%, transparent);
    border-radius: 6px;
}

.provincial-comparison-row--user {
    font-weight: 600;
}

.provincial-comparison-row:last-child {
    border-bottom: none !important;
}

/* Loading state for empty results */
.empty-state-icon {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

/* CTA button enhancements - purple hover for both modes */
.cta-section .btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--brand-purple) 30%, transparent);
}

/* Badge pulse effect */
.percentage-badge {
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-purple) 40%, transparent);
    }
    50% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-purple) 0%, transparent);
    }
}

/* =============================================================================
   ACCOUNTS TAB STYLING
   ============================================================================= */

/* --- Carousel Container (spotlight: clip at edges, viewport allows peek) --- */
.account-carousel-container {
    position: relative;
    margin-bottom: 24px;
    overflow: hidden;
}

.carousel-viewport {
    overflow: visible;
    position: relative;
    width: 100%;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-slide {
    flex: 0 0 calc((100vw - 210px) * 0.60);
    min-width: 0;
    padding: 0 10px;
    box-sizing: border-box;
    transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
}

.carousel-slide--active {
    transform: scale(1);
    opacity: 1;
    z-index: 2;
    filter: none;
}

.carousel-slide--adjacent {
    transform: scale(0.95);
    opacity: 0.35;
    z-index: 1;
    pointer-events: none;
    filter: blur(1px);
}

.carousel-slide--hidden {
    transform: scale(0.88);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

/* --- Toolbar row: Prev (left), Compare (center), Next (right) --- */
.accounts-carousel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
}

.accounts-carousel-toolbar-left {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-start;
}

.accounts-carousel-toolbar-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.accounts-carousel-toolbar-right {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
}

/* --- Prev / Next Buttons (inline in toolbar: sharp edges; purple when clickable) --- */
.carousel-nav-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1.5px solid var(--border-primary);
    color: var(--text-secondary);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

/* Grey when not clickable: subtle hover only */
.carousel-nav-btn:not(.carousel-nav-btn--active):hover {
    background: var(--bg-hover);
    border-color: var(--border-ui);
    color: var(--text-muted);
}

/* Purple when clickable (first card: next only; middle: both; last card: prev only) */
.carousel-nav-btn.carousel-nav-btn--active {
    background: var(--brand-purple);
    border-color: var(--brand-purple);
    color: white;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--brand-purple) 40%, transparent);
}

/* Hover shade animation for clickable (purple) state */
.carousel-nav-btn.carousel-nav-btn--active:hover {
    background: var(--brand-purple-hover);
    border-color: var(--brand-purple-hover);
    color: white;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--brand-purple) 50%, transparent);
}

/* --- Dot Indicators --- */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-primary);
    transition: all 0.3s ease;
    cursor: pointer;
}

.carousel-dot.active {
    background: var(--brand-purple);
    width: 24px;
    border-radius: 4px;
}

/* =============================================================================
   ACCOUNTS TAB METRIC CARDS - match dashboard but with refined typography
   ============================================================================= */

#accounts-quick-stats .dashboard-metric-card {
    border: 1.5px solid var(--border-primary);
    border-radius: 0;
    padding: 20px 16px;
    text-align: center;
    min-height: 110px;
    background: var(--bg-primary);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#accounts-quick-stats .dashboard-metric-card:hover {
    border-color: color-mix(in srgb, var(--brand-purple) 40%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-purple) 10%, transparent);
}

#accounts-quick-stats .dashboard-metric-card .metric-card-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

#accounts-quick-stats .dashboard-metric-card .card-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Mobile: uniform square cards — same width and height in 2x2 grid */
@media (max-width: 768px) {
    #accounts-quick-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        aspect-ratio: 1;
        gap: 12px;
        margin-bottom: 1rem !important;
    }
    #accounts-quick-stats .col-6 {
        max-width: none !important;
        flex: none !important;
        width: 100% !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
    }
    #accounts-quick-stats .dashboard-metric-card {
        width: 100%;
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 8px !important;
    }
    #accounts-quick-stats .dashboard-metric-card .card-body {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0.5rem !important;
    }
    #accounts-quick-stats .dashboard-metric-card .metric-card-title {
        font-size: 0.7rem;
        margin-bottom: 4px;
        line-height: 1.2;
    }
    #accounts-quick-stats .dashboard-metric-card .card-value {
        font-size: 1.25rem;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        line-height: 1.2;
    }
}

/* Accounts Summary Header - bold like "Packages" title */
#accounts-tab-content > div:first-child h3 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    animation: fadeIn 0.4s ease-out;
}

/* Compare Button - subtle outline link style */
#open-comparison-modal {
    transition: all 0.2s ease;
    border-width: 1.5px;
    border-radius: 0;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

#open-comparison-modal:hover {
    background: color-mix(in srgb, var(--brand-purple) 8%, transparent) !important;
    border-color: var(--brand-purple) !important;
    color: var(--brand-purple) !important;
    box-shadow: none !important;
}

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

.stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.stat-value-purple {
    color: var(--brand-purple);
}

.stat-value-green {
    color: var(--success-green);
}

/* =============================================================================
   ACCOUNT CARDS (inspiration: stacked package cards with status pills)
   ============================================================================= */

.account-card {
    background: var(--bg-primary);
    border: 1.5px solid var(--border-primary);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.account-card:hover {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--brand-purple) 12%, transparent);
    border-color: color-mix(in srgb, var(--brand-purple) 40%, transparent);
}

.account-card-header {
    padding: 20px 24px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
    transition: background-color 0.2s ease;
}

.account-card-title {
    font-size: 1.15rem;
    color: var(--text-primary);
    margin-bottom: 2px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.account-card-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0;
    font-weight: 400;
}

/* Status badge - pill style (inspiration: "IN TRANSIT", "PACKED", "DELIVERED") */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    white-space: nowrap;
}

.status-badge.configured {
    background: color-mix(in srgb, var(--success-green) 12%, transparent);
    color: var(--success-green);
    font-weight: 700;
}

/* Card header preview stats - horizontal metadata grid (inspiration: Sender, Departed, Distance, Weight) */
.card-preview-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.preview-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.preview-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.preview-value-purple {
    color: var(--brand-purple);
}

/* Progress bar - thicker and more prominent (inspiration: green transit bar) */
.preview-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.preview-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-purple), color-mix(in srgb, var(--brand-purple) 70%, var(--success-green)));
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expand/collapse chevron (inspiration: expandable card chevron) */
.account-expand-btn {
    color: var(--text-muted) !important;
    background: transparent !important;
    border: none !important;
    padding: 6px 14px !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.account-expand-btn:hover {
    color: var(--brand-purple) !important;
    background: color-mix(in srgb, var(--brand-purple) 8%, transparent) !important;
    transform: none;
    text-decoration: none !important;
}

.account-expand-btn:focus,
.account-expand-btn:active {
    color: var(--brand-purple) !important;
    background: color-mix(in srgb, var(--brand-purple) 12%, transparent) !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Account Sections */
.account-section {
    margin-bottom: 32px;
}

.account-section-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid var(--border-primary);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

/* Input Styling */
.account-input-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.account-input {
    padding: 12px 15px;
    border: 2px solid var(--border-primary);
    border-radius: 0;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.account-input::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

.account-input:focus {
    outline: none;
    border-color: var(--brand-purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-purple) 10%, transparent);
}

[data-theme="dark"] .account-input,
[data-theme="dark"] .account-input.form-control {
    background-color: #1a1d2e !important;
    color: #e8eaed !important;
    border-color: #3d4153 !important;
}

[data-theme="dark"] .account-input::placeholder {
    color: #80868b !important;
    opacity: 1;
}

[data-theme="dark"] .account-input:focus {
    background-color: #1a1d2e !important;
    color: #e8eaed !important;
}

.helper-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 5px;
}

/* Display Value Boxes - clean metric display */
.display-value-box {
    background: var(--bg-secondary);
    padding: 18px 22px;
    border-radius: 0;
    margin: 15px 0;
    border: 1px solid var(--border-subtle);
}

.display-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.display-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-purple);
    letter-spacing: -0.02em;
}

.display-amount-large {
    font-size: 2rem;
    font-weight: 800;
    color: var(--success-green);
    letter-spacing: -0.02em;
}

/* Tax Impact Sections */
.tax-impact-section {
    background: color-mix(in srgb, var(--success-green) 8%, transparent);
    padding: 25px;
    border-radius: 0;
    margin-top: 20px;
}

.tax-savings-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success-green);
    margin: 10px 0;
}

.real-cost-amount {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 10px 0;
}

.tfsa-info-section {
    background: color-mix(in srgb, var(--info-blue) 8%, transparent);
    padding: 25px;
    border-radius: 0;
}

/* FHSA Radio Buttons */
.fhsa-radio {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.fhsa-radio label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Collapse animations */
.collapse {
    transition: height 0.3s ease-out;
}

/* Error messages */
.auth-error {
    color: var(--error-red);
    font-size: 0.85rem;
    margin-top: 5px;
    min-height: 18px;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .account-card {
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    /* Tab buttons for small screens */
    .nav-buttons-group {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }
    
    /* Period toggle buttons - 2x2 grid on mobile */
    .period-toggle-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        gap: 8px !important;
    }
    
    .period-toggle-buttons .btn {
        flex: none !important;
        width: 100% !important;
    }
    
    /* Accounts Summary Header responsive */
    #accounts-tab-content > div:first-child h3 {
        font-size: 1.2rem !important;
    }
    
    .stat-value {
        font-size: 1.2rem;
    }
    
    .account-card-header {
        padding: 15px 20px;
    }
    
    .display-amount {
        font-size: 1.2rem;
    }
    
    .display-amount-large {
        font-size: 1.4rem;
    }
    
    .tax-savings-amount {
        font-size: 1.2rem;
    }
    
    .real-cost-amount {
        font-size: 1rem;
    }
    
    .account-card {
        margin-bottom: 15px;
    }
}

/* Comparison Modal Styling */
.comparison-table-container {
    overflow-x: auto;
    margin: 20px 0;
}

.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0;
    overflow: hidden;
}

.comparison-table thead th {
    background: var(--brand-purple);
    color: white;
    padding: 20px 15px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: left;
}

.comparison-table thead th:first-child {
    border-radius: 0;
}

.comparison-table thead th:last-child {
    border-radius: 0;
}

.comparison-table tbody tr {
    border-bottom: 1px solid var(--border-primary);
}

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

.comparison-table tbody tr:nth-child(even):not(.section-header-row) {
    background: var(--bg-secondary);
}

.comparison-table tbody tr:nth-child(odd):not(.section-header-row) {
    background: var(--bg-primary);
}

.comparison-table td {
    padding: 18px 15px;
    color: var(--text-primary);
}

.comparison-table td:first-child {
    font-weight: 600;
    color: var(--brand-purple);
    width: 25%;
}

.comparison-table .checkmark {
    color: var(--brand-green);
    font-size: 1.2rem;
    font-weight: bold;
}

.comparison-table .cross {
    color: var(--error-red);
    font-size: 1.2rem;
    font-weight: bold;
}

.comparison-table .section-header {
    background: var(--bg-tertiary) !important;
    font-weight: 700;
    color: var(--brand-purple) !important;
    font-size: 1rem;
    padding: 15px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 3px solid var(--border-primary);
    border-bottom: 2px solid var(--border-primary);
}

.comparison-table .section-header-row {
    background: var(--bg-tertiary) !important;
}

.comparison-table .section-header-row td {
    padding: 0 !important;
}

.pro-tips-box {
    margin-top: 30px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 0;
    border-top: 4px solid var(--brand-purple);
}

.pro-tips-box ul {
    color: var(--text-primary);
    line-height: 1.8;
    margin: 0;
}

.pro-tips-box li {
    margin-bottom: 8px;
}

.pro-tips-box li strong {
    color: var(--brand-purple);
}

/* Modal responsive styling */
@media (max-width: 768px) {
    .comparison-table {
        font-size: 0.85rem;
    }
    
    .comparison-table td,
    .comparison-table th {
        padding: 12px 8px;
    }
    
    .pro-tips-box {
        padding: 15px;
    }
}

/* Dark mode adjustments for comparison modal */
/* Animation for number changes */
@keyframes countUp {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.stat-value,
.display-amount,
.display-amount-large,
.tax-savings-amount,
.real-cost-amount {
    animation: countUp 0.5s ease-out;
}

/* =============================================================================
   AI STRATEGY TAB STYLING (aligned with Account Comparison Modal)
   ============================================================================= */

.ai-strategy-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ai-strategy-row-container {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    align-items: flex-start;
}

.ai-strategy-row-container > * {
    flex: 1;
    min-width: 0;
}

.ai-strategy-header-card {
    background: color-mix(in srgb, var(--brand-purple) 8%, var(--bg-primary));
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-border-radius);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.ai-strategy-header-card:hover {
    box-shadow: var(--card-hover-shadow);
    border-color: color-mix(in srgb, var(--brand-purple) 30%, transparent);
}

.ai-strategy-priority-card {
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.ai-strategy-priority-card:hover {
    box-shadow: var(--card-hover-shadow);
}

.ai-whatif-table {
    background: var(--bg-primary);
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--border-ui);
}

.ai-whatif-table thead th {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

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

.ai-mistake-card {
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

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

.ai-timeline-step {
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.ai-timeline-step:hover {
    box-shadow: var(--card-hover-shadow);
}

/* Legacy classes kept for any remaining references */
.ai-strategy-card {
    border: 1px solid var(--border-ui);
}

.ai-strategy-title,
.ai-section-title {
    font-weight: 700;
    color: var(--text-primary);
}

.ai-highlight {
    color: var(--brand-purple);
    font-weight: 600;
}

.ai-metric-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ai-metric-value {
    font-weight: 700;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .ai-strategy-container {
        gap: 1rem;
    }

    .ai-strategy-row-container {
        flex-direction: column;
    }

    .ai-strategy-header-card .d-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .ai-whatif-table {
        font-size: 0.85rem;
    }

    .ai-whatif-table th,
    .ai-whatif-table td {
        padding: 0.5rem !important;
    }
}

/* =============================================================================
   ACCOUNT SUMMARY VIEW (shown after Save Plan)
   ============================================================================= */

.account-summary-view .display-label {
    text-align: center;
}

.account-summary-view .display-amount-large,
.account-summary-view .display-amount,
.account-summary-view .tax-savings-amount {
    text-align: center;
}

.account-summary-view .card-body {
    padding: 1.5rem;
}

/* =============================================================================
   UNIFIED TAX RESULTS CARD (Live Preview style)
   ============================================================================= */

.tax-unified-results-card {
    padding: 24px;
}

.tax-results-section {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-primary);
}

.tax-results-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.tax-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.tax-stat-box {
    background-color: var(--bg-tertiary);
    padding: 12px;
}

.tax-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.tax-stat-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 3px;
}

.tax-stat-sub {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 1px;
}

/* Section title (reuse chart-card-title for consistency) */
.tax-unified-results-card .chart-card-title {
    padding: 0 0 8px 0;
    margin-bottom: 0;
}

.tax-section-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Hero section (centered, like simulation-fi-years) */
.tax-hero {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 20px;
}

.tax-hero-number {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-purple);
}

.tax-hero-number--green {
    color: var(--success-green);
}

.tax-hero-number--red {
    color: var(--error-red);
}

.tax-hero-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.tax-hero-sub {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.tax-hero-sub span {
    color: var(--success-green);
    font-weight: 500;
}

.tax-hero-badge {
    display: inline-block;
    background: color-mix(in srgb, var(--brand-purple) 10%, transparent);
    color: var(--brand-purple);
    padding: 4px 10px;
    font-weight: 600;
    font-size: 0.78rem;
}

/* 2-col stat row for take-home section */
.tax-stat-row--2col {
    grid-template-columns: 1fr 1fr;
}

/* Horizontal percentage bars (Take-Home / Tax & Deductions) */
.tax-percent-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}

.tax-percent-bar {
    width: 100%;
}

.tax-percent-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.tax-percent-bar-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.tax-percent-bar-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}

.tax-percent-bar-track {
    width: 100%;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.tax-percent-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.tax-percent-bar-fill--green {
    background: var(--success-green);
}

.tax-percent-bar-fill--purple {
    background: var(--brand-purple);
}

/* Provincial comparison inside unified results card */
.tax-results-section--provincial .provincial-comparison-box {
    background: color-mix(in srgb, var(--brand-purple) 6%, transparent);
    border: 1px solid var(--border-subtle);
    padding: 16px;
    margin-top: 4px;
}

.tax-results-section--provincial .provincial-comparison-box h4 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.tax-results-section--provincial .provincial-comparison-box p {
    font-size: 0.82rem;
    margin-bottom: 10px;
}

/* Tax bracket section - 3 columns: rate | next bracket | opportunity */
.tax-bracket-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.tax-bracket-empty {
    display: none;
}

.tax-bracket-rate-col .tax-hero-sub {
    margin-bottom: 0;
}

.tax-bracket-row--single .tax-bracket-rate-col {
    grid-column: 1 / -1;
}

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

/* Info boxes (Next bracket, Opportunity - like simulation-sensitivity) */
.tax-bracket-row .tax-info-box {
    margin-bottom: 0;
}

.tax-info-box {
    background-color: var(--bg-tertiary);
    border-radius: 0;
    padding: 14px;
    margin-bottom: 12px;
}

.tax-info-box:last-child {
    margin-bottom: 0;
}

.tax-info-box--purple {
    background-color: color-mix(in srgb, var(--brand-purple) 8%, transparent);
    border: 1px solid var(--border-subtle);
}

.tax-info-box--green {
    background-color: color-mix(in srgb, var(--success-green) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--success-green) 30%, transparent);
}

.tax-info-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

.tax-info-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.tax-info-detail {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.tax-info-detail strong {
    color: var(--success-green);
    font-weight: 700;
}

.tax-bracket-section .tax-hero-sub {
    margin-bottom: 16px;
}

.tax-bracket-section .tax-hero-sub span + span {
    margin-left: 12px;
}

/* Chip row for RRSP opportunity nudge */
.tax-chip-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.tax-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.tax-chip-label {
    color: var(--text-secondary);
}

.tax-chip-impact {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 0;
}

.tax-chip-impact--pos {
    background-color: rgba(5, 150, 105, 0.12);
    color: var(--success-green);
}

.tax-chip-impact--neg {
    background-color: rgba(220, 38, 38, 0.12);
    color: var(--error-red);
}