/*
 * Override visual do cliente CH2V (Centro de Hidrogênio Verde).
 * Carregado depois do components.css/app.css; sobrescreve as cores accent.
 *
 * Paleta institucional:
 *   #64A546 (verde claro - principal)
 *   #0B1A06 (verde escuro - usado em texto/contraste pontual)
 */

/*
 * Light color (tema "light-color").
 * IMPORTANTE: usamos [data-theme="light-color"] em vez de :root pra ter mesma
 * especificidade dos outros temas em themes.css. Se usar :root aqui, o "light-gray"
 * (e demais) não conseguem sobrescrever, porque :root e [data-theme="..."]
 * têm especificidade idêntica e o último carregado vence — e o theme-client.css
 * carrega DEPOIS do themes.css.
 */
[data-theme="light-color"] {
  --accent: #64A546;
  --accent-hover: #558E3B;
  --accent-fg: #ffffff;
  --ring: rgba(100, 165, 70, 0.35);

  /* Success em light-color: já é verde, mas alinha com a paleta do CH2V */
  --success: #4F8636;
  --success-bg: rgba(100, 165, 70, 0.12);
}

/* Dark color (override pra contraste em fundo escuro) */
[data-theme="dark-color"] {
  --accent: #7BB85A;
  --accent-hover: #64A546;
  --accent-fg: #ffffff;
  --ring: rgba(123, 184, 90, 0.4);

  --success: #7BB85A;
  --success-bg: rgba(123, 184, 90, 0.15);
}

/*
 * Temas "gray" (light-gray / dark-gray) NÃO são alterados aqui —
 * mantêm o cinza padrão pra acessibilidade/escala de cinza.
 */

/* ============================================================ */
/* Logos custom do CH2V                                          */
/* ============================================================ */

/*
 * Variantes claro/escuro de uma mesma logo.
 * - Se SÓ existe versão clara, o partial renderiza UMA <img class="logo-img"> (sempre visível).
 * - Se existem AMBAS, ele renderiza .logo-light + .logo-dark e o CSS abaixo alterna.
 *
 * Especificidade: [data-theme=...] .logo-* = (0,2,0) → vence as regras base (0,1,0).
 */
.logo-img { display: block; max-width: 100%; height: auto; object-fit: contain; }
.logo-dark { display: none; }
[data-theme="dark-color"] .logo-light,
[data-theme="dark-gray"]  .logo-light { display: none; }
[data-theme="dark-color"] .logo-dark,
[data-theme="dark-gray"]  .logo-dark { display: block; }

/* Tamanho por contexto */
.app-logo .logo-img             { height: 32px; width: auto; max-width: 160px; }
.auth-logo .logo-img            { max-width: 220px; max-height: 120px; width: auto; height: auto; margin: 0 auto; }
.admin-sidebar-logo .logo-img   { max-width: 100%; max-height: 80px; width: auto; height: auto; }

@media (max-width: 640px) {
  .app-logo .logo-img { height: 26px; max-width: 120px; }
}

/* Logo grande no card de auth (login, cadastro, recuperar senha, etc) */
.auth-logo {
  text-align: center;
  margin-bottom: var(--space-5);
}
.auth-logo img {
  max-width: 220px;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ============================================================ */
/* Quiz options (cards selecionáveis pras respostas)            */
/* ============================================================ */
.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
  position: relative;
}
.quiz-option:hover {
  border-color: var(--border-strong);
  background: var(--bg-muted);
}
/* :has() casa quando o input dentro do label está checked. Suporte: Chrome 105+, Safari 15.4+, Firefox 121+. */
.quiz-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}
.quiz-option:has(input:checked) .quiz-option-text {
  font-weight: var(--weight-medium);
  color: var(--fg);
}
/* Radio/checkbox dentro do card — customizados pra controle total do visual
 * (o accent-color nativo do browser às vezes desenha um dot preto em cores claras). */
.quiz-option .radio,
.quiz-option .checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--bg);
  border: 2px solid var(--border-strong);
  position: relative;
  transition: border-color var(--transition), background var(--transition);
}
.quiz-option .radio { border-radius: 50%; }
.quiz-option .checkbox { border-radius: 4px; }
.quiz-option:hover .radio,
.quiz-option:hover .checkbox { border-color: var(--accent); }

/* Estado selecionado: preenchido com accent, marcador branco dentro */
.quiz-option .radio:checked,
.quiz-option .checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
}
/* Radio selecionado: dot branco no centro (via radial-gradient — funciona em todos os browsers) */
.quiz-option .radio:checked {
  background-image: radial-gradient(circle, #fff 0 30%, transparent 32%);
}
/* Checkbox selecionado: ✓ branco via SVG inline */
.quiz-option .checkbox:checked {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 7'/></svg>");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
}
/* Focus visible (acessibilidade) */
.quiz-option .radio:focus-visible,
.quiz-option .checkbox:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.quiz-option-text {
  flex: 1;
  color: var(--fg);
  line-height: var(--leading-normal);
}

/* Logo no topo da sidebar admin */
.admin-sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.admin-sidebar-logo img {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ============================================================ */
/* GUARDA-CHUVA: previne scroll horizontal global                */
/* ============================================================ */
html { overflow-x: clip; }

/* ============================================================ */
/* Cadastro wizard (2 steps): card + indicador + paineis        */
/* ============================================================ */
/* O layout envolve o conteúdo de auth num .auth-card (420px). Quando o
   conteúdo é wide (cadastro com wizard), expande o wrapper pai via :has().
   Suporte: Chrome 105+, Safari 15.4+, Firefox 121+. */
.auth-card:has(.auth-card-wide) { max-width: 720px !important; }
.auth-card-wide { max-width: 720px !important; width: 100%; }
.register-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}
.register-form .register-full { grid-column: 1 / -1; }
.register-form .field-helper { font-size: var(--text-xs); }

.auth-card-wide .card-body { padding: var(--space-5) var(--space-6); gap: var(--space-3); }
.auth-card-wide h2 { font-size: var(--text-2xl); margin-bottom: 0; }
.auth-card-wide .subtitle { font-size: var(--text-sm); margin-top: 0; color: var(--fg-muted); }

/* Step indicator (●—●) */
.wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.wizard-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  transition: color var(--transition);
}
.wizard-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-muted);
  border: 2px solid var(--border);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.wizard-step-line {
  width: 60px;
  height: 2px;
  background: var(--border);
  transition: background var(--transition);
}
/* Step ATIVO: número preenchido com accent, label em destaque */
.wizard-steps[data-current="1"] .wizard-step[data-step="1"],
.wizard-steps[data-current="2"] .wizard-step[data-step="2"] {
  color: var(--fg);
}
.wizard-steps[data-current="1"] .wizard-step[data-step="1"] .wizard-step-num,
.wizard-steps[data-current="2"] .wizard-step[data-step="2"] .wizard-step-num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
/* Step JÁ CONCLUÍDO (step 1 quando current=2): num verde sem fundo */
.wizard-steps[data-current="2"] .wizard-step[data-step="1"] .wizard-step-num {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
}
.wizard-steps[data-current="2"] .wizard-step-line {
  background: var(--accent);
}

/* Paineis: mostra/esconde conforme data-step do form */
.wizard-panel { display: none; }
form[data-step="1"] .wizard-panel[data-panel="1"],
form[data-step="2"] .wizard-panel[data-panel="2"] { display: block; }

/* Mobile: vira coluna única, indicator menor */
@media (max-width: 640px) {
  .register-form { grid-template-columns: 1fr; gap: var(--space-3); }
  .auth-card-wide .card-body { padding: var(--space-4); }
  .wizard-step-line { width: 36px; }
  .wizard-step-label { display: none; }  /* só os números no mobile pra economizar espaço */
}

/* Quebra palavras longas pra não empurrar largura */
.rich-content, .card-body, .quiz-option-text {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Card header do quiz: SEMPRE permite wrap (caption desce se aperta) */
#quiz-form .card-header {
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  justify-content: flex-start !important;
}
#quiz-form .card-header > * { min-width: 0; }
#quiz-form .card-header .caption { width: 100%; }

/* Lesson header: SEMPRE permite wrap (título + botão "Concluir") */
.lesson-header { flex-wrap: wrap; gap: var(--space-2); }
.lesson-header h1 { word-break: break-word; line-height: 1.2; }

/* Course main: nunca extrapola */
.course-main { max-width: 100%; min-width: 0; overflow-x: hidden; }

/* ============================================================ */
/* Mobile: respiro extra pro quiz no estreito                    */
/* ============================================================ */
@media (max-width: 640px) {
  /* Header da app: padding lateral menor pra "Sair" e logo caberem */
  .app-header { padding: var(--space-3) var(--space-3); gap: var(--space-2); }

  /* Quiz: cards com menos padding interno */
  #quiz-form .card-header,
  #quiz-form .card-footer { padding: var(--space-3) var(--space-4); }
  #quiz-form .card-body   { padding: var(--space-4); }

  /* Quiz options: padding e fonte menores pra ganhar espaço */
  .quiz-option { padding: var(--space-2) var(--space-3); gap: var(--space-2); min-width: 0; }
  .quiz-option-text { font-size: var(--text-sm); line-height: 1.4; min-width: 0; }
  .quiz-option .radio,
  .quiz-option .checkbox { width: 18px; height: 18px; }

  /* Card footer do quiz: botões não vazam em telas estreitas */
  #quiz-form .card-footer { flex-wrap: wrap; }
  #quiz-form .card-footer .btn { flex: 1 1 auto; min-width: 0; }
}