/* =========================================================================
   Операторский контур этапа 4 (docs/web/ux.md, «Операторский контур»):
   карточки «Огляду», хронология «Контуру дня», группы «Проблем», атлас цен.
   Собраны из компонентов каркаса (components.css); здесь только раскладка
   внутри карточек. Цвета — токены, адаптив — два блока в конце файла.
   ========================================================================= */

/* --- «Огляд» по концепту (№454): шапка с чипом проблем, карточка тенанта ---- */
.ops-head-row { align-items: flex-start; }
.ops-problems-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 12px; white-space: nowrap;
  font-weight: 600; font-size: 14px; color: var(--danger-text); background: var(--danger-soft); border: 1px solid var(--danger);
}
.ops-problems-chip:hover { color: var(--danger-text); }
.ops-tenant { gap: 14px; }
.ops-tenant-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ops-tenant-head h2 { margin: 0; font-size: 20px; }
.ops-tenant-head h2 a { color: inherit; }
.ops-tenant-head + .ops-tenant-src { margin-top: -6px; }
.ops-day {
  display: flex; align-items: center; gap: 12px 14px; padding: 14px 16px; border-radius: 12px;
  background: var(--bg-sunken); border: 1px solid var(--border);
}
.ops-day > .dot { background: var(--text-faint); box-shadow: 0 0 0 3px var(--bg-elevated); }
.ops-day.is-ok { background: var(--ok-soft); border-color: transparent; }
.ops-day.is-ok > .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.ops-day.is-warn > .dot { background: var(--warn); }
.ops-day.is-danger { background: var(--danger-soft); border-color: transparent; }
.ops-day.is-danger > .dot { background: var(--danger); }
.ops-day.is-info > .dot { background: var(--accent); }
.ops-day > div:nth-child(2) { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ops-day > div:nth-child(2) span { color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere; }
.ops-day-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; }
.ops-countdown { font-weight: 600; font-variant-numeric: var(--nums); color: var(--warn-text); white-space: nowrap; }
.ops-day.is-ok .ops-countdown { color: var(--ok-text); }
.ops-steps { list-style: none; margin: 0; padding: 0 0 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  border-bottom: 1px solid var(--border); }
.ops-step { display: grid; gap: 4px; align-content: start; font-size: 12.5px; min-width: 0; }
.ops-step b { font-weight: 600; }
.ops-step span:last-child { color: var(--text-muted); overflow-wrap: anywhere; font-variant-numeric: var(--nums); }
.ops-step-bar { height: 3px; margin-bottom: 4px; border-radius: 999px; background: var(--border); }
.ops-step.is-done .ops-step-bar { background: var(--ok); }
.ops-step.is-pending .ops-step-bar { background: var(--accent-2); }
.ops-step.is-blocked .ops-step-bar { background: var(--danger); }
.ops-step.is-skip .ops-step-bar { background: var(--text-faint); }
.ops-step.is-current:not(.is-blocked) .ops-step-bar { background: var(--warn); }
.ops-step.is-current:not(.is-blocked) b { color: var(--warn-text); }
.ops-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.ops-metrics > div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.ops-metrics > div > span { color: var(--text-muted); font-size: 12.5px; }
.ops-metrics p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ops-metrics b { font-family: var(--font-head); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; overflow-wrap: anywhere; font-variant-numeric: var(--nums); }
.ops-metrics small { font-size: 12.5px; line-height: 1.4; }
.ops-metrics .uic-spark-bars { height: 26px; margin-top: 4px; }
.ops-incidents, .ops-open { margin: 0; }
.ops-open a { font-weight: 600; }
/* Система «Огляду» — четыре плитки каркаса (ui_tile): значение Fixel Display 500, плохое —
   точкой и цветом значения по data-tone; технические имена — в «Деталі» моноширинно. */
.ops-system-grid .ui-tile-value b { display: inline-flex; align-items: center; gap: 10px; }
.ops-system-grid .ui-tile-value .dot { width: 9px; height: 9px; }
.ops-system-grid [data-tone="danger"] .ui-tile-value b { color: var(--danger-text); }
.ops-system-grid [data-tone="warn"] .ui-tile-value b { color: var(--warn-text); }
.ops-system-grid [data-tone="warn"] .ui-tile-value .dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.ops-tech-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ops-tech-row code { font-size: 12px; overflow-wrap: anywhere; }
.ops-system-grid .ui-tile-more .ui-tile-note { display: grid; gap: 4px; }

/* --- «Контур дня»: хронология 07–13 по Києву -------------------------------- */
.ops-timeline { gap: 14px; }
.ops-tl-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-muted); }
.ops-tl-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ops-tl-legend li > span { width: 0; height: 12px; border-left: 2px solid var(--text-faint); }
.ops-tl-legend .is-cutoff > span, .ops-tl-mark.is-cutoff { border-color: var(--warn); }
.ops-tl-legend .is-deadline > span, .ops-tl-mark.is-deadline { border-color: var(--warn); border-left-style: dashed; }
.ops-tl-legend .is-close > span, .ops-tl-mark.is-close { border-color: var(--danger); }
.ops-tl-legend .is-reveal > span, .ops-tl-mark.is-reveal { border-color: var(--accent-2); }
.ops-tl-legend .is-now > span, .ops-tl-mark.is-now { border-color: var(--text); }
.ops-tl-legend .is-scheduled > span, .ops-tl-mark.is-scheduled { border-left-style: dotted; }
.ops-tl { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 12px; align-items: stretch; }
.ops-tl-lane { padding-top: 6px; font-size: 12.5px; color: var(--text-muted); font-weight: 600; border-top: 1px solid var(--border); }
.ops-tl-track { position: relative; height: 96px; border-top: 1px solid var(--border); }
.ops-tl-mark { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--text-faint); }
.ops-tl-span { position: absolute; top: 9px; height: 8px; border-radius: 4px; background: var(--accent-soft); }
.ops-tl-dot {
  position: absolute; top: 7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--bg-elevated); border: 2px solid var(--text-muted);
}
.ops-tl-dot.is-ok { background: var(--ok); border-color: var(--ok); }
.ops-tl-dot.is-late { background: var(--warn); border-color: var(--warn); }
.ops-tl-dot.is-bad { background: var(--danger); border-color: var(--danger); }
/* подпись не обрезается (№455): до двух строк в своей ширине (24 % ленты — шаг подписей ряда) */
.ops-tl-label {
  position: absolute; top: 24px; transform: translateX(-12px); max-width: 24%; width: max-content;
  font-size: 12px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere;
  /* подпись поверх линий сроков читается: фон карточки под текстом (№433) */
  z-index: 1; padding: 0 3px; border-radius: 3px; background: var(--bg-elevated);
}
.ops-tl-label.is-low { top: 60px; }
.ops-tl-label.is-left { transform: translateX(calc(-100% + 12px)); text-align: right; }
.ops-tl-ticks { position: relative; height: 20px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); font-variant-numeric: var(--nums); }
.ops-tl-ticks span { position: absolute; top: 4px; transform: translateX(-50%); }
.ops-tl-ticks span:first-child { transform: none; }
.ops-tl-ticks span:last-child { transform: translateX(-100%); }
/* список дня — дубль ленты: на широком экране только скринридеру, на телефоне (ленты нет) — виден (№455) */
.ops-tl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; font-size: 13px;
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ops-tl-list li { display: flex; flex-wrap: wrap; gap: 2px 8px; padding-left: 10px; border-left: 3px solid var(--border-strong); min-width: 0; }
.ops-tl-list li.is-ok { border-left-color: var(--ok); }
.ops-tl-list li.is-late { border-left-color: var(--warn); }
.ops-tl-list li.is-bad { border-left-color: var(--danger); }
.ops-tl-list b { font-variant-numeric: var(--nums); }
.ops-tl-list span { overflow-wrap: anywhere; min-width: 0; }
.ops-timeline h3 { margin: 4px 0 0; font-size: 14px; font-family: var(--font); font-weight: 600; letter-spacing: 0; }
.ops-sub { margin: 18px 0 10px; font-size: 14px; }
.ops-bid-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 6px; font-size: 13.5px; }
.ops-bid-total { margin: 0; font-size: 13.5px; white-space: nowrap; }
.ops-bid-total b { font-family: var(--font-head); font-weight: 500; font-size: 22px; font-variant-numeric: var(--nums); }
.ops-inputs { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: grid; gap: 4px; font-size: 13px; color: var(--text-muted); }
.ops-inputs b { color: var(--text); font-weight: 500; }
.ops-inputs .good { color: var(--ok-text); }
.ops-inputs .bad { color: var(--danger-text); }
.ops-problem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ops-problem { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); background: var(--bg-sunken); font-size: 13px; min-width: 0; }
.ops-problem > b { font-size: 14px; }
.ops-problem > p { margin: 0; overflow-wrap: anywhere; }
.ops-problem .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ops-problem-tag { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.ops-problem.is-danger { border-left-color: var(--danger); }
.ops-problem.is-danger .ops-problem-tag { color: var(--danger-text); }
.ops-problem.is-warn { border-left-color: var(--warn); }
.ops-problem.is-warn .ops-problem-tag { color: var(--warn-text); }
.ops-problem.is-ok { border-left-color: var(--ok); }
.ops-problem.is-ok .ops-problem-tag { color: var(--ok-text); }
.ops-problems .ops-problem-list + .ops-problem-list { margin-top: 10px; }
.ops-problems-more { margin: 10px 0 0; font-size: 13px; }
.ops-day-runs { list-style: none; margin: 0; padding: 0; display: grid; }
.ops-day-runs li { display: grid; grid-template-columns: 70px 130px 130px minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; min-height: 44px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.ops-day-runs li:last-child { border-bottom: 0; }
.ops-day-runs .num { text-align: right; font-variant-numeric: var(--nums); white-space: nowrap; }
.ops-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.ops-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; min-width: 0; }
.ops-checks li > span:last-child { display: grid; gap: 2px; min-width: 0; }
.ops-checks li > span:last-child span { color: var(--text-muted); overflow-wrap: anywhere; }

/* --- «Проблеми»: группа на сигнатуру ------------------------------------------ */
.ops-problem-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ops-problem {
  display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px;
  background: var(--bg-sunken); border-left: 3px solid var(--border-strong);
}
.ops-problem.is-active { border-left-color: var(--danger); }
.ops-problem.is-queued { border-left-color: var(--warn); }
.ops-problem.is-resolved { border-left-color: var(--ok); }
.ops-problem-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ops-problem-tag { color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
.ops-problem h3 { margin: 0; font-size: 15px; font-family: var(--font); font-weight: 600; letter-spacing: 0; overflow-wrap: anywhere; }
.ops-problem-error { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.ops-problem-meta { margin: 0; color: var(--text-muted); font-size: 12.5px; font-variant-numeric: var(--nums); }
.ops-problem .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ops-problem-force { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 600; }

/* --- «Моделі» ------------------------------------------------------------- */
.ops-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.ops-read { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13.5px; color: var(--text-muted); }
.ops-read b { color: var(--text); }
/* «Ціни» (№455): будні проти вихідних полосами */
.prices-controls { align-items: center; }
.price-split { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.price-split li { display: grid; gap: 6px; }
.price-split-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; font-variant-numeric: var(--nums); }
.price-split-head .is-work { color: var(--accent-text); }
.price-split-head .is-rest { color: var(--text); }
.price-split-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.price-split-bars > span { height: 6px; border-radius: 3px; min-width: 2px; }
.price-split-bars > .is-work { background: var(--chart-s1); }
.price-split-bars > .is-rest { background: var(--chart-s4); }
/* «Моделі» (№455): чипы и переключатели одной строкой, «Обрана модель» справа от графика */
.models-controls { align-items: center; }
.ui-grid > .models-scatter { grid-row: span 2; }
.models-row { grid-template-rows: min-content 1fr; }
.models-picked h2 { margin: 0; font-size: 20px; }
.models-picked-role { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.models-picked-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.models-picked-nums dt { font-size: 12.5px; color: var(--text-muted); }
.models-picked-nums dd { margin: 2px 0 0; }
.models-picked-nums b { font-family: var(--font-head); font-weight: 500; font-size: 24px; font-variant-numeric: var(--nums); }
.models-picked-nums small { display: block; font-size: 12px; color: var(--text-muted); }
.models-picked-say { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--bg-sunken); font-size: 13px; line-height: 1.45; }
.models-variants tr.is-picked > * { background: var(--accent-soft); }
/* «Моделі»: шапка таблицы вариантов переносится — таблица влезает в 1280 (№455) */
.models-variants .ui-table thead th { white-space: normal; height: auto; padding-top: 8px; padding-bottom: 8px; line-height: 1.3; }

/* --- подписи: внутреннее имя — мелко рядом с человеческим (№413) ------------- */
.ops-tech { color: var(--text-muted); font-size: 11.5px; font-weight: 400; overflow-wrap: anywhere; }
.ops-tech code { font-size: inherit; }

@media (max-width: 900px) {
  .ui-grid > .models-scatter { grid-row: auto; }
  .models-row { grid-template-rows: none; }
  .ops-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ops-day { flex-wrap: wrap; }
  .ops-tl-list, .ops-checks { grid-template-columns: minmax(0, 1fr); }
  .ops-day-runs li { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .ops-day-runs li > span:nth-of-type(2) { display: none; }
}
@media (max-width: 480px) {
  .ops-metrics { grid-template-columns: minmax(0, 1fr); }
  .ops-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* на телефоне лента нечитаема — тот же день списком ниже, видимым */
  .ops-tl { display: none; }
  .ops-tl-list { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
}