/* ============================================================
   finder-shared.css — gedeeld door beheer/klant/monteur.

   Bewust beperkt tot wat écht identiek was: de kleurtokens en de
   nieuwe uniforme toast. Knoppen/velden/inlogscherm-opmaak bleken
   bij het vergelijken net iets uit elkaar gegroeid per app (andere
   padding/lettergrootte) - die blijven voorlopig lokaal per app
   staan, want zonder visuele controle wil ik dat niet blind
   gelijktrekken. Zie de toelichting in de chat.
   ============================================================ */

:root{
  --navy:#404040; --navy-2:#4a4a4a; --blue:#83d14a; --blue-dark:#6bb238; --blue-tint:#eef8e4;
  --bg:#f2f4f8; --surface:#ffffff; --border:#e5e9f0; --text:#101828; --text-muted:#667085; --text-faint:#98a2b3;
  --green:#12b76a; --green-tint:#e7f9f1; --amber:#f79009; --amber-tint:#fef3e2; --red:#f04438; --red-tint:#feeceb;
  --purple:#7a5af8; --purple-tint:#f1edfe;
  --radius:10px; --radius-s:6px; --sans:'Inter', -apple-system, sans-serif; --mono:'IBM Plex Mono', monospace;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}
.hidden{display:none !important;}

/* ---------------- Toast (nieuw, uniform - geen conflict met bestaande stijlen) ---------------- */
.finder-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--text);color:#fff;padding:11px 18px;border-radius:9px;font-size:13px;font-weight:600;box-shadow:0 10px 30px rgba(16,24,40,.3);z-index:2000;opacity:0;pointer-events:none;transition:.2s;}
.finder-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.finder-toast.error{background:var(--red);}



/* ============================================================
   Detailpagina's (object / persoon / groep) - gedeeld door de klant- en beheeromgeving.
   Kop met duidelijke primaire actieknop, kerngegevensstrip, tabbladen en kaarten.
   ============================================================ */
/* ---- detailpagina's (object / persoon / groep): één gedeelde indeling ----
   Kop met een duidelijke primaire actieknop rechts, daaronder een strip met de kerngegevens
   in één oogopslag, dan tabbladen (alleen waar echt meerdere onderwerpen zijn) en kaarten. */
.detail-acties{display:flex;gap:8px;flex-shrink:0;align-items:center;}
.btn-icoon{display:inline-flex;align-items:center;gap:7px;}
.btn-icoon svg{width:14px;height:14px;flex-shrink:0;}

.stat-strip{display:flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;}
.stat-item{flex:1 1 160px;padding:13px 18px;border-right:1px solid var(--border);min-width:0;}
.stat-item:last-child{border-right:none;}
.stat-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);margin-bottom:5px;}
.stat-waarde{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stat-waarde.zwak{color:var(--text-faint);font-weight:500;}

.detail-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto;}
.detail-tab{padding:9px 14px;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;}
.detail-tab:hover{color:var(--text);}
.detail-tab.active{color:var(--blue-dark);border-bottom-color:var(--blue);}

.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;align-items:start;margin-bottom:16px;}
.sec{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;}
.detail-grid .sec{margin-bottom:0;}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--border);}
.sec-titel{font-weight:700;font-size:13.5px;}
.sec-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;font-weight:400;}
.sec-body{padding:6px 18px 14px;}
.sec-body.ruim{padding:16px 18px;}
.sec-note{font-size:11.5px;color:var(--text-faint);margin-top:10px;}

.veld-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 18px;}
.veld > label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:5px;}
.veld input:not([type=checkbox]), .veld select{width:100%;max-width:420px;padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;background:#fff;color:var(--text);}
.veld .vast{font-size:13.5px;font-weight:700;padding-top:2px;}
/* Keuzekaarten (rapporttype): de belangrijkste keuze hoort zichtbaar te zijn, niet weggestopt
   in een dropdown - je ziet meteen wat elk rapport oplevert. */
.keuze-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-bottom:18px;}
.keuze-kaart{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s;}
.keuze-kaart:hover{border-color:var(--blue-dark);}
.keuze-kaart.actief{border-color:var(--blue);background:var(--blue-tint);}
.keuze-kaart-kop{display:flex;align-items:center;gap:9px;font-weight:700;font-size:13.5px;margin-bottom:5px;}
.keuze-kaart-kop svg{width:17px;height:17px;flex-shrink:0;color:var(--blue-dark);}
.keuze-kaart-sub{font-size:11.5px;color:var(--text-muted);line-height:1.45;}

/* Segmentknoppen (bestandsformaat) en snelkeuzes (periode). */
.segment{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.segment button{padding:8px 15px;border:none;background:var(--surface);font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;border-right:1px solid var(--border);}
.segment button:last-child{border-right:none;}
.segment button.actief{background:var(--blue);color:#fff;}
.chip-knoppen{display:flex;flex-wrap:wrap;gap:7px;}
.chip-knop{padding:6px 12px;border:1px solid var(--border);border-radius:20px;background:var(--surface);font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;}
.chip-knop:hover{border-color:var(--blue-dark);color:var(--text);}
.chip-knop.actief{background:var(--blue-tint);border-color:var(--blue);color:var(--blue-dark);}

/* Samenvattingsbalk onderaan het rapportscherm. */
.rap-samenvatting{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 18px;}
.rap-samenvatting-tekst{font-size:13px;color:var(--text-muted);}
.rap-samenvatting-tekst b{color:var(--text);}

/* Filterbalk boven een lijst - zelfde opzet voor objecten, personen en groepen. */
.lijst-balk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.zoekveld{position:relative;flex:1 1 260px;max-width:340px;}
.zoekveld svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-faint);pointer-events:none;}
.zoekveld input{width:100%;padding:9px 30px 9px 33px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--surface);color:var(--text);}
.zoekveld input:focus{outline:none;border-color:var(--blue);}
.zoekveld .wis{position:absolute;right:9px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--text-faint);font-size:15px;line-height:1;padding:2px 4px;}
.lijst-balk select{padding:9px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--surface);color:var(--text);}
.lijst-telling{font-size:12px;color:var(--text-muted);margin-left:auto;white-space:nowrap;}

/* Kleurkiezer voor groepen (kaartpinnen) + het bijbehorende stipje in lijsten. */
.kleur-rij{display:flex;flex-wrap:wrap;gap:9px;}
.kleur-optie{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(16,24,40,.12);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-faint);}
.kleur-optie.actief{border-color:var(--text);}
.kleur-optie.geen{background:var(--bg);}
.groep-stip{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:0;flex-shrink:0;}

/* Aanvinklijstjes (secundaire groepen, zichtbare groepen): vinkje en tekst netjes naast elkaar. */
.keuze-rij{display:flex;flex-wrap:wrap;gap:9px 20px;}
.keuze-kolom{display:flex;flex-direction:column;gap:9px;max-height:220px;overflow-y:auto;}
.keuze-rij > label, .keuze-kolom > label, label.keuze{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:400;color:var(--text);margin:0;white-space:nowrap;}
label.keuze input[type=checkbox]{width:auto;margin:0;flex-shrink:0;}

/* Bewerkmodus is met opzet onmiskenbaar: gekleurde balk bovenaan, knoppen altijd in beeld. */
.bewerk-balk{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--blue-tint);border:1px solid var(--blue);border-radius:var(--radius);padding:11px 16px;margin-bottom:16px;}
.bewerk-balk-tekst{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--blue-dark);}
.bewerk-balk-tekst svg{width:16px;height:16px;flex-shrink:0;}

/* ---------------- Wizard (takenmodule beheer) ----------------
   Eén patroon voor alle flows: voortgangsbalk, één vraag per stap, en als laatste stap altijd een
   impactoverzicht met de gevolgen en de waarschuwingen. Die laatste stap is de reden dat dit een
   wizard is en geen formulier - bij een verhuizing of beëindiging wil je vóór het bevestigen zien
   wat er aan dat object hangt, niet erna. */
.wz{width:660px;max-width:calc(100vw - 32px);}
.wz-stappen{display:flex;gap:6px;margin:2px 0 18px;}
.wz-stap{flex:1;height:4px;border-radius:2px;background:var(--border);transition:background .2s;}
.wz-stap.gedaan{background:var(--blue);}
.wz-stap.nu{background:var(--blue-dark);}
.wz-stapnaam{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);margin-bottom:4px;}
.wz-vraag{font-size:15.5px;font-weight:700;margin-bottom:4px;}
.wz-uitleg{font-size:12.5px;color:var(--text-muted);line-height:1.5;margin-bottom:16px;}
.wz-body{max-height:min(56vh,540px);overflow-y:auto;margin:0 -4px;padding:0 4px 2px;}
.wz-voet{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;padding-top:15px;border-top:1px solid var(--border);}
.wz-lijst{border:1px solid var(--border);border-radius:9px;max-height:280px;overflow-y:auto;}
.wz-rij{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px;}
.wz-rij:last-child{border-bottom:none;}
.wz-rij:hover{background:var(--bg);}
.wz-rij.actief{background:var(--blue-tint);box-shadow:inset 3px 0 0 var(--blue);}
.wz-rij-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;}
.wz-leeg{padding:18px;text-align:center;font-size:12.5px;color:var(--text-faint);}
.wz-feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px 16px;background:var(--bg);border-radius:9px;padding:13px 15px;margin-bottom:16px;}
.wz-feit-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);}
.wz-feit-waarde{font-size:13px;font-weight:600;margin-top:2px;word-break:break-word;}
.wz-gevolg{display:flex;gap:9px;font-size:12.5px;line-height:1.5;padding:8px 0;border-bottom:1px dashed var(--border);}
.wz-gevolg:last-child{border-bottom:none;}
.wz-gevolg svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--blue-dark);}
.wz-waarschuwing{display:flex;gap:9px;background:var(--amber-tint);border:1px solid rgba(247,144,9,.3);border-radius:9px;padding:11px 13px;font-size:12.5px;line-height:1.5;color:#7a4700;margin-bottom:9px;}
.wz-waarschuwing svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;}
.wz-blok{margin-bottom:18px;}
/* Openstaande taak op de objectpagina: bewust een balk boven de gegevens en niet een chipje ergens
   in een tabblad - zolang er een mutatie loopt, is dat het eerste dat je over dit object moet weten. */
.taak-balk{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--amber-tint);border:1px solid rgba(247,144,9,.35);border-radius:var(--radius);padding:11px 16px;margin-bottom:16px;}
.taak-balk-tekst{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:#7a4700;line-height:1.45;}
.taak-balk-tekst svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;}
.taak-balk-tekst b{font-weight:700;}