/* ── Wealth Tracker — Custom Styles ───────────────────────────────────────── */

/* Body */
.wt-body {
  background-color: #f4f6f9;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Navbar */
.wt-nav {
  background-color: #111827 !important;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.wt-nav .navbar-brand {
  font-size: 1.15rem;
  letter-spacing: -.3px;
}

.wt-nav .nav-link {
  font-size: .875rem;
  font-weight: 500;
  padding: .5rem .85rem;
  border-radius: .375rem;
  color: rgba(255,255,255,.7) !important;
  transition: background .15s, color .15s;
}

.wt-nav .nav-link:hover,
.wt-nav .nav-link.active {
  background: rgba(255,255,255,.08);
  color: #fff !important;
}

/* Content area */
.wt-content {
  padding: 1.5rem 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Login background */
.wt-login-bg {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f3460 100%);
  min-height: 100vh;
}

/* KPI cards */
.wt-card-kpi {
  border-radius: .75rem;
}

.wt-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* Tables */
.wt-table thead th {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6c757d;
  border-bottom: 1px solid #dee2e6;
  padding: .65rem 1rem;
  white-space: nowrap;
}

.wt-table tbody td {
  padding: .75rem 1rem;
  vertical-align: middle;
}

.wt-table tfoot td {
  padding: .65rem 1rem;
}

/* Cards */
.card {
  border-radius: .75rem;
}

.card-header {
  border-radius: .75rem .75rem 0 0 !important;
  padding: .9rem 1.25rem .5rem;
}

/* Badges */
.badge {
  font-weight: 500;
  font-size: .72rem;
  padding: .3em .6em;
}

/* Month checkboxes in expenses */
.wt-month-check {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
  padding: .35rem .65rem;
  margin: 0;
}

.wt-month-check:has(.form-check-input:checked) {
  background: #d1e7dd;
  border-color: #198754;
}

/* Code inline */
code {
  background: #f1f3f5;
  color: #d63384;
  padding: .1em .35em;
  border-radius: .25em;
  font-size: .875em;
}

/* Responsive tweaks */
@media (max-width: 576px) {
  .wt-content {
    padding: 1rem .5rem;
  }
  h4.fw-bold {
    font-size: 1.1rem;
  }
}

/* Subtle border for table rows */
.table > :not(caption) > * > * {
  border-bottom-width: 1px;
}

/* Chart canvas */
canvas {
  width: 100% !important;
}

/* Letter spacing utility */
.letter-spacing-1 {
  letter-spacing: .06em;
}

/* Scrollable table on mobile */
.table-responsive {
  border-radius: 0 0 .75rem .75rem;
}