* { box-sizing: border-box; }

/* Тема — light за замовчуванням, dark через :root[data-theme="dark"] (виставляє
   assets/theme.js на <html> ще до першого пофарбованого пікселя, з Telegram.WebApp.colorScheme).
   "Термінал"-елементи (.section-card-readout, .alarm-card, .info-log, .pb-tooltip, rack-діаграма
   в section.html) свідомо НЕ використовують ці змінні — це завжди-темний LCD/консольний вигляд,
   не частина світлої/темної теми сторінки. */
:root {
  --bg-page: #FAFAF7;
  --bg-card: #FFFFFF;
  --bg-inset: #F0EEE4;
  --bg-inset-strong: #E2E0D5;
  --border: #d8d6cc;
  --border-hover: #B9B7AC;
  --text-primary: #222;
  --text-secondary: #777;
  --text-muted: #8a8a80;
  --text-faint: #9a9a90;
  --shadow-range-btn: 0 1px 2px rgba(0, 0, 0, 0.08);
  /* .navbar — needs more presence than --shadow-range-btn's 1px (that one's sized for
     a small flat button, not a floating bottom capsule that has to read as elevated
     above page content). */
  --shadow-navbar: 0 6px 20px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
  /* range-toggle (24г/48г/7д) track+active — окремі від --bg-inset/--bg-card,
     бо в темній темі та сама пара виглядає інвертовано (активна пігулка темніша
     за трек) — див. dark-блок нижче. */
  --bg-toggle-track: #F0EEE4;
  --bg-toggle-active: #FFFFFF;
  /* "Екрани" з завжди-темнозеленим фоном (#12261a — .section-card-readout,
     .alarm-card, section.html LCD-панелі) — рамка, що відмежовує їх від фону
     картки/сторінки. Прозора в світлій темі (там контрасту й так достатньо). */
  --screen-border-width: 1px;
  --screen-border: transparent;
  /* section.html — корпус інвертора/стійки та слоти АКБ: свідомо однакові в
     обох темах (жодного dark-override нижче) — це "фізичний" колір корпусу
     обладнання, не частина теми сторінки. Дроти (--wire-*) — навпаки,
     dark-блок нижче їх освітлює/змінює під темний фон. */
  --rack-housing-bg: #F3F2ED;
  --rack-housing-border: #B9B7AC;
  --rack-inner-bg: #E2E0D5;
  --battery-slot-bg: #EDEBE1;
  --battery-slot-border: #c9c7ba;
  --wire-ac: #333333;
  --wire-black: #1a1a1a;
  --wire-live: #E8890A;
  --stage-label: #555555;
  /* AC IN/AC OUT/DC роз'ємна панель на інверторі — окремо від --wire-ac (тонкі
     дроти), бо в dark-темі повинна темнішати, а не світлішати, як дроти. */
  --ac-panel-bg: #333333;
  /* Вертикальні пунктирні лінії-орієнтири на statistics.html (6/12/18г) —
     майже прозорі, темні на світлому фоні. */
  --grid-vline: rgba(0, 0, 0, 0.12);
}
:root[data-theme="dark"] {
  --bg-page: #17181b;
  --bg-card: #1f2124;
  --bg-inset: #26282c;
  --bg-inset-strong: #2c2e33;
  --border: #34363a;
  --border-hover: #47494e;
  --text-primary: #ECEAE3;
  --text-secondary: #a9a89f;
  --text-muted: #8b8a81;
  --text-faint: #78776e;
  --shadow-range-btn: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-navbar: 0 6px 20px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
  --bg-toggle-track: #2b2d32;
  --bg-toggle-active: #40434a;
  --screen-border-width: 0.5px;
  --screen-border: rgba(159, 227, 189, 0.32);
  --wire-ac: #56585c;
  --wire-black: #5e6064;
  --wire-live: #F2C230;
  --ac-panel-bg: #202124;
  --stage-label: #9a9890;
  /* Світла (не темна) на темному фоні — той самий "майже прозорий орієнтир" ефект,
     дзеркально до світлої теми вище. */
  --grid-vline: rgba(255, 255, 255, 0.16);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-page);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text-primary);
}

.app {
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
}

/* Додається assets/navbar.js на кожній сторінці — резервує місце під .navbar
   (position: fixed, поза потоком .app), щоб долиставши до кінця сторінки останній
   блок не опинявся під нею. 92px = 14px (відступ navbar від низу) + ~52px (висота
   navbar: 40px пункти + 2×5px padding + 2×1px border) + ~26px повітря під контентом. */
.app--with-navbar {
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

.app-header {
  padding: 8px 4px 18px;
}

.app-header h1 {
  font-size: 20px;
  margin: 0 0 4px;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.section-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.05s ease;
}

.section-card:active {
  transform: scale(0.99);
}

.section-card:hover {
  border-color: var(--border-hover);
}

.section-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.section-card-title {
  font-size: 15px;
  font-weight: 600;
}

.status-badge {
  font-size: 11px;
  font-family: "Consolas", "Menlo", monospace;
  padding: 3px 8px;
  border-radius: 20px;
  color: #fff;
  letter-spacing: 0.02em;
}
.status-badge.grid { background: #4FA463; }
.status-badge.battery { background: #E8890A; }
.status-badge.offline { background: #8E8E93; }
.section-card.is-offline .section-card-readout .value { color: #8E8E93; }

.section-card-readout {
  background: #12261a;
  border: var(--screen-border-width) solid var(--screen-border);
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.readout-item .label {
  font-size: 10px;
  color: #6fbf8f;
  font-family: "Consolas", "Menlo", monospace;
}
.readout-item .value {
  font-size: 13px;
  color: #8FE3B0;
  font-family: "Consolas", "Menlo", monospace;
}

.battery-bar {
  display: flex;
  gap: 3px;
}
.battery-bar .seg {
  flex: 1;
  height: 8px;
  border-radius: 2px;
  background: var(--bg-inset-strong);
}
.battery-bar .seg.on.green { background: #4FA463; }
.battery-bar .seg.on.yellow { background: #E8C34A; }
.battery-bar .seg.on.red { background: #D9534F; }

.section-card-foot {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
}

/* --- rack diagram (section detail page) ---
   Дефолт — порожня секція (немає активних БАКБ, дроти сховані): setupRack() в
   section.html домальовує потрібну кількість лише після відповіді /api/config,
   щоб не було миготіння "спочатку повна стійка, потім ховає зайве". */

.rack-batt {
  background: #EDEBE1;
  border: 1px solid #c9c7ba;
  border-radius: 4px;
}
.rack-batt.active {
  background: #303030;
  border: none;
}
.rack-led {
  border-radius: 50%;
  background: #888888;
  animation: rack-led-blink 2.6s step-end infinite;
}
/* Переважно темно-сірий (#888888, той самий колір, що й dotAcIn без мережі в
   section.html), з короткими зеленими спалахами (0.1с з 2.6с циклу) — стрибок
   кольору, без плавного переходу, тому обидва краї кожного відрізка мають
   однаковий %. */
@keyframes rack-led-blink {
  0%, 3.846% { background-color: #4de888; }
  3.846%, 100% { background-color: #888888; }
}
.rack-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #dcdcd6;
  font-size: 12px;
}
/* Має йти після .rack-label/.rack-batt в файлі — однакова специфічність,
   і при display:none має перемагати завжди, незалежно від інших rack-класів на елементі. */
.rack-hidden {
  display: none;
}

/* --- section detail page --- */

.detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 14px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-primary);
  font-size: 21px;
}

.detail-title {
  font-size: 22px;
  font-weight: 600;
}

.detail-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.chart-card {
  width: 100%;
  max-width: 480px;
  margin: 16px auto 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 14px 16px 12px;
  box-sizing: border-box;
}

.chart-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.range-toggle {
  display: flex;
  gap: 2px;
  background: var(--bg-toggle-track);
  border-radius: 8px;
  padding: 2px;
  flex-shrink: 0;
}

.range-btn {
  border: none;
  background: transparent;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
}

.range-btn.active {
  background: var(--bg-toggle-active);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: var(--shadow-range-btn);
}

.chart-container {
  width: 100%;
  aspect-ratio: 640 / 220;
  position: relative;
}

.pb-tooltip {
  position: absolute;
  transform: translate(-50%, -125%);
  background: #1f2a22;
  color: #EDEAE0;
  font-size: 11px;
  font-family: "Consolas", "Menlo", monospace;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.08s ease;
  z-index: 2;
}

/* --- alarm log (alarm_system.html) --- */

.alarm-card {
  background: #12261a;
  border: var(--screen-border-width) solid var(--screen-border);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
}

.alarm-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  /* pre, а не nowrap: не схлопувати пробіли — syslog-час "Oct  5" і "Oct 15" мають бути
     однакової ширини, інакше колонка тегів з'їжджає між рядками (Alarms, Voltage). */
  white-space: pre;
  font-family: "Consolas", "Menlo", monospace;
  font-size: 11px;
  line-height: 1.9;
}

.alarm-time {
  color: #EDEAE0;
  flex-shrink: 0;
}

.alarm-tag {
  color: #FF6B6B;
  font-weight: 600;
  flex-shrink: 0;
}

.alarm-msg {
  color: #EDEAE0;
}

/* Flooding alarm (alarm_system.html) — "все гаразд" тим самим зеленим, що й .alarm-empty */
.alarm-tag--ok {
  color: #6fbf8f;
}

.alarm-empty {
  color: #6fbf8f;
  font-family: "Consolas", "Menlo", monospace;
  font-size: 12px;
  padding: 4px 0;
}

/* Voltage (alarm_system.html) — [UNDR_V]: просадка, жовтим, щоб відрізнялась від червоного
   [OVER_V]; "даних ще немає" — сірим, це не "все гаразд" (зелений .alarm-empty). */
.alarm-tag--warn {
  color: #F2C14E;
}

.alarm-empty--muted {
  color: #888888;
}

.volt-summary {
  color: #EDEAE0;
  border-bottom: 1px dashed rgba(237, 234, 224, 0.15);
  margin-bottom: 2px;
}

.info-log {
  margin: 0;
  font-family: "Consolas", "Menlo", monospace;
  font-size: 11px;
  line-height: 1.9;
  color: #EDEAE0;
  white-space: pre;
}

.info-header {
  color: #8FE3B0;
  font-weight: 600;
}

.info-label {
  color: #6fbf8f;
}

.info-value {
  color: #EDEAE0;
}

.info-on {
  color: #4FA463;
  font-weight: 600;
}

.info-off {
  color: #888888;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 6px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}

.legend-item-right {
  margin-left: auto;
}

.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.legend-swatch.grid { background: rgba(79, 164, 99, 0.55); }
.legend-swatch.battery { background: rgba(232, 137, 10, 0.6); }
/* Donut legends (statistics.html) — legend must match the
   donut's own solid colors (chart.js DONUT_GRID_COLOR/DONUT_OUTAGE_COLOR) exactly,
   not the translucent band-legend default above — translucent reads darker/muddier
   than the donut ring on a dark card background. */
.donut-legend .legend-swatch.grid { background: #4FA463; }
.donut-legend .legend-swatch.battery { background: #E8890A; }
.legend-swatch.in-range { background: rgba(37, 133, 64, 0.7); }
.legend-swatch.out-of-range { background: rgba(211, 32, 32, 0.7); }
.legend-swatch.line {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: #6B98C8;
}
.legend-swatch.line.voltage-line {
  background: #4A9B95;
}
.legend-swatch.line.soc-line {
  background: #9B7BD4;
}
.legend-swatch.dashed-red {
  height: 0;
  border-top: 2px dashed #D32F2F;
  border-radius: 0;
  background: none;
}

/* --- statistics.html (донат + лічильники) --- */

.stat-donut-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
}

.stat-donut-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.pb-donut-center {
  position: absolute;
  text-align: center;
  pointer-events: none;
}
.pb-donut-pct {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.pb-donut-sub {
  font-size: 8.5px;
  color: var(--text-faint);
  margin-top: 1px;
}
.pb-donut-center-lg .pb-donut-pct { font-size: 32px; }
.pb-donut-center-lg .pb-donut-sub { font-size: 12px; margin-top: 2px; }

.summary-side {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.summary-now {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.summary-now-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-hover);
  flex-shrink: 0;
}
.summary-now-dot.grid { background: #4FA463; }
.summary-now-dot.battery { background: #E8890A; }
.summary-now-dot.offline { background: #8E8E93; }

.summary-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  gap: 10px;
}
.summary-stat-label { color: var(--text-muted); }
.summary-stat-value { color: var(--text-primary); font-weight: 600; }

.breakdown-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 12.5px;
}
.breakdown-name {
  flex: 0 0 84px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breakdown-bar-track {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-inset);
  overflow: hidden;
}
.breakdown-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: #4FA463;
}
.breakdown-pct {
  flex: 0 0 44px;
  text-align: right;
  color: var(--text-secondary);
  font-family: "Consolas", "Menlo", monospace;
  font-size: 11.5px;
}

/* --- daily uptime timeline (statistics.html, svitlobot-style, факт-лише) --- */

#dailyStrip {
  position: relative; /* якір для .day-strip-gridlines нижче — оверлей на всю висоту 7 рядків */
}
/* Пунктирні орієнтири на 6/12/18г, наскрізь через усі дні тижня — той самий
   лівий/правий відступ (label+gap / duration+gap), що й .day-strip-axis нижче,
   інакше лінії розійдуться з підписами під ними. */
.day-strip-gridlines {
  position: absolute;
  inset: 0;
  left: 54px;
  right: 36px;
  pointer-events: none;
}
.day-strip-gridlines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed var(--grid-vline);
}
.day-strip-gridlines span:nth-child(1) { left: 25%; }
.day-strip-gridlines span:nth-child(2) { left: 50%; }
.day-strip-gridlines span:nth-child(3) { left: 75%; }

.day-strip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.day-strip-label {
  flex: 0 0 48px;
  color: var(--text-primary);
  font-size: 11.5px;
  line-height: 1.25;
}
.day-strip-label .weekday {
  font-weight: 600;
}
.day-strip-label .date {
  display: block;
  color: var(--text-muted);
  font-size: 10.5px;
}
.day-strip-track {
  display: grid;
  grid-template-columns: repeat(144, 1fr);
  flex: 1 1 auto;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-inset);
}
/* Кожна клітинка = один 10-хв слот доби (statistics.html renderDailyStrip(),
   SLOT_MS/SLOTS_PER_DAY) — не пофарбована клітинка (майбутня частина "сьогодні")
   лишає видимим фон .day-strip-track вище. */
.day-strip-cell.on { background: #4FA463; }
.day-strip-cell.off { background: #E8890A; }
.day-strip-duration {
  /* 30px, не 80px — досить для "100%" (найдовший можливий текст тут тепер, з
     переходу на відсоток замість "XX год XX хв"); менша колонка = ширший .day-strip-track. */
  flex: 0 0 30px;
  text-align: right;
  color: var(--text-secondary);
  font-family: "Consolas", "Menlo", monospace;
  font-size: 10.5px;
  white-space: nowrap;
}

/* Ліва/права межа мають збігатись з .day-strip-track вище (label+gap зліва,
   duration+gap справа) — інакше вісь 0-24 виходить за фактичну ширину смуг
   (наприклад "24" опиняється над колонкою тривалості, а не над правим краєм треку).
   Підписи — абсолютно позиційовані на точних 0/25/50/75/100%, а не flex
   space-between: той розподіляє РАМКИ підписів порівну, тому довші підписи
   ("24" ширше за "0") зсували кожну наступну позначку вліво від її справжньої
   часової позначки — тим сильніше, чим ближче до правого краю. */
.day-strip-axis {
  position: relative;
  height: 12px;
  margin: 2px 36px 8px 54px;
  color: var(--text-faint);
  font-size: 10px;
  font-family: "Consolas", "Menlo", monospace;
}
.day-strip-axis span {
  position: absolute;
  top: 0;
}
.day-strip-axis span:nth-child(1) { left: 0; }
.day-strip-axis span:nth-child(2) { left: 25%; transform: translateX(-50%); }
.day-strip-axis span:nth-child(3) { left: 50%; transform: translateX(-50%); }
.day-strip-axis span:nth-child(4) { left: 75%; transform: translateX(-50%); }
.day-strip-axis span:nth-child(5) { left: 100%; transform: translateX(-100%); }

.day-strip-summary {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-primary);
}
.day-strip-summary b {
  font-weight: 600;
}
/* Рядки-тригери popup відключень (statistics.html): "Світло вимикали N разів" і рядок дня
   в таймлайні. */
.outage-link {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.outage-link b {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.outage-link::after {
  content: " ›";
  color: var(--text-faint);
}
.day-strip-row.clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 6px;
}
.day-strip-row.clickable:active {
  background: var(--bg-inset);
}

/* --- popup відключень (statistics.html) — компактна картка у верхній частині екрана,
   поверх navbar; без заливки пунктів, лише тонкі роздільники --- */
.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(12vh + env(safe-area-inset-top)) 16px 16px;
}
.sheet-overlay[hidden] { display: none; } /* display:flex вище інакше перебиває атрибут hidden */
.sheet {
  width: 100%;
  max-width: 300px;
  max-height: 64vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-navbar);
  padding: 10px 14px 12px;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.sheet-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.sheet-close {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.sheet-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sheet-empty {
  padding: 12px 0 4px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
}
.sheet-note {
  padding-top: 8px;
  color: var(--text-faint);
  font-size: 10.5px;
}
.outage-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.outage-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-primary);
}
.outage-item-time {
  font-weight: 600;
  font-family: "Consolas", "Menlo", monospace;
}
.outage-item-duration {
  color: #E8890A;
  font-size: 12px;
  white-space: nowrap;
}
.outage-item-date {
  color: var(--text-muted);
  font-size: 10.5px;
}
.outage-item-ongoing {
  color: #E8890A;
}
.outage-soc-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.outage-soc-value {
  color: var(--text-primary);
  font-family: "Consolas", "Menlo", monospace;
  white-space: nowrap;
}

/* --- bottom navbar (every page, injected by assets/navbar.js) — floating capsule,
   same visual language as .section-card (bg-card + border + radius, no page-wide bar).
   Icon-only nav tabs (Головна/Статистика/Моніторинг/Alarm — labels live in
   aria-label/title) plus a divider-separated quick theme toggle — see assets/theme.js.
   The toggle is deliberately set apart from the tabs (own styling) so it reads as a
   utility action, not another destination. Height is mirrored in .app--with-navbar's
   bottom reserve — change both together. */
.navbar {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 436px;
  display: flex;
  align-items: stretch;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-navbar);
  padding: 5px;
  z-index: 50;
}

.navbar-item {
  flex: 1;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 19px;
  text-decoration: none;
  color: var(--text-secondary);
  transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.navbar-item svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  flex-shrink: 0;
}
.navbar-item.active {
  background: var(--bg-toggle-active);
  color: var(--text-primary);
}
.navbar-item:active {
  transform: scale(0.95);
}

.navbar-divider {
  width: 1px;
  align-self: center;
  height: 24px;
  margin: 0 1px;
  background: var(--border);
  flex-shrink: 0;
}

.navbar-theme-toggle {
  flex-shrink: 0;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  opacity: 0.65;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.navbar-theme-toggle:hover,
.navbar-theme-toggle:active {
  opacity: 1;
  background: var(--bg-inset);
}
.navbar-theme-toggle:active {
  transform: scale(0.92);
}
.navbar-theme-toggle svg {
  width: 19px;
  height: 19px;
  stroke: var(--text-secondary);
}

/* --- monitoring.html: автономність (/api/autonomy) ---
   Рівні .lvl-ok/.lvl-warn/.lvl-low задаються на картці/рядку і перефарбовують усе
   всередині через --lvl — один клас замість окремих кольорів на кожному елементі. */
.lvl-ok { --lvl: #4FA463; }
.lvl-warn { --lvl: #E8890A; }
.lvl-low { --lvl: #D64545; }
.lvl-none { --lvl: var(--text-faint); }

.autonomy-hero {
  margin-top: 0;
  padding: 14px 16px 16px;
}

.autonomy-gauge {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 2px auto 0;
  aspect-ratio: 200 / 118;
}
.autonomy-gauge svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.gauge-track {
  fill: none;
  stroke: var(--bg-inset-strong);
  stroke-width: 14;
  stroke-linecap: round;
}
.gauge-fill {
  fill: none;
  stroke: var(--lvl);
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease, stroke 0.3s ease;
}
.gauge-scale {
  fill: var(--text-faint);
  font-size: 9px;
  font-family: "Consolas", "Menlo", monospace;
}
.autonomy-gauge-center {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  text-align: center;
}
.autonomy-time {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.autonomy-time small {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 4px 0 1px;
}
.autonomy-until {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.autonomy-until b {
  color: var(--lvl);
  font-weight: 600;
}

.autonomy-caption {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
  white-space: pre-line; /* перенос рядка в підписі (monitoring.html) — "Першою сяде …" окремим рядком */
}

.autonomy-row {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.autonomy-row:first-child {
  border-top: none;
  padding-top: 2px;
}
.autonomy-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.autonomy-row-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.autonomy-row-name .autonomy-row-soc {
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}
.autonomy-row-time {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--lvl);
  font-variant-numeric: tabular-nums;
}
.autonomy-row-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-inset);
  margin: 7px 0 6px;
  overflow: hidden;
}
.autonomy-row-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--lvl);
  transition: width 0.6s ease;
}
.autonomy-row-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.autonomy-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--lvl);
  border: 1px solid var(--lvl);
  border-radius: 10px;
  padding: 0 6px;
  margin-left: 6px;
  vertical-align: 1px;
}


/* Підказка "сесія застаріла" (assets/api-client.js, на першу 401 відповідь API) —
   плаваюча картка вгорі, тим самим стилем, що й .navbar знизу, щоб не перекривати його. */
.auth-banner {
  position: fixed;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top));
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 448px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid #E8890A;
  border-radius: 16px;
  box-shadow: var(--shadow-navbar);
  font-size: 14px;
  line-height: 1.35;
}

.auth-banner-text {
  flex: 1;
}

.auth-banner-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  background: #E8890A;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}