/*
 * Atlas ClubOS — tema do Campus (tokens do portal canónico).
 * Fonte: atlashub-digital/atlashub-club · src/styles/tokens.css (v1.0)
 * Opt-in por build (NEXT_PUBLIC_ATLAS_CLUBOS_BRAND). Não altera o núcleo:
 * só variáveis e apresentação. Licença e atribuição LearnHouse/AGPL preservadas.
 */
:root {
  --background: 220 64% 5%;
  --foreground: 210 20% 98%;
  --card: 215 48% 15%;
  --card-foreground: 210 20% 98%;
  --popover: 213 43% 19%;
  --popover-foreground: 210 20% 98%;
  --primary: 211 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 213 43% 19%;
  --secondary-foreground: 213 27% 84%;
  --muted: 214 39% 20%;
  --muted-foreground: 214 25% 78%;
  --accent: 214 46% 22%;
  --accent-foreground: 187 100% 50%;
  --border: 212 33% 36%;
  --input: 212 33% 36%;
  --ring: 217 96% 53%;
  --radius: 0.75rem;

  --ca-bg: #050b17;         --ca-bg-deep: #02060f;
  --ca-surface: #172e4b;    --ca-surface-2: #203e5e;
  --ca-border: #406182;     --ca-electric: #007bff;
  --ca-electric-ui: #0066ee;--ca-cyan: #00d4ff;
  --ca-gold: #ffc857;       --ca-violet: #8b5cf6;
  --ca-text: #f9fafb;       --ca-text-2: #cbd5e1;  --ca-text-3: #94a3b8;
  --ca-grad-atlas: linear-gradient(115deg, #0b3bff 0%, #007bff 45%, #00d4ff 100%);
  --ca-shadow: 0 18px 50px rgba(0,0,0,.35);
  --ca-glow-blue: 0 0 26px rgba(0,123,255,.35);
}

html, body { background-color: var(--ca-bg) !important; color: var(--ca-text); }
body {
  /* The Club portal uses navy as a canvas; real light/blue pools create depth. */
  background-image:
    radial-gradient(ellipse 52% 42% at 88% 2%, rgba(0,123,255,.19), transparent 75%),
    radial-gradient(ellipse 60% 38% at 9% 38%, rgba(0,212,255,.09), transparent 78%),
    linear-gradient(180deg, #071329 0%, #050b17 78%);
  background-attachment: fixed;
  font-family: Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Cabeçalho e navegação ---------- */
header, nav[role="navigation"] { border-color: var(--ca-border) !important; }
header {
  background: color-mix(in srgb, #112540 92%, transparent) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ca-border) !important;
}
nav a, header a { color: var(--ca-text-2); transition: color .18s ease; }
nav a:hover, header a:hover { color: var(--ca-cyan); }

/* ---------- Botões ---------- */
button[type="submit"], a[role="button"], .btn-primary {
  border-radius: 999px !important;
}
button[type="submit"] {
  background-color: var(--ca-electric-ui) !important;
  color: #fff !important;
  box-shadow: var(--ca-glow-blue);
  transition: filter .18s ease, transform .18s ease;
}
button[type="submit"]:hover { filter: brightness(1.12); }

/* ---------- Cartões e superfícies ---------- */
/* Atlas brand cards need a distinct elevation, not an all-black overlay. */
[class*="rounded"][class*="bg-white"], article, .card {
  background: linear-gradient(152deg, #1a3657 0%, #142840 100%) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.23), 0 1px 0 rgba(135,199,255,.09) inset;
}
[class*="bg-white"] { background-color: var(--ca-surface) !important; }
.group[class*="bg-white"]:hover { border-color: #4c9ad5 !important; box-shadow: 0 16px 42px rgba(0,123,255,.16); }


/* ---------- Formulários ---------- */
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  background-color: var(--ca-surface-2) !important;
  border: 1px solid var(--ca-border) !important;
  color: var(--ca-text) !important;
  border-radius: 12px !important;
}
input::placeholder, textarea::placeholder { color: var(--ca-text-3) !important; }
input:focus, textarea:focus, select:focus {
  border-color: var(--ca-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,212,255,.18) !important;
}
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ca-cyan); outline-offset: 2px;
}

/* ---------- Tabelas e separadores ---------- */
table { border-color: var(--ca-border) !important; }
th { color: var(--ca-text-2) !important; }
hr, [role="separator"] { border-color: var(--ca-border) !important; }

/* ---------- Estados e destaque ---------- */
a { color: var(--ca-cyan); text-underline-offset: 2px; }
/* Titles and primary labels retain AA contrast; low-emphasis copy is separate. */
[class*="text-black"], [class*="text-gray-9"], [class*="text-slate-9"] { color: #f6faff !important; }
[class*="text-black/4"], [class*="text-black/5"], [class*="text-black/6"], [class*="text-gray-5"], [class*="text-gray-6"] { color: #bdcfe4 !important; }

/* ---------- Rodapé legal (atribuição preservada) ---------- */
footer { border-top: 1px solid var(--ca-border) !important; }
footer, footer a { color: var(--ca-text-3) !important; }

/* ---------- Barra de progresso ---------- */
[role="progressbar"] > *, progress::-webkit-progress-value {
  background: var(--ca-grad-atlas) !important;
}

/* ---------- Atlas auth is purposefully luminous, not dark-on-dark ---------- */
/* The native auth form uses dark-text utility classes originally made for a
   white background. Keep it a bright, elevated workspace next to the navy
   Atlas hero; do not darken every `bg-white` inside this subtree. */
.atlas-auth-shell {
  background: linear-gradient(118deg, #f3f8ff 0%, #e7f1fc 51%, #0c203b 51.1%, #050b17 100%) !important;
}
.atlas-auth-form {
  background: #f3f8ff !important;
  color: #162d49 !important;
}
.atlas-auth-form :is(h1,h2,h3,h4),
.atlas-auth-form [class*="text-black"],
.atlas-auth-form [class*="text-gray-9"],
.atlas-auth-form [class*="text-slate-9"] {
  color: #122943 !important;
}
.atlas-auth-form [class*="text-black/"],
.atlas-auth-form [class*="text-gray-5"],
.atlas-auth-form [class*="text-gray-6"] {
  color: #536986 !important;
}
.atlas-auth-form input:not([type="checkbox"]):not([type="radio"]),
.atlas-auth-form textarea,
.atlas-auth-form select {
  background: #fff !important;
  color: #132a45 !important;
  border: 1px solid #a7bdd7 !important;
  box-shadow: 0 2px 6px rgba(7,30,65,.05);
}
.atlas-auth-form input::placeholder,
.atlas-auth-form textarea::placeholder { color: #64748b !important; }
.atlas-auth-form button[type="submit"] {
  background: linear-gradient(110deg, #0066ee 0%, #007bff 75%, #009dff 100%) !important;
  box-shadow: 0 8px 25px rgba(0,102,238,.23);
}
.atlas-auth-shell [class*="bg-white"] { background-color: transparent; }
.atlas-auth-form [class*="bg-white"] { background-color: #fff !important; }
.atlas-auth-form [class*="rounded"][class*="bg-white"] {
  background: #fff !important;
  color: #122943 !important;
  border-color: #c6d7ea !important;
  box-shadow: 0 4px 18px rgba(16,42,79,.08);
}
.atlas-auth-form [class*="text-white"] { color: #122943; }
.atlas-auth-form button[type="submit"] [class*="text-white"] { color: #fff; }

@media (max-width: 1023px) {
  .atlas-auth-shell { background: #f3f8ff !important; }
}

/* =====================================================================
 * Superfícies 5–8 (ciclo UI-01, segundo incremento)
 * Só apresentação. Sem alterar layout, lógica, endpoints, permissões nem
 * qualquer comportamento do motor. Tudo ancorado nos tokens --ca-*.
 * ===================================================================== */

/* ---------- 5. Página de curso e VideoReader ---------- */
/* Cabeçalho do curso: separação real do fundo, sem sobreposição de conteúdo */
[class*="course"] > header,
main > div > header {
  border-bottom: 1px solid var(--ca-border) !important;
}
/* Barra de progresso e etapas */
[role="progressbar"] { background-color: var(--ca-surface-2) !important; border-radius: var(--ca-radius-pill); }
[role="progressbar"]::-webkit-progress-bar { background-color: var(--ca-surface-2); }
/* Lista de aulas: estado ativo legível, hover discreto */
[class*="activity"]:hover, [class*="lesson"]:hover { background-color: var(--ca-surface-2) !important; }
/* Invólucro do player (16:9) — moldura Atlas, sem mexer nas dimensões */
iframe[src*="youtube.com/embed"],
video { background-color: #000 !important; border-radius: var(--ca-radius) !important; }
/* Blocos de conteúdo da aula */
[class*="prose"], .tiptap { color: var(--ca-text-2) !important; }
[class*="prose"] h1, [class*="prose"] h2, [class*="prose"] h3 { color: var(--ca-text) !important; }
[class*="prose"] blockquote {
  border-left: 3px solid var(--ca-cyan) !important;
  background: var(--ca-surface-2); padding-left: var(--ca-space-3, 16px);
}
[class*="prose"] code, pre {
  background-color: var(--ca-bg-deep) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius-sm, 8px) !important;
  color: var(--ca-text) !important;
}

/* ---------- 6. Library e visualizador de PDF ---------- */
/* Painel do leitor: fundo profundo para o documento se destacar */
[class*="pdf"], [class*="reader"], [class*="viewer"] {
  background-color: var(--ca-bg-deep) !important;
  border-color: var(--ca-border) !important;
}
/* Grealha da biblioteca: cartões com hierarquia (o defeito apontado na auditoria) */
[class*="library"] article, [class*="library"] a[class*="rounded"] {
  background-color: var(--ca-surface) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius-lg, 18px) !important;
}
[class*="library"] article:hover { border-color: var(--ca-cyan) !important; }
/* Controlos do leitor (zoom, página, descarregar) */
[class*="pdf"] button, [class*="reader"] button {
  background-color: var(--ca-surface-2) !important;
  border: 1px solid var(--ca-border) !important; color: var(--ca-text) !important;
}

/* ---------- 7. Comunidades e Playgrounds ---------- */
[class*="communit"] article, [class*="playground"] article {
  background-color: var(--ca-surface) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius-lg, 18px) !important;
}
/* Feed / publicações */
[class*="communit"] [class*="post"], [class*="feed"] li {
  background-color: var(--ca-surface) !important;
  border: 1px solid var(--ca-border) !important; border-radius: var(--ca-radius) !important;
}
/* Estado vazio legível (sem prometer funcionalidades inexistentes) */
[class*="empty"], [class*="no-results"] { color: var(--ca-text-3) !important; }

/* ---------- 8. Painel administrativo ---------- */
/* Sidebar/menu lateral */
aside, [role="navigation"][aria-orientation="vertical"] {
  background-color: var(--ca-bg-deep) !important;
  border-right: 1px solid var(--ca-border) !important;
}
aside a:hover, [role="navigation"][aria-orientation="vertical"] a:hover {
  background-color: var(--ca-surface-2) !important; color: var(--ca-cyan) !important;
}
/* Tabelas de gestão: cabeçalho e linhas com separação clara */
table thead th {
  background-color: var(--ca-surface-2) !important;
  color: var(--ca-text) !important; border-bottom: 1px solid var(--ca-border) !important;
}
table tbody tr { border-bottom: 1px solid var(--ca-border) !important; }
table tbody tr:hover { background-color: var(--ca-surface-2) !important; }
/* Barras de ferramentas e cartões de métricas */
[class*="toolbar"], [class*="metrics"] > div {
  background-color: var(--ca-surface) !important; border: 1px solid var(--ca-border) !important;
}
/* Modais e overlays: superfície destacada, fundo escurecido */
[role="dialog"], [class*="modal"] > div {
  background-color: var(--ca-surface) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius-lg, 18px) !important;
  box-shadow: var(--ca-shadow) !important;
}
/* Avisos e estados */
[role="alert"] { border-left: 3px solid var(--ca-gold) !important; }

/* ---------- Reforço de hierarquia em qualquer superfície ---------- */
/* O cartão tem de se destacar do fundo: mínimo perceptível de separação. */
article, [class*="card"] {
  background-color: var(--ca-surface) !important;
  border: 1px solid var(--ca-border) !important;
}
article:hover, [class*="card"]:hover { border-color: color-mix(in srgb, var(--ca-cyan) 40%, var(--ca-border)) !important; }