/* Gerado por split de app/static/css/estilo_ph3a.css (fundação da reorganização de CSS, 03/08/2026). Ver app/utils/css_manifest.py pra ordem de carregamento. */

/* ============================================================
   KANBAN BOARD
   ============================================================ */

.kanban-board {
  display: flex;
  gap: 16px;
  /* `scroll` (não `auto`) — Chrome no macOS estava escondendo a barra
     mesmo com overflow real e custom `::-webkit-scrollbar` (Paulo
     29/04 testou em 4K com sidebar colapsado, Stand By cortado e
     barra invisível). `scroll` força a track existir sempre.
     Track abaixo é transparente — quando não há overflow, thumb
     ocupa 100% e fica como linha laranja contínua (informativa);
     quando há overflow, thumb laranja proporcional aparece
     arrastável sobre o track invisível. */
  overflow-x: scroll;
  padding-bottom: 4px;
  /* `height` (não `min-height`) pra que o fundo do board — onde a
     scrollbar horizontal renderiza — fique DENTRO do viewport visível,
     acima do footer fixo. Antes usávamos `min-height: calc(100vh - 200px)`,
     o que fazia o board estourar a tela e a scrollbar ficar atrás do
     footer (Paulo 29/04 ainda sem ver a barra mesmo após overflow:scroll).
     320px = topbar (~60) + page-header + resumo de totais + footer (~50)
     com folga. As colunas têm scroll vertical próprio (max-height
     calc(100vh - 320px) em .kanban-cards), então o board só precisa
     segurar o eixo horizontal. */
  /* 380px deixa espaço pro custom scrollbar (28px) + footer fixo
     (~50px) + buffer (12px). Antes era 320px, mas a barra estava
     caindo atrás do footer. Paulo 29/04 reportou. */
  height: calc(100vh - 380px);
  min-height: 380px;
  /* Padroniza visual da scrollbar entre Firefox e Webkit. */
  /* Firefox: scrollbar SEMPRE visível, com cor laranja PH3A no thumb
     pra ser impossível de não notar. */
  scrollbar-width: auto;
  scrollbar-color: var(--ph3a-primary) var(--ph3a-border);
  /* Sombra suave na borda direita sinaliza visualmente que há mais
     colunas pra rolar. Mantida como reforço visual. */
  background:
    linear-gradient(to right, transparent 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat,
    linear-gradient(to right, rgba(15,23,42,.06), rgba(15,23,42,0)) right center / 12px 100% no-repeat;
  background-attachment: local, local;
}

/* Webkit (Chrome/Safari): força scrollbar laranja PH3A bem visível,
   16px de altura, sem border que "come" espessura — a Erika 27/04 +
   Paulo 29/04 reportaram não ver a barra mesmo com overflow:scroll
   por causa do thumb cinza fino contra fundo similar. */
.kanban-board::-webkit-scrollbar {
  height: 16px;
}

.kanban-board::-webkit-scrollbar-track {
  /* Transparente: sem overflow, thumb (laranja, full-width) já dá
     a presença visual; com overflow, track invisível deixa o chip
     laranja arrastável em destaque. */
  background: transparent;
  margin: 0 4px;
}

.kanban-board::-webkit-scrollbar-thumb {
  background: var(--ph3a-primary);
  border-radius: 8px;
  min-width: 60px;
}

.kanban-board::-webkit-scrollbar-thumb:hover {
  background: var(--ph3a-primary-dark);
}

.kanban-board::-webkit-scrollbar-thumb:hover {
  background: var(--ph3a-primary);
}

/* Botões de navegação ← → — aparecem flutuantes à esquerda/direita
   do .kanban-board pra usuário que prefere clicar em vez de scrollar.
   Posicionados via .kanban-nav-wrap (wrapper com position: relative). */
.kanban-nav-wrap {
  position: relative;
}

.kanban-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ph3a-white);
  border: 1px solid var(--ph3a-border);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ph3a-text);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.kanban-nav-btn:hover {
  background: var(--ph3a-primary);
  color: #fff;
  border-color: var(--ph3a-primary);
}

.kanban-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.kanban-nav-btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.kanban-nav-btn.left  { left:  -10px; }
.kanban-nav-btn.right { right: -10px; }

@media (max-width: 600px) {
  .kanban-nav-btn { display: none; }  /* em mobile já tem swipe natural */
}

.kanban-column {
  min-width: 240px;
  width: 240px;
  background:var(--ph3a-bg);
  border-radius: 14px;
  border: 1px solid var(--ph3a-border);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 180px);
}

.kanban-column-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ph3a-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background:var(--ph3a-bg);
  border-radius: 14px 14px 0 0;
  z-index: 1;
}

.kanban-column-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ph3a-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.kanban-count {
  background: var(--ph3a-border);
  color: var(--ph3a-text-light);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.kanban-cards {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kanban-card {
  background: var(--ph3a-white);
  border-radius: 12px;
  border: 1px solid var(--ph3a-border);
  padding: 14px;
  cursor: grab;
  transition: all var(--transition);
  position: relative;
}

.kanban-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.kanban-card:active {
  cursor: grabbing;
}

/* Durante o arraste, o hover de qualquer card sob o cursor não pode alterar a
   geometria (translateY) — isso desloca o retângulo lido pelo cálculo de
   posição do drag e realimenta o "flicker" entre 2 posições. */
body.ph3a-kanban-dragging .kanban-card {
  transition: none;
}

body.ph3a-kanban-dragging .kanban-card:hover {
  box-shadow: none;
  transform: none;
}

body.ph3a-kanban-dragging {
  user-select: none;
}

/* Card original: fica esmaecido no lugar enquanto o fantasma (abaixo) segue
   o cursor — mesmo padrão visual do Trello/Jira. */
.kanban-card.dragging {
  opacity: .45;
}

/* Fantasma do card durante o arraste: clone leve posicionado via
   translate3d (GPU, sem reflow), atualizado a cada pointermove. Substitui o
   drag nativo HTML5 (draggable="true"), cuja renderização é notoriamente
   ruim em várias combinações de browser/SO — ver comentário em kanban.html. */
.kanban-card-ghost {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 2000;
  pointer-events: none;
  cursor: grabbing;
  transition: none;
  will-change: transform;
  box-shadow: 0 12px 28px rgba(0,0,0,.08); /* mesma opacidade do hover (linha acima), só com mais alcance pra indicar elevação */
}

/* Indicador de onde o card vai cair ao soltar — box-shadow é só pintura, não
   afeta o box model, então nunca desloca a geometria que o cálculo de
   posição lê (ver comentário em kanban.html). Precisa vir depois da regra de
   :hover acima pra ganhar em empate de especificidade quando o card alvo
   também está sob o cursor. */
body.ph3a-kanban-dragging .kanban-card.kanban-drop-before {
  box-shadow: inset 0 3px 0 0 var(--ph3a-primary);
}
body.ph3a-kanban-dragging .kanban-card.kanban-drop-after {
  box-shadow: inset 0 -3px 0 0 var(--ph3a-primary);
}

.kanban-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ph3a-text);
  margin-bottom: 8px;
  line-height: 1.4;
}

.kanban-card-contact {
  font-size: 12px;
  color: var(--ph3a-text-light);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.kanban-card-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--ph3a-accent);
}

.kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ph3a-border);
}