html {
  background-color: #000000;
}

body {
  max-width: 767px;
  margin: auto;
  background-color: #000000;
  color: #eeeeee;
}

html, body {
  -webkit-text-size-adjust: 100%; /* evita che iOS aumenti la dimensione testo */
}
 

.row>* {
  padding-right: 2px;
  padding-left: 2px;
}

.row {
  margin-right: 0px;
  margin-left: 0px;
}

header {
  position: fixed;
  z-index: 1;
  top: 0;
  max-width: 767px;
  margin: auto;
  width: 100%;
  color: #fff;
  background-color: #212429;
  padding: 10px;
  box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.8);
}

main {
   min-height: 100vh; /* fallback */
 min-height: -webkit-fill-available; /* iOS Safari */
 min-height: 100dvh; /* se supportato */

  display: flex;
  flex-direction: column;
  justify-content: start;
  z-index: 0;
  padding: 70px 0 100px 0;
  font-size: 12px;
}

main.center {
  justify-content: center;
  padding-top: 0 !important;
}

.bg-index {
  background-image: url(../image/bg01.jpg);
  background-size: cover;
}


.logo-index {
  max-width: 80%;
  width: 80%;
  margin: 10%;
}

.logo-tr {
  width: 60px;
}

.lw-imgchat {
  border: 2px solid #000000
}

.selected .lw-imgchat {
  border: 2px solid #F05D22
}

.color-o {
  color: #F05D22 !important;
}

.color-g {
  color: #a8a8a8;
}

/* top */
.container-top {
  position: relative;
}

.container-top .top-title {
  padding: 4px 0px 0px 0px;
}

.container-top .top-title span {
  position: relative;
  font-size: 22px;
}

.lw-icon {
  width: 36px;
  height: 36px;
  margin: 0px 5px 0px 0px;
}

.lw-icon-small {
  width: 20px;
  height: 20px;
  margin: -5px 0px 0px 0px;
}

.container-top .top-icon {
  width: 36px;
  height: 36px;
  margin: 0px 5px 0px 0px;
  position: relative;
  top: -3px;
}


/* menù */
.bottom-nav {
  position: fixed;
  z-index: 1;
  bottom: 0;
  max-width: 767px;
  margin: auto;
  width: 100%;
  background-color: #384046;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.8);
}

.container-nav {
  width: 100%;
  padding: 0 8px;
}

.bottom-nav .nav-item {
  flex: 1;
  text-align: center;
}

.bottom-nav .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  background-color: #000000;
  text-decoration: none;
  border-radius: 20px;
  padding: 5px 5px;
  margin: 5px;
}

.bottom-nav .nav-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
}

.bottom-nav .nav-text {
  font-size: 11px;
}

.bottom-nav .nav-link:hover,
.bottom-nav .nav-link.active {
  background-color: #F05D22;

}

.bottom-nav .nav-link.active {
  background-color: #F05D22;
}

.btn-orange {
  background-color: #F05D22;
}

.btn-orange:hover,
.btn-orange:active {
  background-color: #ff7a45;
}

.btn-grey {
  background-color: #9B9FA2;
}

.btn-grey:hover,
.btn-grey:active {
  background-color: #abaeb1;
}

.btn-orange-circle {
  background-color: #F05D22;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

.btn-orange-circle:hover,
.btn-orange-circle:active {
  background-color: #ff7a45;
}

.btn-grey-circle {
  background-color: #979797;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

.btn-grey-circle:hover,
.btn-grey-circle:active {
  background-color: #c2c2c2;
}

.btn-grey-circle-small {
  background-color: #979797;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

.btn-grey-circle-small:hover {
  background-color: #c2c2c2;
}

.btn-orange-circle .btn-icon,
.btn-grey-circle .btn-icon {
  width: 36px;
  height: 36px;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

.btn-grey-circle-small .btn-icon {
  width: 20px;
  height: 20px;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

.btn-outliner-orange {
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #F05D22;
  text-align: left;
  border-radius: 20px;
  font-size: 12px;
  padding: 5px 15px;
}

.btn-outliner-orange:HOVER {
  background-color: #F05D22;
}

.btn-outliner-orange small {
  font-size: 11px;
}

.btn-salva {
  background-color: #F05D22;
  border-radius: 20px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  width: 80%;
}

.btn-base {
  background-color: #F05D22;
  border-radius: 20px;
  color: #ffffff;
  font-weight: bold;
}

.btn-base:hover,
.btn-base:active,
.btn-salva:hover,
.btn-salva:active {
  background-color: #ff7a45;
}

.btn-annulla {
  background-color: #9B9FA2;
  border-radius: 20px;
  color: #ffffff !important;
  font-weight: bold;
  text-align: center;
  width: 60%;
  padding: 5px;
  font-size: 12px;
}

.btn-annulla:hover,
.btn-annulla:active {
  background-color: #b6b7b8;
}

.btn-torna {
  background-color: #9B9FA2;
  border-radius: 20px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  width: 30px;
  height: 30px;
  padding: 5px;
  font-size: 12px;
  ;
}

.btn-torna:hover,
.btn-torna:active {
  background-color: #b6b7b8;
}


.btn-next {
  background-color: #000000;
  color: #F05D22;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 3px 0 0 0;
  margin: 0 0 0 0;
  display: block;
  text-align: center;
  position: absolute;
  right: 5px;
  bottom: 5px;
}

.block-data {
  color: #b3b3b3;
  display: block;
  text-align: right;
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 11px;
}

.filtertop {
  font-size: 10px;
}

.block-grey {
  background-color: #384046;
  color: #eeeeee;
  margin-right: 15px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  position: relative;
  margin-bottom: 10px;
  text-decoration: none;
  line-height: 20px;
}

.block-grey:HOVER {
  background-color: #40474e;
}

.lw-pista-elenco {
  width: 100%;
}

.lw-imgchat {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  overflow: hidden;
}


/* Campi base: input, textarea, select */
.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="color"] {
  background-color: #23282B !important;
  color: #ffffff !important;
  border: 1px solid #9B9FA2 !important;
  border-radius: 15px !important;
  position: relative;
}

/* Placeholder più leggibile su sfondo scuro */
.form-control::placeholder {
  color: #c7c9cb;
  /* leggero rispetto al testo */
  opacity: 1;
}

/* Stato focus: bordo e glow più visibile */
.form-control:focus,
.form-select:focus {
  color: #ffffff;
  background-color: #23282B;
  border-color: #F05D22 !important;
  box-shadow: 0 0 0 .2rem rgba(240, 93, 34, .25) !important;
  /* arancione */
  outline: 0;
}

/* Disabled/read-only */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: #23282B;
  opacity: .7;
}

/* Rimuove artefatti autofill gialli (Chrome) su sfondo scuro */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0px 1000px #23282B inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* SELECT: freccia personalizzata arancione */
.form-select {
  /* nasconde la freccia di default e usa una SVG inline */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath fill='%23F05D22' d='M8 12L0 0h16L8 12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .35rem center;
  background-size: 12px 8px;
  padding-right: 0.5rem;
  /* spazio per la freccia */
}

/* Per Firefox: evita la freccia nativa */
.form-select::-ms-expand {
  display: none;
}

/* legacy IE/Edge */
@-moz-document url-prefix() {
  .form-select {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath fill='%23F05D22' d='M8 12L0 0h16L8 12z'/%3E%3C/svg%3E");
  }
}

/* Input group: mantieni i 15px anche con addon */
.input-group>.form-control,
.input-group>.form-select {
  border-radius: 15px;
}

.input-group .btn,
.input-group-text {
  border-radius: 15px;
  background-color: #23282B;
  color: #ffffff;
  border: 1px solid #9B9FA2;
}

/* File input (BS5 usa ::file-selector-button) */
.form-control[type="file"]::file-selector-button {
  background-color: #23282B;
  color: #ffffff;
  border: 1px solid #9B9FA2;
  border-radius: 12px;
}

/* Checkbox/radio (opzionale, per coerenza su scuro) */
.form-check-input {
  background-color: #23282B;
  border: 1px solid #9B9FA2;
  zoom: 150%;
  position: relative;
  top: -3px;
}

.form-check-input:checked {
  background-color: #F05D22;
  border-color: #F05D22;
}

.form-label {
  color: #F05D22;
  margin: 0;
}

.text-grey {
  color: #999;
}

.bg-grey {
  background-color: #181C1E;
}


/* Card scura */
.card {
  background-color: #23282B;
  /* sfondo scuro */
  color: #ffffff;
  /* testo bianco */
  border: 1px solid #384046;
  /* bordo grigio */
  border-radius: 15px;
  /* angoli arrotondati */
  overflow: hidden;
  /* evita overflow dei contenuti arrotondati */
}

/* Titolo card */
.card-title {
  color: #ffffff;
  font-weight: 600;
}

/* Sottotitolo card */
.card-subtitle {
  color: #c7c9cb;
}

/* Testo card */
.card-text {
  color: #d4d6d8;
}

/* Header e footer card */
.card-header,
.card-footer {
  background-color: #1c1f22;
  color: #ffffff;
  border-bottom: 1px solid #000000;
  border-top: 1px solid #000000;
}

/* Link dentro card: non applicare la colorazione ai bottoni (.btn) che sono spesso <a> */
.card a:not(.btn) {
  color: #ffffff;
  text-decoration: none;
}

.card a:not(.btn):hover {
  text-decoration: underline;
}

/* Forza colori corretti per i pulsanti all'interno delle card */
.card .btn {
  color: #ffffff !important;
}

/* Pulsanti outline che vogliamo evidenziare in arancione */
.card .btn-outline-primary {
  color: #F05D22;
  border-color: #F05D22;
}

/* Se serve altro stile per btn-primary dentro card (sfondo blu), mantieni testo bianco */
.card .btn-primary {
  color: #ffffff !important;
}

/* Hover effect per interattività */
.card:hover {
  box-shadow: 0 0 15px rgba(240, 93, 34, 0.3);
  transition: all 0.3s ease;
}

.card2 {
  border: 1px solid #23282b;
  background-color: #000000;
}

.btn-info {
  font-size: 11px;
  color: #7d7d7d;
}

.btn-info:HOVER {
  font-size: 11px;
  color: #F05D22;
}


.top-chat {
  background-color: #1E564F;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
}

/* ======= CHAT THEME ======= */
:root {
  --chat-bg-grad: linear-gradient(180deg, #1e3130 0%, #141616 60%);
  --bubble-out: #1F9084;
  /* verde acqua */
  --bubble-in: #4d4d4f;
  /* grigio scuro */
  --cta: #f47a1f;
  /* arancione */
  --time: #a0a0a0;
}

/* contenitore principale */
main.chat {
  min-height: calc(100vh - 0px);
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 0;
  padding-top: 100px;
  background-image: url(../image/CREW.jpg);
  background-size: cover;
}

/* pattern leggero sullo sfondo */
.chat-scroll {
  flex: 1 1 auto;
  overflow-y: auto;

}

/* messaggi */
.msg {
  max-width: 88%;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
}

.msg-in {
  align-self: flex-start;
  padding-left: .25rem;
}

.msg-out {
  align-self: flex-start;
  margin-left: 3rem;
}

/* leggera indentazione come nel mockup */

.bubble {
  color: #fff;
  font-size: 1rem;
  line-height: 1.35;
  padding: 14px 16px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  word-wrap: break-word;
}

.msg-in .bubble {
  background: var(--bubble-in);
  border-top-left-radius: 0;
}

.msg-out .bubble {
  background: var(--bubble-out);
  border-top-right-radius: 0;
}

.time {
  color: var(--time);
  font-size: .75rem;
  margin-top: 6px;
  align-self: center;
}

/* card arancione "DEFAULT" */
.cta {
  align-self: flex-end;
  margin-top: .5rem;
  border: 0;
  background: var(--cta);
  color: #fff;
  border-radius: 14px;
  padding: 12px 12px 10px;
  width: 126px;
  box-shadow: 0 8px 18px rgba(244, 122, 31, .35);
  position: relative;
  text-align: center;
}

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

.cta-icon {
  display: block;
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: 6px;
}

.cta-text {
  display: block;
  font-size: .8rem;
  line-height: 1.1;
}

.cta-arrow {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.cta-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0, 0, 0, .15);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .7rem;
  font-weight: 600;
}

/* composer */
.composer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 12px 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #0e0f0f 30%, #0e0f0f 100%);
}

.chat-input {
  background: #2a2a2a;
  border: 0;
  color: #fff;
  border-radius: 12px;
  height: 48px;
}

.chat-input::placeholder {
  color: #bdbdbd;
}

.btn-send {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cta);
  color: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(244, 122, 31, .35);
  font-size: 1.25rem;
}

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



.crono {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
}

.crono> :not(:last-child) {
  flex: 1 1 0;
  min-height: 0;
  padding-bottom: 5px;
}

.crono> :last-child {
  flex: 0 0 var(--footer-h);
}

.block-crono * {
  max-height: 100%;
}

.block-laps {
  background-color: #141616;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  height: 100%;
  padding: 10px;
  overflow: auto;
}

/* rimosso selettore vuoto precedente */

/* testate muted più leggibili su sfondo scuro */
.text-muted,
.card .text-muted {
  color: #a8a8a8 !important;
}

.block-start {
  background-color: #0091BD;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  height: 100%;
  padding: 30px 10px 0 0;
  text-align: right;
  font-size: 52px;
  color: #ffffff;
  line-height: 32px;
  position: relative;
}

.cronodivtop {z-index: 9999; position: absolute; top: 0; left: 0; height: 100%; width: 100%;}

.block-start strong {
  font-size: 32px;
  color: #B2F022;
}

.block-start .numero-pilota {
  font-size: 72px;
  color: #99e7ff;
  position: absolute;
  left: 20px;
  bottom: 20px;
}

.block-14 {
  background-color: #9B9FA2;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  height: 100%;
  padding: 10px;
  font-size: 11px;
  text-align: center;
  color: #ffffff;
}

.block-14 strong {
  font-size: 24px;
  color: #ffffff;
}

.block-stop {
  background-color: #F05D22;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  height: 100%;
  padding: 10px;
  text-align: center;
  font-size: 11px;
  color: #ffffff;
  position: relative;
}

.block-stop strong {
  font-size: 24px;
  color: #ffffff;
}

/* ====== SCOPED SU .rapporti, NIENTE VARIABILI ====== */

.rapporti .card {
  background-color: #0f1012;
  border-color: #272a31;
}

.rapporti .card-header {
  background-color: #0f1012;
  color: #9aa0a6;
  border-bottom: 1px solid #272a31;
  letter-spacing: .02em;
}

.rapporti .table {
  color: #e7e9ee;
  margin-bottom: 0;
}

.rapporti .table thead th {
  color: #9aa0a6;
  border-bottom: 1px solid #272a31;
  font-weight: 600;
  background-color: #000000;
  font-size: 16px;
}

/* bordi celle */
.rapporti .table td,
.rapporti .table th {
  border-color: #272a31;
  vertical-align: middle;
  background-color: #0f1012;
  color: #ffffff;
}

/* zebra rows */
.rapporti .table tbody tr:nth-child(even) td {
  background-color: #17191c;
}

/* colonne */
.rapporti .col-ratio {
  width: 8rem;
  text-align: center;
}

.rapporti .col-pign {
  text-align: center;
  font-weight: 700;
}

/* niente colore speciale */
.rapporti .col-cor {
  text-align: center;
}

.rapporti .thead-icon {
  width: 2.5rem;
  text-align: center;
}