/* ============================================================
   UPS MiniApp — стили.
   Цвета берутся из темы Telegram (--tg-theme-*), c fallback'ами
   для открытия в обычном браузере. Серии графиков — фиксированные
   валидированные цвета со своими шагами для светлой/тёмной темы.
   ============================================================ */

:root {
  /* Базовые роли — светлая тема (fallback, если нет Telegram) */
  --bg:        var(--tg-theme-secondary-bg-color, #f0f0f3);
  --card:      var(--tg-theme-bg-color, #ffffff);
  --text:      var(--tg-theme-text-color, #0b0b0b);
  --hint:      var(--tg-theme-hint-color, #85857e);
  --link:      var(--tg-theme-link-color, #2a78d6);
  --accent:    var(--tg-theme-button-color, #2a78d6);
  --accent-fg: var(--tg-theme-button-text-color, #ffffff);
  --hairline:  rgba(0, 0, 0, 0.08);
  --grid:      rgba(0, 0, 0, 0.07);

  /* Статусные цвета (фиксированные, не зависят от темы) */
  --st-good:     #0ca30c;   /* сеть / ок */
  --st-warning:  #b97f00;   /* на батарее (текст, читаемый на светлом) */
  --st-critical: #d03b3b;   /* ошибки, устаревшие данные */

  /* Серии графиков — светлые шаги */
  --series-soc:  #2a78d6;   /* синий  — SOC   */
  --series-vbat: #eb6834;   /* оранжевый — V_bat */

  color-scheme: light;
}

/* Тёмная тема: свои шаги серий, читаемые на тёмной подложке.
   data-theme проставляет app.js из Telegram.WebApp.colorScheme */
:root[data-theme="dark"] {
  --bg:       var(--tg-theme-secondary-bg-color, #0d0d0d);
  --card:     var(--tg-theme-bg-color, #1a1a19);
  --text:     var(--tg-theme-text-color, #ffffff);
  --hint:     var(--tg-theme-hint-color, #979790);
  --hairline: rgba(255, 255, 255, 0.10);
  --grid:     rgba(255, 255, 255, 0.09);

  --st-warning: #fab219;

  --series-soc:  #3987e5;
  --series-vbat: #d95926;

  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Экраны и навигация ---------- */

.screen {
  display: none;
  padding: 12px 12px calc(64px + env(safe-area-inset-bottom, 0px));
  max-width: 560px;
  margin: 0 auto;
}
.screen.active { display: block; }

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 10;
}
.tab {
  flex: 1;
  padding: 8px 0 10px;
  border: none;
  background: none;
  color: var(--hint);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.tab.active { color: var(--link); }
.tab-icon { font-size: 17px; line-height: 1; }

/* ---------- Карточки ---------- */

.card {
  background: var(--card);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--hairline);
}

.rows .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.rows .row + .row { border-top: 1px solid var(--hairline); }
.row-name { color: var(--hint); flex-shrink: 0; }
.row-name small { display: block; font-size: 11px; opacity: .8; }
.row-vals { text-align: right; font-variant-numeric: tabular-nums; }
.row-vals b { font-weight: 600; }

/* ---------- Карточка питания ---------- */

.power-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.power-source {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
}
.power-source.ac  { color: var(--st-good); }
.power-source.bat { color: var(--st-warning); }
.time-left { margin-top: 6px; font-size: 15px; }
.net-flow { margin-top: 6px; color: var(--hint); font-size: 13px; }

/* Кольцо SOC */
.soc-ring-wrap { position: relative; width: 128px; height: 128px; flex-shrink: 0; }
.soc-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.soc-ring-bg, .soc-ring-fg {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
}
.soc-ring-bg { stroke: var(--grid); }
.soc-ring-fg {
  stroke: var(--st-good);
  transition: stroke-dashoffset .6s ease, stroke .3s ease;
}
.soc-ring-fg.mid  { stroke: var(--st-warning); }
.soc-ring-fg.low  { stroke: var(--st-critical); }
.soc-ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.soc-value { font-size: 30px; font-weight: 700; }
.soc-caption { font-size: 11px; color: var(--hint); letter-spacing: .12em; }

/* ---------- Возраст данных, баннеры ---------- */

.data-age {
  text-align: center;
  color: var(--hint);
  font-size: 12px;
  padding: 4px 0 10px;
}
.data-age.stale { color: var(--st-critical); font-weight: 600; }

.banner {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--st-critical);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 14px;
}
.hidden { display: none !important; }

/* ---------- Графики ---------- */

.chart-card { padding-bottom: 8px; }
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.chart-title { font-size: 13px; color: var(--hint); display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-soc  { background: var(--series-soc); }
.dot-vbat { background: var(--series-vbat); }
.chart-readout { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); }
.chart {
  width: 100%;
  height: 160px;
  display: block;
  touch-action: pan-y;   /* вертикальный скролл не блокируем */
}

/* ---------- Сегментированные переключатели ---------- */

.segmented {
  display: flex;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
.seg-btn {
  flex: 1;
  padding: 9px 0;
  border: none;
  background: none;
  color: var(--hint);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--hairline); }
.seg-btn.active {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}
.card .segmented { margin-bottom: 0; border-radius: 8px; }

/* ---------- Управление ---------- */

.ctl-row { cursor: pointer; }
.ctl-caption { color: var(--hint); font-size: 13px; margin-bottom: 8px; }

/* Тумблер */
.switch { position: relative; width: 50px; height: 30px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0;
  background: var(--grid);
  border: 1px solid var(--hairline);
  border-radius: 15px;
  transition: background .2s;
}
.slider::before {
  content: "";
  position: absolute;
  width: 24px; height: 24px;
  left: 2px; top: 2px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s;
}
.switch input:checked + .slider { background: var(--st-good); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:disabled + .slider { opacity: .5; }

/* Кнопка перезагрузки */
.danger-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--st-critical);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.danger-btn:disabled { opacity: .5; }
.ctl-hint {
  text-align: center;
  color: var(--hint);
  font-size: 12px;
  margin-top: 8px;
}

/* Результат команды */
.cmd-result {
  text-align: center;
  font-size: 13px;
  padding: 6px;
  border-radius: 8px;
}
.cmd-result.ok  { color: var(--st-good); }
.cmd-result.err { color: var(--st-critical); }