/* ============================================================================
   SSM PERFORMANCE — WARSTWA POMOSTOWA DLA STARSZYCH KOMPONENTÓW (S5)
   ----------------------------------------------------------------------------
   Cel: starsze moduły Staff Panelu (klasy .card, .btn, .badge, table, .field,
   .kv, .section-title, .empty-state, .tabs, .pill, .progress…) wizualnie
   spójne z Staff DS (css/staff-ds.css) — BEZ zmian w JS modułów.

   Zasady:
   · Zakres wyłącznie Staff Panelu: treść widoków (#app #main-content) i modale
     sztabu (#modal-bg poza trybem zawodnika). Player Portal renderuje się do
     osobnego #player-app i ustawia body.ssm-player-mode — nie jest objęty.
   · Wszystkie selektory w :where(…) → zerowa specyficzność zakresu. Reguły
     wygrywają tylko ze starymi regułami klasowymi z index.html (ten plik jest
     ładowany później), a przegrywają z każdą regułą S1–S4 (#app .ss-*,
     .sd-*, .sp-*, .spf-*) i ze stylami inline.
   · Tylko powierzchnie, kolory, obramowania, zaokrąglenia, fonty i stany
     hover/focus. Rozmiary i układ (w tym mobilne 44px / 16px) bez zmian.
   · Globalne zmienne (--navy-*, --gold…) NIE są nadpisywane.
   · @media screen — wydruk / PDF raportu dla klubu bez zmian.
   ============================================================================ */
@media screen {

/* ---------- 1. NAGŁÓWKI WIDOKÓW ---------- */
:where(#app #main-content) .topbar h1{font-family:var(--ss-font-head);font-weight:700;letter-spacing:-.01em;color:var(--ss-text);}
:where(#app #main-content) .topbar .crumbs{color:var(--ss-text-3);}
:where(#app #main-content) .crumbs.crumb-back{color:var(--ss-text-2);}
:where(#app #main-content) .crumbs.crumb-back::before{color:var(--ss-gold);}
:where(#app #main-content) .crumbs.crumb-back:hover{background:rgba(var(--ss-gold-rgb),.1);color:var(--ss-text);}

/* ---------- 2. KARTY I KONTENERY ---------- */
:where(#app #main-content) .card{
  background:var(--ss-glass), var(--ss-surface);
  border-color:var(--ss-border);
  box-shadow:var(--ss-shadow-sm);
}
:where(#app #main-content) .card:hover{border-color:var(--ss-border-2);}
:where(#app #main-content) .card.clickable:hover{box-shadow:var(--ss-shadow);}
:where(#app #main-content) .section-title{font-family:var(--ss-font-head);color:var(--ss-text-2);}
:where(#app #main-content) .card .section-title{letter-spacing:.06em;}
:where(#app #main-content) .card .section-title::before{background:var(--ss-gold);opacity:.85;}

/* karty statystyk (stat-card) */
:where(#app #main-content) .stat-card .stat-label{color:var(--ss-text-3);}
:where(#app #main-content) .stat-card .stat-value{font-family:var(--ss-font-head);color:var(--ss-text);}
:where(#app #main-content) .stat-card .stat-value.gold{color:var(--ss-gold);}
:where(#app #main-content) .stat-card .stat-value.red{color:var(--ss-red);}
:where(#app #main-content) .stat-card .stat-value.green{color:var(--ss-green);}
:where(#app #main-content) .stat-card .stat-icon{background:rgba(var(--ss-gold-rgb),.12);color:var(--ss-gold);}
:where(#app #main-content) .stat-card.status-green .stat-icon{background:rgba(var(--ss-green-rgb),.12);color:var(--ss-green);}
:where(#app #main-content) .stat-card.status-red .stat-icon{background:rgba(var(--ss-red-rgb),.12);color:var(--ss-red);}
:where(#app #main-content) .stat-card.status-orange .stat-icon{background:rgba(var(--ss-orange-rgb),.12);color:var(--ss-orange);}
:where(#app #main-content) .stat-card .stat-delta{color:var(--ss-text-3);}
:where(#app #main-content) .stat-card .stat-delta.up{color:var(--ss-green);}
:where(#app #main-content) .stat-card .stat-delta.down{color:var(--ss-red);}

/* popovery / menu wierszy (starsze) */
:where(#app #main-content) .filter-popover,
:where(#app #main-content) .rowmenu-dropdown,
:where(#app #main-content) .search-combo-results{background:var(--ss-surface);border-color:var(--ss-border-2);border-radius:var(--ss-r);box-shadow:var(--ss-shadow-lg);}

/* ---------- 3. PRZYCISKI ---------- */
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .btn{
  font-family:var(--ss-font);border-radius:10px;
  background:linear-gradient(180deg, #ecc471, var(--ss-gold));color:#17110a;
  box-shadow:0 6px 18px -10px rgba(var(--ss-gold-rgb),.75);
}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .btn:hover{filter:brightness(1.06);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .btn:focus-visible{outline:2px solid rgba(var(--ss-gold-rgb),.65);outline-offset:2px;}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .btn.secondary{background:var(--ss-surface-3);color:var(--ss-text);box-shadow:inset 0 0 0 1px var(--ss-border);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .btn.secondary:hover{filter:none;box-shadow:inset 0 0 0 1px var(--ss-border-2);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .btn.ghost{background:transparent;color:var(--ss-text-2);border-color:var(--ss-border);box-shadow:none;}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .btn.ghost:hover{filter:none;color:var(--ss-text);border-color:var(--ss-border-2);background:rgba(255,255,255,.025);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .btn.danger{background:rgba(var(--ss-red-rgb),.16);color:#f48a8b;box-shadow:inset 0 0 0 1px rgba(var(--ss-red-rgb),.38);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .btn.danger:hover{filter:none;background:rgba(var(--ss-red-rgb),.24);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .btn.small{border-radius:8px;}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .btn:disabled{filter:none;box-shadow:none;}

/* ---------- 4. BADGE / STATUSY / KROPKI / PIGUŁKI ---------- */
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .badge.green{background:rgba(var(--ss-green-rgb),.13);color:var(--ss-green);box-shadow:inset 0 0 0 1px rgba(var(--ss-green-rgb),.24);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .badge.yellow{background:rgba(var(--ss-yellow-rgb),.12);color:var(--ss-yellow);box-shadow:inset 0 0 0 1px rgba(var(--ss-yellow-rgb),.24);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .badge.orange{background:rgba(var(--ss-orange-rgb),.13);color:var(--ss-orange);box-shadow:inset 0 0 0 1px rgba(var(--ss-orange-rgb),.26);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .badge.red{background:rgba(var(--ss-red-rgb),.13);color:#f48a8b;box-shadow:inset 0 0 0 1px rgba(var(--ss-red-rgb),.28);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .badge.gray{background:rgba(148,163,184,.1);color:var(--ss-text-2);box-shadow:inset 0 0 0 1px rgba(148,163,184,.2);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .badge.elite{background:linear-gradient(90deg, rgba(var(--ss-gold-rgb),.22), rgba(243,215,152,.18));color:var(--ss-gold-2);box-shadow:inset 0 0 0 1px rgba(var(--ss-gold-rgb),.4);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .dot.green{background:var(--ss-green);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .dot.yellow{background:var(--ss-yellow);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .dot.orange{background:var(--ss-orange);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .dot.red{background:var(--ss-red);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .pill{background:var(--ss-surface-3);border-color:var(--ss-border);color:var(--ss-text-2);}

/* ---------- 5. TABELE ---------- */
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) th{color:var(--ss-text-3);border-bottom-color:var(--ss-border);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) td{border-bottom-color:var(--ss-border);color:var(--ss-text);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) tr.clickable:hover td{background:rgba(255,255,255,.03);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) th.sortable:hover{color:var(--ss-text-2);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) th.sortable.sort-active .sort-ico{color:var(--ss-gold);}
:where(#app #main-content) .table-pagination{border-top-color:var(--ss-border);}
:where(#app #main-content) .table-pagination .tp-info{color:var(--ss-text-3);}
:where(#app #main-content) .page-btn{border-color:var(--ss-border);color:var(--ss-text-2);border-radius:8px;}
:where(#app #main-content) .page-btn:hover:not(:disabled){background:rgba(255,255,255,.04);color:var(--ss-text);}
:where(#app #main-content) .page-btn.active{background:var(--ss-gold);border-color:var(--ss-gold);color:#17110a;}

/* ---------- 6. POLA FORMULARZY ---------- */
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .field label{color:var(--ss-text-2);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .field input:not([type="checkbox"]):not([type="radio"]),
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .field select,
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .field textarea{
  background-color:var(--ss-bg-2);border-color:var(--ss-border);color:var(--ss-text);border-radius:10px;font-family:var(--ss-font);
}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .field input:not([type="checkbox"]):not([type="radio"])::placeholder,
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .field textarea::placeholder{color:var(--ss-text-3);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .field input:focus,
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .field select:focus,
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .field textarea:focus{border-color:rgba(var(--ss-gold-rgb),.55);box-shadow:0 0 0 3px rgba(var(--ss-gold-rgb),.12);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) input[type="checkbox"],
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) input[type="radio"],
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) input[type="range"]{accent-color:var(--ss-gold);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .checklist label{color:var(--ss-text-2);}
:where(#app #main-content) .filter-select{background-color:var(--ss-bg-2);border-color:var(--ss-border);color:var(--ss-text);border-radius:10px;}
:where(#app #main-content) .filter-select:focus{border-color:rgba(var(--ss-gold-rgb),.55);box-shadow:0 0 0 3px rgba(var(--ss-gold-rgb),.12);}
:where(#app #main-content) .search-combo input{background-color:var(--ss-bg-2);border-color:var(--ss-border);color:var(--ss-text);border-radius:10px;}

/* ---------- 7. KLUCZ–WARTOŚĆ, STANY PUSTE ---------- */
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .kv{border-bottom-color:var(--ss-border);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .kv span:first-child{color:var(--ss-text-2);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .kv span:last-child{color:var(--ss-text);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .kv.clickable:hover{background-color:rgba(255,255,255,.035);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .kv.clickable:active{background-color:rgba(255,255,255,.06);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .empty-state{color:var(--ss-text-3);}

/* ---------- 8. ZAKŁADKI WEWNĄTRZ MODUŁÓW, PASKI POSTĘPU ---------- */
:where(#app #main-content) .tabs{border-bottom-color:var(--ss-border);}
:where(#app #main-content) .tab{color:var(--ss-text-2);font-family:var(--ss-font);}
:where(#app #main-content) .tab:hover{color:var(--ss-text);}
:where(#app #main-content) .tab.active{color:var(--ss-text);border-bottom-color:var(--ss-gold);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .progress{background:rgba(255,255,255,.07);}
:where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) .progress > div{background:linear-gradient(90deg, #ecc471, var(--ss-gold));}

/* ---------- 9. TABELE → KARTY NA TELEFONIE (globalny układ z index.html + 22-pwa.js) ---------- */
/* Zmieniamy wyłącznie kolory/powierzchnie; układ kart (display, padding,
   data-label) pozostaje taki, jaki definiuje index.html. */
@media (max-width:767px){
  :where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) tr{background:var(--ss-surface-2);border-color:var(--ss-border);border-radius:12px;}
  :where(#app #main-content, body:not(.ssm-player-mode) #modal-bg) td[data-label]::before{color:var(--ss-text-3);}
}

/* ==========================================================================
   S5.1 — lokalne poprawki responsywności (konkretne moduły, bez obejść
   globalnych). Przy 768–1023 px sidebar jest jeszcze widoczny, a globalny
   układ "tabela → karty" z index.html działa dopiero < 768 px.
   ========================================================================== */

/* 1) ADMINISTRACJA (#admin-body): tabele kont / przypisań / logowań / gości.
   Przyczyna: nieprzerywalne adresy e-mail + 5–7 kolumn (min. ~805 px)
   w karcie 456–700 px. Rozwiązanie: e-mail może się łamać; przy 768–1023 px
   wiersz jako karta (ten sam wzór co globalny układ mobilny + data-label
   z js/22-pwa.js), tylko w tym module. */
:where(#app #main-content) #admin-body td{overflow-wrap:anywhere;}
:where(#app #main-content) #admin-body td .btn,
:where(#app #main-content) #admin-body td .badge,
:where(#app #main-content) #admin-body td::before{overflow-wrap:normal;white-space:nowrap;}
@media (min-width:768px) and (max-width:1023px){
  :where(#app #main-content) #admin-body table{display:block;}
  :where(#app #main-content) #admin-body thead{display:none;}
  :where(#app #main-content) #admin-body tbody{display:block;}
  :where(#app #main-content) #admin-body tbody tr{display:block;background:var(--ss-surface-2);border:1px solid var(--ss-border);border-radius:12px;margin-bottom:10px;padding:4px 14px;}
  :where(#app #main-content) #admin-body td{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;text-align:right;max-width:none !important;white-space:normal !important;}
  :where(#app #main-content) #admin-body td:last-child{border-bottom:0;}
  :where(#app #main-content) #admin-body td[data-label]::before{content:attr(data-label);flex-shrink:0;text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ss-text-3);}
  :where(#app #main-content) #admin-body td:not([data-label]){justify-content:flex-end;}
  :where(#app #main-content) #admin-body td[colspan]{display:block;text-align:center;}
}
/* pusty wiersz (colspan, np. "Brak przypisań.") — bez etykiety kolumny z data-label */
@media (max-width:1023px){
  :where(#app #main-content) #admin-body td[colspan]::before{content:none;}
}

/* 2) SKRZYNKA RAPORTÓW (.ri-table / .ri-cards z js/26-report-inbox.js).
   Przyczyna: tabela 6 kolumn (min. ~637 px) w kontenerze ~418 px; moduł ma
   gotowy układ kart .ri-cards, ale włączany dopiero < 768 px. Rozwiązanie:
   te same karty także przy 768–1023 px (style jak w index.html, tokeny DS). */
@media (min-width:768px) and (max-width:1023px){
  :where(#app #main-content) .ri-table{display:none;}
  :where(#app #main-content) .ri-cards{display:flex;flex-direction:column;gap:10px;}
  :where(#app #main-content) .ri-card{display:flex;align-items:flex-start;gap:12px;background:var(--ss-surface-2);border:1px solid var(--ss-border);border-radius:12px;padding:12px 14px;cursor:pointer;}
  :where(#app #main-content) .ri-card.ri-unread{border-color:rgba(var(--ss-gold-rgb),.45);background:linear-gradient(0deg, rgba(var(--ss-gold-rgb),.06), rgba(var(--ss-gold-rgb),.06)), var(--ss-surface-2);}
  :where(#app #main-content) .ri-card-body{flex:1;min-width:0;}
  :where(#app #main-content) .ri-card-name{font-weight:700;color:var(--ss-text);font-size:14px;}
  :where(#app #main-content) .ri-card-type{font-size:13px;color:var(--ss-text-2);margin-top:2px;}
  :where(#app #main-content) .ri-card-meta{font-size:12px;color:var(--ss-text-2);margin-top:4px;}
  :where(#app #main-content) .ri-card-cta{font-size:12.5px;font-weight:700;color:var(--ss-gold);margin-top:8px;}
  :where(#app #main-content) .ri-card-status{flex-shrink:0;}
  :where(#app #main-content) .ri-card.ri-unread .ri-card-status{display:none;}
}

/* 3) ŻYWIENIE (#nutrition-body): tabele produktów/przepisów.
   Przyczyna: 6 kolumn z nieprzerywalnymi nagłówkami ("KCAL/100G") i pełnym
   poziomym paddingiem (min. 469–482 px) w karcie 456 px. Rozwiązanie: przy
   768–1023 px węższy poziomy padding komórek (treść bez zmian). */
@media (min-width:768px) and (max-width:1023px){
  :where(#app #main-content) #nutrition-body th,
  :where(#app #main-content) #nutrition-body td{padding-left:6px;padding-right:6px;}
}

/* 4) PORÓWNANIA: lista wyboru zawodników (.checklist z inline
   grid-template-columns:repeat(4,1fr) w js/17-scouting.js).
   Przyczyna: styl inline wygrywa z mobilną regułą .checklist{1fr}, 4 kolumny
   min-content wystają o ~95 px przy 390 px. Rozwiązanie: tylko ta lista
   (rozpoznana po data-cmp-player), tylko < 768 px — 2 kolumny, które mogą się
   zwężać; !important jest jedynym sposobem nadpisania stylu inline z CSS. */
@media (max-width:767px){
  :where(#app #main-content) .checklist:has(input[data-cmp-player]){grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  :where(#app #main-content) .checklist:has(input[data-cmp-player]) label{min-width:0;overflow-wrap:anywhere;}
}

} /* @media screen */