/* ============================================================================
   SSM PERFORMANCE — PROFIL ZAWODNIKA › ZDROWIE (S6.4)
   Zakres: #app .shl* (panel Staff). Szablony: js/36-staff-health-view.js.
   Player Portal używa oryginalnych szablonów js/21-health.js — nieobjęty.
   ============================================================================ */
#app .shl{display:flex;flex-direction:column;gap:16px;}
#app .shl-card{min-width:0;}

/* pasek 11 podzakładek — desktop: wszystkie widoczne (zawijanie);
   < 1024 px: przewijany poziomo w obrębie paska (bez overflow strony) */
#app .shl-tabs-wrap{position:relative;margin-bottom:16px;max-width:100%;}
#app .shl-tabs{display:flex;flex-wrap:wrap;gap:2px;}
@media (max-width:1023px){
  #app .shl-tabs-wrap{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);}
  #app .shl-tabs-wrap::-webkit-scrollbar{display:none;}
  #app .shl-tabs{display:inline-flex;flex-wrap:nowrap;padding-right:28px;}
}
/* .tab zostaje dla paintHealthTabs() (przełącza .active) — neutralizujemy stare podkreślenie */
#app .shl-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 .shl-tabs .tab .ss-i{width:15px;height:15px;color:var(--ss-text-3);}
#app .shl-tabs .tab:focus-visible{outline:2px solid rgba(var(--ss-gold-rgb),.6);outline-offset:1px;}
#app .shl-tabs .tab.active{background:rgba(var(--ss-gold-rgb),.16);color:var(--ss-gold-2);font-weight:600;box-shadow:inset 0 0 0 1px rgba(var(--ss-gold-rgb),.35);}
#app .shl-tabs .tab.active::after{display:none;}
#app .shl-tabs .tab.active .ss-i{color:var(--ss-gold);}
#app .shl-tabs .shl-tab-privacy .ss-i{color:var(--ss-gold);}

/* KPI */
#app .shl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
#app .shl-kpis .ss-kpi{min-height:96px;align-items:flex-start;}
#app .shl-kpis .ss-kpi-body{min-width:0;}
#app .shl-kpis .ss-kpi-label{white-space:normal;line-height:1.3;}
#app .shl-kpis .ss-kpi-value{font-size:22px;}
#app .shl-kpis .ss-kpi-foot span{white-space:normal;}

#app .shl-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch;}
#app .shl-row > .ss-card{height:100%;}

/* listy (alerty, obszary do poprawy) */
#app .shl-list{display:flex;flex-direction:column;}
#app .shl-list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--ss-border);}
#app .shl-list-row:last-child{border-bottom:0;}
#app .shl-list-name{font-weight:600;color:var(--ss-text);min-width:0;}
#app .shl-badges{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;}
#app .shl-text{font-size:13px;line-height:1.6;color:var(--ss-text);white-space:pre-line;overflow-wrap:break-word;}

/* tabele */
#app .shl-table tbody tr[role="button"]{cursor:pointer;}
#app .shl-table tbody tr[role="button"]:focus-visible{outline:2px solid rgba(var(--ss-gold-rgb),.55);outline-offset:-2px;}
#app .shl-name{font-weight:600;}
#app .shl-val b{font-family:var(--ss-font-head);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;}
#app .shl-val small{font-size:11.5px;color:var(--ss-text-3);}
#app .shl-mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;white-space:nowrap;}
#app .shl-table .ss-badge{white-space:normal;height:auto;min-height:22px;padding:3px 9px;line-height:1.3;}
#app .shl-row-actions{white-space:nowrap;text-align:right;}
#app .shl-row-actions .ss-btn + .ss-btn{margin-left:6px;}
#app .shl-row-actions [data-hr-delete]:hover{color:var(--ss-red);}

/* pasek nad treścią */
#app .shl-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
#app .shl-hint{display:inline-flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45;color:var(--ss-text-3);min-width:0;}
#app .shl-hint .ss-i{width:15px;height:15px;color:var(--ss-gold);flex-shrink:0;margin-top:1px;}

/* komunikaty */
#app .shl-note{display:inline-flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;color:var(--ss-text-2);}
#app .shl-note .ss-i{width:16px;height:16px;flex-shrink:0;margin-top:2px;}
#app .shl-note.is-info .ss-i{color:var(--ss-gold);}
#app .shl-note.is-error{color:var(--ss-red);}
#app .shl-note.is-warn{font-size:12px;color:var(--ss-text-3);max-width:760px;}
#app .shl-note.is-warn .ss-i{color:var(--ss-orange);}
#app .shl-hint-text, #app .shl-card .shl-hint{margin-top:8px;}

/* blokada RODO */
#app .shl-gate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 16px;}
#app .shl-gate-ico, #app .shl-privacy-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:rgba(var(--ss-gold-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--ss-gold-rgb),.3);color:var(--ss-gold);flex-shrink:0;}
#app .shl-gate-ico .ss-i, #app .shl-privacy-ico .ss-i{width:24px;height:24px;}
#app .shl-gate-title{font-family:var(--ss-font-head);font-size:16px;font-weight:600;color:var(--ss-text);}
#app .shl-gate-text{max-width:560px;font-size:13px;line-height:1.55;color:var(--ss-text-2);}
#app .shl-gate .ss-btn{margin-top:6px;}

/* przyciski formularzy */
#app .shl-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
#app .shl-actions.is-start{margin-top:10px;}
#app .shl-actions.is-end{justify-content:flex-end;}
#app .shl-actions.is-center{justify-content:center;}
#app .shl-file input[type="file"]{width:100%;max-width:100%;}
#app .shl-file input[type="file"]::file-selector-button{margin-right:12px;padding:7px 14px;border:1px solid var(--ss-border-2, var(--ss-border));border-radius:8px;background:var(--ss-surface-3);color:var(--ss-text);font:600 12.5px var(--ss-font);cursor:pointer;}
#app .shl-file input[type="file"]::file-selector-button:hover{border-color:rgba(var(--ss-gold-rgb),.45);}
#app .shl-form textarea{width:100%;}
#app .shl-verify-table select{max-width:100%;}

/* siatka kart: parametry, baza wiedzy */
#app .shl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
#app .shl-param, #app .shl-kb{display:flex;flex-direction:column;gap:8px;cursor:pointer;min-width:0;transition:border-color var(--ss-dur) var(--ss-ease), transform var(--ss-dur) var(--ss-ease);}
#app .shl-param:hover, #app .shl-kb:hover{border-color:rgba(var(--ss-gold-rgb),.45);}
#app .shl-param:focus-visible, #app .shl-kb:focus-visible{outline:2px solid rgba(var(--ss-gold-rgb),.6);outline-offset:2px;}
#app .shl-param-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
#app .shl-param-head .ss-i{width:16px;height:16px;color:var(--ss-text-3);flex-shrink:0;margin-top:1px;}
#app .shl-param-name{font-family:var(--ss-font-head);font-size:13.5px;font-weight:600;color:var(--ss-text-2);line-height:1.35;}
#app .shl-param-value{font-family:var(--ss-font-head);font-size:26px;font-weight:600;color:var(--ss-text);font-variant-numeric:tabular-nums;line-height:1.1;}
#app .shl-param-value small{margin-left:5px;font-family:var(--ss-font);font-size:12.5px;font-weight:500;color:var(--ss-text-3);}
#app .shl-param-foot{font-size:11.5px;color:var(--ss-text-3);}
#app .shl-kb-cat{font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ss-gold);}
#app .shl-kb-desc{font-size:13px;line-height:1.5;color:var(--ss-text-2);}

/* Health Score */
#app .shl-score{display:flex;align-items:center;gap:22px;}
#app .shl-score-label{font-family:var(--ss-font-head);font-size:18px;font-weight:600;color:var(--ss-text);}
#app .shl-score-sub{margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--ss-text-3);max-width:520px;}
#app .shl-bars{display:flex;flex-direction:column;gap:12px;}
/* kit renderuje pasek jako <span> — element liniowy ignoruje width, stąd block */
#app .shl-bars .ss-progress-track{display:block;}
#app .shl-bars .ss-progress-fill{display:block;}
#app .shl-bars .ss-progress-label{flex:0 0 190px;min-width:0;}

/* Analiza AI */
#app .shl-ai-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
#app .shl-ai-label{font-family:var(--ss-font-head);font-size:13px;font-weight:600;color:var(--ss-text-2);margin-bottom:8px;letter-spacing:.02em;}
#app .shl-ai-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}

/* Prywatność i zgody */
#app .shl-privacy{display:flex;align-items:flex-start;gap:16px;}
#app .shl-privacy-title{font-family:var(--ss-font-head);font-size:15px;font-weight:600;color:var(--ss-text);margin-bottom:6px;}
#app .shl-privacy-text{font-size:13px;line-height:1.55;color:var(--ss-text-2);}
#app .shl-consents{display:flex;flex-direction:column;gap:12px;}
#app .shl-consent{border:1px solid var(--ss-border);border-radius:12px;padding:14px 16px;background:var(--ss-bg-2);min-width:0;}
#app .shl-consent.is-active{border-color:rgba(var(--ss-green-rgb),.35);}
#app .shl-consent-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
#app .shl-consent-title{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--ss-text);min-width:0;}
#app .shl-consent-title .ss-i{width:17px;height:17px;flex-shrink:0;color:var(--ss-text-3);}
#app .shl-consent.is-active .shl-consent-title .ss-i{color:var(--ss-green);}
#app .shl-consent-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
#app .shl-meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 18px;margin:12px 0 0;padding-top:12px;border-top:1px dashed var(--ss-border);}
#app .shl-meta div{min-width:0;}
#app .shl-meta dt{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ss-text-3);margin-bottom:3px;}
#app .shl-meta dd{margin:0;font-size:13px;color:var(--ss-text-2);overflow-wrap:anywhere;}
#app .shl-meta strong{color:var(--ss-text);font-weight:600;}

/* responsywność */
@media (max-width:1180px){
  #app .shl-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  #app .shl-row{grid-template-columns:minmax(0,1fr);}
  #app .shl-kpis .ss-kpi-value{font-size:20px;}
}
/* do 1180 px (także telefon): tabele jako karty, bez poziomego przewijania */
@media (max-width:1180px){
  #app .shl-wrap{border:0;overflow:visible;}
  #app table.ss-table.shl-table, #app .shl-table tbody{display:block;width:100%;}
  #app .shl-table thead{display:none;}
  #app .shl-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.shl-table td{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;padding:9px 0;text-align:right;border-bottom:1px solid var(--ss-border);min-width:0;white-space:normal;}
  #app table.ss-table.shl-table td:last-child{border-bottom:0;}
  #app .shl-table td[data-label]::before{content:attr(data-label);flex-shrink:0;white-space:nowrap;text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ss-text-3);font-family:var(--ss-font);}
  #app table.ss-table.shl-table td.shl-name{justify-content:flex-start;text-align:left;font-size:14px;}
  #app table.ss-table.shl-table td.shl-name::before{display:none;}
  #app table.ss-table.shl-table td.shl-row-actions{justify-content:flex-end;}
  #app .shl-mono{white-space:normal;}
  /* weryfikacja: pola formularza na pełną szerokość karty */
  #app .shl-verify-table td > select, #app .shl-verify-table td > input{flex:1 1 160px;min-width:0 !important;width:auto !important;}
}
@media (max-width:767px){
  #app .shl{gap:14px;}
  #app .shl-bars .ss-progress-label{flex-basis:130px;}
  #app .shl-kpis{gap:10px;}
  #app .shl-kpis .ss-kpi{flex-direction:column;gap:10px;min-height:0;}
  #app .shl-toolbar .ss-btn, #app .shl-actions .ss-btn{flex:1 1 auto;}
  #app .shl-grid, #app .shl-ai-grid{grid-template-columns:minmax(0,1fr);}
  #app .shl-score{flex-direction:column;text-align:center;gap:14px;}
  #app .shl-privacy{flex-direction:column;}
  #app .shl-consent-head{flex-direction:column;align-items:stretch;}
  #app .shl-consent-actions .ss-btn{flex:1 1 auto;}
  #app .shl-ai-foot .ss-btn{width:100%;}
  #app .shl-list-row{flex-wrap:wrap;}
}