/* ── СЕКТОРЫ — стиль строго следует ШАБЛОНАМ ── */

#page-sectors.active { display: grid; grid-template-columns: clamp(306px, 26.8vw, 663px) 1fr; height: 100%; width: 100%; }

/* Кнопка «Назад» в заголовке редактора — только на мобильном (slide-in overlay).
   На десктопе скрыта — список и редактор в одной grid-сетке. */
#sec-editor-back {
  display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  flex-shrink: 0; cursor: pointer;
  box-shadow: 0 2px 8px rgba(56, 139, 253, 0.35);
}
#sec-editor-back svg { width: 16px; height: 16px; }
@media (min-width: 769px) {
  #sec-editor-back { display: none; }
}

/* Мобильный layout: список full-width, editor slide-in overlay */
@media (max-width: 768px) {
  #page-sectors.active { display: block; position: relative; overflow: hidden; }
  #page-sectors .tm-side { width: 100%; height: 100%; max-width: 100%; }
  #page-sectors .tm-main {
    position: absolute; inset: 0; transform: translateX(100%);
    transition: transform 0.28s ease;
    background: var(--bg); z-index: 10;
    display: flex; flex-direction: column;
  }
  #page-sectors.sec-edit-open .tm-main { transform: translateX(0); }
}

/* Скролл редактора */
#sec-editor-scroll { display: flex; flex-direction: column; gap: clamp(8px, calc(0.63 * var(--u)), 20px); }

/* Двухколоночный layout редактора: слева данные, справа параметры
   1.3.76: gap по Y уменьшен (карточки прижаты ближе друг к другу) */
.sec-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, calc(0.42 * var(--u)), 12px); align-items: start; margin-top: clamp(6px, calc(0.42 * var(--u)), 12px); }
.sec-col { display: flex; flex-direction: column; gap: clamp(6px, calc(0.42 * var(--u)), 12px); min-width: 0; }
@media (max-width: 1100px) {
  .sec-cols { grid-template-columns: 1fr; }
}

/* Read-only значение в стиле stepper (для авто-режима калибровки) */
.sec-readonly { display: flex; align-items: center; justify-content: center; height: clamp(32px, calc(2.5 * var(--u)), 77px); border-radius: clamp(6px, calc(0.52 * var(--u)), 16px); border: 2px dashed var(--border2); background: var(--bg2); font-family: var(--mono); font-weight: 700; font-size: clamp(15px, calc(1.2 * var(--u)), 36px); color: var(--text2); padding: 0 clamp(10px, calc(0.83 * var(--u)), 22px); }
.sec-readonly .sec-muted { font-family: var(--ui); font-style: italic; font-weight: 500; }

/* Секции внутри редактора (как .tm-stage)
   1.3.76: padding Y и внутренний gap уменьшены — карточки сжаты по высоте. */
.sec-section { background: var(--bg); border-radius: clamp(8px, calc(0.63 * var(--u)), 18px); padding: clamp(6px, calc(0.5 * var(--u)), 14px) clamp(10px, calc(0.83 * var(--u)), 22px); border: 1px solid var(--border); display: flex; flex-direction: column; gap: clamp(5px, calc(0.4 * var(--u)), 11px); transition: background 0.3s, border-color 0.3s; }

.sec-section-head { font-weight: 700; color: var(--text); font-size: clamp(14px, calc(1.15 * var(--u)), 35px); }
.sec-section-head-row { display: flex; justify-content: space-between; align-items: center; gap: clamp(10px, calc(0.83 * var(--u)), 22px); flex-wrap: wrap; }

/* Сетка label+stepper (как label-col / stages-area в шаблонах) */
.sec-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(7px, calc(0.52 * var(--u)), 16px) clamp(10px, calc(0.83 * var(--u)), 22px); align-items: center; }

/* Подсказка под параметрами */
.sec-hint { font-size: clamp(10px, calc(0.83 * var(--u)), 24px); color: var(--text3); font-style: italic; padding: clamp(2px, calc(0.16 * var(--u)), 5px) 0; }
.sec-hint b { color: var(--text2); font-weight: 700; font-style: normal; }

/* Информационные строки (read-only) */
.sec-info { display: flex; flex-direction: column; }
.sec-info-row { display: flex; justify-content: space-between; align-items: center; gap: clamp(8px, calc(0.63 * var(--u)), 20px); padding: clamp(4px, calc(0.31 * var(--u)), 10px) 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sec-info-row:last-child { border-bottom: none; }
.sec-info-label { font-size: clamp(11px, calc(0.89 * var(--u)), 26px); font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; }
.sec-info-val { font-family: var(--mono); font-weight: 700; color: var(--text2); font-size: clamp(12px, calc(0.99 * var(--u)), 28px); text-align: right; }
.sec-info-val b { color: var(--accent); }
.sec-muted { color: var(--text3); font-style: italic; font-weight: 500; font-family: var(--ui); }

/* Кнопка сброса */
.sec-btn-warn { padding: clamp(8px, calc(0.63 * var(--u)), 18px) clamp(14px, calc(1.15 * var(--u)), 32px); font-family: var(--ui); font-weight: 700; font-size: clamp(12px, calc(0.94 * var(--u)), 28px); border-radius: clamp(6px, calc(0.5 * var(--u)), 14px); border: 1px solid var(--orange); color: var(--orange); background: rgba(224,120,32,0.08); cursor: pointer; transition: 0.15s; align-self: flex-start; }
.sec-btn-warn:hover { background: var(--orange); color: #fff; }

/* Большое число расхода воды */
.sec-stat-big { font-family: var(--mono); font-weight: 800; font-size: clamp(28px, calc(2.4 * var(--u)), 72px); color: var(--accent); line-height: 1; }
.sec-stat-runs { font-size: clamp(13px, calc(1.04 * var(--u)), 30px); color: var(--text3); font-weight: 600; }

/* Ряд статистики (День/Неделя/Месяц/Год — все одновременно) */
.sec-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(6px, calc(0.5 * var(--u)), 14px); }
.sec-stat-cell { background: var(--bg2); border: 1px solid var(--border); border-radius: clamp(6px, calc(0.5 * var(--u)), 14px); padding: clamp(8px, calc(0.63 * var(--u)), 18px); display: flex; flex-direction: column; align-items: center; gap: clamp(4px, calc(0.31 * var(--u)), 10px); }
.sec-stat-cell-label { font-size: clamp(10px, calc(0.83 * var(--u)), 24px); font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; }
.sec-stat-cell-val { font-family: var(--mono); font-weight: 800; font-size: clamp(15px, calc(1.25 * var(--u)), 36px); color: var(--accent); line-height: 1; white-space: nowrap; }

/* 1.5.19: Solar irrigation cards в блоке Гидравлика */
.sec-solar-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, calc(0.63 * var(--u)), 18px); margin-top: clamp(10px, calc(0.83 * var(--u)), 22px); }
.sec-solar-card { background: var(--bg2); border: 1px solid var(--border); border-radius: clamp(8px, calc(0.63 * var(--u)), 18px); padding: clamp(10px, calc(0.83 * var(--u)), 22px); display: flex; flex-direction: column; align-items: center; gap: clamp(4px, calc(0.31 * var(--u)), 10px); position: relative; overflow: hidden; }
.sec-solar-card.sec-solar-now { background: linear-gradient(135deg, rgba(33,150,243,0.12), rgba(33,150,243,0.04)); border-color: rgba(33,150,243,0.45); }
.sec-solar-card.sec-solar-now::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
.sec-solar-card-label { font-size: clamp(10px, calc(0.83 * var(--u)), 24px); font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; }
.sec-solar-card.sec-solar-now .sec-solar-card-label { color: var(--accent); }
.sec-solar-card-val { font-family: var(--mono); font-weight: 800; font-size: clamp(24px, calc(2.0 * var(--u)), 60px); color: var(--accent); line-height: 1; display: flex; align-items: baseline; gap: clamp(4px, calc(0.31 * var(--u)), 10px); }
.sec-solar-card.sec-solar-day .sec-solar-card-val { color: var(--text2); }
.sec-solar-card-unit { font-size: clamp(11px, calc(0.94 * var(--u)), 26px); font-weight: 700; opacity: 0.7; }
.sec-solar-card-sub { font-size: clamp(10px, calc(0.83 * var(--u)), 24px); color: var(--text3); font-weight: 600; }
.sec-solar-progress { height: clamp(4px, calc(0.31 * var(--u)), 10px); background: var(--border); border-radius: 999px; overflow: hidden; margin-top: clamp(8px, calc(0.63 * var(--u)), 18px); }
.sec-solar-progress-bar { height: 100%; background: linear-gradient(90deg, #fbc02d, #ff9800, #ec407a); border-radius: 999px; transition: width 0.4s ease; }
.sec-solar-progress-hint { font-size: clamp(10px, calc(0.83 * var(--u)), 24px); color: var(--text3); font-style: italic; margin-top: clamp(3px, calc(0.25 * var(--u)), 8px); text-align: center; }

/* Toggle (стиль из settings, фиксированные пиксели) */
.sec-toggle-row { display: flex; align-items: center; gap: clamp(6px, calc(0.5 * var(--u)), 14px); padding: 4px 0; cursor: pointer; user-select: none; }
.sec-toggle-row input { display: none; }
.sec-toggle-label { font-size: clamp(12px, calc(0.94 * var(--u)), 28px); font-weight: 700; color: var(--text2); }
.sec-toggle-slider { position: relative; width: 40px; height: 22px; border-radius: 11px; background: var(--border2); transition: 0.2s; flex-shrink: 0; }
.sec-toggle-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: 0.2s; }
.sec-toggle-row input:checked + .sec-toggle-slider { background: var(--accent); }
.sec-toggle-row input:checked + .sec-toggle-slider::after { left: 21px; }

/* График сектора. 1.3.76: вынесен наверх во всю ширину, padding меньше чем у обычной секции */
.sec-section-chart { padding: clamp(6px, calc(0.4 * var(--u)), 12px) clamp(8px, calc(0.5 * var(--u)), 14px) !important; gap: clamp(4px, calc(0.3 * var(--u)), 8px) !important; }
.sec-chart-toolbar { display: flex; align-items: center; gap: clamp(8px, calc(0.6 * var(--u)), 16px); flex-wrap: wrap; }
.sec-chart-toolbar .sec-section-head { flex: 0 0 auto; }
.sec-chart-toolbar .sec-barrel-row { margin-top: 0; flex: 0 0 auto; }
.sec-chart-toolbar .sec-range-row { flex: 0 0 auto; margin-left: auto; }

/* 1.3.76: кастомная легенда в toolbar — на узких экранах скрывается. */
.sec-chart-legend { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: clamp(6px, calc(0.4 * var(--u)), 12px); align-items: center; justify-content: flex-start; }
.sec-legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: clamp(10px, calc(0.7 * var(--u)), 13px); color: var(--text2); cursor: pointer; user-select: none; padding: 2px 4px; border-radius: 4px; transition: 0.15s; }
.sec-legend-item:hover { background: var(--border2); }
.sec-legend-item.off { opacity: 0.4; text-decoration: line-through; }
.sec-legend-box { display: inline-block; width: 12px; height: 3px; border-radius: 2px; }
.sec-legend-box.sec-legend-dashed { background: transparent !important; border-top: 2px dashed; height: 0; width: 14px; }
@media (max-width: 900px) { .sec-chart-legend { display: none; } }
.sec-chart-wrap { position: relative; width: 100%; height: clamp(180px, 18vh, 280px); }
.sec-range-row { display: flex; gap: clamp(4px, 0.3 * var(--u), 8px); }
.sec-range-btn { padding: clamp(3px, 0.25 * var(--u), 6px) clamp(8px, 0.6 * var(--u), 14px); font-family: var(--ui); font-weight: 700; font-size: clamp(10px, 0.83 * var(--u), 24px); border-radius: clamp(4px, 0.3 * var(--u), 8px); border: 1px solid var(--border2); background: var(--bg2); color: var(--text2); cursor: pointer; transition: 0.15s; }
.sec-range-btn:hover { background: var(--border2); }
.sec-range-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.sec-barrel-row { display: flex; gap: clamp(4px, 0.3 * var(--u), 8px); flex-wrap: wrap; margin-top: clamp(4px, 0.3 * var(--u), 8px); }
.sec-barrel-btn { padding: clamp(4px, 0.3 * var(--u), 8px) clamp(8px, 0.6 * var(--u), 14px); font-family: var(--ui); font-weight: 600; font-size: clamp(10px, 0.83 * var(--u), 22px); border-radius: clamp(4px, 0.3 * var(--u), 8px); border: 1px solid var(--border2); background: var(--bg2); color: var(--text2); cursor: pointer; transition: 0.15s; }
.sec-barrel-btn:hover { background: var(--border2); }
.sec-barrel-btn.active { background: var(--text2); color: #fff; border-color: var(--text2); }

/* Подзаголовок группы (pH / EC) внутри секции */
.sec-group-title { font-size: clamp(11px, calc(0.89 * var(--u)), 26px); font-weight: 800; color: var(--text2); text-transform: uppercase; letter-spacing: 0.06em; padding: clamp(4px, calc(0.31 * var(--u)), 10px) 0 clamp(2px, calc(0.16 * var(--u)), 5px) 0; border-bottom: 1px solid var(--border); margin-bottom: clamp(4px, calc(0.31 * var(--u)), 10px); grid-column: 1 / -1; }