:root {
  --brand-navy: #0b3d59;
  --brand-teal: #0e7c7b;
  --brand-bg: #f4f7f9;
  --due-color: #b3261e;
  --settled-color: #1e7d32;
  --advance-color: #7a5cc9;
}

body {
  background: var(--brand-bg);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #1c2b33;
}

.app-navbar {
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-teal));
}

.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(11, 61, 89, 0.08);
}

.card-header {
  background: white;
  border-bottom: 1px solid #e9eef1;
  border-radius: 12px 12px 0 0 !important;
  font-weight: 600;
  color: var(--brand-navy);
}

.stat-card {
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  color: white;
  box-shadow: 0 2px 10px rgba(11, 61, 89, 0.12);
}

.stat-card .stat-label {
  font-size: 0.8rem;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 700;
}

.stat-billed { background: linear-gradient(135deg, #0b3d59, #14577e); }
.stat-paid   { background: linear-gradient(135deg, #1e7d32, #2fa348); }
.stat-due    { background: linear-gradient(135deg, #b3261e, #d6483f); }
.stat-buyers { background: linear-gradient(135deg, #0e7c7b, #14a3a1); }

.badge-status {
  font-size: 0.75rem;
  padding: 0.35em 0.7em;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.status-due     { background: #fdeceb; color: var(--due-color); }
.status-settled { background: #e9f7eb; color: var(--settled-color); }
.status-advance { background: #f0ecfb; color: var(--advance-color); }

table.table thead th {
  background: #eef3f5;
  color: var(--brand-navy);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: none;
  white-space: nowrap;
}

table.table td, table.table th {
  vertical-align: middle;
}

.buyer-link {
  color: var(--brand-navy);
  font-weight: 600;
  text-decoration: none;
}
.buyer-link:hover {
  color: var(--brand-teal);
  text-decoration: underline;
}

.text-dr { color: var(--due-color); font-weight: 600; }
.text-cr { color: var(--settled-color); font-weight: 600; }

.form-label {
  font-weight: 600;
  color: var(--brand-navy);
  font-size: 0.9rem;
}

@media print {
  .app-navbar, footer, .no-print { display: none !important; }
  body { background: white; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}