/* jeeo.ru — цветовые токены (пользовательские страницы; админка не использует) */

html {
  color-scheme: dark;

  --bg: #05080d;
  --panel: #0b1219;
  --panel2: #0e1722;
  --line: #1a2838;
  --linebr: #2a4055;
  --text: #c8d4e0;
  --dim: #6b7d90;

  --amber: #f5a524;
  --amber-dim: #7a5210;
  --green: #4ade80;
  --green-dim: #1a4a2a;
  --red: #ef4444;
  --red-dim: #3a1010;
  --blue: #38bdf8;
  --blue-dim: #0c2a3a;
  --purple: #a78bfa;
  --purple-dim: #2d1f5e;

  --input-bg: #030608;
  --scrollbar-thumb: #2a4055;
  --overlay: rgba(0, 0, 0, 0.2);
  --overlay-modal: rgba(0, 0, 0, 0.72);
  --overlay-offline: rgba(5, 8, 13, 0.88);
  --hover-bg: #111922;
  --ch-btn-bg: #0a1018;
  --ch-slot-bg: #080d12;
  --ch-slot-border: #111820;
  --ch-meta: #2a3d50;
  --chart-bg: #030608;
  --chart-axis: #1a2838;
  --chart-label: #1e3040;
  --chart-grid-minor: #111c26;
  --chart-grid-major: #182432;
  --chart-grid-zero: #2a4868;
  --chart-grid-text-zero: #3a6080;
  --chart-grid-text-major: #253848;
  --chart-grid-text-minor: #1a2838;

  --mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --sans: Inter, -apple-system, sans-serif;

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

html[data-theme="light"] {
  color-scheme: light;

  --bg: #eef2f7;
  --panel: #ffffff;
  --panel2: #f5f8fc;
  --line: #d4dde8;
  --linebr: #b8c5d4;
  --text: #1a2332;
  --dim: #5a6b7d;

  --amber: #d4890a;
  --amber-dim: #fef3c7;
  --green: #16a34a;
  --green-dim: #dcfce7;
  --red: #dc2626;
  --red-dim: #fee2e2;
  --blue: #0284c7;
  --blue-dim: #e0f2fe;
  --purple: #7c3aed;
  --purple-dim: #ede9fe;

  --input-bg: #ffffff;
  --scrollbar-thumb: #b8c5d4;
  --overlay: rgba(0, 0, 0, 0.06);
  --overlay-modal: rgba(15, 23, 42, 0.28);
  --overlay-offline: rgba(238, 242, 247, 0.92);
  --hover-bg: #dce4ee;

  --mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --sans: Inter, -apple-system, sans-serif;

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

/* Переключатель темы */
.theme-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 1000;
  width: 44px; height: 44px;
  border: 1px solid var(--linebr); background: var(--panel); color: var(--text);
  font-size: 20px; cursor: pointer; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 150ms;
}
.theme-toggle:hover { border-color: var(--amber); }

html.in-iframe .theme-toggle { display: none; }

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}
.navbar .theme-toggle,
.theme-toggle-nav {
  position: static;
  top: auto;
  right: auto;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.ch-slot-empty { background: var(--ch-slot-bg); border: 1px solid var(--ch-slot-border); border-radius: 6px; }

/* Кнопка в navbar — не выше модалок */
.navbar .theme-toggle,
.theme-toggle-nav {
  z-index: auto;
}

/* Скрыть переключатель при открытой модалке кабинета */
body:has(.dash-modal-overlay.visible) .theme-toggle-nav {
  visibility: hidden;
  pointer-events: none;
}

.modal-overlay,
.confirm-overlay,
#temp-chart-modal,
#upgrade-modal {
  background: var(--overlay-modal) !important;
}

.hdr-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.hdr .theme-toggle {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: 34px;
  height: 34px;
  min-width: 34px;
  font-size: 16px;
  z-index: auto;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid var(--linebr);
  background: var(--panel2);
  color: var(--text);
}


/* mobile: скрыть toggle только при ОТКРЫТОЙ модалке */
body:has(#settings-modal[style*="display:flex"]) .hdr .theme-toggle,
body:has(#settings-modal[style*="display: flex"]) .hdr .theme-toggle,
body:has(#upgrade-modal[style*="display:flex"]) .hdr .theme-toggle,
body:has(#upgrade-modal[style*="display: flex"]) .hdr .theme-toggle,
body:has(#plan-soon-modal[style*="display:flex"]) .hdr .theme-toggle,
body:has(#plan-soon-modal[style*="display: flex"]) .hdr .theme-toggle,
body:has(#m-rename-modal[style*="display:flex"]) .hdr .theme-toggle,
body:has(#m-rename-modal[style*="display: flex"]) .hdr .theme-toggle,
body:has(#m-unregister-modal[style*="display:flex"]) .hdr .theme-toggle,
body:has(#m-unregister-modal[style*="display: flex"]) .hdr .theme-toggle,
body:has(#add-device-modal[style*="display:flex"]) .hdr .theme-toggle,
body:has(#add-device-modal[style*="display: flex"]) .hdr .theme-toggle,
body:has(#confirm-scenario-override[style*="display:flex"]) .hdr .theme-toggle,
body:has(#confirm-scenario-override[style*="display: flex"]) .hdr .theme-toggle,
body:has(.m-account-overlay.open) .hdr .theme-toggle,
body:has(#temp-chart-modal-mobile) .hdr .theme-toggle {
  visibility: hidden;
  pointer-events: none;
}

.offline-overlay,
.off-overlay {
  background: var(--overlay-offline) !important;
}