/* =========================================================
   FutAnalytics — CSS organizado/refatorado (v2)
   ========================================================= */

/* =======================
   1) Tokens / Base
   ======================= */
:root{
  --fa-bg: #0b1020;
  --fa-card: #151a30;
  --fa-border: #252b48;
  --fa-nav-a: #12142b;
  --fa-nav-b: #1f2640;

  --fa-white: #f8f9fa;
  --fa-muted: rgba(255,255,255,.75);

  --fa-green: #00ff78;
  --fa-red:   #ff0000;
  --fa-yellow:#fff000;
  --fa-cyan:  #00ffdf;

  --fa-shadow-lg: 0 .55rem 1.4rem rgba(0,0,0,.28);
  --fa-shadow-md: 0 .35rem .9rem rgba(0,0,0,.25);

  /* Tipografia padrão (desktop) */
  --fa-font-body: 0.9rem;
  --fa-font-heading: 0.9rem;
  --fa-font-btn: .8rem;
  --fa-font-legend: .8rem;
  --fa-font-badge: .8rem;
  --fa-btn-pad-y: .60rem;
  --fa-btn-pad-x: .60rem;

  /* ✅ MOBILE (<=1080px) — AUMENTADO */
  --fa-font-body-m: .70rem;      /* era .70 */
  --fa-font-heading-m: .70rem;   /* era .70 */
  --fa-font-btn-m: .70rem;       /* era .65 */
  --fa-font-legend-m: .70rem;    /* era .65 */
  --fa-font-badge-m: .70rem;     /* era .60 */
  --fa-btn-pad-y-m: .45rem;      /* era .20 */
  --fa-btn-pad-x-m: .55rem;      /* era .40 */
}

.badge {
    --bs-badge-padding-x: 0.55rem !important;
    --bs-badge-padding-y: 0.20rem !important;
    --bs-badge-font-size: 0.70rem !important;
}

/* =======================
   2) Base/Globais
   ======================= */
body{
  background: var(--fa-bg);
  color: var(--fa-white);
  font-size: var(--fa-font-body);
}

h5, h6, .navbar-brand{
  font-size: var(--fa-font-heading);
}

.dataTables_filter label,
.dataTables_length label{
  color: #fff !important;
}

/* =======================
   3) Layout (Navbar/Card/Table)
   ======================= */
.navbar{
  padding-bottom: 15px;
  background: linear-gradient(90deg, var(--fa-nav-a), var(--fa-nav-b));
}

.card{
  background: var(--fa-card);
  border-radius: 16px;
  border: 1px solid var(--fa-border);
}

.card-header{
  flex-flow: row wrap;
  border-bottom: 1px solid var(--fa-border);
  background: transparent;
}

.table thead th{
  border-color: var(--fa-border);
  color: #adb5bd;
}

.table tbody td{
  border-color: var(--fa-border);
  vertical-align: middle;
}

.club-logo{
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-right: 6px;
}

/* =======================
   4) Tipografia consistente para BOTÕES
   ======================= */
.btn{
  font-size: var(--fa-font-btn);
  padding: var(--fa-btn-pad-y) var(--fa-btn-pad-x);
  line-height: 1.12;
  font-weight: 700;
}

.navbar .btn{
  font-size: var(--fa-font-btn);
  padding: var(--fa-btn-pad-y) var(--fa-btn-pad-x);
}

/* Instagram custom */
.btn-instagram{
  color:#fff !important;
  border:0;
  background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
  box-shadow: var(--fa-shadow-md);
}
.btn-instagram:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* =======================
   5) Badges / Heat
   ======================= */
.badge-metric{
  font-size: var(--fa-font-badge);
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
}

.text-green{ color: var(--fa-green); }

.heat-low  { color:#ffffff !important; background: var(--fa-red) !important; }
.heat-mid  { color:#000000 !important; background: var(--fa-yellow) !important; }
.heat-high { color:#000000 !important; background: var(--fa-green) !important; }

.btn-danger  { color:#ffffff; background: var(--fa-red); }
.btn-warning { color:#000000; background: var(--fa-yellow); }
.btn-success { color:#000000; background: var(--fa-green); }

.badge.bg-danger  { color:#ffffff !important; background: var(--fa-red) !important; }
.badge.bg-success { color:#000000 !important; background: var(--fa-green) !important; }
.badge.bg-info    { color:#000000 !important; background: var(--fa-cyan) !important; }
.bg-warning       { background-color: rgb(203 255 0) !important; color:#000000 !important; }

/* =======================
   6) Legenda (heat)
   ======================= */
.legend-heat{
  width: 100%;
  color: #fff;
  display:flex;
  gap:5px;
  justify-content:flex-start;
  flex-wrap:wrap;
  margin:.35rem 0 .75rem;
  font-size: var(--fa-font-legend);
}
.legend-heat .item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.15);
}
.legend-heat .dot{
  width:12px;
  height:12px;
  border-radius:4px;
  box-shadow: 0 0 10px rgba(255,255,255,.2);
}
.legend-heat .dot.low  { background: var(--fa-red); }
.legend-heat .dot.mid  { background: var(--fa-yellow); }
.legend-heat .dot.high { background: var(--fa-green); }

/* =======================
   7) CTA Análise da Rodada
   ======================= */
.fa-cta-analise{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,193,7,.25);
  background: linear-gradient(90deg, rgba(255,193,7,.18), rgba(13,110,253,.12));
  box-shadow: var(--fa-shadow-lg);
}

.fa-cta-analise .fa-cta-title{
  font-weight:800;
  letter-spacing:.2px;
  margin:0;
}

.fa-cta-analise .fa-cta-sub{
  margin:2px 0 0 0;
  color: var(--fa-muted);
  font-size:.92rem;
}

.fa-cta-analise .btn{
  white-space:nowrap;
  border-radius:999px;
  padding:.60rem 1.00rem;
  font-weight:800;
  box-shadow: var(--fa-shadow-md);
}
.fa-cta-analise .btn:hover{
  filter:brightness(1.06);
  transform: translateY(-1px);
}

@media (max-width: 576px){
  .fa-cta-analise{
    flex-direction:column;
    align-items:flex-start;
  }
  .fa-cta-analise .btn{ width:100%; }
}

/* =======================
   8) IA Cards
   ======================= */
.ia-card{
  background: #0f1430;
  border: 1px solid var(--fa-border);
  border-radius: 14px;
  padding: 12px;
  height: 100%;
}
.ia-photo{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #2a2f4a;
}
.badge-soft{
  background: rgba(255,255,255,0.08);
  border: 1px solid #2a2f4a;
}

/* =======================
   9) Inputs / Selects (brancos)
   ======================= */
.form-control,
.form-select{
  background-color:#ffffff;
  border:1px solid #ced4da;
  color:#212529;
}
.form-control:focus,
.form-select:focus{
  color:#212529;
  background-color:#ffffff;
  border-color:#0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
  outline: 0;
}

/* Select2 */
.select2-container{ z-index: 100 !important; }
.select2-container--bootstrap4 .select2-results__option{ color:#000; }
.select2-container .select2-selection--single .select2-selection__clear{ color:#212529 !important; }

.select2-container--bootstrap4 .select2-selection--single{
  background-color:#ffffff;
  border:1px solid #ced4da;
  border-radius:0.375rem;
  height: calc(2.25rem + 2px);
  display:flex;
  align-items:center;
  padding: 0.375rem 0.75rem;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{
  color:#212529;
  padding-left:0;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{ color:#6c757d; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{ height:100%; right:10px; }

.select2-container--bootstrap4 .select2-selection--multiple{
  background-color:#ffffff;
  border:1px solid #ced4da;
  border-radius:0.375rem;
  min-height: calc(2.25rem + 2px);
  padding: 0.25rem 0.2rem;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{
  background-color:#e9ecef;
  border:1px solid #ced4da;
  color:#212529;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection--single,
.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple{
  border-color:#0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
  outline:0;
}

.select2-container--bootstrap4 .select2-dropdown{
  background-color:#ffffff;
  border:1px solid #ced4da;
}
.select2-container--bootstrap4 .select2-results__option{ color:#212529; }
.select2-container--bootstrap4 .select2-results__option--highlighted{
  background-color:#0d6efd;
  color:#ffffff;
}

/* =======================
   10) Footer
   ======================= */
.fa-footer{
  border-top: 1px solid var(--fa-border);
  background: linear-gradient(90deg, var(--fa-nav-a), var(--fa-nav-b));
}
.fa-footer-logo{
  width: 190px;
  max-width: 70vw;
  height: auto;
  opacity: .98;
}
.fa-footer-contact{ font-size: .95rem; }
.fa-footer-link{
  color:#ffc107;
  text-decoration:none;
  font-weight:600;
}
.fa-footer-link:hover{
  text-decoration: underline;
  filter: brightness(1.05);
}
.fa-footer-bottom{
  border-top: 1px dashed rgba(255,255,255,0.12);
}

/* =======================
   11) DataTables Responsive “+”
   ======================= */
table.dataTable.dtr-column > tbody > tr > td.control,
table.dataTable.dtr-column > tbody > tr > th.control{
  position: relative;
  cursor: pointer;
}

table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before{
  content:"+";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:#198754;
  border:#198754;
  color:#fff;
  font-weight:700;
  line-height:1;
}

table.dataTable.dtr-column > tbody > tr.parent > td.control:before,
table.dataTable.dtr-column > tbody > tr.parent > th.control:before{
  content:"–";
}

.dtr-details{ width:100%; }

/* =======================
   12) Responsivo (<=1080px)
   ✅ Botões + fonte maiores
   ✅ Legendas e badges maiores
   ======================= */
@media (max-width: 1080px){
  .card-body.table-responsive{ padding: 0 !important; }
  .card-body.table-responsive #tbl_clubes_wrapper{ padding: 0 !important; }

  body{ font-size: var(--fa-font-body-m); }
  h5, h6, .navbar-brand{ font-size: var(--fa-font-heading-m); }

  /* ✅ Bootstrap buttons */
  .btn{
    font-size: var(--fa-font-btn-m);
    padding: var(--fa-btn-pad-y-m) var(--fa-btn-pad-x-m);
  }
  .navbar .btn{
    font-size: var(--fa-font-btn-m);
    padding: var(--fa-btn-pad-y-m) var(--fa-btn-pad-x-m);
  }

  /* ✅ Legendas */
  .legend-heat{
    font-size: var(--fa-font-legend-m);
  }
  .legend-heat .item{
    padding: 7px 11px; /* um tiquinho maior */
  }

  /* ✅ Badges */
  .badge-metric{
    font-size: var(--fa-font-badge-m);
    padding: 0.26rem 0.46rem;
  }

  /* tabelas */
  .table{ font-size: .72rem; }

  /* Modal IA */
  #modalIA .modal-dialog{ margin: 0.5rem; }
  #modalIA .modal-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #modalIA .modal-header > div:last-child{
    width: 100%;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    row-gap: 0.3rem;
  }
  #modalIA #ia_total_score,
  #modalIA #ia_total_preco{
    font-size: .75rem; /* era .65 */
  }
  #modalIA #btnRecalcularIA{
    font-size: .75rem;
    padding: 0.2rem 0.6rem;
  }

  .logo{ width: 150px; margin-bottom: 10px; }
  #modalIA .btn-close{ margin-left: auto; }

  .dataTables_wrapper .dataTables_paginate,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_length label,
  .dataTables_wrapper .dataTables_filter label{
    font-size: .75rem;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button{ font-size: 0.25rem; }
  .page-link{ font-size: 10px !important; }

  .navbar-nav.ms-auto{ margin-left: 0 !important; }
  .navbar-nav.ms-auto li button{ margin: 0 10px 0 0; }
  .dataTables_length{ margin-bottom: 10px; }
  .dataTables_filter{ margin-bottom: 10px; }
}
/* =========================
   DataTables Buttons (Dark)
   ========================= */

/* container */
.dt-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:.75rem;
}

/* botão base */
.dt-buttons .dt-button{
  background: transparent !important;
  border: 1px solid #2a2f4a !important;
  color: rgba(255,255,255,.92) !important;

  padding: .42rem .65rem !important;
  border-radius: .6rem !important;
  font-weight: 700 !important;
  font-size: .92rem !important;

  line-height: 1.2 !important;
  box-shadow: 0 .35rem 1rem rgba(0,0,0,.25) !important;
  transition: transform .08s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}

/* hover */
.dt-buttons .dt-button:hover{
  filter: brightness(1.08) !important;
  background: rgba(255,193,7,.12) !important;
  border-color: rgba(255,193,7,.45) !important;
}

/* focus/active */
.dt-buttons .dt-button:focus,
.dt-buttons .dt-button:active{
  outline: none !important;
  box-shadow: 0 0 0 .18rem rgba(255,193,7,.25) !important;
  transform: translateY(-1px);
}

/* disabled */
.dt-buttons .dt-button.disabled,
.dt-buttons .dt-button:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
  transform:none !important;
}

/* deixa o texto alinhado */
.dt-buttons .dt-button > span{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}

/* opcional: ícones rápidos via emoji */
.dt-buttons .buttons-copy > span::before{ content:"📋"; }
.dt-buttons .buttons-csv  > span::before{ content:"🧾"; }
.dt-buttons .buttons-excel > span::before{ content:"📊"; }
.dt-buttons .buttons-pdf > span::before{ content:"🧷"; }
.dt-buttons .buttons-print > span::before{ content:"🖨️"; }

/* Ajuste no modo mobile */
@media (max-width:576px){
  .dt-buttons .dt-button{
    font-size: 1rem !important;
    padding: .5rem .75rem !important;
    border-radius: .75rem !important;
  }
}

/* Logo desktop */
.logo{ width: 180px; }
#datatables_buttons_info * {
    color: #000 !important;
}