/* SmartSpend AI — app-specific styles.
   Subject: personal finance / receipt tracking. The accent is ledger green,
   drawn from the green ink traditionally used in accounting ledgers. Signature:
   the budget progress bar has a perforated receipt-tape edge. */

:root {
    --bg-color: var(--md-surface-container-low);
    --text-color: var(--md-on-surface);
    --card-bg: var(--md-surface-container-lowest);
    --border-color: var(--md-outline-variant);

    /* Ledger green accent — overrides shared indigo for this app only */
    --ex-accent: #2E7D5B;
    --ex-accent-on: #FFFFFF;
    --ex-accent-container: #D7F0E3;
    --ex-on-accent-container: #0A3322;
    --ex-accent-soft: color-mix(in srgb, #2E7D5B 12%, transparent);
    --ex-danger: #C0392B;
}

.dark {
    --bg-color: var(--md-surface);
    --text-color: var(--md-on-surface);
    --card-bg: var(--md-surface-container-low);
    --border-color: var(--md-outline-variant);

    --ex-accent: #6FCF9B;
    --ex-accent-on: #0A3322;
    --ex-accent-container: #1A4D36;
    --ex-on-accent-container: #D7F0E3;
}

/* Override shared MD3 primary with ledger green for this app's UI */
:root {
    --md-primary: var(--ex-accent);
    --md-on-primary: var(--ex-accent-on);
    --md-primary-container: var(--ex-accent-container);
    --md-on-primary-container: var(--ex-on-accent-container);
}

.input-field {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: all 0.2s ease;
}

.input-field:focus {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-primary) 20%, transparent);
}

.dark .input-field {
    background-color: var(--md-surface-container-high);
    border-color: var(--md-outline-variant);
}

.dark .input-field:focus {
    background-color: var(--md-surface-container-highest);
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 15%, transparent);
}

/* Override inline Tailwind classes for dark mode inputs in expense */
.dark input[class*="dark:bg-slate"],
.dark textarea[class*="dark:bg-slate"] {
    background-color: var(--md-surface-container-high) !important;
}

.dark input[class*="dark:bg-slate"]:focus,
.dark textarea[class*="dark:bg-slate"]:focus {
    background-color: var(--md-surface-container-highest) !important;
}

/* Handle amount input with bg-transparent */
.dark input[class*="bg-transparent"] {
    background-color: var(--md-surface-container-high) !important;
}

.dark input[class*="bg-transparent"]:focus {
    background-color: var(--md-surface-container-highest) !important;
}

/* Flow rail accent (emerald) — #recordModal .modal-content sets the light default
   inline (--flow-accent / --flow-accent-soft); override for dark here. !important
   is required to win over the inline style attribute per CSS cascade rules. */
.dark #recordModal .modal-content {
    --flow-accent: #4fd0a6 !important;
    --flow-accent-soft: #16302a !important;
}

/* ── Signature: receipt-tape budget bar ──
   The budget progress bar gets a perforated edge like a torn receipt tape.
   One quiet detail that ties the visual to the subject. */
.budget-bar, .budget-progress, #budgetBar {
    position: relative;
    overflow: hidden;
}
.budget-bar::after, .budget-progress::after, #budgetBar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 8px;
    background: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 3px,
        var(--md-surface) 3px,
        var(--md-surface) 6px
    );
    pointer-events: none;
}