/* The portal's mono is Martian Mono at wdth 75 — the condensed cut, because
   these are fixed-width readouts in a dense interface. */
[class*="mono"], .crumbs, .pill, .chip, .kpi-label, .side-group {
  font-variation-settings: 'wdth' 75;
}

/* App shells: office portal, crew app, client hub, platform admin. */

/* ---------------------------------------------------------------- layout */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

.side {
  background: var(--slate); color: var(--slate-ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--slate-rule);
}
.side-brand {
  display: flex; align-items: center; gap: .55rem;
  padding: 1.05rem 1.15rem; border-bottom: 1px solid var(--slate-rule);
  text-decoration: none; flex: none;
}
.side-brand .brand-mark { width: 30px; height: 30px; font-size: .9rem; }
.side-brand .brand-name { color: #fff; font-size: 1.02rem; }
.side-brand .brand-name em { color: var(--field-light); font-style: normal; }

.side-co {
  padding: .8rem 1.15rem; border-bottom: 1px solid var(--slate-rule);
  font-size: .8rem; color: var(--slate-ink-2);
}
.side-co b { display: block; color: #fff; font-family: var(--display); font-size: .92rem; font-weight: 700; }

/* The service this portal is working in.
   Two interfaces over one dataset, so the switch sits above the nav it
   changes rather than inside a page: it is a mode, not a filter, and putting
   it on one board was what let every other screen quietly show the other
   business. Only drawn for a franchise that sells both. */
.side-line {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem;
  padding: .55rem .75rem; border-bottom: 1px solid var(--slate-rule);
}
/* HQ carries three (All, and one per business), which is tight at this size. */
.side-line:has(.line-tab:nth-child(3)) .line-tab { font-size: .7rem; padding: .5rem .15rem; }
.line-tab {
  padding: .5rem .3rem; border: 1px solid transparent; border-radius: var(--r-sm, 6px);
  background: transparent; color: var(--slate-ink-2); cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: .76rem;
  letter-spacing: .01em; white-space: nowrap; transition: background .12s, color .12s;
}
.line-tab:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.line-tab.on { color: #fff; }
.line-tab.both.on { background: var(--slate-4); border-color: var(--slate-rule); }
.line-tab.haul.on { background: var(--field); border-color: var(--field-light); }
.line-tab.clean.on { background: #8E6E1E; border-color: #D8B34E; }
/* How many franchises of that kind. On the tab, so the shape of the estate
   reads at a glance and the three adding up is visible rather than claimed. */
.line-tab-n {
  display: inline-block; margin-left: .3rem; padding: 0 .28rem;
  border-radius: 999px; font-family: var(--mono); font-size: .62rem;
  background: rgba(255, 255, 255, .16);
}
.line-tab:not(.on) .line-tab-n { background: rgba(255, 255, 255, .07); }

/* The portal wears the colours of the service being worked, so a glance at
   any screen says which business you are in -- not just the one with tabs. */
:root[data-line="clean"] .side-brand .brand-name em { color: #D8B34E; }
:root[data-line="clean"] .brand-mark { background: linear-gradient(145deg, #D8B34E, #8E6E1E); }

.nav-group { padding: .35rem 0 .1rem; }
.nav-head {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: .61rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: #5C6873;
  padding: .45rem 1.15rem; text-align: left;
  transition: color .12s;
}
.nav-head:hover { color: var(--slate-ink); }
.nav-head .caret {
  display: inline-block; font-size: .6rem; line-height: 1; flex: none;
  transition: transform .16s ease; transform: rotate(0deg);
}
.nav-group.open > .nav-head .caret { transform: rotate(90deg); }
.nav-group.open > .nav-head { color: var(--slate-ink); }
.nav-head .badge {
  font-family: var(--mono); font-size: .62rem; font-weight: 600;
  background: var(--hivis); color: #23180A;
  padding: .06rem .34rem; border-radius: 99px; letter-spacing: 0;
}
.nav-items { display: none; padding-bottom: .3rem; }
.nav-group.open > .nav-items { display: block; }

.nav-group > h6 {   /* legacy — kept for surfaces that render a static group heading */
  /*
  font-family: var(--mono); font-size: .61rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: #5C6873;
  margin: 0 0 .35rem; padding: 0 1.15rem; */
}
.nav-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem 1.15rem;
  color: var(--slate-ink-2); text-decoration: none;
  font-size: .885rem; font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.nav-item:hover { background: var(--slate-2); color: #fff; }
.nav-item.on {
  background: var(--slate-2); color: #fff;
  border-left-color: var(--hivis);
}
.nav-item .ico { width: 17px; text-align: center; font-size: .95rem; flex: none; opacity: .9; }
.nav-item .badge {
  margin-left: auto;
  font-family: var(--mono); font-size: .65rem; font-weight: 600;
  background: var(--hivis); color: #23180A;
  padding: .08rem .38rem; border-radius: 99px; min-width: 18px; text-align: center;
}
.nav-item .badge.quiet { background: var(--slate-4); color: var(--slate-ink); }

.side-foot { margin-top: auto; padding: .9rem 1.15rem; border-top: 1px solid var(--slate-rule); }
.side-user { display: flex; align-items: center; gap: .6rem; }
.side-user .grow { min-width: 0; }
.side-user b { display: block; font-size: .85rem; color: #fff; font-weight: 600; }
.side-user span { font-size: .72rem; color: var(--slate-ink-2); }

.main { display: flex; flex-direction: column; min-width: 0; background: var(--paper); }

.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.6rem; height: 58px;
  background: var(--surface); border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
}
.topbar h1 { font-size: 1.16rem; margin: 0; letter-spacing: -.028em; }
.topbar .crumbs { font-family: var(--mono); font-size: .7rem; color: var(--ink-4); letter-spacing: .08em; text-transform: uppercase; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .55rem; }

.view { padding: 1.6rem; flex: 1; min-width: 0; }
.view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.view-head h2 { margin: 0 0 .2rem; font-size: 1.45rem; }
.view-head p { margin: 0; font-size: .88rem; color: var(--ink-3); }

/* ---------------------------------------------------------------- KPI row */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: .9rem; margin-bottom: 1.5rem; }
.kpi {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1.05rem 1.15rem;
  position: relative; overflow: hidden;
}
.kpi::after {
  content: ''; position: absolute; top: 0; right: 0; width: 3px; height: 100%;
  background: var(--accent, var(--field)); opacity: .8;
}
.kpi.warn { --accent: var(--hivis); }
.kpi.bad { --accent: var(--brick); }
.kpi.info { --accent: var(--blueprint); }
.kpi-sub { font-size: .76rem; color: var(--ink-3); margin-top: .3rem; }

/* ---------------------------------------------------------------- panels */
.cols { display: grid; gap: 1.2rem; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2-1 { grid-template-columns: 2fr 1fr; }
.cols-1-2 { grid-template-columns: 1fr 2fr; }

.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--rule-soft);
}
.panel-head h3 { margin: 0; font-size: .98rem; }
.panel-body { padding: 1.1rem; }
.panel-body.flush { padding: 0; }

/* Filter / toolbar strip */
.toolbar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.toolbar input[type=search], .toolbar input[type=text] { max-width: 280px; }
.toolbar select { max-width: 190px; }
.seg { display: inline-flex; border: 1.5px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.seg button {
  border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem .7rem; color: var(--ink-3);
}
.seg button + button { border-left: 1px solid var(--rule); }
.seg button.on { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- calendar */
.cal { display: grid; grid-template-columns: 58px repeat(7, 1fr); border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.cal-h {
  padding: .55rem .5rem; text-align: center;
  border-bottom: 1.5px solid var(--rule); background: var(--paper);
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.cal-h.today { background: var(--field-wash); color: var(--field-ink); }
.cal-h b { display: block; font-family: var(--display); font-size: 1.05rem; color: var(--ink); letter-spacing: -.02em; }
.cal-h.today b { color: var(--field-dark); }
.cal-time {
  font-family: var(--mono); font-size: .65rem; color: var(--ink-4);
  padding: .3rem .45rem; text-align: right; border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft); height: 46px;
}
.cal-cell { border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); height: 46px; position: relative; padding: 2px; }
.cal-cell:nth-child(8n+1) { border-right: 1px solid var(--rule); }
.cal-ev {
  position: absolute; left: 2px; right: 2px;
  border-radius: 3px; padding: 2px 5px;
  font-size: .68rem; line-height: 1.25; overflow: hidden;
  cursor: pointer; z-index: 2;
  border-left: 3px solid var(--ev, var(--field));
  background: color-mix(in srgb, var(--ev, var(--field)) 14%, white);
  color: var(--ink);
  transition: box-shadow .12s, transform .12s;
}
.cal-ev:hover { box-shadow: var(--shadow-2); transform: scale(1.015); z-index: 5; }
.cal-ev b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev span { color: var(--ink-3); font-size: .64rem; }

/* Dispatch board — crew columns */
.board { display: flex; gap: .9rem; overflow-x: auto; padding-bottom: .5rem; }
.board-col { min-width: 250px; flex: 1; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r); }
.board-col-head {
  padding: .65rem .85rem; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: .5rem; background: var(--surface);
  border-radius: var(--r) var(--r) 0 0;
}
.board-col-head b { font-size: .88rem; font-family: var(--display); font-weight: 700; }
.board-col-body { padding: .55rem; display: flex; flex-direction: column; gap: .5rem; min-height: 110px; }
.board-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--ev, var(--field));
  border-radius: var(--r-sm); padding: .6rem .7rem; cursor: pointer;
  transition: box-shadow .12s, transform .12s;
}
.board-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.board-card b { display: block; font-size: .84rem; margin-bottom: .15rem; }
.board-card .meta { font-size: .72rem; color: var(--ink-3); display: flex; gap: .5rem; flex-wrap: wrap; }

/* Timeline / activity feed */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li {
  display: flex; gap: .75rem; padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--rule-soft); font-size: .86rem;
}
.feed li:last-child { border-bottom: 0; }
.feed .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: .42rem; flex: none; background: var(--ink-4); }
.feed .dot.payment, .feed .dot.transfer { background: var(--field); }
.feed .dot.quote { background: var(--blueprint); }
.feed .dot.invoice { background: var(--hivis); }
.feed .dot.visit { background: var(--violet); }
.feed .dot.payout { background: var(--field-light); }
.feed time { margin-left: auto; color: var(--ink-4); font-family: var(--mono); font-size: .7rem; white-space: nowrap; }

/* Detail layout: header block + two columns */
.detail-head {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1.3rem 1.5rem; margin-bottom: 1.2rem;
}
.detail-title { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.detail-title h2 { margin: 0; }
.detail-meta { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rule-soft); }
.detail-meta > div { min-width: 0; }
.detail-meta dt {
  font-family: var(--mono); font-size: .65rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .2rem;
}
.detail-meta dd { margin: 0; font-size: .92rem; font-weight: 500; }

/* Line-item editor */
.lines { width: 100%; border-collapse: collapse; font-size: .88rem; }
.lines th {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); text-align: left;
  padding: .4rem .5rem; border-bottom: 1.5px solid var(--rule);
}
.lines td { padding: .4rem .5rem; border-bottom: 1px solid var(--rule-soft); }
.lines input, .lines select { padding: .38em .5em; font-size: .86rem; }
.lines .right { text-align: right; }
.totals { margin-left: auto; width: min(320px, 100%); margin-top: 1rem; }
.totals div { display: flex; justify-content: space-between; padding: .32rem 0; font-size: .89rem; }
.totals div.grand {
  border-top: 1.5px solid var(--ink); margin-top: .35rem; padding-top: .55rem;
  font-family: var(--display); font-weight: 800; font-size: 1.12rem;
}

/* ---------------------------------------------------------------- crew app (mobile-first) */
.crew-body { background: var(--slate); color: var(--slate-ink); min-height: 100vh; padding-bottom: 76px; }
.crew-top {
  background: var(--slate-2); border-bottom: 1px solid var(--slate-rule);
  padding: .85rem 1.1rem; position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .8rem;
}
.crew-top h1 { font-size: 1.05rem; margin: 0; color: #fff; }
.crew-top .sub { font-size: .74rem; color: var(--slate-ink-2); }
.crew-main { padding: 1rem; max-width: 640px; margin-inline: auto; }

.crew-card {
  background: var(--slate-2); border: 1px solid var(--slate-rule);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: .85rem;
}
.crew-card-head {
  padding: .85rem 1rem; border-bottom: 1px solid var(--slate-rule);
  display: flex; align-items: center; gap: .7rem;
}
.crew-card-body { padding: 1rem; }
.crew-card h3 { color: #fff; font-size: 1rem; margin: 0 0 .2rem; }
.crew-card .addr { font-size: .85rem; color: var(--slate-ink-2); }
.crew-time {
  font-family: var(--mono); font-weight: 600; font-size: 1.05rem;
  color: var(--hivis); flex: none;
}
.crew-stat {
  background: var(--slate-3); border-radius: var(--r);
  padding: .8rem; text-align: center;
}
.crew-stat b { display: block; font-family: var(--display); font-weight: 900; font-size: 1.5rem; color: #fff; letter-spacing: -.03em; }
.crew-stat span { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-ink-2); }

/* Service badges. Two brands on one row in an HQ table, so they have to be
   told apart at a glance without reading -- the colours are the two surfaces'
   own, not a generic palette. */
.chip {
  display: inline-block; padding: .12rem .45rem; border-radius: 999px;
  font-size: .62rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; border: 1px solid transparent; white-space: nowrap;
}
.chip-haul { background: rgba(245, 158, 11, .14); color: #B45309; border-color: rgba(245, 158, 11, .35); }
.chip-clean { background: rgba(161, 128, 60, .14); color: #7C6227; border-color: rgba(161, 128, 60, .35); }

/* Which service this operator is working right now.
   Only drawn when they are assigned to both, so it is never a one-item strip.
   Sized like the action buttons rather than like a tab, because it is tapped
   with a thumb on a phone that is being held in a glove, often in the sun. */
.crew-runs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: .4rem; margin-bottom: .9rem;
  background: var(--slate-3); border-radius: var(--r); padding: .3rem;
}
.crew-run {
  padding: .7rem .5rem; border: 0; border-radius: calc(var(--r) - .25rem);
  background: transparent; color: var(--slate-ink-2); cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: .92rem;
  transition: background .12s, color .12s;
}
.crew-run.on { background: var(--hivis); color: #23180A; }
.crew-run:not(.on):active { background: var(--slate-4); }

/* Big sunlight-legible action buttons */
.crew-actions { display: grid; gap: .55rem; }
.crew-btn {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1rem; border-radius: var(--r);
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  border: 2px solid transparent; cursor: pointer; width: 100%;
  transition: transform .1s;
}
.crew-btn:active { transform: scale(.985); }
.crew-btn-go { background: var(--hivis); color: #23180A; }
.crew-btn-done { background: var(--field); color: #fff; }
.crew-btn-alt { background: var(--slate-3); color: #fff; border-color: var(--slate-4); }

.crew-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: var(--slate-2); border-top: 1px solid var(--slate-rule);
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
}
.crew-nav a {
  padding: .65rem .3rem .7rem; text-align: center; text-decoration: none;
  color: var(--slate-ink-2); font-size: .66rem; font-weight: 600;
  display: flex; flex-direction: column; gap: .2rem; align-items: center;
  border-top: 2px solid transparent;
}
.crew-nav a.on { color: #fff; border-top-color: var(--hivis); }
.crew-nav .ico { font-size: 1.15rem; }

.crew-check {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .3rem; border-bottom: 1px solid var(--slate-rule);
  cursor: pointer; font-size: .92rem;
  /* reset the global uppercase <label> treatment */
  font-family: var(--body); font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--slate-ink);
  margin-bottom: 0;
}
.crew-check:last-child { border-bottom: 0; }
.crew-check input { width: 22px; height: 22px; accent-color: var(--field); flex: none; }
.crew-check.done { color: var(--slate-ink-2); text-decoration: line-through; }

/* ---------------------------------------------------------------- client hub */
.hub-body { background: var(--paper); min-height: 100vh; }
.hub-top {
  background: var(--surface); border-bottom: 1px solid var(--rule);
  padding: 0 1.5rem; height: 62px; display: flex; align-items: center; gap: 1.2rem;
  position: sticky; top: 0; z-index: 40;
}
.hub-nav { display: flex; gap: .3rem; margin-left: auto; }
.hub-nav a {
  padding: .45rem .8rem; border-radius: var(--r-sm);
  font-size: .87rem; font-weight: 500; color: var(--ink-2);
}
.hub-nav a.on { background: var(--field-wash); color: var(--field-ink); font-weight: 600; }
.hub-main { max-width: 980px; margin-inline: auto; padding: 1.8rem 1.5rem 4rem; }

/* ---------------------------------------------------------------- misc */
.map-mini {
  height: 190px; border-radius: var(--r); border: 1px solid var(--rule);
  background:
    radial-gradient(circle at 30% 40%, rgba(15,124,108,.09), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(245,165,36,.09), transparent 45%),
    var(--paper-2);
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 22px 22px;
  position: relative; overflow: hidden;
}
.map-pin {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transform: translate(-50%, -50%);
}
.map-pin::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: .35;
  animation: ping 2.2s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } }

.progress-steps { display: flex; gap: .3rem; margin-bottom: 1.4rem; }
.progress-steps i { height: 4px; flex: 1; background: var(--paper-3); border-radius: 2px; transition: background .35s; }
.progress-steps i.on { background: var(--field); }
.progress-steps i.cur { background: var(--hivis); }

@media (max-width: 1100px) {
  .cols-2, .cols-3, .cols-2-1, .cols-1-2 { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: fixed; left: 0; top: 0; bottom: 0; width: 236px; z-index: 200;
    transform: translateX(-100%); transition: transform .24s var(--ease); height: 100vh;
  }
  .side.open { transform: none; box-shadow: var(--shadow-3); }
  .view { padding: 1.1rem; }
  .topbar { padding: 0 1.1rem; }
  .cal { grid-template-columns: 44px repeat(7, 1fr); font-size: .8rem; }
}

/* Logo preview on Settings → Business details */
.logo-preview {
  margin-top: .5rem; padding: .7rem; border: 1px dashed var(--rule);
  border-radius: var(--r); background: var(--paper);
  display: flex; align-items: center; justify-content: center; min-height: 60px;
}
.logo-preview img { max-height: 52px; max-width: 100%; }

/* ---- Compliance document grid (Fleet, Contractors) -------------------- */
.doc-table th.doc-th {
  font-size: .66rem; letter-spacing: .06em; white-space: nowrap;
  text-align: center; padding-left: .4rem; padding-right: .4rem;
}
.doc-table th.doc-th .req { color: var(--brick); margin-left: .18rem; font-size: .85rem; line-height: 0; }
.doc-table td.doc-td { text-align: center; padding: .35rem .4rem; }

.doc-cell {
  display: inline-flex; flex-direction: column; align-items: center; gap: .05rem;
  min-width: 62px; padding: .3rem .45rem;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--paper); cursor: pointer;
  font-family: var(--mono); font-size: .64rem; line-height: 1.2;
  color: var(--ink-2);
  transition: transform .1s, box-shadow .1s, border-color .1s;
}
.doc-cell:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); border-color: var(--ink-3); }
.doc-cell .doc-mark { font-size: .78rem; font-weight: 700; line-height: 1; }
.doc-cell.green  { border-color: var(--field); color: var(--field-ink); background: var(--field-wash); }
.doc-cell.amber  { border-color: var(--hivis); color: var(--hivis-ink); background: var(--hivis-wash); }
.doc-cell.red    { border-color: var(--brick); color: var(--brick-ink); background: var(--brick-wash); }
.doc-cell.missing { border-style: dashed; color: var(--ink-3); background: transparent; }

/* A destructive action sits apart from Save, not beside it. */
.modal-foot .btn-quiet.danger { margin-right: auto; color: var(--brick); border-color: var(--brick); }
.modal-foot .btn-quiet.danger:hover { background: var(--brick-wash); }

/* ---- Payment lifecycle rail ------------------------------------------ */
.life-rail {
  display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem;
  margin-bottom: 1rem; scrollbar-width: thin;
}
.life-step {
  flex: 1 0 128px; min-width: 128px;
  padding: .6rem .7rem; border-radius: var(--r);
  border: 1px solid var(--rule-soft); background: var(--paper);
  position: relative;
}
.life-step .life-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 99px;
  background: var(--paper-3); color: var(--ink-3);
  font-family: var(--mono); font-size: .66rem; font-weight: 700;
  margin-bottom: .35rem;
}
.life-step .life-label {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: .82rem; color: var(--ink-2); line-height: 1.2;
}
.life-step .life-blurb {
  display: block; font-size: .68rem; color: var(--ink-4); margin-top: .12rem; line-height: 1.3;
}
.life-step.done { border-color: var(--field-edge); background: var(--field-wash); }
.life-step.done .life-dot { background: var(--field); color: #fff; }
.life-step.done .life-label { color: var(--field-ink); }
.life-step.cur { border-color: var(--field); box-shadow: 0 0 0 1px var(--field); background: var(--surface); }
.life-step.cur .life-dot { background: var(--field); color: #fff; }
.life-step.cur .life-label { color: var(--ink); }
.life-step.cur.warn { border-color: var(--brick); box-shadow: 0 0 0 1px var(--brick); }
.life-step.cur.warn .life-dot { background: var(--brick); }

.life-money {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .8rem;
  padding: .8rem 0 0; border-top: 1px solid var(--rule-soft);
}
.life-money dt {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: .15rem;
}
.life-money dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }

/* ---- Usage meter (plan limits in SnapHQ) -------------------------- */
.meter {
  display: inline-block; vertical-align: middle;
  height: 6px; min-width: 56px; border-radius: 99px;
  background: var(--paper-3); overflow: hidden; margin-right: .4rem;
}
.meter.grow { flex: 1; }
.meter > i { display: block; height: 100%; background: var(--field); border-radius: 99px; }
.meter.near > i { background: var(--hivis); }
.meter.over > i { background: var(--brick); width: 100% !important; }

/* ---- Rating and tipping --------------------------------------------- */
.text-center { text-align: center; }
.stars { display: flex; justify-content: center; gap: .3rem; }
.star {
  background: none; border: 0; cursor: pointer; padding: .1rem .15rem;
  font-size: 2.3rem; line-height: 1; color: var(--paper-3);
  transition: transform .12s, color .12s;
}
.star:hover { transform: scale(1.14); color: var(--hivis-light, var(--hivis)); }
.star.on { color: var(--hivis); }

.tip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: .5rem; }
.tip-btn {
  display: flex; flex-direction: column; gap: .1rem; align-items: center;
  padding: .7rem .4rem; cursor: pointer;
  border: 1.5px solid var(--rule); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  transition: border-color .12s, background .12s, transform .1s;
}
.tip-btn:hover { border-color: var(--field-light); transform: translateY(-1px); }
.tip-btn.sel { border-color: var(--field); background: var(--field-wash); color: var(--field-ink); }
.tip-btn b { font-family: var(--display); font-size: .95rem; }
.tip-btn span { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.tip-btn.sel span { color: var(--field-ink); }

/* ---- Top-bar user zone ----------------------------------------------
   Pinned right of the page's own actions, so it is in the same place on
   every screen — which is the only reason a person looks up there. */
.topbar-user {
  display: flex; align-items: center; gap: .3rem;
  margin-left: .6rem; padding-left: .7rem;
  border-left: 1px solid var(--rule-soft);
  position: relative; flex: none;
}
.topbar-actions { margin-left: auto; }

.icon-btn {
  position: relative;
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r);
  background: none; cursor: pointer; font-size: 1rem; line-height: 1;
  color: var(--ink-2);
  transition: background .12s, border-color .12s;
}
.icon-btn:hover { background: var(--paper-2); border-color: var(--rule); }
.icon-btn[aria-expanded="true"] { background: var(--paper-2); border-color: var(--rule); }
.icon-btn .icon-dot {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 3px; border-radius: 99px;
  background: var(--brick); color: #fff;
  font-family: var(--mono); font-size: .6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
}
.avatar-btn .avatar {
  width: 28px; height: 28px; font-size: .68rem;
  background: var(--field); color: #fff;
}

.tb-pop {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 90;
  width: min(340px, calc(100vw - 2rem));
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  overflow: hidden;
}
.tb-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1rem; border-bottom: 1px solid var(--rule-soft);
  background: var(--paper);
}
.tb-pop-head b { font-family: var(--display); font-size: .9rem; }
.tb-pop-list { max-height: 320px; overflow-y: auto; }
.tb-pop-item {
  display: block; width: 100%; text-align: left;
  padding: .7rem 1rem; border: 0; border-bottom: 1px solid var(--rule-soft);
  background: none; cursor: pointer; text-decoration: none; color: inherit;
  font-family: var(--body); font-size: .86rem;
}
.tb-pop-item:hover { background: var(--paper-2); }
.tb-pop-item.unread { background: var(--field-wash); }
.tb-pop-item.unread:hover { background: var(--field-wash); filter: brightness(.97); }
.tb-pop-item b { display: block; font-weight: 600; margin-bottom: .1rem; }
.tb-pop-item span { color: var(--ink-3); font-size: .8rem; }
.tb-pop-foot { padding: .55rem 1rem; border-top: 1px solid var(--rule-soft); background: var(--paper); }

.tb-id { padding: .85rem 1rem; border-bottom: 1px solid var(--rule-soft); display: flex; gap: .7rem; align-items: center; }
.tb-id .avatar { width: 38px; height: 38px; font-size: .8rem; background: var(--field); color: #fff; }
.tb-id b { display: block; font-family: var(--display); font-size: .95rem; }
.tb-id span { font-size: .78rem; color: var(--ink-3); }

@media (max-width: 720px) {
  .topbar .crumbs { display: none; }
  .topbar-user { margin-left: .3rem; padding-left: .4rem; }
}

/* ---- Payment method picker ------------------------------------------
   An unavailable method is shown greyed with the reason, not hidden.
   "Why can't I pay cash?" is worth answering once on the page. */
.pay-picks { display: grid; gap: .5rem; }
.pay-pick {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .7rem .85rem; cursor: pointer;
  border: 1.5px solid var(--rule); border-radius: var(--r);
  background: var(--surface);
  transition: border-color .12s, background .12s;
}
.pay-pick:hover { border-color: var(--field-light); }
.pay-pick input { margin-top: .2rem; accent-color: var(--field); flex: none; }
.pay-pick b { font-size: .9rem; }
.pay-pick > span { flex: 1; min-width: 0; }
.pay-pick:has(input:checked) { border-color: var(--field); background: var(--field-wash); }
.pay-pick.off { cursor: not-allowed; background: var(--paper-2); border-style: dashed; opacity: .78; }
.pay-pick.off:hover { border-color: var(--rule); }
.pay-pick .pill { flex: none; align-self: center; }

/* ---- Tenant website configuration (SnapHQ) ------------------------ */

/* A live-ish sketch of the tenant's site chrome in their own colours, so an
   operator can see the effect of a colour change without opening a preview. */
.brand-preview {
  border: 1px solid var(--rule); border-radius: var(--r);
  overflow: hidden; background: var(--surface);
}
.brand-preview-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .8rem; border-bottom: 1px solid var(--rule-soft);
  background: var(--paper);
}
.brand-preview-bar img { height: 20px; max-width: 110px; }
.brand-preview-bar b { font-family: var(--display); font-size: .88rem; }
.brand-preview-mark {
  width: 22px; height: 22px; border-radius: 5px; flex: none;
  background: var(--p); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: .75rem;
}
.brand-preview-body { padding: .9rem .8rem 1rem; }
.brand-preview-h {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: -.02em; line-height: 1.2;
}
.brand-preview-btn {
  display: inline-flex; padding: .3rem .7rem; border-radius: var(--r-sm);
  font-size: .76rem; font-weight: 600;
  border: 1.5px solid var(--rule); color: var(--ink-2);
}
.brand-preview-btn.primary { background: var(--p); border-color: var(--p); color: #fff; }

/* Ten templates, each with a wireframe thumbnail that actually differs —
   a grid of identical cards would tell an operator nothing. */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .8rem; }
.tpl-card {
  display: grid; gap: .3rem; text-align: left; cursor: pointer;
  padding: .7rem; border: 1.5px solid var(--rule); border-radius: var(--r);
  background: var(--surface); font-family: var(--body); color: var(--ink);
  transition: border-color .12s, transform .1s, box-shadow .12s;
}
.tpl-card:hover { border-color: var(--field-light); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tpl-card.sel { border-color: var(--field); box-shadow: 0 0 0 1px var(--field); }
.tpl-name { font-family: var(--display); font-weight: 700; font-size: .92rem; }
.tpl-tone {
  font-family: var(--mono); font-size: .63rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4);
}
.tpl-blurb { font-size: .78rem; color: var(--ink-2); line-height: 1.35; }
.tpl-best { font-size: .72rem; color: var(--ink-4); line-height: 1.3; }

.tpl-thumb {
  position: relative; display: block; height: 76px; margin-bottom: .35rem;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--rule-soft);
}
.tpl-thumb i { position: absolute; display: block; border-radius: 2px; }

/* Each thumbnail sketches that template's actual structure. */
.tpl-ledger  .t1 { inset: 10% 45% 55% 8%; background: var(--p); }
.tpl-ledger  .t2 { inset: 50% 8% 32% 8%; background: var(--ink-4); opacity: .35; }
.tpl-ledger  .t3 { inset: 74% 60% 10% 8%; background: var(--a); }

.tpl-depot   .t1 { inset: 0 0 52% 0; background: var(--ink); }
.tpl-depot   .t2 { inset: 14% 55% 66% 8%; background: var(--a); }
.tpl-depot   .t3 { inset: 60% 8% 12% 8%; background: var(--ink-4); opacity: .3; }

.tpl-route   .t1 { inset: 8% 8% 40% 8%; background: var(--p); opacity: .25; }
.tpl-route   .t2 { inset: 20% 30% 52% 20%; background: var(--p); border-radius: 99px; }
.tpl-route   .t3 { inset: 68% 8% 10% 8%; background: var(--ink-4); opacity: .3; }

.tpl-hearth  .t1 { inset: 8% 8% 45% 8%; background: var(--p); opacity: .5; border-radius: 10px; }
.tpl-hearth  .t2 { inset: 60% 45% 22% 8%; background: var(--ink-4); opacity: .35; }
.tpl-hearth  .t3 { inset: 60% 8% 22% 58%; background: var(--a); }

.tpl-manifest .t1 { inset: 8% 8% 72% 8%; background: var(--p); }
.tpl-manifest .t2 { inset: 34% 52% 10% 8%; background: var(--ink-4); opacity: .3; }
.tpl-manifest .t3 { inset: 34% 8% 10% 52%; background: var(--ink-4); opacity: .3; }

.tpl-yard    .t1 { inset: 22% 18% 52% 18%; background: var(--p); border-radius: 99px; }
.tpl-yard    .t2 { inset: 56% 30% 26% 30%; background: var(--a); border-radius: 99px; }
.tpl-yard    .t3 { inset: 80% 40% 8% 40%; background: var(--ink-4); opacity: .3; }

.tpl-beacon  .t1 { inset: 0 0 0 0; background: var(--p); opacity: .16; }
.tpl-beacon  .t2 { inset: 28% 20% 48% 20%; background: var(--p); }
.tpl-beacon  .t3 { inset: 60% 36% 22% 36%; background: var(--a); border-radius: 99px; }

.tpl-atlas   .t1 { inset: 8% 55% 60% 8%; background: var(--p); }
.tpl-atlas   .t2 { inset: 8% 8% 60% 50%; background: var(--a); opacity: .6; }
.tpl-atlas   .t3 { inset: 48% 8% 10% 8%; background: var(--ink-4); opacity: .3; }

.tpl-crew    .t1 { inset: 12% 66% 50% 8%; background: var(--p); border-radius: 99px; }
.tpl-crew    .t2 { inset: 12% 33% 50% 41%; background: var(--a); border-radius: 99px; }
.tpl-crew    .t3 { inset: 58% 8% 14% 8%; background: var(--ink-4); opacity: .3; }

.tpl-slate   .t1 { inset: 36% 30% 54% 8%; background: var(--ink); }
.tpl-slate   .t2 { inset: 52% 55% 40% 8%; background: var(--ink-4); opacity: .35; }
.tpl-slate   .t3 { inset: 66% 68% 22% 8%; background: var(--p); }

/* A row the customer has to act on. Louder than the rest, because the cost of
   missing it is a crew standing in a driveway. */
.hub-body tr.needs-you { background: var(--brick-wash); }
.hub-body tr.needs-you:hover { filter: brightness(.98); }
.hub-body tr.needs-you td:first-child { box-shadow: inset 3px 0 0 var(--brick); }

/* The survey arrives right after a charge, so it says what the charge was.
   A customer who thinks the number is wrong should find out here, not on
   their statement three days later. */
.rate-charged {
  text-align: center; font-size: .9rem; color: var(--ink-2);
  background: var(--paper-2); border: 1px solid var(--rule-soft);
  border-radius: var(--r); padding: .75rem .9rem; margin-bottom: 1.1rem;
}
.rate-charged b { font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.rate-charged .tiny { display: block; margin-top: .25rem; color: var(--ink-4); }

/* Floor levels are edited as a table of rows: name, hint, and what the carry
   adds. Laid out so the percentages line up and can be scanned down. */
.est-floor-row {
  display: grid; grid-template-columns: 1.1fr 1.4fr 5rem auto;
  gap: .5rem; align-items: center; margin-bottom: .5rem;
}
.est-floor-row input { width: 100%; }
.est-floor-row input[name="surchargePct"] { text-align: right; font-family: var(--mono); }
@media (max-width: 900px) {
  .est-floor-row { grid-template-columns: 1fr 5rem auto; }
  .est-floor-row input[name="hint"] { grid-column: 1 / -1; order: 3; }
}

/* Destinations: name, hint, drop-off %, and whether we need an address. */
.est-dest-row {
  display: grid; grid-template-columns: 1.1fr 1.4fr 4.5rem auto auto;
  gap: .5rem; align-items: center; margin-bottom: .5rem;
}
.est-dest-row input[type="text"], .est-dest-row input[type="number"] { width: 100%; }
.est-dest-row input[name="surchargePct"] { text-align: right; font-family: var(--mono); }
.est-dest-row .check { margin: 0; white-space: nowrap; }
@media (max-width: 900px) {
  .est-dest-row { grid-template-columns: 1fr 4.5rem auto auto; }
  .est-dest-row input[name="hint"] { grid-column: 1 / -1; order: 3; }
}

/* A channel's own colour, so the list is scannable without reading it. */
.cred-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: .45rem; vertical-align: middle; flex: none;
}

/* The market switcher in the SnapHQ marketing header. */
.mkt-switch { display: inline-flex; align-items: center; gap: .5rem; }
.mkt-switch select { min-width: 15rem; }

/* A channel's credential panel: one channel per tab, its group named above. */
.cred-panel { max-width: 46rem; }
.cred-group { display: block; margin-bottom: .5rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---- contractor app: jobs, money, paperwork ---------------------------
   Thumb-sized rows on a phone held in one hand in someone's driveway. */
.crew-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .6rem;
  margin-bottom: .8rem;
}

.crew-stat {
  background: var(--slate-2, rgba(255, 255, 255, .05));
  border-radius: 10px;
  padding: .8rem;
}

.crew-stat-v {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
}

.crew-stat-l {
  font-size: .78rem;
  opacity: .75;
  margin-top: .15rem;
}

/* The offer nag.
   It sits under the header on every screen while an offer is live, because an
   operator who is on the Money page still has twenty minutes to answer and no
   reason to know it. Amber, counting down, and it goes away the moment the
   offer is answered. */
.crew-nag {
  position: sticky; top: 0; z-index: 55;
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem 1rem;
  background: var(--hivis); color: #23180A;
  text-decoration: none; font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.crew-nag-clock {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.15rem; flex: none;
}
.crew-nag-text { flex: 1 1 auto; font-size: .86rem; font-weight: 600; }
.crew-nag-go { flex: none; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

/* An offer, which is not a job yet.
   The clock is the loudest thing on the card because it is the only thing on
   the card that is running out. Amber at a glance, red under five minutes --
   and the left edge is lit so the offers read as a different kind of object
   from the work below them, not just a job with extra buttons. */
.crew-offer {
  border-color: var(--hivis);
  box-shadow: inset 3px 0 0 var(--hivis);
}
.crew-clock {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 1.35rem; line-height: 1;
  color: var(--hivis); flex: none;
}
.crew-clock-urgent { color: var(--brick); }
.crew-offer-acts {
  display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .75rem;
}

/* What a job still owes. Amber rather than red: it is a reminder, not a
   failure, and the crew sees it before they try to close the job. */
.crew-todo {
  margin-top: .6rem;
  padding: .6rem .7rem;
  border-left: 3px solid var(--sodium, #FFA92E);
  background: rgba(255, 169, 46, .08);
  border-radius: 0 8px 8px 0;
  font-size: .85rem;
  line-height: 1.5;
}

/* A tick-list row sized for a gloved thumb, not a mouse pointer. */
.crew-check {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .55rem 0;
  line-height: 1.4;
  cursor: pointer;
}

.crew-check input {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-top: .1rem;
  accent-color: var(--sodium, #FFA92E);
}

.crew-btn.is-busy {
  opacity: .6;
  pointer-events: none;
}