/* INSS · CRM - Diotekno */

/* ============================================================
   Tipografia self-hosted — igual ao projecto gestao-escolar:
   Space Grotesk (títulos) + Inter (corpo). Sem CDN de fontes.
   ============================================================ */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk/space-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk/space-grotesk-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk/space-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, .font-display { font-family: var(--font-display); }
/* Garante a MESMA fonte em todo o lado (controlos de formulário incluídos) */
button, input, optgroup, select, textarea { font-family: inherit; }
canvas { font-family: var(--font-body); }

/* O atributo [hidden] deve vencer utilitários como .flex do Tailwind */
[hidden] { display: none !important; }

/* ===== Sidebar recolhível (estilo Olimak) ===== */
@media (min-width: 1024px) {
  #sidebar { transition: width 0.2s ease, border-right-width 0.2s ease; }
  body.sidebar-collapsed #sidebar { width: 0 !important; border-right-width: 0 !important; }
}

/* ===== Accordion dos grupos da sidebar (abre/fecha com animação) ===== */
.nav-group-items {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  margin-top: 0;
  transition:
    max-height 0.28s ease,
    opacity 0.18s ease,
    transform 0.28s ease,
    margin-top 0.28s ease;
}
.nav-group.is-open > .nav-group-items {
  max-height: 26rem;
  opacity: 1;
  transform: translateY(0);
  margin-top: 0.25rem;
}
/* O chevron é trocado de glifo (direita/baixo) — nunca é rodado */
.nav-group-chevron {
  transition: color 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .nav-group-items { transition: none; }
}

/* ===== Tabela com cabeçalho fixo =====
   O contentor .tabela-fixa é a área de scroll: a lista rola por dentro
   dele e o <thead> fica preso ao topo do contentor (não à viewport,
   o que evitava as sobreposições com a topbar). */
.tabela-fixa {
  overflow: auto;
  max-height: calc(100vh - 13rem);
  max-height: calc(100dvh - 13rem);
}
.tabela-fixa table {
  border-collapse: separate;
  border-spacing: 0;
}
.tabela-fixa thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f8fafc; /* slate-50 opaco */
  box-shadow: inset 0 -1px 0 #e2e8f0;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}

.kanban-col {
  min-width: 280px;
  max-width: 280px;
}

.kanban-card {
  cursor: grab;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.kanban-card:active {
  cursor: grabbing;
}
.kanban-card.dragging {
  opacity: 0.5;
}

.kanban-col.drag-over {
  background-color: #fef2f2;
  outline: 2px dashed #fca5a5;
}

.toast {
  animation: slideIn 0.25s ease-out;
}
@keyframes slideIn {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-backdrop {
  background: rgba(15, 23, 42, 0.5);
}