/* Invoicer — the WAPIN billing desk.
   Same design language as the invoice PDF: cream paper, white sheets, ink,
   a bronze rule, Fraunces for display, Space Mono for anything that is money. */

:root {
  --paper:   #F7F4EE;
  --surface: #FFFFFF;
  --ink:     #17140F;
  --muted:   #6B6558;
  --line:    #E8E2D6;
  --bronze:  #B08D57;
  --bronze-deep: #8F6E3E;
  --bronze-tint: #F3EBDD;
  --paid:    #3D7A50;
  --paid-tint: #E7F0E9;
  --overdue: #A8402F;
  --overdue-tint: #F6E6E1;
  --draft:   #8A6D1F;
  --accent:  var(--bronze-deep);          /* legacy alias */
  --accent-soft: var(--bronze-tint);      /* legacy alias */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 14.5px/1.55 var(--sans);
}
.wrap { max-width: 1020px; margin: 0 auto; padding: 0 18px; }
a { color: var(--bronze-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--bronze); outline-offset: 2px;
}

/* ---- top bar: white sheet closed by the bronze rule, like the summary band ---- */
.topbar { background: var(--surface); border-bottom: 2px solid var(--bronze);
  position: sticky; top: 0; z-index: 40; }
.topbar-in { display: flex; align-items: stretch; gap: 26px; min-height: 58px; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; align-self: center; gap: 9px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand { font: 700 19px/1 var(--serif); letter-spacing: 0.01em; }
.brand-sub { font: 700 9.5px/1 var(--sans); color: var(--bronze-deep);
  text-transform: uppercase; letter-spacing: 0.18em; }
.topbar nav { display: flex; gap: 2px; margin-left: auto; align-items: stretch; }
.topbar nav a { display: flex; align-items: center; padding: 0 13px; color: var(--muted);
  font-size: 13.5px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.topbar nav a:hover { text-decoration: none; color: var(--ink); }
.topbar nav a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--bronze); }

/* ---- headings & text ---- */
h1 { font: 600 27px/1.2 var(--serif); letter-spacing: 0.005em; margin: 30px 0 5px; }
.sub { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; }
.muted { color: var(--muted); font-size: 13px; }
.mono { font-family: var(--mono); }
.right { text-align: right; }

/* ---- cards: white sheets with the PDF's label style ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  padding: 20px; margin-bottom: 18px; }
.card > h2 { font: 700 11px var(--sans); color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.13em; margin: 0 0 14px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; }
.card h2 .count { font: 700 11px var(--mono); color: var(--bronze-deep); letter-spacing: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }
.flash { background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--bronze); color: var(--ink);
  border-radius: 3px; padding: 11px 14px; margin: 16px 0; font-size: 13.5px; }

/* ---- tables: hairline rows, mono figures — the items table, everywhere ---- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; color: var(--muted); font: 700 10.5px var(--sans);
  text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 8px;
  border-bottom: 1px solid var(--ink); }
td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-family: var(--mono); font-size: 13px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
td.mono { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
tr.inactive td { color: var(--muted); }
.table-scroll { overflow-x: auto; }

/* ---- badges: print-stamp status marks ---- */
.badge { display: inline-block; font: 700 10px var(--sans); letter-spacing: 0.09em;
  padding: 3px 8px 2px; border-radius: 2px; text-transform: uppercase;
  border: 1px solid transparent; }
.badge-draft { background: var(--surface); color: var(--muted); border-color: var(--line); }
.badge-sent { background: var(--bronze-tint); color: var(--bronze-deep); }
.badge-paid { background: var(--paid-tint); color: var(--paid); }
.badge-void { background: #EDEBE6; color: var(--muted); text-decoration: line-through; }
.badge-overdue { background: var(--overdue-tint); color: var(--overdue); }

/* ---- forms ---- */
label { display: block; font-size: 12.5px; font-weight: 600; margin: 13px 0 4px;
  letter-spacing: 0.01em; }
label .hint { font-weight: 400; color: var(--muted); }
/* Design principle — SYMMETRY:
   every single-line control (text, email, password, number, date, select, file)
   is exactly the same height (42px) and splits its row equally with its
   neighbours. Only textareas may be taller, and only because they hold many
   lines. Any new field added to the app inherits this — do not override
   heights or widths per field. */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=file], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--surface); color: var(--ink); font: inherit;
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=file], select {
  height: 42px;
}
input[type=file] { padding: 8px; line-height: 24px; }
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B08D57' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
select::-ms-expand { display: none; }
input:focus, select:focus, textarea:focus { border-color: var(--bronze); outline: none;
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.14); }
textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
input[readonly] { background: var(--paper); font-family: var(--mono); font-size: 12.5px; }
.frow { display: flex; gap: 12px; align-items: stretch; }
.frow > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
/* symmetry: whatever the labels do, the controls line up and split the row equally */
.frow > div > input, .frow > div > select { margin-top: auto; }
.frow > div > textarea { flex: 1; min-height: 128px; }
.frow > .actions, .frow > div > .check, .frow > div > .checkline { margin-top: auto; }
@media (max-width: 620px) { .frow { flex-wrap: wrap; } .frow > div { flex-basis: 100%; } }
.checkline { display: flex; align-items: center; gap: 8px; margin: 13px 0 4px; font-size: 13.5px; }
.checkline input, .check input { width: auto; accent-color: var(--bronze-deep); }
.check { font-weight: 400; font-size: 13px; }

/* ---- buttons: ink primary, hairline ghost ---- */
button, .btn {
  display: inline-block; border: 1px solid var(--ink); border-radius: 2px; padding: 8px 16px;
  background: var(--ink); color: #fff; font: 600 13.5px/1.4 var(--sans);
  cursor: pointer; text-decoration: none;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
button:active, .btn:active { transform: translateY(1px); }
/* symmetry: a button sitting in a row of 42px fields is itself 42px */
.frow .actions button, .frow .actions .btn {
  height: 42px; display: inline-flex; align-items: center; }
.btn:hover, button:hover { background: var(--bronze-deep); border-color: var(--bronze-deep);
  text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--surface); border-color: var(--bronze); color: var(--ink); }
.btn-danger { background: transparent; color: var(--overdue); border: 1px solid var(--line); }
.btn-danger:hover { background: var(--overdue-tint); border-color: var(--overdue); }
.btn-sm { padding: 4px 11px; font-size: 12.5px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; align-items: center; }
form.inline { display: inline; }

/* ---- billing rail: the month strip on the dashboard ---- */
.rail { display: grid; grid-template-columns: repeat(31, 1fr); gap: 2px; margin-top: 6px; }
.rail .d { position: relative; text-align: center; font: 10px var(--mono);
  color: var(--muted); padding: 16px 0 3px; border-radius: 2px; }
.rail .d .dot { position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); }
.rail .d.today { background: var(--bronze-tint); color: var(--bronze-deep); font-weight: 700; }
@media (max-width: 720px) { .rail { grid-template-columns: repeat(16, 1fr); } .rail .d.h2 { display: none; } }

/* ---- stat strip: Fraunces figures, like AMOUNT DUE on the invoice ---- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  padding: 14px 16px 12px; }
.stat .k { font: 700 10.5px var(--sans); color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.12em; }
.stat .v { font: 600 24px/1.2 var(--serif); font-variant-numeric: tabular-nums; margin-top: 4px; }
@media (max-width: 600px) { .stats { grid-template-columns: 1fr; } }

/* ---- settings: grouped sections, jump nav, sticky save ---- */
.sect { margin: 34px 0 8px; scroll-margin-top: 108px; }
.sect-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sect-head h2 { font: 600 18px var(--serif); margin: 0; }
.sect-head .sect-note { color: var(--muted); font-size: 12.5px; }
.jumpnav { position: sticky; top: 58px; z-index: 30; background: var(--paper);
  display: flex; gap: 6px; padding: 10px 0 12px; margin: 0 0 4px; overflow-x: auto; }
.jumpnav a { flex: none; font: 600 11px var(--sans); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted); border: 1px solid var(--line);
  background: var(--surface); border-radius: 2px; padding: 5px 11px; }
.jumpnav a:hover { text-decoration: none; color: var(--ink); border-color: var(--bronze); }
.savebar { position: sticky; bottom: 0; z-index: 30; background: var(--surface);
  border-top: 2px solid var(--bronze); margin: 26px -18px 0; padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.savebar .muted { font-size: 12.5px; }
@media (min-width: 1056px) { .savebar { margin-left: 0; margin-right: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }

/* ---- login: the arrival moment — a lifted sheet under the bronze rule ---- */
.login-box { max-width: 400px; margin: 11vh auto 0; border-top: 2px solid var(--bronze);
  padding: 28px 30px 26px;
  box-shadow: 0 24px 60px -34px rgba(23, 20, 15, 0.45);
  animation: rise 0.34s ease-out; }
.login-box h1 { text-align: center; margin: 6px 0 2px; }
.login-brandline { text-align: center; font: 700 9.5px var(--sans); color: var(--bronze-deep);
  text-transform: uppercase; letter-spacing: 0.22em; margin: 0 0 6px; }
.login-foot { max-width: 400px; margin: 14px auto 0; text-align: center;
  color: var(--muted); font-size: 11.5px; letter-spacing: 0.02em; }
.login-foot .mono { font-size: 10.5px; }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* topbar user chip */
.whoami { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; }
.whoami .badge { font-size: 10px; }

/* ---------- tenant portal ---------- */
.pt-hero { display:flex; flex-wrap:wrap; gap:14px; margin:6px 0 18px; }
.pt-stat { flex:1 1 200px; border:1px solid var(--line); background:var(--paper); padding:16px 18px; }
.pt-stat .v { font-family:var(--serif); font-weight:700; font-size:26px; line-height:1.15; }
.pt-stat .l { font:600 10.5px var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.pt-stat.due { border-color:var(--overdue); background:var(--overdue-tint); }
.pt-stat.due .v { color:var(--overdue); }
.pt-stat.ok  { border-color:var(--paid); background:var(--paid-tint); }
.pt-stat.ok  .v { color:var(--paid); }
.pt-logo { display:block; margin:0 auto 10px; max-height:56px; max-width:200px; object-fit:contain; }
@media (max-width: 640px) {
  .pt-table table, .pt-table tr, .pt-table td { display:block; width:100%; }
  .pt-table thead, .pt-table th { display:none; }
  .pt-table tr { border:1px solid var(--line); padding:10px 12px; margin:0 0 10px; background:var(--paper); }
  .pt-table td { border:0; padding:2px 0; text-align:left !important; }
  .pt-table td.right { text-align:left !important; }
  .pt-table td[data-l]::before { content: attr(data-l); font:600 10px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:block; }
  .pt-table td .btn { width:100%; text-align:center; margin-top:6px; }
}

/* ---- refinement pass: the quiet details ---- */
::selection { background: var(--bronze-tint); color: var(--ink); }
.card table tbody tr:hover > td, .card table tr:not(:first-child):hover > td { background: #FBF8F2; }
.table-scroll { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }

@media print {
  .topbar, .jumpnav, .savebar, .actions, button, .btn, nav { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .card { border: 0; padding: 0 0 14px; margin: 0 0 10px; }
  a { color: var(--ink); }
}