/* =====================================================================
   LuxeHorren-huisstijl voor het beheer
   Wordt in index.php ná de Metronic-stylesheets geladen en zet alleen
   kleuren, lettertypes en afronding goed. Uitzetten = de <link> in
   index.php weghalen.
   Kleuren volgens de brandguide: Royal Blue #1d203e · goud #D8AC63 (accent) · warm wit #f7f2ea · zand #f4ebd0 · ijsblauw #e9eff4
   ===================================================================== */
:root {
  --lh-navy: #1d203e;
  --lh-navy-2: #2a2f5a;
  --lh-goud: #D8AC63;
  --lh-goud-2: #b88d45;
  --lh-zand: #f4ebd0;
  --lh-achter: #f7f2ea;
  --lh-tekst: #23263a;
  --lh-gedempt: #6b6f80;
  --lh-lijn: #e8e2d6;
}

/* ---------- Lettertypes ---------- */
body, .btn, .form-control, input, select, textarea, .kt-menu__link-text, .table {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.kt-portlet__head-title, .kt-subheader__title, .kt-login__title h3 {
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  color: var(--lh-navy);
}
body { color: var(--lh-tekst); background: var(--lh-achter) !important; }
a { color: var(--lh-navy); }
a:hover { color: var(--lh-goud-2); }

/* ---------- Kop (header + menu) ---------- */
.kt-header, .kt-header-mobile { background: var(--lh-navy) !important; background-image: none !important; border-bottom: 0 !important; box-shadow: none !important; }
.kt-header .kt-header-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-text { color: rgba(255,255,255,.85) !important; font-weight: 500; }
.kt-header .kt-header-menu .kt-menu__nav > .kt-menu__item:hover > .kt-menu__link,
.kt-header .kt-header-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--here > .kt-menu__link,
.kt-header .kt-header-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link {
  background: rgba(216,172,99,.16) !important; border-radius: 6px;
}
.kt-header .kt-header-menu .kt-menu__nav > .kt-menu__item:hover > .kt-menu__link .kt-menu__link-text,
.kt-header .kt-header-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--here > .kt-menu__link .kt-menu__link-text,
.kt-header .kt-header-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-text { color: var(--lh-goud) !important; }
/* Gebruikersmenu rechtsboven: kop van het uitklapmenu was een ontbrekende achtergrondfoto (witte tekst op wit) */
.kt-user-card { background: var(--lh-navy) !important; background-image: none !important; border-bottom: 3px solid var(--lh-goud); }
.kt-user-card .kt-user-card__name { color: #fff !important; }
.kt-user-card .kt-user-card__avatar .kt-badge, .kt-user-card .kt-user-card__avatar span { background: var(--lh-goud) !important; color: var(--lh-navy) !important; }
.kt-header__topbar .kt-header__topbar-item .kt-header__topbar-icon i,
.kt-header__topbar .kt-header__topbar-user .kt-header__topbar-username { color: #fff !important; }
.kt-header-mobile .kt-header-mobile__toolbar-toggler span,
.kt-header-mobile .kt-header-mobile__toolbar-toggler span::before,
.kt-header-mobile .kt-header-mobile__toolbar-toggler span::after { background: #fff !important; }
.kt-header-mobile .kt-header-mobile__toolbar-topbar-toggler i { color: #fff !important; }

/* ---------- Subkop (paginatitel) ----------
   Staat in dit thema op de navy band onder de kop, dus wit en in hoofdletters (brandguide: Roboto Bold, kapitalen) */
body .kt-subheader .kt-subheader__main .kt-subheader__title,
body #kt_subheader h3.kt-subheader__title { color: #fff !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; }
.kt-portlet__head-title { font-weight: 700 !important; }
body #kt_subheader .kt-subheader__breadcrumbs-home i { color: var(--lh-goud) !important; }

/* ---------- Knoppen ---------- */
.btn-primary, .btn-brand {
  background-color: var(--lh-navy) !important; border-color: var(--lh-navy) !important; color: #fff !important;
}
.btn-primary:hover, .btn-brand:hover, .btn-primary:focus, .btn-brand:focus, .btn-primary:active, .btn-brand:active {
  background-color: var(--lh-navy-2) !important; border-color: var(--lh-navy-2) !important; color: #fff !important;
}
.btn-outline-primary, .btn-outline-brand { color: var(--lh-navy) !important; border-color: var(--lh-navy) !important; background: transparent !important; }
.btn-outline-primary:hover, .btn-outline-brand:hover { background: var(--lh-navy) !important; color: #fff !important; }
.btn-label-brand { background: rgba(216,172,99,.15) !important; color: var(--lh-navy) !important; }
.btn-label-brand:hover { background: var(--lh-goud) !important; color: var(--lh-navy) !important; }
.btn-goud, .kt-subheader__btn-options.btn-danger {
  background-color: var(--lh-goud) !important; border-color: var(--lh-goud) !important; color: var(--lh-navy) !important; font-weight: 600;
}
.btn-goud:hover, .kt-subheader__btn-options.btn-danger:hover { background-color: var(--lh-goud-2) !important; border-color: var(--lh-goud-2) !important; }
.btn { border-radius: 6px; }
/* Blauwe "info"-knoppen (o.a. Zoeken op het dashboard) in navy */
.btn-info { background-color: var(--lh-navy) !important; border-color: var(--lh-navy) !important; color: #fff !important; }
.btn-info:hover { background-color: var(--lh-navy-2) !important; border-color: var(--lh-navy-2) !important; }

/* ---------- Kaarten (portlets) ---------- */
.kt-portlet { border-radius: 8px; box-shadow: 0 1px 6px rgba(29,32,62,.06); }
.kt-portlet .kt-portlet__head { border-bottom-color: var(--lh-lijn); }
.kt-portlet.kt-portlet--border-bottom-brand { border-bottom: 3px solid var(--lh-goud) !important; }

/* ---------- Badges, labels, tabs, paginering ---------- */
.kt-badge.kt-badge--brand, .badge-primary { background-color: var(--lh-navy) !important; color: #fff !important; }
.kt-font-brand, .text-primary { color: var(--lh-navy) !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--lh-navy) !important; border-bottom-color: var(--lh-goud) !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--lh-navy) !important; color: #fff !important; }
.lhb-tab-btn.active { color: var(--lh-navy) !important; border-bottom-color: var(--lh-goud) !important; }
.page-item.active .page-link, .dataTables_wrapper .pagination .page-item.active > .page-link {
  background-color: var(--lh-navy) !important; border-color: var(--lh-navy) !important; color: #fff !important;
}
.dataTables_wrapper .pagination .page-item:hover > .page-link { background: var(--lh-zand) !important; color: var(--lh-navy) !important; }

/* ---------- Formulieren ---------- */
.form-control:focus, .custom-select:focus { border-color: var(--lh-goud) !important; box-shadow: 0 0 0 3px rgba(216,172,99,.18) !important; }
.kt-checkbox.kt-checkbox--brand > span, .kt-checkbox.kt-checkbox--brand > input:checked ~ span { border-color: var(--lh-navy) !important; }
.kt-checkbox.kt-checkbox--brand > input:checked ~ span { background: var(--lh-navy) !important; }
.kt-checkbox.kt-checkbox--brand > span:after { border-color: #fff !important; }

/* ---------- Tabellen ---------- */
.table thead th, table.dataTable thead th { color: var(--lh-navy); border-bottom-color: var(--lh-lijn) !important; }
.table-hover tbody tr:hover { background: var(--lh-zand); }

/* ---------- Voettekst ---------- */
.kt-footer { background: #fff !important; border-top: 1px solid var(--lh-lijn); }
.kt-footer .kt-footer__logo img { max-height: 34px; width: auto; }

/* ---------- Inlogpagina ---------- */
.kt-login.kt-login--v1 .kt-login__aside { background: var(--lh-navy) !important; border-right: 4px solid var(--lh-goud); }
.kt-login.kt-login--v1 .kt-login__aside .kt-login__title { color: #fff !important; font-family: 'Roboto', Arial, sans-serif !important; }
.kt-login.kt-login--v1 .kt-login__aside .kt-login__subtitle { color: var(--lh-goud) !important; }
.kt-login.kt-login--v1 .kt-login__aside .kt-login__copyright { color: rgba(255,255,255,.6) !important; }
.kt-login.kt-login--v1 .kt-login__aside .kt-login__logo img { max-width: 220px; height: auto; }
.kt-login.kt-login--v1 .kt-login__wrapper { background: var(--lh-achter); }
.kt-login .kt-login__btn-primary.btn-primary { background: var(--lh-goud) !important; border-color: var(--lh-goud) !important; color: var(--lh-navy) !important; font-weight: 700; }
.kt-login .kt-login__btn-primary.btn-primary:hover { background: var(--lh-goud-2) !important; border-color: var(--lh-goud-2) !important; }
.kt-login .kt-login__head .kt-login__btn-primary.btn-primary { background: transparent !important; color: var(--lh-navy) !important; border: 1px solid var(--lh-goud) !important; }

/* ---------- Startpagina (admin-begin.php) ---------- */
.lhb-zoek-inner button { background: var(--lh-navy) !important; }
.lhb-zoek-inner button:hover { background: var(--lh-navy-2) !important; }
.lhb-zoek-inner:focus-within { border-color: var(--lh-goud) !important; }
.lhb-kaart:hover, .lhb-kaart.actief { border-color: var(--lh-goud) !important; }
.lhb-kaart.actief { background: var(--lh-zand) !important; }
.lhb-kaart-getal.blauw { color: var(--lh-navy) !important; }
.lhb-order-link { color: var(--lh-navy) !important; }
.lhb-order-link:hover { color: var(--lh-goud-2) !important; }
.lhb-titel { color: var(--lh-navy) !important; }

/* ---------- Leesbaarheid: meer contrast ----------
   Metronic gebruikt veel lichtgrijs (#a2a5b9, #74788d) en Montserrat oogt dun op 13px.
   Basistekst donkerder, grijze hulptekst donkerder grijs, iets zwaarder en net iets groter. */
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-size: 14px; color: #23263a !important; }
.table td, table.dataTable td, .kt-portlet__body, .form-control, label, .col-form-label { color: #23263a; }
.form-control { font-weight: 500; }
.form-control::placeholder { color: #7a7e90 !important; }
.text-muted, .kt-font-muted, .form-text, small, .small, .kt-subheader__desc, .help-block { color: #5b5f72 !important; }
.kt-label-font-color-1, .kt-label-font-color-2, .kt-font-dark { color: #3d4155 !important; }
.btn-outline-secondary, .btn-secondary { color: #23263a !important; border-color: #c9cbd6 !important; }
.btn-outline-secondary:hover { background: var(--lh-zand) !important; }
.badge, .kt-badge { font-weight: 600; }
.kt-header .kt-header-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-text { color: #fff !important; font-weight: 600; }

/* Startpagina: lichtgrijze teksten (#bbb/#ccc/#999) waren nauwelijks leesbaar */
.lhb-kaart-label { color: #4a4e62 !important; font-size: 12px !important; font-weight: 600; }
.lhb-kaart-sub { color: #6b6f80 !important; font-size: 11px !important; }
.lhb-kaart-getal.grijs { color: #9a9daa !important; }
.lhb-sub, .lhb-wis { color: #6b6f80 !important; }
.lhb-plaats { color: #5b5f72 !important; font-size: 12px !important; }
.lhb-badge-grijs { color: #4a4e62 !important; }

/* Producten-tab en communicatie: label-kolommen iets donkerder */
.lhb-pr-alle td:first-child, .lhb-cm-tijd, .lhb-cm-naar, .lhb-cm-meta { color: #5b5f72 !important; }

/* ---------- Mobiel menu (uitschuifpaneel) ----------
   Metronic geeft het paneel een witte achtergrond terwijl de menuteksten hierboven wit zijn: alles behalve
   "Home" was onzichtbaar. Paneel nu navy, net als de kop. */
@media only screen and (max-width: 1024px) {
  .kt-header-menu-wrapper,
  .kt-header-menu-wrapper .kt-header-menu-mobile,
  .kt-header-menu-wrapper .kt-header-menu { background: var(--lh-navy) !important; }
  .kt-header-menu-wrapper { min-height: 100vh; }
  .kt-header-menu-wrapper .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-text { color: rgba(255,255,255,.9) !important; }
  .kt-header-menu-wrapper .kt-menu__nav > .kt-menu__item.kt-menu__item--here > .kt-menu__link,
  .kt-header-menu-wrapper .kt-menu__nav > .kt-menu__item:hover > .kt-menu__link { background: rgba(216,172,99,.16) !important; }
  .kt-header-menu-wrapper .kt-menu__nav > .kt-menu__item.kt-menu__item--here > .kt-menu__link .kt-menu__link-text,
  .kt-header-menu-wrapper .kt-menu__nav > .kt-menu__item:hover > .kt-menu__link .kt-menu__link-text { color: var(--lh-goud) !important; }
  .kt-header-menu-wrapper-close { background: var(--lh-navy) !important; }
  .kt-header-menu-wrapper-close i { color: #fff !important; }
}

/* Mobiele kop: het logo is breed en duwde de menuknop (☰) en de ⋯-knop van het scherm af.
   Logo begrensd, knoppen houden altijd hun plek. */
@media only screen and (max-width: 1024px) {
  #kt_header_mobile { display: flex; align-items: center; justify-content: space-between; }
  #kt_header_mobile .kt-header-mobile__logo { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  #kt_header_mobile .kt-header-mobile__logo img { display: block; height: auto !important; max-height: 32px !important; width: auto !important; max-width: 100% !important; }
  #kt_header_mobile .kt-header-mobile__toolbar { flex: 0 0 auto; margin-left: 12px; }
}