/* ═══════════════════════════════════════════════════════════════════════
   FlowDesck — Interações
   Feedback de toque, foco visível e respeito a "reduzir movimento".
   Carregado por todas as páginas; não altera cores nem layout.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. RESPOSTA IMEDIATA ──────────────────────────────────────────────
   O retorno acontece ao PRESSIONAR, não ao soltar. Sem isso a interface
   parece morta no intervalo entre o clique e a resposta do servidor. */
button,
[role="button"],
.nav-btn,
.dem-card,
.cal-day-item,
.ann-card {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:not(:disabled):active,
[role="button"]:active,
.nav-btn:active {
  transform: scale(0.97);
  transition: transform 90ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Cards são grandes: encolher demais parece defeito. */
.dem-card:active,
.cal-day-item:active,
.ann-card:active {
  transform: scale(0.994);
  transition: transform 90ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* O card em arrasto não deve receber o efeito de pressionar. */
.dem-card.dragging:active,
.d-card.dragging:active {
  transform: none;
}

button:disabled {
  cursor: not-allowed;
}

/* ── 2. FOCO VISÍVEL ───────────────────────────────────────────────────
   Só para quem navega por teclado; o clique de mouse não mostra anel. */
:focus-visible {
  outline: 2px solid var(--accent, #7C3AED);
  outline-offset: 2px;
  border-radius: 6px;
}

button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* ── 3. ÁREA DE TOQUE NO CELULAR ───────────────────────────────────────
   Alvo mínimo confortável sem mexer no tamanho visual do ícone. */
@media (hover: none) and (pointer: coarse) {
  button,
  .nav-btn,
  .modal-close {
    min-width: 40px;
    min-height: 40px;
  }
}

/* ── 4. MOVIMENTO REDUZIDO ─────────────────────────────────────────────
   Preferência do sistema operacional. Mantém o retorno, tira o balanço. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  button:not(:disabled):active,
  .dem-card:active,
  .cal-day-item:active,
  .ann-card:active {
    transform: none;
    opacity: 0.75;
  }
}

/* ── 5. ROLAGEM LATERAL DOS KANBANS ────────────────────────────────────
   Barra visível e fundo "pegável": dá para arrastar o quadro com o mouse. */
.dem-kanban,
.kanban-demand,
.kanban {
  cursor: grab;
  scrollbar-width: auto;
  scrollbar-color: var(--border2, #D9C9A8) transparent;
}
.dem-kanban.panning,
.kanban-demand.panning,
.kanban.panning {
  cursor: grabbing;
  scroll-behavior: auto;
}
/* Cards e controles mantêm o cursor próprio. */
.dem-kanban .dem-card, .kanban-demand .d-card, .kanban .t-card { cursor: pointer; }
.dem-kanban button, .kanban-demand button, .kanban button { cursor: pointer; }

.dem-kanban::-webkit-scrollbar,
.kanban-demand::-webkit-scrollbar,
.kanban::-webkit-scrollbar { height: 12px; }
.dem-kanban::-webkit-scrollbar-track,
.kanban-demand::-webkit-scrollbar-track,
.kanban::-webkit-scrollbar-track { background: transparent; margin: 0 16px; }
.dem-kanban::-webkit-scrollbar-thumb,
.kanban-demand::-webkit-scrollbar-thumb,
.kanban::-webkit-scrollbar-thumb {
  background: var(--border2, #D9C9A8);
  border-radius: 6px;
  border: 3px solid transparent;       /* afina a barra sem diminuir a área de pegar */
  background-clip: padding-box;
}
.dem-kanban::-webkit-scrollbar-thumb:hover,
.kanban-demand::-webkit-scrollbar-thumb:hover,
.kanban::-webkit-scrollbar-thumb:hover { background-color: var(--muted2, #716757); }

/* ── 6. TIPOGRAFIA DE TÍTULO ──────────────────────────────────────────
   Tipo grande pede tracking negativo e entrelinha justa; o texto corrido
   fica como está. Syne é a fonte de título do sistema. */
.section-title,
.modal-title,
.cal-month,
.project-name,
.empty-title,
.logo-name,
.fd-logo-name,
.dash-title,
.stat-val,
.logo,
.subbar-title,
.sb-title,
.modal-d-title,
.cal-month-label,
.cal-day-panel-date,
h1, h2 {
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}
.section-sub,
.modal-sub,
.field-label,
.f-lbl {
  letter-spacing: 0.02em;   /* rótulos pequenos em caixa alta abrem um pouco */
}

/* ── 7. MOVIMENTO SÓ NO QUE MUDA ───────────────────────────────────────
   As páginas trocaram `transition: all` por propriedades explícitas.
   Aqui fica só a curva padrão do sistema, para quem quiser reaproveitar. */
:root {
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
}