/* =========================================
   CBBO News - Módulo Competições
   Arquivo: /competicoes/style-competicoes.css
   Objetivo:
   - visual clean e consistente (admin e público)
   - tabs + tabela pública + lista de jogos
   - modal (config e add competidor) padronizados
   ========================================= */

:root{
  --cbbo-comp-max: 1180px;
  --cbbo-comp-blue: #070a8a;
  --cbbo-comp-dark: #0b1530;

  --cbbo-comp-border: rgba(0,0,0,.08);
  --cbbo-comp-border-strong: rgba(0,0,0,.14);

  --cbbo-comp-shadow: 0 10px 24px rgba(0,0,0,.08);
  --cbbo-comp-radius: 14px;

  /* botões */
  --cbbo-btn-h: 34px;
  --cbbo-btn-px: 12px;
  --cbbo-btn-fs: 11px;

  /* inputs */
  --cbbo-inp-h: 36px;
  --cbbo-inp-fs: 13px;

  /* spacing */
  --cbbo-gap: 12px;
}

/* evita scroll “por trás” quando modal aberto */
html.cbbo-modal-open,
html.cbbo-modal-open body{
  overflow:hidden !important;
}

/* wrapper padrão */
.cbbo-comp-wrap{
  max-width: var(--cbbo-comp-max);
  margin: 0 auto;
  padding: 22px 16px 44px;
}

/* header */
.cbbo-comp-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
@media(max-width:760px){
  .cbbo-comp-head{ align-items:flex-start; flex-direction:column; }
}

.cbbo-comp-title{
  margin:0;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:18px;
}
.cbbo-comp-sub{
  margin:6px 0 0;
  font-size:13px;
  opacity:.75;
}

/* cards */
.cbbo-comp-card{
  background:#fff;
  border:1px solid var(--cbbo-comp-border);
  box-shadow: var(--cbbo-comp-shadow);
  border-radius: var(--cbbo-comp-radius);
  padding:14px;
}
.cbbo-comp-card + .cbbo-comp-card{ margin-top:14px; }

/* grid util */
.cbbo-comp-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:16px;
  align-items:start;
}
@media(max-width:980px){
  .cbbo-comp-grid{ grid-template-columns:1fr; }
}

/* hint */
.cbbo-comp-hint{
  font-size:12px;
  opacity:.75;
  margin-top:6px;
  line-height:1.3;
}

/* =========================
   BOTÕES (clean + menores)
   ========================= */
.cbbo-comp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  height: var(--cbbo-btn-h);
  padding: 0 var(--cbbo-btn-px);

  border:0;
  border-radius:12px;
  background: var(--cbbo-comp-blue);
  color:#fff;

  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size: var(--cbbo-btn-fs);
  line-height:1;

  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  user-select:none;
}
.cbbo-comp-btn:hover{ opacity:.92; }

.cbbo-comp-btn.outline{
  background:#fff;
  color: var(--cbbo-comp-blue);
  border:1px solid rgba(7,10,138,.25);
}

.cbbo-comp-btn.danger{ background:#b91c1c; }

/* compat: se algum template usa .cbbo-btn dentro do módulo */
.cbbo-comp-wrap .cbbo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: var(--cbbo-btn-h);
  padding: 0 var(--cbbo-btn-px);

  border-radius:12px;
  background: var(--cbbo-comp-blue);
  color:#fff;
  border:0;

  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size: var(--cbbo-btn-fs);
  line-height:1;

  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
.cbbo-comp-wrap .cbbo-btn:hover{ opacity:.92; }

/* garante botões do head padronizados */
.cbbo-comp-head .cbbo-comp-btn,
.cbbo-comp-head .cbbo-btn{
  height: var(--cbbo-btn-h);
  padding: 0 var(--cbbo-btn-px);
  font-size: var(--cbbo-btn-fs);
}

/* =========================
   INPUTS/SELECT
   ========================= */
.cbbo-comp-input,
.cbbo-comp-select{
  width:100%;
  height: var(--cbbo-inp-h);
  padding: 0 10px;
  border:1px solid var(--cbbo-comp-border-strong);
  border-radius:10px;
  font-size: var(--cbbo-inp-fs);
  outline:none;
  box-shadow:none;
  background:#fff;
}
textarea.cbbo-comp-input{
  height:auto;
  min-height: 220px;
  padding: 10px;
}
.cbbo-comp-input:focus,
.cbbo-comp-select:focus{
  border-color: rgba(7,10,138,.55);
}

/* =========================
   TABS (page-competicoes)
   ========================= */
.cbbo-tab-btn.is-active{
  background: var(--cbbo-comp-blue);
  color:#fff;
  border:0;
}
.cbbo-tab-btn.is-active.outline{
  background: var(--cbbo-comp-blue);
  color:#fff;
  border:0;
}
.cbbo-tab-panel{
  animation: cbboFade .15s ease-in;
}
@keyframes cbboFade{
  from{ opacity:.5; transform: translateY(1px); }
  to{ opacity:1; transform: translateY(0); }
}

/* =========================
   TABELA (admin + público)
   ========================= */
.cbbo-comp-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--cbbo-comp-border);
  border-radius: var(--cbbo-comp-radius);
  overflow:hidden;
  box-shadow: var(--cbbo-comp-shadow);
}
.cbbo-comp-table th,
.cbbo-comp-table td{
  padding:10px;
  border-bottom:1px solid rgba(0,0,0,.06);
  font-size:13px;
  vertical-align:middle;
}
.cbbo-comp-table th{
  background:#f4f6fb;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:900;
  font-size:12px;
}
.cbbo-comp-table tr:last-child td{ border-bottom:0; }

.cbbo-comp-table tbody tr:hover td{
  background: rgba(7,10,138,.03);
}

/* colunas do gerenciar */
.cbbo-comp-col-sigla{ max-width:90px; width:90px; }
.cbbo-comp-col-actions{ width:260px; }

/* ações inline */
.cbbo-comp-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}

/* =========================
   Pills / badges
   ========================= */
.cbbo-comp-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 9px;
  border-radius:999px;
  background:#f3f4f6;
  font-weight:900;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.06em;
}
.cbbo-comp-pill.blue{ background: rgba(7,10,138,.10); color: var(--cbbo-comp-blue); }
.cbbo-comp-pill.green{ background: rgba(16,185,129,.12); color:#065f46; }
.cbbo-comp-pill.red{ background: rgba(239,68,68,.12); color:#7f1d1d; }
.cbbo-comp-pill input[type="checkbox"]{ accent-color: var(--cbbo-comp-blue); }

/* =========================
   Competidores (cards)
   - público e admin
   ========================= */
.cbbo-selected-card{
  background:#fff;
}
.cbbo-selected-card:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* item do modal (add) */
.cbbo-modal-item{
  transition: transform .05s ease, box-shadow .12s ease, border-color .12s ease;
}
.cbbo-modal-item:hover{
  transform: translateY(-1px);
  border-color: rgba(7,10,138,.25) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
}

/* responsivo do grid dos modais */
@media(max-width:980px){
  #cbboModalGrid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}
@media(max-width:520px){
  #cbboModalGrid{
    grid-template-columns:1fr !important;
  }
  #cbboSelectedGrid{
    grid-template-columns:1fr !important;
  }
}

/* =========================
   MODAL (config + add competidor)
   ========================= */
.cbbo-comp-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
}
.cbbo-comp-modal.is-open{ display:block; }

.cbbo-comp-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.cbbo-comp-modal__panel{
  position:relative;
  z-index:2;
  width:min(860px, 92vw);
  margin:6vh auto 0;
  background:#fff;
  border-radius:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  overflow:hidden;
}

@media(max-width:760px){
  .cbbo-comp-modal__panel{ margin:3vh auto 0; width:min(920px, 95vw); }
}

.cbbo-comp-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  background: linear-gradient(90deg, var(--cbbo-comp-dark), var(--cbbo-comp-blue));
  color:#fff;
}

.cbbo-comp-modal__title{
  margin:0;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:13px;
}

.cbbo-comp-modal__close{
  height: var(--cbbo-btn-h);
  padding: 0 12px;
  border:0;
  background: rgba(255,255,255,.14);
  color:#fff;
  border-radius:12px;
  font-weight:900;
  font-size: var(--cbbo-btn-fs);
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.cbbo-comp-modal__close:hover{ background: rgba(255,255,255,.18); }

.cbbo-comp-modal__body{
  padding:14px;
  max-height: 74vh;
  overflow:auto;
}
@media(max-width:760px){
  .cbbo-comp-modal__body{ max-height: 78vh; }
}

.cbbo-comp-modal__foot{
  padding:14px;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* =========================
   Jogadores/Jogos (page-competicoes)
   ========================= */
.cbbo-comp-match{
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  padding:10px;
  background:#fff;
}
.cbbo-comp-match:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* =========================
   TEMPORADAS: compat (se existir page-gerenciar-temporadas)
   ========================= */
.cbbo-temporadas .cbbo-btn{
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1;
  min-height: 34px;
}
.cbbo-temporadas .cbbo-btn:hover{ opacity: .92; }