:root{
  --navy:#16273B; --ink:#16273B; --muted:#64748B;
  --bg:#EDF1F7; --card:#FFFFFF; --border:#DCE3EC; --line:#EEF2F7;
  --blue:#2D6CB4; --blue-dk:#245A98; --blue-tint:#EAF2FB;
  --green:#1E9E5A; --green-tint:#E4F7EE;
  --teal:#0F8C74; --teal-dk:#0B6E5B;
  --amber:#E08A1E; --amber-tint:#FDF1DF;
  --red:#D64534; --red-tint:#FCE9E6;
  --shadow:0 1px 2px rgba(16,32,55,.06), 0 2px 6px rgba(16,32,55,.06);
  --shadow-lg:0 6px 24px rgba(16,32,55,.12);
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); min-height:100vh; color:var(--ink); -webkit-font-smoothing:antialiased; }

/* ---- nav ---- */
.appnav { background:var(--navy); display:flex; align-items:center; gap:2px; padding:0 14px; flex-wrap:wrap; box-shadow:0 2px 10px rgba(16,32,55,.18); position:sticky; top:0; z-index:50; }
.appnav .brand { display:flex; align-items:center; gap:9px; color:#fff; font-weight:800; font-size:18px; padding:9px 14px 9px 4px; margin-right:8px; letter-spacing:-0.01em; }
.appnav .brand .logo-mark { height:34px; width:34px; display:block; color:#fff; flex:none; }
.appnav .brand .brand-name { color:#fff; }
.appnav a { color:rgba(255,255,255,.7); text-decoration:none; font-size:13.5px; font-weight:600; padding:17px 14px; border-bottom:3px solid transparent; white-space:nowrap; transition:color .15s; }
.appnav a:hover { color:#fff; }
.appnav a.active { color:#fff; border-bottom-color:#5AA0E6; }
.appnav .spacer { flex:1; }
.appnav .logout { color:rgba(255,255,255,.6); font-size:12.5px; cursor:pointer; padding:17px 10px; font-weight:600; }
.appnav .logout:hover { color:#fff; }
.appnav .whoami { color:rgba(255,255,255,.55); font-size:12px; font-weight:700; padding:17px 10px 17px 0; white-space:nowrap; letter-spacing:.2px; }
@media print { .appnav { display:none !important; } }

/* Role-gated UI (the backend enforces every rule regardless — these just avoid showing
   controls/data a user can't use).
     .admin-only  → full admins only (e.g. managing user accounts)
     .manage-only → admins + managers ("everything except users": delete, import, edit receipts…)
     .cost-only   → hidden from standard users (they can't see costs) */
body:not([data-role="admin"]) .admin-only { display:none !important; }
body:not([data-role="admin"]):not([data-role="manager"]) .manage-only { display:none !important; }
body[data-role="standard"] .cost-only { display:none !important; }

.body { padding:26px 22px; max-width:1180px; margin:0 auto; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.page-head h1 { font-size:26px; font-weight:800; letter-spacing:-0.02em; }
.page-head .sub, .sub { font-size:13px; color:var(--muted); }
.page-head .sub { margin-top:4px; }

/* ---- buttons ---- */
.btn { padding:11px 18px; border:none; border-radius:10px; color:#fff; font-size:14px; font-weight:700; cursor:pointer; background:var(--blue); box-shadow:var(--shadow); transition:filter .15s, transform .02s; line-height:1; }
.btn:hover { filter:brightness(1.06); }
.btn:active { transform:translateY(1px); }
.btn.green { background:var(--green); } .btn.teal { background:var(--teal); }
.btn.danger { background:var(--red); }
.btn.ghost { background:#fff; color:var(--blue-dk); border:1.5px solid var(--border); box-shadow:none; }
.btn.ghost:hover { border-color:var(--blue); background:var(--blue-tint); filter:none; }
.btn:disabled { background:#AEB8C4; cursor:not-allowed; box-shadow:none; }
.btn.lg { padding:15px 22px; font-size:16px; border-radius:11px; }

/* ---- cards ---- */
.card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px 22px; margin-bottom:18px; box-shadow:var(--shadow); }
.card h2 { font-size:12px; font-weight:800; color:var(--blue-dk); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; }
.card h2 .count { color:var(--muted); font-weight:700; }

/* ---- forms ---- */
.field { margin-bottom:15px; }
label { display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.req { color:var(--red); }
input, select, textarea { width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px; font-size:15px; font-family:inherit; background:#fff; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(45,108,180,.15); }
input[readonly] { background:#F4F6FA; color:var(--muted); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media (max-width:600px){ .row2,.row3 { grid-template-columns:1fr; } }

.loading { text-align:center; padding:56px 20px; color:var(--muted); font-size:14px; }
.spinner { width:22px; height:22px; border:3px solid var(--blue); border-top-color:transparent; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; vertical-align:middle; margin-right:10px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---- tables ---- */
.tbl-wrap { overflow-x:auto; border-radius:12px; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { text-align:left; padding:12px 12px; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; border-bottom:2px solid var(--line); white-space:nowrap; background:#F7F9FC; }
th.sortable { cursor:pointer; user-select:none; } th.sortable:hover { color:var(--blue); }
td { padding:12px 12px; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:middle; }
td.num { text-align:right; font-variant-numeric:tabular-nums; }
tr:hover td { background:#FAFBFD; }

.cat-chip { font-size:11px; font-weight:700; color:#fff; padding:3px 9px; border-radius:20px; }
.st { font-size:11.5px; font-weight:800; padding:4px 11px; border-radius:20px; white-space:nowrap; letter-spacing:.2px; }
.st.ok  { background:var(--green-tint); color:#0B6B3A; }
.st.low { background:var(--amber-tint); color:#B4670C; }
.st.out { background:var(--red-tint); color:#B23120; }

.toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(8px); background:var(--navy); color:#fff; padding:13px 22px; border-radius:11px; font-size:14px; font-weight:600; box-shadow:var(--shadow-lg); opacity:0; transition:opacity .2s, transform .2s; z-index:200; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.err { background:var(--red); }

/* ---- modal ---- */
.modal-bg { position:fixed; inset:0; background:rgba(16,32,55,.5); display:none; align-items:flex-start; justify-content:center; z-index:150; overflow-y:auto; padding:44px 16px; backdrop-filter:blur(2px); }
.modal-bg.open { display:flex; }
.modal { background:#fff; border-radius:16px; padding:24px; width:100%; max-width:520px; box-shadow:var(--shadow-lg); }
.modal h3 { font-size:18px; font-weight:800; margin-bottom:16px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:10px; }
.modal-x { position:absolute; top:12px; right:14px; border:none; background:none; font-size:26px; line-height:1; color:#9AA6B5; cursor:pointer; padding:2px 8px; border-radius:8px; }
.modal-x:hover { color:#333; background:#EEF2F7; }

/* clear (X) button inside a search/filter field — shown only when there's something to clear */
.search-clear { position:absolute; right:9px; top:50%; transform:translateY(-50%); border:none; background:#E3E9F0; color:#5A6B7E; width:24px; height:24px; border-radius:50%; font-size:16px; line-height:1; cursor:pointer; padding:0; display:none; }
.search-clear:hover { background:#CBD5E2; color:#16273B; }
.search-clear.show { display:inline-flex; align-items:center; justify-content:center; }