:root{
  --bg:#f4f6fb; --surface:#ffffff; --ink:#1e2433; --muted:#6b7488;
  --line:#e6e9f0; --line-strong:#d4d9e4;
  --primary:#2f6df6; --primary-d:#1f55d6; --primary-soft:#e8f0ff;
  --danger:#e5484d; --danger-soft:#fdecec;
  --green:#16a34a; --amber:#d97706; --slate:#64748b;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow-lg:0 10px 30px rgba(16,24,40,.16);
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.4rem; margin:0}
h2{font-size:1.05rem; margin:0 0 .75rem}
h3{font-size:.95rem; margin:1rem 0 .35rem}

/* ---- Layout ---- */
.app{display:flex; min-height:100vh}
.sidebar{
  width:230px; background:#0f1629; color:#c7cede; display:flex; flex-direction:column;
  padding:1.1rem .8rem; position:sticky; top:0; height:100vh; flex-shrink:0;
}
.brand{font-weight:700; font-size:1.15rem; color:#fff; display:flex; align-items:center; gap:.55rem; padding:.2rem .4rem 1rem}
.brand-mark{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg,#2f6df6,#7c3aed); color:#fff; font-weight:800; font-size:.9rem;
}
.sidebar nav{display:flex; flex-direction:column; gap:2px; flex:1}
.nav-link{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:var(--radius-sm);
  color:#aeb6c9; font-weight:500;
}
.nav-link:hover{background:rgba(255,255,255,.06); color:#fff; text-decoration:none}
.nav-link.active{background:var(--primary); color:#fff}
.nav-ico{width:18px; text-align:center; opacity:.9}
.sidebar-foot{display:flex; align-items:center; gap:.5rem; border-top:1px solid rgba(255,255,255,.08); padding-top:.8rem}
.me{flex:1; min-width:0}
.me-name{color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.me-role{font-size:.75rem; color:#8b94a9}
.logout{color:#aeb6c9; font-size:1.2rem; padding:.2rem .4rem; border-radius:6px}
.logout:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}

.content{flex:1; padding:1.6rem 2rem; min-width:0; max-width:100%}
.page-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; flex-wrap:wrap}
.page-actions,.toolbar{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.week-label{font-weight:600; padding:0 .4rem; color:var(--muted)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; border:1px solid transparent;
  background:var(--surface); color:var(--ink); padding:.5rem .9rem; border-radius:var(--radius-sm);
  font-size:.875rem; font-weight:600; line-height:1; transition:.12s; white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-d)}
.btn-ghost{background:var(--surface); border-color:var(--line-strong); color:var(--ink)}
.btn-ghost:hover{background:#f6f8fc}
.btn-danger{background:var(--danger-soft); color:var(--danger); border-color:transparent}
.btn-danger:hover{background:#f9dada}
.btn-sm{padding:.3rem .55rem; font-size:.8rem}
.btn-block{width:100%; justify-content:center; padding:.65rem}

/* ---- Cards / tables ---- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow); margin-bottom:1.2rem}
.card.no-pad{padding:0; overflow:hidden}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-items:start}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}

.table{width:100%; border-collapse:collapse}
.table th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:.7rem 1rem; border-bottom:1px solid var(--line); background:#fafbfe}
.table td{padding:.7rem 1rem; border-bottom:1px solid var(--line)}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:#fafbfe}
.table .num{text-align:right}
.table-tight td,.table-tight th{padding:.5rem .6rem}
.is-inactive{opacity:.55}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.3rem}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem; box-shadow:var(--shadow)}
.stat-val{font-size:1.7rem; font-weight:700; letter-spacing:-.02em}
.stat-lbl{color:var(--muted); font-size:.82rem; margin-top:.2rem}

.list{list-style:none; margin:0; padding:0}
.list li{display:flex; align-items:center; gap:.5rem; padding:.55rem 0; border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:none}
.right{margin-left:auto}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; vertical-align:middle; margin-right:.15rem}
.tag{background:#eef1f7; color:var(--muted); border-radius:6px; padding:.1rem .45rem; font-size:.75rem}
.muted{color:var(--muted)}
.small{font-size:.8rem}
.link-strong{color:var(--ink); font-weight:600}
.link-strong:hover{color:var(--primary)}
.meta-list{display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; margin:0}
.meta-list dt{color:var(--muted)}
.meta-list dd{margin:0; font-weight:500}

/* ---- Status badges ---- */
.status{display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.75rem; font-weight:600}
.status-active,.status-doing{background:#e7f6ee; color:#15803d}
.status-planned,.status-todo{background:#eef1f7; color:#475569}
.status-on_hold{background:#fef3e2; color:#b45309}
.status-done{background:#e8f0ff; color:#1f55d6}
.status-cancelled{background:#fdecec; color:#b91c1c}
.status-admin{background:#efe7fd; color:#6d28d9}
.status-planner{background:#e8f0ff; color:#1f55d6}
.status-employee{background:#eef1f7; color:#475569}

.progress{height:8px; background:var(--line); border-radius:999px; overflow:hidden; margin:.6rem 0 .2rem}
.progress-bar{height:100%; background:var(--primary)}
.progress-bar.over{background:var(--danger)}

/* ---- Forms ---- */
.form{display:flex; flex-direction:column; gap:.85rem; max-width:480px}
.form-wide{max-width:760px}
.form label{display:flex; flex-direction:column; gap:.3rem; font-weight:600; font-size:.82rem; color:var(--ink)}
.form label.checkbox{flex-direction:row; align-items:center; gap:.5rem}
.form-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.85rem}
.form-row label{min-width:0}
@media(max-width:680px){.form-row{grid-template-columns:1fr}}
input,select,textarea{
  font:inherit; padding:.55rem .65rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:#fff; color:var(--ink); width:100%; font-weight:400;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)}
input[type=color]{padding:.2rem; height:42px}
input[type=checkbox]{width:auto}
.spacer{flex:1}

/* ---- Flash ---- */
.flash{padding:.7rem 1rem; border-radius:var(--radius-sm); margin-bottom:1rem; font-weight:500}
.flash-success{background:#e7f6ee; color:#15803d}
.flash-error{background:var(--danger-soft); color:#b91c1c}
.flash-info{background:var(--primary-soft); color:var(--primary-d)}

/* ---- Empty states ---- */
.empty{background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--radius); padding:2.5rem; text-align:center; color:var(--muted)}
.empty.big{margin-top:4rem}
.empty.big h1{font-size:3rem; margin-bottom:.3rem}

/* ---- Login ---- */
body.centered{display:grid; place-items:center; min-height:100vh; background:linear-gradient(135deg,#eef2fb,#e9ecf6)}
.login-card{background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); padding:2.2rem; width:360px; max-width:92vw}
.login-brand{font-size:1.4rem; font-weight:700; display:flex; align-items:center; gap:.55rem; justify-content:center}
.login-sub{color:var(--muted); text-align:center; margin:.3rem 0 1.4rem}

/* ---- Planboard ---- */
.planboard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:auto; box-shadow:var(--shadow)}
.planboard-head,.pb-row{display:grid; grid-template-columns:190px repeat(7,minmax(150px,1fr))}
.planboard-head{position:sticky; top:0; z-index:5; background:#fafbfe; border-bottom:1px solid var(--line)}
.pb-corner{padding:.7rem .9rem; font-weight:700; color:var(--muted); font-size:.8rem; border-right:1px solid var(--line)}
.pb-day{padding:.55rem .7rem; text-align:center; border-right:1px solid var(--line); display:flex; flex-direction:column}
.pb-day:last-child{border-right:none}
.pb-day.weekend{background:#f3f4f8}
.pb-day.today{background:var(--primary-soft)}
.pb-day-name{font-weight:700}
.pb-day-num{font-size:.75rem; color:var(--muted)}
.pb-row{border-bottom:1px solid var(--line)}
.pb-row:last-child{border-bottom:none}
.pb-user{padding:.7rem .9rem; border-right:1px solid var(--line); display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; position:sticky; left:0; background:var(--surface); z-index:2}
.pb-user-name{font-weight:600; flex:1; min-width:0}
.pb-user-cap{font-size:.7rem; color:var(--muted); width:100%}
.pb-cell{border-right:1px solid var(--line); padding:.4rem; min-height:90px; position:relative; display:flex; flex-direction:column; gap:.35rem}
.pb-cell:last-child{border-right:none}
.pb-cell.weekend{background:#fafbfd}
.pb-cell.today{background:#f5f8ff}
.pb-cell.drag-over{background:var(--primary-soft); box-shadow:inset 0 0 0 2px var(--primary)}
.pb-item{
  background:#fff; border-left:4px solid var(--c,#64748b); border-radius:7px; padding:.4rem .5rem;
  box-shadow:var(--shadow); cursor:pointer; font-size:.8rem; position:relative;
}
.pb-item:hover{box-shadow:var(--shadow-lg)}
.pb-item.dragging{opacity:.45}
.pb-item-title{display:block; font-weight:600; line-height:1.25}
.pb-item-meta{display:block; color:var(--muted); font-size:.72rem; margin-top:.1rem}
.pb-badge{display:inline-block; margin-top:.2rem; font-size:.65rem; padding:.05rem .35rem; border-radius:4px; font-weight:600}
.pb-confirmed{background:#e7f6ee; color:#15803d}
.pb-done{background:#e8f0ff; color:#1f55d6}
.pb-absent{background:repeating-linear-gradient(45deg,#eef1f7,#eef1f7 6px,#e4e8f1 6px,#e4e8f1 12px); color:var(--muted); border-radius:6px; padding:.3rem; text-align:center; font-size:.72rem; font-weight:600}
.pb-cap{margin-top:auto; font-size:.66rem; color:var(--muted); position:relative}
.pb-cap-bar{height:3px; background:var(--green); border-radius:2px; margin-bottom:.15rem; max-width:100%}
.pb-cap.over .pb-cap-bar{background:var(--danger)}
.pb-cap.over span{color:var(--danger); font-weight:700}
.pb-add{position:absolute; top:.3rem; right:.3rem; width:20px; height:20px; border-radius:6px; border:none; background:#eef1f7; color:var(--muted); cursor:pointer; opacity:0; transition:.12s; line-height:1; font-size:.95rem}
.pb-cell:hover .pb-add{opacity:1}
.pb-add:hover{background:var(--primary); color:#fff}

/* ---- Modal ---- */
.modal-overlay{position:fixed; inset:0; background:rgba(15,22,41,.45); display:grid; place-items:center; z-index:50; padding:1rem}
.modal-overlay[hidden]{display:none}
.modal{background:#fff; border-radius:14px; box-shadow:var(--shadow-lg); width:520px; max-width:96vw; max-height:92vh; overflow:auto}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line)}
.modal-head h2{margin:0}
.modal-close{background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--muted); line-height:1}
.modal form{padding:1.3rem; max-width:none}
.modal-foot{display:flex; align-items:center; gap:.5rem; margin-top:.4rem}

/* ---- Gantt ---- */
.gantt{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto; box-shadow:var(--shadow)}
.gantt-head,.gantt-row{display:flex; min-width:760px}
.gantt-head{position:sticky; top:0; background:#fafbfe; border-bottom:1px solid var(--line); z-index:4}
.gantt-label-col{width:230px; flex-shrink:0; padding:.6rem .9rem; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:.1rem; background:inherit}
.gantt-row .gantt-label-col{background:var(--surface)}
.gantt-timeline{flex:1; position:relative; display:flex; min-height:42px}
.gantt-week{flex:1; text-align:center; padding:.5rem .2rem; border-right:1px solid var(--line); font-size:.75rem}
.gantt-week span{display:block; font-weight:700}
.gantt-week small{color:var(--muted)}
.gantt-grid-col{flex:1; border-right:1px solid var(--line)}
.gantt-row{border-bottom:1px solid var(--line)}
.gantt-row.project{background:#fcfdff}
.gantt-row.task .gantt-label-col{padding-left:1.6rem; color:var(--muted); font-size:.85rem}
.task-bullet{margin-right:.3rem}
.gantt-bar{position:absolute; top:50%; transform:translateY(-50%); height:22px; border-radius:6px; color:#fff; font-size:.72rem; font-weight:600; padding:0 .5rem; display:flex; align-items:center; overflow:hidden; white-space:nowrap; box-shadow:var(--shadow)}
.gantt-bar.task-bar{height:12px; background:var(--slate); opacity:.8}

/* ---- White-label logo's ---- */
.brand-logo{max-height:38px; max-width:170px; object-fit:contain}
.login-logo{max-height:54px; max-width:220px; object-fit:contain}
.topbar-logo{max-height:26px; max-width:120px; object-fit:contain; vertical-align:middle}

/* ---- Instellingen ---- */
.color-field{display:flex; align-items:center; gap:.6rem}
.color-field input[type=color]{width:54px}
.color-hex{max-width:120px; font-family:ui-monospace,monospace; background:#f6f8fc}
.logo-preview{display:inline-block; padding:.6rem .9rem; background:#0f1629; border-radius:8px; margin:.2rem 0}
.logo-preview img{max-height:46px; max-width:200px; object-fit:contain; display:block}

/* ---- Topbar (mobiel) ---- */
.topbar{display:none; align-items:center; gap:.7rem; background:#0f1629; color:#fff; padding:.6rem .9rem; position:sticky; top:0; z-index:30}
.topbar-brand{font-weight:700; display:flex; align-items:center; gap:.5rem}
.nav-toggle-btn{cursor:pointer; font-size:1.4rem; line-height:1; padding:.1rem .4rem; border-radius:6px; user-select:none}
.nav-toggle-btn:hover{background:rgba(255,255,255,.1)}

/* ---- Toasts ---- */
.toast-wrap{position:fixed; bottom:1.1rem; right:1.1rem; display:flex; flex-direction:column; gap:.5rem; z-index:100; max-width:min(92vw,360px)}
.toast{background:#0f1629; color:#fff; padding:.7rem 1rem; border-radius:10px; box-shadow:var(--shadow-lg); font-weight:500; opacity:0; transform:translateY(10px); transition:.22s}
.toast.show{opacity:1; transform:none}
.toast-error{background:var(--danger)}
.toast-success{background:var(--green)}

/* ---- Drie kolommen (dashboard) ---- */
.three-col{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; align-items:start; margin-bottom:1.2rem}
@media(max-width:1000px){.three-col{grid-template-columns:1fr}}

/* ---- Inline zoek/select in toolbar ---- */
.inline-search{display:inline-flex; margin:0}
.inline-search input,.inline-search select{height:38px}
.btn-active{background:var(--primary-soft); color:var(--primary-d); border-color:var(--primary-soft)}

/* ---- Tabs ---- */
.tabs{display:flex; gap:.3rem; border-bottom:1px solid var(--line); margin-bottom:1.2rem}
.tab{padding:.6rem 1rem; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; margin-bottom:-1px}
.tab:hover{color:var(--ink); text-decoration:none}
.tab.active{color:var(--primary); border-bottom-color:var(--primary)}

/* ---- Kanban (deals) ---- */
.kanban{display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem; align-items:flex-start}
.kanban-col{flex:0 0 270px; background:#f1f3f8; border-radius:var(--radius); display:flex; flex-direction:column; max-height:calc(100vh - 200px)}
.kanban-col.is-won{background:#eaf7ef}
.kanban-col.is-lost{background:#fbecec}
.kanban-col-head{padding:.7rem .85rem; display:flex; flex-direction:column; gap:.15rem; border-bottom:1px solid var(--line); position:sticky; top:0}
.kanban-col-name{font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em}
.kanban-col-sum{color:var(--muted); font-size:.8rem}
.kanban-list{padding:.6rem; display:flex; flex-direction:column; gap:.6rem; overflow-y:auto; min-height:60px}
.kanban-col.drag-over .kanban-list{outline:2px dashed var(--primary); outline-offset:-6px; border-radius:8px}
.deal-card{background:#fff; border-radius:8px; padding:.6rem .7rem; box-shadow:var(--shadow); cursor:pointer; border-left:3px solid var(--primary)}
.deal-card:hover{box-shadow:var(--shadow-lg)}
.deal-card.dragging{opacity:.45}
.deal-title{font-weight:600; line-height:1.3}
.deal-foot{display:flex; justify-content:space-between; align-items:center; margin-top:.4rem}
.deal-value{font-weight:700}
.deal-prob{font-size:.72rem; background:#eef1f7; color:var(--muted); border-radius:6px; padding:.1rem .4rem}

/* ---- Forecast ---- */
.forecast{display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem; align-items:flex-start}
.forecast-col{flex:0 0 230px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.forecast-head{padding:.8rem .9rem; border-bottom:1px solid var(--line); text-align:center}
.forecast-month{font-weight:700}
.forecast-amount{font-size:1.2rem; font-weight:700; color:var(--primary-d); margin-top:.2rem}
.forecast-deals{padding:.6rem; display:flex; flex-direction:column; gap:.5rem; min-height:80px}
.forecast-empty{text-align:center; padding:1.5rem .5rem}

/* ---- Activiteiten ---- */
.act-row.is-done .act-title-cell{text-decoration:line-through; color:var(--muted)}
.act-check{width:18px; height:18px; cursor:pointer}
.act-edit{cursor:pointer}

/* ---- Responsive ---- */
@media(max-width:820px){
  .topbar{display:flex}
  .app{flex-direction:column}
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; z-index:40; transform:translateX(-100%);
    transition:transform .2s ease; box-shadow:var(--shadow-lg);
  }
  .nav-toggle-cb:checked ~ .sidebar{transform:translateX(0)}
  .content{padding:1rem}
  .planboard-head,.pb-row{grid-template-columns:130px repeat(7,minmax(120px,1fr))}
}