/* =============================================================
   PLANEJAMENTO MENSAL DE PAGAMENTOS
   ============================================================= */

/* Tabela principal — compacta com bordas */
.pl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.pl-table thead tr {
  background: linear-gradient(135deg, var(--color-primary) 0%, #6366f1 100%);
}

.pl-table thead th {
  padding: 7px 10px;
  color: #fff;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.15);
  white-space: nowrap;
}

/* Bordas em todas as células */
.pl-table tbody td {
  padding: 5px 10px;
  color: var(--text-primary);
  vertical-align: middle;
  border: 1px solid var(--border-color);
}

/* Alternância zebra sutil */
.pl-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.02);
}

.pl-table tbody tr:hover td {
  background: rgba(99, 102, 241, .07);
}

/* Linha paga */
.pl-row-pago td {
  color: var(--text-muted);
  background: rgba(16,185,129,.03) !important;
}
.pl-row-pago .pl-td-desc span {
  text-decoration: line-through;
  opacity: .6;
}

/* Linha desconto */
.pl-row-desconto td {
  background: rgba(16, 185, 129, .04);
}

/* Células tipadas */
.pl-td-desc   { min-width: 160px; }
.pl-td-valor  { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-td-center { text-align: center; }
.pl-td-acao   { text-align: center; white-space: nowrap; }

/* Handle de drag */
.pl-drag-handle {
  color: var(--text-muted);
  cursor: grab;
  font-size: 14px;
  text-align: center;
  user-select: none;
  opacity: .5;
}
.pl-drag-handle:hover { opacity: 1; }
.pl-drag-handle:active { cursor: grabbing; }

/* Badge de status */
.pl-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s, opacity .1s;
  user-select: none;
  white-space: nowrap;
}
.pl-badge:hover { transform: scale(1.06); opacity: .85; }

.pl-badge-pago {
  background: rgba(16, 185, 129, .15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, .3);
}
.pl-badge-pendente {
  background: rgba(245, 158, 11, .12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, .3);
}

/* Botões de ação (editar / deletar) */
.pl-btn-action {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 3px 5px;
  border-radius: 5px;
  color: var(--text-muted);
  transition: color .15s, background .15s;
  line-height: 1;
}
.pl-btn-action:hover { color: var(--color-primary); background: rgba(99,102,241,.1); }
.pl-btn-del:hover    { color: var(--color-danger);  background: rgba(239,68,68,.1);  }

/* Input de edição inline */
.pl-inline-input {
  width: 100%;
  background: var(--bg-lighter);
  border: 2px solid var(--color-primary);
  border-radius: 5px;
  color: var(--text-primary);
  font-size: 12px;
  padding: 2px 6px;
  outline: none;
  min-width: 70px;
}

/* Cards de totais — compactos */
.pl-total-card {
  flex: 1;
  min-width: 140px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pl-total-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pl-total-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.pl-total-pago .pl-total-val    { color: #10b981; }
.pl-total-rest .pl-total-val    { color: var(--text-primary); }
.pl-total-rest-alerta           { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.05); }
.pl-total-rest-alerta .pl-total-val { color: #f59e0b; }