/* Netwerk in Kaart — layout & componenten (functioneel, stabiel) */

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
  background:
    radial-gradient(circle at top, #1a2e2a 0%, var(--bg) 58%);
  color:var(--text);
  font-size:var(--text-base);
  transition:background .35s ease,color .25s ease;
}
.wrap{max-width:1100px;margin:auto;padding:18px 16px}
.row{display:flex;align-items:center;gap:10px}

.card{
  background:radial-gradient(circle at top, var(--card-highlight), var(--card) 60%);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 14px 30px var(--shadow);
  transition:
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease,
    transform .18s ease;
}
body.light .card{
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(250,252,251,0.98));
  border-color:var(--line);
  box-shadow:
    0 14px 30px var(--shadow),
    0 0 0 1px rgba(255,255,255,0.9);
  backdrop-filter:blur(14px);
}

.card .inner{padding:16px}
.grid{display:grid;gap:12px}
.filters{grid-template-columns:1fr}

@media(min-width:900px){
  .filters{grid-template-columns:1.1fr 1.1fr}
  .filters-search{grid-column:1 / -1}
  .filters-bottom{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1.1fr 1.1fr;
    gap:12px;
    align-items:flex-start;
    margin-top:4px;
    transform:translate(-6px,-4px);
  }
  .results{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:899px){
  .filters-bottom{display:grid;grid-template-columns:1fr;gap:12px}
  .results{grid-template-columns:1fr}
}

.pill-label{
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--text);
  font-weight:600;
  margin:8px 0 6px;
  text-shadow:0 0 6px rgba(var(--brand-dark-rgb),0.85);
}
body.light .pill-label{
  color:var(--brand-dark);
  text-shadow:none;
}

/* ========= Zoek / intro layout ========= */

/* Mobiel: intro boven zoekbalk */
.filters-search-row{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.search-block{
  width:100%;
  order:1;            /* onder intro-block */
}

.search-block > .row:first-child { margin-bottom:10px !important; }

.intro-block{
  margin-top:8px;
  order:0;            /* boven search-block */
  text-align:left;
}

/* Desktop: naast elkaar, zoek links – intro rechts */
@media(min-width:900px){
  .filters-search-row{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
  }

  .search-block{
    flex:0 0 58%;
    min-width:0;
    order:0;
  }

  .intro-block{
    flex:0 0 38%;
    max-width:none;
    flex-shrink:0;
    text-align:right;
    margin-top:0;
    order:0;
  }
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ========= Bemoeizorg logo (header) ========= */

.brand-header{
  display:block;
  line-height:0;
  margin:0;
}

.brand-logo{
  display:none;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:52px;
  object-fit:contain;
  object-position:left center;
}

body:not(.light) .brand-logo--dark{ display:block; }
body.light .brand-logo--light{ display:block; }

@media(min-width:900px){
  .brand-logo{
    max-height:64px;
    object-position:right center;
    margin-left:auto;
  }
}

.theme-toggle{
  border:none; background:transparent; padding:0; cursor:pointer;
}
.theme-toggle-track{
  position:relative; width:44px; height:22px; border-radius:999px;
  background:linear-gradient(135deg, var(--brand-dark), var(--bg-elevated));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 4px;
  box-shadow:0 3px 8px var(--shadow);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.theme-toggle-thumb{
  position:absolute; top:50%; left:4px; width:18px; height:18px; border-radius:999px;
  background:#e5e7eb; transform:translate(0,-50%);
  box-shadow:0 2px 6px rgba(15,23,42,0.8);
  transition:transform .22s ease, background .2s ease, box-shadow .2s ease;
}
.theme-toggle-icon{ font-size:13px; opacity:0.65; transition:opacity .2s ease, transform .2s ease; transform:translateY(1px); }
body:not(.light) .theme-toggle-icon-moon{opacity:1;}
body:not(.light) .theme-toggle-icon-sun{opacity:0.35;}
body.light .theme-toggle-track{
  background:linear-gradient(135deg,#f9fafb,#ffffff);
  border-color:#e5e7eb; box-shadow:0 1px 4px rgba(148,163,184,0.35);
}
body.light .theme-toggle-thumb{
  transform:translate(20px,-50%); background:#e5e7eb; box-shadow:0 1px 3px rgba(148,163,184,0.6);
}
body.light .theme-toggle-icon-moon{opacity:0.35;}
body.light .theme-toggle-icon-sun{opacity:1;}
.theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.input{
  position:relative; border-radius:999px; padding:1px;
  background:var(--surface); border:1px solid var(--line);
  transition: box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.input input{
  width:100%; padding:10px 12px 10px 34px; border-radius:999px; font-size:var(--text-base);
  border:none; background:var(--surface-solid); color:var(--text); box-shadow:0 1px 2px var(--shadow); outline:none;
}
.input input::placeholder{color:var(--muted)}
.input:hover, .input:focus-within{
  background:var(--surface-solid); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-muted);
}
.icon{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--muted); transition:color .18s ease, opacity .18s ease; }
.input:hover .icon, .input:focus-within .icon{ color:var(--text); opacity:0.9; }
body.light .input{
  background:var(--surface); box-shadow:0 4px 10px var(--shadow); backdrop-filter:blur(12px); border-color:var(--line);
}
body.light .input input{ background:transparent; border:none; box-shadow:none; color:var(--text); }
body.light .input:hover, body.light .input:focus-within{ box-shadow:0 6px 16px var(--shadow); border-color:var(--accent); }
body.light .input:hover .icon, body.light .input:focus-within .icon{ color:var(--brand-dark); }

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--line);
  background:var(--surface);
  padding:5px 10px; border-radius:999px; font-size:var(--text-sm);
  cursor:pointer; user-select:none; color:var(--muted);
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.chip:hover{ background:var(--surface-solid); border-color:var(--accent-muted); color:var(--text); box-shadow:0 4px 10px var(--shadow); transform:translateY(-1px); }
.chip.active{ background:var(--surface-solid); color:var(--text); border-color:var(--chip-color, var(--accent)); box-shadow:0 0 0 1px var(--chip-color, var(--accent)); }

body.light .chip{
  background:var(--surface); border-color:var(--line); color:var(--muted); box-shadow:0 4px 10px var(--shadow);
}
body.light .chip:hover{
  background:var(--accent-subtle); border-color:var(--accent-muted); box-shadow:0 6px 14px var(--shadow); color:var(--brand-dark);
}
body.light .chip.active{
  background:var(--accent-subtle); border-color:var(--chip-color, var(--accent)); color:var(--accent-strong); box-shadow:0 0 0 1px var(--chip-color, var(--accent));
}

.org-chip{ display:inline-flex; align-items:center; padding:5px 12px 5px 8px; }
.org-chip .org-logo{
  width:18px; height:18px; border-radius:16px;
  background:radial-gradient(circle at 30% 20%, var(--card-highlight), var(--brand-dark));
  border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:600; margin-right:6px; color:var(--text);
  box-shadow:0 1px 3px var(--shadow); flex-shrink:0;
}
.org-chip .org-label{ white-space:nowrap; }
.org-chip.active .org-logo{
  border-color:var(--chip-color, var(--accent));
  box-shadow:0 0 8px var(--accent-muted);
  background:radial-gradient(circle at 30% 20%, var(--accent-strong), var(--brand-dark));
}

body.light .org-chip .org-logo{
  background:radial-gradient(circle at 30% 20%, #f0f5f3, #dce8e4);
  border-color:var(--line); color:var(--brand-dark); box-shadow:0 1px 3px var(--shadow);
}
body.light .org-chip.active .org-logo{
  background:radial-gradient(circle at 30% 20%, var(--brand-teal), var(--accent-strong));
  border-color:var(--accent); color:#fff;
  box-shadow:0 0 6px var(--accent-muted);
}

.org-logo-card{
  width:22px; height:22px; border-radius:999px; object-fit:contain;
  background:var(--surface-solid); padding:2px; box-shadow:0 1px 3px var(--shadow); flex-shrink:0;
}
body.light .org-logo-card{
  background:#ffffff; box-shadow:0 1px 3px var(--shadow);
}

.muted{ color:var(--muted); font-size:var(--text-sm); }

.btn{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:var(--surface);
  border-radius:999px; padding:7px 12px; font-size:var(--text-sm);
  cursor:pointer; color:var(--text);
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .18s ease, transform .12s ease;
}
.btn.ghost{ border:none; background:transparent; color:var(--muted); box-shadow:none; }
.btn.ghost:hover{ color:var(--text); background:var(--accent-subtle); }
.btn.primary{ background:var(--accent-subtle); border-color:var(--accent); color:var(--text); box-shadow:none; }
.btn.primary:hover{ background:var(--accent-muted); box-shadow:0 0 0 1px var(--accent-muted); transform:translateY(-1px); }
.btn.call{ background:rgba(var(--brand-teal-rgb),0.2); border-color:var(--accent); color:#d4f5eb; box-shadow:none; }
.btn.call:hover{ background:rgba(var(--brand-teal-rgb),0.32); box-shadow:0 0 0 1px var(--accent-muted); transform:translateY(-1px); }

body.light .btn{
  background:var(--surface-solid); border-color:var(--line); color:var(--text);
  box-shadow:0 4px 12px var(--shadow); backdrop-filter:blur(10px);
}
body.light .btn.primary{ background:var(--accent-subtle); border-color:var(--accent); color:var(--accent-strong); box-shadow:none; }
body.light .btn.call{ background:rgba(var(--brand-teal-rgb),0.12); border-color:var(--accent); color:var(--accent-strong); box-shadow:none; }

.btn:active, .chip:active, .city:active, .filter-chip:active, .card.person:active{
  transform:translateY(1px) scale(0.98); box-shadow:0 2px 6px rgba(0,0,0,0.35);
}

.results{ display:grid; gap:12px; margin-top:14px; }

.card.person{
  opacity:0; transform:translateY(4px);
  transition: opacity .18s ease-out, transform .18s ease-out, box-shadow .15s ease, border-color .15s ease, background .2s ease;
  border-radius:20px; border:1px solid var(--line);
  background:radial-gradient(circle at top, var(--card-highlight), var(--card) 60%); cursor:pointer;
}
.card.person.visible{ opacity:1; transform:translateY(0); }
.card.person:hover{ transform:translateY(-2px); box-shadow:0 16px 34px var(--shadow); border-color:var(--accent); }

body.light .card.person{
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(250,252,251,0.98));
  border-color:var(--line); box-shadow: 0 14px 30px var(--shadow), 0 0 0 1px rgba(255,255,255,0.9);
}
body.light .card.person:hover{
  border-color:var(--accent-muted); box-shadow: 0 18px 38px var(--shadow), 0 0 0 1px rgba(255,255,255,1);
}

.badge{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:999px; padding:2px 9px;
  font-size:var(--text-xs); background:var(--surface); color:var(--muted);
}
body.light .badge{ background:var(--bg); border-color:var(--line); color:var(--muted); }

.badge.location{
  font-size:var(--text-xs); background:var(--surface-solid); color:var(--text); border-color:var(--brand-orange); white-space:nowrap;
}
body.light .badge.location{ background:rgba(var(--brand-orange-rgb),0.12); color:var(--brand-dark); border-color:var(--brand-orange); }

/* Expertise-badges: 3 huisstijl-varianten i.p.v. regenboogkleuren */
.badge.badge--exp-a{
  border-color:var(--brand-teal);
  background:rgba(var(--brand-teal-rgb),0.18);
  color:var(--text);
}
.badge.badge--exp-b{
  border-color:rgba(var(--brand-dark-rgb),0.85);
  background:rgba(var(--brand-dark-rgb),0.35);
  color:var(--text);
}
.badge.badge--exp-c{
  border-color:var(--brand-orange);
  background:rgba(var(--brand-orange-rgb),0.16);
  color:var(--text);
}
body.light .badge.badge--exp-a{
  background:rgba(var(--brand-teal-rgb),0.12);
  color:var(--accent-strong);
}
body.light .badge.badge--exp-b{
  background:rgba(var(--brand-dark-rgb),0.08);
  color:var(--brand-dark);
}
body.light .badge.badge--exp-c{
  background:rgba(var(--brand-orange-rgb),0.14);
  color:var(--brand-dark);
}

.chip.skill-chip.active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}

.stack{display:flex;flex-direction:column;gap:6px}

.actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; align-items:center; }
.actions .primary-actions{ display:flex; gap:8px; flex-wrap:wrap; }

a{text-decoration:none;color:inherit}

footer{ color:var(--muted); font-size:var(--text-xs); padding:24px 0; text-align:center; }
footer #adminLink{ color:var(--brand-teal); font-weight:600; text-decoration:none; margin-right:6px; }
footer #adminLink:hover{ text-decoration:underline; }
footer #adminLink.admin-link--local-preview{ color:var(--brand-orange-light); }
.local-dev-hint{ display:block; margin-top:6px; font-size:11px; opacity:0.85; max-width:28rem; margin-left:auto; margin-right:auto; }

dialog{
  border:none; border-radius:20px; max-width:520px; width:calc(100% - 32px); padding:0;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  background:radial-gradient(circle at top, var(--card-highlight), var(--card) 65%); color:var(--text);
}
body.light dialog{
  background: radial-gradient(circle at top, #ffffff, #e8f0ed 65%);
  box-shadow: 0 20px 40px var(--shadow), 0 0 0 1px rgba(255,255,255,0.9);
  backdrop-filter:blur(14px);
}
dialog .inner{padding:18px 16px}
dialog::backdrop{background:rgba(var(--brand-dark-rgb),0.75)}
body.light dialog::backdrop{background:rgba(var(--brand-dark-rgb),0.35)}

.k{
  width:44px; height:44px; border-radius:16px;
  background:radial-gradient(circle at 30% 20%, var(--card-highlight), var(--brand-dark));
  display:grid; place-items:center; margin-right:10px; font-size:18px;
}
body.light .k{ background:radial-gradient(circle at 30% 20%, #f0f5f3, #dce8e4); }

.tiny{ font-size:var(--text-xs); color:var(--muted); }

.map-wrapper{ max-width:380px; margin:0 auto; }

.map-panel{
  border-radius:16px;
  background:radial-gradient(circle at top, var(--card-highlight), var(--card) 70%);
  padding:10px 20px 14px; width:100%;
  display:flex; flex-direction:column; align-items:center;
  box-shadow:0 10px 24px var(--shadow);
}
body.light .map-panel{
  background:rgba(255,255,255,0.96);
  box-shadow:0 14px 30px var(--shadow);
  border:1px solid var(--line);
}

.province{
  position:relative;
  width:100%; max-width:340px; aspect-ratio:121/71; margin:0 auto;
  border:none; border-radius:14px; overflow:hidden; box-shadow:none; font-size:16px;
}
.province::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../logos/bemoeizorg-netwerk-logo.png");
  background-size:contain;
  background-position:center center;
  background-repeat:no-repeat;
  /* Bron-PNG tinten naar huisstijl lichtgroen (brand-teal) */
  filter:brightness(0) saturate(100%) invert(62%) sepia(28%) saturate(876%) hue-rotate(122deg) brightness(93%) contrast(91%);
  opacity:0.92;
  pointer-events:none;
  z-index:1;
}
body.light .province{ box-shadow:none; background-color:transparent; }
body.light .province::before{
  filter:brightness(0) saturate(100%) invert(54%) sepia(32%) saturate(950%) hue-rotate(122deg) brightness(88%) contrast(92%);
  opacity:0.9;
}
.province.province--offline::before{ display:none; }

.city{
  position:absolute; transform:translate(-50%,-50%); cursor:pointer;
  display:flex; align-items:center; gap:0.4em; user-select:none; z-index:2;
  padding:0.1em 0.4em; border-radius:999px; border:none; background:transparent;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.city-dot{
  width:0.62em; height:0.62em; border-radius:50%; background:var(--brand-orange-light); flex-shrink:0;
  box-shadow:0 0 0 0.14em rgba(var(--brand-dark-rgb),0.9);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.city-label{ font-size:0.86em; color:var(--text); font-weight:500; white-space:nowrap; text-shadow:0 1px 2px var(--bg); transition:text-shadow .12s ease, color .12s ease; }
.city:hover{ transform:translate(-50%,-50%) scale(1.05); background:rgba(var(--brand-dark-rgb),0.7); box-shadow:0 0 0 0.16em var(--accent-muted); }
.city:hover .city-dot{ transform:scale(1.1); box-shadow:0 0 0 0.2em rgba(var(--brand-orange-light-rgb),0.55); }
.city:hover .city-label{ text-shadow:0 0 4px rgba(255,255,255,.4); }
.city.active{ transform:translate(-50%,-50%) scale(1.05); background:rgba(var(--brand-dark-rgb),0.9); box-shadow:0 0 0 0.2em var(--accent-muted); }
.city.active .city-dot{ background:var(--brand-orange); box-shadow:0 0 0 0.2em rgba(var(--brand-orange-rgb),0.65); }
.city.active .city-label{ color:var(--text); text-shadow:0 0 6px rgba(255,255,255,0.35); }

body.light .city-label{ color:var(--brand-dark); text-shadow:none; }
body.light .city-dot{ background:var(--brand-orange-light); box-shadow:0 0 0 0.14em var(--line); }
body.light .city:hover{ background:rgba(255,255,255,0.95); box-shadow:0 0 0 0.16em var(--accent-muted); }
body.light .city:hover .city-dot{ box-shadow:0 0 0 0.18em rgba(var(--brand-orange-light-rgb),0.5); }
body.light .city:hover .city-label{ color:var(--brand-dark); text-shadow:0 0 3px rgba(255,255,255,0.75); }
body.light .city.active{ background:rgba(255,255,255,0.98); box-shadow:0 0 0 0.2em var(--accent); }
body.light .city.active .city-dot{ background:var(--brand-orange); box-shadow:0 0 0 0.2em rgba(var(--brand-orange-rgb),0.55); }
body.light .city.active .city-label{ color:var(--brand-dark); text-shadow:0 0 5px rgba(255,255,255,0.95); }

.my-note{
  width:100%; min-height:70px; margin-top:4px; resize:vertical;
  border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); padding:6px 8px; font-size:var(--text-sm);
}
body.light .my-note{
  border-color:var(--line); background:#ffffff; color:var(--text); box-shadow:0 4px 10px var(--shadow);
}

#activeFilters{
  color:var(--muted); font-size:var(--text-xs); margin-top:4px;
  min-height:18px; display:flex; flex-wrap:wrap; align-items:center; gap:4px;
}
#activeFilters strong{ color:var(--text); margin-right:2px; font-size:var(--text-xs); }
.filter-chip{
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
  border-radius:999px; border:1px solid var(--line); background:var(--surface);
  font-size:var(--text-xs); color:var(--text); cursor:pointer; margin-top:2px;
}
body.light .filter-chip{ background:var(--bg); border-color:var(--line); color:var(--text); }

#count{ font-size:var(--text-sm); }
@keyframes countPulse {
  0%{ transform:scale(1); color:var(--muted); }
  40%{ transform:scale(1.06); color:var(--text); }
  100%{ transform:scale(1); color:var(--muted); }
}
#count.pulse { animation:countPulse .3s ease-out; }

@keyframes resetFlash{
  0%{box-shadow:0 0 0 0 rgba(44,165,142,0)}
  50%{box-shadow:0 0 0 6px rgba(44,165,142,0.35)}
  100%{box-shadow:0 0 0 0 rgba(44,165,142,0)}
}
.card.resetting{ animation:resetFlash .55s ease-out; }

#skills + .pill-label{ margin-top:16px; }

.btn:focus-visible, .chip:focus-visible, .city:focus-visible, .filter-chip:focus-visible, .card.person:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
}