:root {
  --bg:#f7f6f3; --card:#fff; --ink:#1c1c1a; --muted:#6d6a63; --line:#e4e1da;
  --accent:#2f5d50; --warn:#b4541f; --ok:#2f6b3a;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 22px; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:650; text-decoration:none; color:var(--ink); }
nav a { margin-left:16px; text-decoration:none; color:var(--accent); }
nav a.muted { color:var(--muted); }
main { max-width:960px; margin:26px auto; padding:0 18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px; margin-bottom:18px; }
.login { max-width:340px; margin:12vh auto; }
h1 { font-size:22px; margin:0 0 4px; } h2 { font-size:15px; margin:20px 0 8px; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.muted { color:var(--muted); } .r { text-align:right; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); border-bottom:1px solid var(--line); padding:8px 10px; }
td { padding:10px; border-bottom:1px solid var(--line); }
tbody tr[onclick] { cursor:pointer; } tbody tr[onclick]:hover { background:#faf9f6; }
.summary { display:flex; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.stat { flex:1; min-width:160px; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:14px 16px; }
.stat span { display:block; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.stat strong { font-size:22px; font-family:ui-monospace,Menlo,monospace; }
.stat.overdue strong { color:var(--warn); } .stat.paid strong { color:var(--ok); }
.pill { font-size:12px; padding:3px 9px; border-radius:999px; border:1px solid var(--line); text-transform:capitalize; }
.pill.overdue { background:#fdf0e8; color:var(--warn); border-color:#f0d5c4; }
.pill.paid { background:#eef6ef; color:var(--ok); border-color:#cfe4d3; }
.pill.sent { background:#eef2f7; color:#2f4f6b; border-color:#d3dfeb; }
label { display:block; margin:10px 0; font-size:13px; color:var(--muted); }
input, select, textarea { width:100%; padding:9px 10px; margin-top:4px; font-size:15px;
  border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); font-family:inherit; }
small { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
button, .button { display:inline-block; margin-top:12px; padding:9px 16px; font-size:14px;
  border:0; border-radius:7px; background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; }
button.ghost, .ghost { background:transparent; color:var(--accent); border:1px solid var(--line); }
button.danger { background:transparent; color:var(--warn); border:1px solid #f0d5c4; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 16px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:720px){ .two { grid-template-columns:1fr; } }
.head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.right { text-align:right; } .big { font-size:26px; }
.actions { display:flex; gap:10px; align-items:center; margin-top:16px; flex-wrap:wrap; }
.actions form { display:flex; gap:8px; align-items:center; margin:0; }
.actions select { width:auto; margin:0; }
.flash { background:#eef6ef; border:1px solid #cfe4d3; padding:10px 14px; border-radius:8px; margin-bottom:14px; }
.error { background:#fdf0e8; border:1px solid #f0d5c4; color:var(--warn); padding:10px 14px; border-radius:8px; }
.client { padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.items input { margin:0; }
.empty { text-align:center; color:var(--muted); }

/* ── Mobile ────────────────────────────────────────────────────────────────
   A six-column table does not survive a phone: at 390px the description wraps
   to five lines and the money columns collapse to nothing. Below 640px the
   tables stop being tables and become one card per row, each cell carrying its
   own label, which reads properly at any width. */
@media (max-width: 640px) {
  main { margin:16px auto; padding:0 12px; }
  header { padding:12px 14px; }
  header nav { width:100%; margin-top:8px; display:flex; flex-wrap:wrap; gap:14px; }
  header nav a { margin-left:0; }

  .summary { gap:10px; }
  .stat { min-width:calc(50% - 5px); padding:12px; }
  .stat strong { font-size:19px; }

  .card { padding:16px; }
  .head { flex-direction:column; align-items:flex-start; gap:10px; }
  .right { text-align:left; display:flex; align-items:center; gap:12px; }
  .big { font-size:24px; }

  table.list, table.list tbody, table.list tr, table.list td { display:block; width:100%; }
  table.list thead { display:none; }
  table.list tr { border:1px solid var(--line); border-radius:10px; padding:6px 12px;
    margin-bottom:10px; background:var(--card); }
  table.list td { border:0; padding:7px 0; display:flex; justify-content:space-between;
    align-items:center; gap:14px; text-align:left !important; }
  table.list td + td { border-top:1px solid var(--line); }
  table.list td::before { content:attr(data-label); color:var(--muted); font-size:12px;
    text-transform:uppercase; letter-spacing:.04em; flex:none; }
  table.list td.num { font-weight:650; font-size:16px; }

  /* Item entry on /new keeps its columns but needs room to breathe. */
  .items td { display:block; padding:4px 0; }
  .items thead { display:none; }
  .items tr { display:block; border:1px solid var(--line); border-radius:10px;
    padding:10px 12px; margin-bottom:10px; }

  .actions { flex-direction:column; align-items:stretch; }
  .actions form { width:100%; }
  .actions .button, .actions button { width:100%; text-align:center; }
  .actions select { flex:1; }
  input, select, textarea, button, .button { font-size:16px; }  /* 16px stops iOS zooming on focus */
}
@media (max-width: 640px) {
  /* /new hides the column headers, so each field states what it is. */
  .items td::before { content:attr(data-label); display:block; color:var(--muted);
    font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; }
  .items input { width:100%; }
}
.terms { background:#f3f6f4; border:1px solid var(--line); border-radius:8px; padding:9px 12px;
  font-size:13px; color:var(--muted); margin:8px 0 4px; }
.terms:empty { display:none; }
label.check { display:flex; align-items:center; gap:9px; color:var(--ink); font-size:14px; }
label.check input { width:auto; margin:0; }