/* ─── Month switcher arrows (reused inside the merged month+money card, Etap 6 §6) ─── */
.dink-month-switcher__arrow {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid var(--c-border); border-radius: 8px;
    color: var(--c-text-2); text-decoration: none;
    background: var(--c-bg-card);
    flex-shrink: 0;
}
.dink-month-switcher__arrow:hover { background: var(--c-bg-hover, #F1F4F7); color: var(--c-text); }

/* ─── Bulk fee-plan assignment bar (fees page) ──────────────── */
.dink-bulk-bar {
    position: sticky; bottom: 0; z-index: 10;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 12px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border); border-radius: 12px;
    box-shadow: 0 -2px 10px rgba(9,22,38,0.08);
}
.dink-bulk-bar__count { font-size: 13px; font-weight: 700; color: var(--c-text); white-space: nowrap; }
/* Etap 7 §6 restyle — plain form-select/checkbox/btn-primary replaced with dink tokens, matching
   BezTaryfy.dc.html's bulk bar. */
.dink-bulk-bar__select {
    font-size: 13px; font-weight: 600; color: var(--c-text);
    border: 1px solid var(--c-border-2); border-radius: 9px; padding: 8px 12px;
    background: #fff;
}
.dink-bulk-bar__sibling {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--c-text-2); cursor: pointer; white-space: nowrap;
}
.dink-bulk-bar__note {
    font-size: 13px; color: var(--c-text-muted); margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.dink-btn-solid-primary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 13px; font-weight: 700; color: #fff; background: var(--c-primary);
    border: none; border-radius: 9px; padding: 9px 17px; white-space: nowrap;
}
.dink-btn-solid-primary:hover { background: var(--c-primary-deep); color: #fff; }

/* ─── Month summary progress bar (fees page, D1 = wariant A) ──── */
.dink-fee-progress {
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 12px;
}
/* Month switcher, merged into the top of the money card (Etap 6 §6) — arrows on the sides, label
   centered, so a phone doesn't stack two separate cards before the athlete list. Column layout
   (Etap 7 §3) so the open/closed state badge sits centered under the arrows row. */
.dink-fee-progress__month {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.dink-fee-progress__month-row {
    display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
}
.dink-fee-progress__month-badge { align-self: center; }
.dink-fee-progress__month-label {
    flex: 1 1 auto; text-align: center;
    font-size: 14px; font-weight: 700; color: var(--c-text);
    text-transform: capitalize;
}
.dink-fee-progress__divider {
    height: 1px; background: var(--c-border); margin: 11px 0;
}
.dink-fee-progress__title {
    font-size: 11px; font-weight: 750; letter-spacing: 0.4px;
    text-transform: uppercase; color: var(--c-text-muted);
    margin-bottom: 4px;
}
.dink-fee-progress__amounts {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
    margin-bottom: 8px;
}
.dink-fee-progress__paid  { font-size: 22px; font-weight: 800; color: #157A3F; }
.dink-fee-progress__of    { font-size: 14px; font-weight: 600; color: var(--c-text-muted); }
.dink-fee-progress__total { font-size: 16px; font-weight: 700; color: var(--c-text); }
.dink-fee-progress__caption { font-size: 13px; color: var(--c-text-muted); }
.dink-fee-progress__track {
    width: 100%; height: 10px; border-radius: 999px;
    background: #EEF2F6; overflow: hidden; margin-bottom: 8px;
}
.dink-fee-progress__fill {
    height: 100%; background: #157A3F; border-radius: 999px;
    transition: width 0.3s ease;
}
.dink-fee-progress__stats {
    font-size: 13px; color: var(--c-text-2);
    display: flex; flex-wrap: wrap; gap: 6px;
}
.dink-fee-progress__sep { color: var(--c-text-muted); }
.dink-fee-progress__filtered {
    font-size: 12px; color: var(--c-text-muted); margin-top: 4px; font-style: italic;
}

/* Month close footer + checklist (docs/rozliczenia-zamkniecie-miesiaca-plan.md Etap 2). */
.dink-month-close {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    margin-top: 18px; padding: 12px 16px;
    background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 12px;
}
.dink-month-close__text { flex: 1 1 260px; font-size: 13px; color: var(--c-text-sub); }
.dink-month-close__text .bi-lock-fill { color: var(--c-primary); margin-right: 4px; }
.dink-month-close__unlock { display: block; margin-top: 2px; font-size: 12px; color: var(--c-text-sub); overflow-wrap: anywhere; }
.dink-month-close-list__item {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; font-size: 13px; color: var(--c-text);
}
.dink-month-close-list__item--block { background: var(--c-error-bg); }
.dink-month-close-list__item--block > .bi { color: var(--c-error); }
.dink-month-close-list__item--warn { background: var(--c-warn-bg); }
.dink-month-close-list__item--warn > .bi { color: var(--c-warn); }
.dink-month-close-list__item--ok { background: var(--c-success-bg); }
.dink-month-close-list__item--ok > .bi { color: var(--c-success); }

/* ─── Wpłaty filter segments (Etap 3 §3) — replace the old four counter tiles ───
   `.dink-fee-segments-scroll` is a plain inline block on desktop (segments always fit); the mobile
   media query below turns it into the full-width horizontal-scroll strip of Etap 6 §6 — `overflow-x`
   lives on this wrapper, never on `body`. */
.dink-fee-segments-scroll {
    overflow-x: visible;
}
.dink-fee-segments {
    display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    width: max-content;
}
.dink-fee-segment {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 600; color: var(--c-text-2);
    background: var(--c-bg-card); border: 1px solid var(--c-border);
    border-radius: 999px; padding: 9px 14px;
    text-decoration: none;
    white-space: nowrap; flex-shrink: 0;
}
.dink-fee-segment:hover { color: var(--c-text); text-decoration: none; }
.dink-fee-segment--active {
    font-weight: 700; color: #fff;
    background: var(--c-primary); border-color: var(--c-primary);
}
.dink-fee-segment--active:hover { color: #fff; }
.dink-fee-segment__count {
    font-size: 12px; font-weight: 800; color: var(--c-text-2);
    background: var(--c-bg-hover, #F1F4F7); border-radius: 999px; padding: 1px 8px;
}
.dink-fee-segment--active .dink-fee-segment__count {
    color: #fff; background: rgba(255,255,255,0.22);
}
.dink-fee-segment__count--ok { color: #157A3F; background: #E7F4EC; }
.dink-fee-segment__count--muted { color: var(--c-text-muted); background: var(--c-bg-hover, #F1F4F7); }

/* ─── Month closing step, footer of the Wpłaty list (Etap 5 §5) ──── */
/* Row-level action buttons on the Wpłaty list (Etap 7 §2, docs/skladki-przebudowa-plan.md) —
   replaces bare `btn btn-outline-success`/`btn-link` with the tinted-pill/ghost-text pair from
   Main.dc.html's "Zapłacił" pill, so the row's CTA reads at the same visual weight as the progress
   bar/segments above it instead of generic Bootstrap. */
.dink-fee-row-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; border-radius: 9px; padding: 8px 14px;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.dink-fee-row-btn--paid { color: var(--c-success); background: var(--c-success-bg); border-color: #A8DDB8; }
.dink-fee-row-btn--paid:hover { background: #DCEEE1; }
.dink-fee-row-btn--ghost { color: var(--c-text-muted); background: transparent; padding: 6px 4px; }
.dink-fee-row-btn--ghost:hover { color: var(--c-text); }
/* Desktop-only: on mobile these sit in the flex `.dink-fee-row__actions` card (gap already spaces
   them, see the 767.98px block above); on desktop the actions column is a plain <td>, so adjacent
   buttons need their own gap. */
@media (min-width: 768px) {
    .dink-fee-row-btn ~ .dink-fee-row-btn { margin-left: 8px; }
}

/* Arrears report "do sprawdzenia" under the bank chip: one line on desktop, wraps on a phone where
   it is the last (narrow) visible column. */
@media (min-width: 768px) {
    .dink-md-nowrap { white-space: nowrap; }
}

/* ─── "Kto zapłacił" registry (Etap 2c, docs/rozliczenia-klubowe-plan.md) — read-only preview,
   one native <details> per athlete. Mariusz's "przejrzystość wiersza" limit: the closed row shows
   only name / ONE status chip / amount; everything else (taryfa, saldo, zawieszenie, jednorazowe,
   link do starego ekranu) lives inside the disclosure, never as extra always-visible columns. ─── */
.dink-registry-list { display: flex; flex-direction: column; gap: 6px; }
.dink-registry-row { border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-bg-card); }
.dink-registry-row > details > summary::-webkit-details-marker { display: none; }
.dink-registry-row__summary {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px; cursor: pointer; list-style: none;
}
.dink-registry-row__name { flex: 1 1 160px; font-weight: 600; font-size: 14px; }
.dink-registry-row__amount { font-weight: 700; font-size: 14px; min-width: 64px; text-align: right; }
.dink-registry-row__details {
    padding: 0 14px 14px 14px; border-top: 1px solid var(--c-border); padding-top: 10px;
}
@media (max-width: 480px) {
    .dink-registry-row__summary { gap: 8px; }
    .dink-registry-row__amount { text-align: left; min-width: 0; }
}

/* Backdated-payment date popover — position:absolute so opening it doesn't grow the <details>
   box and shove the row's other inline controls out of alignment (fixed live-QA finding
   2026-08-24: the plain inline-block <details> pushed the calendar icon visually above/away from
   the row once opened). Anchored to the icon's own box, not the viewport, so it can't overflow
   off-screen regardless of the row's position in the table/card.
   Redesigned same day (Mariusz: "dalej jestem niezadowolony z tym jak działa odznaczanie
   płatności") — a bare <input type="date"> reads as "pick any date", not "record when this
   actually happened" for a club that doesn't check the account daily. Presets (Dzisiaj/Wczoraj/1.
   dnia miesiąca) cover the common case with zero typing; the date field stays for the rest. Column
   layout (was one row) to fit the presets above the field+Zapisz row. */
.dink-fee-date-picker { position: relative; display: inline-block; vertical-align: middle; }
.dink-fee-date-picker > summary::-webkit-details-marker { display: none; }
.dink-fee-date-picker__form {
    position: absolute; top: 100%; right: 0; margin-top: 6px; z-index: 20;
    display: flex; flex-direction: column; gap: 8px; width: 230px;
    background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 9px;
    padding: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.14);
}
.dink-fee-date-picker__presets { display: flex; flex-wrap: wrap; gap: 6px; }
.dink-fee-date-picker__preset {
    font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--c-border-2); background: var(--c-bg-hover, #F1F4F7); color: var(--c-text);
    cursor: pointer;
}
.dink-fee-date-picker__preset:hover { border-color: var(--c-primary); color: var(--c-primary); }
.dink-fee-date-picker__preset.is-selected { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.dink-fee-date-picker__field { display: flex; align-items: center; gap: 6px; }
.dink-fee-date-picker__field input[type="date"] { flex: 1; min-width: 0; }

/* Etap 7 §7 — icon+row layout matching Zamkniecie.dc.html (was a centered text-only box; all three
   states looked the same white card, so the state wasn't recognizable without reading). */
.dink-fee-close {
    margin-top: 18px;
    padding: 18px 22px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 16px;
}
.dink-fee-close--locked { background: #F1F4F7; border-color: var(--c-border-2); }
.dink-fee-close__row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dink-fee-close__icon {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; font-size: 20px;
    display: inline-flex; align-items: center; justify-content: center;
}
.dink-fee-close__icon--due { background: #F1F4F7; color: var(--c-text-muted); }
.dink-fee-close__icon--ready { background: var(--c-success-bg); color: var(--c-success); }
.dink-fee-close__icon--locked { background: #fff; color: var(--c-text-muted); }
.dink-fee-close__body { flex: 1 1 240px; min-width: 0; text-align: left; }
.dink-fee-close__title { font-size: 16px; font-weight: 800; color: var(--c-text); margin: 0 0 5px; }
.dink-fee-close__note { font-size: 13.5px; color: var(--c-text-2); margin: 0; }
/* Only the icon and the text block are flex items — the sentence itself stays normal inline text
   (with <strong>/<span> inside it) so it wraps as a paragraph, not word-by-word as separate flex
   items (that was a real bug: each <strong>/<span> became its own flex child and wrapped on its
   own line, garbling the sentence on mobile). */
.dink-fee-close__warn {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--c-warn); margin: 6px 0 0;
}
.dink-fee-close__warn i { flex-shrink: 0; margin-top: 1px; }
.dink-fee-close__btn {
    flex-shrink: 0; font-size: 13.5px; font-weight: 700; border-radius: 10px;
    padding: 11px 20px; cursor: pointer; white-space: nowrap;
}
.dink-fee-close__btn--ghost { color: var(--c-text); background: #fff; border: 1px solid var(--c-border-2); }
.dink-fee-close__btn--ghost:hover { background: var(--c-bg-hover, #F1F4F7); }
.dink-fee-close__btn--solid { color: #fff; background: var(--c-primary); border: none; }
.dink-fee-close__btn--solid:hover { background: var(--c-primary-deep); }
@media (max-width: 767.98px) {
    .dink-fee-close { padding: 14px 16px; }
    .dink-fee-close__btn { width: 100%; text-align: center; }
}

/* Sibling-discount warning, downgraded from a full-width banner to a discreet chip next to the
   filter segments (Etap 3 §3 — same <details>/<summary> disclosure, only position/weight changed). */
.dink-chip-details { position: relative; }
.dink-chip-details > ul {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
    list-style: none; margin: 0; padding: 10px 12px; min-width: 220px;
    background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 10px;
    box-shadow: 0 4px 14px rgba(9,22,38,0.12);
}

/* ─── Sub-tabs (fees: Wpłaty / Cennik) ───────────────────────── */
.dink-tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 18px;
    /* Etap 8 (docs/wplaty-bankowe-saldo-platnika-plan.md §6): a 4th "Z banku" sub-tab
       ("Nadpłaty") pushed this nav past 393px on mobile — the flex row never wrapped or
       scrolled, it just grew the PAGE. Horizontal scroll on the strip itself (not the whole
       page) is the standard mobile tab-bar pattern and costs nothing on desktop, where every
       row of tabs already fits. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.dink-tabs::-webkit-scrollbar { display: none; }
.dink-tabs__item {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    padding: 9px 14px; margin-bottom: -1px;
    font-size: 14px; font-weight: 700; color: var(--c-text-2);
    text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; border-bottom: none;
    border-radius: 8px 8px 0 0;
}
.dink-tabs__item:hover { color: var(--c-text); background: var(--c-bg-hover, #F1F4F7); }
.dink-tabs__item.active {
    color: var(--c-primary); background: var(--c-primary-tint);
    border-color: var(--c-border);
    border-bottom: 1px solid var(--c-primary-tint);
}

/* Etap 5 (docs/rozliczenia-klubowe-plan.md) — row wrapping `.dink-tabs` (daily tabs, scrollable) +
   the "Konfiguracja" dropdown (Cennik/Inne opłaty, low-frequency). The dropdown lives OUTSIDE
   `.dink-tabs` on purpose — that element's `overflow-x: auto` forces `overflow-y` to `auto` too
   (CSS pairing rule), which would clip a nested dropdown-menu instead of letting it hang below. */
.dink-fee-tabs-row {
    display: flex; align-items: flex-end; gap: 4px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 18px;
}
.dink-fee-tabs-row .dink-tabs {
    flex: 1 1 auto; min-width: 0;
    border-bottom: none; margin-bottom: 0;
}
.dink-tabs-config { flex: 0 0 auto; }
.dink-tabs-config__toggle {
    background: none; appearance: none; cursor: pointer; gap: 4px;
    font: inherit; font-weight: 700; /* reset native <button> chrome, keep .dink-tabs__item look */
}
.dink-tabs-config__toggle::after { margin-left: 6px; }

/* Etap 6 §6 — tighten every block above the Wpłaty list so the first athlete row lands higher on
   the screen (measured target: ≤450px from top, was ~640px before this etap). Placed here, after
   the base `.dink-page-header`/`.dink-tabs`/`.dink-fee-progress`/`.dink-fee-segments-scroll` rules
   above — same specificity (single class), so an earlier position in the file would lose the
   cascade to those later base declarations despite the narrower media condition matching. Scoped to
   fees-page-only classes (`.dink-fee-page-header`, not `.dink-page-header`) so other admin screens
   keep their normal spacing. */
@media (max-width: 767.98px) {
    .dink-fee-page-header { margin-bottom: 10px; }
    .dink-fee-page-header .dink-page-title { font-size: 20px; }
    /* Subtitle repeated onboarding copy ("mark payments for a given month") that the progress card
       below already makes obvious via context — mockup drops it on the compact mobile screen too. */
    .dink-fee-page-header .dink-page-subtitle { display: none; }
    .dink-fee-tabs-row { margin-bottom: 8px; }
    .dink-tabs {
        margin-bottom: 8px;
        /* Etap 3 (docs/rozliczenia-klubowe-plan.md): scroll-hint so a strip cut off on the right
           (e.g. "Rejestr i hist…") reads as scrollable, not truncated. Classic "scroll shadow" via
           two background-attachment values on the SAME scrolling element: the `local`-attached
           layers are solid-to-transparent covers that scroll WITH the content, masking the
           `scroll`-attached shadow layers (fixed to the viewport edge) whenever that edge is
           already at its scroll boundary — so a shadow only shows on the side there's more to see.
           No JS needed, and it's a no-op on desktop where the strip already fits. */
        background:
            linear-gradient(to right, var(--c-bg-content) 40%, rgba(0, 0, 0, 0)) 0 0,
            linear-gradient(to left, var(--c-bg-content) 40%, rgba(0, 0, 0, 0)) 100% 0,
            linear-gradient(to right, rgba(22, 32, 43, .14), rgba(0, 0, 0, 0)) 0 0,
            linear-gradient(to left, rgba(22, 32, 43, .14), rgba(0, 0, 0, 0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }
    .dink-fee-progress { padding: 10px 12px; margin-bottom: 8px; }
    .dink-fee-progress__month { gap: 4px; }
    .dink-fee-progress__month-label { font-size: 13px; }
    .dink-fee-progress__divider { margin: 6px 0; }
    .dink-fee-progress__title { margin-bottom: 2px; }
    .dink-fee-progress__amounts { margin-bottom: 4px; }
    .dink-fee-progress__paid { font-size: 20px; }
    .dink-fee-progress__track { margin-bottom: 4px; height: 8px; }
    .dink-fee-filter-row { margin-bottom: 8px !important; }
    /* Segments claim the full row width so the sibling chip/search form wrap onto their own line
       below, in the SAME container/margin — no duplicated spacing between two separate blocks. */
    .dink-fee-segments-scroll {
        flex: 1 1 100%;
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
}

/* ─── Cennik page (Etap 7 §1, docs/skladki-przebudowa-plan.md) — one card per taryfa,
   matches docs/design/skladki-mockups/Cennik.dc.html. Replaced the shared .dink-form-panel
   list-of-plans layout from Etap 2/4, which left every plan in one undifferentiated block. ───── */
.dink-pricing-toolbar {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 14px;
}
.dink-pricing-toolbar__title {
    font-size: 11px; font-weight: 750; letter-spacing: 0.4px; text-transform: uppercase;
    color: var(--c-text-muted); padding-top: 10px;
}
.dink-pricing-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.dink-pricing-card {
    background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 16px;
    padding: 18px 22px; display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
}
.dink-pricing-card__main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dink-pricing-card__name { font-size: 16px; font-weight: 800; color: var(--c-text); }
.dink-pricing-card__rates {
    display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
    font-size: 12px; color: var(--c-text-muted);
}
.dink-pricing-card__rate-value { font-size: 16px; font-weight: 800; color: var(--c-text); margin: 0 4px; }
.dink-pricing-card__rate-value--sibling { color: var(--c-primary); }
.dink-pricing-card__assigned { font-size: 12.5px; color: var(--c-text-muted); }
.dink-pricing-card__actions {
    display: flex; align-items: flex-start; gap: 8px; flex-shrink: 0; flex-wrap: wrap;
}

/* "Historia"/"Zmień stawkę" — native <details>/<summary>, no JS, as chip-style buttons instead of
   plain text links (feedback_bootstrap_collapse_toggle_default: .getOrCreateInstance().show() on a
   server-pre-shown panel toggles it CLOSED; <details open> sidesteps that entirely). Body renders
   full-width below the card's action row via flex-basis:100% (same wrap trick as
   .dink-fee-segments-scroll, Etap 6 §6). */
.dink-pricing-details { flex: 0 0 auto; }
.dink-pricing-details[open] { flex-basis: 100%; }
.dink-pricing-details > summary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; user-select: none;
    font-size: 13px; font-weight: 700; color: var(--c-primary);
    border: 1px solid var(--c-border-2, var(--c-border)); border-radius: 9px;
    padding: 9px 14px; background: var(--c-bg-card); white-space: nowrap;
}
.dink-pricing-details > summary:hover { background: var(--c-bg-hover, #F1F4F7); }
.dink-pricing-details > summary::-webkit-details-marker { display: none; }
.dink-pricing-details[open] > summary { background: var(--c-primary-tint); border-color: var(--c-primary); }
.dink-pricing-details__body { margin-top: 10px; }

/* Pushed to the far edge of .dink-pricing-card__actions (margin-left:auto on the wrapping FORM,
   the actual flex item — the button itself isn't a flex child of .__actions) so it doesn't sit at
   the same visual rhythm as "Zmień stawkę"/"Historia" — live-QA finding 2026-08-24: grouped flush
   next to the primary actions it read as a third equally-weighted option, not a rare destructive one. */
.dink-pricing-delete-form { margin-left: auto; }
.dink-pricing-delete {
    width: 36px; height: 36px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #F0B0B0; border-radius: 9px; color: #C13333; background: var(--c-bg-card);
}
.dink-pricing-delete:hover { background: #FDEEEE; }

/* "Anuluj" next to a form's submit button — plain quiet text, no border, so it doesn't compete
   with the primary green submit for attention. */
.dink-pricing-cancel-link {
    background: none; border: none; color: var(--c-text-muted); font-size: 13px; font-weight: 700;
    padding: 8px 10px; margin-left: 4px; cursor: pointer;
}
.dink-pricing-cancel-link:hover { color: var(--c-text); text-decoration: underline; }

/* "+ Dodaj taryfę" — collapsed by default (Cennik.dc.html shows it as a compact top-of-page
   trigger, not a permanently-open half-screen form). Same flex-basis:100%-on-open wrap trick as
   above so the panel drops below the toolbar row instead of squeezing into the button's column. */
.dink-pricing-add { flex: 0 0 auto; }
.dink-pricing-add[open] { flex: 1 1 100%; }

/* Solid green "commit" pill — shared by the "+ Dodaj taryfę" <summary> toggle and the plain
   <button type=submit> save actions inside the Cennik forms ("Dodaj taryfę", "Zapisz stawkę"), so a
   submit button and the toggle that opens its form read as the same weight of action (Etap 7 §2). */
.dink-btn-solid-success {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 13px; font-weight: 700; color: #fff; background: #157A3F;
    border: none; border-radius: 9px; padding: 9px 17px;
}
.dink-btn-solid-success:hover { background: #106333; color: #fff; }
.dink-pricing-add-toggle { list-style: none; user-select: none; }
.dink-pricing-add-toggle::-webkit-details-marker { display: none; }
.dink-pricing-add[open] > .dink-pricing-add-toggle {
    background: var(--c-bg-hover, #F1F4F7); color: var(--c-text); border: 1px solid var(--c-border);
}
.dink-pricing-add__panel {
    margin-top: 12px; padding: 18px 20px;
    background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 16px;
}

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

/* ─── Payer history offcanvas (docs/rozliczenia-kontekst-platnika-i-zawodnika-plan.md) ────── */
.dink-payer-history-row--current { background: #EAF1F9; border-radius: 8px; padding: 8px; margin: -8px -8px 12px -8px; }

/* ─── Invite role picker (grouped chips + scope caption) ─────── */
/* docs/club-invite-picker-ux-plan.md Etap 7 — real feedback 2026-09-02: the old bare-label chip
   row gave no hint what a role actually grants, so an admin had no way to judge "Trener" vs "Admin
   klubu" before clicking. Staff-group chips (Trener/Księgowość/Admin klubu) get a distinct amber
   checked-state to keep signalling "this one reaches the admin panel", same intent as the
   confirmation modal's existing warn callout for those same roles. */
.dink-role-group-label {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--c-text-muted); margin-bottom: 8px;
}
.dink-role-chip__label {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    text-align: left; min-width: 150px; padding: 8px 14px;
}
.dink-role-chip__caption { font-size: 11.5px; font-weight: 400; color: var(--c-text-muted); }
.dink-role-chip .btn-check:checked + .dink-role-chip__label .dink-role-chip__caption { opacity: .85; }
.dink-role-chip--staff .btn-check:checked + .dink-role-chip__label {
    background-color: var(--c-warn-bg); border-color: var(--c-warn); color: var(--c-warn);
}

/* Etap 0 (docs/rozliczenia-klubowe-plan.md §4 Etap 0): the "powiąż konto" submit button
   (bank-todo-card.html + the "Nierozpoznane nadpłaty" form) sits in a d-flex flex-wrap row next
   to two 200px-min-width fields. Without an explicit shrink guard a flex item can be squeezed
   below its own content width on narrow screens, clipping the label ("To konto należy do…" was
   reported cut off) — flex-shrink:0 makes it wrap to its own line instead. */
.dink-btn-link-account { flex: 0 0 auto; }

/* ─── Etap 2 (docs/skrzynka-z-banku-dwufazowo-plan.md): Faza B card typographic convention ───
   Makieta c01798eb-5f47-4090-9e1d-1e11faf3a442: "z wyciągu banku" (literal, non-editable bank
   fields) needs to read as visually distinct from "nasza decyzja" (the proposal/action this card
   asks the admin to make) — grey block on top, white block below, same pairing as
   .dink-status-chip--muted (#F1F4F7/#5E6A76, already proven AA-contrast elsewhere in this file). */
.dink-bank-raw {
    background: var(--c-bg-hover, #F1F4F7);
    padding: 10px 14px;
    border-radius: 8px 8px 0 0;
}
.dink-bank-raw__tag {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--c-text-muted);
}
.dink-bank-decision {
    padding: 12px 14px;
    background: var(--c-bg-card);
}
.dink-bank-decision__tag {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--c-primary); display: block; margin-bottom: 6px;
}