/* ============================================================================
   SSM PERFORMANCE — DASHBOARD ADMINISTRATORA (S2)
   Układ i drobne elementy widoku Dashboard. Zakres: #app .sd*
   Komponenty bazowe (karty, KPI, alerty, karty zawodników, wykres) pochodzą
   z css/staff-ds.css / js/30-staff-ui-kit.js.
   ============================================================================ */

#app .sd{display:flex;flex-direction:column;gap:18px;max-width:1560px;margin:0 auto;}

/* ---------- HERO ---------- */
#app .sd-hero{display:flex;align-items:stretch;justify-content:space-between;gap:24px;padding:30px 32px;min-height:190px;}
#app .sd-hero-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
#app .sd-hero .ss-h1{font-size:32px;margin-top:10px;}
#app .sd-hero-mark{
  position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:440px;max-width:55%;height:auto;
  opacity:.07;mix-blend-mode:lighten;pointer-events:none;z-index:0;filter:saturate(.7);
}
#app .sd-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;min-height:28px;}
#app .sd-hero-chips .ss-skel{width:280px;}
#app .sd-chip{
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--ss-text);
  background:rgba(var(--tone-rgb),.1);border:1px solid rgba(var(--tone-rgb),.28);
}
#app .sd-chip .ss-i{width:15px;height:15px;color:rgb(var(--tone-rgb));}
#app .sd-chip-dot{width:8px;height:8px;border-radius:50%;background:rgb(var(--tone-rgb));box-shadow:0 0 0 3px rgba(var(--tone-rgb),.2);}
#app .sd-hero-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:14px;flex-shrink:0;min-width:0;}
#app .sd-hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
#app .sd-date{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;
  background:rgba(6,10,19,.45);border:1px solid var(--ss-border);font-size:13px;color:var(--ss-text-2);font-variant-numeric:tabular-nums;
}
#app .sd-date .ss-i{width:16px;height:16px;color:var(--ss-text-3);}

/* widget synchronizacji (paintSyncWidget, js/23) — kompaktowo w hero */
#app .sd-hero #sync-widget-slot{width:100%;max-width:360px;}
#app .sd-hero #sync-widget-card{
  padding:10px 14px;border-radius:12px;background:rgba(6,10,19,.45);border:1px solid var(--ss-border);
  box-shadow:none;gap:14px !important;
}
#app .sd-hero #sync-widget-card:hover{border-color:var(--ss-border-2);}
#app .sd-sync-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(var(--ss-blue-rgb),.12);color:var(--ss-blue);flex-shrink:0;}
#app .sd-sync-ico .ss-i{width:17px;height:17px;}
#app .sd-hero #sync-widget-card .ss-status{font-size:12px;}

/* ---------- KPI ---------- */
#app .sd-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
#app .sd-kpis .ss-kpi{min-height:100px;align-items:flex-start;}
#app .sd-kpis .ss-kpi-label{white-space:normal;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.6em;}
#app .sd-kpis .ss-kpi-foot{line-height:1.3;}

/* ---------- WIERSZE ---------- */
#app .sd-row{display:grid;gap:18px;align-items:start;}
#app .sd-row-attn{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);}
#app .sd-row-load{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);}
#app .sd-row-single{grid-template-columns:minmax(0,1fr);}
#app .sd-row > .ss-card{height:100%;}

#app .sd-more{margin-top:12px;}
#app .sd-more .ss-i{width:14px;height:14px;}

/* zawodnicy wymagający uwagi */
#app .sd-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
#app .sd-pgrid .ss-pcard-media{height:140px;}
#app .sd-pgrid .ss-pcard-top .ss-badge{background:rgba(6,10,19,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);max-width:100%;overflow:hidden;text-overflow:ellipsis;}
#app .sd-pgrid .ss-pcard-body{padding:4px 12px 10px;}
/* pełne imię i nazwisko — zawijane do 2 linii zamiast ucinania */
#app .sd-pgrid .ss-pcard-name{white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;}
#app .sd-pgrid .ss-pcard-trend .trend-spark svg{width:100%;max-width:120px;height:26px;}

/* alerty */
#app .sd-alerts .ss-alert-sub{white-space:normal;}

/* obciążenie */
#app .sd-mini-stats{display:flex;gap:10px;flex-wrap:wrap;margin:-2px 0 14px;}
#app .sd-mini-stats > div{
  display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-radius:10px;
  background:var(--ss-bg-2);border:1px solid var(--ss-border);min-width:110px;
}
#app .sd-mini-stats span{font-size:11.5px;color:var(--ss-text-3);}
#app .sd-mini-stats b{font-family:var(--ss-font-head);font-size:18px;font-weight:700;color:var(--ss-text);font-variant-numeric:tabular-nums;}

/* testy */
#app .sd-tests{display:flex;flex-direction:column;gap:6px;}
#app .sd-test{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;
  background:var(--ss-bg-2);border:1px solid var(--ss-border);transition:border-color var(--ss-dur) var(--ss-ease);
}
#app .sd-test:hover, #app .sd-test:focus-visible{border-color:rgba(var(--ss-purple-rgb),.4);outline:none;}
#app .sd-test-ico{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--ss-purple-rgb),.13);color:var(--ss-purple);}
#app .sd-test-ico .ss-i{width:17px;height:17px;}
#app .sd-test-main{flex:1;min-width:0;display:flex;flex-direction:column;}
#app .sd-test-name{font-size:13.5px;font-weight:600;color:var(--ss-text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#app .sd-test-sub{font-size:12px;color:var(--ss-text-3);line-height:1.35;}
#app .sd-test-val{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;}
#app .sd-test-num{white-space:nowrap;}
#app .sd-test-val b{font-family:var(--ss-font-head);font-size:15px;color:var(--ss-text);font-variant-numeric:tabular-nums;}
#app .sd-test-val small{font-size:11px;color:var(--ss-text-3);}

/* ranking GPS */
#app .sd-gps-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
#app .sd-gps-filters .ss-select{width:auto;min-width:170px;height:36px;font-size:13px;}
#app .sd-gps-note{font-size:12px;color:var(--ss-text-3);margin:-4px 0 14px;}
#app .sd-lbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;}
#app .sd-lb{background:var(--ss-bg-2);border:1px solid var(--ss-border);border-radius:12px;padding:12px 12px 8px;min-width:0;border-top:2px solid rgba(var(--tone-rgb),.7);}
#app .sd-lb-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;}
#app .sd-lb-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ss-text-2);line-height:1.3;}
#app .sd-lb-unit{font-size:11px;color:var(--ss-text-3);white-space:nowrap;}
#app .sd-lb-list{list-style:none;margin:0;padding:0;}
#app .sd-lb-list li{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:8px;cursor:pointer;min-width:0;}
#app .sd-lb-list li + li{border-top:1px solid var(--ss-border);}
#app .sd-lb-list li:hover, #app .sd-lb-list li:focus-visible{background:rgba(255,255,255,.03);outline:none;}
#app .sd-lb-rank{width:18px;text-align:center;font-size:12px;font-weight:700;color:var(--ss-text-3);flex-shrink:0;}
#app .sd-lb-rank.is-first{color:var(--ss-gold);}
#app .sd-lb-name{flex:1;min-width:0;font-size:12.5px;color:var(--ss-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#app .sd-lb-val{font-size:12.5px;font-weight:700;color:rgb(var(--tone-rgb));font-variant-numeric:tabular-nums;flex-shrink:0;}
#app .sd-lb-empty{font-size:12px;color:var(--ss-text-3);padding:16px 4px;text-align:center;}

/* ostatnie raporty — widget z js/26 w trybie Staff (sd-rr-*) */
#app .sd-recent .ri-card-wrap{padding:20px;}
#app .sd-rr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
#app .sd-rr-title{display:flex;align-items:center;gap:10px;font-family:var(--ss-font-head);font-size:16px;font-weight:600;color:var(--ss-text);}
#app .sd-rr-counter{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-family:var(--ss-font);
  font-size:11px;font-weight:700;background:rgba(var(--ss-gold-rgb),.16);color:var(--ss-gold);border:1px solid rgba(var(--ss-gold-rgb),.3);
}
#app .sd-rr-counter.hidden{display:none;}
#app .sd-rr-mdate{display:none;}
#app .sd-rr-filters{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
#app .sd-rr-filters .ss-select{width:auto;min-width:200px;height:36px;font-size:13px;}
#app .sd-rr-filters .ss-seg{max-width:100%;overflow-x:auto;scrollbar-width:none;}
#app .sd-rr{border:1px solid var(--ss-border);border-radius:12px;overflow:hidden;}
#app .sd-rr-row{
  display:grid;grid-template-columns:110px minmax(0,1.4fr) minmax(0,1fr) 150px 120px 24px;align-items:center;gap:12px;
  padding:10px 14px;font-size:13px;color:var(--ss-text);
}
#app .sd-rr-row + .sd-rr-row{border-top:1px solid var(--ss-border);}
#app .sd-rr-row.is-head{background:rgba(255,255,255,.02);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ss-text-3);padding:9px 14px;}
#app .sd-rr-row[role="button"]{cursor:pointer;transition:background var(--ss-dur) var(--ss-ease);}
#app .sd-rr-row[role="button"]:hover, #app .sd-rr-row[role="button"]:focus-visible{background:rgba(255,255,255,.03);outline:none;}
#app .sd-rr-row.is-unread{box-shadow:inset 3px 0 0 var(--ss-gold);}
#app .sd-rr-player{display:flex;align-items:center;gap:10px;min-width:0;}
#app .sd-rr-player span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;}
#app .sd-rr-date{font-variant-numeric:tabular-nums;color:var(--ss-text-2);}
#app .sd-rr-time{display:flex;flex-direction:column;font-size:12px;color:var(--ss-text-2);font-variant-numeric:tabular-nums;}
#app .sd-rr-time small{color:var(--ss-text-3);font-size:11px;}
#app .sd-rr-chev{color:var(--ss-text-3);}
#app .sd-rr-chev .ss-i{width:16px;height:16px;}
#app .sd-rr-empty{padding:26px;text-align:center;color:var(--ss-text-3);font-size:13px;}

/* ---------- RESPONSYWNOŚĆ ---------- */
@media (max-width:1360px) and (min-width:1181px){
  #app .sd-row-attn{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}
  #app .sd-pgrid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));}
  #app .sd-pgrid .ss-pcard-media{height:128px;}
  /* 5 KPI w rzędzie przy sidebarze: ikona nad treścią, żeby etykiety miały
     pełną szerokość karty (inaczej np. "Czerwone alerty (Readiness < 50)" ~96 px) */
  #app .sd-kpis .ss-kpi{flex-direction:column;gap:10px;}
  #app .sd-lbs{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1280px){
  #app .sd-lbs{grid-template-columns:repeat(3,minmax(0,1fr));}
  #app .sd-kpis .ss-kpi{padding:14px;}
  #app .sd-kpis .ss-kpi-ico{width:40px;height:40px;}
  #app .sd-kpis .ss-kpi-value{font-size:24px;}
}
@media (max-width:1180px){
  #app .sd-kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
  #app .sd-row-attn, #app .sd-row-load{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:1180px){
  #app .sd-hero{flex-direction:column;gap:18px;}
  #app .sd-hero-side{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;}
  #app .sd-hero-actions{justify-content:flex-start;}
  #app .sd-hero #sync-widget-slot{width:auto;max-width:none;flex:0 1 360px;}
}
/* ostatnie raporty: przy węższej treści (sidebar zostaje do 768 px) kolumna
   "Dodano" znika, żeby nazwisko zawodnika miało miejsce */
@media (max-width:1180px){
  #app .sd-rr-row{grid-template-columns:96px minmax(0,1.6fr) minmax(0,1fr) 110px 24px;}
  #app .sd-rr-row > .sd-rr-time,
  #app .sd-rr-row.is-head > :nth-child(4){display:none;}
}
@media (max-width:980px){
  #app .sd-lbs{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* ostatnie raporty: układ dwuwierszowy już od 900 px (wcześniej dopiero <768,
   przez co przy 768–900 px nazwiska miały ~20 px szerokości) */
@media (max-width:900px){
  #app .sd-rr-row.is-head{display:none;}
  #app .sd-rr-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"player status" "meta meta";row-gap:6px;}
  #app .sd-rr-row > .sd-rr-player{grid-area:player;}
  #app .sd-rr-row > .sd-rr-status{grid-area:status;justify-self:end;}
  #app .sd-rr-row > .sd-rr-date, #app .sd-rr-row > .sd-rr-type{grid-area:meta;}
  #app .sd-rr-row > .sd-rr-date{display:none;}
  #app .sd-rr-mdate{display:inline;font-size:12px;}
  #app .sd-rr-row > .sd-rr-chev{display:none;}
}
@media (max-width:767px){
  #app .sd{gap:14px;}
  #app .sd-hero{padding:22px 18px;min-height:0;}
  #app .sd-hero .ss-h1{font-size:25px;}
  #app .sd-hero-mark{width:300px;max-width:none;right:-90px;top:28px;transform:none;}
  #app .sd-hero-actions .ss-btn{flex:1;}
  #app .sd-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  #app .sd-kpis .ss-kpi{flex-direction:column;align-items:flex-start;gap:10px;min-height:0;}
  #app .sd-kpis .ss-kpi:last-child{grid-column:1 / -1;}
  #app .sd-pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  #app .sd-pgrid .ss-pcard-media{height:120px;}
  #app .sd-pgrid .ss-pcard-body{padding:4px 10px 8px;}
  #app .sd-pgrid .ss-pcard-name{font-size:14px;}
  #app .sd-pgrid .ss-pcard-trend .ss-faint{display:none;}
  #app .sd-pgrid .ss-pcard-trend:not(:has(svg)){display:none;}
  #app .sd-pgrid .ss-pcard-stat{padding:7px 4px;}
  #app .sd-pgrid .ss-pcard-stat-label{font-size:9.5px;letter-spacing:.03em;}
  #app .sd-pgrid .ss-pcard-stat-value{font-size:11.5px;}
  #app .sd-pgrid .ss-pcard-cta{white-space:nowrap;font-size:12px;padding:8px 6px;}
  #app .sd-lbs{grid-template-columns:minmax(0,1fr);}
  #app .sd-mini-stats{flex-wrap:nowrap;gap:8px;}
  #app .sd-mini-stats > div{flex:1 1 0;min-width:0;padding:8px 10px;}
  #app .sd-mini-stats span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #app .sd-gps .ss-sh{flex-direction:column;}
  #app .sd-gps-filters{justify-content:flex-start;width:100%;}
  #app .sd-gps-filters .ss-select{flex:1 1 140px;min-width:0;}
  #app .sd-rr-filters .ss-select{width:100%;}
  /* alerty: data/meta pod tytułem, żeby tytuł nie łamał się na 2 linie */
  #app .sd-alerts .ss-alert{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ico body chev" "ico meta chev";column-gap:12px;row-gap:2px;align-items:center;}
  #app .sd-alerts .ss-alert-ico{grid-area:ico;}
  #app .sd-alerts .ss-alert-body{grid-area:body;}
  #app .sd-alerts .ss-alert-meta{grid-area:meta;font-size:11.5px;}
  #app .sd-alerts .ss-alert > .ss-faint{grid-area:chev;}
  /* ranking GPS: selekty trybu i sezonu jeden pod drugim, bez ucinania etykiet */
  #app .sd-gps-filters .ss-select{flex:1 1 100%;}
}