/* Dinkujemy - custom styles */

:root {
    /* Width of the classic vertical scrollbar: 0 with overlay scrollbars (macOS) or no
       scrollbar (headless); the real gutter on Windows/Linux. Used by the full-bleed public
       appbar so its 50vw bleed can subtract it and never exceed the scrollable content width
       (a bare 50vw bleed pokes ~8px past on a classic scrollbar → horizontal scroll). */
    --scrollbar-width: calc(100vw - 100%);

    /* Legacy aliases — kept for backward-compat; prefer --c-* tokens below */
    --dink-pin-blue: #0C447C;
    --dink-pickle-yellow: #EF9F27;

    /* ── Design-system tokens (Etap 0 / Granat & Amber theme) ─────────────── */
    --c-primary:       #0C447C;
    --c-primary-deep:  #093256;
    --c-primary-tint:  #EAF1F9;   /* active nav bg, selected states */

    --c-accent:        #EF9F27;   /* amber — pickleball ball, CTA */
    --c-accent-deep:   #BA7517;
    --c-accent-light:  #FAC775;
    --c-accent-tint:   #FDF3E0;
    --c-accent-ink:    #3A2606;   /* text on accent backgrounds */

    /* Text hierarchy */
    --c-text:          #16202B;   /* primary / headings */
    --c-text-2:        #46566A;   /* secondary */
    --c-text-sub:      #5B6B7B;   /* subdued */
    --c-text-muted:    #5E6A76;
    --c-placeholder:   #6A7785;

    /* Semantic */
    --c-success:       #157A3F;
    --c-success-bg:    #E7F4EC;
    --c-warn:          #8A5A0C;
    --c-warn-bg:       #FBEFD9;
    --c-error:         #C13333;
    --c-error-bg:      #FDF1F1;

    /* Borders */
    --c-border:        #E6EAEF;
    --c-border-2:      #CDD9E5;   /* hover / focus border */

    /* Backgrounds */
    --c-bg-app:        #F6F8FA;   /* page canvas */
    --c-bg-content:    #F8FAFB;   /* content area */
    --c-bg-card:       #ffffff;
    --c-bg-hover:      #F4F7FA;

    /* Typography scale (px values; use em in components for zoom-safety) */
    --fs-caption:  11px;
    --fs-xs:       12px;
    --fs-sm:       13px;
    --fs-base:     14px;
    --fs-md:       16px;
    --fs-lg:       17px;
    --fs-xl:       20px;
    --fs-2xl:      26px;
    --fs-stat:     34px;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--c-text);
    background-color: var(--c-bg-app);
}

/* WCAG AA: several Bootstrap defaults sit just under 4.5:1 on our near-white
   backgrounds — the default link (#0d6efd, 4.29:1), .link-secondary (#6c757d,
   4.4:1), .text-muted / --bs-secondary-color (#6c757d, 4.4:1) and .text-danger
   (#dc3545, 4.25:1). Darken them so plain links, muted captions and danger text
   clear AA app-wide (legal pages, footer, forms, schedule). */
:root {
    --bs-link-color: #0a58ca;                  /* ~5.5:1 on white */
    --bs-link-color-rgb: 10, 88, 202;
    --bs-link-hover-color: #08469f;
    --bs-link-hover-color-rgb: 8, 70, 159;
    --bs-secondary-color: #59636E;             /* was #6c757d (4.4:1) → ~5.4:1 */
}
/* .link-secondary uses --bs-secondary-rgb (#6c757d, 4.4:1) with !important, so the
   variable override above can't reach it — set the colour directly. Covers the global
   footer (privacy/terms) + inline legal links on every page. */
.link-secondary {
    color: #545E68 !important;                 /* ~5.3:1 on white */
}
.text-danger {
    color: #C13333 !important;                 /* was #dc3545 (4.25:1) → ~5.5:1 */
}
/* Outline button resting text (#6c757d / #dc3545) is just under AA — darken the
   --bs-btn-color token (hover keeps its filled bg + white text). */
.btn-outline-secondary { --bs-btn-color: #59636E; }
.btn-outline-danger    { --bs-btn-color: #C13333; }

/* Bootstrap 5 ships no .min-w-0 (only .min-vw-100/.min-vh-100). Several flex
   rows (dashboard group cards, attendance, schedule) rely on it so a
   .text-truncate child can actually shrink instead of pushing a flush-right
   badge past the viewport. Without it the group-card count badge overflowed
   the phone by ~4px (visual gate: club-dashboard mobile). */
.min-w-0 { min-width: 0 !important; }

/* Fees table on mobile: compact single card per athlete — name + amount/status
   chips on line 1, plan name on line 2, actions in a button row below (was a
   generic label:value stack, ~214px/athlete → 5.9 screens for 23 rows; club-mobile-plan
   Etap 5). Keeps a SINGLE <table>/<tr> DOM (HTMX row swaps target `closest tr`) —
   the mobile card look is pure CSS; desktop table (>=768px) is untouched. */
@media (max-width: 767.98px) {
  .dink-fee-table thead { display: none; }
  .dink-fee-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name    amount  status"
      "plan    plan    plan"
      "actions actions actions";
    column-gap: .5rem;
    row-gap: .25rem;
    align-items: center;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .5rem .625rem;
    margin-bottom: .5rem;
  }
  .dink-fee-row__name { grid-area: name; min-width: 0; }
  .dink-fee-row__name .fw-semibold {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dink-fee-row__amount { grid-area: amount; justify-self: end; }
  .dink-fee-row__status { grid-area: status; justify-self: end; }
  .dink-fee-row__plan { grid-area: plan; }
  .dink-fee-row__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    border-top: 1px solid var(--bs-border-color);
    margin-top: .25rem;
    padding-top: .5rem;
  }
  /* Stacked cards must NOT hide overflow as in-box scroll — make any stack
     overflow REAL page overflow so the visual gate stays authoritative. */
  .dink-fee-table-wrap { overflow-x: visible; }
}

/* Brand lockup — used in public-home header + main navbar.
   Amber glow lifts the pin off dark backgrounds; dark shadow adds depth on light.
   Explicit font-size keeps the wordmark identical with or without Bootstrap's .navbar-brand. */
.dink-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.015em;
    line-height: 1;
}
.dink-brand,
.dink-brand:hover,
.dink-brand:focus { text-decoration: none; color: inherit; }
/* On the dark navbar `color: inherit` resolves to the dark body text → wordmark invisible.
   Force white so the brand reads on `bg-dark`. (Club themes set their own color with !important.) */
.navbar-dark .dink-brand,
.navbar-dark .dink-brand:hover,
.navbar-dark .dink-brand:focus { color: #fff; }
.dink-brand-mark {
    height: 28px;
    width: 28px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 5px rgba(239, 159, 39, 0.5))
            drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.dink-brand-mark--sm { height: 24px; width: 24px; }
/* .pl reads as part of the wordmark — no separate color or weight.
   The pin mark (amber ball on navy) carries the brand accent on its own;
   the text stays calm and lets the mark do the talking. */
.dink-brand__tld {
    color: inherit;
}

.slot-card {
    transition: box-shadow 0.2s;
}

.slot-card:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

/* Badge palette: green=confirmed, yellow=waitlist, blue=informational */
.badge-confirmed {
    background-color: #198754;
}

.badge-waitlist {
    background-color: #ffc107;
    color: #212529;
}

.badge-added {
    background-color: var(--dink-pin-blue);
}

/* Brand buttons */
.btn-dink {
    background-color: var(--dink-pin-blue);
    border-color: var(--dink-pin-blue);
    color: #fff;
}
.btn-dink:hover, .btn-dink:focus {
    background-color: #083568;
    border-color: #072e5c;
    color: #fff;
}
.btn-dink:active {
    background-color: #072e5c;
    border-color: #061f3e;
    color: #fff;
}
.btn-dink-outline {
    background-color: transparent;
    border-color: var(--dink-pin-blue);
    color: var(--dink-pin-blue);
}
.btn-dink-outline:hover {
    background-color: var(--dink-pin-blue);
    border-color: var(--dink-pin-blue);
    color: #fff;
}

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

/* Day overview grid */
.day-overview-table {
    border-collapse: separate;
    border-spacing: 6px 6px;
    table-layout: fixed;
    width: 100%;
}

.day-overview-table thead th {
    border: none;
    color: #6c757d;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    padding-bottom: 2px;
}

.day-cell {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s;
    min-height: 185px;
    vertical-align: top;
    border: none !important;
}

/* Pickleball court markings (portrait): net = horizontal 50%, kitchen = 32%/68%, service center = vertical 50% */
.day-cell::before {
    content: '';
    position: absolute;
    inset: 6px;
    pointer-events: none;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    background-image:
        linear-gradient(to bottom,
            transparent calc(50% - 1px),
            rgba(255,255,255,0.55) calc(50% - 1px),
            rgba(255,255,255,0.55) calc(50% + 1px),
            transparent calc(50% + 1px)),
        linear-gradient(to bottom,
            transparent calc(32% - 1px),
            rgba(255,255,255,0.35) calc(32% - 1px),
            rgba(255,255,255,0.35) calc(32% + 1px),
            transparent calc(32% + 1px)),
        linear-gradient(to bottom,
            transparent calc(68% - 1px),
            rgba(255,255,255,0.35) calc(68% - 1px),
            rgba(255,255,255,0.35) calc(68% + 1px),
            transparent calc(68% + 1px)),
        linear-gradient(to right,
            transparent calc(50% - 1px),
            rgba(255,255,255,0.3) calc(50% - 1px),
            rgba(255,255,255,0.3) calc(50% + 1px),
            transparent calc(50% + 1px));
}

.day-cell a {
    position: relative;
    z-index: 1;
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
    padding: 0.75rem;
}

.day-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);
}

.day-time-cell {
    vertical-align: middle;
    font-weight: 600;
    white-space: nowrap;
    width: 70px;
}

/* Mobile court carousel */
.court-scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.court-scroll-container::-webkit-scrollbar {
    display: none;
}

.court-cell-mobile {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-height: 80px;
    padding: 0.75rem;
}

.court-indicators {
    text-align: center;
    padding: 4px 0;
    font-size: 0.6rem;
    letter-spacing: 4px;
    color: #6c757d;
}

.court-players {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 0.4rem;
}

.player-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: inherit;
}

.player-avatar.is-core {
    background: rgba(255, 193, 7, 0.3);
    outline: 1.5px solid rgba(255, 193, 7, 0.65);
}

/* Glass-dark theme utilities (public home + logged-in home map view) */
.ph-title { color: #ffffff; }
.ph-subtitle { color: rgba(255,255,255,0.6); }
.ph-day-label { color: rgba(255,255,255,0.45); font-size: 0.78rem; letter-spacing: .05em; text-transform: uppercase; }
.ph-card {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
}
.ph-card .ph-event-item {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0.6rem 0.85rem;
}
.ph-card .ph-event-item:last-child { border-bottom: none; }
.ph-time { color: #ffffff; font-weight: 600; }
.ph-venue { color: rgba(255,255,255,0.55); font-size: 0.85rem; }
.ph-name { color: rgba(255,255,255,0.65); font-size: 0.78rem; }
.badge-open    { background: rgba(76,175,80,0.25);  color: #81C784; border: 1px solid rgba(76,175,80,0.4); }
.badge-private { background: rgba(255,193,7,0.2);   color: #ffd54f; border: 1px solid rgba(255,193,7,0.4); }
.badge-club    { background: rgba(66,133,244,0.2);  color: #7ab3f5; border: 1px solid rgba(66,133,244,0.35); }
.badge-venue   { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.2); }
.ph-join-btn {
    background: #2e7d32 !important;
    border: 1px solid #388e3c !important;
    color: #fff !important;
    font-weight: 600;
}
.ph-join-btn:hover { background: #1b5e20 !important; color: #fff !important; }
.ph-empty {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
    color: rgba(255,255,255,0.5);
}
.ph-cta-primary {
    background: #2e7d32 !important;
    border-color: #388e3c !important;
    color: #fff !important;
    font-weight: 600;
}
.ph-cta-primary:hover { background: #1b5e20 !important; color: #fff !important; }
.ph-cta-secondary {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: rgba(255,255,255,0.85) !important;
}
.ph-cta-secondary:hover { background: rgba(255,255,255,0.14) !important; color: #fff !important; }
#public-home-map {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
    height: 260px;
}
.ph-events-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}
@media (min-width: 992px) {
    .ph-map-wrapper { position: sticky; top: 1rem; }
    #public-home-map { height: calc(100vh - 7rem) !important; }
    .ph-events-panel { max-height: calc(100vh - 7rem); overflow-y: auto; }
}
.ph-mine-card {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0.75rem;
    padding: 0.65rem 0.85rem;
    color: rgba(255,255,255,0.85);
}
.ph-mine-card > summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    user-select: none;
}
.ph-mine-card > summary::-webkit-details-marker { display: none; }
.ph-mine-card .card {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: rgba(255,255,255,0.9) !important;
}
.ph-mine-card .card .text-muted { color: rgba(255,255,255,0.5) !important; }
.ph-mine-card .card .card-title { color: rgba(255,255,255,0.9) !important; }
.ph-mine-card .card .btn-outline-danger { color: #ff6b6b; border-color: #ff6b6b; }
.ph-mine-card .card .btn-outline-secondary { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.25); }
.ph-push-banner {
    background: rgba(66,133,244,0.12);
    border: 1px solid rgba(66,133,244,0.3);
    color: rgba(255,255,255,0.9);
    border-radius: 0.75rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
}

/* Public home map markers */
.dink-marker {
    position: relative;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.dink-marker--dim {
    opacity: 0.65;
}

.dink-marker__ball {
    transform-box: fill-box;
    transform-origin: center;
}

/* Idle pulse: amber halo around the whole pin via drop-shadow.
   Far more visible than scaling a 5.5px ball — readable from across the map. */
@keyframes pickleball-glow {
    0%, 100% {
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3))
                drop-shadow(0 0 0  rgba(239, 159, 39, 0));
    }
    50% {
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3))
                drop-shadow(0 0 10px rgba(239, 159, 39, 0.8));
    }
}

/* Hover/active pulse: short, strong ball scale to confirm interaction. */
@keyframes pickleball-pulse-strong {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.28); }
    100% { transform: scale(1); }
}

.dink-marker--pulse {
    animation: pickleball-glow 2.5s ease-in-out infinite;
}

.pub-marker-active .dink-marker--pulse .dink-marker__ball {
    animation: pickleball-pulse-strong 0.8s ease-out 2;
}

.pub-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
}

.pub-popup-btn {
    display: block;
    width: 100%;
    padding: 5px 10px;
    font-size: 0.8rem;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.pub-popup-btn-primary {
    background: #198754;
    color: #fff;
}

.pub-popup-btn-primary:hover { background: #157347; color: #fff; }

.pub-popup-btn-secondary {
    background: #e9ecef;
    color: #212529;
}

.pub-popup-btn-secondary:hover { background: #d3d8de; color: #212529; }


@keyframes ph-item-glow {
    0%   { background: rgba(255,193,7,0.0); }
    25%  { background: rgba(255,193,7,0.2); }
    100% { background: rgba(255,193,7,0.0); }
}

.ph-event-item.ph-highlight {
    animation: ph-item-glow 1.5s ease-out forwards;
}

.ph-event-item[data-venue-id] { cursor: pointer; }

/* Mobile: larger touch targets */
@media (max-width: 575.98px) {
    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.9rem;
    }

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    main.container {
        margin-top: 1rem !important;
    }
}

/* Club admin — sidebar nav */
.club-nav-item {
    border-left: 3px solid transparent !important;
    transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}
.club-nav-item.active {
    background-color: rgba(12, 68, 124, 0.1) !important;
    color: var(--dink-pin-blue) !important;
    border-left-color: var(--dink-pin-blue) !important;
    font-weight: 600;
}
.club-nav-item:not(.active):hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Club admin — mobile horizontal tab nav */
.club-mobile-nav {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.club-mobile-nav::-webkit-scrollbar {
    display: none;
}
.club-mobile-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.45rem 0.8rem;
    border-radius: 0.5rem;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.65rem;
    text-align: center;
    min-width: 58px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid transparent;
    transition: background-color 0.15s, color 0.15s;
    line-height: 1.2;
}
.club-mobile-nav-link.active {
    color: var(--dink-pin-blue);
    background: rgba(12, 68, 124, 0.1);
    border-color: rgba(12, 68, 124, 0.2);
    font-weight: 600;
}

/* Card hover lift */
.card-hover {
    transition: box-shadow 0.18s, transform 0.15s;
    text-decoration: none;
}
.card-hover:hover {
    box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-2px);
}

/* Dashboard stat cards */
.stat-card-primary {
    background: linear-gradient(135deg, var(--dink-pin-blue) 0%, #083568 100%);
    color: #fff;
}
.stat-card-success {
    background: linear-gradient(135deg, #198754 0%, #0b5c38 100%);
    color: #fff;
}
.stat-card-warning {
    background: linear-gradient(135deg, #ffc107 0%, #d4a000 100%);
    color: #212529;
}

/* Collapsible alerts (e.g. fees sibling-warnings) */
.sibling-warnings > summary {
    cursor: pointer;
    list-style: none;
}
.sibling-warnings > summary::-webkit-details-marker {
    display: none;
}
.sibling-warnings[open] > summary .chevron {
    transform: rotate(180deg);
}
.sibling-warnings > summary .chevron {
    transition: transform 0.15s;
    display: inline-block;
}

/* 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); }

/* ─── Club schedule weekly grid ─────────────────────────────────────────────
   Desktop-first calendar layout (≥ md). Mobile uses simple list (.schedule-mobile-*).
   8 color palette indexed via GroupColorPalette#indexFor (UUID → 0..7).
*/
.schedule-week { font-size: 0.85rem; }

.schedule-grid-wrap {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}
.schedule-day-headers {
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    background: var(--bs-light);
    border-bottom: 1px solid var(--bs-border-color);
}
.schedule-time-corner { border-right: 1px solid var(--bs-border-color); }
.schedule-day-header {
    padding: 0.5rem 0.5rem;
    text-align: center;
    border-right: 1px solid var(--bs-border-color);
    line-height: 1.2;
}
.schedule-day-header:last-child { border-right: 0; }
.schedule-day-header.is-today { background: #fff3cd; }
.schedule-day-name {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: capitalize;
}
.schedule-day-date { color: var(--bs-secondary-color); font-size: 0.75rem; }

.schedule-grid {
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    position: relative;
}
.schedule-time-label {
    grid-column: 1;
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px solid #f1f3f5;
    padding: 2px 6px 0;
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    line-height: 1;
}
.schedule-slot {
    background: transparent;
    border: 0;
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px dotted #e9ecef;
    padding: 0;
    color: #adb5bd;
    cursor: pointer;
    position: relative;
    transition: background 0.1s;
}
.schedule-slot:last-child { border-right: 0; }
.schedule-slot-hour { border-bottom: 1px solid #e9ecef; }
.schedule-slot .bi { opacity: 0; font-size: 0.9rem; }
.schedule-slot:hover {
    background: #f8f9fa;
}
.schedule-slot:hover .bi { opacity: 0.6; }
.schedule-slot:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.schedule-block {
    margin: 0 1px;
    padding: 3px 6px;
    border-radius: 4px;
    border-left: 3px solid;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
    min-width: 0;
}
.schedule-block:hover { filter: brightness(0.96); transform: translateY(-1px); text-decoration: none; color: inherit; }
.schedule-block-time { font-weight: 700; font-size: 0.72rem; line-height: 1; }
.schedule-block-name { font-weight: 600; font-size: 0.78rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-block-venue { font-size: 0.7rem; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-block-icon { position: absolute; top: 3px; right: 4px; font-size: 0.7rem; opacity: 0.55; }
.schedule-block.is-cancelled { text-decoration: line-through; }
.schedule-block.is-completed { opacity: 0.7; }

.schedule-chip {
    border-left: 3px solid;
    padding: 0.35em 0.65em;
    font-weight: 500;
}

/* Color palette (8 colors): bg, border, on the chip + block. */
.schedule-color-0 { background: #cfe2ff; border-left-color: #0d6efd; color: #084298; }
.schedule-color-1 { background: #d1e7dd; border-left-color: #198754; color: #0a3622; }
.schedule-color-2 { background: #fff3cd; border-left-color: #ffc107; color: #664d03; }
.schedule-color-3 { background: #f8d7da; border-left-color: #dc3545; color: #58151c; }
.schedule-color-4 { background: #cff4fc; border-left-color: #0dcaf0; color: #055160; }
.schedule-color-5 { background: #e0cffc; border-left-color: #6f42c1; color: #2e1655; }
.schedule-color-6 { background: #fcd6b0; border-left-color: #fd7e14; color: #6b2c00; }
.schedule-color-7 { background: #b2ecdb; border-left-color: #20c997; color: #0a4a3a; }

/* Mobile list */
.schedule-mobile-day {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    text-transform: capitalize;
    font-weight: 600;
}
.schedule-mobile-day.is-today { color: var(--c-primary); }
.schedule-mobile-card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border-left: 4px solid;
    margin-bottom: 0.4rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.schedule-mobile-card:hover { color: inherit; text-decoration: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }

/* ─── Etap 0 — Foundation utility classes ──────────────────────────────────
   Minimal shells — later etaps flesh out the actual page templates.
   All values come directly from the design handoff (ClubChrome.jsx,
   ClubDashboard.jsx, HomeScreen.jsx).
*/

/* TopBar: horizontal bar at the top of the club admin layout (desktop) */
.dink-topbar {
    height: 56px;
    background: var(--c-bg-card);
    border-bottom: 1px solid #EAEEF2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}
.dink-topbar-bell {
    border-radius: 6px;
    color: var(--c-text-2);
}
.dink-topbar-bell:hover,
.dink-topbar-bell:focus { color: var(--c-text); background: rgba(0,0,0,.04); }
.dink-topbar-bell__dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-primary);
    border: 2px solid var(--c-bg-card);
}
/* Mobile: dark topbar — matches the player nav dark chrome so the chrome is uniform
   regardless of which context the user is in.                                       */
@media (max-width: 991.98px) {
    .dink-topbar {
        background: #212529;
        border-bottom-color: #343a40;
    }
    .dink-topbar-brand  { color: #fff; }
    .dink-topbar-context {
        color: rgba(255,255,255,.85) !important;
        background: rgba(255,255,255,.10) !important;
        border: 1px solid transparent !important;
    }
    .dink-topbar-hamburger {
        color: rgba(255,255,255,.85);
        background: transparent;
        border: none;
        border-radius: 6px;
    }
    .dink-topbar-hamburger:hover,
    .dink-topbar-hamburger:focus { color: #fff; background: rgba(255,255,255,.08); }
    .dink-topbar-bell { color: rgba(255,255,255,.85); }
    .dink-topbar-bell:hover,
    .dink-topbar-bell:focus { color: #fff; background: rgba(255,255,255,.08); }
    .dink-topbar-bell__dot { border-color: #212529; }
}
/* Desktop: topbar-brand uses primary colour */
@media (min-width: 992px) {
    .dink-topbar-brand  { color: var(--c-primary); }
    .dink-topbar-context {
        background: #F6F8FA;
        border: 1px solid var(--c-border);
        color: var(--c-text);
    }
}

/* Ogólne collapsed section inside the sidebar and mobile offcanvas */
.dink-sidebar-general { width: 100%; }
.dink-sidebar-general summary { list-style: none; cursor: pointer; user-select: none; }
.dink-sidebar-general summary::-webkit-details-marker { display: none; }
.dink-sidebar-general__chevron { flex-shrink: 0; transition: transform .18s; }
.dink-sidebar-general[open] .dink-sidebar-general__chevron { transform: rotate(180deg); }

/* SideBar: vertical navigation in the club admin layout (desktop) */
.dink-sidebar {
    width: 232px;
    background: var(--c-bg-card);
    border-right: 1px solid #EAEEF2;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
    overflow-y: auto;
    position: sticky;
    top: 56px; /* height of .dink-topbar */
    height: calc(100vh - 56px);
    align-self: flex-start;
}
.dink-sidebar__item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    background: transparent;
    color: var(--c-text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: background 0.12s, color 0.12s;
}
.dink-sidebar__item:hover {
    background: var(--c-bg-hover);
    color: var(--c-text);
    text-decoration: none;
}
.dink-sidebar__item.active,
.dink-sidebar__item[aria-current="page"] {
    background: var(--c-primary-tint);
    color: var(--c-primary);
    font-weight: 700;
}
.dink-sidebar__divider {
    height: 1px;
    background: #EEF2F6;
    margin: 8px 8px;
}

/* Content padding — single source of truth for the club panel (content-area carries none).
   Mobile (offcanvas layout, <992px) reclaims ~120px of width vs. the old double padding. */
.club-content {
    padding: 28px 32px 48px;
}
@media (max-width: 991.98px) {
    .club-content {
        padding: 16px 14px 48px;
    }
}

/* AppBar: sticky top bar for public/mobile pages (replaces Bootstrap navbar on those pages) */
.dink-appbar {
    height: 56px;
    background: var(--c-bg-card);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

/* Chip / badge pill — type label on session cards and elsewhere */
.dink-chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-caption);
    font-weight: 700;
    letter-spacing: 0.1px;
    padding: 3px 9px;
    border-radius: 999px;
    flex-shrink: 0;
    line-height: 1.4;
}
.dink-chip--klub {
    background: var(--c-primary-tint);
    color: var(--c-primary);
}
.dink-chip--open {
    background: var(--c-success-bg);
    color: var(--c-success);
}
.dink-chip--accent {
    background: var(--c-accent-tint);
    color: var(--c-accent-ink);
}
.dink-chip--muted {
    background: #F1F4F7;
    color: var(--c-text-sub);
}

/* SessionCard: card for a single session in public/player-facing lists */
.dink-session-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 13px 14px;
    box-shadow: 0 1px 2px rgba(12, 32, 52, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.dink-session-card:hover {
    border-color: var(--c-border-2);
    box-shadow: 0 3px 8px rgba(12, 32, 52, 0.08);
}
.dink-session-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid #F0F3F6;
}

/* Small ghost icon button for "copy link" on a session card */
.dink-card-copy {
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text-2);
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}
.dink-card-copy:hover {
    border-color: var(--c-border-2);
    color: var(--c-text);
}
.dink-card-copy.is-copied {
    color: var(--c-success);
    border-color: var(--c-success);
}

/* StatCard: metric tile for the club admin dashboard */
.dink-stat-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 20px 20px 18px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dink-stat-card--accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--c-accent);
}
.dink-stat-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--c-primary-tint);
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.dink-stat-card__value {
    font-size: var(--fs-stat);
    font-weight: 800;
    color: var(--c-text);
    letter-spacing: -1px;
    line-height: 1;
}
.dink-stat-card__label {
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    font-weight: 600;
    margin-top: 6px;
}
.dink-stat-card__delta {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-top: 8px;
}
/* Compact stat tiles on mobile: 3 numbers (e.g. 6/23/7) don't need a 170px-tall
   card each (club-mobile-plan Etap 5). Desktop (>=768px) unchanged. */
@media (max-width: 767.98px) {
    .dink-stat-card { padding: 12px 12px 10px; border-radius: 12px; }
    .dink-stat-card__icon {
        width: 26px; height: 26px; border-radius: 8px; margin-bottom: 6px;
    }
    .dink-stat-card__icon svg { width: 13px; height: 13px; }
    .dink-stat-card__value { font-size: 22px; letter-spacing: -0.5px; }
    .dink-stat-card__label { font-size: 11.5px; margin-top: 2px; }
}
.dink-group-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.dink-group-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 15px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s;
    text-decoration: none;
    height: 100%;
}
.dink-group-card:hover {
    border-color: #CDD9E5;
}
/* line-through, not opacity — opacity fades the group name below WCAG AA. */
.schedule-mobile-card.is-cancelled { text-decoration: line-through; }

/* ═══════════════════════════════════════════════════════════════
   Etap 3 — Zawodnicy table, RowMenu, PlayerDrawer
   ═══════════════════════════════════════════════════════════════ */

/* ─── Athletes table card ───────────────────────────────────── */
.dink-table-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    overflow: visible;
}
.dink-table-card table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.dink-table-card thead th {
    padding: 14px 16px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.5px;
    color: var(--c-text-muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--c-border);
}
.dink-table-card tbody tr { border-top: 1px solid #F0F3F6; }
.dink-table-card tbody td { padding: 12px 16px; vertical-align: middle; }
.dink-table-card tbody tr:first-child { border-top: none; }

/* ─── Avatar initials ───────────────────────────────────────── */
.dink-av {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--c-primary-tint);
    color: var(--c-primary);
    font-size: 12.5px; font-weight: 750;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    user-select: none;
    letter-spacing: 0;
}
.dink-av--lg { width: 46px; height: 46px; font-size: 15px; }

/* ─── Group chip (color-coded by data-idx) ──────────────────── */
.dink-group-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700;
    padding: 4px 11px; border-radius: 999px;
    max-width: 100%; box-sizing: border-box;
}
.dink-group-chip__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dink-group-chip__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dink-group-chip[data-idx="0"]  { background: #EAF1F9; color: #0C447C; }
.dink-group-chip[data-idx="0"]  .dink-group-chip__dot { background: #0C447C; }
.dink-group-chip[data-idx="1"]  { background: #E7F4EC; color: #157A3F; }
.dink-group-chip[data-idx="1"]  .dink-group-chip__dot { background: #157A3F; }
.dink-group-chip[data-idx="2"]  { background: #FBEFD9; color: #8A5A0C; }
.dink-group-chip[data-idx="2"]  .dink-group-chip__dot { background: #EF9F27; }
.dink-group-chip[data-idx="3"]  { background: #F1F4F7; color: #5B6B7B; }
.dink-group-chip[data-idx="3"]  .dink-group-chip__dot { background: #5B6B7B; }
.dink-group-chip[data-idx="-1"] { background: #F1F4F7; color: #5E6A76; }
.dink-group-chip[data-idx="-1"] .dink-group-chip__dot { background: #6A7785; }

/* ─── Składka badge ─────────────────────────────────────────── */
.dink-sk {
    font-size: 12px; font-weight: 700;
    padding: 3px 10px; border-radius: 999px;
    display: inline-block; white-space: nowrap;
}
.dink-sk--ok   { background: #E7F4EC; color: #157A3F; }
.dink-sk--due  { background: #FBEFD9; color: #8A5A0C; }
.dink-sk--none { background: #F1F4F7; color: #5E6A76; }
.dink-sk--na   { background: transparent; color: #6D7A86; padding-left: 0; padding-right: 0; }

/* ─── People row (responsive list: athletes, parents) ──────────────────
   ONE DOM, reflows via CSS grid (Etap 1 club-mobile-plan). Mobile (<992px):
   name on line 1, meta chips on line 2, RowMenu spanning both on the right.
   Desktop (≥992px): the __meta wrapper becomes display:contents so its
   children land in their own table-like columns (named grid areas per row
   variant). Replaces .dink-table-card + table-layout:fixed which clipped
   names to "Vi…" on mobile. */
.dink-people-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    overflow: visible;
}
/* "albo" divider between two input modes in a form */
.dink-or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--c-text-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.dink-or-divider::before,
.dink-or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--c-border);
}

/* Segmented control (e.g. Dzieci / Dorośli on the athletes page) */
.dink-segmented {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--c-surface-2, #EEF2F5);
    border-radius: 12px;
}
.dink-segmented__item {
    padding: 7px 18px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text-2);
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}
.dink-segmented__item.is-active {
    background: #fff;
    color: var(--c-text);
    box-shadow: 0 1px 3px rgba(16, 38, 56, 0.12);
}

.dink-people-head { display: none; }
.dink-people-row {
    display: grid;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
    padding: 12px 14px;
    border-top: 1px solid #F0F3F6;
    /* mobile default (parents): name | menu  /  meta | menu */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name menu"
        "meta menu";
}
/* mobile athletes: name + group chip share line 1, guardian+fee wrap on line 2.
   Group column is content-sized (`auto`), not a fixed fr-share, so a long group
   name ("Grupa Średniozaawansowani") gets the room it needs instead of being
   squeezed to "Grupa Śre…" by a fr-based split (club-mobile-plan Etap 5 UX pass,
   same fix as the adults row below). */
.dink-people-row--athletes {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "name group menu"
        "meta meta  menu";
}
.dink-people-row--athletes .dink-people-row__group { max-width: 140px; }
/* mobile adults: no guardian column exists (adults have no guardian), so the
   group chip never needs as much room as it does for juniors — give the name
   most of the line instead of clipping to "E2E Dorosly C…" over empty space
   (club-mobile-plan Etap 5). `auto` (not a fixed-px cap) so the group column
   shrinks to its own content ("Bez grupy" ~65px) instead of always claiming a
   fixed width regardless of content — a fixed max in minmax() still gets grown
   to that size in the "maximize non-flexible tracks" step even when content is
   shorter, which was the same dead-space bug just at a smaller number. The
   name's 1fr then absorbs everything the group column doesn't actually need.
   A max-width on the group CELL (not the track) still bounds a genuinely long
   custom group name so it ellipsizes instead of stealing the whole row. */
.dink-people-row--adults {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "name group menu"
        "meta meta  menu";
}
.dink-people-row--adults .dink-people-row__group { max-width: 100px; }
.dink-people-card .dink-people-row:first-child { border-top: none; }
.dink-people-row__name { grid-area: name; min-width: 0; display: flex; align-items: center; gap: 10px; }
.dink-people-row__name-text { min-width: 0; }
.dink-people-row__title {
    font-size: 14.5px; font-weight: 700; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dink-people-row__sub {
    font-size: 12px; color: var(--c-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dink-people-row__group { grid-area: group; min-width: 0; }
.dink-people-row__meta {
    grid-area: meta; min-width: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
}
.dink-people-row__guardian,
.dink-people-row__phone {
    font-size: 13px; color: var(--c-text-2); min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dink-people-row__children { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.dink-people-row__menu { grid-area: menu; justify-self: end; }

@media (min-width: 992px) {
    .dink-people-head {
        display: grid;
        align-items: center;
        column-gap: 12px;
        padding: 13px 14px 10px;
        border-bottom: 1px solid var(--c-border);
        font-size: 11px; font-weight: 750; letter-spacing: 0.5px;
        color: var(--c-text-muted); text-transform: uppercase;
    }
    /* the meta wrapper dissolves so its children become real columns */
    .dink-people-row__meta { display: contents; }
    .dink-people-row--athletes,
    .dink-people-head--athletes {
        grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.5fr) minmax(0, 1.6fr) 96px 44px;
        grid-template-areas: "name group guardian fee menu";
    }
    .dink-people-row--adults,
    .dink-people-head--adults {
        grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.8fr) 120px 44px;
        grid-template-areas: "name group fee menu";
    }
    /* desktop group column is a real fr-based table column — cancel the mobile-only cap */
    .dink-people-row--adults .dink-people-row__group { max-width: none; }
    .dink-people-row--athletes .dink-people-row__group { max-width: none; }
    .dink-people-row--parents,
    .dink-people-head--parents {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 2.6fr) 44px;
        grid-template-areas: "name phone children menu";
    }
    .dink-people-row__guardian { grid-area: guardian; }
    .dink-people-row__fee      { grid-area: fee; }
    .dink-people-row__phone    { grid-area: phone; }
    .dink-people-row__children { grid-area: children; }
}

/* dink-table-card forces overflow:visible (so row-menu dropdowns escape); that
   defeats a co-class .table-responsive. .is-scroll re-enables horizontal scroll
   for genuinely tabular admin tables that must not page-overflow on mobile. */
.dink-table-card.is-scroll { overflow-x: auto; }

/* ─── Invite cards (Etap 1: replaces the 8-col min-width invite table) ─── */
.dink-invite-list { display: flex; flex-direction: column; gap: 10px; }
.dink-invite-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.dink-invite-card__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
}
.dink-invite-card__roles { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.dink-invite-card__meta {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    font-size: 12.5px; color: var(--c-text-2);
}
.dink-invite-card__meta b { color: var(--c-text); font-weight: 700; }
.dink-invite-card__link { display: flex; align-items: center; gap: 8px; }
.dink-invite-card__linkgroup { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.dink-invite-card__code {
    flex: 1; min-width: 0; font-size: 12px; color: var(--c-text-muted);
    background: #F6F8FA; border: 1px solid var(--c-border); border-radius: 8px;
    padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dink-invite-head { display: none; }

/* Desktop (>=992px): cards read as tight table rows (Rola | Dla | Użycia |
   Wygasa | Twórca | Link | Unieważnij) instead of ~135px cards with a lot of
   air — generating/tidying links is desk work (club-mobile-plan Etap 5).
   Same reflow idiom as .dink-people-row: EACH card is its own CSS grid (not
   one grid for the whole list — a card without a link/revoke pair, e.g. a
   revoked invite, would otherwise shift every following card's columns via
   auto-placement); the two inner wrappers (__meta, __link) dissolve via
   display:contents so their children land in that card's own named columns.
   Mobile (<992px) keeps the Etap 1 card layout untouched. */
@media (min-width: 992px) {
    .dink-invite-head,
    .dink-invite-card {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.5fr) 84px 96px 110px minmax(0, 1.6fr) 40px;
        column-gap: 14px;
    }
    .dink-invite-head {
        display: grid;
        align-items: center;
        padding: 0 16px 8px;
        font-size: 11px; font-weight: 750; letter-spacing: 0.5px;
        color: var(--c-text-muted); text-transform: uppercase;
        border-bottom: 1px solid var(--c-border);
        margin-bottom: 4px;
    }
    .dink-invite-list { gap: 0; }
    .dink-invite-card {
        display: grid;
        align-items: center;
        grid-template-areas: "role dla uzycia wygasa tworca link revoke";
        border-radius: 0;
        border-left: 0; border-right: 0; border-top: 0;
        padding: 10px 16px;
        gap: 0 14px;
    }
    .dink-invite-list .dink-invite-card:last-child { border-bottom: 0; }
    .dink-invite-card__top { grid-area: role; }
    .dink-invite-card__meta { display: contents; }
    .dink-invite-card__dla     { grid-area: dla; }
    .dink-invite-card__uzycia  { grid-area: uzycia; }
    .dink-invite-card__wygasa  { grid-area: wygasa; }
    .dink-invite-card__tworca  { grid-area: tworca; }
    .dink-invite-card__link    { display: contents; }
    .dink-invite-card__linkgroup { grid-area: link; }
    .dink-invite-card__revoke    { grid-area: revoke; margin: 0; }
    .dink-invite-card__inactive  { grid-area: link; }
}

/* ─── Row menu ──────────────────────────────────────────────── */
.dink-row-menu { position: relative; display: inline-flex; }
.dink-row-menu__trigger {
    width: 34px; height: 34px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, border-color 0.12s;
}
.dink-row-menu__trigger.is-open,
.dink-row-menu__trigger:hover { background: #F4F7FA; border-color: #CDD9E5; }
.dink-row-menu__dropdown {
    display: none;
    position: absolute; top: 38px; right: 0;
    width: 210px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--c-border);
    box-shadow: 0 12px 36px rgba(9,22,38,0.16);
    padding: 6px;
    z-index: 60;
}
.dink-row-menu__dropdown.is-open { display: block; animation: popIn 0.14s ease; }
.dink-row-menu__item {
    display: flex; align-items: center; gap: 9px;
    width: 100%; text-align: left;
    padding: 9px 13px;
    border: none; background: transparent;
    cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--c-text);
    border-radius: 8px;
    transition: background 0.1s;
}
.dink-row-menu__item:hover { background: #F4F7FA; }
.dink-row-menu__item--danger { color: #C13333; }
.dink-row-menu__item--danger:hover { background: #FDECEC; }
.dink-row-menu__sep { height: 1px; background: #EEF2F6; margin: 5px 8px; }
/* Mobile: the top-right dropdown is out of thumb reach → render row actions as a
   bottom sheet. Same DOM/actions, only the container changes via CSS. The 100vmax
   box-shadow spread doubles as a dim backdrop (no extra element); tapping it lands
   outside .dink-row-menu, which the existing click handler closes. */
@media (max-width: 991.98px) {
    .dink-row-menu__dropdown {
        position: fixed;
        left: 0; right: 0; bottom: 0; top: auto;
        width: 100%;
        border-radius: 18px 18px 0 0;
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -10px 30px rgba(9,22,38,0.18), 0 0 0 100vmax rgba(9,22,38,0.45);
        z-index: 1040;
        animation: none;
    }
    .dink-row-menu__dropdown.is-open { animation: dinkSheetUp 0.2s ease; }
    .dink-row-menu__item { padding: 14px 16px; font-size: 15px; }
    .dink-row-menu__sep { margin: 6px 12px; }
}
@keyframes dinkSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ─── Player Drawer ─────────────────────────────────────────── */
.dink-drawer-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(9,22,38,0.40);
    z-index: 280;
}
.dink-drawer-backdrop.is-open { display: block; animation: fadeIn 0.18s ease; }
.dink-drawer-panel {
    display: none;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 420px; max-width: 92vw;
    background: #fff;
    box-shadow: -12px 0 40px rgba(9,22,38,0.18);
    flex-direction: column;
    z-index: 281;
}
.dink-drawer-panel.is-open { display: flex; animation: slideInRight 0.26s cubic-bezier(0.2,0.9,0.3,1.02); }
.dink-drawer-header {
    padding: 20px 22px;
    border-bottom: 1px solid #EEF2F6;
    display: flex; align-items: center; gap: 13px;
    flex-shrink: 0;
}
.dink-drawer-close {
    width: 34px; height: 34px;
    border-radius: 9px; border: 1px solid var(--c-border);
    background: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-left: auto;
    font-size: 18px; color: var(--c-text-2); line-height: 1;
}
.dink-drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.dink-drawer-footer {
    padding: 14px 22px;
    border-top: 1px solid #EEF2F6;
    display: flex; gap: 10px;
    flex-shrink: 0;
}
.dink-drawer-section { margin-bottom: 22px; }
.dink-drawer-section-title {
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.5px; color: #5E6A76;
    text-transform: uppercase; margin-bottom: 11px;
}
.dink-drawer-info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-top: 1px solid #F0F3F6;
    font-size: 13.5px;
}
.dink-drawer-info-row:first-child { border-top: none; }
.dink-drawer-info-row__label { color: #5E6A76; }
.dink-drawer-info-row__value { font-weight: 650; color: var(--c-text); text-align: right; }

/* ─── Animations ─────────────────────────────────────────────── */
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes popIn {
    from { opacity: 0; transform: scale(0.94) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── Search field with icon ─────────────────────────────────── */
.dink-search-wrap { position: relative; }
.dink-search-wrap .dink-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    display: flex; pointer-events: none;
}
.dink-search-wrap input {
    width: 100%; box-sizing: border-box;
    padding: 10px 13px 10px 36px;
    font-size: 14px;
    border: 1.5px solid #DCE3EA; border-radius: 10px;
    outline: none; font-family: inherit; color: var(--c-text);
    background: #fff;
    transition: border-color 0.15s;
}
.dink-search-wrap input:focus { border-color: var(--c-primary); }
/* Sticky filter on long people lists (mobile only) — stays reachable while scrolling,
   parked right under the club topbar (56px). Desktop keeps it inline. */
@media (max-width: 991.98px) {
    .dink-search-wrap--sticky {
        position: sticky;
        top: 56px; /* height of .dink-topbar */
        z-index: 20;
        max-width: none !important;
        margin: -4px -14px 16px; /* bleed to .club-content edges so the backdrop fills the row */
        padding: 10px 14px;
        background: var(--c-bg-content);
        border-bottom: 1px solid var(--c-border);
    }
}

/* ─── Page header (all club admin pages) ────────────────────── */
.dink-page-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 28px;
}
.dink-page-title {
    margin: 0; font-size: 26px; font-weight: 800;
    color: var(--c-text); letter-spacing: -0.5px; line-height: 1.15;
}
.dink-page-subtitle {
    font-size: 14px; color: var(--c-text-2); margin-top: 4px;
}
.dink-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ─── Token-based flash messages ────────────────────────────── */
.dink-flash {
    border-radius: 12px; padding: 14px 18px; margin-bottom: 20px;
    font-size: 14px; position: relative;
}
.dink-flash--ok  { background: #E7F4EC; border: 1px solid #A8DDB8; color: #157A3F; }
.dink-flash--err { background: #FDF1F1; border: 1px solid #F0B0B0; color: #C13333; }
.dink-flash--warn { background: #FBEFD9; border: 1px solid #F0CE87; color: #8A5A0C; }
.dink-flash--info { background: #EAF1F9; border: 1px solid #B6CEE6; color: #0C447C; }
.dink-flash__close {
    position: absolute; top: 10px; right: 12px;
    background: none; border: none; cursor: pointer;
    font-size: 16px; color: inherit; opacity: 0.6; line-height: 1;
}
.dink-flash__close:hover { opacity: 1; }

/* Share-moment banner — the confirmation screen right after publishing a session
   (Etap 5). Bigger and warmer than a plain flash: this is the payoff moment. */
.dink-share-banner {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px 18px;
}
.dink-share-banner__row { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.dink-share-banner__row i { font-size: 19px; flex-shrink: 0; }
.dink-share-banner__copy {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px; border-radius: 11px; border: none; cursor: pointer;
    background: var(--c-accent); color: var(--c-accent-ink);
    font-size: 14.5px; font-weight: 750; letter-spacing: -0.1px; font-family: inherit;
}
.dink-share-banner__copy:hover { background: var(--c-accent-deep); color: #fff; }
.dink-share-banner__copy.is-copied { background: var(--c-success); color: #fff; }
.dink-share-banner__copy i { font-size: 17px; }

/* ─── Month summary (fees page) ─────────────────────────────── */
.dink-fee-summary {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 18px;
}
.dink-fee-summary__item {
    flex: 1 1 140px;
    display: flex; flex-direction: column; gap: 2px;
    padding: 11px 16px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 12px;
}
.dink-fee-summary__item--ok  { border-left: 3px solid #157A3F; }
.dink-fee-summary__item--due { border-left: 3px solid #EF9F27; }
.dink-fee-summary__label {
    font-size: 11px; font-weight: 750; letter-spacing: 0.4px;
    text-transform: uppercase; color: var(--c-text-muted);
}
.dink-fee-summary__value {
    font-size: 20px; font-weight: 800; color: var(--c-text);
    display: flex; align-items: baseline; gap: 8px;
}
.dink-fee-summary__money {
    font-size: 14px; font-weight: 700; color: var(--c-text-2);
}
.dink-fee-summary__item--due .dink-fee-summary__money { color: #8A5A0C; }

/* ─── Status chip (invites) ──────────────────────────────────── */
.dink-status-chip {
    font-size: 12px; font-weight: 700;
    padding: 3px 10px; border-radius: 999px;
    display: inline-block; white-space: nowrap;
}
.dink-status-chip--ok      { background: #E7F4EC; color: #157A3F; }
.dink-status-chip--warn    { background: #FBEFD9; color: #8A5A0C; }
.dink-status-chip--danger  { background: #FDF1F1; color: #C13333; }
.dink-status-chip--muted   { background: #F1F4F7; color: #5E6A76; }
.dink-status-chip--info    { background: #EAF1F9; color: #0C447C; }

/* ─── Generator proposal row tints (schedule-generate) ───────── */
.dink-table-card tbody tr.is-conflict { background: #FCF4E4; }
.dink-table-card tbody tr.is-holiday  { background: #EEF4FA; }

/* ─── Schedule action cards (3-action strip on harmonogram page) ── */
.dink-action-card {
    display: flex; align-items: flex-start; gap: 12px;
    width: 100%; background: #fff;
    border: 1.5px solid var(--c-border); border-radius: 14px;
    padding: 14px 16px; cursor: pointer;
    text-decoration: none; color: var(--c-text); text-align: left;
    transition: border-color .12s, background .12s;
    height: 100%;
}
.dink-action-card:hover:not(:disabled):not(.disabled) {
    border-color: var(--c-primary); background: var(--c-primary-tint);
    color: var(--c-text); text-decoration: none;
}
.dink-action-card:disabled,
.dink-action-card.disabled { opacity: 0.45; pointer-events: none; }
.dink-action-card__icon {
    font-size: 22px; color: var(--c-primary);
    flex-shrink: 0; line-height: 1; margin-top: 1px;
}
.dink-action-card__title { font-size: 14px; font-weight: 700; line-height: 1.3; }
.dink-action-card__desc  { font-size: 12px; color: var(--c-text-muted); margin-top: 3px; line-height: 1.35; }
/* Compact icon+label row on mobile — the 3 full descriptions cost ~90px each and
   pushed the week's first session ~1.5 screens down (club-mobile-plan Etap 5).
   Description stays for screen readers (visually-hidden, not removed). Desktop
   (>=768px) keeps the full icon+title+desc card, unchanged. */
@media (max-width: 767.98px) {
    .dink-action-card {
        flex-direction: column; align-items: center; text-align: center;
        gap: 4px; padding: 10px 6px;
    }
    .dink-action-card__icon { margin-top: 0; font-size: 19px; }
    .dink-action-card__title { font-size: 11.5px; line-height: 1.25; }
    .dink-action-card__desc {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
}

/* ─── Session row (attendance) ───────────────────────────────── */
.dink-session-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 18px;
    background: #fff; border: 1px solid var(--c-border);
    border-radius: 12px; margin-bottom: 8px;
    text-decoration: none; color: inherit;
    border-left: 4px solid var(--c-primary);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.dink-session-row:hover { box-shadow: 0 4px 16px rgba(9,22,38,0.09); color: inherit; text-decoration: none; }
/* Cancelled rows dim via a muted background, NOT opacity — opacity fades the inner
   status chips/badges below WCAG AA. The red left-border + badge carry the signal. */
.dink-session-row.is-cancelled { border-left-color: #C13333; background: #FAFBFC; }
.dink-session-row.is-completed { border-left-color: #6A7785; }
/* Desktop: 2 cards per row instead of one full-width row with a mostly-empty
   middle (club-mobile-plan Etap 5). Mobile (<992px) stays a single column. */
@media (min-width: 992px) {
    .dink-session-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .dink-session-grid .dink-session-row { margin-bottom: 0; }
}

/* ─── Roster row (mark attendance — thumb-friendly) ──────────── */
.dink-att-list { display: flex; flex-direction: column; }
.dink-att-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 4px;
    border-top: 1px solid #F0F3F6;
}
.dink-att-row:first-child { border-top: none; }
.dink-att-row__main { min-width: 0; }
.dink-att-row__name {
    font-size: 15px; font-weight: 700; color: var(--c-text);
    display: flex; align-items: center; gap: 6px;
}
.dink-att-row__meta { margin-top: 4px; }
.dink-att-actions { display: flex; gap: 8px; flex-shrink: 0; }
.dink-att-btn {
    width: 46px; height: 46px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; border: 1.5px solid var(--c-border);
    background: #fff; color: #5E6A76; font-size: 20px;
    cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.dink-att-btn:hover { border-color: #CDD9E5; }
.dink-att-btn--present.is-on { background: #157A3F; border-color: #157A3F; color: #fff; }
.dink-att-btn--absent.is-on  { background: #C13333; border-color: #C13333; color: #fff; }
.dink-att-form { display: inline-flex; margin: 0; }

/* ─── Section label (attendance) ─────────────────────────────── */
.dink-section-label {
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.5px; color: #5E6A76;
    text-transform: uppercase;
    margin: 0 0 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--c-border);
}

/* ─── Form panel (parents phone search) ─────────────────────── */
.dink-form-panel {
    background: #fff; border: 1px solid var(--c-border);
    border-radius: 16px; padding: 20px 22px; margin-bottom: 20px;
}
.dink-form-panel__title {
    font-size: 13px; font-weight: 750; color: var(--c-text-2);
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 14px;
}

/* ─── Roster list (slot-detail: attending/declined/invited/group members) ─── */
.dink-roster-list { list-style: none; margin: 0; padding: 0; }
.dink-roster-list li {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 9px 0;
}
.dink-roster-list li + li { border-top: 1px solid var(--c-border); }
.dink-roster-name { font-size: 14px; font-weight: 600; color: var(--c-text); }
.dink-roster-empty { font-size: 13.5px; color: var(--c-text-2); padding: 6px 0; display: block; }

/* ─── Profile settings sections ─────────────────────────────────
   Groups the many profile panels under a few labelled headings so the
   page reads as a handful of clear sections instead of one long wall of
   equal cards. Single column on mobile; two columns from lg up so the
   page isn't a narrow strip on desktop. */
.profile-section { margin-bottom: 28px; }
.profile-section > .dink-section-label { margin-bottom: 14px; }
/* Collapsible section header — looks like .dink-section-label but is a real
   <button> (a11y: aria-expanded/-controls). Rare sections start collapsed. */
.profile-section__toggle {
    display: flex; align-items: center; gap: 8px; justify-content: space-between;
    width: 100%; background: none; border: 0; cursor: pointer;
    font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: #5E6A76;
    text-transform: uppercase;
    margin: 0 0 14px; padding: 0 0 8px;
    border-bottom: 1px solid var(--c-border);
}
.profile-section__toggle > i { transition: transform .15s ease; font-size: 13px; }
.profile-section__toggle[aria-expanded="false"] > i { transform: rotate(-90deg); }
.profile-grid { display: grid; grid-template-columns: 1fr; column-gap: 18px; }
.profile-grid > * { margin-bottom: 18px; }
@media (min-width: 992px) {
    .profile-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ─── Setup checklist ("3 kroki" / dashboard onboarding, Etap 2) ───────────── */
.dink-setup {
    background: #fff; border: 1px solid var(--c-border);
    border-radius: 16px; padding: 18px 18px 8px; margin-bottom: 22px;
    position: relative;
}
.dink-setup__title {
    font-size: 16px; font-weight: 800; color: var(--c-text);
    letter-spacing: -0.3px; margin: 0;
}
.dink-setup__lead {
    font-size: 13px; color: var(--c-text-2); margin: 4px 0 14px;
}
.dink-setup__dismiss {
    position: absolute; top: 14px; right: 14px;
}
.dink-setup__steps { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
/* Collapsed progress bar shown once >=1 setup step is done (club-mobile-plan Etap 5) —
   replaces the full checklist so the card stops burying stats/groups on mobile. */
.dink-setup__progress-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; border: none; background: none; padding: 6px 34px 12px 2px;
    text-align: left; cursor: pointer;
}
.dink-setup__progress-text { font-size: 13.5px; color: var(--c-text-2); }
.dink-setup__progress-text strong { color: var(--c-text); font-weight: 800; }
.dink-setup__progress-chevron { color: var(--c-text-muted); font-size: 15px; transition: transform .15s; flex-shrink: 0; }
.dink-setup__progress-toggle[aria-expanded="true"] .dink-setup__progress-chevron { transform: rotate(180deg); }
.dink-setup-step {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 13px; border-radius: 12px;
    border: 1px solid var(--c-border);
    background: #fff; text-decoration: none;
    transition: background .12s, border-color .12s;
}
a.dink-setup-step:hover { background: var(--c-primary-tint); border-color: var(--c-border-2); }
.dink-setup-step.is-done { background: var(--c-bg-content); border-color: var(--c-border); }
.dink-setup-step__mark {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    background: var(--c-primary-tint); color: var(--c-primary);
}
.dink-setup-step.is-done .dink-setup-step__mark {
    background: var(--c-success-bg); color: var(--c-success);
}
.dink-setup-step__body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.dink-setup-step__label { font-size: 14px; font-weight: 700; color: var(--c-text); }
.dink-setup-step.is-done .dink-setup-step__label { color: var(--c-text-2); font-weight: 600; }
.dink-setup-step__desc { font-size: 12.5px; color: var(--c-text-muted); margin-top: 1px; }
.dink-setup-step__arrow { flex-shrink: 0; color: var(--c-text-muted); font-size: 15px; }

/* ─── Group card (groups page) ───────────────────────────────── */
/* auto-fit (not auto-fill): auto-fill reserves empty phantom tracks whenever a
   row isn't full, so a wide desktop with e.g. 3 groups still allocated a 4th
   220px column that ate the free space — cards stayed pinned near the 220px
   minimum and long names ellipsized ("Grp Przenosiny …") next to a visibly
   empty page (club-mobile-plan Etap 5). auto-fit collapses unused tracks to 0
   and lets 1fr redistribute their width to the real cards instead. */
.dink-group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   Etap 5 — Public Home (light theme)
   ═══════════════════════════════════════════════════════════════════════ */

/* AppBar modifier: escapes Bootstrap .container to reach full viewport width */
.dink-appbar--public {
    margin-top: -1.5rem;
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: 1.5rem;
    padding-left: 14px;
    padding-right: 14px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
@media (max-width: 575.98px) {
    .dink-appbar--public { margin-top: -1rem; }
}
@media (min-width: 576px) {
    /* Full-bleed to the viewport edge, but compensated by half the scrollbar on each side so the
       total width is 100vw - scrollbar = the scrollable content width (no horizontal overflow on a
       classic scrollbar). The mirrored -/+ on padding keeps the inner content aligned with the
       centered container regardless of scrollbar width. --scrollbar-width is 0 without a scrollbar,
       so this reduces to the original bleed. */
    .dink-appbar--public {
        margin-left: calc(50% - 50vw + var(--scrollbar-width) / 2);
        margin-right: calc(50% - 50vw + var(--scrollbar-width) / 2);
        padding-left: max(1rem, calc(50vw - 50% - var(--scrollbar-width) / 2 + 14px));
        padding-right: max(1rem, calc(50vw - 50% - var(--scrollbar-width) / 2 + 14px));
    }
}

/* AppBar CTA (amber "Zaproś na grę") */
.dink-appbar-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 10px;
    border: none;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(186, 117, 23, 0.3);
    transition: background 0.15s;
}
.dink-appbar-cta-btn:hover { background: var(--c-accent-deep); color: var(--c-accent-ink); text-decoration: none; }

/* AppBar login link */
.dink-appbar-login-btn {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1.5px solid var(--c-border-2);
    background: var(--c-bg-card);
    color: var(--c-text);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.dink-appbar-login-btn:hover { background: var(--c-bg-app); color: var(--c-text); text-decoration: none; }

/* Context subtitle + GPS row below AppBar */
.dink-context-line {
    font-size: 13px;
    color: var(--c-text-2);
    line-height: 1.4;
    margin-bottom: 14px;
}
.dink-context-line p { margin-bottom: 9px; }

/* GPS "near me" button */
.dink-locate-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 10px;
    border: 1.5px solid var(--c-border-2);
    background: var(--c-bg-card);
    color: var(--c-primary);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    transition: background 0.15s;
}
.dink-locate-btn:hover { background: var(--c-primary-tint); }
.dink-locate-btn:disabled { opacity: 0.6; cursor: default; }

/* Map toggle button */
.dink-map-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 10px;
    border: 1.5px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-primary);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.dink-map-toggle-btn:hover { background: var(--c-bg-app); border-color: var(--c-border-2); }

/* AppBar tagline (desktop: subtitle next to brand) */
.dink-appbar-tagline {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--c-text-2);
    white-space: nowrap;
    border-left: 1.5px solid var(--c-border-2);
    padding-left: 10px;
    margin-left: 2px;
}

/* AppBar info icon button (mobile: tappable ℹ️ with popover) */
.dink-appbar-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--c-border-2);
    font-size: 13px;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    opacity: 0.7;
}
.dink-appbar-info-btn:hover { color: var(--c-text-sub); opacity: 1; }

/* Map container — light theme override (replaces dark border from original rule) */
#public-home-map {
    border: 1px solid var(--c-border);
    border-radius: 12px;
    height: 220px;
}
@media (min-width: 992px) {
    .dink-map-wrapper--sticky { position: sticky; top: 70px; }
    #public-home-map { height: calc(100vh - 8rem) !important; border-radius: 14px; }
    /* Always show map on desktop regardless of collapse state */
    #ph-map-collapse { display: block !important; }
}

/* Day heading in event list */
.dink-day-label {
    font-size: 11.5px;
    font-weight: 750;
    letter-spacing: 0.6px;
    color: var(--c-text-muted);
    text-transform: uppercase;
    margin: 0 2px 9px;
}

/* "Do potwierdzenia" / "Nadchodzące" cards — light version */
.dink-home-mine-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--c-text);
}
.dink-home-mine-card > summary {
    list-style: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c-text-2);
    user-select: none;
}
.dink-home-mine-card > summary::-webkit-details-marker { display: none; }
.dink-home-mine-card .dink-home-mine-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--c-border);
    font-size: 13.5px;
}
.dink-home-mine-card .dink-home-mine-entry:last-child { border-bottom: none; }
.dink-home-mine-card .dink-home-mine-entry .entry-title { font-weight: 600; color: var(--c-text); }
.dink-home-mine-card .dink-home-mine-entry .entry-sub { font-size: 12.5px; color: var(--c-text-2); }

/* Push banner — light */
.ph-push-banner-light {
    background: var(--c-primary-tint);
    border: 1px solid var(--c-border-2);
    color: var(--c-primary);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13.5px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Etap 6 — "Zaproś na grę" form (mobile-first)
   ═══════════════════════════════════════════════════════════════════════ */

/* AppBar */
.dink-sf-appbar {
    position: sticky; top: 0; z-index: 30;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #EDF1F5;
    display: flex; align-items: center; gap: 4px;
    padding: 10px 8px 10px;
}
.dink-sf-appbar__back {
    width: 40px; height: 40px; border-radius: 10px;
    border: none; background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--c-primary);
    text-decoration: none;
}
.dink-sf-appbar__center {
    flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
}
.dink-sf-appbar__title {
    font-size: 17px; font-weight: 800; color: var(--c-text);
    letter-spacing: -0.3px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* Mode-dependent copy: both variants live in the DOM, the root class decides.
   (One form, no reload — session-form.js toggles .is-mode-open on #sf-root.) */
#sf-root:not(.is-mode-open) .dink-sf-open-only { display: none !important; }
#sf-root.is-mode-open .dink-sf-priv-only { display: none !important; }

/* Mode radio-cards ("Kto może dołączyć?", Punkt 2) — first field inside the form,
   title + inline description replace the old segmented switch + quiet subtitle. */
.dink-sf-modecards { display: flex; flex-direction: column; gap: 8px; }
.dink-sf-modecard {
    width: 100%; text-align: left; cursor: pointer; font-family: inherit;
    display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px;
    border-radius: 12px; background: #fff; border: 1.5px solid var(--c-border);
}
.dink-sf-modecard.is-active { background: var(--c-primary-tint); border-color: var(--c-primary); }
.dink-sf-modecard.is-disabled { opacity: 0.62; cursor: not-allowed; }
.dink-sf-modecard__radio {
    width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
    border: 2px solid #C7D2DD;
    display: flex; align-items: center; justify-content: center;
}
.dink-sf-modecard.is-active .dink-sf-modecard__radio { border-color: var(--c-primary); }
.dink-sf-modecard__dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--c-primary); display: none;
}
.dink-sf-modecard.is-active .dink-sf-modecard__dot { display: block; }
.dink-sf-modecard__body { flex: 1; min-width: 0; }
.dink-sf-modecard__title {
    display: flex; align-items: center; gap: 6px;
    font-size: 14.5px; font-weight: 750; color: var(--c-text); letter-spacing: -0.1px;
}
.dink-sf-modecard__desc {
    display: block; font-size: 12.5px; line-height: 1.4; color: var(--c-text-2); margin-top: 3px;
}
.dink-sf-modecard__note {
    display: flex; align-items: flex-start; gap: 6px; margin-top: 7px;
    padding: 7px 9px; border-radius: 9px;
    background: var(--c-primary-tint); color: var(--c-primary);
    font-size: 12px; line-height: 1.4; font-weight: 600;
}
.dink-sf-modecard__note--blocked { background: #FBF3E6; color: #8A5A13; }

/* Approval opt-in checkbox (open sessions, Point 8) */
.dink-sf-approval {
    display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px; margin: 0;
    border-radius: 12px; background: #fff; border: 1.5px solid var(--c-border); cursor: pointer;
}
.dink-sf-approval:has(.dink-sf-approval__input:checked) {
    background: var(--c-primary-tint); border-color: var(--c-primary);
}
.dink-sf-approval__input {
    width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; accent-color: var(--c-primary); cursor: pointer;
}
.dink-sf-approval__body { flex: 1; min-width: 0; }
.dink-sf-approval__title {
    display: block; font-size: 14.5px; font-weight: 750; color: var(--c-text); letter-spacing: -0.1px;
}
.dink-sf-approval__desc {
    display: block; font-size: 12.5px; line-height: 1.4; color: var(--c-text-2); margin-top: 3px;
}

/* Form container */
.dink-sf-form { padding: 0 16px; }

/* Section */
.dink-sf-section { margin-top: 22px; }
.dink-sf-section:first-of-type { margin-top: 0; }

/* Section label */
.dink-sf-label {
    font-size: 13px; font-weight: 750; color: var(--c-text);
    letter-spacing: -0.1px; margin-bottom: 7px;
    display: flex; align-items: baseline; gap: 6px;
}

/* Optional badge inside label */
.dink-sf-optional { font-size: 11.5px; color: #5E6A76; font-weight: 600; }

/* Place cards */
.dink-sf-place-list { display: flex; flex-direction: column; gap: 8px; }
.dink-sf-place-card {
    width: 100%; min-width: 0; text-align: left; cursor: pointer;
    display: flex; align-items: center; gap: 11px; padding: 9px 12px;
    border-radius: 11px; background: #fff;
    border: 1.5px solid var(--c-border);
    font-family: inherit;
}
.dink-sf-place-card.is-selected { background: var(--c-primary-tint); border-color: var(--c-primary); }
.dink-sf-place-card__radio {
    width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid #C7D2DD;
    display: flex; align-items: center; justify-content: center;
}
.dink-sf-place-card.is-selected .dink-sf-place-card__radio { border-color: var(--c-primary); }
.dink-sf-place-card__dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--c-primary); display: none;
}
.dink-sf-place-card.is-selected .dink-sf-place-card__dot { display: block; }
.dink-sf-place-card__body { flex: 1; min-width: 0; overflow: hidden; }
.dink-sf-place-card__line {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dink-sf-place-card__name { font-size: 14.5px; font-weight: 700; color: var(--c-text); }
.dink-sf-place-card__sub { font-size: 12.5px; color: var(--c-text-muted); }
.dink-sf-place-card__pin { flex-shrink: 0; }

/* Lista / Mapa toggle + map view (Punkt 3) */
.dink-sf-place-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 6px;
}
.dink-sf-place-head .dink-sf-label { margin-bottom: 0; }
.dink-sf-place-toggle { display: inline-flex; gap: 2px; padding: 2px;
    background: var(--c-surface-2, #f1f3f5); border-radius: 999px; }
.dink-sf-place-toggle__btn {
    display: inline-flex; align-items: center; gap: 4px;
    border: 0; background: transparent; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--c-text-2, #6b7280);
    padding: 5px 12px; border-radius: 999px; line-height: 1;
}
.dink-sf-place-toggle__btn.is-active {
    background: #fff; color: var(--c-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.dink-sf-venue-map {
    height: 300px; border-radius: 12px; overflow: hidden;
    border: 1.5px solid var(--c-border); z-index: 0;
}
.dink-sf-map-pick {
    margin-top: 6px; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--c-primary); color: #fff;
    font-size: 12.5px; font-weight: 600; padding: 6px 12px;
}

/* Venue search (expanded when "Inne" clicked) */
.dink-sf-venue-search { margin-top: 4px; }
.dink-sf-venue-results {
    background: #fff; border: 1.5px solid var(--c-border);
    border-radius: 11px; max-height: 200px; overflow-y: auto; margin-top: 4px;
}
.dink-sf-venue-result {
    width: 100%; text-align: left; padding: 10px 12px;
    border: none; background: transparent; cursor: pointer;
    font-size: 14px; color: var(--c-text);
    display: flex; align-items: center; gap: 6px;
    border-bottom: 1px solid var(--c-border); font-family: inherit;
}
.dink-sf-venue-result:last-child { border-bottom: none; }
.dink-sf-venue-result:hover { background: var(--c-primary-tint); }
.dink-sf-venue-result__city { color: var(--c-text-muted); font-size: 13px; }

/* Generic text input */
.dink-sf-input {
    width: 100%; box-sizing: border-box; padding: 12px 13px;
    border: 1.5px solid #DCE3EA; border-radius: 11px;
    font-size: 15px; color: var(--c-text); outline: none; font-family: inherit;
    background: #fff; appearance: none; -webkit-appearance: none;
    display: block;
}
.dink-sf-input:focus { border-color: var(--c-primary); }
.dink-sf-input.is-error { border-color: #C13333; background: #FDF1F1; }

/* Date input variant */
.dink-sf-date-input { margin-top: 8px; }

/* "Kiedy?" — two deliberate rows (Punkt 3): row 1 = Data (chips + picker), row 2 = Godzina +
   Czas trwania. Splitting them stops the date/time pair from wrapping into an ugly half-line. */
.dink-sf-when-date { flex: 0 0 auto; max-width: 220px; }
.dink-sf-when-date .dink-sf-date-input { margin-top: 0; }

/* Right-hand quick-pick chips column (Dziś/Jutro/…), symmetric with "Czas trwania". */
.dink-sf-when-quick { flex: 1 1 220px; min-width: 210px; }

.dink-sf-when-row {
    display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-start;
    margin-top: 14px;
}
.dink-sf-when-time { flex: 0 0 auto; }
.dink-sf-when-dur  { flex: 1 1 220px; min-width: 210px; }

/* Start / (optional) end pickers side by side — "Inny" reveals "Do" here, in place (Punkt 4). */
.dink-sf-time-fields { display: flex; gap: 10px; }
.dink-sf-time-field  { flex: 0 0 116px; }

/* Date chips row */
.dink-sf-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dink-sf-chip {
    padding: 8px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    font-size: 13px; font-weight: 700; letter-spacing: -0.1px;
    border: 1.5px solid #E1E7ED; background: #fff; color: #5B6B7B;
    font-family: inherit;
}
.dink-sf-chip.is-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* Duration segment buttons */
.dink-sf-dur-btns { display: flex; gap: 7px; }
.dink-sf-dur-btn {
    flex: 1; padding: 12px 2px; border-radius: 11px; cursor: pointer;
    font-size: 13px; font-weight: 700;
    border: 1.5px solid var(--c-border); background: #fff; color: #5B6B7B;
    font-family: inherit;
}
.dink-sf-dur-btn.is-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* Hint / note text */
.dink-sf-hint {
    font-size: 12.5px; color: var(--c-text-muted); margin-top: 8px; font-weight: 600;
    line-height: 1.4;
}
.dink-sf-hint strong { color: var(--c-text-2); }

/* Inline error message */
.dink-sf-err {
    display: flex; align-items: center; gap: 5px;
    margin-top: 6px; color: #C13333; font-size: 12.5px; font-weight: 600;
    min-height: 18px;
}

/* Capacity card (stepper + reserve) */
.dink-sf-capacity-card {
    border: 1px solid var(--c-border); border-radius: 13px;
    padding: 12px 14px; background: #fff;
}

/* Stepper */
.dink-sf-stepper { display: flex; align-items: center; gap: 12px; }
.dink-sf-stepper__btn {
    width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
    border: 1.5px solid #DCE3EA; background: #fff; color: var(--c-primary);
    font-size: 22px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    font-family: inherit;
}
.dink-sf-stepper__btn:disabled { color: #C7D2DD; background: #F3F6F9; cursor: default; }
.dink-sf-stepper__center { flex: 1; text-align: center; }
.dink-sf-stepper__num { font-size: 24px; font-weight: 800; color: var(--c-text); letter-spacing: -0.5px; }
.dink-sf-stepper__unit { font-size: 13.5px; color: var(--c-text-muted); font-weight: 600; margin-left: 6px; }

/* Courts stepper row (secondary stepper inside the capacity card) */
.dink-sf-courts-row {
    margin-top: 13px; padding-top: 13px; border-top: 1px solid #F0F3F6;
}
.dink-sf-courts-row__label { font-size: 13.5px; font-weight: 700; color: var(--c-text); margin-bottom: 8px; }

/* Players/Courts steppers: stacked (divider between) on phones, side by side on
   desktop so the capacity card doesn't stretch into one wide, empty band. */
.dink-sf-cap-players__label { display: none; }
@media (min-width: 992px) {
    /* Gap + a wider padded divider so the two steppers don't visually merge (Punkt 5). */
    .dink-sf-capacity-steppers { display: flex; align-items: flex-start; gap: 26px; }
    .dink-sf-cap-players { flex: 1; min-width: 0; }
    .dink-sf-capacity-steppers .dink-sf-courts-row {
        flex: 1; min-width: 0;
        margin-top: 0; padding-top: 0; border-top: none;
        padding-left: 26px; border-left: 1px solid #F0F3F6;
    }
    .dink-sf-cap-players__label { display: block; }
}

/* Reserve toggle row */
/* Weather slot: fragment renders its own content (or nothing) — margin only when present,
   so an indoor venue / far-future date leaves no dead gap between sections. */
.dink-sf-weather-wrap > #weather-forecast > :first-child { margin-top: 22px; }

/* Buddy chips */
.dink-sf-buddy-list { display: flex; flex-wrap: wrap; gap: 8px; }
.dink-sf-buddy-chip {
    padding: 8px 12px; border-radius: 999px; cursor: pointer;
    font-size: 13.5px; font-weight: 600;
    border: 1.5px solid #E1E7ED; background: #fff; color: #5B6B7B;
    display: flex; align-items: center; gap: 5px; font-family: inherit;
}
.dink-sf-buddy-chip.is-selected {
    background: var(--c-primary-tint); color: var(--c-primary); border-color: var(--c-primary);
}

/* Buddy search results (HTMX fragment) */
.dink-sf-search-results {
    max-height: 180px; overflow-y: auto; margin-top: 4px;
}

/* Preview section */
/* Preview is desktop-only (D5): on mobile the summary sheet is the one confirmation. */
.dink-sf-preview-col { display: none; }

.dink-sf-preview-label {
    font-size: 11.5px; font-weight: 750;
    letter-spacing: 0.6px; color: #5E6A76; text-transform: uppercase; margin-bottom: 9px;
}
.dink-sf-preview {
    background: #fff; border: 1px solid var(--c-border);
    border-radius: 14px; padding: 13px 14px;
    box-shadow: 0 1px 2px rgba(12,32,52,0.04);
}
.dink-sf-preview__top {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.dink-sf-preview__info { min-width: 0; }
/* Date is the headline, time sits on its own line below it (Punkt 1). */
.dink-sf-preview__date {
    font-size: 16px; font-weight: 750; color: var(--c-text); letter-spacing: -0.3px;
}
.dink-sf-preview__date.is-ph { color: var(--c-placeholder); }
.dink-sf-preview__time {
    font-size: 14px; font-weight: 650; color: var(--c-text-2); margin-top: 2px;
}
.dink-sf-preview__time.is-ph { color: var(--c-placeholder); }
.dink-sf-preview__place { font-size: 13.5px; color: var(--c-text-2); margin-top: 3px; }
.dink-sf-preview__place.is-ph { color: var(--c-placeholder); }
.dink-sf-preview__type { font-size: 13.5px; color: #5B6B7B; margin-top: 1px; }
.dink-sf-preview__badge {
    font-size: 11px; font-weight: 700; padding: 3px 9px;
    border-radius: 999px; flex-shrink: 0;
}
.dink-sf-preview__badge--open { background: #E7F4EC; color: #157A3F; }
.dink-sf-preview__badge--priv { background: var(--c-bg-app); color: var(--c-text-muted); }
.dink-sf-preview__footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 11px; padding-top: 11px; border-top: 1px solid #F0F3F6;
}
.dink-sf-preview__spots { font-size: 12.5px; color: #5B6B7B; font-weight: 600; }
.dink-sf-preview__footnote { font-size: 12px; color: #5E6A76; font-weight: 600; }

/* Desktop confirmation card: summary rows + publish button under the preview
   (podgląd + podsumowanie = potwierdzenie; no sheet, no fixed bottom bar, Etap 5). */
.dink-sf-summary-card {
    margin-top: 16px; background: #fff; border: 1px solid var(--c-border);
    border-radius: 14px; padding: 14px 16px 16px;
    box-shadow: 0 1px 2px rgba(12,32,52,0.04);
}
.dink-sf-summary-card__rows { margin-bottom: 6px; }

/* Sticky CTA */
.dink-sf-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid #EDF1F5;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
.dink-sf-cta__btn {
    width: 100%; padding: 15px; background: var(--c-primary);
    color: #fff; border: none; border-radius: 13px;
    font-size: 16px; font-weight: 750; letter-spacing: -0.2px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit;
}
.dink-sf-cta__btn:hover { background: var(--c-primary-deep); }

/* Summary sheet */
.dink-sf-sheet-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(9,22,38,0.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    display: flex; align-items: flex-end;
}
.dink-sf-sheet {
    background: #fff; width: 100%;
    border-radius: 22px 22px 0 0; padding: 10px 18px 30px;
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 40px rgba(9,22,38,0.2);
    animation: sfSheetUp 0.34s ease;
}
@keyframes sfSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.dink-sf-sheet__handle {
    width: 38px; height: 4px; background: #D7DEE6;
    border-radius: 2px; margin: 4px auto 16px;
}
.dink-sf-sheet__title {
    font-size: 19px; font-weight: 750; color: var(--c-text); letter-spacing: -0.3px;
    margin-bottom: 14px;
}
.dink-sf-sheet__rows { margin-bottom: 16px; }
/* Stacked label-over-value (Punkt 1): a long "Termin"/"Miejsce" value no longer collides with
   its right-aligned label — label is a small caption, value sits on the line below, left-aligned. */
.dink-sf-sheet__row {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 0; border-bottom: 1px solid #F0F3F6;
}
.dink-sf-sheet__row:last-child { border-bottom: none; }
.dink-sf-sheet__lbl { font-size: 12px; color: var(--c-text-muted); font-weight: 600; }
.dink-sf-sheet__val { font-size: 14px; color: var(--c-text); font-weight: 700; }
.dink-sf-sheet__confirm {
    width: 100%; padding: 14px; background: var(--c-primary);
    color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 700;
    cursor: pointer; letter-spacing: -0.2px; margin-top: 14px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit;
}
.dink-sf-sheet__confirm:hover { background: var(--c-primary-deep); }
.dink-sf-sheet__cancel {
    width: 100%; padding: 11px; background: transparent;
    color: #5B6B7B; border: none; font-size: 14.5px; font-weight: 650;
    cursor: pointer; margin-top: 4px; font-family: inherit;
}

/* Desktop (≥992px): form body left, sticky "Podgląd ogłoszenia" right — same
   mobile-first DOM, just reflowed into a two-column grid so nothing is
   duplicated for the two viewports. */
@media (min-width: 992px) {
    .dink-sf-appbar, .dink-sf-grid {
        max-width: 992px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Pages that keep the Bootstrap "container" (nav shown to logged-in users, e.g.
       privacy/terms) already get width + centering from the container itself — the
       appbar's own centering here would nest inside it and drift out of alignment
       with the page content below. Flush it back to fill the container instead. */
    .dink-sf-appbar--flush {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    .dink-sf-grid {
        display: grid;
        grid-template-columns: minmax(0, 640px) 320px;
        column-gap: 32px;
        align-items: start;
    }
    /* Branded dark panel: the white ad card "floats" here so it reads as a
       simulation of the player's view, not another field of the form (Punkt 1). */
    .dink-sf-preview-col {
        display: block;
        position: sticky;
        top: 84px;
        margin-top: 0;
        background: linear-gradient(150deg, #16213e 0%, #0f3460 100%);
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 8px 24px rgba(9, 22, 38, 0.14);
    }
    .dink-sf-preview-col .dink-sf-preview-label {
        color: rgba(255, 255, 255, 0.78);
        display: flex; align-items: center; gap: 6px;
    }
    .dink-sf-preview-col .dink-sf-preview-label .bi { color: rgba(255, 255, 255, 0.6); }
    /* Venue cards are the tallest single section (one per row); two columns
       roughly halves it so the desktop page isn't dominated by this list. */
    .dink-sf-place-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    /* The sticky preview + summary card IS the confirmation on desktop — no
       fixed bottom bar, no confirm sheet (mobile-only, Etap 5). */
    .dink-sf-cta, .dink-sf-mobile-cta-spacer {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Etap 7 — Venue Suggest (light form)
   ═══════════════════════════════════════════════════════════════════════ */

.dink-suggest-form { max-width: 860px; }

/* Numbered step bubble */
.dink-step-badge {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--c-primary); color: #fff;
    font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Chosen location recap bar (stage 2) */
.dink-suggest-recap {
    display: flex; align-items: center; gap: 8px;
    background: var(--c-primary-tint); border: 1px solid #C5D9EE;
    border-radius: 10px; padding: 10px 14px;
    font-size: 14px; color: var(--c-text);
}

/* Optional details <details> */
.dink-suggest-details__summary {
    cursor: pointer; font-size: 14px;
    color: var(--c-text-2); font-weight: 600;
    list-style: none; user-select: none;
}
.dink-suggest-details__summary::-webkit-details-marker { display: none; }
.dink-suggest-details[open] .dink-suggest-details__summary { color: var(--c-primary); }

/* ═══════════════════════════════════════════════════════════════════════
   Etap 8 — Parent Panel (mobile-first)
   ═══════════════════════════════════════════════════════════════════════ */

/* Club context block */
.dink-pp-club-icon {
    width: 40px; height: 40px; border-radius: 11px;
    background: var(--c-primary); display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Child card */
.dink-child-card {
    background: #fff; border: 1px solid var(--c-border); border-radius: 16px; overflow: hidden;
}
.dink-child-card__head {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 15px; background: #FAFBFC; border-bottom: 1px solid #EEF2F6;
}
.dink-child-card__avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--c-primary-tint); color: var(--c-primary);
    font-size: 13px; font-weight: 750;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dink-child-card__body { padding: 12px 15px 15px; }
.dink-child-card__sessions-link {
    color: var(--c-primary); font-size: 12.5px; font-weight: 700;
    text-decoration: none; flex-shrink: 0; white-space: nowrap;
}

/* Compact row (Etap 3) — a child without an assigned group has nothing to show yet, so it
   collapses to one line instead of a full card with a large empty state. Several of these
   in a row (3-4+ children) stay scannable where repeated big cards did not. */
.dink-child-card--compact { border-style: dashed; }
.dink-child-row {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 15px; text-decoration: none;
}
.dink-child-card__avatar--sm { width: 30px; height: 30px; font-size: 11.5px; }

/* Empty state within child card */
.dink-pp-empty { text-align: center; padding: 22px 10px; }
.dink-pp-empty__icon {
    width: 46px; height: 46px; border-radius: 13px;
    background: #F1F4F7; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 11px;
}

/* Session row inside child card / child sessions page */
.dink-psession-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 11px 0; border-top: 1px solid #F0F3F6;
}
.dink-psession-row:first-child { border-top: none; }
.dink-psession-row--cancelled { background: #FAFBFC; }
.dink-psession-cancelled-badge {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
}
.dink-psession-cancelled-label {
    font-size: 11px; font-weight: 800; letter-spacing: 0.3px;
    color: #fff; background: #C13333; padding: 2px 8px; border-radius: 6px;
}
.dink-psession-cancelled-reason { font-size: 12px; color: var(--c-text-muted); }
.dink-psession-changed-badge {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
    font-size: 11px; font-weight: 700; color: #8A5A0C;
    background: #FBEFD9; padding: 2px 8px; border-radius: 6px;
}

/* Attendance buttons */
.dink-att-btn {
    width: 38px; height: 38px; border-radius: 10px;
    border: 1.5px solid #E1E7ED; background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; padding: 0;
    transition: border-color 0.15s, background 0.15s;
}
.dink-att-btn--confirm { }
.dink-att-btn--confirm.active { border-color: #157A3F; background: #157A3F; }
.dink-att-btn--decline { }
.dink-att-btn--decline.active { border-color: #C13333; background: #C13333; }

/* Fee chips (składki) */
.dink-sk-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    border: none; font-size: 12.5px; font-weight: 700; line-height: 1;
}
.dink-sk-chip--ok { background: #E7F4EC; color: #157A3F; }
.dink-sk-chip--due { background: #FBEFD9; color: #8A5A0C; }

/* ---- Onboarding hint / welcome card (fragments/onboarding/hint.html) ---- */
.onboarding-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 1rem;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-accent);
    border-radius: 10px;
}
.onboarding-hint__icon {
    color: var(--c-accent);
    font-size: 1.1rem;
    line-height: 1.4;
    flex-shrink: 0;
}
.onboarding-hint__body { flex: 1; min-width: 0; }
.onboarding-hint__title {
    display: block;
    color: var(--c-text);
    font-size: var(--fs-base);
}
.onboarding-hint__text {
    margin: 2px 0 0;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}
.onboarding-hint__close {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: .7rem;
}