:root {
  --brand-primary: #1f4e5f;
  --brand-accent: #2e8b7f;
  --brand-light: #f4f8f7;
}

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

.top-navbar {
  background-color: var(--brand-primary);
}

.sidebar, .sidebar-offcanvas {
  background-color: #16333d;
  width: 240px;
  min-height: calc(100vh - 56px);
}

.sidebar-offcanvas { background-color: #16333d; }

.sidebar .nav-link, .sidebar-offcanvas .nav-link {
  color: #cfe3e0;
  padding: 0.65rem 1.1rem;
  border-left: 3px solid transparent;
}

.sidebar .nav-link:hover, .sidebar-offcanvas .nav-link:hover {
  background-color: rgba(255,255,255,0.06);
  color: #fff;
}

.sidebar .nav-link.active, .sidebar-offcanvas .nav-link.active {
  background-color: rgba(46,139,127,0.25);
  color: #fff;
  border-left-color: var(--brand-accent);
  font-weight: 600;
}

.sidebar .nav-link i, .sidebar-offcanvas .nav-link i {
  width: 1.3rem;
  display: inline-block;
}

.content-area {
  min-width: 0;
}

.card {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.stat-card {
  border-radius: 0.9rem;
  color: #fff;
  padding: 1.25rem;
}

.stat-card.bg-1 { background: linear-gradient(135deg, #1f4e5f, #2e8b7f); }
.stat-card.bg-2 { background: linear-gradient(135deg, #6a4c93, #a06cd5); }
.stat-card.bg-3 { background: linear-gradient(135deg, #d17a22, #e8a33d); }
.stat-card.bg-4 { background: linear-gradient(135deg, #1a7a5e, #35b088); }

.btn-brand {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.btn-brand:hover {
  background-color: #163b48;
  border-color: #163b48;
  color: #fff;
}

.table thead th {
  background-color: #eef4f3;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1f4e5f, #2e8b7f);
}

.login-card {
  max-width: 420px;
  width: 100%;
  border-radius: 1rem;
}

@media (max-width: 991.98px) {
  .sidebar { display: none; }
}