/* Weekly schedule editor (Scheduled Setpoint program) */

.wse {
    display: flex;
    flex-direction: column;
    gap: 4px;
    user-select: none;
}

.wse__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.wse__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.wse__swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.wse__swatch--discharge { background: var(--mud-palette-success); }
.wse__swatch--charge { background: var(--mud-palette-info); }
.wse__swatch--idle { background: var(--mud-palette-lines-default); }

.wse__lane {
    display: grid;
    grid-template-columns: 44px 1fr 56px;
    align-items: center;
    gap: 6px;
}

.wse__lane-day {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-align: right;
}

.wse__lane-actions {
    display: flex;
    align-items: center;
}

.wse__canvas-wrap {
    position: relative;
    min-width: 0; /* allow the grid column to shrink */
}

.wse__canvas {
    width: 100%;
    height: 56px;
    display: block;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    touch-action: none; /* pointer-driven editing */
    cursor: crosshair;
}

/* Snapped-cursor tooltip: exact time (15-min grid) + the power a click would set.
   Floats ABOVE the lane so it never covers the marker/pointer being positioned
   (at max discharge the marker sits at the very top of the lane). */
.wse__cursor-tip {
    position: absolute;
    top: -22px;
    transform: translateX(-50%);
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none; /* never intercept the pointer being tracked */
    z-index: 5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Weekly energy totals: charge / discharge / net per weekly cycle. The net value is
   the sustainability signal — negative means the schedule drains the battery a bit
   further every week. Always rendered, so value changes never shift the layout. */
.wse__totals {
    display: flex;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.wse__totals-items {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wse__totals-net--positive {
    color: var(--mud-palette-success);
}

.wse__totals-net--negative {
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* Depletion estimate: an always-reserved single line so the warning toggling while
   editing never shifts the layout. */
.wse__depletion {
    min-height: 20px;
    font-size: 0.75rem;
}

.wse--disabled .wse__depletion {
    min-height: 0;
}

.wse__depletion-warning {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* Fixed-height slot for the empty-schedule / point-cap alerts so they swap without
   moving the lanes (unmounting mid-drag also skewed the cached lane geometry). */
.wse__notice {
    min-height: 40px;
    margin-top: 4px;
}

/* Read-only editors can't toggle the alerts mid-gesture — no need for dead space. */
.wse--disabled .wse__notice {
    min-height: 0;
    margin-top: 0;
}

/* Reserve stable space for the point-detail editor so selecting/deselecting a
   point never shifts the lanes (and never toggles a scrollbar reflow). Sized for
   the two-row wrapped fields layout both real consumers produce (480/560px wide)
   PLUS the inline validation-error caption, so even selecting an invalid point
   doesn't grow the box; the placeholder fills the identical border-box
   (228 = 202 + pa-3 padding + border). */
.wse__detail {
    min-height: 228px;
}

.wse__detail-placeholder {
    min-height: 202px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.wse--disabled .wse__canvas {
    cursor: default;
    opacity: 0.75;
}

.wse__marker {
    cursor: grab;
    outline: none;
}

.wse__marker:focus circle {
    stroke: var(--mud-palette-primary);
    stroke-width: 3;
}

.wse__marker--selected circle {
    stroke: var(--mud-palette-primary);
    stroke-width: 3;
}

.wse__marker--error circle {
    stroke: var(--mud-palette-error);
    stroke-width: 3;
}

.wse__hours {
    display: grid;
    grid-template-columns: 44px 1fr 56px;
    gap: 6px;
    font-size: 0.65rem;
    color: var(--mud-palette-text-disabled);
}

.wse__hours-scale {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
}