/*
 * Agenda (FullCalendar 7, breezy theme) — shared by the public agenda and the
 * back-office calendar, hence plain CSS copied as is: the back-office does not
 * load app.css (Tailwind).
 *
 * Every entry reads the same way whatever its type: a light wash of its colour,
 * a dot in the full colour, the title, then the time pushed to the right. The
 * colour is the feed's `color`, which FullCalendar sets on the entry as
 * --fc-event-color: the type is told by colour alone (NVBESTASK-197).
 *
 * 🔴 Only our own classes are targeted, set through FullCalendar's class-name
 * options (templates/components/_fullcalendar.html.twig). The theme's classes
 * are generated (`fc-breezy-3J4`) and change from one release to the next.
 */

.nvbes-calendar .nvbes-cal-grid {
    background-color: color-mix(in srgb, var(--fc-event-color) 14%, white);
}
.nvbes-calendar .nvbes-cal-grid,
.nvbes-calendar .nvbes-cal-grid * {
    color: #1f2937;
}

/* Week and day grids: the colour runs down the left edge. */
.nvbes-calendar .nvbes-cal-grid:not(.nvbes-cal-daygrid) {
    border-left: 3px solid var(--fc-event-color);
}

/* Month grid: dot, title, time at the far right. The title gives way first and
   is cut right before the time, not earlier. */
.nvbes-calendar .nvbes-cal-daygrid {
    display: flex;
    align-items: center;
}
.nvbes-calendar .nvbes-cal-daygrid::before {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin: 0 4px 0 5px;
    border-radius: 999px;
    background-color: var(--fc-event-color);
}
.nvbes-calendar .nvbes-cal-daygrid > * {
    display: flex;
    align-items: baseline;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
}
.nvbes-calendar .nvbes-cal-daygrid .nvbes-cal-title {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nvbes-calendar .nvbes-cal-daygrid .nvbes-cal-time {
    order: 2;
    flex-shrink: 0;
    margin: 0 0 0 auto;
    padding: 0 5px 0 0;
    opacity: .65;
    font-weight: 400;
}

/* List views: height is not scarce there. The theme keeps the title on one
   line beside the time and clips it without an ellipsis, so on a phone a title
   just stops mid-word. A title that does not fit beside the time goes under
   it, full width, and wraps between words. */
.nvbes-calendar .nvbes-cal-list > * {
    flex-wrap: wrap;
}
.nvbes-calendar .nvbes-cal-list .nvbes-cal-title {
    flex: 1 1 auto;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Phone, month grid: a day is ~46px wide. Title only, like the iPhone's
   Calendar — the time is one tap away, in the popover and the other views.
   Same breakpoint as `sm` everywhere else on the site. */
@media (max-width: 639px) {
    .nvbes-calendar .nvbes-cal-daygrid {
        padding: 0 4px;
    }
    .nvbes-calendar .nvbes-cal-daygrid::before,
    .nvbes-calendar .nvbes-cal-daygrid .nvbes-cal-time {
        display: none;
    }

    /* List views: the theme gives the time a fixed-width column so that titles
       line up; on a phone it leaves the title stranded far from its time. */
    .nvbes-calendar .nvbes-cal-list > * {
        gap: 4px 8px;
    }
    .nvbes-calendar .nvbes-cal-list .nvbes-cal-time {
        width: auto;
    }
}