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

@font-face {
  font-family: 'Better VCR';
  /* AJUSTE ESTE CAMINHO para onde a fonte ficar nos estáticos do Codabench */
  src: url("../fonts/Better_VCR_9_0_1.96603824247c.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens (CSS puro, sem Tailwind) ───────────────────────────────── */
:root {
  --font-pixel: 'Better VCR', 'Courier New', monospace;
  --font-sans: 'Inter', sans-serif;

  --cor-primaria: #183FFF;   /* azul: botões, foco, links, ativo */
  --cor-tinta: #3b3e59;      /* bordas retas, cards, inputs */
  --cor-fundo: #EEEEEE;      /* fundo da página */
  --cor-superficie: #ffffff; /* cards, dropdowns */
  --cor-texto: #1a1a1a;      /* texto principal */
  --cor-texto-fraco: #666666;/* texto secundário */

  --cor-sucesso: #38a169;  --cor-sucesso-bg: #f0fff4;  --cor-sucesso-txt: #276749;
  --cor-erro: #e53e3e;     --cor-erro-bg: #fff5f5;     --cor-erro-txt: #9b2c2c;
  --cor-aviso: #d69e2e;    --cor-aviso-bg: #fffff0;    --cor-aviso-txt: #744210;
  --cor-info: #4299e1;     --cor-info-bg: #ebf8ff;     --cor-info-txt: #2b6cb0;
}

/* ── Base / fundo com grid pixel ───────────────────────────────────── */
body {
  font-family: var(--font-sans) !important;
  color: var(--cor-texto);
  background-color: var(--cor-fundo) !important;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-font-smoothing: antialiased;
}

html:has(.oiaa-home-wrap) {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

/* Conteúdo/leitura usa Inter; UI (botão/menu/label) usa pixel — abaixo */
.ui.header,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans) !important;
  color: var(--cor-texto);
  letter-spacing: -0.02em;
}

a {
  color: var(--cor-primaria);
}
a:hover {
  color: var(--cor-primaria);
  text-decoration: underline;
}

/* ── Botões (ui button) ────────────────────────────────────────────── */
.ui.button:not(.style_button) {
  font-family: var(--font-pixel) !important;
  font-weight: normal !important;
  letter-spacing: 0.02em;
  border-radius: 0 !important;
  border: 2px solid var(--cor-tinta) !important;
  background: transparent;
  color: var(--cor-tinta);
  box-shadow: none !important;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s, color 0.15s;
}

.ui.button:hover:not(:disabled) {
  transform: scale(1.04);
  filter: brightness(1.12);
}

.ui.button:active {
  transform: translateY(1px) scale(1);
}

/* Primário / positivo → azul */
.ui.primary.button,
.ui.primary.buttons .button,
.ui.positive.button {
  background: var(--cor-primaria) !important;
  color: #fff !important;
  border-color: var(--cor-primaria) !important;
}

/* Secundário / basic → contorno */
.ui.secondary.button,
.ui.basic.button {
  background: transparent !important;
  color: var(--cor-tinta) !important;
  border-color: var(--cor-tinta) !important;
}

/* Negativo / vermelho */
.ui.negative.button,
.ui.red.button {
  background: var(--cor-erro) !important;
  color: #fff !important;
  border-color: var(--cor-erro) !important;
}

.ui.button:disabled,
.ui.disabled.button {
  opacity: 0.5 !important;
}

/* ── Menu / navegação (ui menu) ──────────────────────────────*/
.ui.menu:not(.secondary):not(.inverted) {
  font-family: var(--font-pixel) !important;
  background: var(--cor-fundo) !important;
  border: none;
  border-bottom: 2px solid var(--cor-tinta) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ui.menu:not(.inverted) .item {
  color: var(--cor-texto-fraco) !important;
  font-family: var(--font-pixel) !important;
}

.ui.menu:not(.inverted) .item:hover,
.ui.menu:not(.inverted) a.item:hover {
  color: var(--cor-texto) !important;
  background: transparent !important;
}

.ui.menu:not(.inverted) .active.item {
  color: var(--cor-primaria) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--cor-primaria) !important;
  font-weight: normal !important;
}

/* ── Cards / segments (flat com borda reta) ────────────────── */
.ui.segment:not(.masthead),
.ui.card,
.ui.cards > .card {
  background: var(--cor-superficie) !important;
  border: 2px solid var(--cor-tinta) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ui.card > .content > .header,
.ui.cards > .card > .content > .header {
  font-family: var(--font-sans) !important;
  color: var(--cor-texto) !important;
}

/* ── Inputs / form ─────────────────────────────────────────────────── */
.ui.input > input,
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="number"],
.ui.form input[type="search"],
.ui.form input[type="url"],
.ui.form select,
.ui.form textarea,
.ui.selection.dropdown {
  font-family: var(--font-pixel) !important;
  color: var(--cor-texto) !important;
  background: #f7f7f7 !important;
  border: 2px solid var(--cor-tinta) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ui.input > input::placeholder,
.ui.form textarea::placeholder {
  color: #999 !important;
}

.ui.input > input:focus,
.ui.form input:focus,
.ui.form select:focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus,
.ui.selection.active.dropdown {
  border-color: var(--cor-primaria) !important;
  box-shadow: 0 0 0 1px var(--cor-primaria) !important;
}

.ui.form .field > label {
  font-family: var(--font-pixel) !important;
  font-size: 12px !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #444 !important;
}

/* Erro de campo */
.ui.form .field.error input,
.ui.form .field.error select,
.ui.form .field.error textarea {
  border-color: var(--cor-erro) !important;
  box-shadow: 0 0 0 1px var(--cor-erro) !important;
  background: #f7f7f7 !important;
}

/* Checkbox */
.ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before {
  background: var(--cor-primaria) !important;
  border-color: var(--cor-primaria) !important;
  border-radius: 0 !important;
}
.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after {
  color: #fff !important;
}

/* ── Labels → badges ───────────────────────────────────────────────── */
.ui.label {
  font-family: var(--font-pixel) !important;
  font-weight: normal !important;
  border-radius: 0 !important;
  border: 1px solid var(--cor-tinta);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: transparent;
  color: var(--cor-tinta);
}

.ui.green.label,   .ui.positive.label { color: var(--cor-sucesso-txt) !important; background: var(--cor-sucesso-bg) !important; border-color: var(--cor-sucesso) !important; }
.ui.red.label,     .ui.negative.label { color: var(--cor-erro-txt) !important;    background: var(--cor-erro-bg) !important;    border-color: var(--cor-erro) !important; }
.ui.yellow.label,  .ui.orange.label   { color: var(--cor-aviso-txt) !important;   background: var(--cor-aviso-bg) !important;   border-color: var(--cor-aviso) !important; }
.ui.blue.label,    .ui.teal.label     { color: var(--cor-info-txt) !important;    background: var(--cor-info-bg) !important;    border-color: var(--cor-info) !important; }

/* ── Messages → alertas ────────────────────────────────────────────── */
.ui.message {
  font-family: var(--font-sans) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 2px solid var(--cor-tinta);
  background: #fff;
  color: var(--cor-texto);
}

.ui.positive.message,
.ui.success.message {
  background: var(--cor-sucesso-bg) !important;
  color: var(--cor-sucesso-txt) !important;
  border-color: var(--cor-sucesso) !important;
}

.ui.negative.message,
.ui.error.message {
  background: var(--cor-erro-bg) !important;
  color: var(--cor-erro-txt) !important;
  border-color: var(--cor-erro) !important;
}

.ui.warning.message {
  background: var(--cor-aviso-bg) !important;
  color: var(--cor-aviso-txt) !important;
  border-color: var(--cor-aviso) !important;
}

.ui.info.message {
  background: var(--cor-info-bg) !important;
  color: var(--cor-info-txt) !important;
  border-color: var(--cor-info) !important;
}

/* ── Tabelas ───────────────────────────────────────────────────────── */
.ui.table {
  font-family: var(--font-sans) !important;
  border: 2px solid var(--cor-tinta) !important;
  border-radius: 0 !important;
}

.ui.table thead th {
  font-family: var(--font-pixel) !important;
  font-weight: normal !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f7f7f7 !important;
  color: var(--cor-texto) !important;
  border-bottom: 2px solid var(--cor-tinta) !important;
}

/* ── Dropdown menu (flutuante) ─────────────────────────────────────── */
.ui.dropdown .menu {
  border-radius: 0 !important;
  border: 2px solid var(--cor-tinta) !important;
  box-shadow: none !important;
}

.ui.dropdown .menu > .item {
  font-family: var(--font-pixel) !important;
}

/* ── Segment/aba/paginação ativos usam o azul ──────────────────────── */
.ui.pagination.menu .active.item,
.ui.tabular.menu .active.item {
  color: var(--cor-primaria) !important;
  border-color: var(--cor-primaria) !important;
}

/* ── Paginação: botões Anterior/Next sem borda (stroke) ───────────────*/
.ui.pagination.menu .ui.button {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ui.pagination.menu .ui.button:hover:not(:disabled) {
  color: var(--cor-primaria) !important;
}

/* Titulos de secao (h2) */
.oiaa-section-title {
  font-family: var(--font-pixel) !important;
  letter-spacing: 0.01em;
}

/* Titulos dos cards (h3) e numeros das etapas */
.oiaa-card h3,
.oiaa-step-number {
  font-family: var(--font-pixel) !important;
}

/* Numeros das estatisticas */
.oiaa-stat-value {
  font-family: var(--font-pixel) !important;
}

/* Datas do cronograma */
.oiaa-timeline-date {
  font-family: var(--font-pixel) !important;
}

/* Botao "Acessar competicao" */
.oiaa-hero-btn {
  font-family: var(--font-pixel) !important;
  letter-spacing: 0.02em;
}

/* Texto do menu do topo (Competicoes / Entrar / Cadastrar-se).*/
#header .ui.menu .item,
#header .ui.button.style_button {
  font-family: var(--font-pixel) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Páginas de competição — ajustes de layout/consistência/legibilidade.
 * ════════════════════════════════════════════════════════════════════ */

.stat-buttons .ui.labeled.button,
.stat-buttons .ui.labeled.button > .button,
.stat-buttons .ui.labeled.button > .label {
  font-family: var(--font-sans) !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
}
.stat-buttons .ui.labeled.button {
  margin-bottom: 6px;
  min-height: 34px;
}
.stat-buttons .ui.labeled.button > .button {
  flex: 1 1 auto;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-buttons .ui.labeled.button > .label {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* ── Ícones de ajuda "?" (circular/mini) não devem virar quadrado ───── */
.ui.circular.label,
.ui.circular.labels .label {
  border-radius: 500rem !important;
}

/* ── Linha de ações do admin (Editar/Participantes/.../Migrar) ─────────*/
.admin-actions .ui.button {
  margin-bottom: 0.25em !important;
}

/* ── Alinhar o accent "teal" do Semantic ao azul da marca ──────────────*/

/* Acordeão de fases (Fases). O componente Riot define */
.ui.styled.accordion .ui.teal.phase-header.title,
.ui.styled.accordion .phase-header {
  background-color: #eef1ff !important;   /* fase recolhida: tint azul claro */
  color: var(--cor-tinta) !important;
  border-radius: 0 !important;
}
.ui.styled.accordion .ui.teal.phase-header.title.active,
.ui.styled.accordion .phase-header.active,
.ui.styled.accordion .phase-header.active:hover {
  background: var(--cor-primaria) !important;  /* fase aberta: azul sólido */
  color: #fff !important;
}
.ui.styled.accordion .phase-header:hover {
  background: #dfe4ff !important;
  color: var(--cor-tinta) !important;
}

/* Rótulos de detalhe/fase (FASE ATUAL, HORA ATUAL, Início/Término/Descrição) */
.detail-label,
.phase-label {
  color: var(--cor-primaria) !important;
}

/* Labels/botões/ícones teal genéricos */
.ui.basic.teal.label,
.ui.tiny.basic.teal.label {
  color: var(--cor-primaria) !important;
  border-color: var(--cor-primaria) !important;
}
.ui.teal.button:not(.basic) {
  background-color: var(--cor-primaria) !important;
  border-color: var(--cor-primaria) !important;
  color: #fff !important;
}
i.teal.icon,
.ui.teal.text,
.teal.text {
  color: var(--cor-primaria) !important;
}