/*
 * SoftMapLab — identidade visual institucional (IFSP campus Itapetininga).
 *
 * Referência: paleta extraída do CSS real do site do campus (itp.ifsp.edu.br,
 * template-verde.css, usado por vários campi do IFSP) — fundo branco predominante,
 * texto cinza-escuro neutro, verde institucional usado só como destaque pontual
 * (links, bordas, botões), nunca como grande bloco de fundo escuro.
 *
 * --cor-primaria / --cor-secundaria / --cor-destaque são a paleta CONFIGURÁVEL pelo
 * admin em /admin/configuracoes (tabela configuracao_sistema). Os valores abaixo são
 * apenas o fallback caso a configuração não tenha sido carregada; em uso normal, o
 * fragmento fragments/head.html sobrescreve essas três variáveis com os valores do
 * banco. O restante da paleta (fundo, texto, bordas) é FIXO e não configurável — isso
 * garante um mínimo de legibilidade mesmo que o admin escolha cores extremas (o
 * backend também valida contraste mínimo de 4.5:1 para corPrimaria/corSecundaria).
 *
 * Contraste calculado (fórmula WCAG 2.1) contra fundo branco:
 *   #066017 (primária padrão)   ≈ 7.8:1  — ok para texto normal e botão com texto branco
 *   #17882c (secundária padrão) ≈ 4.57:1 — ok para uso secundário/texto normal
 *   #1cac03 (destaque padrão)   < 3:1    — só decorativo (linhas, ícones); nunca texto
 *                                          sólido nem botão com texto branco
 */

:root {
  --cor-fundo: #ffffff;
  --cor-fundo-alt: #f4f6f5;
  --cor-texto: #23272b;
  --cor-texto-secundario: #5c6570;
  --cor-borda: #dfe3e6;

  /* Sobrescritas em tempo de execução por fragments/head.html a partir do banco. */
  --cor-primaria: #066017;
  --cor-secundaria: #17882c;
  --cor-destaque: #1cac03;

  --bs-body-bg: var(--cor-fundo);
  --bs-body-color: var(--cor-texto);
  --bs-border-color: var(--cor-borda);

  --bs-primary: var(--cor-primaria);
  --bs-link-color: var(--cor-primaria);
  --bs-link-hover-color: color-mix(in srgb, var(--cor-primaria) 80%, black);
}

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}

/* Link "pular para o conteúdo" — visível apenas com foco de teclado (WCAG 2.4.1). */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 2000;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  padding: 0.5rem 1rem;
  border-radius: 0 0 0.375rem 0.375rem;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
}

.skip-link:focus {
  top: 0;
}

/* --- Botões --- */

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--cor-primaria);
  --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cor-secundaria);
  --bs-btn-hover-border-color: var(--cor-secundaria);
  --bs-btn-active-bg: color-mix(in srgb, var(--cor-secundaria) 85%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--cor-secundaria) 85%, black);
  --bs-btn-disabled-bg: var(--cor-primaria);
  --bs-btn-disabled-border-color: var(--cor-primaria);
  --bs-btn-focus-shadow-rgb: 6, 96, 23;
}

.btn-outline-primary {
  --bs-btn-color: var(--cor-primaria);
  --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cor-primaria);
  --bs-btn-hover-border-color: var(--cor-primaria);
  --bs-btn-active-bg: var(--cor-primaria);
  --bs-btn-active-border-color: var(--cor-primaria);
  --bs-btn-focus-shadow-rgb: 6, 96, 23;
}

/* Ações neutras (cancelar, limpar filtro) permanecem cinzas de propósito — dar-lhes a
   cor institucional passaria a falsa impressão de que são a ação recomendada. */
.btn-outline-secondary {
  --bs-btn-color: var(--cor-texto-secundario);
  --bs-btn-border-color: var(--cor-borda);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cor-texto-secundario);
  --bs-btn-hover-border-color: var(--cor-texto-secundario);
  --bs-btn-active-bg: var(--cor-texto-secundario);
  --bs-btn-active-border-color: var(--cor-texto-secundario);
}

/* --- Cabeçalho (navbar): fundo branco, marca e borda na cor institucional --- */

.navbar-ifsp {
  background-color: var(--cor-fundo);
  border-bottom: 3px solid var(--cor-primaria);
}

.navbar-ifsp .navbar-brand {
  color: var(--cor-primaria);
  font-weight: 600;
}

.navbar-ifsp .brand-logo {
  height: 36px;
  width: auto;
}

.navbar-ifsp .nav-link {
  color: var(--cor-texto);
}

.navbar-ifsp .nav-link:hover,
.navbar-ifsp .nav-link:focus {
  color: var(--cor-primaria);
  text-decoration: underline;
}

.navbar-ifsp .nav-link.active {
  color: var(--cor-primaria);
  font-weight: 600;
}

.navbar-ifsp .navbar-toggler {
  border-color: var(--cor-borda);
}

.navbar-ifsp .navbar-text {
  color: var(--cor-texto-secundario) !important;
}

/* --- Rodapé: fundo claro, borda superior na cor institucional --- */

.footer-ifsp {
  background-color: var(--cor-fundo-alt);
  border-top: 2px solid var(--cor-primaria);
  color: var(--cor-texto-secundario);
}

.footer-ifsp .footer-tsi-logo {
  height: 44px;
  width: auto;
}

/* --- Miniaturas de software (logo ou placeholder genérico) --- */

.software-thumb,
.software-thumb-placeholder {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 0.375rem;
  background-color: var(--cor-fundo-alt);
}

.software-thumb-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-texto-secundario);
  font-size: 1.25rem;
}

.software-thumb-lg,
.software-thumb-placeholder-lg {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 0.5rem;
  background-color: var(--cor-fundo-alt);
}

.software-thumb-placeholder-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-texto-secundario);
  font-size: 2.5rem;
}

#logo-preview {
  max-width: 96px;
  max-height: 96px;
  object-fit: contain;
  border-radius: 0.5rem;
  background-color: var(--cor-fundo-alt);
}

/* --- Miniatura "média" (56px): identidade do software em destaque nas listagens
   (pública e admin), maior que a miniatura de 40px usada em outras telas para ficar
   mais reconhecível à primeira vista (heurística de Nielsen: reconhecer > lembrar). --- */

.software-thumb-md,
.software-thumb-placeholder-md {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 0.5rem;
  background-color: var(--cor-fundo-alt);
  flex-shrink: 0;
}

.software-thumb-placeholder-md {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-texto-secundario);
  font-size: 1.75rem;
}

/* --- Miniatura "pequena" (22px): usada dentro dos chips de vínculo (.badge-ifsp)
   quando a lista de laboratórios mostra os softwares instalados por ícone. --- */

.software-thumb-sm,
.software-thumb-placeholder-sm {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

.software-thumb-placeholder-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 0.9rem;
}

/* --- Alternância logo/nome do software nas listagens ---
   Por padrão a identificação é pelo logo; o nome-texto continua sempre no DOM, só
   oculto visualmente (não com display:none/visibility:hidden), para que leitores de
   tela e a busca do navegador (Ctrl+F) continuem enxergando o nome mesmo quando o
   logo é a forma visível. A classe .modo-nome (aplicada em <body> por static/js/app.js,
   e persistida em localStorage) inverte qual dos dois fica visível. */

.nome-software {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.modo-nome .software-thumb-md,
body.modo-nome .software-thumb-placeholder-md,
body.modo-nome .software-thumb-sm,
body.modo-nome .software-thumb-placeholder-sm {
  display: none;
}

/* Chip de software só com ícone (modo logo): centraliza o ícone sem sobra de
   espaço do texto escondido, mas continua com o mesmo padding no modo nome. */
.badge-ifsp.chip-software {
  padding: 0.25rem 0.5rem;
}

body.modo-nome .badge-ifsp.chip-software {
  padding: 0.35em 0.65em;
}

body.modo-nome .nome-software {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Botão ativo do grupo Logo/Nome: reforço visual sincronizado com aria-pressed. */
[data-modo-software][aria-pressed="true"] {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff;
}

/* --- Chips de vínculo laboratório/software ---
   Fundo bem claro (mix ~13% com branco) e texto sempre escuro: minimalista e livre de
   risco de contraste ruim, independentemente da cor que o admin escolher em corPrimaria. */

.badge-ifsp {
  background-color: color-mix(in srgb, var(--cor-primaria) 13%, white);
  color: color-mix(in srgb, var(--cor-primaria) 70%, black);
  border: 1px solid color-mix(in srgb, var(--cor-primaria) 30%, white);
  font-weight: 500;
}

/* --- Tabelas: tingimento sutil no cabeçalho, texto sempre escuro --- */

.table > thead {
  background-color: color-mix(in srgb, var(--cor-primaria) 8%, white);
}

.table > thead th {
  color: var(--cor-texto);
  border-bottom-width: 2px;
  border-bottom-color: var(--cor-borda);
  white-space: nowrap;
}

/* --- Lista de seleção múltipla (labs/softwares nos formulários admin) --- */

.checkbox-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--cor-borda);
  border-radius: 0.375rem;
  padding: 0.75rem;
  background-color: var(--cor-fundo);
}

.checkbox-list .form-check + .form-check {
  margin-top: 0.25rem;
}

/* --- Checkboxes: cor institucional ao marcar (por padrão o Bootstrap usa azul,
   destoando do resto da identidade visual verde do projeto). --- */

.form-check-input:checked,
.form-check-input:indeterminate {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

.form-check-input:focus {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--cor-primaria) 25%, transparent);
}

/* Checkboxes de seleção em lote (ex.: exclusão em lote de softwares): um pouco
   maiores que o padrão, para uma área de clique mais confortável. */
.checkbox-selecao-lote {
  width: 1.15em;
  height: 1.15em;
  cursor: pointer;
}

/* --- Estados vazios --- */

.estado-vazio {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--cor-texto-secundario);
  background-color: var(--cor-fundo);
  border: 1px dashed var(--cor-borda);
  border-radius: 0.5rem;
}

.estado-vazio i {
  font-size: 2.5rem;
  color: var(--cor-primaria);
  display: block;
  margin-bottom: 0.75rem;
}

/* --- Página inicial: hero claro, sem bloco escuro --- */

.hero-ifsp {
  background-color: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-top: 3px solid var(--cor-destaque);
  color: var(--cor-texto);
  border-radius: 0.75rem;
}

.hero-ifsp .brand-logo-hero {
  height: 96px;
  width: auto;
}

.card-atalho {
  height: 100%;
  border: 1px solid var(--cor-borda);
  transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.card-atalho:hover,
.card-atalho:focus-within {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
  border-color: var(--cor-primaria);
  transform: translateY(-2px);
}

.card-atalho i {
  font-size: 2rem;
  color: var(--cor-primaria);
}

/* --- Cartões de membro da equipe (página Sobre) --- */

.card-membro {
  height: 100%;
  border: 1px solid var(--cor-borda);
  border-top: 3px solid var(--cor-destaque);
}

/* --- Login --- */

.login-card {
  max-width: 420px;
  margin: 3rem auto;
  border: 1px solid var(--cor-borda);
}

.login-card .brand-logo-login {
  height: 80px;
  width: auto;
}

/* --- Configurações do sistema (admin): prévia ao vivo das cores --- */

.preview-swatch {
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  border: 1px solid var(--cor-borda);
  vertical-align: middle;
}

.color-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.color-field input[type="color"] {
  width: 2.75rem;
  height: 2.375rem;
  padding: 0.25rem;
  flex: 0 0 auto;
}

.color-field input[type="text"] {
  flex: 1 1 auto;
}

/* --- Utilidades --- */

.text-ifsp-verde {
  color: var(--cor-primaria);
}

.min-vh-conteudo {
  min-height: 60vh;
}