/* ── Reset & base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	--color-bg:          #f4f5f7;
	--color-surface:     #ffffff;
	--color-border:      rgba(0,0,0,0.09);
	--color-border-md:   rgba(0,0,0,0.17);
	--color-text:        #1a1a20;
	--color-text-muted:  #6b6b78;
	/* Blue is primary — you see 75% blue, so lean into it */
	--color-primary:     #2563eb;
	--color-primary-bg:  #eff6ff;
	/* Success = sky-blue/cyan — replaces green (you see 0% green) */
	--color-success:     #0284c7;
	--color-success-bg:  #e0f2fe;
	/* Cyan — used for "spare cash" / secondary positive */
	--color-cyan:        #0891b2;
	--color-cyan-bg:     #ecfeff;
	/* Purple — savings/investments, distinct from blue */
	--color-purple:      #7c3aed;
	--color-purple-bg:   #ede9fe;
	--color-warning:     #c2580a;
	--color-warning-bg:  #fff7ed;
	--color-danger:      #b91c1c;
	--color-danger-bg:   #fef2f2;
	--color-sidebar:     #18181f;
	--color-sidebar-txt: #c4c4cc;
	--color-sidebar-act: #ffffff;
	--radius-sm:  6px;
	--radius-md:  9px;
	--radius-lg:  14px;
	--sidebar-w:  224px;
	--topbar-h:   54px;
	font-size: 15px;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: var(--color-bg);
	color: var(--color-text);
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

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

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes countPop {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.04); }
	100% { transform: scale(1); }
}
@keyframes growBar {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
@keyframes pulse-border {
	0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
	50%       { box-shadow: 0 0 0 4px rgba(37,99,235,0.12); }
}

.animate-in {
	animation: fadeInUp 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
.count-pop {
	animation: countPop 0.3s ease;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar {
	position: fixed;
	top: 0; left: 0;
	width: var(--sidebar-w);
	height: 100vh;
	height: -webkit-fill-available;
	background: var(--color-sidebar);
	display: flex;
	flex-direction: column;
	z-index: 200;
	transition: transform 0.25s ease;
}

.sidebar__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 16px 14px;
	border-bottom: 0.5px solid rgba(255,255,255,0.08);
	flex-shrink: 0;
}

.sidebar__logo {
	width: 30px; height: 30px;
	background: var(--color-primary);
	border-radius: var(--radius-sm);
	display: flex; align-items: center; justify-content: center;
	font-size: 17px; font-weight: 700; color: #fff;
	flex-shrink: 0;
}

.sidebar__name {
	font-size: 15px; font-weight: 600;
	color: var(--color-sidebar-act);
	flex: 1;
}

.sidebar__close {
	display: none;
	background: none;
	border: none;
	color: var(--color-sidebar-txt);
	font-size: 16px;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
}

.sidebar__nav {
	flex: 1;
	list-style: none;
	padding: 8px 8px 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.sidebar__footer {
	padding: 8px;
	border-top: 0.5px solid rgba(255,255,255,0.08);
	padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.nav-link {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 10px;
	border-radius: var(--radius-sm);
	color: var(--color-sidebar-txt);
	font-size: 14px;
	text-decoration: none;
	transition: background 0.12s, color 0.12s;
}

.nav-link:hover { background: rgba(255,255,255,0.07); color: #fff; text-decoration: none; }
.nav-link--active { background: rgba(255,255,255,0.13); color: var(--color-sidebar-act); font-weight: 500; }
.nav-link--logout { color: rgba(255,255,255,0.4); }
.nav-link--logout:hover { color: #fff; }
.nav-link__icon { display: flex; align-items: center; justify-content: center; opacity: 0.7; width: 18px; flex-shrink: 0; }
.nav-link__icon svg { display: block; }

/* ── Mobile overlay ────────────────────────────────────────────────────── */
.nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 199;
}

.nav-overlay.active { display: block; }

/* ── Hamburger button ──────────────────────────────────────────────────── */
.hamburger {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 22px; height: 16px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin-right: 12px;
	flex-shrink: 0;
}

.hamburger span {
	display: block;
	height: 2px;
	background: var(--color-text);
	border-radius: 2px;
}

/* ── Layout ────────────────────────────────────────────────────────────── */
.main {
	margin-left: var(--sidebar-w);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.topbar {
	height: var(--topbar-h);
	background: var(--color-surface);
	border-bottom: 0.5px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	padding-left: max(20px, env(safe-area-inset-left));
	padding-right: max(20px, env(safe-area-inset-right));
	position: sticky;
	top: 0;
	z-index: 50;
}

.topbar__left { display: flex; align-items: center; }
.topbar__title { font-size: 17px; font-weight: 600; }
.topbar__month { font-size: 13px; color: var(--color-text-muted); }

.content {
	flex: 1;
	padding: 20px 24px 48px;
	padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 20px));
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
	background: var(--color-surface);
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow 0.2s, transform 0.2s;
}

.card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 16px;
	border-bottom: 0.5px solid var(--color-border);
}

.card__title { font-size: 14px; font-weight: 600; }

/* ── KPI bar ────────────────────────────────────────────────────────────── */
.kpi-bar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.kpi-card {
	background: var(--color-surface);
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 16px;
	display: flex;
	align-items: flex-start;
	gap: 13px;
	border-top: 3px solid transparent;
	transition: box-shadow 0.2s, transform 0.2s;
	cursor: default;
}

.kpi-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.07);
}

/* Income = primary blue (blue is your strongest perceived color at 75%) */
.kpi-card--income { border-top-color: var(--color-primary); }
/* Fixed = amber/orange (red at 50% + brightness contrast makes it distinct) */
.kpi-card--fixed  { border-top-color: var(--color-warning); }
/* Spare cash = cyan (blue-dominant, distinct from primary blue) */
.kpi-card--spare  { border-top-color: var(--color-cyan); }
.kpi-card--danger { border-top-color: var(--color-danger); }

.kpi-card__icon {
	width: 40px; height: 40px;
	border-radius: var(--radius-md);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}

.kpi-card--income .kpi-card__icon { background: var(--color-primary-bg); color: var(--color-primary); }
.kpi-card--fixed  .kpi-card__icon { background: var(--color-warning-bg); color: var(--color-warning); }
.kpi-card--spare  .kpi-card__icon { background: var(--color-cyan-bg);    color: var(--color-cyan); }
.kpi-card--danger .kpi-card__icon { background: var(--color-danger-bg);  color: var(--color-danger); }

.kpi-card__body { min-width: 0; flex: 1; }
.kpi-card__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 3px; }
.kpi-card__value { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.kpi-card__sub   { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }

.kpi-card--income .kpi-card__value { color: var(--color-primary); }
.kpi-card--spare  .kpi-card__value { color: var(--color-cyan); }
.kpi-card--danger .kpi-card__value { color: var(--color-danger); }

/* ── Metric cards ───────────────────────────────────────────────────────── */
.metric-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}

.mt-md { margin-top: 12px; }

.metric-card {
	background: var(--color-surface);
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	transition: box-shadow 0.18s, transform 0.18s;
}

.metric-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.metric-card__label { font-size: 11px; color: var(--color-text-muted); margin-bottom: 3px; }
.metric-card__value { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
/* income = blue (visible), not green */
.metric-card__value--income { color: var(--color-primary); }
.metric-card__value--danger { color: var(--color-danger); }

.metric-inline { font-size: 13px; color: var(--color-text-muted); }
.metric-inline strong { color: var(--color-text); }

/* ── Accounts section ───────────────────────────────────────────────────── */
.accounts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0;
}

.account-group {
	padding: 12px 16px;
	border-right: 0.5px solid var(--color-border);
	border-bottom: 0.5px solid var(--color-border);
}

.account-group:last-child { border-right: none; }

.account-group__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.account-group__label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
}

.account-group__total { font-size: 13px; font-weight: 600; }

.account-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0;
	border-bottom: 0.5px solid var(--color-border);
}

.account-row:last-child { border-bottom: none; }
.account-row__info { display: flex; flex-direction: column; }
.account-row__name { font-size: 13px; font-weight: 500; }
.account-row__inst { font-size: 11px; color: var(--color-text-muted); }
.account-row__balance { font-size: 14px; font-weight: 600; }

.accounts-footer {
	display: flex;
	gap: 6px 20px;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px 16px;
	background: var(--color-bg);
	font-size: 13px;
	color: var(--color-text-muted);
	border-top: 0.5px solid var(--color-border);
}

.accounts-footer strong { color: var(--color-text); font-weight: 600; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }

.table thead th {
	padding: 9px 14px;
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--color-bg);
	border-bottom: 0.5px solid var(--color-border);
}

.table tbody td {
	padding: 10px 14px;
	border-bottom: 0.5px solid var(--color-border);
	vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--color-bg); }
.table tbody tr.row--muted td { opacity: 0.5; }
.table-actions { display: flex; gap: 5px; justify-content: flex-end; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 13px;
	border: 0.5px solid var(--color-border-md);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.1s;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.btn:hover { background: var(--color-bg); text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn--primary:hover { background: #2557a0; }
.btn--danger  { background: var(--color-danger-bg); color: var(--color-danger); border-color: rgba(163,45,45,0.25); }
.btn--danger:hover { background: #f5c8c8; }
.btn--success { background: var(--color-success-bg); color: var(--color-success); border-color: rgba(2,132,199,0.25); }
.btn--success:hover { background: #bae6fd; }
.btn--sm { padding: 4px 10px; font-size: 12px; }
.btn--full { width: 100%; justify-content: center; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.form-group { display: flex; flex-direction: column; gap: 5px; min-width: 140px; flex: 1; }
.form-group--wide { flex: 2; min-width: 220px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }

.form-input {
	padding: 9px 11px;
	border: 0.5px solid var(--color-border-md);
	border-radius: var(--radius-sm);
	font-size: 16px; /* 16px prevents iOS zoom on focus */
	background: var(--color-surface);
	color: var(--color-text);
	transition: border-color 0.1s;
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
}

.form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(50,102,173,0.12); }
.form-input--color { padding: 3px 6px; height: 38px; cursor: pointer; }
textarea.form-input { resize: vertical; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.card form { padding: 14px 16px; }

/* ── Progress bars ───────────────────────────────────────────────────────── */
.progress-bar { height: 6px; border-radius: 4px; background: rgba(0,0,0,0.06); overflow: hidden; margin-top: 6px; }
.progress-bar__fill {
	height: 100%; border-radius: 4px;
	transform-origin: left;
	animation: growBar 0.9s cubic-bezier(0.22,1,0.36,1) both;
}
/* success = cyan/blue (replaces green — you see 0% green) */
.progress-bar__fill--success { background: var(--color-success); }
.progress-bar__fill--warning { background: var(--color-warning); }
.progress-bar__fill--danger  { background: var(--color-danger); }
.progress-bar__fill--neutral { background: var(--color-border-md); }

/* ── Category rows ───────────────────────────────────────────────────────── */
.category-list { padding: 8px 16px; }
.category-row { padding: 10px 0; border-bottom: 0.5px solid var(--color-border); }
.category-row:last-child { border-bottom: none; }
.category-row__meta { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; flex-wrap: wrap; }
.category-row__dot  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.category-row__label { font-size: 13px; font-weight: 500; flex: 1; }
.category-row__amounts { font-size: 12px; color: var(--color-text-muted); text-align: right; }
.category-row__spent { color: var(--color-text); font-weight: 500; }
.category-row__sep   { margin: 0 2px; }

/* Mark-paid button */
.btn--pay {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 600;
	background: var(--color-primary-bg);
	color: var(--color-primary);
	border: 0.5px solid rgba(37,99,235,0.25);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background 0.12s, transform 0.1s;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}
.btn--pay:hover { background: #dbeafe; text-decoration: none; }
.btn--pay:active { transform: scale(0.95); }

/* Paid confirmation badge */
.paid-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 600;
	background: var(--color-success-bg);
	color: var(--color-success);
	border-radius: var(--radius-sm);
	border: 0.5px solid rgba(2,132,199,0.2);
}

/* mark-paid inline form — no extra spacing */
.mark-paid-form { display: inline; margin: 0; padding: 0; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
	display: inline-block;
	padding: 2px 7px;
	border-radius: var(--radius-sm);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Color-blind safe badges — every badge pair is distinct by hue AND brightness */
.badge--fixed      { background: #eff6ff; color: #1d4ed8; }        /* blue */
.badge--flexible   { background: #ecfeff; color: #0e7490; }        /* cyan */
.badge--savings    { background: #ede9fe; color: #5b21b6; }        /* purple */
.badge--debt       { background: #fef2f2; color: #b91c1c; }        /* red */
.badge--car        { background: #fff7ed; color: #c2580a; }        /* orange */
.badge--chequing   { background: #eff6ff; color: #1d4ed8; }        /* blue */
.badge--investment { background: #ede9fe; color: #5b21b6; }        /* purple */
.badge--other      { background: #f4f5f7; color: #52525b; }        /* neutral */

/* Priority badges — ordered by visual weight: red > orange > blue > gray */
.badge--priority-critical { background: #fef2f2; color: #b91c1c; }
.badge--priority-high     { background: #fff7ed; color: #c2580a; }
.badge--priority-medium   { background: #eff6ff; color: #1d4ed8; }
.badge--priority-low      { background: #f4f5f7; color: #52525b; }
/* Status badges */
.badge--status-pending    { background: #fff7ed; color: #c2580a; }
.badge--status-scheduled  { background: #ecfeff; color: #0e7490; }        /* cyan — distinct from pending */
.badge--status-complete   { background: #eff6ff; color: #1d4ed8; }        /* blue (not green) */

/* ── Inline type selector (category rows) ───────────────────────────────── */
.type-select {
	-webkit-appearance: none;
	appearance: none;
	padding: 2px 20px 2px 7px;
	font-size: 10px;
	font-weight: 600;
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--radius-sm);
	border: 0.5px solid transparent;
	cursor: pointer;
	transition: opacity 0.12s;
	background-repeat: no-repeat;
	background-position: right 5px center;
	background-size: 9px 9px;
	/* chevron icon */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%236b6b78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.type-select:hover  { opacity: 0.8; }
.type-select:focus  { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* Match badge colors per type — chevron uses encoded color to match text */
.type-select--fixed    { background-color:#eff6ff; color:#1d4ed8; border-color:rgba(29,78,216,0.2);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.type-select--flexible { background-color:#ecfeff; color:#0e7490; border-color:rgba(14,116,144,0.2);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%230e7490' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.type-select--savings  { background-color:#ede9fe; color:#5b21b6; border-color:rgba(91,33,182,0.2);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%235b21b6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.type-select--debt     { background-color:#fef2f2; color:#b91c1c; border-color:rgba(185,28,28,0.2);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.type-select--car      { background-color:#fff7ed; color:#c2580a; border-color:rgba(194,88,10,0.2);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%23c2580a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }

.type-form { display: inline; margin: 0; }

/* ── Flash messages ──────────────────────────────────────────────────────── */
.flash {
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	margin-bottom: 16px;
	border: 0.5px solid transparent;
}
.flash--success { background: var(--color-success-bg); color: #075985; border-color: rgba(2,132,199,0.25); }
.flash--error   { background: var(--color-danger-bg);  color: #791F1F; border-color: rgba(163,45,45,0.25); }
.flash--warning { background: var(--color-warning-bg); color: #633806; border-color: rgba(186,117,23,0.25); }

/* ── Login page ──────────────────────────────────────────────────────────── */
body.login-page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: -webkit-fill-available;
	background: var(--color-bg);
	padding: 20px;
}

.login-card {
	background: var(--color-surface);
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 32px 28px;
	width: 100%;
	max-width: 360px;
}

.login-card__logo {
	width: 44px; height: 44px;
	background: var(--color-primary);
	border-radius: var(--radius-md);
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; font-weight: 700; color: #fff;
	margin-bottom: 14px;
}

.login-card__title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.login-card__sub   { font-size: 14px; color: var(--color-text-muted); margin-bottom: 22px; }
.login-card__locked { font-size: 14px; color: var(--color-danger); margin-top: 12px; }
.login-card .form-group { margin-bottom: 14px; }
.login-card .btn--primary { margin-top: 4px; }

/* ── Helpers ─────────────────────────────────────────────────────────────── */
.text-right   { text-align: right; }
.text-muted   { color: var(--color-text-muted); }
.text-danger  { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.mt-lg { margin-top: 18px; }
.mb-lg { margin-bottom: 18px; }
.empty-state { padding: 24px 16px; color: var(--color-text-muted); font-size: 14px; }
.page-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-badge { font-size: 13px; color: var(--color-primary); background: var(--color-primary-bg); padding: 3px 10px; border-radius: var(--radius-sm); }
.inline-form { display: inline; }
.category-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.colour-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 3px; border: 0.5px solid var(--color-border-md); vertical-align: middle; }

/* ── Charts ──────────────────────────────────────────────────────────────── */
.chart-grid {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 14px;
}
.chart-card { overflow: visible; }
.chart-card .apexcharts-canvas { margin: 0 auto; }

/* ── Account group hover ─────────────────────────────────────────────────── */
.account-row { transition: background 0.12s; }
.account-row:hover { background: var(--color-bg); }

/* ── Mobile visibility helpers ───────────────────────────────────────────── */
.hide-mobile { }
.show-mobile { display: none; }

/* ── Responsive — tablets ────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.metric-grid { grid-template-columns: repeat(3, 1fr); }
	.accounts-grid { grid-template-columns: repeat(2, 1fr); }
	.chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
	.kpi-bar { grid-template-columns: 1fr; gap: 8px; }
	.kpi-card { padding: 13px; }
	.kpi-card__value { font-size: 20px; }
}

/* ── Responsive — mobile ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
	/* Sidebar slides in/out */
	.sidebar { transform: translateX(-100%); }
	.sidebar.open { transform: translateX(0); }
	.sidebar__close { display: block; }

	/* Hamburger visible */
	.hamburger { display: flex; }

	/* Main fills full width */
	.main { margin-left: 0; }

	.topbar { padding: 0 14px; }
	.content { padding: 14px 12px 32px; padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 12px)); }

	.kpi-bar { grid-template-columns: 1fr; gap: 8px; }
	.kpi-card { padding: 12px; gap: 10px; }
	.kpi-card__icon { width: 32px; height: 32px; }
	.kpi-card__value { font-size: 18px; }
	.metric-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.metric-card__value { font-size: 17px; }

	.accounts-grid { grid-template-columns: 1fr; }
	.account-group { border-right: none; }

	.form-row { flex-direction: column; gap: 10px; }
	.form-group { min-width: unset; }
	.form-group--wide { min-width: unset; }

	.table { font-size: 13px; }
	.table thead th, .table tbody td { padding: 8px 10px; }
	.hide-mobile { display: none !important; }
	.show-mobile { display: block !important; }

	.table-actions { gap: 4px; }
	.btn--sm { padding: 5px 8px; font-size: 11px; }

	.card__header { padding: 11px 12px; }
	.card form { padding: 12px; }
	.category-list { padding: 6px 12px; }

	.accounts-footer { gap: 4px 14px; font-size: 12px; }
}