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

/* ─── Inline rename on a Słownik position card (docs/wplaty-bankowe-slownik-pozycje-plan.md) ───
   Pencil icon next to the name is the trigger; opening the <details> swaps the name+icon for the
   rename form in place, CSS-only (no inline onclick — feedback_csp_blocks_inline_onsubmit). ─── */
.dink-position-name-editor > summary { list-style: none; cursor: pointer; }
.dink-position-name-editor > summary::-webkit-details-marker { display: none; }
.dink-position-name-editor[open] > summary { display: none; }
.dink-position-name-editor__icon { color: var(--c-text-muted); font-size: 0.8em; }
.dink-position-name-editor > summary:hover .dink-position-name-editor__icon,
.dink-position-name-editor > summary:focus-visible .dink-position-name-editor__icon {
    color: var(--c-primary);
}

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

/* Toggle restyled as a menu row (icon + title + subtitle + chevron) instead of
   plain small caps text — same button/data-bs-toggle/aria-* wiring, just richer
   content inside so it visibly reads as clickable. */
.profile-section__toggle {
    text-transform: none; font-size: 14.5px; padding: 12px 14px; border-radius: 12px;
    border-bottom: 0; background: var(--c-bg-card); border: 1px solid var(--c-border);
}
.profile-section__toggle-icon {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: var(--c-primary-tint); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.profile-section__toggle-text { flex: 1; min-width: 0; text-align: left; }
.profile-section__toggle-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--c-text); }
.profile-section__toggle-sub { display: block; font-size: 12.5px; font-weight: 500; color: var(--c-text-muted); text-transform: none; letter-spacing: 0; }
.profile-section__toggle > .bi-chevron-down { color: var(--c-text-muted); }

/* ─── Profile hero (avatar + name + chips) ──────────────────────────── */
.profile-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.profile-hero__avatar {
    width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
    background: var(--c-primary-tint); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800; letter-spacing: 0;
}
.profile-hero__name { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: var(--c-text); margin: 0 0 6px; }
.profile-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.profile-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
    padding: 3px 10px; border-radius: 999px; background: var(--c-primary-tint); color: var(--c-primary);
}
.profile-chip i { font-size: 11px; }
.profile-chip--muted { background: #F1F4F7; color: var(--c-text-muted); font-weight: 600; }

/* ─── Profile shell: sidebar quick-nav (desktop) ─────────────────────────
   Replaces a bare `max-width:820px` div with no centering, which left a
   large dead gap on wide viewports (the div hugged the left edge of the
   already-centered Bootstrap .container). Deliberately does NOT re-centre
   itself at a narrower max-width than the hero/header above it (that was
   tried and rejected — it shifted the rail+cards right of the flush-left
   "Profil" title/avatar, looking just as broken as the original bug). Instead
   it stays flush-left like everything else on the page, and only the main
   column's own inner width is capped so cards don't stretch edge-to-edge. */
.profile-shell { }
.profile-shell__body { display: block; }
.profile-rail { display: none; }
@media (min-width: 992px) {
    .profile-shell__body { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: start; }
    .profile-rail { display: block; position: sticky; top: 16px; }
}
.profile-shell__main { max-width: 760px; }
.profile-rail__title { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 10px; }
.profile-rail a {
    display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--c-text-2);
    text-decoration: none; padding: 8px 10px; border-radius: 8px; margin-bottom: 2px;
}
.profile-rail a:hover, .profile-rail a:focus-visible { background: var(--c-primary-tint); color: var(--c-primary); }
.profile-rail a i { width: 15px; text-align: center; opacity: .8; }

/* ─── Compact save button: icon-only under 480px (mobile) to cut down on
   repeated identical buttons; label reappears once there's room. Keeps a
   fixed accessible name via aria-label regardless of the visible label. ── */
.profile-save__label { display: none; }
@media (min-width: 480px) {
    .profile-save__label { display: inline; }
}

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