/* Beacon35 Design System — v3 ops/dispatch redesign
   Tokens, typography, component classes.
   Brand: Engine Red. Themes: light (default) + dark.
   ──────────────────────────────────────────────────── */

/* ── Google Fonts: loaded via <link> in app.html ── */

/* ── Font stacks ─────────────────────────────────── */
:root {
  --b35-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --b35-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ── Brand palettes (data-brand selector) ────────── */
/* Engine Red — selected */
:root,
[data-brand="engine"] {
  --b35-primary:      #c8102e;
  --b35-primary-deep: #8a0a20;
  --b35-primary-tint: #fde7eb;
  --b35-on-primary:   #ffffff;
}
[data-brand="signal"] {
  --b35-primary:      #d75412;
  --b35-primary-deep: #a8400d;
  --b35-primary-tint: #ffeede;
  --b35-on-primary:   #ffffff;
}
[data-brand="amber"] {
  --b35-primary:      #e8a317;
  --b35-primary-deep: #a87307;
  --b35-primary-tint: #fdf2d0;
  --b35-on-primary:   #1a1208;
}

/* ── Light theme (default) ───────────────────────── */
:root,
[data-theme="light"] {
  --b35-bg:          #f5f4f1;
  --b35-bg-elev:     #ffffff;
  --b35-bg-sunken:   #eceae5;
  --b35-panel:       #ffffff;
  --b35-panel-hi:    #fafaf8;
  --b35-hairline:    #e3e1dc;
  --b35-hairline-hi: #cbc9c3;
  --b35-ink:         #0e1014;
  --b35-ink2:        #363b45;
  --b35-ink3:        #646b78;
  --b35-ink4:        #8a93a1;

  --b35-mark:        var(--b35-primary);
  --b35-mark-ink:    var(--b35-on-primary);

  --b35-ok:      #137a3a;
  --b35-warn:    #a87307;
  --b35-info:    #1d4ed8;
  --b35-bad:     #b91c1c;
  --b35-ai:      #6d28d9;

  --b35-ok-bg:   #e0f2e6;
  --b35-warn-bg: #fdf2d0;
  --b35-info-bg: #dceaff;
  --b35-bad-bg:  #fde2e2;
  --b35-ai-bg:   #ede4ff;

  --b35-neutral-fg: #363b45;
  --b35-neutral-bg: #ebe8e2;
  --b35-mark-tint:  var(--b35-primary-tint);
}

/* ── Dark theme ──────────────────────────────────── */
[data-theme="dark"] {
  --b35-bg:          #0b0d10;
  --b35-bg-elev:     #13161b;
  --b35-bg-sunken:   #070809;
  --b35-panel:       #15191f;
  --b35-panel-hi:    #1b2028;
  --b35-hairline:    #262c35;
  --b35-hairline-hi: #333b46;
  --b35-ink:         #f3f5f8;
  --b35-ink2:        #c3cad4;
  --b35-ink3:        #8893a1;
  --b35-ink4:        #5a6472;

  --b35-mark:        var(--b35-primary);
  --b35-mark-ink:    var(--b35-on-primary);

  --b35-ok:      #3fb964;
  --b35-warn:    #e8a317;
  --b35-info:    #5aa9ff;
  --b35-bad:     #ef4d4d;
  --b35-ai:      #a78bfa;

  --b35-ok-bg:   rgba(63,185,100,0.14);
  --b35-warn-bg: rgba(232,163,23,0.16);
  --b35-info-bg: rgba(90,169,255,0.16);
  --b35-bad-bg:  rgba(239,77,77,0.16);
  --b35-ai-bg:   rgba(167,139,250,0.16);

  --b35-neutral-fg: #c3cad4;
  --b35-neutral-bg: #1d232c;
  --b35-mark-tint:  rgba(200,16,46,0.14);
}

/* ── Animations ──────────────────────────────────── */
@keyframes beacon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── Base reset for redesigned app ───────────────── */
.b35-app {
  font-family: var(--b35-sans);
  color: var(--b35-ink);
  background: var(--b35-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Type ramp ───────────────────────────────────── */
.b35-display  { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.b35-h1       { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.b35-h2       { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.b35-h3       { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.b35-h4       { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.b35-body     { font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.45; }
.b35-body-sm  { font-size: 13px; font-weight: 500; line-height: 1.4; }
.b35-meta     { font-size: 12.5px; font-weight: 500; line-height: 1.35; }

.b35-label {
  font-family: var(--b35-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
}

.b35-code {
  font-family: var(--b35-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── Mono helper ─────────────────────────────────── */
.b35-mono {
  font-family: var(--b35-mono);
  letter-spacing: 0.02em;
  color: var(--b35-ink3);
}
.b35-tnum { font-feature-settings: "tnum"; }

/* ── Pill / status badge ─────────────────────────── */
.b35-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 4px;
  font-family: var(--b35-mono);
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1; white-space: nowrap;
}
.b35-pill--sm { padding: 2px 6px; font-size: 10px; }
.b35-pill--ok      { color: var(--b35-ok);   background: var(--b35-ok-bg); }
.b35-pill--warn    { color: var(--b35-warn); background: var(--b35-warn-bg); }
.b35-pill--info    { color: var(--b35-info); background: var(--b35-info-bg); }
.b35-pill--bad     { color: var(--b35-bad);  background: var(--b35-bad-bg); }
.b35-pill--ai      { color: var(--b35-ai);   background: var(--b35-ai-bg); }
.b35-pill--mark    { color: var(--b35-mark); background: var(--b35-mark-tint); }
.b35-pill--neutral { color: var(--b35-neutral-fg); background: var(--b35-neutral-bg); }

.b35-pill__dot {
  width: 6px; height: 6px; border-radius: 6px;
  background: currentColor; display: inline-block;
}

/* ── Section label ───────────────────────────────── */
.b35-section-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 6px;
  font-family: var(--b35-mono);
  font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--b35-ink3); text-transform: uppercase;
}
.b35-section-label__right {
  color: var(--b35-mark); font-weight: 600;
}

/* ── KPI tile ────────────────────────────────────── */
.b35-kpi {
  background: var(--b35-panel);
  border: 1px solid var(--b35-hairline);
  padding: 12px 14px; border-radius: 6px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.b35-kpi--dense { padding: 10px 12px; }
.b35-kpi__label {
  font-family: var(--b35-mono);
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--b35-ink3); text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.b35-kpi__value {
  font-family: var(--b35-sans);
  font-size: 30px; font-weight: 700;
  color: var(--b35-ink);
  letter-spacing: -0.02em; line-height: 1;
  font-feature-settings: "tnum";
}
.b35-kpi--dense .b35-kpi__value { font-size: 26px; }
.b35-kpi__value--ok   { color: var(--b35-ok); }
.b35-kpi__value--warn { color: var(--b35-warn); }
.b35-kpi__value--bad  { color: var(--b35-bad); }
.b35-kpi__value--mark { color: var(--b35-mark); }
.b35-kpi__sub {
  font-size: 11px; color: var(--b35-ink3);
  font-family: var(--b35-mono);
}

/* ── Button ──────────────────────────────────────── */
.b35-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--b35-mark);
  background: var(--b35-mark); color: var(--b35-mark-ink);
  border-radius: 4px; font-family: var(--b35-sans);
  cursor: pointer; letter-spacing: -0.005em;
  transition: opacity 0.12s;
  min-height: 44px;
}
.b35-btn:hover { opacity: 0.88; }
.b35-btn--sm { padding: 7px 10px; font-size: 12px; min-height: 36px; }
.b35-btn--lg { padding: 14px 18px; font-size: 15px; }
.b35-btn--block { width: 100%; }
.b35-btn--ghost {
  background: transparent; color: var(--b35-ink);
  border-color: var(--b35-hairline-hi);
}
.b35-btn--ghost:hover { background: var(--b35-bg-sunken); }
.b35-btn--danger { background: var(--b35-bad); color: #fff; border-color: var(--b35-bad); }
.b35-btn--ai     { background: var(--b35-ai);  color: #fff; border-color: var(--b35-ai); }

/* ── Signoff stamp ───────────────────────────────── */
.b35-signoff {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--b35-panel-hi);
  border: 1px dashed var(--b35-hairline-hi);
  border-radius: 4px;
}
.b35-signoff__initials {
  width: 32px; height: 32px; border-radius: 4px;
  background: var(--b35-bg-sunken);
  border: 1px solid var(--b35-hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--b35-mono); font-weight: 700;
  color: var(--b35-ink); font-size: 12px;
  flex-shrink: 0;
}
.b35-signoff__body { flex: 1; min-width: 0; }
.b35-signoff__name {
  font-size: 12px; color: var(--b35-ink); font-weight: 600;
}
.b35-signoff__role {
  color: var(--b35-ink3); font-weight: 400;
}
.b35-signoff__meta {
  font-family: var(--b35-mono);
  font-size: 10.5px; color: var(--b35-ink3);
  letter-spacing: 0.04em;
}

/* ── Row ─────────────────────────────────────────── */
.b35-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--b35-hairline);
  background: var(--b35-panel);
  border-left: 3px solid transparent;
}
.b35-row--dense { padding: 10px 16px; }
.b35-row--active { border-left-color: var(--b35-bad); }
.b35-row__body { flex: 1; min-width: 0; }

/* ── CheckRow ────────────────────────────────────── */
.b35-check-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--b35-hairline);
  background: var(--b35-panel);
}
.b35-check-row:last-child { border-bottom: none; }

.b35-checkbox {
  width: 22px; height: 22px; border-radius: 4px;
  margin-top: 1px; flex-shrink: 0;
  border: 1.5px solid var(--b35-hairline-hi);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.b35-checkbox--done {
  border-color: var(--b35-ok);
  background: var(--b35-ok);
}
.b35-checkbox--flag {
  border-color: var(--b35-bad);
  background: var(--b35-bad);
}

.b35-check-row__label {
  font-size: 13.5px; color: var(--b35-ink); font-weight: 500;
}
.b35-check-row__tap {
  font-family: var(--b35-mono);
  font-size: 10.5px; color: var(--b35-ink3);
  padding: 3px 7px;
  background: var(--b35-bg-sunken);
  border: 1px solid var(--b35-hairline);
  border-radius: 3px; letter-spacing: 0.04em;
}

/* ── Panel (desktop) ─────────────────────────────── */
.b35-panel-card {
  background: var(--b35-panel);
  border: 1px solid var(--b35-hairline);
  border-radius: 6px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.b35-panel-card__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--b35-hairline);
}
.b35-panel-card__title {
  font-size: 13.5px; font-weight: 700;
  color: var(--b35-ink); letter-spacing: -0.005em;
}
.b35-panel-card__body { min-width: 0; }

/* ── Table (desktop) ─────────────────────────────── */
.b35-table-head {
  display: grid; gap: 14px;
  padding: 8px 14px;
  background: var(--b35-bg-sunken);
  border-bottom: 1px solid var(--b35-hairline);
  font-family: var(--b35-mono);
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--b35-ink3); text-transform: uppercase;
}
.b35-table-row {
  display: grid; gap: 14px; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--b35-hairline);
  border-left: 3px solid transparent;
  font-size: 13px; color: var(--b35-ink);
}
.b35-table-row:last-child { border-bottom: none; }
.b35-table-row--active { border-left-color: var(--b35-bad); }
.b35-table-row__cell {
  min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ── Status header (mobile) ──────────────────────── */
.b35-status-header {
  background: var(--b35-bg-sunken);
  color: var(--b35-ink3);
  border-bottom: 1px solid var(--b35-hairline);
  font-family: var(--b35-mono);
  font-size: 10.5px; letter-spacing: 0.04em;
  padding-top: 0; /* no iOS status bar padding in web */
}
.b35-status-header__inner {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px 6px;
}
.b35-status-header__dot {
  width: 6px; height: 6px; border-radius: 6px;
  flex-shrink: 0;
}
.b35-status-header__dot--online {
  background: var(--b35-ok);
  box-shadow: 0 0 0 2px var(--b35-ok-bg);
}
.b35-status-header__dot--offline {
  background: var(--b35-bad);
  box-shadow: 0 0 0 2px var(--b35-bad-bg);
}
.b35-status-header__dept {
  color: var(--b35-ink2); font-weight: 600;
}
.b35-status-header__sep { color: var(--b35-ink4); }
.b35-status-header__conn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.b35-status-header__conn--offline { color: var(--b35-bad); }

/* ── App bar (mobile) ────────────────────────────── */
.b35-app-bar {
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--b35-hairline);
  background: var(--b35-bg-elev);
  display: flex; align-items: flex-end; gap: 12px;
}
.b35-app-bar--big { padding: 14px 16px 16px; }
.b35-app-bar__body { flex: 1; min-width: 0; }
.b35-app-bar__sub {
  font-family: var(--b35-mono);
  font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--b35-ink3); text-transform: uppercase;
  margin-bottom: 2px;
}
.b35-app-bar__title {
  font-size: 20px; font-weight: 700;
  color: var(--b35-ink); letter-spacing: -0.015em;
}
.b35-app-bar--big .b35-app-bar__title { font-size: 24px; }

/* ── Tab bar (mobile bottom) ─────────────────────── */
.b35-tab-bar {
  border-top: 1px solid var(--b35-hairline);
  background: var(--b35-bg-elev);
  display: flex;
  padding: 8px 4px 22px;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 100;
}
.b35-tab-bar__item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  padding: 6px 0;
  color: var(--b35-ink3);
  border-top: 2px solid transparent;
  margin-top: -9px;
  cursor: pointer;
  background: none; border-left: none; border-right: none; border-bottom: none;
  font-family: var(--b35-mono);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.b35-tab-bar__item--active {
  color: var(--b35-mark);
  border-top-color: var(--b35-mark);
  font-weight: 700;
}

/* ── Sidebar (desktop) ───────────────────────────── */
.b35-sidebar {
  width: 232px; flex-shrink: 0;
  background: var(--b35-bg-elev);
  border-right: 1px solid var(--b35-hairline);
  display: flex; flex-direction: column;
  height: 100vh;
  position: fixed; left: 0; top: 0; bottom: 0;
  z-index: 90;
}
.b35-sidebar__logo {
  padding: 14px 16px;
  border-bottom: 1px solid var(--b35-hairline);
  display: flex; align-items: center; gap: 8px;
}
.b35-sidebar__logo-mark {
  width: 28px; height: 28px; border-radius: 4px;
  background: var(--b35-mark); color: var(--b35-mark-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  flex-shrink: 0;
}
.b35-sidebar__logo-text {
  font-size: 14px; font-weight: 800;
  color: var(--b35-ink); letter-spacing: -0.01em;
}
.b35-sidebar__logo-text span { color: var(--b35-mark); }
.b35-sidebar__nav {
  flex: 1; overflow-y: auto; padding: 8px 8px;
}
.b35-sidebar__group { margin-bottom: 8px; }
.b35-sidebar__group-label {
  font-family: var(--b35-mono);
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--b35-ink4); text-transform: uppercase;
  padding: 10px 8px 6px;
}
.b35-sidebar__item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 4px;
  color: var(--b35-ink2); font-size: 13px; font-weight: 500;
  cursor: pointer; border: none; background: none;
  width: 100%; text-align: left;
  font-family: var(--b35-sans);
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: background 0.08s;
}
.b35-sidebar__item:hover {
  background: var(--b35-bg-sunken);
  color: var(--b35-ink);
}
.b35-sidebar__item--active {
  background: var(--b35-mark-tint);
  color: var(--b35-mark);
  border-left-color: var(--b35-mark);
  font-weight: 600;
}
.b35-sidebar__item-label { flex: 1; }
.b35-sidebar__user {
  padding: 10px 12px;
  border-top: 1px solid var(--b35-hairline);
  display: flex; align-items: center; gap: 10px;
}
.b35-sidebar__user-initials {
  width: 32px; height: 32px; border-radius: 4px;
  background: var(--b35-bg-sunken);
  border: 1px solid var(--b35-hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--b35-mono); font-weight: 700;
  color: var(--b35-ink); font-size: 12px;
  flex-shrink: 0;
}
.b35-sidebar__user-name {
  font-size: 12.5px; color: var(--b35-ink);
  font-weight: 600; letter-spacing: -0.005em;
}

/* ── Top bar (desktop) ───────────────────────────── */
.b35-top-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; height: 54px;
  border-bottom: 1px solid var(--b35-hairline);
  background: var(--b35-bg-elev);
}
.b35-top-bar__search {
  flex: 1; max-width: 480px;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: var(--b35-bg-sunken);
  border: 1px solid var(--b35-hairline);
  border-radius: 4px; color: var(--b35-ink3);
  font-size: 13px; cursor: text;
}
.b35-top-bar__search-shortcut {
  margin-left: auto;
  font-family: var(--b35-mono);
  font-size: 10px; color: var(--b35-ink4);
}
.b35-top-bar__spacer { flex: 1; }

.b35-top-bar__conn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 4px;
  font-family: var(--b35-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em;
}
.b35-top-bar__conn--online {
  background: var(--b35-ok-bg); color: var(--b35-ok);
}
.b35-top-bar__conn--offline {
  background: var(--b35-bad-bg); color: var(--b35-bad);
}

.b35-top-bar__active-call {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 4px;
  background: var(--b35-bad-bg);
  color: var(--b35-bad);
  border: 1px solid var(--b35-bad);
  font-family: var(--b35-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em;
}
.b35-top-bar__active-call .b35-pulse-dot {
  animation: beacon-pulse 1.2s ease-in-out infinite;
}

/* ── Pulse dot (reusable) ────────────────────────── */
.b35-pulse-dot {
  width: 6px; height: 6px; border-radius: 6px;
  display: inline-block; flex-shrink: 0;
}
.b35-pulse-dot--animated {
  animation: beacon-pulse 1.2s ease-in-out infinite;
}

/* ── Active incident ticker (mobile, full bleed) ── */
.b35-active-ticker {
  background: var(--b35-bad);
  color: #fff;
  padding: 10px 16px 12px;
}

/* ── Active incident card (Field Pro style) ──────── */
.b35-active-card {
  background: var(--b35-panel);
  border: 1px solid var(--b35-hairline);
  border-radius: 8px;
  border-left: 4px solid var(--b35-bad);
  padding: 12px 14px;
}

/* ── Quick tile (Field Pro dashboard) ────────────── */
.b35-quick-tile {
  background: var(--b35-panel);
  border: 1px solid var(--b35-hairline);
  border-radius: 6px;
  padding: 12px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.b35-quick-tile:hover { border-color: var(--b35-hairline-hi); }
.b35-quick-tile__icon {
  width: 36px; height: 36px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.b35-quick-tile__icon--mark { background: var(--b35-mark-tint); color: var(--b35-mark); }
.b35-quick-tile__icon--bad  { background: var(--b35-bad-bg);  color: var(--b35-bad); }
.b35-quick-tile__icon--warn { background: var(--b35-warn-bg); color: var(--b35-warn); }
.b35-quick-tile__icon--neutral { background: var(--b35-bg-sunken); color: var(--b35-ink2); }
.b35-quick-tile__label {
  font-size: 13px; color: var(--b35-ink);
  font-weight: 600; letter-spacing: -0.005em;
}

/* ── Action row ──────────────────────────────────── */
.b35-action-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--b35-hairline);
  background: var(--b35-panel);
}
.b35-action-row:last-child { border-bottom: none; }
.b35-action-row__rule {
  width: 3px; align-self: stretch;
  border-radius: 2px; margin-top: 2px;
  flex-shrink: 0;
}
.b35-action-row__rule--bad  { background: var(--b35-bad); }
.b35-action-row__rule--warn { background: var(--b35-warn); }
.b35-action-row__rule--info { background: var(--b35-info); }

.b35-action-row__title {
  font-size: 13.5px; color: var(--b35-ink);
  font-weight: 600; letter-spacing: -0.005em;
}

/* ── Call row (incident list item) ────────────────── */
.b35-call-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--b35-hairline);
  background: var(--b35-panel);
}
.b35-call-row:last-child { border-bottom: none; }

.b35-type-block {
  width: 38px; height: 38px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--b35-mono);
  font-weight: 700; font-size: 10px;
  letter-spacing: 0.04em; flex-shrink: 0;
}
.b35-type-block--bad  { background: var(--b35-bad-bg);  color: var(--b35-bad); }
.b35-type-block--warn { background: var(--b35-warn-bg); color: var(--b35-warn); }
.b35-type-block--info { background: var(--b35-info-bg); color: var(--b35-info); }
.b35-type-block--ok   { background: var(--b35-ok-bg);   color: var(--b35-ok); }

/* ── Inc row (full incident list item) ───────────── */
.b35-inc-row {
  display: flex; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--b35-hairline);
  background: var(--b35-panel);
  border-left: 3px solid transparent;
}
.b35-inc-row--active { border-left-color: var(--b35-bad); }

.b35-inc-row__type-block {
  width: 44px; min-width: 44px; height: 44px; border-radius: 4px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--b35-mono); font-weight: 700;
}
.b35-inc-row__type { font-size: 10px; letter-spacing: 0.04em; }
.b35-inc-row__code { font-size: 9px; opacity: 0.7; }
.b35-inc-row__addr {
  font-size: 14px; font-weight: 600; color: var(--b35-ink);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.b35-inc-row__city {
  font-size: 12px; color: var(--b35-ink3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.b35-inc-row__footer {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; flex-wrap: wrap;
}
.b35-inc-row__signed {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--b35-ok);
  font-family: var(--b35-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
}

/* ── Day header (incident list) ──────────────────── */
.b35-day-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px 6px;
  background: var(--b35-bg-sunken);
  border-top: 1px solid var(--b35-hairline);
  border-bottom: 1px solid var(--b35-hairline);
  font-family: var(--b35-mono);
  font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--b35-ink3);
}
.b35-day-header__label {
  font-weight: 600; color: var(--b35-ink2);
}

/* ── Section group (truck check) ─────────────────── */
.b35-section-group { margin-top: 16px; }
.b35-section-group__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px;
  background: var(--b35-bg-sunken);
  border-top: 1px solid var(--b35-hairline);
  font-family: var(--b35-mono);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--b35-ink2); font-weight: 700;
  cursor: pointer;
}
.b35-section-group__header--collapsed {
  border-bottom: 1px solid var(--b35-hairline);
}
.b35-section-group__status { display: inline-flex; align-items: center; gap: 6px; }
.b35-section-group__body { /* container for check rows within a section group */ }

/* ── Reading (truck check) ───────────────────────── */
.b35-reading {
  padding: 8px 10px;
  background: var(--b35-bg-sunken);
  border: 1px solid var(--b35-hairline);
  border-radius: 4px;
}
.b35-reading__value {
  font-family: var(--b35-mono);
  font-size: 16px; font-weight: 700;
  color: var(--b35-ink);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}
.b35-reading__unit {
  font-size: 10px; color: var(--b35-ink3); font-weight: 500;
}

/* ── Member row (roster) ─────────────────────────── */
.b35-member-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--b35-hairline);
  background: var(--b35-panel);
}
.b35-member-row:last-child { border-bottom: none; }

.b35-avatar {
  width: 42px; height: 42px; border-radius: 4px;
  background: var(--b35-bg-sunken);
  border: 1px solid var(--b35-hairline);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--b35-mono);
  font-size: 13px; font-weight: 700;
  color: var(--b35-ink); flex-shrink: 0;
}
.b35-avatar__dot {
  position: absolute; bottom: -3px; right: -3px;
  width: 12px; height: 12px; border-radius: 12px;
  border: 2px solid var(--b35-panel);
}
.b35-avatar__dot--ok   { background: var(--b35-ok); }
.b35-avatar__dot--mark { background: var(--b35-mark); }
.b35-avatar__dot--info { background: var(--b35-info); }
.b35-avatar__dot--warn { background: var(--b35-warn); }
.b35-avatar__dot--neutral { background: var(--b35-ink4); }

.b35-member-row__name {
  font-size: 14px; color: var(--b35-ink);
  font-weight: 600; letter-spacing: -0.005em;
}
.b35-member-row__warn {
  margin-top: 6px; display: flex; align-items: center; gap: 5px;
  font-family: var(--b35-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── Shift stat (roster) ─────────────────────────── */
.b35-shift-stat {
  background: var(--b35-panel);
  border: 1px solid var(--b35-hairline);
  border-radius: 4px;
  padding: 8px; text-align: center;
}
.b35-shift-stat__value {
  font-family: var(--b35-sans);
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}

/* ── Tab row ─────────────────────────────────────── */
.b35-tabs {
  display: flex; gap: 16px;
  border-bottom: 1px solid var(--b35-hairline);
}
.b35-tab {
  padding: 8px 0 8px;
  border-bottom: 2px solid transparent;
  color: var(--b35-ink3);
  font-size: 13.5px; font-weight: 500;
  cursor: pointer; background: none; border-top: none;
  border-left: none; border-right: none;
  font-family: var(--b35-sans);
  display: flex; align-items: center; gap: 6px;
}
.b35-tab--active {
  color: var(--b35-ink);
  border-bottom-color: var(--b35-mark);
  font-weight: 600;
}

/* ── Unit card (truck check desktop) ─────────────── */
.b35-unit-card {
  background: var(--b35-panel);
  border: 1px solid var(--b35-hairline);
  border-radius: 6px; padding: 12px 14px;
  position: relative;
}
.b35-unit-card--active {
  border-color: var(--b35-mark);
  box-shadow: inset 0 0 0 1px var(--b35-mark);
}

/* ── Progress bar ────────────────────────────────── */
.b35-progress {
  height: 6px; border-radius: 6px;
  background: var(--b35-bg-sunken);
  border: 1px solid var(--b35-hairline);
  overflow: hidden;
}
.b35-progress__fill { height: 100%; }
.b35-progress__fill--mark { background: var(--b35-mark); }
.b35-progress__fill--ok   { background: var(--b35-ok); }
.b35-progress__fill--warn { background: var(--b35-warn); }
.b35-progress__fill--bad  { background: var(--b35-bad); }

/* ── Filter chips ────────────────────────────────── */
.b35-chip {
  padding: 5px 10px; border-radius: 4px;
  font-size: 11.5px; font-family: var(--b35-mono);
  font-weight: 600; letter-spacing: 0.04em;
  border: 1px solid var(--b35-hairline);
  background: var(--b35-panel);
  color: var(--b35-ink2);
  white-space: nowrap; text-transform: uppercase;
  cursor: pointer;
}
.b35-chip--active {
  border-color: var(--b35-mark);
  background: var(--b35-mark-tint);
  color: var(--b35-mark);
}

/* ── AI narrative card ───────────────────────────── */
.b35-ai-card {
  padding: 12px 14px;
  background: var(--b35-panel-hi);
  border: 1px dashed var(--b35-ai);
  border-radius: 4px;
}
.b35-ai-card__eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--b35-ai);
  font-family: var(--b35-mono);
  font-size: 10.5px; font-weight: 700;
  margin-bottom: 4px;
}
.b35-ai-card__body {
  font-size: 13px; color: var(--b35-ink2);
  line-height: 1.55;
}

/* ── NERIS timeline ──────────────────────────────── */
.b35-timeline {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; margin-top: 10px;
}
.b35-timeline__step { position: relative; text-align: left; padding-right: 14px; }
.b35-timeline__dot {
  width: 14px; height: 14px; border-radius: 14px;
  margin-bottom: 6px;
}
.b35-timeline__dot--done {
  background: var(--b35-ok);
  border: 2px solid var(--b35-ok);
}
.b35-timeline__dot--active {
  background: var(--b35-bad);
  border: 2px solid var(--b35-bad);
  animation: beacon-pulse 1.2s ease-in-out infinite;
}
.b35-timeline__dot--pending {
  background: var(--b35-bg-sunken);
  border: 2px solid var(--b35-hairline-hi);
}
.b35-timeline__connector {
  position: absolute; top: 6px; left: 14px; right: 14px;
  height: 2px;
}
.b35-timeline__connector--done { background: var(--b35-ok); }
.b35-timeline__connector--pending { background: var(--b35-hairline); }

.b35-timeline__label {
  font-family: var(--b35-mono);
  font-size: 10px; color: var(--b35-ink3);
  letter-spacing: 0.04em;
}
.b35-timeline__value {
  font-family: var(--b35-mono);
  font-size: 13px; font-weight: 700;
  font-feature-settings: "tnum";
}
.b35-timeline__value--pending { color: var(--b35-ink4); }

/* ── Field (detail view) ─────────────────────────── */
.b35-field__label {
  font-family: var(--b35-mono);
  font-size: 9.5px; color: var(--b35-ink3);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.b35-field__value {
  font-size: 13.5px; color: var(--b35-ink);
  font-weight: 500; margin-top: 1px;
  letter-spacing: -0.005em;
}
.b35-field__value--mono {
  font-family: var(--b35-mono);
  font-weight: 600;
}

/* ── Desktop layout ──────────────────────────────── */
.b35-desktop-shell {
  display: flex; height: 100vh;
}
.b35-desktop-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  margin-left: 232px; /* sidebar width */
}
.b35-desktop-content {
  flex: 1; min-height: 0; overflow: auto;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
  .b35-sidebar { display: none; }
  .b35-desktop-main { margin-left: 0; }
  .b35-top-bar { display: none; }
  .b35-tab-bar { display: flex; }
}
@media (min-width: 901px) {
  .b35-tab-bar { display: none; }
  .b35-status-header { display: none; }
  .b35-app-bar { display: none; }
}

/* ═══════════════════════════════════════════════════
   LEGACY BRIDGE — map old app.css vars to new tokens
   so ALL existing components automatically use the
   new palette. No .b35-app scope needed.
   ═══════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  /* Backgrounds */
  --bg-primary:   var(--b35-bg);
  --bg-card:      var(--b35-panel);
  --bg-input:     var(--b35-panel);
  --bg-hover:     var(--b35-panel-hi);
  --bg-section:   var(--b35-bg-sunken);
  --bg-checkbox:  var(--b35-bg-sunken);
  /* Text */
  --text-primary:   var(--b35-ink);
  --text-secondary: var(--b35-ink2);
  --text-muted:     var(--b35-ink3);
  --text-light:     var(--b35-ink4);
  /* Borders */
  --border-color: var(--b35-hairline);
  --border-light: var(--b35-hairline-hi);
  /* Accent (brand) */
  --accent-primary: var(--b35-primary);
  --accent-hover:   var(--b35-primary-deep);
  --accent-light:   var(--b35-primary-tint);
  /* Shadows — hairlines, not shadows per design spec */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  /* Radius — tighter per spec */
  --radius: 6px;
}

[data-theme="dark"] {
  --bg-primary:   var(--b35-bg);
  --bg-card:      var(--b35-panel);
  --bg-input:     var(--b35-panel);
  --bg-hover:     var(--b35-panel-hi);
  --bg-section:   var(--b35-bg-sunken);
  --bg-checkbox:  var(--b35-bg-sunken);
  --text-primary:   var(--b35-ink);
  --text-secondary: var(--b35-ink2);
  --text-muted:     var(--b35-ink3);
  --text-light:     var(--b35-ink4);
  --border-color: var(--b35-hairline);
  --border-light: var(--b35-hairline-hi);
  --accent-primary: var(--b35-primary);
  --accent-hover:   var(--b35-primary-deep);
  --accent-light:   var(--b35-mark-tint);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* ── Legacy layout adjustments ───────────────────── */
/* Mobile tab bar clearance */
.b35-app #app {
  padding-bottom: 80px;
}
@media (min-width: 901px) {
  .b35-app #app { padding-bottom: 0; }
}

/* Hide legacy footer when new shell is active (sidebar has nav) */
.b35-app .app-footer { display: none; }

/* Legacy .btn-primary uses new brand */
.btn-primary {
  background: var(--b35-primary);
  border-color: var(--b35-primary);
}
.btn-primary:hover {
  background: var(--b35-primary-deep);
  border-color: var(--b35-primary-deep);
}

/* Legacy body font → new sans stack */
body {
  font-family: var(--b35-sans);
}