/* ==========================================================================
   WIJE MOBIEL — gedeelde stylesheet (WIJS-mobiel + WIJmatchen-mobiel)
   Bron van waarheid; geladen via External CSS URL van het design.
   Herkomst: tmpl2270994 "WIJS Mobile v2" (Global Styles, byte-getrouw),
   tmpl922901 "Mobile Citizen info tab" (formulier-blok, meest recente variant,
   //-bug gefixt + gescoped), tmpl2087291 "Mobile-overview styling".
   NIET hierin: Dossier/CSS "Styling Mobile" (tmpl2114534) + dropdown-blok
   (tmpl2114538) — fase 2, eerst scopen (unscoped .panel-regels).
   Gegenereerd 2026-07-08 uit snapshot 2026-07-08.
   ========================================================================== */

/* ============================================
   1. HEADER / NAVBAR — Global Styles
   Geen media-guard: alle portals hebben een aparte design-config
   (bevestigd 2026-07-08), dus deze sheet raakt alleen het mobiele portal
   en de navbar-styling moet op elke schermbreedte gelden.
   ============================================ */
.navbar-default {
  background-color: #fff !important;
  border-bottom: 2px solid #f0f0f0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

#main-nav h1 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
}

#main-nav a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

.header-logo {
  height: 36px !important;
  width: auto !important;
}

#nodeinfo { display: none !important; }

main.container {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.wijs-panel-clean .panel.panel-default {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.wijs-panel-clean .panel-body {
  padding: 0 !important;
}

/* Zoekbalk: padding-left zodat placeholder niet achter icoon valt */
.input__custom.form-control {
  padding-left: 36px !important;
}

/* ============================================
   HOME VIEW
   ============================================ */

.wijs-home-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(100vh - 70px) !important;
  padding: 24px 16px 80px 16px !important;
}

.wijs-home-wrapper h4 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin-bottom: 6px !important;
}

.wijs-home-wrapper .text-center {
  color: #6b7280 !important;
  font-size: 14px !important;
  margin-bottom: 24px !important;
}

/* Fix: WEM zet width:40% inline op de <td> — overschrijven */
.wijs-home-wrapper table.grid td,
.wijs-home-wrapper table.grid {
  width: 100% !important;
  max-width: 340px !important;
  padding: 0 !important;
}

/* Zoekbalk wrapper */
.wijs-home-wrapper .search__custom {
  width: 100% !important;
  max-width: 340px !important;
}

/* Bekijk al mijn dossiers: vastgepind onderaan */
.wijs-home-wrapper table.default > tbody > tr:nth-child(5) td {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 16px !important;
  background: #fff !important;
  border-top: 1px solid #f0f0f0 !important;
  z-index: 100 !important;
  text-align: center !important;
}

.wijs-home-wrapper .btn-toolbar {
  justify-content: center !important;
  margin-bottom: 0 !important;
}

.wijs-home-wrapper .btn.btn-default {
  width: 100% !important;
  max-width: 340px !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  border: 2px solid #e5e7eb !important;
  color: #1a1a2e !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.wijs-home-wrapper .btn.btn-default:hover {
  border-color: #d62828 !important;
  box-shadow: 0 4px 12px rgba(214,40,40,0.12) !important;
}

.wijs-home-wrapper .btn.btn-default .wem-icon-prefix {
  font-size: 18px !important;
  color: #d62828 !important;
}

/* ============================================
   SEARCH & DOSSIER VIEW — Gedeelde styles
   ============================================ */

/* Terug-knop — ALLEEN de knop in de bovenste toolbar (directe child van de
   wrapper). Was eerder `.wijs-list-wrapper .btn.btn-primary` (te breed): dat pakte
   ook zoek- en actieknoppen binnen panels en maakte die rood-transparant met een
   ‹-prefix. Nu strak gescoped op de echte Terug-knop. */
.wijs-list-wrapper > .btn-toolbar .btn.btn-primary:not(.dropdown-toggle) {
  background: transparent !important;
  border: none !important;
  color: #d62828 !important;
  font-weight: 600 !important;
  padding: 6px 0 !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

.wijs-list-wrapper > .btn-toolbar .btn.btn-primary:not(.dropdown-toggle)::before {
  content: "‹ " !important;
  font-size: 18px !important;
}

.wijs-list-wrapper .btn.btn-primary.dropdown-toggle::before {
  content: none !important;
}

/* Fix: WEM zet width:40% inline op de <td> van de zoekbalk */
.wijs-list-wrapper table.grid td {
  width: 100% !important;
  padding: 8px 0 !important;
}

.wijs-list-wrapper table.grid {
  width: 100% !important;
}

/* Zoekbalk wrapper */
.wijs-list-wrapper .search__custom {
  width: 100% !important;
}

/* Resultaten teller */
.wijs-list-wrapper table.default > tbody > tr > td:first-child small {
  color: #9ca3af !important;
  font-size: 12px !important;
}

/* Sorteerdropdown */
.wijs-list-wrapper table.default > tbody > tr > td:last-child .form-control {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
  color: #374151 !important;
  background: #fff !important;
  box-shadow: none !important;
  max-width: 140px !important;
  float: right !important;
}

/* Tabs (dossier view) */
.wijs-list-wrapper .nav-tabs {
  border-bottom: 2px solid #e5e7eb !important;
  margin: 12px 0 !important;
}

.wijs-list-wrapper .nav-tabs > li > a {
  color: #6b7280 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 8px 14px !important;
  margin-bottom: -2px !important;
  background: transparent !important;
}

.wijs-list-wrapper .nav-tabs > li.active > a {
  color: #d62828 !important;
  border-bottom: 2px solid #d62828 !important;
  background: transparent !important;
  font-weight: 700 !important;
}

/* ============================================
   CLIENT CARDS
   ============================================ */

.wijs-list-wrapper .card {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
}

.wijs-list-wrapper .repeater-item > div[style*="margin-top: 16px"] {
  display: none !important;
}

.wijs-list-wrapper .card h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin: 0 0 4px 0 !important;
}

.wijs-list-wrapper .card p {
  font-size: 13px !important;
  color: #6b7280 !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.4 !important;
}

.wijs-list-wrapper .card small {
  font-size: 13px !important;
  color: #374151 !important;
}

.wijs-list-wrapper .card .fa-phone,
.wijs-list-wrapper .card .fa-envelope-o {
  color: #9ca3af !important;
}

.wijs-list-wrapper .font-grey p {
  font-size: 12px !important;
  color: #9ca3af !important;
}

.wijs-list-wrapper .text-danger .fa-lock {
  font-size: 14px !important;
}

/* Drie-puntjes knop */
.wijs-list-wrapper .btn.btn-primary.dropdown-toggle {
  background: #f3f4f6 !important;
  border: none !important;
  color: #374151 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  box-shadow: none !important;
}

.wijs-list-wrapper .btn.btn-primary.dropdown-toggle:hover {
  background: #e5e7eb !important;
}

/* Dropdown menu */
.wijs-list-wrapper .dropdown-menu {
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  padding: 4px 0 !important;
}

.wijs-list-wrapper .dropdown-menu > li > a {
  font-size: 14px !important;
  color: #374151 !important;
  padding: 10px 16px !important;
}

.wijs-list-wrapper .dropdown-menu > li > a:hover {
  background: #f9fafb !important;
  color: #d62828 !important;
}

/* Staging vs Preview: tabel direct vs via zoom-div — beide centreren */
.wijs-home-wrapper > table.default,
.wijs-home-wrapper > div > table.default {
  max-width: 340px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* ==========================================================================
   2. FORMULIEREN — custom-form__labels (labels boven velden, mobiel patroon)
   Bron: 4 gedivergeerde inline kopieën in de tab-templates; dit is de
   meest recente variant, gescoped onder .custom-form__labels.
   ========================================================================== */
.custom-form__labels div[role="form"] > .form-group > .control-label,
	.custom-form__labels div[role="form"] > .form-group > div {
		display: block;
		width: 100%;
	}
	
	.custom-form__labels div[role="form"] > .form-group {
		margin-bottom: 0px;
	}

	.custom-form__labels div[role="form"] > .form-group > .control-label {
		padding-bottom: 0px;
	}
	
	.custom-form__labels div[role="form"] > .form-group > div {
		padding-bottom: 5px;
		min-height: 0px;
	}

	.custom-form__labels div[role="form"] > .form-group > div > .form-control {
		padding-bottom: 0px;
		min-height: 48px;
	}
.custom-form__labels div.form-horizontal {
    margin-bottom: 0px;
}
.custom-form__labels .form-horizontal .radio,
.custom-form__labels .form-horizontal .checkbox {
    min-height: 0px;
}

/* ==========================================================================
   3. MOBILE-OVERVIEW breakpoints (tmpl2087291)
   ========================================================================== */
@media (min-width: 576px) { 
	#mobile-overview{
	width: 100%;
 	}}

@media (min-width: 992px) {
	#mobile-overview{
	display: none;
	}}

/* ==========================================================================
   4. PANELS & KNOPPEN — WIJmatchen-mobiel formulieren/detail
   Eduard 2026-07-09: weg met de hoekige blauwe panels en de grijze knoppen;
   overnemen van de zachtere WIJS-mobiel-look. Gescoped op beide mobiel-wrappers
   zodat het zowel de quickmatch-schermen (wijs-list-wrapper) als de overzichten
   (wijs-panel-clean) raakt, maar nooit buiten het mobiele portal.
   ========================================================================== */

/* Panels: hoekig + blauw → zachte witte kaart met ronde hoeken */
.wijs-list-wrapper .panel.panel-info,
.wijs-list-wrapper .panel.panel-default,
.wijs-panel-clean .panel.panel-info {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
  background: #fff !important;
}

/* Panel-kop: blauw blok → wit met ronde bovenhoeken en subtiele scheidslijn */
.wijs-list-wrapper .panel > .panel-heading,
.wijs-panel-clean .panel.panel-info > .panel-heading {
  background: #fff !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 14px 16px !important;
}

.wijs-list-wrapper .panel-heading .panel-title h4,
.wijs-panel-clean .panel-heading .panel-title h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.wijs-list-wrapper .panel-heading .panel-title .fa,
.wijs-panel-clean .panel-heading .panel-title .fa {
  color: #d62828 !important;
}

.wijs-list-wrapper .panel > .panel-body,
.wijs-list-wrapper .panel .wem-panel-smartmargin > .panel-body {
  padding: 16px !important;
}

/* Primaire actieknop (bv. "Maak snelle match", "Match bewerken") — echte
   volwaardige knop in WIJS-rood i.p.v. de grijze/tekstlink-look */
.wijs-list-wrapper .panel .btn-group-vertical > .btn.btn-primary,
.wijs-list-wrapper .panel .btn.btn-primary:not(.dropdown-toggle):not(.btn-default) {
  background: #d62828 !important;
  border: none !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(214,40,40,0.20) !important;
}

.wijs-list-wrapper .panel .btn.btn-primary:not(.dropdown-toggle):hover {
  background: #b91c1c !important;
}

.wijs-list-wrapper .panel .btn-group-vertical {
  width: 100% !important;
}
.wijs-list-wrapper .panel .btn-group-vertical > .btn {
  width: 100% !important;
}

/* Zoek-icoonknoppen naast de invulvelden — compact en subtiel, geen groot rood
   blok (overschrijft de primaire-knop-regel hierboven via hogere specificiteit) */
.wijs-list-wrapper .panel .btn-toolbar-align-right .btn.btn-primary {
  background: #f3f4f6 !important;
  border: none !important;
  color: #d62828 !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
}
.wijs-list-wrapper .panel .btn-toolbar-align-right .btn.btn-primary:hover {
  background: #e5e7eb !important;
}

/* Grijze default-knoppen (o.a. datepicker-kalender) → nette neutrale knop */
.wijs-list-wrapper .btn.btn-default,
.wijs-panel-clean .btn.btn-default {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  color: #6b7280 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.wijs-list-wrapper .input-group-btn .btn.btn-default {
  border-radius: 0 10px 10px 0 !important;
}

/* "Te lang": standaard-textarea is 150px hoog inline → compacter */
.wijs-list-wrapper .panel textarea.form-control {
  height: 90px !important;
  min-height: 90px !important;
}

/* ==========================================================================
   5. DETAIL/VIEW — contactgegevens-uitlijning (o.a. view quickmatch)
   Eduard 2026-07-09: de contactgegevens staan in diep geneste WEM-tabellen
   (twee personen als twee <td>'s, elk met een repeater met icoon+waarde).
   Zonder vaste kolombreedte lijnen e-mail en telefoon niet uit en zorgen de
   <p>&nbsp;</p>-spacers voor grote gaten. Gescoped op de panel-body.
   ========================================================================== */

/* Alles boven-uitgelijnd i.p.v. wisselend */
.wijs-list-wrapper .panel-body table.default > tbody > tr > td {
  vertical-align: top !important;
}

/* De twee persoons-kolommen gelijk verdelen. WEM rendert dit blok als
   <div class="wem-table-wrapper"><table class="table"> met <td class="default">.
   (Oudere variant was table.default — via :has() als fallback meegenomen.) */
.wijs-list-wrapper .panel-body .wem-table-wrapper > table.table > tbody > tr > td,
.wijs-list-wrapper .panel-body table.default:has(> tbody > tr > td .repeater-vertical) > tbody > tr > td {
  width: 50% !important;
  vertical-align: top !important;
}

/* Contactregel: de icoon-waarde zit in een genest 3-cels-tabelletje (icoon /
   lege 12px-spacer / waarde). WEM zet table.default standaard op width:100%,
   waardoor dat tabelletje de hele halve kolom vult en de waarde ver van het
   icoon komt. Fix: de contacttabellen tot hun inhoud laten krimpen, de lege
   spacer-cel weghalen en de celpadding minimaliseren. Scope op .repeater-vertical
   zodat de lijst-cards (ook repeater-item) ongemoeid blijven. */
.wijs-list-wrapper .repeater-vertical .repeater-item table.default {
  width: auto !important;
}
.wijs-list-wrapper .repeater-vertical .repeater-item table.default td {
  width: auto !important;
  padding: 0 4px 0 0 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
/* De lege 12px-spacer-cel weg */
.wijs-list-wrapper .repeater-vertical .repeater-item table.default td:empty {
  display: none !important;
}
.wijs-list-wrapper .repeater-vertical .repeater-item p {
  margin: 0 !important;
  white-space: nowrap !important;
}
.wijs-list-wrapper .repeater-item .fa-envelope-o,
.wijs-list-wrapper .repeater-item .fa-phone {
  color: #9ca3af !important;
}

/* De grote lege spacer-paragrafen (<p>&nbsp;</p>) inkorten */
.wijs-list-wrapper .panel-body > p,
.wijs-list-wrapper .panel-body table.default p {
  margin: 4px 0 !important;
}

/* "door: ..."-regel: het losse inline <style> kleurt h6 blauw. Wij overrulen
   naar de neutrale WIJS-look (grijs), zodat je het inline blokje ook hier kunt
   verwijderen zonder dat de kleur terugvalt. */
.wijs-list-wrapper .panel-body h6 {
  color: #9ca3af !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin: 2px 0 8px 0 !important;
}