/* 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-warn-ink:      #6B4508;   /* text on --c-accent-tint (hall "na wyłączność" court) */
    --c-training:      #1E5E55;   /* hall training court (docs/hala-korty-v2-plan.md) */
    --c-training-tint: #E3F2EF;
    --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;
    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;
  }
  /* "Do zapłaty" / "Opłacone" / "Zawieszone" — Zawodnik/Taryfa/Kwota/[merged action-or-date]
     (Etap 3 §3, no checkbox column: bulk-select only exists on the "Bez taryfy" segment).
     "Zawieszone" shares this layout (same template branch — see fee-row.html's
     th:unless="${status == 'noplan'}") — reusing the class without listing it here would leave a
     suspended row with the "Bez taryfy" grid instead (feedback_css_class_reuse_carries_mobile_rules). */
  .dink-fee-row--due, .dink-fee-row--paid, .dink-fee-row--suspended {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name   amount"
      "plan   plan"
      "actions actions";
  }
  /* "Bez taryfy" — checkbox + Zawodnik/Grupa/Zapisany od (Etap 3 §3, D3: bulk-only, no per-row
     action column). */
  .dink-fee-row--noplan {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "check name"
      "check group"
      "check joined";
  }
  /* "Inne opłaty" (skladki-jednorazowe-oplaty-plan.md Etap 3) — same <tr>/<td> mobile-collapse
     trick, four shapes for the charge-detail page's due/paid/available/opt-in lists. Caught by
     VisualAuditCoverageTest's overflow gate: the raw <table> version (4 columns on the opt-in
     list) hard-overflowed 393px before this. */
  .dink-fee-row--charge-due {
    grid-template-columns: 1fr;
    grid-template-areas: "name" "actions";
  }
  .dink-fee-row--charge-paid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name date" "actions actions";
  }
  .dink-fee-row--charge-available {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "check name";
  }
  .dink-fee-row--charge-optin {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name status" "notes notes" "actions actions";
  }
  .dink-fee-row__check { grid-area: check; align-self: start; }
  .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__plan { grid-area: plan; }
  .dink-fee-row__group { grid-area: group; }
  .dink-fee-row__joined { grid-area: joined; justify-self: end; }
  .dink-fee-row__date { grid-area: date; justify-self: end; }
  .dink-fee-row__notes { grid-area: notes; }
  .dink-fee-row__status { grid-area: status; justify-self: end; }
  .dink-fee-row__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    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; }

  /* Etap 6 §6 — one 44px primary action per row (CLAUDE.md mobile-first touch target). The
     mark-paid button is the only per-row action that fires a mutation with one tap; the backdated-
     date and "Zmień taryfę" controls stay secondary/smaller on purpose. */
  .dink-fee-row__actions [data-testid="btn-mark-paid"] {
    min-height: 44px; padding-left: 16px; padding-right: 16px;
  }

}

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