/* ==========================================================================
   FA DA QUEBRADA — Tema visual (dark / estilo app esportivo)
   Este arquivo é 100% aditivo: reestiliza classes já existentes no HTML
   (Bootstrap 4.6.2 + classes próprias do sistema) sem exigir mudança de
   markup nas páginas que não foram reestruturadas (ex.: painel Admin).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --fq-bg:            #0a0f14;
  --fq-bg-soft:       #0f151c;
  --fq-surface:       #141c25;
  --fq-surface-2:     #1a2530;
  --fq-border:        #22303d;
  --fq-text:          #e8eef3;
  --fq-text-muted:    #8ea0b0;
  --fq-green:         #22c55e;
  --fq-green-dark:    #16a34a;
  --fq-green-glow:    rgba(34,197,94,.35);
  --fq-gold:          #f2b705;
  --fq-red:           #ef4444;
  --fq-radius:        16px;
  --fq-radius-sm:     10px;
}

*{ box-sizing: border-box; }

html, body{
  background: radial-gradient(1200px 600px at 50% -10%, #0f2418 0%, var(--fq-bg) 55%) fixed;
  color: var(--fq-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, .navbar-brand{
  font-family: 'Rajdhani', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
}

a{ color: var(--fq-green); }
a:hover{ color: var(--fq-gold); }

::selection{ background: var(--fq-green-glow); }

/* ---------- Navbar ---------- */
header nav.navbar{
  background: linear-gradient(180deg, #0e1a13 0%, #0a120d 100%) !important;
  border-bottom: 2px solid var(--fq-green-dark);
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.navbar-brand{
  font-size: 24px !important;
  color: #fff !important;
  display: flex;
  align-items: center;
}
.navbar-brand .logo, header nav img.logo{
  filter: drop-shadow(0 0 6px var(--fq-green-glow));
}
.navbar-dark .navbar-nav .nav-link{
  color: #cfe9d8 !important;
  font-weight: 600;
  padding: .5rem .9rem;
  border-radius: var(--fq-radius-sm);
  transition: background .15s, color .15s;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{
  color: #fff !important;
  background: rgba(34,197,94,.15);
}
.navbar .btn-outline-light{
  border-color: var(--fq-green);
  color: #fff;
}
.navbar .btn-outline-light:hover{
  background: var(--fq-green);
  border-color: var(--fq-green);
}

/* ---------- Layout base ---------- */
main > .container{ padding: 32px 15px 60px; }
.footer{
  background: var(--fq-bg-soft) !important;
  border-top: 1px solid var(--fq-border);
  color: var(--fq-text-muted);
}

/* ---------- Cards ---------- */
.card{
  background: var(--fq-surface);
  border: 1px solid var(--fq-border);
  border-radius: var(--fq-radius);
  color: var(--fq-text);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card-header{
  background: linear-gradient(90deg, var(--fq-green-dark), #0e6b34) !important;
  border-bottom: 0;
  color: #fff !important;
  border-radius: var(--fq-radius) var(--fq-radius) 0 0 !important;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: .04em;
}

/* Painel de posição/campanha (bolao.php) */
.card[style*="198754"]{
  background: linear-gradient(155deg, var(--fq-green-dark), #0c4f27) !important;
  border: 1px solid rgba(34,197,94,.4);
  border-radius: var(--fq-radius);
}

/* ---------- Forms ---------- */
.form-control, .custom-select, select.form-control{
  background: var(--fq-surface-2);
  border: 1px solid var(--fq-border);
  color: var(--fq-text);
}
.form-control:focus, select.form-control:focus{
  background: var(--fq-surface-2);
  color: var(--fq-text);
  border-color: var(--fq-green);
  box-shadow: 0 0 0 .2rem var(--fq-green-glow);
}
.form-control::placeholder{ color: var(--fq-text-muted); }
.form-control:disabled, .form-control[readonly]{
  background: var(--fq-bg-soft);
  opacity: .7;
}
label{ color: var(--fq-text-muted); font-weight: 600; }
.input-group-append .btn-outline-secondary{
  border-color: var(--fq-border);
  color: var(--fq-text);
}

/* ---------- Buttons ---------- */
.btn{ font-weight: 600; border-radius: var(--fq-radius-sm); letter-spacing: .01em; }
.btn-success{
  background: linear-gradient(135deg, var(--fq-green), var(--fq-green-dark));
  border: 0;
  box-shadow: 0 6px 18px rgba(34,197,94,.3);
}
.btn-success:hover{ filter: brightness(1.08); }
.btn-dark{ background: var(--fq-surface-2); border: 1px solid var(--fq-border); }
.btn-dark:hover{ background: var(--fq-border); }
.btn-outline-danger{ border-color: var(--fq-red); color: var(--fq-red); }
.btn-outline-danger:hover{ background: var(--fq-red); }

/* ---------- Tables (ranking, admin, dataTables) ---------- */
.table{ color: var(--fq-text); }
.table-responsive{
  border: 1px solid var(--fq-border);
  border-radius: var(--fq-radius);
  overflow: hidden;
}
.table thead th{ border-bottom: 0 !important; }
.table-striped tbody tr:nth-of-type(odd){ background: rgba(255,255,255,.02); }
.table-hover tbody tr:hover{
  background: rgba(34,197,94,.08);
  color: var(--fq-text) !important;
}
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th{
  color: var(--fq-text) !important;
}
.table td, .table th{ border-color: var(--fq-border); vertical-align: middle; }
.table-success, .table-success > td, .table-success > th{
  background-color: rgba(34,197,94,.22) !important;
  color: #d9ffe6 !important;
}
.table-danger, .table-danger > td, .table-danger > th{
  background-color: rgba(239,68,68,.18) !important;
  color: #ffd9d9 !important;
}
.table-dark, .table-dark > td, .table-dark > th{
  background-color: rgba(242,183,5,.25) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 2px var(--fq-gold);
}

/* Ranking: destaque no top 3 */
#table-bolao tbody tr:nth-child(1) th{ color: var(--fq-gold); font-size: 20px; }
#table-bolao tbody tr:nth-child(2) th{ color: #c9d2d8; font-size: 18px; }
#table-bolao tbody tr:nth-child(3) th{ color: #cd8a4e; font-size: 18px; }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
  color: var(--fq-text-muted);
}
.dataTables_wrapper .form-control{ display: inline-block; }
.page-link{
  background: var(--fq-surface-2);
  border-color: var(--fq-border);
  color: var(--fq-text);
}
.page-link:hover{ background: var(--fq-border); color: #fff; }

/* ---------- Badges ---------- */
.badge{ border-radius: 8px; }
.badge-secondary{ background: var(--fq-surface-2); color: var(--fq-text); border: 1px solid var(--fq-border); }

/* ---------- Modal / Tabs (Admin) ---------- */
.modal-content{
  background: var(--fq-surface);
  border: 1px solid var(--fq-border);
  color: var(--fq-text);
}
.modal-header{ border-bottom: 1px solid var(--fq-border); }
.modal-footer{ border-top: 1px solid var(--fq-border); }
.modal-header .close{ color: var(--fq-text); text-shadow: none; opacity: .8; }

.nav-tabs{ border-bottom: 1px solid var(--fq-border); }
.nav-tabs .nav-link{
  color: var(--fq-text-muted);
  border: 0;
  border-bottom: 3px solid transparent;
  font-weight: 600;
}
.nav-tabs .nav-link:hover{ border-color: var(--fq-border); color: var(--fq-text); }
.nav-tabs .nav-link.active{
  background: transparent;
  color: var(--fq-green);
  border-bottom-color: var(--fq-green);
}

/* ---------- Matchup cards (bolao.php) ---------- */
.matchup-week-title{
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--fq-text-muted);
  text-transform: uppercase;
  margin: 28px 0 10px;
}
.matchup-card{
  background: var(--fq-surface);
  border: 1px solid var(--fq-border);
  border-radius: var(--fq-radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.matchup-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--fq-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.matchup-row{
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.matchup-team{
  flex: 1;
  padding: 0;
  border-radius: var(--fq-radius-sm);
  border: 2px solid var(--fq-border);
  background: var(--fq-surface-2);
  transition: border-color .15s, background .15s, transform .1s;
  overflow: hidden;
}
.matchup-team label{
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
}
.matchup-team:hover{ border-color: var(--fq-green); transform: translateY(-1px); }
.matchup-team img{ display: block; margin: 0 auto 6px; pointer-events: none; }
.matchup-team .team-name{ font-size: 12.5px; font-weight: 600; color: var(--fq-text); line-height: 1.15; }
.matchup-team .team-score{ font-size: 20px; font-weight: 700; color: var(--fq-gold); }
.matchup-vs{
  flex: 0 0 76px;
  padding: 0;
  border-radius: var(--fq-radius-sm);
  border: 2px solid var(--fq-border);
  background: var(--fq-surface-2);
  font-size: 11px;
  font-weight: 700;
  color: var(--fq-text-muted);
  transition: border-color .15s, background .15s;
  overflow: hidden;
}
.matchup-vs label{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 76px;
  margin: 0;
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
}
.matchup-vs:hover{ border-color: var(--fq-gold); }
.matchup-team.table-dark, .matchup-vs.table-dark{
  border-color: var(--fq-gold) !important;
  background: rgba(242,183,5,.14) !important;
  box-shadow: 0 0 0 1px var(--fq-gold);
}
.matchup-team.table-success, .matchup-vs.table-success{
  border-color: var(--fq-green) !important;
  background: rgba(34,197,94,.14) !important;
}
.matchup-team.table-danger, .matchup-vs.table-danger{
  border-color: var(--fq-red) !important;
  background: rgba(239,68,68,.14) !important;
}
.matchup-venue{
  margin-top: 10px;
  font-size: 12px;
  color: var(--fq-text-muted);
  text-align: center;
}
@media (max-width: 575.98px){
  .matchup-team .team-name{ font-size: 11px; }
  .matchup-vs{ flex-basis: 56px; }
}

/* ---------- Login (index.php) ---------- */
body.fq-login{
  background: radial-gradient(1000px 500px at 50% -5%, #123420 0%, var(--fq-bg) 60%);
  min-height: 100vh;
}
.fq-login-hero h2, .fq-login-hero .h1{
  font-family: 'Rajdhani', sans-serif;
  font-size: 2.6rem;
  color: #fff;
}
.fq-login-hero .lead{ color: #cfe9d8; }
.fq-login .card{ background: var(--fq-surface); }
.fq-login .card h3{ color: #fff; }

/* Regulamento / textos */
.fq-prose p{ color: var(--fq-text); text-align: justify; }
.fq-prose strong{ color: var(--fq-green); }

/* ==========================================================================
   ONE PAGE PÚBLICA (publico.php)
   ========================================================================== */

.pub-navbar{
  background: linear-gradient(180deg, #0e1a13 0%, #0a120d 100%);
  border-bottom: 2px solid var(--fq-green-dark);
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.pub-navbar .nav-link{
  color: #cfe9d8 !important;
  font-weight: 600;
}
.pub-navbar .nav-link:hover{ color: #fff !important; }

.pub-hero{
  position: relative;
  padding: 400px 0 60px 0;
  text-align: right;
  background:
    radial-gradient(900px 460px at 50% 0%, rgba(34,197,94,.18) 0%, transparent 70%),
    url('../images/banner-alpha-jersey.jpg');
  background-repeat: no-repeat;
  background-position: top center, left;
  background-size: cover, cover;
}
.pub-hero img.pub-logo{
  height: 96px;
  margin-bottom: 22px;
  filter: drop-shadow(0 0 18px var(--fq-green-glow));
}
.pub-hero h1{
  font-size: 3rem;
  color: #fff;
  margin-bottom: 14px;
}
.pub-hero h1 span{ color: var(--fq-green); }
.pub-hero p.lead{
  color: #cfe9d8;
  max-width: 640px;
  margin: 0 auto 28px;
  font-size: 1.15rem;
}
.pub-hero .btn{ margin: 0 6px 10px; }

.pub-section{ padding: 60px 0; }
.pub-section-title{
  text-align: center;
  margin-bottom: 40px;
}
.pub-section-title h2{
  color: #fff;
  font-size: 2rem;
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--fq-green);
}
.pub-section-title p{ color: var(--fq-text-muted); margin-top: 10px; }
.pub-section-alt{ background: var(--fq-bg-soft); }

.pub-feature{
  text-align: center;
  padding: 30px 20px;
  height: 100%;
}
.pub-feature img{ height: 56px; margin-bottom: 18px; }
.pub-feature h3{ color: #fff; font-size: 1.2rem; margin-bottom: 10px; }
.pub-feature p{ color: var(--fq-text-muted); font-size: .95rem; }

.pub-partner-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  height: 100%;
  text-decoration: none;
  transition: transform .15s, border-color .15s;
}
.pub-partner-card:hover{ transform: translateY(-4px); border-color: var(--fq-green); text-decoration: none; }
.pub-partner-card img{
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 14px;
  border: 2px solid var(--fq-border);
}
.pub-partner-card .partner-name{ color: #fff; font-weight: 700; }
.pub-partner-card .partner-tag{ color: var(--fq-text-muted); font-size: .85rem; }

.pub-teams-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 14px;
}
.pub-team-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 6px;
  border-radius: var(--fq-radius-sm);
  border: 1px solid var(--fq-border);
  background: var(--fq-surface);
  transition: border-color .15s, transform .1s;
}
.pub-team-item:hover{ border-color: var(--fq-green); transform: translateY(-2px); }
.pub-team-item img{ height: 40px; margin-bottom: 8px; }
.pub-team-item span{ font-size: 10.5px; color: var(--fq-text-muted); line-height: 1.15; }

.pub-games{ display: flex; flex-direction: column; gap: 14px; }
.matchup-card.is-static .matchup-team,
.matchup-card.is-static .matchup-vs{ cursor: default; }
.matchup-card.is-static .matchup-team:hover,
.matchup-card.is-static .matchup-vs:hover{ transform: none; border-color: var(--fq-border); }

.pub-footer{
  background: var(--fq-bg-soft);
  border-top: 1px solid var(--fq-border);
  padding: 40px 0 24px;
  text-align: center;
}
.pub-footer img.pub-logo-sm{ height: 48px; margin-bottom: 16px; }
.pub-footer .pub-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--fq-border);
  margin: 0 6px;
  color: var(--fq-text);
  font-weight: 700;
  transition: border-color .15s, color .15s;
}
.pub-footer .pub-social a:hover{ border-color: var(--fq-green); color: var(--fq-green); text-decoration: none; }
.pub-footer .copy{ color: var(--fq-text-muted); font-size: .85rem; margin-top: 24px; }

@media (max-width: 575.98px){
  .pub-hero h1{ font-size: 2.1rem; }
  .pub-hero{ padding: 60px 0 40px; }
}