/* ============================================================
  Tremitus Industrial Monitoring - Enterprise UI
  Design language: aerospace console (Boeing / Airbus inspired)
  Deep graphite surfaces, avionics cyan accents, mono typography
  ============================================================ */

:root {
  --bg:             #090d13;
  --panel:          #0f141c;
  --panel-hdr:      #0b1017;
  --sidebar-bg:     #080c12;
  --appbar-bg:      #0a0f16;
  --border:         #1f2b39;
  --border-2:       #2e4258;
  --input-bg:       #0c1219;
  --panel-2:        #111925;
  --panel-header-bg: #101822;
  --panel-header-bg-2: #0c131b;
  --panel-header-border: #243447;
  --panel-header-accent: #3e739f;

  --text:           #b5c5d3;
  --text-strong:    #dce8f2;
  --text-soft:      #c6d4df;
  --muted:          #8095a8;
  --muted-2:        #5f7388;

  --normal:         #3b8d66;
  --normal-bg:      rgba(59, 141, 102, 0.14);
  --normal-fg:      #7cc7a3;

  --warning:        #a48232;
  --warning-bg:     rgba(164, 130, 50, 0.16);
  --warning-fg:     #d6b260;

  --critical:       #95433d;
  --critical-bg:    rgba(149, 67, 61, 0.16);
  --critical-fg:    #d9847f;

  --info:           #3e739f;
  --info-fg:        #7ab8e6;
  --accent:         #7ab8e6;
  --control-bg:     #0b121a;
  --control-hover:  #122231;
  --control-active: #8fb7d6;
  --control-active-text: #071018;

  --axis-x:         #5590ba;
  --axis-y:         #549870;
  --axis-z:         #a88840;

  --scroll-track:   #090d13;
  --scroll-track-2: #0c1219;
  --scroll-thumb:   #2e4258;
  --scroll-thumb-hover: #3e739f;
  --scroll-thumb-active: #7ab8e6;

  /* Typography system */
  --font-ui: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --font-display: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  /* Secondary "AI" accent — pairs with --accent for gradients on the
     Pattern Recognizer page only. Cyan-to-violet is a restrained
     neural/AI motif that stays inside the existing cool palette. */
  --ai-accent-2: #9d8ce6;
}

/* ===================== JETBRAINS-STYLE SCROLLBARS ===================== */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--scroll-track);
  box-shadow: inset 0 0 0 1px var(--border);
}

*::-webkit-scrollbar-thumb {
  min-height: 34px;
  min-width: 34px;
  background: var(--scroll-thumb);
  border: 2px solid var(--scroll-track);
  border-radius: 0;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background: var(--scroll-thumb-active);
}

*::-webkit-scrollbar-corner {
  background: var(--bg);
  box-shadow: inset 1px 1px 0 var(--border);
}

.table-shell,
.pagination-controls,
.ai-label-list,
.event-log,
.operations-grid {
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

.fleet-search-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 140px;
  gap: 8px;
  margin: 0 0 10px;
}

.fleet-search-input,
.fleet-page-size {
  min-height: 36px;
  width: 100%;
  background: var(--input-bg);
  color: var(--text-strong);
  border: 1px solid var(--border-2);
  border-radius: 0;
  padding: 8px 10px;
  font: 12px var(--font-ui);
  letter-spacing: 0;
}

.fleet-search-input:focus,
.fleet-page-size:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ===================== PERFORMANCE MONITOR ===================== */

.perf-monitor {
  position: fixed;
  bottom: 6px;
  right: 8px;
  z-index: 9999;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--panel-hdr) 82%, transparent);
  border: 1px solid var(--border-2);
  color: var(--muted-2);
  font-family: var(--font-ui);
  font-size: 9.5px;
  pointer-events: none;
  white-space: nowrap;
}

.metric-card strong,
.engineering-grid dd,
.selected-detail dd {
  transition: color 180ms ease, background-color 300ms ease, text-shadow 300ms ease;
}

.metric-card strong,
.engineering-grid dd,
.selected-detail dd,
.system-health-grid dd,
.detail-list dd,
.appbar-item strong,
.status-value,
.kpi-value,
.chart-stat-value,
.axis-value,
.ai-confidence-pct,
.ai-signature-meter-value,
.ai-status-value,
.fleet-table td,
.asset-table td,
.value-mono,
code,
pre {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.value-updated {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .metric-card strong,
  .engineering-grid dd,
  .selected-detail dd {
    transition: none;
  }

  .value-updated {
    text-shadow: none;
  }
}

/* ===================== SIDEBAR TOGGLE (mobile hamburger) ===================== */

.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 100%;
  min-width: 44px;
  padding: 0 12px;
  background: var(--control-bg);
  border: 0;
  border-right: 1px solid var(--border);
  color: var(--text);
  font-size: 17px;
  border-radius: 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.sidebar-toggle:hover  { background: var(--control-hover); color: var(--text-strong); }
.sidebar-toggle:active,
.sidebar-toggle[aria-expanded="true"] {
  background: var(--control-active);
  color: var(--control-active-text);
}

/* ===================== RESET / BASE ===================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  min-width: 0;
  overflow-x: hidden;
  background: var(--bg);
}

body {
  height: 100dvh;
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.startup-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg);
  color: var(--text-strong);
  transition: opacity 220ms ease, visibility 220ms ease;
}

.startup-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.startup-card {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--border-2);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
}

.startup-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--panel-header-accent);
  pointer-events: none;
}

.startup-mark {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  align-self: center;
  border: 1px solid var(--border-2);
  background: var(--control-bg);
}

.startup-pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  animation: startup-dot 1.15s ease-in-out infinite;
}

.startup-copy {
  min-width: 0;
}

.startup-kicker {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.startup-status {
  min-height: 18px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11px;
}

@keyframes startup-dot {
  0%, 100% { opacity: 0.45; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

.startup-checks {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.startup-checks span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  background: color-mix(in srgb, var(--accent) 5.5%, transparent);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.startup-checks i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--normal-fg);
  box-shadow: 0 0 12px color-mix(in srgb, var(--normal-fg) 50%, transparent);
}

.startup-signal {
  grid-column: 1 / -1;
  position: relative;
  height: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.startup-signal span {
  display: block;
  width: 34%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), color-mix(in srgb, var(--normal-fg) 78%, transparent), transparent);
  animation: startup-signal-sweep 1.65s ease-in-out infinite;
}

@keyframes startup-signal-sweep {
  0% { transform: translateX(-120%); opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateX(320%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .startup-screen,
  .startup-signal span {
    animation: none;
    transition: none;
  }
}

@media (max-width: 560px) {
  .startup-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 22px 24px;
  }

  .startup-mark {
    grid-row: auto;
    width: 72px;
    height: 72px;
  }

  .startup-checks,
  .startup-signal {
    grid-column: 1;
  }

  .startup-checks span {
    flex: 1 1 auto;
    justify-content: center;
  }
}

canvas,
img,
svg,
video,
select,
input,
button,
table {
  max-width: 100%;
}

canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

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

button {
  touch-action: manipulation;
  cursor: pointer;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Prevent layout overflow in all critical containers */
.app-shell,
.dashboard,
.appbar,
.appbar-indicators,
.operations-grid,
.panel,
.panel-header,
.panel-body,
.panel-toolbar,
.kpi-strip,
.asset-table,
.table-shell,
.chart-wrap,
.trend-grid,
.trend-subpanel,
.trend-chart-body,
.trend-chart-wrap,
.report-recorder,
.system-health-grid,
.bearing-grid,
.detail-list,
.indicator-grid {
  min-width: 0;
}

/* ===================== LAYOUT SHELL ===================== */

.app-shell {
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr);
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
}

/* ===================== SIDEBAR ===================== */

.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

.nav-list::-webkit-scrollbar {
  width: 8px;
}

.nav-list::-webkit-scrollbar-track {
  background: transparent;
  box-shadow: inset 1px 0 0 var(--border);
}

.nav-list::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 2px solid var(--sidebar-bg);
}

/* Cyan top accent */
.sidebar::before {
  content: '';
  display: block;
  flex-shrink: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--info-fg) 0%,
    color-mix(in srgb, var(--info-fg) 40%, transparent) 55%,
    transparent 100%);
}

/* ── Brand block ── */
.brand-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.brand-lockup {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 5px;
}

.brand-owner {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brand-owner[hidden] {
  display: none;
}

.brand-company,
.brand-department {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.brand-company {
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.brand-department {
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}

.brand-version {
  margin: 0;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.brand-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--normal);
  box-shadow: 0 0 6px color-mix(in srgb, var(--normal) 70%, transparent);
  flex-shrink: 0;
  margin-top: 2px;
  animation: sidebar-pulse 2.8s ease-in-out infinite;
}

@keyframes sidebar-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ── Nav structure ── */
.nav-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: var(--scroll-thumb) transparent;
}

.nav-section {
  padding-top: 10px;
}

.nav-section:first-child {
  padding-top: 6px;
}

.nav-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 14px 5px;
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nav-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.nav-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 3px 8px;
}

/* ── Nav item ── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 0;
  border: 1px solid var(--border-2);
  background: var(--control-bg);
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
  -webkit-user-select: none;
  user-select: none;
}

.nav-item + .nav-item {
  margin-top: -1px;
}

.nav-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--muted-2);
  opacity: 0.75;
  transition: color 130ms ease, opacity 130ms ease;
}

.nav-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover */
.nav-item:hover {
  background: var(--control-hover);
  border-color: var(--info);
  color: var(--text-strong);
}

.nav-item:hover .nav-item-icon {
  color: var(--info-fg);
  opacity: 1;
}

/* Active */
.nav-item.active {
  background: var(--control-active);
  border-color: var(--control-active);
  color: var(--control-active-text);
  font-weight: 800;
  box-shadow: none;
}

.nav-item.active .nav-item-icon {
  color: var(--control-active-text);
  opacity: 1;
}

/* ── Footer ── */
.sidebar-footer {
  margin-top: auto;
  padding: 10px 13px 12px;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--sidebar-bg);
}

.sidebar-footer-label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted-2);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sidebar-footer-value {
  display: block;
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.sidebar-version {
  display: block;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
  color: var(--muted-2);
  font-size: 8.5px;
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
}

/* ===================== DASHBOARD ===================== */

.dashboard {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
}

/* ===================== APPBAR ===================== */

.appbar {
  display: flex;
  align-items: stretch;
  height: 42px;
  border-bottom: 1px solid var(--border);
  background: var(--appbar-bg);
  flex-shrink: 0;
  overflow: hidden;
}

.appbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  white-space: nowrap;
}

.breadcrumb-root {
  color: var(--muted);
  font-size: 11.5px;
}

.breadcrumb-sep {
  color: var(--muted-2);
  font-size: 12px;
}

.breadcrumb-current {
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
}

.appbar-indicators {
  display: grid;
  grid-template-columns: 136px 118px minmax(180px, 1fr) 132px 132px 116px;
  align-items: stretch;
  flex: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
}

.appbar-indicators::-webkit-scrollbar {
  display: none;
}

.appbar-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 14px;
  border-left: 1px solid var(--border);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.appbar-cell:first-child {
  border-left: 0;
}

.cell-label {
  color: var(--muted-2);
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.cell-mono {
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
}

.appbar-time-cell {
  padding-right: 16px;
}

/* ===================== STATUS BADGES ===================== */

/* Appbar badges (with LED dot) */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-inline-size: 96px;
  padding: 1px 7px;
  border: 1px solid var(--border-2);
  background: var(--panel-2);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

.appbar .badge {
  min-inline-size: 104px;
}

.badge::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-2);
}

/* Status pills (inline in tables, KPI cards) */
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-inline-size: 82px;
  padding: 1px 6px;
  border: 1px solid var(--border-2);
  background: var(--panel-2);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-pill::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted-2);
}

/* Severity modifiers — shared by .badge and .status-pill */
.pill-normal {
  border-color: var(--normal);
  color: var(--normal-fg);
  background: var(--normal-bg);
}
.pill-normal::before  { background: var(--normal); }

.pill-warning {
  border-color: var(--warning);
  color: var(--warning-fg);
  background: var(--warning-bg);
}
.pill-warning::before { background: var(--warning); }

.pill-danger {
  border-color: var(--critical);
  color: var(--critical-fg);
  background: var(--critical-bg);
}
.pill-danger::before  { background: var(--critical); }

/* ===================== OPERATIONS GRID (TAB CONTAINER) ===================== */

.operations-grid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 100%;
}

/* Tab panes — hidden by default, flex column when active */
.tab-pane {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.tab-pane.active {
  display: flex;
}

/* Inner pane grids — gap-as-border technique */
.pane-grid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.pane-grid > * { min-width: 0; }

/* Sensor Fleet: keep the wide table unobstructed and place its detail panel below. */
.pane-fleet {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

/* Condition Status: kpi row spanning full width, then 2-col below */
.pane-condition {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "status status"
    "profile profile"
    "indicators indicators";
  align-content: start;
}

.pane-condition .metric-status-panel { grid-area: status; }

.pane-condition .sensor-profile-panel      { grid-area: profile; }
.pane-condition .indicators-panel     { grid-area: indicators; }

/* Configuration: thresholds are the primary working area; bearing reference supports it. */
.pane-config {
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
  flex: 0 0 auto;
  min-height: auto;
  align-content: start;
  align-items: start;
  background: transparent;
}

.pane-logs {
  /* A fixed 40/60 split made both children narrower than their controls once
     the sidebar was subtracted from the viewport. auto-fit responds to the
     space inside this pane: two columns only when each can remain useful,
     otherwise the recorder and logs stack without horizontal overflow. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 880px), 1fr));
  align-content: start;
}

.pane-logs > .panel {
  min-width: 0;
  overflow: hidden;
}

/* Panes that should fill remaining height */
.pane-fill {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Event log expands to fill pane */
.pane-event-log {
  flex: 1;
  max-height: none !important;
}

/* Chart body expands to fill pane */
.pane-chart-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px;
}

/* Chart wrap fills available space in full-pane chart views */
.pane-chart-wrap {
  flex: 1;
  height: auto !important;
  min-height: 300px;
}

/* ===================== PANEL ===================== */

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  overflow-wrap: anywhere;
}

/* Panel header bar */
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--panel-header-bg);
  border-bottom: 1px solid var(--panel-header-border);
  box-shadow: inset 3px 0 0 var(--panel-header-accent);
  flex-shrink: 0;
}

.panel-title {
  min-width: 0;
  flex-shrink: 1;
}

.panel-meta {
  min-width: 0;
  text-align: right;
  flex-shrink: 2;
}

/* Panel sub-toolbar — sits below panel-header, holds chart controls */
.panel-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 5px 12px;
  background: var(--panel-hdr);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  max-width: 100%;
  /* overflow: hidden removed — was clipping wrapped toolbar rows */
}

.panel-toolbar .chart-control-inline,
.panel-toolbar .fft-axis-field,
.panel-toolbar .fft-band-field,
.panel-toolbar .fft-band-presets,
.panel-toolbar .segmented {
  flex-shrink: 0;
  min-width: 0;
}

.panel-title {
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
}

.panel-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 1;
}

.ylock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border: 1px solid var(--border-2);
  background: var(--control-bg);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.panel-meta {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: normal;
  text-align: right;
  min-width: 0;
  line-height: 1.2;
  word-break: break-word;
}

/* Panel content padding */
.panel-body {
  padding: 10px 12px 12px;
}

.chart-panel-body {
  padding: 10px 12px;
}

/* ===================== FORM ELEMENTS ===================== */

.field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.field span {
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

input,
select {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border-2);
  background: var(--input-bg);
  color: var(--text);
  font-size: 12px;
  border-radius: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

select:not(:disabled) {
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-strong) 50%),
    linear-gradient(135deg, var(--text-strong) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

input:not(:disabled),
select:not(:disabled) {
  color: var(--text-strong);
}

input:disabled,
select:disabled {
  cursor: not-allowed;
}

input:focus,
select:focus {
  border-color: var(--info-fg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 22%, transparent);
}

input::placeholder {
  color: var(--muted-2);
  opacity: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border-2);
  background: var(--control-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 0;
  cursor: pointer;
  align-self: flex-start;
}

.btn:hover {
  background: var(--control-hover);
  border-color: var(--info);
  color: var(--text-strong);
}

.btn:active,
.btn.is-active {
  background: var(--control-active);
  border-color: var(--control-active);
  color: var(--control-active-text);
}

.btn-secondary {
  background: var(--control-bg);
  color: var(--muted);
}

.btn.is-running {
  border-color: var(--control-active);
  background: var(--control-active);
  color: var(--control-active-text);
}

/* ===================== ASSET SELECTOR ===================== */

.asset-selector {
  max-width: 300px;
  margin-bottom: 10px;
}

/* ===================== ASSET TABLE ===================== */

.table-shell {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
}

.asset-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: auto;
}

.asset-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-hdr);
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
}

.asset-table th.sortable-header {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 120ms ease, background-color 120ms ease;
}

.asset-table th.sortable-header::after {
  content: "↕";
  display: inline-block;
  margin-left: 6px;
  color: var(--muted-2);
  font-size: 10px;
}

.asset-table th.sortable-header[aria-sort="ascending"]::after { content: "↑"; color: var(--info-fg); }
.asset-table th.sortable-header[aria-sort="descending"]::after { content: "↓"; color: var(--info-fg); }
.asset-table th.sortable-header:hover,
.asset-table th.sortable-header:focus-visible {
  color: var(--text-strong);
  background: var(--control-hover);
  outline: none;
}

.asset-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 11.5px;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.asset-table tr:last-child td {
  border-bottom: 0;
}

.col-num,
.asset-table .col-num {
  text-align: right;
}

.asset-row {
  cursor: pointer;
}

.asset-row:nth-child(even) {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.asset-row:hover {
  background: color-mix(in srgb, var(--info) 6%, transparent);
}

.asset-row.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--info-fg);
}

.asset-id {
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
}

.numeric {
  font-family: var(--font-ui);
  font-size: 11px;
  text-align: right;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 6px 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--muted-2);
  font-family: var(--font-ui);
  font-size: 10px;
}

.pagination-summary {
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-2);
  background: var(--control-bg);
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-left: 1px solid var(--border-2);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.page-btn:first-child {
  border-left: 0;
}

.page-btn:hover:not(:disabled) {
  background: var(--control-hover);
  color: var(--text-strong);
}

.page-btn.is-active {
  background: var(--control-active);
  color: var(--control-active-text);
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pagination-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 28px;
  border-left: 1px solid var(--border-2);
  color: var(--muted-2);
}

.empty-cell {
  color: var(--muted);
  text-align: center !important;
  font-size: 11.5px;
  padding: 22px 10px !important;
  font-style: italic;
}

/* ===================== OFFLINE BANNER ===================== */

.warning-banner {
  margin-bottom: 10px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  border-left: 3px solid var(--warning);
  color: var(--warning-fg);
  background: var(--warning-bg);
  font-size: 11.5px;
  line-height: 1.45;
}

.hidden { display: none; }

/* ===================== DETAIL LIST ===================== */

.detail-list,
.profile-grid {
  margin: 0;
}

/* The selected-sensor panel spans the fleet width, so its facts can flow as
   compact cards instead of forming one unnecessarily tall side column. */
.selected-asset .detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.selected-asset .detail-list div,
.selected-asset .detail-list div:last-child {
  grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1.1fr);
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.detail-list div,
.profile-grid div {
  display: grid;
  grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1.1fr);
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.detail-list div:last-child,
.profile-grid div:last-child {
  border-bottom: 0;
}

.detail-list dt,
.detail-list dd,
.profile-grid dt,
.profile-grid dd {
  margin: 0;
}

.detail-list dt,
.profile-grid dt {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 600;
}

.detail-list dd,
.profile-grid dd {
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 10.5px;
  text-align: right;
  overflow-wrap: anywhere;
}

.device-config-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border-2);
  background: var(--panel-2);
}

.device-config-action.hidden {
  display: none;
}

.device-config-action > div {
  min-width: 0;
}

.device-config-action strong,
.device-config-action span {
  display: block;
}

.device-config-action strong {
  color: var(--text);
  font-size: 11px;
}

.device-config-action span {
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 10px;
  overflow-wrap: anywhere;
}

/* ===================== KPI STRIP ===================== */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--border);
}

.kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 12px 10px;
  min-height: 74px;
  background: var(--panel);
}

.kpi-label {
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.kpi-value {
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  flex: 1;
  display: flex;
  align-items: center;
}

.kpi-status {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ===================== CHARTS ===================== */

.chart-wrap {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.trend-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  min-width: 0;
}

.trend-window-field {
  min-width: 220px;
  max-width: 260px;
}

.trend-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-width: 0;
}

.trend-acceleration { order: 1; }
.trend-velocity    { order: 2; }
.trend-displacement{ order: 3; }
.trend-frequency   { order: 4; }
.trend-temperature { order: 5; }

.trend-subpanel .panel-body {
  padding: 10px;
}

.trend-chart-body {
  padding: 10px;
  min-width: 0;
  overflow: hidden;
}

.trend-chart-wrap {
  height: 360px;
  min-width: 0;
}

.chart-ma-control {
  min-width: 128px;
}

.chart-ma-control .mini-select {
  min-width: 72px;
  height: 30px;
  padding: 4px 26px 4px 8px;
}

.frequency-summary-shell {
  margin-top: 10px;
  overflow-x: auto;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-hdr) 76%, transparent);
}

.frequency-summary-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  table-layout: fixed;
}

.frequency-summary-table [id^="freqSummaryConfidence"] {
  cursor: help;
}

.freq-confidence-high {
  color: var(--normal-fg);
}

.freq-confidence-medium {
  color: var(--warning-fg);
}

.freq-confidence-low {
  color: var(--critical-fg);
}

.frequency-summary-table th,
.frequency-summary-table td {
  padding: 8px 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.frequency-summary-table th {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.frequency-summary-table th:first-child,
.frequency-summary-table td:first-child {
  width: 72px;
  text-align: left;
}

.frequency-summary-table tr:last-child th,
.frequency-summary-table tr:last-child td {
  border-bottom: 0;
}

.frequency-summary-table th:last-child,
.frequency-summary-table td:last-child {
  border-right: 0;
}

.chart-render-loader {
  position: relative;
  height: 3px;
  width: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
  opacity: 0;
  transform: scaleX(0.985);
  transform-origin: left center;
  transition: opacity 120ms ease, transform 160ms ease;
}

.chart-render-loader::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -38%;
  width: 38%;
  background: linear-gradient(90deg, transparent, var(--accent), color-mix(in srgb, var(--normal-fg) 72%, transparent), transparent);
  animation: chart-render-loader-sweep 900ms ease-in-out infinite;
}

.trend-subpanel.is-chart-updating .chart-render-loader {
  opacity: 1;
  transform: scaleX(1);
}

@keyframes chart-render-loader-sweep {
  0%   { transform: translateX(0); }
  100% { transform: translateX(365%); }
}

@media (prefers-reduced-motion: reduce) {
  .chart-render-loader,
  .chart-render-loader::before {
    transition: none;
    animation: none;
  }

  .chart-render-loader::before {
    left: 0;
    width: 100%;
    background: var(--accent);
    opacity: 0.62;
  }
}

.trend-status {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}

.trend-status.ok {
  color: var(--normal-fg);
}

.trend-status.warning {
  color: var(--warning-fg);
}

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

.trend-stats-panel {
  margin-top: 10px;
}

.trend-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 8px;
}

.trend-stats-grid > div {
  border: 1px solid var(--border);
  background: var(--panel-2);
  padding: 8px;
}

.trend-stats-grid dt,
.trend-stats-grid dd {
  margin: 0;
}

.trend-stats-grid dt {
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trend-stats-grid dd {
  margin-top: 4px;
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
}

.fft-wrap {
  height: 220px;
  margin-top: 8px;
}

/* ===================== MAINTENANCE NOTES ===================== */

.hint-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hint-list li {
  padding: 8px 10px;
  border-left: 2px solid var(--border-2);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

/* ===================== FAULT INDICATORS ===================== */

.indicator-grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.95fr) minmax(78px, 0.72fr) repeat(4, minmax(74px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 11px;
  overflow-x: auto;
}

.indicator-grid > div {
  padding: 6px 9px;
  background: var(--panel);
  min-width: 0;
  overflow-wrap: anywhere;
}

.indicator-head {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.indicator-grid > .indicator-head {
  background: var(--panel-hdr);
}

.indicator-row-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.indicator-grid > .indicator-row-label,
.indicator-grid > .indicator-metric {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.indicator-metric {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-strong);
}

.indicator-metric-repeat {
  color: transparent;
}

.indicator-spike {
  color: var(--warning-fg);
  font-weight: 800;
}

.indicator-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}

.engineering-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.engineering-grid > div {
  border: 1px solid var(--border);
  background: var(--panel-2);
  padding: 8px;
  min-width: 0;
}

.engineering-grid dt,
.engineering-grid dd {
  margin: 0;
}

.engineering-grid dt {
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.engineering-grid dd {
  margin-top: 5px;
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
}

.fft-note {
  margin: 4px 0 6px;
  padding: 7px 8px;
  border-left: 3px solid var(--border-2);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--muted);
  font-size: 11px;
}

/* ===================== FFT PANEL ===================== */

.fft-axis-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.fft-axis-field span {
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fft-axis-field select {
  width: 90px;
  padding: 2px 6px;
  font-size: 11px;
}

.fft-meta-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

.placeholder-text {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.fft-meta-right {
  text-align: right;
}

.fft-peaks {
  margin-bottom: 4px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 10.5px;
  line-height: 1.5;
}

/* ===================== CHART CONTROLS ===================== */

.chart-control-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.chart-control-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.chart-control-inline span {
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.chart-control-inline select {
  width: 64px;
  padding: 2px 6px;
  font-size: 11px;
}

.fft-band-field input {
  width: 74px;
  padding: 2px 6px;
  font-size: 11px;
}

.x-window-field input {
  width: 56px;
  padding: 2px 6px;
  font-size: 11px;
}

.x-window-presets {
  display: inline-flex;
  border: 1px solid var(--border-2);
  background: var(--control-bg);
  border-radius: 0;
}

.x-window-presets .seg-btn {
  min-width: 36px;
  padding: 3px 5px;
  font-size: 9px;
}

.fft-band-sep {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}

.fft-band-presets {
  display: inline-flex;
  border: 1px solid var(--border-2);
  background: var(--control-bg);
  border-radius: 0;
}

.fft-band-presets .seg-btn {
  min-width: 66px;
  padding: 3px 7px;
  font-size: 9.5px;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--border-2);
  background: var(--control-bg);
  border-radius: 0;
}

.seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-right: 1px solid var(--border-2);
  background: var(--control-bg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  min-width: 58px;
  min-height: 28px;
  cursor: pointer;
  border-radius: 0;
}

.seg-btn:last-child {
  border-right: 0;
}

.seg-btn:hover {
  color: var(--text-strong);
  background: var(--control-hover);
}

.seg-btn:active,
.seg-btn.is-active {
  color: var(--control-active-text);
  background: var(--control-active);
}

.chart-control-note {
  margin: 6px 0 0;
  color: var(--muted-2);
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* ===================== BEARING CALCULATOR ===================== */

.bearing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.bearing-panel .panel-meta {
  flex: 0 1 auto;
  text-align: right;
  white-space: nowrap;
}

.bearing-btn {
  align-self: end;
}

.bearing-results {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-2);
  background: var(--input-bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.9;
}

/* ===================== THRESHOLD FORM ===================== */

.threshold-form {
  display: grid;
  gap: 12px;
}

.device-config-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 1px;
  margin-bottom: 10px;
  background: var(--border);
  border: 1px solid var(--border);
}

.device-config-summary > div {
  min-width: 0;
  padding: 8px 10px;
  background: var(--panel-2);
}

.device-config-summary span {
  display: block;
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.device-config-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--text-strong);
  font-size: 11px;
  overflow-wrap: anywhere;
}

/* ── Threshold stacked layout (replaces horizontal table) ──── */
.threshold-stack {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}

.thresh-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.thresh-row:last-child {
  border-bottom: none;
}

.thresh-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.thresh-label {
  flex: 1;
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.thresh-axis {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.thresh-row-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.thresh-field-label {
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.thresh-row-inputs input[type="number"] {
  width: 110px;
  padding: 5px 7px;
  font-size: 11px;
}

.thresh-unit {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.threshold-toggle span::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-right: 6px;
  background: currentColor;
}

.threshold-toggle {
  position: relative;
  display: inline-flex;
  width: 144px;
  max-width: 100%;
  height: 24px;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.threshold-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.threshold-toggle span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-2);
  background: var(--control-bg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.threshold-toggle span::after {
  content: 'Disabled';
}

.threshold-toggle input:checked + span {
  border-color: var(--normal);
  background: var(--normal-bg);
  color: var(--normal-fg);
}

.threshold-toggle input:checked + span::after {
  content: 'Enabled';
}

.threshold-toggle input:focus-visible + span {
  outline: 2px solid var(--info-fg);
  outline-offset: 2px;
}

.compact-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--text);
  font-size: 11px;
  text-transform: none;
}

.strategy-fieldset,
.threshold-group {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border);
}

.strategy-fieldset legend,
.threshold-group legend {
  padding: 0 5px;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.strategy-fieldset {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.strategy-fieldset label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-soft);
  font-size: 11px;
}

.strategy-fieldset input {
  appearance: auto;
  -webkit-appearance: radio;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  min-width: 14px;
  margin: 0;
  padding: 0;
  accent-color: var(--info-fg);
}

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

.threshold-group {
  display: grid;
  gap: 8px;
}

.threshold-unit {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.strategy-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.threshold-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  align-items: stretch;
  gap: 10px;
}

.calibration-actions {
  display: grid;
  align-items: start;
  gap: 7px;
}

.threshold-save-actions {
  display: grid;
  align-items: start;
  gap: 7px;
}

.threshold-action-block {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}

.threshold-action-block .btn {
  width: 100%;
  min-height: 34px;
}

.calibration-readout {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.threshold-save-actions .form-note {
  max-width: none;
}

/* ============================================================
   Configuration page polish — scoped to #pane-configuration so
   .btn/.thresh-row/.threshold-toggle keep their existing look
   everywhere else they're reused across the app.
   ============================================================ */

/* Left accent bar per threshold row: green once the alarm is armed, amber
   if values are saved but the toggle is still off (a real footgun - typing
   numbers in doesn't do anything by itself). Driven by classes app.js
   toggles in updateThreshRowArmedHints() from the actual input/checkbox
   state, not guessed from CSS. */
#pane-configuration .thresh-row {
  border-left: 3px solid transparent;
  transition: border-color 200ms ease, background 200ms ease;
}

#pane-configuration .thresh-row.thresh-row-armed {
  border-left-color: var(--normal);
  background: color-mix(in srgb, var(--panel) 96%, var(--normal) 4%);
}

#pane-configuration .thresh-row.thresh-row-unarmed-configured {
  border-left-color: var(--warning);
}

#pane-configuration .thresh-row.thresh-row-unarmed-configured::after {
  content: "Values are set but this alarm is off \2014 flip the toggle to start evaluating it.";
  margin-top: 2px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
  background: var(--warning-bg);
  color: var(--warning-fg);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}

/* Toggle switch: smooth colour transition instead of an instant snap, plus
   a small sliding dot inside the existing square track so the on/off state
   reads as a real switch rather than a two-word label swap. */
#pane-configuration .threshold-toggle span {
  position: relative;
  padding-left: 14px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

#pane-configuration .threshold-toggle span::before {
  position: absolute;
  left: 8px;
  top: 50%;
  margin-right: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: left 160ms ease, background 160ms ease;
}

#pane-configuration .threshold-toggle input:checked + span::before {
  left: calc(100% - 14px);
}

/* Warning vs Alarm inputs: the focus ring colour echoes the severity each
   column feeds, reinforcing the meaning without adding more text. */
#pane-configuration .thresh-row-inputs input[type="number"]:nth-of-type(1):focus {
  border-color: var(--warning);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 45%, transparent);
}

#pane-configuration .thresh-row-inputs input[type="number"]:nth-of-type(2):focus {
  border-color: var(--critical);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--critical) 45%, transparent);
}

/* Primary vs secondary action hierarchy: Save is the commit action for the
   whole form; Calibrate is a supporting utility. Only one of them should
   read as "the" button on the page. */
#pane-configuration .threshold-save-actions .btn {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--control-bg));
  color: var(--text-strong);
  font-weight: 800;
}

#pane-configuration .threshold-save-actions .btn:hover {
  background: color-mix(in srgb, var(--accent) 28%, var(--control-bg));
  border-color: var(--accent);
}

#pane-configuration .bearing-btn {
  border-color: var(--info);
  color: var(--text-strong);
}

#pane-configuration .bearing-btn:hover {
  background: color-mix(in srgb, var(--info) 20%, var(--control-bg));
}

@media (prefers-reduced-motion: reduce) {
  #pane-configuration .thresh-row,
  #pane-configuration .threshold-toggle span,
  #pane-configuration .threshold-toggle span::before {
    transition: none;
  }
}

.metric-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  background: var(--border);
}

.metric-status-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  background: var(--panel);
}

.metric-status-row .status-pill {
  min-inline-size: 96px;
}

.metric-status-row > span:first-child {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.metric-status-row > span:last-child {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
  color: var(--text-soft);
  font-family: var(--font-ui);
  font-size: 10px;
}

.overall-health-row {
  border-left: 2px solid var(--accent);
}

.form-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.system-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.system-health-grid > div {
  min-width: 0;
  padding: 10px 11px;
  background: var(--panel);
}

.system-health-grid dt,
.system-health-grid dd {
  margin: 0;
}

.system-health-grid dt {
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.system-health-grid dd {
  margin-top: 5px;
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* ===================== REPORTS ===================== */

.report-recorder {
  display: grid;
  gap: 14px;
  container-type: inline-size;
  container-name: recording-panel;
}

.recording-steps {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(250px, 1.25fr) minmax(180px, auto);
  gap: 10px;
}

.recording-step {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}

.recording-step > div { min-width: 0; }

.recording-step-number {
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--text-strong);
  font-weight: 800;
}

.recording-step-label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.recording-step strong {
  display: block;
  color: var(--text-strong);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.recording-step select { width: 100%; }
.recording-action-step .btn { width: 100%; }

.recording-live-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}

.recording-live-banner > div { display: grid; gap: 3px; }
.recording-live-banner strong { color: var(--text-strong); font-size: 12px; }
.recording-live-banner.is-recording {
  border-color: color-mix(in srgb, var(--normal) 55%, var(--border));
  background: color-mix(in srgb, var(--normal) 8%, var(--panel));
}

.recording-indicator-dot {
  display: inline-block;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--muted-2);
}

.is-recording > .recording-indicator-dot,
.recording-live-banner.is-recording .recording-indicator-dot {
  background: var(--normal);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--normal) 55%, transparent);
  animation: recording-pulse 1.5s ease-out infinite;
}

@keyframes recording-pulse {
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

.fleet-recording-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.fleet-recording-state .recording-indicator-dot { margin-top: 0; }
.fleet-recording-state.is-recording { color: var(--normal-fg); }

.recording-details {
  border: 1px solid var(--border);
  background: var(--panel);
}

.recording-details summary {
  padding: 10px 12px;
  color: var(--text-strong);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.recording-details > .report-status-grid,
.recording-details > .recording-guide { border-inline: 0; border-bottom: 0; }

/* The recorder can occupy half or all of the Logs pane. Container queries
   make its controls respond to that real width instead of the browser width. */
@container recording-panel (max-width: 760px) {
  .recording-steps {
    grid-template-columns: 1fr;
  }

  .recording-action-step {
    align-items: stretch;
  }

  .report-status-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container recording-panel (max-width: 430px) {
  .report-status-primary {
    grid-template-columns: 1fr;
  }

  .report-file-row {
    grid-column: auto;
  }
}

.report-actions {
  display: grid;
  grid-template-columns: minmax(190px, 300px) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.report-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--border);
  border: 1px solid var(--border);
}

.report-status-grid > div {
  min-width: 0;
  padding: 10px 11px;
  background: var(--panel);
}

.report-status-grid dt,
.report-status-grid dd {
  margin: 0;
}

.report-status-grid dt {
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.report-status-grid dd {
  margin-top: 5px;
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.report-file-row {
  grid-column: span 2;
}

.report-download {
  color: var(--info-fg);
  text-decoration: none;
}

.report-download:hover {
  color: var(--text-strong);
}

.recording-guide {
  padding: 11px 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.recording-guide strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text-strong);
  font-size: 11px;
}

.recording-guide p {
  margin: 3px 0;
}

.recording-guide code {
  color: var(--info-fg);
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .threshold-groups,
  .metric-status-grid,
  .report-status-grid,
  .device-config-summary,
  .system-health-grid {
    grid-template-columns: 1fr;
  }

  .recording-steps { grid-template-columns: 1fr; }

  .strategy-fieldset {
    grid-template-columns: 1fr;
  }

  .strategy-actions,
  .threshold-actions,
  .calibration-actions,
  .threshold-save-actions,
  .report-actions {
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .report-file-row {
    grid-column: auto;
  }
}

/* ===================== EVENT LOG ===================== */

.event-panel {
  display: flex;
  flex-direction: column;
  /* No padding — header + scrollable log fill the panel */
}

.event-log {
  display: grid;
  max-height: 600px;
  overflow-y: auto;
  background: var(--panel);
}

.event-item {
  min-width: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}

.event-item:last-child {
  border-bottom: 0;
}

.event-item.pill-warning {
  border-left-color: var(--warning);
}

.event-item.pill-danger {
  border-left-color: var(--critical);
}

.event-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted-2);
  font-family: var(--font-ui);
  font-size: 9.5px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.event-msg {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.45;
}

/* ============================================================
   Logs page polish — scoped to #pane-reports IDs/classes that
   only exist on this page, so nothing here touches the Sensors
   page's pagination or any other reused component.
   ============================================================ */

/* "This list updates live" indicator next to the System Logs title. */
.live-pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--normal-fg);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--normal-fg) 55%, transparent);
  animation: live-pulse-ring 2.2s ease-out infinite;
}

@keyframes live-pulse-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--normal-fg) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 6px transparent; }
}

/* Give each severity its own colour on the actual word, not just the left
   accent bar - this is the fastest thing an engineer's eye can scan for. */
.event-item .event-sev {
  font-weight: 800;
}

.event-item.pill-normal .event-sev { color: var(--normal-fg); }
.event-item.pill-warning .event-sev { color: var(--warning-fg); }
.event-item.pill-danger .event-sev { color: var(--critical-fg); }

/* Previously only warning/danger rows had a left accent; normal rows had
   none at all, so a calm log looked "unstyled" rather than "all clear". */
.event-item.pill-normal {
  border-left-color: color-mix(in srgb, var(--normal) 55%, transparent);
}

.event-item.event-item-filtered-out {
  display: none;
}

/* Filter bar: quick severity chips + a free-text filter over whatever is
   currently loaded on this page (pagination still comes from the server,
   this just narrows what's visible without another round trip). */
.event-log-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-hdr);
}

.event-log-search {
  flex: 1 1 220px;
  min-width: 0;
  padding: 6px 9px;
  font-size: 11px;
}

.event-log-chips {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 1px;
  border: 1px solid var(--border-2);
  background: var(--border-2);
}

.event-log-chip {
  min-width: 0;
  padding: 6px 10px;
  border: 0;
  background: var(--control-bg);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.event-log-chip:hover {
  background: var(--control-hover);
  color: var(--text-strong);
}

.event-log-chip.is-active {
  background: var(--control-active);
  color: var(--control-active-text);
}

.event-log-chip-normal.is-active { background: var(--normal); color: var(--control-active-text); }
.event-log-chip-warning.is-active { background: var(--warning); color: var(--control-active-text); }
.event-log-chip-danger.is-active { background: var(--critical); color: var(--control-active-text); }

.event-log-filter-empty {
  margin: 0;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 11px;
}

.event-log-filter-empty.hidden {
  display: none;
}

/* Recorder panel: the Start/Stop button is the primary action here. */
#recordToggleBtn {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--control-bg));
  color: var(--text-strong);
  font-weight: 800;
}

#recordToggleBtn:hover {
  background: color-mix(in srgb, var(--accent) 28%, var(--control-bg));
}

#recordToggleBtn.is-active,
#recordToggleBtn.is-running {
  border-color: var(--critical);
  background: color-mix(in srgb, var(--critical) 22%, var(--control-bg));
  color: var(--critical-fg);
}

/* Recorder stat cells: a thin top accent per cell reads as a small
   instrument cluster rather than a plain definition list. */
.report-status-grid > div {
  position: relative;
  border-top: 2px solid var(--border-2);
}

/* System Logs pagination specifically (not the Sensors page, which reuses
   the same .pagination-bar/.pagination-controls markup): smooth hover/
   active transitions instead of an instant colour snap. */
#systemLogPagination .page-btn {
  transition: background 140ms ease, color 140ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .live-pulse-dot {
    animation: none;
  }
}

/* ===================== RESPONSIVE — 1400px ===================== */

@media (max-width: 1400px) {
  .trend-stats-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}

/* ===================== RESPONSIVE — 1200px ===================== */

@media (max-width: 1200px) {
  .app-shell {
    grid-template-columns: 192px minmax(0, 1fr);
  }

  .chart-wrap        { height: 300px; }
  .trend-chart-wrap  { height: 300px; }
  .trend-stats-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}

/* ===================== RESPONSIVE — 1024px (large tablet / small laptop) ===================== */

@media (max-width: 1024px) {
  /* Sidebar gets a bit narrower — still visible */
  .app-shell {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  /* Panel toolbars: allow more generous wrap spacing */
  .panel-toolbar {
    gap: 6px 10px;
    padding: 6px 10px;
  }

  /* FFT band inputs — slightly narrower */
  .fft-band-field input {
    width: 64px;
  }

  /* Tablet-width buttons are touch targets, not mouse targets - taller and
     easier to hit, not more compact. The previous rule shrank padding and
     font-size here, making the button smaller right at the breakpoint where
     fingers (not a mouse cursor) start doing the tapping. */
  .fft-band-presets .seg-btn {
    min-width: 58px;
    min-height: 36px;
    padding: 6px 8px;
  }

  .trend-stats-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .engineering-grid {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }
}

/* ===================== RESPONSIVE - 900px (tablet / mobile drawer nav) ===================== */

@media (max-width: 900px) {
  body { font-size: 12px; }

  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar-toggle {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    height: 36px;
    min-width: 44px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .sidebar {
    display: none;
    position: fixed;
    top: 8px;
    left: 8px;
    right: auto;
    z-index: 220;
    width: min(360px, calc(100vw - 16px));
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    flex-direction: column;
    border: 1px solid var(--border-2);
    background: var(--sidebar-bg);
    overflow: hidden;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.72);
  }

  .sidebar.open {
    display: flex;
  }

  .brand-block {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 12px 14px;
  }

  .nav-list {
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 0 10px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .nav-section {
    display: block;
    padding-top: 8px;
  }

  .nav-section:first-child {
    padding-top: 4px;
  }

  .nav-group-label {
    display: flex;
    padding: 6px 14px 5px;
  }

  .nav-items {
    flex-direction: column;
    gap: 0;
    padding: 3px 8px;
  }

  .nav-item {
    min-height: 42px;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 0;
    box-shadow: none;
    font-size: 12px;
    white-space: normal;
  }

  .nav-item-icon {
    display: flex;
    width: 18px;
    height: 18px;
  }

  .nav-item:hover {
    background: var(--control-hover);
    border-color: var(--info);
  }

  .nav-item.active {
    background: var(--control-active);
    border-color: var(--control-active);
    color: var(--control-active-text);
    box-shadow: none;
  }

  .sidebar-footer {
    display: block;
    padding: 10px 14px 12px;
    flex: 0 0 auto;
  }

  .appbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto;
    height: auto;
    min-height: 40px;
    padding: 0;
    gap: 0;
    align-items: stretch;
  }

  .appbar-breadcrumb {
    display: none;
  }

  .appbar-indicators {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto;
    min-height: 40px;
    overflow: visible;
    scrollbar-width: none;
    padding: 0;
    border-top: none;
    width: 100%;
  }

  .appbar-indicators::-webkit-scrollbar {
    display: none;
  }

  .appbar-cell {
    min-width: 0;
    min-height: 38px;
    height: auto;
    padding: 4px 8px;
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-right: 0;
  }

  .appbar-cell:first-child {
    border-left: 0;
  }

  /* All pane grids collapse to single column */
  .pane-fleet,
  .pane-condition,
  .pane-config,
  .pane-logs {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  .pane-condition .sensor-profile-panel,
  .pane-condition .metric-status-panel,
  .pane-condition .indicators-panel {
    grid-area: auto;
  }

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

  .event-log { max-height: 360px; }

  .trend-stats-grid {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }

  .engineering-grid {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }

  .trend-chart-wrap  { height: 280px; }
  .chart-wrap        { height: 280px; }

  /* Panel toolbars: items wrap naturally — already flex-wrap */
  .panel-toolbar {
    padding: 6px 10px;
    gap: 6px 10px;
  }
}

/* ===================== RESPONSIVE — 600px (mobile) ===================== */

@media (max-width: 600px) {
  .appbar {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto;
    height: auto;
    min-height: 36px;
  }
  .appbar-time-cell,
  .appbar-cell:nth-child(2),
  .appbar-cell:nth-child(3) {
    display: none;
  }

  .appbar-indicators {
    /* !important: a later @media (max-width: 700px) rule targets the same
       selector/property and would otherwise win on source order at any
       width <=600px too, re-applying its 2-column layout to the 3 cells
       this block leaves visible and producing a lopsided 2+1 row. This is
       the only place in the cascade that knows 3 (not 6) cells are visible
       here, so it must win regardless of where either rule sits in the file. */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 36px;
  }

  .appbar-cell {
    min-height: 38px;
    padding: 3px 6px;
  }

  .cell-label {
    font-size: 7.5px;
  }

  .cell-mono,
  .appbar .badge {
    font-size: 9.5px;
  }

  .appbar .badge {
    min-inline-size: 0;
    width: 100%;
  }

  .sidebar {
    top: 6px;
    left: 6px;
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    overflow: hidden;
  }

  .brand-block {
    padding: 11px 12px;
  }

  .nav-item {
    min-height: 44px;
  }

  .kpi-value { font-size: 18px; }

  .chart-wrap       { height: 240px; }
  .fft-wrap         { height: 190px; }
  .trend-chart-wrap { height: 240px; }

  .table-shell {
    overflow-x: visible;
    border: 0;
  }

  .asset-table,
  .asset-table tbody,
  .asset-table tr,
  .asset-table td {
    display: block;
    width: 100%;
  }

  .asset-table {
    min-width: 0;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }

  .asset-table thead {
    display: none;
  }

  .asset-table tr.asset-row {
    margin: 0 0 8px;
    border: 1px solid var(--border);
    background: var(--panel);
  }

  .asset-table tr.asset-row.active {
    border-left: 2px solid var(--info-fg);
  }

  .asset-table td {
    display: grid;
    grid-template-columns: minmax(82px, 0.42fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }

  .asset-table td:last-child {
    border-bottom: 0;
  }

  .asset-table td::before {
    content: attr(data-label);
    color: var(--muted-2);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .asset-table .col-num {
    text-align: left;
  }

  .asset-table .empty-cell {
    display: block;
    padding: 14px 10px;
  }

  .asset-table .empty-cell::before {
    content: none;
  }

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

  .detail-list div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .detail-list dd {
    text-align: left;
    font-size: 11px;
  }

  .indicator-grid {
    grid-template-columns: minmax(112px, 0.95fr) minmax(74px, 0.72fr) repeat(4, minmax(72px, 1fr));
    min-width: 660px;
    font-size: 10px;
  }

  .indicator-grid > div {
    padding: 6px 7px;
  }

  .indicator-head {
    font-size: 8px;
    letter-spacing: 0.05em;
  }

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

  .fft-meta-row {
    flex-direction: column;
  }

  .fft-meta-right {
    text-align: left;
  }

  /* Panel toolbar: stack vertically on very small screens */
  .panel-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
  }

  .panel-toolbar .chart-control-inline,
  .panel-toolbar .fft-axis-field,
  .panel-toolbar .fft-band-field {
    width: 100%;
    justify-content: space-between;
  }

  .panel-toolbar .fft-band-presets {
    width: 100%;
  }

  .panel-toolbar .fft-band-presets .seg-btn {
    flex: 1;
    min-width: 0;
  }

  .panel-toolbar .segmented {
    flex: 1;
  }

  .panel-toolbar .seg-btn {
    flex: 1;
    min-width: 0;
  }

  /* Band inputs full-width on mobile */
  .fft-band-field input {
    width: 60px;
  }

  /* Segmented controls fill available space */
  .segmented {
    flex: 1;
  }

  .seg-btn {
    flex: 1;
    min-width: 0;
  }

  .event-log { max-height: 280px; }

  .trend-stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .ai-threshold-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===================== LARGE SCREEN — 1500px ===================== */

@media (min-width: 1500px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .chart-wrap { height: 400px; }
  .trend-chart-wrap { height: 400px; }
}

/* Per-plot debug footer: available for diagnostics, hidden in operator UI */
.chart-status {
  display: none;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  padding: 7px 9px;
  margin: 6px 0 0;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
  overflow: hidden;
}

.trend-summary-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: min(360px, 100%);
  justify-content: flex-end;
}

.trend-summary-picker > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.trend-summary-picker .mini-select {
  flex: 0 1 220px;
}

.mini-select {
  min-width: 150px;
  max-width: 100%;
  height: 34px;
  padding: 0 34px 0 10px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  letter-spacing: 0;
}

@media (max-width: 700px) {
  .trend-summary-picker {
    width: 100%;
    justify-content: space-between;
  }

  .mini-select {
    min-width: 0;
    flex: 1;
  }
}

/* ============================================================
   AI CONDITION CLASSIFIER — complete styles
   ============================================================ */

/* ── Grid layout for the AI pane ───────────────────────────── */
.pane-ai,
.pane-ai-monitor {
  /* 2-col on desktop: prediction card full-width top, panels share the row below */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-content: start;
}

.pane-ai-config {
  /* AI Configuration tab has only the settings panel — single column, max-width constrained */
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr) minmax(320px, 0.9fr);
  align-content: start;
}

.pane-ai-config .ai-config-panel {
  grid-column: 1;
  max-width: none;
  width: 100%;
}

/* Prediction card spans full width */
.ai-prediction-card {
  grid-column: 1 / -1;
}

/* Config + Labels + Recording in a row, then Dataset + Training */
.pane-ai-config .ai-config-panel    { grid-column: 1; }
.pane-ai-config .ai-labels-panel    { grid-column: 2; }
.pane-ai-config .ai-recording-panel { grid-column: 3; }
.pane-ai-config .ai-dataset-panel   { grid-column: 1 / 3; }
.pane-ai-config .ai-training-panel  { grid-column: 3; }

@media (max-width: 1180px) {
  .pane-ai,
  .pane-ai-monitor {
    grid-template-columns: 1fr 1fr;
  }
  .pane-ai-config {
    grid-template-columns: 1fr 1fr;
  }
  .ai-prediction-card { grid-column: 1 / -1; }
  .pane-ai-config .ai-config-panel    { grid-column: 1; }
  .pane-ai-config .ai-labels-panel    { grid-column: 2; }
  .pane-ai-config .ai-recording-panel { grid-column: 1 / -1; }
  .pane-ai-config .ai-dataset-panel   { grid-column: 1; }
  .pane-ai-config .ai-training-panel  { grid-column: 2; }
}

@media (max-width: 1024px) {
  .pane-ai,
  .pane-ai-monitor {
    grid-template-columns: 1fr;
  }
  .pane-ai-config {
    grid-template-columns: 1fr;
  }
  .ai-prediction-card,
  .ai-config-panel,
  .ai-labels-panel,
  .ai-recording-panel,
  .ai-dataset-panel,
  .ai-training-panel {
    grid-column: 1;
  }
  .pane-ai-config .ai-config-panel,
  .pane-ai-config .ai-labels-panel,
  .pane-ai-config .ai-recording-panel,
  .pane-ai-config .ai-dataset-panel,
  .pane-ai-config .ai-training-panel {
    grid-column: 1;
  }
}

/* ── Model status bar ──────────────────────────────────────── */
.ai-model-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ai-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ai-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-2);
  flex-shrink: 0;
}

.ai-dot-idle    { background: var(--muted-2); }
.ai-dot-ready   { background: var(--normal-fg); box-shadow: 0 0 5px var(--normal-fg); }
.ai-dot-training{ background: var(--warning-fg); animation: ai-pulse 1s infinite; }
.ai-dot-failed  { background: var(--critical-fg); }

@keyframes ai-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.ai-model-version {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
}

.ai-model-sensor {
  font-size: 10px;
  color: var(--muted-2);
  margin-left: auto;
}

/* ── Main prediction display ───────────────────────────────── */
/* Two-card split: text summary on the left, round match gauge on the
   right. Using grid (not the old flex row) keeps the two halves as
   independent boxes so the gauge can grow into a large round "LCD"
   panel without the label text reflowing around it. */
.ai-prediction-main {
  display: grid;
  /* Even 50/50 split: text summary left, live scope right. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  margin-bottom: 12px;
}

.ai-prediction-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ai-prediction-right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-prediction-label-area {
  flex: 1;
  min-width: 0;
}

.ai-pred-stable-label {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  line-height: 1.1;
  /* Wraps rather than truncating. This is the headline result - "Unknown
     vibration pattern" was being cut to an ellipsis at tablet widths, hiding
     the single most important word on the page. Pattern names are
     user-defined, so there is no length that is safe to assume. */
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

.ai-pred-stable-label.ai-pred-classified {
  color: var(--normal-fg);
}

.ai-pred-stable-label.ai-pred-fallback {
  color: var(--warning-fg);
}

.ai-pred-stable-label.ai-pred-not-ready {
  color: var(--muted);
}

.ai-pred-sublabel {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* ── Overall match ring ─────────────────────────────────────── */
.ai-confidence-ring-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.ai-confidence-ring {
  width: 72px;
  height: 72px;
}

.ai-confidence-ring circle:last-child {
  transition: stroke-dashoffset 520ms cubic-bezier(.18,.82,.22,1), stroke 240ms ease;
}

.ai-confidence-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: 0.04em;
}

/* ── Fallback banner ───────────────────────────────────────── */
.ai-fallback-banner {
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  color: var(--warning-fg);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

/* ── Signature comparison bars ──────────────────────────────────────── */
.ai-prob-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.ai-decision-summary {
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ai-decision-line {
  display: grid;
  grid-template-columns: minmax(80px, 0.4fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 12px;
  font-size: 11px;
  line-height: 1.4;
}

.ai-decision-line span {
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9px;
  font-weight: 800;
}

.ai-decision-line strong {
  color: var(--text-strong);
  text-align: right;
  /* pre-line honours the explicit newline in the Analysis timing text (see
     aiCalculationText) while still wrapping normally everywhere else. */
  white-space: pre-line;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ai-signature-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 7px;
}

.ai-signature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.ai-signature-card {
  min-width: 0;
  min-height: 172px;
  padding: 10px;
  border: 1px solid var(--border-2);
  background: var(--control-bg);
  color: var(--text);
  transition: border-color 420ms ease, background 420ms ease, box-shadow 420ms ease;
}

.ai-signature-card-closest {
  border-color: var(--accent);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
}

.ai-signature-card-matched {
  border-color: color-mix(in srgb, var(--normal) 72%, var(--border-2));
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--normal) 64%, transparent);
}

.ai-signature-card-ambiguous {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-2));
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
}

.ai-signature-card-outside,
.ai-signature-card-invalid {
  border-color: var(--border);
  background: color-mix(in srgb, var(--control-bg) 96%, var(--muted-2) 4%);
}

.ai-signature-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
}

.ai-signature-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-strong);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-signature-badge {
  flex: 0 1 auto;
  max-width: 58%;
  padding: 2px 5px;
  border: 1px solid var(--border-2);
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
  text-align: right;
  text-transform: uppercase;
}

.ai-signature-card-matched .ai-signature-badge {
  border-color: var(--normal);
  color: var(--normal-fg);
}

.ai-signature-card-ambiguous .ai-signature-badge {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border-2));
  color: var(--accent);
}

.ai-signature-card-outside .ai-signature-badge,
.ai-signature-card-invalid .ai-signature-badge {
  border-color: var(--border-2);
  color: var(--muted);
}

.ai-signature-card-main {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 7px 0;
}

.ai-signature-meter {
  position: relative;
  width: 72px;
  height: 72px;
}

.ai-signature-meter svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ai-signature-meter circle {
  fill: none;
  stroke-width: 5;
}

.ai-signature-meter-track {
  stroke: var(--border);
}

.ai-signature-meter-value {
  stroke: var(--accent);
  stroke-dasharray: 150.8;
  stroke-dashoffset: 150.8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 760ms cubic-bezier(.22,.72,.24,1), stroke 420ms ease;
  will-change: stroke-dashoffset;
}

.ai-signature-meter-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-strong);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ai-signature-trend {
  min-width: 0;
}

.ai-signature-trend > span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.ai-signature-sparkline {
  display: block;
  width: 100%;
  height: 48px;
  overflow: visible;
}

.ai-signature-sparkline path {
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 420ms ease, opacity 420ms ease;
}

.ai-signature-distance {
  padding: 5px 0;
  border-top: 1px solid var(--border);
  color: var(--text-strong);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ai-signature-channel-matches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.ai-signature-channel-matches span {
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.ai-signature-channel-matches strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 13px;
}

.ai-signature-boundaries {
  display: none;
}

.ai-signature-boundaries {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
}

.ai-signature-boundaries span {
  min-width: 0;
  padding: 5px;
  border: 1px solid var(--border);
  text-align: center;
}

.ai-signature-boundaries strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 10px;
}

@media (max-width: 420px) {
  .ai-signature-channel-matches {
    grid-template-columns: 1fr;
  }

  .ai-signature-boundaries {
    grid-template-columns: 1fr;
  }
}

.ai-signature-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--muted-2);
  font-size: 8px;
  text-transform: uppercase;
}

.ai-signature-warning {
  display: inline-grid;
  min-width: 28px;
  height: 15px;
  padding: 0 4px;
  place-items: center;
  border: 1px solid var(--border-2);
  color: var(--muted);
  font-weight: 800;
  font-size: 7px;
}

.ai-signature-details-toggle {
  margin-top: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.ai-signature-details {
  display: grid;
  gap: 3px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
}

.ai-signature-details > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 9px;
}

.ai-signature-details span {
  color: var(--muted-2);
}

.ai-signature-details strong {
  min-width: 0;
  color: var(--text);
  text-align: right;
  overflow-wrap: anywhere;
}

.ai-signature-toggle {
  align-self: flex-start;
  min-height: 32px;
  margin-top: 4px;
}

.ai-prob-empty {
  font-size: 11px;
  color: var(--muted-2);
  padding: 4px 0;
}

.ai-prob-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(80px, 1fr) minmax(86px, 120px);
  align-items: center;
  gap: 8px;
  transform-origin: center left;
  transition: background 180ms ease, border-color 180ms ease;
}

.ai-prob-row-enter {
  animation: ai-row-in 360ms cubic-bezier(.2,.8,.2,1) both;
}

.ai-prob-row-top {
  animation: ai-row-glow 700ms ease;
}

.ai-prob-label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-prob-label.ai-prob-top {
  color: var(--text-strong);
  font-weight: 700;
}

.ai-prob-bar-track {
  height: 8px;
  background: var(--border);
  overflow: hidden;
}

.ai-prob-bar-fill {
  height: 100%;
  background: var(--info);
  transition: width 720ms cubic-bezier(.18,.82,.22,1), background 220ms ease, box-shadow 220ms ease;
  will-change: width;
}

.ai-prob-bar-fill.ai-prob-fill-top {
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
}

.ai-prob-pct {
  font-size: 10px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Prediction meta row ───────────────────────────────────── */
.ai-class-gate {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 10px;
  border-top: 1px solid var(--border);
}

.ai-gate-title {
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ai-class-gate-results {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ai-gate-row {
  display: grid;
  grid-template-columns: minmax(100px, 150px) 76px minmax(80px, 1fr) minmax(160px, 240px);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ai-gate-label,
.ai-gate-status,
.ai-gate-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.ai-gate-label {
  color: var(--text-strong);
  font-weight: 700;
}

.ai-gate-status {
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ai-gate-accept .ai-gate-status { color: var(--normal-fg); }
.ai-gate-reject .ai-gate-status { color: var(--warning-fg); }
.ai-gate-disabled .ai-gate-status { color: var(--muted); }
.ai-gate-disabled .ai-gate-fill { background: var(--muted-2); }

.ai-gate-track {
  height: 7px;
  background: var(--border);
  overflow: hidden;
}

.ai-gate-fill {
  height: 100%;
  background: var(--info);
  transition: width 0.35s ease;
}

.ai-gate-reject .ai-gate-fill {
  background: var(--warning);
}

.ai-gate-detail {
  color: var(--muted-2);
  text-align: right;
}

.ai-abnormal-reason {
  padding: 6px 8px;
  border: 1px solid var(--warning);
  background: var(--warning-bg);
  color: var(--warning-fg);
  font-size: 10px;
  font-weight: 700;
}

/* Decision engine detail: the moving-window accumulator's own live numbers -
   the thing that actually decides stableStatus/stableLabel. Kept visually
   distinct (accent border, not accept/reject red-green) since it explains a
   mechanism, not a pass/fail verdict. */
.ai-decision-engine {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--panel) 85%, var(--accent) 6%);
  flex-direction: column;
  gap: 6px;
}

/* display is conditional (not a bare declaration on .ai-decision-engine)
   so the shared .hidden{display:none} utility - defined earlier in this
   file at identical specificity - still wins the cascade when JS toggles
   it via showHide(). A bare "display: flex" here previously beat .hidden
   by source order alone, leaving an empty flex box visible at all times. */
.ai-decision-engine:not(.hidden) {
  display: flex;
}

.ai-engine-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

/* One-line, plain-language summary of what this whole box is. Kept to a
   single short sentence - row labels below are self-descriptive on their
   own, with the fuller definition available as a native hover tooltip
   (title attribute) instead of always-visible prose. */
.ai-engine-subtitle {
  margin: 0 0 2px;
  color: var(--text-soft);
  font-size: 10.5px;
  line-height: 1.5;
}

.ai-engine-row {
  display: grid;
  grid-template-columns: minmax(130px, 210px) minmax(60px, 1fr) minmax(70px, auto);
  align-items: center;
  gap: 8px;
}

.ai-engine-row > span:first-child {
  font-size: 10px;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.ai-engine-row > strong {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.ai-engine-bar {
  height: 6px;
  background: var(--border);
  overflow: hidden;
}

.ai-engine-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.35s ease;
}

.ai-engine-bar-fill-warn {
  background: var(--warning);
}

.ai-engine-pending {
  font-size: 10px;
  color: var(--warning-fg);
}

.ai-engine-pending strong {
  color: var(--text-strong);
}

/* On wide desktop viewports the prediction card can be well over 1000px
   across, which stretched these bars into oversized, hard-to-read meters.
   Capping the bar/track itself (not the grid column) keeps every label and
   number exactly where it was - the bar just stops growing and settles at
   a normal progress-bar width, with a little breathing room to its right.
   Mobile (<=640px, already single-column below) is left alone. */
@media (min-width: 641px) {
  #pane-ai-classifier .ai-gate-track,
  #pane-ai-classifier .ai-engine-bar {
    max-width: 260px;
  }
}

@media (max-width: 640px) {
  .ai-engine-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .ai-engine-row > strong {
    text-align: left;
  }
}

.ai-threshold-config {
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 12px;
}

.ai-threshold-toggle-row {
  margin-bottom: 10px;
}

.ai-threshold-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.ai-prediction-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-bottom: 10px;
}

.ai-prediction-meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-prediction-meta span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.ai-prediction-meta strong {
  font-size: 11px;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-rejected-status { color: var(--warning-fg) !important; }

/* ── Recent windows strip ──────────────────────────────────── */
.ai-recent-preds {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ai-recent-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}

.ai-recent-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 5px;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
}

.ai-recent-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.ai-recent-arrow-enter {
  animation: none;
}

.ai-recent-chip {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  background: var(--control-bg);
  border: 1px solid var(--border-2);
  color: var(--text);
  letter-spacing: 0.03em;
  transform-origin: center;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.ai-recent-chip-enter {
  animation: none;
}

.ai-recent-chip-new {
  animation: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-2));
}

.ai-chip-fallback {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-2));
  color: var(--text);
  background: color-mix(in srgb, var(--control-bg) 90%, var(--accent) 10%);
}

@keyframes ai-row-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ai-row-glow {
  0%   { background: color-mix(in srgb, var(--accent) 16%, transparent); }
  100% { background: transparent; }
}

@keyframes ai-chip-in {
  from { opacity: 1; transform: none; }
  to   { opacity: 1; transform: none; }
}

@keyframes ai-chip-arrow-in {
  from { opacity: 1; transform: none; }
  to   { opacity: 1; transform: none; }
}

@keyframes ai-chip-soft-flash {
  0% {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  100% {
    border-color: var(--border-2);
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-prob-row-enter,
  .ai-prob-row-top,
  .ai-recent-chip-enter,
  .ai-recent-chip-new,
  .ai-recent-arrow-enter {
    animation: none;
  }
  .ai-prob-bar-fill,
  .ai-recent-chip,
  .ai-signature-meter-value,
  .ai-signature-card,
  .ai-confidence-ring circle:last-child {
    transition: none;
  }
}

@media (max-width: 640px) {
  .ai-signature-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-signature-card {
    min-height: 0;
  }

  .ai-signature-card-main {
    grid-template-columns: 72px minmax(0, 1fr);
  }
}

/* ── Feature checkboxes ────────────────────────────────────── */
.ai-feature-schema {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0;
}

/* Groups a Pattern Settings field cluster (Signals / Recognition Behaviour)
   into one visually bounded block instead of a continuous run of loosely
   related rows - gives each concern its own edge to stop at. */
.ai-settings-card {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, var(--control-bg) 8%);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-settings-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.ai-settings-card-head .ai-section-label {
  flex: 1 1 auto;
}

/* Collapsed: sits compactly next to the label on the same row (shrinks
   rather than forcing the row wider - flex-shrink:0 + the default
   min-width:auto on a flex item is what let the closed chip get away
   with looking fine while silently setting up an overflow once opened).
   Open: the <details> (summary chip + body box together) claims the full
   row width so .whats-this-body wraps normally inside the card instead of
   being sized to its longest unwrapped line and blowing out past the
   viewport edge. */
.ai-settings-card-head .whats-this {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.ai-settings-card-head .whats-this[open] {
  flex-basis: 100%;
}

.ai-settings-card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.ai-settings-card-foot .ai-feature-count {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.ai-settings-card-foot .ai-note {
  flex: 1 1 220px;
  margin: 0;
}

/* Compact "Current Sensor / Device" line - a read-only label, not an input,
   so it no longer needs to look like a full-width form field. */
.ai-settings-sensor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-current-sensor {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--control-bg);
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-current-sensor-inline {
  min-height: 26px;
  padding: 0 10px;
  font-size: 12px;
  width: auto;
  flex: 0 0 auto;
  max-width: 260px;
}

/* Compact, non-stretching chips instead of one column stacked full-height
   or a grid that stretches four items across the entire panel width. */
.ai-feature-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-descriptor-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin-bottom: 10px;
}

.ai-feature-count {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 12px;
}

.ai-feature-count.is-warning {
  border-color: var(--warning);
  color: var(--warning-fg);
}

@media (max-width: 700px) {
  .ai-descriptor-checks { grid-template-columns: 1fr; }
}

/* Clickable checkbox labels - compact chips that size to their own content
   and sit flush together on the left, rather than one full-width row or a
   grid stretched thin across the whole panel. */
.ai-check-item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  padding: 6px 10px;
  border: 1px solid var(--border-2);
  background: var(--control-bg);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
  line-height: 1.3;
  white-space: nowrap;
}

.ai-check-item:hover {
  background: var(--control-hover);
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.ai-check-item:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--control-bg));
  color: var(--text-strong);
}

/* Custom checkbox controls */
.ai-check-item input[type="checkbox"] {
  /* Fully custom checkbox, no browser chrome */
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 15px;
  height: 15px;
  min-width: 15px;
  padding: 0;
  margin: 0;
  border: 1.5px solid var(--border-2);
  background: var(--input-bg);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 0;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  outline: none;
  vertical-align: middle;
}

/* Hover: accent border */
.ai-check-item:hover input[type="checkbox"]:not(:checked):not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Checked: filled with accent, dark tick */
.ai-check-item input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

/* Tick mark via pseudo-element */
.ai-check-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: 1.5px solid var(--control-active-text);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* Focus ring */
.ai-check-item input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent), 0 0 0 1px var(--accent);
}

/* Disabled */
.ai-check-item input[type="checkbox"]:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: var(--border);
}

.ai-check-item:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--muted);
}

.ai-schema-warning {
  font-size: 11px;
  color: var(--warning-fg);
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  padding: 5px 8px;
}

/* ── Label management ──────────────────────────────────────── */
.ai-label-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 40px;
  margin-bottom: 10px;
  max-height: 160px;
  overflow-y: auto;
}

.ai-label-empty {
  font-size: 11px;
  color: var(--muted-2);
  padding: 6px 0;
}

.ai-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: var(--control-bg);
  border: 1px solid var(--border);
}

.ai-label-chip {
  flex: 1;
  font-size: 11px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-label-normal {
  color: var(--normal-fg);
}

.ai-label-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--muted-2);
  font-size: 10px;
  cursor: pointer;
  flex-shrink: 0;
}

.ai-label-delete:hover:not(:disabled) {
  background: var(--critical-bg);
  border-color: var(--critical);
  color: var(--critical-fg);
}

.ai-label-delete:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ai-label-add {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.ai-label-add input {
  flex: 1;
  min-width: 0;
}

.ai-label-add .btn {
  flex-shrink: 0;
  width: auto;
  min-width: 70px;
}

/* ── Notes ─────────────────────────────────────────────────── */
.ai-note {
  font-size: 10px;
  color: var(--muted-2);
  line-height: 1.5;
  margin: 6px 0 0;
}

.ai-note em {
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
}

.ai-note-ok   { color: var(--normal-fg); }
.ai-note-warn { color: var(--warning-fg); }

/* ── AI buttons ─────────────────────────────────────────────── */
.ai-btn-sm {
  font-size: 10px;
  min-height: 30px;
  padding: 5px 10px;
  /* width: auto — buttons size to their label, not the full container */
  width: auto;
  align-self: flex-start;
}

.ai-btn-record {
  background: var(--critical-bg);
  border-color: var(--critical);
  color: var(--critical-fg);
  font-size: 11px;
  letter-spacing: 0.06em;
  width: auto;
}

.ai-btn-record:hover {
  background: var(--critical);
  color: var(--text-strong);
}

.ai-btn-train {
  background: var(--info);
  border-color: var(--info);
  color: var(--control-active-text);
  font-size: 11px;
  letter-spacing: 0.07em;
  width: auto;
  min-width: 180px;
  min-height: 38px;
  margin-bottom: 14px;
}

.ai-btn-train:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--control-active-text);
}

.ai-btn-train:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-danger {
  background: var(--critical-bg);
  border-color: var(--critical);
  color: var(--critical-fg);
}

.btn-danger:hover:not(:disabled) {
  background: var(--critical);
  color: var(--text-strong);
}

.btn-danger:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Recording controls ────────────────────────────────────── */
.ai-recording-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.ai-record-actions {
  display: flex;
  gap: 6px;
}

.ai-record-actions .btn {
  flex: 0 1 auto;
}

/* Recording live status */
.ai-recording-status {
  background: var(--critical-bg);
  border: 1px solid var(--critical);
  padding: 8px 10px;
}

.ai-rec-dot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ai-rec-dot-blink {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--critical-fg);
  flex-shrink: 0;
  animation: ai-pulse 0.8s infinite;
}

.ai-rec-status-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--critical-fg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-rec-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
}

.ai-rec-stats > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ai-rec-stats span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.ai-rec-stats strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* ── Dataset summary ───────────────────────────────────────── */
.ai-dataset-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.ai-dataset-total {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 4px;
}

.ai-dataset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 32px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--control-bg);
  border-left: 3px solid transparent;
}

.ai-ds-ok   { border-left-color: var(--normal); }
.ai-ds-warn { border-left-color: var(--warning); }

.ai-dataset-label {
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-dataset-count {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ai-dataset-req {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.ai-ds-ok   .ai-dataset-req { color: var(--normal-fg); }
.ai-ds-warn .ai-dataset-req { color: var(--warning-fg); }

.ai-dataset-delete {
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 12px;
  color: var(--muted);
}

.ai-dataset-delete:hover:not(:disabled) {
  background: var(--critical-bg);
  border-color: var(--critical);
  color: var(--critical-fg);
}

.ai-model-delete {
  margin-top: 8px;
  width: auto;
  align-self: flex-start;
}

.ai-dataset-actions {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Training panel ────────────────────────────────────────── */
.ai-training-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-top: 4px;
}

.ai-training-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.ai-training-actions .ai-btn-train,
.ai-training-actions .ai-model-delete {
  width: auto;
  min-height: 40px;
  margin: 0;
}

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

.ai-training-metrics .ai-train-state-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--control-bg);
}

.ai-training-metrics .ai-train-state-row strong {
  width: 100%;
  text-align: left;
}

.ai-train-message-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  padding: 8px;
  border: 1px solid var(--border);
}

.ai-train-message-row > span:last-child {
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.ai-train-state-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  min-width: 0;
}

.ai-train-state-row > span:first-child {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
  min-width: 0;
}

.ai-train-state-row > strong,
.ai-train-state-row > span:last-child {
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-train-state-row.ai-train-message-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 5px;
}

.ai-train-state-row.ai-train-message-row > span:last-child {
  width: 100%;
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.ai-train-progress-wrap {
  height: 4px;
  background: var(--border);
  overflow: hidden;
  margin: 2px 0;
}

.ai-train-progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width 0.4s ease;
}

.ai-train-result {
  padding: 8px;
  background: var(--normal-bg);
  border: 1px solid var(--normal);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.ai-train-error {
  padding: 8px;
  background: var(--critical-bg);
  border: 1px solid var(--critical);
  color: var(--critical-fg);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 4px;
  word-break: break-word;
}

/* ── btn-icon helper (used by label delete) ─────────────────── */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--muted-2);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

@media (max-width: 820px) {
  .panel-header {
    flex-direction: column;
    gap: 2px;
  }

  .panel-meta {
    text-align: left;
  }

  .ai-prediction-main {
    align-items: flex-start;
  }

  .ai-pred-stable-label {
    white-space: normal;
    font-size: 22px;
  }

  .ai-label-add,
  .ai-record-actions {
    flex-direction: column;
  }

  .ai-label-add .btn,
  .ai-record-actions .btn {
    min-height: 40px;
    width: 100%;
  }

  .ai-dataset-row {
    grid-template-columns: minmax(0, 1fr) auto 32px;
  }

  .ai-dataset-count {
    grid-column: 1;
  }

  .ai-dataset-req {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .ai-dataset-delete {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .ai-gate-row {
    grid-template-columns: minmax(0, 1fr) 82px;
  }

  .ai-gate-track,
  .ai-gate-detail {
    grid-column: 1 / -1;
  }

  .ai-gate-detail {
    text-align: left;
    white-space: normal;
  }

  .ai-train-state-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .ai-train-state-row > strong,
  .ai-train-state-row > span:last-child {
    text-align: left;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 520px) {
  .ai-training-actions,
  .ai-training-metrics {
    grid-template-columns: 1fr;
  }

  .ai-train-message-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.btn-icon:hover:not(:disabled) {
  background: var(--critical-bg);
  border-color: var(--critical);
  color: var(--critical-fg);
}

.btn-icon:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.vs-toast-stack {
  position: fixed;
  right: 14px;
  top: 54px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(340px, calc(100vw - 28px));
  pointer-events: none;
}

.vs-toast {
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--accent);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
  padding: 9px 11px;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0;
  opacity: 0.96;
  transform: translateY(0);
  transition: opacity 0.22s ease, transform 0.22s ease;
  overflow-wrap: anywhere;
}

.vs-toast-success {
  border-color: var(--normal);
  border-left-color: var(--normal-fg);
  background: var(--panel);
  color: var(--text-strong);
}

.vs-toast-error {
  border-color: var(--critical);
  border-left-color: var(--critical-fg);
  background: var(--panel);
  color: var(--critical-fg);
}

.vs-toast-warn {
  border-color: var(--warning);
  border-left-color: var(--warning-fg);
  background: var(--panel);
  color: var(--warning-fg);
}

.vs-toast-info {
  border-color: var(--accent);
  background: var(--panel-2);
  color: var(--text);
}

.vs-toast-fade {
  opacity: 0;
  transform: translateY(6px);
}

@media (max-width: 640px) {
  .vs-toast-stack {
    right: 10px;
    top: 50px;
    width: calc(100vw - 20px);
  }
}

/* ── Advanced / Experimental shape features section ────────── */
.ai-advanced-section {
  margin-top: 8px;
  border: 1px solid var(--border, #ddd);
  border-radius: 4px;
  padding: 4px 8px 8px;
}
.ai-advanced-section summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 4px 0;
}
.ai-advanced-section summary::-webkit-details-marker { display: none; }
.ai-advanced-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.ai-advanced-badge {
  font-size: 9px;
  font-weight: 600;
  background: var(--warning-bg, #fff3cd);
  color: var(--warning-fg, #856404);
  border-radius: 3px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Y-axis manual range row (min / max inputs + pan buttons) ── */
.y-minmax-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.y-range-input {
  width: 62px;
  padding: 2px 5px;
  font-size: 11px;
  text-align: right;
  font-family: var(--font-ui);
}

.y-range-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.y-pan-btn {
  min-width: 26px;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1;
}

.y-pan-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Responsive improvements (layout audit patch) ──────────── */

/* Y min/max row: allow wrapping on narrow toolbar widths */
@media (max-width: 820px) {
  .y-minmax-row {
    flex-wrap: wrap;
    gap: 4px 6px;
  }
  .y-range-input {
    width: 54px;
  }
}

@media (max-width: 600px) {
  /* Stack Y min/max row fully on mobile */
  .y-minmax-row {
    width: 100%;
    justify-content: space-between;
  }

  .y-range-input {
    width: 72px;  /* more finger-friendly */
    flex: 1;
    min-width: 0;
  }

  .y-pan-btn {
    min-width: 36px;
    padding: 4px 8px;
  }

  /* x-window presets: fill the row */
  .x-window-presets {
    width: 100%;
  }
  .x-window-presets .seg-btn {
    flex: 1;
    min-width: 0;
  }

  /* Wider x-window input on mobile */
  .x-window-field input {
    width: 64px;
  }

  /* Trend stats: always 1 col on phone */
  .trend-stats-grid {
    grid-template-columns: 1fr !important;
  }

}

/* Panel header: ensure panel-meta doesn't bleed over panel-title */
@media (max-width: 640px) {
  .panel-header {
    flex-direction: column;
    gap: 2px;
  }

  .panel-meta {
    text-align: left;
  }

  .panel-title-wrap {
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* Trend toolbar: let the status text wrap */
.trend-toolbar {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Ensure panel body never overflows its container */
.panel-body {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Appbar cells: no text overflow at narrow widths */
.appbar-cell {
  min-width: 0;
  flex-shrink: 1;
}

.appbar-cell > span,
.appbar-cell > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .badge,
  .status-pill {
    min-inline-size: 74px;
  }

  .appbar .badge {
    min-inline-size: 0;
    width: 100%;
  }
}
/* ===================================================================
   AI EXPERIENCE - clean professional styling
   Scoped to the two AI panes. No decorative background animation and no
   glow; only purposeful micro-interactions (hover / focus / expand).
   All motion respects prefers-reduced-motion.
   =================================================================== */

#pane-ai-classifier,
#pane-ai-configuration {
  position: relative;
}

/* Panels: solid, crisp, restrained hover -------------------------- */
#pane-ai-classifier .panel,
#pane-ai-configuration .panel {
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
#pane-ai-classifier .panel:hover,
#pane-ai-configuration .panel:hover {
  border-color: var(--border-2);
  box-shadow: 0 6px 22px -18px rgba(0, 0, 0, 0.9);
}

/* Plain-language intro strip -------------------------------------- */
.ai-intro {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.15rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--panel-header-accent);
  border-radius: 0;
  background: var(--panel-2);
}
/* Same SVG glyph as the matching sidebar nav item (currentColor keeps it
   in sync with the accent colour below) - previously a bespoke CSS-drawn
   shape per page that didn't match its own nav icon. */
.ai-intro-icon {
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  position: relative;
  flex: 0 0 auto;
  border-radius: 0;
  background: var(--control-bg);
  border: 1px solid var(--border-2);
  color: var(--accent);
  overflow: hidden;
}
.ai-intro-icon svg {
  display: block;
}
.ai-intro-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-strong);
}
.ai-intro-sub {
  flex: 1 1 320px;
  min-width: 220px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Numbered step badge in panel headers ---------------------------- */
.panel-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.ai-step-badge {
  display: inline-grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  flex: 0 0 auto;
  border-radius: 0;
  border: 1px solid var(--border-2);
  background: var(--control-bg);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Expandable "What's this?" explainer (native <details>, no JS) ---- */
.whats-this {
  margin: 0 0 0.55rem;
}
.whats-this > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--muted);
  padding: 0.18rem 0.5rem 0.18rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--control-bg);
  transition: color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.whats-this > summary::-webkit-details-marker { display: none; }
.whats-this > summary::before {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.7em;
}
.whats-this > summary::after {
  content: "▸";
  font-size: 0.65em;
  color: var(--muted-2);
  transition: transform 0.15s ease;
}
.whats-this:hover > summary { color: var(--text-soft); border-color: var(--border-2); }
.whats-this[open] > summary { color: var(--text-soft); }
.whats-this[open] > summary::after { transform: rotate(90deg); }
.whats-this-body {
  margin-top: 0.45rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 0;
  background: var(--panel-2);
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.55;
  /* Belt-and-braces: whatever box this ends up inside of (flex row, grid
     cell, etc.), it must wrap to that container's width rather than being
     sized to its longest unwrapped line and overflowing past the edge. */
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}
.whats-this-body strong { color: var(--text-strong); }
.whats-this-body .term { color: var(--accent); font-weight: 600; }

/* Definition-list variant of the explainer body: short dt/dd pairs that
   match the exact on-screen labels 1:1, instead of one dense paragraph
   trying to define five things at once. */
.ai-explainer-list {
  margin: 0;
}
.ai-explainer-list dt {
  margin: 0.5rem 0 0.15rem;
  color: var(--text-strong);
  font-weight: 700;
}
.ai-explainer-list dt:first-child {
  margin-top: 0;
}
.ai-explainer-list dd {
  margin: 0 0 0 0;
}

/* Live scope: fills its half of the card. The round progress ring that used
   to sit here was removed - the same match percentage is already stated in
   the summary text and the meta grid, so a third copy of it was repetition. */
#pane-ai-classifier .ai-confidence-ring-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  height: auto;
  margin-inline: auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel-hdr) 70%, var(--control-bg) 30%);
}

/* Live wave scope sits inside the ring: the dial face, with the progress
   The canvas clips its own drawing to a circle (see ai-wave-scope.js) -
   border-radius alone is not reliable for canvas painting, which is what
   let crest lines escape through the corners. */
#pane-ai-classifier .ai-wave-scope {
  position: absolute;
  /* !important is required, not stylistic: the global `canvas` reset near the
     top of this file sets width/height to 100% !important for chart canvases,
     which outranks even an ID selector. Without matching !important here the
     canvas ignores this box entirely. */
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  pointer-events: none;
  display: block;
}

/* Buttons: restrained hover --------------------------------------- */
#pane-ai-classifier .btn,
#pane-ai-configuration .btn {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Configuration page: guided-workflow board ----------------------- */
#pane-ai-configuration .pane-ai-config {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
/* Full-width steps stack; labels (2) + record (3) share one row. The
   per-panel grid-column for labels/recording is reset to auto, otherwise the
   base 3-column placement leaves them pinned to columns 2/3 and the recording
   card overflows the 2-column grid. */
#pane-ai-configuration .pane-ai-config > .ai-intro,
#pane-ai-configuration .pane-ai-config .ai-workflow-panel,
#pane-ai-configuration .pane-ai-config .ai-config-panel,
#pane-ai-configuration .pane-ai-config .ai-dataset-panel,
#pane-ai-configuration .pane-ai-config .ai-training-panel {
  grid-column: 1 / -1;
}
#pane-ai-configuration .pane-ai-config .ai-labels-panel,
#pane-ai-configuration .pane-ai-config .ai-recording-panel {
  grid-column: auto;
}
@media (max-width: 1024px) {
  #pane-ai-configuration .pane-ai-config { grid-template-columns: 1fr; }
  #pane-ai-configuration .pane-ai-config > * { grid-column: 1 / -1; }
}

.ai-workflow-panel .panel-header {
  min-height: 42px;
}

.ai-workflow-panel .panel-body {
  padding: 12px;
}

.ai-workflow-step-hidden {
  display: none !important;
}

.ai-workflow-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 12px;
  isolation: isolate;
}

.ai-workflow-cables {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* Static "wire" track between cards - no motion here; the arrows on top are
   what light up. */
.ai-workflow-cables path {
  fill: none;
  stroke: var(--border-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 5 6;
  opacity: 0.55;
}

/* One fixed arrow per connector, pointing from step N to step N+1. The
   arrows never move - they sit still and periodically light up left to
   right (step 1's arrow, then step 2's, then step 3's...), then everything
   goes dark for a few seconds before the next sweep. */
.ai-cable-chevron path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ai-cable-chevron {
  stroke: var(--border-2);
  opacity: 0.55;
  animation-name: aiChevronSweep;
  animation-duration: 4.6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes aiChevronSweep {
  0%   { stroke: var(--border-2); opacity: 0.55; filter: none; }
  6%   { stroke: var(--accent); opacity: 1; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 65%, transparent)); }
  16%  { stroke: var(--border-2); opacity: 0.55; filter: none; }
  100% { stroke: var(--border-2); opacity: 0.55; filter: none; }
}

.ai-workflow-card {
  position: relative;
  z-index: 1;
  min-height: 118px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 88%, var(--control-bg) 12%);
  cursor: grab;
  user-select: none;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.ai-workflow-card:active {
  cursor: grabbing;
}

.ai-workflow-card:hover,
.ai-workflow-card:focus-visible {
  border-color: var(--accent);
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.55);
}

.ai-workflow-card:active {
  transform: translateY(-1px) scale(0.99);
}

.ai-workflow-card.is-active {
  border-color: var(--normal);
  background: color-mix(in srgb, var(--panel) 76%, var(--normal) 12%);
  box-shadow: inset 3px 0 0 var(--normal-fg);
}

.ai-workflow-card.is-dragging {
  opacity: 0.58;
  transform: scale(0.985);
}

.ai-workflow-card.is-drop-target {
  border-color: var(--normal);
  background: color-mix(in srgb, var(--panel) 78%, var(--normal) 10%);
}

.ai-workflow-node {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  color: var(--text-strong);
  background: color-mix(in srgb, var(--control-bg) 72%, var(--accent) 28%);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s ease;
}

/* Completed-step indicator: a small checkmark badge on the numbered node,
   driven by real progress (labels added, samples recorded, model trained)
   rather than just which card is open. */
.ai-workflow-card.is-complete .ai-workflow-node {
  border-color: var(--normal-fg);
}

.ai-workflow-card.is-complete .ai-workflow-node::after {
  content: '\2713';
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--normal-fg);
  color: var(--panel);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--panel);
}

/* Small bounce the instant a step flips from incomplete to complete - a
   quick, satisfying "nice, that's done" beat rather than a silent state change. */
.ai-workflow-card.is-complete.ai-step-just-completed .ai-workflow-node::after {
  animation: aiCheckPop 0.42s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes aiCheckPop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Progress badge (label/sample counts) in the corner of a workflow card. */
.ai-workflow-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--normal-fg);
  background: color-mix(in srgb, var(--panel) 70%, var(--normal) 16%);
  border: 1px solid color-mix(in srgb, var(--normal-fg) 40%, var(--border) 60%);
  white-space: nowrap;
}

/* Overall setup progress, shown in the Setup Flow panel header. */
.ai-workflow-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ai-workflow-progress-bar {
  position: relative;
  width: 90px;
  height: 6px;
  border-radius: 999px;
  background: var(--control-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}

.ai-workflow-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--normal), var(--normal-fg));
  border-radius: inherit;
  transition: width 0.4s cubic-bezier(.16, 1, .3, 1);
}

.ai-workflow-progress-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ai-workflow-progress.is-complete .ai-workflow-progress-label {
  color: var(--normal-fg);
}

/* Panel entrance: a quick settle-in rather than an instant, jarring swap
   whenever a workflow step opens. */
@keyframes aiPanelPop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ai-panel-pop {
  animation: aiPanelPop 0.32s cubic-bezier(.16, 1, .3, 1);
}

.ai-workflow-card strong {
  color: var(--text-strong);
  font-size: 14px;
  line-height: 1.2;
}

.ai-workflow-card span:last-child {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .ai-workflow-board {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 720px) {
  .ai-workflow-board {
    grid-template-columns: 1fr;
  }

  .ai-workflow-card {
    min-height: 92px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
  }

  .ai-workflow-card span:last-child {
    grid-column: 2;
  }
}

/* Respect reduced-motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #pane-ai-classifier .panel,
  #pane-ai-configuration .panel,
  #pane-ai-classifier .btn,
  #pane-ai-configuration .btn,
  .whats-this > summary,
  .whats-this > summary::after,
  #aiConfidenceArc {
    transition: none !important;
  }

  .ai-cable-chevron,
  .ai-workflow-card.is-complete.ai-step-just-completed .ai-workflow-node::after,
  .ai-panel-pop,
  .ai-workflow-card {
    animation: none !important;
    transition: none !important;
  }

  .ai-workflow-card:hover,
  .ai-workflow-card:focus-visible,
  .ai-workflow-card:active {
    transform: none !important;
  }
}

/* ===================== UI CLEANUP PASS ===================== */

@media (prefers-reduced-motion: reduce) {
  .startup-pulse-dot {
    animation: none;
  }
}

#pane-ai-classifier .ai-prediction-card .panel-body {
  display: grid;
  gap: 10px;
}

#pane-ai-classifier .ai-prediction-main {
  margin: 0;
}

#pane-ai-classifier .ai-pred-stable-label {
  font-size: clamp(20px, 3.4vw, 30px);
}

#pane-ai-classifier .ai-decision-summary,
#pane-ai-classifier .ai-prediction-meta,
#pane-ai-classifier .ai-recent-preds {
  margin-bottom: 0;
}

#pane-ai-classifier .ai-signature-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

#pane-ai-classifier .ai-signature-card {
  min-height: 0;
  padding: 11px;
  background: color-mix(in srgb, var(--panel) 82%, var(--control-bg) 18%);
}

#pane-ai-classifier .ai-signature-card-main {
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
}

#pane-ai-classifier .ai-signature-meter {
  width: 64px;
  height: 64px;
}

#pane-ai-classifier .ai-signature-meter-text {
  font-size: 11px;
}

#pane-ai-classifier .ai-signature-sparkline {
  height: 42px;
}

#pane-ai-classifier .ai-signature-badge,
#pane-ai-classifier .ai-signature-warning {
  border-color: var(--border-2);
  color: var(--muted);
  background: transparent;
}

#pane-ai-classifier .ai-signature-card-matched .ai-signature-badge,
#pane-ai-classifier .ai-signature-card-closest .ai-signature-badge {
  border-color: color-mix(in srgb, var(--normal-fg) 55%, var(--border-2));
  color: var(--normal-fg);
}

#pane-ai-classifier .ai-signature-card-outside .ai-signature-badge,
#pane-ai-classifier .ai-signature-card-invalid .ai-signature-badge {
  border-color: var(--border);
  color: var(--muted-2);
}

#pane-ai-classifier .ai-signature-channel-matches span {
  padding: 5px;
}

#pane-ai-classifier .ai-signature-details-toggle {
  color: var(--muted);
}

#pane-ai-configuration .panel-body {
  display: grid;
  gap: 10px;
}

#pane-ai-configuration .ai-threshold-config,
#pane-ai-configuration .ai-feature-schema {
  margin-top: 0;
}

#pane-ai-configuration .ai-training-status,
#pane-ai-configuration .ai-dataset-summary,
#pane-ai-configuration .ai-label-list {
  max-width: 100%;
}

#pane-ai-configuration .ai-training-panel .panel-body {
  gap: 12px;
}

#pane-ai-configuration .ai-training-actions {
  margin-bottom: 2px;
}

#pane-ai-configuration .ai-training-actions .ai-btn-train {
  min-width: 160px;
}

#pane-ai-configuration .ai-training-metrics {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

#pane-ai-classifier .btn,
#pane-ai-configuration .btn {
  max-width: 260px;
  white-space: nowrap;
}

#pane-ai-classifier .ai-label-add .btn,
#pane-ai-configuration .ai-label-add .btn {
  max-width: none;
}

#pane-ai-classifier .panel,
#pane-ai-configuration .panel {
  box-shadow: none;
}

/* ============================================================
   AI-Futuristic accents — Pattern Recognizer page only.
   Restrained sci-fi/HUD touches layered onto the aerospace-
   console base: gradient scan line, corner brackets, radar-ping
   "live" dot, glow states. Everything below is scoped under
   #pane-ai-classifier so Pattern Setup and the rest of the
   dashboard keep their current look untouched. All motion is
   disabled under prefers-reduced-motion at the end of this block.
   ============================================================ */

/* The Decision Explanation block (gate rows + Decision Engine panel)
   was unconditionally display:none in its base rule with nothing ever
   setting it visible again — both were rendering correctly underneath
   but were completely invisible on the page. Reveal it here. */
#pane-ai-classifier .ai-class-gate {
  display: flex;
}

/* Prediction card and restrained status accents. */
#pane-ai-classifier .ai-prediction-card {
  position: relative;
  /* Deliberately NOT overflow:hidden. This element is a full-width CSS
     Grid item inside .pane-grid (the real scroll container, which has
     overflow-y:auto). Per the grid spec, a grid item's automatic minimum
     size drops to 0 whenever its own overflow is anything but visible -
     so overflow:hidden here let the grid row shrink to fit the viewport
     and silently clipped everything below the fold, with no scrollbar
     ever appearing anywhere (nothing "escaped" this box to be detected
     as overflow by an ancestor). None of the decorations below need
     clipping: they're all inset:0 and self-clip to their own box via
     normal background-image/box painting. */
  background: var(--panel);
}

/* Keep the content above the card's decorative border accents. */
#pane-ai-classifier .ai-prediction-card > .panel-header,
#pane-ai-classifier .ai-prediction-card > .panel-body {
  position: relative;
}

/* Static top rule. The animated scan sweep was decoration that carried no
   information, so it is gone with the rest of the glow. */
#pane-ai-classifier .ai-prediction-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--border-2);
  z-index: 1;
}

#pane-ai-classifier .ai-prediction-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    linear-gradient(to right, var(--accent) 13px, transparent 0) top left / 13px 2px no-repeat,
    linear-gradient(to bottom, var(--accent) 13px, transparent 0) top left / 2px 13px no-repeat,
    linear-gradient(to left, var(--accent) 13px, transparent 0) top right / 13px 2px no-repeat,
    linear-gradient(to bottom, var(--accent) 13px, transparent 0) top right / 2px 13px no-repeat,
    linear-gradient(to right, var(--accent) 13px, transparent 0) bottom left / 13px 2px no-repeat,
    linear-gradient(to top, var(--accent) 13px, transparent 0) bottom left / 2px 13px no-repeat,
    linear-gradient(to left, var(--accent) 13px, transparent 0) bottom right / 13px 2px no-repeat,
    linear-gradient(to top, var(--accent) 13px, transparent 0) bottom right / 2px 13px no-repeat;
}

#pane-ai-classifier .ai-status-dot {
  position: relative;
}

/* Left/right split: the text summary reads as its own card beside
   the round gauge, instead of blending into the panel background. */
#pane-ai-classifier .ai-prediction-left {
  background: color-mix(in srgb, var(--panel) 82%, var(--control-bg) 18%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}

#pane-ai-classifier .ai-prediction-left > *:last-child {
  margin-bottom: 0;
}

/* .ai-prediction-label-area carries flex:1 from the original horizontal
   layout, where it grew sideways next to the ring. Inside this vertical
   column that same rule grows downward instead, pushing the result rows to
   the bottom of the card and opening a large empty gap in the middle. */
#pane-ai-classifier .ai-prediction-left > .ai-prediction-label-area {
  flex: 0 0 auto;
}

/* Glows removed throughout this pane - flat, clean surfaces only.
   State is carried by colour, weight and layout, never by a halo. */

/* Signature cards keep the inset accent bar (a real state indicator) but
   no outer glow. */
#pane-ai-classifier .ai-signature-card-closest {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
}

#pane-ai-classifier .ai-signature-card-matched {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--normal) 64%, transparent);
}

#pane-ai-classifier .ai-gate-accept .ai-gate-fill {
  background: linear-gradient(90deg, var(--normal), var(--normal-fg));
}

#pane-ai-classifier .ai-engine-bar-fill {
  background: linear-gradient(90deg, var(--accent), var(--ai-accent-2));
}

#pane-ai-classifier .ai-engine-bar-fill-warn {
  background: linear-gradient(90deg, var(--warning), var(--warning-fg));
  box-shadow: none;
}

#pane-ai-classifier .ai-decision-engine {
  border-left-color: var(--ai-accent-2);
}

#pane-ai-classifier .ai-engine-title {
  color: var(--ai-accent-2);
}

/* The decorative pane animations these disabled (scan sweep, icon ring,
   radar ping, spinning bezel) have all been removed outright. The wave
   scope handles prefers-reduced-motion itself, in ai-wave-scope.js. */

@media (max-width: 820px) {
  .appbar {
    height: auto;
    min-height: 42px;
  }

  .appbar-indicators {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .appbar-cell {
    min-height: 42px;
  }

  #pane-ai-classifier .ai-prediction-main {
    align-items: center;
  }
}

@media (max-width: 560px) {
  .startup-card {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: left;
  }

  .startup-mark {
    width: 34px;
    height: 34px;
  }

  .ai-intro {
    padding: 0.6rem;
  }

  .ai-intro-sub {
    flex-basis: 100%;
    min-width: 0;
  }

  #pane-ai-classifier .ai-signature-card-main {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  #pane-ai-classifier .ai-signature-meter {
    width: 56px;
    height: 56px;
  }

  #pane-ai-classifier .btn,
  #pane-ai-configuration .btn {
    width: 100%;
    max-width: none;
  }
}

/* ===================== RESPONSIVE HARDENING PASS ===================== */

/* Keep status chips visually stable as text changes between NORMAL / WARNING / OFFLINE. */
.status-pill {
  min-inline-size: 92px;
  max-inline-size: 100%;
  text-align: center;
}

.appbar .badge {
  inline-size: min(118px, 100%);
}

@media (max-width: 1200px) {
  /* Threshold editing is the main workflow here; the bearing helper was too cramped on tablets. */
  .pane-config {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .operations-grid {
    overscroll-behavior: contain;
  }

  .panel-header {
    align-items: stretch;
  }

  .panel-title,
  .panel-meta {
    max-width: 100%;
  }

  .panel-meta {
    text-align: left;
    color: var(--muted-2);
  }

  .metric-status-row {
    grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
    gap: 6px 10px;
  }

  .metric-status-row .status-pill {
    justify-self: end;
  }

  .profile-grid div {
    grid-template-columns: minmax(110px, 0.72fr) minmax(0, 1.28fr);
  }

  /* Text card + round gauge stop fitting side by side on tablet widths -
     stack them so neither one gets squeezed. */
  .ai-prediction-main {
    grid-template-columns: 1fr;
  }

  /* Stacked, the scope would otherwise take a full 520px band and push the
     result text off screen. Cap it so both halves stay readable. */
  #pane-ai-classifier .ai-confidence-ring-wrap {
    max-width: 340px;
  }
}

@media (max-width: 600px) {
  #pane-ai-classifier .ai-confidence-ring-wrap {
    max-width: 260px;
  }
}

@media (max-width: 700px) {
  /* All 6 appbar cells are still visible in the 601-700px band (the 600px
     block below is what hides 3 of them), so 2 columns is correct here. */
  .appbar-indicators {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appbar-cell {
    padding-inline: 8px;
  }

  .appbar .badge {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .kpi-strip {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  .kpi-card {
    min-height: 68px;
    padding: 9px 10px;
  }

  .threshold-stack,
  .threshold-groups,
  .metric-status-grid,
  .system-health-grid,
  .report-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .threshold-actions,
  .threshold-save-actions,
  .report-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .threshold-action-block .btn,
  .threshold-save-actions .btn {
    width: 100%;
    max-width: none;
  }

  .ai-model-status-bar {
    gap: 6px 8px;
  }

  .ai-model-sensor {
    flex-basis: 100%;
    margin-left: 0;
  }

  .ai-prediction-main {
    gap: 12px;
  }

  .ai-pred-stable-label {
    white-space: normal;
  }

  .ai-prediction-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .panel-body,
  .chart-panel-body,
  .trend-chart-body,
  .pane-chart-body {
    padding: 9px 10px 10px;
  }

  .panel-header {
    padding: 8px 10px;
  }

  .profile-grid div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .profile-grid dd {
    text-align: left;
  }

  .indicator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    overflow-x: hidden;
    gap: 1px;
    font-size: 10.5px;
  }

  .indicator-grid > .indicator-head {
    display: none;
  }

  .indicator-grid > .indicator-metric {
    grid-column: 1 / -1;
    color: var(--muted);
    background: var(--panel-hdr);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .indicator-grid > .indicator-metric-repeat {
    display: none;
  }

  .indicator-grid > .indicator-row-label {
    grid-column: 1 / -1;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--text-strong);
  }

  .indicator-grid > .indicator-metric:nth-child(6n + 9),
  .indicator-grid > .indicator-metric:nth-child(6n + 10),
  .indicator-grid > .indicator-metric:nth-child(6n + 11),
  .indicator-grid > .indicator-metric:nth-child(6n + 12),
  .indicator-grid > div:nth-child(6n + 9),
  .indicator-grid > div:nth-child(6n + 10),
  .indicator-grid > div:nth-child(6n + 11),
  .indicator-grid > div:nth-child(6n + 12) {
    display: grid;
    gap: 2px;
  }

  .indicator-grid > div:nth-child(6n + 9)::before { content: "Moving Avg"; }
  .indicator-grid > div:nth-child(6n + 10)::before { content: "Std Dev"; }
  .indicator-grid > div:nth-child(6n + 11)::before { content: "Peak / Avg"; }
  .indicator-grid > div:nth-child(6n + 12)::before { content: "Spike"; }

  .indicator-grid > div:nth-child(6n + 9)::before,
  .indicator-grid > div:nth-child(6n + 10)::before,
  .indicator-grid > div:nth-child(6n + 11)::before,
  .indicator-grid > div:nth-child(6n + 12)::before {
    color: var(--muted-2);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ai-intro {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
  }

  .ai-intro-sub {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .ai-confidence-ring-wrap,
  .ai-confidence-ring {
    width: 60px;
    height: 60px;
  }

  .ai-prediction-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-decision-line {
    display: grid;
    grid-template-columns: minmax(92px, 0.46fr) minmax(0, 1fr);
    gap: 6px 10px;
  }

  .ai-decision-line span {
    overflow-wrap: normal;
    word-break: normal;
  }

  .ai-decision-line strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@media (prefers-reduced-motion: reduce) {
  .recording-indicator-dot { animation: none !important; }
}

.reading-cell {
  min-width: 150px;
}

.reading-value,
.reading-unavailable,
.reading-detail,
.status-detail {
  display: block;
}

.reading-value {
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-weight: 700;
  white-space: nowrap;
}

.reading-unavailable {
  color: var(--muted-2);
  font-weight: 700;
}

.reading-detail,
.status-detail {
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 9px;
  line-height: 1.35;
}

/* Durable-history controls deliberately use only theme variables so the
   calculator and default palettes remain visually consistent. */
.hourly-history-panel { min-height: min(76vh, 760px); }
.hourly-history-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 10px; }
.hourly-history-toolbar .field { min-width: 190px; }
.history-button-group { display: inline-flex; border: 1px solid var(--border-2); background: var(--control-bg); }
.history-button-group button { border: 0; border-right: 1px solid var(--border-2); background: transparent; color: var(--text); font: 600 11px var(--font-mono); padding: 8px 10px; min-height: 38px; cursor: pointer; }
.history-button-group button:last-child { border-right: 0; }
.history-button-group button:hover, .history-button-group button.active { background: var(--control-active); color: var(--control-active-text); }
.hourly-history-help { color: var(--muted); font-size: 11px; margin: 0 0 12px; line-height: 1.55; }
.box-plot-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -3px 0 12px; color: var(--text); font-size: 10px; }
/* Needed because .box-plot-key is declared after the generic .hidden rule with
   equal specificity, so display:flex would otherwise win and the box-plot key
   would stay visible in points mode - explaining quartiles that are not drawn. */
.box-plot-key.hidden { display: none; }
.box-plot-key span { display: inline-flex; align-items: center; gap: 7px; }
.box-plot-key b { display: inline-block; flex: 0 0 auto; position: relative; width: 18px; height: 12px; color: var(--magnitude); }
.box-key-shape { border: 1px solid currentColor; background: color-mix(in srgb, currentColor 16%, transparent); }
.median-key-shape::before { content: ''; position: absolute; left: 1px; right: 1px; top: 5px; border-top: 2px solid currentColor; }
.whisker-key-shape::before { content: ''; position: absolute; left: 8px; top: 1px; height: 10px; border-left: 1px solid currentColor; }
.whisker-key-shape::after { content: ''; position: absolute; left: 4px; top: 1px; width: 9px; height: 8px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.point-key-shape::before { content: ''; position: absolute; width: 7px; height: 7px; left: 6px; top: 3px; border-radius: 50%; background: currentColor; }
.hourly-history-chart-wrap { height: min(62vh, 560px); min-height: 320px; position: relative; border: 1px solid var(--border); background: var(--panel-2); }
.hourly-history-chart-wrap canvas { touch-action: none; cursor: grab; }

.hourly-history-chart-wrap canvas:active { cursor: grabbing; }
@media (max-width: 720px) {
  .hourly-history-chart-wrap { min-height: 280px; height: 52vh; }
  .hourly-history-toolbar .field { width: 100%; }
  /* Every ancestor of this toolbar clips horizontal overflow (see .tab-pane,
     .operations-grid) and none of them re-opens scrolling for it, so a
     non-wrapping button group wider than the panel - the 5-button Zoom
     controls group is the tallest risk - is silently cut off with no way to
     reach the hidden buttons (Reset among them) on a phone-width screen.
     Let each group wrap onto its own rows instead, mirroring the same fix
     already used for .panel-toolbar/.fft-band-presets/.segmented above. */
  .history-button-group { width: 100%; flex-wrap: wrap; }
  .history-button-group button { flex: 1 1 auto; min-width: 64px; }
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* ============================================================
   Fleet table on tablets (601px - 1024px).

   The asset table carries 9 columns and sets min-width: 1080px, so inside
   .table-shell (overflow-x: auto) every tablet had to be scrolled sideways to
   read Severity or Recording. The card layout that already exists for phones
   was only applied at <= 600px, leaving the entire tablet range - which is the
   plant engineer's most likely device - with the worst of both: too narrow for
   the table, too wide to get the cards.

   These are the same declarations as the <= 600px block, promoted to cover
   tablets too. Desktop (>= 1025px) keeps the real table, where 9 columns fit.
   ============================================================ */
@media (min-width: 601px) and (max-width: 1024px) {
  .table-shell {
    overflow-x: visible;
    border: 0;
  }

  .asset-table,
  .asset-table tbody,
  .asset-table tr,
  .asset-table td {
    display: block;
    width: 100%;
  }

  .asset-table {
    min-width: 0;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }

  .asset-table thead {
    display: none;
  }

  .asset-table tr.asset-row {
    margin: 0 0 8px;
    border: 1px solid var(--border);
    background: var(--panel);
  }

  .asset-table tr.asset-row.active {
    border-left: 2px solid var(--info-fg);
  }

  .asset-table td {
    display: grid;
    /* Wider label column than on phones: tablets have the room, and it keeps
       the label/value pairs on a single readable baseline. */
    grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }

  .asset-table td:last-child {
    border-bottom: 0;
  }

  .asset-table td::before {
    content: attr(data-label);
    color: var(--muted-2);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .asset-table .col-num {
    text-align: left;
  }

  .asset-table .empty-cell {
    display: block;
    padding: 14px 10px;
  }

  .asset-table .empty-cell::before {
    content: none;
  }
}

/* ============================================================
   Touch targets on phones and tablets (<= 1024px).

   The Trend Analysis chart controls were laid out for a mouse and kept those
   dimensions on touch devices: segmented buttons 28px tall, the Y-range and
   X-window number inputs 21px, moving-average selects 30px. A machine sweep of
   every pane at six viewports found ~30 distinct controls under 32px, all of
   them on the page an engineer actually drives from a tablet at the machine.

   Sized to 38px, which clears the 32px audit threshold with margin while
   staying well below the row heights, so no toolbar re-wraps. Applied only at
   touch widths - the desktop layout is unchanged.
   ============================================================ */
@media (max-width: 1024px) {
  .seg-btn,
  .x-window-presets .seg-btn,
  .fft-band-presets .seg-btn {
    min-height: 38px;
    padding-block: 6px;
  }

  .chart-ma-control .mini-select,
  .mini-select {
    height: 38px;
    min-height: 38px;
  }

  .y-range-input,
  .x-window-input,
  .chart-controls input[type="number"],
  .chart-controls input[type="text"] {
    min-height: 38px;
    padding-block: 6px;
  }

  /* The frequency summary is only four columns; at 560px it forced a sideways
     scroll on a phone for no reason. Let it use the width it has. */
  .frequency-summary-table {
    min-width: 0;
  }

  .frequency-summary-table th,
  .frequency-summary-table td {
    padding-inline: 6px;
    font-size: 10px;
  }
}

/* Base control sizing on touch devices.

   The rules above fixed the Trend Analysis toolbar specifically, but the sweep
   then showed the same problem app-wide: bare selects at 31px, text/number
   inputs at 31px (21px for the unstyled X-window boxes), <summary> disclosure
   toggles at 24px, buttons at 30px. Rather than chase individual ids, size the
   controls themselves - one rule, every pane, and new controls inherit it.
   Checkboxes stay smaller by nature; their label is the real hit area. */
@media (max-width: 1024px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  select,
  textarea,
  button,
  .btn {
    min-height: 38px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  select {
    /* Also stops iOS Safari zooming the page on focus, which it does for any
       control with a computed font-size below 16px. */
    font-size: max(16px, 1em);
  }

  summary {
    min-height: 38px;
    display: flex;
    align-items: center;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
  }

  /* A checkbox stays visually small, so the wrapping <label> has to carry the
     tap area - it is what a finger actually hits. Without this the alarm
     toggles were 20px targets on a phone. */
  label.threshold-toggle,
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }
}

/* The fleet remains card-based on phones/tablets, while its real table header
   becomes a compact horizontal sort strip. Kept at the end of the responsive
   cascade so older card-layout rules cannot hide it. */
@media (max-width: 1024px) {
  .asset-table thead {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    overflow-x: auto;
    border: 1px solid var(--border);
    scrollbar-width: thin;
  }

  .asset-table thead tr {
    display: flex;
    width: max-content;
    min-width: 100%;
  }

  .asset-table thead th.sortable-header {
    display: block;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 10px 12px;
    border-right: 1px solid var(--border);
    border-bottom: 0;
    touch-action: manipulation;
  }

  .asset-table thead th.sortable-header:last-child { border-right: 0; }
}
[data-admin-only] {
  display: none !important;
}

body.admin-authenticated [data-admin-only] {
  display: revert !important;
}

/* Restoring an admin-only anchor with `display: revert` gives it the browser's
   inline display, which breaks the icon/label flex row. Keep admin navigation
   identical to every other sidebar item at every responsive breakpoint. */
body.admin-authenticated .nav-item[data-admin-only] {
  display: flex !important;
  flex-direction: row;
  align-items: center;
}

.admin-access-section {
  margin-top: auto;
  padding-top: 1rem;
}

.fleet-delete-btn {
  border: 1px solid var(--danger, #d45b5b);
  background: transparent;
  color: var(--danger, #d45b5b);
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  border-radius: 3px;
  vertical-align: middle;
}

.fleet-admin-cell {
  width: 44px;
  min-width: 44px;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  text-align: center;
}

.fleet-delete-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fleet-delete-btn:hover,
.fleet-delete-btn:focus-visible {
  background: color-mix(in srgb, var(--danger, #d45b5b) 14%, transparent);
}

.fleet-delete-btn:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.fleet-delete-btn.is-deleting .fleet-delete-icon {
  animation: fleet-delete-pulse .75s ease-in-out infinite alternate;
}

@keyframes fleet-delete-pulse {
  to { opacity: .25; }
}