/* ===== Barbershop Tracker — core stylesheet (no CDN dependency) ===== */
:root {
  --slate-900:#0f172a; --slate-800:#1e293b; --slate-600:#475569; --slate-500:#64748b; --slate-400:#94a3b8;
  --stone-50:#fafaf9; --stone-100:#f5f5f4; --stone-200:#e7e5e4; --stone-300:#d6d3d1;
  --amber-500:#f59e0b; --amber-600:#d97706;
  --emerald-50:#ecfdf5; --emerald-600:#059669; --emerald-700:#047857;
  --rose-50:#fff1f2; --rose-600:#e11d48; --rose-700:#be123c;
  --radius:14px;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--stone-100); color:var(--slate-800); min-height:100vh;
}
.hidden { display:none !important; }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; border:none; }
input, select { font-family:inherit; font-size:14px; }

/* ---- layout shell ---- */
.app-shell { display:flex; min-height:100vh; }
.sidebar {
  display:none; width:220px; background:var(--slate-900); flex-direction:column; padding:20px 12px; flex-shrink:0;
}
.sidebar .brand { display:flex; align-items:center; gap:8px; color:#fff; font-weight:900; padding:6px 8px 22px; font-size:15px; }
.sidebar .brand .icon { color:var(--amber-500); }
.side-link { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:#cbd5e1; font-weight:600; font-size:14px; margin-bottom:4px; background:transparent; width:100%; text-align:left; }
.side-link.active { background:var(--amber-500); color:var(--slate-900); }
.side-link:hover:not(.active) { background:var(--slate-800); }
.side-link.signout { margin-top:20px; color:#94a3b8; }

.main-col { flex:1; min-width:0; }
.page-wrap { max-width:880px; margin:0 auto; padding:18px 16px 90px; }

.mobile-topbar { display:flex; align-items:center; gap:8px; background:var(--slate-900); color:#fff; padding:14px 16px; font-weight:900; }
.mobile-topbar .icon { color:var(--amber-500); }

.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--stone-200); display:flex; z-index:40; }
.bottom-nav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 0; color:var(--slate-400); font-size:10px; font-weight:600; }
.bottom-nav a.active { color:var(--amber-600); }

@media (min-width:900px) {
  .sidebar { display:flex; }
  .mobile-topbar, .bottom-nav, .fab-col { display:none !important; }
  .page-wrap { padding:28px 32px; max-width:900px; margin:0; }
}

/* ---- headings / text ---- */
h1.page-title { font-size:24px; font-weight:900; letter-spacing:-0.02em; color:var(--slate-900); margin:0 0 16px; }
h2.section-title { font-size:14px; font-weight:800; color:var(--slate-600); margin:0 0 10px; }
.muted { color:var(--slate-400); font-size:12px; }

/* ---- cards / stats ---- */
.card { background:#fff; border:1px solid var(--stone-200); border-radius:var(--radius); padding:16px; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.stat-card { background:#fff; border:1px solid var(--stone-200); border-radius:var(--radius); padding:14px; }
.stat-icon { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.stat-icon.emerald { background:var(--emerald-50); color:var(--emerald-700); }
.stat-icon.rose { background:var(--rose-50); color:var(--rose-700); }
.stat-icon.amber { background:#fffbeb; color:var(--amber-600); }
.stat-icon.slate { background:var(--stone-100); color:var(--slate-800); }
.stat-value { font-size:21px; font-weight:900; letter-spacing:-0.02em; color:var(--slate-900); }
.stat-label { font-size:12px; color:var(--slate-500); font-weight:600; }
.stat-delta { font-size:11px; font-weight:700; margin-top:4px; }
.stat-delta.up { color:var(--emerald-600); }
.stat-delta.down { color:var(--rose-600); }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border-radius:10px; font-weight:700; font-size:14px; transition:opacity .15s; width:100%; }
.btn:active { opacity:.85; }
.btn-dark { background:var(--slate-900); color:#fff; }
.btn-emerald { background:var(--emerald-600); color:#fff; }
.btn-rose { background:var(--rose-600); color:#fff; }
.btn-outline { background:#fff; color:var(--slate-600); border:1px solid var(--stone-200); }
.btn-ghost { background:var(--stone-100); color:var(--slate-600); }
.btn:disabled { background:var(--stone-300) !important; color:#fff; cursor:not-allowed; }
.btn-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.pill { padding:7px 13px; border-radius:999px; font-size:12px; font-weight:700; background:#fff; color:var(--slate-600); border:1px solid var(--stone-200); }
.pill.active { background:var(--slate-900); color:#fff; border-color:var(--slate-900); }
.pill.amber-active { background:var(--amber-500); color:var(--slate-900); border-color:var(--amber-500); }
.pill-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }

/* ---- forms ---- */
label.field-label { display:block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-500); margin-bottom:5px; }
.field { width:100%; border:1px solid var(--stone-300); border-radius:10px; padding:10px 12px; font-size:14px; margin-bottom:14px; background:#fff; }
.field:focus { outline:2px solid var(--amber-500); outline-offset:0; }
.field-lg { font-size:18px; font-weight:800; padding:12px; }
.field-row { display:flex; gap:8px; }
.field-row .field { margin-bottom:0; flex:1; }

/* ---- transaction rows ---- */
.tx-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.tx-card { flex:1; display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px dashed var(--stone-300); border-radius:10px; padding:10px 14px; min-width:0; }
.tx-left { display:flex; align-items:center; gap:10px; min-width:0; }
.tx-icon { width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tx-icon.emerald { background:var(--emerald-50); color:var(--emerald-700); }
.tx-icon.rose { background:var(--rose-50); color:var(--rose-700); }
.tx-text { min-width:0; }
.tx-title { font-size:14px; font-weight:700; color:var(--slate-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tx-sub { font-size:11px; color:var(--slate-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tx-amount { font-weight:800; font-size:14px; flex-shrink:0; margin-left:10px; }
.tx-amount.emerald { color:var(--emerald-700); }
.tx-amount.rose { color:var(--rose-700); }
.tx-actions { display:flex; gap:2px; flex-shrink:0; }
.icon-btn { width:30px; height:30px; border-radius:8px; background:transparent; color:var(--slate-400); display:flex; align-items:center; justify-content:center; }
.icon-btn:hover { color:var(--slate-700); background:var(--stone-100); }
.icon-btn.danger:hover { color:var(--rose-600); }
.date-group-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-400); margin:16px 0 7px; }
.empty-state { text-align:center; padding:36px 16px; font-size:13px; color:var(--slate-400); background:#fff; border:1px dashed var(--stone-300); border-radius:var(--radius); }

/* ---- modal ---- */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:flex-end; justify-content:center; z-index:50; }
.modal-box { background:#fff; width:100%; max-width:440px; border-radius:18px 18px 0 0; padding:20px; max-height:90vh; overflow-y:auto; }
@media (min-width:640px) { .modal-backdrop { align-items:center; } .modal-box { border-radius:18px; } }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-head h2 { font-size:17px; font-weight:900; margin:0; color:var(--slate-900); }

/* ---- toast ---- */
#toast { position:fixed; top:16px; left:50%; transform:translateX(-50%); background:var(--slate-900); color:#fff; font-size:13px; padding:9px 18px; border-radius:999px; z-index:70; box-shadow:0 6px 20px rgba(0,0,0,.2); }

/* ---- fab (mobile) ---- */
.fab-col { position:fixed; bottom:82px; right:16px; display:flex; flex-direction:column; gap:10px; z-index:40; }
.fab { width:52px; height:52px; border-radius:999px; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(0,0,0,.22); }
.fab.small { width:42px; height:42px; }
.fab.emerald { background:var(--emerald-600); }
.fab.rose { background:var(--rose-600); }

/* ---- goal bar ---- */
.goal-bar-track { width:100%; height:10px; background:var(--stone-100); border-radius:999px; overflow:hidden; }
.goal-bar-fill { height:100%; background:var(--amber-500); border-radius:999px; transition:width .3s; }
.goal-bar-fill.complete { background:var(--emerald-600); }

/* ---- auth screens ---- */
.auth-wrap { min-height:100vh; background:var(--slate-900); display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card { background:#fff; border-radius:20px; padding:28px 24px; width:100%; max-width:380px; }
.auth-brand { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.auth-brand .icon { color:var(--amber-600); }
.auth-brand h1 { font-size:19px; font-weight:900; color:var(--slate-900); margin:0; }
.auth-sub { color:var(--slate-500); font-size:13px; margin:0 0 20px; }
.auth-error { color:var(--rose-600); font-size:12px; margin:-6px 0 12px; }
.link-btn { background:none; color:var(--slate-400); font-size:12px; width:100%; padding:8px; }
.link-btn:hover { color:var(--slate-600); }

/* ---- pin/misc utility ---- */
.center-col { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; }
.spinner { width:28px; height:28px; border:3px solid var(--stone-300); border-top-color:var(--slate-500); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.confirm-box { background:var(--rose-50); border:1px solid #fecdd3; border-radius:var(--radius); padding:16px; text-align:center; margin-top:12px; }
.confirm-box p { font-size:13px; color:var(--rose-700); margin:8px 0 12px; }
.confirm-row { display:flex; gap:8px; }
.confirm-row .btn { flex:1; }