/* DaSens — Industrial Observability Platform prototype */

@import url('fonts.css');   /* IBM Plex у нас, не с Google — см. docs/fonts-and-logo.md */

:root {
  --surf-0: #FAFAFA;
  --surf-1: #FFFFFF;
  --surf-2: #F5F5F5;
  --bd: #EAEAEA;
  --bd-strong: #D4D4D4;
  --tx: #0A0A0A;
  --tx-2: #525252;
  --tx-3: #A3A3A3;
  --accent: oklch(0.55 0.18 254);
  --accent-bg: #EAF2FE;
  --good: oklch(0.58 0.13 145);
  --warn: oklch(0.72 0.15 75);
  --bad: oklch(0.58 0.20 27);
  --shadow-1: 0 1px 0 rgba(0,0,0,0.04);
  --shadow-2: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  --r: 6px;
  --r-card: 10px;
  --row-h: 36px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--surf-0); color: var(--tx);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

.iop-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-feature-settings: 'tnum' 1; }
.iop-text-tert { color: var(--tx-3); }
.iop-text-strong { color: var(--tx); font-weight: 600; }
.iop-text-xs { font-size: 11px; }
.iop-text-sm { font-size: 12px; }

/* ============== App shell ============== */
.iop-app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.iop-app[data-density="compact"] { --row-h: 32px; font-size: 12.5px; }

/* ============== Sidebar ============== */
.iop-side {
  border-right: 1px solid var(--bd); background: var(--surf-1);
  display: flex; flex-direction: column; padding: 16px 12px; gap: 16px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.iop-side-brand { --logo-w: 150px; position: sticky; top: 0; z-index: 2; background: var(--surf-1); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 2px 6px 10px; margin-bottom: -6px; }
.iop-side-logo { width: var(--logo-w); height: auto; display: block; }
.iop-side-tagline { display: block; width: var(--logo-w); font-size: calc(var(--logo-w) * .0447); font-weight: 500; letter-spacing: .052em; text-transform: uppercase; color: var(--tx-2); line-height: 1; white-space: nowrap; }
.iop-side-brand-mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: linear-gradient(135deg, oklch(0.55 0.18 254), oklch(0.45 0.20 270));
  color: white; display: grid; place-items: center;
}
.iop-side-brand-name { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.iop-side-brand-sub { color: var(--tx-3); font-size: 10.5px; }

.iop-side-nav { display: flex; flex-direction: column; gap: 2px; }
.iop-side-nav-label {
  font-size: 10.5px; text-transform: uppercase; color: var(--tx-3);
  letter-spacing: 0.06em; padding: 0 8px 4px; font-weight: 600;
}
.iop-side-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; line-height: 1.3;
  background: transparent; border: 1px solid transparent; border-radius: var(--r);
  color: var(--tx-2); text-align: left; font-size: 13px; font-weight: 500;
}
.iop-side-item:hover { background: var(--surf-2); color: var(--tx); }
.iop-side-item-active {
  background: var(--surf-2); color: var(--tx); font-weight: 600;
}
.iop-side-item-active .iop-side-item-icon { color: var(--accent); }
.iop-side-item-icon { display: grid; place-items: center; width: 16px; }
.iop-side-badge {
  margin-left: auto; background: var(--surf-2); color: var(--tx-2);
  font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 99px;
  font-family: 'IBM Plex Mono', monospace;
}
.iop-side-item-active .iop-side-badge { background: white; }
.iop-side-badge-danger { background: #FDECEC; color: #B42318; }
.iop-side-badge-warn { background: #FFF4DC; color: #9A6700; }

.iop-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--bd); }
.iop-side-foot-row { display: flex; justify-content: space-between; padding: 2px 6px; }
.iop-side-cross { display:block; margin-top:10px; padding:7px 10px; border:1px dashed var(--bd-strong); border-radius:var(--r); font-size:11.5px; color:var(--tx-2); text-align:center; }
.iop-side-cross:hover { background:var(--surf-2); color:var(--tx); }
.iop-side-user { display: flex; align-items: center; gap: 10px; padding: 8px 6px 0; }
.iop-side-user-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent);
  color: white; display: grid; place-items: center; font-weight: 600; font-size: 11px;
}
.iop-side-user-avatar-sm { width: 26px; height: 26px; font-size: 10.5px; }

/* ============== Main / Topbar ============== */
.iop-main { display: flex; flex-direction: column; min-width: 0; }
.iop-topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 24px; background: var(--surf-1); border-bottom: 1px solid var(--bd);
  height: 52px;
}
.iop-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.iop-topbar-search { flex: 1; max-width: 460px; position: relative; display: flex; align-items: center; }
.iop-topbar-search input {
  flex: 1; padding: 7px 12px 7px 32px; border: 1px solid var(--bd); border-radius: var(--r);
  font-size: 12.5px; background: var(--surf-1); outline: none;
}
.iop-topbar-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.iop-topbar-search-icon { position: absolute; left: 10px; color: var(--tx-3); display: grid; place-items: center; }
.iop-topbar-search-kbd { position: absolute; right: 8px; font-size: 10.5px; color: var(--tx-3); padding: 1px 6px; background: var(--surf-2); border-radius: 4px; border: 1px solid var(--bd); }
.iop-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.iop-topbar-bell { position: relative; }
.iop-bell-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); border: 1.5px solid var(--surf-1); }

.iop-content { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 16px; }

.iop-icon-btn {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--r);
  color: var(--tx-2);
}
.iop-icon-btn:hover { background: var(--surf-2); color: var(--tx); }

/* ============== Card ============== */
.iop-card { background: var(--surf-1); border: 1px solid var(--bd); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: hidden; }
.iop-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--bd); min-height: 44px; }
.iop-card-title { font-weight: 600; font-size: 13.5px; letter-spacing: -0.005em; }
.iop-card-sub { color: var(--tx-3); font-size: 11.5px; margin-top: 1px; }
.iop-card-right { display: flex; align-items: center; gap: 8px; }

/* ============== Pill / Chip ============== */
.iop-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; line-height: 1.5; }
.iop-pill-sm { font-size: 10.5px; padding: 1px 7px; }
.iop-pill-lg { font-size: 12.5px; padding: 4px 10px; }
/* Знак статуса (▲/✖) вместо цветной точки: круглый фон и фиксированный
   размер точки ему не нужны — форму несёт сам символ. */
.iop-mark { background: none !important; width: auto !important; height: auto !important;
  border-radius: 0 !important; font-size: 11px; line-height: 1; font-weight: 700; }

.iop-pill-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.iop-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 4px; font-size: 11px; background: var(--surf-2); color: var(--tx-2); border: 1px solid var(--bd); }
.iop-chip-info { background: var(--accent-bg); color: #1F4FB8; border-color: transparent; }
.iop-chip-warn { background: #FFF4DC; color: #9A6700; border-color: transparent; }
.iop-chip-danger { background: #FDECEC; color: #B42318; border-color: transparent; }
.iop-chip-good { background: #E8F5EE; color: #0E7C3A; border-color: transparent; }
.iop-chip-clickable { cursor: pointer; }
.iop-chip-clickable:hover { background: var(--bd); }
.iop-chip-active { outline: 2px solid var(--accent); }

/* ============== Buttons ============== */
.iop-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--r); font-size: 12.5px; font-weight: 500; border: 1px solid transparent;
  transition: background 0.12s, border 0.12s; line-height: 1.4;
}
.iop-btn-icon { display: grid; place-items: center; }
.iop-btn-primary { background: var(--tx); color: white; border-color: var(--tx); }
.iop-btn-primary:hover:not(:disabled) { background: #292929; }
.iop-btn-secondary { background: var(--surf-1); color: var(--tx); border-color: var(--bd); }
.iop-btn-secondary:hover:not(:disabled) { background: var(--surf-2); border-color: var(--bd-strong); }
.iop-btn-ghost { background: transparent; color: var(--tx-2); }
.iop-btn-ghost:hover:not(:disabled) { background: var(--surf-2); color: var(--tx); }
.iop-btn-sm { padding: 4px 10px; font-size: 11.5px; }
.iop-btn-lg { padding: 9px 18px; font-size: 13.5px; }
.iop-btn-full { width: 100%; justify-content: center; }
.iop-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ============== Tabs ============== */
.iop-tabs { display: inline-flex; background: var(--surf-2); border-radius: var(--r); padding: 2px; gap: 2px; }
.iop-tab { padding: 4px 10px; border-radius: 4px; background: transparent; border: none; font-size: 11.5px; color: var(--tx-2); font-weight: 500; }
.iop-tab:hover { color: var(--tx); }
.iop-tab-active { background: var(--surf-1); color: var(--tx); box-shadow: var(--shadow-1); font-weight: 600; }
.iop-tab-count { color: var(--tx-3); margin-left: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; }
.iop-tab-active .iop-tab-count { color: var(--tx-2); }

/* ============== KPI ============== */
.iop-kpi { display: flex; flex-direction: column; gap: 4px; }
.iop-kpi-label { color: var(--tx-3); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.iop-kpi-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.iop-kpi-foot { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.iop-kpi-delta { font-weight: 600; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.iop-delta-up { color: var(--good); }
.iop-delta-down { color: var(--bad); }
.iop-kpi-sub { color: var(--tx-3); }

/* ============== Section title ============== */
.iop-section-title { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tx-3); padding: 12px 0 6px; }

/* ============== Mini bar ============== */
.iop-minibar { width: 100%; background: var(--surf-2); border-radius: 99px; overflow: hidden; }
.iop-minibar-fill { height: 100%; transition: width 0.3s ease; }

/* ============== Tables ============== */
.iop-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.iop-table thead th {
  text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--tx-3);
  border-bottom: 1px solid var(--bd); background: var(--surf-1); position: sticky; top: 52px;
  /* без z-index ячейки tbody рисуются ПОВЕРХ липкой шапки: они идут позже
     в документе, а приоритет у обоих одинаковый. Плитки матрицы
     компетенций из-за этого «наезжали» на заголовки колонок. */
  z-index: 3;
}
.iop-table tbody tr { border-bottom: 1px solid var(--bd); cursor: pointer; }
.iop-table tbody tr:hover { background: var(--surf-2); }
.iop-table tbody tr:last-child { border-bottom: none; }
.iop-table tbody td { padding: 9px 12px; vertical-align: middle; height: var(--row-h); }
.iop-row-sel { background: var(--accent-bg) !important; }
.iop-row-title { font-weight: 500; }
.iop-table-tight tbody td, .iop-table-tight thead th { padding: 6px 10px; }

/* ============== Live value ============== */
.iop-live { display: flex; flex-direction: column; gap: 4px; }
.iop-live-label { color: var(--tx-3); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.iop-live-row { display: flex; align-items: baseline; gap: 4px; }
.iop-live-value { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.iop-live-unit { color: var(--tx-3); font-size: 12px; }
.iop-live-bar { position: relative; height: 4px; background: var(--surf-2); border-radius: 99px; overflow: visible; }
.iop-live-bar-fill { height: 100%; border-radius: 99px; transition: width 0.4s ease; }
.iop-live-bar-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--bad); border-radius: 1px; }

/* ============== Modal ============== */
.iop-modal-back { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: grid; place-items: center; z-index: 50; backdrop-filter: blur(2px); }
.iop-modal { background: var(--surf-1); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.2); width: 100%; max-width: 720px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.iop-modal-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid var(--bd); }
.iop-modal-eyebrow { color: var(--tx-3); font-size: 11px; }
.iop-modal-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-top: 2px; }
.iop-modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.iop-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--bd); background: var(--surf-1); }

/* Reason picker */
.iop-reason-cat { margin-bottom: 14px; }
.iop-reason-cat-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tx-3); margin-bottom: 6px; }
.iop-reason-list { display: flex; flex-wrap: wrap; gap: 6px; }
.iop-reason-pill { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--bd); background: var(--surf-1); font-size: 12px; }
.iop-reason-pill:hover { background: var(--surf-2); }
.iop-reason-pill-sel { background: var(--tx); color: white; border-color: var(--tx); }
.iop-reason-note { margin-top: 16px; }
.iop-reason-note label { display: block; font-size: 11px; font-weight: 600; color: var(--tx-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.iop-reason-note textarea { width: 100%; min-height: 70px; padding: 8px 10px; border: 1px solid var(--bd); border-radius: var(--r); font-size: 12.5px; resize: vertical; outline: none; }
.iop-reason-note textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

/* ============== Operator ============== */
.op-grid { display: flex; flex-direction: column; gap: 16px; }

.op-ribbon { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.op-ribbon-line {
  background: var(--surf-1); border: 1px solid var(--bd); border-radius: var(--r-card);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; text-align: left;
  transition: border 0.12s, transform 0.12s;
}
.op-ribbon-line:hover { border-color: var(--bd-strong); }
.op-ribbon-line-sel { border-color: var(--tx); box-shadow: 0 0 0 1px var(--tx); }
.op-ribbon-line-head { display: flex; justify-content: space-between; align-items: center; }
.op-ribbon-dot { width: 8px; height: 8px; border-radius: 50%; }
.op-ribbon-line-name { font-weight: 500; font-size: 13px; }
.op-ribbon-line-foot { display: flex; justify-content: space-between; font-size: 11px; }

.op-focus-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 4px 0; }
.op-focus-eyebrow { color: var(--tx-3); font-size: 11px; }
.op-focus-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-top: 2px; }
.op-focus-sub { color: var(--tx-2); font-size: 12.5px; }
.op-focus-status { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.op-focus-meta { display: flex; gap: 6px; font-size: 12px; align-items: baseline; }

.op-active-dt {
  display: grid; grid-template-columns: 2fr 1fr auto; gap: 24px; align-items: center;
  padding: 18px 20px; background: linear-gradient(180deg, #FDECEC 0%, #fff 100%);
  border: 1px solid #F2C7C2; border-radius: var(--r-card);
}
.op-active-dt-eyebrow { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #B42318; font-size: 12px; }
.op-pulse-dot { width: 8px; height: 8px; background: var(--bad); border-radius: 50%; box-shadow: 0 0 0 0 var(--bad); animation: pulse 1.4s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.58 0.20 27 / 0.55); }
  70% { box-shadow: 0 0 0 8px oklch(0.58 0.20 27 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.58 0.20 27 / 0); }
}
.op-active-dt-clock { font-size: 38px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-top: 6px; color: var(--tx); }
.op-active-dt-alarm { color: var(--tx-2); font-size: 12.5px; margin-top: 4px; }
.op-active-dt-money { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--bad); }
.op-active-dt-mid { display: flex; flex-direction: column; gap: 2px; }
.op-active-dt-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.op-resolved {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: #E8F5EE; border: 1px solid #B7E3C8; border-radius: var(--r-card);
}
.op-resolved-icon { display: grid; place-items: center; width: 24px; height: 24px; background: var(--good); color: white; border-radius: 50%; }
.op-resolved-title { font-weight: 600; }

.op-telemetry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.op-telemetry-cell { display: flex; flex-direction: column; gap: 8px; }

.op-loss-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* Timeline */
.iop-timeline { position: relative; height: 70px; padding-top: 22px; }
.iop-timeline-axis { position: absolute; top: 0; left: 0; right: 0; height: 22px; }
.iop-timeline-tick { position: absolute; top: 0; transform: translateX(-50%); }
.iop-timeline-tick-line { display: none; }
.iop-timeline-tick-label { font-size: 10px; color: var(--tx-3); }
.iop-timeline-track { position: relative; height: 28px; background: var(--surf-2); border-radius: 4px; overflow: visible; }
.iop-timeline-seg { position: absolute; top: 0; bottom: 0; cursor: pointer; transition: opacity 0.12s; }
.iop-timeline-seg:hover { opacity: 0.85; }
.iop-timeline-seg-sel { outline: 2px solid var(--tx); }
.iop-timeline-now { position: absolute; top: -22px; bottom: -8px; }
.iop-timeline-now-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--tx); }
.iop-timeline-now-dot { position: absolute; top: 0; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--tx); }

.op-timeline-list { display: flex; flex-direction: column; margin-top: 16px; border-top: 1px solid var(--bd); }
.op-timeline-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bd); font-size: 12.5px; }
.op-timeline-row:last-child { border-bottom: none; }

/* ============== Maintenance ============== */
.mx-grid { display: flex; flex-direction: column; gap: 16px; }
.mx-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mx-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.mx-sla-cell { display: flex; flex-direction: column; gap: 4px; }
.mx-detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding-bottom: 8px; }
.mx-detail-meta > div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--bd); font-size: 12px; }
.mx-sla { background: var(--surf-2); border-radius: var(--r); padding: 12px; margin-top: 12px; }
.mx-sla-head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12px; }
.mx-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mx-checklist li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.mx-checklist-box { width: 16px; height: 16px; border: 1.5px solid var(--bd-strong); border-radius: 4px; display: grid; place-items: center; color: white; }
.mx-checklist-done { color: var(--tx-3); text-decoration: line-through; }
.mx-checklist-done .mx-checklist-box { background: var(--good); border-color: var(--good); }
.mx-parts { display: flex; flex-direction: column; gap: 6px; }
.mx-part { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--surf-2); border-radius: var(--r); }

.mx-dispatch { display: flex; flex-direction: column; gap: 12px; }
.mx-team { padding: 10px 12px; border: 1px solid var(--bd); border-radius: var(--r); display: flex; flex-direction: column; gap: 6px; }
.mx-team-head { display: flex; justify-content: space-between; align-items: flex-start; }
.mx-team-name { font-weight: 600; }
.mx-team-bar { display: flex; gap: 3px; }
.mx-team-slot { flex: 1; height: 6px; background: var(--good); border-radius: 2px; opacity: 0.85; }
.mx-team-slot-busy { background: var(--bd-strong); }

.mx-pm { display: flex; flex-direction: column; }
.mx-pm-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bd); font-size: 12.5px; }
.mx-pm-row:last-child { border-bottom: none; }

/* ============== Inventory ============== */
.inv-grid { display: flex; flex-direction: column; gap: 16px; }
.inv-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.inv-cols { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: flex-start; }
.inv-tree { display: flex; flex-direction: column; gap: 1px; }
.inv-tree-line-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: transparent; border: none; text-align: left; width: 100%; border-radius: var(--r); font-size: 12.5px; }
.inv-tree-line-head:hover { background: var(--surf-2); }
.inv-tree-line-head-sel { background: var(--surf-2); font-weight: 600; }
.inv-tree-assets { display: flex; flex-direction: column; padding-left: 16px; border-left: 1px solid var(--bd); margin-left: 12px; gap: 1px; }
.inv-tree-asset { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: transparent; border: none; text-align: left; font-size: 12px; border-radius: var(--r); color: var(--tx-2); }
.inv-tree-asset:hover { background: var(--surf-2); color: var(--tx); }
.inv-tree-asset-sel { color: var(--accent); font-weight: 600; }

.inv-stock-cell { display: flex; flex-direction: column; gap: 3px; }

.inv-lowstock { display: flex; flex-direction: column; }
.inv-lowstock-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bd); font-size: 12.5px; }
.inv-lowstock-row:last-child { border-bottom: none; }
.inv-lowstock-row > div:first-child { flex: 1; }
.inv-lowstock-need { text-align: right; }

.inv-demand { display: flex; flex-direction: column; }
.inv-demand-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bd); font-size: 12.5px; }
.inv-demand-row:last-child { border-bottom: none; }

.inv-po-total { display: flex; justify-content: space-between; padding: 12px 0 0; margin-top: 8px; border-top: 1px solid var(--bd); font-size: 14px; }

/* ============== Fleet ============== */
.fleet-grid { display: flex; flex-direction: column; gap: 16px; }
.fleet-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fleet-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: flex-start; }
.fleet-sig { display: flex; align-items: center; gap: 6px; }
.fleet-bars { display: flex; align-items: flex-end; gap: 1.5px; height: 12px; }
.fleet-bar { width: 3px; background: var(--bd-strong); border-radius: 1px; }
.fleet-bar-on { background: var(--good); }

.fleet-detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding-bottom: 8px; }
.fleet-detail-meta > div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--bd); font-size: 12px; }

.fleet-fw-history { display: flex; flex-direction: column; gap: 6px; }
.fleet-fw-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r); background: var(--surf-2); font-size: 12.5px; }
.fleet-fw-row-current { background: var(--accent-bg); }

.fleet-adopt { display: flex; flex-direction: column; gap: 4px; }

.fleet-campaign { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 8px 0; }
.fleet-camp-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surf-2); border-radius: var(--r); opacity: 0.55; }
.fleet-camp-step-active { opacity: 1; background: var(--accent-bg); border: 1px solid oklch(0.55 0.18 254 / 0.3); }
.fleet-camp-step-done { opacity: 1; background: #E8F5EE; }
.fleet-camp-step-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--bd-strong); color: white; display: grid; place-items: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.fleet-camp-step-active .fleet-camp-step-dot { background: var(--accent); }
.fleet-camp-step-done .fleet-camp-step-dot { background: var(--good); }
.fleet-camp-step-label { font-size: 12px; font-weight: 500; }
.fleet-camp-bar { margin-top: 8px; }

.ota-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px 0 16px; }
.ota-step { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--tx-3); }
.ota-step-active { color: var(--tx); font-weight: 600; }
.ota-step-done { color: var(--good); }
.ota-step-num { width: 20px; height: 20px; border-radius: 50%; background: var(--surf-2); color: var(--tx-3); display: grid; place-items: center; font-size: 10.5px; font-weight: 600; }
.ota-step-active .ota-step-num { background: var(--tx); color: white; }
.ota-step-done .ota-step-num { background: var(--good); color: white; }

.ota-fw-pick, .ota-ring { display: flex; flex-direction: column; gap: 8px; }
.ota-fw-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--bd); border-radius: var(--r); cursor: pointer; }
.ota-fw-card:hover { border-color: var(--bd-strong); }
.ota-fw-card input { margin-top: 4px; }
.ota-fw-card:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }

.ota-cohort-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ota-cohort-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--bd); border-radius: var(--r); font-size: 12.5px; cursor: pointer; }
.ota-cohort-card:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }

.ota-confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding-bottom: 12px; }
.ota-confirm-grid > div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--bd); font-size: 12.5px; }
.ota-confirm-warn { padding: 10px 12px; background: #FFF4DC; color: #9A6700; border-radius: var(--r); font-size: 12px; display: flex; gap: 8px; }

/* ============== Executive ============== */
.exec-grid { display: flex; flex-direction: column; gap: 16px; }
.exec-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 4px; }
.exec-head-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.exec-bigs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.exec-big-label { color: var(--tx-3); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.exec-big-value { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; margin-top: 4px; }
.exec-big-foot { display: flex; gap: 8px; align-items: center; margin-top: 4px; margin-bottom: 12px; }

.exec-bars { display: flex; flex-direction: column; gap: 14px; }
.exec-bar-row { display: flex; flex-direction: column; gap: 4px; }
.exec-bar-label { display: flex; align-items: baseline; gap: 12px; }
.exec-bar-track { height: 8px; background: var(--surf-2); border-radius: 4px; overflow: hidden; }
.exec-bar-fill { height: 100%; background: linear-gradient(90deg, oklch(0.55 0.18 254), oklch(0.45 0.20 270)); border-radius: 4px; }
.exec-bar-foot { display: flex; justify-content: space-between; }

.exec-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 16px; background: var(--surf-2); border-radius: var(--r); font-size: 13px; }
.exec-eq, .exec-mul { color: var(--tx-3); font-weight: 600; }
.exec-formula-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 24px; padding-top: 12px; }
.exec-formula-vals > div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--bd); font-size: 12.5px; }

/* ============== Alerts popover ============== */
.iop-alerts-pop { position: fixed; top: 56px; right: 24px; width: 360px; background: var(--surf-1); border: 1px solid var(--bd); border-radius: var(--r-card); box-shadow: var(--shadow-2); z-index: 30; overflow: hidden; }
.iop-alerts-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--bd); }
.iop-alert { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--bd); align-items: flex-start; }
.iop-alert:last-child { border-bottom: none; }

/* Spark */
.iop-spark { display: block; }

/* ============== Quality ============== */
.qx-grid { display: flex; flex-direction: column; gap: 16px; }
.qx-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.qx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: flex-start; }
.qx-pareto { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.qx-pareto-row { display: grid; grid-template-columns: 160px 1fr 100px; gap: 12px; align-items: center; font-size: 12px; }
.qx-pareto-label { text-align: right; color: var(--tx-2); }
.qx-pareto-bar-wrap { position: relative; height: 20px; background: var(--surf-2); border-radius: 3px; }
.qx-pareto-bar { height: 100%; background: linear-gradient(90deg, oklch(0.55 0.18 254), oklch(0.45 0.20 270)); border-radius: 3px; display: flex; align-items: center; padding: 0 6px; color: white; min-width: 22px; }
.qx-pareto-cum { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--tx); border-radius: 1px; }
.qx-pareto-cost { text-align: right; color: var(--tx-2); }
.qx-pareto-axis { display: flex; justify-content: space-between; padding-left: 172px; padding-right: 112px; color: var(--tx-3); font-size: 10px; font-family: 'IBM Plex Mono', monospace; margin-top: 4px; }
.qx-spc { padding: 4px 0; }
.qx-spc-legend { padding: 8px 0 0; text-align: right; }
.qx-heatmap { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.qx-heatmap-header, .qx-heatmap-row { display: grid; grid-template-columns: 60px repeat(12, 1fr); gap: 2px; }
.qx-heatmap-hour { color: var(--tx-3); font-size: 10px; text-align: center; padding-bottom: 2px; }
.qx-heatmap-line { padding-right: 8px; display: flex; align-items: center; color: var(--tx-2); font-size: 12px; font-weight: 600; }
.qx-heatmap-cell { height: 28px; display: grid; place-items: center; font-size: 11px; color: var(--tx-2); border-radius: 3px; font-family: 'IBM Plex Mono', monospace; }
.qx-heatmap-cell-strong { color: white; font-weight: 600; }
.qx-heatmap-legend { display: flex; align-items: center; gap: 6px; padding: 12px 0 0; justify-content: flex-end; }
.qx-heatmap-grad { width: 140px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, oklch(0.97 0.02 254 / 0.4), oklch(0.85 0.16 50), oklch(0.58 0.20 27)); }
.qx-ncr-actions { display: flex; gap: 6px; padding-top: 12px; border-top: 1px solid var(--bd); margin-top: 12px; }

/* ============== Energy ============== */
.en-grid { display: flex; flex-direction: column; gap: 16px; }
.en-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.en-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: flex-start; }
.en-tariff-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 12px; border-top: 1px solid var(--bd); margin-top: 8px; }
.en-tariff { display: flex; align-items: center; gap: 8px; }
.en-tariff-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.en-tariff-swatch[data-zone="off_peak"] { background: oklch(0.55 0.18 254); }
.en-tariff-swatch[data-zone="shoulder"] { background: oklch(0.72 0.15 75); }
.en-tariff-swatch[data-zone="peak"] { background: oklch(0.58 0.20 27); }
.en-anom { display: flex; flex-direction: column; gap: 10px; }
.en-anom-row { padding: 10px 12px; background: var(--surf-2); border-radius: var(--r); display: flex; flex-direction: column; gap: 6px; }
.en-anom-head { display: flex; align-items: center; gap: 8px; }
.en-anom-foot { display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--bd); margin-top: 4px; }
.en-anom-foot > :last-child { margin-left: auto; }

/* ============== Schedule ============== */
.sx-grid { display: flex; flex-direction: column; gap: 16px; }
.sx-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: flex-start; }
.sx-gantt { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.sx-gantt-header { display: grid; grid-template-columns: 160px 1fr; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--bd); }
.sx-gantt-axis { position: relative; height: 18px; }
.sx-gantt-day { position: absolute; top: 0; padding-left: 6px; border-left: 1px dashed var(--bd); }
.sx-gantt-day:first-child { border-left: none; }
.sx-gantt-row { display: grid; grid-template-columns: 160px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bd); }
.sx-gantt-row:last-child { border-bottom: none; }
.sx-gantt-line-col { display: flex; flex-direction: column; gap: 1px; padding-right: 8px; }
.sx-gantt-track { position: relative; height: 30px; background: var(--surf-2); border-radius: 4px; }
.sx-gantt-day-sep { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--bd-strong); opacity: 0.5; }
.sx-gantt-now { position: absolute; top: 0; bottom: 0; }
.sx-gantt-now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--tx); }
.sx-gantt-now-line-row { z-index: 2; }
.sx-gantt-now-label { position: absolute; top: -16px; left: 4px; color: var(--tx); white-space: nowrap; }
.sx-gantt-block { position: absolute; top: 3px; bottom: 3px; padding: 0 8px; border-radius: 4px; border: none; color: white; font-size: 11px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.sx-gantt-block:hover { filter: brightness(1.1); }
.sx-gantt-block-sel { outline: 2px solid var(--tx); outline-offset: 1px; }
.sx-gantt-block-label { font-weight: 500; }
.sx-gantt-block-tag { margin-left: auto; }
.sx-gantt-legend { display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--bd); margin-top: 8px; }
.sx-gantt-leg-item { display: flex; align-items: center; gap: 6px; }
.sx-status-banner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-top: 12px; background: var(--surf-2); border-radius: var(--r); }
.sx-util { display: flex; flex-direction: column; gap: 10px; }
.sx-util-row { display: grid; grid-template-columns: 140px 1fr 50px; gap: 12px; align-items: center; }
.sx-util-label { display: flex; flex-direction: column; gap: 1px; }
.sx-util-bar { height: 8px; background: var(--surf-2); border-radius: 4px; overflow: hidden; }
.sx-util-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.sx-util-pct { text-align: right; font-weight: 600; }

/* ============== Handover ============== */
.hx-grid { display: flex; flex-direction: column; gap: 16px; }
.hx-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 4px; }
.hx-header-left { display: flex; flex-direction: column; gap: 12px; }
.hx-header-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-top: 2px; }
.hx-shifts { display: flex; align-items: center; gap: 16px; }
.hx-shift { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: var(--surf-2); border-radius: var(--r); min-width: 200px; }
.hx-arrow { color: var(--tx-3); }
.hx-header-right { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.hx-accepted { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: #E8F5EE; color: #0E7C3A; border-radius: var(--r); font-size: 12px; font-weight: 600; }
.hx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--bd); }
.hx-stat { display: flex; flex-direction: column; gap: 4px; padding: 0 20px; border-right: 1px solid var(--bd); }
.hx-stat:last-child { border-right: none; }
.hx-stat:first-child { padding-left: 4px; }
.hx-stat-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.hx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: flex-start; }
.hx-list { display: flex; flex-direction: column; gap: 8px; }
.hx-highlight { display: flex; gap: 10px; padding: 10px 12px; background: var(--surf-2); border-radius: var(--r); border-left: 3px solid; }
.hx-watch { display: flex; flex-direction: column; gap: 4px; }
.hx-watch-item { display: flex; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--bd); cursor: pointer; }
.hx-watch-item:last-child { border-bottom: none; }
.hx-watch-item input { margin-top: 3px; }
.hx-watch-item:has(input:checked) .hx-watch-body { opacity: 0.5; }
.hx-watch-item:has(input:checked) .hx-watch-body > div { text-decoration: line-through; }
.hx-watch-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hx-notes { padding: 12px 16px; background: var(--surf-2); border-radius: var(--r); font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.hx-notes-sig { display: flex; justify-content: space-between; padding-top: 10px; margin-top: 10px; border-top: 1px dashed var(--bd); }

/* ============== Incidents / Settings ============== */
.ix-grid { display: flex; flex-direction: column; gap: 16px; }
.ix-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ix-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: flex-start; }
.ix-sla-cell { display: flex; flex-direction: column; gap: 3px; }
.ix-hazard { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: #FDECEC; border-radius: var(--r); margin-top: 8px; font-size: 12.5px; }
.ix-tl-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tx-3); margin: 16px 0 8px; }
.ix-timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 8px; }
.ix-timeline::before { content: ''; position: absolute; left: 50px; top: 6px; bottom: 6px; width: 1px; background: var(--bd); }
.ix-tl-row { display: grid; grid-template-columns: 44px 12px 1fr; gap: 8px; align-items: center; padding: 6px 0; }
.ix-tl-time { color: var(--tx-3); font-size: 11px; text-align: right; }
.ix-tl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tx); margin-left: 2px; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--surf-1); }
.ix-tl-dot[data-kind="detect"] { background: oklch(0.58 0.20 27); }
.ix-tl-dot[data-kind="ack"]    { background: oklch(0.55 0.18 254); }
.ix-tl-dot[data-kind="escal"]  { background: oklch(0.72 0.15 75); }
.ix-tl-dot[data-kind="done"]   { background: oklch(0.58 0.13 145); }
.ix-tl-body { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ix-int-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ============== Device internals ============== */
.di-wrap { display: flex; flex-direction: column; gap: 8px; }
.di-detail { margin-top: 12px; padding: 12px; background: var(--surf-2); border-radius: var(--r); border: 1px solid var(--bd); }
.di-detail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.di-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; font-size: 12px; }
.di-detail-grid > div { display: flex; flex-direction: column; gap: 2px; }
.di-detail-grid > div > span:first-child { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tx-3); }
.di-notes { margin-top: 10px; padding: 8px 10px; background: var(--surf-1); border-radius: 4px; font-size: 12px; color: var(--tx-2); }
.di-batt { display: flex; flex-direction: column; }
.di-batt-card { display: flex; gap: 24px; padding: 16px; background: var(--surf-2); border-radius: var(--r); border: 1px solid var(--bd); align-items: center; }
.di-batt-visual { position: relative; display: flex; flex-direction: column; align-items: center; }
.di-batt-tip { width: 22px; height: 6px; background: var(--tx-3); border-radius: 2px 2px 0 0; }
.di-batt-shell { width: 56px; height: 110px; border: 2px solid var(--tx); border-radius: 6px; position: relative; display: flex; flex-direction: column-reverse; overflow: hidden; background: var(--surf-1); }
.di-batt-fill { width: 100%; transition: height 0.5s ease; }
.di-batt-stats { flex: 1; }
.di-batt-soc { font-size: 36px; font-weight: 600; }
.di-batt-soc span { font-size: 16px; color: var(--tx-3); margin-left: 4px; }
.di-batt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; margin-top: 12px; font-size: 12px; }
.di-batt-grid > div { display: flex; flex-direction: column; gap: 2px; }
.di-batt-grid > div > span:first-child { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tx-3); }

/* ============== Billing ============== */
.bx-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.bx-stepper { display: flex; gap: 4px; align-items: flex-start; padding: 12px; background: var(--surf-2); border-radius: var(--r); border: 1px solid var(--bd); overflow-x: auto; }
.bx-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 60px; position: relative; }
.bx-step:not(:last-child)::after { content: ''; position: absolute; top: 11px; left: calc(50% + 14px); right: calc(-50% + 14px); height: 2px; background: var(--bd); }
.bx-step-done:not(:last-child)::after { background: oklch(0.58 0.13 145); }
.bx-step-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--surf-1); border: 1.5px solid var(--bd); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--tx-3); position: relative; z-index: 1; }
.bx-step-done .bx-step-dot { background: oklch(0.58 0.13 145); color: white; border-color: oklch(0.58 0.13 145); }
.bx-step-active .bx-step-dot { background: var(--tx); color: white; border-color: var(--tx); box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }
.bx-step-lbl { font-size: 10.5px; color: var(--tx-2); text-align: center; }
.bx-step-active .bx-step-lbl { font-weight: 600; color: var(--tx); }
.bx-pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 12px; }
.bx-pipe-col { background: var(--surf-2); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.bx-pipe-head { padding-bottom: 8px; border-bottom: 1px solid var(--bd); display: flex; flex-direction: column; gap: 2px; }
.bx-deal { background: var(--surf-1); border: 1px solid var(--bd); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.bx-deal-foot { display: flex; justify-content: space-between; align-items: center; }
.iop-side-group { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--bd); }
.iop-side-group:first-of-type { border-top: none; }
.iop-side-group-head { display: flex; align-items: center; gap: 6px; padding: 8px 14px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tx-2); }
.iop-side-group-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.iop-side-group-provider { background: linear-gradient(180deg, transparent 0%, rgba(20,80,40,0.025) 100%); }

/* === Traceability === */
.tr-graph { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; gap: 12px; align-items: stretch; margin-top: 8px; }
.tr-col { display: flex; flex-direction: column; gap: 6px; }
.tr-col-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tx-3); padding: 4px 2px; }
.tr-node { background: var(--surf-1); border: 1px solid var(--bd); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.tr-node-raw   { border-left: 3px solid oklch(0.55 0.18 254); }
.tr-node-batch { border: 1.5px solid var(--tx); background: var(--surf-2); }
.tr-node-ship  { border-left: 3px solid oklch(0.58 0.13 145); }
.tr-arrow { display: flex; align-items: center; justify-content: center; color: var(--tx-3); font-size: 18px; padding-top: 24px; }

/* === Competency matrix === */
.tr-matrix th.tr-matrix-cert-head { writing-mode: horizontal-tb; font-size: 10.5px; padding: 8px 6px; max-width: 80px; }
.tr-matrix-cell { text-align: center; padding: 6px !important; }
.tr-matrix-empty { color: var(--tx-3); font-size: 14px; }
.tr-matrix-pip { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; border-radius: 4px; min-width: 56px; }
.tr-matrix-pip-valid    { background: #E8F5EE; color: #0E7C3A; }
.tr-matrix-pip-expiring { background: #FFF4DC; color: #9A6700; }
.tr-matrix-pip-expired  { background: #FDECEC; color: #B42318; }
.tr-matrix-date { font-size: 9.5px; opacity: 0.85; }

/* === Production output === */
.po-live-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; padding: 12px; background: var(--surf-2); border-radius: var(--r); }
.po-target { margin-top: 6px; }
.po-target-bar { position: relative; height: 12px; background: var(--surf-2); border-radius: 6px; overflow: visible; }
.po-target-fill { height: 100%; background: linear-gradient(90deg, oklch(0.55 0.18 254), oklch(0.58 0.13 145)); border-radius: 6px; transition: width 0.4s ease; }
.po-target-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--tx); }

.iop-chip-danger { background: #FDECEC; color: #B42318; }

/* Smaller width */
@media (max-width: 1280px) {
  .iop-app { grid-template-columns: 200px 1fr; }
  .op-telemetry-grid { grid-template-columns: 1fr 1fr; }
}

.iop-side-home { display: block; }
.iop-side-home[href] { cursor: pointer; }
.iop-side-home[href]:hover { opacity: 0.75; }

/* Аббревиатура с расшифровкой по наведению */
.iop-term { text-decoration: underline dotted 1px; text-underline-offset: 3px;
  cursor: help; text-decoration-color: var(--tx-3); }