:root {
  color-scheme: light;
  --paper: #f7f6f2;
  --card: #ffffff;
  --ink: #1b1f1b;
  --body: #3f463f;
  --mut: #626a63;
  --line: #e5e3dc;
  --brand: #0b6b35;
  --brand-deep: #0a4d28;
  --brand-soft: #e9f4ec;
  --alert: #b42318;
  --alert-bg: #fef0ef;
  --warn: #b45309;
  --warn-bg: #fef4e6;
  --ok: #0b6b35;
  --ok-bg: #e9f4ec;
  --cta: #e8590c;
  --cta-pressed: #c94707;
  --green: var(--brand);
  --green-2: var(--brand-deep);
  --mint: var(--brand-soft);
  --muted: var(--mut);
  --soft: #f1f0ea;
  --white: var(--card);
  --amber: var(--warn);
  --red: var(--alert);
  --shadow: 0 1px 2px rgb(27 31 27 / 4%);
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100vh;
  height: 100dvh;
  margin: 0;
}

body {
  min-width: 320px;
  background: var(--paper);
  color: var(--body);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

body.map-overlay-open {
  overflow: hidden;
}

body.sales-overlay-open {
  overflow: hidden;
}

h1,
h2,
h3,
strong {
  color: var(--ink);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  outline-color: var(--green);
}

button {
  min-height: 44px;
}

a {
  color: inherit;
}

.login-screen,
.app-shell {
  height: 100%;
}

.login-screen {
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--paper);
}

.login-card {
  width: min(440px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.brand-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brand-row > div > strong,
.brand-row > div > .muted {
  display: block;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--green);
  color: white;
  font-weight: 800;
}

.brand-row h1 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.1;
}

.page-title h1 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.15;
  font-weight: 700;
}

.page-title .muted {
  font-size: 0.86rem;
}

.muted {
  color: var(--muted);
}

.hint-box {
  padding: 12px;
  border: 1px solid #bfe5cd;
  background: var(--mint);
  border-radius: 8px;
  color: #164c2c;
  margin: 16px 0;
}

.hidden {
  display: none !important;
}

.form-grid,
.expense-form {
  display: grid;
  gap: 14px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-weight: 650;
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #cbd5cf;
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--card);
  color: var(--ink);
}

textarea {
  min-height: 92px;
  resize: vertical;
}

.primary-btn,
.secondary-btn,
.amber-btn,
.ghost-btn,
.danger-btn,
.icon-btn,
.radio-card {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 11px 14px;
  cursor: pointer;
  text-decoration: none;
}

.icon-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--card);
  border-color: var(--line);
  color: var(--green);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.primary-btn {
  background: var(--green);
  color: white;
  font-weight: 750;
}

.primary-btn:hover,
.primary-btn:focus-visible {
  background: var(--green-2);
}

.primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.secondary-btn {
  min-height: 44px;
  background: white;
  border-color: var(--line);
  color: var(--ink);
  font-weight: 700;
}

.secondary-btn:disabled,
.danger-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.amber-btn {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #78350f;
  font-weight: 800;
  white-space: nowrap;
}

.ghost-btn {
  background: transparent;
  border-color: transparent;
  color: var(--green);
  font-weight: 700;
}

.danger-btn {
  background: #fff5f5;
  border-color: #fecaca;
  color: #991b1b;
  font-weight: 700;
}

.error-box {
  display: none;
  padding: 10px 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff1f2;
  color: #991b1b;
}

.error-box.visible {
  display: block;
}

.app-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--paper);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: max(12px, env(safe-area-inset-top)) 16px 10px;
  border-bottom: 1px solid var(--line);
  background: rgb(247 246 242 / 96%);
}

.topbar-left {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.topbar-right {
  min-width: 0;
  display: grid;
  justify-items: end;
}

/* Name over scope, right-aligned, the whole stack tappable - it is the account control, so a
   bigger target is a bonus rather than a compromise. */
.account-btn {
  min-width: 0;
  min-height: 44px;
  display: grid;
  justify-items: end;
  gap: 1px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: right;
  cursor: pointer;
}

.account-name {
  max-width: 160px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 800;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.topbar-context {
  max-width: 160px;
  color: var(--mut);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.small-mark {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--green);
  color: white;
  font-weight: 900;
  flex: 0 0 auto;
}

.topbar-title {
  min-width: 0;
}

.topbar-title strong,
.topbar-title span {
  display: block;
  overflow-wrap: anywhere;
}

.main-area {
  overflow-y: auto;
  padding: 14px 14px 16px;
}

.content-wrap {
  width: min(1100px, 100%);
  margin: 0 auto;
}

.sidebar {
  display: none;
}

.bottom-nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--card);
}

.nav-item {
  position: relative;
  min-height: 48px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 8px;
}

.nav-item.active {
  background: var(--brand-soft);
  color: var(--brand);
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}

.nav-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-label {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.nav-badge {
  position: absolute;
  top: 7px;
  right: 16px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--alert);
}

.page-stack {
  display: grid;
  gap: 12px;
}

.page-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.hero-page-title {
  align-items: center;
}

.page-title-meta {
  min-width: 0;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  text-align: right;
}

.back-row {
  margin-bottom: 4px;
}

.headline-card,
.section-card,
.attention-strip,
.install-banner {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.install-banner .primary-btn,
.install-banner .secondary-btn {
  min-height: 44px;
}

.headline-card {
  display: grid;
  gap: 8px;
  border-top: 2px solid var(--brand);
}

.sales-hero {
  border-color: var(--line);
  border-top-color: var(--brand);
}

.headline-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.headline-kpi {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.source-badge,
.source-caption {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

.source-badge {
  border: 1px dotted var(--mut);
  background: transparent;
  color: var(--mut);
}

.source-caption {
  color: var(--muted);
  background: transparent;
  padding-right: 0;
}

.offline-banner {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--warn);
  font-weight: 750;
}

.state-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid #f1c27d;
  border-left: 5px solid var(--warn);
  border-radius: 14px;
  background: var(--warn-bg);
  color: var(--warn);
}

.state-error strong {
  color: var(--warn);
}

.skeleton-card {
  display: grid;
  gap: 10px;
}

.skeleton-line {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eeece5 0%, #faf9f5 45%, #eeece5 90%);
  background-size: 220% 100%;
}

.skeleton-line.title {
  width: 168px;
  height: 20px;
}

.skeleton-line.tiny {
  width: 124px;
  height: 12px;
  margin-top: 8px;
}

.skeleton-line.short {
  width: 42%;
}

.skeleton-line.hero {
  width: 66%;
  height: 38px;
}

.big-chip,
.mini-chip,
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
}

.rank-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.big-chip {
  min-height: 48px;
  padding: 7px 12px;
  font-size: 2rem;
  line-height: 1;
}

.mini-chip {
  min-height: 26px;
  padding: 4px 8px;
  font-size: 0.82rem;
}

.chip-up {
  background: var(--ok-bg);
  color: var(--ok);
}

.chip-down {
  background: var(--alert-bg);
  color: var(--alert);
}

.depot-grid,
.regional-grid {
  display: grid;
  gap: 12px;
}

.home-rows {
  display: grid;
  gap: 8px;
}

.home-row {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 24px minmax(58px, auto) 1fr auto;
  gap: 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.home-row strong {
  font-size: 0.95rem;
  font-weight: 700;
}

.home-row-fact {
  min-width: 0;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.home-row-icon,
.row-chevron {
  color: var(--muted);
}

.home-row-emoji {
  font-size: 20px;
  line-height: 1;
}

.card-emoji {
  font-size: 14px;
  line-height: 1;
  margin-right: 6px;
  vertical-align: -1px;
}

.home-row-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.row-chevron {
  font-size: 1.25rem;
  line-height: 1;
}

.depot-card,
.regional-card,
.row-card {
  position: relative;
  width: 100%;
  display: grid;
  gap: 8px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  color: var(--ink);
}

.depot-card {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.depot-meta {
  min-width: 0;
}

.depot-meta strong,
.regional-card strong {
  display: block;
  overflow-wrap: anywhere;
}

.alert-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgb(180 83 9 / 14%);
}

.attention-strip {
  display: grid;
  gap: 10px;
  border-left: 5px solid var(--warn);
}

.attention-list {
  display: grid;
  gap: 8px;
}

.attention-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.region-block {
  display: grid;
  gap: 10px;
}

.region-blocks {
  display: grid;
  gap: 12px;
}

.region-heading {
  margin: 8px 0 0;
  color: var(--mut);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-row,
.category-row,
.loser-row,
.expense-row,
.employee-row,
.driver-row {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.metric-row:last-child,
.category-row:last-child,
.loser-row:last-child,
.expense-row:last-child,
.employee-row:last-child,
.driver-row:last-child {
  border-bottom: 0;
}

.category-row,
.loser-row,
.expense-row,
.employee-row,
.driver-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.category-row,
.loser-main,
.driver-sales-row,
.insight-strip-row {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.category-header {
  display: none;
}

.number-cell,
.category-pct,
.category-action,
.loser-metric,
.driver-row > span,
.finance-row strong,
.finance-depot-row .row-chevron {
  font-variant-numeric: tabular-nums;
}

.number-cell {
  display: none;
  text-align: right;
  color: var(--muted);
}

.category-action {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.sales-chevron {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--mut);
  transition: transform 160ms ease;
}

.sales-chevron svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sales-toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  color: var(--brand-deep);
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
}

.sales-toggle-minus,
details[open] > summary .sales-toggle-plus,
.loser-block.open .loser-main .sales-toggle-plus,
.driver-sales-block.open .driver-sales-row .sales-toggle-plus,
.stock-doc-row.open > .stock-doc-summary .sales-toggle-plus,
.stock-doc-oc.selected > .sales-toggle .sales-toggle-plus {
  display: none;
}

details[open] > summary .sales-toggle-minus,
.loser-block.open .loser-main .sales-toggle-minus,
.driver-sales-block.open .driver-sales-row .sales-toggle-minus,
.stock-doc-row.open > .stock-doc-summary .sales-toggle-minus,
.stock-doc-oc.selected > .sales-toggle .sales-toggle-minus {
  display: block;
}

.disclosure-rail,
.disclosure-status-slot,
.disclosure-action-slot {
  display: flex;
  align-items: center;
}

.disclosure-rail {
  justify-content: flex-end;
  gap: 6px;
}

.disclosure-status-slot {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.disclosure-action-slot {
  flex: 0 0 44px;
}

.sales-bucket-block > summary,
.sales-family-block > summary {
  list-style: none;
}

.sales-bucket-block > summary::-webkit-details-marker,
.sales-family-block > summary::-webkit-details-marker {
  display: none;
}

.sales-bucket-block.open > .bucket-row .sales-chevron,
.sales-family-block.open > .family-row .sales-chevron {
  transform: rotate(90deg);
}

.bar-pair {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
}

.bar-line {
  height: 8px;
  border-radius: 999px;
  background: transparent;
  overflow: hidden;
}

.bar-line span {
  display: block;
  height: 100%;
  background: var(--green);
}

.bar-line.prev span {
  background: #9aa8a0;
}

.sales-hero .region-heading {
  margin-top: 0;
}

.sales-flow {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.compare-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 2px;
  color: var(--mut);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
}

.compare-swatch {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 2px;
  background: var(--green);
}

.compare-swatch.prev {
  background: #9aa8a0;
}

.compare-swatch.current {
  background: var(--green);
}

.sales-family-list {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.sku-list {
  display: grid;
  gap: 6px;
  padding: 0 0 10px 12px;
}

.sku-row,
.sales-detail-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--mut);
  font-size: 0.88rem;
  line-height: 1.35;
}

.sku-row strong {
  white-space: nowrap;
}

.insight-strip {
  display: grid;
  gap: 8px;
  padding-block: 12px;
}

.insight-strip .region-heading {
  margin: 0;
}

.insight-strip-list {
  display: grid;
  gap: 6px;
}

.insight-strip-row {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  color: var(--ink);
}

.insight-strip-row span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}

.loser-block,
.driver-sales-block {
  border-bottom: 1px solid var(--line);
}

.loser-block:last-child,
.driver-sales-block:last-child {
  border-bottom: 0;
}

/* GOAL 21 contacts pattern: text opens the detail, two 44px rings act (call / WhatsApp).
   The right inset keeps the rings CLEAR of the capture FAB's corridor (measured: the FAB
   owns the last ~80px before the viewport edge) - a 44px control under the FAB is a tap
   the floater swallows, the exact defect the tells-audit exists to catch. */
/* Grid, not flex: the two rings live in FIXED columns so they align vertically across every
   row, whether or not a row has both (Tiago screenshot feedback, 2026-08-10). The 64px FAB
   corridor is GONE (Tiago, same day: the gap read as wasted space) - the rings reach the
   card edge; the page's 160px bottom clearance is what keeps the last rows clear of the FAB. */
.loser-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px;
  align-items: center;
  gap: 10px;
  border-bottom: 0;
}

.loser-main {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  text-align: left;
}

.loser-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.loser-name,
.loser-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

.driver-sales-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  gap: 8px;
  align-items: center;
  border-bottom: 0;
  padding-inline: 0;
}

.sales-detail-line {
  padding: 0 0 10px;
  justify-content: flex-start;
}

.drivers-card-actions {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.drivers-toggle {
  grid-template-columns: repeat(2, minmax(64px, 1fr));
}

.driver-today-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.feed-error {
  margin-top: 8px;
}

.status-pill {
  min-height: 26px;
  min-width: 82px;
  padding: 4px 8px;
  font-size: 0.82rem;
  line-height: 1.05;
}

.status-pill.muted {
  background: var(--paper);
  color: var(--mut);
}

.context-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: normal;
  text-align: right;
}

.status-selling {
  background: #f0efea;
  color: var(--mut);
  font-weight: 650;
}

.status-no-sales {
  background: var(--warn-bg);
  color: var(--warn);
}

.status-stopped {
  background: var(--alert-bg);
  color: var(--alert);
}

.status-pending {
  background: var(--warn-bg);
  color: var(--warn);
  font-weight: 650;
}

.tone-green {
  background: var(--ok-bg);
  color: var(--ok);
}

.tone-amber {
  background: var(--warn-bg);
  color: var(--warn);
}

.tone-red {
  background: var(--alert-bg);
  color: var(--alert);
}

.result-positive {
  color: var(--ok);
}

.result-negative {
  color: var(--alert);
}

.tone-amber-text {
  color: var(--warn);
}

.plate {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  letter-spacing: 0;
}

.fleet-focus {
  display: grid;
  align-items: center;
  min-height: 58px;
  padding: 2px 0;
}

.fleet-hero-value {
  font-size: 2rem;
  line-height: 1.05;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.fleet-hero-value.status-selling,
.fleet-hero-value.status-no-sales,
.fleet-hero-value.status-stopped {
  background: transparent;
}

.fleet-hero-value.status-selling {
  color: var(--muted);
}

.fleet-hero-value.status-no-sales {
  color: var(--warn);
}

.fleet-hero-value.status-stopped {
  color: var(--alert);
}

.fleet-strip {
  min-height: 38px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.fleet-segment {
  flex: 0 0 auto;
  padding: 9px 10px;
  color: var(--muted);
  font-size: 0.86rem;
  white-space: nowrap;
  border-left: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.fleet-segment:first-child {
  border-left: 0;
}

.fleet-segment.status-no-sales,
.fleet-segment.status-stopped {
  background: transparent;
  font-weight: 800;
}

.fleet-segment.status-no-sales {
  color: var(--warn);
}

.fleet-segment.status-stopped {
  color: var(--alert);
}

.fleet-segment.is-zero {
  color: #9aa8a0;
  font-weight: 400;
}

.segmented-control {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(64px, 1fr));
  min-height: 44px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.segment-btn {
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--mut);
  font-weight: 800;
}

.segment-btn.active {
  background: var(--brand);
  color: white;
}

.fleetops-card {
  display: grid;
  gap: 12px;
}

.fleetops-head,
.fleetops-subhead,
.fleetops-provenance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fleetops-head {
  align-items: start;
  flex-wrap: wrap;
}

.fleetops-head .region-heading {
  margin: 0 0 4px;
}

.fleetops-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 100%;
}

.fleet-map-trigger {
  min-height: 44px;
  padding: 6px 10px;
  font-size: 0.85rem;
  white-space: normal;
}

.fleet-map-trigger.active {
  border-color: var(--brand);
  color: var(--brand);
}

.fleetops-hero {
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1.08;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.fleetops-subhead {
  flex-wrap: wrap;
  padding-bottom: 2px;
  color: var(--mut);
  font-size: 0.84rem;
  font-weight: 700;
}

.fleetops-provenance {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.fleetops-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.fleet-map-panel {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fbfaf6;
}

.fleet-map-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--card);
}

.fleet-map-body {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  gap: 8px;
}

.fleet-map-head,
.fleet-map-route-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fleet-map-head h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

.fleet-map-head span,
.fleet-map-note,
.fleet-map-attribution {
  color: var(--mut);
  font-size: 0.82rem;
  font-weight: 700;
}

.fleet-map-close {
  font-size: 1.35rem;
  line-height: 1;
}

.fleet-map-canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef1ec;
}

.fleet-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

.fleet-route-action {
  min-height: 44px;
  padding: 5px 7px;
  color: var(--brand-deep);
  font-size: 0.8rem;
  font-weight: 850;
}

.fleet-no-reason-alert {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid var(--alert);
  border-radius: 12px;
  background: var(--alert-bg);
  color: var(--alert);
  text-align: left;
}

.fleet-no-reason-alert strong,
.fleet-no-reason-alert span {
  color: inherit;
}

.fleet-map-loading {
  display: grid;
  gap: 8px;
  padding: 18px 0;
}

.fleet-map-empty {
  padding: 18px 0;
  color: var(--mut);
  font-weight: 750;
}

.fleet-map-error,
.fleet-map-route-error {
  margin: 0;
}

.fleet-map-route-bar {
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--body);
  font-size: 0.88rem;
}

.fleet-map-route-bar .ghost-btn {
  min-height: 32px;
  padding: 4px 0;
}

.fleet-map-popup {
  display: grid;
  gap: 5px;
  min-width: 170px;
  font-size: 0.86rem;
}

.fleet-map-popup .secondary-btn {
  min-height: 44px;
  padding: 7px 9px;
  font-size: 0.84rem;
}

.fleet-route-point,
.fleet-route-terminal {
  display: block;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgb(27 31 27 / 22%);
}

.fleet-route-point {
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  background: #6e756e;
}

.fleet-route-terminal {
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
}

.fleet-route-terminal.start {
  background: var(--brand);
}

.fleet-route-terminal.end {
  background: conic-gradient(#1b1f1b 0 25%, #fff 0 50%, #1b1f1b 0 75%, #fff 0);
}

.fleet-route-time {
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid rgb(203 213 207 / 78%);
  border-radius: 999px;
  background: rgb(255 255 255 / 92%);
  color: var(--mut);
  font-size: 12px;
  line-height: 1.1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgb(27 31 27 / 14%);
  white-space: nowrap;
}

.leaflet-container {
  font: inherit;
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
}

.escalation-card {
  display: grid;
  gap: 10px;
}

.escalation-card .fleetops-head {
  display: block;
}

.escalation-card .region-heading {
  margin: 0;
}

.escalation-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.escalation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 64px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.escalation-row:last-child {
  border-bottom: 0;
}

.escalation-main {
  min-width: 0;
}

.escalation-main strong,
.escalation-main span {
  display: block;
  overflow-wrap: anywhere;
}

.escalation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.escalation-asof {
  font-size: 0.78rem;
  font-weight: 700;
}

.fleetops-row {
  display: block;
  min-height: 72px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
}

.fleetops-row:last-child {
  border-bottom: 0;
}

.fleetops-row.zero-sales-row {
  padding-left: 10px;
  border-left-color: var(--alert);
}

.fleetops-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(124px, auto);
  gap: 8px;
  align-items: center;
  min-height: 54px;
  list-style: none;
  cursor: pointer;
}

.fleetops-summary::-webkit-details-marker {
  display: none;
}

.fleetops-left {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.fleetops-right-rail {
  min-width: 124px;
  display: grid;
  justify-items: end;
  gap: 1px;
}

.fleet-status-slot {
  min-height: 26px;
  display: flex;
  justify-content: flex-end;
}

.late-time {
  color: var(--alert);
  font-weight: 900;
}

.fleetops-mini-line {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.89rem;
  line-height: 1.18;
  color: var(--body);
}

.fleetops-driver {
  color: var(--mut);
  display: flex;
  flex-wrap: wrap;
  gap: 2px 5px;
  overflow: visible;
  white-space: normal;
}

.fleetops-driver-name {
  flex: 1 1 92px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fleetops-driver-detail {
  flex: 0 0 auto;
}

.fleetops-metrics {
  display: grid;
  gap: 3px;
  min-width: 98px;
  color: var(--ink);
  text-align: right;
  font-size: 0.88rem;
  line-height: 1.14;
  font-variant-numeric: tabular-nums;
}

.fleetops-metric-line {
  display: block;
  min-height: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.metric-danger {
  color: var(--alert) !important;
  font-weight: 900;
}

/* the global strong{color:--ink} rule would beat the parent span's color */
.metric-danger strong {
  color: inherit;
}

.muted-value {
  color: var(--mut);
  font-weight: 800;
}

.fleetops-expanded {
  display: grid;
  gap: 10px;
  padding: 10px 0 2px;
}

.fleetops-context-status {
  display: flex;
  justify-content: flex-start;
}

.fleetops-compact-strip {
  display: grid;
  gap: 8px;
  padding-block: 12px;
}

.fleetops-compact-counts {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.fleetops-compact-controls {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

.fleetops-compact-controls .fleet-map-trigger {
  min-width: 0;
  /* 130px basis + 8px gap + ~153px toggle fits the 296px card width at 360px,
     so the button and the Hoje|Ontem toggle share ONE line (Hugo, 13/07). */
  flex: 1 1 130px;
  padding-inline: 9px;
  white-space: normal;
}

.fleetops-compact-controls .segmented-control {
  flex: 0 0 auto;
}

.fleetops-expanded-flags,
.fleetops-expanded-action,
.fleetops-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fleetops-expanded-action {
  align-items: center;
}

.machine-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.machine-line > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.machine-line code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 850;
  color: var(--ink);
}

.machine-line.is-broken {
  border-color: #f1b6b0;
  background: var(--alert-bg);
}

.machine-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.machine-actions .secondary-btn,
.machine-actions .primary-btn {
  min-height: 44px;
  padding: 9px 10px;
}

.repairs-card {
  display: grid;
  gap: 10px;
}

.repairs-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.finance-detail > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.repairs-summary::-webkit-details-marker {
  display: none;
}

.repairs-card[open] .row-chevron {
  transform: rotate(90deg);
}

.repair-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.repair-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.repair-row:last-child {
  border-bottom: 0;
}

.repair-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.confirm-box {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.muted-row {
  color: var(--mut);
}

.muted-row .plate,
.muted-row strong {
  color: var(--mut);
  font-weight: 650;
}

.muted-row .muted {
  color: var(--mut);
}

.problem-row {
  color: var(--ink);
}

.finance-grid {
  display: grid;
  gap: 12px;
}

.finance-card {
  display: grid;
  gap: 10px;
}

.finance-head,
.finance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.finance-badges {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.finance-label {
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.finance-number {
  margin-top: 2px;
  font-size: 1.55rem;
  line-height: 1.05;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.finance-hero {
  font-size: 2rem;
}

.finance-number-secondary {
  font-size: 1.45rem;
  font-weight: 800;
}

.finance-rows {
  display: grid;
  gap: 0;
}

.finance-row {
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}

.finance-row span {
  min-width: 0;
}

.finance-row strong {
  text-align: right;
  white-space: nowrap;
}

.finance-detail {
  border-top: 1px solid var(--line);
  padding-top: 2px;
}

.finance-detail summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  list-style: none;
}

.team-records summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
}

.team-records summary::-webkit-details-marker {
  display: none;
}

.team-record-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.team-record-row,
.insight-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.team-record-row:last-child,
.insight-row:last-child {
  border-bottom: 0;
}

.team-record-row span span {
  display: block;
  margin-top: 2px;
}

.insight-card .region-heading {
  margin: 0;
}

.hero-insight-card {
  border-top: 2px solid var(--brand);
}

.insight-list {
  display: grid;
}

.insight-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.insight-main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 0;
  cursor: pointer;
}

.insight-main span:last-child {
  line-height: 1.35;
}

.insight-reason-btn {
  min-height: 34px;
  padding-inline: 10px;
}

.insight-all-link {
  width: fit-content;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-weight: 850;
  padding: 2px 0 0;
  cursor: pointer;
}

.resultado-home-card {
  display: grid;
  gap: 8px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.resultado-home-main,
.resultado-home-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.resultado-home-main strong {
  font-size: 1.25rem;
  line-height: 1.05;
  font-weight: 900;
}

.resultado-home-main span,
.resultado-home-foot .muted {
  min-width: 0;
  overflow-wrap: anywhere;
}

.resultado-hero-number {
  font-size: 2rem;
  line-height: 1.05;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.resultado-killer {
  display: grid;
  gap: 8px;
  border-left: 5px solid var(--warn);
}

.resultado-killer.ok {
  border-left-color: var(--ok);
}

.resultado-killer .region-heading,
.resultado-costs .region-heading,
.resultado-leafs .region-heading,
.resultado-region .region-heading {
  margin: 0;
}

.resultado-killer p {
  margin: 0;
  line-height: 1.4;
}

.resultado-cost-row,
.resultado-scope-row {
  width: 100%;
  display: grid;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.resultado-cost-row {
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  min-height: 58px;
  padding: 10px 0;
}

.resultado-cost-row:last-child,
.resultado-scope-row:last-child,
.resultado-leaf-row:last-child {
  border-bottom: 0;
}

.resultado-cost-row.selected {
  background: var(--brand-soft);
  margin-inline: -8px;
  padding-inline: 8px;
  border-radius: 8px;
}

.resultado-cost-main {
  min-width: 0;
}

.resultado-cost-main strong,
.resultado-cost-main span {
  display: block;
}

.resultado-cost-compare {
  color: var(--mut);
  font-weight: 800;
  white-space: nowrap;
}

.resultado-leaf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.resultado-leaf-row span span {
  display: block;
  margin-top: 2px;
}

.resultado-table-head {
  display: none;
}

.resultado-region {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.resultado-scope-row {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 62px;
  padding: 10px 0;
}

.resultado-scope-row > strong,
.resultado-scope-row > span:nth-child(3) {
  text-align: right;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.resultado-scope-row > span:nth-child(4) {
  grid-column: 1 / -1;
}

.resultado-scope-row.healthy {
  color: var(--mut);
}

.resultado-scope-row.healthy strong,
.resultado-scope-row.healthy .muted {
  color: var(--mut);
}

.resultado-scope-row.negative {
  background: var(--alert-bg);
  margin-inline: -8px;
  padding-inline: 8px;
  border-radius: 8px;
}

.resultado-scope-stat {
  font-size: 1.2rem;
  font-weight: 900;
}

.lever-card {
  display: grid;
  gap: 12px;
}

.lever-card.alert {
  border-left: 5px solid var(--alert);
}

.lever-card.warn,
.lever-card.atencao {
  border-left: 5px solid var(--warn);
}

.lever-card.info {
  border-left: 5px solid var(--brand);
}

.lever-card-main {
  display: grid;
  gap: 6px;
}

.lever-card-main strong {
  font-size: 1rem;
  line-height: 1.25;
}

.lever-card-main p {
  margin: 0;
  color: var(--body);
  line-height: 1.4;
}

.lever-impact {
  font-size: 1.15rem;
  line-height: 1.2;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.lever-detail-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.lever-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.lever-detail-row:last-child {
  border-bottom: 0;
}

.lever-detail-row span span {
  display: block;
  margin-top: 2px;
}

.lever-detail-row > span:last-child {
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lever-scope-list {
  display: grid;
}

.lever-scope-row {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 10px 0;
}

.lever-scope-row:last-child {
  border-bottom: 0;
}

.lever-scope-row span span {
  display: block;
  margin-top: 2px;
}

.lever-scope-row > span:nth-child(3) {
  grid-column: 2 / 4;
}

.finance-detail summary::-webkit-details-marker {
  display: none;
}

.finance-detail summary::after {
  content: "›";
  display: inline-block;
  transform: rotate(90deg);
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
}

.finance-detail[open] summary::after {
  transform: rotate(270deg);
}

.finance-depot-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.finance-depot-row:last-child {
  border-bottom: 0;
}

.finance-depot-row span span {
  display: block;
  margin-top: 2px;
}

.finance-region-card {
  cursor: default;
}

.prompt-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px dashed var(--mut);
  border-radius: 14px;
  background: var(--card);
}

.radio-grid {
  display: grid;
  gap: 10px;
}

.radio-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  background: var(--card);
  border-color: var(--line);
  font-weight: 750;
}

.radio-card.selected {
  border-color: var(--green);
  background: var(--mint);
}

.employee-row {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
}

.employee-row > span { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; }

.employee-row:hover,
.employee-row:focus-visible {
  background: var(--soft);
}

.thumb {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #f1f5f2;
}

.letter-preview {
  position: relative;
  width: 100%;
  min-height: 520px;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  line-height: 1.55;
}

.letter-preview::before {
  content: "MINUTA - DEMONSTRAÇÃO";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-28deg);
  font-weight: 900;
  font-size: clamp(2rem, 8vw, 4.5rem);
  color: rgb(180 35 24 / 16%);
  white-space: nowrap;
  pointer-events: none;
}

.letter-preview > * {
  position: relative;
}

.install-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-left: 5px solid var(--green);
}

.install-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.install-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.install-banner .primary-btn,
.install-banner .secondary-btn {
  min-height: 34px;
  padding: 6px 10px;
}

.loading {
  width: min(680px, calc(100% - 32px));
  margin: 18px auto;
  display: grid;
  gap: 12px;
  color: transparent;
}

.loading::before,
.loading::after {
  content: "";
  display: block;
  height: 84px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, #eeece5 0%, #faf9f5 45%, #eeece5 90%);
  background-size: 220% 100%;
}

.split-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(21, 33, 26, 0.28);
}

.bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  max-height: min(82vh, 720px);
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 -18px 50px rgba(18, 33, 26, 0.2);
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}

.settings-sheet {
  position: fixed;
  right: 14px;
  top: calc(72px + env(safe-area-inset-top));
  z-index: 22;
  width: min(420px, calc(100vw - 28px));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 16px;
}

.settings-sheet h2 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.context-form {
  width: min(560px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.context-form h2 {
  margin: 0 0 4px;
  font-size: 1.2rem;
  line-height: 1.15;
}

.capture-card,
.micro-card,
.sensor-card {
  display: grid;
  gap: 12px;
}

.capture-card p {
  margin: 4px 0 0;
}

.tap-grid {
  display: grid;
  gap: 8px;
}

.voice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.audio-preview {
  display: grid;
  grid-template-columns: 24px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.audio-preview svg,
.empty-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audio-preview audio,
.sensor-row audio {
  width: 100%;
  max-width: 280px;
  height: 34px;
}

.questionnaire-form .three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sensor-feed {
  display: grid;
  border-top: 1px solid var(--line);
}

.sensor-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.empty-state {
  min-height: 76px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--mut);
}

.empty-state > span:nth-child(2) {
  flex: 1 1 180px;
}

.empty-state .secondary-btn {
  min-height: 44px;
  padding: 7px 10px;
}

.empty-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brand);
}

.fleet-quick-list {
  display: grid;
  gap: 12px;
}

.quick-list-grid {
  display: grid;
  gap: 6px;
}

.quick-depot-row {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 10px minmax(100px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.quick-depot-row:last-child {
  border-bottom: 0;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--ok);
}

.status-dot.amber {
  background: var(--warn);
}

.status-dot.red {
  background: var(--alert);
}

.ticket-list-card {
  display: grid;
  gap: 10px;
}

.ticket-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.ticket-row {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.ticket-summary {
  min-height: 44px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.ticket-disclosure-rail {
  max-width: 58%;
}

.ticket-summary::-webkit-details-marker {
  display: none;
}

.ticket-summary > span:first-child {
  min-width: 0;
}

.ticket-summary strong,
.ticket-summary .muted {
  display: block;
}

.ticket-detail {
  display: grid;
  gap: 10px;
  padding-top: 10px;
}

.ticket-row:last-child {
  border-bottom: 0;
}

.ticket-row-head,
.ticket-badges,
.ticket-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ticket-row-head {
  align-items: flex-start;
}

.ticket-row-head > span:first-child {
  min-width: 0;
}

.ticket-row-head strong,
.ticket-row-head .muted {
  display: block;
}

.ticket-row p {
  margin: 0;
  line-height: 1.42;
  color: var(--body);
}

.ticket-badges,
.ticket-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ticket-actions .secondary-btn {
  min-height: 44px;
  padding: 8px 10px;
}

.ticket-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ticket-step {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  color: var(--mut);
  font-size: 0.78rem;
  font-weight: 800;
}

.ticket-step.done {
  border-color: var(--brand);
  background: var(--brand);
  color: white;
}

.ticket-step.current {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}

.ticket-confirm-prompt {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #bfe5cd;
  border-radius: 8px;
  background: var(--brand-soft);
}

.repair-approval-list {
  display: grid;
  gap: 10px;
}

.repair-approval-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.repair-photo-thumb,
.repair-photo-empty {
  width: 88px;
  min-height: 88px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--soft);
}

.repair-photo-thumb {
  padding: 0;
}

.repair-photo-thumb img,
.photo-lightbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.repair-photo-empty {
  display: grid;
  place-items: center;
  color: var(--mut);
  font-weight: 800;
}

.repair-approval-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.repair-approval-main p {
  margin: 0;
  color: var(--body);
  line-height: 1.35;
}

.repair-cost {
  font-size: 1.45rem;
  line-height: 1.05;
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.repair-decision-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 116px;
}

.repair-decision-actions .primary-btn,
.repair-decision-actions .danger-btn {
  min-height: 44px;
}

.photo-lightbox {
  position: fixed;
  z-index: 80;
  inset: 18px;
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 20px 60px rgb(0 0 0 / 24%);
}

.photo-lightbox .icon-btn {
  justify-self: end;
}

.photo-lightbox img {
  border-radius: 8px;
  object-fit: contain;
  background: var(--soft);
}

.whatsapp-hero strong {
  font-size: 1.28rem;
  line-height: 1.08;
  font-weight: 900;
}

.whatsapp-count-card,
.whatsapp-feed-card,
.whatsapp-worst-card {
  display: grid;
  gap: 10px;
}

.whatsapp-count-grid,
.whatsapp-feed {
  display: grid;
  border-top: 1px solid var(--line);
}

.whatsapp-kind-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.whatsapp-kind-row:last-child {
  border-bottom: 0;
}

.whatsapp-kind-row strong {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.whatsapp-row {
  display: grid;
  gap: 9px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.whatsapp-row:last-child {
  border-bottom: 0;
}

.whatsapp-more > summary,
.ticket-more > summary,
.sensor-records > summary,
.service-previous > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--brand);
  font-weight: 800;
  cursor: pointer;
}

.whatsapp-more > summary,
.ticket-more > summary {
  border-top: 1px solid var(--line);
}

.sensor-records > summary,
.service-previous > summary {
  justify-content: space-between;
}

.sensor-records > summary::-webkit-details-marker,
.service-previous > summary::-webkit-details-marker {
  display: none;
}

.service-previous {
  border-top: 1px solid var(--line);
}

.whatsapp-row-head,
.whatsapp-row-foot,
.whatsapp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.whatsapp-row-head,
.whatsapp-row-foot {
  flex-wrap: wrap;
}

.whatsapp-row p,
.whatsapp-sheet-excerpt {
  margin: 0;
  color: var(--body);
  line-height: 1.42;
}

.whatsapp-row p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.whatsapp-chip {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.whatsapp-meta {
  color: var(--mut);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.whatsapp-status-slot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.whatsapp-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.whatsapp-actions .secondary-btn,
.whatsapp-actions .ghost-btn {
  min-height: 44px;
  padding: 8px 10px;
}

.equipment-hero .primary-btn {
  width: 100%;
  margin-top: 14px;
}

.whatsapp-sheet-excerpt {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.whatsapp-region-blocks .region-block {
  margin: 0;
}

.brindes-window {
  grid-template-columns: repeat(3, minmax(58px, 1fr));
}

.brindes-hero strong {
  font-size: 1.28rem;
  line-height: 1.08;
  font-weight: 900;
}

.brindes-alert {
  border-top-color: var(--alert);
}

.brindes-alert strong {
  color: var(--alert);
}

.brindes-pos-card,
.brindes-stock-card,
.brindes-requests-card,
.brindes-depot-card {
  display: grid;
  gap: 10px;
}

.brindes-pos-list,
.brindes-request-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.brindes-pos-row,
.brindes-request-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.brindes-request-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.brindes-pos-row:last-child,
.brindes-request-row:last-child {
  border-bottom: 0;
}

.brindes-pos-main,
.brindes-request-row span:first-child {
  min-width: 0;
}

.brindes-pos-main strong,
.brindes-pos-main span,
.brindes-request-row strong,
.brindes-request-row .muted {
  display: block;
  overflow-wrap: anywhere;
}

.brindes-pos-total {
  min-width: 34px;
  text-align: right;
  font-weight: 900;
  color: var(--ink);
}

.brindes-spark {
  display: flex;
  align-items: end;
  gap: 2px;
  width: 54px;
  height: 24px;
}

.brindes-spark span {
  flex: 1;
  min-width: 2px;
  border-radius: 2px 2px 0 0;
  background: #b8c7bc;
}

.brindes-stock-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.brindes-stock-main strong {
  font-size: 2rem;
  line-height: 1.05;
  font-weight: 900;
}

.brindes-stock-main span {
  color: var(--mut);
  font-weight: 800;
}

.brindes-sku-grid,
.brindes-stock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.brindes-sku-grid span,
.brindes-stock-grid span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--mut);
  font-weight: 800;
}

.brindes-stock-grid span {
  display: grid;
  gap: 2px;
  justify-items: start;
}

.brindes-stock-grid strong {
  font-size: 1.25rem;
}

.stock-provenance {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.stock-hero,
.stock-card,
.stock-orders-card,
.stock-requests-card,
.stock-docs-card {
  display: grid;
  gap: 12px;
}

.stock-risk-hero {
  color: var(--ink);
  font-size: 2rem;
  line-height: 1.05;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.stock-risk-hero.risk {
  color: var(--alert);
}

.stock-chronic-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 2px solid var(--alert);
  border-radius: 12px;
  background: var(--alert-bg);
  color: var(--alert);
}

.stock-chronic-card div {
  display: grid;
  gap: 2px;
}

.stock-chronic-card strong,
.stock-chronic-card span {
  color: inherit;
}

.stock-risk-head,
.stock-risk-row {
  display: grid;
  grid-template-columns: minmax(52px, 1fr) 54px 68px 68px;
  gap: 7px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.stock-risk-head {
  color: var(--mut);
  font-size: 12px;
  font-weight: 850;
}

.stock-risk-row {
  min-height: 38px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}

.stock-risk-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.stock-risk-row span {
  text-align: right;
  white-space: nowrap;
}

.stock-risk-order {
  width: 100%;
  margin-top: 8px;
}

.stock-orders-title {
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1.15;
  font-weight: 900;
}

.orders-toggle {
  grid-template-columns: repeat(2, minmax(72px, 1fr));
}

.stock-supplier-list,
.stock-product-list,
.stock-order-list,
.stock-order-lines {
  display: grid;
}

.stock-category-list {
  display: grid;
  padding-left: 8px;
}

.stock-category {
  border-top: 1px solid var(--line);
}

.stock-category:first-child {
  border-top: 0;
}

.stock-category-summary,
.stock-more > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  cursor: pointer;
  list-style: none;
}

.stock-category-summary::-webkit-details-marker,
.stock-more > summary::-webkit-details-marker {
  display: none;
}

.stock-category-summary strong,
.stock-category-summary .muted {
  display: block;
}

.stock-more > summary {
  justify-content: center;
  color: var(--brand-deep);
  font-weight: 850;
}

.stock-more > .stock-product-list {
  padding-left: 8px;
}

.stock-supplier {
  border-top: 1px solid var(--line);
}

.stock-supplier:first-child {
  border-top: 0;
}

.stock-supplier-summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  cursor: pointer;
  list-style: none;
}

.stock-orders-supplier > .stock-supplier-summary {
  min-height: 44px;
  padding: 7px 0;
}

.stock-order-summary {
  min-height: 44px;
  padding: 7px 0;
}

.stock-supplier-summary::-webkit-details-marker,
.stock-order-summary::-webkit-details-marker {
  display: none;
}

.stock-supplier-summary > span:first-child,
.stock-order-summary > span:first-child,
.stock-product-main {
  min-width: 0;
}

.stock-supplier-summary strong,
.stock-supplier-summary .muted,
.stock-order-summary strong,
.stock-order-summary .muted,
.stock-product-main strong,
.stock-product-main .muted {
  display: block;
}

.stock-supplier-summary strong,
.stock-order-summary strong,
.stock-product-main strong {
  overflow-wrap: anywhere;
}

.stock-supplier[open] > .stock-supplier-summary .row-chevron,
.stock-order-row[open] > .stock-order-summary .row-chevron {
  transform: rotate(90deg);
}

.stock-product-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  gap: 10px;
  align-items: center;
  padding: 9px 0 9px 9px;
  border-top: 1px solid var(--line);
  border-left: 3px solid transparent;
}

.stock-product-row:first-child {
  border-top: 0;
}

.stock-band-row-critical {
  border-left-color: #d04848;
}

.stock-band-row-dormant {
  border-left-color: var(--line);
  opacity: 0.72;
}

.stock-product-main {
  display: grid;
  gap: 3px;
  line-height: 1.2;
}

.stock-product-main .muted {
  font-size: 0.82rem;
}

.stock-product-metrics {
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stock-days-pill {
  min-height: 28px;
  min-width: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--card);
  color: var(--mut);
  font-size: 0.86rem;
  line-height: 1;
  font-weight: 850;
  white-space: nowrap;
}

.stock-band-critical {
  border-color: #efc0c0;
  background: #fdecec;
  color: #d04848;
}

.stock-band-low {
  border-color: #f5c7d0;
  background: #fff1f4;
  color: var(--alert);
}

.stock-band-ok {
  border-color: var(--line);
  background: var(--card);
  color: var(--mut);
}

.stock-band-high {
  border-color: #d4e3f2;
  background: #f1f6fb;
  color: #557fae;
}

.stock-band-overstock {
  border-color: #c8d9ed;
  background: #e8f0f8;
  color: #6a99cd;
}

.stock-band-dormant {
  border-color: var(--line);
  background: #f1f0ea;
  color: var(--mut);
}

.stock-case-line {
  display: grid;
  gap: 2px;
  color: var(--mut);
  font-size: 0.82rem;
  line-height: 1.15;
  white-space: nowrap;
}

.stock-order-action {
  min-height: 44px;
  padding: 6px 9px;
  font-size: 0.82rem;
}

.stock-readonly-hint {
  margin-top: 8px;
}

.stock-order-row {
  display: block;
  border-top: 1px solid var(--line);
}

.stock-order-row:first-child {
  border-top: 0;
}

.stock-order-summary {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  cursor: pointer;
  list-style: none;
}

.stock-order-detail {
  display: grid;
  gap: 8px;
  padding: 0 0 10px 10px;
}

.stock-order-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--mut);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.stock-order-line {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  color: var(--body);
  font-size: 0.88rem;
}

.stock-order-line span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.stock-order-line strong {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stock-requests-list,
.stock-doc-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.stock-request-row,
.stock-doc-summary {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.stock-doc-oc {
  grid-template-columns: minmax(0, 1fr) 44px;
}

.stock-doc-oc-lines {
  grid-column: 1 / -1;
}

.stock-request-row {
  flex-wrap: wrap;
}

.stock-request-row:last-child,
.stock-doc-row:last-child .stock-doc-summary {
  border-bottom: 0;
}

.stock-request-main,
.stock-doc-summary > span:first-child {
  min-width: 0;
  flex: 1 1 220px;
}

.stock-request-row strong,
.stock-request-row .muted,
.stock-doc-summary strong,
.stock-doc-summary .muted {
  display: block;
}

.stock-request-actions,
.order-request-confirm {
  display: grid;
  gap: 6px;
  justify-items: end;
  margin-left: auto;
}

.order-request-confirm {
  min-width: min(100%, 260px);
}

.order-request-confirm strong {
  font-size: 0.86rem;
  color: var(--ink);
  text-align: right;
}

.order-request-confirm .split-actions {
  gap: 6px;
}

.order-request-error {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  font-size: 0.84rem;
}

.stock-doc-summary {
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.stock-doc-row.open .row-chevron {
  transform: rotate(90deg);
}

.stock-doc-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px;
  padding: 0 0 12px;
}

.stock-doc-detail {
  display: grid;
  gap: 10px;
  padding: 0 0 12px;
}

.stock-doc-detail > div:first-child,
.stock-doc-detail > div:first-child span {
  display: grid;
  gap: 2px;
}

.stock-doc-oc-list,
.stock-doc-oc-lines {
  display: grid;
  gap: 7px;
}

.stock-doc-oc {
  width: 100%;
  min-height: 52px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
}

.stock-doc-oc > span:first-child,
.stock-doc-oc small {
  display: block;
}

.stock-doc-oc.selected {
  border-color: var(--ok);
  background: var(--ok-bg);
}

.stock-doc-oc-lines {
  padding-top: 8px;
  border-top: 1px solid rgb(11 107 53 / 24%);
  color: var(--body);
  font-size: 0.82rem;
}

.field-error {
  color: var(--alert);
  font-size: 0.8rem;
  font-weight: 800;
}

.photo-picker {
  display: grid;
  gap: 10px;
}

.photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.photo-preview-grid img,
.expense-photo-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 10px;
  object-fit: cover;
}

.camera-button {
  min-height: 52px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 2px solid var(--brand);
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-deep) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  cursor: pointer;
}

.camera-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.stock-doc-thumb {
  aspect-ratio: 1;
  min-height: 74px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--soft);
  color: var(--mut);
  font-weight: 800;
}

.stock-doc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stock-closure-table {
  display: grid;
  border-top: 1px solid var(--line);
}

.stock-closure-head,
.stock-closure-summary {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) minmax(65px, .9fr) minmax(82px, auto) 32px;
  gap: 4px;
  align-items: center;
}

.stock-closure-head {
  min-height: 34px;
  color: var(--mut);
  font-size: 12px;
  font-weight: 850;
}

.stock-closure-row {
  border-top: 1px solid var(--line);
}

.stock-closure-row:first-of-type {
  border-top: 0;
}

.stock-closure-summary {
  width: 100%;
  min-height: 52px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

button.stock-closure-summary {
  cursor: pointer;
}

.stock-closure-oc,
.stock-closure-supplier {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.76rem;
}

.stock-closure-oc .source-badge {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 3px;
  min-height: 18px;
  padding: 2px 4px;
  font-size: 12px;
}

.stock-closure-oc .source-caption {
  min-height: 18px;
  padding: 2px 4px;
  font-size: 12px;
}

.stock-closure-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 12px;
  line-height: 1.05;
  font-weight: 850;
  text-align: center;
}

.stock-closure-status.closed {
  background: var(--ok-bg);
  color: var(--ok);
}

.stock-closure-status.open {
  background: var(--warn-bg);
  color: var(--warn);
}

.stock-closure-action {
  display: grid;
  place-items: center;
}

.stock-closure-row.open .sales-toggle-plus {
  display: none;
}

.stock-closure-row.open .sales-toggle-minus {
  display: inline;
}

.stock-closure-row > .stock-doc-thumbs {
  padding: 0 0 12px;
}

.stock-doc-habit {
  padding-top: 2px;
  font-size: 0.82rem;
}

.refresh-progress {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: 850;
  text-align: center;
}

.settings-page-card {
  max-width: 520px;
}

.quick-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-chip {
  min-height: 36px;
  padding: 7px 10px;
}

.selected-count {
  color: var(--mut);
  font-size: 0.86rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.fuel-hero,
.fuel-scope-card,
.fuel-plate-card {
  display: grid;
  gap: 10px;
}

.fuel-kicker {
  color: var(--mut);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.fuel-hero-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.fuel-hero-main strong {
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.fuel-hero-main span {
  color: var(--body);
  font-weight: 800;
}

.fuel-empty {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fuel-empty > span:last-child,
.fuel-plate-head > span:first-child {
  min-width: 0;
}

.fuel-empty strong,
.fuel-empty .muted,
.fuel-plate-head strong,
.fuel-plate-head .muted {
  display: block;
}

.fuel-empty.fuel-ok {
  border-left: 5px solid var(--ok);
}

.fuel-empty.fuel-missing,
.fuel-plate-card.warn {
  border-left: 5px solid var(--warn);
}

.fuel-plate-card.alert {
  border-left: 5px solid var(--alert);
}

.fuel-plate-head,
.fuel-meta,
.fuel-scope-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fuel-plate {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
}

.fuel-consumption {
  font-size: 1.12rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.fuel-consumption span,
.fuel-data-check,
.fuel-coverage {
  color: var(--mut);
  font-weight: 750;
}

.fuel-meta {
  flex-wrap: wrap;
  justify-content: flex-start;
  color: var(--body);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.fuel-scope-head {
  display: none;
}

.fuel-scope-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.fuel-scope-row {
  width: 100%;
  min-height: 58px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.fuel-scope-row:last-child {
  border-bottom: 0;
}

.fuel-scope-row > strong,
.fuel-scope-row > span:last-child {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fuel-scope-row > span:nth-child(3) {
  color: var(--mut);
  font-weight: 800;
}

.print-only {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes skeleton {
    from {
      background-position: 120% 0;
    }
    to {
      background-position: -120% 0;
    }
  }

  .page-stack > * {
    animation: fade-up 240ms ease-out both;
  }

  .page-stack > *:nth-child(2) {
    animation-delay: 50ms;
  }

  .page-stack > *:nth-child(3) {
    animation-delay: 100ms;
  }

  .page-stack > *:nth-child(4) {
    animation-delay: 150ms;
  }

  .page-stack > *:nth-child(5) {
    animation-delay: 200ms;
  }

  .loading::before,
  .loading::after,
  .skeleton-line {
    animation: skeleton 1.1s ease-in-out 3;
  }

}

@media (max-width: 619px) {
  .machine-line,
  .repair-row {
    align-items: stretch;
    flex-direction: column;
  }

  .machine-actions,
  .repair-decision-actions {
    justify-content: stretch;
  }

  .machine-actions .secondary-btn,
  .machine-actions .primary-btn {
    flex: 1 1 130px;
  }

  .repair-approval-card {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .repair-photo-thumb,
  .repair-photo-empty {
    width: 76px;
    min-height: 76px;
  }

  .repair-decision-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 620px) {
  .finance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .depot-grid,
  .regional-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lever-scope-row {
    grid-template-columns: auto minmax(0, 0.8fr) minmax(0, 1fr) auto;
  }

  .lever-scope-row > span:nth-child(3) {
    grid-column: auto;
  }
}

@media (min-width: 1024px) {
  .app-shell {
    grid-template-columns: 236px 1fr;
    grid-template-rows: 1fr;
  }

  .topbar,
  .bottom-nav {
    display: none;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-right: 0;
    background: var(--brand-deep);
    color: white;
    padding: 20px 14px;
  }

  .sidebar strong,
  .sidebar .muted {
    color: white;
  }

  .sidebar .muted {
    opacity: 0.78;
  }

  .sidebar .small-mark {
    background: white;
    color: var(--brand-deep);
  }

  .settings-sheet {
    left: 256px;
    right: auto;
    top: 20px;
  }

  .sidebar-nav {
    display: grid;
    gap: 6px;
  }

  .sidebar .nav-item {
    grid-template-columns: 24px 1fr;
    place-items: center start;
    padding: 0 12px;
    font-size: 0.95rem;
    color: rgb(255 255 255 / 78%);
  }

  .sidebar .nav-item.active {
    background: white;
    color: var(--brand-deep);
  }

  .sidebar .secondary-btn,
  .sidebar .danger-btn {
    background: rgb(255 255 255 / 10%);
    border-color: rgb(255 255 255 / 20%);
    color: white;
  }

  .main-area {
    padding: 24px;
  }

  .depot-grid,
  .regional-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quick-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 18px;
  }

  .quick-depot-row {
    min-width: 0;
  }

  .fleetops-row {
    padding-block: 11px;
  }

  .fleetops-summary {
    grid-template-columns: minmax(180px, 1fr) minmax(124px, auto);
    gap: 18px;
  }

  .escalation-row {
    grid-template-columns: minmax(160px, 1fr) minmax(180px, auto) auto;
    gap: 12px;
  }

  .escalation-chips {
    justify-content: flex-end;
  }

  .region-blocks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .region-block .regional-grid {
    grid-template-columns: 1fr;
  }

  .whatsapp-region-blocks .quick-list-grid {
    grid-template-columns: 1fr;
  }

  .category-header,
  .category-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 120px 120px 96px;
    gap: 16px;
    align-items: center;
  }

  .category-header {
    padding: 0 0 8px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
  }

  .category-header span:not(:first-child) {
    text-align: right;
  }

  .category-mobile-flow,
  .category-row .bar-pair {
    display: none;
  }

  .category-row {
    grid-template-columns: minmax(180px, 1fr) 120px 120px 96px;
  }

  .number-cell {
    display: block;
  }

  .resultado-table-head,
  .resultado-scope-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) 128px 82px minmax(180px, 1fr);
    gap: 14px;
    align-items: center;
  }

  .resultado-table-head {
    padding: 0 0 8px;
    border-bottom: 1px solid var(--line);
    color: var(--mut);
    font-size: 0.8rem;
    font-weight: 700;
  }

  .resultado-table-head span:not(:first-child) {
    text-align: right;
  }

  .resultado-scope-row > span:nth-child(4) {
    grid-column: auto;
    text-align: right;
  }

  .fuel-scope-head,
  .fuel-scope-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 90px minmax(130px, 0.8fr) 128px;
    gap: 14px;
    align-items: center;
  }

  .fuel-scope-head {
    padding: 0 0 8px;
    border-bottom: 1px solid var(--line);
    color: var(--mut);
    font-size: 0.8rem;
    font-weight: 700;
  }

  .fuel-scope-head span:not(:first-child),
  .fuel-scope-row > strong,
  .fuel-scope-row > span:nth-child(3),
  .fuel-scope-row > span:last-child {
    text-align: right;
  }
}

/* Round 43: one immediate, lightweight press response for every tappable surface. */
button,
a[href],
summary,
[role="button"],
[data-action],
[data-route],
[data-depot],
[data-employee],
[data-stock-doc-toggle] {
  -webkit-tap-highlight-color: transparent;
}

button:active,
a[href]:active,
summary:active,
[role="button"]:active,
[data-action]:active,
[data-route]:active,
[data-depot]:active,
[data-employee]:active,
[data-stock-doc-toggle]:active {
  background-image: linear-gradient(rgb(27 31 27 / 6%), rgb(27 31 27 / 6%));
}

@media (min-width: 1024px) {
  .fleetops-list {
    width: min(100%, 940px);
    justify-self: center;
  }

  .stock-card .stock-supplier-list,
  .stock-orders-card .stock-supplier-list,
  .stock-requests-list,
  .stock-doc-list {
    width: min(100%, 940px);
    justify-self: center;
  }
}

.service-module { display: grid; gap: 12px; }
.service-form,
.declaration-flow { display: grid; gap: 12px; }
.service-category-grid { grid-template-columns: repeat(3, 1fr); }
.service-category-grid .radio-card { min-height: 44px; padding: 8px; }
.service-backlog-head,
.service-request-meta,
.issuance-row,
.service-link-card { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.service-request-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.service-request-meta { flex-wrap: wrap; font-size: 12px; }
.service-request-main p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.service-category,
.service-status,
.days-chip { border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 700; }
.service-category { background: var(--brand-soft); color: var(--brand-deep); }
.service-status-aberto { background: #FEF4E6; color: var(--warn); }
.service-status-em_curso { background: #EEF3F7; color: #35546B; }
.service-status-resolvido { background: var(--brand-soft); color: var(--ok); }
.service-status-confirmado { background: #F0F0ED; color: var(--mut); }
.days-chip { margin-left: auto; background: #F0F0ED; color: var(--mut); font-variant-numeric: tabular-nums; }
.days-chip.late { background: #FEF0EF; color: var(--alert); }
.service-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.service-link-card { width: 100%; min-height: 72px; }
.service-link-text { display: flex; flex-direction: column; flex: 1; text-align: left; gap: 2px; }
.service-link-icon svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.service-item-list {
  display: grid;
  gap: 7px;
}

.service-item {
  width: 100%;
  min-height: 48px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  font-weight: 800;
}

.service-item.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
}

.services-page > .hint-box {
  border: 2px solid var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 1rem;
  font-weight: 900;
}
.letter-screen-preview { display: flex; gap: 8px; flex-wrap: wrap; }
.letter-print-wrap { overflow: auto; max-height: 520px; }
.letter-print { position: relative; width: 210mm; min-height: 297mm; margin: 0 auto; padding: 9mm 20mm 0; background: #fff; color: #1B1F1B; font: 11pt/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; display: flex; flex-direction: column; }
.letter-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: .6mm solid #009A44; padding-bottom: 4mm; }
.letter-brand img { display: block; width: 52mm; }
.letter-brand div { margin-top: 1.6mm; color: #0A4D28; font-size: 9pt; font-weight: 700; letter-spacing: .14em; }
.letter-meta { text-align: right; color: #6E756E; font-size: 8.5pt; }
.letter-addressee { margin-top: 7mm; font-size: 11.5pt; font-weight: 700; }
.letter-addressee span { text-decoration: underline; text-underline-offset: 2px; }
.letter-subject { margin-top: 7mm; font-size: 12pt; font-weight: 700; }
.letter-subject span { border-bottom: .5mm solid #009A44; padding-bottom: .6mm; }
.letter-body { margin-top: 6mm; text-align: justify; }
.letter-body p { margin: 0 0 3.5mm; }
.letter-date { margin-top: 5mm; text-align: right; }
.letter-signature { width: 84mm; margin: 6mm 6mm 0 auto; text-align: center; }
.letter-sign-line { width: 62mm; height: 8mm; margin: 0 auto 1.8mm; border-bottom: .35mm solid #1B1F1B; }
.letter-stamp { display: flex; align-items: center; justify-content: center; width: 52mm; height: 14mm; margin: 3mm auto 0; border: .3mm dashed #c6c4bc; border-radius: 2mm; color: #aaa; font-size: 8pt; }
.letter-nb { margin-top: 4mm; padding: 3mm 4mm; border-left: 1mm solid #009A44; background: #F3F7F3; color: #3F463F; font-size: 9pt; }
.letter-footer { margin-top: auto; padding: 3mm 0 6mm; border-top: .8mm solid #009A44; text-align: center; }
.letter-footer > div { color: #0A4D28; font-size: 10pt; font-weight: 700; letter-spacing: .08em; }
.letter-footer p { margin: 1mm 0 0; color: #3F463F; font-size: 8.8pt; }
.letter-watermark { position: absolute; top: 47%; left: 19%; transform: rotate(-28deg); color: rgb(180 35 24 / 13%); font-size: 28pt; font-weight: 800; }
.issuance-row { justify-content: space-between; padding: 8px 0; }
.issuance-meta { text-align: right; color: var(--mut); font-size: 12px; overflow-wrap: anywhere; }

@media print {
  @page { size: A4; margin: 0; }
  /* Clamp the document to one A4 page: hidden app content below the letter
     otherwise keeps its layout height and prints as trailing blank pages. */
  html,
  body,
  #app {
    height: 297mm;
    overflow: hidden;
    background: white;
  }

  body * { visibility: hidden !important; }
  .letter-print,
  .letter-print * { visibility: visible !important; }
  .letter-print-wrap { position: absolute; inset: 0; width: 210mm; height: 297mm; max-height: none; overflow: visible; border: 0; padding: 0; }
  .letter-print { width: 210mm; min-height: 297mm; margin: 0; }
}

/* Secondary functions are desktop-sidebar + Gestão-card only; a 6th bottom tab truncates labels (CONV-013). */
.bottom-nav .nav-item[data-route="resultado"],
.bottom-nav .nav-item[data-route="reparacoes"],
.bottom-nav .nav-item[data-route="equipamento"],
.bottom-nav .nav-item[data-route="despesas"],
.bottom-nav .nav-item[data-route="whatsapp"],
.bottom-nav .nav-item[data-route="brindes"],
.bottom-nav .nav-item[data-route="combustivel"] { display: none; }

/* Round 38: D hybrid visual system */
.shell-logo,
.sidebar-logo,
.login-logo {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 9px;
  object-fit: cover;
}

.login-logo {
  width: 48px;
  height: 48px;
  border-radius: 11px;
}

.avatar-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--brand);
  font-weight: 850;
  cursor: pointer;
}

.topbar {
  min-height: 66px;
  border-bottom: 0;
  background: var(--paper);
}

.topbar-title strong {
  font-size: 15px;
  line-height: 18px;
}

.topbar-title .muted {
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
}

.main-area {
  min-height: 0;
  padding: 8px 16px calc(104px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}

.content-wrap {
  width: min(940px, 100%);
}

.fab-safe-page {
  padding-right: 68px;
}

.bottom-nav {
  min-height: 72px;
  padding: 4px 4px calc(5px + env(safe-area-inset-bottom));
}

.bottom-nav .nav-item {
  min-height: 60px;
  border-radius: 12px;
  font-size: 12px;
}

.bottom-nav .nav-icon,
.bottom-nav .nav-icon svg {
  width: 24px;
  height: 24px;
}

.capture-fab {
  position: fixed;
  right: 16px;
  bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 34;
  width: 64px;
  min-width: 64px;
  height: 64px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 18px;
  background: var(--cta);
  color: #fff;
  box-shadow: 0 8px 20px rgb(232 89 12 / 32%);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.capture-fab:hover,
.capture-fab:active {
  background: var(--cta-pressed);
}

body:has(.bottom-sheet) .capture-fab,
body:has(.capture-sheet) .capture-fab {
  display: none;
}

.capture-backdrop,
.profile-scrim {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgb(20 24 20 / 42%);
}

.capture-sheet {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 50;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 -12px 40px rgb(0 0 0 / 18%);
}

.capture-head,
.capture-option {
  display: flex;
  align-items: center;
}

.capture-head {
  margin-bottom: 8px;
}

.capture-head strong {
  font-size: 18px;
}

.capture-close {
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-size: 20px;
}

.capture-option {
  width: 100%;
  min-height: 52px;
  gap: 12px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  font-size: 14px;
  font-weight: 800;
}

.capture-option:last-child {
  border-bottom: 0;
}

.capture-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--brand-soft);
  font-size: 18px;
}

.profile-sheet {
  position: fixed;
  top: max(68px, calc(env(safe-area-inset-top) + 58px));
  right: 12px;
  z-index: 50;
  width: min(310px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 12px 36px rgb(27 31 27 / 18%);
}

.profile-identity,
.profile-action {
  display: flex;
  align-items: center;
  gap: 11px;
}

.profile-identity {
  padding: 4px 4px 12px;
  border-bottom: 1px solid var(--line);
}

.profile-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 850;
}

.profile-identity strong,
.profile-identity small {
  display: block;
  overflow-wrap: anywhere;
}

.profile-identity small {
  margin-top: 2px;
  color: var(--muted);
}

.profile-action {
  width: 100%;
  min-height: 48px;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  font-weight: 750;
}

.profile-action:last-child {
  border-bottom: 0;
}

.profile-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.profile-logout {
  color: var(--alert);
}

.install-banner .primary-btn,
.install-banner .secondary-btn {
  min-height: 44px;
}

.headline-card,
.section-card,
.attention-strip,
.install-banner {
  border-radius: 14px;
  box-shadow: 0 2px 5px rgb(27 31 27 / 7%);
}

.d-hero,
.day-hero,
.regional-hero {
  border-top: 3px solid var(--brand);
}

.day-page,
.regional-page,
.national-page {
  gap: 0;
}

.day-greeting {
  display: grid;
  gap: 2px;
  margin: 2px 0 12px;
}

.day-kicker {
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 850;
}

.day-date {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.day-hero {
  display: block;
  margin-bottom: 20px;
  padding: 18px;
}

.day-hero h1,
.regional-hero h1 {
  margin: 0;
  font-size: clamp(29px, 8vw, 36px);
  line-height: 1.12;
  letter-spacing: -.035em;
  font-weight: 850;
}

.day-hero h1 span,
.regional-hero h1 span,
.hero-value.problem,
.sales-hero-value.problem {
  color: var(--alert);
}

.day-hero.is-calm h1 span,
.d-hero.is-calm .hero-value {
  color: var(--brand);
}

.day-asof {
  margin-top: 10px;
}

.day-priority {
  margin-bottom: 16px;
}

.day-priority > .finance-head,
.day-section-title {
  margin: 0 2px 8px;
}

.day-priority .region-heading,
.day-section-title h2 {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
}

.day-levers {
  padding: 4px 15px;
}

.day-lever {
  min-height: 82px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.day-lever:last-child {
  border-bottom: 0;
}

.day-more {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--brand);
  text-align: left;
  font-weight: 800;
}

.day-rank,
.regional-rank {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 12px;
  font-weight: 850;
}

.day-rank.critical,
.regional-rank.critical {
  background: var(--alert-bg);
  color: var(--alert);
}

.day-lever-copy {
  min-width: 0;
}

.day-lever-copy > span {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 14px;
  line-height: 19px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.day-severity {
  color: var(--warn);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.day-severity.critical {
  color: var(--alert);
}

.day-action {
  min-width: 70px;
  min-height: 44px;
  padding: 0 11px;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
}

.day-calm {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 10px 12px;
  border: 1px solid #cbdccd;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 13px;
  line-height: 18px;
  font-weight: 750;
}

.day-calm b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
}

.day-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.day-section-title span {
  color: var(--muted);
  font-size: 12px;
}

.day-page .home-rows {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.day-page .home-row {
  min-height: 82px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 4px 8px;
  padding: 11px;
}

.day-page .home-row-fact {
  grid-column: 1 / -1;
  text-align: left;
  white-space: normal;
  line-height: 17px;
}

.day-page .home-row .row-chevron {
  display: none;
}

.summary-chip {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid #cbdccd;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  text-align: left;
  font-size: 13px;
  font-weight: 750;
}

.summary-chip b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
}

.summary-chip .source-caption,
.summary-chip .source-badge {
  margin-left: auto;
}

.sales-hero-value,
.hero-value {
  margin: 7px 0 3px;
  color: var(--brand);
  font-size: clamp(34px, 10vw, 42px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 850;
}

.hero-copy {
  color: var(--body);
  font-size: 15px;
  line-height: 21px;
  font-weight: 650;
}

.expense-hero {
  display: grid;
  gap: 10px;
}

.expense-hero .primary-btn {
  width: 100%;
  min-height: 52px;
  font-size: 1.05rem;
}

.year-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 10px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.year-pair div:last-child {
  text-align: right;
}

.year-pair span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.year-pair strong {
  display: block;
  font-size: 19px;
  line-height: 24px;
}

.year-pair i {
  padding-bottom: 3px;
  color: var(--brand);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.fleetops-summary {
  grid-template-columns: minmax(0, 1fr) minmax(124px, auto);
}

.fleet-status {
  min-width: 0;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.fleet-status.ok { color: var(--brand); }
.fleet-status.bad { color: var(--alert); }
.fleet-status.warn { color: var(--warn); }

.fleet-detail-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  color: var(--muted);
  font-size: 12px;
}

.stock-risk-band {
  display: grid;
  gap: 6px;
}

.stock-band-title {
  margin: 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stock-band-title.risk {
  color: var(--alert);
}

.stock-risk-list {
  padding: 0 15px;
}

.regional-hero {
  position: relative;
  display: block;
  margin-bottom: 20px;
  padding: 18px;
}

.regional-hero .regional-rank {
  margin-bottom: 8px;
}

.regional-hero p {
  margin: 10px 0 0;
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 650;
}

.regional-brief-list {
  display: grid;
  gap: 9px;
  margin-bottom: 12px;
}

.regional-brief-card {
  width: 100%;
  min-height: 88px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  text-align: left;
  box-shadow: var(--shadow);
}

.regional-brief-card.worst {
  border-color: #ecc9c5;
}

.regional-brief-copy strong,
.regional-brief-copy small {
  display: block;
}

.regional-brief-copy strong {
  font-size: 16px;
}

.regional-brief-copy small {
  margin-top: 5px;
  color: var(--body);
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
}

.regional-ok {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
}

.services-page .service-request-main p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.page-action {
  width: 100%;
}

@media (min-width: 620px) {
  .capture-sheet {
    left: 50%;
    right: auto;
    width: min(440px, calc(100vw - 20px));
    transform: translateX(-50%);
  }

  .day-page .home-rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sidebar .brand-row {
    margin-bottom: 6px;
  }

  .sidebar-logo {
    width: 36px;
    height: 36px;
  }

  .main-area {
    padding: 28px 32px 88px;
  }

  .capture-fab {
    right: 28px;
    bottom: 28px;
  }

  .profile-sheet {
    top: 20px;
    right: 20px;
  }
}

.sales-bucket-block .category-row .bar-pair,
.sales-family-block .category-row .bar-pair {
  display: grid;
}

.sw-update-pill {
  position: fixed;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 6px 6px 6px 16px;
  border-radius: 22px;
  background: #0b4a26;
  color: white;
  box-shadow: 0 4px 16px rgb(11 74 38 / 22%);
  transform: translateX(-50%);
}

.sw-update-pill button {
  min-height: 44px;
  border: 0;
  border-radius: 18px;
  padding: 8px 14px;
  background: white;
  color: #0b4a26;
  font-weight: 750;
  cursor: pointer;
}

/* GOAL 19: stable sales hierarchy and delegation overlay. */
.sales-tree-page,
.sales-tree-level,
.sales-tree-children,
.sales-tree-suppliers,
.sales-products,
.sales-product-family {
  display: grid;
  gap: 10px;
}

/* Bottom padding clears the NAV *and* the floating capture button (86px up, 64px tall). The
   button is fixed, so without room to scroll past it the last rows on a screen that happens to
   fit exactly are covered with no way to reveal them - covering information is hiding it
   (CONV-144), and it hit exactly the block a region lead cares about most. */
.sales-tree-page {
  padding: 0 0 calc(160px + env(safe-area-inset-bottom));
}

/* One continuous surface with hairline dividers, not a stack of cards. Per-card borders,
   radii, shadows and 10px gaps were costing ~40px a block - two provinces' worth of screen
   spent on decoration. Blocks are separated by a single line, the way the approved mockup
   separated them. */
.sales-tree-level,
.sales-tree-page > .sales-tree-card {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.sales-tree-level {
  margin-top: 10px;
}

.sales-tree-card {
  min-width: 0;
  padding: 8px 12px 9px;
}

.sales-tree-level > .sales-tree-card + .sales-tree-card {
  border-top: 1px solid var(--line);
}

.sales-tree-root {
  background: var(--brand-soft);
}

.sales-screen-head {
  padding: 2px 2px 8px;
}

.sales-screen-head h1 {
  margin: 0;
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
}

.sales-screen-sub,
.sales-screen-legend {
  margin: 0;
  color: var(--mut);
  font-size: 12px;
  line-height: 16px;
}

.sales-screen-sub { margin-top: 2px; }
.sales-screen-legend { padding: 8px 2px 0; font-size: 12px; }

/* GOAL 25 (mockup B): the period as a first-class banner - weekday-tagged range, fine
   print names only the comparison year. Renders only on official Primavera data. */
.sales-range-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 9px 12px;
  background: var(--card, #FFFFFF);
  border: 1px solid var(--line, #E7E4DC);
  border-radius: 12px;
}

.sales-range-cal { font-size: 16px; line-height: 1; }

.sales-range-r {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sales-range-vs {
  margin-left: auto;
  color: var(--mut);
  font-size: 12px;
  line-height: 1.25;
  text-align: right;
}

/* The as-of belongs to the sub-line's register, not the badge's. */
.sales-screen-sub .source-caption {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.sales-node-head {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sales-node-head h2 {
  min-width: 0;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

/* Delegação count sits right-aligned on the title line - the mockup's "8 delegações ›". */
.sales-node-count {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--mut);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.sales-node-toggle,
.sales-depot-open {
  min-width: 0;
  min-height: 44px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.sales-node-toggle > span:first-child,
.sales-depot-open > span:first-child {
  min-width: 0;
}

.sales-depot-open-label {
  min-height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 12px;
}

.sales-tree-table-head {
  display: none;
}

.sales-tree-suppliers {
  gap: 0;
}

.sales-tree-supplier {
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.sales-tree-supplier:last-child {
  border-bottom: 0;
}

/* ONE row grammar at every level (2026-08-07): name | cases | delta in cases | bar | (pct).
   Single line, vertically centred. The NAME column flexes and wraps within itself - a long
   product name must never be truncated (CONV-144) and must not take its own line, because a
   name on a separate line stops reading as bound to the numbers beside it. */
.sales-tree-supplier-row,
.sales-product-row {
  min-width: 0;
  display: grid;
  /* The MOCKUP grid (Tiago pick, 2026-08-10): fixed name + number + pct tracks, the BAR is
     the column that flexes - it gets every spare pixel, and because all the other tracks are
     fixed, the columns line up down the whole screen at any width. A content-sized pct track
     briefly shipped here and let every row place its bar differently (his portrait
     screenshot); the fixed track works because salesPctText drops decimals at >=100%, so
     "(+3 400%)" is the widest pct and a national "187 514" the widest cx; both fit their
     tracks (CONV-144 stays satisfied - tells-audit re-proven after each width change). */
  grid-template-columns: 72px 58px 58px minmax(0, 1fr) 66px;
  align-items: center;
  gap: 0 5px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sales-cell-cx,
.sales-cell-ab,
.sales-cell-pct {
  text-align: right;
  white-space: nowrap;
}

.sales-cell-cx { font-size: 13.5px; font-weight: 500; }
.sales-cell-ab { font-size: 13.5px; font-weight: 700; }
.sales-cell-pct { font-size: 12.5px; font-weight: 700; }

/* Left-anchored bar, ALWAYS growing right; colour carries the direction (Tiago pick,
   2026-08-10, over the centre-tick diverging style). Length = absolute delta in cases
   against the screen's biggest delta (see salesBarWidth). */
.sales-bar-track {
  position: relative;
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--surface-2, #E8EBE7);
  overflow: hidden;
}

.sales-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 6px;
}

.sales-bar-fill.up { background: var(--positive, #1B7A3D); }
.sales-bar-fill.down { background: var(--danger, #B3261E); }

/* Two row sizes, and the difference is the affordance, not the taste: a row you can TAP is a
   44px thumb target; a row you only READ is 28px. Mixing them would be sloppy - what makes it
   honest is that every readout row sits under a header that IS tappable. */
.sales-tree-supplier-row {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.sales-tree-suppliers.is-tappable .sales-tree-supplier-row {
  min-height: 44px;
  padding: 6px 0;
}

.sales-tree-suppliers.is-readout .sales-tree-supplier-row {
  min-height: 28px;
  padding: 0;
}

.sales-tree-suppliers.is-readout > .sales-tree-supplier {
  border-bottom: 0;
}

/* The row is the tap target; the +/- stays a compact visual affordance. */
.sales-tree-supplier-row .sales-toggle {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  font-size: 24px;
}

.sales-tree-supplier-name,
.sales-product-name {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sales-tree-change-cell {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.sales-tree-metric {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sales-tree-metric small {
  color: var(--mut);
  font-size: 12px;
  line-height: 15px;
}

.sales-tree-metric strong,
.sales-tree-change {
  min-width: 0;
  font-size: 13px;
  line-height: 17px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.metric-positive {
  color: var(--brand);
}

.sales-tree-supplier.open > .sales-tree-supplier-row .sales-toggle-plus,
.sales-tree-card.open > .sales-node-head .sales-node-toggle .sales-toggle-plus {
  display: none;
}

.sales-tree-supplier.open > .sales-tree-supplier-row .sales-toggle-minus,
.sales-tree-card.open > .sales-node-head .sales-node-toggle .sales-toggle-minus {
  display: block;
}

.sales-tree-children {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.sales-tree-children .sales-tree-card {
  background: var(--paper);
  box-shadow: none;
}

.sales-products {
  margin: 0 0 10px;
  padding: 10px;
  border-radius: 12px;
  background: var(--paper);
}

.sales-products-source {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.sales-product-family {
  gap: 0;
}

.sales-product-family h4 {
  margin: 8px 0 3px;
  color: var(--mut);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sales-product-row {
  min-height: 40px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}

.sales-product-row:last-child {
  border-bottom: 0;
}

.sales-product-sku .sales-product-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-2, #5A646E);
  padding-left: 10px;
}

.sales-products-note {
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted, #8D97A1);
  padding: 6px 0 2px;
}

.sales-products-state {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 10px;
  color: var(--mut);
  font-size: 13px;
}

.sales-depot-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--paper);
}

.sales-overlay-head {
  min-height: 66px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
  padding: max(9px, env(safe-area-inset-top)) 12px 9px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.sales-overlay-head > span {
  color: var(--mut);
  font-size: 13px;
  font-weight: 750;
}

.sales-overlay-head > strong {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.sales-overlay-close {
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.sales-overlay-scroll {
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px calc(28px + env(safe-area-inset-bottom));
}

.sales-overlay-scroll > .page-stack {
  width: min(940px, 100%);
  margin: 0 auto;
}

/* Vendas never hides a client name or comparison value. */
.sales-tree-page .loser-name,
.sales-tree-page .loser-meta,
.sales-depot-overlay .loser-name,
.sales-depot-overlay .loser-meta {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.sales-overlay-open .capture-fab {
  display: none;
}

@media (min-width: 760px) {
  .sales-tree-table-head,
  .sales-tree-supplier-row,
  .sales-product-row {
    display: grid;
    /* Same five-column grammar as mobile, just roomier - the desktop rule used to carry the
       old four-column layout and would have kept rendering the retired shape at >=760px. */
    grid-template-columns: minmax(180px, 1fr) 110px 100px minmax(120px, 220px) 90px;
    gap: 12px;
  }

  .sales-tree-table-head {
    padding: 10px 0 7px;
    color: var(--mut);
    font-size: 12px;
    font-weight: 750;
  }

  .sales-tree-table-head span:not(:first-child) {
    text-align: right;
  }

  .sales-tree-supplier-name,
  .sales-product-name {
    grid-column: 1;
  }

  .sales-tree-change-cell,
  .sales-product-row > .sales-tree-change {
    grid-column: 4;
    grid-row: 1;
  }

  .sales-tree-metric {
    text-align: right;
  }

  .sales-tree-metric small {
    display: none;
  }

  /* The level is one surface with dividers at every width - a 12px gap here would re-open the
     card stack the mobile layout deliberately closed, and only on desktop where nobody looks. */
  .sales-tree-card {
    padding: 10px 16px 12px;
  }
}

@media (min-width: 1024px) {
  .app-shell {
    grid-template-columns: 236px 1fr;
    grid-template-rows: auto 1fr;
  }

  .sidebar {
    grid-row: 1 / 3;
  }

  .topbar {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    padding: 10px 24px;
  }

  .main-area {
    grid-column: 2;
    grid-row: 2;
  }

  .topbar-context {
    max-width: 360px;
    font-size: 14px;
    line-height: 18px;
  }
}


/* The region/province/depot TOTAL at the top of Vendas is a different KIND of thing from the
   cards under it - it is the answer, they are the breakdown. It was rendering as just another
   card, so the two read as siblings (Tiago, 2026-08-07: "needs to be better demarcated"). */
.sales-tree-page > .sales-tree-card.sales-tree-root {
  background: var(--surface-accent, #EDF3EF);
  border: 1px solid var(--positive-line, #C9DED2);
  box-shadow: none;
}

.sales-tree-card.sales-tree-root .sales-node-head h2 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

/* GOAL 25 (Hugo's ask, mockup B): the Total line is a readout - big absolute number +
   absolute delta beside the "Total" label, the delegação count pushed right. */
.sales-total-n {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

/* GOAL 25 round 1: admin-only Equipa telemetry + feedback triage. */
.team-page {
  width: min(760px, 100%);
  margin: 0 auto;
}

.team-page .page-title h1 {
  font-size: 21px;
}

.team-segments {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: #ece9e1;
}

.team-segments .segment-btn {
  border-radius: 10px;
  color: var(--mut);
}

.team-segments .segment-btn.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

.team-open-badge {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--cta);
  color: white;
  font-size: 12px;
  line-height: 1;
}

.team-usage-summary {
  display: grid;
  gap: 10px;
}

.team-usage-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.team-usage-main strong {
  font-size: 20px;
}

.team-usage-main span,
.team-usage-stats {
  color: var(--mut);
  font-size: 13px;
}

.team-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6e4de;
}

.team-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.team-progress .good { background: var(--ok); }
.team-progress .warn { background: var(--cta); }
.team-progress .bad { background: var(--alert); }

.team-usage-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.team-usage-stats strong { color: var(--ink); }
.team-usage-stats .stale,
.team-usage-stats .stale strong { color: var(--alert); }

.team-usage-table-card {
  overflow-x: auto;
  padding: 12px 14px;
}

.team-usage-grid {
  min-width: 330px;
  display: grid;
  /* Day tracks sized to the widest REAL header ("Hoje" at 12px ≈ 24px) - a 16px track let
     every label overprint its neighbour (CONV-172: fixed tracks, format shrinks to fit). */
  grid-template-columns: minmax(56px, 1fr) repeat(7, 25px) 64px;
  align-items: center;
  gap: 4px;
}

/* 360px phones: the card's inner width (~326px) must hold the whole grid with NO default
   clipping (QA r56: "Visto" cut to "Vi" until a sideways gesture nobody will make). */
@media (max-width: 374px) {
  .team-usage-grid {
    min-width: 0;
    grid-template-columns: minmax(42px, 1fr) repeat(7, 24px) 58px;
    gap: 3px;
  }
  .team-usage-head { letter-spacing: -0.5px; }
}

.team-usage-head {
  min-height: 30px;
  color: var(--mut);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-align: center;
  white-space: nowrap;
}

.team-usage-head > :first-child { text-align: left; }
.team-usage-head > :last-child { text-align: right; }

.team-usage-row {
  min-height: 44px;
  border-top: 1px solid var(--line);
}

.team-manager {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.team-manager strong,
.team-manager small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-manager strong { font-size: 12.5px; }
.team-manager small { color: var(--mut); font-size: 12px; }

.team-day {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #ebeae5;
}

.team-day.captured { background: #18763d; }
.team-day.active { background: #3ed37b; }

.team-last-seen {
  color: var(--mut);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.team-last-seen.stale {
  color: var(--alert);
  font-weight: 800;
}

.team-usage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--mut);
  font-size: 12px;
}

.team-usage-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.team-section-label,
.team-treated > summary {
  color: var(--mut);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.team-feedback-list {
  display: grid;
  gap: 10px;
}

.team-feedback-card {
  display: grid;
  gap: 7px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.team-feedback-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--mut);
  font-size: 12px;
}

.team-feedback-chip {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.team-feedback-chip.suggestion {
  background: #fff0df;
  color: #b05a10;
}

.team-feedback-chip.sales-note {
  background: #e5f0fb;
  color: #2369a9;
}

.team-feedback-who { font-size: 13px; }
.team-feedback-who span { color: var(--mut); }

.team-feedback-card p {
  margin: 0;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.45;
}

.team-feedback-photo {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--mut);
  font-size: 12px;
}

.team-feedback-photo img {
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
}

.team-feedback-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.team-feedback-actions .secondary-btn,
.team-treat-btn {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
}

.team-treat-btn {
  border: 0;
  background: var(--ok-bg);
  color: var(--ok);
}

.team-treated > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.team-treated > summary::-webkit-details-marker { display: none; }
.team-treated[open] > summary { margin-bottom: 10px; }
.team-feedback-card.treated { opacity: 0.55; }

.capture-photo-picker {
  display: grid;
  gap: 9px;
}

.capture-photo-button {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.capture-photo-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.capture-photo-confirm {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  color: var(--mut);
  font-size: 12px;
}

.capture-photo-confirm img {
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
}

@media (min-width: 620px) {
  .team-usage-grid {
    grid-template-columns: minmax(150px, 1fr) repeat(7, 20px) 86px;
    gap: 10px;
  }

  .team-day {
    width: 20px;
    height: 20px;
  }

  .team-manager strong { font-size: 13.5px; }
  .team-manager small,
  .team-last-seen { font-size: 12px; }
}

.sales-total-d {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Tiago (2026-08-11, live screenshot): the number sits CENTRED in the row, not glued to
   the "Total" label. Auto margins either side of the number+delta pair centre the group
   between the label and the count (or the card edge when there is no count). */
.sales-tree-card.sales-tree-root .sales-node-head .sales-total-n { margin-left: auto; }
.sales-tree-card.sales-tree-root .sales-node-head .sales-total-d { margin-right: auto; }

.sales-tree-card.sales-tree-root .sales-tree-supplier {
  border-bottom-color: var(--positive-line, #C9DED2);
}

/* A clear gap so the total does not read as the first item of the list below it. */
.sales-tree-page .sales-tree-level {
  margin-top: 14px;
}

/* The expand affordance is a hint, not a headline - it was rendering as a heavy green plus
   sitting at the same visual weight as the province name it belongs to. */
.sales-node-toggle .sales-toggle {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: var(--mut);
  font-size: 20px;
  font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Carros (GOAL 20). Wilco's manager view is the reference and its STRUCTURE is
   kept deliberately - map first, two tabs, the same status bands in the same
   order, the same button wording - because managers took months to learn it and
   moving things loses them (Tiago, 2026-08-07). Only the paint is ours.
   ───────────────────────────────────────────────────────────────────────────── */

.carros-page,
.carros-region-page {
  padding: 0 0 calc(160px + env(safe-area-inset-bottom));
}

.carros-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 8px;
}

.carros-kicker {
  color: var(--mut);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.carros-head h1 {
  margin: 0;
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
}

.carros-meta {
  margin-top: 1px;
  color: var(--mut);
  font-size: 12px;
  line-height: 16px;
}

/* The X the call asked for, not a small "Voltar". */
.carros-close {
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.carros-banner {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.carros-banner.red { background: #FCEBEA; border: 1px solid #F2CFCC; color: var(--danger, #B3261E); }
.carros-banner.amb { background: #FDF1DF; border: 1px solid #F0DCBE; color: #8A5200; }
.carros-banner-n { font-size: 17px; }
.carros-banner-go { margin-left: auto; font-size: 12px; font-weight: 700; opacity: 0.75; }

.carros-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  padding: 3px;
  border-radius: 12px;
  background: #EAEDE9;
}

.carros-tabs button {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--mut);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.carros-tabs button.on {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(27 31 27 / 8%);
}

/* ── Mapa tab ── */
 /* Borderless: the map is what a delegação opens for, so the chrome above it earns its
    pixels or it goes. As a card this strip cost 50px and pushed the map under the fold. */
.carros-map-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 0 2px;
}

.carros-map-ts { color: var(--brand); font-size: 12px; font-weight: 700; }

.carros-refresh {
  min-height: 40px;
  margin-left: auto;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.carros-map-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
}

/* The route summary + Fechar sit in-flow ABOVE the map (Codex QA, GOAL 23: below the
   canvas they fell under the fixed nav; floated over it, Leaflet's transformed ancestors
   hijack fixed/absolute anchoring). */
.carros-page .fleet-map-route-bar,
.carros-page .fleet-map-route-error {
  margin-bottom: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.carros-map-canvas { height: 56vh; min-height: 320px; width: 100%; }

/* ── Carros tab: Wilco's bands, in Wilco's order ── */
.carros-list {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
}

.carros-band {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.carros-band.red { background: #FCEBEA; color: var(--danger, #B3261E); }
.carros-band.amb { background: #FDF1DF; color: #8A5200; }
.carros-band.grn { background: var(--brand-soft); color: var(--brand); }
.carros-band.dlv { background: #F3EEE2; color: #7A5A00; }
.carros-band-n { margin-left: auto; font-size: 12.5px; }

.carros-car {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 10px;
}

.carros-car-main { min-width: 0; }
.carros-car + .carros-car { border-top: 1px solid var(--line); }

.carros-car-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.carros-dot { width: 9px; height: 9px; border-radius: 50%; }
.carros-dot.g { background: var(--positive, #1B7A3D); }
.carros-dot.a { background: #E8A33D; }
.carros-dot.r { background: var(--danger, #B3261E); }
.carros-dot.d { background: #A16207; }

.carros-plate { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.carros-status { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.carros-status.red { color: var(--danger, #B3261E); }
.carros-status.amb { color: #8A5200; }
.carros-status.grn { color: var(--positive, #1B7A3D); }

.carros-driver {
  padding-left: 16px;
  margin-top: 1px;
  color: var(--mut);
  font-size: 12.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.carros-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin-top: 5px;
  padding-left: 16px;
  color: var(--mut);
  font-size: 12.5px;
  font-weight: 600;
}

.carros-facts b { color: var(--ink); font-weight: 800; }
.carros-fact-late { color: #8A5200; }
.carros-fact-warn { color: #8A5200; font-weight: 800; }

.carros-note {
  margin: 6px 0 0 16px;
  padding: 7px 9px;
  border-left: 3px solid #B9C2BB;
  border-radius: 0 9px 9px 0;
  background: var(--paper);
  color: var(--mut);
  font-size: 12.5px;
  line-height: 17px;
}

.carros-note b {
  display: block;
  margin-bottom: 1px;
  color: var(--mut);
  font-size: 12px;
  font-weight: 700;
}

/* Percurso is ours, not part of the fleet app managers know - it stays a quiet link so the
   button they DO know (the reason CTA) is still the loudest thing on the card. */
.carros-route-link {
  min-height: 44px;
  margin-left: 16px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.carros-cta {
  min-height: 44px;
  max-width: 124px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

/* A stopped car with no reason is the one thing on this screen that needs a human. */
.carros-cta-urgent { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgb(15 92 49 / 10%); }
.carros-cta-update { background: #E7F0FA; border-color: #C4D8EE; color: #1D5FA8; }
.carros-cta-quiet { background: var(--card); border-color: var(--line); color: var(--ink); }

.carros-empty {
  padding: 26px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--mut);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.carros-empty span {
  display: block;
  margin-bottom: 6px;
  color: var(--positive, #1B7A3D);
  font-size: 26px;
}

/* ── the regional table: same surface grammar as Vendas ── */
.carros-colhead,
.carros-row {
  display: grid;
  /* last track fits "171 dias" + the "pior caso" header (measured; was 44px for a bare count) */
  grid-template-columns: minmax(0, 1fr) 50px 58px 64px;
  align-items: center;
  gap: 0 5px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.carros-colhead {
  padding: 2px 0 3px;
  color: var(--mut);
  font-size: 12px;
  font-weight: 700;
}

.carros-colhead span:not(:first-child) { text-align: right; }

.carros-row {
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.carros-row.is-static { cursor: default; }

.carros-depot-name {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.carros-n { text-align: right; font-size: 13px; font-weight: 700; white-space: nowrap; }
.carros-n.is-zero { color: #C2C9C4; font-weight: 600; }

.carros-badge {
  display: inline-block;
  min-width: 24px;
  padding: 1px 6px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 800;
  text-align: center;
}

.carros-badge.red { background: #FCEBEA; color: var(--danger, #B3261E); }
.carros-badge.amb { background: #FDF1DF; color: #8A5200; }

.carros-surface-solo {
  border: 1px solid #C9DED2;
  border-radius: 14px;
  background: var(--surface-accent, #EDF3EF);
}

/* ===== GOAL 23: Wilco truck markers - structure and label grammar copied from the fleet
   app's dashboard so managers see the same map language in both apps. ===== */
.truck-marker {
  position: relative;
  cursor: pointer;
}

.truck-marker svg {
  display: block;
  margin: 0 auto;
}

.truck-caixas {
  position: absolute;
  top: -16px;
  left: 24px;
  padding: 0 5px;
  border: 1.5px solid currentcolor;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
  font-size: 12px;
  font-weight: 800;
  line-height: 17px;
  white-space: nowrap;
}

/* Near-opaque, not Wilco's 0.6 alpha: over light tiles it reads the same, and an opaque
   background is what lets the contrast gate MEASURE the white text instead of guessing. */
.truck-map-label {
  position: absolute;
  top: 22px;
  left: 50%;
  padding: 2px 7px 3px;
  border-radius: 5px;
  background: rgb(45 45 45 / 92%);
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.truck-map-label.label-hidden {
  display: none;
}

.truck-map-driver {
  display: block;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
}

/* Wilco draws this line at 9px - deliberately raised to the app's own 12px type floor
   (CONV-066 cheap-Android readability outranks verbatim fidelity here); the weight and
   opacity keep Wilco's name-over-plate hierarchy. */
.truck-map-plate {
  display: block;
  color: rgb(255 255 255 / 88%);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.truck-marker.needs-attention svg {
  animation: truck-pulse-attention 2s ease-in-out infinite;
}

@keyframes truck-pulse-attention {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.truck-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #475569;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 70%), 0 2px 8px rgb(0 0 0 / 20%);
  color: #fff;
  font-weight: 700;
}

.carros-map-loading {
  padding: 40px 16px;
  color: var(--mut);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* ===== GOAL 21: product drill screen, losers contacts pattern, car ficha, map pin ===== */

/* --- Vendas bucket screen (the product drill) --- */
.sales-bucket-screen {
  z-index: 84; /* above the delegação overlay (80): the drill can open from inside it */
}

.sales-bucket-back {
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0 0 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--brand);
  font-size: 30px;
  line-height: 1;
}

.sales-bucket-screen .sales-overlay-head {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

.sales-bucket-screen .sales-overlay-head > strong {
  text-align: left;
  font-size: 17px;
}

.sales-bucket-sub {
  padding: 2px 2px 10px;
  color: var(--mut);
  font-size: 12.5px;
  font-weight: 600;
}

.sales-bucket-body {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
}

/* A button since 2026-08-10: tapping the total collapses the screen (mirror of the row that
   opened it). Min-height keeps it a thumb target without crowding the first product row. */
.sales-bucket-total {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--brand-soft);
  color: var(--ink);
  text-align: left;
  font-size: 14px;
}

.sales-bucket-total-chev {
  color: var(--mut);
  font-size: 12px;
}

.sales-bucket-total-cx {
  margin-left: auto;
  font-size: 14px;
  font-weight: 800;
}

.sales-bucket-total-d {
  font-size: 12.5px;
  font-weight: 800;
}

.sales-product-item {
  padding: 9px 14px 10px;
  border-bottom: 1px solid var(--line);
}

.sales-bucket-body > .sales-product-item:last-child {
  border-bottom: 0;
}

.sales-product-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 750;
}

.sales-product-rank {
  min-width: 18px;
  color: var(--mut);
  font-size: 12px;
  font-weight: 700;
}

.sales-product-cells {
  display: grid;
  /* Fixed pct track so product rows align down the screen; safe against the Codex QA clip
     ("(+3 400,0%)") because salesPctText drops decimals at >=100% - "(+3 400%)" fits 58px. */
  grid-template-columns: 58px 54px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 7px;
  min-height: 22px;
}

/* the shared row grammar spans use their own classes; size them for this grid */
.sales-product-cells .sales-cell-cx { font-size: 13px; text-align: right; font-weight: 750; white-space: nowrap; }
.sales-product-cells .sales-cell-ab { font-size: 12px; text-align: right; font-weight: 750; white-space: nowrap; }
.sales-product-cells .sales-cell-pct { font-size: 12.5px; text-align: right; font-weight: 800; white-space: nowrap; }

.sales-bucket-more {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--card);
  color: var(--brand);
  font-size: 14px;
  font-weight: 750;
  text-align: center;
}

/* Coca-Cola family bands: a BAND is visibly a different thing from a product row */
.sales-family-band {
  border-bottom: 1px solid var(--line);
}

.sales-family-head {
  display: block;
  width: 100%;
  padding: 9px 14px 8px 11px;
  border: 0;
  border-left: 4px solid var(--brand);
  background: var(--brand-soft);
  text-align: left;
}

.sales-family-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.sales-family-title b {
  color: var(--brand-deep);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.sales-family-count {
  color: var(--body);
  font-size: 12px;
  font-weight: 700;
}

.sales-family-chev {
  margin-left: auto;
  color: var(--brand);
  font-size: 14px;
  font-weight: 800;
}

.sales-family-sku {
  position: relative;
}

.sales-family-sku .sales-product-item {
  padding-left: 26px;
}

.sales-family-sku::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 2px;
  background: var(--brand-soft);
}

/* --- Clientes em Queda: contacts pattern --- */
.loser-drop {
  color: var(--alert);
  font-size: 13.5px;
  font-weight: 800;
}

.loser-drop small {
  font-size: 12px;
  font-weight: 750;
}

.loser-seller {
  align-self: center;
  margin-left: auto;
  padding-right: 2px;
  color: var(--mut);
  font-size: 12px;
  font-weight: 650;
}

.loser-ring {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  align-self: center;
}

.loser-ring svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loser-ring-tel {
  border: 1.5px solid var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}

.loser-ring-wa {
  border: 1.5px solid #128c4b;
  background: #e9f6ee;
  color: #128c4b;
}

.loser-detail-rows {
  display: flex;
  flex-direction: column;
  padding: 2px 14px 12px;
}

.loser-detail-row {
  display: flex;
  align-items: baseline;
  padding: 5px 0;
  font-size: 13px;
}

.loser-detail-row span {
  color: var(--body);
  font-weight: 650;
}

.loser-detail-row strong {
  margin-left: auto;
  font-weight: 750;
}

.loser-detail-row.is-fixed span,
.loser-detail-row.is-fixed strong {
  color: var(--mut);
  font-weight: 600;
}

.loser-detail-row.is-sub {
  position: relative;
  padding-left: 18px;
}

.loser-detail-row.is-sub::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
  background: var(--line);
}

/* --- Ficha do carro: FULL takeover screen (GOAL 23, mockup-locked), uniform with the
   Vendas drill/cliente grammar. Wilco's info order: stripe, plate + driver + model/km,
   coloured status text, Google Maps link, then our rows/bars/capture. --- */
.car-sheet {
  position: fixed;
  inset: 0;
  z-index: 87;
  display: flex;
  flex-direction: column;
  background: var(--card);
  overflow: hidden;
}

.car-sheet-stripe {
  flex: none;
  height: 4px;
  width: 100%;
}

.car-sheet-top {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 16px 4px 8px;
}

.car-sheet-back {
  flex: none;
  width: 44px;
  height: 44px;
  margin-top: -4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}

.car-sheet-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 18px calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto;
}

.car-sheet-ident {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.car-sheet-plate {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.car-sheet-driver {
  color: var(--body);
  font-size: 14px;
  font-weight: 650;
}

.car-sheet-model {
  margin-top: 1px;
  color: var(--mut);
  font-size: 12.5px;
  font-weight: 600;
}

.car-sheet-statusline {
  font-size: 13.5px;
  font-weight: 800;
}

.car-sheet-statusline.grn { color: #16a34a; }
.car-sheet-statusline.amb { color: #d97706; }
.car-sheet-statusline.red { color: #dc2626; }
.car-sheet-statusline.sunmi { color: #9333ea; }

.car-sheet-statusline + .car-sheet-statusline {
  margin-top: -6px;
}

.car-sheet-gmaps {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #1565c0;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.car-sheet-gmaps::before {
  content: "📍";
  font-size: 13px;
}

.car-sheet-rows {
  display: flex;
  flex-direction: column;
}

.car-sheet-row {
  display: flex;
  align-items: baseline;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.car-sheet-row span {
  color: var(--body);
  font-weight: 650;
}

.car-sheet-row b {
  margin-left: auto;
  font-size: 15px;
  font-weight: 800;
}

.car-sheet-row.is-lead b {
  font-size: 22px;
}

.car-tone-grn { color: var(--ok); }
.car-tone-red { color: var(--alert); }

.car-sheet-late {
  margin-left: 6px;
  color: var(--alert);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.car-sheet-stale {
  color: var(--mut);
  font-size: 12px;
  font-weight: 600;
}

.car-sheet-sales {
  padding: 10px 12px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.car-sheet-sales-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}

.car-sheet-sales-head b {
  font-size: 13px;
  font-weight: 800;
}

.car-sheet-sales-head span {
  margin-left: auto;
  color: var(--mut);
  font-size: 12px;
  font-weight: 650;
}

.car-sheet-sale {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 9px;
  padding: 3.5px 0;
}

.car-sheet-sale-t {
  color: var(--body);
  font-size: 12.5px;
  font-weight: 650;
}

.car-sheet-sale-bar {
  display: block;
}

.car-sheet-sale-fill {
  display: block;
  height: 12px;
  border-radius: 3px;
  background: var(--ok);
}

.car-sheet-sale-fill.neg {
  background: var(--alert);
}

.car-sheet-sale-q {
  color: var(--ok);
  font-size: 12.5px;
  font-weight: 800;
  text-align: right;
}

.car-sheet-sale-q.neg {
  color: var(--alert);
}

.car-sheet-note {
  padding: 9px 11px;
  border: 1px solid #f0e0bc;
  border-radius: 12px;
  background: #fff7e8;
}

.car-sheet-note small {
  display: block;
  margin-bottom: 3px;
  color: #8a5200;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.car-sheet-note p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 650;
}

/* Sunmi-avariada toggle: Wilco's purple row verbatim - same control managers use there. */
.car-sheet-sunmi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e9d5ff;
  border-radius: 10px;
  background: #faf5ff;
}

.car-sheet-sunmi-label {
  display: block;
  color: #581c87;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
}

.car-sheet-sunmi-sub {
  display: block;
  margin-top: 2px;
  color: #7c3aed;
  font-size: 12px;
  font-weight: 500;
}

/* The button is the 64x44 TAP TARGET; the visible 48x28 pill is drawn inside it, so the
   Wilco-sized control and the tap-floor gate both hold. */
.car-sheet-sunmi-switch {
  position: relative;
  flex: none;
  width: 64px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.car-sheet-sunmi-track {
  position: absolute;
  inset: 8px;
  border-radius: 28px;
  background: #cbd5e1;
  transition: background 0.2s;
}

.car-sheet-sunmi-switch.on .car-sheet-sunmi-track {
  background: #9333ea;
}

.car-sheet-sunmi-switch.pending {
  opacity: 0.55;
}

.car-sheet-sunmi-knob {
  position: absolute;
  top: 11px;
  left: 11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
  transition: left 0.2s;
}

.car-sheet-sunmi-switch.on .car-sheet-sunmi-knob {
  left: 31px;
}

.car-sheet-sunmi-error {
  color: var(--alert);
  font-size: 12.5px;
  font-weight: 700;
}

.car-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.car-sheet-primary {
  width: 100%;
  min-height: 50px;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 15.5px;
  font-weight: 800;
}

.car-sheet-primary.carros-cta-urgent {
  background: var(--alert);
}

.car-sheet-primary.carros-cta-update {
  background: var(--warn);
}

.car-sheet-ghost {
  width: 100%;
  min-height: 46px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--brand);
  font-size: 14px;
  font-weight: 750;
}


/* ============================================================================
   GOAL 22 (2026-08-10) - Vendas feedback round: header deltas, cliente screen,
   vendas capture sheet. Bars + row grid changes live in their original blocks.
   ========================================================================== */

/* Scope headline delta: arrow + signed pct on the same line as the title. */
.sales-head-delta {
  flex: 0 0 auto;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sales-head-delta.up { color: var(--positive, #1B7A3D); }
.sales-head-delta.down { color: var(--danger, #B3261E); }
.sales-head-delta.is-screen { font-size: 19px; margin-left: 4px; }
.sales-head-delta.is-card { font-size: 15px; }

/* The overlay title carries the delegação's delta too - keep it from wrapping badly. */
.sales-overlay-head .sales-head-delta { font-size: 13px; }

/* Cliente screen (same takeover pattern as the bucket screen). */
.client-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.client-contact-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.client-contact-copy .loser-name { font-size: 17px; }

.client-contact-driver {
  color: var(--mut);
  font-size: 13px;
}

.client-contact-rings {
  display: flex;
  align-items: center;
  gap: 10px;
}

.client-contact-rings .loser-ring {
  width: 48px;
  height: 48px;
}

.client-sec-title {
  margin: 4px 0 8px;
  color: var(--mut);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.client-sec-title + .client-sec-title,
.loser-detail-rows + .client-sec-title { margin-top: 14px; }

.sales-client-screen .loser-detail-rows { padding: 0; }

.client-split-rows {
  display: grid;
  gap: 9px;
}

.client-split-row {
  display: grid;
  grid-template-columns: 84px 52px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.client-split-name { font-weight: 700; }
.client-split-row .sales-cell-ab { text-align: right; font-weight: 700; }

/* + menu option with an explainer line (Sugestões). */
.capture-option-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.capture-option-copy small {
  color: var(--mut);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

/* Produtos deste cliente (2026-08-10): name | current | movement. */
.client-products-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.client-product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 56px;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.client-product-row .cp-name {
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.client-product-row .cp-cur {
  text-align: right;
  color: var(--mut);
}

.client-product-row .cp-delta {
  text-align: right;
  font-weight: 800;
}

/* The + as the bottom nav's centre action (2026-08-10): raised orange disc between the two
   tabs. It can never cover content, and it is the most thumb-reachable slot on the screen. */
.nav-plus {
  flex: 0 0 auto;
  justify-self: center;
  align-self: center;
  width: 54px;
  height: 54px;
  margin-top: -18px;
  border: 0;
  border-radius: 18px;
  background: var(--cta);
  color: #fff;
  box-shadow: 0 6px 16px rgb(232 89 12 / 32%);
  display: grid;
  place-items: center;
  padding: 0;
}

.nav-plus .nav-plus-mark {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.nav-plus:active {
  background: var(--cta-pressed);
}

/* Desktop capture entry lives in the sidebar (the bottom nav is mobile-only). */
.capture-side-btn {
  border: 0;
  border-radius: 12px;
  padding: 11px 14px;
  background: var(--cta);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

/* Depot page section labels (Tiago, 2026-08-10): the three zones - Produtos, Clientes em
   Queda, Motoristas - announce themselves in ONE register. Clientes/Motoristas already
   carry .region-heading inside their cards; Produtos sits above the sales block, pulled
   tight to its card so it reads as a label, not a stray line. */
.sales-section-label {
  margin: 2px 2px -8px;
}