/* ═══════════════════════════════════════════════════════════════
   MTF — app.css  ·  Één enkel stijlbestand voor de hele applicatie
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────── */
@font-face{font-family:'Mono';font-weight:400;src:url(assets/fonts/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'Mono';font-weight:500;src:url(assets/fonts/ibm-plex-mono-500.woff2) format('woff2')}
@font-face{font-family:'Cond';font-weight:300;src:url(assets/fonts/barlow-condensed-300.woff2) format('woff2')}
@font-face{font-family:'Cond';font-weight:400;src:url(assets/fonts/barlow-condensed-400.woff2) format('woff2')}
@font-face{font-family:'Cond';font-weight:600;src:url(assets/fonts/barlow-condensed-600.woff2) format('woff2')}
@font-face{font-family:'Cond';font-weight:700;src:url(assets/fonts/barlow-condensed-700.woff2) format('woff2')}
@font-face{font-family:'ti';src:url(assets/fonts/tabler-icons.woff2) format('woff2')}
.ti{font-family:'ti';font-style:normal;line-height:1;display:inline-block}

/* ── Variabelen ─────────────────────────────────────────────────── */
:root {
  --c-bg:     #0d1117; --c-bg2:    #161b22; --c-bg3:    #21262d;
  --c-border: #30363d; --c-border2:#484f58;
  --c-text:   #e6edf3; --c-text2:  #8b949e; --c-text3:  #6e7681;
  --c-amber:  #e8a020; --c-amber2: rgba(232,160,32,.12);
  --c-green:  #3fb950; --c-green2: rgba(63,185,80,.12);
  --c-blue:   #58a6ff; --c-blue2:  rgba(88,166,255,.12);
  --c-red:    #f85149; --c-red2:   rgba(248,81,73,.12);
  --c-purple: #bc8cff; --c-purple2:rgba(188,140,255,.12);
  --f-sans:   system-ui,'Segoe UI',sans-serif;
  --f-mono:   'Mono',Consolas,monospace;
  --f-cond:   'Cond','Barlow Condensed',sans-serif;
  --r: 6px; --r2: 10px; --r3: 14px;
}
[data-theme=light]{
  --c-bg:#f6f8fa; --c-bg2:#fff; --c-bg3:#f0f2f4;
  --c-border:#d0d7de; --c-border2:#b0bec8;
  --c-text:#1a2332; --c-text2:#4a6a8a; --c-text3:#7a9ab8;
  --c-amber:#b86000; --c-amber2:rgba(184,96,0,.1);
  --c-green:#1a7a3a; --c-green2:rgba(26,122,58,.1);
  --c-blue:#0060a0; --c-blue2:rgba(0,96,160,.1);
  --c-red:#c02020; --c-red2:rgba(192,32,32,.1);
}

/* ── Reset & base ───────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--c-bg);color:var(--c-text);font-family:var(--f-sans);font-size:14px;line-height:1.5}
a{color:var(--c-blue);text-decoration:none}
a:hover{text-decoration:underline}
input,select,textarea,button{font-family:inherit;font-size:inherit}
input,select,textarea{width:100%;background:var(--c-bg3);border:1px solid var(--c-border);border-radius:var(--r);color:var(--c-text);padding:7px 10px;outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--c-blue)}
textarea{resize:vertical;min-height:72px;line-height:1.5}
pre{font-family:var(--f-mono);font-size:11px;line-height:1.7;white-space:pre-wrap;word-break:break-all}

/* ── Typografie ─────────────────────────────────────────────────── */
h1{font-size:20px;font-weight:600}
h2{font-size:15px;font-weight:600}
h3{font-size:13px;font-weight:600}
.mono{font-family:var(--f-mono)}
.cond{font-family:var(--f-cond)}
.label{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text3)}
.muted{color:var(--c-text2)}
.danger{color:var(--c-red)}

/* ── Layout ─────────────────────────────────────────────────────── */
.page{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.row{display:flex;align-items:center;gap:8px}
.col{display:flex;flex-direction:column;gap:8px}
.flex1{flex:1;min-width:0}
.center{display:flex;align-items:center;justify-content:center}
.ml-auto{margin-left:auto}
.gap4{gap:4px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
.p8{padding:8px}.p12{padding:12px}.p16{padding:16px}.p20{padding:20px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}

/* ── Topbar ─────────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--c-bg2);border-bottom:1px solid var(--c-border);flex-shrink:0;min-height:44px}
.topbar-title{font-family:var(--f-cond);font-size:16px;font-weight:600;letter-spacing:.06em;display:flex;align-items:center;gap:7px}
.back{color:var(--c-text2);font-size:13px;display:flex;align-items:center;gap:4px}
.back:hover{color:var(--c-amber);text-decoration:none}
.userbar{display:flex;align-items:center;gap:6px;font-size:12px}
.userbar a,.userbar button{color:var(--c-text2);background:none;border:none;cursor:pointer;padding:3px 6px;border-radius:var(--r);display:flex;align-items:center;gap:3px;transition:color .15s}
.userbar a:hover,.userbar button:hover{color:var(--c-text);text-decoration:none}

/* ── Knoppen ────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;border-radius:var(--r);font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--c-border2);background:var(--c-bg3);color:var(--c-text);transition:opacity .15s,border-color .15s}
.btn:hover{opacity:.85;text-decoration:none}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--c-blue);color:#fff;border-color:transparent;font-weight:600}
.btn-amber  {background:var(--c-amber);color:#000;border-color:transparent;font-weight:600}
.btn-green  {background:var(--c-green);color:#000;border-color:transparent;font-weight:600}
.btn-ghost  {background:none;border-color:transparent;color:var(--c-text2)}
.btn-ghost:hover{color:var(--c-text)}
.btn-danger {background:none;border-color:rgba(248,81,73,.4);color:var(--c-red)}
.btn-sm     {padding:4px 10px;font-size:12px}
.btn-lg     {padding:10px 20px;font-size:15px;font-weight:600}
.btn-block  {width:100%}
.btn-row    {display:flex;gap:8px;flex-wrap:wrap}

/* ── Badges & labels ────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.badge-amber {background:var(--c-amber2);color:var(--c-amber)}
.badge-green {background:var(--c-green2);color:var(--c-green)}
.badge-blue  {background:var(--c-blue2); color:var(--c-blue)}
.badge-red   {background:var(--c-red2);  color:var(--c-red)}
.badge-purple{background:var(--c-purple2);color:var(--c-purple)}
.badge-muted {background:var(--c-bg3);   color:var(--c-text3)}

/* ── Kaarten & panelen ──────────────────────────────────────────── */
.card{background:var(--c-bg2);border:1px solid var(--c-border);border-radius:var(--r2);padding:20px}
.card-sm{padding:12px 14px}
.panel{background:var(--c-bg2);border:1px solid var(--c-border)}
.divider{height:1px;background:var(--c-border);margin:12px 0}

/* ── Formulier-elementen ─────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:4px}
.field-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c-text3)}
.field-hint {font-size:11px;color:var(--c-text3)}
.field-error{font-size:11px;color:var(--c-red)}
.required   {color:var(--c-red);margin-left:2px}
.readonly   {background:var(--c-bg);color:var(--c-text3);padding:7px 10px;border-radius:var(--r);border:1px solid var(--c-border);font-family:var(--f-mono)}

/* ── Alert-berichten ────────────────────────────────────────────── */
.alert{padding:10px 14px;border-radius:var(--r);font-size:13px;display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.alert-info  {background:var(--c-blue2);  border:1px solid rgba(88,166,255,.3);  color:var(--c-blue)}
.alert-ok    {background:var(--c-green2); border:1px solid rgba(63,185,80,.3);   color:var(--c-green)}
.alert-warn  {background:var(--c-amber2); border:1px solid rgba(232,160,32,.3);  color:var(--c-amber)}
.alert-error {background:var(--c-red2);   border:1px solid rgba(248,81,73,.3);   color:var(--c-red)}

/* ── Tabel ──────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--r2);border:1px solid var(--c-border)}
table{width:100%;border-collapse:collapse;background:var(--c-bg2)}
th{padding:9px 14px;text-align:left;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c-text3);border-bottom:1px solid var(--c-border);background:var(--c-bg3);white-space:nowrap}
td{padding:9px 14px;border-bottom:1px solid var(--c-border);font-size:13px;vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(255,255,255,.02)}

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:500;padding:16px}
.modal{background:var(--c-bg2);border:1px solid var(--c-border);border-radius:var(--r3);padding:24px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto}
.modal h2{margin-bottom:18px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* ── XML viewer ─────────────────────────────────────────────────── */
.xml-wrap{background:var(--c-bg);border-radius:var(--r);padding:12px;overflow:auto;font-family:var(--f-mono);font-size:11px;line-height:1.7}
.xml-tag  {color:#7ee787}
.xml-attr {color:#d2a8ff}
.xml-val  {color:#a5d6ff}

/* ── Voortgangsbalk ─────────────────────────────────────────────── */
.progress{height:4px;background:var(--c-bg3);border-radius:2px;overflow:hidden}
.progress-bar{height:100%;background:var(--c-blue);border-radius:2px;transition:width .3s}

/* ── Dropzone ───────────────────────────────────────────────────── */
.dropzone{border:2px dashed var(--c-border);border-radius:var(--r2);padding:40px 24px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;position:relative}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.dropzone:hover,.dropzone.active{border-color:var(--c-blue);background:var(--c-blue2)}

/* ── Kaart ──────────────────────────────────────────────────────── */
.map-container{flex:1;position:relative;min-height:300px}
#map{position:absolute;inset:0;background:#0a0f18}
.leaflet-tile-pane{filter:brightness(.65) saturate(.5) contrast(1.1)}
.leaflet-popup-content-wrapper{background:var(--c-bg2)!important;border:1px solid var(--c-border2)!important;color:var(--c-text)!important;font-family:var(--f-sans)!important;font-size:13px!important;border-radius:var(--r)!important;box-shadow:0 4px 20px rgba(0,0,0,.5)!important}
.leaflet-popup-tip{background:var(--c-bg2)!important}
[data-theme=light] .leaflet-tile-pane{filter:none}
.marker-cluster div{background:rgba(232,160,32,.6)!important;color:#000!important;font-family:var(--f-mono)!important;font-size:11px!important;font-weight:600!important}
.marker-cluster{background:rgba(232,160,32,.2)!important}

/* ── Sidebar-layout (kaart/records) ─────────────────────────────── */
.split{display:flex;flex:1;overflow:hidden}
.sidebar{width:280px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--c-border);background:var(--c-bg2)}
.sidebar-hdr{padding:10px 14px;border-bottom:1px solid var(--c-border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sidebar-body{flex:1;overflow-y:auto}
.main-pane{flex:1;display:flex;flex-direction:column;overflow:hidden}
.list-item{padding:10px 14px;border-bottom:1px solid var(--c-border);cursor:pointer;transition:background .1s}
.list-item:hover{background:var(--c-bg3)}
.list-item.active{background:rgba(232,160,32,.07);border-left:2px solid var(--c-amber)}
.list-item-title{font-size:12px;color:var(--c-text);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item-meta{font-size:10px;color:var(--c-text3);display:flex;gap:8px;margin-top:2px}
.filter-bar{padding:6px 10px;border-bottom:1px solid var(--c-border);display:flex;flex-wrap:wrap;gap:4px}
.filter-chip{padding:3px 8px;border-radius:3px;background:none;border:1px solid var(--c-border);color:var(--c-text2);font-size:10px;cursor:pointer;font-family:var(--f-mono);white-space:nowrap}
.filter-chip.active{background:var(--c-amber2);border-color:rgba(232,160,32,.4);color:var(--c-amber)}

/* ── Schema-kaarten ─────────────────────────────────────────────── */
.schema-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.schema-card{background:var(--c-bg2);border:1px solid var(--c-border);border-radius:var(--r2);padding:16px;cursor:pointer;transition:border-color .2s,transform .15s;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--c-text)}
.schema-card:hover{transform:translateY(-2px);text-decoration:none}
.schema-card .icon{font-size:26px}
.schema-card .id{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;display:inline-block;width:fit-content}
.schema-card h3{font-size:13px;font-weight:600}
.schema-card .arrow{font-size:12px;color:var(--c-text3);margin-top:auto}

/* ── Thema-toggle knop ──────────────────────────────────────────── */
#theme-btn{position:fixed;bottom:16px;right:16px;z-index:999;width:36px;height:36px;border-radius:50%;background:var(--c-bg2);border:1px solid var(--c-border2);color:var(--c-text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 8px rgba(0,0,0,.3);transition:border-color .15s}
#theme-btn:hover{border-color:var(--c-amber)}

/* ── Responsief ─────────────────────────────────────────────────── */
@media(max-width:900px){
  .sidebar{width:200px}
  .hide-tablet{display:none!important}
}
@media(max-width:640px){
  .split{flex-direction:column}
  .sidebar{width:100%;max-height:180px;border-right:none;border-bottom:1px solid var(--c-border)}
  .sidebar-body{max-height:140px}
  .grid2,.grid3{grid-template-columns:1fr!important}
  .schema-grid{grid-template-columns:1fr 1fr}
  .card{padding:14px}
  .modal{padding:16px;margin:8px}
  .hide-mobile{display:none!important}
  .topbar{padding:6px 10px}
  .btn-row{flex-direction:column}
  .btn-row .btn{justify-content:center}
  #theme-btn{bottom:12px;right:12px}
}