/* Appconnex huisstijl-thema bovenop Bootstrap 5 (gebaseerd op de kleuren/uitstraling van appconnex.nl). */

:root {
  --ac-navy: #112954;
  --ac-blue: #3859d0;
  --ac-blue-dark: #2c46a8;
  --ac-bg: #f9faff;
  --ac-bg-soft: #ebeff9;
  --ac-border: #dfe7f9;
  --ac-text: #1d2e38;
  --ac-text-muted: #5b6b82;
  --ac-danger: #c0392b;
  --ac-success: #1e8a5f;

  --bs-primary: var(--ac-blue);
  --bs-primary-rgb: 56, 89, 208;
  --bs-body-bg: var(--ac-bg);
  --bs-body-color: var(--ac-text);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-link-color: var(--ac-blue);
  --bs-link-color-rgb: 56, 89, 208;
  --bs-link-hover-color: var(--ac-blue-dark);
  --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background-color: var(--ac-bg);
  color: var(--ac-text);
}

.navbar-appconnex {
  background-color: var(--ac-navy);
}

.navbar-appconnex .navbar-brand {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.navbar-appconnex .navbar-text {
  color: rgba(255, 255, 255, 0.75);
}

.card {
  border: 1px solid var(--ac-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 2px 10px rgba(17, 41, 84, 0.06);
}

.card-header {
  background-color: #fff;
  border-bottom: 1px solid var(--ac-border);
  font-weight: 600;
  color: var(--ac-navy);
}

.btn-primary {
  background-color: var(--ac-blue);
  border-color: var(--ac-blue);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ac-blue-dark);
  border-color: var(--ac-blue-dark);
}

.btn-outline-primary {
  color: var(--ac-blue);
  border-color: var(--ac-blue);
}

.btn-outline-primary:hover {
  background-color: var(--ac-blue);
  border-color: var(--ac-blue);
}

.table thead th {
  background-color: var(--ac-bg-soft);
  color: var(--ac-navy);
  border-bottom: 1px solid var(--ac-border);
  font-weight: 600;
}

.text-muted-ac {
  color: var(--ac-text-muted);
}

.ac-page-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

.ac-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ac-text-muted);
}

.ac-login-card {
  max-width: 380px;
  margin: 4rem auto 0;
}