/* ============================================================
   MMCM RACING GT — Skin wpDataTables "GT Paddock"
   ------------------------------------------------------------
   Né bianco né nero: superfici grigio-azzurre, testata blu
   petrolio con riga rossa, righe alternate su toni asfalto.
   Usabile anche da sola: incolla tutto in
   wpDataTables → Settings → Custom JS and CSS → Custom CSS.
   ============================================================ */

/* 1. WRAPPER — pannello su fondo asfalto */
.wpdt-c .wpDataTablesWrapper {
  background: #eef1f4 !important;
  border: 1px solid #c2cad2;
  border-radius: 10px;
  padding: 18px 18px 14px !important;
  box-shadow: 0 8px 24px rgba(33, 42, 53, .14);
  position: relative;
  overflow: hidden;
}
/* slash di livrea in alto */
.wpdt-c .wpDataTablesWrapper::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(105deg,
    #e10600 0 26px, #eef1f4 26px 34px,
    #26313f 34px 56px, #eef1f4 56px 64px);
}

/* 2. TABELLA */
.wpdt-c .wpDataTablesWrapper table.wpDataTable {
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0;
  color: #212a35 !important;
  font-family: "Barlow", -apple-system, sans-serif;
  font-size: .94rem;
  width: 100% !important;
}

/* HEADER blu petrolio con riga rossa */
.wpdt-c .wpDataTablesWrapper table.wpDataTable thead th {
  background: linear-gradient(180deg, #31404f, #26313f) !important;
  color: #ffffff !important;
  font-family: "Chakra Petch", "Barlow", sans-serif;
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 13px 12px !important;
  border: 0 !important;
  border-bottom: 3px solid #e10600 !important;
  white-space: nowrap;
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable thead th.sorting_asc,
.wpdt-c .wpDataTablesWrapper table.wpDataTable thead th.sorting_desc {
  color: #ffd200 !important;
  border-bottom-color: #ffd200 !important;
}

/* CELLE — toni asfalto, mai bianco puro */
.wpdt-c .wpDataTablesWrapper table.wpDataTable tbody td {
  background: #eef1f4 !important;
  color: #2a333e !important;
  border: 0 !important;
  border-bottom: 1px solid #d6dce2 !important;
  padding: 11px 12px !important;
  vertical-align: middle !important;
  font-variant-numeric: tabular-nums;
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tbody tr:nth-child(even) td {
  background: #e3e8ed !important;
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tbody tr:hover td {
  background: #d7dfe6 !important;
  transition: background .12s ease;
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tbody tr:hover td:first-child {
  box-shadow: inset 4px 0 0 #e10600;
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tbody td:first-child {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
}

/* 3. PODIO — tabelle con Table CSS class "classifica" */
.wpdt-c table.wpDataTable.classifica tbody tr:nth-child(1) td:first-child { box-shadow: inset 5px 0 0 #c9a227; color: #a3821c; }
.wpdt-c table.wpDataTable.classifica tbody tr:nth-child(2) td:first-child { box-shadow: inset 5px 0 0 #8f99a5; color: #6d7784; }
.wpdt-c table.wpDataTable.classifica tbody tr:nth-child(3) td:first-child { box-shadow: inset 5px 0 0 #b26a35; color: #99552a; }
.wpdt-c table.wpDataTable.classifica tbody tr:nth-child(-n+3) td {
  background: #ece7d8 !important;
}
.wpdt-c table.wpDataTable.classifica tbody tr:nth-child(-n+3):hover td {
  background: #e4ddc8 !important;
}

/* 4. IMMAGINI — sempre proporzionate (object-fit) */
.wpdt-c .wpDataTablesWrapper table.wpDataTable td img {
  display: block;
  width: 84px;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: contain;
  object-position: center;
  background: #ffffff;
  border: 1px solid #c2cad2;
  border-radius: 6px;
  padding: 3px;
  margin-inline: auto;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable td img:hover {
  transform: scale(1.6);
  border-color: #e10600;
  position: relative;
  z-index: 5;
  box-shadow: 0 10px 24px rgba(33, 42, 53, .3);
}

/* varianti per colonna (Colonna → CSS class) */
.wpdt-c table.wpDataTable td.img-logo img {
  width: 64px; aspect-ratio: auto; max-height: 44px;
  object-fit: contain; border: 0; background: transparent; padding: 0;
}
.wpdt-c table.wpDataTable td.img-pista img {
  width: 140px; aspect-ratio: 16 / 9; object-fit: cover; padding: 0;
}
.wpdt-c table.wpDataTable td.img-pilota img {
  width: 48px; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 50%; border: 2px solid #e10600; padding: 0;
}
.wpdt-c table.wpDataTable td.img-flag img {
  width: 32px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 3px; padding: 0;
}
.wpdt-c table.wpDataTable td.img-flag img:hover { transform: none; box-shadow: none; }

/* 5. CONTROLLI: ricerca, filtri, lunghezza pagina */
.wpdt-c .wpDataTablesWrapper .dataTables_filter label,
.wpdt-c .wpDataTablesWrapper .dataTables_length label,
.wpdt-c .wpDataTablesWrapper .dataTables_info {
  color: #5b6773 !important;
  font-family: "Chakra Petch", sans-serif;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wpdt-c .wpDataTablesWrapper .dataTables_filter input,
.wpdt-c .wpDataTablesWrapper .dataTables_length select,
.wpdt-c .wpDataTablesWrapper .wdt-filter-control,
.wpdt-c .wpDataTablesWrapper thead .filter_column input,
.wpdt-c .wpDataTablesWrapper thead .filter_column select {
  background: #f7f9fa !important;
  border: 1px solid #aab4be !important;
  border-radius: 6px !important;
  color: #212a35 !important;
  padding: 7px 10px !important;
  font-family: "Barlow", sans-serif;
}
.wpdt-c .wpDataTablesWrapper .dataTables_filter input:focus,
.wpdt-c .wpDataTablesWrapper .wdt-filter-control:focus {
  border-color: #e10600 !important;
  outline: none;
}

/* 6. PAGINAZIONE */
.wpdt-c .wpDataTablesWrapper .dataTables_paginate .paginate_button {
  background: #f7f9fa !important;
  border: 1px solid #aab4be !important;
  border-radius: 6px !important;
  color: #212a35 !important;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  margin: 0 2px;
  padding: 6px 12px !important;
}
.wpdt-c .wpDataTablesWrapper .dataTables_paginate .paginate_button:hover {
  background: #26313f !important;
  color: #ffffff !important;
  border-color: #26313f !important;
}
.wpdt-c .wpDataTablesWrapper .dataTables_paginate .paginate_button.current {
  background: #e10600 !important;
  border-color: #e10600 !important;
  color: #ffffff !important;
}
.wpdt-c .wpDataTablesWrapper .dataTables_paginate .paginate_button.disabled { opacity: .35; }

/* 7. PULSANTI EXPORT / TABLE TOOLS */
.wpdt-c .wpDataTablesWrapper .dt-buttons .dt-button,
.wpdt-c .wpDataTablesWrapper .DTTT_button {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid #26313f !important;
  border-radius: 6px !important;
  color: #26313f !important;
  font-family: "Chakra Petch", sans-serif;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 7px 14px !important;
  margin-right: 6px;
  box-shadow: none !important;
}
.wpdt-c .wpDataTablesWrapper .dt-buttons .dt-button:hover,
.wpdt-c .wpDataTablesWrapper .DTTT_button:hover {
  background: #e10600 !important;
  border-color: #e10600 !important;
  color: #ffffff !important;
}

/* 8. CLASSI CELLA (formattazione condizionale → cell CSS class) */
.wpdt-c table.wpDataTable td.laptime { font-family: "Chakra Petch", monospace; font-weight: 700; color: #b00500 !important; }
.wpdt-c table.wpDataTable td.punti { font-weight: 700; color: #212a35 !important; }
.wpdt-c table.wpDataTable td.dnf { color: #b00500 !important; font-weight: 700; }
.wpdt-c table.wpDataTable td.pen { color: #9a6b00 !important; font-weight: 600; }
.wpdt-c table.wpDataTable td.win { color: #14733a !important; font-weight: 700; }

/* 9. RESPONSIVE */
@media (max-width: 768px) {
  .wpdt-c .wpDataTablesWrapper { padding: 12px 8px 10px !important; }
  .wpdt-c .wpDataTablesWrapper table.wpDataTable { font-size: .85rem; }
  .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th,
  .wpdt-c .wpDataTablesWrapper table.wpDataTable tbody td { padding: 8px 8px !important; }
  .wpdt-c .wpDataTablesWrapper table.wpDataTable td img { width: 60px; }
  .wpdt-c table.wpDataTable td.img-pista img { width: 96px; }
  .wpdt-c .wpDataTablesWrapper table.wpDataTable td img:hover { transform: scale(1.25); }
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable > tbody > tr.child,
.wpdt-c .wpDataTablesWrapper table.wpDataTable ul.dtr-details li {
  background: #e3e8ed !important;
  border-bottom: 1px solid #d6dce2 !important;
  color: #2a333e !important;
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable span.dtr-title {
  color: #5b6773 !important;
  font-family: "Chakra Petch", sans-serif;
  font-size: .75rem;
  text-transform: uppercase;
}