/* ============================================================
   CLOSE THE GAP — css/redesign.css
   Override unico per mobile e desktop. Si carica DOPO css/style.css
   e non lo modifica. Sostituisce la vecchia css/mobile.css.
   Corrisponde ai mockup 3a / 3b (mobile) e 4a / 4b (desktop).
   ============================================================ */

:root{
  --font:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --bg:#08090c;
  --s1:#0d0f14;
  --s2:#13161d;
  --s3:#1b1f28;
  --br:#1b1f28;
  --br2:#272c38;

  --tx:#f2f4f8;
  --tx2:#9aa2b6;
  --tx3:#5d657c;

  --r:14px;
  --r2:18px;
}

body{font-family:var(--font);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;}

/* Numeri in mono con cifre tabulari: allineano in colonna. */
.kv,.kv-s,.tm-val,.fs-v,.pkv,.rl-tss,.ad-best-w,.atp-tss,.act-table td,.wp-val,.gc-val,.gc-gap,.wb-tss{
  font-family:var(--mono);font-feature-settings:'tnum' 1;letter-spacing:-.02em;
}
/* Etichette maiuscolette: una regola per tutta l'app. */
.kl,.ct,.today-label,.ws-title,.rl-title,.wc-lbl,.fs-u,.pkl,.tm-lbl,.ad-lbl,
.nav-section-label,.gc-lbl,.wp-lbl,.gc-sub,.wb-dow{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--tx3);
  text-transform:uppercase;
}

/* ============ 1. Card TSB eroe ============ */
/* Sostituisce le due .kpi-row. Il TSB e' il numero piu' grande della
   pagina; CTL, ATL, FTP e la data gara scendono a riga di supporto. */
.hero-tsb{
  background:var(--s2);border:1px solid var(--br);border-radius:var(--r2);
  padding:16px 18px;margin-bottom:14px;
}
.hero-head{display:flex;align-items:baseline;justify-content:space-between;}
.hero-flag{
  font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.06em;
  padding:4px 9px;border-radius:20px;
}
.hero-main{display:flex;align-items:flex-end;gap:13px;margin-top:8px;}
.hero-tsb .kv{font-size:3.6rem;line-height:.85;letter-spacing:-.045em;}
.hero-note{font-size:.78rem;line-height:1.45;color:var(--tx2);padding-bottom:7px;margin:0;}
.hero-row{
  display:flex;gap:26px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--br);
}
.hero-row > div{display:flex;flex-direction:column;gap:4px;}
.kv-s{font-size:1.2rem;font-weight:700;line-height:1;}
.kv-s span{font-size:.62rem;}

/* La classe kv-up/kv-dn/kv-wa la mette home.js: il colore del TSB
   arriva da la', qui restano solo i colori delle voci di supporto. */
.hero-row .kv-up{color:var(--grn);}
.hero-row .kv-dn{color:var(--red);}
.hero-row .kv-acc{color:var(--acc);}
.hero-row .kv-pur{color:var(--pur);}

/* ============ 2. Allenamento di oggi, unico blocco a colore ============ */
/* E' l'unica azione della schermata: non serve un titolo per trovarla. */
.today-card{
  background:var(--acc);border:none;color:#08090c;
  border-radius:var(--r2);padding:16px 18px;margin-bottom:14px;
}
.today-card .today-label{color:rgba(8,9,12,.6)!important;}
.today-card .today-name{font-size:1.6rem;letter-spacing:-.03em;margin:6px 0 10px;}
.today-card .today-badge{background:rgba(8,9,12,.12);color:#08090c;font-family:var(--mono);}
.today-card .tm-val{font-size:1.05rem;}
.today-card .tm-lbl,.today-card .wc-lbl{color:rgba(8,9,12,.55)!important;}
.today-card .today-desc{
  background:rgba(8,9,12,.07);border-left:2px solid rgba(8,9,12,.35);
  color:rgba(8,9,12,.78);border-radius:12px;font-size:.8rem;line-height:1.55;
}
.today-card .wc-chart{background:rgba(8,9,12,.08);}
.today-card .empty{color:rgba(8,9,12,.55);}
.today-card .adapt-note{
  background:rgba(8,9,12,.08);border-color:rgba(8,9,12,.2);color:rgba(8,9,12,.75);
}

/* ============ 3. Settimana a barre giornaliere ============ */
/* Sette barre dicono in un'occhiata dove sono i giorni scarichi;
   sette celle con dentro un pallino no. Markup: js/ui-redesign.js */
.wb-wrap{display:flex;flex-direction:column;gap:9px;}
.wb-head{display:flex;align-items:baseline;justify-content:space-between;}
.wb-total{font-family:var(--mono);font-size:.68rem;color:var(--tx2);}
.wb-bars{display:flex;gap:5px;align-items:flex-end;height:56px;}
.wb-col{flex:1;display:flex;align-items:flex-end;height:100%;cursor:pointer;}
.wb-bar{width:100%;min-height:3px;border-radius:4px 4px 0 0;background:var(--s3);transition:opacity .15s;}
.wb-col:hover .wb-bar{opacity:.75;}
.wb-days{display:flex;}
.wb-dow{flex:1;text-align:center;font-size:.58rem!important;}
.wb-dow.wb-today{color:var(--acc)!important;}

/* ============ 4. Progresso settimanale compatto ============ */
.wp-row{display:flex;align-items:baseline;justify-content:space-between;}
.wp-lbl{font-family:var(--font)!important;font-size:.78rem!important;letter-spacing:0!important;color:var(--tx2)!important;text-transform:none!important;}
.wp-lbl em{font-style:normal;color:var(--tx3);}
.wp-val{font-size:.88rem;font-weight:700;}
.wp-val span{color:var(--tx3);font-weight:500;}
.wp-track{height:7px;border-radius:4px;background:var(--s3);margin:7px 0 12px;overflow:hidden;}
.wp-track:last-child{margin-bottom:0;}
.wp-fill{height:100%;border-radius:4px;transition:width .3s;}
.wp-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;}
.wp-head b{color:var(--tx);}

/* ============ 5. Sidebar: glifi al posto delle emoji ============ */
/* Nessuna modifica all'HTML: le emoji vengono nascoste e sostituite
   da forme geometriche che seguono il colore della voce. */
.nav-item .ni{display:none;}
.nav-item::before{
  content:'';width:15px;height:15px;flex-shrink:0;
  border:1.6px solid currentColor;border-radius:3px;
}
.nav-item.active::before{border-width:2px;}
/* "Attivita" e' la quarta voce: cerchio, come nei mockup. */
.sidebar-nav .nav-item:nth-of-type(4)::before{border-radius:50%;}
.nav-section-label{opacity:0;height:1px;padding:0;margin:12px 12px;background:var(--br);overflow:hidden;}
.logo-sub{font-family:var(--mono);letter-spacing:.16em;}
.sync-btn{border-radius:9px;padding:10px 12px;}

/* ============ 6. Densita e ritmo verticale ============ */
.card,.week-strip,.recent-list,.feed-card,.atp-card{
  margin-bottom:14px;border-radius:var(--r2);border:1px solid var(--br);
  background:var(--s2);box-shadow:none;
}
.card{padding:14px 16px;}
.ct{margin-bottom:12px;}
.divider{display:none;}
.rl-item{padding:10px 0;gap:12px;}
.rl-name{font-size:.84rem;font-weight:500;}
.rl-meta{font-family:var(--mono);font-size:.65rem;}
.rl-tss{font-size:.9rem;}

/* ============ 7. Desktop ============ */
@media(min-width:901px){
  /* I grafici hanno bisogno di larghezza, la card dell'allenamento no. */
  .home-split{grid-template-columns:1.35fr 1fr;gap:16px;}
  .content{padding:16px 22px;}
  .topbar{height:60px;padding:0 22px;}
  .topbar-title{font-size:1rem;font-weight:700;letter-spacing:-.02em;}
  .topbar-date{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;}
  .tb{padding:9px 15px;border-radius:9px;font-size:.75rem;}
  /* Su schermo largo il TSB e la card obiettivo stanno affiancati. */
  .hero-tsb{padding:18px 20px;}
  .hero-tsb .kv{font-size:3.9rem;}
  /* Mai tre grafici per riga: sotto i 380px di larghezza sono decorativi. */
  .g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
  .power-kpis{grid-template-columns:repeat(6,1fr);}
}

/* ============ 8. Mobile ============ */
@media(max-width:900px){
  .content{padding:14px 14px 96px;}          /* 96px = spazio per la tab bar */
  .topbar{
    position:sticky;top:0;z-index:18;height:auto;min-height:56px;
    padding:10px 14px;background:rgba(13,15,20,.86);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--br);
  }
  .topbar-title{font-size:1rem;font-weight:700;letter-spacing:-.02em;}
  .topbar-date{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;}
  .tb{min-height:40px;padding:0 14px;border-radius:10px;font-size:.75rem;}
  .hamburger-btn{width:44px;height:44px;margin-left:-8px;}
}

@media(max-width:640px){
  .hero-tsb .kv{font-size:3.4rem;}
  .hero-row{gap:22px;}
  .cw{min-height:210px;}
  .cw canvas{min-height:210px!important;}
  .g2{gap:0;}
  .hm-wrap{margin:0 -16px;padding:0 16px 6px;}
  .power-kpis{
    grid-template-columns:none;display:flex;gap:8px;overflow-x:auto;
    margin:0 -16px 14px;padding:0 16px 4px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .power-kpis::-webkit-scrollbar{display:none;}
  .pk{
    flex:0 0 92px;box-sizing:border-box;  /* border-box: senza, il padding sfonda i 92px */
    background:var(--s3);border:none;border-radius:12px;padding:12px 10px;
  }
  .pkv{font-family:var(--mono);font-size:1.05rem;}
  .zbar{margin-bottom:9px;}
  .zbar-lbl{flex:0 0 92px;font-size:.66rem;}
  .zbar-track{height:9px;border-radius:5px;}
  .zbar-fill{border-radius:5px;}
  /* Modale a foglio dal basso, input a 16px: iOS non zooma piu'. */
  .mo{align-items:flex-end;}
  .mbox{
    width:100%;max-width:none;border-radius:20px 20px 0 0;
    padding:20px 18px calc(20px + env(safe-area-inset-bottom));max-height:92vh;
  }
  .fgrid{grid-template-columns:1fr 1fr;gap:12px;}
  .fg input,.fg select{padding:12px;font-size:1rem;border-radius:10px;}
  .fg label{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;}
}

/* ============ 9. Chip filtro (pagina Analisi) ============ */
.chips{display:flex;gap:7px;align-items:center;margin-bottom:14px;overflow-x:auto;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{
  font-family:var(--mono);font-size:.68rem;font-weight:600;white-space:nowrap;
  padding:8px 14px;border-radius:20px;border:1px solid var(--br2);
  background:transparent;color:var(--tx2);cursor:pointer;
}
.chip.active{background:var(--acc);border-color:var(--acc);color:#08090c;}
.chips .chip-range{margin-left:auto;border:none;color:var(--acc);}

/* ============ 10. Tab bar (mobile) ============ */
.tabbar{display:none;}
@media(max-width:900px){
  .tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:25;
    background:rgba(13,15,20,.92);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-top:1px solid var(--br);
    padding:8px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar button{
    background:none;border:none;cursor:pointer;color:var(--tx3);
    display:flex;flex-direction:column;align-items:center;gap:5px;
    padding:6px 0;min-height:48px;font-family:var(--mono);
    font-size:.6rem;letter-spacing:.04em;
  }
  .tabbar button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;}
  .tabbar button.active{color:var(--acc);}
  .tabbar button.active svg{stroke-width:2.2;}
}