/* ============================================================================
   SSM PERFORMANCE — PROFIL ZAWODNIKA › MONITORING (S6.1)
   Zakres: #app .smon-* (panel Staff). Szablony: js/33-staff-monitoring-view.js.
   Player Portal używa oryginalnych szablonów js/11-monitoring.js — nieobjęty.
   ============================================================================ */

/* ---------- podzakładki (poranny / treningowy / meczowy) ---------- */
#app .smon-tabs-wrap{margin-bottom:16px;overflow-x:auto;scrollbar-width:none;}
#app .smon-tabs-wrap::-webkit-scrollbar{display:none;}
#app .smon-tabs{flex-wrap:nowrap;}
/* .tab zostaje dla paintMonTabs() — neutralizujemy jego stare podkreślenie */
#app .smon-tabs .tab{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:0;border-bottom:0;white-space:nowrap;font-size:13px;}
#app .smon-tabs .tab .ss-i{width:15px;height:15px;color:var(--ss-text-3);}
#app .smon-tabs .tab:focus-visible{outline:2px solid rgba(var(--ss-gold-rgb),.6);outline-offset:1px;}
#app .smon-tabs .tab.is-active{background:rgba(var(--ss-gold-rgb),.16);color:var(--ss-gold-2);box-shadow:inset 0 0 0 1px rgba(var(--ss-gold-rgb),.35);}
#app .smon-tabs .tab.is-active .ss-i{color:var(--ss-gold);}

/* ---------- pasek narzędzi ---------- */
#app .smon-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
#app .smon-toolbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0;}
#app .smon-toolbar .ss-select{width:210px;max-width:100%;height:38px;font-size:13px;}
#app .smon-hint{font-size:12.5px;color:var(--ss-text-3);}

/* ---------- ostatni raport + wykres ---------- */
#app .smon-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;margin-bottom:16px;align-items:stretch;}
#app .smon-grid > .ss-card{height:100%;}
#app .smon-latest{display:flex;align-items:center;gap:22px;}
#app .smon-latest-ring{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;font-size:11.5px;font-weight:600;color:var(--ss-text-3);letter-spacing:.04em;text-transform:uppercase;}
#app .smon-metrics{flex:1;min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;}
#app .smon-metric{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;background:var(--ss-bg-2);border:1px solid var(--ss-border);min-width:0;}
#app .smon-metric-ico{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;flex-shrink:0;background:rgba(var(--ss-gold-rgb),.1);color:var(--ss-gold);}
#app .smon-metric-ico .ss-i{width:16px;height:16px;}
#app .smon-metric.tone-orange, #app .smon-metric.tone-red{border-color:rgba(var(--tone-rgb),.35);}
#app .smon-metric.tone-orange .smon-metric-ico, #app .smon-metric.tone-red .smon-metric-ico{background:rgba(var(--tone-rgb),.14);color:rgb(var(--tone-rgb));}
#app .smon-metric-body{display:flex;flex-direction:column;gap:1px;min-width:0;}
#app .smon-metric-label{font-size:11.5px;color:var(--ss-text-3);}
#app .smon-metric-value{font-family:var(--ss-font-head);font-size:18px;font-weight:600;color:var(--ss-text);font-variant-numeric:tabular-nums;line-height:1.2;}
#app .smon-metric-value small{font-family:var(--ss-font);font-size:11.5px;font-weight:500;color:var(--ss-text-3);}
#app .smon-metric-sub{font-size:11.5px;color:var(--ss-text-2);overflow-wrap:anywhere;}

/* ---------- KPI (trening / mecz) ---------- */
#app .smon-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px;}
#app .smon-kpis .ss-kpi{min-height:96px;align-items:flex-start;}
#app .smon-kpis .ss-kpi-label{white-space:normal;line-height:1.3;}
#app .smon-kpis .ss-kpi-value{overflow-wrap:anywhere;}

/* ---------- wykres / lista ---------- */
#app .smon-grid + .smon-list, #app .smon-kpis + .ss-card{margin-bottom:16px;}
#app .smon-list{margin-top:0;}
#app .smon-table tbody tr[role="button"]{cursor:pointer;}
#app .smon-table tbody tr[role="button"]:focus-visible{outline:2px solid rgba(var(--ss-gold-rgb),.55);outline-offset:-2px;}
#app .smon-type{display:inline-flex;align-items:center;gap:6px;}
#app .smon-prog{display:inline-flex;color:var(--ss-green);}
#app .smon-prog .ss-i{width:14px;height:14px;}
#app .smon-cap{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:700;color:#17110a;background:var(--ss-gold);margin-left:4px;}

/* ---------- responsywność ---------- */
@media (max-width:1180px){
  #app .smon-grid{grid-template-columns:minmax(0,1fr);}
  #app .smon-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* 768–1023 px (sidebar widoczny): lista jako karty, bez poziomego przewijania
   (ten sam wzór co globalny układ mobilny + data-label w wierszach) */
@media (min-width:768px) and (max-width:1023px){
  #app .smon-table-wrap{border:0;overflow:visible;}
  #app table.ss-table.smon-table, #app .smon-table tbody{display:block;}
  #app .smon-table thead{display:none;}
  #app .smon-table tbody tr{display:block;background:var(--ss-surface-2);border:1px solid var(--ss-border);border-radius:12px;margin-bottom:10px;padding:4px 14px;}
  #app table.ss-table.smon-table td{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;text-align:right;border-bottom:1px solid var(--ss-border);}
  #app table.ss-table.smon-table td:last-child{border-bottom:0;}
  #app .smon-table 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);}
}
@media (max-width:767px){
  #app .smon-toolbar-left{width:100%;}
  #app .smon-toolbar .ss-select{width:100%;}
  #app .smon-toolbar .ss-btn{width:100%;}
  #app .smon-latest{flex-direction:column;align-items:stretch;gap:16px;}
  #app .smon-latest-ring{align-self:center;}
  #app .smon-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  #app .smon-kpis{gap:10px;}
  #app .smon-kpis .ss-kpi{flex-direction:column;gap:10px;min-height:0;}
  #app .smon-table-wrap{border:0;overflow:visible;}
  #app .smon-table tbody tr{background:var(--ss-surface-2);border-color:var(--ss-border);border-radius:12px;}
}