@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap");

/* ============================================================================
   VizitAR Axis — Backpack (Tabler) skin
   ----------------------------------------------------------------------------
   Reskins the Backpack Tabler theme with the "Axis" design system extracted
   from the reference React app (shadcn/radix-nova). We keep the OKLCH token
   ramp as the source of truth for colour values, and only spell out sRGB
   triplets for the *-rgb variables Bootstrap composes with alpha.
   Loaded last by the theme's inc/head.blade.php override, so it lands after
   Tabler's palette and wins on source order.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   CAMADA 1 — PRIMITIVOS (do globals.css do design de referência)
   -------------------------------------------------------------------------- */
:root {
  /* Roxo da marca — --brand-600 é exatamente o #8A2BE2 do logótipo */
  --brand-50: oklch(0.971 0.014 301.4);
  --brand-100: oklch(0.946 0.031 301.4);
  --brand-200: oklch(0.898 0.061 301.4);
  --brand-300: oklch(0.818 0.12 301.4);
  --brand-400: oklch(0.71 0.191 301.4);
  --brand-500: oklch(0.618 0.245 301.4);
  --brand-600: oklch(0.534 0.25 301.4);
  --brand-700: oklch(0.481 0.245 301.4);
  --brand-800: oklch(0.42 0.208 301.4);
  --brand-900: oklch(0.37 0.168 301.4);
  --brand-950: oklch(0.276 0.122 301.4);

  --neutral-0: oklch(1 0 0);
  --neutral-50: oklch(0.985 0.002 301);
  --neutral-100: oklch(0.955 0.002 301);
  --neutral-200: oklch(0.922 0.004 301);
  --neutral-300: oklch(0.87 0.006 301);
  --neutral-400: oklch(0.708 0.012 301);
  --neutral-500: oklch(0.556 0.014 301);
  --neutral-600: oklch(0.446 0.014 301);
  --neutral-700: oklch(0.37 0.013 301);
  --neutral-800: oklch(0.274 0.012 301);
  --neutral-900: oklch(0.21 0.012 301);
  --neutral-950: oklch(0.164 0.011 301);
  --neutral-1000: oklch(0.13 0.011 301);

  --lavanda: oklch(0.955 0.022 302.9);
  --lavanda-forte: oklch(0.93 0.036 302.9);

  /* Estado — alinhado à rampa Tailwind (hex conhecido para os -rgb) */
  --green-600: oklch(0.627 0.194 149.214);
  --amber-600: oklch(0.666 0.179 58.318);
  --red-600: oklch(0.577 0.245 27.325);
  --sky-600: oklch(0.588 0.158 241.966);
  --teal-600: oklch(0.6 0.118 184.704);
  --rose-600: oklch(0.586 0.222 17.585);

  /* Cores por tipo de pergunta e níveis de Bloom (badges/filtros) */
  --qtype-mc: var(--brand-600);
  --qtype-mc-subtle: var(--brand-50);
  --qtype-hotspot: var(--amber-600);
  --qtype-hotspot-subtle: oklch(0.973 0.021 84);
  --qtype-3d: var(--teal-600);
  --qtype-3d-subtle: oklch(0.968 0.023 183);
  --qtype-sequencia: var(--rose-600);
  --qtype-sequencia-subtle: oklch(0.969 0.015 12.4);

  --bloom-1: var(--neutral-500);
  --bloom-2: var(--sky-600);
  --bloom-3: var(--teal-600);
  --bloom-4: var(--green-600);
  --bloom-5: var(--amber-600);
  --bloom-6: var(--brand-600);

  --gradient-brand: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 55%, var(--brand-700) 100%);
  --shadow-brand: 0 8px 24px -6px oklch(0.534 0.25 301.4 / 0.4);
  --shadow-float-sm: 0 1px 2px 0 oklch(0.276 0.122 301.4 / 0.04), 0 2px 8px -2px oklch(0.276 0.122 301.4 / 0.08);
  --shadow-float-md: 0 2px 4px -1px oklch(0.276 0.122 301.4 / 0.04), 0 8px 24px -4px oklch(0.276 0.122 301.4 / 0.1);
}

/* ----------------------------------------------------------------------------
   CAMADA 2 — MAPEAMENTO PARA O TABLER — TEMA CLARO
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --tblr-primary: var(--brand-600);
  --tblr-primary-rgb: 138, 43, 226;
  --tblr-primary-text-emphasis: var(--brand-800);
  --tblr-primary-bg-subtle: var(--brand-50);
  --tblr-primary-border-subtle: var(--brand-200);

  --tblr-link-color: var(--brand-700);
  --tblr-link-color-rgb: 122, 31, 199;
  --tblr-link-hover-color: var(--brand-800);
  --tblr-link-hover-color-rgb: 99, 31, 158;

  --tblr-success: var(--green-600);
  --tblr-success-rgb: 22, 163, 74;
  --tblr-info: var(--sky-600);
  --tblr-info-rgb: 2, 132, 199;
  --tblr-warning: var(--amber-600);
  --tblr-warning-rgb: 217, 119, 6;
  --tblr-danger: var(--red-600);
  --tblr-danger-rgb: 220, 38, 38;

  /* Página branca, painéis cinza (pedido do Mário — inverte o default) */
  --tblr-body-bg: var(--neutral-0);
  --tblr-body-bg-rgb: 255, 255, 255;
  --tblr-body-color: var(--neutral-900);
  --tblr-body-color-rgb: 28, 24, 38;

  --tblr-card-bg: var(--neutral-100);
  --tblr-bg-surface: var(--neutral-100);
  --tblr-bg-surface-secondary: var(--neutral-100);

  --tblr-border-color: var(--neutral-200);
  --tblr-border-color-translucent: var(--neutral-200);

  /* Texto secundário e placeholders. O Tabler fixa-os em cinzentos próprios que
     não acompanham os painéis cinza do skin: text-secondary/form-hint ficavam a
     4,24:1 sobre card e os placeholders a 2,54:1 (falham AA). neutral-600 dá
     ~6,6:1 sobre card; neutral-500 ~4,7:1 sobre input branco. */
  --tblr-secondary: var(--neutral-600);
  --tblr-secondary-rgb: 87, 83, 95;
  --tblr-secondary-color: var(--neutral-600);
  --tblr-tertiary: var(--neutral-500);

  --tblr-font-sans-serif: "Lato", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Cantos mais arredondados, à imagem do design de referência */
  --tblr-border-radius: 0.65rem;
  --tblr-border-radius-sm: 0.5rem;
  --tblr-border-radius-lg: 0.9rem;
  --tblr-border-radius-xl: 1.1rem;

  --tblr-ring-color: var(--brand-500);
}

/* ----------------------------------------------------------------------------
   CAMADA 2 — MAPEAMENTO PARA O TABLER — TEMA ESCURO
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  /* No escuro o violeta sobe de luminância para manter contraste */
  --tblr-primary: var(--brand-500);
  --tblr-primary-rgb: 157, 92, 255;
  --tblr-primary-text-emphasis: var(--brand-300);
  --tblr-primary-bg-subtle: color-mix(in oklch, var(--brand-500) 18%, transparent);
  --tblr-primary-border-subtle: color-mix(in oklch, var(--brand-500) 40%, transparent);

  --tblr-link-color: var(--brand-300);
  --tblr-link-color-rgb: 201, 165, 255;
  --tblr-link-hover-color: var(--brand-200);

  --tblr-body-bg: var(--neutral-1000);
  --tblr-body-bg-rgb: 16, 14, 21;
  --tblr-body-color: var(--neutral-50);

  --tblr-bg-surface: var(--neutral-950);
  --tblr-card-bg: var(--neutral-950);
  --tblr-border-color: oklch(1 0 0 / 0.1);
  --tblr-border-color-translucent: oklch(1 0 0 / 0.1);

  --tblr-ring-color: var(--brand-400);
}

/* ----------------------------------------------------------------------------
   CAMADA 3 — COMPONENTES (ajustes finos de aparência)
   -------------------------------------------------------------------------- */
body {
  font-family: var(--tblr-font-sans-serif);
}

/* Botão primário com o gradiente subtil da marca */
.btn-primary {
  --tblr-btn-bg: var(--brand-600);
  --tblr-btn-border-color: var(--brand-600);
  --tblr-btn-hover-bg: var(--brand-700);
  --tblr-btn-hover-border-color: var(--brand-700);
  --tblr-btn-active-bg: var(--brand-800);
  background-image: var(--gradient-brand);
  border: 0;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
  background-image: none;
}

/* Cartões com elevação suave e cantos consistentes */
.card {
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: var(--shadow-float-sm);
}

/* ----------------------------------------------------------------------------
   BARRA LATERAL (layout vertical_transparent = navbar-transparent)
   O menu transparente assume texto claro (pensado para fundo escuro) e o Tabler
   pinta-o com regras !important. Sem a skin "glass" ficava ilegível no claro.
   Fixamos o contraste por tema com a mesma força (!important) e cobrimos TODOS
   os links — incluindo o submenu "Admin", que vem de outra partial. Layout e
   botões do topo ficam intactos.
   -------------------------------------------------------------------------- */
[data-bs-theme="light"] .navbar-vertical {
  --tblr-navbar-color: var(--neutral-700);
  --tblr-navbar-active-color: var(--brand-700);
}

/* Texto legível no tema claro (todos os itens, incl. Admin) */
[data-bs-theme="light"] .navbar-vertical a:not(.btn),
[data-bs-theme="light"] .navbar-vertical .nav-link,
[data-bs-theme="light"] .navbar-vertical .nav-link-title,
[data-bs-theme="light"] .navbar-vertical .nav-link-icon,
[data-bs-theme="light"] .navbar-vertical .dropdown-item,
[data-bs-theme="light"] .navbar-vertical .dropdown-toggle {
  color: var(--neutral-700) !important;
}
[data-bs-theme="light"] .navbar-vertical .menu-separator,
[data-bs-theme="light"] .navbar-vertical .nav-item.title {
  color: var(--neutral-500) !important;
}

/* Texto no tema escuro */
[data-bs-theme="dark"] .navbar-vertical a:not(.btn),
[data-bs-theme="dark"] .navbar-vertical .nav-link,
[data-bs-theme="dark"] .navbar-vertical .nav-link-title,
[data-bs-theme="dark"] .navbar-vertical .nav-link-icon,
[data-bs-theme="dark"] .navbar-vertical .dropdown-item {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Hover + ativo com o acento da marca — mesmos estados para todos os menus */
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link.active,
.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .dropdown-item:hover,
.navbar-vertical .dropdown-item.active {
  background-color: var(--brand-50) !important;
  border-radius: var(--tblr-border-radius);
}
[data-bs-theme="light"] .navbar-vertical .nav-link:hover,
[data-bs-theme="light"] .navbar-vertical .nav-link:hover .nav-link-title,
[data-bs-theme="light"] .navbar-vertical .nav-link:hover .nav-link-icon,
[data-bs-theme="light"] .navbar-vertical .nav-link.active,
[data-bs-theme="light"] .navbar-vertical .nav-item.active > .nav-link,
[data-bs-theme="light"] .navbar-vertical a:not(.btn):hover,
[data-bs-theme="light"] .navbar-vertical .dropdown-item:hover,
[data-bs-theme="light"] .navbar-vertical .dropdown-item.active {
  color: var(--brand-700) !important;
}
[data-bs-theme="dark"] .navbar-vertical .nav-link:hover,
[data-bs-theme="dark"] .navbar-vertical .nav-link.active,
[data-bs-theme="dark"] .navbar-vertical .dropdown-item:hover,
[data-bs-theme="dark"] .navbar-vertical .dropdown-item.active {
  color: #fff !important;
  background-color: color-mix(in oklch, var(--brand-500) 22%, transparent) !important;
}

/* Logótipo: mostra a versão certa por tema */
.navbar-brand .axis-logo-dark { display: none; }
[data-bs-theme="dark"] .navbar-brand .axis-logo-light { display: none; }
[data-bs-theme="dark"] .navbar-brand .axis-logo-dark { display: inline; }

/* Números tabulares para contadores/KPIs não "saltarem" */
.tabular { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------------
   BADGES — tipo de pergunta, estado da avaliação, nível de Bloom
   -------------------------------------------------------------------------- */
.badge.axis-badge {
  font-weight: 700;
  border-radius: 999px;
  padding: 0.28em 0.7em;
}
.axis-badge-mc        { color: #fff; background: var(--qtype-mc); }
.axis-badge-hotspot   { color: #fff; background: var(--qtype-hotspot); }
.axis-badge-3d        { color: #fff; background: var(--qtype-3d); }
.axis-badge-sequencia { color: #fff; background: var(--qtype-sequencia); }

.axis-badge-published { color: #fff; background: var(--green-600); }
.axis-badge-draft     { color: var(--neutral-800); background: var(--neutral-200); }
.axis-badge-archived  { color: #fff; background: var(--neutral-500); }

.axis-badge-bloom-1 { color: #fff; background: var(--bloom-1); }
.axis-badge-bloom-2 { color: #fff; background: var(--bloom-2); }
.axis-badge-bloom-3 { color: #fff; background: var(--bloom-3); }
.axis-badge-bloom-4 { color: #fff; background: var(--bloom-4); }
.axis-badge-bloom-5 { color: #fff; background: var(--bloom-5); }
.axis-badge-bloom-6 { color: #fff; background: var(--bloom-6); }

/* KPI/stat cards do dashboard */
.axis-stat {
  border: 0;
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: var(--shadow-float-md);
  overflow: hidden;
}
.axis-stat .axis-stat-value {
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.axis-stat .axis-stat-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tblr-border-radius);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 1.35rem;
}
[data-bs-theme="dark"] .axis-stat .axis-stat-icon {
  background: color-mix(in oklch, var(--brand-500) 18%, transparent);
  color: var(--brand-200);
}

/* Numbered step chip — used by the assessment hub for section/slot ordering. */
.axis-step-num {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] .axis-step-num {
  background: color-mix(in oklch, var(--brand-500) 18%, transparent);
  color: var(--brand-200);
}

/* Onboarding hero (wizard CTA on the empty list + dashboard) — a soft brand
   wash + accent edge so a first-time docente can't miss the way in. */
.axis-onboarding {
  border-color: var(--brand-200);
  background: linear-gradient(180deg, var(--brand-50), var(--tblr-card-bg, #fff));
}
.axis-onboarding .axis-stat-icon {
  color: var(--brand-600);
}
[data-bs-theme="dark"] .axis-onboarding {
  border-color: color-mix(in oklch, var(--brand-500) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in oklch, var(--brand-500) 14%, transparent), transparent);
}

/* Persistent "wizard in progress" banner (site-wide, below the top header). */
.axis-wip-banner {
  background: var(--brand-600);
  color: #fff;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  box-shadow: var(--tblr-shadow, 0 1px 2px rgba(0, 0, 0, 0.1));
}
.axis-wip-banner .la {
  font-size: 1.1rem;
}
.axis-wip-banner .btn-light {
  --tblr-btn-color: var(--brand-700);
  font-weight: 600;
}