/* ===================================================================================================
   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. Instead of a cramped avatar column and a chip strip, show just the count
   (e.g. 3/8) and a colored vote-proportion bar below it. Tapping a day opens the detail popup. */
@media (max-width: 720px) {
    .fod-cal-day {
        min-height: 66px;
        padding: 5px;
    }

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

    /* On narrow screens avatars and chips give way to the count + bar. The descendant selector (0,2,0)
       beats the base rule .fod-cal-day__avas {display:inline-flex}, which sits lower in app.css. */
    .fod-cal-day .fod-cal-day__avas,
    .fod-cal-day .fod-vbreak {
        display: none;
    }

    .fod-cal-day--mine .fod-cal-day__foot::before {
        display: none;
    }

    .fod-cal-day__foot {
        left: 5px;
        right: 5px;
        bottom: 5px;
        gap: 4px;
    }

    .fod-cal-day__avline {
        gap: 0;
    }

    .fod-cal-day__count {
        font-size: 11.5px;
        padding: 1px 7px;
    }

    .fod-cal-day__bar {
        display: flex;
    }
}

/* ── 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-label {
    margin: 22px 0 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
}

.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;
    }
}