@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

:root {
  --azul: #000525;
  --amarelo: #ffc420;
  --branco: #ffffff;
  --cinza: #dddddd;
  --shadow-color: rgba(0, 0, 0, 0.15);
  --highlight: #ff1d50;
  --font-title: 'League Gothic', sans-serif;
  --font-text: 'Poppins', sans-serif;
  --border-radius: 12px;
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
}

body{
  background-color: var(--azul);
}

/* Wrapper do gráfico com rolagem horizontal */
.gantt-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  /* comportamento suave no trackpad */
  -webkit-overflow-scrolling: touch;
}

/* Cabeçalhos da grid (meses) — ajuste conforme seu tema */
.gantt-month, .gantt-head-label {
  background: #111a66;
  color: #ffc420;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
}

/* Coluna "Tarefa" fixa quando rolar na horizontal */
.task-label, .gantt-head-label {
  position: sticky;
  left: 0;
  background: #0d1452; /* combine com seu tema de tabela */
}

/* Células padrão e ativas (tarefa ocupa o mês) */
.gantt-cell {
  border-top: 1px solid rgba(255,255,255,.06);
  border-right: 1px solid rgba(255,255,255,.06);
  min-height: 40px;
}
.gantt-cell.active {
  background: rgba(255, 196, 32, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 32, 0.18);
}

/* Linhas de hoje/hover (posicionadas por JS dentro do .gantt-scroll) */
#todayLine, #hoverLine {
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ff5d8f;
  pointer-events: none;
}
#hoverLine { background: rgba(255,255,255,.35); }

/* ===== Container ===== */
.gantt-container {
  max-width: 1200px;
  margin: clamp(72px, 10vw, 100px) auto clamp(24px, 6vw, 40px);
  padding: 0 clamp(10px, 2.5vw, 20px);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.gantt-container h1 {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  color: var(--amarelo);
  margin: 0;
}

.controls {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.6vw, 10px);
  color: var(--amarelo);
  font-family: var(--font-title);
  letter-spacing: .5px;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  flex-wrap: wrap;
}

.controls button, #addTaskBtn {
  background: var(--amarelo);
  color: var(--azul);
  border: none;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 700;
  transition: background var(--transition-medium), transform var(--transition-fast);
}
.controls button:hover, #addTaskBtn:hover {
  background: var(--highlight);
  color: var(--branco);
  transform: translateY(-1px);
}

/* ===== Chart wrapper + scroll ===== */
.gantt-scroll{
  width: 100%;
  overflow-x: auto;                 /* scroll no mobile */
  -webkit-overflow-scrolling: touch;
}

#ganttChart {
  position: relative;               /* necessário para as linhas overlay */
  margin-top: 16px;
  background: #0b1030;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px var(--shadow-color);
  padding: clamp(10px, 2.2vw, 12px);
  color: var(--branco);
  font-family: var(--font-text);
  min-width: 720px;                 /* garante estrutura mínima da grade */
}

/* Tabela do Gantt */
.gantt-table {
  display: grid;
  grid-template-columns: 180px repeat(7, 1fr); /* 1 col de rótulo + 7 dias */
  row-gap: 6px;
  column-gap: clamp(4px, 1vw, 6px);
}

/* Cabeçalho */
.gantt-header { display: contents; }
.gantt-head-label {
  grid-column: 1 / 2;
  padding: clamp(6px, 1.6vw, 8px) 10px;
  background: #001a4d;
  border-radius: 8px;
  font-weight: 700;
  text-align: left;
  font-size: clamp(.9rem, 2.2vw, 1rem);
}
.gantt-day {
  padding: clamp(6px, 1.6vw, 8px) 6px;
  text-align: center;
  background: #001a4d;
  border-radius: 8px;
  font-weight: 700;
  font-size: clamp(.85rem, 2vw, .95rem);
}

/* Linha de tarefa */
.gantt-row { display: contents; }
.task-label {
  grid-column: 1 / 2;
  align-self: center;
  padding: 6px 8px;
  color: var(--branco);
  opacity: .95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;               /* para o botão excluir */
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: clamp(.9rem, 2.2vw, 1rem);
}
.gantt-cell {
  height: clamp(30px, 4vw, 34px);
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}

/* Barra preenchida */
.gantt-cell.active::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--highlight), #ff4d70);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* ===== Tooltip ===== */
.tooltip {
  position: fixed;
  pointer-events: none;
  background: #111a;
  backdrop-filter: blur(6px);
  color: var(--branco);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: .85rem;
  border: 1px solid rgba(255,255,255,.15);
  transform: translate(-50%, -120%);
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 6; /* acima das linhas */
}

/* ===== Linhas overlay (hoje e hover) ===== */
#todayLine, #hoverLine {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  transform: translateX(-1px);
}
#todayLine { background: var(--amarelo); opacity: .9; }
#hoverLine { background: rgba(255,255,255,0.6); }

/* ===== Modal ===== */
.modal {
  display: none;
  position: fixed;
  z-index: 1000; inset: 0;
  background: rgba(0,0,0,.6);
  font-family: var(--font-text);
}
.modal-content {
  width: 92%; max-width: 420px;
  margin: 8% auto; padding: 20px;
  background: var(--azul);
  color: var(--branco);
  border-radius: var(--border-radius);
  box-shadow: 0 10px 24px rgba(0,0,0,.4);
}
.modal-content h2 { font-family: var(--font-title); margin: 0 0 12px 0; }
.modal-content label { display: block; margin-top: 10px; }
.modal-content input {
  width: 100%; margin-top: 6px; padding: 10px;
  background: #111b; border: 1px solid #334; color: var(--branco);
  border-radius: var(--border-radius);
  font-family: var(--font-text);
}
.modal-content button {
  margin-top: 14px; width: 100%;
  background: var(--amarelo); color: var(--azul);
  padding: 10px 12px; border: 0; border-radius: var(--border-radius);
  font-weight: 700; cursor: pointer;
  font-family: var(--font-text)
}
.close { float: right; font-size: 22px; cursor: pointer; }

/* Botão excluir dentro do rótulo da tarefa */
.delete-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--branco);
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.delete-btn:hover {
  background: #ff345f22;
  border-color: var(--highlight);
  transform: translateY(-1px);
}
.delete-btn:active { transform: translateY(0); }

/* ===== Responsivo ===== */
@media (max-width: 900px) {
  .gantt-table { grid-template-columns: 160px repeat(7, 1fr); } /* rótulo menor */
}
@media (max-width: 700px) {
  .controls { font-size: 1rem; gap: 6px; }
  .gantt-table { grid-template-columns: 140px repeat(7, 1fr); }
  #ganttChart { min-width: 640px; } /* permite scroll mais cedo */
}
@media (max-width: 520px){
  .gantt-table { grid-template-columns: 120px repeat(7, 1fr); }
  .modal-content{ width: 94%; margin: 10% auto; padding: 16px; }
}

/* Foco visível para acessibilidade */
.gantt-head-label:focus-visible,
.gantt-day:focus-visible,
.task-label:focus-visible,
.delete-btn:focus-visible,
.controls button:focus-visible,
#addTaskBtn:focus-visible{
  outline: 3px solid var(--highlight);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Preferência por menos animação */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important }
}