/* Global light/dark hooks controlled by html[data-theme].
   Kept intentionally minimal to avoid disrupting existing UI. */

html[data-theme="dark"] body {
  background-color: #0b1220;
  color: #e5e7eb;
}

/* Shared UI controls (used by standalone pages) */
.powrys-ui-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.powrys-ui-select {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  color: inherit;
}

.powrys-ui-btn {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  color: inherit;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html[data-theme="dark"] .powrys-ui-select,
html[data-theme="dark"] .powrys-ui-btn {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(17, 24, 39, 0.92);
  color: #e5e7eb;
}

/* Bootstrap pages (base.html) */
html[data-theme="dark"] .navbar {
  background-color: #0b1220 !important;
}

html[data-theme="dark"] .bg-dark {
  background-color: #0b1220 !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
  background-color: #111827;
  color: #e5e7eb;
}

html[data-theme="dark"] .dropdown-item {
  color: #e5e7eb;
}

html[data-theme="dark"] .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .table {
  color: #e5e7eb;
}

/* Admin pages (Bootstrap + custom inline CSS in templates/admin/*) */
html[data-theme="dark"] body.admin-page {
  background: linear-gradient(135deg, #111827 0%, #0b1220 100%) !important;
  color: #e5e7eb;

  /* Bootstrap CSS variables (helps reduce per-component overrides) */
  --bs-body-bg: #0b1220;
  --bs-body-color: #e5e7eb;
  --bs-emphasis-color: #f3f4f6;
  --bs-secondary-color: rgba(229, 231, 235, 0.78);
  --bs-tertiary-color: rgba(229, 231, 235, 0.65);
  --bs-border-color: rgba(255, 255, 255, 0.12);
  --bs-secondary-bg: rgba(17, 24, 39, 0.92);
  --bs-tertiary-bg: rgba(255, 255, 255, 0.06);
  --bs-link-color: #93c5fd;
  --bs-link-hover-color: #bfdbfe;
}

html[data-theme="dark"] body.admin-page .card,
html[data-theme="dark"] body.admin-page .stat-card,
html[data-theme="dark"] body.admin-page .modal-content,
html[data-theme="dark"] body.admin-page .dropdown-menu {
  background-color: rgba(17, 24, 39, 0.92) !important;
  color: #e5e7eb !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body.admin-page .modal-header,
html[data-theme="dark"] body.admin-page .modal-footer {
  border-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] body.admin-page .dropdown-item {
  color: #e5e7eb !important;
}

html[data-theme="dark"] body.admin-page .dropdown-item:hover,
html[data-theme="dark"] body.admin-page .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body.admin-page .dropdown-divider,
html[data-theme="dark"] body.admin-page hr {
  border-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] body.admin-page .table {
  color: #e5e7eb !important;
}

html[data-theme="dark"] body.admin-page .table > :not(caption) > * > * {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] body.admin-page .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] body.admin-page .table-hover > tbody > tr:hover > * {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] body.admin-page .form-control,
html[data-theme="dark"] body.admin-page .form-select,
html[data-theme="dark"] body.admin-page textarea,
html[data-theme="dark"] body.admin-page input,
html[data-theme="dark"] body.admin-page select {
  background-color: rgba(17, 24, 39, 0.92) !important;
  color: #e5e7eb !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] body.admin-page .form-control::placeholder,
html[data-theme="dark"] body.admin-page textarea::placeholder {
  color: rgba(229, 231, 235, 0.55) !important;
}

html[data-theme="dark"] body.admin-page .form-control:focus,
html[data-theme="dark"] body.admin-page .form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.18) !important;
}

html[data-theme="dark"] body.admin-page .btn-close {
  filter: invert(1) grayscale(100%);
}

html[data-theme="dark"] body.admin-page .bg-light,
html[data-theme="dark"] body.admin-page .bg-white {
  background-color: rgba(17, 24, 39, 0.92) !important;
}

html[data-theme="dark"] body.admin-page .text-dark {
  color: #e5e7eb !important;
}

html[data-theme="dark"] body.admin-page .alert {
  background: rgba(17, 24, 39, 0.92) !important;
  color: #e5e7eb !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Admin dashboard custom blocks (templates/admin/dashboard.html) */
html[data-theme="dark"] body.admin-page .site-card,
html[data-theme="dark"] body.admin-page .recent-users-section {
  background: rgba(17, 24, 39, 0.92) !important;
  color: #e5e7eb !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body.admin-page .section-title {
  color: #f3f4f6 !important;
}

html[data-theme="dark"] body.admin-page .site-stat-label,
html[data-theme="dark"] body.admin-page .site-location,
html[data-theme="dark"] body.admin-page .subtitle {
  color: rgba(229, 231, 235, 0.78) !important;
}

html[data-theme="dark"] body.admin-page .users-table thead th {
  color: rgba(229, 231, 235, 0.78) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] body.admin-page .users-table tbody td {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body.admin-page .users-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] body.admin-page .site-stat {
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] body.admin-page .site-stat:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body.admin-page .site-stat-value {
  color: #f3f4f6 !important;
}

/* Powerly dashboard standalone page */
html[data-theme="dark"] body.powerly-dashboard-page {
  background: #0b1220;
}

html[data-theme="dark"] body.powerly-dashboard-page .sidebar {
  background: #0f172a;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] body.powerly-dashboard-page .main-content {
  background: transparent;
}

html[data-theme="dark"] body.powerly-dashboard-page .chart-card,
html[data-theme="dark"] body.powerly-dashboard-page .kpi-card,
html[data-theme="dark"] body.powerly-dashboard-page .insight-card,
html[data-theme="dark"] body.powerly-dashboard-page .analytics-card,
html[data-theme="dark"] body.powerly-dashboard-page .value-card,
html[data-theme="dark"] body.powerly-dashboard-page .inverters-section-compact,
html[data-theme="dark"] body.powerly-dashboard-page .alarms-section-compact,
html[data-theme="dark"] body.powerly-dashboard-page .carbon-section-compact {
  background: rgba(17, 24, 39, 0.92) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] body.powerly-dashboard-page .page-title,
html[data-theme="dark"] body.powerly-dashboard-page .section-title,
html[data-theme="dark"] body.powerly-dashboard-page .chart-title,
html[data-theme="dark"] body.powerly-dashboard-page .insight-title {
  color: #f3f4f6 !important;
}

html[data-theme="dark"] body.powerly-dashboard-page .nav-item {
  color: rgba(229, 231, 235, 0.9) !important;
}

html[data-theme="dark"] body.powerly-dashboard-page .nav-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Alarms standalone page */
html[data-theme="dark"] body.alarms-page {
  background: linear-gradient(135deg, #111827 0%, #0b1220 100%) !important;
}

html[data-theme="dark"] body.alarms-page .header,
html[data-theme="dark"] body.alarms-page .stat-card,
html[data-theme="dark"] body.alarms-page .alarm-card,
html[data-theme="dark"] body.alarms-page .empty-state {
  background: rgba(17, 24, 39, 0.92) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] body.alarms-page .alarm-title {
  color: #f3f4f6 !important;
}

html[data-theme="dark"] body.alarms-page .alarm-description {
  color: rgba(229, 231, 235, 0.78) !important;
}

html[data-theme="dark"] body.alarms-page .stat-label,
html[data-theme="dark"] body.alarms-page .alarm-info-label,
html[data-theme="dark"] body.alarms-page .empty-state p {
  color: rgba(229, 231, 235, 0.78) !important;
}

html[data-theme="dark"] body.alarms-page .alarm-info-value {
  color: rgba(243, 244, 246, 0.96) !important;
}

html[data-theme="dark"] body.alarms-page .filter-tab {
  background: rgba(17, 24, 39, 0.65) !important;
  color: rgba(229, 231, 235, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] body.alarms-page .filter-tab.active {
  background: rgba(255, 255, 255, 0.10) !important;
}

/* Additional standalone pages (inverters / analytics / weather / control / settings / inverter detail) */
html[data-theme="dark"] body.inverters-page,
html[data-theme="dark"] body.analytics-page,
html[data-theme="dark"] body.weather-page,
html[data-theme="dark"] body.control-page,
html[data-theme="dark"] body.settings-page,
html[data-theme="dark"] body.inverter-detail-page {
  background: linear-gradient(135deg, #111827 0%, #0b1220 100%) !important;
}

html[data-theme="dark"] body.inverters-page,
html[data-theme="dark"] body.analytics-page,
html[data-theme="dark"] body.weather-page,
html[data-theme="dark"] body.inverter-detail-page {
  --gray-50: rgba(255, 255, 255, 0.06);
  --gray-100: rgba(255, 255, 255, 0.08);
  --gray-200: rgba(255, 255, 255, 0.12);
  --gray-300: rgba(255, 255, 255, 0.14);
  --gray-600: rgba(229, 231, 235, 0.75);
  --gray-700: rgba(229, 231, 235, 0.85);
  --gray-800: #f3f4f6;
}

html[data-theme="dark"] body.inverters-page .header,
html[data-theme="dark"] body.analytics-page .header,
html[data-theme="dark"] body.weather-page .header {
  background: rgba(17, 24, 39, 0.92) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] body.inverters-page .stat-card,
html[data-theme="dark"] body.inverters-page .inverter-card,
html[data-theme="dark"] body.inverters-page .metric,
html[data-theme="dark"] body.inverters-page .empty-state,
html[data-theme="dark"] body.analytics-page .metric-card,
html[data-theme="dark"] body.analytics-page .chart-card,
html[data-theme="dark"] body.analytics-page .insight-card,
html[data-theme="dark"] body.analytics-page .loading,
html[data-theme="dark"] body.weather-page .current-weather,
html[data-theme="dark"] body.weather-page .forecast-section,
html[data-theme="dark"] body.weather-page .chart-section,
html[data-theme="dark"] body.weather-page .solar-impact,
html[data-theme="dark"] body.weather-page .loading,
html[data-theme="dark"] body.inverter-detail-page .card {
  background: rgba(17, 24, 39, 0.92) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] body.analytics-page .period-selector {
  background: rgba(17, 24, 39, 0.92) !important;
  color: #e5e7eb !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] body.analytics-page .insight-item,
html[data-theme="dark"] body.weather-page .weather-detail,
html[data-theme="dark"] body.weather-page .forecast-card,
html[data-theme="dark"] body.weather-page .impact-card,
html[data-theme="dark"] body.inverters-page .metric {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] body.weather-page #locationLabel {
  color: rgba(229, 231, 235, 0.75) !important;
}

html[data-theme="dark"] body.weather-page .impact-value span[style] {
  color: rgba(229, 231, 235, 0.75) !important;
}

/* Powerly dashboard dark mode (fix dark text + white cards/icons) */
html[data-theme="dark"] body.powerly-dashboard-page {
  background: linear-gradient(135deg, #0b1220 0%, #070c16 100%) !important;
  color: #e5e7eb !important;
  --gray-50: rgba(255, 255, 255, 0.06);
  --gray-100: rgba(255, 255, 255, 0.08);
  --gray-200: rgba(255, 255, 255, 0.12);
  --gray-300: rgba(255, 255, 255, 0.14);
  --gray-600: rgba(229, 231, 235, 0.75);
  --gray-700: rgba(229, 231, 235, 0.85);
  --gray-800: #f3f4f6;
}

html[data-theme="dark"] body.powerly-dashboard-page .sidebar {
  background: rgba(17, 24, 39, 0.92) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] body.powerly-dashboard-page .nav-section-title {
  color: rgba(229, 231, 235, 0.65) !important;
}

html[data-theme="dark"] body.powerly-dashboard-page .nav-item {
  color: rgba(229, 231, 235, 0.88) !important;
}

html[data-theme="dark"] body.powerly-dashboard-page .nav-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body.powerly-dashboard-page .page-title,
html[data-theme="dark"] body.powerly-dashboard-page .section-title,
html[data-theme="dark"] body.powerly-dashboard-page .card-title {
  color: #f3f4f6 !important;
}

html[data-theme="dark"] body.powerly-dashboard-page .page-subtitle,
html[data-theme="dark"] body.powerly-dashboard-page .kpi-label,
html[data-theme="dark"] body.powerly-dashboard-page .kpi-subtitle {
  color: rgba(229, 231, 235, 0.70) !important;
}

/* Powerly dashboard: remaining light UI surfaces */
html[data-theme="dark"] body.powerly-dashboard-page .chart-tabs,
html[data-theme="dark"] body.powerly-dashboard-page .chart-tab.active,
html[data-theme="dark"] body.powerly-dashboard-page .period-selector,
html[data-theme="dark"] body.powerly-dashboard-page .value-metric,
html[data-theme="dark"] body.powerly-dashboard-page .alarm-item,
html[data-theme="dark"] body.powerly-dashboard-page .alarm-compact-item,
html[data-theme="dark"] body.powerly-dashboard-page .inverter-card {
  background: rgba(17, 24, 39, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e5e7eb !important;
}

html[data-theme="dark"] body.powerly-dashboard-page .chart-tab {
  color: rgba(229, 231, 235, 0.78) !important;
}

html[data-theme="dark"] body.powerly-dashboard-page .chart-tab.active {
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.powerly-dashboard-page .kpi-value,
html[data-theme="dark"] body.powerly-dashboard-page .value-title,
html[data-theme="dark"] body.powerly-dashboard-page .chart-title,
html[data-theme="dark"] body.powerly-dashboard-page .section-title,
html[data-theme="dark"] body.powerly-dashboard-page .alarm-description,
html[data-theme="dark"] body.powerly-dashboard-page .alarm-compact-description,
html[data-theme="dark"] body.powerly-dashboard-page .inverter-name {
  color: #f3f4f6 !important;
}

html[data-theme="dark"] body.powerly-dashboard-page .value-description,
html[data-theme="dark"] body.powerly-dashboard-page .metric-label,
html[data-theme="dark"] body.powerly-dashboard-page .alarm-inverter,
html[data-theme="dark"] body.powerly-dashboard-page .alarm-time,
html[data-theme="dark"] body.powerly-dashboard-page .alarm-compact-inverter,
html[data-theme="dark"] body.powerly-dashboard-page .alarm-compact-time {
  color: rgba(229, 231, 235, 0.72) !important;
}

html[data-theme="dark"] body.powerly-dashboard-page .kpi-icon-wrapper {
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] body.powerly-dashboard-page .kpi-card,
html[data-theme="dark"] body.powerly-dashboard-page .chart-card,
html[data-theme="dark"] body.powerly-dashboard-page .analytics-card,
html[data-theme="dark"] body.powerly-dashboard-page .predictions-card,
html[data-theme="dark"] body.powerly-dashboard-page .inverters-compact,
html[data-theme="dark"] body.powerly-dashboard-page .alarms-compact,
html[data-theme="dark"] body.powerly-dashboard-page .carbon-section-compact {
  background: rgba(17, 24, 39, 0.92) !important;
  color: #e5e7eb !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] body.powerly-dashboard-page .kpi-icon-wrapper,
html[data-theme="dark"] body.powerly-dashboard-page .insight-icon,
html[data-theme="dark"] body.powerly-dashboard-page .alarm-compact-icon,
html[data-theme="dark"] body.powerly-dashboard-page .section-title .icon {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] body.powerly-dashboard-page .kpi-value {
  color: #e5e7eb !important;
}

/* Bootstrap/base pages: tables, cards, forms in dark mode */
html[data-theme="dark"] body {
  background: #0b1220 !important;
  color: rgba(229, 231, 235, 0.92);
}

html[data-theme="dark"] body a {
  color: rgba(147, 197, 253, 0.95);
}

html[data-theme="dark"] body a:hover {
  color: rgba(191, 219, 254, 0.98);
}

html[data-theme="dark"] body .card,
html[data-theme="dark"] body .modal-content,
html[data-theme="dark"] body .dropdown-menu {
  background: rgba(17, 24, 39, 0.92) !important;
  color: rgba(229, 231, 235, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body .dropdown-item {
  color: rgba(229, 231, 235, 0.92) !important;
}

html[data-theme="dark"] body .dropdown-item:hover,
html[data-theme="dark"] body .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body .form-control,
html[data-theme="dark"] body .form-select,
html[data-theme="dark"] body .input-group-text {
  background: rgba(17, 24, 39, 0.92) !important;
  color: rgba(229, 231, 235, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] body .form-control::placeholder {
  color: rgba(229, 231, 235, 0.55) !important;
}

html[data-theme="dark"] body .text-muted {
  color: rgba(229, 231, 235, 0.65) !important;
}

html[data-theme="dark"] body .table {
  color: rgba(229, 231, 235, 0.92) !important;
}

html[data-theme="dark"] body .table > :not(caption) > * > * {
  background-color: rgba(17, 24, 39, 0.55) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body .table-hover > tbody > tr:hover > * {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] body .table-light,
html[data-theme="dark"] body thead.table-light,
html[data-theme="dark"] body .table thead.table-light {
  --bs-table-bg: rgba(17, 24, 39, 0.92) !important;
  --bs-table-color: rgba(229, 231, 235, 0.92) !important;
  background-color: rgba(17, 24, 39, 0.92) !important;
  color: rgba(229, 231, 235, 0.92) !important;
}

html[data-theme="dark"] body.control-page .header,
html[data-theme="dark"] body.control-page .control-card,
html[data-theme="dark"] body.control-page .no-data,
html[data-theme="dark"] body.settings-page .header,
html[data-theme="dark"] body.settings-page .settings-card {
  background: rgba(17, 24, 39, 0.92) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] body.control-page .control-title,
html[data-theme="dark"] body.control-page .info-value,
html[data-theme="dark"] body.settings-page .card-title,
html[data-theme="dark"] body.settings-page .info-value,
html[data-theme="dark"] body.settings-page .header h1,
html[data-theme="dark"] body.control-page .header h1 {
  color: #f3f4f6 !important;
}

html[data-theme="dark"] body.control-page .info-label,
html[data-theme="dark"] body.settings-page .info-label,
html[data-theme="dark"] body.settings-page .form-label,
html[data-theme="dark"] body.settings-page .password-requirements,
html[data-theme="dark"] body.control-page .no-data,
html[data-theme="dark"] body.control-page .loading {
  color: rgba(229, 231, 235, 0.8) !important;
}

html[data-theme="dark"] body.settings-page .form-input {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #e5e7eb !important;
}

html[data-theme="dark"] body.settings-page .form-input:disabled {
  background: rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] body.settings-page .info-display {
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] body.inverter-detail-page .back {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e5e7eb !important;
}