/**
 * calendar-week.css — Week view layout.
 *
 * Styles the 7-column week overview: day headers, day columns,
 * and the shared day-col drop targets.
 */

/* ---- Week view ---------------------------------------------------------- */
.calendar__week {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.calendar__week-headers {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.calendar__week-headers__spacer {
  width: 52px;
  flex-shrink: 0;
}

.calendar__week-header {
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-left: 1px solid var(--border);
  transition: background var(--transition);
}

.calendar__week-header:hover {
  background: var(--bg);
}

.calendar__week-header--today {
  color: var(--accent);
  background: var(--accent-soft);
}

.calendar__week-header__label {
  display: block;
}

.calendar__week-columns {
  flex: 1;
  display: flex;
  min-height: 1440px;
  position: relative;
  background: linear-gradient(
    to bottom,
    var(--timeline-night) 0%,
    var(--timeline-night) calc(var(--sunrise-pct, 25%) - 4%),
    var(--surface) calc(var(--sunrise-pct, 25%) + 4%),
    var(--surface) calc(var(--sunset-pct, 75%) - 4%),
    var(--timeline-night) calc(var(--sunset-pct, 75%) + 4%),
    var(--timeline-night) 100%
  );
}

.calendar__day-col {
  flex: 1;
  position: relative;
  border-left: 1px solid var(--border);
  min-width: 0;
  cursor: crosshair;
}

.calendar__day-col--today {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.calendar__day-col--drag-over {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Empty-state hint: the columns row is a flex container, so the hint
   (a nowrap flex item) would otherwise occupy horizontal space on the far
   right and shrink the 7 day columns, misaligning them with the headers.
   Pull it out of the flex flow — it positions relative to the (relative)
   columns container and stays centered via the base class's left/transform. */
.calendar__week-columns .calendar__empty-hint {
  position: absolute;
}