/* =========================================================
   CYS Soccer — Design System (camada semantica)

   "Campo e Cal": o cromo (sidebar) veste o verde escuro do escudo e a area de
   trabalho fica clara e silenciosa. A separacao entre superficies e feita por
   FIO de 1px, nao por sombra grande; a sombra fica para o que de fato flutua.

   Poucas cores, muito espaco em branco, cantos curtos.
   Os primitivos (rampas, raio, sombra, motion) vivem em tokens.css.
   ========================================================= */

:root {
  /* Fonte e raios moram SO em tokens.css. Este bloco repetia --font-sans e tres
     raios com os mesmos valores — duas fontes da verdade, e a daqui vencia em
     silencio qualquer mudanca feita la. */

  --sidebar-width: 264px;
  --sidebar-width-collapsed: 84px;
  --header-height: 76px;

  /* ---------- Areas seguras (bloco G) ----------
     PRESERVADAS INTACTAS nesta leva. Custaram caro para funcionar e nada aqui
     as toca.

     Os `env(safe-area-inset-*)` so devolvem valor diferente de zero quando o
     documento declara `viewport-fit=cover` no meta viewport — sem isso o
     navegador ja entrega a viewport recortada e as insets valem 0. Havia dois
     usos de `env(safe-area-inset-bottom)` no CSS (o sheet e o convite da PWA)
     que por isso NUNCA fizeram efeito; o `viewport-fit=cover` foi adicionado
     nos 4 HTML junto daquele bloco.

     Centralizados em tokens porque `env()` nao pode aparecer dentro de uma
     media query, so em valor de propriedade: quem precisa reservar espaco tem
     de somar a inset numa conta de `calc()`, e repetir a chamada solta em cada
     lugar foi o que deixou os dois usos anteriores passarem sem ninguem notar.
     O 2o argumento (0px) e o fallback obrigatorio: em navegador sem suporte a
     propriedade inteira seria descartada e o `calc()` viraria invalido. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Altura da faixa de abas do celular, SEM a area segura. Quem precisa do
     espaco total usa `calc(var(--bottom-nav-height) + var(--safe-bottom))`. */
  --bottom-nav-height: 58px;

  --transition-fast: 150ms ease;
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   TEMA CLARO
   ========================================================= */
:root,
:root[data-theme='light'] {
  --bg-body: #F4F6F3;          /* cal: o fundo de trabalho, um tom abaixo do branco do cartao */
  --bg-surface: #ffffff;
  --bg-surface-hover: #EFF1ED;
  --bg-muted: #EFF1ED;
  --border-color: #E2E6E0;
  --border-strong: #CDD4CB;
  /* Borda de CAMPO de formulario (leva "layout premium"). A --border-color
     (#E2E6E0) da 1.26:1 no branco: separa bloco de layout, mas o campo some —
     reprova o 3:1 que a WCAG 1.4.11 pede para identificar um controle. Este
     token so vale para input/select/textarea; o layout continua no fio sutil. */
  --border-input: #86938B;     /* 3.20:1 no branco */
  --text-primary: #0A1F14;     /* tinta do escudo: verde tao escuro que le como preto */
  --text-secondary: #4A5851;
  --text-muted: #626F67;       /* 5.26:1 no branco, 4.84 no fundo — o #7C8A82 de antes dava 3.6 */

  --color-primary: #16693F;         /* 6.72:1 sobre branco — medido */
  --color-primary-hover: #0B4D2E;
  --color-primary-soft: #EFF5F1;
  --color-on-primary: #ffffff;      /* 6.72:1 sobre a primaria — medido */

  --color-success: #16a34a;  --color-success-soft: #ecfdf3;
  --color-danger: #dc2626;   --color-danger-soft: #fef2f2;
  --color-warning: #d97706;  --color-warning-soft: #fffbeb;
  --color-info: #0891b2;     --color-info-soft: #ecfeff;

  /* Tendencia como TEXTO (delta de indicador, leva "layout premium"). O
     --color-success (#16a34a) da 3.3:1 no branco e reprova como texto pequeno;
     estes sao os degraus escuros da mesma matiz, medidos no valida-cor. */
  --trend-up: #15803d;
  --trend-down: #b91c1c;
}

/* =========================================================
   TEMA ESCURO
   Nao e o claro invertido: o cromo continua MAIS ESCURO que a area de
   trabalho, mantendo a mesma hierarquia dos dois modos. E a primaria precisa
   CLAREAR — #16693F sobre fundo escuro daria 1.6:1 e sumiria.
   ========================================================= */
:root[data-theme='dark'] {
  --bg-body: #0F1311;
  --bg-surface: #171C19;
  --bg-surface-hover: #1E2521;
  --bg-muted: #1B211D;
  --border-color: #28302B;
  --border-strong: #3A443E;
  --border-input: #5E6B63;     /* 3.09:1 na superficie escura */
  --text-primary: #E9EFEA;
  --text-secondary: #A2B0A7;
  --text-muted: #808E85;      /* 5.04:1 na superficie escura — o #718077 dava 4.16 */

  --color-primary: #4FBF84;         /* 7.9:1 sobre #171C19 — medido */
  --color-primary-hover: #6FD69C;
  --color-primary-soft: rgba(79, 191, 132, 0.14);
  --color-on-primary: #04140B;      /* 8.21:1 sobre a primaria — medido */
  --trend-up: #6ee7a0;
  --trend-down: #fca5a5;

  /* Paleta categorica no escuro: as MESMAS tres matizes, degrau proprio para o
     fundo escuro — nao e o claro invertido. Ver tokens.css. */
  --serie-1: #3987e5;  --serie-1-rgb:  57, 135, 229;
  --serie-2: #d95926;  --serie-2-rgb: 217,  89,  38;
  --serie-3: #199e70;  --serie-3-rgb:  25, 158, 112;
  --serie-neutra: #93A098;  --serie-neutra-rgb: 147, 160, 152;

  /* Rampa ordinal invertida para o fundo escuro. REVALIDADA nesta leva:
     monotona, degraus dL 0.135 / 0.141 / 0.095, extremo 2.92:1 contra a
     superficie. O primeiro candidato (#0B4D2E) reprovou em 1.80:1. */
  --ord-1: #17703F;  --ord-2: #2E9C63;  --ord-3: #5FC98F;  --ord-4: #9EE0BC;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-body: #0F1311;
    --bg-surface: #171C19;
    --bg-surface-hover: #1E2521;
    --bg-muted: #1B211D;
    --border-color: #28302B;
    --border-strong: #3A443E;
    --border-input: #5E6B63;
    --text-primary: #E9EFEA;
    --text-secondary: #A2B0A7;
    --text-muted: #808E85;      /* 5.04:1 na superficie escura — o #718077 dava 4.16 */

    --color-primary: #4FBF84;
    --color-primary-hover: #6FD69C;
    --color-primary-soft: rgba(79, 191, 132, 0.14);
    --color-on-primary: #04140B;
    --trend-up: #6ee7a0;
    --trend-down: #fca5a5;

    --serie-1: #3987e5;  --serie-1-rgb:  57, 135, 229;
    --serie-2: #d95926;  --serie-2-rgb: 217,  89,  38;
    --serie-3: #199e70;  --serie-3-rgb:  25, 158, 112;
    --serie-neutra: #93A098;  --serie-neutra-rgb: 147, 160, 152;

    --ord-1: #17703F;  --ord-2: #2E9C63;  --ord-3: #5FC98F;  --ord-4: #9EE0BC;
  }
}

/* =========================================================
   SIDEBAR — leva "layout premium" (2026-10-01).

   O cromo escuro com a "linha de cal" saiu a pedido do dono: a sidebar passou
   a ser CLARA, da cor do cartao, e o item ativo e uma PILULA da primaria-soft
   com texto e icone na primaria — como na referencia aprovada. Por isso os
   tokens agora SEGUEM O TEMA (apontam para os semanticos) em vez de ter valor
   fixo: no escuro a sidebar e a superficie escura e a pilula e a tinta
   translucida da primaria clara.

   Medido (valida-cor): ativo #16693F sobre #EFF5F1 = 6.08:1; texto
   secundario 7.6:1 no branco. A pagina publica congela os valores antigos em
   publica.css, porque o topo dela reaproveita o cromo escuro.
   ========================================================= */
:root {
  --sidebar-bg: var(--bg-surface);
  --sidebar-text: var(--text-secondary);
  --sidebar-text-active: var(--color-primary);
  --sidebar-label: var(--text-muted);
  --sidebar-hover-bg: var(--bg-surface-hover);
  --sidebar-active-bg: var(--color-primary-soft);
  --sidebar-border: var(--border-color);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-body);
  color: var(--text-primary);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition-base), color var(--transition-base);
}

/* Hierarquia por PESO, TAMANHO e TRACKING — nao por uma segunda familia.
   Era aqui que a Space Grotesk entrava; ver a nota em tokens.css. */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

/* Numeros com personalidade (dados esportivos): tabular + tracking negativo.
   O `tnum` e o que faz as casas nao dancarem quando o valor muda — e num
   sistema de mensalidade e frequencia o valor muda o tempo todo. */
.num-display {
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Rotulo de sumula: o micro-texto em caixa alta que nomeia um numero. */
.label-cf {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  color: var(--text-secondary);
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

/* Foco visivel em tudo que recebe teclado. Piso de 3:1 contra o fundo do
   corpo — medido em 6.28:1. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Barras de rolagem finas e discretas em todo o sistema (leva "layout
   premium"). `scrollbar-width/color` e o padrao (Chrome 121+, Firefox,
   Safari 18.2+); os pseudo-elementos -webkit ficam para navegador mais antigo. */
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 35%, transparent) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 35%, transparent); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Utility surfaces ---------- */

.surface-card {
  background: var(--bg-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.text-muted-cf { color: var(--text-muted) !important; }
.text-secondary-cf { color: var(--text-secondary) !important; }

/* ---------- Buttons ---------- */

.btn {
  border-radius: var(--radius-control);
  font-weight: 500;
  padding: 0.55rem 1.1rem;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

/* `color` explicito: o Bootstrap assume texto branco no botao primario, o que
   passou a estar ERRADO no tema escuro — la a primaria e clara (#4FBF84) e o
   texto precisa ser escuro. Sem esta linha o botao primario do modo escuro
   sairia branco-sobre-verde-claro. */
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.btn-light-cf {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.btn-light-cf:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* ---------- Forms ---------- */

/* `.form-control` / `.form-select` sao estilizados em components/forms.css, no
   mesmo seletor de `.input-cf` — as duas camadas viraram uma so no Bloco C.
   O bloco que existia aqui saiu para nao competir com aquele. */
.form-label {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

/* ---------- Badges (status) ----------
   Deixaram de ser PILULA e viraram CHIP retangular. O motivo nao e moda: a
   marca agora tambem e verde, e a garantia de que estado e marca nunca se
   confundam esta no TRATAMENTO. A marca so aparece em massa solida (botao,
   sidebar, avatar); o estado so aparece assim — fundo tingido, canto curto,
   ponto e a palavra escrita.

   O ponto entra so quando o badge NAO tem icone proprio: varios badges do
   sistema ja trazem um <i> do Font Awesome, e um ponto ao lado do icone seria
   ruido. Em navegador sem `:has()` ninguem ganha ponto e o chip continua
   correto — a palavra sempre esteve la, que e o canal que importa. */
.badge-cf {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  /* Leva "layout premium": o status volta a ser PILULA, como na referencia.
     A garantia de que estado e marca nao se confundem continua no tratamento
     — fundo tingido, ponto e a palavra escrita —, nao no canto. */
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  /* Um badge nunca quebra: ele e um rotulo, nao um paragrafo. Sem isto o
     "Semanal · Terca-feira" de Alugueis virava 3 linhas dentro da pilula e
     sozinho levava a linha da tabela de 77px para 121px (Bloco B). */
  white-space: nowrap;
}
.badge-cf:not(:has(i, svg, img))::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge-success { background: var(--color-success-soft); color: #14532d; }
.badge-danger { background: var(--color-danger-soft); color: #7f1d1d; }
.badge-warning { background: var(--color-warning-soft); color: #713f12; }
.badge-info { background: var(--color-info-soft); color: #164e63; }
.badge-neutral { background: var(--bg-muted); color: var(--text-secondary); }

/* Variante CONTORNADA: fio na cor do texto, sem fundo — para estado "em
   andamento" ao lado de uma pilula cheia (a referencia poe "Running"
   contornado ao lado da prioridade cheia). Vence o fundo das variantes de
   cor por vir depois com a mesma especificidade + uma classe. */
/* :root:root so para ganhar das regras do tema escuro abaixo (que pintam o
   fundo translucido com especificidade 0-3-0). */
:root:root .badge-cf.badge-outline { background: transparent; border-color: currentColor; }
.badge-cf.badge-outline::before { display: none; }

/* No escuro o fundo tingido claro (#ecfdf3 e cia) viraria um bloco brilhante
   no meio da tabela. Tinta translucida da propria cor, e o texto assume a cor
   viva — mesmo padrao que a paleta categorica ja usa. */
:root[data-theme='dark'] .badge-success,
:root[data-theme='dark'] .badge-danger,
:root[data-theme='dark'] .badge-warning,
:root[data-theme='dark'] .badge-info { background: rgba(255, 255, 255, 0.07); }
:root[data-theme='dark'] .badge-success { color: #6ee7a0; }
:root[data-theme='dark'] .badge-danger { color: #fca5a5; }
:root[data-theme='dark'] .badge-warning { color: #fcd68a; }
:root[data-theme='dark'] .badge-info { color: #7dd3e8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .badge-success,
  :root:not([data-theme='light']) .badge-danger,
  :root:not([data-theme='light']) .badge-warning,
  :root:not([data-theme='light']) .badge-info { background: rgba(255, 255, 255, 0.07); }
  :root:not([data-theme='light']) .badge-success { color: #6ee7a0; }
  :root:not([data-theme='light']) .badge-danger { color: #fca5a5; }
  :root:not([data-theme='light']) .badge-warning { color: #fcd68a; }
  :root:not([data-theme='light']) .badge-info { color: #7dd3e8; }
}

/* ---------- Skeleton loading ----------
   REMOVIDO no bloco E: `.skeleton` daqui e `.sk-cf` (components/feedback.css)
   eram a MESMA coisa escrita duas vezes — mesmo gradiente, mesmo 400%, mesma
   duracao de 1.4s — com dois nomes e dois @keyframes. Ficou `.sk-cf`, que
   segue a convencao de sufixo do resto do sistema e mora no arquivo do
   componente. O esqueleto agora se declara num lugar so. */

/* ---------- Misc ---------- */

.divider-cf {
  height: 1px;
  background: var(--border-color);
  border: none;
  margin: 1.25rem 0;
}

.avatar-cf {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--text-secondary);
}

.fade-in-cf {
  animation: fadeInCf var(--transition-base);
}
@keyframes fadeInCf {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}