/* nixcape Administratie — premium dark, mobielvriendelijk. */
:root{
  --bg:#05060B;--bg2:#0A0C14;--panel:#0E1019;--panel2:#12141F;
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.14);
  --text:#F4F6FF;--muted:#AEB6C9;--faint:#8893A8;
  --violet:#6E1FF0;--blue:#2E7BFF;--cyan:#00C6FF;
  --grad:linear-gradient(115deg,var(--violet),var(--blue) 55%,var(--cyan));
  --ok:#36D399;--okbg:rgba(54,211,153,.12);--warn:#FBBF55;--warnbg:rgba(251,191,85,.12);
  --radius:14px;--font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}html,body{margin:0}
body{background:radial-gradient(1200px 700px at 100% -10%,rgba(46,123,255,.10),transparent 60%),var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.5;min-height:100vh}
a{color:inherit}.lnk{color:var(--blue);text-decoration:none}.lnk:hover{text-decoration:underline}.lnk.sm{font-size:.8rem}
small{display:block;color:var(--faint);font-size:.8rem}.muted{color:var(--muted)}.sm{font-size:.85rem}.r{text-align:right}.mt{margin-top:1rem}.warn{color:var(--warn)}

/* Merk + zijbalk */
.brand{display:flex;flex-direction:column;gap:.1rem;text-decoration:none;padding:.2rem .3rem}
.brand--c{align-items:center;margin-bottom:.5rem}
.brand__logo{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand__img{height:30px;display:block}
.loginbox .brand__img{height:38px;margin-bottom:.2rem}
.brand small{letter-spacing:.16em;text-transform:uppercase;font-size:.66rem}
.side{position:fixed;inset:0 auto 0 0;width:230px;padding:1.3rem 1rem;background:linear-gradient(180deg,var(--bg2),var(--bg));border-right:1px solid var(--border);display:flex;flex-direction:column;gap:1.3rem;z-index:30}
.side__nav{display:flex;flex-direction:column;gap:.2rem}
.side__nav a{padding:.55rem .8rem;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:600;font-size:.92rem}
.side__nav a:hover{background:var(--panel);color:var(--text)}
.side__nav a.is-active{background:var(--panel2);color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
.side__out{margin-top:auto}
.navtoggle{display:none;position:fixed;top:12px;left:12px;z-index:40;background:var(--panel2);border:1px solid var(--border2);color:var(--text);width:42px;height:42px;border-radius:10px;font-size:1.3rem;cursor:pointer}
.main{margin-left:230px;padding:1.8rem 2.2rem;max-width:1180px}

.head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.head h1{font-size:1.45rem;margin:0;letter-spacing:-.02em}
.sub{color:var(--muted);margin:.25rem 0 0}h2{font-size:1.02rem;margin:0 0 1rem}
.yearnav{display:flex;gap:.4rem}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem;margin-bottom:1.2rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.note{background:var(--panel2);border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:10px;padding:.8rem 1rem;color:var(--muted);margin:0 0 1.2rem}
code{background:rgba(255,255,255,.07);padding:.1rem .4rem;border-radius:6px;font-size:.85em}

/* Stat-kaarten */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.2rem}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem}
.stat__lbl{color:var(--faint);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.stat__val{font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
.stat__sub{color:var(--muted);font-size:.82rem}
.stat--accent{box-shadow:inset 0 0 0 1px rgba(46,123,255,.3)}
.stat--ok .stat__val{color:var(--ok)}.stat--warn{box-shadow:inset 0 0 0 1px rgba(251,191,85,.3)}

/* Chart + finlines */
.chart{display:flex;align-items:flex-end;gap:6px;height:130px;padding-top:8px}
.bar{flex:1;display:flex;align-items:flex-end;height:100%}
.bar span{display:block;width:100%;background:var(--grad);border-radius:4px 4px 0 0;min-height:2px}
.bronrow{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;border-bottom:1px solid var(--border)}
.bronrow .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}.bronrow b{margin-left:auto}
.finline{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--border)}
.finline--g{border-top:2px solid var(--text);border-bottom:none;font-weight:800;font-size:1.05rem;margin-top:.3rem;padding-top:.7rem}
.quick{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}

/* Tabellen */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:0 .7rem .6rem;font-weight:700}
.tbl td{padding:.75rem .7rem;border-top:1px solid var(--border);vertical-align:middle}
.tbl tbody tr{cursor:default}.tbl tbody tr[onclick]{cursor:pointer}.tbl tbody tr:hover{background:rgba(255,255,255,.02)}
.empty{color:var(--faint);text-align:center;padding:1.6rem 0}
.tbl--edit td{padding:.4rem .3rem;border-top:1px solid var(--border)}
.tbl--edit input,.tbl--edit select{width:100%}

/* Badges */
.badge{display:inline-block;padding:.18rem .55rem;border-radius:100px;font-size:.72rem;font-weight:700}
.badge--ok{background:var(--okbg);color:var(--ok)}.badge--warn{background:var(--warnbg);color:var(--warn)}.badge--muted{background:rgba(255,255,255,.07);color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;cursor:pointer;border:1px solid var(--border2);background:var(--panel2);color:var(--text);padding:.55rem 1.05rem;border-radius:10px;font-weight:600;font-size:.9rem;font-family:inherit;text-decoration:none;transition:transform .12s}
.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.55}
.btn--primary{background:var(--grad);border-color:transparent;box-shadow:0 8px 22px rgba(46,123,255,.28)}
.btn--ghost{background:transparent}.btn--sm{padding:.4rem .75rem;font-size:.82rem}.btn--block{width:100%;margin-top:.3rem}
.task__btn{background:none;border:none;color:var(--faint);cursor:pointer;font:inherit;font-size:.8rem;padding:.15rem .4rem;border-radius:6px}
.task__btn:hover{color:var(--text);background:rgba(255,255,255,.06)}.task__btn--del:hover{color:#FF9B9B}

/* Forms */
label{display:flex;flex-direction:column;gap:.35rem;font-weight:600;font-size:.85rem;margin-bottom:.8rem}
input,select,textarea{background:var(--bg2);border:1px solid var(--border2);border-radius:9px;padding:.6rem .75rem;color:var(--text);font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,123,255,.2)}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.addbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.addbar input,.addbar select{flex:1;min-width:120px;margin:0}
.actions{display:flex;gap:.7rem;margin-top:1rem;flex-wrap:wrap}
.totalbox{display:flex;gap:1.4rem;justify-content:flex-end;margin-top:.8rem;color:var(--muted)}.totalbox b{color:var(--text)}
.aibox{background:var(--panel2);border:1px solid var(--border);border-left:3px solid var(--violet);border-radius:10px;padding:.9rem;margin-bottom:1.1rem;display:flex;flex-direction:column;gap:.5rem}
.aibox b{font-size:.9rem}.aibox textarea{width:100%}.aibox button{align-self:flex-start}
.log{margin-top:1rem;background:#06070D;border:1px solid var(--border);border-radius:8px;padding:.7rem;font-size:.82rem;white-space:pre-wrap}

/* Branding-kaarten */
.brandcard .brand__logo{font-size:1.5rem;display:block;margin-bottom:.3rem}
.swatches{display:flex;gap:.4rem;margin:.6rem 0}.swatches span{width:22px;height:22px;border-radius:6px;border:1px solid var(--border2)}
.btwcard h2{color:var(--blue)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:60;padding:1rem}
.modal__card{background:var(--panel);border:1px solid var(--border2);border-radius:16px;padding:1.6rem;width:100%;max-width:440px;max-height:90vh;overflow:auto}
.modal__card h3{margin:0 0 1rem}.modal__btns{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.6rem}

/* Login */
.loginpage{display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:1.5rem;position:relative;overflow:hidden}
.login-glow{position:absolute;width:min(620px,120vw);height:620px;top:-220px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(46,123,255,.2),rgba(110,31,240,.1) 45%,transparent 65%);filter:blur(30px)}
.loginbox{position:relative;width:100%;max-width:380px;background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:2.2rem;display:flex;flex-direction:column;gap:.6rem;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.loginbox .brand{margin-bottom:.6rem}.alert{background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.3);color:#FF9B9B;padding:.6rem .9rem;border-radius:9px;margin:0}

@media(max-width:900px){.grid2,.grid3,.stats,.row3{grid-template-columns:1fr 1fr}}
@media(max-width:720px){
  .navtoggle{display:block}
  .side{transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .side.open{transform:translateX(0)}
  .main{margin-left:0;padding:4.2rem 1.1rem 2rem}
  .grid2,.grid3,.stats,.row3{grid-template-columns:1fr}
  .addbar input,.addbar select{min-width:0;width:100%}
}