/* style.css — WISP Electrical brand, applied to the Budget PWA.
 * Source of truth: ~/claude/BRAND-GUIDELINES.md (Option E palette).
 * Bush green primary, brass accent (sparingly), paper cream surface.
 */

:root {
    /* Primary — bush green (logo, headings, links, nav, dark hero) */
    --bush-green:        #1e3a2f;
    --bush-green-light:  #2d5d4a;
    --bush-green-dark:   #0d1f17;

    /* Accent — brass. Use sparingly: CTA fills, single hairline accents,
     * key markers. Never on more than ~10% of any surface. */
    --brass:             #a16207;
    --brass-light:       #d4a55a;
    --brass-dark:        #854f0b;

    /* Surface — paper cream replaces white as the body background. */
    --paper:             #faf7f0;
    --cream-warm:        #e8e3d4;
    --true-white:        #ffffff;

    /* Grays */
    --gray-900:          #111827;
    --gray-700:          #374151;
    --gray-500:          #6b7280;
    --gray-300:          #c8cbd0;
    --gray-200:          #e2e4e8;

    /* Semantic mapping — use these in components, not the raw tokens. */
    --bg:                var(--paper);
    --surface:           var(--true-white);
    --text:              var(--gray-900);
    --text-muted:        var(--gray-700);
    --text-subtle:       var(--gray-500);
    --border:            var(--gray-200);
    --border-soft:       var(--cream-warm);
    --link:              var(--bush-green);
    --link-hover:        var(--bush-green-light);
    --primary:           var(--brass);
    --primary-hover:     var(--brass-dark);
    --primary-text:      var(--paper);

    /* States. Keep the error red firmly in "UI signal" territory — not a
     * brand colour. Soft cream-tinted background so it doesn't fight with
     * the rest of the page. Success rides on bush green. */
    --error:             #b91c1c;
    --error-bg:          #fdf2f0;
    --error-border:      #e7b8b3;
    --success:           var(--bush-green);
    --success-bg:        #f0f5f1;
    --success-border:    #b6d2bf;

    --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11';
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--bush-green);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
h1 { font-size: clamp(1.75rem, 5vw, 2.25rem); margin: 0 0 0.5rem; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.75rem; }
h3 { font-size: 1rem; line-height: 1.3; margin: 0 0 0.5rem; }

a       { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

.muted { color: var(--text-muted); }
.small { font-size: 0.875rem; }

/* Optional eyebrow / section label pattern from §4 of the brand doc. */
.eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bush-green);
}

/* === Topbar ============================================================ */

.topbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem 1rem;
    background: var(--bush-green-dark);
    color: var(--paper);
    border-bottom: 1px solid var(--bush-green);
}
.topbar strong {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--paper);
}
.topbar #who {
    color: rgba(250, 247, 240, 0.7);
    font-size: 0.85rem;
}
.topbar button {
    margin-left: auto;
    background: transparent;
    color: var(--paper);
    border: 1px solid rgba(212, 165, 90, 0.5);
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
}
.topbar button:hover { background: rgba(212, 165, 90, 0.15); }

.back-link {
    color: var(--paper);
    text-decoration: none;
    font-weight: 500;
    padding: 0.45rem 0.8rem;
    border: 1px solid rgba(212, 165, 90, 0.5);
    border-radius: var(--radius-sm);
    background: rgba(212, 165, 90, 0.08);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1;
    /* 44px min touch target per brand guidelines accessibility minimums */
    min-height: 38px;
}
.back-link:hover {
    color: var(--paper);
    background: rgba(212, 165, 90, 0.2);
    border-color: rgba(212, 165, 90, 0.7);
    text-decoration: none;
}

.site-picker {
    background: var(--bush-green);
    color: var(--paper);
    border: 1px solid rgba(212, 165, 90, 0.4);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    font: inherit;
    font-size: 0.9rem;
}

.container {
    max-width: 720px;
    margin: 1.25rem auto;
    padding: 0 1rem;
}

main section { margin: 1.25rem 0; }
main section h2 .muted { font-weight: 400; font-family: var(--font-body); }

/* === Cards / details =================================================== */

main details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
}
main details > summary {
    cursor: pointer;
    user-select: none;
    color: var(--text-muted);
    font-weight: 500;
    list-style: none;
}
main details > summary::-webkit-details-marker { display: none; }
main details > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.5rem;
    color: var(--brass);
    transition: transform 0.15s ease;
}
main details[open] > summary::before { transform: rotate(90deg); }
main details > summary:hover { color: var(--text); }

/* === Forms ============================================================= */

.stacked-form { max-width: 380px; margin-top: 0.85rem; }
.stacked-form label { display: block; margin-bottom: 0.85rem; }
.stacked-form label > span {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    font-weight: 500;
}
.stacked-form input,
.stacked-form select,
.stacked-form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    line-height: 1.4;
}
.stacked-form input::placeholder,
.stacked-form textarea::placeholder { color: var(--text-subtle); }
.stacked-form input:focus,
.stacked-form select:focus,
.stacked-form textarea:focus {
    outline: 2px solid var(--bush-green-light);
    outline-offset: 1px;
    border-color: var(--bush-green-light);
}
.stacked-form input[type='checkbox'] { width: auto; }

.stacked-form button {
    padding: 0.65rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    margin-right: 0.4rem;
}
.stacked-form button[type='submit'],
.stacked-form button.btn-primary {
    background: var(--brass);
    color: var(--paper);
    border-color: var(--brass);
}
.stacked-form button[type='submit']:hover,
.stacked-form button.btn-primary:hover {
    background: var(--brass-dark);
    border-color: var(--brass-dark);
}
.stacked-form button[type='button'] {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.stacked-form button[type='button']:hover { background: var(--cream-warm); }
.stacked-form button:disabled { opacity: 0.55; cursor: progress; }

/* === Auth (login.html) ================================================ */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    background: var(--bg);
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
}
.auth-card h1 { font-size: 1.5rem; margin: 0 0 0.25rem; }
.auth-card p  { margin: 0 0 1.25rem; color: var(--text-muted); }
.auth-card label { display: block; margin-bottom: 0.85rem; }
.auth-card label > span {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    font-weight: 500;
}
.auth-card input {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}
.auth-card input:focus {
    outline: 2px solid var(--bush-green-light);
    outline-offset: 1px;
    border-color: var(--bush-green-light);
}
.auth-card button {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--brass);
    color: var(--paper);
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.25rem;
    font: inherit;
    line-height: 1.4;
}
.auth-card button:hover { background: var(--brass-dark); }
.auth-card button:disabled { opacity: 0.6; cursor: progress; }
.auth-card .error { color: var(--error); margin-top: 0.85rem; }

/* === Dashboard summary tiles ========================================== */

.summary-totals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
}
.totals-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.tile-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
}
.tile-value {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bush-green);
}
.totals-tile.spend  .tile-value { color: var(--bush-green); }
.totals-tile.income .tile-value { color: var(--bush-green-light); }
.totals-tile.pending .tile-value { color: var(--brass); }

.summary-by-cat {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.summary-by-cat li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border);
}
.summary-by-cat li:last-child { border-bottom: 0; }
.summary-by-cat .cat-name  { font-weight: 500; }
.summary-by-cat .cat-count { font-variant-numeric: tabular-nums; }
.summary-by-cat .cat-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.summary-by-cat .sum-expense { color: var(--text); }
.summary-by-cat .sum-income  { color: var(--bush-green-light); }

/* === Accounts list ==================================================== */

#accounts-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
}
#accounts-list li {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    background: var(--surface);
}

/* === "→ Transactions" big link ======================================== */

.big-link {
    display: inline-block;
    color: var(--bush-green);
    text-decoration: none;
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-weight: 600;
}
.big-link:hover {
    background: var(--cream-warm);
    text-decoration: none;
    border-color: var(--bush-green-light);
}

/* === Transactions page ================================================= */

.txn-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.txn-list .date-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0.7rem 0.85rem 0.4rem;
    background: var(--cream-warm);
    border-bottom: 1px solid var(--border);
}
.txn-row { border-bottom: 1px solid var(--border); }
.txn-row:last-child { border-bottom: 0; }
.txn-row.is-void .merchant,
.txn-row.is-void .amount {
    text-decoration: line-through;
    opacity: 0.55;
}
.txn-row-btn {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--text);
    text-align: left;
    padding: 0.75rem 0.85rem;
    cursor: pointer;
    font: inherit;
    gap: 0.15rem 0.6rem;
}
.txn-row-btn:hover { background: var(--cream-warm); }
.txn-row-btn .merchant { font-weight: 600; }
.txn-row-btn .amount {
    font-family: var(--font-heading);
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 700;
}
.kind-expense  .amount { color: var(--text); }
.kind-income   .amount { color: var(--bush-green-light); }
.kind-transfer .amount,
.kind-internal_transfer .amount { color: var(--text-subtle); }
.kind-refund   .amount { color: var(--brass); }

.txn-row-btn .meta {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.txn-row-btn .cat {
    background: rgba(30, 58, 47, 0.08);
    border: 1px solid rgba(30, 58, 47, 0.25);
    border-radius: 999px;
    padding: 0 0.5rem;
    color: var(--bush-green);
    font-weight: 500;
}
.txn-row-btn .cat.unset {
    background: rgba(161, 98, 7, 0.1);
    border-color: rgba(161, 98, 7, 0.45);
    color: var(--brass-dark);
}
.txn-row-btn .acct { color: var(--text-muted); }

.txn-edit {
    background: var(--cream-warm);
    border-top: 1px solid var(--border);
    padding: 0.95rem;
}
.txn-edit label { display: block; margin-bottom: 0.6rem; }
.txn-edit label > span {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    font-weight: 500;
}
.txn-edit select,
.txn-edit input[type='text'] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}
.txn-edit select:focus,
.txn-edit input[type='text']:focus {
    outline: 2px solid var(--bush-green-light);
    outline-offset: 1px;
    border-color: var(--bush-green-light);
}
.txn-edit .checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.txn-edit .checkbox-row > span {
    margin: 0;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 400;
}
.txn-edit .edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.txn-edit button {
    padding: 0.55rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
}
.txn-edit button:hover { background: var(--cream-warm); }
.txn-edit .edit-save {
    background: var(--brass);
    color: var(--paper);
    border-color: var(--brass);
    font-weight: 600;
}
.txn-edit .edit-save:hover { background: var(--brass-dark); border-color: var(--brass-dark); }
.txn-edit .edit-void {
    color: var(--error);
    border-color: var(--error-border);
}
.txn-edit .edit-void:hover { background: var(--error-bg); }

.load-more {
    display: block;
    margin: 1rem auto;
    padding: 0.65rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--bush-green);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}
.load-more:hover {
    background: var(--cream-warm);
    border-color: var(--bush-green-light);
}

/* === Form messages (ok / err) ========================================= */

.form-msg {
    margin-top: 0.85rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    border: 1px solid transparent;
}
.form-msg.ok  { background: var(--success-bg); color: var(--bush-green); border-color: var(--success-border); }
.form-msg.err { background: var(--error-bg);   color: var(--error);      border-color: var(--error-border); }
.error        { color: var(--error); }

/* === Reconcile page =================================================== */

.recon-latest-list, .recon-history {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.recon-latest-list li, .recon-history li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.6rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
}
.recon-latest-list li:last-child, .recon-history li:last-child { border-bottom: 0; }

.recon-latest-list .acct-name { font-weight: 600; }
.recon-latest-list .acct-meta { grid-column: 2; text-align: right; }
.recon-latest-list .acct-meta.state-clean    { color: var(--bush-green-light); font-weight: 600; }
.recon-latest-list .acct-meta.state-variance { color: var(--brass-dark); font-weight: 600; }
.recon-latest-list .acct-meta.state-accepted { color: var(--text-muted); font-weight: 600; }

.recon-history li {
    grid-template-columns: auto 1fr auto auto;
    align-items: baseline;
    cursor: pointer;
}
.recon-history li:hover { background: var(--cream-warm); }
.recon-history .rec-date     { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.recon-history .rec-account  { font-weight: 500; }
.recon-history .rec-variance { font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-variance.state-clean    { color: var(--bush-green-light); }
.rec-variance.state-variance { color: var(--brass-dark); }
.rec-variance.state-reviewed { color: var(--text-muted); }
.rec-variance.state-accepted { color: var(--text-muted); }

.recon-result {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.rec-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.rec-tile .tile-value {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.rec-tile.state-clean .tile-value    { color: var(--bush-green-light); }
.rec-tile.state-variance .tile-value { color: var(--brass-dark); }
.rec-tile.state-accepted .tile-value { color: var(--text-muted); }

.rec-state-line {
    margin: 0.5rem 0 1rem;
    color: var(--text-muted);
    grid-column: 1 / -1;
}
.rec-state-line .state-clean    { color: var(--bush-green-light); font-weight: 600; }
.rec-state-line .state-variance { color: var(--brass-dark); font-weight: 600; }
.rec-state-line .state-reviewed { color: var(--text-muted); font-weight: 600; }
.rec-state-line .state-accepted { color: var(--text-muted); font-weight: 600; }

.findings-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.finding {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brass);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
}
.finding.resolution-confirmed,
.finding.resolution-rejected {
    border-left-color: var(--bush-green-light);
    opacity: 0.8;
}
.finding-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}
.finding-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: var(--cream-warm);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}
.finding-amount {
    font-weight: 600;
    margin: 0.25rem 0 0.5rem;
    font-variant-numeric: tabular-nums;
}
.finding-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.finding-actions button {
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
}
.finding-actions button:first-child {
    background: var(--brass);
    color: var(--paper);
    border-color: var(--brass);
    font-weight: 600;
}
.finding-actions button:first-child:hover {
    background: var(--brass-dark);
    border-color: var(--brass-dark);
}

.recon-actions {
    margin-top: 1rem;
}
.recon-actions button {
    padding: 0.65rem 1.1rem;
    border-radius: var(--radius-sm);
    background: var(--brass);
    color: var(--paper);
    border: 1px solid var(--brass);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}
.recon-actions button:hover {
    background: var(--brass-dark);
    border-color: var(--brass-dark);
}