/* =====================================================================
   Eigen aanpassingen bovenop Bootstrap. Houd Bootstrap zelf ongemoeid.
   ===================================================================== */

/* ---- Google Font: Urbanist ---- */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ---- Merkkleuren (palet) ---- */
:root {
    --brand-blue:      #1B4F8F;  /* primair */
    --brand-blue-dark: #163f72;  /* hover/active */
    --brand-sky:       #5BC0EB;
    --brand-teal:      #38A89D;
    --brand-lime:      #7BBF2A;
    --brand-amber:     #E6A817;
    --brand-coral:     #E8734A;
    --brand-violet:    #7C5CBF;

    /* Bootstrap's primary laten meelopen met het merkblauw */
    --bs-primary: var(--brand-blue);
    --bs-primary-rgb: 27, 79, 143;
    --bs-link-color: var(--brand-blue);
    --bs-link-color-rgb: 27, 79, 143;
    --bs-link-hover-color: var(--brand-blue-dark);
}

/* ---- Typografie ---- */
body {
    font-family: 'Urbanist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- Knoppen: primair in merkblauw ---- */
.btn-primary {
    --bs-btn-bg: var(--brand-blue);
    --bs-btn-border-color: var(--brand-blue);
    --bs-btn-hover-bg: var(--brand-blue-dark);
    --bs-btn-hover-border-color: var(--brand-blue-dark);
    --bs-btn-active-bg: var(--brand-blue-dark);
    --bs-btn-active-border-color: var(--brand-blue-dark);
    --bs-btn-disabled-bg: var(--brand-blue);
    --bs-btn-disabled-border-color: var(--brand-blue);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-blue);
    --bs-btn-border-color: var(--brand-blue);
    --bs-btn-hover-bg: var(--brand-blue);
    --bs-btn-hover-border-color: var(--brand-blue);
    --bs-btn-active-bg: var(--brand-blue);
    --bs-btn-active-border-color: var(--brand-blue);
}

/* ---- Tekst- en focus-accenten in merkblauw ---- */
.text-primary { color: var(--brand-blue) !important; }
a { color: var(--brand-blue); }
a:hover { color: var(--brand-blue-dark); }
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-sky);
    box-shadow: 0 0 0 .25rem rgba(91, 192, 235, .25);
}

/* =====================================================================
   Merkkleuren als herbruikbare hulpklassen
   --------------------------------------------------------------------
   tekstkleur:        .text-brand-teal
   achtergrondkleur:  .bg-brand-teal   (witte tekst)
   accentrand boven:  .accent-teal     (gekleurde streep bovenaan een kaart)
   ===================================================================== */
.text-brand-blue   { color: var(--brand-blue)   !important; }
.text-brand-sky    { color: var(--brand-sky)    !important; }
.text-brand-teal   { color: var(--brand-teal)   !important; }
.text-brand-lime   { color: var(--brand-lime)   !important; }
.text-brand-amber  { color: var(--brand-amber)  !important; }
.text-brand-coral  { color: var(--brand-coral)  !important; }
.text-brand-violet { color: var(--brand-violet) !important; }

.bg-brand-blue   { background-color: var(--brand-blue)   !important; color: #fff; }
.bg-brand-sky    { background-color: var(--brand-sky)    !important; color: #fff; }
.bg-brand-teal   { background-color: var(--brand-teal)   !important; color: #fff; }
.bg-brand-lime   { background-color: var(--brand-lime)   !important; color: #fff; }
.bg-brand-amber  { background-color: var(--brand-amber)  !important; color: #fff; }
.bg-brand-coral  { background-color: var(--brand-coral)  !important; color: #fff; }
.bg-brand-violet { background-color: var(--brand-violet) !important; color: #fff; }

.accent-blue   { border-top: 3px solid var(--brand-blue)   !important; }
.accent-sky    { border-top: 3px solid var(--brand-sky)    !important; }
.accent-teal   { border-top: 3px solid var(--brand-teal)   !important; }
.accent-lime   { border-top: 3px solid var(--brand-lime)   !important; }
.accent-amber  { border-top: 3px solid var(--brand-amber)  !important; }
.accent-coral  { border-top: 3px solid var(--brand-coral)  !important; }
.accent-violet { border-top: 3px solid var(--brand-violet) !important; }

/* ---- Inlogpagina: merkblauwe achtergrond met het witte logo erboven ---- */
.login-page { background-color: var(--brand-blue); }
.login-logo { max-width: 240px; width: 70%; height: auto; }

/* =====================================================================
   Sidebar
   ===================================================================== */
.sidebar {
    width: 250px;
    flex-shrink: 0;
    background-color: var(--brand-blue) !important;  /* overrulet bg-dark */
}

/* Logo linksboven in de sidebar: schaalt mee, behoudt verhouding */
.sidebar-logo {
    width: 100%;
    max-width: 200px;
    height: auto;
}

/* Niet-actieve menu-items iets gedimd, oplichten bij hover */
.sidebar .nav-link {
    opacity: .85;
    border-radius: .375rem;
}
.sidebar .nav-link:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, .12);
}
.sidebar .nav-link.active {
    opacity: 1;
    background-color: var(--brand-sky);
    color: #fff !important;
}