/* style.css */
* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'Formula1-Bold';
  src: url('./fonts/Formula1-Bold_web_0.woff2') format('woff2');
}

@font-face {
  font-family: 'Formula1-Regular';
  src: url('./fonts/Formula1-Regular_web_0.woff2') format('woff2');
}

body {
  margin: 0;
  font-family: 'Formula1-Regular', Arial, sans-serif;
  background: #000;
  color: #fff;
  min-height: 100vh;
}

#container {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  overflow-y: auto;
}

h1 {
  text-align: left;
  padding-left: 15px;
  margin: 10px 0;
  font-size: 1.9em;
  font-family: 'Formula1-Bold', Arial, sans-serif;
  color: #fffff0;
  width: 100%;
}

#sessionInfo {
  text-align: left;
  padding-left: 15px;
  margin: 5px 0 10px 0;
  font-size: 22px;
  font-family: 'Formula1-Regular', Arial, sans-serif;
  color: #fffff0;
}

#sessionInfo .bold {
  font-family: 'Formula1-Bold', Arial, sans-serif;
}

#sidebar {
  width: 45%; /* Increased from 40% to 45% */
  background: #000;
  padding: 15px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #444;
  min-height: 100vh;
}

#sidebar h2 {
  margin: 0 0 10px;
  text-align: center;
  font-size: 1.5em;
  font-family: 'Formula1-Bold', Arial, sans-serif;
  color: #fffff0;
}

#ranking {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
  overflow-y: auto;
  border: 1px solid #444;
  border-bottom: none;
}

#ranking li {
  display: grid;
  /* Adjusted grid-template-columns to account for 5px gap between columns */
  grid-template-columns: 40px 30px 80px 80px 80px 80px 80px 80px 60px;
  column-gap: 15px; /* Added 5px horizontal gap between columns */
  padding: 7px 9px;
  border-bottom: 1px solid #444;
  align-items: center;
  font-size: 14px;
  color: #fff;
}


#ranking li div.best-lap,
#ranking li div.best-sector {
  background-color: #90ee90;
  color: #000;
}

.updated-sector {
  background-color: #8d018a !important;
}

#ranking li div.pit-status {
  color: #ff6666;
}

#ranking li div:nth-child(1) {
  text-align: center;
  font-family: 'Formula1-Bold', Arial, sans-serif;
  color: #fffff0;
}

/* Antes era el círculo, ahora es la diferencia de posición */
#ranking li div:nth-child(2) {
  text-align: center; /* Centrar el texto */
  /* Eliminamos las propiedades de círculo */
  /* width: 18px; */
  /* height: 18px; */
  /* border-radius: 50%; */
}


#ranking li:first-child div:nth-child(4) {
  color: yellow; /* Amarillo para S1, igual que el mapa */
}

#ranking li:first-child div:nth-child(5) {
  color: lightgreen; /* Verde claro para S2, igual que el mapa */
}

#ranking li:first-child div:nth-child(6) {
  color: lightblue; /* Azul claro para S3, igual que el mapa */
}


#ranking li div:nth-child(9) { /* Adjusted nth-child for Laps column */
  text-align: center;
  font-family: 'Formula1-Bold', Arial, sans-serif;
  color: #fffff0;
}

#controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 10px;
  background: #000;
  border-top: 1px solid #444;
}

#controls button, #controls select {
  padding: 9px 15px;
  font-size: 17px;
  cursor: pointer;
  font-family: 'Formula1-Regular', Arial, sans-serif;
  background: #222;
  color: #fff;
  border: 1px solid #444;
}

#controls button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#controls button:not(:disabled):hover,
#controls select:not(:disabled):hover,
#controls option:hover { /* Added hover for options as well */
  background-color: #555;
  color: #ff6666; /* New hover color */
}

#mapSection {
  width: 60%;
  background: #000;
  padding: 15px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

#rightColumn {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}

#mapInfo {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 18px;
  font-family: 'Formula1-Regular', Arial, sans-serif;
  background: rgba(0, 0, 0, 0.9);
  padding: 10px;
  border: 1px solid #444;
  border-radius: 4px;
  color: #fff;
  max-width: 40%;
  display: flex;
  gap: 20px;
  z-index: 20;
}

#mapInfo .column {
  display: flex;
  flex-direction: column;
}

#sketch-holder {
  flex-grow: 1;
  width: 100%;
  max-width: 900px;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin-top: 10px;
  margin-left: auto;
  margin-right: 15px;
  z-index: 10;
}

#sketch-holder canvas {
  border: 1px solid #444;
  background: #000;
  width: 100%;
  max-height: 700px;
}

#loadingText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-family: 'Formula1-Bold', Arial, sans-serif;
  color: #fffff0;
  z-index: 30;
  display: none;
}

#loadingText.visible {
  display: block;
}

@media (max-width: 768px) {

  #ranking li:first-child div:nth-child(3) {
    /* Oculta el texto original "Driver" moviéndolo fuera del área visible */
    text-indent: -9999px;
    white-space: nowrap; /* Asegura que el texto no se envuelva */
    overflow: hidden; /* Oculta el texto que se ha movido fuera */
    position: relative; /* Necesario para posicionar el pseudo-elemento de forma absoluta */
    display: flex; /* Usamos flexbox para centrar el pseudo-elemento */
    justify-content: center; /* Centra horizontalmente el contenido */
    align-items: center; /* Centra verticalmente el contenido */
    height: 100%; /* Asegura que el div ocupe la altura completa de la celda */
  }

  #ranking li:first-child div:nth-child(3)::before {
    content: "Drv"; /* Inserta el nuevo texto "D" */
    font-size: 10px; /* Define el tamaño de la fuente para "D" */
    color: #fffff0; /* Color del texto "D" */
    position: absolute; /* Posicionamiento absoluto dentro de su padre relativo */
    text-indent: 0; /* Reinicia text-indent para que "D" sea visible */
    white-space: nowrap; /* Evita que "D" se rompa en varias líneas */
  }

  /* Corrección para el encabezado "Laps" (novena columna) */
  #ranking li:first-child div:nth-child(9) {
    /* Oculta el texto original "Laps" moviéndolo fuera del área visible */
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  #ranking li:first-child div:nth-child(9)::before {
    content: "L"; /* Inserta el nuevo texto "L" */
    font-size: 10px; /* Define el tamaño de la fuente para "L" */
    color: #fffff0; /* Color del texto "L" */
    position: absolute;
    text-indent: 0;
    white-space: nowrap;
  }

  #container {
    flex-direction: column;
    min-height: auto;
    overflow-y: auto;
  }
  #sidebar {
    width: 100%;
    border-right: none;
    border-top: 1px solid #444;
    min-height: auto;
  }
  #mapSection {
    width: 100%;
    padding: 10px;
    min-height: auto;
  }
  #rightColumn {
    width: 100%;
  }
  #mapInfo {
    position: static;
    margin: 10px 0;
    text-align: center;
    width: 100%;
    max-width: 100%;
    display: block;
  }
  #mapInfo .column {
    margin-bottom: 10px;
  }
  #sketch-holder {
    width: 100%;
    margin-top: 10px;
    margin-left: 0;
    margin-right: 0;
    /* justify-content: center;  Eliminamos esto si queremos centrar el loadingText con flexbox */
    /* Añadimos min-height para asegurar espacio para el texto de carga */
    min-height: 200px; /* Asegura un mínimo de altura para el contenedor del mapa */
    align-items: center; /* Centra verticalmente los ítems flex */
    justify-content: center; /* Centra horizontalmente los ítems flex */
  }

  #sketch-holder canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 400px;
  }

  #ranking li {
    font-size: 10px;
    /* Ajustamos el ancho de la segunda columna a 20px para permitir el número */
    grid-template-columns: 10px 10px 35px 45px 45px 45px 55px 55px 26px; /* Adjusted columns and sizes for mobile */
  }
  /* Remove circle specific styles, already done in desktop version */
  /* #ranking li div:nth-child(2) {
    width: 9px;
    height: 9px;
  } */


  /* Add padding to the div elements within ranking list items */
  #ranking li div {
    padding: 0 3px; /* 0px top/bottom padding, 3px left/right padding */
    word-break: break-word; /* Prevents long text from overflowing without hyphenation */
    white-space: nowrap; /* Prevents wrapping text to the next line */
    overflow: hidden; /* Hides content that overflows */
    text-overflow: ellipsis; /* Adds "..." to text that overflows */
  }

  /* Excepción para la segunda columna (diferencia de posición) en móvil */
  #ranking li div:nth-child(2) {
      white-space: nowrap; /* Mantenemos nowrap para evitar saltos de línea */
      overflow: visible;   /* Permitimos que el contenido sea visible incluso si desborda ligeramente */
      text-overflow: clip; /* Recortamos el texto sin "..." */
      padding: 0 1px; /* Reducimos el padding para maximizar el espacio */
  }


  #controls {
    width: 100%;
    justify-content: center;
  }
  #controls button, #controls select {
    font-size: 18px;
    padding: 7.5px 12px;
  }
  #sessionInfo {
    font-size: 16px;
    text-align: center;
    padding-left: 0;
  }
  #mapInfo {
    font-size: 14px;
  }
  #loadingText {
    position: static; /* Cambiamos a static para que flexbox lo controle */
    transform: none;   /* Eliminamos cualquier transformación de posicionamiento */
    font-size: 25px;
    /* top: 60%;  Ya no es necesario con position: static y flexbox */
    /* left: 50%; Ya no es necesario con position: static y flexbox */
    /* Otras propiedades si las tenías: */
    text-align: center; /* Asegura que el texto esté centrado si ocupa varias líneas */
    width: 100%; /* Asegura que ocupe el ancho completo para el centrado de texto */
  }
  h1 {
    font-size: 1.9em;
    text-align: center;
    padding-left: 0;
  }
}