/* ── Simulatore GiFit Trainer ────────────────────────────────────────────────
   Replica in HTML del programma desktop. Palette allineata a TrainerTheme.kt
   (surface #14181F, primary #3B82F6) e non a quella del sito, così la finestra
   si legge come un'app dentro la pagina e non come un'altra sezione del sito. */

.simwrap{max-width:1080px;margin:0 auto;padding:0 24px}

.simwin{
  --s-bg:#0E1116; --s-surf:#14181F; --s-surf2:#1E232C; --s-line:#2A3039;
  --s-txt:#E8EDF4; --s-dim:#9AA5B5; --s-pri:#3B82F6; --s-pri-dim:#15325C;
  --s-ok:#34D399;
  background:var(--s-bg); border:1px solid var(--s-line); border-radius:14px;
  overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6);
  font-size:14px; line-height:1.45; color:var(--s-txt);
}

/* barra titolo finestra */
.simbar{
  display:flex; align-items:center; gap:10px; height:38px; padding:0 14px;
  background:var(--s-surf); border-bottom:1px solid var(--s-line);
}
.simbar .dots{display:flex; gap:6px}
.simbar .dots i{width:10px;height:10px;border-radius:50%;background:#3a4150;display:block}
.simbar .t{font-size:12.5px; color:var(--s-dim); font-weight:600}
.simbar .live{
  margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.5px;
  color:var(--s-ok); border:1px solid rgba(52,211,153,.35);
  background:rgba(52,211,153,.08); padding:3px 9px; border-radius:999px;
}

/* Su desktop la finestra ha un'altezza da applicazione e scorre al suo interno,
   così non si mangia la pagina quando il catalogo è aperto. Su mobile invece
   scorre la pagina: una scrollbar dentro l'altra, col dito, è una trappola. */
.simbody{min-height:520px; max-height:620px; display:flex; flex-direction:column}

/* ── login ───────────────────────────────────────────────────────────────── */
.simauth{display:grid; grid-template-columns:300px 1fr; flex:1}
.simauth .left{
  background:#0B0E13; border-right:1px solid var(--s-line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:34px 26px; text-align:center;
}
.simauth .left img{width:78px;height:78px;border-radius:20px;margin-bottom:16px}
.simauth .left b{font-size:19px}
.simauth .left p{color:var(--s-dim); font-size:12.5px; margin-top:8px}
.simauth .right{display:flex; flex-direction:column; justify-content:center; padding:40px 46px; gap:16px}
.simauth h3{font-size:21px; font-weight:700}
.simauth .hint{color:var(--s-dim); font-size:13px}

.simfield{display:flex; flex-direction:column; gap:5px; max-width:330px}
.simfield label{font-size:11.5px; font-weight:700; color:var(--s-dim); letter-spacing:.4px; text-transform:uppercase}
.simfield input,.simfield select{
  background:var(--s-surf); border:1px solid var(--s-line); border-radius:9px;
  padding:11px 13px; color:var(--s-txt); font:inherit; font-size:14px; outline:none;
}
.simfield input:focus,.simfield select:focus{border-color:var(--s-pri)}

.simbtn{
  background:var(--s-pri); color:#fff; border:0; border-radius:9px;
  padding:11px 22px; font:inherit; font-weight:700; font-size:14px; cursor:pointer;
  transition:filter .15s, transform .1s; align-self:flex-start;
}
.simbtn:hover{filter:brightness(1.12)}
.simbtn:active{transform:translateY(1px)}
.simbtn[disabled]{opacity:.4; cursor:not-allowed}
.simbtn.ghost{background:transparent; border:1px solid var(--s-line); color:var(--s-txt); font-weight:600}
.simbtn.ghost:hover{border-color:var(--s-pri); filter:none}
.simbtn.sm{padding:7px 14px; font-size:12.5px}
.simbtn.pulse{animation:simpulse 1.8s ease-in-out infinite}
@keyframes simpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.55)}
  50%{box-shadow:0 0 0 8px rgba(59,130,246,0)}
}

/* ── shell (sidebar + contenuto) ─────────────────────────────────────────── */
.simshell{display:grid; grid-template-columns:186px 1fr; flex:1; min-height:0}
.simside{background:#0B0E13; border-right:1px solid var(--s-line); padding:12px 10px; display:flex; flex-direction:column}
.simside .who{display:flex; align-items:center; gap:9px; padding:8px 8px 14px}
.simside .who .av{
  width:30px;height:30px;border-radius:50%; background:var(--s-pri-dim); color:#BBD4FF;
  display:flex;align-items:center;justify-content:center; font-size:11.5px; font-weight:800;
}
.simside .who b{font-size:12.5px; display:block; line-height:1.2}
.simside .who span{font-size:10.5px; color:var(--s-dim)}
.simnav{display:flex; flex-direction:column; gap:2px}
.simnav a{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px;
  color:var(--s-dim); font-size:13px; font-weight:600; cursor:pointer;
}
.simnav a:hover{background:var(--s-surf2); color:var(--s-txt)}
.simnav a.on{background:var(--s-pri-dim); color:#BBD4FF}
.simnav a i{font-style:normal; width:17px; text-align:center; font-size:14px}
.simside .foot{margin-top:auto; padding:10px 8px 4px; font-size:10.5px; color:#5c6879; line-height:1.4}

/* min-height:0 è indispensabile: senza, il figlio flex cresce oltre il genitore
   e .simcontent viene tagliato da overflow:hidden invece di scorrere. */
.simmain{display:flex; flex-direction:column; min-width:0; min-height:0}
.simtop{
  display:flex; align-items:center; gap:8px; padding:11px 20px;
  border-bottom:1px solid var(--s-line); background:var(--s-surf); font-size:12.5px;
}
.simtop .crumb{color:var(--s-dim)}
.simtop .crumb.cur{color:var(--s-txt); font-weight:700}
.simtop .sep{color:#3e4756}
.simtop .right{margin-left:auto; display:flex; gap:8px}

.simcontent{padding:22px 24px; overflow:auto; flex:1}
.simcontent h4{font-size:17px; font-weight:700; margin-bottom:3px}
.simcontent .sub{color:var(--s-dim); font-size:12.5px; margin-bottom:18px}

/* riga di suggerimento del passo corrente */
.simstep{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  background:rgba(59,130,246,.09); border:1px solid rgba(59,130,246,.28);
  border-radius:10px; padding:9px 13px; font-size:12.5px; color:#BBD4FF;
}
.simstep b{color:#fff}
.simstep .n{
  flex:none; width:20px;height:20px;border-radius:6px; background:var(--s-pri); color:#fff;
  display:flex;align-items:center;justify-content:center; font-size:11px; font-weight:800;
}

/* ── tabelle / liste ─────────────────────────────────────────────────────── */
.simtable{width:100%; border-collapse:collapse; background:var(--s-surf); border:1px solid var(--s-line); border-radius:11px; overflow:hidden}
.simtable th,.simtable td{padding:11px 14px; text-align:left; font-size:13px; border-bottom:1px solid var(--s-line)}
.simtable th{background:var(--s-surf2); color:var(--s-dim); font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:700}
.simtable tr:last-child td{border-bottom:none}
.simtable tr.click{cursor:pointer}
.simtable tr.click:hover td{background:var(--s-surf2)}

.simtag{display:inline-block; padding:3px 9px; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.3px}
.simtag.ok{background:rgba(52,211,153,.12); color:var(--s-ok)}
.simtag.wait{background:rgba(154,165,181,.12); color:var(--s-dim)}

/* ── chip / segmented ────────────────────────────────────────────────────── */
.simchips{display:flex; flex-wrap:wrap; gap:7px}
.simchip{
  border:1px solid var(--s-line); background:var(--s-surf); color:var(--s-dim);
  padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:600; cursor:pointer;
  user-select:none; transition:.12s;
}
.simchip:hover{border-color:#3e4756; color:var(--s-txt)}
.simchip.on{background:var(--s-pri-dim); border-color:var(--s-pri); color:#BBD4FF}
.simchip.hi{background:var(--s-pri); border-color:var(--s-pri); color:#fff}
.simchip.off{opacity:.38; text-decoration:line-through}
.simlabel{font-size:11.5px; font-weight:700; color:var(--s-dim); letter-spacing:.4px;
  text-transform:uppercase; margin:16px 0 7px; display:block}
.simlabel:first-child{margin-top:0}

/* ── card generiche ──────────────────────────────────────────────────────── */
.simcard{background:var(--s-surf); border:1px solid var(--s-line); border-radius:12px; padding:16px}
.simcard + .simcard{margin-top:10px}
.simgrid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}

.simslot{
  background:var(--s-surf); border:1px dashed var(--s-line); border-radius:12px; padding:16px;
  display:flex; align-items:center; gap:12px; cursor:pointer;
}
.simslot:hover{border-color:var(--s-pri)}
.simslot.filled{border-style:solid}
.simslot .wk{
  flex:none; width:38px;height:38px;border-radius:10px; background:var(--s-surf2); color:var(--s-dim);
  display:flex;align-items:center;justify-content:center; font-weight:800; font-size:12px;
}
.simslot.filled .wk{background:var(--s-pri-dim); color:#BBD4FF}
.simslot b{font-size:13.5px; display:block}
.simslot span{font-size:11.5px; color:var(--s-dim)}

/* ── editor scheda ───────────────────────────────────────────────────────── */
.simex{
  display:flex; align-items:center; gap:12px; padding:9px 12px;
  background:var(--s-surf); border:1px solid var(--s-line); border-radius:11px; margin-bottom:8px;
}
.simex .th{
  flex:none; width:64px; height:40px; border-radius:7px; overflow:hidden;
  background:#EDF1F6; display:flex; align-items:center; justify-content:center;
}
.simex .th img{width:100%; height:100%; object-fit:contain}
.simex .nm{flex:1; min-width:0}
.simex .nm b{display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.simex .nm span{font-size:11px; color:var(--s-dim)}
.simex .sets{display:flex; gap:6px; align-items:center; flex:none}
.simex .sets input{
  width:44px; background:var(--s-bg); border:1px solid var(--s-line); border-radius:7px;
  padding:6px 5px; color:var(--s-txt); font:inherit; font-size:12.5px; text-align:center; outline:none;
}
.simex .sets input:focus{border-color:var(--s-pri)}
.simex .sets em{font-style:normal; color:#4c5666; font-size:11px}
.simex .x{
  flex:none; background:none; border:0; color:#5c6879; font-size:17px; cursor:pointer;
  padding:2px 5px; line-height:1;
}
.simex .x:hover{color:#f87171}

.simcount{font-size:11.5px; color:var(--s-dim); margin:2px 0 14px}
.simcount b{color:var(--s-txt)}
.simcount.full b{color:#fbbf24}

.simwarn{
  background:rgba(251,191,36,.09); border:1px solid rgba(251,191,36,.3); color:#fcd34d;
  border-radius:9px; padding:9px 12px; font-size:12px; margin-top:14px;
}

/* catalogo (drawer) */
.simcat{background:var(--s-bg); border:1px solid var(--s-line); border-radius:12px; padding:14px; margin-bottom:14px}
.simcat .bar{display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap}
.simcat .bar input{
  flex:1; min-width:150px; background:var(--s-surf); border:1px solid var(--s-line); border-radius:9px;
  padding:8px 12px; color:var(--s-txt); font:inherit; font-size:13px; outline:none;
}
.simcat .bar input:focus{border-color:var(--s-pri)}
.simcatgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; max-height:290px; overflow:auto; padding-right:4px}
.simcatcard{
  background:var(--s-surf); border:1px solid var(--s-line); border-radius:10px; overflow:hidden;
  cursor:pointer; transition:.12s;
}
.simcatcard:hover{border-color:var(--s-pri); transform:translateY(-2px)}
.simcatcard.used{opacity:.4; pointer-events:none}
.simcatcard .ph{background:#EDF1F6; aspect-ratio:192/106}
.simcatcard .ph img{width:100%; height:100%; object-fit:cover}
.simcatcard .tx{padding:7px 9px}
.simcatcard .tx b{display:block; font-size:11.5px; font-weight:600; line-height:1.25}
.simcatcard .tx span{font-size:10px; color:var(--s-dim)}

/* ── modale generatore ───────────────────────────────────────────────────── */
.simmodal{position:absolute; inset:0; background:rgba(6,8,12,.72); display:flex;
  align-items:center; justify-content:center; padding:26px; z-index:5}
.simdialog{
  background:var(--s-surf); border:1px solid var(--s-line); border-radius:14px;
  width:100%; max-width:560px; max-height:100%; overflow:auto; padding:22px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.simdialog h4{font-size:17px; font-weight:700; margin-bottom:14px}
.simdialog .acts{display:flex; gap:9px; justify-content:flex-end; margin-top:22px}
.simwin{position:relative}

/* ── invio / consegna ────────────────────────────────────────────────────── */
.simsend{display:grid; grid-template-columns:1fr 210px; gap:26px; align-items:center}
.simsteps{display:flex; flex-direction:column; gap:11px}
.simsendrow{display:flex; align-items:center; gap:11px; font-size:13px; color:var(--s-dim); opacity:.35; transition:.3s}
.simsendrow.on{opacity:1; color:var(--s-txt)}
.simsendrow .ic{
  flex:none; width:26px;height:26px;border-radius:8px; background:var(--s-surf2);
  display:flex;align-items:center;justify-content:center; font-size:13px;
}
.simsendrow.on .ic{background:var(--s-pri-dim)}
.simsendrow.done .ic{background:rgba(52,211,153,.15); color:var(--s-ok)}

.simphone{
  border:1px solid var(--s-line); border-radius:22px; background:var(--s-bg);
  padding:12px 11px; box-shadow:0 0 0 5px #0d1117, 0 20px 50px rgba(0,0,0,.55);
}
.simphone .nn{width:52px;height:4px;border-radius:99px;background:#2a3039;margin:0 auto 11px}
.simphone .pi{
  background:var(--s-surf); border:1px solid var(--s-line); border-radius:10px;
  padding:9px 10px; margin-bottom:7px; font-size:11px;
}
.simphone .pi b{display:block; font-size:11.5px; margin-bottom:2px}
.simphone .pi span{color:var(--s-dim); font-size:10.5px}
.simphone .pi.hi{border-color:var(--s-pri); background:var(--s-pri-dim)}

/* ── statistiche ─────────────────────────────────────────────────────────── */
.simstats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.simstat{background:var(--s-surf); border:1px solid var(--s-line); border-radius:12px; padding:13px 14px}
.simstat b{display:block; font-size:19px; font-weight:800; line-height:1.2}
.simstat span{font-size:11px; color:var(--s-dim); text-transform:uppercase; letter-spacing:.4px; font-weight:700}

.simchart{width:100%; height:130px; display:block; overflow:visible}
.simaxis{display:flex; justify-content:space-between; font-size:10.5px; color:var(--s-dim); margin-top:4px}

.simprog{display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px solid var(--s-line)}
.simprog:first-of-type{border-top:0}
.simprog .th{
  flex:none; width:56px; height:36px; border-radius:7px; overflow:hidden;
  background:#EDF1F6; display:flex; align-items:center; justify-content:center;
}
.simprog .th img{width:100%; height:100%; object-fit:contain}
.simprog .nm{flex:1; min-width:0}
.simprog .nm b{display:block; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.simprog .nm span{font-size:11px; color:var(--s-dim)}
.simprog .spark{flex:none; width:120px}
.simprog .spark .simchart{height:34px}
.simprog .pct{flex:none; width:54px; text-align:right; font-weight:800; font-size:13px; color:var(--s-ok)}

.simlast{padding:8px 0; border-top:1px solid var(--s-line)}
.simlast:first-of-type{border-top:0}
.simlast > b{font-size:12.5px; display:block; margin-bottom:5px}
.simlast > div{display:flex; flex-wrap:wrap; gap:6px}
.simset{
  background:var(--s-surf2); border:1px solid var(--s-line); border-radius:8px;
  padding:4px 9px; font-size:11.5px; color:var(--s-txt);
}
.simset em{font-style:normal; color:var(--s-dim); margin-left:3px}

/* nota sotto la finestra */
.simnote{
  max-width:660px; margin:18px auto 0; text-align:center;
  font-size:12.5px; color:var(--grey2,#6B7B90); line-height:1.6;
}
.simnote b{color:var(--grey,#9CB0C8)}

/* ── mobile: la finestra desktop non si restringe, si semplifica ─────────── */
@media(max-width:900px){
  .simwrap{padding:0 14px}
  .simwin{font-size:13.5px; border-radius:12px}
  .simbody{min-height:0; max-height:none}
  .simcontent{overflow:visible}
  .simauth{grid-template-columns:1fr}
  .simauth .left{border-right:0; border-bottom:1px solid var(--s-line); padding:26px}
  .simauth .left img{width:58px;height:58px}
  .simauth .right{padding:26px 22px}
  .simfield{max-width:none}
  .simshell{grid-template-columns:1fr}
  .simside{
    border-right:0; border-bottom:1px solid var(--s-line); padding:8px 10px;
    flex-direction:row; align-items:center; gap:8px; overflow-x:auto;
  }
  .simside .who,.simside .foot{display:none}
  .simnav{flex-direction:row; gap:5px}
  .simnav a{padding:7px 11px; font-size:12px; white-space:nowrap}
  .simcontent{padding:16px 14px}
  .simtop{padding:9px 14px; font-size:11.5px}
  .simtop .right .simbtn{padding:6px 11px; font-size:11.5px}
  .simsend{grid-template-columns:1fr}
  .simphone{max-width:210px; margin:0 auto}
  .simex{flex-wrap:wrap; gap:9px}
  .simex .x{margin-left:auto}
  .simex .nm{flex:1 1 100%; order:2}
  .simex .sets{order:3; margin-left:auto}
  .simcatgrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); max-height:240px}
  .simmodal{padding:14px}
  .simdialog{padding:18px 16px}
  .simtable th:nth-child(3),.simtable td:nth-child(3){display:none}
  .simstats{grid-template-columns:repeat(2,1fr)}
  .simprog .spark{display:none}
  .simprog .pct{width:46px}
}