/* ===== monthlies_sla_graph_over_time_html (HTML form, scoped) =====
   Every rule here is the form's old <style> block, which Anvil's server strips out of an HTML
   template. Loaded eagerly from anvil.yaml native_deps.head_html.

   The root is the wrapping <div class="monthlies-rolling-graph"> the conversion added, because the
   old template had two top-level nodes (the content div and the slot host) and Anvil would otherwise
   keep its own wrapper as the root. Nothing styled that wrapper before, so there is no root box rule
   here: the only thing the root carries is the custom-property set, for the reason below.

   THE CUSTOM PROPERTIES MOVED UP ONE LEVEL, and the dark arm is why. The old pair declared both on
   .rolling-graph-container, the div __init__.py builds into #monthlies-graph-content, and the dark
   rule won on specificity. The dark arm now names the ROOT, bare and not :where()-scoped, so it
   keeps that edge over the light rule; leaving the light values on the descendant would let the
   descendant beat the ancestor and dark mode would never apply. Both rules now declare on the same
   element and the cascade is what it was. .rolling-graph-container keeps every other declaration and
   inherits the values, which is how it read them before.

   ORDER. These rules were a body <style> block injected on mount, so they beat every head link and
   everything px_theme.ensure_theme_injected() appends at runtime. As a head link they lose every
   specificity TIE. Audited against _px_theme_css.py, mar_editor/_pxmar_core_js.py (PXM_SHARED_CSS)
   and the four host theme assets: no other declarer of .rolling-graph-container, .rolling-header,
   .chart-wrapper, #monthlies-rolling-chart, .chart-controls, .weeks-selector, .control-label,
   .weeks-dropdown, .y-axis-toggle, .toggle-label, .toggle-text, .switch, .slider, .rolling-settings,
   .setting-item, .setting-label, .setting-value or .monthlies-rolling-graph anywhere in the estate.
   No tie found.

   The .apexcharts-* block is scoped like the rest: ApexCharts renders inside #monthlies-rolling-chart,
   which is inside the root, so the scope still reaches it. ApexCharts appends its own sheet at first
   render, after every head link, so order cannot be relied on there either - every declaration in
   that block is already !important and wins regardless.

   The acutes twin, acutes_sla_graph_over_time_html.css, carries its own full copy of the 27 shared
   selector names. The two files differ in the tooltip padding, the legend colour, the background
   token at three sites and the whole custom-property set, so neither may be derived from the other.
   Only one graph is mounted at a time today; both stylesheets are permanently loaded head links
   after the conversion, which is what makes the :where() scoping mandatory rather than cosmetic. */


.monthlies-rolling-graph {
  /* Semantic chart vars - light mode */
  --accent: #d97706;
  --accent-glow: rgba(217, 119, 6, 0.2);
  --accent-text: #422006;
  --rolling-success: #16a34a;
  --rolling-line: #d97706;
  --rolling-area: rgba(217, 119, 6, 0.1);
}

:where(.monthlies-rolling-graph) .rolling-graph-container {
  font-family: var(--px-font);
  background: var(--px-bg-card);
  color: var(--px-text-primary);
  padding: 24px;
  min-height: 400px;
  border-radius: 16px;
}

[data-theme="dark"] .monthlies-rolling-graph {
  --accent: #f59e0b;
  --accent-glow: rgba(245, 158, 11, 0.3);
  --rolling-success: #4ade80;
  --rolling-line: #f59e0b;
  --rolling-area: rgba(245, 158, 11, 0.15);
}

:where(.monthlies-rolling-graph) .rolling-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

:where(.monthlies-rolling-graph) .chart-wrapper {
  background: var(--px-bg-card);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

:where(.monthlies-rolling-graph) #monthlies-rolling-chart {
  min-height: 350px;
}

:where(.monthlies-rolling-graph) .chart-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

:where(.monthlies-rolling-graph) .weeks-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

:where(.monthlies-rolling-graph) .control-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--px-text-muted);
}

:where(.monthlies-rolling-graph) .weeks-dropdown {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--px-border);
  background: var(--px-bg-elevated);
  color: var(--px-text-primary);
  font-family: var(--px-font);
  font-size: 13px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

:where(.monthlies-rolling-graph) .weeks-dropdown:hover {
  border-color: var(--accent);
}

:where(.monthlies-rolling-graph) .weeks-dropdown:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

:where(.monthlies-rolling-graph) .y-axis-toggle {
  display: flex;
  align-items: center;
}

:where(.monthlies-rolling-graph) .toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--px-text-muted);
  cursor: pointer;
}

:where(.monthlies-rolling-graph) .toggle-text {
  font-weight: 500;
}

:where(.monthlies-rolling-graph) .switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}

:where(.monthlies-rolling-graph) .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

:where(.monthlies-rolling-graph) .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--px-border);
  transition: 0.3s;
  border-radius: 26px;
}

:where(.monthlies-rolling-graph) .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

:where(.monthlies-rolling-graph) input:checked + .slider {
  background: linear-gradient(135deg, var(--accent) 0%, var(--rolling-success) 100%);
}

:where(.monthlies-rolling-graph) input:checked + .slider:before {
  transform: translateX(22px);
}

:where(.monthlies-rolling-graph) .rolling-settings {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background: var(--px-bg-elevated);
  border-radius: 12px;
  border: 1px solid var(--px-border);
}

:where(.monthlies-rolling-graph) .setting-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  min-width: 120px;
}

:where(.monthlies-rolling-graph) .setting-label {
  font-family: var(--px-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--px-text-muted);
}

:where(.monthlies-rolling-graph) .setting-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

:where(.monthlies-rolling-graph) .apexcharts-tooltip {
  background: var(--px-bg-elevated) !important;
  border: 1px solid var(--px-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

:where(.monthlies-rolling-graph) .apexcharts-tooltip-title {
  background: var(--accent) !important;
  color: white !important;
  font-weight: 600 !important;
  border-bottom: none !important;
}

:where(.monthlies-rolling-graph) .apexcharts-tooltip-series-group {
  padding: 8px 12px !important;
}

:where(.monthlies-rolling-graph) .apexcharts-tooltip-text-y-value {
  font-weight: 700 !important;
  color: var(--px-text-primary) !important;
}

:where(.monthlies-rolling-graph) .apexcharts-xaxis-label,
:where(.monthlies-rolling-graph) .apexcharts-yaxis-label {
  fill: var(--px-text-muted) !important;
}

:where(.monthlies-rolling-graph) .apexcharts-gridline {
  stroke: var(--px-border) !important;
}