/* ===================================================================================================
   Calendar control styles (AvailabilityCalendar + month grid, week/day time-grid, day/slot detail popup)

   These rules are used only by the calendar control and its detail popup. They were split out of the
   global app.css so the calendar's presentation lives in one place. Base/heat/layout rules that predate
   this split still live in app.css; this file holds the slim mobile cell, the proportional vote-weight
   bars, the time-grid slot layout, and the DayDetailDialog styling. Loaded after app.css so the mobile
   overrides here win.
   =================================================================================================== */

/* ── Month grid: proportional vote-weight bar ────────────────────────────────────────────────────
   Amber = best, blue = works, grey = maybe. Hidden by default — on desktop the cell shows ringed
   avatars and chips; the bar only appears on narrow screens (see the media query below), where it
   replaces the cramped avatars with one legible indicator. */
.fod-cal-day__bar {
    display: none;
    width: 100%;
    height: 5px;
    gap: 2px;
}

.fod-cal-day__bar i {
    display: block;
    min-width: 2px;
    border-radius: 3px;
}

.fod-cal-day__bar i.fod-vt--best { background: var(--vt-best); }
.fod-cal-day__bar i.fod-vt--good { background: var(--vt-good); }
.fod-cal-day__bar i.fod-vt--maybe { background: var(--vt-maybe); }

/* Mobile: slim cell with a fixed vertical stack so every cell looks the same regardless of which info
   it has. Top-left: day number; top-right corner: the winner-star badge. Centre: the viewer's own vote
   (just its weight icon). Above the bottom: the vote total. Very bottom: the proportional bar. The
   own-vote icon takes the centre slot (so it never overlaps the number/star), and the total drops a row
   to sit just above the bar. Tapping a day opens the detail popup. */
@media (max-width: 720px) {
    .fod-cal-day {
        min-height: 84px;
        padding: 5px;
        gap: 3px;
    }

    .fod-cal-day__num {
        font-size: 13px;
    }

    /* Drop the top row's positioning context so the absolutely-placed total/star below resolve against
       the whole cell, not just the top row. The number stays in flow, top-left. */
    .fod-cal-day__top {
        position: static;
    }

    /* Hide the per-weight rows; the proportional bar below represents them. */
    .fod-cal-day__votes {
        display: none;
    }

    /* Vote-types bar pinned to the very bottom of the cell. */
    .fod-cal-day__bar {
        display: flex;
        position: absolute;
        left: 5px;
        right: 5px;
        bottom: 5px;
        z-index: 2;
    }

    /* The viewer's own vote takes the centre slot, as the same icon + "Ty" pill used on desktop (just a
       touch smaller). The weight-coloured background comes from the shared .fod-vt-- rules. */
    .fod-cal-day__you,
    .fod-cal-day__you.fod-vt--best,
    .fod-cal-day__you.fod-vt--good,
    .fod-cal-day__you.fod-vt--maybe {
        position: absolute;
        /* Clear the desktop grid-row so the absolute box resolves against the whole cell (a definite
           grid placement would otherwise anchor it to the collapsed row-3 area). */
        grid-row: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        margin: 0;
        gap: 3px;
        padding: 2px 7px 2px 6px;
        font-size: 9.5px;
    }

    .fod-cal-day__you svg {
        width: 11px;
        height: 11px;
    }

    /* Vote total drops to its own row, just above the bar, centred horizontally. Sits a touch lower so
       there is a clear gap between it and the own-vote pill in the centre. */
    .fod-cal-day__total {
        position: absolute;
        left: 50%;
        bottom: 12px;
        transform: translateX(-50%);
        margin: 0;
        z-index: 2;
        font-size: 10px;
        padding: 1px 6px;
    }

    /* Winner-star badge sits in the top-right corner. */
    .fod-cal-day__star {
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 3;
        width: 18px;
        height: 18px;
        padding: 2.5px;
    }
}

/* ── Week/day time-grid ──────────────────────────────────────────────────────────────────────────
   A slot is one center-aligned row: count, (day only) vote-split chips, avatars with a vote-weight
   ring and — when columns get narrow — a proportional color bar at the bottom instead of avatars/chips.
   The full list of people and their weights lives in the popup opened by tapping a slot. */
.fod-tg-vbreak {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    flex: 0 0 auto;
}

/* "This is your vote" marker — a colored bar on the slot's left edge (replaces the old "You" badge). */
.fod-tg-slot--mine {
    box-shadow: inset 3px 0 0 0 var(--heat-best);
}

.fod-tg-slot--mine.fod-tg-slot--best {
    box-shadow: inset 3px 0 0 0 var(--heat-best), inset 0 0 0 2px var(--heat-best);
}

/* Proportional vote-weight bar — hidden while avatars fit; shown on narrow columns (week ≤1180px) and
   on a narrow screen (day ≤720px). Absolutely positioned at the bottom of the slot. */
.fod-tg-slot__bar {
    display: none;
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 3px;
    height: 4px;
    gap: 2px;
}

.fod-tg-slot__bar i {
    display: block;
    min-width: 2px;
    border-radius: 3px;
}

.fod-tg-slot__bar i.fod-vt--best { background: var(--vt-best); }
.fod-tg-slot__bar i.fod-vt--good { background: var(--vt-good); }
.fod-tg-slot__bar i.fod-vt--maybe { background: var(--vt-maybe); }

/* Day view: wider column, slightly larger avatars (up to 12, then +N). */
.fod-cal-timegrid.is-day .fod-tg-avas .ava {
    width: 20px;
    height: 20px;
    font-size: 9px;
}

/* Tablet / narrow desktop: in the week view hide avatars and show the proportion bar. */
@media (max-width: 1180px) {
    .fod-cal-timegrid:not(.is-day) .fod-tg-avas {
        display: none;
    }

    .fod-cal-timegrid:not(.is-day) .fod-tg-slot__bar {
        display: flex;
    }
}

/* Phone: keep the time-grid a self-contained, viewport-sized scroll box (its own vertical + horizontal
   scrollbars) instead of letting it grow and scroll the whole page. The week view scrolls horizontally
   (columns wide enough to tap); the day view hides chips, leaving avatars + the proportion bar. */
@media (max-width: 720px) {
    .fod-cal-timegrid-wrap {
        max-height: 70vh;
        max-height: 70dvh;
    }

    /* Tydzień na telefonie: mieścimy 7 kolumn w szerokości ekranu zamiast wymuszać poziome przewijanie.
       Zdejmujemy sztywne min-width (było 620px) i lekko zwężamy rynnę z godzinami — etykiety typu „18:00"
       nadal się mieszczą — żeby zostawić więcej miejsca na kolumny dni. */
    .fod-cal-timegrid:not(.is-day) {
        --tg-gutter: 48px;
        min-width: 0;
    }

    .fod-cal-timegrid:not(.is-day) .fod-tg-time {
        padding: 0 6px;
        font-size: 11px;
    }

    /* Wąska kolumna dnia: skracamy padding i czcionkę nagłówka, a overflow:hidden gwarantuje, że dłuższe
       skróty ("NIEDZ.", "CZW.") nie rozepchną kolumny i nie wywołają poziomego paska przewijania. */
    .fod-cal-timegrid:not(.is-day) .fod-tg-head {
        padding: 8px 3px 7px;
        overflow: hidden;
    }

    .fod-cal-timegrid:not(.is-day) .fod-tg-dow {
        font-size: 9.5px;
        letter-spacing: 0.01em;
    }

    /* W wąskiej kolumnie tygodnia gwiazdka „najlepszego terminu" się mieści, ale podpis „najlepszy" już
       nie — zostawiamy samą gwiazdkę (pełny opis jest w tooltipie nagłówka). */
    .fod-cal-timegrid:not(.is-day) .fod-tg-head__pin-label {
        display: none;
    }

    .fod-cal-timegrid.is-day .fod-tg-vbreak {
        display: none;
    }

    .fod-cal-timegrid.is-day .fod-tg-slot__bar {
        display: flex;
    }
}

/* ── Day / slot detail popup (DayDetailDialog) ───────────────────────────────────────────────────
   A normal centered dialog on desktop; on a phone it slides up as a bottom sheet. The selector repeats
   Radzen's :not() pattern (.rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) sets border-radius:0)
   so the rounded corners win on specificity. */
.day-detail-dialog.rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden;
}

.day-detail-dialog .rz-dialog-titlebar {
    padding: 20px 24px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
}

.day-detail-dialog .rz-dialog-title {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    font-size: 22px;
    color: var(--ink);
}

.day-detail-dialog .rz-dialog-content {
    padding: 20px 24px 22px;
}

/* Header: large vote counter + description, plus an optional "Best date" badge. */
.dm-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.dm-summary__count {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: 42px;
    line-height: 1;
    color: var(--ink);
}

.dm-summary__count small {
    font-size: 17px;
    color: var(--ink-faint);
    font-weight: 700;
}

.dm-summary__txt {
    flex: 1 1 90px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--ink-soft);
}

.dm-summary__best {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 800;
    color: var(--heat-best);
    background: color-mix(in srgb, var(--heat-best) 16%, transparent);
}

.dm-summary__best svg {
    width: 14px;
    height: 14px;
}

/* Vote breakdown into the three weights (icon + number + label). */
.dm-break {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.dm-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 13px 6px;
    border-radius: var(--radius);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    color: var(--vote-color, var(--ink-soft));
}

.dm-stat__ico {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: var(--vote-color, var(--ink-soft));
}

.dm-stat__ico svg {
    width: 18px;
    height: 18px;
}

.dm-stat b {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: var(--display-weight);
    line-height: 1;
}

.dm-stat.fod-vote--preferred { background: var(--vt-best-bg); }
.dm-stat.fod-vote--available { background: var(--vt-good-bg); }
.dm-stat.fod-vote--maybe { background: var(--vt-maybe-bg, color-mix(in srgb, var(--vt-maybe) 16%, transparent)); }

.dm-stat.is-zero {
    opacity: 0.38;
}

/* Full people list — avatar, name, vote pill. */
.dm-people-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 22px 0 6px;
}

.dm-people-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
}

/* Sort toggle above the people list: a small segmented control (by name / by vote type). */
.dm-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dm-sort__label {
    margin-right: 2px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-faint);
}

.dm-sort__btn {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.dm-sort__btn:hover {
    background: var(--surface-2);
    border-color: var(--ink-faint);
}

.dm-sort__btn.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.dm-people {
    display: flex;
    flex-direction: column;
    max-height: 290px;
    overflow-y: auto;
}

.dm-person {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--line-soft);
}

.dm-person:last-child {
    border-bottom: none;
}

.dm-person .ava {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.dm-person__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}

.dm-person__vote {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    color: var(--vote-color, var(--ink-soft));
    background: color-mix(in srgb, var(--vote-color, var(--ink-soft)) 14%, transparent);
}

.dm-empty {
    margin: 0;
    padding: 24px 0;
    text-align: center;
    font-size: 14px;
    color: var(--ink-soft);
}

.day-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.day-detail__actions .rz-button:first-child {
    flex: 1 1 auto;
}

/* Bottom sheet on phones: the dialog is pinned to the bottom, full width, with a rounded top. Radzen
   centers the dialog with flex inside .rz-dialog-wrapper, so we switch that to bottom alignment and
   override the dialog's inline width:440px to full width. */
@media (max-width: 560px) {
    .rz-dialog-wrapper:has(.day-detail-dialog) {
        align-items: flex-end;
    }

    .day-detail-dialog.rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        width: 100% !important;
        max-width: none !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    /* Drop the "Sortuj:" caption and keep the sort buttons on the same row as the "who voted" heading. */
    .dm-sort__label {
        display: none;
    }

    .dm-people-head {
        flex-wrap: nowrap;
    }

    .dm-sort {
        flex: 0 0 auto;
    }

    .dm-sort__btn {
        padding: 4px 9px;
    }
}