/*
 * hs-tables.css
 * Stili condivisi per tabelle e filtri Hackastat
 * Percorso: wp-content/themes/oceanwp-child/assets/css/hs-tables.css
 */

/* ── Variabili globali ──────────────────────────────────── */
:root {
  --hs-brand:  #1ABC9C;  /* verde principale: bordi, accenti */
  --hs-even:   #D3F9F2;  /* sfondo righe pari */
  --hs-hover:  #C2D1D0;  /* hover riga */
  --hs-filter: #fafafa;  /* sfondo box filtri */
}

/* ════════════════════════════════════════════════════════
   1. FILTRI (.stats-filters)
   ════════════════════════════════════════════════════════ */

.stats-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px;
  border: 1px solid var(--hs-brand) !important;
  background: var(--hs-filter);
  margin-bottom: 12px;
  align-items: flex-end;
  font-size: 12px;
}

.stats-filters .filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  flex: 1 1 auto;
}

.stats-filters label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.stats-filters select,
.stats-filters input[type="text"],
.stats-filters input[type="date"],
.stats-filters input[type="search"],
.stats-filters input[type="number"] {
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--hs-brand) !important;
  border-radius: 4px;
  background: #fff;
  color: #111;
  outline: none;
}

.stats-filters select:focus,
.stats-filters input:focus {
  border-color: var(--hs-brand) !important;
  box-shadow: 0 0 0 2px rgba(27, 188, 156, 0.15);
}

.stats-filters .filter-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

/* ── Bottoni Apply / Reset ──────────────────────────────── */
.btn-apply,
.btn-reset,
.stats-filters .btn-apply,
.stats-filters .btn-reset {
  padding: 6px 10px !important;
  border: 1px solid var(--hs-brand) !important;
  background: #fff !important;
  color: #111 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  font-size: 12px !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  display: inline-block !important;
  transition: background 0.1s !important;
}

.btn-apply:hover,
.btn-reset:hover,
.stats-filters .btn-apply:hover,
.stats-filters .btn-reset:hover {
  background: #f0f0f0 !important;
}

/* ════════════════════════════════════════════════════════
   2. TABLE WRAPPER
   ════════════════════════════════════════════════════════ */

.table-wrapper {
  overflow-x: auto;
  width: 100%;
  border: none !important;
}

/* ════════════════════════════════════════════════════════
   3. TABELLA BASE (.hs-table)
   ════════════════════════════════════════════════════════ */

/* Reset forzato per sovrascrivere stili del tema OceanWP */
.hs-table,
.hs-table thead,
.hs-table tbody,
.hs-table tfoot,
.hs-table tr,
.hs-table th,
.hs-table td {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

.hs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: system-ui, Arial, sans-serif;
  font-size: 12px;
  table-layout: fixed;
  white-space: nowrap;
  min-width: max-content;
}

.hs-table th,
.hs-table td {
  padding: 6px 8px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-clip: padding-box;
}

/* ── Header sticky ──────────────────────────────────────── */
.hs-table thead th {
  background: #fff;
  font-weight: 700;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 4;
  white-space: normal;
  line-height: 1.2;
  vertical-align: top;
  padding: 8px 6px;
  border-bottom: 3px solid var(--hs-brand) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}

/* Prima colonna sticky (nome giocatore / squadra / lineup) */
.hs-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 6;
  text-align: left;
}

.hs-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  text-align: left;
  background: #fff;
  box-shadow: 2px 0 0 var(--hs-brand);
}

/* ── Righe ──────────────────────────────────────────────── */
.hs-table tbody tr:nth-child(odd)  { background: #fff; }
.hs-table tbody tr:nth-child(even) { background: var(--hs-even); }

.hs-table tbody tr:nth-child(even) td:first-child {
  background: var(--hs-even);
}

.hs-table tbody tr:hover td { background: var(--hs-hover) !important; }

/* ── Righe evidenziate (season / career / totali) ───────── */
.hs-table tr.hs-row-highlight td {
  font-weight: 700;
  background: var(--hs-even) !important;
  border-top: 2px solid var(--hs-brand) !important;
}

/* ════════════════════════════════════════════════════════
   4. PAGINAZIONE (.hs-toolbar)
   ════════════════════════════════════════════════════════ */

.hs-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  font-size: 12px;
  flex-wrap: wrap;
}

.pager-btn {
  padding: 3px 8px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  border-radius: 4px;
  font-size: 10px;
  transition: background 0.1s;
}

.pager-btn:hover:not([disabled]) { background: #f0f0f0; }

.pager-btn[disabled] {
  opacity: 0.5;
  cursor: default;
}

.page-info {
  min-width: 100px;
  text-align: center;
  font-size: 11px;
}

select.page-jump {
  padding: 3px 6px;
  width: auto !important;
  max-width: 120px;
  display: inline-block !important;
  margin-left: 4px;
  font-size: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════
   5. LINK SQUADRA
   ════════════════════════════════════════════════════════ */

.team-link {
  color: inherit;
  text-decoration: none;
}

.team-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════
   6. UTILITY
   ════════════════════════════════════════════════════════ */

/* Colonna rank (prima col numerica stretta) */
.hs-table .col-rnk { width: 36px; min-width: 36px; }

/* Colonna nome (prima col testo larga) */
.hs-table .col-name { width: 160px; min-width: 160px; text-align: left; }

/* Separatore verticale tra gruppi di colonne */
.hs-table th.hs-sep,
.hs-table td.hs-sep {
  border-left: 1px solid var(--hs-brand) !important;
}

/* Responsive: riduce font su schermi piccoli */
@media (max-width: 768px) {
  .hs-table { font-size: 11px; }
  .hs-table th, .hs-table td { padding: 4px 6px; }
  .stats-filters label { min-width: 120px; }
}