/* ─── 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;
    gap: 12px; /* the context label must never touch the bell (QA-036) */
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}
/* 320–399 px: the wordmark beside the bell leaves the club name ~60 px — keep only the icon. */
@media (max-width: 399.98px) {
    .dink-topbar { padding: 0 12px; }
    .dink-topbar-brand--mobile { display: none; }
}
.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) */
/* The sidebar is sticky and viewport-tall, so on a long page the column below it had no
   background or border (QA-036). Paint the column itself, full height, on desktop. */
@media (min-width: 992px) {
    .dink-shell-body {
        background-image: linear-gradient(to right, var(--c-bg-card) 231px, #EAEEF2 231px, #EAEEF2 232px, transparent 232px);
    }
}
.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;
    }
}

/* Same content padding for the super-admin panel (was unset — content sat flush against the sidebar). */
.super-content {
    padding: 28px 32px 48px;
}
@media (max-width: 991.98px) {
    .super-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;
    flex-wrap: wrap; /* 320 px: status chip + "Szczegóły ›" drop below the seat count (QA-066) */
    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);
}
/* Warn variant: the one stat tile that's a clickable call-to-action (e.g. "Zaległości"
   linking to the fees page) — needs to visually outrank plain grey tiles, not blend in. */
.dink-stat-card--warn {
    background: var(--c-warn-bg);
    border-color: #F0CE87;
    transition: border-color .15s;
}
.dink-stat-card--warn:hover { border-color: #E0B968; }
.dink-stat-card--warn .dink-stat-card__icon { background: #F6DFB0; color: var(--c-warn); }
.dink-stat-card--warn .dink-stat-card__value,
.dink-stat-card--warn .dink-stat-card__label { color: var(--c-warn); }
.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;
}
/* Same 8-slot, identity-derived palette as .dink-group-chip's dot — each dot uses the exact
   border-left-color of the matching schedule-color-N (app.css "Harmonogram — kolory grup"), via
   the same GroupColorPalette.indexFor hash, so a group's card dot never contradicts its own
   colour in the schedule grid. */
.dink-group-dot[data-idx="0"] { background: #0D6EFD; }
.dink-group-dot[data-idx="1"] { background: #198754; }
.dink-group-dot[data-idx="2"] { background: #FFC107; }
.dink-group-dot[data-idx="3"] { background: #DC3545; }
.dink-group-dot[data-idx="4"] { background: #0DCAF0; }
.dink-group-dot[data-idx="5"] { background: #6F42C1; }
.dink-group-dot[data-idx="6"] { background: #FD7E14; }
.dink-group-dot[data-idx="7"] { background: #20C997; }
.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;
}
.dink-rail-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 16px;
}
.dink-rail-card__title {
    font-size: 14px; font-weight: 750; color: var(--c-text);
    margin-bottom: 10px;
}
.dink-rail-card .dink-session-row { padding: 10px 12px; }
/* line-through, not opacity — opacity fades the group name below WCAG AA. */
.schedule-mobile-card.is-cancelled { text-decoration: line-through; }