/* ==========================================================================
   RACE ENGINEER - MOBILE TELEMETRY DASHBOARD
   Certificato al 100% per iPad Mini 1ª gen (iOS 9.3.5 / Safari 9 WebKit)
   Regole assolute: NO CSS Grid, NO Flex Gap, NO dvh/svh/lvh, NO clamp/min/max
   Prefissi venditore completi: -webkit-box, -webkit-flex, flex
   Palette Motorsport Dark Mode ad alto contrasto
   ========================================================================== */

/* --- Reset & Base --- */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #0d0e12;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Monospace per telemetria, tempi e delta */
.font-mono {
  font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

/* Contenitore Principale Schermo Intero */
#app-viewport {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ==========================================================================
   BANNER SAFETY CAR (Giallo Lampeggiante ad altissima visibilità)
   ========================================================================== */
.sc-banner {
  width: 100%;
  min-height: 42px;
  background-color: #ffd600;
  color: #000000;
  padding: 6px 14px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  border-bottom: 3px solid #000000;
  z-index: 10050;
  position: relative;
  cursor: pointer;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-animation: sc-flash 1s infinite ease-in-out;
  animation: sc-flash 1s infinite ease-in-out;
}

.sc-banner.sc-hidden {
  display: none !important;
}

@-webkit-keyframes sc-flash {
  0%, 100% {
    background-color: #ffd600;
    color: #000000;
    opacity: 1;
    -webkit-box-shadow: 0 0 20px rgba(255, 214, 0, 0.9);
  }
  50% {
    background-color: #ff9100;
    color: #000000;
    opacity: 0.8;
    -webkit-box-shadow: 0 0 8px rgba(255, 145, 0, 0.5);
  }
}

@keyframes sc-flash {
  0%, 100% {
    background-color: #ffd600;
    color: #000000;
    opacity: 1;
    box-shadow: 0 0 20px rgba(255, 214, 0, 0.9);
  }
  50% {
    background-color: #ff9100;
    color: #000000;
    opacity: 0.8;
    box-shadow: 0 0 8px rgba(255, 145, 0, 0.5);
  }
}

.sc-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

.sc-icon {
  font-size: 18px;
  margin: 0 8px;
}

.sc-type-tag {
  background-color: #000000;
  color: #ffd600;
  font-size: 12px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 1px;
  margin-right: 10px;
}

.sc-message {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* ==========================================================================
   1. HEADER SUPERIORE COMPATTO
   ========================================================================== */
.app-header {
  height: 48px;
  min-height: 48px;
  background-color: #15181f;
  border-bottom: 1px solid #242a36;
  padding: 0 14px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  z-index: 100;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.header-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.app-brand {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin-right: 14px;
}

.brand-icon {
  width: 22px;
  height: 22px;
  fill: #00e5ff;
  margin-right: 8px;
}

.app-title {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #ffffff;
  text-transform: uppercase;
}

.app-title-accent {
  color: #00e5ff;
}

/* Badge Stato Connessione */
.badge-status {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: #1e2430;
  color: #8b949e;
  border: 1px solid #2d3545;
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  background-color: #8b949e;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

/* Stati Connessione */
.badge-status.status-connecting .badge-dot {
  background-color: #ffd600;
}
.badge-status.status-connecting {
  color: #ffd600;
  border-color: rgba(255, 214, 0, 0.35);
}

.badge-status.status-online .badge-dot {
  background-color: #00e676;
}
.badge-status.status-online {
  color: #00e676;
  border-color: rgba(0, 230, 118, 0.35);
}

.badge-status.status-ontrack .badge-dot {
  background-color: #00e5ff;
}
.badge-status.status-ontrack {
  color: #00e5ff;
  border-color: rgba(0, 229, 255, 0.4);
}

.badge-status.status-offline .badge-dot {
  background-color: #ff1744;
}
.badge-status.status-offline {
  color: #ff1744;
  border-color: rgba(255, 23, 68, 0.35);
}

/* Centro: Nome Circuito & Info Sessione */
.header-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
}

.track-info-badge {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.session-sep {
  display: inline-block;
  color: #3b4455;
  margin: 0 8px;
  font-weight: 400;
}

.session-info-badge {
  font-size: 12px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
}

/* Destra: Tasto Impostazioni / Chiave Sessione */
.header-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.btn-header {
  background-color: #1e2430;
  border: 1px solid #2d3545;
  color: #c9d1d9;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  outline: none;
  -webkit-transition: background-color 0.15s ease, border-color 0.15s ease;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-header:active {
  background-color: #2b3345;
  border-color: #00e5ff;
}

.btn-icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
  margin-right: 6px;
}

/* ==========================================================================
   2. CORPO PRINCIPALE A DUE COLONNE (50% sinistra, 50% destra)
   ========================================================================== */
#main-dashboard {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
  height: calc(100% - 48px);
  max-height: calc(100% - 48px);
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  overflow: hidden;
  background-color: #0d0e12;
}

/* Quando il banner Safety Car è attivo in orizzontale */
#app-viewport.has-sc-banner #main-dashboard {
  height: calc(100% - 90px);
  max-height: calc(100% - 90px);
}
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  overflow: hidden;
  background-color: #0d0e12;
}

/* COLONNA SINISTRA: Auto F1 e 4 Ruote */
#panel-car {
  width: 50%;
  max-width: 50%;
  min-width: 50%;
  height: 100%;
  border-right: 1px solid #242a36;
  background-color: #12151c;
  padding: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* COLONNA DESTRA: Tempi, Settori e Minimappa */
#panel-right {
  width: 50%;
  max-width: 50%;
  min-width: 50%;
  height: 100%;
  background-color: #0d0e12;
  padding: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
}

/* ==========================================================================
   3. COLONNA SINISTRA: F1 CAR VIEW & 4 WHEELS
   Layout a tre colonne interne:
   [Ruote SX (FL, RL)] | [Monoposto F1 Centrale] | [Ruote DX (FR, RR)]
   ========================================================================== */
.car-telemetry-stage {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  position: relative;
}

/* Sotto-colonne laterali per le ruote */
.wheels-column {
  width: 31%;
  max-width: 31%;
  min-width: 31%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

/* Sotto-colonna centrale per l'auto F1 vettoriale */
#f1-car-body {
  width: 38%;
  max-width: 38%;
  min-width: 38%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: relative;
}

/* Card Ruota Singola (FL, FR, RL, RR) */
.wheel-card {
  width: 100%;
  background-color: #171b24;
  border: 1px solid #242a36;
  border-radius: 8px;
  padding: 8px 10px;
  position: relative;
  overflow: hidden;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Bordo laterale colorato che indica lo stato termico */
.wheel-card:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #00e676; /* Default: Ottimale */
}

.wheel-fl:before,
.wheel-rl:before {
  left: 0;
}

.wheel-fr:before,
.wheel-rr:before {
  right: 0;
}

/* Header Ruota: Posizione + Mescola */
.wheel-head {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 6px;
}

.wheel-pos-tag {
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.8px;
}

.wheel-compound-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background-color: #ff1744;
  color: #ffffff;
  text-transform: uppercase;
}

.compound-soft {
  background-color: #ff1744;
  color: #ffffff;
}

.compound-medium {
  background-color: #ffd600;
  color: #000000;
}

.compound-hard {
  background-color: #ffffff;
  color: #000000;
}

.compound-intermediate {
  background-color: #00e676;
  color: #000000;
}

.compound-wet {
  background-color: #00e5ff;
  color: #000000;
}

/* Barra orizzontale o indicatore visivo dello stato */
.wheel-indicator {
  height: 4px;
  width: 100%;
  background-color: #242a36;
  border-radius: 2px;
  margin-bottom: 8px;
  overflow: hidden;
  position: relative;
}

.wheel-indicator-bar {
  height: 100%;
  width: 100%;
  background-color: #00e676; /* Default: Ottimale */
  -webkit-transition: background-color 0.3s ease, width 0.3s ease;
  transition: background-color 0.3s ease, width 0.3s ease;
}

/* Dati telemetrici ruota (Usura, Superficie, Carcassa) */
.wheel-stat-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 4px;
}

.wheel-stat-row:last-child {
  margin-bottom: 0;
}

.stat-label {
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
}

.stat-value {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.stat-wear {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

.stat-temp-surf {
  color: #00e676;
}

.stat-temp-carc {
  color: #00e5ff;
}

/* Stati Termici e Usura: Classi di colore */
.tire-optimal {
  background-color: #00e676 !important;
  color: #00e676 !important;
}

.tire-cold {
  background-color: #00e5ff !important;
  color: #00e5ff !important;
}

.tire-warning {
  background-color: #ffd600 !important;
  color: #ffd600 !important;
}

.tire-critical {
  background-color: #ff1744 !important;
  color: #ff1744 !important;
}

/* Grafica F1 Car SVG e HUD Centrale */
.f1-svg-wrapper {
  position: relative;
  width: 100%;
  max-width: 170px;
  height: 100%;
  max-height: 400px;
  min-height: 260px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 0 auto;
}

.f1-car-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 160px;
  max-height: 360px;
}

/* 4 Ruote Dinamiche collegate alla monoposto F1 */
.svg-wheel-tire {
  -webkit-transition: fill 0.25s ease, stroke 0.25s ease;
  transition: fill 0.25s ease, stroke 0.25s ease;
}

.svg-wheel-tire.tire-cold {
  fill: #00e5ff !important;
  stroke: #00b0ff !important;
}

.svg-wheel-tire.tire-optimal {
  fill: #00e676 !important;
  stroke: #00c853 !important;
}

.svg-wheel-tire.tire-warning {
  fill: #ffd600 !important;
  stroke: #ffab00 !important;
}

.svg-wheel-tire.tire-critical {
  fill: #ff1744 !important;
  stroke: #d50000 !important;
}

/* Mini HUD su auto F1: Marcia, Velocità, DRS */
.car-hud-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  background-color: rgba(13, 14, 18, 0.88);
  border: 1px solid #242a36;
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 80px;
  z-index: 10;
}

.hud-gear {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  color: #00e5ff;
}

.hud-speed {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  margin-top: 2px;
}

.hud-speed-unit {
  font-size: 9px;
  font-weight: 700;
  color: #8b949e;
  margin-left: 2px;
}

.hud-drs-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.8px;
  background-color: #242a36;
  color: #8b949e;
  border: 1px solid #3b4455;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.hud-drs-badge.drs-available {
  background-color: #ffd600;
  color: #000000;
  border-color: #ffd600;
}

.hud-drs-badge.drs-active {
  background-color: #00e5ff;
  color: #000000;
  border-color: #00e5ff;
  -webkit-box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
}

/* Modalità Regolamentare F1 2026: Boost / Overtake Mode */
.hud-drs-badge.mode-2026 {
  font-size: 10px;
  letter-spacing: 0.9px;
}

.hud-drs-badge.mode-2026.drs-available {
  background-color: #ffd600;
  color: #000000;
  border-color: #ffd600;
  -webkit-animation: overtake-blink 0.9s infinite ease-in-out;
  animation: overtake-blink 0.9s infinite ease-in-out;
}

.hud-drs-badge.mode-2026.drs-active {
  background-color: #00e5ff;
  color: #000000;
  border-color: #00e5ff;
  -webkit-box-shadow: 0 0 14px rgba(0, 229, 255, 0.9);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.9);
}

@-webkit-keyframes overtake-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes overtake-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ==========================================================================
   4. COLONNA DESTRA: TIMING BOX (Tempi e Settori)
   ========================================================================== */
#timing-box {
  background-color: #15181f;
  border: 1px solid #242a36;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

/* Lap Time Principale e Delta Live */
.timing-main-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 10px;
}

.lap-time-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.timing-label {
  font-size: 11px;
  font-weight: 700;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}

#lap-time {
  font-size: 38px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.5px;
}

/* Live Delta Badge */
.delta-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

#lap-delta {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  background-color: #242a36;
  color: #ffffff;
  border: 1px solid #3b4455;
}

/* Colori Delta Live */
.delta-good,
.delta-negative {
  background-color: rgba(0, 230, 118, 0.2) !important;
  color: #00e676 !important;
  border-color: #00e676 !important;
}

.delta-bad,
.delta-positive {
  background-color: rgba(255, 23, 68, 0.2) !important;
  color: #ff1744 !important;
  border-color: #ff1744 !important;
}

.delta-neutral {
  background-color: #242a36 !important;
  color: #8b949e !important;
  border-color: #3b4455 !important;
}

/* Barra Settori (S1, S2, S3) */
.sectors-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sector-block {
  width: 32%;
  max-width: 32%;
  min-width: 32%;
  background-color: #1c212b;
  border: 1px solid #2b3345;
  border-radius: 6px;
  padding: 6px 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Indicatore superiore stato settore */
.sector-block:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #3b4455; /* Default: Non completato */
}

.sector-head {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 2px;
}

.sector-name {
  font-size: 11px;
  font-weight: 800;
  color: #8b949e;
  text-transform: uppercase;
}

.sector-state-pill {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #3b4455;
}

.sector-time-val {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  display: block;
}

/* Colori Settori F1 */
/* Fucsia / Viola: Session Best (Migliore assoluto della sessione) */
.sector-purple:before,
.sector-purple .sector-state-pill {
  background-color: #e040fb !important;
}
.sector-purple .sector-time-val {
  color: #e040fb !important;
}

/* Verde: Personal Best (Migliore personale) */
.sector-green:before,
.sector-green .sector-state-pill {
  background-color: #00e676 !important;
}
.sector-green .sector-time-val {
  color: #00e676 !important;
}

/* Giallo: No Improvement (Nessun miglioramento) */
.sector-yellow:before,
.sector-yellow .sector-state-pill {
  background-color: #ffd600 !important;
}
.sector-yellow .sector-time-val {
  color: #ffd600 !important;
}

/* Grigio: Inattivo / Lap Inizio */
.sector-gray:before,
.sector-gray .sector-state-pill {
  background-color: #3b4455 !important;
}
.sector-gray .sector-time-val {
  color: #8b949e !important;
}

/* Mini Riepilogo Tempi Secondari (Best Lap, Last Lap) */
.timing-sub-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  border-top: 1px solid #242a36;
  padding-top: 6px;
}

.timing-sub-col {
  font-size: 11px;
}

.timing-sub-lbl {
  color: #8b949e;
  font-weight: 600;
  margin-right: 6px;
}

.timing-sub-val {
  color: #ffffff;
  font-weight: 700;
}

/* ==========================================================================
   5. COLONNA DESTRA: SEZIONE MINIMAPPA (Canvas 2D Alto Rendimento)
   ========================================================================== */
#minimap-container {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
  background-color: #15181f;
  border: 1px solid #242a36;
  border-radius: 8px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.minimap-header {
  height: 32px;
  min-height: 32px;
  background-color: #1c212b;
  border-bottom: 1px solid #242a36;
  padding: 0 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.minimap-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #c9d1d9;
  text-transform: uppercase;
}

.minimap-legend {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.legend-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin-left: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #8b949e;
}

.legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
}

.legend-player {
  background-color: #00e5ff;
}

.legend-rivals {
  background-color: #ff1744;
}

/* Wrapper Canvas per mantenere responsive e alte prestazioni */
.canvas-wrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

#track-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #12151c;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ==========================================================================
   6. MODALE IMPOSTAZIONI / SESSION TOKEN / PILOT ID
   ========================================================================== */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(10, 12, 16, 0.85);
  z-index: 1000;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.modal-overlay.is-visible {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
}

.modal-card {
  width: 90%;
  max-width: 440px;
  max-height: 90%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #15181f;
  border: 1px solid #2d3545;
  border-radius: 10px;
  padding: 20px;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.modal-title {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  border-bottom: 1px solid #242a36;
  padding-bottom: 10px;
}

.modal-desc {
  font-size: 12px;
  color: #8b949e;
  margin-bottom: 16px;
  line-height: 1.4;
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #c9d1d9;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  height: 38px;
  background-color: #0d0e12;
  border: 1px solid #2d3545;
  border-radius: 6px;
  color: #00e5ff;
  padding: 0 12px;
  font-size: 13px;
  outline: none;
  -webkit-transition: border-color 0.15s ease;
  transition: border-color 0.15s ease;
}

.form-input:focus {
  border-color: #00e5ff;
}

.modal-actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  margin-top: 20px;
}

.btn-modal {
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  border: none;
  margin-left: 10px;
}

.btn-secondary {
  background-color: #242a36;
  color: #c9d1d9;
}

.btn-secondary:active {
  background-color: #2f3747;
}

.btn-primary {
  background-color: #00e5ff;
  color: #0d0e12;
}

.btn-primary:active {
  background-color: #00b8cc;
}

/* ==========================================================================
   7. ADATTAMENTO RESPONSIVE PER TABLET (IPAD MINI), SMARTPHONE E RETINA
   ========================================================================== */

/* Landscape compatto (max-height 600px in orizzontale) */
@media screen and (max-height: 600px) and (orientation: landscape) {
  .app-header {
    height: 40px;
    min-height: 40px;
  }
  #main-dashboard {
    height: calc(100% - 40px);
    max-height: calc(100% - 40px);
  }
  #app-viewport.has-sc-banner #main-dashboard {
    height: calc(100% - 82px);
    max-height: calc(100% - 82px);
  }
  #lap-time {
    font-size: 30px;
  }
  #lap-delta {
    font-size: 18px;
    padding: 4px 8px;
  }
  .wheel-card {
    padding: 5px 8px;
  }
  .f1-car-svg {
    max-height: 280px;
  }
  .hud-gear-val {
    font-size: 26px;
  }
}

/* ==========================================================================
   MODALITÀ ORIZZONTALE ESPLICITA PER IPAD (2 Colonne Affiancate al 50%)
   Garantisce resa perfetta su iPad Mini / iPad in Landscape (1024x768)
   ========================================================================== */
#app-viewport.is-landscape #main-dashboard {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: row !important;
  flex-direction: row !important;
  height: calc(100% - 48px) !important;
  max-height: calc(100% - 48px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#app-viewport.is-landscape.has-sc-banner #main-dashboard {
  height: calc(100% - 90px) !important;
  max-height: calc(100% - 90px) !important;
}

#app-viewport.is-landscape #panel-car,
#app-viewport.is-landscape #panel-right {
  width: 50% !important;
  max-width: 50% !important;
  min-width: 50% !important;
  height: 100% !important;
  min-height: 0 !important;
}

#app-viewport.is-landscape #panel-car {
  border-right: 1px solid #242a36 !important;
  border-bottom: none !important;
  padding: 10px !important;
}

#app-viewport.is-landscape .car-telemetry-stage {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: row !important;
  flex-direction: row !important;
  -webkit-box-align: stretch !important;
  -webkit-align-items: stretch !important;
  align-items: stretch !important;
}

#app-viewport.is-landscape .wheels-column {
  width: 31% !important;
  max-width: 31% !important;
  min-width: 31% !important;
  height: 100% !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-box-pack: justify !important;
  -webkit-justify-content: space-between !important;
  justify-content: space-between !important;
}

#app-viewport.is-landscape #f1-car-body {
  width: 38% !important;
  max-width: 38% !important;
  min-width: 38% !important;
  height: 100% !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
}

#app-viewport.is-landscape .f1-svg-wrapper {
  width: 100% !important;
  max-width: 170px !important;
  height: 100% !important;
  max-height: 400px !important;
  min-height: 260px !important;
}

#app-viewport.is-landscape .f1-car-svg {
  width: 100% !important;
  max-width: 160px !important;
  max-height: 360px !important;
}

#app-viewport.is-landscape #panel-right {
  padding: 10px !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

#app-viewport.is-landscape #timing-box {
  width: 100% !important;
  margin-bottom: 10px !important;
  -webkit-flex-shrink: 0 !important;
  flex-shrink: 0 !important;
}

#app-viewport.is-landscape #minimap-container {
  -webkit-box-flex: 1 !important;
  -webkit-flex: 1 1 0px !important;
  flex: 1 1 0px !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
}

#app-viewport.is-landscape .canvas-wrapper {
  -webkit-box-flex: 1 !important;
  -webkit-flex: 1 1 0px !important;
  flex: 1 1 0px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#app-viewport.is-landscape #track-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* ==========================================================================
   MODALITÀ VERTICALE PER TABLET & SMARTPHONE (Portrait Stacked)
   Attiva quando lo schermo è tenuto verticalmente
   ========================================================================== */
#app-viewport.is-portrait #main-dashboard {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: auto;
  max-height: none;
  min-height: 0;
}

#app-viewport.is-portrait #panel-car,
#app-viewport.is-portrait #panel-right {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: auto;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#app-viewport.is-portrait #panel-car {
  border-right: none;
  border-bottom: 2px solid #242a36;
  padding: 12px 10px;
}

#app-viewport.is-portrait .car-telemetry-stage {
  height: 390px;
  min-height: 390px;
  max-height: 420px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}

#app-viewport.is-portrait .wheels-column {
  width: 32%;
  max-width: 240px;
  min-width: 130px;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

#app-viewport.is-portrait #f1-car-body {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  height: 100%;
  min-width: 160px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: relative;
}

#app-viewport.is-portrait .f1-svg-wrapper {
  width: 100%;
  max-width: 170px;
  height: 380px;
  max-height: 380px;
  min-height: 340px;
}

#app-viewport.is-portrait .f1-car-svg {
  width: 160px;
  height: 360px;
  max-width: 160px;
  max-height: 360px;
}

#app-viewport.is-portrait .wheel-card {
  padding: 8px 10px;
}

#app-viewport.is-portrait .wheel-stat-row {
  white-space: nowrap;
}

#app-viewport.is-portrait #panel-right {
  padding: 12px 10px 24px 10px;
}

#app-viewport.is-portrait #timing-box {
  width: 100%;
  margin-bottom: 12px;
}

#app-viewport.is-portrait #minimap-container {
  width: 100%;
  height: 380px;
  min-height: 360px;
}

#app-viewport.is-portrait .canvas-wrapper {
  width: 100%;
  height: calc(100% - 32px);
  min-height: 320px;
}

#app-viewport.is-portrait #track-canvas {
  width: 100%;
  height: 100%;
}

/* Fallback CSS puro per Portrait se JS non ha ancora eseguito */
@media (orientation: portrait) {
  #app-viewport:not(.is-landscape) #main-dashboard {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: auto;
    max-height: none;
    min-height: 0;
  }

  #app-viewport:not(.is-landscape) #panel-car,
  #app-viewport:not(.is-landscape) #panel-right {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: auto;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
  }

  #app-viewport:not(.is-landscape) #panel-car {
    border-right: none;
    border-bottom: 2px solid #242a36;
    padding: 12px 10px;
  }

  #app-viewport:not(.is-landscape) .car-telemetry-stage {
    height: 390px;
    min-height: 390px;
    max-height: 420px;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
  }

  #app-viewport:not(.is-landscape) .wheels-column {
    width: 32%;
    max-width: 240px;
    min-width: 130px;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }

  #app-viewport:not(.is-landscape) #f1-car-body {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    height: 100%;
    min-width: 160px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
  }

  #app-viewport:not(.is-landscape) .f1-svg-wrapper {
    width: 100%;
    max-width: 170px;
    height: 380px;
    max-height: 380px;
    min-height: 340px;
  }

  #app-viewport:not(.is-landscape) .f1-car-svg {
    width: 160px;
    height: 360px;
    max-width: 160px;
    max-height: 360px;
  }

  #app-viewport:not(.is-landscape) .wheel-card {
    padding: 8px 10px;
  }

  #app-viewport:not(.is-landscape) .wheel-stat-row {
    white-space: nowrap;
  }

  #app-viewport:not(.is-landscape) #panel-right {
    padding: 12px 10px 24px 10px;
  }

  #app-viewport:not(.is-landscape) #timing-box {
    width: 100%;
    margin-bottom: 12px;
  }

  #app-viewport:not(.is-landscape) #minimap-container {
    width: 100%;
    height: 380px;
    min-height: 360px;
  }

  #app-viewport:not(.is-landscape) .canvas-wrapper {
    width: 100%;
    height: calc(100% - 32px);
    min-height: 320px;
  }

  #app-viewport:not(.is-landscape) #track-canvas {
    width: 100%;
    height: 100%;
  }
}

/* ==========================================================================
   OTTIMIZZAZIONE SMARTPHONE STRETTI (<= 480px)
   ========================================================================== */
@media screen and (max-width: 480px) {
  .app-header {
    height: 42px;
    min-height: 42px;
    padding: 0 8px;
  }
  .app-brand {
    margin-right: 8px;
  }
  .app-title {
    font-size: 13px;
    letter-spacing: 1px;
  }
  .brand-icon {
    width: 18px;
    height: 18px;
    margin-right: 4px;
  }
  .badge-status {
    padding: 2px 6px;
    font-size: 9px;
  }
  .btn-header {
    height: 28px;
    padding: 0 8px;
    font-size: 11px;
  }
  .header-center {
    display: none;
  }

  .car-telemetry-stage {
    height: 310px;
    min-height: 310px;
  }
  .wheels-column {
    width: 33%;
    min-width: 95px;
    max-width: 125px;
  }
  .wheel-card {
    padding: 5px 6px;
  }
  .wheel-pos-tag {
    font-size: 11px;
  }
  .wheel-compound-tag {
    font-size: 8px;
    padding: 1px 4px;
  }
  .stat-label {
    font-size: 9px;
  }
  .stat-value {
    font-size: 11px;
  }
  .stat-wear {
    font-size: 12px;
  }
  .f1-svg-wrapper {
    height: 290px;
    min-height: 270px;
  }
  .f1-car-svg {
    max-height: 280px;
    width: 130px;
  }
  .hud-gear-val {
    font-size: 26px;
  }
  .hud-speed-val {
    font-size: 14px;
  }

  #lap-time {
    font-size: 28px;
  }
  #lap-delta {
    font-size: 16px;
    padding: 4px 8px;
  }
  .sector-time-val {
    font-size: 12px;
  }
  .sector-name {
    font-size: 9px;
  }
  #minimap-container {
    height: 260px;
    min-height: 260px;
  }
  .canvas-wrapper {
    height: calc(100% - 32px);
    min-height: 220px;
  }
}