/* The Pickin' Shed — store-LAN register UI (T-006).
   Plain CSS, no framework: big touch targets, high contrast, tablet-first.
   T-020 theme: IntuitiveTill dark tokens (shared with the public storefront). */

:root {
  /* IntuitiveTill palette — copy of general-pos / Restaurant POS tokens. */
  --bg: #0f1419;
  --surface: #1a2332;
  --surface-2: #212d3d;
  --text: #e8eef7;
  --muted: #8b9aaf;
  --accent: #3d9cfd;
  --accent-dim: rgba(61, 156, 253, 0.15);
  --green: #34d399;
  --green-dim: rgba(52, 211, 153, 0.15);
  --amber: #fbbf24;
  --amber-dim: rgba(251, 191, 36, 0.15);
  --qty-orange: #f97316;
  --qty-orange-ring: rgba(249, 115, 22, 0.45);
  --addon-gold: #f5d76e;
  --addon-gold-dim: rgba(245, 215, 110, 0.14);
  --purple: #a78bfa;
  --purple-dim: rgba(167, 139, 250, 0.15);
  --red: #f87171;
  --red-dim: rgba(248, 113, 113, 0.15);
  --border: rgba(255, 255, 255, 0.07);
  --radius: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Aliases so existing selectors keep working (T-020). */
  --ink: var(--text);
  --faint: #64748b;
  --paper: var(--bg);
  --card: var(--surface);
  --line: var(--border);
  --accent-dark: #2f86e0;      /* darker accent for hover/text-on-dark */
  --accent-hover: #2f86e0;
  --accent-ink: #ffffff;
  --rail: var(--surface);      /* top bar / modal head: spec surface, not a second navy */
  --danger: var(--red);
  --danger-strong: #f87171;
  --success: var(--green);
  --ok-bg: var(--green-dim);
  --ok-ink: var(--green);
  --err-bg: var(--red-dim);
  --err-ink: var(--red);
  --inactive-wash: rgba(139, 154, 175, 0.08);
  --overlay: rgba(2, 6, 12, 0.62);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25);
  --zebra: rgba(255, 255, 255, 0.025);
  --hover-row: rgba(61, 156, 253, 0.06);
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent; }

html { color-scheme: dark; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
}

::selection { background: var(--accent-dim); }

/* ---------- top bar (dark capsule rail) ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--rail);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}
/* Wordmark: store name in --text, accent word in --accent. */
.brand { font-weight: 700; font-size: 18px; color: var(--text); text-decoration: none; letter-spacing: 0.3px; }
.brand-accent { color: var(--accent); }
/* Pill nav inside a dark capsule; active tab = accent fill. */
.mainnav {
  display: flex;
  gap: 2px;
  flex: 1;
  flex-wrap: wrap;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  width: fit-content;
}
.mainnav a {
  color: var(--muted);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.mainnav a:hover { background: var(--surface-2); color: var(--text); }
.mainnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mainnav a.on { background: var(--accent); color: #ffffff; font-weight: 600; }
.userbox { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.who { white-space: nowrap; }

/* ---------- layout ---------- */
.content { max-width: 1080px; margin: 0 auto; padding: 32px 20px 60px; }
h1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; }
h1::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin: 10px 0 0;
  border-radius: 2px;
  background: var(--accent);
}
.error-card h1::after { margin-left: auto; margin-right: auto; }
h2 { font-size: 19px; margin: 0 0 10px; }
h3 { font-size: 16px; margin: 14px 0 8px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head h1 { margin: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 14px 0;
  box-shadow: var(--shadow-card);
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.card.tile { display: block; text-decoration: none; color: var(--text); transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.12s ease; }
.card.tile:hover { border-color: var(--accent); background: var(--surface-2); }
.card.tile:active { transform: scale(0.97); }
.card.tile h3 { margin: 0 0 4px; color: var(--accent); }
.card.tile p { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- forms ---------- */
label { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin: 10px 0; }
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  min-height: 40px;
  padding: 9px 11px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
textarea { min-height: 96px; resize: vertical; font-family: inherit; line-height: 1.4; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
label.check input { width: auto; margin: 0; accent-color: var(--accent); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.form-grid.narrow { max-width: 560px; }
.form-grid label { margin: 8px 0; }
.form-grid .full-span { grid-column: 1 / -1; }
.form-grid .span-2 { grid-column: span 2; }
/* Settings form: explicit 3-column grid, labels above controls */
.settings-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; align-items: start; }
.settings-form > label { display: flex; flex-direction: column; align-items: stretch; margin: 8px 0; }
.settings-form .full-span { grid-column: 1 / -1; }
@media (max-width: 760px) { .settings-form { grid-template-columns: 1fr; } }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.inlineform { display: inline-flex; gap: 10px; align-items: center; }
.inlineform label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.inlineform input, .inlineform select { width: auto; margin: 0; font-size: 14px; padding: 7px 9px; }
.toolbar { flex-wrap: wrap; }
.addform { border-left: 4px solid var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 9px 16px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #ffffff;
}
.btn-primary:active { transform: scale(0.98); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); border-color: var(--border); background: var(--surface-2); }
.btn-small { padding: 5px 11px; font-size: 13px; font-weight: 600; border-radius: 8px; }
.btn-lg { min-height: 40px; padding: 10px 18px; }
.btn-warn { background: var(--amber-dim); border-color: transparent; color: var(--amber); }
.btn-warn:hover { background: rgba(251, 191, 36, 0.24); border-color: transparent; color: var(--amber); }
.btn-danger { background: var(--red-dim); border-color: transparent; color: var(--red); }
.btn-danger:hover { background: rgba(248, 113, 113, 0.24); border-color: transparent; }
.btn-block { width: 100%; }
/* Pay CTA: green (checkout is the one place green means "money accepted"). */
.btn-pay {
  font-size: 20px;
  padding: 14px 40px;
  background: var(--green);
  border-color: var(--green);
  color: #06281c;
}
.btn-pay:hover { background: #2bbd88; border-color: #2bbd88; color: #06281c; }

/* ---------- alerts: compact page alert + corner toast (T-020) ---------- */
/* Flashes render as a small dark toast pinned bottom-right that fades
   after ~2s (see base.html). */
.alert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 14px;
  border-radius: 8px;
  margin: 10px 0;
  font-size: 14px;
  font-weight: 600;
}
.alert-ok { background: var(--green-dim); color: var(--green); border: 1px solid rgba(52, 211, 153, 0.3); }
.alert-ok::before { content: "✓"; font-weight: 700; }
.alert-error { background: var(--red-dim); color: var(--red); border: 1px solid rgba(248, 113, 113, 0.3); }
.alert-error::before { content: "▲"; font-size: 10px; }

.toast-wrap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  opacity: 1;
  transition: opacity 150ms ease;
}
.toast-error { color: var(--red); }
.toast::before { content: "✓"; font-weight: 700; }
.toast-error::before { content: "▲"; font-size: 10px; }
.toast.toast-hide { opacity: 0; }

/* ---------- tables (one chrome everywhere, T-020) ---------- */
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { padding: 14px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr { transition: background-color 0.12s ease; }
.table tbody tr:nth-child(even) { background: var(--zebra); }
.table tbody tr:hover { background: var(--hover-row); }
.table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--surface-2);
}
.table tfoot td { border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.table .small { font-size: 14px; }
.table td { font-size: 14px; }
.money-r { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.danger { color: var(--red); }
.thumb { height: 40px; border-radius: 6px; vertical-align: middle; margin-right: 6px; }
.thumb-lg { height: 96px; border: 1px solid var(--border); margin: 0; }
.actions { white-space: nowrap; }
.actions .btn { margin-right: 4px; margin-top: 2px; }
.lossform { display: inline-flex; gap: 4px; align-items: center; }
.lossform input { width: 110px; margin: 0; padding: 5px 8px; font-size: 13px; }

/* ---------- pills ---------- */
.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.pill-available { background: var(--green-dim); color: var(--green); border-color: transparent; }
.pill-sold { background: var(--amber-dim); color: var(--amber); border-color: transparent; }
.pill-lost { background: var(--red-dim); color: var(--red); border-color: transparent; }
.pill-removed { background: var(--surface-2); color: var(--muted); }
.pill-paid { background: var(--green-dim); color: var(--green); border-color: transparent; }
.pill-pending { background: var(--amber-dim); color: var(--amber); border-color: transparent; }
.pill-admin { background: var(--purple-dim); color: var(--purple); border-color: transparent; }
.pill-tenant { background: var(--green-dim); color: var(--green); border-color: transparent; }
.pill-cashier { background: var(--accent-dim); color: var(--accent); border-color: transparent; }

/* status dot + word: quieter than a lozenge, reads at a glance */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status-active { color: var(--green); }
.status-inactive { color: var(--faint); }

/* section / booth badge */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

/* ---------- tabs (pill tabs in a dark capsule) ---------- */
.tabs {
  display: flex;
  gap: 2px;
  margin: 16px 0 10px;
  flex-wrap: wrap;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  width: fit-content;
}
.tabs a {
  text-decoration: none;
  color: var(--muted);
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.tabs a:hover { color: var(--text); background: var(--surface-2); }
.tabs a.on { background: var(--accent); color: #ffffff; }
.tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.batchbar { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- checkout ---------- */
.scanbar { display: flex; gap: 10px; margin: 16px 0; }
.scanbar input {
  flex: 1;
  font-size: 24px;
  padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cart { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cart th, .cart td { background: var(--surface); }
tr.bizhead td {
  font-weight: 700;
  font-size: 15px;
  background: var(--surface-2);
  border-left: 6px solid var(--muted);
  padding: 8px 12px;
}
tr.groupsub td { background: var(--bg); }
.cart td.cart-actions { text-align: right; white-space: nowrap; }
.cart td.cart-actions form { margin: 0; }
.btn-remove { padding: 3px 9px; font-size: 12px; font-weight: 600; }
.btn-cancel { border: 1px solid var(--red); color: var(--red); background: transparent; margin-top: 8px; }
.btn-cancel:hover { background: var(--red-dim); border-color: var(--red); color: var(--red); }
.paybar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 16px 0 8px; }
.payopt { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; margin: 0; }
.payopt input { width: 20px; height: 20px; margin: 0; accent-color: var(--green); }
.totals { font-size: 18px; margin-left: auto; }
.receipt { border-left: 6px solid var(--green); }
.receipt h2 { color: var(--green); }
.receipt-totals { margin: 16px 0 6px; padding: 12px 14px; background: var(--bg); border-radius: var(--radius); }
.receipt-totals div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 16px; }
.receipt-totals .grand { font-size: 22px; font-weight: 800; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; }
.newsale { margin-top: 16px; }

/* business color palette (stable per tenant name) — hues lifted for dark bg */
.biz-0 { border-left-color: #f5a45c !important; }
.biz-1 { border-left-color: #3d9cfd !important; }
.biz-2 { border-left-color: #34d399 !important; }
.biz-3 { border-left-color: #a78bfa !important; }
.biz-4 { border-left-color: #f87171 !important; }
.biz-5 { border-left-color: #fbbf24 !important; }
.biz-6 { border-left-color: #2dd4bf !important; }
.biz-7 { border-left-color: #818cf8 !important; }
h3.biz-0, h3.biz-1, h3.biz-2, h3.biz-3, h3.biz-4, h3.biz-5, h3.biz-6, h3.biz-7 { border-left: 6px solid currentColor; }
h3.biz-0 { color: #f5a45c; } h3.biz-1 { color: #3d9cfd; } h3.biz-2 { color: #34d399; }
h3.biz-3 { color: #a78bfa; } h3.biz-4 { color: #f87171; } h3.biz-5 { color: #fbbf24; }
h3.biz-6 { color: #2dd4bf; } h3.biz-7 { color: #818cf8; }
td.biz-0, td.biz-1, td.biz-2, td.biz-3, td.biz-4, td.biz-5, td.biz-6, td.biz-7 { font-weight: 700; }
td.biz-0 { color: #f5a45c; } td.biz-1 { color: #3d9cfd; } td.biz-2 { color: #34d399; }
td.biz-3 { color: #a78bfa; } td.biz-4 { color: #f87171; } td.biz-5 { color: #fbbf24; }
td.biz-6 { color: #2dd4bf; } td.biz-7 { color: #818cf8; }
/* T-019: business color for non-td elements (tenant-name spans in record tables). */
.biz-name.biz-0 { color: #f5a45c; } .biz-name.biz-1 { color: #3d9cfd; } .biz-name.biz-2 { color: #34d399; }
.biz-name.biz-3 { color: #a78bfa; } .biz-name.biz-4 { color: #f87171; } .biz-name.biz-5 { color: #fbbf24; }
.biz-name.biz-6 { color: #2dd4bf; } .biz-name.biz-7 { color: #818cf8; }

/* ---------- login ---------- */
.login-wrap { display: flex; justify-content: center; padding: 8vh 16px 0; }
.login-card { width: 100%; max-width: 380px; }
.login-card .btn-primary { margin-top: 14px; }
.error-card { max-width: 520px; margin: 10vh auto; text-align: center; }

/* ---------- stats ---------- */
.statrow { display: flex; gap: 26px; flex-wrap: wrap; margin: 8px 0 12px; }
.stat span { display: block; font-size: 13px; color: var(--muted); }
.stat strong { font-size: 20px; font-variant-numeric: tabular-nums; }

/* ---------- record pages (T-019: Tenants first) ---------- */
.page-sub { margin: 2px 0 0; color: var(--muted); font-size: 15px; }

.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 18px 10px;
  box-shadow: var(--shadow-card);
  overflow: clip;
}
.data-table thead th {
  position: sticky;
  top: 45px; /* below the sticky top rail */
  z-index: 1;
  padding: 13px 10px 9px;
}
.data-table td { font-size: 14px; padding: 17px 10px; } /* ~54px rows */
.data-table tbody tr:hover { background: var(--hover-row); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Auto column sizing can overflow wide content cells (e.g. the Actions
   buttons) past their header. Fixed layout keeps every heading aligned
   with its column. Scoped to the tenants table for now. */
#tenants-table { table-layout: fixed; }
#tenants-table th:nth-child(1), #tenants-table td:nth-child(1) { width: 20%; }
#tenants-table th:nth-child(2), #tenants-table td:nth-child(2) { width: 8%; }
#tenants-table th:nth-child(3), #tenants-table td:nth-child(3) { width: 12%; }
#tenants-table th:nth-child(4), #tenants-table td:nth-child(4) { width: 14%; }
#tenants-table th:nth-child(5), #tenants-table td:nth-child(5) { width: 8%; }
#tenants-table th:nth-child(6), #tenants-table td:nth-child(6) { width: 8%; }
#tenants-table th:nth-child(7), #tenants-table td:nth-child(7) { width: 8%; }
#tenants-table th:nth-child(8), #tenants-table td:nth-child(8) { width: 11%; }
#tenants-table th:nth-child(9), #tenants-table td:nth-child(9) { width: 19%; }
.data-table .nowrap { white-space: nowrap; }
.data-table .tenant-name { font-weight: 600; font-size: 15px; white-space: nowrap; }
.data-table td.tenant-name.mono { font-size: 14px; }
.data-table tr:nth-child(even) { background: var(--zebra); }
.data-table tr.row-inactive { background: var(--inactive-wash); }
.data-table tr.row-inactive:hover { background: rgba(139, 154, 175, 0.12); }
.data-table tr.row-inactive .tenant-name { color: var(--muted); }
.data-table tr.row-inactive .biz-dot { opacity: 0.45; }
.data-table td a { color: var(--accent); }
.data-table td.cell-empty { color: var(--faint); }
.biz-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
  background: currentColor;
}
.pill-active { background: var(--green-dim); color: var(--green); border-color: transparent; }
.pill-inactive { background: var(--surface-2); color: var(--muted); }

/* buttons: outlined secondary + text-only danger (Remove must not equal Edit) */
.btn-secondary { background: transparent; border-color: var(--border); color: var(--text); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost-danger {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  padding-left: 8px;
  padding-right: 8px;
}
.btn-ghost-danger:hover { background: var(--red-dim); border-color: transparent; color: var(--red); }

/* modal editor */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 9vh 16px 16px;
  background: var(--overlay);
}
.modal-backdrop[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.modal {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.modal-sm { max-width: 420px; }
.modal-text { margin: 0; font-size: 15px; color: var(--text); }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--rail);
  border-bottom: 1px solid var(--border);
  border-radius: 13px 13px 0 0;
}
.modal-head h2 { margin: 0; font-size: 17px; color: var(--text); overflow-wrap: anywhere; }
.modal-close { background: transparent; border-color: transparent; color: var(--muted); }
.modal-close:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }
.modal-body { padding: 6px 20px 18px; }
.field-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.field { flex: 1 1 200px; }
.field-sm { flex: 0 1 150px; }
.field .req, label .req { color: var(--red); }
.field-check { margin-top: 26px; }
.hint { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.modal-foot { display: flex; gap: 10px; margin-top: 16px; }

/* stack table rows into cards on narrow screens */
@media (max-width: 900px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 10px 0;
    padding: 6px 12px;
    background: var(--surface);
  }
  .data-table tr.row-inactive { background: var(--inactive-wash); }
  .data-table td { border-bottom: none; padding: 4px 0; }
  .data-table td.num { text-align: left; }
  .data-table td::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 92px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .data-table td.tenant-name::before { content: none; }
}

@media (max-width: 640px) {
  .content { padding: 16px 14px 48px; }
}

/* ---------- reports (T-028 chrome) ---------- */
/* Screen: no layout changes — the eight report cards use the existing
   .card / .table-card / .data-table chrome and the IntuitiveTill tokens.
   Print: black-on-white sheet (below). */

.print-only { display: none; } /* filter summary line: appears only on paper */

@media print {
  @page { margin: 12mm; }

  /* Dark navy sheet → plain paper. */
  html { color-scheme: light; }
  body { background: #ffffff; color: #000000; font-size: 11pt; }

  /* App chrome and controls have no place on paper. */
  .topbar, .toast-wrap, .toolbar, .userbox, .mainnav, .no-print { display: none !important; }
  .print-only { display: block; }
  .content { max-width: none; margin: 0; padding: 0; }

  /* No shadows, tints, or dark surfaces anywhere on the sheet. */
  .card, .table-card, .table {
    background: #ffffff;
    border-color: #000000;
    box-shadow: none;
  }
  .card { border: 1px solid #999999; padding: 8px 10px; }
  .table th, .table td { border-bottom: 1px solid #cccccc; }
  .table thead th {
    background: #ffffff;
    color: #000000;
    position: static; /* the sticky rail offset is meaningless on paper */
    padding: 6px 8px;
  }
  .table tbody tr:nth-child(even),
  .table tbody tr:hover,
  .data-table tr:nth-child(even) { background: #ffffff; }
  .table tfoot td { border-top: 1px solid #000000; }

  /* Muted helper text still prints, just in plain gray. */
  .muted, .small, .table td { color: #333333; }
  .table td { font-size: 10pt; }
  h1, h2, h3, .brand { color: #000000; }
  h1::after { display: none; }
  a { color: #000000; text-decoration: none; }

  /* Status pills survive as outlined words; drop the dark fills. */
  .pill { background: #ffffff; color: #000000; border: 1px solid #000000; }

  /* Keep a report card's heading with its table; repeat headers. */
  .card, .table-card { break-inside: auto; }
  .card h2 { break-after: avoid; }
  tr { break-inside: avoid; }
  thead { display: table-header-group; }

  /* Narrow-screen row stacking is a screen affordance; print real tables. */
  .data-table { display: table; width: 100%; }
  .data-table thead { display: table-header-group; }
  .data-table tbody { display: table-row-group; }
  .data-table tfoot { display: table-footer-group; }
  .data-table tr { display: table-row; border: 0; border-radius: 0; margin: 0; padding: 0; background: #ffffff; }
  .data-table th, .data-table td { display: table-cell; width: auto; padding: 4px 8px; }
  .data-table td::before { content: none; }
}