/* ============================================================
   GestaoSport — tema do Django Admin (Painel administrativo)
   Reaproveita a paleta e a identidade visual do site público.
   ============================================================ */

:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --primary: #14284d;
  --secondary: #0a285a;
  --accent: #7dc832;
  --primary-fg: #eef2f8;

  --body-fg: #eef2f8;
  --body-bg: #050a16;
  --body-quiet-color: #93a2ba;
  --body-medium-color: #c3cee2;
  --body-loud-color: #ffffff;

  --header-color: #a6e753;
  --header-branding-color: #a6e753;
  --header-bg: linear-gradient(90deg, #081226 0%, #0d1c38 100%);
  --header-link-color: #eef2f8;

  --breadcrumbs-fg: #93a2ba;
  --breadcrumbs-link-fg: #a6e753;
  --breadcrumbs-bg: #081226;

  --link-fg: #a6e753;
  --link-hover-color: #7dc832;
  --link-selected-fg: #a6e753;

  --hairline-color: rgba(255, 255, 255, 0.08);
  --border-color: rgba(255, 255, 255, 0.14);

  --error-fg: #ff6b6b;
  --message-success-bg: rgba(125, 200, 50, 0.16);
  --message-warning-bg: rgba(255, 193, 7, 0.14);
  --message-error-bg: rgba(255, 80, 80, 0.14);

  --darkened-bg: #0a1120;
  --selected-bg: rgba(125, 200, 50, 0.1);
  --selected-row: rgba(125, 200, 50, 0.12);

  --button-fg: #04220a;
  --button-bg: linear-gradient(135deg, #7dc832 0%, #5a9622 100%);
  --button-hover-bg: linear-gradient(135deg, #a6e753 0%, #7dc832 100%);
  --default-button-bg: linear-gradient(135deg, #2a5cb8 0%, #14284d 100%);
  --default-button-hover-bg: linear-gradient(135deg, #3a6cc8 0%, #1b3566 100%);
  --close-button-bg: #3a4759;
  --close-button-hover-bg: #4c5c74;
  --delete-button-bg: #c0392b;
  --delete-button-hover-bg: #a5281b;

  --object-tools-fg: #eef2f8;
  --object-tools-bg: #14284d;
  --object-tools-hover-bg: #1b3566;

  --font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  color-scheme: dark;
}

/* ---------- Base / fundo ---------- */
html, body {
  min-height: 100%;
}

body {
  background-color: var(--navy-950, #050a16);
  background-image:
    radial-gradient(circle at 12% -10%, rgba(42, 92, 184, 0.28), transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(125, 200, 50, 0.12), transparent 38%);
  background-attachment: fixed;
}

#container { min-height: 100vh; }

a:link, a:visited { color: var(--link-fg); }
a:focus, a:hover { color: var(--link-hover-color); }

/* ---------- Cabeçalho / branding ---------- */
#header {
  padding: 14px 40px;
  background: rgba(6, 13, 28, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

#branding { display: flex; align-items: center; }

#branding h1, #branding h2, #site-name, #site-name a {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--header-color) !important;
}

#branding-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

#branding-logo img {
  height: 30px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(125, 200, 50, 0.3));
}

#user-tools {
  font-weight: 500;
  color: var(--body-quiet-color);
}
#user-tools a { border-bottom: none; }
#user-tools a:hover { color: var(--brand-green-light, #a6e753); }

/* ---------- Breadcrumbs ---------- */
div.breadcrumbs {
  background: var(--breadcrumbs-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 10px 40px;
}

/* ---------- Títulos de conteúdo ---------- */
#content h1, #content h2, .dashboard h2, h1, h2 {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------- Módulos / caixas do painel (glass-card) ---------- */
.module {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hairline-color);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.6);
}

.module h2, .module caption, .inline-group h2 {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 16px;
}

.module table { background: transparent; }

#content-related .module {
  background: rgba(255, 255, 255, 0.03);
}
#content-related .module h2 { border-radius: 14px 14px 0 0; }

/* ---------- Painel do organizador (home do admin) ---------- */
/* O CSS padrão do admin trava a página inicial ("dashboard") em 600px de
   largura fixa (pensada para a lista simples de apps do Django puro) —
   sobrescreve para usar a largura da tela e aproveitar o espaço. */
.dashboard #content {
  width: auto;
  max-width: 1500px;
}
.gs-dashboard { margin-bottom: 28px; }
.gs-dashboard-title {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 700;
  color: var(--header-color);
  margin-bottom: 14px;
}
.gs-dashboard-subtitle {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--body-medium-color);
  margin: 22px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gs-dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 260px));
  gap: 14px;
}
.gs-stat-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--hairline-color);
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 32px -22px rgba(0, 0, 0, 0.6);
}
/* Cards viraram links (<a>) para abrir o detalhe correspondente no admin —
   reseta a cor herdada de link e da um leve destaque ao passar o mouse. */
a.gs-stat-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
a.gs-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}
a.gs-stat-card:hover .gs-stat-label { color: var(--link-hover-color); }
.gs-stat-card-amarelo { border-left: 3px solid #e0c23f; }
.gs-stat-card-vermelho { border-left: 3px solid #e0553f; }
.gs-stat-value {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--body-loud-color);
  line-height: 1.1;
}
.gs-stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--link-fg);
}
.gs-stat-sub {
  font-size: 0.78rem;
  color: var(--body-quiet-color);
  margin-top: 4px;
}
.gs-dashboard-standings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
  gap: 14px;
}
.gs-standings-card {
  border-radius: 14px;
  border: 1px solid var(--hairline-color);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.gs-standings-card h4 {
  margin: 0;
  padding: 10px 14px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--hairline-color);
}
.gs-standings-card h4 a { color: var(--body-loud-color); }
.gs-standings-card h4 a:hover { color: var(--link-hover-color); }
.gs-standings-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.gs-standings-card thead th {
  text-align: left;
  padding: 6px 10px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--body-quiet-color);
}
.gs-standings-card tbody td {
  padding: 5px 10px;
  border-top: 1px solid var(--hairline-color);
  color: var(--body-fg);
}

/* ---------- Uso do plano (dashboard) ---------- */
.gs-plan-usage {
  border-radius: 14px;
  border: 1px solid var(--hairline-color);
  background: rgba(255, 255, 255, 0.03);
  padding: 14px 18px 16px;
  margin: 18px 0 4px;
  max-width: 640px;
}
.gs-plan-usage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.gs-plan-usage-header strong { color: var(--body-loud-color); }
.gs-plan-usage-header a { font-size: 0.78rem; }
.gs-plan-usage-bars { display: flex; flex-direction: column; gap: 10px; }
.gs-plan-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--body-quiet-color);
  margin-bottom: 4px;
}
.gs-plan-bar-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.gs-plan-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-green, #7dc832), var(--brand-navy-light, #2a5cb8));
  max-width: 100%;
}
.gs-plan-bar-fill.gs-plan-bar-cheia { background: linear-gradient(90deg, #e0c23f, #e0553f); }

/* ---------- Próximas partidas ---------- */
.gs-partidas-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gs-partidas-list li + li { border-top: 1px solid var(--hairline-color); }
.gs-partidas-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px;
  color: var(--body-fg);
  text-decoration: none;
}
.gs-partidas-list a:hover { background: rgba(125, 200, 50, 0.06); color: var(--link-hover-color); }
.gs-partida-data {
  font-size: 0.72rem;
  color: var(--body-quiet-color);
  white-space: nowrap;
  min-width: 78px;
}
.gs-partida-times { font-size: 0.85rem; font-weight: 600; flex: 1 1 auto; }
.gs-partida-x { opacity: 0.5; font-weight: 400; }
.gs-partida-campeonato {
  font-size: 0.72rem;
  color: var(--body-quiet-color);
  white-space: nowrap;
}

/* ---------- Menu lateral (agrupado por domínio de negócio) ---------- */
#nav-sidebar .gs-nav-group { margin-bottom: 10px; }
#nav-sidebar .gs-nav-icon { margin-right: 6px; opacity: 0.9; }
#nav-sidebar .app-dashboard th a {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 600;
  color: var(--body-loud-color);
}
#nav-sidebar .module caption .section {
  display: flex;
  align-items: center;
  gap: 2px;
}
.gs-nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e0c23f;
  color: #241d02;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
}
#nav-sidebar .gs-nav-actionlist {
  list-style: none;
  margin: 0;
  padding: 2px 16px 14px;
}
#nav-sidebar .gs-nav-actionlist li {
  line-height: 1.3;
  margin-top: 10px;
  padding-left: 18px;
  font-size: 0.78rem;
}
#nav-sidebar .gs-nav-actionlist li a {
  color: var(--body-medium-color);
}
#nav-sidebar .gs-nav-actionlist li a:hover {
  color: var(--link-hover-color);
}
#nav-sidebar .gs-nav-actionlist .mini.quiet {
  display: block;
  color: var(--body-quiet-color);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---------- Botões ---------- */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 8px;
  font-weight: 600;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.button:not(.default):hover, input[type=submit]:not(.default):hover {
  transform: translateY(-1px);
}
.button.default, input[type=submit].default {
  box-shadow: 0 10px 24px -10px rgba(42, 92, 184, 0.6);
}
.button.default:hover, input[type=submit].default:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(42, 92, 184, 0.75);
}

/* Botão "Adicionar" no topo das listas */
.object-tools a.addlink {
  border-radius: 8px;
  font-weight: 600;
  background: linear-gradient(135deg, #7dc832 0%, #5a9622 100%) !important;
  color: #04220a !important;
}
.object-tools a.addlink:hover { filter: brightness(1.08); }

/* ---------- Tabelas de listagem ---------- */
#changelist table thead th {
  background: rgba(255, 255, 255, 0.03);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--link-fg);
}
#changelist table tbody tr:hover {
  background: rgba(125, 200, 50, 0.05);
}
#changelist-filter {
  border-radius: 14px;
  border: 1px solid var(--hairline-color);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
#changelist-filter h2 { border-radius: 14px 14px 0 0; }
#changelist-filter li.selected a { color: var(--link-selected-fg); font-weight: 600; }

/* Cabeçalho "FILTRO" clicável: recolhe/expande o painel inteiro para
   ganhar espaço de tela. Estado salvo no navegador (localStorage) via
   admin-filter-collapse.js, então continua do jeito que o usuário deixou. */
#changelist-filter-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#changelist-filter-header::after {
  content: "\2212"; /* − : painel aberto */
  font-size: 0.85rem;
  opacity: 0.75;
}
#changelist-filter.gs-filter-collapsed #changelist-filter-header::after {
  content: "\002B"; /* + : painel recolhido */
}
#changelist-filter.gs-filter-collapsed > *:not(#changelist-filter-header) {
  display: none !important;
}
/* #changelist-filter normalmente tem largura fixa (flex: 0 0 240px, ver
   admin/css/changelists.css). Recolhido, encolhe para caber só o cabeçalho
   — como a área central (.changelist-form-container) já é flex: 1 1 auto,
   ela cresce sozinha e ocupa o espaço liberado. */
#changelist-filter.gs-filter-collapsed {
  flex: 0 0 auto;
  min-width: 0;
}
#changelist-filter.gs-filter-collapsed #changelist-filter-header {
  white-space: nowrap;
  padding-right: 20px;
}

/* ---------- Formulários ---------- */
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password],
.form-row input[type=number], .form-row textarea, select, .vTextField, .vLargeTextField {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--body-fg);
  border-radius: 6px;
}
.form-row input:focus, .form-row textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(125, 200, 50, 0.2);
  outline: none;
}
/* O popup nativo do <select> não herda o fundo do tema — sem uma cor sólida
   nas opções, o texto claro (--body-fg) fica ilegível sobre o fundo branco
   padrão do navegador até passar o mouse (hover aplica um destaque que por
   acaso contrasta). Define fundo/texto sólidos para as opções. */
select option {
  background-color: var(--darkened-bg);
  color: var(--body-fg);
}
fieldset.module { border: 1px solid var(--hairline-color); }

/* ---------- Botão de mostrar/ocultar senha (injetado por password-toggle.js) ---------- */
.gs-password-wrap { position: relative; display: block; }
.gs-password-input { padding-right: 40px !important; }
.gs-password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 4px 6px;
  opacity: 0.65;
}
.gs-password-toggle:hover { opacity: 1; }
/* No login o formulário fica centralizado e estreito — evita a senha
   escondida atrás do botão de mostrar/ocultar. */
.login .form-row .gs-password-wrap { max-width: 100%; }

/* ---------- Mensagens ---------- */
ul.messagelist li {
  border-radius: 8px;
  border: 1px solid var(--hairline-color);
}

/* ---------- Login ---------- */
.login #container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login #content-related, .login #footer { display: none; }
.login #header { border-bottom: none; background: transparent; box-shadow: none; justify-content: center; }
.login #content {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hairline-color);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 34px !important;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}
.login .submit-row input {
  width: 100%;
  padding: 10px;
}

/* ---------- Rodapé ---------- */
#footer { color: var(--body-quiet-color); }

/* ---------- Modal de "adicionar relacionado" (em vez de pop-up) ---------- */
.gs-popup-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 7, 16, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.gs-popup-modal-overlay.is-open { display: flex; }

.gs-popup-modal {
  position: relative;
  width: min(880px, 100%);
  height: min(720px, 90vh);
  background: #0a1120;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
}

.gs-popup-modal-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #0a1120;
}

.gs-popup-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 1;
  width: 32px;
  height: 32px;
  line-height: 1;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--body-fg);
  font-size: 1.3rem;
  cursor: pointer;
}

/* ---------- Facilitador de eventos da partida (Jogos > Partidas > Lançar eventos) ---------- */
.gs-evt-status-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
}
.gs-evt-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  max-width: 920px;
}
.gs-evt-form { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.gs-evt-form-inline { padding: 12px 16px; }
.gs-evt-field { display: flex; flex-direction: column; gap: 3px; }
.gs-evt-field label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--body-quiet-color);
}
.gs-evt-field select, .gs-evt-field input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline-color);
  color: var(--body-fg);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.85rem;
}
.gs-evt-field-sm { max-width: 120px; }
.gs-evt-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.gs-evt-table thead th {
  text-align: left;
  padding: 6px 10px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--body-quiet-color);
}
.gs-evt-table tbody td { padding: 7px 10px; border-top: 1px solid var(--hairline-color); vertical-align: middle; }
.gs-evt-table .badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.7rem;
}
.gs-evt-edit-row { display: table-row; }
.gs-evt-edit-form {
  display: none;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px dashed var(--hairline-color);
}
.gs-evt-edit-form.gs-evt-edit-open { display: block; }
.gs-evt-edit-form .gs-evt-form-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: end;
  gap: 10px;
}
.gs-popup-modal-close:hover { background: rgba(255, 80, 80, 0.25); color: #fff; }