/* =========================================================================
   Calendar polish — Variation A (Conservative)
   Source: design_handoff_oceanbuilders/01_calendar_polish/

   The existing .sc-cal-* / .sc-day-col / .sc-hour-line / .sc-task-block
   rules in sc-redesign.css already cover the day-header pill, gradient
   tiles, time gutter, and now-line. This file adds the missing piece
   from the design: off-hours dimming so the 12am–7am dead zone reads
   as visually quieter without being collapsed away (full 24h grid is
   still always visible).

   Loaded AFTER sc-redesign.css so its rules win the cascade for the
   couple selectors it touches.
   ========================================================================= */

/* ── Off-hours bands ─────────────────────────────────────────────
   The calendar grid is 1440px tall (24h × 60px/hour) inside
   .sc-day-col. The "working window" defaults to 9am–6pm (line up
   with the default Work scheduling window):
       0–540 px  = 12am–9am  → off-hours (early)
       540–1080  = 9am–6pm   → on-hours (full saturation)
       1080–1440 = 6pm–12am  → off-hours (late)
   The off-hours band is rendered as two pseudo-elements on
   .sc-day-col so no markup change is needed. Both bands paint a
   semi-transparent overlay; gradients (today's column) and hour
   lines + task tiles still show through cleanly because:
     • The overlay rgba is low-alpha and covers ONLY off-hours rows.
     • Hour lines are `position: absolute` direct children of
       .sc-day-col → painted after pseudo-elements (browser stacking).
     • Task tiles get an explicit z-index: 1 so they always sit above.

   Hour offsets in pixels (PX_PER_MIN = 1, HOUR_H = 60):
       9 * 60 = 540
       18 * 60 = 1080
   If the user's first scheduling window ever changes from 9–18, this
   is the only spot to update — promote it to a CSS variable then. */

:root {
  --cal-offhours-tint: rgba(15, 23, 42, 0.035);
  --cal-offhours-bd:   rgba(15, 23, 42, 0.05);
}

/* Early morning: 12am → 9am */
.sc-day-col::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 540px;
  background: var(--cal-offhours-tint);
  pointer-events: none;
  z-index: 0;
}
/* Late evening: 6pm → 12am */
.sc-day-col::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1080px;
  height: 360px;
  background: var(--cal-offhours-tint);
  pointer-events: none;
  z-index: 0;
}

/* Hour-row labels in the gutter that fall in off-hours fade slightly.
   Targets every label rendered for hours 0–8 and 18–23. The labels are
   absolutely positioned via inline style top:Npx — so we rely on top
   value alone via attribute-style-startswith selectors. Skipped: 9–17
   (top values 540, 600, 660, 720, 780, 840, 900, 960, 1020). */
.sc-cal-gutter .sc-hour-label[style*="top:0px"],
.sc-cal-gutter .sc-hour-label[style*="top:60px"],
.sc-cal-gutter .sc-hour-label[style*="top:120px"],
.sc-cal-gutter .sc-hour-label[style*="top:180px"],
.sc-cal-gutter .sc-hour-label[style*="top:240px"],
.sc-cal-gutter .sc-hour-label[style*="top:300px"],
.sc-cal-gutter .sc-hour-label[style*="top:360px"],
.sc-cal-gutter .sc-hour-label[style*="top:420px"],
.sc-cal-gutter .sc-hour-label[style*="top:480px"],
.sc-cal-gutter .sc-hour-label[style*="top:1080px"],
.sc-cal-gutter .sc-hour-label[style*="top:1140px"],
.sc-cal-gutter .sc-hour-label[style*="top:1200px"],
.sc-cal-gutter .sc-hour-label[style*="top:1260px"],
.sc-cal-gutter .sc-hour-label[style*="top:1320px"],
.sc-cal-gutter .sc-hour-label[style*="top:1380px"] {
  opacity: 0.45;
}

/* Hour-band lines that fall in off-hours can also fade so the working
   window pops. Same selector trick. Off-hours hour lines lose their
   contrasting "every other hour" alternation — keep them all subtle. */
.sc-day-col .sc-hour-line[style*="top:60px"],
.sc-day-col .sc-hour-line[style*="top:120px"],
.sc-day-col .sc-hour-line[style*="top:180px"],
.sc-day-col .sc-hour-line[style*="top:240px"],
.sc-day-col .sc-hour-line[style*="top:300px"],
.sc-day-col .sc-hour-line[style*="top:360px"],
.sc-day-col .sc-hour-line[style*="top:420px"],
.sc-day-col .sc-hour-line[style*="top:480px"],
.sc-day-col .sc-hour-line[style*="top:1080px"],
.sc-day-col .sc-hour-line[style*="top:1140px"],
.sc-day-col .sc-hour-line[style*="top:1200px"],
.sc-day-col .sc-hour-line[style*="top:1260px"],
.sc-day-col .sc-hour-line[style*="top:1320px"],
.sc-day-col .sc-hour-line[style*="top:1380px"] {
  border-top-color: var(--cal-offhours-bd);
}

/* Task tiles must always paint above the off-hours bands. The base
   .sc-task-block selector in sc-redesign.css doesn't set z-index
   except on :hover, so this lifts the default state above the
   pseudo-element bands (z-index 0). */
.sc-day-col .sc-task-block { z-index: 1; }

/* Now-line stays above off-hours bands too. The existing rule sets
   z-index: 3 already, but keeping this explicit guards against any
   future cascade rearrangement. */
.sc-day-col .sc-now-line { z-index: 3; }

/* ── Day-header polish ─────────────────────────────────────────────
   The existing .sc-cal-day-head + .sc-cal-day-num rules already
   render the today-pill correctly. The design wants the day-of-week
   text to read in OB blue when today's column is highlighted; this
   adds that nuance on top of the existing rules. */
.sc-cal-day-head.today-col .sc-cal-day-dow {
  color: var(--ob-blue-700);
}

/* ── Today column gradient — slightly stronger ─────────────────────
   The legacy rule fades from rgba(40, 112, 176, 0.025) to transparent
   over the first 25% of the column. The design suggests a slightly
   richer top tint that fades over a larger portion of the grid so the
   "today" cue persists down the column without competing with task
   tiles. Override below. */
.sc-day-col.today-col {
  background: linear-gradient(
    to bottom,
    rgba(40, 112, 176, 0.045),
    rgba(40, 112, 176, 0.012) 35%,
    transparent 70%
  );
}

/* ── Off-hours band: don't pile on inside today's column ───────────
   Today's column already has a soft blue gradient. Layering the
   neutral off-hours tint on top would muddy it — drop the band's
   alpha for today specifically so the blue stays clean. */
.sc-day-col.today-col::before,
.sc-day-col.today-col::after {
  background: rgba(15, 23, 42, 0.02);
}

/* ── Subtle weekend dimming ────────────────────────────────────────
   Weekends in the calendar already render the same as weekdays. A
   barely-perceptible warmer tint reads as "outside work hours" the
   same way off-hours do. Tagged with .weekend-col by the renderer
   only if we add that class — otherwise this is a no-op. Keeping
   the rule here so a future render-time class addition just works. */
.sc-day-col.weekend-col {
  background: var(--neutral-25);
}
.sc-day-col.weekend-col.today-col {
  background: linear-gradient(
    to bottom,
    rgba(40, 112, 176, 0.045),
    rgba(40, 112, 176, 0.012) 35%,
    var(--neutral-25) 70%
  );
}