/* ============================================================================
   MONEY MAP — VIEW-SPECIFIC STYLES
   File: css/views.css
   Description: Styles specific to individual views that aren't covered by
   the generic components. Includes transactions, budgets, debts, goals,
   business, settings, affordability engine, onboarding, and auth pages.
   Load order: tokens → reset → layout → components → dashboard → views
   ============================================================================ */


/* ============================================================================
   1. SIGN-IN / SIGN-UP VIEWS
   The authentication screens shown before the user logs in.
   ============================================================================ */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.auth-form__card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
}

.auth-form__divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-md) 0;
}

.auth-form__divider::before,
.auth-form__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--border-default);
}

.auth-form__divider-text {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
}

.auth-form__footer {
    text-align: center;
    margin-top: var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.auth-form__footer a {
    color: var(--brand-primary);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.auth-form__footer a:hover {
    text-decoration: underline;
}

.auth-form__legal {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--space-md);
    line-height: var(--line-height-relaxed);
}

.auth-form__legal a {
    color: var(--text-secondary);
    text-decoration: underline;
}


/* ============================================================================
   2. ONBOARDING VIEWS
   Multi-step onboarding flow for new users.
   ============================================================================ */

.onboarding-step {
    display: none;
}

.onboarding-step--active {
    display: block;
    animation: viewFadeIn var(--transition-base) ease;
}

.onboarding-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
}

.onboarding-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-primary-light);
    color: var(--brand-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-2xl);
}

.onboarding-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    text-align: center;
    margin-bottom: var(--space-sm);
}

.onboarding-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-lg);
}

.onboarding-choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.onboarding-choice {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background-color: var(--bg-main);
    border: 2px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    width: 100%;
}

.onboarding-choice:hover {
    border-color: var(--brand-primary);
    background-color: var(--brand-primary-lighter);
}

.onboarding-choice--selected {
    border-color: var(--brand-primary);
    background-color: var(--brand-primary-lighter);
}

.onboarding-choice__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-primary-light);
    color: var(--brand-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

.onboarding-choice__content {
    flex: 1;
    min-width: 0;
}

.onboarding-choice__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.onboarding-choice__description {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
    line-height: var(--line-height-normal);
}

.onboarding-choice__check {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background-color: var(--brand-primary);
    color: var(--text-inverse);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}

.onboarding-choice--selected .onboarding-choice__check {
    display: flex;
}

.onboarding-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: space-between;
    margin-top: var(--space-lg);
}

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


/* ============================================================================
   3. TRANSACTIONS VIEW
   The main money ledger page.
   ============================================================================ */

.transactions-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

@media (min-width: 640px) {
    .transactions-filters {
        flex-direction: row;
        align-items: center;
    }
}

.transactions-filters__search {
    flex: 1;
}

.transactions-filters__filters {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.transactions-list {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.transactions-group {
    border-bottom: 1px solid var(--border-light);
}

.transactions-group:last-child {
    border-bottom: none;
}

.transactions-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--bg-main);
    border-bottom: 1px solid var(--border-light);
}

.transactions-group__date {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.transactions-group__total {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.transaction-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.transaction-row:last-child {
    border-bottom: none;
}

.transaction-row:hover {
    background-color: var(--bg-hover);
}

.transaction-row__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.transaction-row__icon--income {
    background-color: var(--status-success-bg);
    color: var(--status-success-text);
}

.transaction-row__icon--expense {
    background-color: var(--status-error-bg);
    color: var(--status-error-text);
}

.transaction-row__icon--transfer {
    background-color: var(--status-info-bg);
    color: var(--status-info-text);
}

.transaction-row__icon--business {
    background-color: var(--brand-accent-light);
    color: var(--brand-accent);
}

.transaction-row__details {
    flex: 1;
    min-width: 0;
}

.transaction-row__description {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-row__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.transaction-row__meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.transaction-row__meta i {
    font-size: var(--font-size-2xs);
}

.transaction-row__right {
    text-align: right;
    flex-shrink: 0;
}

.transaction-row__amount {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
}

.transaction-row__amount--income {
    color: var(--text-income);
}

.transaction-row__amount--expense {
    color: var(--text-expense);
}

.transaction-row__amount--neutral {
    color: var(--text-primary);
}

.transaction-row__context {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-top: 2px;
}


/* ============================================================================
   4. TRANSACTION FORM
   Add/edit transaction form displayed in a modal.
   ============================================================================ */

.transaction-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.transaction-type-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
    padding: 3px;
    background-color: var(--bg-input);
    border-radius: var(--radius-md);
}

@media (min-width: 480px) {
    .transaction-type-tabs {
        grid-template-columns: repeat(4, 1fr);
    }
}

.transaction-type-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-sm);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    min-height: 60px;
}

.transaction-type-tab:hover:not(.transaction-type-tab--active) {
    color: var(--text-primary);
}

.transaction-type-tab--active {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
    font-weight: var(--font-weight-semibold);
}

.transaction-type-tab i {
    font-size: var(--font-size-base);
}

.transaction-type-tab--income.transaction-type-tab--active {
    color: var(--text-income);
}

.transaction-type-tab--expense.transaction-type-tab--active {
    color: var(--text-expense);
}

.transaction-type-tab--transfer.transaction-type-tab--active {
    color: var(--status-info-text);
}


/* ============================================================================
   5. BUDGETS VIEW
   Budget management and tracking page.
   ============================================================================ */

.budget-overview {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
    color: var(--text-inverse);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.budget-overview__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    opacity: 0.85;
    margin-bottom: var(--space-xs);
}

.budget-overview__amount {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    font-family: var(--font-mono);
    margin-bottom: var(--space-sm);
}

.budget-overview__meta {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.budget-overview__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.budget-overview__meta-label {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    opacity: 0.75;
}

.budget-overview__meta-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
}

.budget-category-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.budget-category-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.budget-category-card__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-primary-light);
    color: var(--brand-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.budget-category-card__name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.budget-category-card__status {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-mono);
}

.budget-category-card__status--ok {
    color: var(--brand-primary);
}

.budget-category-card__status--warning {
    color: var(--status-warning-text);
}

.budget-category-card__status--over {
    color: var(--status-error-text);
}

.budget-category-card__amounts {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
}


/* ============================================================================
   6. DEBTS VIEW
   Debt management page.
   ============================================================================ */

.debt-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

@media (min-width: 640px) {
    .debt-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

.debt-summary__card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.debt-summary__card--owed {
    border-left: 4px solid var(--status-error-icon);
}

.debt-summary__card--owing {
    border-left: 4px solid var(--status-success-icon);
}

.debt-summary__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--space-xs);
}

.debt-summary__amount {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.debt-summary__count {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

.debt-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.debt-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-dark);
}

.debt-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.debt-card__counterparty {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.debt-card__type {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-top: 2px;
}

.debt-card__amounts {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: var(--space-sm) 0;
}

.debt-card__outstanding {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.debt-card__original {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.debt-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-light);
}


/* ============================================================================
   7. GOALS VIEW
   Financial goals page.
   ============================================================================ */

.goal-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.goal-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.goal-card__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--brand-primary-light);
    color: var(--brand-primary);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.goal-card__title {
    flex: 1;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.goal-card__progress {
    margin-bottom: var(--space-sm);
}

.goal-card__progress-text {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    font-family: var(--font-mono);
}

.goal-card__progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--bg-input);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.goal-card__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

.goal-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-light);
}

.goal-card__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--space-xs);
    border-radius: var(--radius-full);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.goal-card__status--on-track {
    background-color: var(--status-success-bg);
    color: var(--status-success-text);
}

.goal-card__status--behind {
    background-color: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.goal-card__status--achieved {
    background-color: var(--brand-primary-light);
    color: var(--brand-primary);
}


/* ============================================================================
   8. OBLIGATIONS VIEW
   Bills and obligations management.
   ============================================================================ */

.obligations-tabs {
    margin-bottom: var(--space-md);
}

.obligation-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    transition: all var(--transition-fast);
}

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

.obligation-card__date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: var(--space-xs);
    background-color: var(--bg-main);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.obligation-card__date-badge--overdue {
    background-color: var(--status-error-bg);
}

.obligation-card__date-day {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1;
}

.obligation-card__date-badge--overdue .obligation-card__date-day {
    color: var(--status-error-text);
}

.obligation-card__date-month {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 2px;
    letter-spacing: var(--letter-spacing-wide);
}

.obligation-card__content {
    flex: 1;
    min-width: 0;
}

.obligation-card__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.obligation-card__meta {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.obligation-card__amount {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
    color: var(--text-primary);
    flex-shrink: 0;
}


/* ============================================================================
   9. BUSINESS VIEW
   Business management workspace.
   ============================================================================ */

.business-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.business-header__logo {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    color: var(--text-inverse);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

.business-header__info {
    flex: 1;
    min-width: 0;
}

.business-header__name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.business-header__industry {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.party-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.party-card:hover {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-sm);
}

.party-card__avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-primary-light);
    color: var(--brand-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-sm);
}

.party-card__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.party-card__contact {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.party-card__balance {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
    margin-top: var(--space-sm);
}

.party-card__balance--owed {
    color: var(--status-error-text);
}

.party-card__balance--owing {
    color: var(--status-success-text);
}


/* ============================================================================
   10. AFFORDABILITY ENGINE VIEW
   "Can I afford this?" decision engine.
   ============================================================================ */

.affordability-form {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}

.affordability-form__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.affordability-form__subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.affordability-result {
    background-color: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    border: 2px solid;
}

.affordability-result--yes {
    border-color: var(--status-success-icon);
    background: linear-gradient(135deg, var(--status-success-bg) 0%, var(--bg-surface) 100%);
}

.affordability-result--caution {
    border-color: var(--status-warning-icon);
    background: linear-gradient(135deg, var(--status-warning-bg) 0%, var(--bg-surface) 100%);
}

.affordability-result--no {
    border-color: var(--status-error-icon);
    background: linear-gradient(135deg, var(--status-error-bg) 0%, var(--bg-surface) 100%);
}

.affordability-result--unknown {
    border-color: var(--text-muted);
    background: linear-gradient(135deg, var(--bg-input) 0%, var(--bg-surface) 100%);
}

.affordability-result__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-md);
}

.affordability-result--yes .affordability-result__icon {
    background-color: var(--status-success-bg);
    color: var(--status-success-text);
}

.affordability-result--caution .affordability-result__icon {
    background-color: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.affordability-result--no .affordability-result__icon {
    background-color: var(--status-error-bg);
    color: var(--status-error-text);
}

.affordability-result--unknown .affordability-result__icon {
    background-color: var(--bg-input);
    color: var(--text-muted);
}

.affordability-result__verdict {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-tight);
}

.affordability-result__explanation {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-md);
}

.affordability-breakdown {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-top: var(--space-md);
}

.affordability-breakdown__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--space-sm);
}

.affordability-factor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--font-size-sm);
}

.affordability-factor:last-child {
    border-bottom: none;
}

.affordability-factor__label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-secondary);
}

.affordability-factor__label i {
    width: 16px;
    text-align: center;
    font-size: var(--font-size-xs);
}

.affordability-factor__value {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.affordability-factor__value--deduct {
    color: var(--status-error-text);
}

.affordability-factor__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    margin-top: var(--space-xs);
    border-top: 2px solid var(--border-default);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
}

.affordability-alternatives {
    margin-top: var(--space-md);
}

.affordability-alternatives__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.affordability-alternative {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background-color: var(--bg-main);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.affordability-alternative i {
    color: var(--brand-primary);
    margin-top: 2px;
}

.data-quality-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    margin-top: var(--space-sm);
}

.data-quality-badge--high {
    background-color: var(--status-success-bg);
    color: var(--status-success-text);
}

.data-quality-badge--medium {
    background-color: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.data-quality-badge--low {
    background-color: var(--status-error-bg);
    color: var(--status-error-text);
}


/* ============================================================================
   11. SETTINGS VIEW
   User profile, preferences, and account management.
   ============================================================================ */

.settings-section {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    overflow: hidden;
}

.settings-section__header {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.settings-section__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.settings-section__description {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.settings-section__body {
    padding: var(--space-md);
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-light);
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row__info {
    flex: 1;
    min-width: 0;
}

.settings-row__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.settings-row__hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
    line-height: var(--line-height-normal);
}

.settings-danger-zone {
    background-color: var(--bg-surface);
    border: 1px solid var(--status-error-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-top: var(--space-lg);
}

.settings-danger-zone__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--status-error-text);
    margin-bottom: var(--space-xs);
}

.settings-danger-zone__description {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    line-height: var(--line-height-relaxed);
}


/* ============================================================================
   12. ACCOUNT CARDS
   Visual representation of bank accounts, cash, mobile money.
   ============================================================================ */

.account-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fast);
    cursor: pointer;
}

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

.account-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.account-card__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.account-card__icon--bank {
    background-color: var(--brand-accent-light);
    color: var(--brand-accent);
}

.account-card__icon--cash {
    background-color: var(--status-success-bg);
    color: var(--status-success-text);
}

.account-card__icon--mobile {
    background-color: var(--brand-primary-light);
    color: var(--brand-primary);
}

.account-card__icon--savings {
    background-color: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.account-card__name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-card__balance {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
    color: var(--text-primary);
    letter-spacing: var(--letter-spacing-tight);
}

.account-card__type {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: var(--letter-spacing-wide);
    margin-top: 2px;
}


/* ============================================================================
   13. REPORTS VIEW
   Financial reports and analytics.
   ============================================================================ */

.report-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

@media (min-width: 640px) {
    .report-filters {
        flex-direction: row;
        align-items: flex-end;
    }
}

.report-chart-container {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.report-chart-container__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.report-chart-container__canvas-wrapper {
    position: relative;
    height: 280px;
}


/* ============================================================================
   14. DETAIL PANELS
   Side panels for viewing/editing record details.
   ============================================================================ */

.detail-panel {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.detail-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.detail-panel__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.detail-panel__field {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-light);
}

.detail-panel__field:last-child {
    border-bottom: none;
}

.detail-panel__label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--space-xs);
}

.detail-panel__value {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.detail-panel__value--mono {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-medium);
}

.detail-panel__actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
}


/* ============================================================================
   15. PERSONAL/BUSINESS CONTEXT INDICATOR
   Visual indicator showing which context the current view is in.
   ============================================================================ */

.context-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.context-indicator--personal {
    background-color: var(--brand-primary-light);
    color: var(--brand-primary);
}

.context-indicator--business {
    background-color: var(--brand-accent-light);
    color: var(--brand-accent);
}

.context-indicator i {
    font-size: var(--font-size-2xs);
}


/* ============================================================================
   16. FLOATING ACTION BUTTON (MOBILE)
   Standalone FAB for primary actions on mobile.
   ============================================================================ */

.fab {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + var(--space-md));
    right: var(--space-md);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background-color: var(--brand-primary);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    border: none;
    cursor: pointer;
    font-size: var(--font-size-xl);
    z-index: var(--z-sticky);
    transition: all var(--transition-fast);
}

.fab:hover {
    background-color: var(--brand-primary-hover);
    transform: scale(1.05);
}

.fab:active {
    transform: scale(0.95);
}

@media (min-width: 1024px) {
    .fab {
        display: none;
    }
}


/* ============================================================================
   17. INFO TOOLTIP ICON
   Small (i) icon that users can tap for more information.
   ============================================================================ */

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background-color: var(--bg-hover);
    color: var(--text-muted);
    font-size: 10px;
    cursor: help;
    margin-left: var(--space-xs);
    transition: all var(--transition-fast);
}

.info-icon:hover {
    background-color: var(--brand-primary-light);
    color: var(--brand-primary);
}


/* ============================================================================
   18. ESTIMATE / UNCERTAINTY LABELS
   Visual markers for estimated or uncertain financial figures.
   ============================================================================ */

.estimate-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px var(--space-xs);
    background-color: var(--bg-input);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-left: var(--space-xs);
    vertical-align: middle;
}

.estimate-label i {
    font-size: 9px;
}