@import url('style.css');
body { background:#fcfafc; }
a { color:var(--primary); }
.portal-header { max-width:1220px; margin:auto; padding:24px 32px; display:flex; align-items:center; justify-content:space-between; gap:25px; border-bottom:1px solid var(--border); }
.portal-brand { font-size:22px; font-weight:700; text-decoration:none; }
.portal-header nav { display:flex; gap:24px; flex-wrap:wrap; font-size:14px; }
.portal-header nav a { text-decoration:none; }
.portal-header nav a[aria-current] { border-bottom:2px solid var(--accent); }
.portal-main { max-width:1160px; margin:44px auto; padding:0 28px 50px; }
.portal-main h1 { font-size:clamp(30px,4vw,46px); margin:10px 0 16px; color:var(--primary); font-family:Georgia,serif; font-weight:400; }
.lead { max-width:760px; line-height:1.7; color:#6c6471; }
.steps { display:flex; gap:30px; margin:24px 0 34px; color:var(--primary); font-size:14px; }
.steps b { display:inline-grid; place-items:center; border:1px solid #dbc8d5; border-radius:50%; width:26px; height:26px; margin-right:6px; }
.panel { background:white; border:1px solid #e8dfe7; border-radius:16px; padding:28px; margin-top:20px; }
.panel h2 { font-size:21px; color:var(--primary); margin:0 0 16px; }
.form-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(220px,1fr); gap:26px; align-items:start; }
.side-note { line-height:1.8; color:#6c6471; padding:15px 10px; }
.side-note h2 { font-size:18px; color:var(--primary); }
.grid-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid-fields .wide { grid-column:1/-1; }
.field { display:flex; flex-direction:column; gap:7px; color:#493f4a; font-size:14px; }
input,textarea,select { font:inherit; width:100%; border:1px solid #d9cdda; border-radius:7px; padding:11px 12px; background:#fff; color:#342c36; }
textarea { resize:vertical; min-height:95px; }
input:focus,textarea:focus,select:focus { outline:2px solid var(--accent); outline-offset:2px; }
button:focus-visible,a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.hint { font-size:12px; color:#766b78; line-height:1.6; }
.action { display:inline-block; border:0; background:var(--primary); color:#fff; border-radius:8px; padding:12px 20px; font:inherit; font-size:14px; cursor:pointer; text-decoration:none; }
.action.secondary { background:#f3edf2; color:var(--primary); border:1px solid #dfd0dc; }
.action:disabled { opacity:.55; cursor:wait; }
.actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:22px; }
.notice { padding:15px 18px; background:#f7f0f6; border-left:3px solid var(--accent); border-radius:5px; line-height:1.6; margin:18px 0; }
.error { background:#fff0ee; border-color:#c43d34; color:#812c29; }
.success { background:#edf8f1; border-color:#438765; color:#244f37; }
.checkbox { display:flex; gap:10px; font-size:14px; line-height:1.6; margin:20px 0; }
.checkbox input { width:auto; flex:none; align-self:flex-start; margin-top:5px; }
.trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.toolbar { display:flex; gap:12px; margin:28px 0 18px; flex-wrap:wrap; }
.toolbar input { flex:2; min-width:220px; }
.toolbar select { flex:1; min-width:200px; }
.table-wrap { overflow:auto; border:1px solid #e7dfe7; border-radius:10px; background:white; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; }
th { background:#f5eff4; font-weight:600; white-space:nowrap; }
th,td { padding:15px 17px; border-bottom:1px solid #eee6ed; vertical-align:top; }
td small { display:block; color:#827686; margin-top:7px; line-height:1.6; }
.badge { font-size:11px; border-radius:20px; background:#f4ebf3; color:var(--primary); padding:5px 9px; display:inline-block; white-space:nowrap; }
.badge.approved { background:#eaf4ed; color:#357148; }
.countline { display:flex; justify-content:space-between; gap:20px; align-items:center; margin:16px 0; color:#756879; font-size:14px; }
.countline strong { color:var(--primary); font-size:22px; }
.review-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,1.6fr); gap:24px; }
.review-item { display:block; width:100%; text-align:left; padding:18px; border:1px solid #e7dce5; background:white; border-radius:10px; margin:10px 0; cursor:pointer; color:var(--primary); }
.review-item strong { display:block; margin-bottom:8px; }
.review-item small { color:#807183; }
.portal-footer { max-width:1160px; margin:0 auto; padding:25px 28px; border-top:1px solid #e4dbe3; display:flex; justify-content:space-between; gap:20px; color:#877b8b; font-size:12px; }
.source-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.source-card { padding:18px; border:1px solid #e7dfe7; border-radius:9px; background:white; font-size:13px; line-height:1.7; }
.source-card strong { display:block; font-size:15px; color:var(--primary); }
details { margin:25px 0; }
summary { cursor:pointer; color:var(--primary); font-weight:600; }
.info-pairs { font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.info-pairs dt { font-weight:600; margin-top:12px; }
.info-pairs dd { margin:0; }
#review h2 { overflow-wrap:anywhere; }
[hidden] { display:none!important; }
@media(max-width:800px) {
  .form-layout,.review-grid { grid-template-columns:1fr; }
  .portal-header { align-items:flex-start; flex-direction:column; padding:18px 22px; }
  .portal-main { margin-top:30px; padding:0 20px 35px; }
  .panel { padding:20px; }
  .steps { flex-wrap:wrap; gap:14px; }
  .portal-header nav { gap:15px; }
  .side-note { padding-top:0; }
  .source-grid { grid-template-columns:1fr; }
}
@media(max-width:480px) {
  .grid-fields { grid-template-columns:1fr; }
  .grid-fields .wide { grid-column:auto; }
  .portal-footer { flex-direction:column; }
}
body { font-size:16px; }
.hint,.badge,.source-card,.portal-footer { font-size:14px; }
.review-item small { font-size:14px; }
.portal-header a,td { overflow-wrap:anywhere; }
.review-item:focus-visible { outline:3px solid var(--accent); }
.import-panel { margin-bottom:28px; }
.import-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; }
.import-heading p { max-width:720px; line-height:1.6; }
.import-heading .eyebrow { margin:0 0 6px; }
.file-picker { display:flex; flex-direction:column; gap:8px; min-width:250px; font-weight:600; color:var(--primary); }
.file-picker input { font-weight:400; }
.import-summary { display:flex; justify-content:space-between; align-items:center; gap:18px; margin:22px 0 12px; }
.import-table { min-width:1180px; }
.import-table th:first-child,.import-table td:first-child { width:80px; text-align:center; }
.import-table input,.import-table select { min-width:150px; }
.import-table input[type=checkbox] { min-width:0; width:20px; height:20px; }
.import-warning { background:#fff8e8; border-color:#d89a28; }
.badge.imported { background:#fff3d8; color:#825b0d; }
@media(max-width:800px) {
  .import-heading,.import-summary { align-items:stretch; flex-direction:column; }
  .file-picker { min-width:0; }
  .import-summary .action { width:100%; text-align:center; }
}

/* V7 · uitlegbare automatische voorinvulling */
.auto-note{display:block;margin-top:.32rem;color:#76576a;font-size:.78rem;line-height:1.35}
.auto-enrichment{margin:1rem 0;padding:1rem 1.05rem;border:1px solid #ead9e2;border-radius:14px;background:#fcf8fa;color:#4f3948}
.auto-enrichment>strong{color:#6a234d}
.auto-enrichment p{margin:.45rem 0 0;line-height:1.45}
.auto-enrichment .auto-warning{color:#8b3b27;font-weight:600}

/* V8: uitlegbare automatische bronverrijking */
.auto-enrichment {
    margin: 16px 0 20px;
    padding: 16px 18px;
    border: 1px solid #e4d6e1;
    border-radius: 10px;
    background: #fbf7fa;
    line-height: 1.6
}

.auto-enrichment>strong {
    color: var(--primary)
}

.auto-enrichment p {
    margin: 8px 0
}

.online-enrichment {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eadfe7
}

.auto-warning {
    color: #8a4a16
}

.evidence-list {
    margin: 10px 0 0;
    padding-left: 20px
}

.evidence-list li {
    margin: 7px 0
}

#web-enrich-status {
    margin: 12px 0 22px
}

/* V9 · veilige bestandsimport met dubbele-detectie */
.import-table{min-width:1430px}
.import-table th:nth-child(2),.import-table td:nth-child(2){min-width:230px}
.duplicate-state{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:200px}
.duplicate-state .badge{white-space:normal;line-height:1.35}
.duplicate-state .badge.merge{background:#eaf4ed;color:#357148}
.duplicate-state .badge.skip{background:#f2f0f1;color:#655b62}
.duplicate-state .badge.new{background:#fff3d8;color:#825b0d}
.duplicate-state .badge.check{background:#fff0dc;color:#7a4f0b}
.duplicate-state button{border:0;background:transparent;color:var(--primary);text-decoration:underline;cursor:pointer;padding:0;font:inherit;font-size:12px;text-align:left}
.duplicate-dialog{width:min(760px,calc(100vw - 28px));border:0;border-radius:18px;padding:0;box-shadow:0 24px 80px rgba(59,34,50,.28);color:#403540}
.duplicate-dialog::backdrop{background:rgba(45,31,41,.45);backdrop-filter:blur(2px)}
.duplicate-dialog-inner{padding:28px}
.duplicate-dialog h2{margin:5px 0 8px;color:var(--primary);font-size:25px}
.duplicate-reason{margin:0 0 20px;color:#756879;line-height:1.55}
.duplicate-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin:20px 0}
.duplicate-compare section{border:1px solid #e4d9e2;background:#fcfafc;border-radius:12px;padding:16px;min-width:0}
.duplicate-compare strong,.duplicate-compare small{display:block;overflow-wrap:anywhere}
.duplicate-compare strong{color:var(--primary);font-size:17px;margin-top:5px}
.duplicate-compare small{color:#766b78;line-height:1.5;margin-top:8px}
.duplicate-kicker{font-size:11px;letter-spacing:.08em;font-weight:700;color:#8b6f82}
.duplicate-arrow{align-self:center;color:#b292aa;font-size:22px}
.duplicate-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.duplicate-new{border-color:#e2bd82!important;background:#fff8eb!important;color:#78510d!important}
@media(max-width:650px){.duplicate-compare{grid-template-columns:1fr}.duplicate-arrow{transform:rotate(90deg);justify-self:center}.duplicate-actions{flex-direction:column}.duplicate-actions .action{width:100%}}

/* V10 · dezelfde navigatietaal op kaart, voorzieningen, doorgeven en beheer */
.portal-header {
    max-width: 1320px;
    min-height: 78px;
    padding: 0 32px;
    border-bottom: 1px solid var(--border);
}
.portal-brand {
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}
.portal-header nav {
    display:flex;
    align-items:stretch;
    align-self:stretch;
    gap:30px;
    flex-wrap:nowrap;
}
.portal-header nav a {
    display:inline-flex;
    align-items:center;
    position:relative;
    padding:0 2px;
    color:#675d68;
    font-size:13px;
    font-weight:500;
    white-space:nowrap;
}
.portal-header nav a:hover { color:var(--primary); }
.portal-header nav a[aria-current] {
    color:var(--primary);
    font-weight:600;
    border-bottom:0;
}
.portal-header nav a[aria-current]::after {
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:var(--accent);
}

@media(max-width:800px) {
    .portal-header {
        min-height:0;
        padding:16px 20px 0;
        gap:12px;
    }
    .portal-header nav {
        width:100%;
        height:42px;
        gap:22px;
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        scrollbar-width:none;
    }
    .portal-header nav::-webkit-scrollbar { display:none; }
    .portal-header nav a { font-size:12px; flex:0 0 auto; }
}

.badge.source-backed { background:#eef3fb; color:#315d87; }
.badge.attention { background:#fff3df; color:#8b5a13; }
.offer-details { margin:10px 0 0; }
.offer-details summary { font-size:13px; font-weight:600; }
.offer-list { display:grid; gap:8px; margin-top:9px; max-width:520px; }
.offer-list > div { padding:9px 11px; border:1px solid #eee5ed; border-radius:8px; background:#fcfafc; }
.offer-list strong { font-size:13px; color:var(--primary); }
.offer-list small { margin-top:3px; }


/* DARK MODE · portal */
.portal-header .scheme-toggle {
    border:1px solid var(--border);
    border-radius:999px;
    background:transparent;
    color:var(--primary);
    padding:8px 11px;
    align-self:center;
    cursor:pointer;
}
html[data-color-scheme="dark"] {
    color-scheme:dark;
    background:#17161a;
}
html[data-color-scheme="dark"] body {
    background:#17161a;
    color:#eee9ee;
    --primary:#f0b4d7;
    --accent:#e16caf;
    --tint:#352734;
    --ink:#f2edf1;
    --border:#4a4149;
}
html[data-color-scheme="dark"] .portal-header,
html[data-color-scheme="dark"] .panel,
html[data-color-scheme="dark"] table,
html[data-color-scheme="dark"] .source-card,
html[data-color-scheme="dark"] .notice,
html[data-color-scheme="dark"] .steps,
html[data-color-scheme="dark"] .offer-list > div {
    background:#211f24;
    color:#eee9ee;
    border-color:#4a4149;
}
html[data-color-scheme="dark"] .lead,
html[data-color-scheme="dark"] .hint,
html[data-color-scheme="dark"] small,
html[data-color-scheme="dark"] td,
html[data-color-scheme="dark"] .source-card span {
    color:#bfb5bf;
}
html[data-color-scheme="dark"] input,
html[data-color-scheme="dark"] select,
html[data-color-scheme="dark"] textarea {
    background:#29262c;
    color:#f2edf1;
    border-color:#514852;
}
html[data-color-scheme="dark"] th {
    background:#2a262c;
    color:#e7dfe6;
    border-color:#4a4149;
}
html[data-color-scheme="dark"] td {
    border-color:#403940;
}
html[data-color-scheme="dark"] .toolbar,
html[data-color-scheme="dark"] .table-wrap {
    border-color:#4a4149;
}
html[data-color-scheme="dark"] .badge.source-backed {
    background:#263641;
    color:#b8d8ee;
}
html[data-color-scheme="dark"] .badge.attention {
    background:#45351f;
    color:#f0cf91;
}
html[data-color-scheme="dark"] .badge.approved {
    background:#234035;
    color:#b9e3cb;
}


/* CLEAN SOCIAL MAP PORTAL */
body[data-theme="wijkwijzer"]{
  --primary:#326052;
  --accent:#d16e27;
  --tint:#fff3e6;
  --ink:#345449;
  background:#fffcf6;
}
.portal-header{background:#fffdf8}
.portal-brand{color:var(--primary);font-weight:700}
.portal-brand:first-letter{color:var(--accent)}
.portal-main>.eyebrow,.portal-main>.lead,.portal-main>.notice,.steps{display:none}
.portal-main>h1{margin-top:8px;margin-bottom:24px}
.portal-footer{display:flex;justify-content:space-between;gap:24px;align-items:center}
.portal-footer-links{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.portal-footer-links a,.portal-footer-links button{border:0;background:none;padding:0;color:var(--primary);font:inherit;text-decoration:none;cursor:pointer}
.portal-footer-links a:hover,.portal-footer-links button:hover{text-decoration:underline;text-underline-offset:3px}
.portal-legal-dialog{max-width:560px;border:0;border-radius:18px;padding:30px;color:var(--ink);box-shadow:0 20px 80px #0003}
.portal-legal-dialog::backdrop{background:#28242c80}
.portal-legal-dialog .dialog-x{position:absolute;right:14px;top:10px;border:0;background:none;font-size:26px;cursor:pointer}
.portal-legal-dialog p{line-height:1.65;color:#6f6671}
html[data-color-scheme="dark"] body[data-theme="wijkwijzer"]{--primary:#b9ded1;--accent:#e4a068;--tint:#2b3832;--ink:#eff7f3;background:#171a18}
html[data-color-scheme="dark"] .portal-header{background:#211f24}
html[data-color-scheme="dark"] .portal-footer-links a,
html[data-color-scheme="dark"] .portal-footer-links button{color:#e4a068}
html[data-color-scheme="dark"] .portal-legal-dialog{background:#242126;color:#eee9ee}
html[data-color-scheme="dark"] .portal-legal-dialog p{color:#c2b8c2}
@media(max-width:760px){.portal-footer{align-items:flex-start;flex-direction:column}.portal-footer-links{gap:12px}}


/* Headercorrectie · compact SKT-merk */
.portal-brand-mark {
    color: var(--accent);
    font-weight: 800;
    letter-spacing: -0.7px;
}
.portal-header nav a {
    opacity: 1;
    visibility: visible;
}