/* Expense Manager — mostly reuses pos.css shell + admin.css tables. A few extras. */
.exp-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
.exp-card { background: var(--panel); border: 1px solid var(--panel-edge); border-radius: var(--radius); padding: 20px 24px; }
.exp-card .label { color: var(--muted); font-size: 0.85rem; }
.exp-card .amt { font-size: 1.7rem; font-weight: 800; margin-top: 4px; }
.exp-in .amt { color: #21a366; }
.exp-out .amt { color: var(--red); }
.exp-bal .amt { color: var(--text); }
:root[data-theme="dark"] .exp-in .amt { color: #7ee2a8; }

.cat-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.exp-bar-row { display: grid; grid-template-columns: 150px 1fr 90px; gap: 12px; align-items: center; margin-bottom: 10px; font-size: 0.9rem; }
.exp-bar-row .name { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-track { height: 10px; border-radius: 5px; background: var(--panel-edge); overflow: hidden; }
.exp-fill { height: 100%; border-radius: 5px; }
.exp-bar-row .val { text-align: right; font-weight: 600; }

.exp-landing-hero { text-align: center; padding: 90px 24px 60px; background: radial-gradient(ellipse 60% 50% at 50% 0%, var(--hero-tint), transparent 60%), var(--bg); }
.exp-landing-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 760px; margin: 0 auto 18px; }
.exp-landing-hero h1 em { font-style: normal; color: var(--red); }
.exp-landing-hero p { color: var(--muted); font-size: 1.15rem; max-width: 600px; margin: 0 auto 30px; }

.type-pill { font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.type-income { background: rgba(33,163,102,0.15); color: #178a4e; }
.type-expense { background: var(--red-soft); color: var(--red); }
:root[data-theme="dark"] .type-income { color: #7ee2a8; }
@media (max-width: 700px) { .exp-summary { grid-template-columns: 1fr; } .exp-bar-row { grid-template-columns: 110px 1fr 76px; } }