/* ============================================================
   MoneyMap — Components (components.css)
   Reusable UI patterns: buttons, forms, cards, alerts, etc.
   ============================================================ */

/* ----------------------------------------------------------
   Typography
---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

p {
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover, a:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* ----------------------------------------------------------
   Section Heading
---------------------------------------------------------- */
.section-heading {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

/* ----------------------------------------------------------
   Header Brand
---------------------------------------------------------- */
.site-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    letter-spacing: -0.01em;
}

.brand-icon {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

.site-tagline {
    font-size: var(--font-size-sm);
    color: var(--color-text-subtle);
    margin: 0;
}

/* ----------------------------------------------------------
   Welcome Section
---------------------------------------------------------- */
.welcome-description {
    font-size: var(--font-size-base);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.welcome-instructions {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* ----------------------------------------------------------
   Buttons
---------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
    min-height: 40px;
}

.btn:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Primary */
.btn-primary {
    background-color: var(--color-primary);
    color: #0a1a10;
    border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* Danger */
.btn-danger {
    background-color: transparent;
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--color-danger-muted);
}

/* Ghost */
.btn-ghost {
    background-color: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

/* Icon button (edit/delete) */
.btn-icon {
    padding: var(--space-2);
    min-height: 36px;
    min-width: 36px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

/* Small */
.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    min-height: 32px;
}

/* ----------------------------------------------------------
   Form Elements
---------------------------------------------------------- */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.label-required {
    color: var(--color-danger);
    font-size: var(--font-size-xs);
}

.label-optional {
    color: var(--color-text-subtle);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}

.form-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
    min-height: 42px;
    -webkit-appearance: none;
    appearance: none;
}

.form-input:hover {
    border-color: var(--color-text-subtle);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    background-color: var(--color-input-bg-focus);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
}

.form-input.input-error {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}

/* Select */
.form-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
}

.form-select option {
    background-color: var(--color-surface);
    color: var(--color-text);
}

/* Currency input wrapper */
.input-currency-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-symbol {
    position: absolute;
    left: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    pointer-events: none;
    z-index: 1;
    font-weight: var(--font-weight-medium);
}

.input-currency {
    padding-left: calc(var(--space-3) + 14px);   /* make room for $ */
}

/* Remove spinner arrows from number inputs */
.form-input[type="number"]::-webkit-outer-spin-button,
.form-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-input[type="number"] {
    -moz-appearance: textfield;
}

/* Form error message */
.form-error {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
    min-height: 1.25em;
    margin: 0;
    line-height: var(--line-height-tight);
}

/* ----------------------------------------------------------
   Alerts
---------------------------------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    border: 1px solid transparent;
    margin-top: var(--space-4);
}

.alert-icon {
    font-size: var(--font-size-base);
    flex-shrink: 0;
    margin-top: 1px;
}

.alert-warning {
    background-color: var(--color-warning-muted);
    border-color: rgba(251, 191, 36, 0.3);
    color: var(--color-warning);
}

.alert-danger {
    background-color: var(--color-danger-muted);
    border-color: rgba(248, 113, 113, 0.3);
    color: var(--color-danger);
}

.alert-success {
    background-color: var(--color-primary-muted);
    border-color: rgba(74, 222, 128, 0.3);
    color: var(--color-primary);
}

/* ----------------------------------------------------------
   Metric Cards
---------------------------------------------------------- */
.metric-card {
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: border-color var(--transition-fast);
}

.metric-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.metric-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Remaining metric — colored based on positive/negative */
.metric-card-remaining .metric-value {
    color: var(--color-primary);
}

.metric-card-remaining .metric-value.value-negative {
    color: var(--color-danger);
}

/* ----------------------------------------------------------
   Expense Form
---------------------------------------------------------- */
.expense-form-wrapper {
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.expense-form-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ----------------------------------------------------------
   Expense List Items
---------------------------------------------------------- */
.expense-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.expense-item:hover {
    border-color: var(--color-text-subtle);
    background-color: var(--color-surface-hover);
}

.expense-item.is-editing {
    border-color: var(--color-primary);
    background-color: var(--color-primary-muted);
}

/* Color dot indicating category */
.expense-category-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

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

.expense-item-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.expense-item-category {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

.expense-item-amount {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.expense-item-actions {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   Empty States
---------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.empty-state-icon {
    font-size: 2.5rem;
    opacity: 0.4;
    display: block;
}

.empty-state-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    margin: 0;
}

.empty-state-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-subtle);
    margin: 0;
    max-width: 32ch;
}

/* ----------------------------------------------------------
   Visualization — Donut Chart
---------------------------------------------------------- */
.viz-chart-wrapper {
    position: relative;
    width: 100%;
    max-width: 220px;
    margin-inline: auto;
}

.donut-chart {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Donut center label overlay */
.donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.donut-center-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.donut-center-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* ----------------------------------------------------------
   Visualization — Category Legend
---------------------------------------------------------- */
.category-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.category-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.category-item:hover {
    background-color: var(--color-surface-hover);
}

.category-color-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

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

.category-item-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.category-item-amount {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.category-item-pct {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 3.5ch;
    text-align: right;
}

/* ----------------------------------------------------------
   Footer
---------------------------------------------------------- */
.footer-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
    text-align: center;
    margin: 0;
}

/* ----------------------------------------------------------
   Focus styles (global accessible default)
---------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* ----------------------------------------------------------
   Transitions — page load (avoid flash)
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}