/* assets/styles.css */
* { box-sizing: border-box; }
body { font-family: Inter, Arial, sans-serif; margin: 24px; background: #0b1220; color: #e8eefc; }
a { color: #a8c1ff; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 12px; }

/* Projeto atrasando: chegando perto/ultrapassou 30 dias desde criado e ainda não entrou em suporte */
.table tr.row-overdue-created td{
  background: rgba(239, 68, 68, 0.14);
}
.table tr.row-overdue-created td:first-child{
  box-shadow: inset 4px 0 0 rgba(239, 68, 68, 0.70);
}

/* Quando o suporte acabou e está pronto para finalizar */
.table tr.row-ready-finalize td{
  background: rgba(34, 197, 94, 0.12);
}
.table tr.row-ready-finalize td:first-child{
  box-shadow: inset 4px 0 0 rgba(34, 197, 94, 0.70);
}

/* Seu alerta vermelho dos 30 dias (já usa row-overdue-created no index.php) */
.table tr.row-overdue-created td{
  background: rgba(239, 68, 68, 0.12);
}
.table tr.row-overdue-created td:first-child{
  box-shadow: inset 4px 0 0 rgba(239, 68, 68, 0.70);
}

/* Verde: Necessário finalizar */
.table tr.row-needs-finalize td{
  background: rgba(34, 197, 94, 0.12);
}
.table tr.row-needs-finalize td:first-child{
  box-shadow: inset 4px 0 0 rgba(34, 197, 94, 0.70);
}



.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; }
.btn { background:#3b82f6; color:#fff; padding:12px 14px; border-radius:12px; border:none; cursor:pointer; font-weight:600; }
.btn.secondary { background:#0f172a; border:1px solid #334155; }
.btn.small { border-radius:10px; font-size: 14px; }
.table { width:100%; border-collapse: collapse; margin-top: 8px; }
.table th, .table td { padding: 12px; border-bottom: 1px solid #1f2937; text-align: left; }
.table tr:hover { background: #0f1a33; }
.card { background:#0f172a; border:1px solid #1f2937; border-radius:16px; padding:16px; }
.grid { display:grid; gap:16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.badge { padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; display:inline-block; }
.badge.red { background:#7f1d1d; color:#fecaca; }
.badge.yellow { background:#78350f; color:#fde68a; }
.badge.green { background:#064e3b; color:#bbf7d0; }
.badge.gray { background:#334155; color:#cbd5e1; }
.kv { display:grid; grid-template-columns: 180px 1fr; gap:8px; }
hr { border:0; border-top:1px solid #1f2937; margin: 16px 0; }
input, select { background:#0b1220; color:#e8eefc; border:1px solid #334155; padding:10px 12px; border-radius:10px; width:100%; }
label { font-size: 14px; color:#b8c3e0; }
form .row { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.small { font-size:12px; color:#ffffff; }
.stage { padding:8px 12px; background:#0b1220; border:1px dashed #334155; border-radius:12px; }
.stage.done { opacity:0.7; border: 1px solid #6eed6e;}
.stage.current { border-color:#3b82f6; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
      .badge.stage-1 { background:#1e293b; color:#93c5fd; }  /* Onboarding */
.badge.stage-2 { background:#0f2f2f; color:#99f6e4; }  /* Planejamento */
.badge.stage-3 { background:#2f1f2f; color:#fbcfe8; }  /* Implantação */
.badge.stage-4 { background:#3a250e; color:#fed7aa; }  /* Alinhamento */
.badge.stage-5 { background:#1f2a1f; color:#bbf7d0; }  /* Treinamento */
.badge.stage-6 { background:#312e81; color:#c7d2fe; }  /* Suporte */
.badge.stage-7 { background:#312e81; color:#c7d2fe; }  /* Suporte */
.badge.stage-8 {     background: #ffad2d;
    color: #61310a; } 
.badge.stage-9 { background:#312e81; color:#c7d2fe; } 
.badge.stage-10 { background:#312e81; color:#c7d2fe; } 

/* Badges por STATUS */
.badge.status-active    { background:#0b3a2e; color:#a7f3d0; }   /* Em andamento */
.badge.status-support   { background:#1e293b; color:#93c5fd; }   /* Em suporte */
.badge.status-completed { background:#14532d; color:#86efac; }   /* Finalizado */
.badge.status-canceled  { background:#4a044e; color:#f5d0fe; }   /* Cancelado */

.user-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.2);
}

.user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.user-info strong {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.user-role {
  font-size: 11px;
  opacity: .7;
}

.footer {
  text-align: center;
  padding: 16px;
  margin-top: 40px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}





/* Badges por ETAPA */