:root {
    /* Open Line Vitaly huisstijl (openline-vitaly.com) */
    --vitaly-cyan: #00ACD0;
    --vitaly-navy: #00324C;
    --vitaly-magenta: #D4145A;
    --primary: #00324C;
    --primary-light: #0A4A6B;
    --primary-dark: #00243A;
    --accent: #E1F3F7;
    --accent-green: #00ACD0;
    --bg: #F4F7F8;
    --bg-card: #FFFFFF;
    --text: #323A45;
    --text-light: #5A6570;
    --border: #DDE4E8;
    --success: #00ACD0;
    --warning: #F59E0B;
    --danger: #DC3545;
    --sidebar-width: 250px;
    --rail-width: 64px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Aptos', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg); color: var(--text);
    display: flex; height: 100vh; overflow: hidden;
}
/* ---------- Sidebar ---------- */
.sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 400;
    width: var(--rail-width); background: var(--primary); color: white;
    display: flex; flex-direction: column; overflow: hidden; white-space: nowrap;
    transition: width .18s ease, left .2s ease;
}
.sidebar:hover { width: var(--sidebar-width); box-shadow: 6px 0 26px rgba(0,0,0,.28); }
.sidebar .nav-label, .sidebar .nav-count, .sidebar-header h1, .sidebar-header small, .sidebar-logo .logo-text, .sidebar-footer { transition: opacity .15s ease .04s; }
.sidebar:not(:hover):not(.open) .nav-label, .sidebar:not(:hover):not(.open) .nav-count, .sidebar:not(:hover):not(.open) .sidebar-header h1, .sidebar:not(:hover):not(.open) .sidebar-header small, .sidebar:not(:hover):not(.open) .logo-text, .sidebar:not(:hover):not(.open) .sidebar-footer { opacity: 0; }
.sidebar-header { padding: 16px 8px 14px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sidebar-logo { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:0; }
.sidebar:not(:hover):not(.open) .sidebar-logo .logo-text { display:none; }
.sidebar-logo .logo-mark { width:34px; height:34px; border-radius:8px; background:var(--accent-green); color:#2B2B2B; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; }
.bp-logo { width: 42px; height: auto; flex-shrink: 0; }
.sidebar-logo .logo-text { font-size:17px; font-weight:700; letter-spacing:1px; }
.sidebar-logo .logo-text span { color: var(--accent-green); }
.sidebar-header h1 { font-size: 15px; font-weight: 700; letter-spacing: 2px; opacity: 0.85; text-transform: lowercase; }
.sidebar-header small { opacity: .6; font-size: 10px; display:block; margin-top:2px; }
.sidebar-nav { flex: 1; padding: 10px 0; overflow-y: auto; overflow-x: hidden; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.nav-item {
    display: flex; align-items: center; gap: 12px; padding: 9px 20px; cursor: pointer;
    transition: background .15s; font-size: 13.5px; border: none; background: none;
    color: white; width: 100%; text-align: left; border-left: 3px solid transparent; font-family: inherit;
}
.nav-item:hover { background: rgba(255,255,255,.1); }
.nav-item.active { background: rgba(255,255,255,.15); border-left-color: var(--accent-green); }
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-item .nav-count { margin-left:auto; background:rgba(255,255,255,.18); border-radius:10px; font-size:10.5px; padding:1px 7px; }
.nav-item.nav-sub { padding-top: 6px; padding-bottom: 6px; font-size: 12.5px; padding-left: 36px; transition: background .15s; }
.sidebar:not(:hover):not(.open) .nav-item.nav-sub { display: none; }
.nav-swdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.75); flex-shrink: 0; margin: 0 5px; }
.nav-item.nav-sub.active .nav-swdot { background: #FFFFFF; }
.nav-sep { margin: 8px 16px 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.16); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0); transition: color .15s ease .04s; }
.sidebar:hover .nav-sep { color: rgba(255,255,255,.55); }
.sidebar-footer { padding: 10px 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 11px; opacity: .75; }
/* ---------- Main ---------- */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; margin-left: var(--rail-width); }
.topbar {
    background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 10px 24px;
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 16px;
}
.topbar h2 { font-size: 19px; font-weight: 600; white-space: nowrap; }
.topbar .controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--text); }
.sim-banner {
    background: #FEF3C7; color: #92400E; border-bottom: 1px solid #FDE68A;
    padding: 6px 24px; font-size: 12px; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.sim-banner svg { width: 14px; height: 14px; flex-shrink:0; }
.content { flex: 1; overflow-y: auto; padding: 24px; }
.page { display: none; }
.page.active { display: block; }
/* ---------- Role switcher / account chip ---------- */
.role-chip {
    display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 20px; padding: 4px 12px 4px 4px; cursor: pointer; font-size: 12.5px;
}
.role-chip .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
/* ---------- Cards & stats ---------- */
.card { background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); padding: 20px 24px; margin-bottom: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
.card-header h3 { font-size: 15.5px; font-weight: 600; display:flex; align-items:center; gap:8px; }
.card-header h3 svg { width:16px; height:16px; color: var(--primary); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card { border: none; border-radius: 24px; padding: 16px 0 0; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 148px; background: #F1F3F4; color: #202124; }
.stat-card.clickable { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.stat-card.clickable:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.14); }
.stat-card .stat-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; padding: 0 20px; color: inherit; opacity: .75; }
.stat-card .stat-value { font-size: 36px; font-weight: 800; line-height: 1.1; margin: 0 20px; color: inherit; }
.stat-card .stat-label { font-size: 13px; color: inherit; opacity: .85; margin: 0 20px 14px; }
.stat-card .stat-link { margin-top: auto; padding: 10px 20px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 4px; background: #323A45; color: #FFFFFF; }
.stat-card .stat-link svg { width: 14px; height: 14px; }
.stat-card .stat-chip { display: inline-flex; align-items: center; align-self: flex-start; font-weight: 800; font-size: 15px; padding: 10px 14px; border-radius: 14px; line-height: 1.2; max-width: calc(100% - 40px); margin-left: 20px; }
/* Twee accenten tot de rand: licht tintvlak boven, donkere accentbalk als voet onder */
.stats-grid .stat-card:nth-child(6n+1):not(.warn):not(.danger) { background: #D9E6EE; color: #12293A; }
.stats-grid .stat-card:nth-child(6n+1):not(.warn):not(.danger) .stat-link { background: var(--primary); color: #FFFFFF; }
.stats-grid .stat-card:nth-child(6n+2):not(.warn):not(.danger) { background: #CFE8D8; color: #1C4A31; }
.stats-grid .stat-card:nth-child(6n+2):not(.warn):not(.danger) .stat-link { background: #7FC795; color: #0B3620; }
.stats-grid .stat-card:nth-child(6n+3):not(.warn):not(.danger) { background: #C8EBF1; color: #00465B; }
.stats-grid .stat-card:nth-child(6n+3):not(.warn):not(.danger) .stat-link { background: #00ACD0; color: #FFFFFF; }
.stats-grid .stat-card:nth-child(6n+4):not(.warn):not(.danger) { background: #F7D0E0; color: #711641; }
.stats-grid .stat-card:nth-child(6n+4):not(.warn):not(.danger) .stat-link { background: #D4145A; color: #FFFFFF; }
.stats-grid .stat-card:nth-child(6n+5):not(.warn):not(.danger) { background: #E8DEF8; color: #3B2C57; }
.stats-grid .stat-card:nth-child(6n+5):not(.warn):not(.danger) .stat-link { background: #8B5CF6; color: #FFFFFF; }
.stat-card.warn { background: #FCE8B2; color: #453711; }
.stat-card.warn .stat-link { background: #E8A317; color: #2C2103; }
.stat-card.danger { background: #FAD2CF; color: #5F1D16; }
.stat-card.danger .stat-link { background: #DC3545; color: #FFFFFF; }
/* ---------- Buttons ---------- */
.btn { padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500;
    transition: all .15s; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.btn svg { width: 14px; height: 14px; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-light); }
.btn-success { background: var(--accent-green); color: var(--text); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #DC2626; }
.btn-outline { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { background: var(--bg); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.icon-btn { background:none; border:none; cursor:pointer; color:var(--text-light); padding:4px; border-radius:6px; display:inline-flex; }
.icon-btn:hover { background: var(--bg); color: var(--primary); }
.icon-btn svg { width:16px; height:16px; }
.icon-btn.fav-on { color:#F59E0B; }
/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
th { font-weight: 600; color: var(--text-light); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
tbody tr:hover td { background: var(--accent); }
tr.row-click { cursor: pointer; }
/* ---------- Forms ---------- */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 4px; color: var(--text); }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 13.5px; font-family: inherit; transition: border-color .15s; background: var(--bg-card); color: var(--text);
}
.form-group textarea { resize: vertical; min-height: 64px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(74,110,124,.12);
}
input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button {
    background: var(--primary); color: #FFFFFF; border: none; border-radius: 6px;
    padding: 6px 14px; font-family: inherit; font-size: 12.5px; font-weight: 500;
    margin-right: 12px; cursor: pointer; transition: background .15s;
}
input[type="file"]::file-selector-button:hover, input[type="file"]::-webkit-file-upload-button:hover { background: var(--primary-light); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 4px; }
.checkbox-group label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; font-weight: 400; }
.checkbox-group input[type="checkbox"] { width: auto; }
.form-hint { font-size: 11.5px; color: var(--text-light); margin-top: 3px; }
/* ---------- Modal ---------- */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.active { display: flex; }
.modal { background: var(--bg-card); border-radius: 12px; padding: 24px 28px; max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal.modal-lg { max-width: 900px; }
.modal.modal-xl { max-width: 1150px; }
.modal h3 { font-size: 17px; margin-bottom: 16px; display:flex; align-items:center; gap:8px; }
.modal h3 svg { width:18px; height:18px; color:var(--primary); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.modal-actions .left { margin-right: auto; display:flex; gap:8px; }
/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge-green { background: #ECF3D2; color: #55611B; }
.badge-red { background: #FEE2E2; color: #991B1B; }
.badge-amber { background: #FEF3C7; color: #92400E; }
.badge-blue { background: var(--accent); color: var(--primary); }
.badge-gray { background: #E5E7EB; color: #4B5563; }
.badge-purple { background: #EDE9FE; color: #5B21B6; }
.badge-sim { background: #FEF3C7; color: #92400E; border: 1px dashed #F59E0B; font-weight:500; }
/* ---------- Toast ---------- */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; max-width: 380px; }
.toast { background: var(--text); color: white; padding: 11px 18px; border-radius: 8px; margin-bottom: 8px; font-size: 13.5px; animation: slideIn .3s ease; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.toast.success { border-left: 4px solid var(--accent-green); }
.toast.error { border-left: 4px solid var(--danger); }
.toast.warning { border-left: 4px solid var(--warning); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* ---------- Confirm ---------- */
.confirm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 2000; align-items: center; justify-content: center; padding:16px; }
.confirm-overlay.active { display: flex; }
.confirm-box { background: var(--bg-card); border-radius: 12px; padding: 24px; max-width: 440px; width: 100%; text-align: center; }
.confirm-box p { margin-bottom: 18px; font-size: 14px; }
.confirm-box .btn-group { display: flex; gap: 8px; justify-content: center; }
/* ---------- Library ---------- */
.lib-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.search-box { position:relative; flex:1; min-width:220px; }
.search-box input { width:100%; padding:9px 12px 9px 36px; border:1px solid var(--border); border-radius:8px; font-size:13.5px; font-family:inherit; background:var(--bg-card); }
.search-box input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(74,110,124,.12); }
.search-box svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-light); }
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.filter-bar select { padding:6px 10px; border:1px solid var(--border); border-radius:6px; font-size:12.5px; font-family:inherit; background:var(--bg-card); color:var(--text); max-width: 170px; }
.view-toggle { display:flex; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:3px; gap:2px; }
.view-toggle button { border:none; background:none; padding:5px 10px; border-radius:6px; cursor:pointer; color:var(--text-light); display:flex; align-items:center; }
.view-toggle button.active { background:var(--primary); color:white; }
.view-toggle button svg { width:15px; height:15px; }
.asset-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; }
.asset-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column; }
.asset-card:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.1); }
.asset-thumb { height:110px; display:flex; align-items:center; justify-content:center; color:white; font-size:13px; font-weight:600; position:relative; }
.asset-thumb svg { width:34px; height:34px; opacity:.9; }
.asset-thumb .ft-tag { position:absolute; top:8px; left:8px; background:rgba(0,0,0,.35); color:white; font-size:10px; padding:2px 7px; border-radius:8px; text-transform:uppercase; letter-spacing:.5px; }
.asset-thumb .fav-btn { position:absolute; top:6px; right:6px; }
.asset-thumb .fav-btn svg { width:16px; height:16px; }
.asset-thumb svg.preview { width:100%; height:100%; opacity:1; display:block; }
.asset-thumb .icon-btn { position:absolute; background:rgba(0,0,0,.4); border-radius:8px; color:#fff; }
.asset-thumb .icon-btn:hover { background:rgba(0,0,0,.6); color:#fff; }
.asset-thumb .dl-btn { bottom:6px; right:6px; }
.asset-thumb .dl-btn svg { width:16px; height:16px; }
.preview-box { border:1px solid var(--border); border-radius:10px; overflow:hidden; height:190px; margin-bottom:16px; background:var(--bg); position:relative; }
.preview-box svg.preview { width:100%; height:100%; display:block; }
.asset-body { padding:12px 14px; flex:1; display:flex; flex-direction:column; gap:6px; }
.asset-body .asset-title { font-size:13.5px; font-weight:600; line-height:1.3; }
.asset-body .asset-meta { font-size:11.5px; color:var(--text-light); }
.asset-body .asset-badges { display:flex; flex-wrap:wrap; gap:4px; margin-top:auto; }
/* verzamelbak: te verwerken links, geschiedenis rechts */
.intake-cols { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .intake-cols { grid-template-columns: 1fr; } }
.dropzone .btn svg { color: inherit; margin-bottom: 0; width: 14px; height: 14px; }
.hist-today-head, .hist-day summary { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; padding: 8px 0 4px; }
.hist-day { border-top: 1px solid var(--border); }
.hist-day summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--text); }
.hist-day summary::-webkit-details-marker { display: none; }
.hist-day summary::before { content: '▸'; color: var(--text-light); font-size: 11px; }
.hist-day[open] summary::before { content: '▾'; }
.hist-cnt { background: var(--accent); color: var(--primary); border-radius: 10px; padding: 0 8px; font-size: 11px; font-weight: 600; }
/* sectiekoppen per assettype */
.lib-section-head { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; }
.lib-section-head:first-child { margin-top: 4px; }
.lib-section-head b { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-light); font-weight: 700; display: flex; align-items: center; gap: 7px; }
.lib-section-head b svg { width: 15px; height: 15px; color: var(--primary); }
.lib-section-head .cnt { background: var(--accent); color: var(--primary); border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.lib-section-head::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
/* rustige bibliotheekkaart */
.asset-thumb2 { height: 82px; background: var(--bg); border-bottom: 1px solid var(--border); position: relative; padding: 6px; display: flex; flex-shrink: 0; }
.asset-thumb2 svg.preview { width: 100%; height: 100%; display: block; }
.ft-chip { position: absolute; top: 6px; left: 6px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-light); font-size: 9px; font-weight: 700; letter-spacing: .5px; padding: 0 6px; border-radius: 8px; text-transform: uppercase; }
.asset-body2 { padding: 8px 10px 4px; }
.asset-title2 { font-size: 12px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 31px; }
.asset-meta2 { font-size: 10.5px; color: var(--text-light); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-foot { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px 10px; margin-top: auto; border-top: 1px solid var(--border); }
.asset-foot .af-actions { margin-left: auto; display: flex; gap: 0; }
.asset-foot .icon-btn { padding: 3px; }
.asset-foot .badge { font-size: 10px; padding: 2px 7px; }
.asset-foot .health small { display: none; }
.asset-foot .health-bar { width: 30px; }
/* health bar */
.health { display:inline-flex; align-items:center; gap:6px; }
.health-bar { width:44px; height:6px; border-radius:3px; background:#E5E7EB; overflow:hidden; }
.health-bar span { display:block; height:100%; border-radius:3px; }
.health small { font-size:11px; color:var(--text-light); }
/* ---------- Dropzone / intake ---------- */
.dropzone { border:2px dashed var(--border); border-radius:12px; padding:34px 20px; text-align:center; color:var(--text-light); background:var(--bg-card); transition:all .15s; cursor:pointer; }
.dropzone.dragover { border-color:var(--accent-green); background:#FBFDEB; }
.dropzone svg { width:34px; height:34px; margin-bottom:8px; color:var(--primary); }
.intake-file { border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:10px; background:var(--bg-card); }
.intake-file .if-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.intake-file .if-name { font-weight:600; font-size:13.5px; }
.intake-file .if-body { margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); }
.conf-pill { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:2px 9px; border-radius:12px; font-weight:600; }
.suggest-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; font-size:12.5px; }
.suggest-grid .sg-item b { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-light); font-weight:600; margin-bottom:2px; }
/* ---------- Wizard ---------- */
.wizard-steps { display:flex; gap:4px; margin-bottom:18px; flex-wrap:wrap; }
.wizard-step { flex:1; min-width:90px; text-align:center; font-size:11px; padding:7px 4px; background:var(--bg); border-radius:6px; color:var(--text-light); border-bottom:3px solid transparent; }
.wizard-step.done { color:var(--primary); border-bottom-color:var(--accent-green); }
.wizard-step.current { background:var(--accent); color:var(--primary); font-weight:600; border-bottom-color:var(--accent-green); }
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.compare-pane { border:1px solid var(--border); border-radius:10px; padding:14px; font-size:12.5px; line-height:1.55; background:var(--bg); max-height:340px; overflow-y:auto; white-space:pre-wrap; }
.compare-pane h4 { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-light); margin-bottom:8px; }
mark.repl { background:#ECF3D2; color:#3D4A11; padding:0 2px; border-radius:3px; }
mark.ai { background:#EDE9FE; color:#5B21B6; padding:0 2px; border-radius:3px; }
mark.warn { background:#FEE2E2; color:#991B1B; padding:0 2px; border-radius:3px; font-weight:600; }
.change-row { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; font-size:12.5px; }
.change-row.accepted { border-color:var(--accent-green); background:#FBFDEB; }
.change-row.rejected { border-color:var(--border); opacity:.55; }
.change-row .cr-body { flex:1; }
/* ---------- Detail lists ---------- */
.def-list { display:grid; grid-template-columns:150px 1fr; gap:6px 14px; font-size:13px; }
.def-list dt { color:var(--text-light); font-size:12px; }
.def-list dd { margin:0; }
.chip { display:inline-flex; align-items:center; gap:4px; background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:2px 10px; font-size:11.5px; margin:2px 3px 2px 0; }
.color-dot { width:14px; height:14px; border-radius:4px; display:inline-block; vertical-align:-2px; border:1px solid rgba(0,0,0,.1); }
.entity-logo { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:15px; flex-shrink:0; }
.pkg-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; margin-bottom:6px; font-size:13px; background:var(--bg-card); }
.pkg-item svg { width:15px; height:15px; color:var(--text-light); flex-shrink:0; }
/* ---------- Tabs ---------- */
.tabs { display:flex; gap:2px; border-bottom:2px solid var(--border); margin-bottom:16px; flex-wrap:wrap; }
.tab { padding:8px 16px; border:none; background:none; cursor:pointer; font-size:13px; font-family:inherit; color:var(--text-light); border-bottom:3px solid transparent; margin-bottom:-2px; }
.tab.active { color:var(--primary); font-weight:600; border-bottom-color:var(--accent-green); }
/* ---------- Rollenmatrix ---------- */
.perm-cell { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; background:#E3E8EB; color:transparent; cursor:pointer; font-size:14px; font-weight:700; transition:background .12s; user-select:none; }
.perm-cell:hover { background:#D3DBDF; }
.perm-cell.on { background:var(--primary); color:#FFFFFF; }
.perm-cell.on:hover { background:var(--primary-light); }
.perm-cell.locked { cursor:default; background:var(--primary); color:#FFFFFF; opacity:.7; }
body[data-theme="dark"] .perm-cell { background:#374248; }
body[data-theme="dark"] .perm-cell:hover { background:#43525A; }
body[data-theme="dark"] .perm-cell.on, body[data-theme="dark"] .perm-cell.locked { background:var(--primary-light); }
/* ---------- Empty state ---------- */
.empty-state { text-align:center; padding:40px 20px; color:var(--text-light); }
.empty-state svg { width:38px; height:38px; margin-bottom:10px; opacity:.5; }
.empty-state p { font-size:13.5px; }
/* ---------- Audit ---------- */
.audit-row { display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.audit-row .ts { color:var(--text-light); white-space:nowrap; font-size:11.5px; width:120px; flex-shrink:0; }
/* ---------- Voorbeeldviewer (lightbox) ---------- */
.preview-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 3000; align-items: center; justify-content: center; padding: 20px; }
.preview-overlay.active { display: flex; }
.preview-lightbox { background: var(--bg-card); border-radius: 14px; max-width: 940px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.4); }
.pl-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); font-size: 14px; flex-wrap: wrap; }
.pl-head .muted { font-size: 12px; font-family: Consolas, monospace; }
.pl-body { flex: 1; background: var(--bg); padding: 18px; overflow: auto; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.pl-body svg.preview { width: 100%; height: auto; max-height: 62vh; }
/* ---------- Utilities ---------- */
.hidden { display: none !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap:10px; flex-wrap:wrap; }
.muted { color: var(--text-light); font-size: 12.5px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
/* ---------- Personalisatie (instellingen) ---------- */
.set-section-label { font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-light); margin: 18px 0 10px; }
.scheme-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.scheme-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 22px; border: 1.5px solid var(--border); background: var(--bg-card); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); font-family: inherit; transition: border-color .15s; }
.scheme-pill:hover { border-color: var(--primary); }
.scheme-pill.active { border: 2px solid var(--text); }
.scheme-pill .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); }
.scheme-pill input[type="color"] { width: 32px; height: 22px; border: 1px solid var(--border); border-radius: 6px; padding: 0; background: none; cursor: pointer; }
.scheme-pill .x { color: var(--danger); display: inline-flex; }
.scheme-preview { display: flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; max-width: 430px; margin-top: 14px; background: var(--bg-card); }
.mini-side { width: 62px; padding: 12px 10px; display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; }
.mini-side span { height: 7px; border-radius: 3.5px; background: rgba(255,255,255,.35); }
.mini-side span:first-child { width: 26px; background: rgba(255,255,255,.65); }
.mini-body { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mini-bar { height: 9px; border-radius: 4.5px; }
.mini-bar.gray { background: #C7CDD1; }
.mini-inputs { display: flex; gap: 8px; }
.mini-input { flex: 1; border: 1px solid var(--border); background: var(--bg); border-radius: 6px; padding: 5px 10px; font-size: 12px; }
.mini-btn { align-self: flex-start; color: #fff; border: none; border-radius: 6px; padding: 5px 12px; font-size: 11px; font-family: inherit; }
.mini-progress { height: 7px; border-radius: 3.5px; background: #E3E7EA; overflow: hidden; }
.mini-progress span { display: block; height: 100%; border-radius: 3.5px; }
/* ---------- Donker thema ---------- */
body[data-theme="dark"] {
    --bg:#15191C; --bg-card:#1E2529; --text:#E6EAEC; --text-light:#9DAEB6; --border:#374248; --accent:#26333A;
}
body[data-theme="dark"] input, body[data-theme="dark"] select, body[data-theme="dark"] textarea { color: var(--text); background: var(--bg-card); }
.topbar select { background: var(--bg-card); color: var(--text); }
.search-box input { color: var(--text); }
body[data-theme="dark"] .team-btn:hover { background: rgba(255,255,255,.08); }
body[data-theme="dark"] .change-row.accepted { background:#26301C; }
body[data-theme="dark"] .dropzone.dragover { background:#26301C; }
body[data-theme="dark"] .badge-gray { background:#374151; color:#D1D5DB; }
body[data-theme="dark"] .icon-btn:hover { background: rgba(255,255,255,.08); }
body[data-theme="dark"] .stat-card { background: #262D31; color: #E6EAEC; }
body[data-theme="dark"] .stat-card .stat-link { background: #4A555C; color: #FFFFFF; }
body[data-theme="dark"] .stats-grid .stat-card:nth-child(6n+1):not(.warn):not(.danger) { background: #1C2E3E; color: #CFE2EF; }
body[data-theme="dark"] .stats-grid .stat-card:nth-child(6n+1):not(.warn):not(.danger) .stat-link { background: #0A4A6B; color: #FFFFFF; }
body[data-theme="dark"] .stats-grid .stat-card:nth-child(6n+2):not(.warn):not(.danger) { background: #1E3A2A; color: #B7E0C6; }
body[data-theme="dark"] .stats-grid .stat-card:nth-child(6n+2):not(.warn):not(.danger) .stat-link { background: #2F7A4C; color: #EAF7EF; }
body[data-theme="dark"] .stats-grid .stat-card:nth-child(6n+3):not(.warn):not(.danger) { background: #0E3A45; color: #9FDCEA; }
body[data-theme="dark"] .stats-grid .stat-card:nth-child(6n+3):not(.warn):not(.danger) .stat-link { background: #00ACD0; color: #00232B; }
body[data-theme="dark"] .stats-grid .stat-card:nth-child(6n+4):not(.warn):not(.danger) { background: #451A2E; color: #F2B8CF; }
body[data-theme="dark"] .stats-grid .stat-card:nth-child(6n+4):not(.warn):not(.danger) .stat-link { background: #D4145A; color: #FFFFFF; }
body[data-theme="dark"] .stats-grid .stat-card:nth-child(6n+5):not(.warn):not(.danger) { background: #332947; color: #D6C8F0; }
body[data-theme="dark"] .stats-grid .stat-card:nth-child(6n+5):not(.warn):not(.danger) .stat-link { background: #8B5CF6; color: #FFFFFF; }
body[data-theme="dark"] .stat-card.warn { background: #3E351A; color: #F3DFA0; }
body[data-theme="dark"] .stat-card.warn .stat-link { background: #E8A317; color: #2C2103; }
body[data-theme="dark"] .stat-card.danger { background: #45201C; color: #F5B8B1; }
body[data-theme="dark"] .stat-card.danger .stat-link { background: #DC3545; color: #FFFFFF; }
/* ---------- Compacte dichtheid ---------- */
body.compact .content { padding: 14px; }
body.compact .card { padding: 12px 16px; margin-bottom: 12px; }
body.compact th, body.compact td { padding: 6px 10px; }
body.compact .nav-item { padding: 7px 20px; }
body.compact .stat-card { padding: 16px 16px 14px; min-height: 104px; border-radius: 18px; }
body.compact .stats-grid, body.compact .asset-grid { gap: 10px; }
body.compact .form-group { margin-bottom: 10px; }
body.compact .stat-card .stat-value { font-size: 22px; }
/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .grid-2, .compare-grid, .form-row, .form-row-3 { grid-template-columns: 1fr; }
    .def-list { grid-template-columns: 120px 1fr; }
}
@media (max-width: 820px) {
    .sidebar { width: var(--sidebar-width); left: calc(-1 * var(--sidebar-width)); z-index: 500; box-shadow: 4px 0 20px rgba(0,0,0,.2); }
    .sidebar.open { left: 0; }
    .sidebar .nav-label, .sidebar .nav-count, .sidebar .sidebar-header h1, .sidebar .sidebar-header small, .sidebar .logo-text, .sidebar .sidebar-footer { opacity: 1; }
    .sidebar .nav-sep { color: rgba(255,255,255,.55); }
    .main { margin-left: 0; }
    .hamburger { display: inline-flex; }
    .content { padding: 16px; }
    .topbar { padding: 10px 16px; }
    .sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:499; }
    .sidebar-backdrop.active { display:block; }
}
/* ---------- Loginpagina (Laravel) ---------- */
body.login-page { display: block; overflow-y: auto; background: var(--primary-dark); }
.login-wrap {
    flex: 1; min-height: 100vh; width: 100%; padding: 32px 20px; overflow-y: auto;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(1200px 600px at 50% -10%, var(--primary-light) 0%, var(--primary) 45%, var(--primary-dark) 100%);
}
.login-card {
    background: var(--bg-card); border-radius: 16px; padding: 30px 32px 26px; width: 100%; max-width: 400px;
    box-shadow: 0 26px 70px rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.06);
}
.login-card .login-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.login-card .login-logo img { width: 120px; height: auto; }
.login-card .login-logo .logo-text { font-size: 20px; font-weight: 700; letter-spacing: 1px; color: var(--primary); }
.login-card .login-logo .logo-text span { color: var(--accent-green); }
.login-card h1 { font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 4px; color: var(--text); }
.login-card .login-sub { font-size: 12.5px; color: var(--text-light); text-align: center; margin-bottom: 20px; }
.login-card .form-group input { padding: 10px 12px; font-size: 14px; }
.login-card .btn { width: 100%; justify-content: center; padding: 10px 14px; font-size: 14px; margin-top: 6px; }
.login-remember { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-light); margin: 10px 0 2px; cursor: pointer; }
.login-remember input { width: auto; }
.login-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-light); text-align: center; line-height: 1.6; }
/* Secundaire link onder het formulier: wachtwoord vergeten, terug naar inloggen. */
.login-alt { margin-top: 14px; text-align: center; font-size: 12.5px; }
.login-alt a { color: var(--text-light); text-decoration: none; border-bottom: 1px solid transparent; }
.login-alt a:hover { color: var(--primary); border-bottom-color: var(--primary); }
/* Scheiding tussen wachtwoord en passkey: een lijn met "of" in het midden. */
.login-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--text-light); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* ---------- Validatiefouten & meldingen (Laravel) ---------- */
.field-error { display: block; font-size: 11.5px; color: var(--danger); margin-top: 4px; font-weight: 500; }
.form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea,
input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--danger); }
.form-group.has-error input:focus, input.is-invalid:focus,
.form-group.has-error select:focus, select.is-invalid:focus,
.form-group.has-error textarea:focus, textarea.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,53,69,.14); border-color: var(--danger); }
.alert { border-radius: 10px; padding: 11px 16px; font-size: 13px; margin-bottom: 16px; border: 1px solid transparent; display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.alert ul { margin: 0; padding-left: 18px; }
.alert-success { background: #ECF3D2; color: #55611B; border-color: #D6E4A6; }
.alert-error, .alert-danger { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.alert-warning { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.alert-info { background: var(--accent); color: var(--primary); border-color: var(--border); }
body[data-theme="dark"] .alert-success { background: #26301C; color: #D3E39C; border-color: #3C4A28; }
body[data-theme="dark"] .alert-error, body[data-theme="dark"] .alert-danger { background: #45201C; color: #F5B8B1; border-color: #5E2C26; }
body[data-theme="dark"] .alert-warning { background: #3E351A; color: #F3DFA0; border-color: #574A24; }