/*
  main.css
  Documento de estilos principal do projeto "approvados-curso".

  Notas de documentação (PT-BR):
  - Comentários explicativos descrevem a intenção e efeitos colaterais.
  - Nomes de variáveis e classes mantidos em inglês por convenção do projeto.
  - Foco em legibilidade e consistência (variáveis CSS para cores e tipografia).
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Roboto:wght@300;400;600&display=swap");

/* -------------------------
   Variáveis globais
   -------------------------
   Centraliza tokens de design usados no projeto:
   - Tipografia (font-family)
   - Escala de tipografia (em rem)
   - Paleta de cores (semântica: primary, danger, etc.)
   Vantagem: ajustes globais rápidos e consistentes.
*/
:root {
  /* Tipografia: fontes base e heading */
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", sans-serif;
  --font-heading: "Poppins", var(--font-body);

  /* Tamanhos de fonte (rem) — usar classes utilitárias abaixo */
  --fs-xxs: 0.75rem; /* 12px */
  --fs-xs: 0.8125rem; /* 13px */
  --fs-sm: 0.875rem; /* 14px */
  --fs-base: 1rem; /* 16px */
  --fs-md: 1.125rem; /* 18px */
  --fs-lg: 1.25rem; /* 20px */
  --fs-xl: 1.5rem; /* 24px */
  --fs-2xl: 1.875rem; /* 30px */
  --fs-3xl: 2.25rem; /* 36px */

  /* Paleta de cores: usar semanticamente (success/warning/danger etc.) */
  --color-primary: #53dd6c;
  --color-secondary: #4ea5d9;
  --color-accent: #ffca28;
  --color-success: #2e7d32;
  --color-warning: #f9a825;
  --color-danger: #e05263;
  --color-dark: #222823;

  /* Cores neutras / fundo */
  --color-bg: #f8f9fa;
  --color-white: #ffffff;
  /* tons de cinza com diferentes opacidades, pré-computados para conveniência */
  --color-gray-500: #222823bf;
  --color-gray-400: #22282380;
  --color-gray-300: #22282340;
  --color-gray-200: #2228231a;
  --color-gray-100: #2228230d;
}

/* -------------------------
   Defaults globais
   -------------------------
   Regras básicas para tipografia e esquema de cores.
*/
html {
  /* Indica que o site utiliza modo claro — ajuda navegadores e formulários */
  color-scheme: light;
}

body {
  /* Fonte base, tamanho e cor do texto padrão */
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
  background: var(--color-bg);
}

p {
  margin-bottom: 0;
}

/* Cabeçalhos devem usar fonte de destaque e cor forte */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-dark);
}

/* -------------------------
   Utilitários (helpers)
   -------------------------
   Pequenas classes utilitárias para uso em HTML: muting de texto,
   ajuste de imagens e botões-ícone. Essas classes são intencionais e
   devem ser reutilizadas para evitar duplicação.
*/
.text-muted-500 {
  /* Texto com menor contraste para metadados e labels */
  color: var(--color-gray-400);
}
.object-fit-cover {
  /* Garante que imagens preencham o elemento cortando proporção quando necessário */
  object-fit: cover;
}
.ratio > img {
  /* Imagem dentro de um container .ratio: ocupa todo o espaço */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Botões circulares com alinhamento centralizado (ícones) */
.btn-icon {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Variações de tamanho para botões-ícone. Usam !important para
   sobrescrever possíveis regras de bibliotecas externas (bootstrap etc.) */
.btn-icon-nano {
  width: 24px !important;
  height: 24px !important;
}
.btn-icon-sm {
  width: 28px !important;
  height: 28px !important;
}
.btn-icon-base {
  width: 32px !important;
  height: 32px !important;
}
.btn-icon-large {
  width: 40px !important;
  height: 40px !important;
}

/* -------------------------
   Utilitários de tipografia
   -------------------------
   Classes pequenas para aplicar tamanhos de fonte consistentes.
   Usar sempre as variáveis definidas em :root para manter consistência.
*/
.text-xxs {
  font-size: var(--fs-xxs) !important;
}
.text-xs {
  font-size: var(--fs-xs) !important;
}
.text-sm {
  font-size: var(--fs-sm) !important;
}
.text-base {
  font-size: var(--fs-base) !important;
}
.text-md {
  font-size: var(--fs-md) !important;
}
.text-lg {
  font-size: var(--fs-lg) !important;
}
.text-xl {
  font-size: var(--fs-xl) !important;
}
.text-2xl {
  font-size: var(--fs-2xl) !important;
}
.text-3xl {
  font-size: var(--fs-3xl) !important;
}

/* -------------------------
   Header / controle superior
   -------------------------
   Layout do cabeçalho da aplicação e variações para formulários internos.
   Utiliza flexbox para alinhamento e espaçamento entre controles.
*/
.header,
.header > form {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: end; /* Alinha elementos ao final (direita) */
}

.header {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-gray-300);
}

.header > form {
  /* Separador visual entre formulário de busca/controls e resto do header */
  border-right: 1px solid var(--color-gray-300);
  padding-right: 1rem;
}

.header .btn-group .btn {
  /* Botões agrupados com cantos arredondados e espaçamento */
  border-radius: 0.375rem !important;
  margin: 0 0.5rem;
}
.header .btn-group .btn:last-child {
  margin-right: 0;
}
.header .btn-group .btn:first-child {
  margin-left: 0;
}

/* -------------------------
   Item / Card
   -------------------------
   Estilos direcionados a componentes repetíveis (cards, listas de itens).
   Hover state revela ações e aplica background sutil.
*/
.item {
  border-radius: 8px !important;
  border: 0;
}
.item:hover {
  background: var(--color-gray-100);
}

.item .actions {
  /* Ações escondidas até o hover para reduzir ruído visual */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.item:hover .actions {
  opacity: 1;
  visibility: visible;
}

.card.item {
  box-shadow: none;
}
.card.item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card .card-footer {
  /* Footer de card limpo (sem background/borda) */
  background-color: transparent;
  border: 0;
  padding: 0;
}

/* -------------------------
   Modal (layout interno)
   -------------------------
   Ajustes para modais (paddings, header e footer) para consistência
   entre componentes nativos e bibliotecas (Bootstrap, SweetAlert etc.).
*/
.modal .modal-content {
  padding: 1rem;
}
.modal .modal-header {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
.modal .modal-title {
  flex: 1;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.modal .modal-footer {
  padding: 1rem 0 0 0;
}

.message-empty {
  /* Mensagem usada quando não há conteúdo — visual discreto */
  width: 100%;
  color: var(--color-gray-300);
  font-weight: 300;
}

/* -------------------------
   Spinner (bootstrap fixes)
   -------------------------
   Algumas regras do projeto usam !important em transform/border-radius e
   podem interromper a animação padrão do spinner do Bootstrap. Este bloco
   força as propriedades essenciais para preservar formato e animação.
*/
.spinner-border {
  border-radius: 50% !important;
  /* parte do spinner com cor transparente para o efeito visual */
  border-right-color: transparent !important;
  border-left-color: transparent;
  /* força a animação mesmo quando sobrescrito externamente */
  animation: var(--bs-spinner-animation-speed, 0.75s) linear infinite
    spinner-border !important;
  -webkit-animation: var(--bs-spinner-animation-speed, 0.75s) linear infinite
    spinner-border !important;
  transform-origin: center !important;
}

/* -------------------------
   SweetAlert2 - custom theme
   -------------------------
   Ajustes visuais para que os modais do SweetAlert2 sigam a paleta do projeto.
   Comentários explicativos em PT-BR conforme convenção.
*/
.swal2-popup {
  font-family: var(--font-body);
  background: var(--color-white);
  color: var(--color-gray-500);
  border-radius: 0.75rem;
  box-shadow: 0 8px 30px rgba(34, 40, 35, 0.12);
  border: 1px solid rgba(34, 40, 35, 0.06);
  padding: 1.25rem;
}

/* Cabeçalho, título e conteúdo do SweetAlert2 */
.swal2-header {
  gap: 0.5rem;
}
.swal2-title {
  font-family: var(--font-heading);
  color: var(--color-dark);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-transform: uppercase;
}
.swal2-html-container {
  color: var(--color-gray-500);
  font-size: var(--fs-base);
}

/* Botões do SweetAlert2: confirmar e cancelar */
.swal2-actions {
  margin-top: 1rem;
}
.swal2-actions .swal2-confirm {
  /* Botão de confirmação com cor de atenção/erro no projeto */
  background: var(--color-danger);
  color: var(--color-white) !important;
  border: none;
  box-shadow: 0 6px 18px rgba(83, 221, 108, 0.18);
  padding: 0.6rem 1rem;
  font-weight: 600;
}
.swal2-actions .swal2-confirm:hover {
  filter: brightness(0.96);
}
.swal2-actions .swal2-cancel {
  background: transparent;
  color: var(--color-dark) !important;
  border: 1px solid var(--color-gray-200);
  padding: 0.55rem 0.9rem;
}
.swal2-actions .swal2-cancel:hover {
  background: var(--color-gray-100);
}

/* Ícones do SweetAlert2: aplica variações de cor mantendo contraste */
.swal2-icon.swal2-success {
  background-color: transparent;
}
.swal2-icon.swal2-success .swal2-success-ring {
  stroke: var(--color-primary);
}
.swal2-icon.swal2-success .swal2-success-fix {
  background: var(--color-primary);
}
.swal2-icon.swal2-warning {
  color: var(--color-warning);
}
.swal2-icon.swal2-error {
  color: var(--color-danger);
}

/* Botão fechar (x) do SweetAlert2 */
.swal2-close {
  color: var(--color-gray-400);
}
.swal2-close:hover {
  color: var(--color-dark);
}

/* Acessibilidade: foco em botões do SweetAlert2 */
.swal2-actions .swal2-button:focus {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 20%, white 80%);
  outline-offset: 2px;
}

/* Pequenas transições para suavizar interação com popups e botões */
.swal2-popup,
.swal2-actions .swal2-button {
  transition: box-shadow 0.12s ease, transform 0.08s ease, filter 0.12s ease;
}

/* -------------------------
   Bootstrap Tooltip - custom theme
   -------------------------
   Overrides para tooltip do Bootstrap alinhados ao tema do projeto.
   - Usa variáveis CSS do BS5 e tokens locais (cores/tipografia).
   - Foco em legibilidade, contraste e transições leves (opacity/transform).
*/
.tooltip {
  /* Variáveis do Bootstrap 5 escopadas ao tooltip */
  --bs-tooltip-max-width: 280px;
  --bs-tooltip-font-size: var(--fs-xxs);
  --bs-tooltip-color: var(--color-white);
  --bs-tooltip-bg: var(--color-dark);
  --bs-tooltip-border-radius: 0.5rem;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-padding-x: 0.625rem;
  --bs-tooltip-padding-y: 0.375rem;
  --bs-tooltip-arrow-width: 8px;
  --bs-tooltip-arrow-height: 4px;
  --bs-tooltip-arrow-color: var(--bs-tooltip-bg);

  /* Suaviza entrada sem causar reflow: apenas opacity/transform */
  animation: tooltip-fade-in 120ms ease-out;
}

.tooltip .tooltip-inner {
  /* Tipografia e caixa do balão */
  font-family: var(--font-body);
  background-color: var(--bs-tooltip-bg);
  color: var(--bs-tooltip-color);
  border-radius: var(--bs-tooltip-border-radius);
  padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
  text-align: left; /* texto à esquerda para melhor leitura */
  white-space: normal; /* permite quebra de linha se necessário */
  max-width: var(--bs-tooltip-max-width);
  border: 1px solid var(--color-gray-200); /* borda sutil para contraste em fundos claros */
  box-shadow: 0 8px 24px rgba(34, 40, 35, 0.16);
}

/* Cores das setas conforme a posição (usa variáveis do BS) */
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--bs-tooltip-bg);
}
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--bs-tooltip-bg);
}
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: var(--bs-tooltip-bg);
}
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--bs-tooltip-bg);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}


/* Animação simples e performática para a aparição do tooltip */
@keyframes tooltip-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------
   Responsividade
   -------------------------
   Ajustes menores para telas pequenas (ex: dispositivos móveis)
*/
@media (max-width: 420px) {
  .swal2-popup {
    padding: 1rem;
  }
  .swal2-title {
    font-size: var(--fs-md);
  }
}

/* Linha horizontal usada como separador: leve e neutra */
hr {
  border: 1px solid var(--color-gray-200);
  margin: 1rem 0;
}

/* -------------------------
   Paginator (CoffeeCode)
   -------------------------
   Overrides para o HTML gerado por robsonvleite/paginator
   Estrutura:
   <nav class="paginator">
     <a class="paginator_item">1</a>
     <span class="paginator_item paginator_active">2</span>
     ...
   </nav>
   Objetivo: aparência consistente com o tema (cores/tipografia),
   foco acessível e hit-area generosa para clique em mobile.
*/
.paginator {
  /* Layout centralizado com espaçamento fluido */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.paginator_item {
  /* Base do item: botão leve com borda sutil */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.75rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  background: var(--color-white);
  color: var(--color-dark);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(34, 40, 35, 0.04);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease,
    box-shadow 120ms ease;
}

/* Hover/focus: feedback de interação sem exagero */
.paginator_item:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
  color: var(--color-dark);
}
.paginator_item:focus {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 25%, #fff 75%);
  outline-offset: 2px;
}

/* Estado ativo (elemento é <span>): destaca com cor primaria */
.paginator_active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  cursor: default;
  pointer-events: none; /* evita clique no atual */
  box-shadow: 0 6px 18px rgba(83, 221, 108, 0.18);
}

/* Primeira/última página (<< >>) mantêm mesma base; opcionalmente
   podemos dar um leve destaque para facilitar a identificação */
.paginator .paginator_item:first-child,
.paginator .paginator_item:last-child {
  /* Ícones de navegação com leve ênfase visual */
  font-weight: 600;
}

/* Responsividade: itens um pouco menores em telas estreitas */
@media (max-width: 480px) {
  .paginator_item {
    min-width: 30px;
    height: 30px;
    padding: 0 0.5rem;
    font-size: var(--fs-xs);
  }
}