/* RenoScope — TrueHaus brand.
   Nunito for display, Manrope for body. Rock Orange primary, Lush Green secondary,
   wordmark navy for ink. Per TrueHaus_Brand_Guidelines_summary.md. */

:root {
  --orange:      #DC5D28;   /* Rock Orange — primary */
  --orange-deep: #B8481A;
  --orange-soft: #FDEDE6;
  --green:       #136A57;   /* Lush Green — secondary */
  --green-soft:  #E6F4F0;
  --navy:        #303449;   /* wordmark navy */
  --ink:         #303449;
  --ink-2:       #5C6274;
  --ink-3:       #949AA8;
  --paper:       #FAF8F5;
  --surface:     #FFFFFF;
  --surface-2:   #F3EFEA;
  --line:        #E4DED6;
  --line-2:      #D2CABF;
  --warn:        #A9741B;
  --warn-soft:   #FBF3E2;
  --crit:        #B23A20;
  --shadow:      0 1px 2px rgba(48,52,73,.06), 0 6px 20px rgba(48,52,73,.07);
  --shadow-lg:   0 2px 4px rgba(48,52,73,.08), 0 20px 48px rgba(48,52,73,.16);
  --radius:      10px;
  --radius-s:    7px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --orange: #F0763C; --orange-deep: #DC5D28; --orange-soft: #3A2317;
    --green: #2E9B82; --green-soft: #12302A;
    --navy: #E8E4DC; --ink: #E8E4DC; --ink-2: #A8AEBE; --ink-3: #6E7486;
    --paper: #14161E; --surface: #1C1F2A; --surface-2: #242835;
    --line: #2E3340; --line-2: #3C4353;
    --warn: #DDA84C; --warn-soft: #33280F; --crit: #E07B57;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.35), 0 20px 48px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --orange: #F0763C; --orange-deep: #DC5D28; --orange-soft: #3A2317;
  --green: #2E9B82; --green-soft: #12302A;
  --navy: #E8E4DC; --ink: #E8E4DC; --ink-2: #A8AEBE; --ink-3: #6E7486;
  --paper: #14161E; --surface: #1C1F2A; --surface-2: #242835;
  --line: #2E3340; --line-2: #3C4353;
  --warn: #DDA84C; --warn-soft: #33280F; --crit: #E07B57;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: Nunito, Manrope, system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -.01em;
}
a { color: var(--orange-deep); text-underline-offset: 2px; }
:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 2px; border-radius: 3px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }

/* ---------- buttons ---------- */
.btn {
  font: inherit; font-weight: 700; font-size: 14px;
  border-radius: 8px; padding: 9px 15px; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  transition: filter .12s, background .12s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn-sm { font-size: 13px; padding: 6px 11px; border-radius: 7px; }
.btn-danger { background: transparent; color: var(--crit); border-color: transparent; }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--crit) 10%, transparent); }

/* ---------- login ---------- */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 400px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 30px 28px;
}
.brandline { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.brandline .mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, #FCB003, #F3600B);   /* Burning Sun */
  display: grid; place-items: center; color: #fff; font-family: Nunito; font-weight: 900;
}
.brandline h1 { font-size: 21px; }
.login-card p.lede { color: var(--ink-2); font-size: 14px; margin: 6px 0 22px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.field input, .field select {
  font: inherit; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
}
.field input:focus, .field select:focus { border-color: var(--orange); outline: none; }
.login-card .btn { width: 100%; justify-content: center; }
.altline { margin-top: 16px; text-align: center; font-size: 13px; color: var(--ink-2); }
.altline button { background: none; border: 0; color: var(--orange-deep); cursor: pointer; font: inherit; text-decoration: underline; }

.msg { border-radius: 8px; padding: 10px 13px; font-size: 13.5px; margin-bottom: 14px; }
.msg-error { background: color-mix(in srgb, var(--crit) 10%, transparent); color: var(--crit); border: 1px solid color-mix(in srgb, var(--crit) 30%, transparent); }
.msg-ok    { background: var(--green-soft); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); }
.msg-info  { background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }

/* ---------- app chrome ---------- */
header.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
header.top .wrap { display: flex; align-items: center; gap: 14px; height: 56px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.whoami { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink-2); }
.rolechip {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--green-soft); color: var(--green);
}
.rolechip.contractor { background: var(--orange-soft); color: var(--orange-deep); }
main { padding: 26px 0 70px; }

.pagehead { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.pagehead h2 { font-size: 24px; }
.pagehead .spacer { margin-left: auto; }
.crumb { font-size: 13px; color: var(--ink-2); margin-bottom: 4px; }
.crumb button { background: none; border: 0; color: var(--orange-deep); cursor: pointer; font: inherit; padding: 0; }

/* ---------- cards / lists ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.projlist { display: grid; gap: 12px; }
.projrow { padding: 15px 17px; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.projrow:hover { border-color: var(--line-2); }
.projrow h3 { font-size: 16.5px; }
.projrow .addr { font-size: 13.5px; color: var(--ink-2); }
.projrow .spacer { margin-left: auto; }
.phase {
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap;
}
.empty { padding: 44px 20px; text-align: center; color: var(--ink-2); }

/* ---------- scope table ---------- */
/* overflow-x:auto makes this a scroll container in BOTH axes, so a sticky header
   inside it resolves `top` against this box, not the page. Give it a height and pin
   the header at 0 — otherwise `top: 56px` pushes the header down over the first row. */
.tablewrap {
  overflow: auto;
  max-height: min(62vh, 620px);
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
}
table.scope { border-collapse: collapse; width: 100%; min-width: 1000px; font-size: 13.5px; }
table.scope th {
  background: var(--surface-2); text-align: left; font-size: 10.7px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2);
  padding: 9px 8px; border-bottom: 1px solid var(--line-2);
  position: sticky; top: 0; white-space: nowrap; z-index: 2;
}
table.scope td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.scope tr:hover td { background: var(--surface-2); }
table.scope input, table.scope select {
  width: 100%; font: inherit; padding: 6px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: var(--ink);
}
table.scope input:hover, table.scope select:hover { border-color: var(--line); }
table.scope input:focus, table.scope select:focus { border-color: var(--orange); background: var(--surface); outline: none; }
table.scope input:disabled, table.scope select:disabled { color: var(--ink-2); cursor: default; }
table.scope input.num { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, monospace; min-width: 0; }
/* Numbers must never be clipped — a truncated quantity reads as a different number. */
table.scope input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
table.scope input[type="number"]::-webkit-outer-spin-button,
table.scope input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
table.scope td.tot { text-align: right; font-weight: 700; white-space: nowrap; padding-right: 12px; padding-left: 12px; font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, monospace; }
table.scope select[data-pick] { min-width: 118px; }
td.itemno { color: var(--ink-3); font-size: 12px; text-align: right; width: 38px; font-variant-numeric: tabular-nums; }

/* The table is wider than most screens once the catalog column is in. Line total is the
   column people actually read, so it stays pinned to the right rather than scrolling
   out of sight; the item number stays pinned left so a row is always identifiable. */
table.scope th:first-child,
table.scope td.itemno {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
}
table.scope th:first-child { z-index: 3; background: var(--surface-2); }
table.scope tr:hover td.itemno { background: var(--surface-2); }

table.scope th.pin-right,
table.scope td.tot {
  position: sticky; right: 34px; z-index: 1; background: var(--surface);
  box-shadow: -8px 0 8px -8px rgba(48,52,73,.18);
}
table.scope th.pin-right { z-index: 3; background: var(--surface-2); }
table.scope tr:hover td.tot { background: var(--surface-2); }

table.scope th.pin-far-right,
table.scope td.rowdel {
  position: sticky; right: 0; z-index: 1; background: var(--surface);
}
table.scope th.pin-far-right { z-index: 3; background: var(--surface-2); }
table.scope tr:hover td.rowdel { background: var(--surface-2); }

/* A ghost is a reference, not a value. Grey, italic, and it stores nothing. */
table.scope input.has-ghost::placeholder { color: var(--ink-3); font-style: italic; opacity: 1; }
.ghostbtn {
  border: 1px dashed var(--line-2); background: transparent; color: var(--ink-3);
  font: inherit; font-size: 11.5px; font-style: italic; cursor: pointer;
  padding: 2px 6px; border-radius: 5px; white-space: nowrap;
}
.ghostbtn:hover { border-color: var(--orange); color: var(--orange-deep); border-style: solid; }
.adopted { font-size: 10.5px; color: var(--green); font-weight: 700; }

/* ---------- lane tabs ---------- */
.lanes { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.lane {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2);
}
.lane[aria-selected="true"] { background: var(--orange); border-color: var(--orange); color: #fff; }
.lane:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- totals ---------- */
.totals { display: grid; grid-template-columns: 1fr 330px; gap: 0; margin-top: 18px; }
@media (max-width: 820px) { .totals { grid-template-columns: 1fr; } }
.knobs { padding: 16px; border-right: 1px solid var(--line); display: flex; gap: 18px; flex-wrap: wrap; align-content: flex-start; }
@media (max-width: 820px) { .knobs { border-right: 0; border-bottom: 1px solid var(--line); } }
.knob { display: flex; flex-direction: column; gap: 4px; }
.knob label { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.knob .kin { display: flex; align-items: center; gap: 5px; border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 9px; background: var(--surface); }
.knob .kin input { width: 56px; border: 0; background: transparent; color: var(--ink); text-align: right; font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
.knob .kin span { color: var(--ink-2); font-size: 13px; }
.totbox { padding: 15px 18px; background: var(--surface-2); }
.totline { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 13.5px; color: var(--ink-2); }
.totline .v { font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.totline.sub { border-top: 1px dashed var(--line-2); margin-top: 4px; padding-top: 8px; }
.totline.grand { border-top: 2px solid var(--orange); margin-top: 7px; padding-top: 10px; }
.totline.grand span:first-child { font-family: Nunito; font-weight: 900; color: var(--ink); font-size: 14px; }
.totline.grand .v { font-size: 18px; font-weight: 800; }
.totnote { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; line-height: 1.4; }
.blanknote { padding: 22px 16px; text-align: center; color: var(--ink-2); font-size: 13.5px; }

.toolbar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .spacer { margin-left: auto; }
.spinner { width: 15px; height: 15px; border: 2px solid var(--line-2); border-top-color: var(--orange); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.saveflag { font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.saveflag.saved { color: var(--green); }
.saveflag.error { color: var(--crit); }