/* ============================================================
   EXO Portal — Professioneel design-system
   Frosted glass + EXO Solutions blauw. Plain CSS (geen @apply,
   want de Tailwind Play-CDN verwerkt losse CSS-bestanden niet).
   ============================================================ */

:root {
    --exo-50:#eff8ff; --exo-100:#dbeafe; --exo-200:#bfdbfe; --exo-300:#93c5fd;
    --exo-400:#60a5fa; --exo-500:#3b82f6; --exo-600:#2563eb; --exo-700:#1d4ed8;
    --exo-800:#1e40af; --exo-900:#1e3a8a; --exo-cyan:#06b6d4;

    --ink:#0f172a; --ink-soft:#334155; --muted:#64748b; --faint:#94a3b8;
    --line:rgba(148,163,184,.22);

    --glass: rgba(255,255,255,.70);
    --glass-strong: rgba(255,255,255,.86);
    --glass-border: rgba(255,255,255,.65);
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --shadow: 0 8px 30px rgba(15,23,42,.08);
    --shadow-lg: 0 20px 50px rgba(15,23,42,.16);
    --ring: rgba(37,99,235,.18);
    --grad: linear-gradient(135deg, var(--exo-600), var(--exo-cyan));
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
    font-family:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: #f4f8ff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}
a { color: inherit; }

/* ---------- Achtergrond ---------- */
.exo-bg {
    position: fixed; inset: 0; z-index: -2;
    background:
        radial-gradient(1100px 560px at 8% -8%, #e3f0ff 0%, rgba(227,240,255,0) 58%),
        radial-gradient(980px 680px at 102% 4%, #dde9ff 0%, rgba(221,233,255,0) 55%),
        linear-gradient(165deg, #f3f8ff 0%, #eef4ff 50%, #f7fbff 100%);
}
.exo-bg::before, .exo-bg::after {
    content:""; position:absolute; border-radius:50%; filter: blur(90px); opacity:.5; z-index:-1;
}
.exo-bg::before {
    width:40rem; height:40rem; top:-12rem; left:-10rem;
    background: radial-gradient(circle at 30% 30%, var(--exo-400), var(--exo-cyan));
    animation: orbA 20s ease-in-out infinite;
}
.exo-bg::after {
    width:34rem; height:34rem; bottom:-14rem; right:-8rem;
    background: radial-gradient(circle at 70% 70%, var(--exo-500), #818cf8);
    animation: orbB 24s ease-in-out infinite;
}
@keyframes orbA { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,30px) scale(1.08);} }
@keyframes orbB { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-30px,-40px) scale(1.1);} }
@media (prefers-reduced-motion: reduce){ .exo-bg::before,.exo-bg::after{animation:none;} }

/* ---------- Glas ---------- */
.glass {
    background: var(--glass);
    backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--glass-border);
}
.glass-card {
    background: var(--glass);
    backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
}
.glass-strong {
    background: var(--glass-strong);
    backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: var(--shadow-lg);
}
.gradient-text {
    background: var(--grad); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- App-shell ---------- */
.app-shell { display:flex; min-height:100vh; }

.sidebar {
    position: fixed; inset: 0 auto 0 0; width: 256px; z-index: 50;
    display:flex; flex-direction:column;
    background: rgba(255,255,255,.62);
    backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-right: 1px solid var(--glass-border);
    transition: transform .25s ease;
}
.sidebar-scroll { flex:1; overflow-y:auto; padding: 0 .85rem; }
.main { flex:1; min-width:0; margin-left: 256px; }

@media (max-width: 767px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
}

.nav-item {
    display:flex; align-items:center; gap:.7rem; width:100%;
    padding:.62rem .8rem; margin:.15rem 0; border-radius:.7rem;
    font-size:.9rem; font-weight:600; color: var(--ink-soft);
    cursor:pointer; border:none; background:transparent; text-align:left;
    transition: all .15s ease;
}
.nav-item i { width:1.1rem; text-align:center; font-size:.95rem; color: var(--muted); }
.nav-item:hover { background: rgba(37,99,235,.08); color: var(--exo-700); }
.nav-item:hover i { color: var(--exo-600); }
.nav-item.active { background: var(--grad); color:#fff; box-shadow: 0 6px 16px rgba(37,99,235,.28); }
.nav-item.active i { color:#fff; }
.nav-section { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:.4rem .8rem .2rem; }

/* ---------- Topbar ---------- */
.topbar {
    position: sticky; top:0; z-index:40;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid var(--glass-border);
}

/* ---------- Buttons ---------- */
.btn-primary,.btn-secondary,.btn-danger,.btn-ghost {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    font-weight:600; font-size:.875rem; line-height:1.25rem;
    padding:.55rem 1rem; border-radius:.7rem; cursor:pointer;
    transition: all .16s ease; border:1px solid transparent; white-space:nowrap; text-decoration:none;
}
.btn-primary { color:#fff; background: linear-gradient(135deg,var(--exo-600),var(--exo-500)); box-shadow:0 6px 16px rgba(37,99,235,.28); }
.btn-primary:hover { background: linear-gradient(135deg,var(--exo-700),var(--exo-600)); box-shadow:0 8px 22px rgba(37,99,235,.38); transform:translateY(-1px); }
.btn-secondary { color:var(--ink-soft); background: rgba(255,255,255,.78); border-color: var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-secondary:hover { background:#fff; border-color: var(--exo-300); color: var(--exo-700); }
.btn-danger { color:#b91c1c; background: rgba(254,226,226,.85); border-color: rgba(248,113,113,.3); }
.btn-danger:hover { background:#fee2e2; color:#991b1b; }
.btn-ghost { color:var(--muted); background:transparent; box-shadow:none; }
.btn-ghost:hover { color:var(--exo-700); background: rgba(37,99,235,.08); }
.btn-primary:disabled,.btn-secondary:disabled,.btn-danger:disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-sm { padding:.35rem .7rem; font-size:.8rem; border-radius:.55rem; }
.btn-block { width:100%; }

.icon-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:2rem; height:2rem; border-radius:.55rem; color: var(--exo-600);
    background:transparent; border:none; cursor:pointer; transition: all .15s ease;
}
.icon-btn:hover { background: rgba(37,99,235,.1); color: var(--exo-700); }
.icon-btn.danger { color:#ef4444; }
.icon-btn.danger:hover { background: rgba(239,68,68,.1); color:#dc2626; }

/* ---------- Inputs ---------- */
.input-field, select.input-field, textarea.input-field {
    width:100%; padding:.6rem .85rem; border-radius:.7rem;
    border:1px solid var(--line); background: rgba(255,255,255,.92);
    color: var(--ink); font-size:.9rem; outline:none; font-family:inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input-field::placeholder { color: var(--faint); }
.input-field:focus { border-color: var(--exo-500); box-shadow:0 0 0 3px var(--ring); background:#fff; }
.input-label { display:block; font-size:.78rem; font-weight:600; color:var(--ink-soft); margin-bottom:.35rem; }
.input-hint { font-size:.72rem; color: var(--faint); margin-top:.3rem; }

/* ---------- Toggle ---------- */
.toggle { width:44px; height:24px; border-radius:999px; background:#cbd5e1; position:relative; cursor:pointer; transition: background .2s ease; flex:none; }
.toggle.on { background: linear-gradient(135deg,var(--exo-600),var(--exo-500)); }
.toggle-dot { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.3); transition: left .2s ease; }
.toggle.on .toggle-dot { left:22px; }

/* ---------- Badges ---------- */
.status-badge {
    display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .6rem;
    border-radius:999px; font-size:.72rem; font-weight:600; text-transform:capitalize; white-space:nowrap;
}
.badge-green{background:#dcfce7;color:#15803d;} .badge-blue{background:var(--exo-100);color:var(--exo-700);}
.badge-amber{background:#fef3c7;color:#b45309;} .badge-red{background:#fee2e2;color:#b91c1c;}
.badge-slate{background:#f1f5f9;color:#475569;} .badge-cyan{background:#cffafe;color:#0e7490;}
.badge-violet{background:#ede9fe;color:#6d28d9;} .badge-sky{background:#e0f2fe;color:#0369a1;}

/* ---------- Cards / tables ---------- */
.surface { background: var(--glass); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border:1px solid var(--glass-border); box-shadow: var(--shadow); }
.table-row-hover { transition: background .15s ease; }
.table-row-hover:hover { background: rgba(37,99,235,.045); }

/* ---------- Tabs ---------- */
.tab {
    padding:.45rem .85rem; border-radius:.6rem; font-size:.82rem; font-weight:600;
    color: var(--muted); cursor:pointer; border:none; background:transparent; transition: all .15s ease; white-space:nowrap;
}
.tab:hover { color: var(--exo-700); background: rgba(37,99,235,.06); }
.tab.active { background:#fff; color: var(--exo-700); box-shadow: var(--shadow-sm); }

/* ---------- Accordion ---------- */
.accordion-body { animation: accIn .22s ease; }
@keyframes accIn { from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);} }

/* ---------- Modal ---------- */
.modal-overlay {
    position: fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
    padding:1rem; background: rgba(15,23,42,.4);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: fadeIn .18s ease;
}
.modal-panel {
    width:100%; max-width:34rem; max-height:90vh; overflow-y:auto; border-radius:1.1rem;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
    border:1px solid rgba(255,255,255,.72); box-shadow:0 24px 64px rgba(15,23,42,.28);
    animation: pop .22s cubic-bezier(.16,1,.3,1);
}
.modal-wide { max-width: 48rem; }
.modal-preview { width: 92vw; max-width: 1100px; }
.modal-split {
    width: 95vw;
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem;
}
@media (min-width: 1024px) {
    .modal-split { grid-template-columns: 1fr 1fr; }
}
.modal-split .split-form { min-width: 0; }
.modal-split .split-preview iframe { width: 100%; height: 100%; min-height: 60vh; border-radius: 0.75rem; border: 1px solid rgba(148,163,184,.22); background: #fff; }
@keyframes pop { from{opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

/* ---------- Toast ---------- */
.toast { animation: toastIn .25s cubic-bezier(.16,1,.3,1); }
@keyframes toastIn { from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);} }

/* ---------- Misc ---------- */
.card-enter { animation: cardEnter .32s ease-out both; }
@keyframes cardEnter { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.spinner { border:2.5px solid rgba(37,99,235,.18); border-top-color: var(--exo-600); border-radius:50%; animation: spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }

.fade-enter-active,.fade-leave-active { transition: opacity .2s ease; }
.fade-enter-from,.fade-leave-to { opacity:0; }

::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,.5); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.8); }

/* timeline dot voor gekoppelde betalingen */
.dot { width:.55rem; height:.55rem; border-radius:50%; flex:none; }