/* ============================================================
   BillFlow - Custom styles (Bootstrap 5 companion)
   ============================================================ */

/* ---- Sidebar ---- */
.sidebar {
  position: sticky;
  top: 56px;            /* height of the fixed navbar */
  height: calc(100vh - 56px);
  overflow-y: auto;
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.04);
}

.sidebar-link {
  color: #555;
  font-size: 0.9rem;
  padding: 0.45rem 1.25rem;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
}

.sidebar-link:hover {
  background: #f0f4ff;
  color: #0d6efd;
}

.sidebar-link.active {
  background: #e8efff;
  color: #0d6efd;
  font-weight: 600;
  border-left: 3px solid #0d6efd;
}

/* ---- Stat cards on the dashboard ---- */
.stat-card {
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
}

.stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2px;
}

/* ---- Bill cards ---- */
.bill-card {
  border-width: 2px;
  border-radius: 10px;
  transition: box-shadow 0.15s;
}

.bill-card:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.bill-card .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.9rem;
}

.planned-payments .d-flex {
  margin-bottom: 2px;
}

/* ---- Section headings ---- */
.section-header {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
}

/* ---- Tables ---- */
.table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
  white-space: nowrap;
}

.table td {
  vertical-align: middle;
  font-size: 0.875rem;
}

/* ---- Urgency color overrides ---- */

/* Red rows still get readable text */
.table-danger td,
.table-danger th {
  color: #842029;
}

/* ---- Cards general ---- */
.card {
  border-radius: 10px;
  border: 1px solid #e5e9f2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.card-header {
  background: #f8f9fc;
  border-bottom: 1px solid #e5e9f2;
  font-size: 0.875rem;
}

/* ---- Alerts ---- */
.alert {
  border-radius: 8px;
  font-size: 0.875rem;
}

/* ---- Buttons ---- */
.btn-sm {
  font-size: 0.78rem;
}

/* ---- Misc ---- */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

main {
  max-width: 1400px;
}