/* ==========================================================================
   RenovaTask — composição local sobre o Design System Renova Be (identidade Nova).
   Só layout e composição: cores, tipografia, espaços e raios vêm dos tokens
   do DS (public/ds/). O DS não tem componente de kanban (PRD R-03): o quadro
   é composto de .rnv-card, .rnv-pill e .rnv-select.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body-fallback);
}

h1,
h2,
h3,
p {
  margin: 0;
}

.tb-muted {
  color: var(--color-text-muted);
}

.tb-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* O PNG do logo tem fundo branco: multiply funde no fundo Breathe. */
.tb-logo {
  display: block;
  height: 20px;
  width: auto;
  mix-blend-mode: multiply;
}

.tb-logo--lg {
  height: 32px;
}

.tb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-warm-100);
  color: var(--color-warm-800);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}

.tb-avatar--sm {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

/* ---- Login ---------------------------------------------------------------- */
.tb-entrar {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--space-16);
  overflow: hidden;
}

/* Grafismo circular da identidade Nova (nasce do "O" do logo). */
.tb-entrar__grafismo {
  position: absolute;
  width: 720px;
  height: 720px;
  right: -240px;
  top: -240px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 30% 30%, var(--color-warm-300), var(--color-solar-200) 45%, transparent 70%);
  opacity: 0.55;
  pointer-events: none;
}

.tb-entrar__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  max-width: 420px;
  background: var(--color-white);
  text-align: center;
  align-items: stretch;
}

.tb-entrar__card .tb-logo {
  align-self: center;
  mix-blend-mode: normal;
}

.tb-entrar__titulo {
  margin-top: var(--space-8);
}

.tb-entrar__sub {
  color: var(--color-text-light);
}

.tb-entrar__dev {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px dashed var(--color-breathe-300);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* ---- Casca autenticada: barra no topo, largura toda para os quadros ------ */
.tb-app {
  min-height: 100vh;
}

.tb-topo {
  position: sticky;
  top: 0;
  z-index: 30;
  gap: var(--space-16);
  padding: 0 var(--space-24);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-breathe-200);
}

.tb-topo__marca {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  text-decoration: none;
}

.tb-produto {
  color: var(--color-primary);
}

.tb-topo__usuario {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.tb-topo__quem {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.tb-topo__quem > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tb-conteudo {
  min-width: 0;
}

/* ---- Página: filtros + duas seções empilhadas ---------------------------- */
.tb-pagina {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-20) var(--space-24) var(--space-48);
}

.tb-filtros {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.tb-filtros__grupo {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

/* Squads: filtro + botão de gerenciar, antes do seletor de visão. */
.tb-squads {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.tb-squads__gerenciar {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-breathe-300);
  border-radius: var(--radius-12);
  background: var(--color-white);
  color: var(--color-text);
}

.tb-squads__gerenciar:focus-visible {
  outline: none;
  box-shadow: var(--ring-pink);
}

.tb-squads__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  overflow-y: auto;
}

.tb-squads__novo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.tb-squads__novo .rnv-btn {
  margin-top: 26px; /* alinha com o input, abaixo do label */
}

.tb-squads__campo {
  flex: 1;
  min-width: 0;
}

.tb-squads__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-breathe-200);
  border-radius: var(--radius-16);
  overflow: hidden;
}

.tb-squads__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 52px;
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
}

.tb-squads__item + .tb-squads__item {
  border-top: 1px solid var(--color-breathe-200);
}

.tb-squads__nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tb-squads__excluir {
  color: var(--color-error);
}

.tb-squads__confirmar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
  width: 100%;
}

.tb-squads__acoes {
  display: flex;
  gap: var(--space-8);
}

/* Seletor de visão (Tudo · Iniciativas · Tasks) — .rnv-tabs--pill do DS. */
.tb-visao {
  background: var(--color-breathe-100);
  overflow: visible;
}

.tb-visao .rnv-tabs__item {
  position: relative;
  min-height: 36px;
  color: var(--color-text-light);
}

.tb-visao .rnv-tabs__item.active {
  color: var(--color-text);
}

.tb-visao .rnv-tabs__item:focus-visible {
  outline: none;
  box-shadow: var(--ring-pink);
}

.tb-filtros__select {
  width: auto;
  min-width: 220px;
  height: 40px;
}

.rnv-filter-chip {
  min-height: 40px;
}

.rnv-filter-chip.is-active {
  background-position: 100% 0;
  color: var(--color-white);
}

.tb-secao {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  scroll-margin-top: 80px; /* âncora não fica atrás da barra fixa */
}

.tb-secao + .tb-secao {
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-breathe-200);
}

.tb-secao__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.tb-secao__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--space-8) var(--space-12);
  flex-wrap: wrap;
}

/* ---- Kanban por iniciativa dentro de Tasks ------------------------------- */
.tb-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.tb-grupo + .tb-grupo {
  margin-top: var(--space-12);
}

.tb-grupo__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8) var(--space-16);
  flex-wrap: wrap;
  padding: 0 var(--space-4);
}

.tb-grupo__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

/* Cabeçalho do kanban de uma iniciativa (dentro de Tasks): mesma faixa laranja do card. */
.tb-grupo__topo--iniciativa {
  padding: var(--space-8) var(--space-12) var(--space-8) var(--space-16);
  border-radius: var(--radius-12);
  background: var(--color-warm-600);
  color: var(--color-white);
}

.tb-grupo__topo--iniciativa .tb-grupo__nome,
.tb-grupo__topo--iniciativa .tb-progresso__pct,
.tb-grupo__topo--iniciativa .tb-muted {
  color: var(--color-white);
}

.tb-grupo__topo--iniciativa .tb-progresso__barra {
  background: var(--color-warm-700);
}

.tb-grupo__topo--iniciativa .tb-progresso__preenchido,
.tb-grupo__topo--iniciativa .tb-progresso__preenchido.is-completo {
  background: var(--color-white);
}

.tb-progresso {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 200px;
}

.tb-progresso__barra {
  position: relative;
  flex: 1;
  min-width: 96px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-breathe-200);
  overflow: hidden;
}

.tb-progresso__preenchido {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

.tb-progresso__preenchido.is-completo {
  background: var(--color-vivid-600);
}

.tb-progresso__pct {
  min-width: 36px;
  text-align: right;
}

.tb-progresso__conta {
  white-space: nowrap;
}

/* Versão compacta, dentro do card de iniciativa. */
.tb-progresso--compacto {
  min-width: 0;
  width: 100%;
  gap: var(--space-8);
}

.tb-progresso--compacto .tb-progresso__barra {
  min-width: 0;
  height: 4px;
}

.tb-progresso--compacto .tb-progresso__pct {
  min-width: 32px;
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.tb-cartao__sem-tasks {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-muted);
}

/* ---- Visão "Concluídas" (RN-14): grade, não kanban ---------------------- */
.tb-concluidas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-12);
}

.tb-concluidas__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.tb-concluidas__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 0 var(--space-4);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line-height);
  color: var(--color-text-light);
}

/* Na grade não há onde soltar: o card não parece arrastável. */
.tb-concluidas .tb-cartao {
  cursor: pointer;
}

.tb-secao__vazia {
  padding: var(--space-8) 0;
}

/* Quatro colunas que DIVIDEM a largura da tela — sem rolagem horizontal. */
.tb-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-12);
  align-items: start;
}

.tb-coluna {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-height: 64px;
  min-width: 0;
  padding: var(--space-8);
  border-radius: var(--radius-16);
  background: var(--color-breathe-100);
  border: 2px solid transparent;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.tb-coluna.is-over {
  border-color: var(--color-primary);
  background: var(--color-warm-50);
}

.tb-coluna__topo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-4) 0;
}

.tb-coluna__topo::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-grafitti-300);
}

.tb-coluna--em_andamento .tb-coluna__topo::before {
  background: var(--color-sky-500);
}
.tb-coluna--aguardando .tb-coluna__topo::before {
  background: var(--color-solar-500);
}
.tb-coluna--concluido .tb-coluna__topo::before {
  background: var(--color-vivid-600);
}

.tb-coluna__topo h3 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tb-coluna__contagem {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

.tb-coluna__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* ---- Card compacto -------------------------------------------------------- */
.tb-cartao {
  position: relative;
  padding: 0;
  border-radius: var(--radius-12);
  background: var(--color-white);
  touch-action: manipulation;
  cursor: grab;
}

.tb-cartao.is-dragging {
  z-index: 50;
  cursor: grabbing;
  box-shadow: var(--shadow-lg);
  opacity: 0.92;
}

.tb-cartao__abrir {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  min-height: 44px;
  padding: var(--space-8) var(--space-12);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: inherit;
  border-radius: inherit;
}

.tb-cartao__abrir:focus-visible {
  outline: none;
  box-shadow: var(--ring-pink);
}

/* Título em até 2 linhas: o card não cresce com título longo. */
.tb-cartao__titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line-height);
  font-weight: var(--font-weight-medium);
  padding-right: var(--space-20);
  overflow-wrap: anywhere;
}

.tb-cartao__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-light);
  min-width: 0;
}

.tb-cartao__data,
.tb-cartao__responsavel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  white-space: nowrap;
}

.tb-cartao__nome {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-cartao__data.is-atrasado {
  color: var(--color-error);
  font-weight: var(--font-weight-semibold);
}

/* ---- Card de iniciativa: laranja com fonte branca (pedido do Lord, 03/11) ---
   Fundo warm-600 (#D0442C): o laranja mais forte da paleta Nova que passa
   WCAG AA com texto branco pequeno (4,62:1). O warm-500 (#EA5339) dá 3,62:1 e
   o solar-500 (#F18F33) 2,41:1 — reprovam. Detalhes em warm-700 e branco. */
.tb-cartao--iniciativa {
  background: var(--color-warm-600);
  border-color: var(--color-warm-600);
  color: var(--color-white);
}

.tb-cartao--iniciativa:hover {
  background: var(--color-warm-700);
  border-color: var(--color-warm-700);
}

.tb-cartao--iniciativa .tb-cartao__titulo {
  font-weight: var(--font-weight-semibold);
}

.tb-cartao--iniciativa .tb-cartao__meta,
.tb-cartao--iniciativa .tb-cartao__sem-tasks,
.tb-cartao--iniciativa .tb-muted,
.tb-cartao--iniciativa .tb-progresso__pct {
  color: var(--color-white);
}

.tb-cartao--iniciativa .tb-cartao__abrir:focus-visible {
  box-shadow:
    0 0 0 3px var(--color-white),
    0 0 0 5px var(--color-warm-800);
}

/* Avatar invertido: branco com iniciais em warm-700 (6,61:1). */
.tb-cartao--iniciativa .tb-avatar {
  background: var(--color-white);
  color: var(--color-warm-700);
}

/* Atrasada: o vermelho de erro some no laranja — vira etiqueta branca. */
.tb-cartao--iniciativa .tb-cartao__data.is-atrasado {
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-warm-700);
}

/* Barra: trilho warm-700, preenchimento branco. */
.tb-cartao--iniciativa .tb-progresso__barra {
  background: var(--color-warm-700);
}

.tb-cartao--iniciativa .tb-progresso__preenchido,
.tb-cartao--iniciativa .tb-progresso__preenchido.is-completo {
  background: var(--color-white);
}

.tb-cartao--iniciativa .tb-cartao__mover {
  border-color: var(--color-warm-700);
  background-color: var(--color-warm-700);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 9l-3 3 3 3M19 9l3 3-3 3M2 12h20'/%3E%3C/svg%3E");
}

.tb-cartao--iniciativa .tb-cartao__mover:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white);
}

/* "Mover para…" (RF-14): alternativa ao arraste, visível no foco e no hover. */
.tb-cartao__mover {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--color-breathe-300);
  border-radius: var(--radius-8);
  background: var(--color-white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2422' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 9l-3 3 3 3M19 9l3 3-3 3M2 12h20'/%3E%3C/svg%3E")
    center / 14px no-repeat;
  color: transparent;
  appearance: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.tb-cartao:hover .tb-cartao__mover,
.tb-cartao:focus-within .tb-cartao__mover {
  opacity: 1;
}

.tb-cartao__mover:focus-visible {
  outline: none;
  box-shadow: var(--ring-pink);
}

.tb-cartao__mover option {
  color: var(--color-text);
}

@media (hover: none) {
  .tb-cartao__mover {
    opacity: 1;
  }
}

/* ---- Detalhe -------------------------------------------------------------- */
.tb-detalhe__form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.tb-detalhe__corpo {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.tb-detalhe__rodape {
  display: flex;
  gap: var(--space-12);
}

.tb-detalhe__acoes {
  display: flex;
  gap: var(--space-12);
}

.tb-somente-leitura {
  display: flex;
  align-items: center;
  background: var(--color-bg-subtle);
  color: var(--color-text-light);
  margin: 0;
}

.tb-vinculadas {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-16);
  border-radius: var(--radius-16);
  background: var(--color-bg-subtle);
}

.tb-vinculadas__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.tb-vinculadas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.tb-vinculadas__lista li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* ---- Responsivo ---------------------------------------------------------- */
/* Tablet: 2 colunas por linha (A fazer | Em andamento / Aguardando | Concluído). */
@media (max-width: 1024px) {
  .tb-kanban {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tb-topo__quem {
    display: none;
  }
}

/* Celular: colunas empilhadas, tudo na rolagem vertical. */
@media (max-width: 640px) {
  .tb-topo {
    padding: 0 var(--space-16);
    gap: var(--space-8);
  }

  .tb-topo .tb-logo {
    height: 14px;
  }

  .tb-topo__marca .tb-produto,
  .tb-topo__usuario .tb-avatar {
    display: none;
  }

  .tb-filtros,
  .tb-filtros__grupo,
  .tb-visao,
  .tb-squads {
    width: 100%;
  }

  .tb-squads .tb-filtros__select {
    flex: 1;
  }

  .tb-visao .rnv-tabs__item {
    flex: 1;
    font-size: var(--body-sm-size);
    justify-content: center;
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  .tb-progresso {
    width: 100%;
    min-width: 0;
  }

  .tb-pagina {
    padding: var(--space-16) var(--space-16) var(--space-40);
    gap: var(--space-20);
  }

  .tb-kanban {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .tb-secao__sub {
    display: none;
  }

  .tb-filtros__select {
    flex: 1;
    min-width: 0;
  }

  .tb-detalhe__rodape,
  .tb-detalhe__acoes {
    flex-direction: column-reverse;
    width: 100%;
  }

  .tb-detalhe__acoes .rnv-btn,
  .tb-detalhe__rodape > .rnv-btn {
    width: 100%;
  }

  .rnv-toast {
    left: var(--space-16);
    right: var(--space-16);
    bottom: var(--space-16);
  }
}

/* Telas grandes: aproveita a altura sem esticar os cards. */
@media (min-width: 1600px) {
  .tb-pagina {
    padding-left: var(--space-40);
    padding-right: var(--space-40);
  }
}