:root {
    --vermelho: #CC0000;
    --vermelho-hover: #a50000;
    --preto: #1a1a1a;
    --cinza-escuro: #3d4144;   /* barras: navbar e cabeçalhos de tabela */
    --cinza-claro: #f2f2f2;
    --borda: #e0e0e0;
    --branco: #ffffff;
}

/* ── Layout ─────────────────────────────────────── */
body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background-color: var(--cinza-claro);
}

.bg-fundo { background-color: var(--cinza-claro); }

/* ── Navbar ──────────────────────────────────────── */
#navbar-principal {
    background-color: var(--cinza-escuro) !important;
    border-bottom: 3px solid var(--vermelho);
    padding: .75rem 0;
}

#navbar-principal .navbar-brand {
    font-size: 1.2rem;
    letter-spacing: .02em;
}

.nav-link { color: #ccc !important; transition: color .15s; }
.nav-link:hover, .nav-link.ativo { color: var(--vermelho) !important; }
.nav-link.ativo { font-weight: 600; }

.badge-admin {
    background-color: var(--vermelho);
    color: #fff;
    font-size: .6rem;
    padding: 2px 6px;
    border-radius: 4px;
    vertical-align: middle;
}

/* ── Cards ───────────────────────────────────────── */
.card {
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--branco);
}

.card-filtros { border-left: 4px solid var(--vermelho); }

.stat-card {
    border-radius: 8px;
    border-left: 4px solid var(--vermelho);
    background: var(--branco);
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--borda);
}
.stat-card .stat-number { font-size: 2rem; font-weight: 700; color: var(--preto); }
.stat-card .stat-label  { font-size: .85rem; color: #666; margin-top: .25rem; }

/* ── Buttons ─────────────────────────────────────── */
.btn-vermelho {
    background-color: var(--vermelho);
    border-color: var(--vermelho);
    color: #fff;
}
.btn-vermelho:hover, .btn-vermelho:focus {
    background-color: var(--vermelho-hover);
    border-color: var(--vermelho-hover);
    color: #fff;
}

.btn-outline-vermelho {
    border-color: var(--vermelho);
    color: var(--vermelho);
}
.btn-outline-vermelho:hover {
    background-color: var(--vermelho);
    color: #fff;
}

/* ── Page header ─────────────────────────────────── */
.page-header {
    border-bottom: 2px solid var(--borda);
    padding-bottom: .75rem;
    margin-bottom: 1.5rem;
}
.page-header h4 { font-weight: 700; color: var(--preto); margin: 0; }

/* ── Table ───────────────────────────────────────── */
.table thead th {
    background-color: var(--cinza-escuro);
    color: #fff;
    font-weight: 500;
    border: none;
    padding: .75rem 1rem;
}
.table tbody tr:hover { background-color: #fafafa; }
.table td { padding: .65rem 1rem; vertical-align: middle; }

/* ── Status badges ───────────────────────────────── */
.badge-status {
    font-size: .75rem;
    padding: .35em .65em;
    border-radius: 4px;
    font-weight: 600;
}
.s-a-iniciar   { background:#6c757d; color:#fff; }
.s-pendente    { background:#ffc107; color:#212529; }
.s-andamento   { background:#0d6efd; color:#fff; }
.s-concluido   { background:#198754; color:#fff; }

/* ── Deadline ────────────────────────────────────── */
.deadline-atrasado { color: var(--vermelho) !important; font-weight: 600; }
.deadline-hoje     { color: #e67e00 !important; font-weight: 600; }

/* ── Login page ──────────────────────────────────── */
.login-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.1);
}
.login-logo { color: var(--vermelho); font-size: 2.8rem; }

/* ── Form ────────────────────────────────────────── */
.form-label { font-weight: 600; font-size: .9rem; }

.form-card  { max-width: 680px; margin: 0 auto; }

/* ── Empty state ─────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #888;
}
.empty-state i { font-size: 3rem; margin-bottom: 1rem; display: block; }

/* ── Input group addon ───────────────────────────── */
.input-group-text { background: #f8f8f8; }

/* ── Admin table row muted ───────────────────────── */
tr.desativado td { opacity: .5; }

/* ── Etapas na lista de projetos ─────────────────── */
.projeto-row td {
  background-color: #fff;
  border-top: 2px solid var(--borda);
}
.etapa-row td {
  background-color: #fafafa;
  font-size: .875rem;
  color: #444;
  border-top: none !important;
  border-left: 3px solid transparent;
}
.etapa-row td:first-child {
  border-left: 3px solid var(--vermelho);
}
.linha-atrasada td { background-color: #fff5f5 !important; }