:root {
  --bg: #f6f6f7;
  --panel: #ffffff;
  --ink: #17181c;
  --muted: #6b6f76;
  --line: #e0e1e5;
  --accent: #4f46e5;
  --ok-bg: #e6f6ec; --ok-ink: #14622f;
  --bad-bg: #fdeaea; --bad-ink: #8c1d1d;
  --warn-bg: #fdf4e3; --warn-ink: #7a5310;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121316; --panel: #1b1d22; --ink: #eceef2; --muted: #9aa0aa;
    --line: #2c2f36; --accent: #8b85f5;
    --ok-bg: #16301f; --ok-ink: #8fe3ac;
    --bad-bg: #331a1a; --bad-ink: #f2a2a2;
    --warn-bg: #322715; --warn-ink: #edc87e;
  }
}

* { 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;
}
main { max-width: 780px; margin: 0 auto; padding: 24px 16px 64px; }
/* Lists and tables carry more columns than a form and need the room. */
main.wide { max-width: 1180px; }
h1 { font-size: 22px; margin: 0 0 20px; }

.nav {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 16px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.nav .brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
/* Sized by height so the wordmark sits on the nav's baseline whatever its
   intrinsic resolution; width follows from the aspect ratio on the img tag. */
.nav .brand img { display: block; height: 34px; width: auto; }
/* The login card carries the only branding on that page, so the wordmark runs
   wider there than it does in the nav. Sized by width because the card, not
   the row height, is what constrains it. */
.login-mark { margin: 0 0 22px; }
.login-mark img { display: block; width: 190px; max-width: 100%; height: auto; margin: 0 auto; }
/* The wordmark is black on a transparent field, so it vanishes against the
   dark panel. Inverting paints it white and leaves the field alone — which
   only works because the field is transparent rather than white. */
@media (prefers-color-scheme: dark) {
  .nav .brand img, .login-mark img { filter: invert(1); }
}
.nav nav { display: flex; gap: 14px; margin-right: auto; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a.on, .nav a:hover { color: var(--ink); }
/* On a phone the brand, four links and logout don't fit one row — wrap
   onto a second line rather than squeezing or clipping either end. */
@media (max-width: 640px) {
  .nav { flex-wrap: wrap; row-gap: 10px; }
  .nav nav { order: 3; width: 100%; flex-wrap: wrap; gap: 12px 16px; margin-right: 0; }
  .nav form { margin-left: auto; }
  .nav a, .nav button.link { padding: 4px 0; }
}

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 20px; margin-bottom: 16px;
}
.card.narrow { max-width: 340px; margin: 12vh auto; }

fieldset { border: 0; padding: 0; margin: 0 0 24px; }
legend {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 0 0 10px;
}
label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
input, select, textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 7px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px;
}
textarea { resize: vertical; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

button {
  font: inherit; padding: 8px 16px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--bad-ink); border-color: var(--bad-ink); background: transparent; }
button.link {
  border: 0; background: none; color: var(--accent); padding: 0;
  text-decoration: underline;
}
.row-actions { display: flex; gap: 10px; align-items: center; }
.row-form .row-actions { margin-top: 8px; }

.total { font-size: 16px; margin: 4px 0 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.banner.ok { background: var(--ok-bg); color: var(--ok-ink); }
.banner.bad { background: var(--bad-bg); color: var(--bad-ink); }
.banner.warn { background: var(--warn-bg); color: var(--warn-ink); }

/* Wide list tables scroll horizontally on narrow screens instead of
   squeezing every column or blowing out the page width. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }
.table-wrap table { margin-bottom: 0; }
@media (max-width: 720px) {
  .table-wrap table { min-width: 640px; }
}

table { width: 100%; border-collapse: collapse; background: var(--panel);
        border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
/* Dates are meaningless broken across lines. */
td.date, th.date { white-space: nowrap; }
td.date .small { white-space: nowrap; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
td.actions { display: flex; gap: 10px; align-items: center; }

.pill { font-size: 12px; padding: 2px 8px; border-radius: 99px;
        white-space: nowrap; display: inline-block; }
.pill.sent { background: var(--ok-bg); color: var(--ok-ink); }
.pill.failed { background: var(--bad-bg); color: var(--bad-ink); }
.pill.draft { background: var(--warn-bg); color: var(--warn-ink); }
.pill.imported { background: var(--line); color: var(--muted); }

/* --- dashboard --- */
h2 { font-size: 15px; margin: 28px 0 12px; text-transform: uppercase;
     letter-spacing: .05em; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }
.stat { background: var(--panel); border: 1px solid var(--line);
        border-radius: 10px; padding: 14px 16px; }
.stat .label { display: block; font-size: 12px; color: var(--muted);
               text-transform: uppercase; letter-spacing: .05em; }
.stat strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.stat.alert strong { color: var(--bad-ink); }

.nav a.cta { margin-left: auto; color: var(--accent); font-weight: 550; }
.nav nav { margin-right: 0; }
tr.dim td { opacity: .5; }
td a { color: var(--accent); }

/* Lifecycle pills. Three vocabularies share this styling. */
.pill.confirmed, .pill.performed, .pill.paid { background: var(--ok-bg); color: var(--ok-ink); }
.pill.enquiry, .pill.contract_submitted, .pill.unpaid { background: var(--warn-bg); color: var(--warn-ink); }
.pill.cancelled, .pill.failed { background: var(--bad-bg); color: var(--bad-ink); }
.pill.none, .pill.imported, .pill.free, .pill.waived, .pill.payroll {
  background: var(--line); color: var(--muted); }

/* --- clients: one compact row each, so a long list stays scannable --- */
.client-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, 1.3fr)
    minmax(0, 1.3fr) minmax(0, .55fr) minmax(0, .9fr) auto;
  gap: 0 10px;
  align-items: end;
  padding: 12px 14px;
  margin-bottom: 8px;
}
/* min-width:0 lets a grid child shrink below its content, so a 77-character
   organisation name cannot force the row wider than the page. */
.client-row label { margin-bottom: 0; font-size: 11px; min-width: 0; }
.client-row input { padding: 6px 8px; font-size: 13px; }
.client-actions { display: flex; gap: 6px; }
.client-actions button { padding: 6px 12px; }
/* A missing email is the thing standing between a client and an invoice. */
.client-row.needs-email { border-left: 3px solid var(--warn-ink); }
.client-row.needs-email .f-email input::placeholder { color: var(--warn-ink); opacity: .8; }
@media (max-width: 720px) {
  .client-row { grid-template-columns: 1fr 1fr; }
  .client-row .f-addr { grid-column: 1 / -1; }
}

/* Required-field marker. */
abbr.req {
  color: var(--bad-ink);
  text-decoration: none;
  border: 0;
  font-weight: 700;
  margin-left: 1px;
}

/* Gig-prep marker: what needs loading into the car. */
.kit {
  display: inline-block; margin-top: 3px;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 4px;
  background: var(--warn-bg); color: var(--warn-ink);
}
label.check {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink); margin: 6px 0 12px;
}
label.check input[type="checkbox"] { width: auto; margin: 0; }
.kit + .kit { margin-left: 5px; }
.kit.warn { background: var(--bad-bg); color: var(--bad-ink); }

/* Compose screen: the email exactly as it will go out. */
.preview {
  margin: 0; padding: 14px 16px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; word-break: break-word; color: var(--ink);
  max-height: 340px; overflow-y: auto;
}
a.button {
  display: inline-block; font: inherit; padding: 8px 16px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  text-decoration: none; cursor: pointer;
}
a.button:hover { border-color: var(--accent); color: var(--accent); }