/* ==== Ingrado huisstijl (kleuren van ingrado.nl) — geport uit v1 ==== */
:root {
  --ingrado-red: #e3051b;
  --ingrado-red-dark: #b8040f;
  --ingrado-purple: #350d39;
  --ingrado-blue: #2c4f9e;
  --ingrado-darkgreen: #013033;
  --ingrado-green: #019278;
  --ingrado-teal: #6695a2;
  --ingrado-yellow: #faaf01;

  --bs-link-color: #2c4f9e;
  --bs-link-color-rgb: 44, 79, 158;
  --bs-link-hover-color: #013033;
}

/* Navbalk */
.navbar-ingrado {
  background: linear-gradient(90deg, #013033 0%, #024a45 100%) !important;
}
.navbar-ingrado .navbar-brand { display: flex; align-items: center; gap: .6rem; }
.navbar-ingrado .navbar-brand img { height: 30px; width: auto; background: #fff; border-radius: 6px; padding: 3px 6px; }
.navbar-ingrado .navbar-brand span { color: #fff; font-weight: 700; letter-spacing: .2px; }
.navbar-ingrado .nav-link { color: rgba(255,255,255,.82); font-weight: 500; }
.navbar-ingrado .nav-link:hover, .navbar-ingrado .nav-link.active { color: #fff; }
.navbar-ingrado .dropdown-menu { --bs-dropdown-link-active-bg: var(--ingrado-darkgreen); }

.rol-badge { font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; }

/* Knoppen / accenten */
.btn-primary {
  --bs-btn-bg: var(--ingrado-red);
  --bs-btn-border-color: var(--ingrado-red);
  --bs-btn-hover-bg: var(--ingrado-red-dark);
  --bs-btn-hover-border-color: var(--ingrado-red-dark);
  --bs-btn-active-bg: var(--ingrado-red-dark);
  --bs-btn-active-border-color: var(--ingrado-red-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--ingrado-red);
  --bs-btn-border-color: var(--ingrado-red);
  --bs-btn-hover-bg: var(--ingrado-red);
  --bs-btn-hover-border-color: var(--ingrado-red);
  --bs-btn-active-bg: var(--ingrado-red);
  --bs-btn-active-border-color: var(--ingrado-red);
}

.bg-success { background-color: var(--ingrado-green) !important; }
.bg-warning { background-color: var(--ingrado-yellow) !important; }
.bg-danger  { background-color: var(--ingrado-red) !important; }
.bg-info    { background-color: var(--ingrado-teal) !important; }

h1, h2, h3, h4, h5 { color: var(--ingrado-darkgreen); }

body { background: #f4f6f7; color: #1f2d2e; }

.card, .border.rounded { border-color: #e3e8e9 !important; }
.shadow-soft { box-shadow: 0 2px 10px rgba(1,48,51,.06); }

/* ==================== Auth-schermen (eye-catcher) ==================== */
.auth-wrap { min-height: 100vh; display: flex; }
.auth-brand {
  flex: 1 1 42%;
  background:
    radial-gradient(1200px 500px at -10% -10%, rgba(1,146,120,.35), transparent 60%),
    linear-gradient(160deg, #013033 0%, #01474170 40%, #012a2d 100%),
    #012a2d;
  color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  padding: 3rem 3.5rem;
  position: relative; overflow: hidden;
}
.auth-brand::after {
  content: ""; position: absolute; right: -120px; bottom: -120px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,5,27,.25), transparent 70%);
}
.auth-brand .logo-badge {
  background: #fff; border-radius: 14px; padding: 14px 20px; display: inline-block;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); margin-bottom: 2rem; max-width: 240px;
}
.auth-brand .logo-badge img { width: 100%; height: auto; display: block; }
.auth-brand h1 { color: #fff; font-weight: 800; font-size: 2.2rem; line-height: 1.1; }
.auth-brand p { color: rgba(255,255,255,.8); max-width: 34ch; }
.auth-brand .feature { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; color: rgba(255,255,255,.9); }
.auth-brand .feature .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ingrado-red); }

.auth-form-panel {
  flex: 1 1 58%;
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1.5rem; background: #fff;
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card h2 { color: var(--ingrado-darkgreen); font-weight: 700; }
.auth-card .btn-primary { width: 100%; padding: .6rem; font-weight: 600; }
.auth-card .form-control { padding: .6rem .8rem; }
.auth-card .form-control:focus { border-color: var(--ingrado-green); box-shadow: 0 0 0 .2rem rgba(1,146,120,.2); }

.code-input { letter-spacing: .5em; text-align: center; font-size: 1.4rem; font-weight: 600; }
.qr-box { display: inline-block; padding: 10px; background: #fff; border: 1px solid #e3e8e9; border-radius: 12px; }
.qr-box svg { width: 200px; height: 200px; display: block; }
.sleutel-code { font-family: monospace; background: #f4f6f7; padding: .4rem .6rem; border-radius: 6px; display: inline-block; }
.herstel-codes { columns: 2; font-family: monospace; background: #f4f6f7; border-radius: 8px; padding: 1rem 1.4rem; }

@media (max-width: 768px) {
  .auth-wrap { flex-direction: column; min-height: 100vh; }
  .auth-brand { flex: 0 0 auto; padding: 2rem 1.5rem; }
  .auth-brand h1 { font-size: 1.6rem; }
  .auth-brand .logo-badge { max-width: 180px; margin-bottom: 1.2rem; }
  .auth-brand .hide-mobile { display: none; }
  .auth-form-panel { flex: 1 1 auto; padding: 1.5rem 1rem 2.5rem; }
}
@media (max-width: 576px) {
  h1.h3 { font-size: 1.3rem; }
  .navbar-ingrado .navbar-brand span { font-size: .95rem; }
}