/* === Phase 7 Stage 1 — DayView rewrite + WeekView ===========================
 *
 * Loaded from style.css via @import (added at top of style.css). All classes
 * here are prefixed `wk-` to avoid colliding with the legacy `day-*` classes,
 * which still serve the all-day band and the day-header.
 *
 * Layout model: a tall absolute-positioned column where every minute maps
 * to ~1px (HOUR_HEIGHT_PX/60 in JS). Hour ticks are absolute too, so events
 * sit on top of them at the right pixel offset.
 */

/* === Shared grid container =================================================
 * The grid wraps either one column (DayView) or seven (WeekView) plus an
 * optional left-side hour gutter (WeekView only).
 */
.wk-grid {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    position: relative;
}

/* Scrollable wrapper around wk-grid. Limits visible vertical area so we
 * can scroll-to-current-hour on mount. Height chosen to feel "tall but
 * not the whole page". Adjust to taste. */
.wk-scroller {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* DayView and WeekView both use wk-grid-week (flex row with gutter on
 * the left). The previous wk-grid-single layout was replaced because
 * full-width event blocks overlapped in-column hour labels. */
.wk-grid-week {
    display: flex;
    align-items: stretch;
}

/* === Hour gutter (WeekView's shared time axis) ============================
 * Fixed-width column on the left of the 7-day grid. Ticks are absolute so
 * they line up exactly with the hour ticks inside each day column.
 */
.wk-hour-gutter {
    width: 56px;
    flex-shrink: 0;
    position: relative;
    border-right: 1px solid #f0f0f0;
    background: #FAFAF8;
}
.wk-hour-gutter-tick {
    position: absolute;
    left: 0;
    right: 0;
    padding-right: 6px;
    font-size: 11px;
    color: #aaa;
    text-align: right;
    /* Negative margin pulls label up so it visually sits on the line, not
     * floating in the cell below it. -6px ≈ half line-height for 11px. */
    margin-top: -6px;
}

/* === Day columns ==========================================================
 * Container for the 7 day columns in WeekView. Each child takes equal width.
 */
.wk-day-columns {
    flex: 1;
    display: flex;
    align-items: stretch;
    /* Min-width ensures a horizontal scrollbar appears on very narrow
     * viewports rather than crushing the grid into illegibility. */
    min-width: 0;
}
.wk-day-wrap {
    flex: 1 1 0;
    min-width: 0;
    border-right: 1px solid #f0f0f0;
    /* Last column has no border-right; cosmetic. */
}
.wk-day-wrap:last-child {
    border-right: none;
}

/* The actual time column. Position relative so children with
 * position: absolute (hour ticks + event blocks) anchor here. */
.wk-day-column {
    position: relative;
    width: 100%;
    /* Height set inline (24 * HOUR_HEIGHT_PX). Don't override here. */
}
.wk-day-today {
    background: #FAFCFF;
}
.wk-drop-active {
    background: #F0F5FA !important;
}

/* === Hour ticks (background lines spanning the day column) =============== */
.wk-hour-tick {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid #f5f5f5;
}
.wk-hour-tick:first-child {
    border-top: none;
}

/* === Event blocks =========================================================
 * Absolutely positioned inside the day column. JS sets top/height (in px)
 * and left/width (in %). White text, rounded, with hover lift.
 */
.wk-event-block {
    position: absolute;
    border-radius: 4px;
    color: white;
    font-size: 12px;
    padding: 3px 6px;
    cursor: pointer;
    overflow: hidden;
    /* Subtle inset shadow + outline so adjacent same-colored blocks read
     * as separate units. */
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset;
    transition: opacity 0.12s ease;
}
.wk-event-block:hover {
    opacity: 0.85 !important; /* override checked-opacity inline style */
}
.wk-event-title {
    font-weight: 500;
    line-height: 1.25;
    /* Ellipsize when the column is narrow (tight WeekView columns). */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wk-event-time {
    font-size: 10px;
    opacity: 0.85;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === WeekView header ====================================================== */
.wk-header-row {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
    margin-bottom: 0;
}
.wk-header-spacer {
    width: 56px;
    flex-shrink: 0;
    border-right: 1px solid #f0f0f0;
    background: #FAFAF8;
}
.wk-header-cell {
    flex: 1 1 0;
    padding: 8px 6px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    border-right: 1px solid #f0f0f0;
    cursor: pointer;
    min-width: 0;
}
.wk-header-cell:last-child {
    border-right: none;
}
.wk-header-cell:hover {
    background: #f8f8f8;
}
.wk-header-today {
    color: #2B4C7E;
    font-weight: 600;
    background: #F0F5FA;
}

/* === WeekView all-day band ================================================
 * Sits between header and timed grid. One row of cells, 7 wide, with the
 * gutter spacer on the left to align with the hour gutter below.
 */
.wk-allday-row {
    display: flex;
    align-items: stretch;
    background: #FAFAF8;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    min-height: 28px;
}
.wk-allday-spacer {
    width: 56px;
    flex-shrink: 0;
    border-right: 1px solid #f0f0f0;
    padding: 6px;
    font-size: 10px;
    color: #999;
    text-align: right;
}
.wk-allday-cell {
    flex: 1 1 0;
    padding: 4px;
    border-right: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}
.wk-allday-cell:last-child {
    border-right: none;
}

/* When DayView's all-day band sits directly above the wk-scroller (no
 * day-timeline wrapper), give it the matching rounded top corners so
 * it visually fuses with the grid below. The grid itself loses its top
 * rounding when preceded by an all-day band. (DayView and WeekView
 * both use wk-grid-week now.) */
.day-allday-section + .wk-scroller .wk-grid-week,
.wk-allday-row + .wk-scroller .wk-grid-week {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
}
.day-allday-section {
    border-radius: 10px 10px 0 0;
    border: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

/* WeekView root just stitches the three pieces together with no gap. */
.wk-root .wk-scroller .wk-grid-week {
    border-radius: 0 0 10px 10px;
    border-top: none;
}

/* === Cron health dot ======================================================
 * Small status indicator in the topbar. Distinct from action buttons
 * visually (no border, smaller, non-rectangular) so the user reads it
 * as a status light rather than a button to click — even though it IS
 * clickable as a refresh shortcut.
 */
.cron-health-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 8px 0 4px;
    vertical-align: middle;
    cursor: pointer;
    /* Subtle outline + soft glow so it doesn't look like a stray pixel
     * against the white topbar. The glow color is set by JS on each
     * render via inline style; this is just the shape. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06),
                0 0 4px rgba(0, 0, 0, 0.08);
    transition: transform 0.12s ease;
}
.cron-health-dot:hover {
    transform: scale(1.3);
}