/* ===================================================================
   OPERATION CENTER — shared theme tokens, ported from orderpulse-local's
   own dashboard.css. Blazor CSS isolation can't scope :root (it never
   gets stamped with a component's scope attribute), so these custom
   properties — used by OperationCenterKpis.razor.css and
   OperationCenter.razor.css — have to stay global. Safe app-wide: the
   admin UI already runs in dark mode (see OrderPulseCloudTheme,
   IsDarkMode="true" in App.razor), and none of these class names collide
   with any other page.
   =================================================================== */
:root {
    --db-subtle: #888;

    --color-success:        #22c55e;
    --color-success-bg:     #0d3321;
    --color-success-border: #22c55e;
    --color-success-light:  #86efac;

    --color-warning:        #f59e0b;
    --color-warning-bg:     #3a1f00;
    --color-warning-border: #f59e0b;
    --color-warning-light:  #fde68a;

    --color-danger:         #ef4444;
    --color-danger-bg:      #3a0d0d;
    --color-danger-border:  #ef4444;
    --color-danger-light:   #fca5a5;

    --color-blue: #3b82f6;
}

/* Chart header legend — shared by OrdersByHourChart / StationDispatchChart /
   OrdersByHourStationChart (siblings, no parent/child relationship, so this can't live in any
   one of their own Component.razor.css files). Puts the legend in the card header, on the same
   line as the title, instead of MudChart's own built-in legend below the plot. */
.chart-header-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             .5rem 1rem;
    width:           100%;
}

.chart-legend {
    display:   flex;
    flex-wrap: wrap;
    gap:       .9rem;
}

.chart-legend-item {
    display:     flex;
    align-items: center;
    gap:         .35rem;
    color:       #cccccc;
    font-size:   .75rem;
    white-space: nowrap;
}

.chart-legend-dot {
    width:         9px;
    height:        9px;
    border-radius: 50%;
    flex-shrink:   0;
}