/* hestiabudget — bespoke layer on top of Pico CSS.
   Pico styles native elements (tables, inputs, buttons, typography, forms);
   this file (1) recolours Pico to the app palette, (2) provides a compat shim so
   existing class names used across the HTMX partials (.card/.btn/.tag/.grid/.row)
   keep working, and (3) styles app-specific components Pico has no equivalent
   for (the counter pill, goal progress bars, the worksheet table, the expenses
   panel). Must load AFTER pico.min.css. */

/* ---- 1. Theme: map Pico tokens to the existing palette ---- */
:root {
	--pico-primary: #2563eb;
	--pico-primary-background: #2563eb;
	--pico-primary-hover: #1d4ed8;
	--pico-primary-hover-background: #1d4ed8;
	--pico-primary-inverse: #fff;
	--pico-primary-underline: rgba(37, 99, 235, .5);
	--pico-primary-focus: rgba(37, 99, 235, .25);

	--pico-background-color: #f7f7f8;
	--pico-color: #1a1a1a;
	--pico-muted-color: #6b7280;
	--pico-muted-border-color: #e2e3e6;

	--pico-card-background-color: #fff;
	--pico-card-border-color: #e2e3e6;
	--pico-card-box-shadow: 0 1px 2px rgba(16, 24, 40, .04);

	/* Pin a compact root font (Pico otherwise scales 100%→131% responsively,
	   16–21px) and tighten inputs back to the original .45/.5rem feel. */
	--pico-font-size: 93.75%;
	--pico-form-element-spacing-vertical: .4rem;
	--pico-form-element-spacing-horizontal: .55rem;

	/* App-owned tokens. Pico reassigns --pico-color / --pico-background-color on
	   <button> (to white text on blue), so any rule applied to a button must NOT
	   reference those — use these literals instead. */
	--app-fg: #1a1a1a;
	--app-bg: #f7f7f8;
	--app-card: #fff;
	--app-border: #e2e3e6;

	/* App-only semantic colours (not part of Pico's palette). */
	--green: #16a34a;
	--red: #dc2626;
}

/* ---- 2. Layout & typography ---- */
/* Pico's responsive .container caps at 510/700px; the worksheet needs ~880px. */
.container { max-width: 880px; }

h1 { margin: 0 0 1rem; }

/* h2 is used as a small uppercase section label throughout the app
   (Your Pots, Goals, History, Add pot), not as a large heading. */
h2 {
	margin: 1.5rem 0 .5rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--pico-muted-color);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Topbar */
.topbar {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: .75rem 1.25rem;
	background: var(--pico-card-background-color);
	border-bottom: 1px solid var(--pico-muted-border-color);
}
.topbar .brand { font-weight: 700; text-decoration: none; color: var(--app-fg); font-size: 1.1rem; }
.topbar .brand:hover { text-decoration: none; }
.topbar nav { display: flex; gap: 1rem; }
.topbar nav a { margin: 0; }

/* ---- 3. Compat shim: existing class names rendered with Pico tokens ---- */
/* Cards (also matches <article class="card">). */
.card, article.card {
	background: var(--pico-card-background-color);
	border: 1px solid var(--pico-card-border-color);
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
	box-shadow: var(--pico-card-box-shadow);
}

/* Buttons: bare .btn = neutral outline; .btn.primary = solid accent;
   .btn.danger = red text. Uses --app-* tokens because Pico reassigns
   --pico-color / --pico-background-color on <button> (white-on-blue). */
.btn {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: .4rem .75rem;
	font-size: .9rem;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	background: var(--app-card);
	color: var(--app-fg);
	border: 1px solid var(--app-border);
	border-radius: 6px;
	transition: background .12s ease, border-color .12s ease;
}
/* Beat Pico's `button[type=submit]{width:100%}` (0,1,1) on equal specificity
   via source order, so Save/×/Add in the expense panel stay inline. */
button.btn { width: auto; }
.btn, .btn:hover, .btn:focus { text-decoration: none; }
.btn:hover { background: var(--app-bg); color: var(--app-fg); }
.btn.primary {
	background: var(--pico-primary);
	border-color: var(--pico-primary);
	color: #fff;
}
.btn.primary:hover { background: var(--pico-primary-hover); border-color: var(--pico-primary-hover); }
.btn.danger { color: var(--red); }
.btn.danger:hover { background: #fef2f2; }

/* Pill tag. --app-bg (not --pico-background-color) so it stays grey even if a
   tag ever lands inside a <button> (Pico reassigns the pico var to blue there). */
.tag {
	display: inline-block;
	font-size: .75rem;
	background: var(--app-bg);
	border: 1px solid var(--pico-muted-border-color);
	padding: .05rem .4rem;
	border-radius: 999px;
}

/* Responsive label grid (Add pot form). */
.grid {
	display: grid;
	gap: .75rem 1rem;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin-bottom: .75rem;
}
/* Wrapping labels ("Name <input>") stay stacked + muted. */
label {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	margin-bottom: 0;
	font-size: .85rem;
	color: var(--pico-muted-color);
}

/* ---- 4. App-specific components ---- */
.muted { color: var(--pico-muted-color); }
.red { color: var(--red); }
.error { color: var(--red); }
ul { line-height: 1.9; }

/* Pot list rows */
.row {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .6rem .25rem;
	border-bottom: 1px solid var(--pico-muted-border-color);
}
.row.archived .name { text-decoration: line-through; color: var(--pico-muted-color); }
.row .row-main { flex: 1; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.row .name { font-weight: 600; }
.row .row-balance { font-variant-numeric: tabular-nums; min-width: 7ch; text-align: right; }
.row-actions { display: flex; gap: .35rem; }

/* Unallocated counter pill (green/red/blue by state). */
.counter {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	padding: .15rem .5rem;
	border-radius: 6px;
}
.counter-zero { background: #dcfce7; color: var(--green); }
.counter-neg  { background: #fee2e2; color: var(--red); }
.counter-pos  { background: #eef2ff; color: var(--pico-primary); }
.green-tag { background: #dcfce7; color: var(--green); border-color: #bbf7d0; }

/* Worksheet */
.ws-head { margin-bottom: 1rem; }
.month-picker { display: flex; align-items: center; gap: 1rem; }
.month-picker h1 { margin: 0; }
.income-line { display: flex; gap: 1.5rem; align-items: center; margin: .75rem 0 .25rem; flex-wrap: wrap; }
.counter-label { font-weight: 600; }

table.ws {
	width: 100%;
	border-collapse: collapse;
	background: var(--pico-card-background-color);
	border: 1px solid var(--pico-muted-border-color);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: var(--pico-spacing);
}
table.ws th, table.ws td { padding: .5rem .6rem; border-bottom: 1px solid var(--pico-muted-border-color); text-align: left; vertical-align: middle; }
table.ws tr:last-child td { border-bottom: none; }
table.ws th {
	background: #fafafa;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--pico-muted-color);
}
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num-input { width: 12ch; text-align: right; margin: 0; vertical-align: middle; }
/* `input.` prefix ties Pico's `input:not(...)` (0,1,1) and wins by source order. */
input.num-input { width: 12ch; margin: 0; }
.pot-col { width: 45%; }

/* The spent total is a <button> that expands the panel — render it as plain text.
   --app-fg because Pico forces --pico-color to white on <button>. */
.spent-toggle {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	width: auto;
	cursor: pointer;
	font: inherit;
	color: var(--app-fg);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.spent-toggle:hover { color: var(--pico-primary); }

.badge {
	display: inline-block;
	font-size: .7rem;
	background: var(--app-bg);
	border: 1px solid var(--pico-muted-border-color);
	color: var(--pico-muted-color);
	padding: .02rem .35rem;
	border-radius: 999px;
	vertical-align: middle;
	margin-left: .25rem;
}

/* Expandable per-pot expenses panel. */
.expenses-row > td { background: #fafbfc; padding: .5rem .6rem .75rem; }
.expenses-panel { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.expense-line { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin: 0; }
/* Drop Pico's input margin-bottom so amount/note inputs align with the buttons. */
.expense-line input { margin: 0; }
.expense-line .expense-amount { width: 12ch; }
.expense-line .expense-note { width: 18ch; text-align: left; }
.expense-divider { width: 100%; border: none; border-top: 1px dashed var(--pico-muted-border-color); margin: .35rem 0; }
.expense-empty { margin: 0; }
.expense-close { align-self: flex-start; font-size: .8rem; }
.table-wrap { overflow-x: auto; }

/* Archived pots section. */
.archived-section { margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed var(--pico-muted-border-color); opacity: .92; }
.archived-heading { color: var(--pico-muted-color); }

/* Dashboard */
.snapshot { margin-bottom: 1rem; }
.snap-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.snap-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat { display: flex; flex-direction: column; gap: .15rem; }
.stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pico-muted-color); }
.stat-val { font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.goals { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 1rem; }
.goal .goal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; }
.goal .goal-head .name { font-weight: 600; }
.goal-nums { font-size: .95rem; margin-bottom: .4rem; }
.bar { height: 8px; background: var(--pico-background-color); border: 1px solid var(--pico-muted-border-color); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--pico-primary); }
.bar-done { background: var(--green); }
.goal-eta { font-size: .82rem; margin-top: .4rem; }