/* ===================================
   CALENDAR MODULE
   ===================================
   Hotel-wide noticeboard: 40/60 split (Outlook-style day view + sticky-note week board).
   The day-event layer is absolutely positioned over the reused DayCalendar grid; block
   geometry comes from the model via --evt-* custom properties. All values from tokens.
*/

/* -- Day view shell ------------------------------------------------- */

.calendar-day {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;          /* fill the panel body so the hour grid tracks the panel height */
    min-height: 0;    /* allow the scroll child to shrink + scroll instead of overflowing */
}

/* Pinned all-day row (above the scrollable hour grid, like Outlook) */
.calendar-allday-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-layer-2);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

.calendar-allday-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex: 1;
}

.calendar-allday-empty {
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding-top: var(--space-1);
}

.calendar-allday-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--color-primary-light);
    color: var(--text-primary);
    border-radius: var(--border-radius-sm);
    border-left: var(--border-width-2) solid var(--color-primary);
    font-size: var(--text-xs);
}

.calendar-allday-chip[data-action] { cursor: pointer; }
.calendar-allday-chip[data-action]:hover { box-shadow: var(--shadow-sm); }
.calendar-allday-where { color: var(--text-muted); }

/* Multi-day banner: square off the edge on the side the event continues past the
   viewed day (no glyphs); the rounded/accented edge marks the true start/end day. */
.calendar-allday-chip--continues-before {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
    padding-left: var(--space-3);
}
.calendar-allday-chip--continues-after {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* -- Scrollable hour grid + event overlay -------------------------- */

.calendar-day-scroll {
    flex: 1;          /* fill the day column below the all-day row (not a fixed viewport fraction) */
    min-height: 0;    /* required for a flex child to scroll rather than grow to content */
    overflow-y: auto;
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

/* The grid is the positioning context for the absolute event layer. */
.calendar-day-grid {
    position: relative;
}

/* Let the reused DayCalendar size to its content (so % geometry maps to the full day). */
.calendar-day-grid .day-calendar {
    height: auto;
    overflow: visible;
}

.calendar-event-layer {
    position: absolute;
    top: 0;
    bottom: 0;
    /* offset past the hour-label gutter (label width + its right border) */
    left: calc(var(--space-15) + var(--border-width-1));
    right: 0;
    pointer-events: none;
}

.calendar-event-block {
    position: absolute;
    top: var(--evt-top);
    height: var(--evt-height);
    left: var(--evt-left);
    width: calc(var(--evt-width) - var(--space-1));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-0_5);
    overflow: hidden;
    padding: var(--space-1) var(--space-2);
    background: var(--color-primary-light);
    color: var(--text-primary);
    border-radius: var(--border-radius-sm);
    border-left: var(--border-width-2) solid var(--color-primary);
    box-shadow: var(--shadow-sm);
    font-size: var(--text-xs);
    pointer-events: auto;
    cursor: pointer;
    transition: box-shadow var(--duration-200) var(--easing-out), transform var(--duration-200) var(--easing-out);
}

.calendar-event-block:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    z-index: 2;
}

.calendar-event-block:focus-visible {
    outline: var(--border-width-2) solid var(--color-primary);
    outline-offset: var(--space-0_5);
}

.calendar-event-time { font-weight: var(--font-weight-semibold); white-space: nowrap; }
.calendar-event-title { font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event-where { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -- This-week sticky-note board (free drag/resize canvas) ---------- */

.calendar-notes-canvas {
    position: relative;
    width: 100%;
    /* This tab is content-sized (no definite height up the chain), so the canvas's own
       min-height sets the board height. Fill the panel's scroll viewport -- the SAME
       calc(100vh - 300px) the .scrollable-panel .section-content uses -- so the board is
       the full height of the parent (the day pane matches it via the grid row), and grow
       past it (scrolling) when notes sit lower. No border: the panel already frames it. */
    flex: 1;
    min-height: max(var(--cal-canvas-h, 0px), calc(100vh - 300px));
    background: var(--bg-surface);
    overflow: auto;
}

/* -- Modal forms --------------------------------------------------- */

.calendar-event-form,
.calendar-note-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* TLP-224: Outlook-style "when" row -- date + time(s) on one line, All-day toggle inline.
   align-items:flex-end so the toggle + inputs line up beneath their field labels. */
.calendar-when-row {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
}

.calendar-when-fields {
    display: flex;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
    align-items: flex-end;
}

.calendar-when-fields > * { flex: 1; min-width: 0; }
.calendar-when-fields > .calendar-time-fields { flex: 2; } /* Start + End = two columns */

.calendar-when-allday {
    flex-shrink: 0;
    padding-bottom: var(--space-2); /* nudge the toggle to the inputs' vertical centre */
}

.calendar-time-fields {
    display: flex;
    gap: var(--space-3);
}

.calendar-time-fields > * { flex: 1; min-width: 0; }

/* All-day events swap the start/end TIME fields for an End-date field (multi-day). */
.calendar-event-form.is-allday .calendar-time-fields {
    display: none;
}
.calendar-event-form .calendar-enddate-field {
    display: none;
}
.calendar-event-form.is-allday .calendar-enddate-field {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .calendar-event-block { transition: none; }
    .calendar-event-block:hover { transform: none; }
}

@media (max-width: 768px) {
    /* Stacked layout: the grid box no longer has a definite-height parent to fill,
       so give it a concrete height instead of flex-filling (which would collapse). */
    .calendar-day { flex: 0 1 auto; }
    .calendar-day-scroll { flex: 0 1 auto; height: 60vh; }
}