/* ============================================================
   TEMA & TOKENS
   ============================================================ */
:root{
  /* Superfici base */
  --bg: #0f1117;
  --card: #18141a;
  --muted: #1c161a;
  --elevated: #151926;

  /* Bordi */
  --border: #30222a;
  --border-subtle: #261920;
  --border-strong: #ff5a5f;

  /* Testo */
  --text: #ece9ee;
  --text-muted: #b9aeb6;

  /* Accenti ROSSI */
  --primary: #ff5a5f;                         /* rosso principale */
  --primary-soft: color-mix(in srgb, #ff5a5f 15%, #18141a);
  --accent: #630101;                          /*#f50202 rosso/arancio per hover/gradient */

  /* Stati */
  --success: #22c55e;
  --danger: #dc2626;
  --warning: #fbbf24;

  /* Tabelle */
  --table-border: var(--primary);
  --table-row-border: color-mix(in srgb, var(--primary) 55%, transparent);
  --table-header-bg: color-mix(in srgb, var(--primary) 12%, var(--card));
  --table-header-text: var(--text);
  --table-header-weight: 700;

  /* Altro */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 2px 18px rgba(0, 0, 0, .32);
  --focus-ring: 0 0 0 3px rgba(255, 90, 95, .35);
}

*{
  box-sizing:border-box;
}

html,body{
  height:100%;
}

body{
  margin:0;
  font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  background-color:#0e0e11;
  background-image:
    radial-gradient(140% 130% at 78% 20%, rgba(122, 14, 22, 0.40), transparent 60%),
    linear-gradient(115deg, #0e0e11 0%, #111016 42%, #1a0f14 100%);
  background-repeat:no-repeat;
  background-attachment:fixed, fixed;
}

a{
  color:inherit;
  text-decoration:none;
}

/* ============================================================
   LAYOUT GENERALE
   ============================================================ */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:16px;
  position:relative;
  z-index:1;
}

.appbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#0e0e11;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 14px;
  box-shadow:var(--shadow-soft);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}

.badge{
  display:inline-block;
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--primary), var(--accent));
  color:#210006;
}

.actions{
  display:flex;
  gap:8px;
}

.layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:16px;
  margin-top:16px;
}

@media(max-width:900px){
  .layout{
    grid-template-columns:1fr;
  }
  .sidebar{
    display:none !important;
  }
  .main{order:1;}
}

.sidebar{
  background:#0e0e11;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px;
}

.main{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.hgroup h1{
  font-size:20px;
  margin:0;
}

.hgroup p{
  margin:4px 0 0;
  color:var(--text-muted);
  font-size:13px;
}

/* ============================================================
   TOPBAR (desktop + mobile) · layout
   ============================================================ */

/* --- TOPBAR base (desktop) --- */
#topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}

/* Contenitore sinistra: logo + testo + badge */
#topbar .topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Contenitore destra: icone / pulsanti */
#topbar .topbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
}

#topbar .topbar-desktop-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Menu hamburger: nascosto su desktop */
#topbar .topbar-mobile-menu{
  display:none;
  position:relative;
}

@media (max-width:900px){
  #topbar.appbar{
    position:sticky;
    top:0;
    z-index:80;
  }

  #topbar .topbar-desktop-actions{
    display:none !important;
  }

  #topbar .topbar-mobile-menu{
    display:block;
  }

  #topbar .mobile-menu-trigger{
    padding:10px 12px;
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .mobile-hamburger{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:20px;
    height:14px;
  }

  .mobile-hamburger span{
    display:block;
    height:2px;
    border-radius:1px;
    background:currentColor;
  }

  .mobile-nav-backdrop{
    position:fixed;
    inset:0;
    z-index:85;
    background:rgba(0,0,0,.45);
    border:0;
    padding:0;
    margin:0;
  }

  .mobile-nav-panel{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    z-index:90;
    min-width:min(288px,calc(100vw - 24px));
    max-width:calc(100vw - 24px);
    max-height:min(72vh,520px);
    overflow-y:auto;
    padding:10px 12px 12px;
    background:var(--card);
    border:2px solid var(--accent);
    border-radius:12px;
    box-shadow:0 12px 32px rgba(0,0,0,.45);
    -webkit-overflow-scrolling:touch;
  }

  .mobile-nav-section + .mobile-nav-section{
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid var(--border);
  }

  .mobile-nav-section-title{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text-muted);
    margin-bottom:8px;
  }

  .mobile-nav-links{
    display:flex;
    flex-direction:column;
    gap:4px;
  }

  .mobile-nav-links a.mobile-nav-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:10px;
    text-decoration:none;
    color:var(--text);
    border:1px solid var(--border);
    background:color-mix(in srgb, var(--card) 88%, #000);
    font-size:14px;
    transition:background .12s ease,border-color .12s ease;
  }

  .mobile-nav-links a.mobile-nav-link:hover{
    background:var(--muted);
    border-color:var(--border);
  }

  .mobile-nav-links a.mobile-nav-link.is-active{
    border:2px solid var(--accent);
    background:transparent;
  }

  .mobile-nav-links a.mobile-nav-link .nav-icon{
    width:20px;
    height:20px;
    object-fit:contain;
    flex-shrink:0;
  }

  .mobile-nav-action{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    text-align:left;
    padding:10px 12px;
    margin:0;
    border-radius:10px;
    font-size:14px;
    cursor:pointer;
    color:var(--text);
    border:1px solid var(--border);
    background:color-mix(in srgb, var(--card) 88%, #000);
    transition:background .12s ease,border-color .12s ease;
  }

  .mobile-nav-action:hover{
    background:var(--muted);
  }

  .mobile-nav-action-ico{
    flex-shrink:0;
    font-size:16px;
    line-height:1;
  }
}

/* Logo */
#topbar .logo{
  height:90px;
}

/* Brand (testo) */
#topbar .brand{
  font-size:18px;
  font-weight:600;
  white-space:nowrap;
}

#topbar .user-label{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  line-height:1.2;
  color:var(--text-muted);
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px 8px;
  background:color-mix(in srgb, var(--card) 90%, #000);
}

/* Badge */
#topbar .badge{
  display:inline-block;
}

/* Label bottoni: di default quella lunga */
#topbar .label-full{
  display:inline;
}
#topbar .label-short{
  display:none;
}

/* --- Mobile <= 600px: grid 2x3 con user label dedicata --- */
@media (max-width:600px){
  /* TOPBAR: trasformata in griglia 2x3
     colonna 1: logo su due righe
     colonna 2, riga 1: pulsanti (topbar-right)
     colonna 2, riga 2: brand (testo)
     colonna 2, riga 3: user label */
  #topbar{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto auto;
    align-items:center;
    width:100%;
    gap:4px;
  }

  /* topbar-left diventa "trasparente" per la griglia:
     usiamo direttamente i figli (.logo, .brand) come elementi della grid */
  #topbar .topbar-left{
    display:contents;
  }

  /* LOGO: colonna 1, su due righe */
  #topbar .logo{
    height:110px;
    grid-column:1;
    grid-row:1 / span 3;
  }

  /* BRAND: colonna 2, riga 2, allineato a sinistra e leggermente più piccolo */
  #topbar .brand{
    font-size:16px;
    grid-column:2;
    grid-row:2;
    justify-self:flex-start;
  }

  #topbar .user-label{
    grid-column:2;
    grid-row:3;
    justify-self:flex-start;
    margin-top:2px;
  }

  /* BADGE nascosto su mobile */
  #topbar .badge{
    display:none !important;
  }

  /* Eccezione: badge utente loggato (non nasconderlo su mobile) */
  #topbar #userBadge{
    display:inline-block !important;
  }

  /* BOTTONI: colonna 2, riga 1, allineati a destra */
  #topbar .topbar-right{
    grid-column:2;
    grid-row:1;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
    margin-top:0;
    width:100%;
  }

  /* Label bottoni: breve su mobile */
  #topbar .label-full{
    display:none !important;
  }
  #topbar .label-short{
    display:inline !important;
  }
}



/* ============================================================
   NAVIGAZIONE
   ============================================================ */
.nav{
  display:grid;
  gap:6px;
}

.nav a{
  padding:10px 12px;
  border-radius:12px;
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, filter .15s ease, transform .02s ease;
}

.nav a:hover{
  background:var(--muted);
  border-color:var(--border);
}

.nav a.active{
  background: transparent;          /* niente sfondo pieno */
  color: inherit;                   /* stesso colore delle altre voci */
  border: 2px solid var(--accent);  /* solo un bordo rosso/arancione */
  box-shadow: none;                 /* niente glow/ombra */
}

/* Icone nel menu */
.nav-item{
  display:flex;
  align-items:center;
  gap:6px;
}

.nav-icon{
  width:20px;
  height:20px;
  object-fit:contain;
}

/* ============================================================
   CARD, TOOLBAR, UTILITY
   ============================================================ */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  margin-top:14px;
}

.card h3{
  margin:0 0 8px;
  font-size:16px;
}

.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}

.empty{
  padding:24px;
  text-align:center;
  color:var(--text-muted);
  border:1px dashed var(--border);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 75%, #000);
}

.footer{
  opacity:.7;
  font-size:12px;
  margin-top:18px;
  text-align:center;
  color:var(--text-muted);
}

hr.sep{
  border:0;
  border-top:1px solid var(--border);
  margin:10px 0;
}

.w-full{
  width:100%;
}

.muted{
  opacity:.75;
}

/* Grid helpers */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}

@media(max-width:900px){
  .grid2,.grid3,.grid4{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   FORM & INPUT
   ============================================================ */
.input,
select,
textarea{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card) 78%, #000);
  color:var(--text);
}

.iinput{
  width:100%;
  padding:6px 8px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card) 78%, #000);
  color:var(--text);
}

:where(input,select,textarea,button,.btn):focus{
  outline:none;
  box-shadow:var(--focus-ring);
  border-color:var(--primary);
}

/* Multi select scroll */
select.multilist{
  max-height:240px;
  overflow:auto;
}

/* ============================================================
   BOTTONI (btn)
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:36px;
  padding:0 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--muted);
  color:var(--text);
  font-weight:600;
  cursor:pointer;
  transition:filter .15s ease, transform .02s ease, box-shadow .15s ease;
}

.btn:hover{
  filter:brightness(1.06);
}

.btn:active{
  transform:translateY(1px);
}

.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Primario (gradient rosso) */
.btn.primary,
button.primary,
input[type="submit"].primary{
  background:linear-gradient(180deg, var(--primary), var(--accent));
  color:#210006;
  border-color:transparent;
  box-shadow:0 6px 18px rgba(255,74,90,.25);
}

/* Danger */
.btn.danger{
  background:#c23b3b;
  color:#fff;
  border-color:#a22f2f;
}
.btn.danger:hover{
  filter:brightness(1.05);
}

/* Ghost */
.btn.ghost{
  background:transparent;
  border:1px solid var(--primary);
}

/* Bottoni: evita andare a capo brutto con icone/testi */
.btn{ white-space:nowrap; }

/* Toolbar: spaziatura un po’ più consistente con bottoni */
.toolbar{ align-items:center; }


/* ============================================================
   TABELLE – STILE UNIFICATO
   ============================================================ */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:12px;
  overflow:hidden;
  background:color-mix(in srgb, var(--card) 85%, #000);
  border:2px solid var(--table-border); /* bordo rosso più spesso */
}

.table thead th,
.table tbody td{
  padding:8px 10px;
  vertical-align:middle;
}

/* Intestazione: sfondo bordeaux + grassetto */
.table thead th{
  background:var(--table-header-bg);
  color:var(--table-header-text);
  font-size:12px;
  font-weight:var(--table-header-weight);
  text-align:left;
  border-bottom:2px solid var(--table-border);
}

/* Bordi tra le righe (rossi attenuati) */
.table th,
.table td{
  border-bottom:1px solid var(--table-row-border);
}

/* Bordi verticali leggeri (opzionale) */
.table th,
.table td{
  border-right:1px solid color-mix(in srgb, var(--primary) 40%, transparent);
}
.table th:last-child,
.table td:last-child{
  border-right:none;
}

/* Celle editabili */
.table td[contenteditable="true"],
.itable td[contenteditable="true"]{
  outline:0;
  background:#10131d;
}

/* Tabelle interne modale (itable) */
.itable{
  width:100%;
  border-collapse:collapse;
}
.itable th,
.itable td{
  border-bottom:1px solid var(--border-subtle);
  padding:8px;
  vertical-align:middle;
}

/* Classifiche: colonna Dettaglio responsive */
.table-classifiche .dettaglio-cell .toggle-dettaglio{
  display:none;
}
.table-classifiche .dettaglio-cell .dettaglio-content{
  display:block;
}

@media(max-width:768px){
  .table-classifiche .dettaglio-cell{
    vertical-align:top;
  }
  .table-classifiche .dettaglio-cell .toggle-dettaglio{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    color:var(--text);
    padding:4px 8px;
    border-radius:999px;
    border:1px solid var(--accent, var(--border));
    background:transparent;
    cursor:pointer;
    margin-bottom:4px;
    white-space:nowrap;
  }
  .table-classifiche .dettaglio-cell .dettaglio-content{
    display:none;
    font-size:12px;
  }
  .table-classifiche .dettaglio-cell.expanded .dettaglio-content{
    display:block;
  }
}

/* Archivio Classifiche – blocchi campionato×anno */
#acTable .group-header td{
  background:var(--muted);
  font-weight:700;
  padding-top:8px;
  border-top:2px solid var(--border);
}
#acTable .spacer td{
  height:6px;
  border:none;
}
#acTable td{
  padding:4px 8px;
}

/* Panoramica piloti – tabella molto compatta */
#tblPilotOverview th,
#tblPilotOverview td{
  padding:2px 3px;
}

#tblPilotOverview thead th:not(:first-child){
  writing-mode:vertical-rl;
  text-orientation:mixed;
  white-space:nowrap;
  font-size:0.7rem;
  padding:2px 0;
  text-align:center;
}

#tblPilotOverview tbody td{
  text-align:center;
  min-width:18px;
  max-width:24px;
}

/* Frecce trend */
.arrow-trend{
  display:inline-block;
  font-size:0.85rem;
}
.arrow-trend.up{ color:#4ade80; }
.arrow-trend.down{ color:#f97373; }
.arrow-trend.flat{ color:var(--text-muted); }

/* ============================================================
   CAMPIONATI – residui spostati da campionati.html
   ============================================================ */

/* Colonna Formula: preview tronca */
td.col-formula{ 
  max-width:220px; 
  vertical-align:top; 
}
td.col-formula .formula-preview{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;      /* 2 righe desktop */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
  cursor:default;
}
@media (max-width:600px){
  td.col-formula{ max-width:160px; }
  td.col-formula .formula-preview{ -webkit-line-clamp:1; } /* 1 riga mobile */
}

/* Max risultati: forzato colonna sinistra della grid2 */
#rowMaxRis { 
  grid-column: 1; 
}

/* Testo guida sotto l'input */
#rowMaxRis .help {
  display:block;
  margin-top:6px;
  font-size:.85em;
  opacity:.75;
}

/* Formula: riga input con simbolo "=" (tolti inline style) */
.field-inline{
  display:flex;
  align-items:center;
  gap:6px;
}
.field-inline .field-prefix{
  font-weight:700;
  font-size:1.1em;
  opacity:.9;
}
.field-inline .input{
  flex:1;
}

/* Toolbar: variante allineata a destra */
.toolbar.end{
  justify-content:flex-end;
}

/* ============================================================
   MODALI (modal + imodal)
   ============================================================ */
.modal-backdrop,
.imodal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2147483000;
  pointer-events:all;
}

.modal,
.imodal{
  background:var(--elevated);
  border:1px solid var(--border);
  border-radius:12px;
  max-width:1100px;
  width:95%;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.modal-header,
.imodal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--border-subtle);
  gap:12px;
  flex-wrap:wrap;
}

.modal-title,
.imodal-title{
  margin:0;
  font-size:18px;
}

.modal-actions,
.imodal-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.modal-body,
.imodal-body{
  padding:8px 12px;
  overflow:auto;
}

/* ============================================================
   MODALI GLOBALI (unificate)
   ============================================================ */

/* Stato base: backdrop e modale sono nascosti finché non c'è .open */
.modal-backdrop,
.imodal-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 2147483000;
}

.modal,
.imodal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2147483001;
  width: auto;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

/* Apertura gestita via classe .open (usata da login, importReview, contatto, ecc.) */
.modal.open,
.modal-backdrop.open,
.imodal.open,
.imodal-backdrop.open{
  display: flex;
}

/* Pannello contenuto modale: riuso palette globale */
.modal .panel,
.imodal .panel{
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  min-width: min(420px, 90vw);
  max-width: min(720px, 96vw);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 18px 45px rgba(0,0,0,.7);
}

.modal .panel h3,
.imodal .panel h3{
  margin: 0 0 12px 0;
}

/* Utility globale per nascondere elementi */
.hidden{
  display: none !important;
}

@media (max-width: 600px){
  .modal .panel,
  .imodal .panel{
    min-width: min(320px, 96vw);
    padding: 14px;
  }
}


/* ============================================================
   TABS STILE BROWSER (Archivio)
   ============================================================ */
.tabs--browser{
  display:flex;
  gap:.1rem;
  align-items:flex-end;
  border-bottom:1px solid var(--border);
  margin:0 0 12px 0;
  padding-left:2px;
}

.tabs--browser .tab{
  appearance:none;
  background:var(--muted);
  color:var(--text);
  border:1px solid var(--border);
  border-bottom:none;
  padding:8px 12px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  cursor:pointer;
  opacity:.8;
}

.tabs--browser .tab.is-active{
  background:transparent;
  opacity:1;
  font-weight:700;
  border-color:var(--primary);
  box-shadow:none;
}

.tab-pane[hidden]{
  display:none;
}

/* ============================================================
   BANNER & RIGA ADMIN
   ============================================================ */
.banner{
  margin-top:4px;
  padding:3px 8px;
  border-radius:4px;
  font-size:.78rem;
  line-height:1.1;
  display:inline-block;
}

.banner.ok{
  background:rgba(16,51,26,0.85);
  border:1px solid #1e6f3f;
  color:#b9f6ca;
}

.banner.warn{
  background:rgba(42,35,35,0.85);
  border:1px solid #6b2a2a;
  color:#ffd6d6;
}

.banner.info{
  background:rgba(37,99,235,0.18);
  border:1px solid #3b82f6;
  color:#dbeafe;
}

.admin-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:8px;
}

@media(max-width:768px){
  .admin-row{
    display:none;
  }
}

/* ============================================================
   HOME – STATISTICHE COMPATTE
   ============================================================ */
.home-top .card{
  padding:10px 12px;
  min-width:140px;
  max-width:160px;
}

.home-top .card h3{
  font-size:0.9rem;
  margin-bottom:4px;
}

.home-top .empty{
  padding:8px 0;
  font-size:1.1rem;
}

@media(max-width:900px){
  .home-top .grid3{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }
  .home-top .card{
    min-width:110px;
    max-width:130px;
    padding:8px 10px;
  }
  .home-top .empty{
    padding:6px 0;
    font-size:1rem;
  }
}

/* ============================================================
   CALENDARIO GARE – MOBILE
   ============================================================ */
@media(max-width:768px){

  /* Nasconde colonna Campionati (4ª colonna) */
  #calendarioGare .table thead th:nth-child(4),
  #calendarioGare .table tbody td:nth-child(4){
    display:none;
  }

  /* Riduci padding e font per tutte le celle del calendario */
  #calendarioGare .table thead th,
  #calendarioGare .table tbody td{
    padding:6px 4px;
    font-size:12px;
  }

  /* Più spazio al nome gara/tracciato (3ª colonna) */
  #calendarioGare .table thead th:nth-child(3),
  #calendarioGare .table tbody td:nth-child(3){
    width:60%;
  }

  /* Colonna Data più stretta */
  #calendarioGare .table thead th:nth-child(1){
    width:80px !important;
  }
}

/* ============================================================
   GESTIONE GARE – FILTRI & ACCORDION MOBILE
   ============================================================ */
@media(max-width:768px){

  #filtroGareContainer{
    margin-top:10px;
    margin-bottom:8px;
  }

  #filtroGareContainer h3{
    font-size:14px;
    margin-bottom:6px;
  }

  #filtroGareContainer .form-group{
    margin-bottom:8px !important;
  }

  #filtroGareContainer input,
  #filtroGareContainer select{
    padding:6px 8px !important;
    font-size:13px !important;
    height:34px !important;
  }

  #filtroGareContainer .card,
  #filtroGareContainer form{
    padding:10px 12px !important;
  }

  #filtroGareContainer .form-label{
    font-size:12px;
    margin-bottom:3px;
  }
}

/* Accordion filtri */
.card-filtro-gare .filter-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
}

.card-filtro-gare .filter-title::after{
  content:'▾';
  font-size:0.85em;
  opacity:0.7;
  transition:transform .2s ease;
}

.card-filtro-gare .filter-body{
  margin-top:8px;
}

@media (max-width:768px){
  .card-filtro-gare{
    padding:10px 12px;
  }

  .card-filtro-gare .filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .card-filtro-gare label{
    font-size:12px;
    margin-bottom:3px;
  }

  .card-filtro-gare .input{
    padding:6px 8px;
    font-size:13px;
    height:34px;
  }

  .card-filtro-gare .toolbar{
    margin-top:6px;
  }

  .card-filtro-gare.collapsed .filter-body{
    display:none;
  }

  .card-filtro-gare.collapsed .filter-title::after{
    transform:rotate(-90deg);
  }
}

/* ============================================================
   ICONCINE TIPO GARA
   ============================================================ */
.race-with-icon{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.race-icon,
.race-icon-cono{
  width:18px;
  height:18px;
  object-fit:contain;
}

.race-icon.salita{
  font-size:18px;
  line-height:1;
}

/* ============================================================
   TOGGLE CARD FILTRI (header sezione)
   ============================================================ */
.section-title-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.filter-toggle-btn{
  width:36px;
  height:36px;
  min-width:36px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.filter-toggle-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.filter-toggle-btn[aria-pressed="true"]{
  border-color:var(--accent);
  color:var(--accent);
}

.filter-icon{
  width:16px;
  height:16px;
  object-fit:contain;
  display:inline-block;
}

.btn .filter-icon{
  width:14px;
  height:14px;
  margin-right:6px;
}

.is-hidden{
  display:none !important;
}

/* ============================================================
   PAGINA HELP
   - stili specifici di help.html centralizzati qui
   ============================================================ */

.help-layout-header{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.help-layout-header .subtitle{
  color:var(--text-muted);
  font-size:13px;
}

.help-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
  margin-top:10px;
}

.help-toolbar .field{
  min-width:220px;
  flex:1;
}

.help-search-status{
  font-size:12px;
  color:var(--text-muted);
  margin-top:4px;
}

.help-section{
  scroll-margin-top:80px;
}

.help-section h3{
  margin-top:0;
}

/* tag (pill) sopra paragrafi/sezioni */
.help-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card) 85%, var(--primary-soft) 15%);
  color:var(--text-muted);
}

.help-tag.tech::before{content:"🛠️";}
.help-tag.ops::before{content:"👨‍💻";}

/* link "torna su" */
.help-back-top{
  display:inline-flex;
  margin-top:10px;
  font-size:12px;
  color:var(--text-muted);
  text-decoration:none;
  gap:4px;
  align-items:center;
}

.help-back-top::before{content:"↑";}

/* blocchi di codice / esempi di config */
.help-code-block{
  font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-size:12px;
  background:color-mix(in srgb, var(--card) 70%, #000 30%);
  border-radius:6px;
  padding:8px 10px;
  overflow:auto;
  border:1px solid var(--border);
  white-space:pre;
}

/* note / avvisi laterali */
.help-note{
  font-size:12px;
  color:var(--text-muted);
  border-left:3px solid var(--border-strong);
  padding-left:8px;
  margin-top:6px;
}

/* descrizioni chiave/valore */
.help-kv{
  display:grid;
  grid-template-columns:minmax(0,140px) minmax(0,1fr);
  gap:4px 12px;
  font-size:13px;
}

.help-kv dt{
  font-weight:600;
  color:var(--text-muted);
}

.help-kv dd{
  margin:0;
}

@media (max-width:768px){
  .help-toolbar{
    align-items:stretch;
  }
  .help-kv{
    grid-template-columns:minmax(0,1fr);
  }
}

/* evidenziazione inline nei testi */
.help-highlight{
  background:var(--accent, #f1c40f);
  color:inherit;
  padding:0 1px;
  border-radius:2px;
}

/* flow generale dei passi */
.process-flow{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  margin-top:10px;
}

/* singolo step del flow */
.flow-step{
  position:relative;
  border-radius:10px;
  border:1px solid var(--border);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary-soft) 55%, transparent), transparent 55%),
    var(--card);
  padding:10px 10px 10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
}

/* badge numerato dello step */
.flow-badge{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:600;
  background:var(--elevated);
  margin-bottom:4px;
}

.flow-title{
  font-weight:600;
  font-size:13px;
}

.flow-meta{
  font-size:11px;
  color:var(--text-muted);
}

/* label rami/condizioni nel flow */
.flow-branch-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--text-muted);
  margin-top:10px;
  margin-bottom:4px;
}

/* ============================================================
   CAR SETUP
   ============================================================ */

/*
  Contenimento nel viewport su TUTTE le larghezze (non solo <=900px):
  - colonne grid con minmax(300px)/520px forzano overflow sotto ~600–1000px
  - .main in .layout senza min-width:0 non restringe sotto la larghezza del contenuto
  - toolbar azioni sessione senza flex-wrap taglia i pulsanti a destra
*/
body.page-car-setup .layout{
  min-width:0;
  max-width:100%;
}
body.page-car-setup .main{
  min-width:0;
  max-width:100%;
}
body.page-car-setup .post-test-grid,
body.page-car-setup .post-test-card,
body.page-car-setup #setupContextCard,
body.page-car-setup #postTestTyreCard,
body.page-car-setup .setup-context-groups,
body.page-car-setup .setup-context-group,
body.page-car-setup .setup-context-grid,
body.page-car-setup .setup-context-grid > *{
  min-width:0;
}
body.page-car-setup .setup-context-groups{
  grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
body.page-car-setup .setup-context-group-base{
  grid-column:1 / -1;
}
body.page-car-setup .setup-context-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}
body.page-car-setup .setup-session-actions{
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  max-width:100%;
}
body.page-car-setup .setup-session-actions .btn{
  flex:1 1 12rem;
  min-width:0;
  max-width:100%;
}
body.page-car-setup .setupsheet-top-main .setupsheet-meta-grid{
  grid-template-columns:1fr;
}
/* Wizard: togli min-width 520px fisso che esce dallo schermo su finestre strette */
body.page-car-setup .setup-guided-wizard-panel{
  min-width:0 !important;
  width:min(1180px, calc(100vw - 24px)) !important;
  max-width:calc(100vw - 24px) !important;
  box-sizing:border-box !important;
}
body.page-car-setup .modal .panel.setup-guided-wizard-panel{
  min-width:0 !important;
  width:min(1180px, calc(100vw - 24px)) !important;
  max-width:calc(100vw - 24px) !important;
  box-sizing:border-box !important;
}
body.page-car-setup #setupGuidedWizardModal.modal.open{
  align-items:flex-start;
  justify-content:center;
  padding:max(10px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
body.page-car-setup .setup-wizard-component-fields-host{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
body.page-car-setup .setup-context-grid .input,
body.page-car-setup .setup-context-grid select{
  max-width:100%;
}
body.page-car-setup #setupInlineHost{
  min-width:0;
  max-width:100%;
}

.setup-legacy-toolbar{
  display:none;
}

.setup-header-compact{
  align-items:flex-start;
}

.setup-hgroup-compact{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
}

.setup-hgroup-compact h1{
  margin:0;
}

.setup-hgroup-compact p{
  margin:0;
  line-height:1.2;
}

.setup-hgroup-compact #setupModeBanner{
  margin-top:0;
  margin-left:auto;
  white-space:nowrap;
}

.setup-top-info{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  padding:4px 8px;
  font-size:12px;
  line-height:1.15;
  max-width:min(48ch, 100%);
  background:color-mix(in srgb, var(--card) 88%, #000);
  color:var(--text);
}

.setup-top-info.is-hidden{
  display:none;
}

.setup-top-info.is-ok{
  border-color:color-mix(in srgb, #35c46f 55%, var(--border));
}

.setup-top-info.is-warn{
  border-color:color-mix(in srgb, #f0b84a 55%, var(--border));
}

.setup-top-info.is-info{
  border-color:color-mix(in srgb, var(--accent) 55%, var(--border));
}

.setup-winbar{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:2px;
  padding:4px 6px;
  border:1px solid var(--border);
  border-radius:10px;
  background:color-mix(in srgb, var(--card) 86%, #000);
}

.setup-win-item{
  position:relative;
}

.setup-win-trigger{
  background:transparent;
  color:var(--text);
  border:1px solid transparent;
  border-radius:6px;
  padding:6px 10px;
  cursor:pointer;
  font:inherit;
}

.setup-win-trigger:hover,
.setup-win-trigger.is-active{
  background:var(--muted);
  border-color:var(--border);
}

.setup-win-menu{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:220px;
  border:1px solid var(--border);
  border-radius:8px;
  background:color-mix(in srgb, var(--card) 90%, #000);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  display:none;
  z-index:200;
  padding:6px;
}

.setup-win-menu button{
  width:100%;
  text-align:left;
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  color:var(--text);
  font:inherit;
  padding:7px 8px;
  cursor:pointer;
}

.setup-win-menu button:hover{
  background:var(--muted);
  border-color:var(--border);
}

.setup-win-item.is-open .setup-win-menu{
  display:block;
}

.setup-active-path{
  margin-top:6px;
  font-size:12px;
  color:var(--text-muted);
}

.setup-inline-host .panel{
  width:100%;
  max-width:none;
  min-width:0 !important;
  padding:10px 12px;
}

.setup-inline-host{
  margin-top:8px;
  padding:10px 12px;
}

.setup-inline-host > .toolbar{
  margin-top:0;
  margin-bottom:2px;
}

#setupInlineBody{
  margin-top:4px;
}

.setup-inline-title-wrap{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
}

.setup-inline-subtitle{
  font-size:12px;
  color:var(--text-muted);
  line-height:1.2;
}

.setup-inline-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.setup-inline-assetto-actions{
  flex-wrap:wrap;
}

/* Pannello assetto/geometria/bilance in modalità inline: azioni in toolbar host, non in fondo al pannello */
#setupInlineBody .setup-assetto-modal-footer{
  display:none !important;
}

/* Una sola card (es. solo geometria): usa tutta la larghezza disponibile */
#setupAssettoCards > .setup-reg-card:only-child{
  grid-column:1 / -1;
  width:100%;
  max-width:100%;
}

.setup-reg-card.reg-geometry{
  border-width:2px;
  border-color:var(--primary);
}

.setup-reg-card.reg-scales{
  border-width:2px;
  border-color:var(--primary);
}

.setup-reg-card.reg-scales.scales-bilance-wide{
  grid-column:1 / -1;
  width:100%;
  max-width:min(920px, 100%);
  justify-self:stretch;
}

.scales-bilance-footer{
  margin-top:12px;
  display:grid;
  gap:10px;
}

.scales-bilance-footer-blocks{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}

@media (min-width:700px){
  .scales-bilance-footer-blocks{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:stretch;
  }
  .scales-bilance-footer-block--ghiera{
    grid-column:1 / -1;
  }
}

@media (min-width:1024px){
  .scales-bilance-footer-blocks{
    grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.35fr) minmax(0, 1.05fr);
    gap:10px;
  }
  .scales-bilance-footer-block--ghiera{
    grid-column:auto;
  }
}

.scales-bilance-footer-block{
  border:2px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  border-radius:10px;
  padding:8px 10px;
  background:color-mix(in srgb, var(--card) 90%, transparent);
  min-width:0;
}

.scales-bilance-footer-block--ghiera{
  container-type:inline-size;
  container-name:bilance-ghiera;
}

.scales-bilance-block-title{
  margin:0 0 4px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.scales-bilance-block-lead{
  margin:0;
  line-height:1.35;
  font-size:11px;
}

.scales-bilance-block-inner{
  display:grid;
  gap:8px 12px;
  align-items:end;
  min-width:0;
}

.scales-bilance-block-inner--peso{
  grid-template-columns:1fr;
}

@media (min-width:400px){
  .scales-bilance-block-inner--peso{
    grid-template-columns:minmax(0, 1fr) minmax(140px, 200px);
    align-items:center;
  }
}

.scales-bilance-block-copy{
  min-width:0;
}

.scales-bilance-block-field-col label,
.scales-bilance-ghiera-passo{
  display:grid;
  gap:4px;
}

.scales-bilance-block-field-col{
  min-width:0;
}

.scales-bilance-block-inner--ghiera{
  grid-template-columns:1fr;
  align-items:end;
}

@media (min-width:480px){
  .scales-bilance-block-inner--ghiera{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px 12px;
  }
  .scales-bilance-block-inner--ghiera .scales-bilance-block-copy{
    grid-column:1 / -1;
  }
}

@container bilance-ghiera (min-width:500px){
  .scales-bilance-block-inner--ghiera{
    grid-template-columns:minmax(0, 1.1fr) minmax(0, 120px) minmax(0, 1fr);
    gap:8px 10px;
    align-items:end;
  }
  .scales-bilance-block-inner--ghiera .scales-bilance-block-copy{
    grid-column:1;
    grid-row:1;
    align-self:end;
    padding-right:2px;
  }
  .scales-bilance-block-inner--ghiera .scales-bilance-ghiera-passo{
    grid-column:2;
    grid-row:1;
  }
  .scales-bilance-block-inner--ghiera .scales-bilance-checkbox-cell{
    grid-column:3;
    grid-row:1;
  }
}

.scales-bilance-footer-block--rake .scales-bilance-block-title{
  margin-bottom:2px;
}

.scales-bilance-footer-block--rake .scales-bilance-block-lead{
  margin-bottom:8px;
}

.scales-bilance-footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:10px;
  align-items:end;
}

.scales-bilance-footer-grid--rake{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 152px), 1fr));
  gap:8px 10px;
  align-items:start;
}

.scales-bilance-ghiera-passo{
  min-width:0;
}

.scales-bilance-checkbox-cell{
  display:grid;
  gap:4px;
  min-width:0;
}

.scales-bilance-checkbox-caption{
  font-size:10px;
  color:var(--text-muted);
  line-height:1.25;
}

.scales-bilance-checkbox-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0;
  font-size:12px;
  line-height:1.3;
}

.scales-bilance-perch-hint{
  margin-top:6px;
  line-height:1.35;
  font-size:11px;
}

.scales-bilance-footer-grid label{
  display:grid;
  gap:4px;
}

.scales-bilance-hint{
  line-height:1.35;
}

.scales-bilance-layout .tyre-field.tyre-field--scales{
  align-items:flex-start;
}

.scales-input-stack{
  display:grid;
  gap:2px;
  min-width:0;
}

.scales-inline-pred{
  font-size:10px;
  line-height:1.25;
  color:var(--text-muted);
  min-height:13px;
  padding-left:1px;
}

.scale-pill-weight{
  background:rgba(168,85,247,.2);
  color:#e9d5ff;
  border-color:#a855f7;
}

.scale-pill-height{
  background:rgba(45,212,191,.2);
  color:#ccfbf1;
  border-color:#14b8a6;
}

.scales-assistant-card{
  border-left:3px solid #a855f7;
}

.tyre-layout.scales-bilance-layout .tyre-card{
  border-color:color-mix(in srgb, var(--primary) 42%, var(--border));
}

.setup-geometry-axles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:10px;
  align-items:start;
}

.setup-geometry-axle{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:color-mix(in srgb, var(--card) 82%, #000);
}

.setup-geometry-axle-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.setup-geometry-axle-pos{
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text);
}

.setup-geometry-axle-icon{
  font-size:14px;
  color:#d1d5db;
  line-height:1;
}

.setup-geometry-field{
  margin-bottom:10px;
}

.setup-geometry-field:last-child{
  margin-bottom:0;
}

.setup-geometry-field-label{
  display:block;
  font-size:13px;
  font-weight:500;
  margin-bottom:6px;
  color:var(--text);
}

.setup-geometry-pill--camber{
  background:rgba(59,130,246,.22);
  color:#bfdbfe;
  border-color:#2563eb;
}

.setup-geometry-pill--toe{
  background:rgba(34,197,94,.2);
  color:#bbf7d0;
  border-color:#22c55e;
}

.setup-geometry-pill--caster{
  background:rgba(139,92,246,.22);
  color:#ddd6fe;
  border-color:#7c3aed;
}

.setup-geometry-hint{
  margin-top:4px;
  line-height:1.25;
}

.setup-geometry-static-note{
  margin:6px 0 0;
  font-size:12px;
  line-height:1.35;
  color:var(--text-muted);
}

.setup-toolbar-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.setup-context-groups{
  display:grid;
  grid-template-columns:repeat(2, minmax(300px, 1fr));
  gap:8px;
  margin-bottom:10px;
}

.setup-context-group{
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  background:color-mix(in srgb, var(--card) 88%, #000);
  display:grid;
  gap:8px;
}

.setup-context-group-base{
  grid-column:1 / -1;
}

.setup-context-group h5{
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--text-muted);
}

.setup-context-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:8px;
}

/* Rende più rapida la digitazione: niente spinner su campi numerici gomme/temperature. */
#setupContextCard input[type="number"],
.tyre-layout input[type="number"],
.scales-bilance-layout input[type="number"]{
  appearance:textfield;
  -moz-appearance:textfield;
}

#setupContextCard input[type="number"]::-webkit-outer-spin-button,
#setupContextCard input[type="number"]::-webkit-inner-spin-button,
.tyre-layout input[type="number"]::-webkit-outer-spin-button,
.tyre-layout input[type="number"]::-webkit-inner-spin-button,
.scales-bilance-layout input[type="number"]::-webkit-outer-spin-button,
.scales-bilance-layout input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.post-test-grid{
  margin-top:14px;
  display:grid;
  /* min(460px,100%) evita colonne più larghe del viewport su smartphone */
  grid-template-columns:repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap:10px;
  align-items:start;
}

.post-test-grid > .post-test-card{
  margin-top:0;
  padding:10px 12px;
}

.setup-session-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:6px;
}

.setup-session-header h3{
  margin:0;
}

.setup-session-actions{
  margin-top:0;
  margin-bottom:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}

.setup-home-quick-actions{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
/* Operatività setup: pulsanti più compatti, stesso stile (ghost / primary) */
.setup-home-quick-actions .btn{
  min-height:34px;
  height:auto;
  padding:6px 14px;
  font-size:13px;
  font-weight:600;
}

.setup-home-primary-actions{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.setup-home-primary-actions .btn{
  min-height:36px;
}

.setup-current-context{
  margin-top:8px;
  border:1px solid var(--border);
  border-left:3px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  border-radius:8px;
  padding:8px 10px;
  background:color-mix(in srgb, var(--card) 92%, #000);
  font-size:13px;
}

.setup-start-actions{
  margin-top:8px;
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-end;
  gap:8px;
}

.setup-start-actions .btn{
  min-height:32px;
  padding:4px 10px;
}

.setup-secondary-tools{
  margin-top:8px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:4px 8px;
  background:color-mix(in srgb, var(--card) 92%, #000);
}

.setup-secondary-tools > summary{
  cursor:pointer;
  font-size:12px;
  color:var(--text-muted);
  user-select:none;
}

.setup-secondary-tools[open] > summary{
  margin-bottom:6px;
}

#setupInitialPrep{
  margin-top:10px;
}

.setup-advanced-toggle{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--text-muted);
}

.setup-advanced-toggle input{
  accent-color:var(--accent);
}

.setup-journey-wrap{
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px;
  background:color-mix(in srgb, var(--card) 92%, #000);
}

.setup-journey-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.setup-journey-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.setup-journey-head h4{
  margin:0;
  font-size:14px;
}

.setup-journey-progress{
  font-size:12px;
  color:var(--text-muted);
}

.setup-journey-list{
  margin-top:8px;
  display:grid;
  gap:6px;
}

.setup-journey-primary-action{
  margin-top:8px;
}

.setup-journey-primary-action .btn{
  min-height:36px;
}

.setup-journey-item{
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:color-mix(in srgb, var(--card) 90%, #000);
}

.setup-journey-item.is-done{
  border-color:color-mix(in srgb, #35c46f 55%, var(--border));
  padding-top:5px;
  padding-bottom:5px;
  opacity:.92;
}

.setup-journey-item-main{
  min-width:0;
  flex:1 1 auto;
}

.setup-journey-item-title{
  font-size:13px;
  font-weight:600;
}

.setup-journey-item-status{
  font-size:12px;
  color:var(--text-muted);
}

.setup-journey-item .btn{
  flex:0 0 auto;
  min-height:32px;
  padding:4px 10px;
}

.setupsheet-card{
  margin-top:10px;
  padding:10px 12px;
}

/* Riga superiore: sempre due colonne — sinistra compatta, destra (immagini) usa tutto lo spazio restante */
.setupsheet-top-layout{
  display:grid;
  grid-template-columns:minmax(min(108px, 28%), min(380px, 38%)) minmax(0, 1fr);
  gap:10px 12px;
  align-items:start;
  margin-bottom:10px;
}
.setupsheet-top-main{
  min-width:0;
}
.setupsheet-top-main .setupsheet-head{
  margin-bottom:6px;
}
.setupsheet-top-main .setupsheet-meta-grid{
  grid-template-columns:1fr;
  margin-bottom:0;
}
.setupsheet-top-visual{
  min-width:0;
  border:2px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius:10px;
  padding:6px 8px 8px;
  background:color-mix(in srgb, var(--card) 92%, #000);
}
/* PC: due immagini affiancate per ridurre l’ingombro verticale */
.setupsheet-top-image-stack{
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:10px;
  width:100%;
}
.setupsheet-top-figure{
  margin:0;
  min-width:0;
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.setupsheet-top-caption{
  margin:6px 2px 0;
  font-size:11px;
  line-height:1.35;
  color:var(--text-muted);
  text-align:center;
}
.setupsheet-top-caption strong{
  color:color-mix(in srgb, var(--text) 82%, var(--text-muted));
  font-weight:600;
}
.setupsheet-top-visual .setupsheet-image-frame{
  width:100%;
  max-width:100%;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  /* affiancate: meno altezza ciascuna rispetto alla colonna singola */
  max-height:clamp(88px, 20vh, 240px);
}
.setupsheet-top-visual .setupsheet-image-frame img{
  max-width:100%;
  max-height:clamp(88px, 20vh, 240px);
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.setupsheet-top-visual .setupsheet-image-frame.is-zoom2 img{
  transform:scale(1.22);
  transform-origin:center center;
}

.setupsheet-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.setupsheet-title-wrap h3{
  margin:0;
}

.setupsheet-logo{
  width:176px;
  max-width:40%;
  height:auto;
  object-fit:contain;
  border:1px solid var(--border);
  border-radius:8px;
  background:color-mix(in srgb, var(--card) 85%, #000);
}

.setupsheet-meta-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px, 1fr));
  gap:6px 10px;
  margin-bottom:8px;
}

.setupsheet-meta-grid > div{
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 8px;
  background:color-mix(in srgb, var(--card) 90%, #000);
  display:grid;
  gap:2px;
}

.setupsheet-select{
  min-height:30px;
  padding:4px 8px;
  font-size:12px;
}

.setupsheet-save-home-btn{
  margin-top:6px;
  width:fit-content;
}

.setup-home-quick-actions .setupsheet-save-home-btn{
  margin-top:0;
}

.setup-guided-wizard-card{
  margin-top:10px;
  border:2px solid color-mix(in srgb, var(--primary) 60%, var(--border));
  border-radius:12px;
  padding:10px;
  background:color-mix(in srgb, var(--card) 90%, #000);
  display:grid;
  gap:8px;
}

.setup-guided-wizard-step{
  width:fit-content;
  border:1px solid var(--border);
  border-radius:999px;
  padding:2px 10px;
  font-size:11px;
  color:var(--text-muted);
}

.setup-guided-wizard-title{
  margin:0;
}

.setup-guided-wizard-text{
  margin:0;
  line-height:1.4;
}

.setup-guided-wizard-text.is-why{
  color:color-mix(in srgb, var(--text) 86%, var(--text-muted));
}

.setup-guided-wizard-inline-fields{
  margin-top:2px;
  display:grid;
  gap:8px;
}

.setup-guided-wizard-inline-fields .setup-combobox-field{
  max-width:560px;
}

.setup-guided-wizard-inline-fields [hidden]{
  display:none !important;
}

.setup-wizard-vehicle-mode-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
}
.setup-wizard-mode-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}
.setup-wizard-new-vehicle-fields .setup-subnote{
  margin-top:6px;
}
.setup-wizard-path-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.setup-wizard-preset-summary{
  margin-bottom:10px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:color-mix(in srgb, var(--card) 92%, #000);
}
.setup-wizard-component-family-label{
  margin-top:6px;
}
.setup-wizard-component-fields-host{
  margin-top:10px;
  max-height:min(72vh, 820px);
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px 12px 8px;
  border:1px solid color-mix(in srgb, var(--border) 85%, var(--accent));
  border-radius:10px;
  background:color-mix(in srgb, var(--card) 94%, #000);
}
.setup-wizard-component-fields-inner{
  max-width:none;
  width:100%;
}
.setup-wizard-component-hint{
  margin:0 0 10px;
}
.setup-wizard-component-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:0 0 10px;
}
.setup-wizard-component-instances{
  display:grid;
  gap:10px;
}
.setup-wizard-component-instance{
  border:2px solid color-mix(in srgb, var(--primary) 55%, var(--border));
  border-radius:10px;
  padding:8px 10px;
  background:color-mix(in srgb, var(--card) 92%, #000);
}
.setup-wizard-component-instance-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.setup-wizard-component-instance-title{
  font-size:13px;
  font-weight:600;
}
.setup-wizard-component-remove{
  padding:4px 10px;
  font-size:12px;
}
.setup-wizard-component-grid.setup-wizard-step-fields{
  margin-top:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:8px;
}
@media (min-width:900px){
  .setup-wizard-component-grid.setup-wizard-step-fields{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media (min-width:1200px){
  .setup-wizard-component-grid.setup-wizard-step-fields{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

.setup-wizard-step-fields{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:8px;
}

.setup-wizard-step-fields .wizard-full{
  grid-column:1 / -1;
}

/* Host componenti: senza span su tutta la riga, la griglia auto-fit lasciava colonne vuote a destra */
.setup-wizard-step-fields > .setup-wizard-component-fields-host{
  grid-column:1 / -1;
  min-width:0;
  width:100%;
}

.setupsheet-grid{
  column-count:2;
  column-gap:8px;
  margin-bottom:8px;
}

.setupsheet-group{
  border:2px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  border-radius:10px;
  padding:8px;
  background:color-mix(in srgb, var(--card) 90%, #000);
  break-inside:avoid;
  margin:0 0 8px;
  display:inline-block;
  width:100%;
  vertical-align:top;
}

.setupsheet-group-compact{
  min-width:0;
}

.setupsheet-group-compact .setupsheet-row{
  grid-template-columns:92px auto;
  gap:6px;
}

.setupsheet-group h4{
  margin:0 0 6px;
  font-size:13px;
}

.setupsheet-row{
  display:grid;
  grid-template-columns:minmax(128px, 156px) minmax(0, 1fr);
  gap:8px;
  padding:3px 0;
  border-bottom:1px dashed color-mix(in srgb, var(--border) 85%, transparent);
}

.setupsheet-row:last-child{
  border-bottom:none;
}

.setupsheet-row-link{
  cursor:pointer;
  border-radius:6px;
  transition:background .15s ease, border-color .15s ease;
}

.setupsheet-row-link:hover,
.setupsheet-row-link:focus-visible{
  background:var(--muted);
  outline:none;
}

.setupsheet-k{
  font-size:12px;
  color:var(--text-muted);
}

.setupsheet-footnote-tag{
  font-size:10px;
  vertical-align:super;
  opacity:.9;
}

.setupsheet-v{
  font-size:12px;
}

.setupsheet-inline-values{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
}

.setupsheet-inline-number{
  width:62px;
  min-height:24px;
  padding:2px 6px;
  font-size:12px;
}

.setupsheet-inline-text{
  width:100%;
  min-height:24px;
  padding:2px 6px;
  font-size:12px;
}

.setupsheet-image-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-start;
  width:100%;
}

.setupsheet-image-frame{
  position:relative;
  display:inline-block;
  overflow:hidden;
  border-radius:12px;
  width:min(340px, 100%);
  max-width:100%;
  height:220px;
  background:transparent;
}

.setupsheet-image-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.setupsheet-image-frame.is-zoom2 img{
  transform:scale(2);
  transform-origin:center center;
}

.setupsheet-image-frame.is-soft-fade::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) 55%, transparent) 0%,
      transparent 10%,
      transparent 90%,
      color-mix(in srgb, var(--bg) 55%, transparent) 100%),
    radial-gradient(circle at top left, color-mix(in srgb, var(--bg) 45%, transparent) 0, transparent 66%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--bg) 45%, transparent) 0, transparent 66%),
    radial-gradient(circle at bottom left, color-mix(in srgb, var(--bg) 45%, transparent) 0, transparent 66%),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--bg) 45%, transparent) 0, transparent 66%);
}

.setupsheet-images-card{
  margin:0 0 8px;
  width:100%;
  padding:6px;
}

.setup-grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-bottom:10px;
}

.component-range-field{
  display:grid;
  gap:4px;
  grid-column:1 / -1;
}

.component-range-title{
  font-weight:600;
}

.component-range-inputs{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.component-range-item{
  display:grid;
  gap:4px;
  font-size:12px;
  color:var(--text-muted);
}

@media (max-width: 600px){
  .component-range-inputs{
    grid-template-columns:1fr;
  }
}

.setup-assistant-compact-fields{
  gap:8px;
}

.setup-assistant-compact-fields > label{
  display:grid;
  gap:4px;
}

.setup-assistant-compact-fields .setup-assistant-field-wide{
  grid-column:1 / -1;
}

.setup-assistant-focus-row{
  display:grid;
  grid-template-columns:minmax(240px, max-content) minmax(260px, 1fr);
  gap:14px;
  align-items:start;
}

.setup-assistant-focus-field{
  display:grid;
  gap:4px;
}

.setup-assistant-focus-checks{
  display:grid;
  gap:8px;
  align-content:start;
  padding-top:24px;
}

.setup-assistant-compact-fields .setup-assistant-focus-select{
  width:auto;
  max-width:100%;
  overflow:hidden;
}

.setup-assistant-compact-fields .setup-assistant-checkbox-field{
  display:flex;
  align-items:center;
  gap:8px;
}

@media (max-width: 900px){
  /* Solo pagina Car setup: niente impatto su altre viste */
  body.page-car-setup .main{
    padding:12px 12px 16px;
  }

  body.page-car-setup .header.setup-header-compact{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  body.page-car-setup .setup-assistant-focus-row{
    grid-template-columns:1fr;
  }
  body.page-car-setup .setup-assistant-focus-checks{
    padding-top:0;
  }
  body.page-car-setup .setup-session-header{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  body.page-car-setup .setup-session-actions{
    justify-content:flex-start;
    flex-wrap:wrap;
    width:100%;
  }
  body.page-car-setup .setup-session-actions .btn{
    min-height:44px;
  }
  /* setup sheet top: resta a 2 colonne (parametri | immagini a destra), non sotto */
  body.page-car-setup .setupsheet-top-layout{
    grid-template-columns:minmax(min(100px, 30%), min(340px, 40%)) minmax(0, 1fr);
    gap:8px 8px;
  }
  body.page-car-setup .setupsheet-head{
    flex-direction:column;
  }
  body.page-car-setup .setupsheet-logo{
    max-width:100%;
    width:100%;
  }
  body.page-car-setup .setupsheet-meta-grid{
    grid-template-columns:1fr;
  }
  body.page-car-setup .setupsheet-grid{
    column-count:1;
  }
  body.page-car-setup .setupsheet-group-compact{
    min-width:0;
    width:100%;
  }
  body.page-car-setup .setupsheet-group-compact .setupsheet-row{
    grid-template-columns:minmax(88px, 110px) minmax(0, 1fr);
  }
  body.page-car-setup .setupsheet-image-grid{
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  /* Setup sheet · immagini in alto: evita min-height/aspect del blocco precedente (solo griglia) che su telefono creava vuoti enormi sotto le foto */
  body.page-car-setup .setupsheet-top-visual{
    padding:4px 6px 4px;
  }
  body.page-car-setup .setupsheet-top-image-stack{
    flex-direction:column;
    gap:4px;
  }
  body.page-car-setup .setupsheet-top-figure{
    flex:none;
    width:100%;
  }
  body.page-car-setup .setupsheet-top-caption{
    margin:3px 1px 0;
    font-size:10px;
    line-height:1.3;
  }
  body.page-car-setup .setupsheet-top-visual .setupsheet-image-frame{
    min-height:0 !important;
    aspect-ratio:unset;
    max-height:min(124px, 34vw);
  }
  body.page-car-setup .setupsheet-top-visual .setupsheet-image-frame img{
    max-height:min(124px, 34vw);
  }

  body.page-car-setup .setup-hgroup-compact{
    align-items:flex-start;
    gap:6px;
  }
  body.page-car-setup .setup-hgroup-compact #setupModeBanner{
    margin-left:0;
    white-space:normal;
  }
  body.page-car-setup .setup-top-info{
    width:100%;
    max-width:none;
  }
  body.page-car-setup .setup-inline-host > .toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  body.page-car-setup .setup-inline-title-wrap{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
  body.page-car-setup .setup-inline-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:8px;
  }
  body.page-car-setup .setup-inline-actions .btn{
    min-height:44px;
  }
  /* NO overflow-x:auto: con overflow-x ≠ visible il browser clippa anche in Y
     e le tendine .setup-win-menu (position:absolute) non risultano visibili. */
  body.page-car-setup .setup-winbar{
    flex-wrap:wrap;
    align-items:flex-start;
    gap:6px 4px;
    overflow:visible;
    white-space:normal;
    padding-bottom:8px;
  }
  body.page-car-setup .setup-win-trigger{
    min-height:44px;
    padding:8px 12px;
    white-space:nowrap;
  }
  body.page-car-setup .setup-win-menu button{
    min-height:44px;
  }
  body.page-car-setup .setup-win-menu{
    max-width:min(280px, calc(100vw - 20px));
    max-height:min(70vh, 420px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:250;
  }
  body.page-car-setup .setup-home-quick-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px 8px;
    align-items:stretch;
  }
  body.page-car-setup .setup-home-quick-actions .btn{
    width:100%;
    min-height:38px;
    padding:7px 8px;
    font-size:12px;
    justify-content:center;
    text-align:center;
    line-height:1.25;
    white-space:normal;
  }
  body.page-car-setup .setup-start-actions{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:6px;
  }
  body.page-car-setup .setup-home-primary-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }
  body.page-car-setup .setup-home-primary-actions .btn{
    width:100%;
    min-height:40px;
  }
  body.page-car-setup .setup-journey-head-actions{
    gap:6px;
  }
  body.page-car-setup #btnSetupJourneyToggleCompleted{
    padding:4px 8px;
    min-height:28px;
    font-size:11px;
  }
  body.page-car-setup .setup-journey-item{
    align-items:center;
    flex-direction:row;
    gap:8px;
    padding:6px 8px;
  }
  body.page-car-setup .setup-journey-item-title{
    font-size:12px;
    line-height:1.2;
  }
  body.page-car-setup .setup-journey-item-status{
    font-size:11px;
    line-height:1.2;
  }
  body.page-car-setup .setup-journey-item .btn{
    min-height:30px;
    padding:4px 9px;
    white-space:nowrap;
  }
  body.page-car-setup .setup-journey-item.is-done{
    opacity:.88;
  }
  body.page-car-setup .setup-journey-primary-action{
    position:sticky;
    bottom:8px;
    z-index:20;
    padding-top:4px;
    background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--card) 88%, #000) 36%);
  }
  body.page-car-setup .setup-journey-primary-action .btn{
    width:100%;
    min-height:42px;
  }
  body.page-car-setup .post-test-grid{
    grid-template-columns:1fr;
  }
  /* Telefono: gomme post-test prima della card contesto (Base sessione, ecc.) */
  body.page-car-setup #postTestTyreCard{
    order:-1;
  }
  body.page-car-setup .setup-toolbar-grid,
  body.page-car-setup .setup-grid-2,
  body.page-car-setup .setup-grid-3{
    grid-template-columns:1fr;
  }
  body.page-car-setup .setup-context-groups{
    grid-template-columns:1fr;
  }
  /* Gomme/bilance: stessa topologia del desktop (auto al centro, 4 ruote ai lati), colonna centrale stretta */
  body.page-car-setup .tyre-layout{
    grid-template-columns:minmax(0, 1fr) clamp(72px, 24vw, 120px) minmax(0, 1fr);
    grid-template-areas:
      "front front front"
      "fl car fr"
      "rl car rr";
    gap:8px 6px;
    align-items:stretch;
  }
  body.page-car-setup .tyre-layout .car-top-view{
    min-height:0;
    width:100%;
    height:min(164px, 40vw);
    max-height:min(164px, 40vw);
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:center;
  }
  body.page-car-setup .tyre-layout .car-top-image{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
  body.page-car-setup .tyre-layout .tyre-card{
    padding:6px 7px;
    min-width:0;
  }
  body.page-car-setup .tyre-layout .tyre-card-head{
    margin-bottom:6px;
  }
  body.page-car-setup .tyre-layout .tyre-pos{
    font-size:11px;
  }
  body.page-car-setup .tyre-layout .tyre-field{
    grid-template-columns:18px minmax(0, 1fr);
    gap:5px;
    margin-bottom:6px;
  }
  body.page-car-setup .tyre-layout .tyre-temp-row{
    gap:4px;
  }
  body.page-car-setup .tyre-layout .tyre-temp-row label{
    gap:3px;
  }
  body.page-car-setup .tyre-layout .tyre-pill{
    width:18px;
    height:18px;
    font-size:9px;
  }
  body.page-car-setup .tyre-layout .input{
    padding:5px 6px;
    font-size:12px;
    min-height:34px;
  }
  body.page-car-setup .setup-reg-cards{
    grid-template-columns:repeat(2, max-content);
    justify-content:space-between;
  }
  body.page-car-setup .setup-reg-card{
    width:max-content;
    max-width:100%;
  }
  body.page-car-setup .setup-family-grid{
    grid-template-columns:1fr;
  }
  body.page-car-setup .adaptive-card-groups{
    grid-template-columns:1fr !important;
  }
  body.page-car-setup .adaptive-fields{
    grid-template-columns:1fr;
  }
  body.page-car-setup .component-archive-card{
    width:100%;
    min-width:0;
    max-width:none;
    flex:1 1 100%;
  }
  body.page-car-setup .component-archive-group{
    max-width:none;
  }
  /* Card componenti: su PC sono 2–3 colonne di gruppi; su telefono restano almeno 2 colonne
     (es. Base | Limiti) invece di collassare tutto in una colonna. */
  body.page-car-setup .component-archive-groups.cols-1{
    grid-template-columns:minmax(0, 1fr);
  }
  body.page-car-setup .component-archive-groups.cols-2,
  body.page-car-setup .component-archive-groups.cols-3{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  body.page-car-setup .component-archive-column{
    min-width:0;
    width:auto;
    max-width:100%;
  }
  body.page-car-setup .component-archive-kv-grid.kv-two-cols{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:4px 8px;
  }
  body.page-car-setup .setup-panel-wide{
    width:100%;
  }
  body.page-car-setup .setup-guided-wizard-panel,
  body.page-car-setup .modal .panel.setup-guided-wizard-panel{
    width:100% !important;
    max-height:min(90vh, calc(100vh - 32px)) !important;
  }

  /* Contenuto inline (schede componenti, tabelle): scroll orizzontale se serve */
  body.page-car-setup #setupInlineBody{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
}

.input-picker-wrap{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:6px;
  align-items:center;
}

.input-picker-btn{
  height:36px;
  min-width:36px;
  padding:0 8px;
  border-radius:10px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card) 78%, #000);
  color:var(--text-muted);
  cursor:pointer;
}

.no-native-picker{
  appearance:textfield;
}

.no-native-picker::-webkit-calendar-picker-indicator{
  display:none;
  opacity:0;
  pointer-events:none;
}

.setup-combobox-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:40;
  border:1px solid var(--border);
  border-radius:10px;
  background:color-mix(in srgb, var(--card) 94%, #000);
  max-height:280px;
  overflow:auto;
  box-shadow:0 10px 20px rgba(0,0,0,.26);
}

.setup-combobox-field{
  position:relative;
  display:block;
}

.setup-combobox-item{
  display:block;
  width:100%;
  border:0;
  border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background:transparent;
  color:var(--text);
  text-align:left;
  padding:8px 10px;
  font-size:13px;
  cursor:pointer;
}

.setup-combobox-item:last-child{
  border-bottom:0;
}

.setup-combobox-item:hover,
.setup-combobox-item.is-active{
  background:color-mix(in srgb, var(--primary) 18%, transparent);
}

.setup-combobox-empty{
  padding:8px 10px;
  color:var(--text-muted);
  font-size:12px;
}

.hover-help{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-left:6px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text-muted);
  font-size:11px;
  font-weight:700;
  cursor:help;
  vertical-align:middle;
}

.hover-help::after{
  content:attr(data-tooltip);
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  z-index:20;
  min-width:260px;
  max-width:320px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card) 94%, #000);
  color:var(--text);
  white-space:pre-line;
  line-height:1.3;
  font-size:11px;
  font-weight:500;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transform:translateY(-2px);
  transition:opacity .15s ease, transform .15s ease;
}

.hover-help:hover::after{
  opacity:1;
  transform:translateY(0);
}

.preset-scorecards{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:8px;
  margin:6px 0 10px;
}

.preset-scorecard{
  width:280px;
  max-width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px;
  background:color-mix(in srgb, var(--card) 88%, #000);
}

.preset-scorecard.is-selected{
  border-color:var(--primary);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
}

.preset-scorecard-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
  align-items:flex-start;
}

.preset-scorecard-title{
  font-size:13px;
  font-weight:700;
  line-height:1.2;
}

.preset-scorecard-meta{
  color:var(--text-muted);
  font-size:11px;
}

.preset-score-row{
  display:grid;
  grid-template-columns:110px minmax(0, 1fr) 34px;
  gap:8px;
  align-items:center;
  margin-bottom:4px;
}

.preset-score-label{
  font-size:11px;
  color:var(--text-muted);
}

.preset-score-track{
  height:8px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--muted) 80%, #000);
}

.preset-score-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
}

.preset-score-value{
  font-size:11px;
  text-align:right;
  font-weight:700;
}

.adaptive-card-groups{
  margin-top:8px;
  display:grid;
  gap:10px;
}

.adaptive-card-groups.cols-1{ grid-template-columns:1fr; }
.adaptive-card-groups.cols-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.adaptive-card-groups.cols-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

.adaptive-card-group{
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px;
  background:color-mix(in srgb, var(--card) 88%, #000);
}

.adaptive-fields{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:8px;
  margin-bottom:0;
}

.setup-grid-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.tyre-quick-bubble{
  position:fixed;
  z-index:2300;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in srgb, var(--card) 92%, #000);
  box-shadow:0 10px 24px rgba(0,0,0,.3);
}

.tyre-quick-bubble::before{
  content:'';
  position:absolute;
  left:-6px;
  top:50%;
  width:8px;
  height:8px;
  background:color-mix(in srgb, var(--card) 92%, #000);
  border-left:1px solid var(--border);
  border-bottom:1px solid var(--border);
  transform:translateY(-50%) rotate(45deg);
}

.tyre-quick-bubble.is-hidden{
  display:none;
}

.tyre-quick-bubble .btn{
  height:26px;
  min-width:0;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
}

#btnTyreApplyClose{
  width:24px;
  padding:0;
  font-size:14px;
  line-height:1;
}

.tyre-layout{
  margin-top:10px;
  display:grid;
  grid-template-columns:minmax(240px, 1fr) minmax(180px, 220px) minmax(240px, 1fr);
  grid-template-areas:
    "front front front"
    "fl car fr"
    "rl car rr";
  gap:12px;
  align-items:center;
}

.tyre-layout-front{
  grid-area:front;
  justify-self:center;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--text-muted);
}

.tyre-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:color-mix(in srgb, var(--card) 84%, #000);
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}

.tyre-fl{ grid-area:fl; }
.tyre-fr{ grid-area:fr; }
.tyre-rl{ grid-area:rl; }
.tyre-rr{ grid-area:rr; }

.tyre-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}

.tyre-pos{
  font-size:12px;
  font-weight:700;
}

.tyre-icon{
  font-size:14px;
  color:#d1d5db;
}

.tyre-field{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}

.tyre-temp-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.tyre-temp-row label{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:0;
  width:100%;
}

.tyre-temp-row label .input{
  width:100%;
  min-width:0;
}

.tyre-pill{
  width:20px;
  height:20px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
}

.tyre-pill-pressure{
  background:rgba(59,130,246,.2);
  color:#bfdbfe;
  border-color:#2563eb;
}

.tyre-pill-inner{
  background:rgba(251,191,36,.22);
  color:#fde68a;
  border-color:#f59e0b;
}

.tyre-pill-center{
  background:rgba(239,68,68,.2);
  color:#fecaca;
  border-color:#ef4444;
}

.tyre-pill-outer{
  background:rgba(34,197,94,.2);
  color:#bbf7d0;
  border-color:#22c55e;
}

.car-top-view{
  grid-area:car;
  min-height:300px;
  border:1px solid var(--border);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 18%, rgba(34,197,94,.12), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  position:relative;
  overflow:hidden;
}

.car-top-image{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.28));
}

.setup-panel-wide{
  width:min(920px, 96vw);
  min-width:min(920px, 96vw) !important;
  max-width:min(920px, 96vw);
}

.setup-guided-wizard-panel{
  width:min(1180px, 98vw);
  min-width:min(520px, 96vw) !important;
  max-width:min(1180px, 98vw);
}

/* Più specifico di `.modal .panel { max-width: 720px }` così il wizard usa tutta la larghezza prevista */
.modal .panel.setup-guided-wizard-panel{
  max-width:min(1180px, 98vw) !important;
  width:min(1180px, 98vw);
}

.setup-section summary{
  cursor:pointer;
}

.setup-section{
  content-visibility:auto;
  contain-intrinsic-size: 320px;
}

.setup-section-body{
  min-height: 40px;
}

.setup-badge{
  display:inline-block;
  border-radius:999px;
  font-size:11px;
  padding:2px 8px;
  border:1px solid var(--border);
}

.setup-badge.static{
  background:rgba(59,130,246,.18);
  border-color:#3b82f6;
  color:#dbeafe;
}
.setup-badge.dynamic{
  background:rgba(34,197,94,.18);
  border-color:#22c55e;
  color:#dcfce7;
}
.setup-badge.calc{
  background:rgba(251,191,36,.18);
  border-color:#fbbf24;
  color:#fef3c7;
}

.setup-subnote{
  margin-top:2px;
  font-size:12px;
  color:var(--text-muted);
}

.setup-warnings{
  border-left:3px solid #f59e0b;
  padding:4px 10px;
  margin:6px 0 10px;
  font-size:12px;
  color:#fef3c7;
  background:rgba(245,158,11,.09);
}

.setup-assistant-output{
  margin-top:10px;
  display:grid;
  gap:8px;
}

.setup-assistant-card{
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  background:color-mix(in srgb, var(--card) 88%, #000);
}

.tyre-analysis-card{
  border-left:3px solid var(--border);
}

.tyre-analysis-card.severity-critical{
  border-left-color:#ef4444;
}

.tyre-analysis-card.severity-high{
  border-left-color:#f97316;
}

.tyre-analysis-card.severity-medium{
  border-left-color:#f59e0b;
}

.tyre-analysis-card.severity-low{
  border-left-color:#22c55e;
}

.setup-assistant-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 240px;
  gap:12px;
  align-items:start;
}

.setup-assistant-head{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.setup-assistant-side{
  font-size:11px;
  line-height:1.35;
  color:var(--text);
  border-left:1px solid var(--border);
  padding-left:10px;
}

.setup-assistant-score-col{
  display:grid;
  gap:6px;
}

.setup-assistant-considered-title{
  color:var(--text);
  font-weight:600;
}

.setup-assistant-considered-list{
  display:grid;
  gap:3px;
}

.setup-motorsport-ref{
  margin-top:6px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 8px;
  background:color-mix(in srgb, var(--card) 92%, #000);
}

.setup-motorsport-ref summary{
  cursor:pointer;
  font-size:12px;
  color:var(--text);
  font-weight:600;
}

.setup-motorsport-ref[open] summary{
  margin-bottom:4px;
}

.setup-assistant-considered-key{
  color:var(--text);
}

.setup-assistant-considered-value{
  color:#d1fae5;
  font-weight:600;
}

@media (max-width: 980px){
  .setup-assistant-layout{
    grid-template-columns:1fr;
  }
  .setup-assistant-side{
    border-left:none;
    border-top:1px solid var(--border);
    padding-left:0;
    padding-top:8px;
  }
}

.setup-reg-cards{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(2, max-content);
  gap:12px;
  justify-content:space-between;
  align-items:start;
}

.setup-reg-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:color-mix(in srgb, var(--card) 84%, #000);
  display:grid;
  gap:10px;
  width:max-content;
  max-width:100%;
}

.setup-reg-card.reg-susp{
  border-color:#3b82f6;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.setup-reg-card-badge-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.setup-reg-card.reg-susp .setup-reg-card-main{
  display:grid;
  grid-template-columns:minmax(0, max-content) minmax(0, max-content);
  justify-content:space-between;
  align-items:start;
  column-gap:14px;
}

.setup-reg-card.reg-susp .setup-reg-card-main .setup-reg-fields{
  order:1;
  min-width:0;
  width:max-content;
  max-width:100%;
}

.setup-reg-card.reg-susp .setup-reg-fields.adaptive-fields{
  grid-template-columns:1fr;
}

.setup-reg-card.reg-susp .setup-reg-card-main .setup-reg-media{
  order:2;
  width:max-content;
}

.setup-reg-card.reg-susp .setup-reg-image{
  width:112px;
  height:168px;
}

.setup-reg-card.reg-susp .setup-reg-input-row{
  grid-template-columns:28px minmax(150px, max-content);
}

.setup-reg-card.reg-susp label{
  width:max-content;
  max-width:100%;
}

.setup-reg-card.reg-arb{
  border-color:#f59e0b;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.setup-reg-card.reg-arb .setup-reg-card-main{
  display:grid;
  grid-template-columns:minmax(0, max-content) minmax(0, max-content);
  justify-content:space-between;
  align-items:start;
  column-gap:14px;
}

.setup-reg-card.reg-arb .setup-reg-card-main .setup-reg-fields{
  order:1;
  min-width:0;
  width:max-content;
  max-width:100%;
}

.setup-reg-card.reg-arb .setup-reg-fields.adaptive-fields{
  grid-template-columns:1fr;
}

.setup-reg-card.reg-arb .setup-reg-card-main .setup-reg-media{
  order:2;
  width:max-content;
}

/* Stessa area visiva delle card ammortizzatori (112×168); aspect variabile con contain */
.setup-reg-card.reg-arb .setup-reg-image{
  width:112px;
  height:168px;
  object-fit:contain;
  display:block;
}

.setup-reg-card.reg-weight{
  border-color:#8b5cf6;
}

.setup-reg-media{
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:color-mix(in srgb, var(--card) 74%, #000);
}

.setup-reg-image{
  width:100%;
  height:180px;
  object-fit:contain;
  display:block;
}

.setup-reg-fields{
  display:grid;
  gap:8px;
}

.setup-reg-input-row{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:8px;
  align-items:center;
}

.setup-reg-input-with-suffix{
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.setup-reg-input-with-suffix--plain{
  width:100%;
}

.setup-reg-input-suffixed{
  flex:1;
  min-width:0;
  padding-right:3.25rem;
}

.setup-reg-range-suffix{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  font-size:0.88em;
  color:rgba(148,163,184,.85);
  white-space:nowrap;
}

.setup-reg-feelbar{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:170px;
  max-width:170px;
  margin-top:0;
  color:rgba(226,232,240,.86);
  font-size:11px;
  line-height:1;
  user-select:none;
}

.setup-reg-feelbar-label{
  text-transform:lowercase;
  color:rgba(148,163,184,.9);
}

.setup-reg-feelbar-track{
  position:relative;
  flex:1;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:linear-gradient(90deg, #22c55e 0%, #facc15 50%, #ef4444 100%);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.28);
}

.setup-reg-feelbar-thumb{
  position:absolute;
  top:50%;
  left:0;
  width:10px;
  height:10px;
  border-radius:50%;
  transform:translate(-50%, -50%);
  background:#e2e8f0;
  border:1px solid rgba(15,23,42,.55);
  box-shadow:0 0 0 1px rgba(148,163,184,.35), 0 1px 3px rgba(0,0,0,.45);
}

.setup-reg-card.reg-susp .setup-reg-input-suffixed,
.setup-reg-card.reg-arb .setup-reg-input-suffixed{
  flex:0 0 42px;
  width:42px;
  min-width:42px;
  max-width:42px;
  padding-right:0;
}

.setup-reg-pill{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:700;
  border:1px solid var(--border);
  position:relative;
  overflow:visible;
}

.setup-reg-pill.pill-speed-low::after,
.setup-reg-pill.pill-speed-high::after{
  content:"";
  position:absolute;
  right:-2px;
  bottom:-3px;
  width:18px;
  height:9px;
  background-repeat:no-repeat;
  background-size:100% 100%;
  pointer-events:none;
  opacity:.96;
}

/* Low speed: una sinus completa */
.setup-reg-pill.pill-speed-low::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M1 4 C3 1 5 1 7 4 C9 7 11 7 13 4' fill='none' stroke='%23ef4444' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* High speed: sinus piu compattate (frequenza maggiore) */
.setup-reg-pill.pill-speed-high::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 9'%3E%3Cpath d='M1 5 C2 3 3 3 4 5 C5 7 6 7 7 5 C8 3 9 3 10 5 C11 7 12 7 13 5 C14 3 15 3 16 5' fill='none' stroke='%23ef4444' stroke-width='1.35' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (max-width: 980px){
  /* Dati a sinistra, immagine a destra (anche su telefono): non impilare sotto i 980px */
  .setup-reg-card.reg-susp .setup-reg-card-main,
  .setup-reg-card.reg-arb .setup-reg-card-main{
    grid-template-columns:minmax(0, 1fr) auto;
    column-gap:10px;
    align-items:start;
  }
  .setup-reg-card.reg-susp .setup-reg-card-main .setup-reg-fields,
  .setup-reg-card.reg-arb .setup-reg-card-main .setup-reg-fields{
    min-width:0;
  }
  .setup-reg-card.reg-susp .setup-reg-card-main .setup-reg-media,
  .setup-reg-card.reg-arb .setup-reg-card-main .setup-reg-media{
    width:auto;
    max-width:min(108px, 32vw);
    justify-self:end;
    align-self:start;
  }
  .setup-reg-card.reg-susp .setup-reg-card-main .setup-reg-image,
  .setup-reg-card.reg-arb .setup-reg-card-main .setup-reg-image{
    width:100%;
    max-width:min(108px, 32vw);
    height:auto;
    max-height:min(150px, 42vw);
    object-fit:contain;
    display:block;
  }
}

.pill-rebound{
  background:rgba(59,130,246,.2);
  color:#bfdbfe;
  border-color:#2563eb;
}

.pill-bump-low{
  background:rgba(34,197,94,.2);
  color:#bbf7d0;
  border-color:#22c55e;
}

.pill-bump-high{
  background:rgba(251,191,36,.2);
  color:#fde68a;
  border-color:#f59e0b;
}

.setup-family-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.setup-family-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:color-mix(in srgb, var(--card) 86%, #000);
}

.setup-family-card h5{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.setup-family-card.family-brakes{ border-color:#ef4444; }
.setup-family-card.family-susp{ border-color:#3b82f6; }
.setup-family-card.family-arb{ border-color:#f59e0b; }
.setup-family-card.family-drivetrain{ border-color:#22c55e; }
.setup-family-card.family-tyres{ border-color:#64748b; }

.component-archive-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px;
}

.component-archive-card{
  border:2px solid var(--primary);
  border-radius:12px;
  padding:8px 9px;
  background:color-mix(in srgb, var(--card) 86%, #000);
  flex:0 1 auto;
  width:fit-content;
  min-width:320px;
  max-width:min(100%, 760px);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}

.component-archive-grid.is-single .component-archive-card{
  max-width:min(100%, 760px);
}

.component-archive-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  margin-bottom:6px;
}

/* Evita che ID lunghi (es. cmp_antiroll_bars_…) rubino tutta la larghezza e facciano
   andare a capo i pulsanti Modifica/Elimina nella toolbar (flex-wrap globale). */
.component-archive-head > div:first-child{
  min-width:0;
  flex:1 1 auto;
}

.component-archive-head .toolbar{
  flex-wrap:nowrap;
  flex-shrink:0;
  margin-top:0;
  align-self:flex-start;
}

.component-archive-title{
  font-weight:700;
}

.component-archive-type-row{
  display:flex;
  align-items:center;
  margin-bottom:4px;
}

.component-type-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--primary) 60%, transparent);
  background:color-mix(in srgb, var(--primary) 14%, transparent);
  color:var(--text);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1;
}

.component-type-icon{
  width:14px;
  height:14px;
  display:block;
}

.component-type-select-preview{
  margin-top:6px;
  display:flex;
  align-items:center;
}

.component-type-select-preview .component-type-badge{
  font-size:10px;
  padding:3px 8px;
}

.wizard-family-preview{
  justify-content:flex-start;
}

.component-type-badge.type-brakes,
.component-type-badge.type-brakes-disc,
.component-type-badge.type-brakes-caliper,
.component-type-badge.type-brakes-pad{
  border-color:color-mix(in srgb, #ef4444 70%, transparent);
  background:color-mix(in srgb, #ef4444 18%, transparent);
}

.component-type-badge.type-tires{
  border-color:color-mix(in srgb, #64748b 70%, transparent);
  background:color-mix(in srgb, #64748b 22%, transparent);
}

.component-type-badge.type-dampers{
  border-color:color-mix(in srgb, #3b82f6 70%, transparent);
  background:color-mix(in srgb, #3b82f6 18%, transparent);
}

.component-type-badge.type-springs{
  border-color:color-mix(in srgb, #f59e0b 70%, transparent);
  background:color-mix(in srgb, #f59e0b 18%, transparent);
}

.component-type-badge.type-antiroll-bars{
  border-color:color-mix(in srgb, #eab308 70%, transparent);
  background:color-mix(in srgb, #eab308 16%, transparent);
}

.component-type-badge.type-geometry{
  border-color:color-mix(in srgb, #a855f7 70%, transparent);
  background:color-mix(in srgb, #a855f7 18%, transparent);
}

.component-type-badge.type-differential{
  border-color:color-mix(in srgb, #22c55e 70%, transparent);
  background:color-mix(in srgb, #22c55e 16%, transparent);
}

.component-archive-id{
  font-size:12px;
  color:var(--text-muted);
  margin-top:1px;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.component-archive-groups{
  display:grid;
  gap:6px 6px;
  align-items:start;
  justify-content:start;
}

.component-archive-groups.cols-1{
  grid-template-columns:minmax(220px, max-content);
}

.component-archive-groups.cols-2{
  grid-template-columns:repeat(2, minmax(220px, max-content));
}

.component-archive-groups.cols-3{
  grid-template-columns:repeat(3, minmax(210px, max-content));
}

.component-archive-column{
  display:grid;
  gap:6px;
  align-content:start;
  min-width:220px;
  width:max-content;
}

.component-archive-group{
  border:1px solid var(--border-subtle);
  border-radius:8px;
  padding:6px 7px;
  background:color-mix(in srgb, var(--card) 90%, #000);
  display:block;
  width:auto;
  min-width:0;
  max-width:none;
  margin:0;
}

.component-archive-group.group-base{
  max-width:none;
}

.component-archive-group-title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-muted);
  margin-bottom:6px;
}

.component-archive-kv-grid{
  display:grid;
  gap:5px 12px;
}

.component-archive-kv-grid.kv-one-col{
  grid-template-columns:1fr;
}

.component-archive-kv-grid.kv-two-cols{
  grid-template-columns:repeat(2, minmax(135px, 1fr));
  gap:4px 6px;
}

.component-archive-kv-row{
  min-width:0;
  width:fit-content;
  max-width:100%;
}

.component-archive-kv-key{
  font-size:11px;
  color:var(--text-muted);
}

.component-archive-kv-value{
  font-size:13px;
  word-break:break-word;
}

.component-archive-topbar{
  position:sticky;
  top:0;
  z-index:2;
  padding:4px 0 6px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, #000), color-mix(in srgb, var(--card) 80%, #0000));
}

.component-archive-note{
  margin-top:0;
  margin-bottom:2px;
}

.setup-inline-host.is-components-view .component-archive-note{
  display:none;
}

.setup-inline-host.is-components-view .component-archive-topbar{
  display:none;
}

.component-archive-section-title{
  margin-top:8px;
  margin-bottom:6px;
}

/* La modale di modifica parametro deve stare sopra alle altre modali setup. */
#setupEditBackdrop{
  z-index:2147483002;
}

#setupEditModal{
  z-index:2147483003;
}

@media (max-width: 760px){
  body.page-car-setup .setup-reg-cards{
    grid-template-columns:1fr;
  }
  body.page-car-setup .setup-reg-card{
    width:100%;
  }
}

/* ============================================================
   DASHBOARD ADMIN – controlli stato
   ============================================================ */
.dashboard-health-header{
  margin:8px 0 10px;
}
.dashboard-summary-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 12px;
}
.dashboard-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card) 90%, #000);
  font-size:12px;
  font-weight:700;
}
.dashboard-pill.ok{ border-color:#22c55e; color:#bbf7d0; }
.dashboard-pill.warning{ border-color:#f59e0b; color:#fde68a; }
.dashboard-pill.error{ border-color:#ef4444; color:#fecaca; }

.dashboard-checks-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.dashboard-check-card{
  border:2px solid var(--primary);
  border-radius:10px;
  padding:10px;
  background:color-mix(in srgb, var(--card) 90%, #000);
  cursor:default;
}
.dashboard-check-card h4{
  margin:0 0 8px;
}
.dashboard-check-card:focus{
  outline:2px solid color-mix(in srgb, var(--primary) 60%, #fff);
  outline-offset:2px;
}
.dashboard-check-list{
  display:grid;
  gap:8px;
}
.dashboard-check-row{
  display:flex;
  gap:8px;
  align-items:flex-start;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  padding:6px 8px;
}
.dashboard-check-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:66px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:11px;
  padding:2px 8px;
  font-weight:700;
  white-space:nowrap;
}
.dashboard-check-badge.ok{ border-color:#22c55e; color:#22c55e; }
.dashboard-check-badge.warning{ border-color:#f59e0b; color:#f59e0b; }
.dashboard-check-badge.error{ border-color:#ef4444; color:#ef4444; }
.dashboard-check-detail{
  font-size:12px;
  color:var(--text-muted);
  white-space: pre-wrap;
}

.dashboard-check-row-inputs{
  display:none;
  margin-top:4px;
  font-size:12px;
  color:var(--text-muted);
}

.dashboard-check-row[data-expanded="true"] .dashboard-check-row-inputs{
  display:block;
}

.dashboard-check-row{
  cursor:pointer;
}

.dashboard-check-input-chips{
  display:inline-flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}

.dashboard-check-input-ref{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border-subtle);
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  color:var(--text-muted);
  background:color-mix(in srgb, var(--card) 95%, #000);
}

@media (max-width: 900px){
  .dashboard-checks-grid{ grid-template-columns:1fr; }
}