/* ---------------------------------------------------------- */
/* Fonts                                                         */
/* ---------------------------------------------------------- */
@font-face {
  font-family: "Inter Variable";
  src: url("/static/fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono Variable";
  src: url("/static/fonts/JetBrainsMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------- */
/* Design tokens                                                 */
/* ---------------------------------------------------------- */
:root {
  --ink:          #0a0a0b;
  --ink-2:        #3a3a3a;
  --ink-3:        #6b6b6b;
  --paper:        #ffffff;
  --paper-2:      #f6f6f7;
  --paper-3:      #eceef2;
  --line:         #e6e6e8;
  --line-strong:  #c9c9cc;
  --accent:       #0a0a0b;
  --accent-soft:  rgba(10,10,11,0.06);
  --accent-softer:rgba(10,10,11,0.04);
  --focus:        rgba(10,10,11,0.18);
  --danger:       #b91c1c;
  --danger-bg:    #fef2f2;
  --danger-line:  #e8b8b8;

  --font-sans:    "Inter Variable", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius-sm:    4px;
  --radius:       6px;
  --radius-lg:    8px;

  --load-start:   #5fb36a;
  --load-mid:     #d9a64a;
  --load-end:     #d96a6a;

  color-scheme: light;
}

[data-theme="dark"] {
  --ink:          #f4f4f5;
  --ink-2:        #c7c9cf;
  --ink-3:        #8a8d94;
  --paper:        #0a0a0b;
  --paper-2:      #141416;
  --paper-3:      #1d1e21;
  --line:         #232428;
  --line-strong:  #35363b;
  --accent:       #f4f4f5;
  --accent-soft:  rgba(255,255,255,0.08);
  --accent-softer:rgba(255,255,255,0.04);
  --focus:        rgba(255,255,255,0.24);
  --danger:       #f87171;
  --danger-bg:    #2a1313;
  --danger-line:  #5c2020;

  color-scheme: dark;
}

/* ---------------------------------------------------------- */
/* Reset + base                                                  */
/* ---------------------------------------------------------- */
* { box-sizing: border-box; }
/* Scale the whole UI ~1.25x. zoom keeps px paddings/widths in proportion
   (a plain font-size bump would not). The invoice PDF has its own CSS and is
   unaffected. */
html { zoom: 1.25; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.mono { font-family: var(--font-mono); }

/* ---------------------------------------------------------- */
/* Layout                                                        */
/* ---------------------------------------------------------- */
.layout {
  display: flex;
  height: 100%;
}
.side {
  width: 220px;
  padding: 18px 10px 12px;
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border-right: 1px solid var(--line);
}
.brand { padding: 0 14px 18px; }
.brand img { height: 24px; width: auto; display: block; }
/* Dark ink wordmark — flip to light on the dark theme. */
[data-theme="dark"] .brand img { filter: invert(1); }
.side nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.side nav a {
  display: block;
  padding: 7px 12px;
  text-decoration: none;
  color: var(--ink-2);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 13.5px;
  transition: background 80ms ease, color 80ms ease;
}
.side nav a:hover, .side nav a:focus {
  background: var(--accent-soft);
  color: var(--ink);
  outline: none;
}
.side nav a.active {
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}

.side-footer {
  border-top: 1px solid var(--line);
  padding: 12px 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.side-footer .lbl {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 8px;
}
.theme-toggle {
  display: flex;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px;
}
.theme-toggle button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease;
}
.theme-toggle button:hover { color: var(--ink); }
.theme-toggle button.on {
  background: var(--paper-3);
  color: var(--ink);
  font-weight: 600;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}
.main-body {
  flex: 1;
  padding: 24px 32px;
  overflow: auto;
}

.main h1, .main h2 {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}
.main h1 { font-size: 20px; letter-spacing: -0.01em; }
.main h2 { font-size: 14px; margin-top: 6px; }

.page-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 16px;
}

.empty { color: var(--ink-3); margin: 32px 0; }
.muted { color: var(--ink-3); }
.footnote { font-size: 12px; margin-top: 24px; }
form.inline { display: inline; }
.form-actions { display: flex; gap: 8px; margin-top: 4px; }

.provider-picker {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin: 0 0 18px;
}
.provider-picker .pp-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.provider-picker .pp-lbl {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.provider-picker .pp-search {
  flex: 1;
  max-width: 360px;
}
.provider-picker select,
.provider-picker input[type="search"] {
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
}

/* ---------------------------------------------------------- */
/* Design language: list groups                                  */
/* ---------------------------------------------------------- */
/*
 * A "group" is a titled band of related rows: small uppercase
 * label, optional one-line description, and a flat list of rows
 * separated by 1px dividers. Linear-style — no card chrome, no
 * thead, hover + dots for state. Use .group + .row-list + .row
 * when the page is "a list of configured things"; use
 * .cfg-section + form when it's "edit one thing".
 */
.group {
  margin: 0 0 24px;
  max-width: 820px;
}
.group-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--line);
}
.group-hdr h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.group-sub {
  color: var(--ink-3);
  font-size: 12.5px;
  margin: 6px 0 4px;
}

.row-list { display: flex; flex-direction: column; }
/*
 * A row is a single horizontal strip in a row-list. When rendered as an
 * <a class="row">, the whole strip is clickable — the system-wide
 * pattern for "click a thing to open its detail page". Destructive
 * actions live on the detail page, not the row, so mis-clicks don't
 * delete. Render as <div class="row"> for read-only strips.
 */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.row:last-child { border-bottom: none; }
a.row { cursor: pointer; }
a.row:hover { background: var(--accent-softer); }
a.row:focus-visible {
  outline: none;
  background: var(--accent-softer);
  box-shadow: inset 0 0 0 2px var(--focus);
}
.row code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  flex-shrink: 0;
}
.row .desc {
  flex: 1;
  color: var(--ink-3);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Trailing chevron: "you can click this" without shouting it. */
.row .chev {
  flex-shrink: 0;
  color: var(--ink-3);
  opacity: 0.4;
  font-size: 14px;
  line-height: 1;
  transition: opacity 80ms ease, transform 120ms ease;
}
a.row:hover .chev,
a.row:focus-visible .chev {
  opacity: 1;
  transform: translateX(2px);
  color: var(--ink);
}

/*
 * Status dot: 8px circle, solid when on, outlined when off.
 * Kept monochromatic intentionally — the system uses accent
 * color for emphasis, not for categorical status.
 */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
}
.dot.on {
  background: var(--ink);
  border-color: var(--ink);
}

/* Button variants layered on top of the base .btn. */
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}
.btn.ghost:hover {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--ink);
}
.btn.icon {
  padding: 2px 6px;
  min-width: 22px;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.btn.danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: transparent;
}

/*
 * Detail-page actions footer: the home for destructive/irreversible
 * actions (Remove, Archive, Deactivate). Pulled away from the primary
 * form with a thin top divider so they read as "leaving this object",
 * not "saving changes to this object". Matches the system-wide pattern
 * of keeping deletes off list rows.
 */
.detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  max-width: 640px;
}

/* ---------------------------------------------------------- */
/* Flash banner                                                  */
/* ---------------------------------------------------------- */
.flash {
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--accent-softer);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

/* ---------------------------------------------------------- */
/* Breadcrumb bar — top strip across main content                */
/* ---------------------------------------------------------- */
.crumbs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  height: 48px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0;
}
.crumbs-trail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-3);
}
.crumbs-trail a {
  color: var(--ink-2);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: background 80ms ease, color 80ms ease;
}
.crumbs-trail a:hover {
  background: var(--accent-soft);
  color: var(--ink);
}
.crumbs-trail .sep {
  color: var(--ink-3);
  font-size: 11px;
  user-select: none;
}
.crumbs-trail .current {
  color: var(--ink);
  font-weight: 600;
  padding: 2px 6px;
}
.crumbs-action {
  display: flex;
  gap: 8px;
}

/* ---------------------------------------------------------- */
/* Buttons                                                       */
/* ---------------------------------------------------------- */
button, .btn {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 80ms ease, border-color 80ms ease;
}
button:hover, .btn:hover { background: var(--paper-2); border-color: var(--ink-3); }
button:focus-visible, .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}
.btn.sm { padding: 3px 8px; font-size: 12px; }
.btn.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn.primary:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}
.form-stack > .btn { align-self: flex-start; }

/* ---------------------------------------------------------- */
/* Tables                                                        */
/* ---------------------------------------------------------- */
.tbl {
  width: calc(100% + 64px);
  margin: 0 -32px 16px;
  border-collapse: collapse;
  background: var(--paper);
  font-variant-numeric: tabular-nums;
}
.tbl th, .tbl td {
  padding: 9px 14px;
  text-align: left;
  vertical-align: middle;
  border-right: 1px solid var(--line);
}
.tbl th:last-child, .tbl td:last-child { border-right: none; }
.tbl th:first-child, .tbl td:first-child { padding-left: 32px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 32px; }
.tbl thead th {
  background: var(--paper);
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10.5px;
  border-bottom: 1px solid var(--line);
}
.tbl tbody tr:hover { background: var(--accent-softer); }
.tbl td input, .tbl td select { width: 100%; }

/* Short IDs (from {{shortid}}) in first column: monospace */
.tbl tbody td:first-child {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

/* ---------------------------------------------------------- */
/* Forms                                                         */
/* ---------------------------------------------------------- */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
  background: var(--paper);
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.form-stack label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.form-stack input,
.form-stack select,
.form-stack textarea {
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 80ms, box-shadow 80ms;
}
.form-stack input:focus,
.form-stack select:focus,
.form-stack textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--focus);
}
.form-stack textarea { resize: vertical; min-height: 64px; font-family: var(--font-sans); }

.err {
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 16px;
  color: var(--danger);
  font-weight: 600;
}

/* Line-item table inside the order form */
.form-stack .tbl {
  width: 100%;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.form-stack .tbl th:first-child, .form-stack .tbl td:first-child { padding-left: 14px; }
.form-stack .tbl th:last-child, .form-stack .tbl td:last-child { padding-right: 14px; }
.form-stack .tbl thead th { background: var(--paper); }

/* ---------------------------------------------------------- */
/* Config pages — shared card style                              */
/* ---------------------------------------------------------- */
.cfg-section {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 14px;
  max-width: 680px;
  border: 1px solid var(--line);
}
.cfg-section h2 {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cfg-form { display: flex; flex-direction: column; gap: 16px; }
.cfg-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cfg-form select {
  font: inherit;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.cfg-form select:disabled { opacity: 1; background: var(--paper); color: var(--ink-3); }
.cfg-kv {
  display: flex;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  align-items: baseline;
}
.cfg-kv .k {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  width: 140px;
  flex-shrink: 0;
  color: var(--ink-3);
}
.cfg-kv .v {
  word-break: break-all;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

.page-hdr.sub { margin-top: 18px; margin-bottom: 8px; }
.page-hdr.sub h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin: 0; }
.meta { color: var(--ink-3); font-size: 13px; margin-top: -6px; margin-bottom: 16px; }
.chk { display: flex; gap: 8px; align-items: center; }

.loadbar {
  width: 140px;
  height: 6px;
  background: var(--paper-3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 3px;
}
.loadbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--load-start) 0%, var(--load-mid) 70%, var(--load-end) 100%);
  transition: width 200ms ease;
}
.tbl.stations td { vertical-align: middle; }

/* ---------------------------------------------------------- */
/* Bento grid (Config index)                                     */
/* ---------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 920px;
}
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; }
}
.bento-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 80ms ease, background 80ms ease;
  position: relative;
}
.bento-tile:hover {
  border-color: var(--line-strong);
  background: var(--paper-2);
}
.bento-tile h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bento-tile .summary {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}
.bento-tile .detail {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
}
.bento-tile .arrow {
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 14px;
  color: var(--ink-3);
  transition: color 80ms ease, transform 120ms ease;
}
.bento-tile:hover .arrow {
  color: var(--ink);
  transform: translateX(2px);
}

/* Solid-variant bento — no outline, painted tile. Used on Capacity. */
.bento-tile.solid {
  background: var(--paper-2);
  border: none;
  min-height: 110px;
  padding: 16px 18px;
}
.bento-tile.solid:hover {
  background: var(--paper-3);
}

/* Capacity page layout */
.day-projector {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  margin-bottom: 22px;
}
.day-projector .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  text-decoration: none;
  user-select: none;
  transition: background 80ms ease;
}
.day-projector .step:hover { background: var(--paper-3); }
.day-projector .val {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 54px;
  justify-content: center;
}
.day-projector .val .num {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.day-projector .val .unit {
  font-size: 12px;
  color: var(--ink-3);
}
.day-projector .lbl {
  font-size: 12px;
  color: var(--ink-3);
  margin-left: 6px;
}

.section-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 24px 0 10px;
}

/* Production capacity-bar tile */
.prod-tile {
  gap: 8px;
}
.prod-tile h3 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.cap-bar {
  position: relative;
  height: 12px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
}
.cap-bar-fill {
  height: 100%;
  background: var(--load-start);
  border-radius: 999px;
  transition: width 160ms ease;
}
.cap-bar-fill.hot { background: var(--load-mid); }
.cap-bar-fill.over { background: var(--load-end); }
.cap-bar-label {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.cap-bar-label .due { font-weight: 600; color: var(--ink); }
.cap-bar-label .cap { color: var(--ink-3); }
.cap-bar-label .sep { color: var(--ink-3); }
.cap-bar-label .unit { color: var(--ink-3); margin-left: 2px; }

.res-tile h3 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Tabs list + detail */
.tab-tile h3 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.tab-hdr {
  margin-bottom: 18px;
}
.tab-hdr h2 {
  margin: 0 0 4px 0;
  font-size: 20px;
}
.tab-section {
  margin-bottom: 28px;
}
.tab-section .tbl td, .tab-section .tbl th {
  vertical-align: middle;
}
.tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  background: var(--paper-3);
  border-radius: 999px;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.form-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.form-inline select,
.form-inline input[type="text"],
.form-inline input[type="number"],
.form-inline input[type="date"],
.form-inline input[type="datetime-local"] {
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
}
.order-group {
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.order-group-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.order-group-hdr .order-id {
  font-weight: 600;
}
.order-group-hdr .order-source {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--paper-3);
  border-radius: 999px;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Rota */
.week-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.tbl.rota {
  table-layout: fixed;
}
.tbl.rota th, .tbl.rota td {
  vertical-align: top;
  padding: 10px;
}
.rota-cell .shift {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 6px;
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}
.rota-add {
  margin-top: 6px;
  gap: 4px;
}
.rota-add select {
  min-width: 100px;
  font-size: 11px;
}
.btn.danger {
  color: var(--danger);
  border-color: var(--danger-line);
  background: var(--danger-bg);
}

/* Live suggestion popup (customer / product search, pickers). */
.search-box {
  position: relative;
}
.search-box .suggest-popup {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  min-width: 280px;
  max-width: 480px;
  z-index: 50;
  margin-top: 4px;
}
.search-box .suggest-popup:empty {
  display: none;
}
.suggest-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  max-height: 340px;
  overflow-y: auto;
}
.suggest-list li {
  margin: 0;
  padding: 0;
}
.suggest-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  gap: 2px;
}
.suggest-item:hover {
  background: var(--accent-soft);
}
.suggest-item strong {
  font-weight: 600;
  font-size: 13px;
}
.suggest-item .meta {
  font-size: 11.5px;
  color: var(--ink-3);
}

/* Combobox (search-box acting as a select replacement): the visible
   input is the label; hidden inputs carry the submitted value(s). */
.search-box.combo {
  display: inline-block;
  min-width: 280px;
}
.search-box.combo .combo-label {
  width: 100%;
}

/* ---------------------------------------------------------- */
/* Labmon additions (tabs / invoices / settings)            */
/* ---------------------------------------------------------- */
.tabbar { display: flex; gap: .4rem; margin-bottom: 1rem; }
.chip {
  padding: .25rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--ink-3);
  text-decoration: none;
}
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

td.num, th.num { text-align: right; white-space: nowrap; }
.tbl tfoot td { border-bottom: none; }
.tbl tfoot .total-row td { border-top: 2px solid var(--line-strong); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-2 > label { margin: 0; }

label.check { display: flex; align-items: center; gap: .5rem; flex-direction: row; }
label.check input { width: auto; }

.notice { padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; }
.notice.ok { background: var(--accent-soft); border: 1px solid var(--line); color: var(--ink); }

tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--accent-softer); }

/* In-app invoice preview — a paper card on screen. The print/PDF view uses
   its own self-contained invoice.css instead. */
.invoice-paper {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 760px;
}
.inv-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
  border-bottom: 2px solid var(--ink); padding-bottom: 1rem; margin-bottom: 1.25rem;
}
.inv-company h2 { margin: 0 0 .25rem; }
.inv-meta { text-align: right; }
.inv-meta h1 { margin: 0 0 .25rem; font-size: 1.7rem; letter-spacing: 2px; }
.inv-bill { margin-bottom: 1.25rem; }
.inv-bill .lbl { text-transform: uppercase; font-size: .7rem; letter-spacing: 1px; color: var(--ink-3); margin-bottom: .25rem; }
.inv-terms { margin-top: 1.5rem; color: var(--ink-2); }
.inv-footer { margin-top: .5rem; color: var(--ink-3); font-size: .85rem; border-top: 1px solid var(--line); padding-top: .75rem; }

/* --- Auth / integrations --- */
.notice.err { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger); }

/* Landing (static, public): split canvas — logo left, auth right. The panels
   (choose / log in / sign up / thanks) swap in place via a touch of JS. */
/* min-height: 100% (not 100vh): html has zoom 1.25, which scales vh units up
   and would overflow the frame. Chaining % off html, body { height: 100% }
   fills the viewport exactly under zoom. */
.landing { min-height: 100%; display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); }
.landing-left, .landing-right { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.landing-left { border-right: 1px solid var(--line); }
.landing-logo { width: min(62%, 380px); height: auto; display: block; }
/* Dark ink on transparent — flip to light on the dark canvas. */
[data-theme="dark"] .landing-logo { filter: invert(1); }
.landing-right { position: relative; }

.auth-panel { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: .75rem; animation: authIn 150ms ease; }
.auth-panel[hidden] { display: none; }
.auth-choice { gap: 1rem; }
.auth-panel .btn.lg { height: 48px; font-size: 1rem; }
/* Submit buttons (Log in / Register interest) sit at natural width, left-aligned
   with the field edge — not stretched across the panel like the inputs. */
.auth-panel button[type="submit"] { align-self: flex-start; }
.auth-panel input {
  height: 42px; padding: 0 .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font-size: .95rem; width: 100%;
}
.auth-panel input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }
.auth-back {
  align-self: flex-start; background: none; border: none; cursor: pointer;
  color: var(--ink-2); font-size: 1.25rem; line-height: 1; padding: .2rem .45rem;
  border-radius: var(--radius);
}
.auth-back:hover { color: var(--ink); background: var(--accent-soft); }
.auth-err { font-size: .85rem; color: var(--danger); }
.auth-thanks { font-size: 1rem; line-height: 1.55; color: var(--ink); margin: 0; }
.landing-legal { position: absolute; bottom: 1.3rem; font-size: .8rem; }
.landing-legal a { color: var(--ink-3); text-decoration: none; }
.landing-legal a:hover { color: var(--ink); }

@keyframes authIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .landing { grid-template-columns: 1fr; }
  .landing-left { border-right: none; border-bottom: 1px solid var(--line); }
}

/* Legal pages (static, public): plain readable column. */
.legal { max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.legal .back { display: inline-block; margin-bottom: 1.5rem; color: var(--ink-3); text-decoration: none; font-size: .85rem; }
.legal .back:hover { color: var(--ink); }
.legal h1 { font-size: 1.6rem; margin: 0 0 .25rem; color: var(--ink); }
.legal h2 { font-size: 1rem; margin: 1.6rem 0 .4rem; color: var(--ink); }
.legal p { color: var(--ink-2); line-height: 1.6; font-size: .92rem; margin: 0 0 .6rem; }
.legal p.muted { color: var(--ink-3); font-size: .85rem; }
.legal a { color: var(--accent); }

.side-account { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.side-account .acct { font-size: .8rem; color: var(--ink-3); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-account .acct:hover { color: var(--ink); }
.side-account .logout { font-size: .8rem; color: var(--ink-2); text-decoration: none; }
.side-account .logout:hover { color: var(--danger); }

.code-block, pre.code-block { background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; font-family: var(--font-mono); font-size: .8rem; white-space: pre; overflow-x: auto; }

/* ============================================================ */
/* COMPONENTS — the shared building blocks. See web/COMPONENTS.md. */
/* Reuse these on every page; don't invent one-off bars/inputs.    */
/* ============================================================ */

/* Toolbar: standard top-of-page action bar. Primary action(s) go in
   .toolbar-left; search / filters / sort go in .toolbar-right (pushed to
   the right edge). Used on every list page (tabs, prices, customers…). */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.toolbar-left { display: flex; align-items: center; gap: .5rem; }
.toolbar-right { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.chips { display: flex; gap: .4rem; }

/* Standard search field — ONE size everywhere. */
.search-field {
  height: 32px; width: 220px; padding: 0 .8rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font-size: .9rem;
}
.search-field:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }

/* Standard sort control. */
.sortby { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ink-3); }
.select {
  height: 32px; padding: 0 .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font-size: .9rem; cursor: pointer;
}
.select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }

/* Settings sub-nav reuses the chip bar with a divider under it. */
.tabbar.subnav { border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1.5rem; }

/* Tab line-item note + row actions */
.note-input {
  width: 100%; min-width: 120px; height: 30px; padding: 0 .5rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); font-size: .85rem;
}
.note-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--focus); }
.row-actions { white-space: nowrap; }
.row-actions .btn { margin-left: 2px; }

/* Invoice line note (in-app view) */
.inv-lines .line-note, table.inv-lines .line-note { color: var(--ink-3); font-size: 11px; margin-top: 2px; }

/* Prices results table — SKU annotation. */
.price-sku { color: var(--ink-3); font-size: .8rem; margin-left: .35rem; }

/* --- Tab detail: add bar (+Add / Add custom dropdowns) --- */
.add-bar { display: flex; gap: .6rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.btn.lg { font-size: 15px; padding: 9px 18px; }
.add-pop { position: relative; }
.add-pop > summary { list-style: none; }
.add-pop > summary::-webkit-details-marker { display: none; }
.add-pop > summary::marker { content: ""; }
.add-form {
  position: absolute; top: calc(100% + .45rem); left: 0; z-index: 30;
  display: flex; gap: .5rem; align-items: center; padding: .75rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10); white-space: nowrap;
}
.add-form .price-in { width: 90px; }
.add-form .search-box.combo { min-width: 280px; }

/* Sticky footer: a bottom action bar pinned to the foot of the page while
   the content above it scrolls. .main is a flex column, so this just sits
   below the scrolling .main-body. (Component — see COMPONENTS.md.) */
.sticky-footer {
  flex: 0 0 auto; display: flex; align-items: center; gap: .5rem;
  padding: .8rem 32px; border-top: 1px solid var(--line); background: var(--paper);
}
/* Solid-red destructive button (Close tab); plain .btn.danger stays light-red
   for the less-final Void. */
.btn.danger.solid { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.danger.solid:hover { filter: brightness(0.92); background: var(--danger); }

/* Tab reference (job/order ref) shown on the list tile + detail header. */
.tab-ref { display: inline-block; font-family: var(--font-mono); font-size: .8rem; color: var(--ink-3); }
.tab-tile .tab-ref { margin: .15rem 0; }

/* Settings → Interfaces: each capability in its own section, divider between. */
.iface-section { padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.iface-section h2 { margin: 0 0 .5rem; }
.iface-section .select { min-width: 220px; }

/* Tab line item: delete shown only on row hover (small red text). */
.row-del {
  background: none; border: none; padding: 0;
  color: var(--danger); font-size: .8rem; cursor: pointer;
  opacity: 0; transition: opacity .12s ease;
}
.tbl tbody tr:hover .row-del { opacity: 1; }
.row-del:hover { text-decoration: underline; background: none; }

/* Push a sticky-footer action to the far right (Void tab). */
.sticky-footer .push-right { margin-left: auto; }

/* Tab: "invoice created" banner. */
.invoice-banner {
  margin: 0 0 1.25rem; padding: .6rem .9rem; font-size: .9rem;
  border: 1px solid var(--line); border-left: 3px solid var(--ink);
  border-radius: var(--radius); background: var(--paper-2);
}
.invoice-banner a { font-weight: 600; }

/* Invoice page status line. */
.status-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.status-pill {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--line-strong); color: var(--ink-3);
}
.status-pill.status-sent { color: var(--ink); border-color: var(--ink-3); }
.status-pill.status-paid { color: #fff; background: #15803d; border-color: #15803d; }