/* acutes_sla_graph_over_time_html — the Interims SLA rolling-trend popup.
 *
 * Moved verbatim out of the form's template <style> block: the Anvil server
 * strips the text out of a <style> in a template, so the rules have to be a
 * head-linked asset instead.
 *
 * Scoped :where(.acutes-rolling-graph), which adds no specificity and so
 * cannot change which rule wins, EXCEPT where a comment below says otherwise.
 * The scope is mandatory rather than tidy: the monthlies rolling graph
 * declares the same 27 selector names, and after conversion both stylesheets
 * are permanently loaded head links instead of one body <style> per mount.
 *
 * ApexCharts renders inside #interims-rolling-chart, which is inside the root,
 * so the scope still reaches the .apexcharts-* rules. Those are every-
 * declaration !important already, so they still beat the library's own
 * stylesheet, which it appends after every head link at first render.
 */

/* The form root. The five chart colour tokens are declared HERE rather than on
   .rolling-graph-container, which is where the template's style block had
   them: that container is built by Python and pushed in through
   setInterimsGraphContent, so the tokens now sit on the one element this file
   owns. Custom properties inherit, so the container and its descendants read
   the same values they always did. */
.acutes-rolling-graph {
  /* Chart-specific colors */
  --rolling-hp: #f59e0b;
  --rolling-others-same: #06b6d4;
  --rolling-others-next: #84cc16;
  --rolling-others-two: #a855f7;
  --rolling-success: #16a34a;
}

/* BARE, not :where(), so it keeps the (0,2,0) edge over the light-mode root
   rule above exactly as [data-theme="dark"] .rolling-graph-container did. */
[data-theme="dark"] .acutes-rolling-graph {
  --rolling-hp: #fbbf24;
  --rolling-others-same: #22d3ee;
  --rolling-others-next: #a3e635;
  --rolling-others-two: #c084fc;
  --rolling-success: #4ade80;
}

:where(.acutes-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:where(.acutes-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(.acutes-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(.acutes-rolling-graph) input:checked + .slider {
  background: linear-gradient(135deg, var(--rolling-hp) 0%, var(--rolling-others-same) 100%);
}

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

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

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

:where(.acutes-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(.acutes-rolling-graph) .setting-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--rolling-hp);
}

:where(.acutes-rolling-graph) .apexcharts-tooltip {
  background: var(--px-bg-card) !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(.acutes-rolling-graph) .apexcharts-tooltip-title {
  background: var(--rolling-hp) !important;
  color: white !important;
  font-weight: 600 !important;
  border-bottom: none !important;
}

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

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

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

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

:where(.acutes-rolling-graph) .apexcharts-legend-text {
  color: var(--px-text-primary) !important;
}