/* ClusterPilot authenticated and informational surfaces.
   Login/MFA intentionally do not load this stylesheet. */
html[data-theme="dark"],
html[data-theme-mode="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg1: #030303;
  --bg2: #070707;
  --bg3: #0b0b0b;
  --bg4: #101010;
  --panel: rgba(10,10,10,.96);
  --panel2: rgba(15,15,15,.96);
}

html[data-theme="dark"] body,
html[data-theme-mode="dark"] body {
  background: #000 !important;
  background-image: none !important;
  animation: none !important;
}

html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after,
html[data-theme-mode="dark"] body::before,
html[data-theme-mode="dark"] body::after {
  background-image: none !important;
}

html[data-theme="dark"] :where(#dashboard-bg-cv,.grid-bg,.orb,.bg-orb,.ambient-bg),
html[data-theme-mode="dark"] :where(#dashboard-bg-cv,.grid-bg,.orb,.bg-orb,.ambient-bg) {
  display: none !important;
}

html[data-theme="dark"] :where(.shell,.shell-right,.main,.page,.pd-content),
html[data-theme-mode="dark"] :where(.shell,.shell-right,.main,.page,.pd-content) {
  background-color: #000 !important;
  background-image: none !important;
}

html[data-theme="dark"] :where(.topbar,.sidebar,.pd-topbar,.pd-tabs-wrap,.pd-health-bar),
html[data-theme-mode="dark"] :where(.topbar,.sidebar,.pd-topbar,.pd-tabs-wrap,.pd-health-bar) {
  background: rgba(3,3,3,.97) !important;
  background-image: none !important;
}

html[data-theme="dark"] :where(
  .card,.panel,.section-card,.stat-card,.cluster-card,.cloud-card-connected .card-inner,
  .provider-card,.onprem-card,.graph-card,.ov2-graph-card,.tpa-wrap,.cap-wrap,
  .pd-card,.pd-panel,.hero,.doc-card,.add-section,.del-box,.modal-card,.modal-content
),
html[data-theme-mode="dark"] :where(
  .card,.panel,.section-card,.stat-card,.cluster-card,.cloud-card-connected .card-inner,
  .provider-card,.onprem-card,.graph-card,.ov2-graph-card,.tpa-wrap,.cap-wrap,
  .pd-card,.pd-panel,.hero,.doc-card,.add-section,.del-box,.modal-card,.modal-content
) {
  background-color: #080808 !important;
  background-image: linear-gradient(145deg,rgba(14,14,14,.98),rgba(4,4,4,.99)) !important;
}

html[data-theme="dark"] .main :where([class$="-card"],[class$="-panel"],[class*="-card "],[class*="-panel "]),
html[data-theme-mode="dark"] .main :where([class$="-card"],[class$="-panel"],[class*="-card "],[class*="-panel "]) {
  background-color: #080808 !important;
  background-image: linear-gradient(145deg,rgba(13,13,13,.98),rgba(3,3,3,.99)) !important;
}

html[data-theme="dark"] .main :where(.section,.section-content,[id^="sec-"]),
html[data-theme-mode="dark"] .main :where(.section,.section-content,[id^="sec-"]) {
  background-color: #000 !important;
  background-image: none !important;
}

html[data-theme="dark"] :where(.cluster-card[data-cc],.stat-card[style]),
html[data-theme-mode="dark"] :where(.cluster-card[data-cc],.stat-card[style]) {
  background: linear-gradient(145deg,#0c0c0c,#040404) !important;
}

/* Keep semantic accent colours on text, borders, charts and health states. */
html[data-theme="dark"] :where(input,select,textarea,.search-inp,.swrap),
html[data-theme-mode="dark"] :where(input,select,textarea,.search-inp,.swrap) {
  background-color: #080808 !important;
  background-image: none !important;
}

html[data-theme="dark"] :where(.table-wrap,table,thead,.card-footer,.card-stats,.card-metrics),
html[data-theme-mode="dark"] :where(.table-wrap,table,thead,.card-footer,.card-stats,.card-metrics) {
  background-color: rgba(4,4,4,.9) !important;
  background-image: none !important;
}

html[data-theme="dark"] .dash-noise,
html[data-theme-mode="dark"] .dash-noise {
  opacity: .012 !important;
}