:root { --accent:#1976D2; --error:#C62828; --ok:#2E7D32; font-family: Arial, sans-serif; }
body{font-family:'Segoe UI', Roboto, Arial, sans-serif;}
    body { margin:0; padding:20px; background:#fff; color:#111; }
    .panel { background:#1976D2; color:#fff; border:none; border-radius:10px; padding:16px; margin:14px 0; box-shadow:0 2px 4px rgba(0,0,0,0.1); }
    .panel.small { padding:10px; }
    label{display:block;margin-bottom:6px;font-weight:bold;text-align:center;}
    

    select{width:100%;padding:8px;border-radius:4px;border:1px solid #555;background:#0f0f0f;color:#111;max-height:240px;margin-top:20px;}
    .btn{ background:#fff; color:#1976D2; border:2px solid #1976D2; padding:10px 16px; border-radius:6px; cursor:pointer; font-weight:bold; }
.btn:hover{ background:#1976D2; color:#fff; }
    .msg{ margin-top:10px; padding:10px; border-radius:4px; }
    .error { background:#FDECEC; color:#C62828; border:1px solid #C62828; }
    .ok { background:#E8F5E9; color:#2E7D32; border:1px solid #2E7D32; }
    .debug { background:#0f0f0f; border:1px dashed #555; border-radius:4px; padding:12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
    .debug h4 { margin: 0 0 8px; }
  
input[type=text] {
  width: 70%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
  display: block;
  margin: 8px auto;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input[type=text]:focus {
  outline: none;
  border-color: #1976D2;
  box-shadow: 0 0 3px #1976D2;
}


.panel.small {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #ddd !important;
}

.debug {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #ccc !important;
  border-radius: 6px;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}


#liveResults {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #ccc !important;
  border-radius: 6px;
}
#liveResults option {
  background: #fff !important;
  color: #111 !important;
}


/* Mooie Delta-blauwe kaders voor alle witte vlakken */
input[type=text],
#liveResults,
#debugPanel,
.panel.small {
  border: 1px solid rgba(25,118,210,0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(25,118,210,0.1);
}


/* Witte randen en subtiele schaduw voor Delta-blauwe panelen */
.panel {
  border: 2px solid #fff !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
  border-radius: 10px !important;
}


/* Luxe Delta-blauwe panelen met gradient en zachte gloed */
.panel {
  background: linear-gradient(to bottom, #2196F3 0%, #1565C0 100%) !important;
  border: 2px solid rgba(255,255,255,0.8) !important;
  box-shadow: 0 6px 10px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.4);
  border-radius: 12px !important;
  color: #fff !important;
}


/* Donkerblauwe kopteksten voor contrast en elegantie */
h1, h2, h3, h4, h5, h6, label {
  color: #0D47A1 !important;
}


/* Dynamische kopteksten: wit op blauwe panelen, donkerblauw op witte vlakken */
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel label {
  color: #0B7CD7 !important;
}
body h1, body h2, body h3, body h4, body h5, body h6, body label {
  color: #0B7CD7 !important;
}


/* Subtiele schaduwen voor kopteksten */
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel label {
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
body h1, body h2, body h3, body h4, body h5, body h6, body label {
  text-shadow: 0 1px 3px rgba(255,255,255,0.5);
}


/* Kopteksten verbeterd */
h1, h2, h3, th {
  font-family: "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.3px;
}

h1 {
  color: #004b9b !important;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  border-bottom: 3px solid #c1d6ff;
  padding-bottom: 0.3rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

h2 {
  color: #003a78 !important;
  font-size: 1.4rem;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
  text-shadow: 0 1px 1px rgba(0,0,0,0.04);
}

th {
  background: linear-gradient(to bottom, #eaf2ff, #d9e8ff);
  color: #003366 !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

/* Formulier labels en placeholders */
label {
  color: #003a78 !important;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  margin-top: 0.75rem;
  display: block;
}

input::placeholder,
textarea::placeholder {
  color: #7b8ba1;
  opacity: 0.9;
  font-style: italic;
}

input[type="text"],
input[type="search"],
textarea {
  font-size: 1rem;
  color: #102a43;
}

/* Extra accent bij focus */
input:focus + label,
label:focus {
  color: #004b9b !important;
}

/* Specifieke styling voor 'Woonplaats' veld */
label[for="city"],
input[name="city"] {
  color: #004b9b !important;
  font-weight: 600;
}

input[name="city"] {
  border: 1px solid #a9c8ff !important;
  background: #f8fbff !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

input[name="city"]:focus {
  border-color: #004b9b !important;
  box-shadow: 0 0 6px rgba(0, 75, 155, 0.25);
}

/* Duidelijke selectie en focus */
::selection {
  background: #004b9b;
  color: #fff;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #004b9b !important;
  box-shadow: 0 0 0 3px rgba(0,75,155,0.25) !important;
  background: #fff !important;
}

/* Actief veld iets lichter maken voor visueel verschil */
input:focus {
  background: #fefeff !important;
}



/* === Delta Blue Theme: overrides only, no markup/JS changes === */
:root {
  --delta-blue: #004b9b;
  --delta-blue-2: #003a78;
  --delta-blue-weak: #e6f0ff;
  --panel-border: #c1d6ff;
  --text-strong: #102a43;
  --text-soft: #334e68;
  --bg: #f9fbff;
  --shadow: 0 2px 10px rgba(0,0,0,.06);
}

html, body {
  background: var(--bg);
  color: var(--text-strong);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
}

/* Panels / cards / boxes commonly used */
.panel, .card, .box, .container, [data-panel], .content, .wrapper {
  background: #fff !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
}

/* Headings */
h1, h2, .title, .header, [data-header] {
  color: var(--delta-blue) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

/* Inputs */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: #fff !important;
  color: var(--text-strong);
  border: 1px solid var(--panel-border) !important;
  border-radius: 8px !important;
  padding: .55rem .7rem !important;
  outline: none;
  box-shadow: 0 1px 0 rgba(16,42,67,0.02) inset;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--delta-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,75,155,0.12) !important;
}

/* Buttons */
button, input[type="submit"], .btn, [role="button"] {
  background: var(--delta-blue) !important;
  color: #fff !important;
  border: 1px solid var(--delta-blue) !important;
  border-radius: 10px !important;
  padding: .6rem .9rem !important;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease;
}
button:hover, input[type="submit"]:hover, .btn:hover, [role="button"]:hover {
  background: var(--delta-blue-2) !important;
  transform: translateY(-1px);
}
button:active, input[type="submit"]:active, .btn:active, [role="button"]:active {
  transform: translateY(0);
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  background: var(--delta-blue-weak) !important;
  color: var(--delta-blue) !important;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--panel-border);
  padding: .5rem .75rem;
}
td {
  border-bottom: 1px solid #edf2ff;
  padding: .5rem .75rem;
}
tr:hover td { background: #f2f7ff; }

/* Minor utilities */
.muted, .hint, small { color: var(--text-soft) !important; }

/* Kopteksten verbeterd */
h1, h2, h3, th {
  font-family: "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.3px;
}

h1 {
  color: #004b9b !important;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  border-bottom: 3px solid #c1d6ff;
  padding-bottom: 0.3rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

h2 {
  color: #003a78 !important;
  font-size: 1.4rem;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
  text-shadow: 0 1px 1px rgba(0,0,0,0.04);
}

th {
  background: linear-gradient(to bottom, #eaf2ff, #d9e8ff);
  color: #003366 !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

/* Formulier labels en placeholders */
label {
  color: #003a78 !important;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  margin-top: 0.75rem;
  display: block;
}

input::placeholder,
textarea::placeholder {
  color: #7b8ba1;
  opacity: 0.9;
  font-style: italic;
}

input[type="text"],
input[type="search"],
textarea {
  font-size: 1rem;
  color: #102a43;
}

/* Extra accent bij focus */
input:focus + label,
label:focus {
  color: #004b9b !important;
}

/* Specifieke styling voor 'Woonplaats' veld */
label[for="city"],
input[name="city"] {
  color: #004b9b !important;
  font-weight: 600;
}

input[name="city"] {
  border: 1px solid #a9c8ff !important;
  background: #f8fbff !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

input[name="city"]:focus {
  border-color: #004b9b !important;
  box-shadow: 0 0 6px rgba(0, 75, 155, 0.25);
}

/* Duidelijke selectie en focus */
::selection {
  background: #004b9b;
  color: #fff;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #004b9b !important;
  box-shadow: 0 0 0 3px rgba(0,75,155,0.25) !important;
  background: #fff !important;
}

/* Actief veld iets lichter maken voor visueel verschil */
input:focus {
  background: #fefeff !important;
}

/* Extracted from inline styles */
.inl-1-a7988c {color: blue;}
.inl-2-b5f5ae {margin-top:8px;color:#28a745;font-weight:bold;}
.inl-3-d79ce2 {margin-top:8px;}
.inl-4-69c678 {margin-top:15px;text-align:center;}

/* === Naam en woonplaats naast elkaar === */
.inline-fields {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 10px;
}
.inline-fields .field {
  flex: 1;
}
.inline-fields .field input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

/* Onder elkaar op mobiel */
@media (max-width: 600px) {
  .inline-fields {
    flex-direction: column;
    gap: 10px;
  }
}


/* Name */
#name{
 border-color:#004b9b !important;
 border-width:1px;
}

/* Live results */
#liveResults{
 border-color:#004b9b !important;
 border-style:solid;
 border-width:2px !important;
 transform:translatex(0px) translatey(0px);
 font-size:14px;
 text-shadow:rgba(0, 0, 0, 0.3) 0px 1px 1px;
}

/* Location */
#location{
 transform:translatex(0px) translatey(0px);
 border-color:#004b9b !important;
 border-width:1px;
}

/* Panel */
.panel{
 border-color:#3573b4 !important;
 border-width:2px !important;
}

/* Live search input */
#liveSearchInput{
 border-color:#004b9b !important;
 border-width:1px;
}

/* Label */
.panel label{
 font-size:18px;
}

@media (max-width:600px){

 /* Live results */
 #liveResults{
  transform:translatex(0px) translatey(0px);
  border-top-width:10px !important;
  border-top-style:solid;
 }
 
 /* Panel */
 .panel{
  border-top-width:10px !important;
 }
 
 /* Body */
 body{
  background-color:#ffffff;
 }
 
}


/* Panel */
.panel{
 border-top-width:10px !important;
}


/* Table Data */
.delta tr td{
 color:#2c3e50;
}

/* Uitschakelen van het blauwe achtergrondkleur effect bij hover over een tabelrij */
tr:hover td { 
    background: initial !important; /* Zet de achtergrondkleur terug naar de standaardwaarde */
}

body{
 position:relative;
 top:-33px;
}


/* Heading */
h2{
 font-size:19px;
}

.panel label{
 position:relative;
 top:-8px;
}

/* Live search input */
#liveSearchInput{
 position:relative;
 top:-8px;
}

/* Live results */
#liveResults{
 height:362px !important;
}