/**
 * YCG CRM — Design Tokens (Wariant C: Apple Wallet × Stripe)
 * ─────────────────────────────────────────────────────────────────────
 * Ładowane PO ycg-crm.css → nadpisuje/uzupełnia istniejące zmienne.
 * Etap 1 redesignu (v1.6.0) — fundament tokens + body + saldo card.
 *
 * Po Etapie 7 (finalny redesign) plugin bumpniemy na v5.x
 * (numeracja od preview-v5.4-apple-wallet.html).
 */

:root {
  /* iOS System Colors */
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #f2f2f7;
  --surface-3: #e5e5ea;
  --border: rgba(60,60,67,.12);
  --border-2: rgba(60,60,67,.08);
  --separator: rgba(60,60,67,.18);

  --text: #1c1c1e;
  --text-2: #3a3a3c;
  --text-3: #636366;
  --muted: #8e8e93;

  /* Brand YCG */
  --brand: #1c2c4d;       /* granat YCG — primary UI accent */
  --brand-h: #2a3d65;
  --brand-bg: #e8eaf2;
  --ycg-red: #dc2626;     /* czerwień YCG — TYLKO identity (logo, flag stripe) */

  /* iOS systemic kolory dla statusów */
  --green: #34c759; --green-bg: #d8f4dd; --green-text: #0d6b2b;
  --red:   #ff3b30; --red-bg:   #ffe0de; --red-text:   #c40e0e;
  --orange:#ff9500; --orange-bg:#ffe8c2; --orange-text:#a85f00;
  --blue:  #007aff; --blue-bg:  #d6e9ff; --blue-text:  #0040a8;
  --purple:#af52de; --purple-bg:#f0deff; --purple-text:#6c19a8;

  /* Radius — Apple squircle */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-3xl: 28px;
  --r-full: 999px;

  /* Spacing 4px grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* Shadows — Apple subtle multi-layer */
  --sh-card:   0 1px 2px rgba(0,0,0,.05),  0 4px 12px rgba(0,0,0,.04);
  --sh-card-h: 0 2px 4px rgba(0,0,0,.06),  0 8px 24px rgba(0,0,0,.08);
  --sh-pop:    0 8px 24px rgba(0,0,0,.12), 0 24px 60px rgba(0,0,0,.10);
  --sh-fab:    0 6px 16px rgba(28,44,77,.32), 0 2px 6px rgba(28,44,77,.18);

  /* Type — SF Pro Display via -apple-system stack, Inter fallback */
  --t-xs: 11px;
  --t-sm: 13px;
  --t-base: 15px;
  --t-md: 17px;
  --t-lg: 20px;
  --t-xl: 24px;
  --t-2xl: 32px;
  --t-3xl: 44px;
  --t-4xl: 56px;

  /* Motion */
  --m-fast:   100ms cubic-bezier(.4,0,.2,1);
  --m-base:   250ms cubic-bezier(.4,0,.2,1);
  --m-spring: 400ms cubic-bezier(.32,.72,0,1);
}

[data-theme="dark"] {
  /* iOS dark — bg pure black, surface #1c1c1e (iOS systemBackground/2) */
  --bg: #000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --border: rgba(84,84,88,.36);
  --separator: rgba(84,84,88,.48);
  --text: #fff;
  --text-2: #ebebf5;
  --text-3: rgba(235,235,245,.6);
  --brand: #64a8ff;
  --brand-h: #93c5fd;
  --brand-bg: #1a2942;
  --green-bg: #0d2014;
  --red-bg: #2c0e0c;
  --orange-bg: #2e2106;
  --blue-bg: #0a1f3e;
  --purple-bg: #1a0d2c;
}

/* ────────────────────────────────────────────────────────────────────── */
/* Etap 1 — Fundament: body + typography                                  */
/* ────────────────────────────────────────────────────────────────────── */

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", system-ui, sans-serif;
  font-size: var(--t-base);
  line-height: 1.45;
  letter-spacing: -.01em;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Numeric — tabular nums dla wszystkich cyfr w UI (kwoty, daty) */
.num { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }

/* Container CRM — neutralne tło Apple */
.ycg-panel,
.ycg-panel-rozliczenia,
.ycg-panel-zawodnika,
.ycg-panel-trenera,
.ycg-panel-admina {
  background: var(--bg);
}

/* ────────────────────────────────────────────────────────────────────── */
/* Etap 1 — Hero wallet card (zgodne z preview v5.4 .wallet)              */
/* ────────────────────────────────────────────────────────────────────── */

.ycg-saldo-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  padding: var(--s-6) !important;
  margin: 0 auto var(--s-6) !important;
  max-width: 480px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.3) 100%),
    linear-gradient(135deg, var(--brand) 0%, #2c4374 60%, #4a6298 100%);
  background-blend-mode: overlay, normal;
  box-shadow: 0 10px 30px rgba(28,44,77,.18), 0 4px 12px rgba(28,44,77,.12);
  border-top: 3px solid var(--ycg-red); /* heraldyczny akcent YCG */
  /* Override starego CSS — display: flex z ycg-crm.css */
  display: block !important;
  align-items: initial !important;
  gap: 0 !important;
  border: none;
}

/* Radial highlight (góra prawa) */
.ycg-saldo-card::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.18) 0%, transparent 60%);
  pointer-events: none;
}

/* Radial shadow (dół lewa) */
.ycg-saldo-card::after {
  content: '';
  position: absolute;
  bottom: -50%; left: -20%;
  width: 80%; height: 150%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, transparent 60%);
  pointer-events: none;
}

/* Watermark logo YCG — prawy dolny róg, białe sylwetka, rotate
   v1.6.41: SVG/transparent PNG zamiast JPG — używamy proporzec (sam kształt,
   bez napisu YACHT CLUB GDAŃSK) bo na 140×110 napis i tak by się nie zmieścił. */
.ycg-saldo-card-watermark {
  position: absolute;
  right: -10px; bottom: -16px;
  width: 140px; height: 110px;
  background-image: url('../img/ycg-logo-proporzec.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .22;
  filter: brightness(0) invert(1);
  pointer-events: none;
  z-index: 1;
  transform: rotate(-8deg);
}

/* Stary .ycg-saldo-card-icon — ukrywamy (nowa struktura nie używa) */
.ycg-saldo-card-icon { display: none; }

/* TOP: label + chip statusu */
.ycg-saldo-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  margin-bottom: var(--s-6);
}

.ycg-saldo-card-label {
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .85;
  font-weight: 600;
}

.ycg-saldo-card-chip {
  font-size: var(--t-xs);
  background: rgba(255,255,255,.18);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-weight: 600;
  letter-spacing: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* VALUE: duża cyfra hero */
.ycg-saldo-card-value {
  font-size: var(--t-3xl);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  position: relative;
  z-index: 2;
  margin: 0 0 var(--s-6);
}

.ycg-saldo-card-value-unit {
  font-size: 55%;
  opacity: .7;
  font-weight: 500;
  margin-left: 6px;
}

/* ROWS: rozbicie Przelew + Gotówka EUR + Gotówka PLN — flex row horizontal */
.ycg-saldo-card-rows {
  position: relative;
  z-index: 2;
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,.18);
  /* Override starego flex: 1; flex-direction: column z ycg-crm.css */
  display: flex !important;
  flex-direction: row !important;
  flex: 0 1 auto !important;
  gap: var(--s-6) !important;
  flex-wrap: wrap;
}

.ycg-saldo-card-rows > div {
  flex: 0 0 auto;
  min-width: 80px;
}

.ycg-saldo-card-row-label {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .75;
  margin-bottom: 4px;
  font-weight: 600;
}

.ycg-saldo-card-row-val {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.01em;
}

/* v1.6.37: Subtelny wiersz "Do zapłaty gotówką: 65 € · 330 zł" pod saldo hero —
   bez ramki/separatora (oddzielony marginesem), żeby wizualnie się NIE łączył
   z saldem nadwyżkowym. Tekst delikatnie przyciemniony. */
.ycg-saldo-card-cash-due {
  position: relative;
  z-index: 2;
  margin-top: var(--s-2);
  margin-bottom: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3) 0;
  border-top: 1px solid rgba(255,255,255,.18);
}

.ycg-saldo-card-cash-label {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .75;
  font-weight: 600;
}

.ycg-saldo-card-cash-vals {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.ycg-saldo-card-cash-sep {
  opacity: .5;
  font-weight: 400;
}

/* Stara struktura .ycg-saldo-card-row (używana w profil-zawodnika.php) —
   override żeby na granat/zielonym hero saldo bg tekst był BIAŁY (a nie #4b5563) */
.ycg-saldo-card .ycg-saldo-card-row {
  color: rgba(255,255,255,.85) !important;
  border-bottom-color: rgba(255,255,255,.18) !important;
  padding: var(--s-3) 0 !important;
  /* Wymuszamy pełną szerokość wiersza żeby justify-content: space-between
     mogło rozsunąć label od value (parent .ycg-saldo-card-rows ma flex:0 0 auto
     dla rows w hero saldo /moje-rozliczenia/ — kolizja z profil-zawodnika) */
  width: 100% !important;
  flex: 1 1 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: var(--s-4) !important;
}

.ycg-saldo-card .ycg-saldo-card-row > span:first-child {
  color: rgba(255,255,255,.85) !important;
  font-weight: 500;
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ycg-saldo-card .ycg-saldo-card-row > span:last-child,
.ycg-saldo-card .ycg-saldo-card-row strong {
  color: #fff !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: -.01em;
}

/* Total — biały + duża cyfra (niezależnie od --ok/--debt) */
.ycg-saldo-card .ycg-saldo-card-total {
  color: #fff !important;
  border-top: 1px solid rgba(255,255,255,.25) !important;
  margin-top: var(--s-3);
  padding-top: var(--s-3) !important;
  border-bottom: none !important;
  /* Pełna szerokość + space-between żeby tytuł i kwota nie sklejały się */
  width: 100% !important;
  flex: 1 1 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: var(--s-4) !important;
}

.ycg-saldo-card .ycg-saldo-card-total > span:first-child {
  color: #fff !important;
  font-weight: 600;
  font-size: var(--t-md);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ycg-saldo-card .ycg-saldo-card-total > span:last-child,
.ycg-saldo-card .ycg-saldo-card-total strong {
  color: #fff !important;
  font-size: var(--t-2xl) !important;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* DETAILS: zwijane "Należności / Wpłaty" — szczegóły rachunku */
.ycg-saldo-card-details {
  position: relative;
  z-index: 2;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: var(--t-sm);
}

.ycg-saldo-card-details summary {
  cursor: pointer;
  opacity: .8;
  font-weight: 500;
  letter-spacing: -.01em;
  list-style: none;
  user-select: none;
}

.ycg-saldo-card-details summary::-webkit-details-marker { display: none; }

.ycg-saldo-card-details summary::after {
  content: "▾";
  margin-left: 4px;
  opacity: .6;
  transition: transform var(--m-fast);
  display: inline-block;
}

.ycg-saldo-card-details[open] summary::after {
  transform: rotate(180deg);
}

.ycg-saldo-card-detail-row {
  display: flex;
  justify-content: space-between;
  padding: var(--s-2) 0;
  opacity: .85;
}

.ycg-saldo-card-detail-row strong { font-weight: 600; }

/* Warianty kolorystyczne karty */
.ycg-saldo-card--ok {
  background:
    linear-gradient(135deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.3) 100%),
    linear-gradient(135deg, #1a4d3a 0%, #266b50 60%, #3a9165 100%);
  background-blend-mode: overlay, normal;
}

.ycg-saldo-card--debt {
  background:
    linear-gradient(135deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.3) 100%),
    linear-gradient(135deg, var(--brand) 0%, #2c4374 60%, #4a6298 100%);
  background-blend-mode: overlay, normal;
}

/* ────────────────────────────────────────────────────────────────────── */
/* Etap 2 — Nav tiles (delikatne podkręcenie starych)                      */
/* Decyzja 2026-05-21: po 4 nieudanych iteracjach Apple Wallet style,       */
/* wracamy do oryginalnego layoutu (vertical, biały, ikona na górze) —      */
/* subtelny polish + kolor ikony per kategoria (bez tła, bez box-a).      */
/* ────────────────────────────────────────────────────────────────────── */

.ycg-tile {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  transition: transform var(--m-fast), box-shadow var(--m-fast);
}

.ycg-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-card-h);
}

.ycg-tile:active {
  transform: scale(.98);
  transition: transform var(--m-fast);
}

/* Per-kategoria kolor SVG ikony (Lucide stroke=currentColor) */
.ycg-tile-icon--blue   { color: var(--blue); }
.ycg-tile-icon--orange { color: var(--orange); }
.ycg-tile-icon--green  { color: var(--green); }
.ycg-tile-icon--purple { color: var(--purple); }
.ycg-tile-icon--red    { color: var(--red); }

/* Subtelny tinted bg + colored shadow per kategoria (Apple Wallet vibe).
   Kafelek przybiera ultra-light pastel matching kolor ikony +
   delikatny barwny cień pod kartą (jak halo Apple Wallet card). */
.ycg-tile:has(.ycg-tile-icon--green) {
  background: linear-gradient(180deg, var(--green-bg) 0%, #fff 80%);
  box-shadow: 0 1px 2px rgba(52,199,89,.08), 0 4px 12px rgba(52,199,89,.08);
}
.ycg-tile:has(.ycg-tile-icon--blue) {
  background: linear-gradient(180deg, var(--blue-bg) 0%, #fff 80%);
  box-shadow: 0 1px 2px rgba(0,122,255,.08), 0 4px 12px rgba(0,122,255,.08);
}
.ycg-tile:has(.ycg-tile-icon--orange) {
  background: linear-gradient(180deg, var(--orange-bg) 0%, #fff 80%);
  box-shadow: 0 1px 2px rgba(255,149,0,.08), 0 4px 12px rgba(255,149,0,.08);
}
.ycg-tile:has(.ycg-tile-icon--purple) {
  background: linear-gradient(180deg, var(--purple-bg) 0%, #fff 80%);
  box-shadow: 0 1px 2px rgba(175,82,222,.08), 0 4px 12px rgba(175,82,222,.08);
}
.ycg-tile:has(.ycg-tile-icon--red) {
  background: linear-gradient(180deg, var(--red-bg) 0%, #fff 80%);
  box-shadow: 0 1px 2px rgba(255,59,48,.08), 0 4px 12px rgba(255,59,48,.08);
}

/* Hover: silniejszy colored shadow (Apple wallet card lift) */
.ycg-tile:has(.ycg-tile-icon--green):hover  { box-shadow: 0 2px 4px rgba(52,199,89,.12),  0 8px 24px rgba(52,199,89,.16); }
.ycg-tile:has(.ycg-tile-icon--blue):hover   { box-shadow: 0 2px 4px rgba(0,122,255,.12), 0 8px 24px rgba(0,122,255,.16); }
.ycg-tile:has(.ycg-tile-icon--orange):hover { box-shadow: 0 2px 4px rgba(255,149,0,.12), 0 8px 24px rgba(255,149,0,.16); }
.ycg-tile:has(.ycg-tile-icon--purple):hover { box-shadow: 0 2px 4px rgba(175,82,222,.12),0 8px 24px rgba(175,82,222,.16); }
.ycg-tile:has(.ycg-tile-icon--red):hover    { box-shadow: 0 2px 4px rgba(255,59,48,.12), 0 8px 24px rgba(255,59,48,.16); }

/* Fallback dla starszych przeglądarek bez :has() — używamy klasy
   ycg-tile--tint-<color> jako alternatywa (można dodać w PHP w przyszłości). */
@supports not selector(:has(*)) {
  .ycg-tile { background: var(--surface); }
}

/* ────────────────────────────────────────────────────────────────────── */
/* Etap 3 — Listy wierszy (list-row z preview v5.4)                       */
/* ────────────────────────────────────────────────────────────────────── */

/* Karta treningu — adaptacja na list-row style */
.ycg-trening-card {
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-2);
  box-shadow: var(--sh-card);
  transition: transform var(--m-fast), box-shadow var(--m-fast);
}

.ycg-trening-card:hover {
  box-shadow: var(--sh-card-h);
  transform: translateY(-1px);
}

/* Status border-left — pasek wąski, kolor z tokens */
.ycg-stan--odwołany   { border-left: 3px solid var(--red); }
.ycg-stan--zakończony { border-left: 3px solid var(--green); }
.ycg-trening--needs-action { border-left: 3px solid var(--orange); }
.ycg-trening--past { opacity: .65; }

/* Header: horizontal flex z gap */
.ycg-trening-header {
  align-items: center;
  gap: var(--s-3);
}

/* Date badge: tinted box jak list-row-icon (38×38, blue-bg + blue) */
.ycg-trening-date {
  min-width: 44px;
  width: 44px;
  height: 44px;
  background: var(--blue-bg);
  color: var(--blue-text);
  border-radius: var(--r-md);
  padding: 4px;
  justify-content: center;
}

.ycg-date-day   { font-size: 9px; font-weight: 600; opacity: .75; line-height: 1; }
.ycg-date-num   { font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.ycg-date-month { font-size: 9px; font-weight: 600; opacity: .75; line-height: 1; }

/* Info (tytuł + meta) zgodne z list-row-body / list-row-title / list-row-meta */
.ycg-trening-info {
  gap: 2px;
  font-size: var(--t-sm);
}

.ycg-trening-info strong {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.015em;
  line-height: 1.3;
}

.ycg-trening-info > span,
.ycg-trening-info .ycg-cel {
  font-size: var(--t-sm);
  color: var(--text-3);
  letter-spacing: -.005em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ycg-trening-info .ycg-meta-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Status badge w prawym górnym */
.ycg-trening-status { align-self: center; }

/* Separator deklaracji TAK/NIE */
.ycg-deklaracja-btns {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--separator);
  gap: var(--s-2);
}

/* Section title — "Nadchodzące treningi" itp. */
.ycg-panel h3 {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  margin: var(--s-6) 0 var(--s-3);
}

/* ── Lista wyjazdów — list-row style (zgodne z .ycg-trening-card) ─── */
.ycg-wyjazd-list {
  gap: var(--s-2);
}

.ycg-wyjazd-card {
  border: none;
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--sh-card);
  border-left-width: 3px;
  transition: transform var(--m-fast), box-shadow var(--m-fast);
}

.ycg-wyjazd-card:hover {
  box-shadow: var(--sh-card-h);
  transform: translateY(-1px);
}

.ycg-wyjazd-card--upcoming { border-left-color: var(--blue); }
.ycg-wyjazd-card--past     { border-left-color: var(--green); }

.ycg-wyjazd-card-title {
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--text);
  line-height: 1.3;
  /* zezwalamy na zawijanie zamiast obcinania kropkami */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.ycg-wyjazd-card-meta {
  font-size: var(--t-sm);
  color: var(--text-3);
  letter-spacing: -.005em;
  gap: var(--s-3);
}

.ycg-wyjazd-card-koszt {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}

.ycg-wyjazd-card-sub {
  font-size: var(--t-xs);
  font-weight: 500;
}

/* Fazy wyjazdu — chipy w karcie list-row (Apple Wallet labels)
   v1.6.43: width 100% + flex-basis 100% — chipy zajmują pełny rząd
   pod top row (body+aside), zawsze poziomo bez zwężania. */
.ycg-wyjazd-card-fazy {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s-3);
  width: 100%;
  flex-basis: 100%;
}

.ycg-wyjazd-faza-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface-2);
  padding: 3px 9px;
  border-radius: var(--r-full);
  letter-spacing: -.005em;
}

.ycg-wyjazd-faza-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c, var(--brand));
  flex-shrink: 0;
}

/* ── Karty rozliczeń miesięcznych (moje-rozliczenia) ─────────── */
.ycg-rozl-card {
  border: none !important;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  margin-bottom: var(--s-2);
  transition: box-shadow var(--m-fast);
}

.ycg-rozl-card:hover {
  box-shadow: var(--sh-card-h);
}

.ycg-rozl-card-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--separator);
  padding: var(--s-3) var(--s-4);
}

.ycg-rozl-month {
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
}

.ycg-rozl-month svg {
  color: var(--blue);
}

.ycg-rozl-total {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Status pills w kartach rozliczeń */
.ycg-rozl-status--closed   { background: var(--green-bg); color: var(--green-text); }
.ycg-rozl-status--reopened { background: var(--orange-bg); color: var(--orange-text); }
.ycg-rozl-status--prognoza { background: var(--blue-bg); color: var(--blue-text); }

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 2 — Przyciski Apple style (squircle, tactile, multi-layer shadow) */
/* ────────────────────────────────────────────────────────────────────── */

.ycg-btn {
  border-radius: var(--r-md);
  font-weight: 500;
  letter-spacing: -.01em;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-card);
  transition: transform var(--m-fast), box-shadow var(--m-fast), background var(--m-fast);
}

.ycg-btn:hover {
  background: var(--surface-2);
  box-shadow: var(--sh-card-h);
  transform: none;  /* nie liftuj normalnego przycisku */
}

.ycg-btn:active {
  transform: scale(.97);
  transition: transform var(--m-fast);
}

/* Primary — brand granat (lub iOS blue jeśli wolimy) */
.ycg-btn--primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 1px 2px rgba(28,44,77,.15), 0 2px 8px rgba(28,44,77,.12);
}

.ycg-btn--primary:hover {
  background: var(--brand-h);
  border-color: var(--brand-h);
  box-shadow: 0 2px 4px rgba(28,44,77,.18), 0 4px 12px rgba(28,44,77,.18);
  transform: none;
}

/* Green / Red — iOS palette (pełen kolor, lift hover) */
.ycg-btn--green {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 1px 2px rgba(52,199,89,.18), 0 2px 8px rgba(52,199,89,.16);
}
.ycg-btn--green:hover {
  background: #28a745;
  border-color: #28a745;
  box-shadow: 0 2px 4px rgba(52,199,89,.22), 0 4px 12px rgba(52,199,89,.22);
}

.ycg-btn--red {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: 0 1px 2px rgba(255,59,48,.18), 0 2px 8px rgba(255,59,48,.16);
}
.ycg-btn--red:hover {
  background: #e02d23;
  border-color: #e02d23;
  box-shadow: 0 2px 4px rgba(255,59,48,.22), 0 4px 12px rgba(255,59,48,.22);
}

/* Outline — bez tła, brand obwódka + tekst */
.ycg-btn--outline {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: none;
}
.ycg-btn--outline:hover {
  background: var(--brand-bg);
  box-shadow: none;
}

/* Ghost — bez border, subtle */
.ycg-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-3);
  box-shadow: none;
}
.ycg-btn--ghost:hover {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}

/* Danger */
.ycg-btn--danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: 0 1px 2px rgba(255,59,48,.18);
}
.ycg-btn--danger:hover {
  background: #c0392b;
  border-color: #c0392b;
}

/* Active state pill — focus ring iOS */
.ycg-btn--active {
  box-shadow: 0 0 0 3px var(--brand-bg), var(--sh-card-h);
}

/* Rozmiary */
.ycg-btn--small {
  padding: 6px 14px;
  font-size: var(--t-sm);
  border-radius: var(--r-md);
}
.ycg-btn--xs {
  padding: 4px 10px;
  font-size: var(--t-xs);
  border-radius: var(--r-sm);
}

/* Wide — pełna szerokość */
.ycg-btn--wide {
  width: 100%;
  justify-content: center;
}

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 2 — Formularze: inputy, selecty, textarea Apple style             */
/* (zakres TYLKO .ycg-panel żeby nie wpływać na Blocksy / WP)            */
/* ────────────────────────────────────────────────────────────────────── */

.ycg-panel input[type="text"],
.ycg-panel input[type="number"],
.ycg-panel input[type="date"],
.ycg-panel input[type="time"],
.ycg-panel input[type="email"],
.ycg-panel input[type="password"],
.ycg-panel input[type="tel"],
.ycg-panel input[type="url"],
.ycg-panel input[type="search"],
.ycg-panel select,
.ycg-panel textarea {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: var(--t-base);
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  letter-spacing: -.01em;
  transition: border-color var(--m-fast), box-shadow var(--m-fast);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.ycg-panel input[type="text"]:focus,
.ycg-panel input[type="number"]:focus,
.ycg-panel input[type="date"]:focus,
.ycg-panel input[type="time"]:focus,
.ycg-panel input[type="email"]:focus,
.ycg-panel input[type="password"]:focus,
.ycg-panel input[type="tel"]:focus,
.ycg-panel input[type="url"]:focus,
.ycg-panel input[type="search"]:focus,
.ycg-panel select:focus,
.ycg-panel textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-bg);
}

.ycg-panel input:disabled,
.ycg-panel select:disabled,
.ycg-panel textarea:disabled {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

/* Select — custom strzałka iOS (zamiast brzydkiej domyślnej) */
.ycg-panel select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

/* Checkbox / radio — większy touch target, zachowuj native UI */
.ycg-panel input[type="checkbox"],
.ycg-panel input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);  /* iOS-style checked color */
  cursor: pointer;
}

/* Textarea */
.ycg-panel textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* Mobile touch target — min 44px wysokości dla inputów (iOS HIG) */
@media (max-width: 768px) {
  .ycg-panel input[type="text"],
  .ycg-panel input[type="number"],
  .ycg-panel input[type="date"],
  .ycg-panel input[type="time"],
  .ycg-panel input[type="email"],
  .ycg-panel input[type="password"],
  .ycg-panel input[type="tel"],
  .ycg-panel select {
    min-height: 44px;
    font-size: 16px;  /* zapobiega auto-zoom iOS */
  }
}

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 3 — Tabele Apple style (subtelny iOS Settings list)               */
/* ────────────────────────────────────────────────────────────────────── */

.ycg-table {
  font-size: var(--t-sm);
  letter-spacing: -.005em;
}

.ycg-table th {
  background: var(--surface-2);
  color: var(--text-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--separator);
}

.ycg-table td {
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--border-2);
  /* color: var(--text) — usunięte, żeby .ycg-td-positive/--negative działały */
}

/* Klasy kolorystyczne komórek (saldo positive/negative) — wzmocnione tokens */
.ycg-table td.ycg-td-positive,
.ycg-td-positive { color: var(--green-text); font-weight: 600; }

.ycg-table td.ycg-td-negative,
.ycg-td-negative { color: var(--red-text); font-weight: 600; }

.ycg-table tbody tr:hover {
  background: var(--surface-2);
}

.ycg-table tbody tr:last-child td {
  border-bottom: none;
}

/* Tabular nums dla całej tabeli (kwoty, daty - precyzyjne wyrównanie) */
.ycg-table td,
.ycg-table th {
  font-variant-numeric: tabular-nums;
}

/* Total row — Apple Settings list footer */
.ycg-table .ycg-total td {
  font-weight: 700;
  background: var(--brand-bg);
  color: var(--brand);
  border-top: 1px solid var(--separator);
}

/* Cell color helpers — tekst zamiast całych komórek */
.ycg-text-red   { color: var(--red-text); }
.ycg-text-green { color: var(--green-text); }
.ycg-text-muted { color: var(--text-3); }

/* Table card — Apple wrapper z subtelnym shadow */
.ycg-table-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  margin-bottom: var(--s-4);
  border: none;
}

.ycg-table-card .ycg-table-wrap {
  border-radius: var(--r-lg);
}

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 3 — Section boxes (howpay, prognoza, info)                        */
/* ────────────────────────────────────────────────────────────────────── */

.ycg-howpay-box,
.ycg-prognoza-box {
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
  box-shadow: var(--sh-card);
}

.ycg-howpay-title,
.ycg-prognoza-header {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.ycg-howpay-title svg,
.ycg-prognoza-header svg {
  color: var(--blue);
}

/* Howpay method (przelew/gotówka) — wallet-row style */
.ycg-howpay-method {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--separator);
}

.ycg-howpay-method:last-child {
  border-bottom: none;
}

.ycg-howpay-method-header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -.015em;
}

.ycg-howpay-method-header svg {
  color: var(--brand);
}

.ycg-howpay-kwota {
  margin-left: auto;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ycg-howpay-details {
  font-size: var(--t-sm);
  color: var(--text-3);
}

.ycg-howpay-details th {
  font-weight: 500;
  text-align: left;
  padding: 4px 0;
  padding-right: var(--s-3);
}

.ycg-howpay-details td {
  padding: 4px 0;
  color: var(--text);
}

.ycg-howpay-account,
.ycg-howpay-tytul {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  user-select: all;
}

.ycg-howpay-copy {
  background: var(--brand-bg);
  border: none;
  border-radius: var(--r-sm);
  padding: 2px 6px;
  cursor: pointer;
  font-size: 14px;
  margin-left: 4px;
}

.ycg-howpay-copy:hover {
  background: var(--brand);
  color: #fff;
}

.ycg-howpay-note {
  font-size: var(--t-sm);
  color: var(--text-3);
  margin: var(--s-2) 0 0;
  letter-spacing: -.005em;
}

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 3 — Section title (h3 typu „Nadchodzące treningi")                */
/* ────────────────────────────────────────────────────────────────────── */

.ycg-section-title {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  border-bottom: none;
  margin: var(--s-6) 0 var(--s-3);
  padding-bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.ycg-section-title svg {
  width: 18px;
  height: 18px;
  color: var(--brand);
}

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 3 — Help boxes (info/hints)                                       */
/* ────────────────────────────────────────────────────────────────────── */

.ycg-help {
  background: var(--blue-bg);
  border-left: 3px solid var(--blue);
  color: var(--text-2);
  font-size: var(--t-sm);
  padding: var(--s-3) var(--s-4);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  letter-spacing: -.005em;
}

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 3 — Polish stron: KALENDARZ                                       */
/* ────────────────────────────────────────────────────────────────────── */

/* Topbar — bez ostrej linii pod */
.ycg-kal-topbar {
  border-bottom: 1px solid var(--separator);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-5);
}

.ycg-kal-title {
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}

.ycg-kal-title svg {
  color: var(--brand);
}

/* Legenda — Apple chips */
.ycg-kal-legenda {
  gap: var(--s-2);
}

.ycg-kal-leg-item {
  background: var(--surface-2);
  border: none;
  border-radius: var(--r-full);
  padding: 4px 12px;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: -.005em;
}

/* Grid kart miesięcy */
.ycg-kal-grid {
  gap: var(--s-3);
}

/* Karta miesiąca — Apple Settings card */
.ycg-kal-month {
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-3) var(--s-3);
  box-shadow: var(--sh-card);
  transition: transform var(--m-fast), box-shadow var(--m-fast);
}

.ycg-kal-month:hover {
  box-shadow: var(--sh-card-h);
  transform: translateY(-2px);
}

/* Aktualny miesiąc — subtle brand accent zamiast obwódki */
.ycg-kal-month--current {
  border: none;
  box-shadow: var(--sh-card-h);
  background: linear-gradient(180deg, var(--brand-bg) 0%, var(--surface) 40%);
}

/* Nagłówek miesiąca */
.ycg-kal-month-name {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-2);
  border-bottom: 1px solid var(--separator);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
}

.ycg-kal-month--current .ycg-kal-month-name {
  color: var(--brand);
}

.ycg-kal-expand-btn {
  color: var(--muted);
  border-radius: var(--r-sm);
}

.ycg-kal-expand-btn:hover {
  background: var(--brand-bg);
  color: var(--brand);
  opacity: 1;
}

/* Dni tygodnia */
.ycg-kal-wday {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: .04em;
}

.ycg-kal-wday.weekend {
  color: var(--red);
}

/* Komórki dni */
.ycg-kal-day {
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  transition: background var(--m-fast);
}

.ycg-kal-day-num {
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.01em;
}

.ycg-kal-day--weekend .ycg-kal-day-num {
  color: var(--red);
}

.ycg-kal-day--past { opacity: .5; }

/* Dzisiaj — brand background z białym numerem (iOS Calendar style) */
.ycg-kal-day--today {
  background: var(--brand);
}

.ycg-kal-day--today .ycg-kal-day-num,
.ycg-kal-day--today.ycg-kal-day--weekend .ycg-kal-day-num {
  color: #fff;
  font-weight: 700;
}

.ycg-kal-day--has-events:hover {
  background: var(--brand-bg);
}

.ycg-kal-trainer .ycg-kal-day:not(.ycg-kal-day--empty):hover {
  background: var(--brand-bg);
}

/* Mobile — większy touch target */
@media (max-width: 640px) {
  .ycg-kal-day { min-height: 44px; }
}

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 3 — Polish stron: PANEL TRENERA                                   */
/* ────────────────────────────────────────────────────────────────────── */

/* Karta zawodnika — Apple list-row */
.ycg-zawodnik-card {
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--sh-card);
  transition: transform var(--m-fast), box-shadow var(--m-fast);
}

.ycg-zawodnik-card:hover {
  box-shadow: var(--sh-card-h);
  transform: translateY(-1px);
}

.ycg-zawodnik-card-name {
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
}

.ycg-zawodnik-card-meta {
  font-size: var(--t-sm);
  color: var(--text-3);
  letter-spacing: -.005em;
}

.ycg-zawodnik-dates {
  font-size: var(--t-xs);
  color: var(--muted);
}

/* Ramka załogi — Apple subtle tinted container */
.ycg-zaloga-frame {
  background: var(--blue-bg);
  border: none;
  border-radius: var(--r-xl);
  margin-bottom: var(--s-3);
  padding: 0;
}

.ycg-zaloga-frame--solo {
  background: var(--surface-2);
}

.ycg-zaloga-frame-hdr {
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,.04);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--blue-text);
  text-transform: uppercase;
}

.ycg-zaloga-frame--solo .ycg-zaloga-frame-hdr {
  color: var(--text-3);
}

.ycg-zaloga-sezon {
  font-weight: 500;
  opacity: .8;
}

.ycg-zaloga-frame-body {
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ycg-zaloga-frame-body .ycg-zawodnik-card {
  border: none;
  /* Karta wewnątrz ramki — zachowuje shadow ale subtler */
  box-shadow: var(--sh-card);
}

/* Paliwo — sekcja */
.ycg-paliwo-suma {
  font-size: var(--t-base);
  color: var(--text-2);
}

.ycg-paliwo-suma strong {
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

/* Saldo row — Apple Settings list */
.ycg-saldo-row {
  font-size: var(--t-sm);
  color: var(--text-2);
  border-bottom: 1px solid var(--separator);
  padding: var(--s-3) 0;
}

/* Alerty dokumentów */
.ycg-doc-alert {
  background: var(--surface);
  border: none;
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--sh-card);
  font-size: var(--t-sm);
  color: var(--text);
  letter-spacing: -.005em;
}

.ycg-doc-alert--warning {
  border-left-color: var(--orange);
  background: linear-gradient(90deg, var(--orange-bg) 0%, var(--surface) 30%);
}

.ycg-doc-alert--warning svg {
  color: var(--orange-text);
}

.ycg-doc-alert--error {
  border-left-color: var(--red);
  background: linear-gradient(90deg, var(--red-bg) 0%, var(--surface) 30%);
}

.ycg-doc-alert--error svg {
  color: var(--red-text);
}

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 3 — Polish stron: /ROZLICZENIA/ (Miesiąc + Wpłaty)                */
/* ────────────────────────────────────────────────────────────────────── */

/* Walidacja card */
.ycg-miesiac-walidacja {
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-3);
}

.ycg-miesiac-sub {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
  margin: 0 0 var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.ycg-miesiac-sub svg {
  color: var(--brand);
}

/* Składka card (z dzisiejszego dodatku v1.5.60) */
.ycg-miesiac-skladka {
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-3);
}

/* Miesiąc actions (przyciski Zamknij/Otwórz) */
.ycg-miesiac-actions {
  display: flex;
  gap: var(--s-2);
}

/* Picker miesiąca */
.ycg-miesiac-picker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

/* Tabela miesiąca */
.ycg-miesiac-table {
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.ycg-miesiac-table th {
  background: var(--surface-2);
}

/* Korekty inline (wiersz pod zawodnikiem) */
.ycg-miesiac-korekty-list {
  background: linear-gradient(90deg, var(--orange-bg) 0%, var(--surface-2) 100%);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
}

.ycg-miesiac-korekta-item {
  background: var(--surface);
  border: none;
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-size: var(--t-xs);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  font-variant-numeric: tabular-nums;
}

/* Koszty dodatkowe form */
.ycg-koszty-box {
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-4);
}

.ycg-koszty-form {
  background: var(--surface-2);
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}

.ycg-koszty-form-title {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
  margin-bottom: var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.ycg-koszty-form-title svg {
  color: var(--brand);
}

.ycg-koszty-list-item {
  background: var(--surface);
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin-bottom: var(--s-2);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 3 — Polish stron: /WYJAZDY/?wyjazd_id=N (edytor kosztorysu)       */
/* ────────────────────────────────────────────────────────────────────── */

/* Pasek faz (Szacunkowy / Przedwyjazdowy / Końcowy) */
.ycg-faza-btn {
  background: transparent;
  border: none;
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--text-3);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--m-fast);
}

.ycg-faza-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.ycg-faza-btn.active {
  background: var(--brand-bg);
  color: var(--brand);
  font-weight: 600;
}

/* Tabela pozycji kosztorysu */
.ycg-poz-table {
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Sekcja gotówki EUR/PLN */
.ycg-cash-section {
  background: var(--orange-bg);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--sh-card);
  margin: var(--s-4) 0;
}

.ycg-cash-section--pln {
  background: var(--green-bg);
}

.ycg-cash-summary {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
  font-size: var(--t-sm);
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: center;
}

.ycg-cash-table {
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
}

.ycg-cash-form {
  background: var(--surface);
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--sh-card);
  margin: var(--s-2) 0;
}

.ycg-cash-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
  margin: var(--s-3) 0;
}

.ycg-cash-form-actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}

/* Wpłaty gotówkowe — chipy "✅ X €" */
.ycg-cash-entry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-bg);
  color: var(--green-text);
  border-radius: var(--r-full);
  padding: 3px 10px;
  font-size: var(--t-xs);
  font-weight: 500;
  margin: 2px;
  font-variant-numeric: tabular-nums;
}

/* Tabela wyników wyjazdu (Przedwyjazdowy / Końcowy) */
.ycg-platnosci-table,
.ycg-konc-table {
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Uczestnicy wiersze */
.ycg-ucz-row {
  background: var(--surface);
  border: none;
  border-bottom: 1px solid var(--separator);
  padding: var(--s-2) var(--s-4);
}

.ycg-ucz-row:last-child { border-bottom: none; }

/* Presety kosztów (Wyżywienie EUR, Motorówka, Trener...) */
.ycg-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
}

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 3 — Polish stron: /PANEL-ADMINA/                                  */
/* ────────────────────────────────────────────────────────────────────── */

/* Tabs */
.ycg-admin-tabs {
  display: flex;
  gap: var(--s-1);
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 4px;
  margin-bottom: var(--s-4);
  width: fit-content;
  box-shadow: var(--sh-card);
}

.ycg-admin-tab {
  background: transparent;
  border: none;
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--text-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--m-fast);
}

.ycg-admin-tab:hover {
  background: var(--surface);
  color: var(--text);
}

.ycg-admin-tab--active {
  background: var(--surface);
  color: var(--brand);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

/* User cards (zakładka Użytkownicy) */
.ycg-admin-user-card {
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--sh-card);
  margin-bottom: var(--s-2);
  transition: transform var(--m-fast), box-shadow var(--m-fast);
}

.ycg-admin-user-card:hover {
  box-shadow: var(--sh-card-h);
  transform: translateY(-1px);
}

.ycg-admin-user-name {
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
}

.ycg-admin-login {
  font-size: var(--t-sm);
  color: var(--text-3);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
}

.ycg-admin-user-meta {
  font-size: var(--t-sm);
  color: var(--text-3);
  margin-top: var(--s-1);
}

/* Sekcje Bezpieczeństwo */
.ycg-admin-sec-section {
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--sh-card);
  margin-bottom: var(--s-3);
}

.ycg-admin-sec-title {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
  margin: 0 0 var(--s-2);
}

.ycg-admin-sec-note {
  font-size: var(--t-sm);
  color: var(--text-3);
}

.ycg-admin-sec-danger {
  background: var(--red-bg);
  border: none;
  border-left: 3px solid var(--red);
  border-radius: var(--r-md);
  padding: var(--s-4);
}

.ycg-admin-sec-danger-title {
  color: var(--red-text);
  font-weight: 600;
}

.ycg-admin-sec-danger-note {
  font-size: var(--t-sm);
  color: var(--text-2);
}

/* Auth log table */
.ycg-auth-log-table {
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: var(--t-sm);
}

/* Topbar admin (info "Jesteś zalogowany jako…") */
.ycg-admin-topbar {
  background: var(--brand-bg);
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-4);
  margin-bottom: var(--s-3);
  font-size: var(--t-sm);
  color: var(--brand);
}

.ycg-admin-jestem {
  font-weight: 500;
}

/* Sessions info */
.ycg-admin-sessions-info {
  background: var(--blue-bg);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  color: var(--blue-text);
}

.ycg-admin-sessions-ok {
  color: var(--green-text);
  font-weight: 600;
}

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 3 — Polish stron: /MOJE-DOKUMENTY/ + /PROFIL-ZAWODNIKA/           */
/* ────────────────────────────────────────────────────────────────────── */

/* Karta dokumentu */
.ycg-dok-card {
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--sh-card);
  margin-bottom: var(--s-3);
  transition: box-shadow var(--m-fast);
}

.ycg-dok-card:hover {
  box-shadow: var(--sh-card-h);
}

.ycg-dok-card--has {
  border-left: 3px solid var(--green);
}

.ycg-dok-card--empty {
  border-left: 3px solid var(--orange);
  background: linear-gradient(90deg, var(--orange-bg) 0%, var(--surface) 30%);
}

.ycg-dok-card--dowod {
  border-left: 3px solid var(--blue);
}

.ycg-dok-card-name {
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
}

.ycg-dok-card-info {
  font-size: var(--t-sm);
  color: var(--text-3);
  letter-spacing: -.005em;
}

.ycg-dok-card-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}

/* Form uploadu */
.ycg-dok-upload-form {
  background: var(--surface-2);
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-3);
}

.ycg-dok-form-label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-2);
}

.ycg-dok-form-row {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
}

.ycg-dok-notatka {
  font-size: var(--t-sm);
  color: var(--text-3);
  font-style: italic;
}

/* Lista udostępniania */
.ycg-udostep-blok {
  background: var(--surface);
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--sh-card);
  margin-top: var(--s-3);
}

.ycg-udostep-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.ycg-udostep-item {
  background: var(--brand-bg);
  border: none;
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: var(--t-sm);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
}

.ycg-udostep-item:hover {
  background: var(--brand);
  color: #fff;
}

.ycg-udostep-name {
  font-weight: 500;
}

/* /profil-zawodnika/ — header */
.ycg-zawodnik-profil-header {
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-card);
  margin-bottom: var(--s-4);
}

.ycg-zawodnik-profil-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-size: var(--t-sm);
  color: var(--text-3);
  margin-top: var(--s-2);
}

/* Lista załóg w profilu */
.ycg-profil-zalogi-lista {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ycg-profil-zaloga-row {
  background: var(--surface);
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--sh-card);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.ycg-profil-zaloga-row--active {
  background: var(--green-bg);
  border-left: 3px solid var(--green);
}

.ycg-profil-zaloga-nr {
  font-weight: 700;
  color: var(--brand);
  font-size: var(--t-base);
  font-variant-numeric: tabular-nums;
}

.ycg-profil-zaloga-sezon {
  font-size: var(--t-sm);
  color: var(--text-3);
}

.ycg-profil-zaloga-main {
  flex: 1;
  font-size: var(--t-sm);
  color: var(--text);
}

.ycg-profil-zaloga-partner {
  font-weight: 500;
}

.ycg-profil-zaloga-rola {
  font-size: var(--t-xs);
  color: var(--text-3);
}

.ycg-profil-zaloga-dates {
  font-size: var(--t-xs);
  color: var(--muted);
  font-style: italic;
}

/* Edit form inline (status zawodnika) */
.ycg-z-edit-form--inline {
  background: var(--surface-2);
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-2);
}

.ycg-z-edit-row {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}

.ycg-z-edit-btns {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.ycg-z-edit-hint {
  font-size: var(--t-xs);
  color: var(--text-3);
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 4 — Bottom navigation (iOS Tab Bar, mobile only)                   */
/* ────────────────────────────────────────────────────────────────────── */

.ycg-bnav {
  display: none; /* desktop — ukryte */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(25px);
  backdrop-filter: saturate(180%) blur(25px);
  border-top: 0.5px solid var(--separator);
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
  z-index: 100;
  justify-content: space-around;
  align-items: center;
}

.ycg-bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 6px;
  text-decoration: none;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -.005em;
  border-radius: var(--r-md);
  transition: color var(--m-fast), transform var(--m-fast);
  min-height: 48px;
  min-width: 56px;
  flex: 1;
  max-width: 80px;
}

.ycg-bnav-item:hover {
  color: var(--brand);
  text-decoration: none;
}

.ycg-bnav-item:active {
  transform: scale(.92);
  transition: transform var(--m-fast);
}

.ycg-bnav-item--active {
  color: var(--brand);
  font-weight: 600;
}

.ycg-bnav-item i,
.ycg-bnav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  flex-shrink: 0;
}

.ycg-bnav-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Mobile — pokaż bnav + padding-bottom na body żeby content nie wpadał pod
   UWAGA 2026-05-21: bnav tymczasowo wyłączony (hook w ycg-crm.php zakomentowany).
   CSS zostaje, gotowy do reaktywacji razem z hookiem.
@media (max-width: 768px) {
  .ycg-bnav {
    display: flex;
  }

  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}
*/

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 4b — FAB (Floating Action Button, mobile only)                     */
/* ────────────────────────────────────────────────────────────────────── */

.ycg-fab {
  display: none; /* desktop — ukryte */
  position: fixed;
  right: var(--s-4);
  bottom: calc(72px + env(safe-area-inset-bottom)); /* nad bnav */
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--brand) 0%, #2c4374 100%);
  color: #fff;
  border-radius: var(--r-full);
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-fab);
  border: none;
  z-index: 99;
  text-decoration: none;
  transition: transform var(--m-spring), box-shadow var(--m-fast);
  cursor: pointer;
}

.ycg-fab:hover {
  box-shadow: 0 10px 28px rgba(28,44,77,.42), 0 4px 10px rgba(28,44,77,.24);
  color: #fff;
  text-decoration: none;
}

.ycg-fab:active {
  transform: scale(.92);
}

.ycg-fab i,
.ycg-fab svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
}

/* Mobile only — pokaż FAB
   UWAGA 2026-05-21: FAB tymczasowo wyłączony przez user'a (mamy nav-tiles + bnav
   na mobile, FAB byłby trzecim elementem nawigacji = za dużo). Kod i klasa
   zostają — wystarczy odkomentować @media żeby przywrócić.
@media (max-width: 768px) {
  .ycg-fab {
    display: flex;
  }
}
*/

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 5 — Toast notifications (Apple iOS subtle popup)                   */
/* ────────────────────────────────────────────────────────────────────── */

.ycg-toast {
  position: fixed;
  bottom: calc(96px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(28,28,30,.92);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  color: #fff;
  border-radius: var(--r-full);
  padding: 10px 20px;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--m-base), transform var(--m-spring);
  box-shadow: var(--sh-pop);
  max-width: calc(100vw - var(--s-8));
}

.ycg-toast.ycg-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ycg-toast i,
.ycg-toast svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Warianty kolorystyczne (akcent tylko po lewej, tło zostaje ciemne) */
.ycg-toast--success { box-shadow: var(--sh-pop), inset 4px 0 0 var(--green); }
.ycg-toast--error   { box-shadow: var(--sh-pop), inset 4px 0 0 var(--red); }
.ycg-toast--warning { box-shadow: var(--sh-pop), inset 4px 0 0 var(--orange); }
.ycg-toast--info    { box-shadow: var(--sh-pop), inset 4px 0 0 var(--blue); }

.ycg-toast--success i { color: var(--green); }
.ycg-toast--error   i { color: var(--red); }
.ycg-toast--warning i { color: var(--orange); }
.ycg-toast--info    i { color: var(--blue); }

/* Toast desktop — wyżej (brak bnav nad którym musi być) */
@media (min-width: 769px) {
  .ycg-toast {
    bottom: var(--s-6);
  }
}

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 5 — Skeleton loaders (shimmer animation)                           */
/* ────────────────────────────────────────────────────────────────────── */

.ycg-skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--surface-3) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: ycg-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
  display: inline-block;
  min-height: 1em;
}

.ycg-skeleton--text {
  display: block;
  height: 14px;
  margin: 6px 0;
  border-radius: var(--r-sm);
}

.ycg-skeleton--title {
  display: block;
  height: 20px;
  width: 60%;
  margin: 0 0 var(--s-3);
}

.ycg-skeleton--card {
  display: block;
  height: 80px;
  width: 100%;
  border-radius: var(--r-lg);
  margin-bottom: var(--s-2);
}

.ycg-skeleton--avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  flex-shrink: 0;
}

/* v1.6.39: kontener z gap dla grupy kilku skeleton lines */
.ycg-skeleton-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-2) 0;
}

/* v1.6.57: Mały hint pod imieniem zawodnika w tabeli saldo (gotówka do zapłaty) */
.ycg-saldo-cash-hint {
  font-size: var(--t-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  font-weight: 400;
}
.ycg-saldo-cash-hint-label {
  margin-right: 4px;
}
.ycg-saldo-cash-hint-debt {
  color: var(--red-text);
  font-weight: 500;
}
.ycg-saldo-cash-hint-sep {
  opacity: .5;
  margin: 0 2px;
}

/* v1.6.50: Wynagrodzenie trenera — expand sub-rows + dropdown miesiąca */
.ycg-wyn-expand-icon {
  width: 14px;
  height: 14px;
  color: var(--text-3);
  transition: transform 0.15s ease;
  vertical-align: middle;
  margin-right: 2px;
}
.ycg-wyn-expand-trigger:hover {
  background: var(--surface-2);
}
.ycg-wyn-subtable td {
  border: none !important;
}
.ycg-wyn-wyjazd-month {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  background: #fff;
}

/* v1.6.44: Wynagrodzenie trenera — zakładka w /rozliczenia/ */
.ycg-trener-section h4 {
  margin: 0 0 6px;
  font-size: var(--t-base);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.ycg-trener-section h4 i,
.ycg-trener-section h4 svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
}
.ycg-trener-details { margin-top: 4px; }
.ycg-trener-details summary {
  cursor: pointer;
  color: var(--brand);
  font-size: var(--t-sm);
  padding: 4px 0;
}
.ycg-trener-wyjazd {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--r-md);
}
.ycg-trener-wyjazd-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.ycg-trener-wyjazd-suma {
  font-weight: 600;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.ycg-trener-wyjazd-poz {
  list-style: none;
  padding: 6px 0 0;
  margin: 0;
  font-size: var(--t-sm);
}
.ycg-trener-wyjazd-poz li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
  color: var(--text-2);
  gap: 8px;
}
.ycg-trener-poz-grupa {
  display: inline-block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
  background: var(--surface-3);
  padding: 1px 7px;
  border-radius: var(--r-full);
  margin-right: 4px;
}
.ycg-trener-poz-kwota {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* v1.6.40 — Custom Apple-style modal (zamiast native window.confirm)          */
/* ─────────────────────────────────────────────────────────────────────────── */

.ycg-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 99998;
  opacity: 0;
  transition: opacity var(--m-base);
  pointer-events: none;
}

.ycg-modal-backdrop--show {
  opacity: 1;
  pointer-events: auto;
}

.ycg-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.92);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-pop);
  z-index: 99999;
  width: min(92vw, 360px);
  opacity: 0;
  transition: opacity var(--m-base), transform var(--m-spring);
  overflow: hidden;
}

.ycg-modal--show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ycg-modal-content {
  padding: var(--s-6) var(--s-5) var(--s-4);
  text-align: center;
}

.ycg-modal-title {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 var(--s-2);
  line-height: 1.3;
}

.ycg-modal-message {
  font-size: var(--t-sm);
  color: var(--text-2);
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.45;
}

/* Modal checkbox (v1.6.111 — opcja `extraHtml` w ycgConfirm np. close miesiąca) */
.ycg-modal-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) 0;
  font-size: var(--t-sm);
  color: var(--text-2);
  cursor: pointer;
  line-height: 1.4;
}
.ycg-modal-checkbox input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--brand, #1c2c4d);
  cursor: pointer;
}
.ycg-modal-checkbox span { user-select: none; }

.ycg-modal-actions {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--separator);
}

.ycg-modal-actions .ycg-btn {
  flex: 1;
  min-height: 44px;
  font-size: var(--t-base);
  font-weight: 600;
  justify-content: center;
}

/* Mobile — sticky bottom modal (iOS sheet style) */
@media (max-width: 480px) {
  .ycg-modal {
    width: calc(100vw - var(--s-6));
    max-width: 400px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ycg-modal,
  .ycg-modal-backdrop {
    transition: opacity .1s ease;
  }
  .ycg-modal--show {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes ycg-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  .ycg-skeleton {
    animation: none;
    background: var(--surface-2);
  }
}

/* ────────────────────────────────────────────────────────────────────── */
/* Krok 7 — Logo YCG identity (empty states, page-header watermark, stripe)*/
/* ────────────────────────────────────────────────────────────────────── */

/* F. Hairline brand stripe — czerwona kreska 2px na górze każdego panelu */
.ycg-panel {
  position: relative;
}

.ycg-panel::before {
  content: '';
  display: block;
  position: absolute;
  top: -10px; /* v1.6.34: delikatnie wyżej od kafelków, dla oddechu */
  left: 16px;
  right: 16px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ycg-red) 15%,
    var(--ycg-red) 85%,
    transparent 100%);
  border-radius: 1px;
  z-index: 1;
  pointer-events: none;
}

/* B. Watermark logo w page-header (Apple Wallet bank logo style) */
.ycg-page-header {
  position: relative;
  overflow: hidden;
}

/* v1.6.41: transparent PNG zamiast JPG + multiply hack.
   Mix-blend-mode usunięte (niepotrzebne), opacity podniesione (PNG czystszy). */
.ycg-page-header::after {
  content: '';
  position: absolute;
  top: -16px;
  right: -28px;
  width: 140px;
  height: 110px;
  background-image: url('../img/ycg-logo-proporzec.png');
  background-size: contain;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.08;
  transform: rotate(-6deg);
  pointer-events: none;
  z-index: 0;
}

/* A. Empty state z logo — Apple iOS Mail vibe */
p.ycg-empty,
div.ycg-empty {
  position: relative;
  text-align: center;
  padding: var(--s-10) var(--s-4) var(--s-6);
  color: var(--text-3);
  font-size: var(--t-sm);
  background: transparent;
  border: none;
}

p.ycg-empty::before,
div.ycg-empty::before {
  content: '';
  display: block;
  width: 100px;
  height: 75px;
  margin: 0 auto var(--s-3);
  background-image: url('../img/ycg-logo-proporzec.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.18;
}

/* Nie pokazuj logo w tabelach / listach / inline (tylko block-level empty states) */
td.ycg-empty::before,
th.ycg-empty::before,
li.ycg-empty::before,
span.ycg-empty::before {
  display: none;
}

td.ycg-empty,
th.ycg-empty,
li.ycg-empty,
span.ycg-empty {
  padding: var(--s-3);
}

/* ────────────────────────────────────────────────────────────────────── */
/* Etap 2 — Status pills (badges)                                         */
/* ────────────────────────────────────────────────────────────────────── */

.ycg-badge {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0;
  padding: 3px 10px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ycg-badge--green {
  background: var(--green-bg);
  color: var(--green-text);
}

.ycg-badge--red {
  background: var(--red-bg);
  color: var(--red-text);
}

.ycg-badge--orange,
.ycg-badge--amber {
  background: var(--orange-bg);
  color: var(--orange-text);
}

.ycg-badge--gray {
  background: var(--surface-3);
  color: var(--text-3);
}

.ycg-badge--blue {
  background: var(--blue-bg);
  color: var(--blue-text);
}

.ycg-badge--purple {
  background: var(--purple-bg);
  color: var(--purple-text);
}

.ycg-badge svg {
  width: 12px;
  height: 12px;
}

/* ────────────────────────────────────────────────────────────────────── */
/* v1.6.35 — Saldo zawodników (panel trenera) — karty zamiast tabeli       */
/* Mobile-first. Każda karta: imię/saldo total + opcjonalny breakdown      */
/* EUR/gotówka PLN gdy zawodnik ma nadchodzące zobowiązania gotówkowe.     */
/* ────────────────────────────────────────────────────────────────────── */

.ycg-saldo-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-3) 0;
}

.ycg-saldo-list-item {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--sh-card);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  transition: box-shadow var(--m-fast);
}

.ycg-saldo-list-item:hover {
  box-shadow: var(--sh-card-h);
}

.ycg-saldo-list-item--muted {
  opacity: .65;
}

.ycg-saldo-list-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ycg-saldo-list-name {
  font-weight: 600;
  font-size: var(--t-base);
  color: var(--text);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ycg-saldo-list-breakdown {
  font-size: var(--t-xs);
  color: var(--text-3);
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}

.ycg-saldo-list-breakdown-sep {
  color: var(--text-3);
  opacity: .5;
}

.ycg-saldo-list-breakdown-debt {
  color: var(--red-text);
  font-weight: 500;
}

.ycg-saldo-list-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.ycg-saldo-list-value {
  font-size: var(--t-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}

.ycg-saldo-list-value--ok {
  color: var(--green-text);
}

.ycg-saldo-list-value--debt {
  color: var(--red-text);
}

/* Mobile: imię nad saldem, full-width */
@media (max-width: 480px) {
  .ycg-saldo-list-item {
    flex-direction: column;
    align-items: stretch;
  }
  .ycg-saldo-list-end {
    align-items: stretch;
    flex-direction: row;
    justify-content: space-between;
  }
}