/* ==========================================================================
   Beheerdeel - opfrislaag over het bestaande thema

   Laadt BEWUST als laatste stylesheet, na style.css en Bootstrap. De overige
   beheerschermen leunen nog op dat thema, dus we vervangen het niet maar
   overschrijven alleen de schil (zijbalk, bovenbalk) en het afsprakenoverzicht.

   Tokens spiegelen de standaardwaarden van de publieke pagina (public.css),
   maar staan hier vast: het beheerdeel hoort niet mee te bewegen met wat een
   beheerder voor de publieke huisstijl instelt.
   ========================================================================== */

:root {
    --adm-bg: #eceff3;
    --adm-surface: #ffffff;
    --adm-accent: #2b6cb0;
    --adm-radius: 10px;
    --adm-text: #1f2933;
    --adm-text-soft: #5f6b76;
    --adm-text-muted: #8a9199;
    --adm-line: rgba(0, 0, 0, .1);
    --adm-line-soft: rgba(0, 0, 0, .07);
    --adm-danger: #a32d2d;
    --adm-sidebar-width: 210px;
}

/* --- Basis ---------------------------------------------------------------- */

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

#main-content .wrapper {
    background: transparent;
}

/* Zichtbare focus voor toetsenbordnavigatie; het oude thema haalt dit weg. */
#sidebar a:focus-visible,
.header a:focus-visible,
.adm-btn:focus-visible,
.adm-switch a:focus-visible {
    outline: 2px solid var(--adm-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --- Bovenbalk ------------------------------------------------------------ */

.header.white-bg {
    background: var(--adm-surface);
    border-bottom: 1px solid var(--adm-line);
    box-shadow: none;
}

.header .logo {
    color: var(--adm-text);
    font-weight: 600;
    letter-spacing: -.01em;
}

.header .logo span {
    color: var(--adm-accent);
}

.header .top-menu .username {
    color: var(--adm-text);
    font-size: 13px;
}

.header .form-control.search {
    border-radius: var(--adm-radius);
    border: 1px solid rgba(0, 0, 0, .18);
    box-shadow: none;
    height: 34px;
}

/* --- Zijbalk -------------------------------------------------------------- */

/* Geen !important hier. jQuery .hide() zet een inline display:none, en een
   inline stijl verliest het van !important in een stylesheet: de zijbalk zou
   dan niet meer in te klappen zijn met de hamburger. De selectors hieronder
   winnen al op specificiteit van het oude thema. */
#sidebar {
    display: flex;
    flex-direction: column;
    background: var(--adm-surface);
    border-right: 1px solid var(--adm-line);
    width: var(--adm-sidebar-width);
}

#main-content {
    margin-left: var(--adm-sidebar-width);
}

#sidebar .sidebar-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: transparent;
    /* De headerbalk staat vast op 60px hoogte; zonder deze marge schuift het
       eerste menu-item eronder. Het oude thema deed dit met margin-top: 75px. */
    margin: 60px 0 0;
    padding: 14px 0;
}

#sidebar .sidebar-menu > li > a,
#sidebar .sub-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--adm-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    text-shadow: none;
    transition: background-color .15s ease;
}

#sidebar .sidebar-menu > li > a:hover,
#sidebar .sub-menu > li > a:hover {
    background: rgba(0, 0, 0, .04);
    color: var(--adm-text);
}

#sidebar .sidebar-menu > li > a.active,
#sidebar .sub-menu > li > a.active {
    background: var(--adm-accent);
    color: #fff;
}

#sidebar .sidebar-menu > li > a.active i,
#sidebar .sub-menu > li > a.active i {
    color: #fff;
}

#sidebar .sidebar-menu i {
    font-size: 15px;
    width: 17px;
    text-align: center;
    color: var(--adm-text-soft);
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    line-height: inherit;
}

/* Groepskop. Staat bewust als <li> BINNEN dezelfde <ul>, omdat
   common-scripts.js bij het inklappen `#sidebar > ul` verbergt: een losse
   kop buiten de lijst zou dan blijven zweven. */
.adm-nav__label {
    padding: 16px 14px 6px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--adm-text-muted);
    pointer-events: none;
}

.adm-nav__label:first-child {
    padding-top: 4px;
}

/* Destructieve actie: alleen het icoon kleurt, niet de hele regel. */
.adm-nav__danger i {
    color: var(--adm-danger);
}

/* Externe link (publiek overzicht) krijgt een pijltje rechts. */
.adm-nav__ext {
    margin-left: auto;
    font-size: 12px;
    color: var(--adm-text-muted);
}

/* Instellingen blijft onderaan vastgeplakt. */
#sidebar .sidebar-menu > li.adm-nav__bottom {
    margin-top: auto;
    border-top: 1px solid var(--adm-line-soft);
    padding-top: 8px;
}

#sidebar .sub-menu > li > a {
    padding-left: 41px;
    font-size: 13px;
    color: var(--adm-text-soft);
}

/* --- Panelen -------------------------------------------------------------- */

.panel.panel-default {
    background: var(--adm-surface);
    border: 1px solid var(--adm-line);
    border-radius: var(--adm-radius);
    box-shadow: none;
}

.panel .panel-heading {
    background: var(--adm-surface);
    border-bottom: 1px solid var(--adm-line);
    border-radius: var(--adm-radius) var(--adm-radius) 0 0;
    color: var(--adm-text);
    font-size: 15px;
    font-weight: 500;
    padding: 14px 16px;
}

/* --- Knoppen -------------------------------------------------------------- */

/* De beheerschermen gebruiken allemaal de Bootstrap-knopklassen, dus die
   herstijlen we hier centraal in plaats van dertig templates aan te passen. */
#main-content .btn,
.adm-page .btn {
    border-radius: var(--adm-radius);
    border: 1px solid rgba(0, 0, 0, .18);
    background: #fff;
    background-image: none;
    color: var(--adm-text);
    font-size: 13px;
    line-height: 1.2;
    padding: 8px 14px;
    text-shadow: none;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease;
}

#main-content .btn:hover,
#main-content .btn:focus,
.adm-page .btn:hover,
.adm-page .btn:focus {
    background: #f3f5f7;
    border-color: rgba(0, 0, 0, .3);
    color: var(--adm-text);
    outline: none;
}

#main-content .btn:active,
.adm-page .btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

#main-content .btn-xs,
.adm-page .btn-xs {
    padding: 5px 10px;
    font-size: 12px;
}

#main-content .btn-sm,
.adm-page .btn-sm {
    padding: 6px 12px;
}

#main-content .btn-lg,
.adm-page .btn-lg {
    padding: 11px 20px;
    font-size: 15px;
}

/* Gevulde varianten. Kleur draagt hier betekenis: blauw is de hoofdactie,
   rood is onomkeerbaar. Groen valt samen met blauw zodat er per scherm maar
   een soort hoofdactie is. */
#main-content .btn-primary,
#main-content .btn-success,
.adm-page .btn-primary,
.adm-page .btn-success {
    background: var(--adm-accent);
    border-color: var(--adm-accent);
    color: #fff;
}

#main-content .btn-primary:hover,
#main-content .btn-primary:focus,
#main-content .btn-success:hover,
#main-content .btn-success:focus,
.adm-page .btn-primary:hover,
.adm-page .btn-primary:focus,
.adm-page .btn-success:hover,
.adm-page .btn-success:focus {
    background: var(--adm-accent);
    border-color: var(--adm-accent);
    filter: brightness(1.08);
    color: #fff;
}

#main-content .btn-danger,
.adm-page .btn-danger {
    background: var(--adm-danger);
    border-color: var(--adm-danger);
    color: #fff;
}

#main-content .btn-danger:hover,
#main-content .btn-danger:focus,
.adm-page .btn-danger:hover,
.adm-page .btn-danger:focus {
    background: var(--adm-danger);
    border-color: var(--adm-danger);
    filter: brightness(1.1);
    color: #fff;
}

/* --- Formulieren ---------------------------------------------------------- */

#main-content .form-control,
.adm-page .form-control {
    border: 1px solid rgba(0, 0, 0, .22);
    border-radius: calc(var(--adm-radius) / 1.6);
    box-shadow: none;
    color: var(--adm-text);
    font-size: 14px;
    height: 36px;
    padding: 7px 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#main-content textarea.form-control,
.adm-page textarea.form-control {
    height: auto;
}

#main-content .form-control:focus,
.adm-page .form-control:focus {
    border-color: var(--adm-accent);
    box-shadow: 0 0 0 3px rgba(43, 108, 176, .16);
    outline: none;
}

#main-content .control-label,
.adm-page .control-label {
    color: var(--adm-text);
    font-size: 13px;
    font-weight: 600;
    padding-top: 8px;
}

#main-content .help-block,
.adm-page .help-block {
    color: var(--adm-text-muted);
    font-size: 12px;
    margin: 5px 0 0;
}

#main-content .form-group,
.adm-page .form-group {
    margin-bottom: 18px;
}

/* --- Meldingen ------------------------------------------------------------ */

#main-content .alert,
.adm-page .alert {
    border-radius: var(--adm-radius);
    border-width: 1px;
    font-size: 13px;
    padding: 12px 16px;
    text-shadow: none;
}

#main-content .alert-success,
.adm-page .alert-success {
    background: #e6f4ea;
    border-color: #b7dfc1;
    color: #1b5e20;
}

#main-content .alert-danger,
.adm-page .alert-danger {
    background: #fdecea;
    border-color: #f3c2bd;
    color: #7f1d1d;
}

#main-content .alert-info,
.adm-page .alert-info {
    background: #e8f1fa;
    border-color: #bcd8f0;
    color: #1c4e80;
}

#main-content .alert-warning,
.adm-page .alert-warning {
    background: #fdf3e2;
    border-color: #f0d9ab;
    color: #7a5314;
}

/* --- Badges --------------------------------------------------------------- */

#main-content .label,
.adm-page .label {
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 4px 10px;
    text-shadow: none;
}

/* --- Tabelbediening (DataTables) ------------------------------------------ */

#main-content .dataTables_wrapper .dataTables_filter input,
#main-content .dataTables_wrapper .dataTables_length select {
    border: 1px solid rgba(0, 0, 0, .22);
    border-radius: calc(var(--adm-radius) / 1.6);
    padding: 6px 9px;
    font-size: 13px;
}

#main-content .pagination > li > a,
#main-content .pagination > li > span {
    border-color: rgba(0, 0, 0, .14);
    color: var(--adm-text);
    font-size: 13px;
}

#main-content .pagination > .active > a,
#main-content .pagination > .active > a:hover,
#main-content .pagination > .active > span {
    background: var(--adm-accent);
    border-color: var(--adm-accent);
    color: #fff;
}

/* Select2 volgt dezelfde vormtaal als de gewone invoervelden. */
#main-content .select2-container--default .select2-selection--single,
#main-content .select2-container--default .select2-selection--multiple {
    border: 1px solid rgba(0, 0, 0, .22);
    border-radius: calc(var(--adm-radius) / 1.6);
    min-height: 36px;
}

#main-content .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--adm-accent);
}

/* --- Periode-schakelaar (segmented control) ------------------------------- */

.adm-switch {
    display: inline-flex;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: var(--adm-radius);
    overflow: hidden;
}

.adm-switch a {
    padding: 7px 14px;
    font-size: 13px;
    line-height: 1.2;
    color: var(--adm-text);
    background: #fff;
    text-decoration: none;
    transition: background-color .15s ease;
}

.adm-switch a + a {
    border-left: 1px solid rgba(0, 0, 0, .18);
}

.adm-switch a:hover {
    background: #f3f5f7;
}

.adm-switch a[aria-current="page"] {
    background: var(--adm-accent);
    color: #fff;
}

/* --- Overzichtstabel ------------------------------------------------------ */

.panel .table > thead > tr > th {
    border-bottom: 1px solid var(--adm-line);
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--adm-text-soft);
    font-weight: 500;
    padding: 10px 12px;
}

.panel .table > tbody > tr > td {
    border-top: 1px solid var(--adm-line-soft);
    padding: 11px 12px;
    vertical-align: middle;
    font-size: 13px;
}

.panel .table-striped > tbody > tr:nth-of-type(odd) {
    background: transparent;
}

.panel .table > tbody > tr:hover {
    background: rgba(0, 0, 0, .022);
}

/* --- Waarschuwingsbord in de kopbalk -------------------------------------- */

.header .top-menu .adm-warnsign {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 13px 10px 0 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--adm-danger);
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    /* Alleen transform en opacity animeren; die kosten de GPU niets. */
    animation: adm-pulse 1.8s ease-in-out infinite;
}

.header .top-menu .adm-warnsign:hover,
.header .top-menu .adm-warnsign:focus {
    background: var(--adm-danger);
    color: #fff;
    filter: brightness(1.1);
    text-decoration: none;
}

.adm-warnsign__count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.adm-warnsign i {
    font-size: 15px;
}

@keyframes adm-pulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%      { transform: scale(1.06); opacity: .82; }
}

/* Zonder beweging blijft het bord even opvallend: felle rand eromheen. */
@media (prefers-reduced-motion: reduce) {
    .header .top-menu .adm-warnsign {
        animation: none;
        box-shadow: 0 0 0 3px rgba(163, 45, 45, .28);
    }
}

@media (max-width: 768px) {
    /* Op smalle schermen alleen het icoon met het aantal. */
    .adm-warnsign__label {
        display: none;
    }
}

/* --- Datumfouten in lijsten ----------------------------------------------- */

.adm-lead {
    color: var(--adm-text-soft);
    margin-bottom: 18px;
    max-width: 68ch;
}

.adm-date {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* De hele cel markeren in plaats van alleen een klein icoontje. */
.adm-date--invalid {
    background: #fdecea;
    color: #7f1d1d;
    font-weight: 600;
    border-radius: calc(var(--adm-radius) / 2);
}

.adm-empty {
    color: var(--adm-text-soft);
    padding: 28px 12px;
}

.adm-empty .fa {
    color: #1b5e20;
    margin-right: 6px;
}

/* --- Inloggen en wachtwoord ----------------------------------------------- */

/* Losse pagina's zonder zijbalk. Ze dragen .adm-page zodat de knop- en
   formulierregels hierboven ook op hen van toepassing zijn. */
body.login-body {
    background: var(--adm-bg);
    /* min-height (niet height) zodat een te hoge inhoud gewoon doorloopt
       in plaats van boven de viewport af te knippen. */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

/* Het Microsoft 365-blok staat buiten .form-signin en werd zo zo breed als de
   Bootstrap-container. De breedte hoort hier, dan lopen alle blokken gelijk. */
.login-body .container {
    width: 100%;
    max-width: 380px;
}

.login-body .form-signin {
    max-width: 380px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.login-body .form-signin-heading {
    color: var(--adm-text);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-align: center;
    margin: 0 0 18px;
    text-shadow: none;
}

.login-body .login-wrap {
    background: var(--adm-surface);
    border: 1px solid var(--adm-line);
    border-radius: var(--adm-radius);
    padding: 24px;
}

.login-body .login-wrap .form-control {
    margin-bottom: 12px;
}

.login-body .btn-login,
.login-body .btn-block {
    background: var(--adm-accent);
    border-color: var(--adm-accent);
    border-radius: var(--adm-radius);
    color: #fff;
    font-size: 14px;
    padding: 11px 16px;
    width: 100%;
    text-shadow: none;
}

.login-body .btn-login:hover,
.login-body .btn-block:hover {
    filter: brightness(1.08);
    color: #fff;
}

.login-body a {
    color: var(--adm-accent);
}

/* --- Smalle schermen ------------------------------------------------------ */

@media (max-width: 768px) {
    #main-content {
        margin-left: 0;
    }

    #sidebar {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sidebar a,
    .adm-btn,
    .adm-switch a {
        transition: none !important;
    }
}