/*
 * FantaCapital — Teams List
 * File: fantacapital-teams.css
 *
 * Ordine link consigliato:
 *   <link rel="stylesheet" href="adminlte.min.css">
 *   <link rel="stylesheet" href="fantacapital-adminlte.css">
 *   <link rel="stylesheet" href="fantacapital-market.css">   ← variabili --fc-*
 *   <link rel="stylesheet" href="fantacapital-teams.css">    ← questo file
 *
 * Dipende dalle variabili --fc-* definite in fantacapital-adminlte.css
 * e dai badge .sc-sector-badge / .sc-role-badge di fantacapital-market.css
 */


/* =====================================================================
   ANIMAZIONI
   ===================================================================== */
@keyframes fc-row-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fc-expand-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* =====================================================================
   PAGE HEADER
   ===================================================================== */
.tm-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.tm-page-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--fc-fg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.tm-page-sub {
  font-size: 12px;
  color: var(--fc-fg-55);
  margin-top: 4px;
}

.tm-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--fc-up);
  border-radius: 50%;
  margin-right: 5px;
  animation: fc-pulse 1.5s ease-in-out infinite;
  vertical-align: middle;
}

.tm-season-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  background: var(--fc-gold-dim);
  border: 1px solid var(--fc-gold-border);
  color: var(--fc-gold);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  align-self: center;
}


/* =====================================================================
   KPI STRIP
   ===================================================================== */
.tm-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.tm-kpi {
  background: var(--fc-navy-card);
  border: 1px solid var(--fc-border-md);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color 0.2s, transform 0.2s;
}

.tm-kpi:hover {
  border-color: var(--fc-gold-border);
  transform: translateY(-2px);
}

.tm-kpi-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fc-fg-35);
  margin-bottom: 6px;
}

.tm-kpi-value {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--fc-gold);
  line-height: 1;
}

.tm-kpi-delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}

.tm-kpi-delta.up      { color: var(--fc-up); }
.tm-kpi-delta.dn      { color: var(--fc-down); }
.tm-kpi-delta.neutral { color: var(--fc-fg-55); }


/* =====================================================================
   CARD CONTENITORE
   ===================================================================== */
.tm-card {
  background: var(--fc-navy-card);
  border: 1px solid var(--fc-border-md);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.50);
  margin-bottom: 30px;
}


/* =====================================================================
   INTESTAZIONE COLONNE
   ===================================================================== */
.tm-col-header {
  display: grid;
  grid-template-columns: 36px 1fr 110px 80px 100px 100px;
  gap: 0;
  padding: 8px 18px;
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid var(--fc-border);
}

.tm-col-header span {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fc-fg-35);
}

.tm-col-header .c-r { text-align: right; }
.tm-col-header .c-c { text-align: center; }


/* =====================================================================
   RIGA SQUADRA
   ===================================================================== */
.tm-row-wrap {
  border-bottom: 1px solid var(--fc-border);
  overflow: hidden;
}

.tm-row-wrap:last-child { border-bottom: none; }

.tm-row {
  display: grid;
  grid-template-columns: 36px 1fr 110px 80px 100px 100px;
  align-items: center;
  gap: 0;
  padding: 11px 18px;
  cursor: pointer;
  background: var(--fc-navy-row);
  transition: background 0.18s;
  animation: fc-row-in 0.35s ease both;
}

.tm-row-wrap:nth-child(odd) .tm-row {
  background: var(--fc-navy-row-alt);
}

.tm-row:hover {
  background: rgba(240, 165, 0, 0.06) !important;
}

.tm-row-wrap.expanded .tm-row {
  background: rgba(240, 165, 0, 0.05) !important;
  border-bottom: 1px solid rgba(240, 165, 0, 0.15);
}

/* Stagger animazione */
.tm-row-wrap:nth-child(1)  .tm-row { animation-delay: 0.04s; }
.tm-row-wrap:nth-child(2)  .tm-row { animation-delay: 0.08s; }
.tm-row-wrap:nth-child(3)  .tm-row { animation-delay: 0.12s; }
.tm-row-wrap:nth-child(4)  .tm-row { animation-delay: 0.16s; }
.tm-row-wrap:nth-child(5)  .tm-row { animation-delay: 0.20s; }
.tm-row-wrap:nth-child(6)  .tm-row { animation-delay: 0.24s; }
.tm-row-wrap:nth-child(7)  .tm-row { animation-delay: 0.28s; }
.tm-row-wrap:nth-child(8)  .tm-row { animation-delay: 0.32s; }

/* ── Chevron ── */
.tm-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-chevron-i {
  color: var(--fc-fg-35);
  transition: transform 0.22s, color 0.18s;
}

.tm-row:hover         .tm-chevron-i { color: var(--fc-gold); }
.tm-row-wrap.expanded .tm-chevron-i { transform: rotate(180deg); color: var(--fc-gold); }

/* ── Cella identità squadra ── */
.tm-player-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tm-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 900;
  color: #0a1628;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}

/* Colori avatar (coerenti con leaderboard) */
.av-gold   { background: var(--fc-gold); }
.av-up     { background: var(--fc-up); }
.av-blue   { background: #60a5fa; }
.av-pink   { background: #f472b6; color: #fff; }
.av-purple { background: #a78bfa; color: #fff; }
.av-coral  { background: #fb923c; }
.av-teal   { background: #34d399; }
.av-red    { background: #f87171; color: #fff; }

.tm-team-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--fc-fg);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-manager {
  font-size: 10px;
  color: var(--fc-fg-55);
  margin-top: 2px;
}

/* ── Celle dati ── */
.tm-cell-c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-formation {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  background: var(--fc-gold-dim);
  border: 1px solid var(--fc-gold-border);
  color: var(--fc-gold);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.tm-count-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--fc-fg-55);
}

.tm-budget-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--fc-fg);
  text-align: right;
}

.tm-delta-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}

.tm-delta-val.up { color: var(--fc-up); }
.tm-delta-val.dn { color: var(--fc-down); }


/* =====================================================================
   PANNELLO ESPANDIBILE
   ===================================================================== */
.tm-expand {
  display: none;
  animation: fc-expand-in 0.25s ease both;
}

.tm-row-wrap.expanded .tm-expand {
  display: block;
}

/* ── Intestazione colonne azioni ── */
.tm-expand-head {
  display: grid;
  grid-template-columns: 2fr 80px 72px 64px 64px 64px 64px 72px 80px;
  gap: 0;
  padding: 7px 18px;
  background: rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid var(--fc-border);
}

.tm-expand-head span {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fc-fg-35);
}

.tm-expand-head .er { text-align: right; }

/* ── Riga singola azione ── */
.sc-row {
  display: grid;
  grid-template-columns: 2fr 80px 72px 64px 64px 64px 64px 72px 80px;
  align-items: center;
  gap: 0;
  padding: 9px 18px;
  border-bottom: 1px solid var(--fc-border);
  background: var(--fc-navy-row);
  cursor: pointer;
  transition: background 0.15s;
}

.sc-row:nth-child(odd)  { background: var(--fc-navy-row-alt); }
.sc-row:last-child       { border-bottom: none; }
.sc-row:hover            { background: rgba(240, 165, 0, 0.06) !important; }

/* ── Celle dati azione ── */
.sc-identity {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sc-ticker {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 900;
  color: var(--fc-fg);
  line-height: 1;
}

.sc-full-name {
  font-size: 10px;
  color: var(--fc-fg-55);
}

.sc-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--fc-fg);
  text-align: right;
}

.sc-delta {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.sc-delta.up { color: var(--fc-up); }
.sc-delta.dn { color: var(--fc-down); }

.sc-gold {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--fc-gold);
  text-align: right;
}

.sc-neutral {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  color: var(--fc-fg-55);
  text-align: right;
}

/* ── Empty state ── */
.tm-expand-empty {
  padding: 20px 18px;
  font-size: 13px;
  color: var(--fc-fg-35);
  text-align: center;
}

/* ── Footer pannello ── */
.expand-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid var(--fc-border);
}

.expand-footer-txt {
  font-size: 10px;
  color: var(--fc-fg-35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.expand-footer-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--fc-gold);
}


/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* Riduzione su viewport medio */
@media (max-width: 1200px) {
  .tm-col-header,
  .tm-row {
    grid-template-columns: 30px 1fr 90px 60px 90px 90px;
  }
}

/* Nasconde budget e modulo su tablet */
@media (max-width: 900px) {
  .tm-col-header,
  .tm-row {
    grid-template-columns: 30px 1fr 60px 90px;
  }

  /* Nascondi modulo e budget */
  .tm-col-header span:nth-child(3),
  .tm-col-header span:nth-child(4),
  .tm-row .tm-cell-c:nth-of-type(1),
  .tm-row .tm-budget-val {
    display: none;
  }

  /* KPI strip 2 colonne */
  .tm-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pannello espandibile: meno colonne */
  .tm-expand-head,
  .sc-row {
    grid-template-columns: 2fr 72px 64px 64px 80px;
  }

  .tm-expand-head span:nth-child(2),
  .tm-expand-head span:nth-child(5),
  .tm-expand-head span:nth-child(6),
  .tm-expand-head span:nth-child(8),
  .sc-row > *:nth-child(2),
  .sc-row > *:nth-child(5),
  .sc-row > *:nth-child(6),
  .sc-row > *:nth-child(8) {
    display: none;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .tm-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .tm-col-header,
  .tm-row {
    grid-template-columns: 30px 1fr 90px;
  }

  .tm-col-header span:nth-child(n+3),
  .tm-row > *:nth-child(n+4) {
    display: none;
  }

  .tm-card {
    border-radius: 14px;
  }
}


/* =====================================================================
   RIGA AZIONI — versione semplice (solo tab_stock, senza daily)
   5 colonne: Ticker/Nome | Paese | Settore | Quotazione | Ruolo
   ===================================================================== */
.tm-expand-head--simple {
  grid-template-columns: 2fr 110px 130px 90px 80px;
}

.sc-row--simple {
  grid-template-columns: 2fr 110px 130px 90px 80px;
}


/* =====================================================================
   COLONNE INTESTAZIONE SQUADRE — versione senza dati finanziari
   Chevron | Squadra | Classifica | N. Azioni | (vuote)
   ===================================================================== */
.tm-col-header--simple {
  grid-template-columns: 36px 1fr 90px 80px;
}

.tm-row--simple {
  grid-template-columns: 36px 1fr 90px 80px;
}


/* =====================================================================
   RESPONSIVE per la versione semplice
   ===================================================================== */
@media (max-width: 700px) {
  .tm-expand-head--simple,
  .sc-row--simple {
    grid-template-columns: 2fr 100px 80px;
  }

  /* Nasconde Paese su mobile */
  .tm-expand-head--simple span:nth-child(2),
  .sc-row--simple > *:nth-child(2) {
    display: none;
  }
}

@media (max-width: 480px) {
  .tm-expand-head--simple,
  .sc-row--simple {
    grid-template-columns: 2fr 80px;
  }

  /* Mostra solo Ticker e Ruolo */
  .tm-expand-head--simple span:nth-child(2),
  .tm-expand-head--simple span:nth-child(3),
  .tm-expand-head--simple span:nth-child(4),
  .sc-row--simple > *:nth-child(2),
  .sc-row--simple > *:nth-child(3),
  .sc-row--simple > *:nth-child(4) {
    display: none;
  }
}


/* =====================================================================
   BADGE SETTORE — tutti e 11 i settori reali di tab_stock
   Aggiunta a fantacapital-market.css (o file di override)
   ===================================================================== */

/* Già definiti in fantacapital-market.css:
   .tech .cons .health .retail .finance .energy
   — qui aggiungiamo i nuovi slug */

.sc-sector-badge.comms      { background: var(--fc-sect-comms);      border: 1px solid var(--fc-sect-comms-b);      color: var(--fc-sect-comms-t); }
.sc-sector-badge.cons-disc  { background: var(--fc-sect-cons-disc);  border: 1px solid var(--fc-sect-cons-disc-b);  color: var(--fc-sect-cons-disc-t); }
.sc-sector-badge.cons-stap  { background: var(--fc-sect-cons-stap);  border: 1px solid var(--fc-sect-cons-stap-b);  color: var(--fc-sect-cons-stap-t); }
.sc-sector-badge.industrial { background: var(--fc-sect-industrial);  border: 1px solid var(--fc-sect-industrial-b); color: var(--fc-sect-industrial-t); }
.sc-sector-badge.materials  { background: var(--fc-sect-materials);  border: 1px solid var(--fc-sect-materials-b);  color: var(--fc-sect-materials-t); }
.sc-sector-badge.realestate { background: var(--fc-sect-realestate); border: 1px solid var(--fc-sect-realestate-b); color: var(--fc-sect-realestate-t); }
.sc-sector-badge.utilities  { background: var(--fc-sect-utilities);  border: 1px solid var(--fc-sect-utilities-b);  color: var(--fc-sect-utilities-t); }

/* Pill filtro mercato — stessi colori dei badge settore */
.mkt-pill[data-filter="comms"]:hover,
.mkt-pill[data-filter="comms"].active      { background: var(--fc-sect-comms);      border-color: var(--fc-sect-comms-b);      color: var(--fc-sect-comms-t); }
.mkt-pill[data-filter="cons-disc"]:hover,
.mkt-pill[data-filter="cons-disc"].active  { background: var(--fc-sect-cons-disc);  border-color: var(--fc-sect-cons-disc-b);  color: var(--fc-sect-cons-disc-t); }
.mkt-pill[data-filter="cons-stap"]:hover,
.mkt-pill[data-filter="cons-stap"].active  { background: var(--fc-sect-cons-stap);  border-color: var(--fc-sect-cons-stap-b);  color: var(--fc-sect-cons-stap-t); }
.mkt-pill[data-filter="industrial"]:hover,
.mkt-pill[data-filter="industrial"].active { background: var(--fc-sect-industrial); border-color: var(--fc-sect-industrial-b); color: var(--fc-sect-industrial-t); }
.mkt-pill[data-filter="materials"]:hover,
.mkt-pill[data-filter="materials"].active  { background: var(--fc-sect-materials);  border-color: var(--fc-sect-materials-b);  color: var(--fc-sect-materials-t); }
.mkt-pill[data-filter="realestate"]:hover,
.mkt-pill[data-filter="realestate"].active { background: var(--fc-sect-realestate); border-color: var(--fc-sect-realestate-b); color: var(--fc-sect-realestate-t); }
.mkt-pill[data-filter="utilities"]:hover,
.mkt-pill[data-filter="utilities"].active  { background: var(--fc-sect-utilities);  border-color: var(--fc-sect-utilities-b);  color: var(--fc-sect-utilities-t); }


/* =====================================================================
   SC-LOGO — override per quotazione testuale al posto del logo
   ===================================================================== */
.sc-logo-left {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: auto;   /* spinge tutto il resto a destra */
 
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #112036;
  letter-spacing: -0.02em;
  line-height: 1;
}