/* VS309 Cost Comparison — brand layer on top of Trimble Modus (modus-bootstrap).
   Modus tokens: primary #0063a3, bright accent #019aeb, ink #171c1e. */
:root {
  --vs-primary: #0063a3;
  --vs-accent: #019aeb;
  --vs-ink: #171c1e;
  --vs-success: #006638;       /* Modus green */
  --vs-success-bg: #e0eccf;
  --vs-surface: #f1f1f6;       /* Modus gray-light */
  --vs-border: #cbcdd6;
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--vs-surface);
  color: var(--vs-ink);
  font-family: "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Navbar ---------- */
.app-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--vs-primary);
  color: #fff;
  padding: 10px 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.navbar-brand-wrap { display: flex; align-items: center; gap: 14px; }
.brand-logo {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  line-height: 1;
}
.brand-logo img { height: 30px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-title { font-weight: 700; font-size: 16px; }
.brand-sub { font-size: 12px; opacity: .85; }
.app-navbar .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--vs-primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.app-navbar .btn-primary:hover { background: #e6f4fd; border-color: #e6f4fd; }
.app-navbar .modus-icons { font-size: 18px; }

/* ---------- Layout ---------- */
.layout { padding: 18px; }
.inputs .card { margin-bottom: 16px; }
.card-header {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--vs-primary);
}
.card-header .modus-icons { font-size: 18px; }
.form-label { font-size: 13px; font-weight: 600; margin-bottom: 2px; }

/* ---------- Scenario rows ---------- */
.scenario-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.scenario-row input { max-width: 110px; }
.scenario-label { margin: 0; min-width: 92px; }
.scenario-row span { font-size: 13px; color: #6a6e79; }
.scenario-row .rm {
  margin-left: auto;
  border: none;
  background: transparent;
  color: #da212c;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
.scenario-row .rm:hover { color: #ab1f26; }

/* ---------- KPI tiles (from cardsHTML) ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.kpi {
  background: #fff;
  border: 1px solid var(--vs-border);
  border-left: 4px solid var(--vs-accent);
  border-radius: 8px;
  padding: 14px 16px;
}
.kpi .k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #6a6e79;
}
.kpi .v {
  font-size: 24px;
  font-weight: 800;
  color: var(--vs-primary);
  margin-top: 4px;
}
.kpi .u { font-size: 11px; color: #6a6e79; margin-top: 2px; }

/* ---------- Results table ---------- */
.block-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--vs-primary);
  margin: 6px 0 8px;
}
.results-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; border-radius: 8px; overflow: hidden; }
.results-table th, .results-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--vs-border);
  text-align: right;
}
.results-table th { background: var(--vs-primary); color: #fff; font-weight: 600; }
.results-table th:first-child, .results-table td:first-child { text-align: left; }
.results-table td.savings { color: var(--vs-success); font-weight: 700; }
.results-table .avg { background: var(--vs-success-bg); }
.results-table th.avg { background: #004f83; }

/* ---------- Footnote & status bar ---------- */
.footnote { font-size: 11px; margin-top: 14px; line-height: 1.5; }
.statusbar {
  display: flex;
  align-items: center;
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--vs-border);
  color: #6a6e79;
  font-size: 12px;
  padding: 6px 18px;
}
.statusbar .modus-icons { font-size: 16px; color: var(--vs-success); margin-right: 4px; }