/*
 * components.css — AccountEngine Semantic Component Classes
 *
 * Defines the official `.ae-*` component vocabulary.
 * Requires theme-variables.css (and app.css) to be loaded first.
 *
 * Naming convention:
 *   .ae-button-*   buttons
 *   .ae-input-*    input fields
 *   .ae-card-*     cards
 *   .ae-badge-*    badges/chips (already in app.css — extended here)
 *   .ae-list-*     list rows (transaction / settings row pattern)
 *   .ae-topbar-*   page top navigation bars
 *   .ae-empty      empty state placeholder
 */


/* ══════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════ */

/* Base — shared by all .ae-button-* variants */
.ae-button-primary,
.ae-button-secondary,
.ae-button-danger,
.ae-button-ghost,
.ae-button-success,
.ae-button-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.55rem 1.25rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background var(--transition-base), transform var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-body);
}

.ae-button-primary:active,
.ae-button-secondary:active,
.ae-button-danger:active,
.ae-button-ghost:active,
.ae-button-success:active,
.ae-button-warning:active {
    transform: scale(0.97);
}

.ae-button-primary:focus,
.ae-button-secondary:focus,
.ae-button-danger:focus,
.ae-button-ghost:focus,
.ae-button-success:focus,
.ae-button-warning:focus {
    outline: none;
}

.ae-button-primary:disabled,
.ae-button-secondary:disabled,
.ae-button-danger:disabled,
.ae-button-ghost:disabled,
.ae-button-success:disabled,
.ae-button-warning:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* Variants */
.ae-button-primary  { background: var(--color-primary);  color: var(--color-surface); }
.ae-button-primary:hover  { filter: brightness(1.08); }

.ae-button-secondary { background: var(--color-fill); color: var(--color-text-secondary); }
.ae-button-secondary:hover { background: var(--surface-2); }

.ae-button-danger   { background: var(--ui-danger); color: var(--color-surface); }
.ae-button-danger:hover   { filter: brightness(1.08); }

.ae-button-success  { background: var(--ui-success);  color: var(--color-surface); }
.ae-button-success:hover  { filter: brightness(1.08); }

.ae-button-warning  { background: var(--color-warning); color: var(--color-surface); }
.ae-button-warning:hover  { filter: brightness(1.08); }

.ae-button-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border: var(--hairline-width) solid var(--color-separator);
}
.ae-button-ghost:hover { background: var(--color-fill); color: var(--color-text-secondary); }

/* Size modifiers */
.ae-button-sm {
    padding: 0.35rem 0.9rem;
    font-size: var(--text-sm);
}

.ae-button-lg {
    padding: 0.75rem 1.75rem;
    font-size: var(--text-md);
}

/* Icon-only round button */
.ae-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--text-base);
}
.ae-icon-button:hover  { background: var(--color-fill); }
.ae-icon-button:active { background: var(--surface-2); transform: scale(0.94); }
.ae-icon-button:focus  { outline: none; }


/* ══════════════════════════════════════════════
   INPUT FIELDS
   ══════════════════════════════════════════════ */

/* Standard input — no border, filled background */
.ae-input {
    width: 100%;
    padding: 0.6rem 0.875rem;
    font-size: var(--text-base);
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-fill);
    color: var(--color-text);
    appearance: none;
    -webkit-appearance: none;
    transition: box-shadow var(--transition-fast), background var(--transition-fast);
    font-family: var(--font-body);
    line-height: 1.4;
}

.ae-input:focus {
    outline: none;
    background: var(--color-surface);
    box-shadow: 0 0 0 3px var(--accent-soft-12);
}

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

/* Bordered input — for modals and form cards */
.ae-input-bordered {
    width: 100%;
    padding: 0.6rem 0.875rem;
    font-size: var(--text-base);
    border: var(--hairline-width) solid var(--color-separator);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    font-family: var(--font-body);
    line-height: 1.4;
}

.ae-input-bordered:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--accent-soft-12);
}

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

/* Form label */
.ae-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.2px;
}

/* Form section wrapper */
.ae-form-group {
    margin-bottom: var(--space-5);
}

/* Inline row of inputs */
.ae-input-row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}
.ae-input-row > * { flex: 1; min-width: 0; }


/* ══════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════ */

/* Standard content card — transparent on mobile (global override in app.css) */
.ae-card-surface {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

/* Stat / KPI card — always has background */
.ae-kpi-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) calc(var(--space-5) + var(--space-1));
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ae-kpi-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ae-kpi-value {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ae-kpi-sub {
    font-size: 0.76rem;
    color: var(--color-text-muted);
}


/* ══════════════════════════════════════════════
   LIST ROWS (transaction / settings row pattern)
   ══════════════════════════════════════════════ */

/* Generic tappable row */
.ae-list-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    border-bottom: var(--hairline-width) solid var(--color-separator);
    transition: background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.ae-list-row:last-child { border-bottom: none; }
.ae-list-row:active { background: var(--surface-2); }

/* Leading icon area */
.ae-list-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Main text block */
.ae-list-meta {
    flex: 1;
    min-width: 0;
}

.ae-list-title {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ae-list-sub {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 1px;
}

/* Trailing value */
.ae-list-value {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    text-align: right;
}

.ae-list-value.income  { color: var(--amount-income); }
.ae-list-value.expense { color: var(--amount-expense); }


/* ══════════════════════════════════════════════
   SECTION HEADER
   ══════════════════════════════════════════════ */

.ae-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    margin-top: var(--space-3);
}

.ae-section-label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ══════════════════════════════════════════════
   AMOUNT DISPLAY
   ══════════════════════════════════════════════ */

.ae-amount-income {
    color: var(--amount-income);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ae-amount-expense {
    color: var(--amount-expense);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ae-amount-transfer {
    color: var(--color-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ae-amount-neutral {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}


/* ══════════════════════════════════════════════
   TOPBAR (Settings / Sub-page style)
   ══════════════════════════════════════════════ */

.ae-topbar {
    position: sticky;
    top: var(--topbar-sticky-top);
    z-index: 20;
    height: var(--topbar-height);
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: 0 var(--space-4);
    background: var(--nav-glass-bg);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: var(--hairline-width) solid var(--color-separator);
}

.ae-topbar-title {
    text-align: center;
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-text-strong);
}

.ae-topbar-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 1.05rem;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ae-topbar-btn:active { background: var(--accent-soft-12); }
.ae-topbar-btn:focus  { outline: none; }

.ae-topbar-spacer {
    width: 34px;
    height: 34px;
}


/* ══════════════════════════════════════════════
   SEGMENTED CONTROL (Tab chip row)
   ══════════════════════════════════════════════ */

.ae-seg {
    display: inline-flex;
    background: var(--color-fill);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
}

.ae-seg-btn {
    padding: 5px 12px;
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    font-size: 0.82rem;
    font-weight: 500;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.ae-seg-btn.active {
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}

.ae-seg-btn:focus { outline: none; }


/* ══════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════ */

.ae-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-base);
}

.ae-empty-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-3);
    opacity: 0.5;
}

.ae-empty-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.ae-empty-sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}


/* ══════════════════════════════════════════════
   BANNER / ALERT
   ══════════════════════════════════════════════ */

.ae-banner-info    { background: var(--accent-soft-12);  color: var(--color-primary); }
.ae-banner-warn    { background: var(--warning-soft-12); color: var(--color-warning); }
.ae-banner-success { background: var(--success-soft-10);  color: var(--ui-success); }
.ae-banner-danger  { background: var(--danger-soft-10); color: var(--ui-danger); }


/* ══════════════════════════════════════════════
   PROGRESS BAR
   ══════════════════════════════════════════════ */

.ae-progress-track {
    height: 6px;
    border-radius: 3px;
    background: var(--color-fill);
    overflow: hidden;
}

.ae-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    background: var(--color-primary);
}

.ae-progress-fill.safe    { background: var(--ui-success); }
.ae-progress-fill.caution { background: var(--color-warning); }
.ae-progress-fill.danger  { background: var(--ui-danger); }


/* ══════════════════════════════════════════════
   GLASS SURFACE HELPER
   ══════════════════════════════════════════════ */

.ae-glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}