/**
 * Calendar block — month grid, popup card, day-list, lightbox, multi-day bars.
 * Registered as `lrob-calendar-block-calendar` (deps: lrob-calendar-tokens).
 *
 * Design language: flat / modern / breathable. Uses the design tokens from
 * assets/css/tokens.css. Grid lines are crisp and light, events are
 * dot + title pills, today is a small primary circle behind the day number.
 */

/* ─── Block wrapper + alignments ─────────────────────────────────────────── */

.lrob-calendar {
    background: var(--lrob-cal-surface);
    border: 1px solid var(--lrob-cal-border);
    border-radius: var(--lrob-cal-radius-lg);
    padding: var(--lrob-cal-space-4);
    position: relative;
    box-sizing: border-box;
    color: var(--lrob-cal-text);
    line-height: var(--lrob-cal-line-comfortable);
}

.wp-block-lrob-calendar-calendar {
    max-width: var(--wp--style--global--content-size, 720px);
    margin-left: auto;
    margin-right: auto;
}

.wp-block-lrob-calendar-calendar.alignwide {
    max-width: var(--wp--style--global--wide-size, 1200px);
}

.wp-block-lrob-calendar-calendar.alignfull {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ─── Header ─────────────────────────────────────────────────────────────
   Title on the left (large, bold), controls on the right: grouped prev/next
   chevrons, a "Today" button, then the Month/Week pill switcher. */

.lrob-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--lrob-cal-space-4);
    gap: var(--lrob-cal-space-3);
    flex-wrap: wrap;
}

.lrob-cal-title {
    margin: 0;
    font-size: 1.5em;
    line-height: var(--lrob-cal-line-tight);
    font-weight: var(--lrob-cal-font-weight-bold);
    color: var(--lrob-cal-text);
    letter-spacing: -0.015em;
    text-transform: capitalize;
}

.lrob-cal-header-controls {
    display: inline-flex;
    align-items: center;
    gap: var(--lrob-cal-space-2);
    flex-wrap: wrap;
}

/* Grouped prev/next chevrons — single rounded pill */
.lrob-cal-nav-group {
    display: inline-flex;
    align-items: center;
    background: var(--lrob-cal-surface-muted);
    border: 1px solid var(--lrob-cal-border);
    border-radius: var(--lrob-cal-radius-md);
    overflow: hidden;
}

.lrob-cal-prev,
.lrob-cal-next {
    background: transparent;
    border: 0;
    width: 36px;
    height: 36px;
    cursor: pointer;
    color: var(--lrob-cal-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color var(--lrob-cal-duration) var(--lrob-cal-ease),
                color var(--lrob-cal-duration) var(--lrob-cal-ease);
}

.lrob-cal-prev:hover,
.lrob-cal-next:hover {
    background: var(--lrob-cal-surface-hover);
    color: var(--lrob-cal-text);
}

.lrob-cal-prev:disabled,
.lrob-cal-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.lrob-cal-prev .lrob-icon,
.lrob-cal-next .lrob-icon {
    width: 18px;
    height: 18px;
}

/* Today button — secondary style (white bg, 1px neutral border). */
.lrob-cal-today {
    height: 36px;
    padding: 0 var(--lrob-cal-space-3);
    background: var(--lrob-cal-surface);
    border: 1px solid var(--lrob-cal-border);
    border-radius: var(--lrob-cal-radius-md);
    color: var(--lrob-cal-text);
    font: inherit;
    font-size: 0.9em;
    font-weight: var(--lrob-cal-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--lrob-cal-duration) var(--lrob-cal-ease),
                border-color var(--lrob-cal-duration) var(--lrob-cal-ease);
}

.lrob-cal-today:hover {
    background: var(--lrob-cal-surface-hover);
    border-color: var(--lrob-cal-border-strong);
}

/* Month/Week pill — segmented control */
.lrob-cal-view-switcher {
    display: inline-flex;
    background: var(--lrob-cal-surface-muted);
    border: 1px solid var(--lrob-cal-border);
    border-radius: var(--lrob-cal-radius-md);
    padding: 2px;
}

.lrob-cal-view-btn {
    height: 30px;
    padding: 0 var(--lrob-cal-space-3);
    background: transparent;
    border: 0;
    border-radius: calc(var(--lrob-cal-radius-md) - 3px);
    color: var(--lrob-cal-text-muted);
    font: inherit;
    font-size: 0.85em;
    font-weight: var(--lrob-cal-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--lrob-cal-duration) var(--lrob-cal-ease),
                color var(--lrob-cal-duration) var(--lrob-cal-ease);
}

.lrob-cal-view-btn:hover {
    color: var(--lrob-cal-text);
}

.lrob-cal-view-btn.is-active {
    background: var(--lrob-cal-surface);
    color: var(--lrob-cal-primary);
    box-shadow: var(--lrob-cal-shadow-card);
}

/* ─── Month grid ─────────────────────────────────────────────────────────── */

.lrob-cal-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.lrob-cal-table th,
.lrob-cal-table td {
    width: 14.28%;
}

.lrob-cal-table th {
    padding: var(--lrob-cal-space-2) var(--lrob-cal-space-1);
    text-align: center;
    font-weight: var(--lrob-cal-font-weight-bold);
    font-size: 0.85em;
    text-transform: lowercase;
    letter-spacing: 0;
    color: var(--lrob-cal-text);
    border: 0;
    border-bottom: 1px solid var(--lrob-cal-border);
}

.lrob-cal-table td {
    padding: var(--lrob-cal-space-1);
    vertical-align: top;
    border: 1px solid var(--lrob-cal-border);
    height: 96px;
    position: relative;
    overflow: visible;
    cursor: pointer;
    text-align: center;     /* centers the day-num pill at the top of the cell */
    transition: background-color var(--lrob-cal-duration) var(--lrob-cal-ease);
}

.lrob-cal-table td:hover {
    background: var(--lrob-cal-surface-hover);
}

/* Out-of-month days: visible (so the user sees which weekday the month
   starts/ends on), but muted. No hover affordance, no click action. */
.lrob-cal-day--out-of-month {
    cursor: default;
}

.lrob-cal-day--out-of-month .lrob-cal-day-num {
    color: var(--lrob-cal-text-subtle);
    opacity: 0.55;
}

.lrob-cal-day--out-of-month:hover {
    background: transparent;
}

/* Legacy class — kept for any cell that still renders as empty padding. */
.lrob-cal-empty {
    background: transparent;
    cursor: default;
}

.lrob-cal-empty:hover {
    background: transparent;
}

/* Day number — centered horizontally at the top of the cell, bold. Becomes
   the today indicator (filled primary pill) when this cell is today. */
.lrob-cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--lrob-cal-space-1);
    margin-top: var(--lrob-cal-space-1);
    font-weight: var(--lrob-cal-font-weight-bold);
    font-size: 0.95em;
    color: var(--lrob-cal-text);
    border-radius: var(--lrob-cal-radius-pill);
    font-variant-numeric: tabular-nums;
}

.lrob-cal-today .lrob-cal-day-num {
    background: var(--lrob-cal-primary);
    color: var(--lrob-cal-primary-fg);
    font-weight: var(--lrob-cal-font-weight-semibold);
}

/* No bg tint for has-events / today cells — the indicators carry the meaning */
.lrob-cal-has-events,
.lrob-cal-today {
    background: transparent;
}

/* ─── Event pills in cells ───────────────────────────────────────────────── */

.lrob-cal-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--lrob-cal-space-1) var(--lrob-cal-space-1);
    margin-top: var(--lrob-cal-space-1);
    font-size: 0.78em;
    overflow: visible;
    text-align: left;
}

.lrob-cal-event-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    margin: 0;
    background: transparent;
    color: var(--lrob-cal-text);
    border-radius: var(--lrob-cal-radius-sm);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
    transition: background-color var(--lrob-cal-duration) var(--lrob-cal-ease);
}

.lrob-cal-event-item:hover {
    background: var(--lrob-cal-surface-hover);
}

.lrob-cal-event-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lrob-cal-event-color, var(--lrob-cal-primary));
}

.lrob-cal-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Multi-day continuous bar: a soft connected pill spanning N cells via the
   inline min-width: calc(N * 100% + ...). Opacity-shaded primary so it reads
   as a span rather than competing visually with point events. */
.lrob-cal-event-multiday {
    position: relative;
    z-index: 2;
    overflow: visible;
    max-width: none;
    text-overflow: clip;
    background: var(--lrob-cal-event-color, var(--lrob-cal-primary-soft));
    color: var(--lrob-cal-text);
    padding: 3px 8px;
    border-radius: var(--lrob-cal-radius-sm);
}

.lrob-cal-event-multiday .lrob-cal-event-dot {
    display: none;
}

.lrob-cal-event-multiday .lrob-cal-event-title {
    font-weight: var(--lrob-cal-font-weight-medium);
}

.lrob-cal-event-placeholder {
    visibility: hidden;
    pointer-events: none;
    background: transparent;
}

/* "+N more" — clickable pill that opens the day-list popup. */
.lrob-cal-more {
    display: inline-block;
    margin: 0 var(--lrob-cal-space-1);
    padding: 1px var(--lrob-cal-space-2);
    background: transparent;
    border: 0;
    color: var(--lrob-cal-primary);
    font: inherit;
    font-size: 0.85em;
    font-weight: var(--lrob-cal-font-weight-medium);
    cursor: pointer;
    border-radius: var(--lrob-cal-radius-sm);
    transition: background-color var(--lrob-cal-duration) var(--lrob-cal-ease);
}

.lrob-cal-more:hover {
    background: var(--lrob-cal-primary-soft);
}

/* ─── Week view (7-day vertical agenda) ──────────────────────────────────── */

.lrob-cal-week {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lrob-cal-border);
    border-radius: var(--lrob-cal-radius-lg);
    overflow: hidden;
}

.lrob-cal-week-day {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--lrob-cal-space-3);
    align-items: start;
    padding: var(--lrob-cal-space-3) var(--lrob-cal-space-4);
    border-bottom: 1px solid var(--lrob-cal-border);
    background: var(--lrob-cal-surface);
    transition: background-color var(--lrob-cal-duration) var(--lrob-cal-ease);
}

.lrob-cal-week-day:last-child {
    border-bottom: 0;
}

.lrob-cal-week-day--today {
    background: var(--lrob-cal-primary-soft);
}

.lrob-cal-week-day-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.lrob-cal-week-day-name {
    font-size: 0.78em;
    font-weight: var(--lrob-cal-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lrob-cal-text-subtle);
}

.lrob-cal-week-day--today .lrob-cal-week-day-name {
    color: var(--lrob-cal-primary);
}

.lrob-cal-week-day-date {
    font-size: 1.05em;
    font-weight: var(--lrob-cal-font-weight-semibold);
    color: var(--lrob-cal-text);
}

.lrob-cal-week-day-empty {
    color: var(--lrob-cal-text-subtle);
    padding: var(--lrob-cal-space-1) 0;
}

.lrob-cal-week-events {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lrob-cal-week-event {
    display: flex;
    align-items: center;
    gap: var(--lrob-cal-space-2);
    width: 100%;
    padding: var(--lrob-cal-space-2) var(--lrob-cal-space-3);
    background: transparent;
    border: 0;
    border-radius: var(--lrob-cal-radius-md);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    line-height: 1.3;
    transition: background-color var(--lrob-cal-duration) var(--lrob-cal-ease);
}

.lrob-cal-week-event:hover {
    background: var(--lrob-cal-surface-hover);
}

.lrob-cal-week-event-time {
    color: var(--lrob-cal-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.88em;
    min-width: 48px;
}

.lrob-cal-week-event .lrob-cal-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .lrob-cal-week-day {
        grid-template-columns: 1fr;
        gap: var(--lrob-cal-space-2);
    }
}

/* ─── Agenda view (linear list of events) ────────────────────────────────── */

.lrob-cal-agenda {
    display: flex;
    flex-direction: column;
    gap: var(--lrob-cal-space-1);
}

.lrob-cal-agenda-date {
    margin: var(--lrob-cal-space-4) 0 var(--lrob-cal-space-2);
    padding-bottom: var(--lrob-cal-space-2);
    border-bottom: 1px solid var(--lrob-cal-border);
    font-size: 0.95em;
    font-weight: var(--lrob-cal-font-weight-semibold);
    color: var(--lrob-cal-text);
    text-transform: capitalize;
}

.lrob-cal-agenda-date:first-child {
    margin-top: 0;
}

.lrob-cal-agenda-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: var(--lrob-cal-space-2) var(--lrob-cal-space-3);
    align-items: baseline;
    padding: var(--lrob-cal-space-3);
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: var(--lrob-cal-radius-md);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    width: 100%;
    transition: background-color var(--lrob-cal-duration) var(--lrob-cal-ease);
}

.lrob-cal-agenda-item:hover {
    background: var(--lrob-cal-surface-hover);
}

.lrob-cal-agenda-time {
    font-weight: var(--lrob-cal-font-weight-semibold);
    color: var(--lrob-cal-primary);
    font-variant-numeric: tabular-nums;
}

.lrob-cal-agenda-title {
    font-weight: var(--lrob-cal-font-weight-medium);
    color: var(--lrob-cal-text);
}

.lrob-cal-agenda-location {
    font-size: 0.85em;
    color: var(--lrob-cal-text-muted);
    grid-column: 2 / -1;
}

.lrob-cal-agenda-empty {
    padding: var(--lrob-cal-space-6);
    text-align: center;
    color: var(--lrob-cal-text-muted);
    background: var(--lrob-cal-surface-muted);
    border-radius: var(--lrob-cal-radius-lg);
}

/* ─── Day-list popup (mobile tap on a day with events) ───────────────────── */

.lrob-cal-day-list-title {
    margin: 0;
    padding: var(--lrob-cal-space-4);
    font-size: 1.05em;
    font-weight: var(--lrob-cal-font-weight-semibold);
    color: var(--lrob-cal-text);
    border-bottom: 1px solid var(--lrob-cal-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lrob-cal-space-3);
}

.lrob-cal-day-list {
    list-style: none;
    margin: 0;
    padding: var(--lrob-cal-space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lrob-cal-day-list-item {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--lrob-cal-space-3);
    align-items: center;
    padding: var(--lrob-cal-space-3);
    background: transparent;
    border: 0;
    border-radius: var(--lrob-cal-radius-md);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    min-height: 44px;
    transition: background-color var(--lrob-cal-duration) var(--lrob-cal-ease);
}

.lrob-cal-day-list-item:hover {
    background: var(--lrob-cal-surface-hover);
}

.lrob-cal-day-list-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lrob-cal-event-color, var(--lrob-cal-primary));
}

.lrob-cal-day-list-title-text {
    font-weight: var(--lrob-cal-font-weight-medium);
    color: var(--lrob-cal-text);
}

.lrob-cal-day-list-time {
    font-size: 0.85em;
    color: var(--lrob-cal-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Popup styles live in assets/css/event-popup.css (shared module). */

/* ─── Mobile: calendar grid compression ──────────────────────────────────── */

@media (max-width: 640px) {
    .lrob-calendar {
        padding: var(--lrob-cal-space-2);
    }

    /* Clip horizontal overflow at mobile widths — multi-day bars' inline
       min-width may exceed table width by a few pixels. */
    .lrob-calendar,
    .lrob-cal-grid {
        overflow-x: hidden;
    }
    .lrob-cal-event-multiday {
        max-inline-size: calc(100vw - 16px);
    }

    /* Compress dimensions — colors and the dot+title pill layout stay
       identical to desktop. Tapping the cell still opens the day-list. */
    .lrob-cal-table th {
        font-size: 0.72em;
    }
    .lrob-cal-table td {
        height: 72px;
        padding: 2px;
    }
    .lrob-cal-day-num {
        font-size: 0.85em;
        min-width: 24px;
        height: 24px;
        margin-top: 3px;
    }
    .lrob-cal-events {
        font-size: 0.62em;
        padding: 0 2px 2px;
    }
    .lrob-cal-event-item {
        padding: 2px 4px;
        gap: 4px;
    }
    .lrob-cal-event-dot {
        width: 6px;
        height: 6px;
    }

    /* Day-list mode: sticky title bar on mobile (the rest of the day-list
       layout is in the day-list section above). */
    .lrob-cal-day-list-title {
        position: sticky;
        top: 0;
        background: var(--lrob-cal-surface);
        z-index: 2;
    }
}