/* Scheduling deployments solution summary: same container treatment as
   .diet-solution-summary (pages/diet.css). The stacked bars split customer traffic
   (--color-foreground-muted, same base tone Facility uses for idle capacity)
   from deployment load (--color-brand-content, same as Diet's portion bars),
   with the same danger red used for the tightest hours — those at the peak —
   as Diet uses for its tightest nutrient bounds. The chart itself follows the
   same SVG-with-gridlines-and-hover-tooltip pattern as Portfolio's efficient
   frontier (pages/portfolio.css), so no new custom colors or interaction patterns are
   introduced here. */
[role="main"] .scheduling-deployments-solution-summary {
    padding: 1.2em 1.3em;
    border-radius: 0.6em;
    background: #eef1f5;
    border: 1px solid var(--color-sidebar-background-border);
}

body[data-theme="dark"] [role="main"] .scheduling-deployments-solution-summary {
    background: #15171a;
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) [role="main"] .scheduling-deployments-solution-summary {
        background: #15171a;
    }
}

[role="main"] .sdploy-wrap {
    overflow-x: auto;
    margin-bottom: 0.4rem;
}

[role="main"] .sdploy-svg {
    display: block;
    width: 100%;
    height: auto;
}

[role="main"] .sdploy-svg .sd-grid {
    stroke: var(--color-background-border);
    stroke-width: 1;
}

[role="main"] .sdploy-svg .sd-axis {
    stroke: var(--color-foreground-secondary);
    stroke-width: 1;
}

[role="main"] .sdploy-svg .sd-axis-title {
    font-size: 14px;
    fill: var(--color-foreground-secondary);
}

[role="main"] .sdploy-svg .sd-tick {
    font-size: 13px;
    fill: var(--color-foreground-muted);
}

[role="main"] .sdploy-svg .sd-capacity-line {
    stroke: var(--color-admonition-title--danger);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    opacity: 0.7;
}

[role="main"] .sdploy-svg .sd-peak-line {
    stroke: var(--color-admonition-title--warning);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    opacity: 0.75;
}

[role="main"] .sdploy-svg .sd-bar-base {
    fill: var(--color-foreground-muted);
    opacity: 0.55;
}

[role="main"] .sdploy-svg .sd-bar-deploy {
    fill: var(--color-brand-content);
}

[role="main"] .sdploy-svg .sd-hour-label {
    font-size: 12px;
    fill: var(--color-foreground-muted);
}

[role="main"] .sdploy-svg .sd-hit {
    fill: transparent;
    cursor: pointer;
}

[role="main"] .sdploy-svg .sd-tooltip-box {
    fill: var(--color-background-primary);
    stroke: var(--color-background-border);
}

[role="main"] .sdploy-svg .sd-tooltip-title {
    font-size: 13px;
    font-weight: 600;
    fill: var(--color-foreground-primary);
}

[role="main"] .sdploy-svg .sd-tooltip-body {
    font-size: 12px;
    fill: var(--color-foreground-secondary);
}

[role="main"] .sdploy-svg .sd-tooltip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

[role="main"] .sdploy-svg .sd-bar-group:hover .sd-tooltip,
[role="main"] .sdploy-svg .sd-bar-group:focus-within .sd-tooltip {
    opacity: 1;
}

/* Deployment-schedule timeline (below the load chart): reuses the load
   chart's own axis/hour-label styling for visual continuity. Bars reuse
   --color-brand-content, the same blue as the load chart's deployment
   segments, since these are the same deployments; no new colors needed. */
[role="main"] .sdploy-svg .sd-deploy-bar {
    fill: var(--color-brand-content);
}

[role="main"] .sdploy-svg .sd-deploy-label {
    font-size: 12px;
    font-weight: 600;
    fill: #ffffff;
    pointer-events: none;
}