/*
 * mijn-odo.css
 * Huisstijl van Mijn ODO (feature 062, research R3): ODO-blauw, lichtblauw en donkerblauw met
 * grijstinten. Alles is gescoped op .mijnodo (root van MijnOdoLayout en AuthLayout), zodat de
 * planning er niets van merkt. Signaalkleuren (alert-danger, text-danger, ...) blijven van Bootstrap.
 */

.mijnodo {
    --odo-blauw:        #0064C0;
    --odo-blauw-donker: #00539F;  /* hover/active van ODO-blauw */
    --odo-lichtblauw:   #7FB1E0;  /* nooit als tekst op wit: contrast te laag */
    --odo-donkerblauw:  #00315F;
    --odo-grijs-50:     #F7F8FA;
    --odo-grijs-200:    #E3E6EA;
    --odo-grijs-600:    #5F6670;
    --odo-grijs-900:    #1F2328;

    min-height: 100vh;
    background: var(--odo-grijs-50);
    color: var(--odo-grijs-900);
}

.mijnodo h1,
.mijnodo h2,
.mijnodo h3 {
    color: var(--odo-donkerblauw);
}

.mijnodo a,
.mijnodo .btn-link {
    color: var(--odo-blauw);
}

.mijnodo a:hover,
.mijnodo .btn-link:hover {
    color: var(--odo-blauw-donker);
}

.mijnodo .btn-primary {
    color: #fff;
    background-color: var(--odo-blauw);
    border-color: var(--odo-blauw);
}

.mijnodo .btn-primary:hover,
.mijnodo .btn-primary:focus,
.mijnodo .btn-primary:not(:disabled):active {
    color: #fff;
    background-color: var(--odo-blauw-donker);
    border-color: var(--odo-blauw-donker);
}

.mijnodo .btn-outline-primary {
    color: var(--odo-blauw);
    border-color: var(--odo-blauw);
}

.mijnodo .btn-outline-primary:hover,
.mijnodo .btn-outline-primary:not(:disabled):active {
    color: #fff;
    background-color: var(--odo-blauw);
    border-color: var(--odo-blauw);
}

.mijnodo .btn-outline-secondary {
    color: var(--odo-grijs-600);
    border-color: var(--odo-grijs-200);
}

.mijnodo .btn-outline-secondary:hover {
    color: var(--odo-grijs-900);
    background-color: var(--odo-grijs-200);
    border-color: var(--odo-grijs-200);
}

.mijnodo .btn:focus,
.mijnodo .form-control:focus {
    border-color: var(--odo-blauw);
    box-shadow: 0 0 0 0.2rem rgba(0, 100, 192, 0.25);
}

.mijnodo .table th,
.mijnodo .table td,
.mijnodo .table thead th {
    border-color: var(--odo-grijs-200);
}

.mijnodo .table thead th {
    color: var(--odo-grijs-600);
    font-weight: 600;
}

.mijnodo .text-muted {
    color: var(--odo-grijs-600) !important;
}

.mijnodo .alert-info {
    color: var(--odo-donkerblauw);
    background-color: var(--odo-grijs-50);
    border-color: var(--odo-lichtblauw);
    border-left-width: 4px;
}

.mijnodo .alert-secondary {
    color: var(--odo-grijs-900);
    background-color: var(--odo-grijs-50);
    border-color: var(--odo-grijs-200);
}

/* Bootstrap 4 kent deze utilities (uit Bootstrap 5) niet; het Agenda-scherm (061) gebruikt ze. */
.mijnodo .gap-2 { gap: 0.5rem; }
.mijnodo .me-2  { margin-right: 0.5rem; }

/* ── Bouwstenen ─────────────────────────────────────────────────────────────── */

.mijnodo-page-title {
    font-size: 1.75rem;
    font-weight: 400;
    margin: 0 0 1.25rem;
}

.mijnodo-card {
    background: #fff;
    border: 1px solid var(--odo-grijs-200);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.mijnodo-card > h2 {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
}

.mijnodo-muted {
    color: var(--odo-grijs-600);
}

@media (max-width: 600px) {
    .mijnodo-page-title { font-size: 1.45rem; }
    .mijnodo-card       { padding: 1rem 0.85rem; }
}