/* Venue location picker — map + autocomplete search */
.venue-loc-map {
    height: 350px;
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
}
@media (max-width: 575.98px) {
    .venue-loc-map {
        height: 240px;
    }
}
.venue-loc-suggestions {
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border-radius: 0.375rem;
}
.venue-loc-suggestions .list-group-item {
    cursor: pointer;
    border-left: none;
    border-right: none;
    border-radius: 0;
}
.venue-loc-suggestions .list-group-item:first-child { border-top: none; }
.venue-loc-suggestions .list-group-item:last-child { border-bottom: none; }
.venue-loc-suggestions .list-group-item:hover,
.venue-loc-suggestions .list-group-item.active {
    background-color: #f1f5f9;
}

/* Player nav offcanvas body sits inside .navbar-dark, which would cascade white link colours onto the
   white body. Reset to body-text colour so links are readable on the light background. */
#navMainOffcanvas .offcanvas-body .nav-link {
    color: rgba(0,0,0,.65);
}
#navMainOffcanvas .offcanvas-body .nav-link:hover,
#navMainOffcanvas .offcanvas-body .nav-link:focus {
    color: rgba(0,0,0,.85);
}
#navMainOffcanvas .offcanvas-body .nav-link.active {
    color: rgba(0,0,0,.9);
    font-weight: 600;
}
#navMainOffcanvas .offcanvas-body .nav-link.disabled {
    color: rgba(0,0,0,.4);
}

/* Mobile bottom navigation: keep page content clear of the fixed bar + iOS home indicator. */
.app-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
}
/* Sticky footer: pins the footer to the viewport bottom on short-content pages
   instead of letting it float right after the content. body is a flex column
   (see body rule above); main grows to fill the remaining space, and is itself
   a flex column so its first child (the page content, whatever tag it renders
   as via th:replace) grows too — pushing a shorter footer down to main's edge. */
main.app-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
main.app-main > *:first-child {
    flex: 1 0 auto;
}
@media (max-width: 991.98px) {
    main.app-main {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

/* Session form — mobile-first sections + tappable venue/buddy pickers */
.session-section {
    padding: 0.9rem 0;
    border-top: 1px solid #eef0f2;
}
.session-section:first-of-type {
    padding-top: 0.25rem;
    border-top: none;
}
.session-section__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
/* Brand-green section icons (matches the home CTA), not Bootstrap blue. */
.session-section__title > i { color: #2e7d32; }
.session-venue-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .session-venue-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.session-venue-option {
    line-height: 1.2;
}
.session-venue-meta {
    color: var(--bs-secondary-color, #6c757d);
}
.session-venue-option.active .session-venue-meta {
    color: rgba(255, 255, 255, 0.85);
}
.session-venue-all {
    max-height: 220px;
    overflow-y: auto;
}

/* Tappable pick chips (venue tiles + buddy chips) in the brand green, replacing
   Bootstrap's primary blue so the form reads as part of the green-accented app. */
.session-pick {
    border: 1px solid #c8e6c9;
    background: #fff;
    color: #1b5e20;
}
.session-pick:hover {
    border-color: #2e7d32;
    background: #f1f8f1;
    color: #1b5e20;
}
.session-pick.active,
.session-venue-all .session-venue-option.active {
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
}
.session-pick.active:hover {
    background: #1b5e20;
    color: #fff;
}
.session-venue-all .session-venue-option.active .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}
.session-buddy-toggle {
    padding-block: 0.4rem;
}
/* Chips for invitees added via search (rendered in JS). */
.session-extra-chip {
    background: #2e7d32;
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Weather — its own collapsible card so it doesn't blend with the court estimate. */
.session-weather {
    border: 1px solid var(--c-border);
    border-radius: 0.65rem;
    overflow: hidden;
    margin: 0.9rem 0;
    background: var(--c-bg-card);
}
.session-weather__bar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.8rem;
    border: 0;
    background: var(--c-success-bg);
    text-align: left;
    font-size: 0.9rem;
}
.session-weather__bar:hover { filter: brightness(0.98); }
.session-weather__now { color: var(--c-text); }
.session-weather__chevron { color: var(--c-text-2); transition: transform 0.2s ease; }
.session-weather__bar:not(.collapsed) .session-weather__chevron { transform: rotate(180deg); }
.session-weather__detail { padding: 0 0.8rem 0.8rem; }
.session-weather__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 1.1rem;
    padding-top: 0.6rem;
    font-size: 0.85rem;
}
.session-weather__grid > div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}
.session-weather__summary {
    margin: 0.55rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--c-border);
    font-size: 0.85rem;
    color: var(--c-text-2);
}
.session-weather__attribution {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--c-text-muted);
    text-align: right;
}

/* "Start a bit later" nudge (Punkt 6/B) — visible under the bar, form-only. */
.session-weather__nudge {
    display: flex; gap: 0.4rem; align-items: baseline;
    margin: 0; padding: 0.5rem 0.8rem;
    background: var(--c-primary-tint);
    color: var(--c-text);
    font-size: 0.83rem; font-weight: 600; line-height: 1.35;
    border-top: 1px solid var(--c-border);
}
.session-weather__nudge .bi { color: var(--c-primary); flex-shrink: 0; }

/* Hour-by-hour strip (Punkt 6/A) — shows the shape of the weather so one bad hour
   in a long session doesn't misrepresent the whole game. Colored top accent = playability. */
.session-weather__hours {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding-top: 0.6rem;
}
.session-weather__hour {
    flex: 1 1 auto; min-width: 52px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 0.4rem 0.3rem;
    border: 1px solid var(--c-border);
    border-top: 3px solid var(--c-border);
    border-radius: 0.5rem;
    background: var(--c-bg-card);
    font-size: 0.78rem; color: var(--c-text-2);
    font-family: inherit; cursor: pointer;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}
.session-weather__hour:hover { background: var(--c-primary-tint); }
/* Selected tab: its detail panel is the one shown below. Ring + subtle lift, playability
   colour stays on the top border so the timeline reading is preserved. */
.session-weather__hour.is-selected {
    background: var(--c-primary-tint);
    box-shadow: 0 0 0 2px var(--c-primary) inset;
}
.session-weather__hour-time { font-weight: 700; color: var(--c-text); }
.session-weather__hour-icon { font-size: 1rem; }
.session-weather__hour-temp { font-weight: 600; }
.session-weather__hour.is-good { border-top-color: #1F8A4C; }
.session-weather__hour.is-fair { border-top-color: #D19A00; }
.session-weather__hour.is-poor { border-top-color: #C13333; }
.session-weather__hour.is-poor .session-weather__hour-icon { color: #C13333; }

/* Branded dark hero bridges the jump from the dark home screen into this light form.
   Compact on mobile — extra info lives behind the (i) toggle, not stacked bullets. */
.session-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #fff;
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.session-hero__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.session-hero__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}
.session-hero__info {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
}
.session-hero__info:hover { color: #fff; }
.session-hero__details {
    margin-top: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
}
/* Segmented Prywatna/Otwarta control, styled for the dark hero. */
.session-mode {
    display: inline-flex;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.25rem;
    border-radius: 999px;
    margin-top: 0.7rem;
}
.session-mode a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.15s, color 0.15s;
}
.session-mode a.active { background: #fff; color: #0f3460; }
.session-mode a:not(.active):hover { color: #fff; background: rgba(255, 255, 255, 0.08); }