@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ══ STORMS — risktools.nl ══ */
:root {
    --white:#fff; --off:#f8f9fa; --g1:#f1f3f5; --g2:#e9ecef; --g3:#dee2e6;
    --g4:#ced4da; --g5:#adb5bd; --g6:#6c757d;
    --dark:#212529; --d2:#343a40; --d3:#495057;
    --blu:#0d6efd; --blu-l:#cfe2ff; --blu-d:#084298;
    --grn:#198754; --grn-l:#d1e7dd; --grn-d:#0f5132;
    --red:#dc3545; --red-l:#f8d7da; --red-d:#842029;
    --yel:#ffc107; --yel-l:#fff3cd; --yel-d:#664d03;
    --tel:#0dcaf0; --tel-l:#cff4fc; --tel-d:#055160;
    --font:'Inter',sans-serif; --mono:'JetBrains Mono',monospace;
    --sh:0 1px 3px rgba(0,0,0,.10); --sh2:0 4px 12px rgba(0,0,0,.10);
    --r:6px; --r2:10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:15px;line-height:1.55;background:var(--g1);color:var(--dark);-webkit-font-smoothing:antialiased}

/* ── TOPBAR ── */
.topbar{position:sticky;top:0;z-index:200;background:var(--d2);color:#fff;padding:0 20px;height:54px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh)}
.topbar-logo{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1}
.topbar-logo .brand{font-size:30px;font-weight:700;letter-spacing:-1px;color:#fff;line-height:1}
.topbar-logo .brand span{color:var(--tel)}
.topbar-logo .tagline-row{display:flex;align-items:center;gap:6px;margin-top:1px}
.topbar-logo .tagline{font-size:9px;color:var(--g5);letter-spacing:1.5px;text-transform:uppercase}
.topbar-logo .version-badge{font-size:10px;font-weight:600;color:var(--tel);cursor:pointer;letter-spacing:.3px;white-space:nowrap}
.topbar-logo .version-badge:hover{color:#fff;text-decoration:underline}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.topbar-user{font-size:12px;color:var(--g4)}
.topbar-date{font-size:11px;color:var(--g5);font-family:var(--mono)}

/* ── NAVBAR ── */
.navbar{background:var(--white);border-bottom:1px solid var(--g3);padding:0 20px;display:flex;gap:0;position:sticky;top:54px;z-index:190;flex-wrap:wrap;box-shadow:0 2px 4px rgba(0,0,0,0.04)}
.nb-dropdown{position:relative}
.nb-dropdown-menu{display:none;position:absolute;top:100%;right:0;z-index:200;background:var(--white);border:1px solid var(--g3);border-radius:var(--r);box-shadow:0 4px 16px rgba(0,0,0,0.12);padding:4px 0;min-width:220px;margin-top:0}
.nb-dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;text-decoration:none;color:var(--d3);font-size:13px}
.nb-dropdown-menu a:hover{background:var(--g1)}
.nb-dropdown-menu a.logout{color:var(--red);font-weight:500;border-top:1px solid var(--g2)}
.nb-dropdown-menu a.logout:hover{background:rgba(220,53,69,0.08)}
.nb{padding:13px 16px;font-size:13px;font-weight:500;color:var(--g6);border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;transition:all .15s;font-family:var(--font);white-space:nowrap;display:flex;align-items:center;gap:6px;line-height:1}
.nb:hover{color:var(--dark);background:var(--g1)}
.nb.active{color:var(--blu);border-bottom-color:var(--blu);font-weight:700}

/* ── MAIN ── */
.main{padding:20px;min-height:calc(100vh - 108px);animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── PAGE HEADER ── */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.page-header h1{font-size:20px;font-weight:700;color:var(--dark);letter-spacing:-.3px}
.page-header .subtitle{font-size:12px;color:var(--g6);margin-top:2px}

/* ── CARDS ── */
.card{background:var(--white);border:1px solid var(--g3);border-radius:var(--r2);box-shadow:var(--sh);margin-bottom:16px}
.card-header{padding:10px 14px;border-bottom:1px solid var(--g3);display:flex;align-items:center;gap:8px;background:var(--off);border-radius:var(--r2) var(--r2) 0 0}
.card-header h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--d3);margin:0;flex:1}
.card-body{padding:14px}

/* ── STATS ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.stat-card{background:var(--white);border:1px solid var(--g3);border-radius:var(--r2);padding:14px 16px;box-shadow:var(--sh);position:relative;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.stat-card:hover{border-color:var(--blu);box-shadow:var(--sh2)}
.stat-card .stat-value{font-size:26px;font-weight:700;font-family:var(--mono);color:var(--dark);line-height:1;margin-bottom:4px}
.stat-card .stat-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--g6)}
.stat-card .stat-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:22px;opacity:.12}

/* ── TABEL ── */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--g3)}
table{width:100%;border-collapse:collapse}
thead th{background:var(--g1);padding:9px 12px;text-align:left;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--g6);border-bottom:2px solid var(--g3);white-space:nowrap}
tbody tr{border-bottom:1px solid var(--g2);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--off)}
td{padding:10px 12px;font-size:13px;color:var(--dark);vertical-align:middle}

/* ── BADGES ── */
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700}
.bg-b{background:var(--blu-l);color:var(--blu-d)}
.bg-g{background:var(--grn-l);color:var(--grn-d)}
.bg-r{background:var(--red-l);color:var(--red-d)}
.bg-y{background:var(--yel-l);color:var(--yel-d)}
.bg-t{background:var(--tel-l);color:var(--tel-d)}
.bg-gray{background:var(--g2);color:var(--d3)}
code{font-family:var(--mono);font-size:11px;background:var(--g1);border:1px solid var(--g3);border-radius:4px;padding:1px 6px;color:var(--d3)}

/* ── KNOPPEN ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 14px;border-radius:var(--r);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;border:1px solid transparent;line-height:1.4;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blu);color:#fff;border-color:var(--blu)}.btn-primary:hover{background:#0b5ed7}
.btn-success{background:var(--grn);color:#fff;border-color:var(--grn)}.btn-success:hover{background:#157347}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}.btn-danger:hover{background:#bb2d3b}
.btn-warning{background:var(--yel);color:var(--dark);border-color:var(--yel)}.btn-warning:hover{background:#ffca2c}
.btn-outline{background:var(--white);color:var(--d3);border-color:var(--g4)}.btn-outline:hover{background:var(--g1);border-color:var(--g5)}
.btn-ghost{background:none;color:var(--g6);border:1px solid var(--g3)}.btn-ghost:hover{background:var(--g1);color:var(--dark)}
.btn-sm{padding:5px 10px;font-size:11px}
.btn-xs{padding:2px 7px;font-size:10px}
.btn-icon{width:30px;height:30px;padding:0}
.btn-full{width:100%}

/* ── FORMULIEREN ── */
.form-group{margin-bottom:14px}
.form-label{display:block;margin-bottom:5px;font-size:11px;font-weight:700;color:var(--d3);letter-spacing:.3px}
.form-control{width:100%;padding:8px 10px;background:var(--white);border:1px solid var(--g4);border-radius:var(--r);color:var(--dark);font-family:var(--font);font-size:13px;outline:none;transition:border .15s,box-shadow .15s;height:35px;box-sizing:border-box}
select.form-control{height:35px;line-height:1.2;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23666' d='M6 8L2 4h8z'/></svg>");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;-webkit-appearance:none;-moz-appearance:none;appearance:none}
input.form-control[type="date"],input.form-control[type="datetime-local"],input.form-control[type="number"]{height:35px}
.form-control:focus{border-color:var(--blu);box-shadow:0 0 0 3px rgba(13,110,253,.12)}
.form-control::placeholder{color:var(--g5)}
.form-control[readonly]{background:var(--g1);color:var(--g6);cursor:default}
textarea.form-control{resize:vertical;min-height:70px;height:auto}
textarea.iv-autogrow{min-height:0!important;height:auto;line-height:1.4;font-size:13px;padding:6px 10px;resize:none;overflow-y:hidden;box-sizing:border-box}
.input-group{display:flex;gap:6px;align-items:center}
.input-group .form-control{flex:1}

/* ── MODALS ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9000;padding:16px;animation:overlayIn .15s ease}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--white);border:1px solid var(--g3);border-radius:var(--r2);width:100%;max-width:540px;min-width:340px;min-height:240px;max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.18);animation:modalIn .22s cubic-bezier(.34,1.56,.64,1);resize:both}
.modal.modal-wide{max-width:820px;min-height:360px}
.modal.modal-tall{max-width:720px;min-height:560px;max-height:95vh}
.modal.modal-xl{max-width:1100px;min-height:560px;max-height:95vh}
@keyframes modalIn{from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--g3);background:var(--off);border-radius:var(--r2) var(--r2) 0 0}
.modal-title{font-size:13px;font-weight:700;color:var(--dark)}
.modal-close{width:26px;height:26px;border-radius:50%;background:none;border:1px solid var(--g3);color:var(--g6);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .15s}
.modal-close:hover{background:var(--red-l);color:var(--red);border-color:var(--red)}
.modal-body{padding:16px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding-top:14px;margin-top:6px;border-top:1px solid var(--g3)}

/* ── TOAST ── */
#toast-container{position:fixed;bottom:20px;right:20px;z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:var(--r2);background:var(--d2);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.25);min-width:250px;max-width:370px;pointer-events:all;font-size:13px;font-weight:500;animation:toastIn .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes toastIn{from{opacity:0;transform:translateX(18px) scale(.95)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateX(18px) scale(.9)}}
.toast.hide{animation:toastOut .18s ease forwards}
.toast-success{background:var(--grn)}.toast-error{background:var(--red)}.toast-warning{background:#b45309}.toast-info{background:var(--blu)}

/* ── BOX-HEADER ── */
.box-header{display:flex;align-items:center;padding:8px 12px;font-size:13px}
.header-icon{display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;width:22px}
.header-divider{width:1px;height:20px;background:var(--g3);margin:0 8px;flex-shrink:0}
.header-text{flex:1;font-weight:700;color:var(--d2)}

/* ── ALERTS ── */
.alert{padding:9px 12px;border-radius:var(--r);font-size:12px;margin-bottom:8px;display:flex;align-items:flex-start;gap:8px;border:1px solid transparent}
.al-d{background:var(--red-l);border-color:#f1aeb5;color:var(--red-d)}
.al-w{background:var(--yel-l);border-color:#ffe69c;color:var(--yel-d)}
.al-s{background:var(--grn-l);border-color:#a3cfbb;color:var(--grn-d)}
.al-i{background:var(--blu-l);border-color:#9ec5fe;color:var(--blu-d)}

/* ── LOADING / EMPTY ── */
.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 20px;gap:12px;color:var(--g6);font-size:13px}
.spinner{width:30px;height:30px;border:3px solid var(--g3);border-top-color:var(--blu);border-radius:50%;animation:spin .65s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-state{padding:48px 20px;text-align:center;color:var(--g5)}
.empty-state .empty-icon{font-size:28px;margin-bottom:8px;opacity:.5}
.empty-state p{font-size:12px}

/* ── WELCOME BANNER ── */
.welcome-banner{background:linear-gradient(135deg,var(--d2) 0%,#1a3a5c 100%);border-radius:var(--r2);padding:18px 22px;margin-bottom:18px;color:#fff;display:flex;align-items:center;gap:14px}
.welcome-banner .banner-icon{font-size:30px;opacity:.8;flex-shrink:0}
.welcome-banner h2{font-size:15px;font-weight:700;color:#fff;margin-bottom:2px}
.welcome-banner p{font-size:12px;color:rgba(255,255,255,.65)}

/* ── LOGIN ── */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--g1);padding:20px}
.login-card{background:var(--white);border:1px solid var(--g3);border-radius:var(--r2);padding:36px 32px;width:100%;max-width:400px;box-shadow:var(--sh2)}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo .brand-mark{font-size:26px;font-weight:700;color:var(--dark);letter-spacing:-.5px}
.login-logo .brand-mark span{color:var(--blu)}
.login-logo .tagline{font-size:10px;color:var(--g5);letter-spacing:1.5px;text-transform:uppercase;margin-top:4px}
.login-logo .login-version{font-size:11px;color:var(--g6);font-weight:600;margin-top:4px;letter-spacing:.5px}
.login-error{background:var(--red-l);border:1px solid #f1aeb5;border-radius:var(--r);padding:10px 12px;margin-bottom:16px;color:var(--red-d);font-size:12px;display:flex;align-items:center;gap:7px}
.login-demo{margin-top:20px;padding:12px;background:var(--g1);border:1px solid var(--g3);border-radius:var(--r);text-align:center;font-size:11px;color:var(--g6);line-height:1.9}
.login-demo strong{color:var(--blu);font-weight:600}

/* ── ROW ACTIONS ── */
.row-actions{display:flex;gap:4px}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--g4);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--g5)}

/* ── UTILITY ── */
.flex{display:flex}.gap-2{gap:8px}.gap-3{gap:12px}
.mt-3{margin-top:12px}.mb-3{margin-bottom:12px}
.text-muted{color:var(--g6)}.text-sm{font-size:12px}
.fw-bold{font-weight:700}.mono{font-family:var(--mono)}

@media(max-width:600px){
    .topbar{padding:0 12px;height:46px} .navbar{top:46px}
    .main{padding:12px}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}