:root{--jfi-primary:#7251a1;--jfi-accent:#3796d2;--jfi-dark:#3b3b3c;--jfi-muted:#f7f7fb;--jfi-radius:10px;--jfi-shadow:0 4px 12px rgba(0,0,0,.08);--btn-height:42px;--btn-padding:.45rem .9rem}
.jfi-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--jfi-dark)}
.jfi-header{display:flex;justify-content:space-between;align-items:center;padding:.6rem .9rem;margin-bottom:1rem;border-radius:var(--jfi-radius);background:linear-gradient(135deg,var(--jfi-primary) 0%,#7251a1cc 55%,var(--jfi-accent) 120%);color:#fff;box-shadow:var(--jfi-shadow)}
.jfi-brand{display:flex;align-items:center;gap:.55rem}
.jfi-brand .title{font-weight:700}
.jfi-btn{height:var(--btn-height);padding:var(--btn-padding);display:flex;align-items:center;justify-content:center;gap:.35rem;border-radius:8px;border:1px solid #ffffff44;background:#ffffff22;color:#fff;cursor:pointer;white-space:nowrap;font-size:.92rem;box-sizing:border-box}
.jfi-btn:hover{background:#ffffff33}
.jfi-btn--primary{background:var(--jfi-accent);border-color:var(--jfi-accent);color:#08354a}
.jfi-tabs{background:var(--jfi-muted);border-radius:var(--jfi-radius);border:1px solid #e6e6e6;padding:1rem;box-shadow:var(--jfi-shadow)}
.jfi-tab{display:none}
.jfi-tab--active{display:block}
.jfi-fieldset{background:var(--jfi-muted);border:1px solid #e6e6e6;border-radius:var(--jfi-radius);padding:.8rem;margin-bottom:1rem}
.jfi-fieldset legend{font-weight:700;padding:0 .25rem;color:var(--jfi-primary)}
.jfi-grid{display:grid;gap:.55rem}
.jfi-grid--2{grid-template-columns:1fr 1fr}
.jfi-grid--3{grid-template-columns:repeat(3,1fr)}
.jfi-grid--4-top{grid-template-columns:repeat(4,1fr)}
.jfi-grid--4w{grid-template-columns:repeat(4,1fr)}
.jfi-row-five{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem}
@media(max-width:900px){.jfi-grid--2,.jfi-grid--3,.jfi-grid--4-top,.jfi-grid--4w,.jfi-row-five{grid-template-columns:1fr}}
label{margin-bottom:.15rem;font-size:.92rem;display:block}
input[type=text],select{
  width:100%;
  height:38px;
  padding:0 .6rem;
  border-radius:8px;
  border:1px solid #cfcfe0;
  background:#fff;
  color:#08354a;
  -webkit-text-fill-color:#08354a;
  box-sizing:border-box
}

textarea{
  width:100%;
  padding:.5rem .6rem;
  border-radius:8px;
  border:1px solid #cfcfe0;
  background:#fff;
  color:#08354a;
  -webkit-text-fill-color:#08354a;
  box-sizing:border-box;
  height:auto;        /* ✅ cruciaal */
}
.jfi-with-suggest{position:relative;display:flex;align-items:center}
.jfi-with-suggest input{flex:1 1 auto;padding-right:2.2rem}
.jfi-suggest-btn{position:absolute;right:1px;height:calc(38px - 2px);width:34px;padding:0;border-radius:0 8px 8px 0;background:#fff;border-left:1px solid #cdbbe2;color:#5a4574;display:flex;align-items:center;justify-content:center}
.jfi-suggest-list{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #d8c9ea;border-radius:8px;max-height:230px;overflow:auto;box-shadow:var(--jfi-shadow);z-index:50}
.jfi-suggest-list.active{display:block}
.jfi-suggest-list button{width:100%;padding:.5rem .7rem;text-align:left;background:#fff;border:0;border-bottom:1px solid #f2e9fa;cursor:pointer}
#jfi-dashboard{display:block}
#jfi-inspectie-wrapper{display:none}
.jfi-card{background:#fff;border-radius:var(--jfi-radius);border:1px solid #e6e6e6;padding:1rem;box-shadow:var(--jfi-shadow)}
.jfi-dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.jfi-table{width:100%;border-collapse:collapse}
.jfi-table th,.jfi-table td{padding:.55rem .4rem;border-bottom:1px solid #eee;text-align:left}
.jfi-photos-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:700px){.jfi-photos-row{grid-template-columns:1fr}}
.jfi-photo-row{position:relative;display:flex;flex-direction:column;gap:.4rem}
.jfi-photo-trigger{width:100%;min-height:160px;background-color:#fff!important;background-position:center!important;background-repeat:no-repeat!important;background-size:contain!important;border:1px dashed #cfcfcf;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666}
.jfi-photo-trigger.jfi-photo-hasimg{border-style:solid;color:transparent}
.jfi-photo-clear{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:8px;border:1px solid #d0d0d0;background:#fff;color:#444;cursor:pointer}
.jfi-photo-clear:hover{background:#f6f6f6}
.checklist-block h4{margin:.2rem 0 .5rem;font-weight:600}
.jfi-check-row{display:grid;grid-template-columns:1fr auto auto auto;gap:.4rem;align-items:center;margin-bottom:.4rem}
.jfi-check-row span{font-size:.9rem;line-height:1.3rem}
.jfi-check-row label{display:flex;align-items:center;gap:.25rem;cursor:pointer;margin:0}
.jfi-photo-modal[hidden]{display:none}
.jfi-photo-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;justify-content:center;align-items:center;z-index:9999}
.jfi-photo-dialog{width:min(92vw,860px);background:#fff;border-radius:10px;border:1px solid #ddd;padding:.8rem;display:flex;flex-direction:column;gap:.6rem;box-shadow:var(--jfi-shadow)}
.jfi-photo-head{display:flex;justify-content:space-between;align-items:center}
#jfi-photo-canvas{width:100%;height:420px;border:1px solid #dcdcdc;border-radius:8px;background:#fff}
.jfi-annotate-bar{display:flex;gap:.45rem;align-items:center}
.jfi-mt{margin-top:.8rem}
.jfi-form-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.35rem;
}
.jfi-report-label{ color:#000; font-weight:700; }
.jfi-form-title{ color:#000; font-weight:800; font-size:1.15rem; margin:.15rem 0 .55rem; }
.jfi-form-actions{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
  margin:.2rem 0 .9rem;
}
/* ✅ Buttons in tabellen zichtbaar maken (dashboard lijsten) */
.jfi-table .jfi-btn{
  background:#f3f3f7;
  border:1px solid #d0d0d0;
  color:#333;
}
.jfi-table .jfi-btn:hover{
  background:#e9e9f2;
}

/* ✅ Verwijder-knop iets duidelijker */
.jfi-table .jfi-btn--danger{
  background:#fff5f5;
  border-color:#e6b8b8;
  color:#8a1f1f;
}
.jfi-table .jfi-btn--danger:hover{
  background:#ffecec;
}
.jfi-note{margin:.2rem 0 .6rem;color:#444;font-size:.92rem;line-height:1.35}
.jfi-afw-textgrid{align-items:start}
.jfi-afw-class input{max-width:90px}
.jfi-afw-spacer{display:none}
.jfi-tab { display:none; }
.jfi-tab.jfi-tab--active { display:block; }
.jfi-top-buttons{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.jfi-lookup-suggest-btn{position:absolute;right:1px;height:calc(38px - 2px);width:34px;padding:0;border-radius:0 8px 8px 0;background:#fff;border-left:1px solid #cdbbe2;color:#5a4574;display:flex;align-items:center;justify-content:center}
.jfi-btn--back::before{content:"↩";display:inline-block;margin-right:.35rem}
.jfi-btn--mini{height:34px;padding:.28rem .6rem;font-size:.85rem}
.jfi-import-row{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.jfi-import-row input[type=file]{max-width:220px}
.jfi-import-row button{position:relative;z-index:2}
/* ✅ Knopteksten altijd goed leesbaar */
.jfi-btn,
.jfi-btn:visited,
.jfi-btn span {
  color: #000 !important;
}

/* ✅ Primary knop: zwarte tekst, behoud achtergrond */
.jfi-btn--primary {
  color: #000 !important;
}

/* ✅ Disabled / mini knoppen ook zwart */
.jfi-btn--mini {
  color: #000 !important;
}

/* ✅ Hover/focus ook zwart houden */
.jfi-btn:hover,
.jfi-btn:focus {
  color: #000 !important;
}
/* ================= INSTELLINGEN – UITVOUWBARE SECTIE ================= */

.jfi-collapse{
  border:1px solid #ccd0d4;
  border-radius:4px;
  margin-bottom:16px;
  background:#fff;
}

.jfi-collapse-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  background:#f6f7f7;
  cursor:pointer;
  font-weight:600;
  user-select:none;
}

.jfi-collapse-icon{
  transition: transform .2s ease;
}

.jfi-collapse-body{
  display:none;
  padding:12px;
  border-top:1px solid #ccd0d4;
}

.jfi-collapse.is-open .jfi-collapse-body{
  display:block;
}

.jfi-collapse.is-open .jfi-collapse-icon{
  transform: rotate(180deg);
}
.jfi-btn--danger {
  background: #fff5f5;
  border: 1px solid #e6b8b8;
  color: #8a1f1f;
}
/* =========================================================
   FIX: paarse focus / outline blokjes op iPad Safari
   ========================================================= */

/* alles binnen de inspectie plugin */
#jfi-app *:focus,
#jfi-app *:focus-visible,
#jfi-app *:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Safari iOS extra */
#jfi-app {
  -webkit-tap-highlight-color: transparent;
}