:root {
  --bg: #0f1419;
  --bg-elevated: #1a222c;
  --bg-card: #1e2833;
  --border: #2d3a47;
  --text: #e8eef4;
  --text-muted: #8b9aab;
  --accent: #e87722;
  --accent-dim: #c4621a;
  --ok: #3d9a6a;
  --warn: #d4a017;
  --danger: #c44;
  --info: #4a9ed4;
  --radius: 10px;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Code", "Fira Code", ui-monospace, monospace;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}

body {
  display: flex;
  min-height: 100vh;
}

a {
  color: var(--info);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Layout */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #151c24 0%, #10161d 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.85rem;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.35rem 0.65rem 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.brand strong {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.brand span {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.nav button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.nav button:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.nav button.active {
  background: rgba(232, 119, 34, 0.15);
  color: var(--accent);
  font-weight: 600;
}
.nav .section-label {
  margin: 0.9rem 0.75rem 0.35rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.sidebar-foot {
  padding: 0.75rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.75rem;
}
.sidebar-foot .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.4rem;
  background: var(--warn);
}
.sidebar-foot .dot.ok {
  background: var(--ok);
}

.main {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 1.75rem 2.5rem;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.page-header h1 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 650;
}
.page-header p {
  margin: 0.3rem 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1rem;
}

/* Cards / stats */
.grid {
  display: grid;
  gap: 1rem;
}
.grid.stats {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 1.25rem;
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}
.card.stat .label {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* A seven-figure job total used to run past the edge of its card and get
   clipped — $1,335,790 read as $1,335,79. Scale the figure to the card it is
   in rather than hide the last digit, because on this screen the last digit
   is the number. */
.card.stat {
  container-type: inline-size;
}
.card.stat .value {
  font-size: clamp(1.05rem, 9cqi, 1.75rem);
  font-weight: 700;
  margin-top: 0.25rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.card.stat .hint {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 0.2rem;
}
/* What the quantity above it costs. Deliberately NOT muted grey: it is the
   second thing on the card anyone reads, and on a card whose big number is a
   quantity it is the only money on screen. Kept a notch smaller than .value
   so it never competes with the takeoff figure it belongs to. */
.card.stat .money {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  margin-top: 0.3rem;
  overflow-wrap: anywhere;
}

/* Catalog reprice bar — highlighted once a price has changed this visit */
.card.dirty {
  border-color: var(--warn);
  box-shadow: 0 0 0 1px var(--warn) inset, var(--shadow);
}

/* Tables */
.table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.data th,
table.data td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data th {
  background: #172029;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
  z-index: 1;
}
table.data tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}
table.data tr.clickable {
  cursor: pointer;
}
table.data .num {
  font-family: var(--mono);
  text-align: right;
}
table.data .muted {
  color: var(--text-muted);
}

/* Grid entry — a takeoff typed as a table.
   Paving is sixteen columns across up to twenty-five areas, and the whole
   point is to type down a column without reaching for the mouse. Cells are
   tight, inputs fill them, and the first column stays put while the rest
   scrolls sideways so you never lose track of which area you are on. */
table.data.grid-entry th,
table.data.grid-entry td {
  padding: 0.2rem 0.3rem;
}
table.data.grid-entry th {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}
table.data.grid-entry input,
table.data.grid-entry select {
  padding: 0.3rem 0.35rem;
  font-size: 0.85rem;
  width: 100%;
  /* Wide enough for a real takeoff figure. At 4rem a 187,752 SF area read as
     "1877" and the estimator could not see what they had typed. */
  min-width: 5.5rem;
  border-radius: 5px;
}
table.data.grid-entry input::-webkit-outer-spin-button,
table.data.grid-entry input::-webkit-inner-spin-button {
  /* The spinners eat a character of width and nobody clicks them. */
  appearance: none;
  margin: 0;
}
table.data.grid-entry input[type="number"] {
  appearance: textfield;
}
table.data.grid-entry input[type="number"] {
  font-family: var(--mono);
  text-align: right;
}
table.data.grid-entry input[type="checkbox"] {
  width: auto;
  min-width: 0;
}
table.data.grid-entry td.name input {
  min-width: 11rem;
  text-align: left;
}
table.data.grid-entry input[data-f="square_footage"] {
  min-width: 6.75rem;
}
table.data.grid-entry input[data-f="curb_lf"],
table.data.grid-entry input[data-f="thick_edge_lf"],
table.data.grid-entry input[data-f="demo_lf"] {
  min-width: 6rem;
}
table.data.grid-entry td.derived {
  font-family: var(--mono);
  text-align: right;
  color: var(--text-muted);
  font-size: 0.82rem;
}
table.data.grid-entry tr.dirty td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
/* Two-line grids — the wall grid, since 2026-09-05. A record is a wall line
   and the footing line under it (gridRowHtml's `sub`): the header stacks both
   labels in one cell so it stays sticky, the pair shares one bottom rule, the
   footing line's first cell is a label rather than an input, and hovering the
   wall line lights the footing line with it. */
table.data.grid-entry th .sub-label {
  /* As bold and as bright as the wall's label above it. The first cut had
     this lighter and dimmer, and Chad's eye skipped it — "because the footing
     info is in smaller font and not bold I didn't really read it." */
  display: block;
  min-height: 1em;
  text-transform: none;
  letter-spacing: 0;
}
table.data.grid-entry tr.has-sub td {
  border-bottom: 0;
  padding-bottom: 0.05rem;
}
table.data.grid-entry tr.sub-line td {
  padding-top: 0.05rem;
}
table.data.grid-entry tr.sub-line td.sub-text {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding-left: 0.6rem;
}
table.data.grid-entry tr.has-sub:hover + tr.sub-line td {
  background: rgba(255, 255, 255, 0.03);
}
/* A second-line input says what it is, right on the line — the header over
   it belongs to the first line. */
table.data.grid-entry .tagged {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
table.data.grid-entry .tagged .sub-tag {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
table.data.grid-entry .tagged .sub-tag[title] {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
table.data.grid-entry .tagged input {
  min-width: 4rem;
}
table.data.grid-entry tfoot td {
  font-family: var(--mono);
  text-align: right;
  font-weight: 600;
  border-top: 2px solid var(--border);
  border-bottom: none;
}
table.data.grid-entry tfoot td.label {
  font-family: inherit;
  text-align: left;
  color: var(--text-muted);
  font-weight: 400;
}
.grid-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.75rem 0 0;
}
.grid-bar .unsaved {
  color: var(--accent);
  font-size: 0.85rem;
}

/* Forms */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.field.full {
  grid-column: 1 / -1;
}
.field label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
input,
select,
textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font: inherit;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(232, 119, 34, 0.35);
  border-color: var(--accent);
}
textarea {
  min-height: 90px;
  resize: vertical;
}

/* Buttons */
.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.btn:hover {
  border-color: #4a5d70;
  background: #24303c;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1008;
  font-weight: 600;
}
.btn.primary:hover {
  background: #f08a35;
}
.btn.ghost {
  background: transparent;
}
.btn.danger {
  border-color: rgba(204, 68, 68, 0.5);
  color: #f88;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #2a3540;
  color: var(--text-muted);
}
.badge.ok {
  background: rgba(61, 154, 106, 0.2);
  color: #6fd4a0;
}
.badge.warn {
  background: rgba(212, 160, 23, 0.2);
  color: #e8c25a;
}
.badge.info {
  background: rgba(74, 158, 212, 0.2);
  color: #7ec0ea;
}
.badge.accent {
  background: rgba(232, 119, 34, 0.2);
  color: #f0a05a;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
}
.modal {
  width: min(640px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 1.25rem;
}
#gb-table input,
#gb-table select {
  padding: 0.3rem 0.35rem;
  font-size: 0.82rem;
}
#gb-table td {
  white-space: nowrap;
}
.modal h2 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

/* Misc */
.empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
}
.error-banner {
  background: rgba(204, 68, 68, 0.15);
  border: 1px solid rgba(204, 68, 68, 0.4);
  color: #f99;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.warn-banner {
  background: rgba(212, 160, 23, 0.12);
  border: 1px solid rgba(212, 160, 23, 0.45);
  color: #e8c25a;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.warn-banner a,
.error-banner a {
  color: inherit;
  text-decoration: underline;
}
/* The price sheet: a catalog-style table with two editable cells per row. */
table.data.price-sheet td.group {
  background: #1f2830;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
table.data.price-sheet input {
  padding: 0.3rem 0.35rem;
  font-size: 0.85rem;
  border-radius: 5px;
  width: 100%;
}
table.data.price-sheet input[type="number"] {
  font-family: var(--mono);
  text-align: right;
  min-width: 6rem;
  appearance: textfield;
}
table.data.price-sheet input[type="number"]::-webkit-outer-spin-button,
table.data.price-sheet input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
table.data.price-sheet input.note {
  min-width: 10rem;
  font-size: 0.8rem;
}
table.data.price-sheet tr.edited td:first-child {
  box-shadow: inset 3px 0 0 #e8c25a;
}
.toast {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  background: #24303c;
  border: 1px solid var(--border);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  z-index: 100;
  box-shadow: var(--shadow);
  max-width: 360px;
}
.toast.ok {
  border-color: rgba(61, 154, 106, 0.5);
}
.toast.err {
  border-color: rgba(204, 68, 68, 0.5);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.chip {
  background: #2a3540;
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  font-size: 0.78rem;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem 1.25rem;
  margin-bottom: 1rem;
}
.detail-grid .k {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}
.detail-grid .v {
  font-weight: 500;
}
.hidden {
  display: none !important;
}
.loading {
  color: var(--text-muted);
  padding: 1.5rem;
}

@media (max-width: 860px) {
  body {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* The daily report form (sql/084): a phone, thumbs, sunlight. */
.report-form {
  max-width: 34rem;
  margin: 0 auto;
}
.report-form .field {
  margin-bottom: 0.9rem;
}
.report-form input,
.report-form select,
.report-form textarea {
  font-size: 16px;
  min-height: 2.6rem;
  width: 100%;
}
.report-form .grid-3,
.report-form .grid-4 {
  display: grid;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.35rem;
}
.report-form .grid-3 {
  grid-template-columns: 1.3fr 1fr 1fr;
}
.report-form .grid-4 {
  grid-template-columns: 1fr 1.3fr 0.8fr 0.8fr;
}
.report-form .head span {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.report-form .row-label {
  font-size: 0.95rem;
}
.report-form .choices label {
  /* a choice, not a field caption: .field label's small caps do not apply */
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  font-size: 1rem;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.report-form .choices.row {
  display: flex;
  gap: 1.5rem;
}
.report-form .choices input[type="checkbox"],
.report-form .choices input[type="radio"] {
  width: 1.35rem;
  height: 1.35rem;
  min-height: 0;
  margin: 0;
}
.report-form .btn.big {
  width: 100%;
  padding: 0.9rem;
  font-size: 1.1rem;
}
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.lang-toggle button {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 0.35rem 0.8rem;
  font: inherit;
  cursor: pointer;
}
.lang-toggle button.active {
  background: var(--accent);
  color: #fff;
}

/* The daily reports calendar (sql/084): a cell a day, the pours marked. */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cal-head {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.3rem 0;
}
.cal-day {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 96px;
  padding: 0.3rem 0.4rem;
  min-width: 0;
}
.cal-day.other {
  opacity: 0.45;
}
.cal-day.today {
  border-color: var(--accent);
}
.cal-day .d {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}
.cal-item {
  font-size: 0.75rem;
  line-height: 1.25;
  padding: 0.15rem 0.3rem;
  border-radius: 6px;
  background: var(--bg-elevated);
  margin-bottom: 0.2rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-item:hover {
  outline: 1px solid var(--border);
}
.cal-item.pour {
  background: rgba(61, 154, 106, 0.18);
  border-left: 3px solid var(--ok);
}