:root {
  --g-bg: #edf3fb;
  --g-bg-2: #f8fbff;
  --g-surface: rgba(255, 255, 255, 0.78);
  --g-surface-2: rgba(245, 249, 255, 0.9);
  --g-text: #07111f;
  --g-muted: #5f7086;
  --g-line: rgba(142, 166, 196, 0.34);
  --g-accent: #08182c;
  --g-accent-soft: rgba(220, 234, 255, 0.88);
  --g-glow: rgba(61, 177, 255, 0.18);
  --g-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  --g-shadow-hover: 0 10px 22px rgba(15, 23, 42, 0.08);
  --g-radius: 24px;
  --g-grid-line: rgba(113, 145, 183, 0.12);
}

html[data-gerara-mode="night"] {
  --g-bg: #06111f;
  --g-bg-2: #0b1b30;
  --g-surface: rgba(8, 21, 38, 0.74);
  --g-surface-2: rgba(10, 25, 45, 0.86);
  --g-text: #ecf6ff;
  --g-muted: #8fa7bf;
  --g-line: rgba(83, 121, 164, 0.3);
  --g-accent: #f4fbff;
  --g-accent-soft: rgba(18, 43, 76, 0.92);
  --g-glow: rgba(59, 182, 255, 0.32);
  --g-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  --g-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.24);
  --g-grid-line: rgba(122, 175, 235, 0.12);
}

html[data-gerara-mode] body {
  background: linear-gradient(180deg, var(--g-bg-2), var(--g-bg)) !important;
  color: var(--g-text) !important;
  position: relative;
  min-height: 100vh;
}

html[data-gerara-mode] body::before {
  display: none !important;
  content: none !important;
}

html[data-gerara-mode] body > * {
  position: relative;
  z-index: 1;
}

html[data-gerara-mode] .container,
html[data-gerara-mode] .hero,
html[data-gerara-mode] .panel,
html[data-gerara-mode] .settings-card,
html[data-gerara-mode] .card,
html[data-gerara-mode] .watering-item,
html[data-gerara-mode] .sensor-row,
html[data-gerara-mode] .device-card,
html[data-gerara-mode] .management-board,
html[data-gerara-mode] .nav-card,
html[data-gerara-mode] .panel-wrap .panel,
html[data-gerara-mode] .table-wrap,
html[data-gerara-mode] .chart-wrap,
html[data-gerara-mode] .summary-card,
html[data-gerara-mode] .status-card {
  background: var(--g-surface) !important;
  border-color: var(--g-line) !important;
  box-shadow: var(--g-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-gerara-mode] .header,
html[data-gerara-mode] body[data-page="management"] .header,
html[data-gerara-mode] .topbar-banner,
html[data-gerara-mode] .settings-mqtt-status,
html[data-gerara-mode] .mqtt-visible-status {
  background: var(--g-surface-2) !important;
  color: var(--g-accent) !important;
  border: 1px solid var(--g-line) !important;
  box-shadow: var(--g-shadow) !important;
}

html[data-gerara-mode] .header h1,
html[data-gerara-mode] .title,
html[data-gerara-mode] .card-title,
html[data-gerara-mode] .section-title,
html[data-gerara-mode] .main-title,
html[data-gerara-mode] .settings-card-title,
html[data-gerara-mode] .page-title,
html[data-gerara-mode] h1,
html[data-gerara-mode] h2,
html[data-gerara-mode] h3 {
  color: var(--g-accent) !important;
}

html[data-gerara-mode] .subtitle,
html[data-gerara-mode] .card-text,
html[data-gerara-mode] .page-header-subtitle,
html[data-gerara-mode] .note,
html[data-gerara-mode] .field-label,
html[data-gerara-mode] .range-summary,
html[data-gerara-mode] .status,
html[data-gerara-mode] .sensor-label,
html[data-gerara-mode] .feedback-label,
html[data-gerara-mode] label,
html[data-gerara-mode] .tip {
  color: var(--g-muted) !important;
}

html[data-gerara-mode] .card {
  color: var(--g-accent) !important;
}

html[data-gerara-mode] .sensor-value,
html[data-gerara-mode] .metric-value,
html[data-gerara-mode] .reading-value,
html[data-gerara-mode] .stat-value {
  color: var(--g-accent) !important;
}

html[data-gerara-mode] input,
html[data-gerara-mode] select,
html[data-gerara-mode] textarea,
html[data-gerara-mode] button,
html[data-gerara-mode] .btn,
html[data-gerara-mode] .action,
html[data-gerara-mode] .tab {
  border-color: var(--g-line) !important;
  color: var(--g-accent) !important;
  box-shadow: none;
}

html[data-gerara-mode] input,
html[data-gerara-mode] select,
html[data-gerara-mode] textarea {
  background: var(--g-surface-2) !important;
}

html[data-gerara-mode] button,
html[data-gerara-mode] .btn,
html[data-gerara-mode] .action,
html[data-gerara-mode] .tab,
html[data-gerara-mode] .period-set-btn,
html[data-gerara-mode] .duration-set-btn,
html[data-gerara-mode] .openBtn,
html[data-gerara-mode] .back-link,
html[data-gerara-mode] .logout {
  background: var(--g-surface-2) !important;
}

html[data-gerara-mode] .btn.forced,
html[data-gerara-mode] .btn.pause,
html[data-gerara-mode] .btn.continue,
html[data-gerara-mode] .btn.stop,
html[data-gerara-mode] .mode-btn.active,
html[data-gerara-mode] .openBtn,
html[data-gerara-mode] .action.primary {
  background: linear-gradient(135deg, #2d8cff, #1e6ff4) !important;
  color: #fff !important;
  border-color: transparent !important;
}

html[data-gerara-mode] body[data-page="management"] .mode-toggle {
  background: var(--g-surface-2) !important;
  border: 1px solid var(--g-line) !important;
  border-radius: 18px !important;
  padding: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

html[data-gerara-mode] body[data-page="management"] .mode-btn {
  background: transparent !important;
  color: var(--g-muted) !important;
  border: 0 !important;
  border-radius: 14px !important;
  min-height: 44px !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}

html[data-gerara-mode] body[data-page="management"] .mode-btn:hover {
  transform: translateY(-1px);
}

html[data-gerara-mode] body[data-page="management"] .mode-btn.active {
  background: linear-gradient(135deg, #16385f, #2d8cff) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(45, 140, 255, 0.24) !important;
}

html[data-gerara-mode] body[data-page="management"] .mode-panel .irrigation-action {
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14) !important;
}

html[data-gerara-mode] body[data-page="management"] .mode-panel .irrigation-action .action-title,
html[data-gerara-mode] body[data-page="management"] .mode-panel .irrigation-action .action-subtitle,
html[data-gerara-mode] body[data-page="management"] .mode-panel .irrigation-action .action-icon,
html[data-gerara-mode] body[data-page="management"] .mode-panel .irrigation-action i {
  color: #fff !important;
}

html[data-gerara-mode] body[data-page="management"] .mode-panel .action-primary {
  background: linear-gradient(135deg, #1d5ed8, #2d8cff) !important;
}

html[data-gerara-mode] body[data-page="management"] .mode-panel .action-warning {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
}

html[data-gerara-mode] body[data-page="management"] .mode-panel .action-success {
  background: linear-gradient(135deg, #0f9f6e, #18b47c) !important;
}

html[data-gerara-mode] body[data-page="management"] .mode-panel .action-danger {
  background: linear-gradient(135deg, #cc2d3f, #ef4444) !important;
}

html[data-gerara-mode] body[data-page="management"] .btn-on {
  background: linear-gradient(135deg, #169d5a, #25c46b) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(22, 157, 90, 0.24) !important;
}

html[data-gerara-mode] body[data-page="management"] .btn-off {
  background: linear-gradient(135deg, #d13d4d, #f05454) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(209, 61, 77, 0.22) !important;
}

html[data-gerara-mode] .tab.active {
  background: var(--g-accent-soft) !important;
}

html[data-gerara-mode] .device-card.active,
html[data-gerara-mode] .watering-feedback.success-tone,
html[data-gerara-mode] .duration-feedback.success-tone {
  background: rgba(32, 197, 107, 0.12) !important;
}

html[data-gerara-mode] .duration-feedback.danger-tone,
html[data-gerara-mode] .period-feedback.danger-tone,
html[data-gerara-mode] .device-card.pending {
  background: rgba(255, 183, 43, 0.14) !important;
}

html[data-gerara-mode] body[data-page="management"] .management-board,
html[data-gerara-mode] body[data-page="management"] .card,
html[data-gerara-mode] body[data-page="management"] .mode-toggle {
  background: var(--g-surface) !important;
}

html[data-gerara-mode] body[data-page="valve-photos"] .panel,
html[data-gerara-mode] body[data-page="valve-chart-controls"] .panel,
html[data-gerara-mode] body[data-page="settings"] .settings-layout,
html[data-gerara-mode] body[data-page="settings"] .settings-card {
  border-radius: var(--g-radius) !important;
}

html[data-gerara-mode] body[data-page="valve-photos"] .sensor-row {
  background: var(--g-surface-2) !important;
  border-color: var(--g-line) !important;
}

html[data-gerara-mode] body[data-page="valve-photos"] .sensor-label {
  color: var(--g-muted) !important;
}

html[data-gerara-mode] body[data-page="valve-photos"] .sensor-value {
  color: var(--g-accent) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

html[data-gerara-mode] body[data-page="valve-photos"] .footer {
  background: var(--g-surface-2) !important;
  border-color: var(--g-line) !important;
  color: var(--g-muted) !important;
}

html[data-gerara-mode] body[data-page="valve-photos"] .footer .value {
  color: var(--g-accent) !important;
}

html[data-gerara-mode] .gerara-theme-toggle {
  position: sticky;
  top: 12px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--g-line);
  box-shadow: var(--g-shadow);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  width: max-content;
  min-height: 34px;
  margin: 14px auto 10px;
}

html[data-gerara-mode="night"] .gerara-theme-toggle {
  background: rgba(8, 21, 38, 0.72);
}

html[data-gerara-mode] .gerara-theme-toggle button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent !important;
  color: var(--g-muted) !important;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: none !important;
}

html[data-gerara-mode] .gerara-theme-toggle button:hover {
  transform: none;
}

html[data-gerara-mode] .gerara-theme-toggle button.is-active {
  background: linear-gradient(135deg, #16385f, #2d8cff) !important;
  color: #fff !important;
  box-shadow: none !important;
}

@media (max-width: 700px) {
  html[data-gerara-mode] .gerara-theme-toggle {
    top: 8px;
    margin: 10px auto 8px;
  }
}