/* Controle de Vencimentos de Obra — MGF Solutions
   Layout reaproveitado do Gestão de Serviços (sidebar, kpi-card,
   table-container, login-wrap) — cores vêm da configuração da empresa
   (ver js/app.js: aplicarCores()). */

:root {
  --cor-escura: #16202b;
  --cor-destaque: #2f5fd1;
  --sidebar-width: 250px;

  /* Paleta do semáforo de vencimento — o coração deste sistema.
     Branco/neutro (em dia) → amarelo (atenção) → vermelho (vencido).
     Mesma ideia de "tinta suave" já usada no Gestão de Serviços. */
  --status-em-dia: #6b7280;
  --status-atencao: #b8790a;
  --status-atencao-bg: #fff6e0;
  --status-atencao-border: #f0c766;
  --status-vencido: #b3261e;
  --status-vencido-bg: #fdecec;
  --status-vencido-border: #eba39d;
  --status-pago: #1c6b1c;
  --status-pago-bg: #e0f2df;

  --grafico-ink-muted: #898781;
}

body { background-color: #f4f7f6; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; }

#sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  position: fixed;
  background: var(--cor-escura);
  color: #fff;
  padding: 20px;
  z-index: 1000;
  transition: 0.3s;
}
#content { margin-left: var(--sidebar-width); padding: 30px; transition: 0.3s; }

.nav-link { color: #bdc3c7; padding: 12px; border-radius: 8px; margin-bottom: 5px; cursor: pointer; text-decoration: none; display: block; }
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,0.08); color: #fff; border-left: 4px solid var(--cor-destaque); }

.table-container { background: white; border-radius: 12px; padding: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); overflow-x: auto; }

.kpi-card {
  background: #fff; border: 1px solid #edece5; border-radius: 12px;
  padding: 20px 22px; position: relative; overflow: hidden;
}
.kpi-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.kpi-card.kpi-neutro::before  { background: var(--cor-destaque); }
.kpi-card.kpi-ok::before      { background: var(--status-pago); }
.kpi-card.kpi-atencao::before { background: var(--status-atencao); }
.kpi-card.kpi-vencido::before { background: var(--status-vencido); }
.kpi-label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--grafico-ink-muted); font-weight: 600; margin-bottom: 6px;
}
.kpi-valor { font-size: 1.6rem; font-weight: 700; color: #14141a; }
.kpi-card.kpi-ok .kpi-valor      { color: var(--status-pago); }
.kpi-card.kpi-atencao .kpi-valor { color: var(--status-atencao); }
.kpi-card.kpi-vencido .kpi-valor { color: var(--status-vencido); }

/* Legenda do semáforo */
.legenda-semaforo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 0.8rem; color: var(--grafico-ink-muted); margin-bottom: 14px; }
.legenda-semaforo .item { display: flex; align-items: center; gap: 7px; }
.legenda-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.legenda-dot.branco { background: #fff; border: 1px solid #d8d8d0; }
.legenda-dot.amarelo { background: var(--status-atencao); }
.legenda-dot.vermelho { background: var(--status-vencido); }

/* Linhas da tabela de lançamentos — o semáforo em si */
tr.linha-atencao { background: var(--status-atencao-bg); }
tr.linha-vencido { background: var(--status-vencido-bg); }
tr.linha-atencao td:first-child { border-left: 3px solid var(--status-atencao-border); }
tr.linha-vencido td:first-child { border-left: 3px solid var(--status-vencido-border); }
tr.linha-pago { opacity: 0.7; }

.badge-tipo {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  background: #e0ebf9; color: #1f5aa3;
}

.badge-situacao {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.badge-situacao .ponto { width: 8px; height: 8px; border-radius: 50%; }
.badge-situacao.em_dia  { color: var(--status-em-dia); }
.badge-situacao.em_dia .ponto  { background: var(--status-em-dia); }
.badge-situacao.atencao { color: var(--status-atencao); }
.badge-situacao.atencao .ponto { background: var(--status-atencao); }
.badge-situacao.vencido { color: var(--status-vencido); }
.badge-situacao.vencido .ponto { background: var(--status-vencido); }
.badge-situacao.pago    { color: var(--status-pago); }
.badge-situacao.pago .ponto    { background: var(--status-pago); }

.btn-marca { background: var(--cor-destaque); border-color: var(--cor-destaque); color: #fff; }
.btn-marca:hover { filter: brightness(0.92); color: #fff; }

.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--cor-escura);
}
.login-card { background: #fff; border-radius: 16px; padding: 40px; width: 100%; max-width: 400px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.login-logo { text-align: center; margin-bottom: 6px; font-weight: 800; font-size: 1.25rem; color: var(--cor-escura); }
.login-logo span { color: var(--cor-destaque); }
.login-sub { text-align: center; font-size: 0.8rem; color: #6c757d; margin-bottom: 24px; }

.obra-pilula {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #edece5; border-radius: 10px;
  padding: 10px 14px; font-size: 0.85rem; font-weight: 600;
}
.obra-pilula.concluida { opacity: 0.6; }

/* Relatórios — mesma ideia visual do dashboard do Sistema Financeiro
   Familiar (medidor/gauge + gráficos Chart.js), adaptada para vencimentos. */
.card-title-rel {
  display: block; width: 100%; font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--grafico-ink-muted); margin-bottom: 10px;
}
.gauge-container { position: relative; width: 100%; max-width: 220px; height: 110px; overflow: hidden; }
.gauge-needle {
  position: absolute; bottom: 0; left: 50%; width: 3px; height: 70px;
  background: var(--cor-escura); transform-origin: bottom center;
  transition: transform 1s; transform: translateX(-50%) rotate(-90deg);
}
.gauge-texto { font-weight: 700; font-size: 0.9rem; margin-top: 6px; color: var(--grafico-ink-muted); }

@media (max-width: 768px) {
  #sidebar { margin-left: -250px; }
  #sidebar.active { margin-left: 0; }
  #content { margin-left: 0; width: 100%; padding: 15px; }
}