/* ==========================================================================
   Componentes base - Plataforma de Gestao de Projetos
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

/* Rolagem suave e sem barra visivel nas areas verticais/secundarias com
   scroll proprio. O scroll continua funcional (roda/teclado/touch); so o
   indicador some. As areas com rolagem lateral principal (quadro Kanban e
   grid do cronograma) mantem uma barra fina e visivel logo abaixo, para
   deixar claro que ha mais colunas para o lado. */
body,
.sidebar,
.kanban-col-body,
.gantt-scroll,
.modal,
.drawer,
#notif-panel,
.tabs {
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.kanban-col-body::-webkit-scrollbar,
.gantt-scroll::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.drawer::-webkit-scrollbar,
#notif-panel::-webkit-scrollbar,
.tabs::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Barra de rolagem lateral fina e colorida - discreta, mas sempre visivel
   quando ha conteudo fora da tela (quadro Kanban, grid do cronograma). */
.kanban-board,
.table-wrap {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--brand) var(--surface-2);
}
.kanban-board::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
  height: 8px;
}
.kanban-board::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track {
  background: var(--surface-2);
}
.kanban-board::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--brand);
  border-radius: var(--radius-pill);
}
.kanban-board::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--brand-strong);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 var(--sp-4); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0 0 var(--sp-4); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Foco visivel por teclado */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------------- Layout raiz ---------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) var(--sp-5);
  gap: var(--sp-2);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), width var(--dur-base) var(--ease), padding var(--dur-base) var(--ease);
}

.sidebar-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.sidebar-brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-link.active { background: var(--brand-soft); color: var(--brand-strong); }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  border-bottom: none;
  background: var(--signature-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-7);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: var(--shadow-2);
}
.topbar .btn-ghost { color: rgba(255, 255, 255, .85); }
.topbar .btn-ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.topbar .text-muted { color: rgba(255, 255, 255, .8); }
.topbar #notif-panel { color: var(--text); }

.page {
  padding: var(--sp-7);
  flex: 1;
}

.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); gap: var(--sp-5); flex-wrap: wrap; }
.page-header h1 { position: relative; padding-left: var(--sp-5); }
.page-header h1::before {
  content: "";
  position: absolute; left: 0; top: .1em; bottom: .12em;
  width: 5px; border-radius: var(--radius-pill);
  background: var(--signature-grad);
}

/* ---------------- Botoes ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--brand-contrast); }
.btn-primary:hover { background: var(--brand-strong); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--status-bloqueado); color: #fff; }
.btn-danger:hover { filter: brightness(0.92); }
.btn-sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------------- Badges ---------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px var(--sp-4) 3px var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.badge-status-backlog { background: var(--status-backlog-soft); color: var(--status-backlog); }
.badge-status-backlog .dot { background: var(--status-backlog); }
.badge-status-aguardando_desenvolvimento { background: var(--status-aguardando-dev-soft); color: var(--status-aguardando-dev); }
.badge-status-aguardando_desenvolvimento .dot { background: var(--status-aguardando-dev); }
.badge-status-em_desenvolvimento { background: var(--status-em-dev-soft); color: var(--status-em-dev); }
.badge-status-em_desenvolvimento .dot { background: var(--status-em-dev); }
.badge-status-em_teste { background: var(--status-em-teste-soft); color: var(--status-em-teste); }
.badge-status-em_teste .dot { background: var(--status-em-teste); }
.badge-status-aguardando_homologacao { background: var(--status-aguardando-homolog-soft); color: var(--status-aguardando-homolog); }
.badge-status-aguardando_homologacao .dot { background: var(--status-aguardando-homolog); }
.badge-status-em_homologacao { background: var(--status-em-homolog-soft); color: var(--status-em-homolog); }
.badge-status-em_homologacao .dot { background: var(--status-em-homolog); }
.badge-status-concluido { background: var(--status-concluido-soft); color: var(--status-concluido); }
.badge-status-concluido .dot { background: var(--status-concluido); }
.badge-status-bloqueado { background: var(--status-bloqueado-soft); color: var(--status-bloqueado); }
.badge-status-bloqueado .dot { background: var(--status-bloqueado); }

.badge-prioridade-baixa { color: var(--heat-baixa); background: color-mix(in srgb, var(--heat-baixa) 14%, transparent); }
.badge-prioridade-media { color: var(--heat-media); background: color-mix(in srgb, var(--heat-media) 14%, transparent); }
.badge-prioridade-alta { color: var(--heat-alta); background: color-mix(in srgb, var(--heat-alta) 14%, transparent); }
.badge-prioridade-critica { color: var(--heat-critica); background: color-mix(in srgb, var(--heat-critica) 14%, transparent); }

/* ---------------- Avatares ---------------- */
.avatar {
  width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: var(--fs-2xs);
  flex-shrink: 0;
}
.avatar-sm { width: 22px; height: 22px; font-size: 0.65rem; }

/* ---------------- Cards ---------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}
.card-pad { padding: var(--sp-6); }

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--status-backlog);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.project-card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.project-card[data-saude="ok"] { border-top-color: var(--status-concluido); }
.project-card[data-saude="atencao"] { border-top-color: var(--heat-alta); }
.project-card[data-saude="atrasado"] { border-top-color: var(--status-bloqueado); }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-6); }

.health-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.health-ok { background: var(--status-concluido); }
.health-atencao { background: var(--heat-alta); }
.health-atrasado { background: var(--status-bloqueado); }

/* ---------------- Progresso ---------------- */
.progress-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--signature-grad);
  border-radius: var(--radius-pill);
  transition: width var(--dur-base) var(--ease);
}

/* ---------------- Kanban ---------------- */
.kanban-toolbar { display: flex; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-5); flex-wrap: wrap; }
.kanban-board-wrap { position: relative; }
.kanban-board { display: flex; gap: var(--sp-5); overflow-x: auto; padding-bottom: var(--sp-4); align-items: flex-start; }
.kanban-scroll-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; line-height: 1; color: var(--text); cursor: pointer; z-index: 10;
  transition: background-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.kanban-scroll-btn:hover { background: var(--surface-2); }
.kanban-scroll-left { left: -16px; }
.kanban-scroll-right { right: -16px; }
.kanban-scroll-btn:disabled { opacity: 0; pointer-events: none; }
.kanban-col {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--status-backlog);
  min-width: 268px;
  max-width: 268px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 260px);
  transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
/* Cada coluna herda a cor do status que representa - reforca a leitura
   visual do quadro de atividades (mesma paleta usada nos badges). */
.kanban-col:has(.badge-status-backlog) { background: var(--status-backlog-soft); border-top-color: var(--status-backlog); }
.kanban-col:has(.badge-status-aguardando_desenvolvimento) { background: var(--status-aguardando-dev-soft); border-top-color: var(--status-aguardando-dev); }
.kanban-col:has(.badge-status-em_desenvolvimento) { background: var(--status-em-dev-soft); border-top-color: var(--status-em-dev); }
.kanban-col:has(.badge-status-em_teste) { background: var(--status-em-teste-soft); border-top-color: var(--status-em-teste); }
.kanban-col:has(.badge-status-aguardando_homologacao) { background: var(--status-aguardando-homolog-soft); border-top-color: var(--status-aguardando-homolog); }
.kanban-col:has(.badge-status-em_homologacao) { background: var(--status-em-homolog-soft); border-top-color: var(--status-em-homolog); }
.kanban-col:has(.badge-status-concluido) { background: var(--status-concluido-soft); border-top-color: var(--status-concluido); }
.kanban-col:has(.badge-status-bloqueado) { background: var(--status-bloqueado-soft); border-top-color: var(--status-bloqueado); }
.kanban-col-head {
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: var(--fs-xs);
  border-bottom: 1px solid var(--border);
}
.kanban-col-count { font-family: var(--font-mono); color: var(--text-muted); }
.kanban-col-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); overflow-y: auto; }
.kanban-col-body.drag-over { background: var(--brand-soft); border-radius: var(--radius-sm); }

.kanban-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  cursor: grab;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.kanban-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.kanban-card.sortable-ghost { opacity: 0.4; }
.kanban-card.sortable-chosen { box-shadow: var(--shadow-2); transform: scale(1.02); }
.kanban-card[data-prioridade="baixa"] { border-left-color: var(--heat-baixa); }
.kanban-card[data-prioridade="media"] { border-left-color: var(--heat-media); }
.kanban-card[data-prioridade="alta"] { border-left-color: var(--heat-alta); }
.kanban-card[data-prioridade="critica"] { border-left-color: var(--heat-critica); }

.kanban-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.kanban-card-title { font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.kanban-card-fase { font-size: var(--fs-2xs); color: var(--text-muted); background: var(--surface-2); padding: 2px var(--sp-3); border-radius: var(--radius-pill); }
.kanban-card-dates { font-size: var(--fs-2xs); color: var(--text-muted); font-family: var(--font-mono); display: flex; align-items: center; gap: var(--sp-2); }
.kanban-card-dates .atrasada { color: var(--status-bloqueado); font-family: var(--font-ui); font-weight: 600; }
.kanban-card-footer { display: flex; align-items: center; justify-content: space-between; }
.kanban-card.kanban-card-milestone { border-left: 4px solid var(--heat-critica); }

/* ---------------- Tabela densa ---------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
table.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.data-table thead th {
  position: sticky; top: 0; background: var(--signature-grad);
  text-align: left; padding: var(--sp-3) var(--sp-4);
  font-weight: 600; color: #fff;
  border-bottom: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 5;
}
.data-table tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table .fase-row td { background: var(--surface-2); font-weight: 600; font-family: var(--font-display); }

/* Celulas editaveis inline: sem caixa ate o usuario interagir, para o grid
   ler como uma planilha fluida em vez de um formulario cheio de campos. */
.data-table td select,
.data-table td input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.data-table td select { overflow: hidden; text-overflow: ellipsis; }
.data-table td input[type="number"] { cursor: text; }
.data-table td select:hover,
.data-table td input:hover { background: var(--surface-2); }
.data-table td select:focus,
.data-table td input:focus {
  background: var(--surface);
  border-color: var(--brand);
  cursor: text;
}
input[type="date"] { color-scheme: light; }
[data-theme="dark"] input[type="date"] { color-scheme: dark; }

/* Grid do cronograma: colunas proporcionais em vez de caixas rigidas do
   layout automatico do navegador - rola horizontalmente de forma suave
   (scroll silencioso ja habilitado em .table-wrap) em telas menores. */
/* Larguras das colunas vem do <colgroup> (ver views/projeto/cronograma.php),
   ajustavel pelo usuario arrastando a alca .col-resizer de cada cabecalho -
   preferencia persistida em localStorage (ver cronograma.js). */
#tabela-cronograma { table-layout: fixed; }
#tabela-cronograma td:nth-child(1),
#tabela-cronograma td:nth-child(13) { white-space: normal; }
#tabela-cronograma th { position: relative; }
.col-resizer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 6px;
  cursor: col-resize; touch-action: none;
  border-right: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.col-resizer:hover, .col-resizer.resizando { border-right-color: rgba(255, 255, 255, .7); }

.desvio-positivo { color: var(--status-bloqueado); font-weight: 600; }
.desvio-neutro { color: var(--text-muted); }
.critico-flag { color: var(--heat-critica); font-weight: 700; }

/* ---------------- Forms ---------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.field label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.field input, .field select, .field textarea {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); }
.field-row { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 180px; }
.field-hint { font-size: var(--fs-2xs); color: var(--text-muted); }
.field-error { font-size: var(--fs-2xs); color: var(--status-bloqueado); }

/* ---------------- Modal / Drawer ---------------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(14, 20, 26, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: var(--sp-6);
}
.modal-backdrop[hidden] { display: none; }
.modal {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y: auto;
  padding: var(--sp-7);
  transition: background-color var(--dur-base) var(--ease);
}
.modal::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--signature-grad);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(480px, 100vw);
  background: var(--surface); box-shadow: var(--shadow-2);
  z-index: 100; padding: var(--sp-7); overflow-y: auto;
  transform: translateX(100%); transition: transform var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.drawer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--signature-grad);
}
.drawer.open { transform: translateX(0); }

/* ---------------- Toast ---------------- */
.toast-region { position: fixed; bottom: var(--sp-7); right: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-3); z-index: 200; }
.toast {
  background: var(--text); color: var(--bg);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2); font-size: var(--fs-xs); min-width: 220px;
  animation: toast-in var(--dur-base) var(--ease);
}
.toast-erro { background: var(--status-bloqueado); color: #fff; }
.toast-sucesso { background: var(--status-concluido); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------- Tooltip ---------------- */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm); font-size: var(--fs-2xs); white-space: nowrap; z-index: 50;
}

/* ---------------- Empty state ---------------- */
.empty-state { text-align: center; padding: var(--sp-9) var(--sp-6); color: var(--text-muted); }
.empty-state h3 { color: var(--text); }

/* ---------------- Skeleton ---------------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------- Gantt ---------------- */
.gantt-wrap { display: flex; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.gantt-side { width: 240px; flex-shrink: 0; border-right: 1px solid var(--border); }
.gantt-side-row { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 40px; display: flex; align-items: center; }
.gantt-scroll { flex: 1; overflow-x: auto; position: relative; }
.gantt-header { display: flex; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 5; }
.gantt-header-cell { flex-shrink: 0; padding: var(--sp-3) var(--sp-2); font-size: var(--fs-2xs); color: var(--text-muted); text-align: center; border-right: 1px solid var(--border); }
.gantt-row { position: relative; height: 40px; border-bottom: 1px solid var(--border); }
.gantt-bar-baseline {
  position: absolute; height: 6px; top: 8px; border-radius: var(--radius-pill);
  background: var(--text-muted); opacity: 0.4;
}
.gantt-bar {
  position: absolute; height: 20px; top: 16px; border-radius: var(--radius-sm);
  background: var(--brand); display: flex; align-items: center; padding: 0 var(--sp-3);
  font-size: var(--fs-2xs); color: #fff; white-space: nowrap; overflow: hidden;
  box-shadow: var(--shadow-1);
}
.gantt-bar.critico { background: var(--heat-critica); }
.gantt-milestone {
  position: absolute; top: 10px; width: 16px; height: 16px;
  background: var(--heat-critica); transform: rotate(45deg); border-radius: 3px;
  box-shadow: var(--shadow-1);
}
.gantt-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--brand); z-index: 4; }
.gantt-dep-line { position: absolute; stroke: var(--text-muted); stroke-width: 1.5; fill: none; pointer-events: none; }
.gantt-legend { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-4); font-size: var(--fs-2xs); color: var(--text-muted); align-items: center; }
.gantt-legend-item { display: flex; align-items: center; gap: var(--sp-2); }
.gantt-legend-swatch { width: 12px; height: 12px; border-radius: 3px; }

/* ---------------- Matriz de risco ---------------- */
.risco-matriz { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 2px; max-width: 480px; }
.risco-matriz .cel { padding: var(--sp-4); text-align: center; font-size: var(--fs-2xs); font-weight: 600; border-radius: var(--radius-sm); }
.risco-matriz .head { background: transparent; color: var(--text-muted); font-weight: 600; }
.heat-1 { background: color-mix(in srgb, var(--heat-baixa) 25%, var(--surface)); }
.heat-2 { background: color-mix(in srgb, var(--heat-media) 30%, var(--surface)); }
.heat-3 { background: color-mix(in srgb, var(--heat-alta) 35%, var(--surface)); }
.heat-4 { background: color-mix(in srgb, var(--heat-critica) 40%, var(--surface)); }

/* ---------------- Workload ---------------- */
.workload-grid { display: grid; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.workload-cell { padding: var(--sp-3); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: var(--fs-xs); text-align: center; }
.workload-overload { background: var(--status-bloqueado-soft); color: var(--status-bloqueado); font-weight: 700; }

/* ---------------- Tabs (painel do projeto) ---------------- */
.tabs { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-6); overflow-x: auto; }
.tab-link { padding: var(--sp-4) var(--sp-5); font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.tab-link:hover { color: var(--text); text-decoration: none; background: var(--surface-2); }
.tab-link.active { color: #fff; background: var(--signature-grad); border-bottom-color: transparent; }
.tab-link.active:hover { color: #fff; }

/* ---------------- Utilitarios ---------------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--fs-xs); }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-6); }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius-md); padding: var(--sp-5); transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.stat-card .valor { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; }
.stat-card .label { font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------------- Responsividade ---------------- */
@media (max-width: 1279px) {
  .kanban-col { min-width: 240px; max-width: 240px; }
}

@media (min-width: 1024px) {
  /* Ocultar menu lateral: a sidebar recolhe para largura zero (o conteudo
     ganha o espaco) em vez do overlay usado no mobile. Estado persistido
     em localStorage e aplicado antes do primeiro paint (ver layouts/app.php). */
  html[data-sidebar="collapsed"] .sidebar {
    width: 0;
    padding: 0;
    border-right: 0;
    overflow: hidden;
  }
}

@media (max-width: 1023px) {
  .sidebar { position: fixed; left: 0; transform: translateX(-100%); transition: transform var(--dur-base) var(--ease); z-index: 90; }
  .sidebar.open { transform: translateX(0); }
}

@media (max-width: 767px) {
  .page { padding: var(--sp-5); }
  .gantt-side { width: 140px; }
  .kanban-board { flex-direction: column; }
  .kanban-col { min-width: 100%; max-width: 100%; max-height: none; }
  .field-row { flex-direction: column; }
  .app-footer { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

/* ---------------- Rodape ---------------- */
.app-footer {
  border-top: 3px solid transparent;
  border-image: var(--signature-grad) 1;
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: var(--sp-4) var(--sp-7);
  font-size: var(--fs-2xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.app-footer strong { color: #fff; }
.app-footer a { color: #fff; }