:root {
  --bg: #1b2430;
  --surface: #ffffff;
  --surface-card: #f8fafc;
  --ink: #0b1220;
  --ink2: #455260;
  --line: #c4cfda;
  --line2: #dfe5ec;
  --primary: #0f172a;
  --accent: #0a5fa4;
  --accent2: #084c84;
  --ok: #0e7a3c;
  --okBg: #e2f5e9;
  --okLine: #9bd4b2;
  --warn: #8f4e00;
  --warnBg: #fff0d9;
  --warnLine: #e8be7e;
  --bad: #b01515;
  --badBg: #fce6e6;
  --badLine: #eba5a5;
  --r: 14px;
  --font:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  background: #1b2430;
  font-family: var(--font);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
  min-height: 100vh;
}

/* Header Navbar */

.navbar {
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
  max-width: none;
  min-height: 60px;
  /* background: rgba(17, 24, 39, 0.85); */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* border-radius: var(--r); */
  /* border: 1px solid var(--line2); */
  border-bottom: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  /* padding: 8px 18px;
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08); */
}

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

.brand-badge {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px var(--accent-glow);
}

.brand-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-sub {
  color: #0a5fa4;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding-top: 2px;
}

.pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  animation: pulseDot 2s infinite ease-in-out;
}

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

.user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid var(--line2);
  padding: 5px 12px;
  border-radius: 12px;
  min-width: 0;
}

.user-avatar {
  font-size: 13px;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.user-name {
  font-weight: 700;
  font-size: 12.5px;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.user-role {
  font-size: 10px;
  font-weight: 600;
  color: #7fb3e0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-logout {
  background: var(--badBg);
  color: var(--bad);
  border: 1px solid var(--badLine);
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.btn-logout:hover {
  background: var(--bad);
  color: #fff;
  border-color: var(--bad);
}
.logout-icon {
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .navbar {
    padding: 8px 12px;
    gap: 6px;
  }
  .brand-title {
    font-size: 14px;
  }
  /* .brand-sub {
    display: none;
  } */
  .user-pill {
    padding: 5px 9px;
    gap: 6px;
  }
  .user-name {
    max-width: 108px;
  }
  .btn-logout {
    padding: 7px 9px;
  }
  .logout-text {
    display: none;
  }
}

/* Layout Containers */
.container {
  width: 100%;
  max-width: 1200px;
  flex: 1;
}

/* Responsive Dual Grid View (Desktop & Mobile 390px Viewport) */
.wizard-grid {
  display: grid;
  /* grid-template-columns: 1fr 410px; */
  gap: 24px;
  align-items: start;
}
@media (max-width: 960px) {
  .wizard-grid {
    grid-template-columns: 1fr;
  }
}

/* 390px Phone Container matching Figma layout */
#phone {
  width: 390px;
  height: 800px;
  background: var(--surface);
  border-radius: 34px;
  overflow: hidden;
  box-shadow:
    0 0 0 9px #0a0f16,
    0 26px 60px rgba(0, 0, 0, 0.55);
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
#app {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}

/* Chrome Header & Scaffolding */
.chrome {
  width: 100%;
  max-width: 430px;
  color: #dce4ed;
  text-align: center;
}
.chrome-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8da2b8;
}
.chrome-sub {
  font-size: 13px;
  color: #8da2b8;
  margin-top: 4px;
  line-height: 1.5;
}

.topbar {
  height: 56px;
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line2);
}
.topbar.dark {
  background: #101a26;
  border-bottom-color: #263444;
}
.iconbtn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  cursor: pointer;
}
.btn-back-wizard {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  background: #334155 !important;
  color: #f8fafc !important;
  border: 1px solid #475569 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.btn-back-wizard:hover {
  background: #0a5fa4 !important;
  border-color: #38bdf8 !important;
}
.iconbtn:active {
  background: var(--line2);
}
.iconbtn svg {
  width: 22px;
  height: 22px;
  stroke: var(--ink);
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar.dark .iconbtn svg {
  stroke: #e4ebf2;
}
.topmeta {
  flex: 1;
  text-align: center;
  padding-right: 44px;
  min-width: 0;
}
.topmeta .t {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar.dark .topmeta .t {
  color: #fff;
}
.topmeta .p {
  font-size: 12px;
  color: var(--ink2);
  font-weight: 600;
  margin-top: 2px;
}
.topbar.dark .topmeta .p {
  color: #8fa6bc;
}
.progress {
  height: 5px;
  flex: 0 0 5px;
  background: var(--line2);
}
.progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.22s ease;
}
.scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: auto;
  padding: 18px;
}
/* Full-bleed bar behind the action dock. The shadow lives here rather than
   on .dock so it always spans the whole screen width (and paints over the
   scrolling content), instead of tracking whatever the buttons inside
   happen to measure. */
.dock-shadow {
  flex: 0 0 auto;
  width: 100%;
  background: var(--surface);
  /* border-top: 1px solid var(--line2); */
  /* Pin the action bar to the bottom of the viewport as the page scrolls,
     so the technician never has to hunt for it - this only takes effect
     on layouts (like #desktopWizardContainer) where the wizard renders
     into the normal page flow instead of the fixed-height #phone frame. */
  position: sticky;
  bottom: 0;
  z-index: 20;
  box-shadow:
    0 -6px 18px rgba(0, 0, 0, 0.18),
    0 -1px 0 var(--line2);
}
.dock {
  flex: 0 0 auto;
  width: 100%;
  padding: 0;
  background: var(--surface);
  /* border-top: 1px solid var(--line2); */
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
}
/* Wrapped dock: the wrapper owns the sticky positioning, border and shadow,
   so the inner .dock is just the button stack. */
.dock-shadow > .dock {
  position: static;
  box-shadow: none;
  border-top: 0;
  z-index: auto;
  padding: 12px 14px;
  margin-top: 14px;
}

/* Desktop wizard card. The dock has to break out of this card's padding,
   otherwise the bar (and its shadow) is only as wide as the buttons and
   leaves a white gutter down both sides - see .dock-shadow below. */
#desktopWizardContainer {
  --wiz-pad: 24px;
  background: var(--surface);
  padding: var(--wiz-pad);
  border-radius: var(--r);
  /* border: 1px solid var(--line2); */
}
/* No overflow:hidden on the card - it would turn the card into a scroll
   container and kill the dock's position:sticky. The dock rounds its own
   bottom corners to match the card instead. */
#desktopWizardContainer .dock-shadow {
  margin: 0 calc(-1 * var(--wiz-pad)) calc(-1 * var(--wiz-pad));
  width: auto;
  border-bottom-left-radius: var(--r);
  border-bottom-right-radius: var(--r);
  overflow: hidden;
}
#desktopWizardContainer .dock-shadow > .dock {
  padding: 14px var(--wiz-pad);
}

/* Wizard Typography & Controls */
.q {
  font-size: 23px;
  line-height: 1.24;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--ink);
}
.qhint {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink2);
  margin-bottom: 16px;
}
.h2 {
  font-size: 19px;
  font-weight: 750;
  margin-bottom: 10px;
}
.eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink2);
  margin-bottom: 8px;
}
.body {
  font-size: 15px;
  line-height: 1.5;
}
.muted {
  color: var(--ink2);
}
.center {
  text-align: center;
}
.divider {
  height: 1px;
  background: var(--line2);
  margin: 16px 0;
}

/* Choice & Row Buttons */
.btn {
  width: 100%;
  /* min-height: 56px; */
  border-radius: var(--r);
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  text-align: center;
  border: 0;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.15s ease;
}
.btn:active {
  transform: scale(0.985);
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:active {
  background: var(--accent2);
}
.btn-ghost {
  background: transparent;
  color: var(--accent);
  min-height: 44px;
  font-size: 14.5px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.btn-outline {
  background: var(--surface);
  border: 2px solid var(--line);
  color: var(--ink);
}
.btn-danger {
  background: var(--bad);
  color: #fff;
}
.btn-ghost-danger {
  background: transparent;
  color: var(--bad);
  min-height: 44px;
  font-size: 14.5px;
}
.btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}
/* Momentary state while a button's own click handler is awaiting an API
   call - see guardButtonClick() in js/utils/dom.js. Reuses the existing
   [disabled] dimming plus a small spinner so a slow request reads as
   "working" rather than "unresponsive". */
.btn.is-loading {
  position: relative;
  color: transparent !important;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-top-color: #fff;
  animation: btn-spin 0.7s linear infinite;
}
.btn-outline.is-loading::after,
.btn-ghost.is-loading::after,
.btn-ghost-danger.is-loading::after {
  border-color: rgba(0, 0, 0, 0.25);
  border-top-color: var(--ink);
}
@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Standalone loading spinner (pack generation, etc.) - reuses btn-spin */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line2);
  border-top-color: var(--ink);
  animation: btn-spin 0.7s linear infinite;
}

.header-btn {
  width: auto !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.choice {
  width: 100%;
  min-height: 64px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 650;
  text-align: left;
  line-height: 1.3;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  border: 2px solid var(--line);
  cursor: pointer;
}
.choice.sel {
  border-color: var(--accent);
  background: #eaf3fa;
}
.choice .dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2.5px solid var(--line);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.choice.sel .dot {
  border-color: var(--accent);
  background: var(--accent);
}
.choice.sel .dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

/* Inline Photo Prompt Rows */
.prow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 11px;
  border: 1.5px solid var(--line2);
  background: var(--surface);
  margin-bottom: 7px;
}
.prow .pico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: 0 0 auto;
  background: #eaf3fa;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prow .pico svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent);
  stroke-width: 2.3;
  fill: none;
}
.prow .ptxt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prow .plabel {
  font-size: 14.5px;
  font-weight: 700;
}
.prow .pstate {
  font-size: 12px;
  color: var(--ink2);
  font-weight: 600;
}
.prow.got {
  border-color: var(--okLine);
  background: var(--okBg);
}
.prow.got .pico {
  background: var(--ok);
}
.prow.got .pico svg {
  stroke: #fff;
}
.prow .pbtn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  border: 0;
  cursor: pointer;
}

/* Voice STT Rows */
.vrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 11px;
  border: 1.5px solid var(--line2);
  background: var(--surface);
  margin-bottom: 7px;
}

.vrow .vs {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 2.5px solid var(--line);
}
.vrow.got {
  border-color: var(--okLine);
  background: var(--okBg);
}
.vrow.got .vs {
  background: var(--ok);
  border-color: var(--ok);
}
.vrow.got .vs {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vrow.got .vs::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}
.vrow .vt {
  flex: 1;
  font-size: 14.5px;
  font-weight: 650;
}
.vrow .vv {
  display: block;
  font-size: 13px;
  color: var(--ok);
  font-weight: 650;
  margin-top: 2px;
}

.vrow.sec-row {
  align-items: flex-start;
}
.vrow.sec-row .vs {
  margin-top: 1px;
}

.vrow.sec-row:not(.got):not(.current) .vv {
  color: var(--muted, #8a8f98);
  font-weight: 600;
}

.vrow.current {
  border-color: var(--accent);
  background: rgba(10, 95, 164, 0.06);
}
.vrow.current .vs {
  background: var(--accent);
  border-color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 750;
}
.vrow.current .vv {
  color: var(--accent);
}

.bigmic {
  width: 100%;
  /* min-height: 68px; */
  border-radius: var(--r);
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 10px 18px;
}

.dock-row {
  display: flex;
  align-items: stretch;
  gap: 9px;
}
.dock-row .bigmic,
.dock-row > .btn {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}
.bigmic svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
  stroke-width: 2.4;
  fill: none;
}
.bigmic.rec {
  background: var(--bad);
}
.bigmic-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.bigmic-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bigmic-title {
  font-size: 14.5px;
  font-weight: 750;
  line-height: 1.2;
}
.bigmic-sub {
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0.85;
  line-height: 1.2;
}

.tx {
  background: var(--surface);
  border: 2px solid var(--line2);
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 15.5px;
  line-height: 1.5;
  min-height: 80px;
  margin-bottom: 12px;
}
.tx.live {
  border-color: var(--bad);
}
.tx[contenteditable="true"] {
  cursor: text;
}
.tx[contenteditable="true"]:focus {
  outline: none;
  border-color: var(--accent, var(--line2));
}
.tx[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  opacity: 0.55;
}
.tx-disabled {
  color: var(--muted, #8a8f98);
  background: var(--bg2, var(--surface));
  cursor: not-allowed;
}
.bigmic:disabled,
.bigmic[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.voice-parse-status {
  display: block;
  font-size: 12.5px;
  color: var(--muted, #8a8f98);
  margin-bottom: 8px;
}

/* Cards & Check Items */
.card {
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 12px;
}
.card.tight {
  padding: 10px 12px;
}
.callout {
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1.5px solid;
}
.callout .ct {
  font-size: 14.5px;
  font-weight: 800;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.callout .cb {
  font-size: 13.5px;
  line-height: 1.45;
}
.c-warn {
  background: var(--warnBg);
  border-color: var(--warnLine);
  color: var(--warn);
}
.c-bad {
  background: var(--badBg);
  border-color: var(--badLine);
  color: var(--bad);
}
.c-ok {
  background: var(--okBg);
  border-color: var(--okLine);
  color: var(--ok);
}
.c-info {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: var(--accent);
  color: var(--accent);
}

/* --- PM approval: form replica (paper-form layout, tabs, stamp) --- */
.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.form .fh {
  background: var(--primary);
  color: #fff;
  padding: 11px 13px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.form .fsub {
  background: var(--line2);
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink2);
  border-top: 1px solid var(--line2);
}
.form .fr {
  display: flex;
  border-top: 1px solid var(--line2);
  font-size: 14.5px;
}
.form .fk {
  width: 48%;
  padding: 10px 11px;
  background: var(--surface-card);
  font-weight: 650;
  color: var(--ink2);
  line-height: 1.35;
  border-right: 1px solid var(--line2);
}
.form .fv {
  flex: 1;
  padding: 10px 11px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.form .fr.flag .fv {
  color: var(--warn);
  background: var(--warnBg);
}
.form .fr.good .fv {
  color: var(--ok);
  background: var(--okBg);
}
/* "View" button on a PM review Photos row - opens the section's photo
   gallery modal (see photoGalleryModal.js). */
.form .fv .pm-photo-view-btn {
  margin-left: 8px;
  padding: 3px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.form .fv .pm-photo-view-btn:hover {
  background: var(--accent);
  color: #fff;
}
/* Auto-refresh status indicator next to the pm-review topbar's "⟳ Refresh"
   button (see renderPmReviewScreen) - "● Live" while the 5s poll is
   running, "○ Paused" once the viewer has clicked Refresh themselves. */
.pm-refresh-status {
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.pm-refresh-status.live {
  color: var(--ok);
}
.pm-refresh-status.paused {
  color: var(--warn);
}

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.tabs button {
  flex: 1;
  min-height: 50px;
  border-radius: 11px;
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-size: 14.5px;
  font-weight: 750;
  cursor: pointer;
}
.tabs button.on {
  /* Same blue accent as .jobs-list-tabs button.on (job list's In
     Progress/Upcoming/Completed tabs) so the two tab bars read as one
     design language instead of the old white/black active pill here. */
  background: #0a5fa4;
  border: 2px solid #38bdf8;
  color: #fff;
  box-shadow: 0 4px 12px rgba(10, 95, 164, 0.4);
}
/* count of flagged rows inside a tab, so the PM sees which stage needs a look
   without opening each one */
.tabs button .tab-flag {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--warn);
  white-space: nowrap;
}
.tabs button.on .tab-flag {
  color: #fff;
}

.stamp {
  border: 3px solid var(--ok);
  color: var(--ok);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-bottom: 14px;
}
.stamp .code {
  font-size: 32px;
  font-weight: 850;
  letter-spacing: 0.05em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.rowline {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1.5px solid var(--line2);
  border-radius: 12px;
  margin-bottom: 8px;
  text-align: left;
  border: 1.5px solid var(--line2);
  cursor: pointer;
}
.rowline .rl {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rowline .k {
  font-size: 13px;
  color: var(--ink2);
  font-weight: 650;
}
.rowline .v {
  font-size: 15.5px;
  font-weight: 700;
}
.rowline .remark {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink2);
  white-space: normal;
}
.rowline .edit {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
}
.rowline.miss {
  border-color: var(--badLine);
  background: var(--badBg);
}
.rowline.vfill {
  border-left: 3px solid var(--ok);
}

/* Voice-fill markers, tags, gap/recap counters */
.vfill-note {
  color: var(--ok);
}
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink2);
  background: var(--line2);
  border-radius: 6px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.vcount {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 750;
}
.vcount .c1 {
  color: var(--ok);
}
.vcount .c2 {
  color: var(--ink2);
}

/* Shared form-control input, used by components/textInput.js.
   Consolidates the padding/border/font-size that used to be repeated as
   inline styles on every <input class="form-control"> (login fields,
   release-code fields in survey/cabling/cutover, etc). */
.form-control {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
}
.form-control:focus {
  outline: none;
  border-color: var(--accent);
}
.form-control--code {
  text-transform: uppercase;
  font-family: monospace;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 10px;
}
.form-control--code-lg {
  text-transform: uppercase;
  font-family: monospace;
  font-size: 16px;
  letter-spacing: 2px;
  padding: 12px 14px;
  min-height: 52px;
}
.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink2);
}

/* Gap question: text field with inline mic */
.field {
  position: relative;
  margin-bottom: 6px;
}
.field textarea {
  width: 100%;
  min-height: 90px;
  border: 2px solid var(--line2);
  border-radius: var(--r);
  padding: 12px 50px 12px 14px;
  font-size: 15.5px;
  font-family: inherit;
  line-height: 1.45;
  resize: vertical;
  background: var(--surface);
  color: var(--ink);
}
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.field input[type="text"] {
  width: 100%;
  border: 2px solid var(--line2);
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 15.5px;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
}
.field input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}
.field input[type="text"]:disabled {
  opacity: 0.7;
}
.field .mic {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.field .mic.rec {
  background: var(--bad);
}
.field .mic svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.3;
}
.miclabel {
  font-size: 12px;
  color: var(--ink2);
  margin: -2px 0 14px;
}

.check {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
  text-align: left;
}
.check .box {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 2.5px solid var(--line);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.check.done {
  border-color: var(--okLine);
  background: var(--okBg);
}
.check.done .box {
  background: var(--ok);
  border-color: var(--ok);
}
.check.done .box::after {
  content: "";
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.check.bad {
  border-color: var(--badLine);
  background: var(--badBg);
}
.check.locked {
  opacity: 0.55;
  pointer-events: none;
}
.check.bad .cn {
  color: var(--bad);
  font-weight: 700;
}
/* Small warning-colored pill for a qualifier on an otherwise "done"/success
   row - e.g. the 18-point test completed on an override. The row itself
   stays styled as success/good; only this label calls out the caveat. */
.badge-warn {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--warnBg);
  color: var(--warn);
  border: 1px solid var(--warnLine);
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
  white-space: nowrap;
}
/* Generic status pill - used for the jobs table's stage tag, the End Pack's
   priority/outcome fields, and the PM visit-status modal. Pairs with a
   color modifier (.b-ok/.b-warn/.b-bad) using the same --ok/--warn/--bad
   token triples as .badge-warn above. */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge.b-ok {
  background: var(--okBg);
  color: var(--ok);
  border-color: var(--okLine);
}
.badge.b-warn {
  background: var(--warnBg);
  color: var(--warn);
  border-color: var(--warnLine);
}
.badge.b-bad {
  background: var(--badBg);
  color: var(--bad);
  border-color: var(--badLine);
}
.check .ct {
  flex: 1;
  font-size: 15.5px;
  font-weight: 680;
}
.check .cn {
  display: block;
  font-size: 12.5px;
  color: var(--ink2);
  font-weight: 600;
}
.check .num {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink2);
  width: 24px;
  flex: 0 0 auto;
}

.tally {
  background: var(--primary);
  color: #fff;
  border-radius: var(--r);
  padding: 16px 14px;
  margin-bottom: 12px;
}
.tally .n {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}
.tally .u {
  font-size: 14px;
  opacity: 0.8;
  margin-top: 4px;
}
.tally .bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  margin-top: 10px;
  overflow: hidden;
}
.tally .bar i {
  display: block;
  height: 100%;
  background: #4fa3e0;
}
.tally .bar i.over {
  background: #f0a33a;
}
.tally .meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: 0.8;
  margin-top: 8px;
}
.tally .meta .over {
  opacity: 1;
  color: #f0a33a;
  font-weight: 700;
}
.tally .cost {
  font-size: 13px;
  font-weight: 700;
  color: #ffd27a;
  margin-top: 6px;
}

.map {
  position: relative;
  height: 300px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 12px;
}
.map svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pin .b {
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--bad);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border: 2px solid #fff;
}
.pin .st {
  width: 2px;
  height: 8px;
  background: #fff;
}

.sigpad {
  height: 180px;
  border: 2px dashed var(--line);
  border-radius: var(--r);
  background: var(--surface);
  position: relative;
  margin-bottom: 10px;
}
.sigpad canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12px;
}
.sigpad .ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b2;
  font-size: 15px;
  font-weight: 650;
  pointer-events: none;
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line2);
  font-size: 14.5px;
  text-transform: capitalize;
}
.kv:last-child {
  border-bottom: 0;
}
.kv .k {
  color: var(--ink2);
  font-weight: 600;
}
.kv .v {
  font-weight: 750;
  text-align: right;
}

.big-ok {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--okBg);
  border: 3px solid var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 16px;
}
.big-ok::after {
  content: "";
  width: 16px;
  height: 30px;
  border: solid var(--ok);
  border-width: 0 5px 5px 0;
  transform: rotate(45deg) translate(-1px, -3px);
}
.big-warn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--warnBg);
  border: 3px solid var(--warnLine);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 16px;
  font-size: 36px;
  font-weight: 800;
  color: var(--warn);
}

.home-tile {
  width: 100%;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  text-align: left;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.home-tile .n {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  flex: 0 0 auto;
}
.home-tile .ht {
  font-size: 17px;
  font-weight: 750;
}
.home-tile .hs {
  font-size: 13.5px;
  color: var(--ink2);
  margin-top: 2px;
}

/* Visit Stage Progress Bar Tabs */
.visit-tabs {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  background: #0f172a !important;
  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.visit-tabs.is-hidden {
  display: none !important;
}

.tab-btn {
  flex: 1 !important;
  min-height: 48px !important;
  padding: 10px 14px !important;
  text-align: center !important;
  background: #1e293b !important;
  color: #94a3b8 !important;
  border: 2px solid #334155 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.tab-btn:hover {
  border-color: #38bdf8 !important;
  color: #f8fafc !important;
  background: #334155 !important;
}

.tab-btn.active {
  background: #0a5fa4 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(10, 95, 164, 0.4) !important;
}

.tab-btn.active .badge {
  background: #10b981 !important;
  color: #ffffff !important;
}

/* Card View for Assigned Jobs */
.table-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 16px;
  color: #fff;
  gap: 12px;
}
@media (max-width: 480px) {
  .table-header {
    grid-template-columns: 1fr;
  }
  #btnRefreshJobs {
    width: 100%;
  }
}

/* Upcoming/Completed tabs above the jobs-cards grid. jobsView sits directly
   on the dark page background (body), not a white card - so this can't
   reuse .tabs (styled for the light PM-review card: an off-white pill that
   would pop but an "on" pill in var(--primary), a near-black navy almost
   the same shade as the page bg, that nearly disappears into it - actively
   the wrong way round). Mirrors the .tab-btn dark/accent pattern used for
   the visit-stage tabs instead, which is already built for this same dark
   background. */
.jobs-list-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.jobs-list-tabs button {
  flex: 1;
  min-height: 44px;
  padding: 10px 14px;
  background: #1e293b;
  color: #94a3b8;
  border: 2px solid #334155;
  border-radius: 10px;
  font-size: clamp(12px, 1.2vw + 6px, 14px);
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}
.jobs-list-tabs button:hover {
  border-color: #38bdf8;
  color: #f8fafc;
  background: #334155;
}
.jobs-list-tabs button.on {
  background: #0a5fa4;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(10, 95, 164, 0.4);
}
/* Live job count next to each tab's label (e.g. "Upcoming 4") - a
   semi-transparent white fill reads clearly against both the dark inactive
   pill and the blue active one, so it doesn't need its own on/off variant. */
.jobs-list-tabs .tab-count {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font-size: 10px;
  font-weight: 800;
}
.jobs-list-tabs button.on .tab-count {
  background: rgba(255, 255, 255, 0.28);
}

.jobs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.jobs-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  color: #8da2b8;
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: var(--r);
}
.jobs-empty.error {
  color: var(--bad);
}

.job-card {
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 14px 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.job-card:hover {
  border-color: var(--accent);
}

.jc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}
.jc-id {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
}
.jc-stage-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--okBg);
  color: var(--ok);
  border: 1px solid var(--okLine);
  white-space: nowrap;
}

.jc-site {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 2px;
}
.jc-loc {
  font-size: 12.5px;
  color: var(--ink2);
  margin-bottom: 12px;
}

.jc-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 11px;
  background: var(--surface-card);
  border-radius: 10px;
  margin-bottom: 12px;
}
.jc-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  gap: 10px;
}
.jc-meta-label {
  color: var(--ink2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.jc-meta-val {
  color: var(--ink);
  font-weight: 700;
  text-align: right;
}
.jc-status-pill.ok {
  color: var(--ok);
}
.jc-status-pill.warn {
  color: var(--warn);
}
.jc-status-pill.bad {
  color: var(--bad);
}

.jc-action {
  width: 100%;
  display: block;
  text-align: center;
  min-height: 42px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13.5px;
  border: none;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
}
.jc-action.outline {
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
}

/* Utility */
.hidden {
  display: none !important;
}

/* ── Toast / Banner Notifications ─────────────────────────────── */
#toastContainer {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 360px;
  width: calc(100vw - 32px);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 12px;
  border-left: 4px solid transparent;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.15);
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.5;
  pointer-events: all;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: toastSlideIn 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) both;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.toast.toast-hiding {
  opacity: 0;
  transform: translateX(20px);
}

.toast-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.toast-body {
  flex: 1;
  min-width: 0;
}
.toast-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}
.toast-msg {
  font-weight: 400;
  font-size: 13px;
  opacity: 0.88;
  word-break: break-word;
}
.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  opacity: 0.5;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
  transition: opacity 0.15s;
}
.toast-close:hover {
  opacity: 1;
}

/* Type variants */
.toast-success {
  background: rgba(232, 248, 240, 0.97);
  border-color: var(--ok);
  color: #0b3d20;
}
.toast-success .toast-icon::before {
  content: "✅";
}
.toast-success .toast-title {
  color: var(--ok);
}

.toast-error {
  background: rgba(253, 235, 235, 0.97);
  border-color: var(--bad);
  color: #5a0a0a;
}
.toast-error .toast-icon::before {
  content: "❌";
}
.toast-error .toast-title {
  color: var(--bad);
}

.toast-warning {
  background: rgba(255, 245, 220, 0.97);
  border-color: #c97a00;
  color: #5a3000;
}
.toast-warning .toast-icon::before {
  content: "⚠️";
}
.toast-warning .toast-title {
  color: #8f4e00;
}

.toast-info {
  background: rgba(230, 242, 255, 0.97);
  border-color: var(--accent);
  color: #0a2d54;
}
.toast-info .toast-icon::before {
  content: "ℹ️";
}
.toast-info .toast-title {
  color: var(--accent);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}