:root{--bg0:#0b0d10;--bg1:#101419;--card:#121821cc;--text:#e7edf6;--muted:#9fb0c3;--accent:#7aa7ff;--danger:#ff6b6b;--shadow:0 12px 40px rgba(0,0,0,.45);--radius:18px;}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;color:var(--text);background:linear-gradient(180deg,var(--bg0),var(--bg1));}
body[data-theme="light"]{--bg0:#eef2f7;--bg1:#dfe7f1;--card:rgba(255,255,255,.84);--text:#142235;--muted:#5c7088;--accent:#2f6fff;--danger:#cc4d4d;--shadow:0 18px 36px rgba(31,45,61,.14);}
.bg{position:fixed;inset:0;pointer-events:none;opacity:.09;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:52px 52px;}
body[data-theme="light"] .bg{opacity:.28;background-image:linear-gradient(rgba(20,34,53,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,34,53,.05) 1px,transparent 1px);}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;padding:22px 18px;background:rgba(8,10,12,.72);border-right:1px solid rgba(255,255,255,.06);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:14px;transition:transform .22s ease,opacity .22s ease;}
body[data-theme="light"] .sidebar{background:rgba(248,251,255,.74);border-right-color:rgba(20,34,53,.10);}
.brand{
  font-weight:850;
  font-size:18px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-logo{width:34px;height:34px;object-fit:contain;display:block;filter:drop-shadow(0 0 8px rgba(255,106,42,.22));}
.brand-name{
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
  color:#eef3fb;
  text-transform:uppercase;
}
body[data-theme="light"] .brand{border-color:rgba(20,34,53,.10);background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(236,243,251,.76));box-shadow:inset 0 1px 0 rgba(255,255,255,.95);}
body[data-theme="light"] .brand-name{color:#13243a}
.nav{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.nav a{position:relative;color:var(--text);text-decoration:none;padding:10px 10px 10px 14px;border-radius:14px;border:1px solid transparent;opacity:.92;transition:background .18s ease,border-color .18s ease,opacity .18s ease,padding-left .18s ease;}
.nav a:hover{border-color:rgba(122,167,255,.25);background:rgba(122,167,255,.07);}
.nav a.active{
  font-weight:800;
  opacity:1;
  background:linear-gradient(90deg, rgba(122,167,255,.24), rgba(122,167,255,.09));
  border-color:rgba(122,167,255,.50);
  padding-left:16px;
}
.sidebar-footer{margin-top:auto;color:var(--muted);font-size:10px;line-height:1.2;white-space:nowrap;padding:8px 4px;}
.dashboard-sidebar-extra{display:none}
.instellingen-content{
  display:grid;
  gap:16px;
  min-width:0;
}
.instellingen-section{
  scroll-margin-top:24px;
}
.main{margin-left:240px;min-height:100vh;display:flex;flex-direction:column;transition:margin-left .22s ease;}
.main-full{margin-left:0;min-height:100vh;display:flex;flex-direction:column;}
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(8,10,12,.40);backdrop-filter:blur(10px);}
body[data-theme="light"] .topbar{border-bottom-color:rgba(20,34,53,.10);background:rgba(246,249,253,.72);}
.sidebar-toggle{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:8px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:700;
}
body[data-theme="light"] .sidebar-toggle{border-color:rgba(20,34,53,.10);background:rgba(255,255,255,.72);}
.topbar .user-menu{margin-left:auto}
body.sidebar-collapsed .sidebar{transform:translateX(-100%);opacity:0;pointer-events:none}
body.sidebar-collapsed .main{margin-left:0}
.user-menu{position:relative}
.user-menu summary{list-style:none}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu-trigger{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  user-select:none;
}
body[data-theme="light"] .user-menu-trigger{border-color:rgba(20,34,53,.10);background:rgba(255,255,255,.72);}
.user-menu[open] .user-menu-trigger{
  background:rgba(122,167,255,.10);
  border-color:rgba(122,167,255,.30);
}
.user-avatar{
  width:30px;
  height:30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  color:#d9e6fb;
  background:rgba(122,167,255,.20);
  border:1px solid rgba(122,167,255,.30);
}
.user-meta{display:flex;flex-direction:column;line-height:1.1;min-width:90px}
.user-name{font-size:12px;font-weight:700;color:#e6edf8}
.user-role{font-size:11px;color:#9fb0c3;text-transform:capitalize}
.user-caret{font-size:11px;color:#9fb0c3}
.user-menu-panel{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:220px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(12,16,22,.96);
  box-shadow:0 14px 28px rgba(0,0,0,.36);
  padding:10px;
  z-index:30;
}
body[data-theme="light"] .user-name{color:#142235}
body[data-theme="light"] .user-role,body[data-theme="light"] .user-caret{color:#5c7088}
body[data-theme="light"] .user-menu-panel{border-color:rgba(20,34,53,.12);background:rgba(255,255,255,.96);box-shadow:0 18px 34px rgba(31,45,61,.16);}
.user-menu-label{
  font-size:12px;
  color:#b6c5da;
  margin:0 0 8px;
  padding:0 2px;
}
body[data-theme="light"] .user-menu-label{color:#5c7088}
.user-menu-link{
  width:100%;
  justify-content:center;
  margin-bottom:8px;
}
.user-logout-btn{width:100%;justify-content:center}
.content{padding:22px 18px 42px;}
.center{display:flex;justify-content:center;align-items:flex-start;padding-top:40px;}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);border-radius:var(--radius);padding:22px;}
.h1{font-size:28px;margin:0 0 10px}.h2{font-size:18px;margin:0 0 10px}.h3{font-size:14px;margin:0 0 8px;color:var(--muted)}
.p{color:var(--muted);margin:0 0 16px;line-height:1.55}.muted{color:var(--muted);font-size:12px}
.auth-page{
  --login-blue:#2f70ff;
  --login-violet:#6953ff;
  --login-orange:#ff7a1a;
  background:
    radial-gradient(circle at 50% 0%, rgba(47,112,255,.20), transparent 30%),
    radial-gradient(circle at 50% 70%, rgba(255,122,26,.12), transparent 28%),
    linear-gradient(125deg,#050b13 0%,#08111f 48%,#050a11 100%);
}
.auth-page .bg{
  opacity:.18;
  background:
    radial-gradient(circle at 50% 13%, rgba(59,130,255,.40), transparent 3%),
    radial-gradient(circle at 38% 63%, rgba(255,122,26,.18), transparent 14%),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:auto,auto,58px 58px,58px 58px;
}
.auth-page .topbar{display:none}
.auth-page .content{padding:0}
.login-shell{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:48px;
  padding:72px 24px 82px;
  overflow:hidden;
}
.auth-shell-compact{gap:0}
.login-shell::before,
.login-shell::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.login-shell::before{
  width:220px;
  height:110px;
  left:18%;
  top:59%;
  border-radius:50%;
  border:1px solid rgba(255,122,26,.13);
  box-shadow:0 0 0 18px rgba(255,122,26,.025),0 0 0 36px rgba(255,122,26,.018),0 0 0 54px rgba(47,112,255,.025);
  transform:rotate(-8deg);
}
.login-shell::after{
  width:1px;
  height:82%;
  right:18%;
  top:8%;
  background:linear-gradient(180deg, transparent, rgba(47,112,255,.13), transparent);
  filter:blur(.5px);
}
.login-card-wrap{
  position:relative;
  z-index:1;
  width:min(100%, 580px);
}
.login-card-wrap::before,
.login-card-wrap::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:-1;
}
.login-card-wrap::before{
  top:-1px;
  width:58%;
  height:2px;
  background:linear-gradient(90deg, transparent, #3b82ff, transparent);
  box-shadow:0 0 22px 6px rgba(47,112,255,.72);
}
.login-card-wrap::after{
  bottom:-1px;
  width:74%;
  height:2px;
  background:linear-gradient(90deg, transparent, #ff7a1a 20%, #ffb163 50%, #ff7a1a 80%, transparent);
  box-shadow:0 0 24px 8px rgba(255,122,26,.40);
}
.login-card{
  width:100%;
  max-width:none;
  position:relative;
  padding:60px 72px 58px;
  border-radius:24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.025) 48%, rgba(255,255,255,.035)),
    rgba(12,18,29,.76);
  border:1px solid rgba(147,169,206,.22);
  box-shadow:0 32px 80px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.login-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 0%, rgba(47,112,255,.22), transparent 36%);
  pointer-events:none;
}
.login-brand{position:relative;display:flex;align-items:center;gap:18px}
.login-logo-img{
  width:56px;
  height:56px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 12px rgba(255,106,42,.36));
}
.login-title{
  margin:0;
  font-size:36px;
  font-weight:800;
  letter-spacing:0;
  color:#f4f7fb;
}
.login-subtext{
  position:relative;
  color:#9aa8bc;
  margin:20px 0 34px;
  line-height:1.65;
  font-size:16px;
}
.login-error{
  position:relative;
  margin-bottom:20px;
  border-color:rgba(255,107,107,.42);
  background:rgba(255,107,107,.10);
  color:#ffd7d7;
}
.login-error strong{display:inline-block;margin-right:6px}
.login-label{
  position:relative;
  color:#e6edf7;
  font-size:12px;
  font-weight:750;
  margin:18px 0 9px;
}
.login-field{
  position:relative;
  margin-bottom:18px;
}
.login-field-icon{
  position:absolute;
  left:20px;
  top:50%;
  width:22px;
  height:22px;
  color:#a4afbe;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:2;
}
.login-field-icon svg,
.password-toggle svg,
.login-submit-arrow svg,
.login-benefit-icon svg{
  width:100%;
  height:100%;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.login-input{
  min-height:54px;
  padding:0 18px 0 68px;
  border-radius:9px;
  background:rgba(2,7,13,.58);
  border:1px solid rgba(148,163,184,.25);
  color:#eef4ff;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-field .login-input{
  padding-left:68px;
}
.login-input::placeholder{color:#7f8b9c}
.login-input:hover{background:rgba(2,7,13,.72);border-color:rgba(148,163,184,.38)}
.login-input:focus{
  background:rgba(2,7,13,.82);
  border-color:rgba(84,139,255,.88);
  box-shadow:0 0 0 3px rgba(47,112,255,.20), 0 10px 24px rgba(0,0,0,.22);
}
.login-field .login-input[placeholder]:not(:placeholder-shown),
.login-field .login-input:-webkit-autofill{
  background:#e8f1ff;
  color:#111827;
  -webkit-text-fill-color:#111827;
  box-shadow:0 0 0 1000px #e8f1ff inset;
  border-color:rgba(226,236,250,.88);
}
.login-field:has(.login-input[placeholder]:not(:placeholder-shown)) .login-field-icon,
.login-field:has(.login-input:-webkit-autofill) .login-field-icon{
  color:#96a3b4;
}
.password-wrap{position:relative}
.login-field .password-input{
  padding-left:68px;
  padding-right:58px;
}
.login-card form .input,
.login-card form .password-wrap{margin-bottom:0}
.login-help-row{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin:6px 0 24px;
  min-height:18px;
}
.auth-help-bottom{
  justify-content:center;
  margin:20px 0 0;
}
.login-help-link{
  font-size:12px;
  color:#9db8ff;
  line-height:1;
}
.login-actions{margin-top:0}
.login-submit{
  position:relative;
  width:100%;
  min-height:58px;
  padding:0 56px;
  border-radius:11px;
  font-weight:800;
  background:linear-gradient(90deg,var(--login-blue),var(--login-violet));
  border-color:rgba(118,139,255,.74);
  box-shadow:0 12px 28px rgba(47,112,255,.32), 0 0 22px rgba(105,83,255,.20);
  transition:filter .18s ease, transform .18s ease, box-shadow .18s ease;
  gap:10px;
}
.login-submit:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(47,112,255,.40), 0 0 28px rgba(105,83,255,.26);
}
.login-submit:disabled{cursor:wait;filter:none;transform:none}
.login-submit-arrow{
  position:absolute;
  right:20px;
  top:50%;
  width:22px;
  height:22px;
  transform:translateY(-50%);
}
.login-spinner{
  width:14px;
  height:14px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  display:none;
  animation:spin .8s linear infinite;
}
.login-submit.is-loading .login-spinner{
  display:inline-block;
}
.login-submit.is-loading .login-submit-label{
  opacity:.92;
}
.password-toggle{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  color:var(--text);
  opacity:.75;
  cursor:pointer;
  width:22px;
  height:22px;
  line-height:1;
  padding:0;
  z-index:3;
}
.password-toggle:hover{opacity:1}
@keyframes spin{
  to{transform:rotate(360deg)}
}
.login-dot-grid{
  position:absolute;
  width:96px;
  height:96px;
  z-index:0;
  opacity:.95;
  background-image:radial-gradient(circle, var(--login-orange) 1.5px, transparent 1.7px);
  background-size:20px 20px;
  filter:drop-shadow(0 0 6px rgba(255,122,26,.35));
}
.login-dot-grid-left{left:18%;top:15%}
.login-dot-grid-right{right:19%;top:58%}
.login-benefits{
  position:relative;
  z-index:1;
  width:min(100%, 700px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:38px;
}
.login-benefit{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:14px;
  align-items:start;
  min-width:0;
}
.login-benefit-icon{
  width:24px;
  height:24px;
  margin-top:2px;
}
.login-benefit-blue{color:#4776ff}
.login-benefit-orange{color:#ff8a1d}
.login-benefit-green{color:#00b89c}
.login-benefit strong{
  display:block;
  color:#eef4ff;
  font-size:13px;
  line-height:1.2;
  margin-bottom:8px;
}
.login-benefit span:not(.login-benefit-icon){
  display:block;
  color:#8f9bad;
  font-size:12px;
  line-height:1.65;
}
.login-footer{
  margin:0;
  font-size:12px;
  color:var(--muted);
  opacity:.86;
  text-align:center;
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  white-space:nowrap;
  z-index:1;
}
.login-footer span{
  display:inline-block;
  width:12px;
  height:12px;
  margin-right:8px;
  border:1px solid #8ea3c5;
  border-radius:4px;
  transform:rotate(45deg) translateY(1px);
}
@media(max-width:820px){
  .login-shell{justify-content:flex-start;gap:28px;padding:34px 16px 72px}
  .login-card{padding:34px 22px;border-radius:20px}
  .login-title{font-size:30px}
  .login-subtext{font-size:14px;margin-bottom:26px}
  .login-benefits{grid-template-columns:1fr;gap:16px;width:min(100%, 520px)}
  .login-dot-grid{display:none}
  .login-shell::before,.login-shell::after{display:none}
  .login-footer{font-size:11px;bottom:18px;width:calc(100% - 24px)}
}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px;}
.toolbar{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
.toolbar-equal > .btn,
.toolbar-equal > form > .btn{
  min-width:140px;
  min-height:44px;
}
.grid{display:grid;gap:14px}.grid-2{grid-template-columns:1fr}@media(min-width:920px){.grid-2{grid-template-columns:1fr 1fr}}
.label{display:block;margin:10px 0 6px;color:var(--muted);font-size:13px}
.input,.textarea{width:100%;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(10,12,16,.65);color:var(--text);outline:none;}
.textarea{resize:vertical}
.form-pair{display:grid;gap:14px;grid-template-columns:1fr}
.form-stack{display:grid;gap:8px}
.form-choice{
  display:flex;
  gap:12px;
  align-items:flex-start;
  min-height:86px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.form-choice input[type="checkbox"]{
  margin-top:4px;
  width:16px;
  height:16px;
  accent-color:#8eb6ff;
}
.form-choice-title{
  font-size:14px;
  font-weight:800;
  color:#eef4ff;
  line-height:1.2;
}
.form-choice strong{
  font-size:14px;
  font-weight:800;
  color:#eef4ff;
  line-height:1.2;
}
.form-choice-copy{
  color:#9fb0c3;
  font-size:12px;
  line-height:1.45;
  margin-top:4px;
}
.form-choice .muted{
  display:block;
  margin-top:4px;
  color:#9fb0c3;
  font-size:12px;
  line-height:1.45;
}
.form-field-card{
  min-height:86px;
  padding:14px 16px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.form-field-card .label{margin-top:0}
.form-field-card .input{background:rgba(7,10,15,.78)}
@media(min-width:920px){
  .form-pair{grid-template-columns:1.15fr .85fr}
}
.row{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:14px}
.btn{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:var(--text);padding:10px 14px;border-radius:14px;cursor:pointer;font-weight:650;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.btn-primary{background:linear-gradient(135deg, rgba(122,167,255,.25), rgba(122,167,255,.08));border-color:rgba(122,167,255,.45);}
.btn-ghost{background:transparent}.btn-danger{background:rgba(255,107,107,.10);border-color:rgba(255,107,107,.35);} .btn-small{padding:6px 10px;border-radius:12px;font-size:12px}
body[data-theme="light"] .btn{border-color:rgba(20,34,53,.12);background:rgba(255,255,255,.75);}
body[data-theme="light"] .btn-ghost{background:transparent}
.confirm-modal-open{overflow:hidden}
.confirm-modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.confirm-modal[hidden]{display:none}
.confirm-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,8,14,.66);
  backdrop-filter:blur(8px);
}
.confirm-modal__dialog{
  position:relative;
  width:min(100%, 430px);
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(18,24,33,.98), rgba(10,14,20,.98));
  box-shadow:0 24px 60px rgba(0,0,0,.42);
}
.confirm-modal__eyebrow{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ffb0b0;
}
.confirm-modal__title{
  margin:10px 0 8px;
  font-size:24px;
  line-height:1.15;
}
.confirm-modal__message{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}
.confirm-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px;
  flex-wrap:wrap;
}
body[data-theme="light"] .confirm-modal__dialog{
  border-color:rgba(20,34,53,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,246,252,.98));
  box-shadow:0 26px 54px rgba(31,45,61,.20);
}
body[data-theme="light"] .confirm-modal__eyebrow{color:#c94c4c}
.link{color:var(--accent);text-decoration:none}.link:hover{text-decoration:underline}
.alert{border-radius:14px;padding:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);margin:0 0 12px;}
.alert-danger{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.08)}
body[data-theme="light"] .alert{border-color:rgba(20,34,53,.10);background:rgba(255,255,255,.7);}
.table{width:100%;border-collapse:collapse;font-size:14px;}
.table th,.table td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.06);}
.table th{color:var(--muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em;text-align:left;}
.stat{padding:14px;border:1px solid rgba(255,255,255,.06);border-radius:18px;background:rgba(255,255,255,.03);}
.stat-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.stat-value{font-size:22px;font-weight:850;margin-top:6px}
.kpi-grid{margin-bottom:6px;gap:10px}
@media(min-width:920px){.kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.stat-kpi{
  padding:12px 14px;
  background:rgba(255,255,255,.06);
  border-color:rgba(122,167,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.stat-kpi .stat-label{
  font-size:12px;
  color:#9fb2cc;
}
.stat-kpi .stat-value{
  font-size:40px;
  font-weight:900;
  line-height:1.05;
  margin-top:4px;
  color:#ecf3ff;
  text-shadow:0 0 14px rgba(255,255,255,.08);
}
.stat-kpi-klanten .stat-value{color:#b9d3ff;text-shadow:0 0 14px rgba(122,167,255,.18);}
.stat-kpi-producten .stat-value{color:#ecf3ff;}
.stat-kpi-afspraken .stat-value{color:#bfe7cd;text-shadow:0 0 14px rgba(111,210,152,.18);}
.klanten-list-card{display:grid;gap:12px}
.klanten-controls{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:760px){.klanten-controls{grid-template-columns:1fr 240px;align-items:end;}}
.entry-modal-open{overflow:hidden}
.entry-modal{
  position:fixed;
  inset:0;
  z-index:220;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.entry-modal[hidden]{display:none}
.entry-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,8,14,.62);
  backdrop-filter:blur(8px);
}
.entry-modal__dialog{
  position:relative;
  width:min(100%, 680px);
  max-height:min(100vh - 40px, 920px);
  overflow:auto;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(18,24,33,.98), rgba(10,14,20,.98));
  box-shadow:0 24px 60px rgba(0,0,0,.42);
}
.entry-modal__eyebrow{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#a9c0ff;
}
.entry-modal__title{margin:8px 0 0}
.entry-modal__intro{margin:6px 0 0}
.entry-modal__form{margin-top:8px}
.entry-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}
body[data-theme="light"] .entry-modal__dialog{
  border-color:rgba(20,34,53,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,246,252,.98));
  box-shadow:0 26px 54px rgba(31,45,61,.20);
}
.info-grid{gap:16px}
.info-field{
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}
.info-label{
  color:#b7c7dc;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}
.info-value{
  color:#eef4ff;
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  word-break:break-word;
}
body[data-theme="light"] .info-field{border-color:rgba(20,34,53,.10);background:rgba(255,255,255,.64);}
body[data-theme="light"] .info-label{color:#5c7088}
body[data-theme="light"] .info-value{color:#142235}
.info-address-line + .info-address-line{margin-top:2px}
.auto-card{
  background:#111827;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(122,167,255,.06),
    0 10px 28px rgba(0,0,0,.32);
}
.auto-card .h2{margin-bottom:4px}
.auto-card .muted{color:#9db0c9}
.auto-actions{
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  justify-content:flex-start;
  gap:8px;
}
.auto-actions .btn{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.13);
}
.auto-actions .btn-danger{
  background:rgba(255,107,107,.12);
  border-color:rgba(255,107,107,.42);
}
.history-shell{display:grid;gap:14px;max-width:1420px;margin:0 auto;}
.history-topline{display:flex;justify-content:flex-start}
.history-back{min-height:36px}
.history-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  padding:18px 4px 0;
}
.history-title{margin:0;font-size:38px;line-height:1;font-weight:900;color:#f3f7ff;letter-spacing:0}
.history-subtitle{margin:8px 0 0;color:#9fb0c3;font-size:15px}
.history-status-pill{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 12px;
  border-radius:8px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}
.history-status-pill--klaar,.history-status-mini--klaar{color:#bff0cd;background:rgba(39,188,103,.15);border-color:rgba(39,188,103,.38)}
.history-status-pill--bezig,.history-status-mini--bezig{color:#ffe2a1;background:rgba(255,193,7,.15);border-color:rgba(255,193,7,.36)}
.history-status-pill--ingepland,.history-status-mini--ingepland{color:#cfe0ff;background:rgba(74,144,255,.16);border-color:rgba(74,144,255,.36)}
.history-status-pill--concept,.history-status-mini--concept{color:#ccd7e8;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.history-vehicle-card,.history-quick-card,.history-panel{
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(135deg, rgba(18,27,38,.92), rgba(10,16,24,.86));
  box-shadow:0 18px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  border-radius:12px;
}
.history-vehicle-card{
  display:grid;
  grid-template-columns:270px minmax(190px,1.2fr) repeat(4,minmax(130px,.55fr));
  gap:0;
  align-items:stretch;
  overflow:hidden;
}
.history-vehicle-media{
  min-height:134px;
  padding:14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.02)),
    radial-gradient(circle at 18% 20%, rgba(255,123,67,.38), transparent 34%),
    linear-gradient(135deg,#151b22,#05080d);
  display:flex;
  align-items:center;
  justify-content:center;
}
.history-vehicle-mark{
  width:92px;
  height:92px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  font-weight:900;
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.26);
  box-shadow:0 16px 30px rgba(0,0,0,.30);
}
.history-vehicle-main{padding:20px 24px;display:flex;flex-direction:column;justify-content:center}
.history-vehicle-main h2{margin:0;font-size:22px;line-height:1.18}
.history-vehicle-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;color:#c2d0e2}
.history-vehicle-meta span + span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 10px 2px 0;border-radius:99px;background:#6d7f93}
.history-active-dot{display:flex;align-items:center;gap:8px;margin-top:18px;color:#cfe0ee;font-size:13px}
.history-active-dot span{width:7px;height:7px;border-radius:999px;background:#2bd478;box-shadow:0 0 0 4px rgba(43,212,120,.10)}
.history-active-dot--aanwezig span{background:#2bd478;box-shadow:0 0 0 4px rgba(43,212,120,.12)}
.history-active-dot--afwezig span{background:#ff5d5d;box-shadow:0 0 0 4px rgba(255,93,93,.12)}
.history-spec{padding:20px 20px;border-left:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;justify-content:center;gap:8px}
.history-spec span{color:#9fb0c3;font-size:12px}
.history-spec strong{font-size:15px;color:#f0f5ff;word-break:break-word}
.history-quick-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:18px 22px;
}
.history-quick-icon{
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:700;
  color:#dff7e9;
  border:1px solid rgba(39,188,103,.34);
  background:rgba(39,188,103,.16);
}
.history-quick-card h2,.history-panel-head h2{margin:0;font-size:18px}
.history-quick-card p{margin:5px 0 0;color:#9fb0c3;font-size:13px}
.history-quick-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.history-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(360px,.95fr);gap:16px;align-items:start}
.history-panel{padding:18px}
.history-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.history-panel-actions{display:flex;gap:8px;align-items:center}
.history-filter{width:150px;padding:9px 12px;border-radius:10px;font-size:12px}
.history-workorders{display:grid;gap:10px}
.history-workorder{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) minmax(142px,.34fr);
  gap:14px;
  padding:16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
  box-shadow:inset 3px 0 0 rgba(255,255,255,.14);
}
.history-workorder--klaar{box-shadow:inset 3px 0 0 #24c879}
.history-workorder--ingepland{box-shadow:inset 3px 0 0 #3b91ff}
.history-workorder--bezig{box-shadow:inset 3px 0 0 #ffc107}
.history-workorder-icon{
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:4px;
  font-size:10px;
  font-weight:900;
  color:#dbe8ff;
  border:1px solid rgba(122,167,255,.26);
  background:rgba(122,167,255,.10);
}
.history-workorder-body h3,.history-timeline-item h3{margin:0;font-size:15px}
.history-workorder-body p,.history-timeline-item p{
  margin:5px 0 0;
  color:#aebed1;
  font-size:12px;
  line-height:1.45;
  white-space:pre-wrap;
}
.history-workorder-data{
  display:grid;
  grid-template-columns:1fr;
  align-content:start;
  gap:6px;
  padding-left:12px;
  border-left:1px solid rgba(255,255,255,.05);
}
.history-workorder-data span{font-size:12px;color:#9fb0c3}
.history-workorder-data strong{font-size:13px;color:#f1f6ff}
.history-status-mini{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:4px 8px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.12);
  font-size:12px;
}
.history-presence{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:2px;
  color:#aebdd0;
  font-size:10px;
  font-weight:800;
  line-height:1;
}
.history-presence span{
  width:7px;
  height:7px;
  display:inline-block;
  border-radius:999px;
}
.history-presence--aanwezig span{
  background:#2bd478;
  box-shadow:0 0 0 3px rgba(43,212,120,.12);
}
.history-presence--afwezig span{
  background:#ff5d5d;
  box-shadow:0 0 0 3px rgba(255,93,93,.12);
}
.history-done-box{
  display:grid;
  gap:4px;
  margin-top:10px;
  padding:10px 12px;
  border-radius:9px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#9fb0c3;
  font-size:12px;
}
.history-workorder-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.history-workorder-actions form{display:inline-flex}
.history-photos{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.history-photo-item{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.history-photo-item img{width:96px;height:96px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.14)}
.history-timeline{position:relative;display:grid;gap:0;padding-left:10px}
.history-timeline::before{content:"";position:absolute;left:23px;top:12px;bottom:12px;width:1px;background:rgba(122,167,255,.22)}
.history-timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:14px;
  padding:12px 0;
}
.history-timeline-meta--written + .history-timeline-meta{display:none}
.history-timeline-item--note > .history-more{display:none}
.history-note-menu{
  position:absolute;
  right:0;
  top:8px;
}
.history-timeline-dot{
  position:relative;
  z-index:1;
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  background:#3b91ff;
}
.history-timeline-item--done .history-timeline-dot{background:#29b96f}
.history-timeline-item--planned .history-timeline-dot{background:#3b91ff}
.history-timeline-item--note .history-timeline-dot{background:#ffc107;color:#172033}
.history-timeline-meta{margin-top:4px;color:#98aabd;font-size:12px}
.history-empty{
  padding:24px;
  border:1px dashed rgba(255,255,255,.14);
  border-radius:10px;
  color:#9fb0c3;
  text-align:center;
}
body[data-theme="light"] .history-title{color:#142235}
body[data-theme="light"] .history-subtitle{color:#5c7088}
body[data-theme="light"] .history-vehicle-card,body[data-theme="light"] .history-quick-card,body[data-theme="light"] .history-panel{border-color:rgba(20,34,53,.10);background:rgba(255,255,255,.78);box-shadow:var(--shadow)}
body[data-theme="light"] .history-vehicle-main h2,body[data-theme="light"] .history-spec strong,body[data-theme="light"] .history-workorder-data strong{color:#142235}
body[data-theme="light"] .history-vehicle-meta,body[data-theme="light"] .history-active-dot{color:#5c7088}
body[data-theme="light"] .history-spec{border-left-color:rgba(20,34,53,.08)}
body[data-theme="light"] .history-workorder{border-color:rgba(20,34,53,.08);background:rgba(255,255,255,.58)}
body[data-theme="light"] .history-workorder-body p,body[data-theme="light"] .history-timeline-item p{color:#5c7088}
@media(max-width:1180px){
  .history-vehicle-card{grid-template-columns:220px minmax(0,1fr) repeat(2,minmax(120px,.5fr))}
  .history-grid{grid-template-columns:1fr}
}
@media(max-width:780px){
  .history-hero{align-items:flex-start;flex-direction:column}
  .history-title{font-size:30px}
  .history-vehicle-card{grid-template-columns:1fr}
  .history-vehicle-media{min-height:120px}
  .history-spec{border-left:none;border-top:1px solid rgba(255,255,255,.07);padding:14px 18px}
  .history-quick-card{grid-template-columns:1fr}
  .history-quick-actions{justify-content:stretch}
  .history-quick-actions .btn{width:100%}
  .history-panel-head{align-items:flex-start;flex-direction:column}
  .history-filter{width:100%}
  .history-workorder{grid-template-columns:32px minmax(0,1fr)}
  .history-workorder-data{grid-column:2;border-left:none;padding-left:0;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:4px}
}
.empty-state{
  min-height:220px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:26px;
}
.empty-state .p{max-width:560px}
.dashboard-section{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}
.dashboard-section:first-of-type{
  margin-top:6px;
  padding-top:0;
  border-top:none;
}
.section-kicker{
  margin:0 0 6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#9fb4d1;
}
.section-title{margin-top:0;margin-bottom:12px}
.dashboard-map-titlebar{
  margin:0 0 18px;
  padding:0;
  color:#ffffff;
  font-size:22px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
}
.dashboard-map-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.dashboard-map-intro{max-width:760px;margin:10px 0 0}
.dashboard-hq-badge{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.03);
}
.dashboard-hq-logo{width:48px;height:48px;object-fit:contain}
.dashboard-map-layout{display:grid;gap:18px;margin-top:22px}
@media(min-width:1100px){.dashboard-map-layout{grid-template-columns:minmax(0,1.45fr) 330px;align-items:start}}
.dashboard-map-panel{
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  overflow:hidden;
  background:rgba(10,10,10,.2);
}
.dashboard-map-debug{
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#9fb4d1;
  font-size:12px;
  letter-spacing:.04em;
}
.dashboard-map{height:560px;width:100%}
@media(max-width:700px){
  .entry-modal__dialog{padding:18px;border-radius:20px}
  .entry-modal__actions > .btn{width:100%}
  .confirm-modal__dialog{padding:18px;border-radius:20px}
  .confirm-modal__actions > .btn{width:100%}
  .dashboard-map{height:420px}
}
.dashboard-map-sidebar{display:grid;gap:16px}
.dashboard-map-stats{display:grid;gap:12px}
.dashboard-map-legend,
.dashboard-map-list-wrap{
  padding:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.03);
}
.heat-legend-list{display:grid;gap:10px;margin-top:10px}
.heat-legend-item{display:flex;gap:10px;align-items:center}
.heat-dot{display:inline-block;width:18px;height:18px;border-radius:999px}
.heat-dot-low{background:hsl(2 82% 65%)}
.heat-dot-mid{background:hsl(2 82% 55%)}
.heat-dot-high{background:hsl(2 82% 43%)}
.dashboard-map-list{display:grid;gap:10px;margin-top:10px}
.dashboard-map-list-item{display:flex;gap:10px;align-items:flex-start}
.dashboard-map-list-dot{
  width:13px;
  height:13px;
  border-radius:999px;
  margin-top:4px;
  flex:0 0 13px;
  box-shadow:0 0 0 4px rgba(255,255,255,.04);
}
.dashboard-map-empty{
  padding:12px 0;
  color:var(--muted);
}
.hq-map-tooltip{
  background:rgba(10,16,22,.94);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  padding:8px 12px;
  box-shadow:0 10px 20px rgba(0,0,0,.24);
}
.hq-map-tooltip::before{display:none}
.map-popup{min-width:160px}

.hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:18px 0}
body[data-theme="light"] .card,body[data-theme="light"] .stat,body[data-theme="light"] .planner-shell,body[data-theme="light"] .planner-board,body[data-theme="light"] .planner-mini-cal,body[data-theme="light"] .planner-create-form,body[data-theme="light"] .dashboard-map-legend,body[data-theme="light"] .dashboard-map-list-wrap,body[data-theme="light"] .dashboard-map-panel{border-color:rgba(20,34,53,.10);background:rgba(255,255,255,.72);box-shadow:var(--shadow);}
body[data-theme="light"] .input,body[data-theme="light"] .textarea,body[data-theme="light"] select.input{border-color:rgba(20,34,53,.12);background:rgba(255,255,255,.82);color:#142235;}
body[data-theme="light"] .muted,body[data-theme="light"] .p,body[data-theme="light"] .sidebar-footer{color:#5c7088}

.account-shell{max-width:1080px;margin:0 auto;display:grid;gap:16px;}
.account-hero{display:grid;gap:16px;}
.account-hero-grid{display:grid;gap:16px;grid-template-columns:1.25fr .75fr;}
.account-identity{display:grid;gap:14px;grid-template-columns:auto 1fr;align-items:center;}
.account-avatar{width:72px;height:72px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;color:#eef4ff;background:linear-gradient(135deg, rgba(122,167,255,.52), rgba(122,167,255,.18));border:1px solid rgba(122,167,255,.35);}
.account-meta{display:grid;gap:4px;}
.account-kicker{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9fb0c3;}
.account-title{margin:0;font-size:30px;line-height:1.05;}
.account-subtitle{margin:0;color:var(--muted);line-height:1.55;}
.account-badge{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;border-radius:999px;border:1px solid rgba(122,167,255,.26);background:rgba(122,167,255,.10);font-size:13px;font-weight:800;color:#dbe8ff;}
body[data-theme="light"] .account-avatar{color:#142235;background:linear-gradient(135deg, rgba(47,111,255,.25), rgba(47,111,255,.08));border-color:rgba(47,111,255,.24);}
body[data-theme="light"] .account-kicker{color:#5c7088}
body[data-theme="light"] .account-badge{color:#17346b;background:rgba(47,111,255,.08);border-color:rgba(47,111,255,.18);}
.account-grid{display:grid;gap:16px;grid-template-columns:repeat(2, minmax(0, 1fr));}
.account-form{display:grid;gap:10px;}
.theme-switch-form{display:grid;gap:16px;}
.theme-switch{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));}
.theme-switch-copy{display:grid;gap:4px;}
.theme-switch-title{font-size:15px;font-weight:800;color:#eef4ff;}
.theme-switch-description{font-size:12px;color:#9fb0c3;line-height:1.45;}
.theme-switch input{position:absolute;opacity:0;pointer-events:none;}
.theme-switch-track{position:relative;width:74px;height:40px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);transition:background .18s ease,border-color .18s ease;}
.theme-switch-track::after{content:"";position:absolute;left:4px;top:4px;width:30px;height:30px;border-radius:999px;background:#f5f8ff;box-shadow:0 10px 18px rgba(0,0,0,.22);transition:transform .18s ease;}
.theme-switch input:checked + .theme-switch-track{background:rgba(122,167,255,.26);border-color:rgba(122,167,255,.38);}
.theme-switch input:checked + .theme-switch-track::after{transform:translateX(34px);}
body[data-theme="light"] .theme-switch{border-color:rgba(20,34,53,.10);background:rgba(255,255,255,.68);}
body[data-theme="light"] .theme-switch-title{color:#142235}
body[data-theme="light"] .theme-switch-description{color:#5c7088}
body[data-theme="light"] .theme-switch-track{background:rgba(20,34,53,.10);border-color:rgba(20,34,53,.10);}
.account-actions{display:flex;justify-content:flex-end;margin-top:6px;}
@media(max-width:960px){.account-hero-grid,.account-grid{grid-template-columns:1fr;}}

.scroll-y{overflow-y:auto;overflow-x:hidden;padding-right:4px;}

body:has(.dashboard-shell){
  --dash-panel:rgba(19,26,36,.82);
  --dash-panel-strong:rgba(22,30,42,.92);
  --dash-line:rgba(149,164,190,.16);
  --dash-text:#f4f7fb;
  --dash-muted:#9aa9bd;
  background:linear-gradient(135deg,#070b10 0%,#0d1420 55%,#0a0f18 100%);
}
body:has(.dashboard-shell) .bg{opacity:.12}
body:has(.dashboard-shell) .sidebar{
  width:260px;
  padding:24px 18px;
  background:rgba(4,8,12,.82);
  border-right-color:rgba(149,164,190,.13);
  box-shadow:16px 0 44px rgba(0,0,0,.22);
}
body:has(.dashboard-shell) .main{margin-left:260px}
body:has(.dashboard-shell).sidebar-collapsed .main{margin-left:0}
body:has(.dashboard-shell) .brand{
  min-height:58px;
  padding:14px 18px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
}
body:has(.dashboard-shell) .brand-logo{width:26px;height:26px}
body:has(.dashboard-shell) .brand-name{font-size:18px}
body:has(.dashboard-shell) .nav{gap:10px;margin-top:8px}
body:has(.dashboard-shell) .nav a{
  min-height:48px;
  display:flex;
  align-items:center;
  border-radius:10px;
  padding:12px 16px;
  font-weight:700;
  font-size:14px;
}
body:has(.dashboard-shell) .nav a.active{
  padding-left:16px;
  background:linear-gradient(135deg,rgba(57,111,255,.42),rgba(91,72,235,.28));
  border-color:rgba(88,135,255,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 26px rgba(44,94,255,.17);
}
body:has(.dashboard-shell) .sidebar-footer{display:none}
body:has(.dashboard-shell) .dashboard-sidebar-extra{
  display:grid;
  gap:18px;
  margin-top:auto;
}
body:has(.dashboard-shell) .dashboard-upgrade-card{
  display:grid;
  gap:10px;
  padding:18px;
  border-radius:12px;
  border:1px solid rgba(149,164,190,.12);
  background:linear-gradient(145deg,rgba(29,38,52,.86),rgba(15,22,32,.78));
}
body:has(.dashboard-shell) .dashboard-upgrade-card strong{
  color:#fff;
  font-size:13px;
}
body:has(.dashboard-shell) .dashboard-upgrade-card span{
  color:#9fb0c3;
  font-size:12px;
  line-height:1.45;
}
body:has(.dashboard-shell) .dashboard-upgrade-card a{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  background:linear-gradient(135deg,#8a44ff,#2f70ff);
}
body:has(.dashboard-shell) .dashboard-sidebar-user{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  color:#eaf1fb;
  text-decoration:none;
  padding:8px 2px;
}
body:has(.dashboard-shell) .dashboard-sidebar-user strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}
body:has(.dashboard-shell) .dashboard-sidebar-user small{
  display:block;
  margin-top:2px;
  color:#9fb0c3;
  font-size:12px;
}
body:has(.dashboard-shell) .topbar{
  display:none;
}
body:has(.dashboard-shell) .user-menu{display:none}
body:has(.dashboard-shell) .sidebar-toggle{
  min-height:38px;
  border-radius:14px;
  padding:8px 18px;
  background:rgba(255,255,255,.045);
  font-size:12px;
}
body:has(.dashboard-shell) .content{padding:0 24px 28px}
.dashboard-shell{
  position:relative;
  min-height:calc(100vh - 28px);
  padding:18px 28px 18px;
  border-radius:22px;
  background:
    radial-gradient(circle at 74% 16%,rgba(49,115,255,.12),transparent 26%),
    linear-gradient(145deg,rgba(14,20,30,.88),rgba(7,12,19,.94));
  border:1px solid rgba(149,164,190,.12);
  box-shadow:0 26px 70px rgba(0,0,0,.34);
}
.dashboard-shell svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dashboard-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:20px;
}
.dashboard-title{margin:0;font-size:26px;line-height:1.05;color:#fff}
.dashboard-subtitle{margin:6px 0 0;color:var(--dash-muted);font-size:14px}
.dashboard-hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dashboard-date-pill,.dashboard-primary-action,.dashboard-soft-button,.dashboard-refresh,.dashboard-icon-button{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:10px;
  border:1px solid var(--dash-line);
  color:var(--dash-text);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  background:rgba(255,255,255,.045);
}
.dashboard-date-pill{
  min-width:158px;
  padding:0 16px;
  color:#dbe6f7;
}
.dashboard-date-text{
  display:inline-block;
  min-width:max-content;
  white-space:nowrap;
}
.dashboard-primary-action{
  padding:0 22px;
  background:linear-gradient(135deg,#2f70ff,#6c4cff);
  border-color:rgba(126,148,255,.72);
  box-shadow:0 12px 24px rgba(60,103,255,.30);
}
.dashboard-plus{font-size:24px;font-weight:500;line-height:1}
.dashboard-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:18px;
}
.dashboard-kpi{
  min-height:92px;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:18px;
  border-radius:14px;
  border:1px solid var(--dash-line);
  background:linear-gradient(145deg,rgba(28,37,51,.84),rgba(17,24,35,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.dashboard-kpi-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
}
.dashboard-kpi-purple .dashboard-kpi-icon{background:linear-gradient(135deg,#8c45ff,#6f4bff)}
.dashboard-kpi-blue .dashboard-kpi-icon{background:linear-gradient(135deg,#2f70ff,#4167ff)}
.dashboard-kpi-green .dashboard-kpi-icon{background:linear-gradient(135deg,#38c974,#2bb766)}
.dashboard-kpi-amber .dashboard-kpi-icon{background:linear-gradient(135deg,#ffb21d,#f59e0b)}
.dashboard-kpi-label{
  color:#aab8cc;
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.dashboard-kpi-value{margin-top:3px;color:#fff;font-size:24px;font-weight:900;line-height:1}
.dashboard-kpi-caption{margin-top:5px;color:#9baabe;font-size:12px}
.dashboard-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:18px;
  align-items:start;
}
.dashboard-left{display:grid;gap:16px}
.dashboard-panel,.dashboard-overview,.dashboard-quick-actions{
  border:1px solid var(--dash-line);
  border-radius:16px;
  background:linear-gradient(145deg,var(--dash-panel),rgba(14,21,31,.76));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.dashboard-map-card{padding:18px}
.dashboard-card-head,.dashboard-side-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.dashboard-card-head h2,.dashboard-overview h2,.dashboard-quick-actions h2{
  margin:0;
  color:#fff;
  font-size:18px;
  line-height:1.1;
}
.dashboard-map-tools{display:flex;gap:8px;align-items:center}
.dashboard-select{
  height:36px;
  min-width:154px;
  padding:0 14px;
  border-radius:8px;
  border:1px solid var(--dash-line);
  background:rgba(255,255,255,.05);
  color:#dfe8f6;
  outline:none;
  font-weight:700;
}
.dashboard-icon-button{
  width:38px;
  min-height:36px;
  padding:0;
  cursor:pointer;
}
.dashboard-map-frame{
  position:relative;
  margin-top:14px;
  overflow:hidden;
  border-radius:10px;
  border:1px solid rgba(149,164,190,.14);
  background:#111827;
}
.dashboard-map{height:386px;width:100%}
.dashboard-postcode-tooltip{
  border:1px solid rgba(15,23,42,.16);
  border-radius:999px;
  background:#fff;
  color:#0f172a;
  box-shadow:0 8px 18px rgba(15,23,42,.18);
  font-size:11px;
  font-weight:900;
  letter-spacing:0;
  padding:4px 8px;
}
.dashboard-postcode-tooltip::before{display:none}
.dashboard-map-debug{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:500;
  max-width:calc(100% - 24px);
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.92);
  color:#334155;
  font-size:11px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(15,23,42,.18);
}
.dashboard-refresh{
  margin-top:14px;
  padding:0 14px;
  min-height:40px;
  border-radius:9px;
  cursor:pointer;
}
.dashboard-quick-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px;
  max-width:860px;
}
.dashboard-quick-actions p{margin:5px 0 0;color:var(--dash-muted);font-size:12px}
.dashboard-action-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.dashboard-soft-button{
  min-height:40px;
  padding:0 16px;
  border-radius:8px;
  font-size:12px;
  color:#e8eef8;
}
.dashboard-soft-button svg{width:15px;height:15px}
.dashboard-overview{
  padding:20px;
  display:grid;
  gap:14px;
}
.dashboard-side-card{
  padding:16px;
  border-radius:10px;
  border:1px solid var(--dash-line);
  background:rgba(255,255,255,.035);
}
.dashboard-side-head a{
  color:#80a8ff;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}
.dashboard-overview .heat-legend-list{gap:12px}
.dashboard-overview .heat-legend-item{
  color:#edf3fb;
  font-size:13px;
  font-weight:650;
}
.dashboard-overview .heat-dot{width:14px;height:14px;box-shadow:0 0 0 4px rgba(239,68,68,.08)}
.dashboard-map-list{margin-top:12px}
.dashboard-hotspot{
  display:grid;
  grid-template-columns:16px minmax(0,1fr) 16px;
  gap:10px;
  align-items:start;
  margin-top:10px;
  color:#edf3fb;
  text-decoration:none;
}
.dashboard-hotspot:first-child{margin-top:0}
.dashboard-hotspot strong,.dashboard-recent strong{
  display:block;
  font-size:13px;
  line-height:1.35;
}
.dashboard-hotspot span span,.dashboard-recent span span{
  display:block;
  margin-top:4px;
  color:#9fb0c3;
  font-size:12px;
}
.dashboard-map-list-dot{
  width:12px;
  height:12px;
  margin-top:4px;
  background:#ef4444;
  border-radius:99px;
  box-shadow:0 0 0 4px rgba(239,68,68,.10);
}
.dashboard-chevron{color:#c6d3e6;font-size:26px;line-height:1}
.dashboard-recent{
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
  margin-top:12px;
  color:#edf3fb;
}
.dashboard-status-pill{
  align-self:start;
  padding:5px 9px;
  border-radius:8px;
  background:rgba(47,112,255,.18);
  color:#8fb0ff;
  font-size:11px;
  font-weight:800;
}
.dashboard-updated{
  display:flex;
  justify-content:flex-end;
  margin-top:24px;
  color:#9fb0c3;
  font-size:12px;
}
.dashboard-updated::before{
  content:"";
  width:10px;
  height:10px;
  margin:3px 8px 0 0;
  border-radius:99px;
  border:2px solid #2fd477;
}
body[data-theme="light"]:has(.dashboard-shell) .dashboard-shell{
  background:linear-gradient(145deg,rgba(244,248,253,.96),rgba(226,234,245,.92));
}
body[data-theme="light"]:has(.dashboard-shell) .dashboard-title,
body[data-theme="light"]:has(.dashboard-shell) .dashboard-card-head h2,
body[data-theme="light"]:has(.dashboard-shell) .dashboard-overview h2,
body[data-theme="light"]:has(.dashboard-shell) .dashboard-quick-actions h2,
body[data-theme="light"]:has(.dashboard-shell) .dashboard-kpi-value{color:#142235}
body[data-theme="light"]:has(.dashboard-shell) .dashboard-kpi,
body[data-theme="light"]:has(.dashboard-shell) .dashboard-panel,
body[data-theme="light"]:has(.dashboard-shell) .dashboard-overview,
body[data-theme="light"]:has(.dashboard-shell) .dashboard-quick-actions,
body[data-theme="light"]:has(.dashboard-shell) .dashboard-side-card{
  background:rgba(255,255,255,.76);
  border-color:rgba(20,34,53,.10);
}
body[data-theme="light"]:has(.dashboard-shell) .dashboard-overview .heat-legend-item,
body[data-theme="light"]:has(.dashboard-shell) .dashboard-hotspot,
body[data-theme="light"]:has(.dashboard-shell) .dashboard-recent{color:#142235}
body[data-theme="light"]:has(.dashboard-shell) .dashboard-select{
  background:#fff;
  color:#142235;
  border-color:rgba(20,34,53,.12);
}
@media(max-width:1320px){
  .dashboard-main-grid{grid-template-columns:1fr}
  .dashboard-overview{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dashboard-overview h2{grid-column:1/-1}
}
@media(max-width:1080px){
  .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  body:has(.dashboard-shell) .sidebar{width:240px}
  body:has(.dashboard-shell) .main{margin-left:240px}
}
@media(max-width:760px){
  body:has(.dashboard-shell) .main{margin-left:0}
  body:has(.dashboard-shell) .sidebar{transform:translateX(-100%);opacity:0;pointer-events:none}
  body:has(.dashboard-shell) .content{padding:0 12px 20px}
  .dashboard-shell{padding:16px;border-radius:16px}
  .dashboard-hero,.dashboard-quick-actions{align-items:flex-start;flex-direction:column}
  .dashboard-hero-actions,.dashboard-action-row{width:100%;justify-content:stretch}
  .dashboard-date-pill,.dashboard-primary-action,.dashboard-soft-button{width:100%}
  .dashboard-kpis,.dashboard-overview{grid-template-columns:1fr}
  .dashboard-map-tools{width:100%}
  .dashboard-select{flex:1;min-width:0}
  .dashboard-map{height:340px}
}

body:has(.dashboard2-shell){
  --d2-bg:#060d16;
  --d2-panel:rgba(13,23,35,.78);
  --d2-panel-strong:rgba(16,28,42,.88);
  --d2-line:rgba(148,163,184,.13);
  --d2-text:#f4f8ff;
  --d2-muted:#9aa9bc;
  --d2-blue:#2f70ff;
  background:#070c13;
}
body:has(.dashboard2-shell) .bg{opacity:.11}
body:has(.dashboard2-shell) .sidebar{
  width:168px;
  padding:20px 10px 16px;
  background:linear-gradient(180deg,rgba(6,13,22,.96),rgba(5,12,20,.90));
  border-right-color:var(--d2-line);
  box-shadow:none;
}
body:has(.dashboard2-shell) .main{margin-left:168px}
body:has(.dashboard2-shell).sidebar-collapsed .main{margin-left:0}
body:has(.dashboard2-shell) .brand{
  border:0;
  background:transparent;
  box-shadow:none;
  min-height:34px;
  padding:4px 8px;
  gap:7px;
}
body:has(.dashboard2-shell) .brand-logo{width:20px;height:20px}
body:has(.dashboard2-shell) .brand-name{font-size:14px;color:#fff}
body:has(.dashboard2-shell) .nav{gap:10px;margin-top:16px}
body:has(.dashboard2-shell) .nav a{
  min-height:34px;
  display:flex;
  align-items:center;
  padding:8px 10px 8px 36px;
  border-radius:8px;
  color:#d9e4f4;
  font-size:10px;
  font-weight:750;
}
body:has(.dashboard2-shell) .nav a.active{
  padding-left:36px;
  color:#fff;
  background:linear-gradient(135deg,rgba(47,112,255,.34),rgba(47,112,255,.16));
  border-color:rgba(67,128,255,.44);
  box-shadow:0 10px 26px rgba(28,74,170,.16);
}
body:has(.dashboard2-shell) .nav a::before{
  content:"";
  position:absolute;
  left:11px;
  top:50%;
  width:14px;
  height:14px;
  transform:translateY(-50%);
  background:currentColor;
  opacity:.9;
  mask:center/contain no-repeat;
}
body:has(.dashboard2-shell) .nav a[href="/dashboard-2/dashboard"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E")}
body:has(.dashboard2-shell) .nav a[href="/dashboard-2/diensten-info"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-2-2h-5l-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Z'/%3E%3Cpath d='M8 12h8M8 16h5'/%3E%3C/svg%3E")}
body:has(.dashboard2-shell) .nav a[href="/dashboard-2/werknemer-info"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
body:has(.dashboard2-shell) .nav a[href="/dashboard"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5M21 12H9'/%3E%3C/svg%3E")}
body:has(.dashboard2-shell) .dashboard-sidebar-extra{
  display:grid;
  gap:10px;
  margin-top:auto;
}
body:has(.dashboard2-shell) .dashboard-upgrade-card{display:none}
body:has(.dashboard2-shell) .dashboard-sidebar-user{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  color:#eaf1fb;
  text-decoration:none;
  padding:10px 7px 7px;
  border-top:1px solid var(--d2-line);
}
body:has(.dashboard2-shell) .dashboard-sidebar-user strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
body:has(.dashboard2-shell) .dashboard-sidebar-user small{display:block;color:#9fb0c3;font-size:8px}
body:has(.dashboard2-shell) .sidebar-footer{
  margin-top:0;
  padding:0 7px;
  white-space:normal;
  font-size:8px;
  line-height:1.5;
}
body:has(.dashboard2-shell) .topbar{
  height:58px;
  border-bottom-color:var(--d2-line);
  background:rgba(6,12,20,.54);
  padding:0 24px;
}
body:has(.dashboard2-shell) .sidebar-toggle{
  min-height:26px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  font-size:10px;
}
body:has(.dashboard2-shell) .sidebar-toggle::before{content:"<";margin-right:7px}
body:has(.dashboard2-shell) .user-menu-trigger{
  border:0;
  background:transparent;
  padding:6px 0;
}
body:has(.dashboard2-shell) .user-avatar{width:26px;height:26px;font-size:10px}
body:has(.dashboard2-shell) .user-name{font-size:10px}
body:has(.dashboard2-shell) .user-role{font-size:8px}
body:has(.dashboard2-shell) .content{padding:16px 30px 18px 24px}
.dashboard2-shell svg{
  width:15px;
  height:15px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dashboard2-shell{
  min-height:calc(100vh - 92px);
  color:var(--d2-text);
}
.dashboard2-page{
  display:grid;
  gap:16px;
  width:100%;
  max-width:none;
}
.dashboard2-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.dashboard2-title-wrap{display:flex;align-items:center;gap:10px}
.dashboard2-title-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#6ea0ff;
  background:rgba(47,112,255,.16);
}
.dashboard2-head h1{margin:0;color:#fff;font-size:20px;line-height:1.05}
.dashboard2-head p{margin:5px 0 0;color:var(--d2-muted);font-size:10px}
.dashboard2-actions{display:flex;gap:9px;align-items:center;justify-content:flex-end;flex-wrap:wrap;padding-top:6px}
.dashboard2-control,.dashboard2-refresh{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid var(--d2-line);
  background:rgba(255,255,255,.045);
  color:#eef5ff;
  font-weight:850;
  font-size:10px;
  cursor:pointer;
}
.dashboard2-control.small{min-height:28px;padding:0 10px}
.dashboard2-actions .dashboard2-control:first-child{min-width:94px}
.dashboard2-actions .dashboard2-control:nth-child(2){min-width:96px}
.dashboard2-refresh{
  min-width:110px;
  background:linear-gradient(135deg,#2f70ff,#2859ff);
  border-color:rgba(80,132,255,.78);
  box-shadow:0 12px 28px rgba(36,91,255,.28);
}
.dashboard2-caret{font-size:11px;color:#94a6bd}
.dashboard2-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  width:100%;
}
.dashboard2-kpi{
  min-height:112px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:10px;
  padding:16px 16px 14px;
  border:1px solid var(--d2-line);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(18,29,43,.84),rgba(12,21,33,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.dashboard2-kpi-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:999px;
}
.dashboard2-kpi-icon.blue{color:#4f87ff;background:rgba(47,112,255,.20)}
.dashboard2-kpi-icon.green{color:#38d47b;background:rgba(34,197,94,.18)}
.dashboard2-kpi-icon.purple{color:#a855f7;background:rgba(168,85,247,.18)}
.dashboard2-kpi-icon.amber{color:#fb8c13;background:rgba(251,140,19,.18)}
.dashboard2-kpi-icon.teal{color:#34d2c6;background:rgba(15,169,164,.20)}
.dashboard2-kpi-icon.red{color:#ff4d5e;background:rgba(255,77,94,.18)}
.dashboard2-label{
  display:block;
  color:#aebbd0;
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
}
.dashboard2-kpi strong{
  display:block;
  margin-top:6px;
  color:#fff;
  font-size:21px;
  line-height:1;
}
.dashboard2-kpi small{
  display:block;
  margin-top:10px;
  color:#c3cfdf;
  font-size:10px;
}
.dashboard2-kpi small + small{margin-top:5px}
.dashboard2-panels{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.98fr);
  gap:12px;
  width:100%;
}
.dashboard2-panel{
  border:1px solid var(--d2-line);
  border-radius:8px;
  background:linear-gradient(145deg,var(--d2-panel),rgba(10,19,31,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.dashboard2-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 16px 0;
}
.dashboard2-panel-head h2{
  margin:0;
  color:#fff;
  font-size:13px;
}
.dashboard2-panel-head a,.dashboard2-panel-action a{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 12px;
  border:1px solid var(--d2-line);
  border-radius:8px;
  background:rgba(255,255,255,.045);
  color:#eef5ff;
  text-decoration:none;
  font-size:10px;
  font-weight:850;
}
.dashboard2-chart{height:154px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;padding:16px 30px 0 16px}
.dashboard2-ylabels{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  color:#9fb0c3;
  font-size:9px;
  padding-bottom:23px;
}
.dashboard2-plot{
  position:relative;
  min-width:0;
  height:100%;
  padding-bottom:24px;
  background-image:
    linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.07) 1px,transparent 1px);
  background-size:100% calc((100% - 24px) / 4),8.33% 100%;
}
.dashboard2-shell .dashboard2-chart-svg{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:calc(100% - 24px);
  width:100%;
  overflow:visible;
  pointer-events:none;
}
.dashboard2-shell .dashboard2-chart-svg polyline{
  fill:none;
  stroke:#2f70ff;
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(47,112,255,.52));
}
.dashboard2-dot{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:999px;
  background:#2f70ff;
  transform:translate(-50%,-50%);
  box-shadow:0 0 10px rgba(47,112,255,.58);
}
.dashboard2-month{
  position:absolute;
  bottom:0;
  transform:translateX(-50%);
  color:#94a6bd;
  font-size:9px;
}
.dashboard2-legend{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#dbe6f6;
  font-size:10px;
  padding-bottom:8px;
}
.dashboard2-legend span{width:14px;height:7px;border-radius:999px;background:#2f70ff}
.dashboard2-status-body{
  display:grid;
  grid-template-columns:176px minmax(0,1fr);
  align-items:center;
  gap:20px;
  padding:22px 28px 2px;
}
.dashboard2-donut{
  width:118px;
  height:118px;
  margin:auto;
  border-radius:999px;
  display:grid;
  place-items:center;
  position:relative;
  background:conic-gradient(#2f70ff 0 var(--donut-pct), rgba(47,112,255,.16) var(--donut-pct) 100%);
  box-shadow:0 0 38px rgba(47,112,255,.22);
}
.dashboard2-donut::after{
  content:"";
  position:absolute;
  inset:22px;
  border-radius:inherit;
  background:#08111c;
}
.dashboard2-donut strong,.dashboard2-donut span{position:relative;z-index:1;text-align:center}
.dashboard2-donut strong{font-size:16px;color:#fff;align-self:end}
.dashboard2-donut span{font-size:10px;color:#d5dfef;align-self:start}
.dashboard2-status-list{display:grid;gap:16px}
.dashboard2-status-row{
  display:grid;
  grid-template-columns:12px minmax(0,1fr) 34px 42px;
  gap:8px;
  align-items:center;
  color:#dce7f6;
  font-size:10px;
}
.dashboard2-status-row strong,.dashboard2-status-row em{
  font-style:normal;
  text-align:right;
  color:#eef5ff;
  font-weight:750;
}
.dashboard2-status-dot{width:11px;height:11px;border-radius:999px}
.dashboard2-status-dot.gray{background:#94a3b8}.dashboard2-status-dot.blue{background:#2f70ff}.dashboard2-status-dot.orange{background:#fb8c13}.dashboard2-status-dot.purple{background:#8b5cf6}.dashboard2-status-dot.green{background:#37ca7a}.dashboard2-status-dot.red{background:#ff4d5e}
.dashboard2-panel-action{display:flex;justify-content:flex-end;padding:7px 16px 12px}
.dashboard2-activity-panel{min-height:118px}
.dashboard2-table{padding:12px 16px 14px}
.dashboard2-table-head,.dashboard2-table-row{
  display:grid;
  grid-template-columns:160px minmax(220px,1fr) 180px 180px;
  gap:16px;
  align-items:center;
}
.dashboard2-table-head{
  min-height:30px;
  color:#91a3bb;
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
  border-bottom:1px solid var(--d2-line);
}
.dashboard2-table-row{
  min-height:34px;
  color:#dce7f6;
  font-size:10px;
  border-bottom:1px solid rgba(148,163,184,.07);
}
.dashboard2-empty{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#aab8cb;
  font-size:10px;
}
.dashboard2-list-panel{padding-bottom:20px}
.dashboard2-list{display:grid;gap:12px;padding:20px}
.dashboard2-list-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,.4fr);
  gap:18px;
  padding:16px;
  border:1px solid var(--d2-line);
  border-radius:8px;
  background:rgba(255,255,255,.035);
}
.dashboard2-list-item strong{display:block;margin-top:6px;color:#fff;font-size:17px}
.dashboard2-list-item small{display:block;margin-top:7px;color:#9fb0c3;line-height:1.45}
.dashboard2-employees-head{align-items:center}
.dashboard2-employee-kpis .dashboard2-kpi{min-height:110px}
.dashboard2-employees-panel{overflow:hidden}
.dashboard2-employees-panel-head{
  align-items:center;
  padding:20px 20px 0;
}
.dashboard2-employees-panel-head h2{font-size:15px}
.dashboard2-employees-tools{
  display:grid;
  grid-template-columns:minmax(220px,320px) 150px;
  gap:8px;
  align-items:end;
}
.dashboard2-employee-search,
.dashboard2-employee-filter select{min-height:34px}
.dashboard2-employee-search{grid-template-columns:18px minmax(0,1fr) 18px}
.dashboard2-employee-search input{font-size:11px}
.dashboard2-employee-filter select{
  font-size:11px;
  padding-left:12px;
}
.dashboard2-employees-table{
  padding:22px 20px 0;
  overflow:auto;
}
.dashboard2-employees-table-head,
.dashboard2-employees-row{
  display:grid;
  grid-template-columns:1.35fr .9fr .7fr 1.05fr .95fr .9fr 76px;
  gap:16px;
  align-items:center;
  min-width:960px;
}
.dashboard2-employees-table-head{
  min-height:34px;
  color:#91a3bb;
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
}
.dashboard2-employees-row{
  min-height:54px;
  color:#dce7f6;
  font-size:12px;
  border-top:1px solid rgba(148,163,184,.07);
}
.dashboard2-employee-name{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-width:0;
}
.dashboard2-employee-name strong{
  display:block;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard2-employee-name small{
  display:block;
  margin-top:2px;
  color:#9fb0c3;
  font-size:9px;
}
.dashboard2-employee-avatar{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  font-size:11px;
  font-weight:850;
}
.dashboard2-employee-avatar.blue{background:linear-gradient(135deg,#2f70ff,#2452df)}
.dashboard2-employee-avatar.green{background:linear-gradient(135deg,#1f9f71,#177954)}
.dashboard2-employee-avatar.purple{background:linear-gradient(135deg,#8a3ffc,#6c2fd0)}
.dashboard2-employee-avatar.amber{background:linear-gradient(135deg,#f57c00,#c75f00)}
.dashboard2-employee-avatar.teal{background:linear-gradient(135deg,#15a79f,#0d7670)}
.dashboard2-employee-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#3ee88a;
}
.dashboard2-employee-status i{
  width:7px;
  height:7px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 10px currentColor;
}
.dashboard2-employee-status.is-inactive{color:#ff5865}
.dashboard2-employee-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}
.dashboard2-employee-actions a,
.dashboard2-employee-actions button{
  width:32px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(255,255,255,.055);
  color:#dce8f7;
  text-decoration:none;
  cursor:pointer;
}
.dashboard2-employee-actions form{margin:0}
.dashboard2-employee-actions form button{
  border-color:rgba(255,77,94,.22);
  background:rgba(255,77,94,.10);
  color:#ff4d5e;
}
.dashboard2-employee-actions form button:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.dashboard2-employees-no-results{
  border-top:1px solid rgba(148,163,184,.07);
  margin:0 20px;
}
.dashboard2-employees-footer{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 20px;
  color:#aebbd0;
  font-size:11px;
}
.dashboard2-employees-pages{
  display:flex;
  gap:6px;
}
.dashboard2-employees-pages button{
  width:31px;
  height:31px;
  border:1px solid rgba(148,163,184,.10);
  border-radius:7px;
  background:rgba(255,255,255,.045);
  color:#aebbd0;
  font-weight:850;
}
.dashboard2-employees-pages button.is-active{
  color:#fff;
  background:linear-gradient(135deg,#2f70ff,#244cff);
  border-color:rgba(80,132,255,.72);
}
.dashboard2-services-head{align-items:center}
.dashboard2-primary-action{
  min-height:42px;
  min-width:132px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 18px;
  border-radius:8px;
  border:1px solid rgba(73,129,255,.78);
  background:linear-gradient(135deg,#2f70ff,#244cff);
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  box-shadow:0 14px 30px rgba(39,91,255,.32);
  cursor:pointer;
}
.dashboard2-alert{
  min-height:38px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border:1px solid rgba(58,214,128,.32);
  border-radius:8px;
  background:rgba(58,214,128,.10);
  color:#8ff0ba;
  font-size:12px;
  font-weight:750;
}
.dashboard2-alert.is-danger{
  border-color:rgba(255,77,94,.34);
  background:rgba(255,77,94,.10);
  color:#ff9ca5;
}
.dashboard2-modal-open{overflow:hidden}
.dashboard2-service-modal{
  position:fixed;
  inset:0;
  z-index:130;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.dashboard2-service-modal[hidden]{display:none}
.dashboard2-service-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,8,14,.72);
  backdrop-filter:blur(8px);
}
.dashboard2-service-modal-dialog{
  position:relative;
  width:min(100%,520px);
  border:1px solid rgba(148,163,184,.16);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(15,26,40,.98),rgba(8,16,28,.98));
  box-shadow:0 28px 70px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.dashboard2-service-modal-head{
  min-height:74px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px 14px;
  border-bottom:1px solid rgba(148,163,184,.11);
}
.dashboard2-service-modal-head h2{
  margin:0;
  color:#fff;
  font-size:18px;
}
.dashboard2-service-modal-head p{
  margin:5px 0 0;
  color:#9fb0c3;
  font-size:12px;
}
.dashboard2-service-modal-head button{
  width:30px;
  height:30px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:7px;
  background:rgba(255,255,255,.05);
  color:#dbe7f6;
  cursor:pointer;
}
.dashboard2-service-form{
  display:grid;
  gap:13px;
  padding:18px 20px 20px;
}
.dashboard2-service-form label{
  display:grid;
  gap:7px;
  color:#aebbd0;
  font-size:11px;
  font-weight:800;
}
.dashboard2-service-form input,
.dashboard2-service-form select,
.dashboard2-service-form textarea{
  width:100%;
  min-height:42px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:8px;
  background:#081321;
  color:#f2f7ff;
  padding:0 12px;
  outline:0;
  font:inherit;
  font-size:12px;
  font-weight:650;
}
.dashboard2-service-form textarea{
  min-height:86px;
  padding:11px 12px;
  resize:vertical;
}
.dashboard2-service-form input:focus,
.dashboard2-service-form select:focus,
.dashboard2-service-form textarea:focus{
  border-color:rgba(80,132,255,.76);
  box-shadow:0 0 0 3px rgba(47,112,255,.18);
}
.dashboard2-service-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.dashboard2-service-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:4px;
}
.dashboard2-service-secondary{
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:8px;
  background:rgba(255,255,255,.045);
  color:#f2f7ff;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}
.dashboard2-services-toolbar{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 176px 160px auto;
  align-items:end;
  gap:14px;
  padding:16px;
  border:1px solid var(--d2-line);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(13,23,35,.86),rgba(10,18,30,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.dashboard2-search{
  min-height:42px;
  display:grid;
  grid-template-columns:20px minmax(0,1fr) 20px;
  align-items:center;
  gap:10px;
  padding:0 12px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:8px;
  background:rgba(5,12,22,.72);
  color:#aebdd2;
}
.dashboard2-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#edf5ff;font:inherit;font-size:12px}
.dashboard2-search input::placeholder{color:#9aaabd}
.dashboard2-search button{width:20px;height:20px;padding:0;border:0;background:transparent;color:#aab8cb;cursor:pointer;font-size:16px;line-height:1}
.dashboard2-filter{position:relative;display:grid;gap:0}
.dashboard2-filter span{position:absolute;left:10px;top:-8px;padding:0 6px;background:#0b1624;color:#aebbd0;font-size:9px;font-weight:750}
.dashboard2-filter select{
  min-height:42px;
  width:100%;
  border:1px solid rgba(148,163,184,.16);
  border-radius:8px;
  background:#081321;
  color:#f2f7ff;
  padding:0 34px 0 14px;
  font-size:12px;
  font-weight:750;
  outline:0;
}
.dashboard2-view-toggle{min-height:42px;display:flex;align-items:center;gap:6px;padding:4px;border-radius:8px;background:rgba(255,255,255,.035)}
.dashboard2-view-toggle button{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 12px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#aebbd0;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}
.dashboard2-view-toggle button.is-active{color:#fff;background:linear-gradient(135deg,rgba(47,112,255,.35),rgba(47,112,255,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.dashboard2-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dashboard2-service-card{
  min-height:206px;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  gap:10px;
  padding:20px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:8px;
  background:radial-gradient(circle at 85% 20%,rgba(47,112,255,.08),transparent 28%),linear-gradient(145deg,rgba(14,25,39,.84),rgba(8,17,29,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.dashboard2-service-main{display:grid;grid-template-columns:54px minmax(0,1fr);gap:16px;align-items:start}
.dashboard2-service-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:999px}
.dashboard2-service-icon .dashboard2-icon{width:25px;height:25px}
.dashboard2-service-icon.blue{color:#5d8dff;background:rgba(47,112,255,.22)}
.dashboard2-service-icon.green{color:#75e06f;background:rgba(45,185,70,.22)}
.dashboard2-service-icon.purple{color:#9c75ff;background:rgba(126,87,255,.23)}
.dashboard2-service-icon.orange{color:#ff9448;background:rgba(220,114,46,.23)}
.dashboard2-service-icon.amber{color:#ffd34f;background:rgba(192,153,22,.20)}
.dashboard2-service-icon.teal{color:#34d2c6;background:rgba(15,169,164,.20)}
.dashboard2-service-copy{min-width:0}
.dashboard2-service-copy h2{margin:3px 0 0;color:#fff;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.dashboard2-service-copy p{margin:10px 0 0;color:#d2ddeb;font-size:12px;line-height:1.45}
.dashboard2-service-price{align-self:end;display:block;color:#fff;font-size:30px;line-height:1;letter-spacing:0}
.dashboard2-service-status{display:flex;align-items:center;gap:9px;color:#47d47d;font-size:12px}
.dashboard2-service-status span{width:10px;height:10px;border-radius:999px;background:currentColor}
.dashboard2-service-status.is-inactive{color:#ff8b8b}
.dashboard2-service-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
.dashboard2-service-actions a,.dashboard2-service-actions button{
  min-height:38px;
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:7px;
  border:1px solid rgba(148,163,184,.17);
  background:rgba(255,255,255,.045);
  color:#f2f7ff;
  text-decoration:none;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}
.dashboard2-service-actions form{margin:0}
.dashboard2-service-actions button{border-color:rgba(255,87,74,.38);background:rgba(255,87,74,.055);color:#ff6b5f}
.dashboard2-services-grid.is-list{grid-template-columns:1fr}
.dashboard2-services-grid.is-list .dashboard2-service-card{min-height:112px;grid-template-columns:minmax(0,1fr) 160px 92px 260px;grid-template-rows:auto;align-items:center}
.dashboard2-services-grid.is-list .dashboard2-service-price{align-self:center;font-size:24px}
.dashboard2-services-grid.is-list .dashboard2-service-actions{margin-top:0}
.dashboard2-services-no-results{border:1px solid var(--d2-line);border-radius:8px;background:rgba(13,23,35,.72)}
.dashboard2-icon{width:15px;height:15px;display:inline-block;flex:0 0 auto;background:currentColor;mask:center/contain no-repeat}
.dashboard2-icon-plus{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.dashboard2-icon-search{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}
.dashboard2-icon-grid{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E")}
.dashboard2-icon-list{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E")}
.dashboard2-icon-pencil{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z'/%3E%3C/svg%3E")}
.dashboard2-icon-trash{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E")}
.dashboard2-icon-file{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E")}
.dashboard2-icon-wheel{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 3v7M12 14v7M3 12h7M14 12h7M5.6 5.6l5 5M13.4 13.4l5 5M18.4 5.6l-5 5M10.6 13.4l-5 5'/%3E%3C/svg%3E")}
.dashboard2-icon-car{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9L18.4 10c-.3-.6-.7-1.1-1.2-1.5L15.8 7.1c-.4-.4-.9-.6-1.4-.6H6.6c-.8 0-1.5.5-1.8 1.2L3.5 11.1C2.6 11.3 2 12.1 2 13v3c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E")}
.dashboard2-icon-sun{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E")}
.dashboard2-icon-roller{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='14' height='6' rx='3'/%3E%3Cpath d='M17 8h3a1 1 0 0 1 1 1v3a2 2 0 0 1-2 2h-7v3'/%3E%3Cpath d='M10 17h4v5h-4z'/%3E%3C/svg%3E")}
.dashboard2-icon-spray{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2h7v5H7zM9 7h3v3l3 2v10H6V12l3-2zM17 5h4M17 9h3M17 13h4'/%3E%3C/svg%3E")}
@media(max-width:1280px){
  .dashboard2-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard2-panels{grid-template-columns:1fr}
  .dashboard2-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard2-services-toolbar{grid-template-columns:minmax(220px,1fr) 160px 150px}
  .dashboard2-employees-tools{grid-template-columns:minmax(220px,1fr) 150px}
  .dashboard2-view-toggle{grid-column:1/-1;justify-self:end}
}
@media(max-width:920px){
  body:has(.dashboard2-shell) .main{margin-left:0}
  body:has(.dashboard2-shell) .sidebar{transform:translateX(-100%);opacity:0;pointer-events:none}
  body:has(.dashboard2-shell) .content{padding:18px 14px 28px}
  .dashboard2-head{flex-direction:column}
  .dashboard2-actions,.dashboard2-control,.dashboard2-refresh{width:100%}
  .dashboard2-kpi-grid{grid-template-columns:1fr}
  .dashboard2-status-body{grid-template-columns:1fr}
  .dashboard2-table{overflow:auto}
  .dashboard2-table-head,.dashboard2-table-row{min-width:760px}
  .dashboard2-list-item{grid-template-columns:1fr}
  .dashboard2-employees-head{align-items:flex-start}
  .dashboard2-employees-panel-head{align-items:flex-start}
  .dashboard2-employees-tools{width:100%;grid-template-columns:1fr}
  .dashboard2-employees-footer{align-items:flex-start;flex-direction:column;padding:12px 20px}
  .dashboard2-services-head{align-items:flex-start}
  .dashboard2-primary-action{width:100%}
  .dashboard2-services-toolbar{grid-template-columns:1fr}
  .dashboard2-service-form-grid{grid-template-columns:1fr}
  .dashboard2-service-form-actions{flex-direction:column}
  .dashboard2-service-form-actions .dashboard2-primary-action,
  .dashboard2-service-secondary{width:100%}
  .dashboard2-view-toggle{width:100%;justify-self:stretch}
  .dashboard2-view-toggle button{flex:1}
  .dashboard2-services-grid{grid-template-columns:1fr}
  .dashboard2-services-grid.is-list .dashboard2-service-card{grid-template-columns:1fr;gap:12px}
  .dashboard2-service-actions{grid-template-columns:1fr}
}
.scroll-y::-webkit-scrollbar{width:10px;}
.scroll-y::-webkit-scrollbar-thumb{background:rgba(122,167,255,.35);border-radius:10px;border:2px solid transparent;background-clip:padding-box;}
.scroll-y::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:10px;}

.planner-page{display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px;align-items:start}
.planner-sidebar{position:sticky;top:76px;display:grid;gap:14px}
.planner-create summary,
.planner-create-trigger{
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:18px;
  cursor:pointer;
  font-weight:800;
  color:#ebf2ff;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(122,167,255,.08));
  border:1px solid rgba(255,255,255,.14);
}
.planner-create summary::-webkit-details-marker{display:none}
.planner-create-trigger{
  width:100%;
  appearance:none;
}
.planner-create summary span,
.planner-create-trigger span{font-size:24px;line-height:1}
.planner-create-form{
  margin-top:10px;
  padding:14px;
  border-radius:18px;
  background:rgba(11,15,20,.88);
  border:1px solid rgba(255,255,255,.08);
}
.planner-create-form .label{margin:8px 0 5px}
.planner-submit{width:100%;margin-top:12px}
.planner-mini-cal{
  padding:14px;
  background:rgba(11,15,20,.9);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
}
.planner-mini-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.planner-mini-head strong{font-size:26px;line-height:1.15}
.planner-mini-nav{display:flex;gap:6px}
.planner-mini-nav a{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#eef3fb;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
}
.planner-mini-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.planner-mini-row span,.planner-mini-row a{
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:12px;
}
.planner-mini-row a{text-decoration:none;color:#edf4ff}
.planner-mini-row.weekdays span{min-height:18px;color:#97aac0;font-size:11px}
.planner-mini-row .is-empty{opacity:.2}
.planner-mini-row .is-current{background:#f1f5ff;color:#11233f;font-weight:800}
.planner-mini-row .is-today{border:1px solid rgba(255,255,255,.28)}
.planner-mini-row .is-closed{background:rgba(255,125,125,.20);color:#ffdcdc}
.planner-note{margin:0;color:#99abc0;font-size:13px;line-height:1.45}

.planner-shell{
  min-width:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(9,12,17,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;
  padding:18px;
  box-shadow:0 24px 50px rgba(0,0,0,.34);
}
.planner-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:12px;
  align-items:center;
  margin-bottom:16px;
}
.planner-toolbar-title{min-width:0}
.planner-month{font-size:28px;font-weight:800;color:#ecf3ff}
.planner-range{font-size:13px;color:#9fb0c3}
.planner-toolbar-nav{display:flex;align-items:center;gap:10px}
.planner-nav-btn{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#eef4ff;
  background:linear-gradient(135deg, rgba(122,167,255,.32), rgba(122,167,255,.14));
  border:1px solid rgba(122,167,255,.42);
  border-radius:10px;
  font-weight:800;
  box-shadow:0 10px 18px rgba(20,32,54,.24);
}
.planner-week-pill{
  padding:9px 14px;
  border-radius:12px;
  background:rgba(122,167,255,.12);
  color:#dbe8ff;
  font-size:13px;
  font-weight:800;
  border:1px solid rgba(122,167,255,.26);
}
.planner-toolbar-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.planner-action-btn{
  background:rgba(255,255,255,.05);
  color:#e7edf6;
  border-color:rgba(255,255,255,.10);
  box-shadow:none;
}

.planner-board{
  min-width:0;
  background:rgba(11,15,20,.96);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  overflow:auto;
}
.planner-grid{
  display:grid;
  grid-template-columns:72px repeat(var(--planner-days), minmax(140px, 1fr));
  min-width:1100px;
}
.planner-grid-head{
  position:sticky;
  top:0;
  z-index:5;
  background:rgba(11,15,20,.98);
}
.planner-time-head{
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.planner-day-head{
  min-height:82px;
  padding:12px 8px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(255,255,255,.02);
}
.planner-day-head.is-closed{background:linear-gradient(180deg, rgba(255,107,107,.16), rgba(255,107,107,0))}
.planner-day-name{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9fb0c3;
}
.planner-day-number{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#ecf3ff;
  border-radius:12px;
  font-size:24px;
  font-weight:700;
}
.planner-day-number.is-today{border:1px solid rgba(122,167,255,.50)}
.planner-day-number.is-current{
  background:linear-gradient(135deg, rgba(122,167,255,.32), rgba(122,167,255,.14));
  color:#eef4ff;
  box-shadow:inset 0 0 0 1px rgba(122,167,255,.46);
}

.planner-time-col{
  border-right:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
.planner-time-slot{
  height:52px;
  padding:8px 10px 0 0;
  text-align:right;
  color:#9fb0c3;
  font-size:12px;
  font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.planner-day-column{
  position:relative;
  border-right:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.015);
  min-height:calc(var(--planner-slots) * 52px);
}
.planner-day-column.is-closed{background:rgba(255,107,107,.05)}
.planner-day-slots{
  display:grid;
  grid-template-rows:repeat(var(--planner-slots), 52px);
}
.planner-day-slot{border-bottom:1px solid rgba(255,255,255,.05)}
.planner-events-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.planner-event{
  position:absolute;
  left:6px;
  right:6px;
  top:calc(var(--slot-index) * 52px + 4px);
  min-height:44px;
  pointer-events:auto;
}
.planner-event summary{
  list-style:none;
  min-height:44px;
  padding:6px 8px;
  border-radius:10px;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(0,0,0,.16);
  border:1px solid rgba(10,18,28,.12);
  color:#203047;
  overflow:hidden;
}
.planner-event summary::-webkit-details-marker{display:none}
.planner-event-time{font-size:10px;font-weight:800;opacity:.76}
.planner-event-title{
  margin-top:1px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.planner-event-meta{
  margin-top:2px;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.82;
}
.planner-event-chip{
  margin-top:4px;
  display:inline-flex;
  max-width:100%;
  padding:2px 6px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  background:rgba(255,255,255,.62);
}
.planner-event-panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:260px;
  padding:12px;
  border-radius:14px;
  background:rgba(12,16,22,.98);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 34px rgba(0,0,0,.32);
  z-index:20;
}
.planner-day-column:last-child .planner-event-panel{left:auto;right:0}
.planner-event-panel-info{
  display:grid;
  gap:4px;
  font-size:12px;
  color:#d9e6f7;
  margin-bottom:10px;
}
.planner-event-form{display:grid;gap:8px}
.planner-event-actions{display:flex;justify-content:flex-end}
.planner-delete-btn{width:100%;margin-top:8px}

.planner-event--sky summary{background:#58bde0}
.planner-event--lime summary{background:#b4c92b}
.planner-event--orange summary{background:#eb9730}
.planner-event--violet summary{background:#8a5df0;color:#f7f2ff}
.planner-event--teal summary{background:#4cc7b8}

@media (max-width:1180px){
  .planner-page{grid-template-columns:1fr}
  .planner-sidebar{position:relative;top:0}
}

@media (max-width:860px){
  .planner-shell{padding:12px}
  .planner-toolbar{grid-template-columns:1fr;justify-items:start}
  .planner-toolbar-actions{justify-content:flex-start}
}

/* Autogeschiedenis - screenshot 1 layout */
.sidebar{width:150px;padding:16px 10px;background:rgba(7,13,20,.88)}
.main{margin-left:150px}
.brand{min-height:40px;padding:8px 10px;border-radius:8px;border-color:transparent;background:transparent;box-shadow:none}
.brand-logo{width:22px;height:22px}
.brand-name{font-size:16px}
.nav{gap:8px;margin-top:14px}
.nav a{border-radius:7px;padding:10px 10px 10px 12px;font-size:13px}
.nav a.active{padding-left:12px;background:rgba(50,111,186,.22);border-color:rgba(80,138,218,.10)}
.topbar{height:48px;padding:0 16px;background:rgba(8,14,22,.58)}
.content{padding:12px 16px 28px}
.sidebar-footer{font-size:9px;white-space:normal}

.history-shell{max-width:none;width:100%;margin:0;gap:12px}
.history-topline{height:30px;align-items:flex-start}
.history-back{min-height:30px;padding:7px 12px;border-radius:8px;font-size:12px}
.history-hero{padding:0 0 2px;align-items:flex-start;justify-content:flex-start;gap:14px}
.history-titleblock{display:grid;grid-template-columns:auto auto;align-items:center;gap:9px 18px}
.history-title{font-size:28px;line-height:1.02;grid-row:1;color:#f5f8ff}
.history-subtitle{grid-column:1 / -1;margin:0;font-size:13px;color:#b2bfd0}
.history-status-pill{grid-row:1;min-height:24px;padding:4px 10px;border-radius:6px;font-size:11px}
.history-hero-action{
  margin-left:auto;
  min-width:126px;
  min-height:32px;
  padding:8px 13px;
  border-radius:7px;
  font-size:12px;
  background:linear-gradient(180deg,#3f70ff,#2453d7);
  border-color:rgba(101,143,255,.46);
  box-shadow:0 10px 20px rgba(36,83,215,.22);
}
.history-vehicle-card,.history-quick-card,.history-panel{
  border-radius:8px;
  border-color:rgba(74,101,132,.24);
  background:linear-gradient(135deg, rgba(18,31,45,.78), rgba(8,16,26,.84));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 26px rgba(0,0,0,.18);
}
.history-vehicle-card{
  grid-template-columns:58px minmax(260px,1.2fr) minmax(140px,.55fr) minmax(150px,.58fr) minmax(120px,.48fr);
  min-height:106px;
  padding:0 18px;
  align-items:center;
}
.history-vehicle-icon{
  width:56px;
  height:56px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(60,82,111,.78), rgba(28,43,62,.82));
  border:1px solid rgba(120,151,190,.12);
}
.history-icon{
  width:20px;
  height:20px;
  display:inline-block;
  flex:0 0 auto;
  background:currentColor;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
.history-icon-car{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9L18.4 10 17.2 7.7A2 2 0 0 0 15.4 6.5H8.6a2 2 0 0 0-1.8 1.2L5.6 10l-2.1 1.1C2.6 11.4 2 12.1 2 13v3c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E")}
.history-icon-clipboard{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h6'/%3E%3C/svg%3E")}
.history-icon-edit{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E")}
.history-vehicle-icon .history-icon{width:28px;height:28px;color:#eef5ff}
.history-vehicle-media{
  position:relative;
  min-height:84px;
  padding:10px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,144,76,.24), transparent 36%),
    linear-gradient(135deg,#4b4d4d 0%,#171d23 42%,#071018 100%);
  overflow:hidden;
}
.history-vehicle-photo{
  width:100%;
  height:100%;
  min-height:84px;
  display:block;
  object-fit:cover;
  object-position:center;
  border-radius:4px;
  filter:saturate(1.08) contrast(1.04);
}
.photo-license-plate{
  position:absolute;
  left:50%;
  bottom:9px;
  transform:translateX(-50%);
  width:86px;
  height:22px;
  display:grid;
  grid-template-columns:17px 1fr;
  overflow:hidden;
  border-radius:4px;
  border:2px solid #151b22;
  background:#ffc400;
  box-shadow:0 8px 18px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.16) inset;
  pointer-events:none;
}
.photo-license-plate__eu{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:2px;
  background:#0647b8;
  color:#fff;
  font-size:7px;
  font-weight:900;
  line-height:1;
}
.photo-license-plate__eu::before{
  content:"";
  position:absolute;
  left:4px;
  top:3px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 0%, #ffd84a 0 1px, transparent 1.5px),
    radial-gradient(circle at 100% 50%, #ffd84a 0 1px, transparent 1.5px),
    radial-gradient(circle at 50% 100%, #ffd84a 0 1px, transparent 1.5px),
    radial-gradient(circle at 0% 50%, #ffd84a 0 1px, transparent 1.5px);
}
.photo-license-plate strong{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111820;
  font-family:Arial Black, Impact, system-ui, sans-serif;
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1;
  text-transform:uppercase;
}
.history-car-silhouette{
  position:relative;
  width:154px;
  height:58px;
  border-radius:12px 26px 14px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 32%),
    linear-gradient(135deg,#111820,#05070a);
  border-bottom:4px solid #ff8a24;
  box-shadow:0 12px 24px rgba(0,0,0,.38), inset 0 -8px 18px rgba(255,138,36,.18);
}
.history-car-silhouette::before{
  content:"";
  position:absolute;
  left:35px;
  top:-12px;
  width:64px;
  height:30px;
  border-radius:48px 48px 8px 8px;
  background:linear-gradient(135deg,#0c1218,#1e2933);
  border:1px solid rgba(255,255,255,.16);
}
.history-car-silhouette::after{
  content:"";
  position:absolute;
  left:16px;
  right:18px;
  bottom:-10px;
  height:18px;
  background:
    radial-gradient(circle at 15px 9px,#05070a 0 8px,#ff8a24 9px 10px,transparent 11px),
    radial-gradient(circle at calc(100% - 15px) 9px,#05070a 0 8px,#ff8a24 9px 10px,transparent 11px);
}
.history-car-silhouette span{
  position:absolute;
  right:-5px;
  top:16px;
  width:34px;
  height:5px;
  border-radius:999px;
  background:#ff8a24;
  box-shadow:-96px 6px 0 rgba(255,138,36,.72);
}
.history-vehicle-main{padding:16px 18px}
.history-vehicle-main h2{font-size:16px}
.history-vehicle-meta{margin-top:8px;font-size:14px}
.history-active-dot{margin-top:18px;font-size:12px}
.history-spec{padding:16px 18px;gap:7px}
.history-spec span{font-size:11px}
.history-spec strong{font-size:13px}
.license-plate{
  width:118px;
  height:30px;
  display:grid;
  grid-template-columns:22px 1fr;
  overflow:hidden;
  border-radius:5px;
  border:2px solid #18222d;
  background:#ffc400;
  box-shadow:0 1px 0 rgba(255,255,255,.26) inset, 0 0 0 1px rgba(255,196,0,.24);
}
.license-plate__eu{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:3px 0 2px;
  color:#fff;
  background:#0647b8;
}
.license-plate__stars{
  width:13px;
  height:13px;
  border-radius:999px;
  position:relative;
  font-size:0;
  background:
    radial-gradient(circle at 50% 0%, #ffd84a 0 1px, transparent 1.5px),
    radial-gradient(circle at 85% 15%, #ffd84a 0 1px, transparent 1.5px),
    radial-gradient(circle at 100% 50%, #ffd84a 0 1px, transparent 1.5px),
    radial-gradient(circle at 85% 85%, #ffd84a 0 1px, transparent 1.5px),
    radial-gradient(circle at 50% 100%, #ffd84a 0 1px, transparent 1.5px),
    radial-gradient(circle at 15% 85%, #ffd84a 0 1px, transparent 1.5px),
    radial-gradient(circle at 0% 50%, #ffd84a 0 1px, transparent 1.5px),
    radial-gradient(circle at 15% 15%, #ffd84a 0 1px, transparent 1.5px);
}
.license-plate__nl{
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:0;
}
.license-plate > strong{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
  color:#101820;
  font-family:Arial Black, Impact, system-ui, sans-serif;
  font-size:13px;
  line-height:1;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
  word-break:normal;
}
.history-vehicle-action{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:14px}
.history-vehicle-action form{display:inline-flex}
.history-vehicle-action .btn{border-radius:7px;font-size:12px}
.history-car-edit-btn::before{content:"";width:14px;height:14px;margin-right:7px;background:currentColor;display:inline-block;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9L18.4 10c-.3-.6-.7-1.1-1.2-1.5L15.8 7.1c-.4-.4-.9-.6-1.4-.6H6.6c-.8 0-1.5.5-1.8 1.2L3.5 11.1C2.6 11.3 2 12.1 2 13v3c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E") center / contain no-repeat}
.history-icon-btn::before,.history-empty-action::before{
  content:"";
  width:13px;
  height:13px;
  margin-right:6px;
  display:inline-block;
  background:currentColor;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
.history-icon-btn-work::before,.history-empty-action::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 15h6'/%3E%3Cpath d='M12 12v6'/%3E%3C/svg%3E")}
.history-icon-btn-print::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v8H6z'/%3E%3C/svg%3E")}
.history-icon-btn-note::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3Cpath d='M8 9h8'/%3E%3Cpath d='M8 13h5'/%3E%3C/svg%3E")}
.history-quick-card{grid-template-columns:38px minmax(0,1fr) auto;padding:14px 18px}
.history-quick-icon{width:34px;height:34px;font-size:18px}
.history-quick-card h2{font-size:13px}
.history-quick-card p{font-size:11px;margin-top:4px}
.history-quick-actions .btn-primary{
  min-width:176px;
  min-height:34px;
  border-radius:7px;
  background:linear-gradient(180deg,#2eba69,#188246);
  border-color:rgba(73,214,134,.38);
}
.history-grid{grid-template-columns:minmax(0,1.48fr) minmax(350px,.98fr);gap:14px}
.history-panel{padding:14px}
.history-panel-head{margin-bottom:12px}
.history-panel-head h2{font-size:14px}
.history-panel-actions{gap:8px}
.history-filter{width:106px;min-height:30px;padding:6px 9px;border-radius:7px;font-size:11px}
.history-workorders{gap:8px}
.history-workorder{
  grid-template-columns:36px minmax(0,1fr) 78px 84px 78px 20px;
  gap:12px;
  min-height:64px;
  padding:12px 10px 12px 12px;
  border-radius:7px;
  background:rgba(17,30,43,.74);
  border-color:rgba(77,105,135,.18);
  box-shadow:inset 3px 0 0 rgba(255,255,255,.14);
  align-items:center;
}
.history-workorder--klaar{box-shadow:inset 3px 0 0 #22c77a}
.history-workorder--ingepland{box-shadow:inset 3px 0 0 #2d9cff}
.history-workorder--bezig{box-shadow:inset 3px 0 0 #ffc107}
.history-workorder-icon{width:20px;height:20px;margin-top:0;font-size:9px;color:#56e395;border-color:#22c77a;background:rgba(34,199,122,.10)}
.history-workorder--ingepland .history-workorder-icon{color:#56a8ff;border-color:#2d9cff}
.history-workorder--bezig .history-workorder-icon{color:#ffc107;border-color:#ffc107}
.history-workorder-body h3{font-size:12px;line-height:1.2}
.history-workorder-body p{font-size:10px;margin-top:5px;line-height:1.35;white-space:normal;color:#b2bfd0}
.history-workorder-actions,.history-done-box,.history-photos{display:none}
.history-workorder-data{border-left:1px solid rgba(255,255,255,.035);padding-left:10px;gap:6px}
.history-workorder-data span{font-size:10px}
.history-workorder-data strong{font-size:11px}
.history-status-mini{padding:3px 6px;border-radius:5px;font-size:10px}
.history-more{display:flex;align-items:center;justify-content:center;color:#99a9ba;font-size:18px;line-height:1}
.history-more-menu{position:relative;display:flex;align-items:center;justify-content:center}
.history-more-menu summary{
  width:24px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  list-style:none;
  color:#9fb0c3;
  border-radius:7px;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.history-more-menu summary::-webkit-details-marker{display:none}
.history-more-menu summary:hover,
.history-more-menu[open] summary{
  color:#eef5ff;
  background:rgba(255,255,255,.07);
}
.history-more-menu__panel{
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  min-width:136px;
  z-index:20;
  display:grid;
  gap:4px;
  padding:7px;
  border-radius:8px;
  border:1px solid rgba(122,151,190,.18);
  background:rgba(10,18,29,.98);
  box-shadow:0 14px 28px rgba(0,0,0,.34);
}
.history-more-menu__panel form{display:block;margin:0}
.history-more-menu__item{
  width:100%;
  min-height:30px;
  padding:7px 9px;
  border:0;
  border-radius:6px;
  display:flex;
  align-items:center;
  color:#dce8f7;
  background:transparent;
  font:inherit;
  font-size:12px;
  font-weight:700;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.history-more-menu__item:hover{background:rgba(122,167,255,.13);color:#fff}
.history-more-menu__item--danger{color:#ff9a9a}
.history-more-menu__item--danger:hover{background:rgba(255,107,107,.13);color:#ffd0d0}
.history-timeline{padding-left:0}
.history-timeline::before{left:17px;top:24px;bottom:24px;background:rgba(79,132,189,.34)}
.history-timeline-item{
  grid-template-columns:34px minmax(0,1fr) 16px;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.history-timeline-item:last-child{border-bottom:none}
.history-timeline-dot{width:28px;height:28px;font-size:10px}
.history-timeline-item h3{font-size:12px;line-height:1.2}
.history-timeline-meta{font-size:10px;margin-top:4px}
.history-timeline-item p{font-size:10px;margin-top:7px;white-space:normal}
.history-timeline-price{display:block;margin-top:6px;font-size:11px;color:#f4f7ff}
.history-empty{padding:22px;border-radius:7px;font-size:12px}
.history-empty-card{
  min-height:192px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:24px;
  border-radius:7px;
  border:1px dashed rgba(118,143,174,.26);
  background:rgba(9,18,29,.18);
  text-align:center;
  color:#c8d5e6;
}
.history-empty-icon{
  width:46px;
  height:46px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#dce8f7;
  background:linear-gradient(180deg, rgba(72,92,121,.7), rgba(31,47,68,.74));
  border:1px solid rgba(142,163,190,.12);
  margin-bottom:7px;
}
.history-empty-icon .history-icon{width:23px;height:23px}
.history-empty-card strong{font-size:13px;color:#eef5ff}
.history-empty-card span{font-size:11px;color:#aebdd0}
.history-empty-action{
  margin-top:5px;
  color:#75a4ff;
  background:rgba(47,103,216,.16);
  border-color:rgba(73,129,241,.24);
}

@media(max-width:1180px){
  .sidebar{width:150px}
  .main{margin-left:150px}
  .history-vehicle-card{grid-template-columns:58px minmax(0,1fr) repeat(2,minmax(120px,.5fr))}
  .history-vehicle-card .history-spec:last-child{grid-column:2 / -1;border-left:none;border-top:1px solid rgba(255,255,255,.07)}
  .history-vehicle-action{grid-column:auto;justify-content:flex-end;border-top:none}
  .history-grid{grid-template-columns:1fr}
}
@media(max-width:780px){
  .sidebar{width:240px}
  .main{margin-left:240px}
  .history-titleblock{grid-template-columns:1fr}
  .history-title{font-size:30px}
  .history-hero-action{margin-left:0}
  .history-vehicle-card{grid-template-columns:1fr}
  .history-vehicle-icon{margin:14px 18px 0}
  .history-vehicle-main{padding-top:8px}
  .history-spec{border-left:none;border-top:1px solid rgba(255,255,255,.07);padding:14px 18px}
  .history-quick-card{grid-template-columns:1fr}
  .history-quick-actions{justify-content:stretch}
  .history-quick-actions .btn{width:100%}
  .history-panel-head{align-items:flex-start;flex-direction:column}
  .history-filter{width:100%}
  .history-workorder{grid-template-columns:32px minmax(0,1fr) 18px}
  .history-workorder-data{grid-column:2;border-left:none;padding-left:0;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:4px}
  .history-more{grid-column:3;grid-row:1}
}

body:has(.history-shell){
  background:#050c13;
}
body:has(.history-shell) .bg{
  opacity:.08;
  background-size:48px 48px;
}
body:has(.history-shell) .sidebar{
  width:260px;
  padding:24px 18px;
  background:linear-gradient(90deg, rgba(8,15,25,.96), rgba(7,13,21,.86));
  border-right-color:rgba(149,164,190,.13);
  box-shadow:16px 0 44px rgba(0,0,0,.22);
}
body:has(.history-shell) .main{margin-left:260px}
body:has(.history-shell).sidebar-collapsed .main{margin-left:0}
body:has(.history-shell) .topbar{display:none}
body:has(.history-shell) .content{
  padding:14px 18px 28px 26px;
}
body:has(.history-shell) .brand{
  min-height:58px;
  padding:14px 18px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
}
body:has(.history-shell) .brand-logo{width:26px;height:26px}
body:has(.history-shell) .brand-name{font-size:18px}
body:has(.history-shell) .nav{
  gap:10px;
  margin-top:8px;
}
body:has(.history-shell) .nav a{
  min-height:48px;
  display:flex;
  align-items:center;
  padding:12px 16px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
}
body:has(.history-shell) .nav a.active{
  background:linear-gradient(135deg,rgba(57,111,255,.42),rgba(91,72,235,.28));
  border-color:rgba(88,135,255,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 26px rgba(44,94,255,.17);
}
body:has(.history-shell) .nav a::before{display:none}
body:has(.history-shell) .nav a[href="/dashboard"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E")}
body:has(.history-shell) .nav a[href="/klanten"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
body:has(.history-shell) .nav a[href="/agenda"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")}
body:has(.history-shell) .nav a[href="/instellingen"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5z'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.4 1.1V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 8 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1.1-.4H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 8a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-.6 1.65 1.65 0 0 0 .4-1.1V3a2 2 0 1 1 4 0v.09A1.65 1.65 0 0 0 15 4.6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.3.39.46.87.46 1.36s-.16.97-.46 1.36z'/%3E%3C/svg%3E")}
body:has(.history-shell) .nav a[href="/dashboard-2"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11H5a2 2 0 0 0-2 2v7h6z'/%3E%3Cpath d='M21 8h-4a2 2 0 0 0-2 2v10h6z'/%3E%3Cpath d='M15 4h-4a2 2 0 0 0-2 2v14h6z'/%3E%3C/svg%3E")}
body:has(.history-shell) .dashboard-sidebar-extra{
  display:grid;
  gap:18px;
  margin-top:auto;
}
body:has(.history-shell) .dashboard-upgrade-card{
  display:grid;
  gap:10px;
  padding:18px;
  border-radius:12px;
  border:1px solid rgba(149,164,190,.12);
  background:linear-gradient(145deg,rgba(29,38,52,.86),rgba(15,22,32,.78));
}
body:has(.history-shell) .dashboard-upgrade-card strong{color:#fff;font-size:13px}
body:has(.history-shell) .dashboard-upgrade-card span{color:#9fb0c3;font-size:12px;line-height:1.45}
body:has(.history-shell) .dashboard-upgrade-card a{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  background:linear-gradient(135deg,#8a44ff,#2f70ff);
}
body:has(.history-shell) .dashboard-sidebar-user{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  color:#eaf1fb;
  text-decoration:none;
  padding:8px 2px;
}
body:has(.history-shell) .dashboard-sidebar-user strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}
body:has(.history-shell) .dashboard-sidebar-user small{
  display:block;
  margin-top:2px;
  color:#9fb0c3;
  font-size:12px;
}
body:has(.history-shell) .sidebar-footer{
  display:none;
}
body:has(.history-shell) .history-shell{
  gap:14px;
  max-width:1540px;
  margin:0 auto;
}
body:has(.history-shell) .history-topline{
  height:34px;
}
body:has(.history-shell) .history-back{
  min-height:34px;
  padding:8px 15px;
}
body:has(.history-shell) .history-hero{
  min-height:64px;
  align-items:flex-start;
}
body:has(.history-shell) .history-title{
  font-size:28px;
  text-shadow:0 1px 0 rgba(255,255,255,.22), 0 8px 20px rgba(0,0,0,.34);
}
body:has(.history-shell) .history-status-pill{
  margin-top:1px;
}
body:has(.history-shell) .history-hero-action{
  margin-top:14px;
  min-width:130px;
}
body:has(.history-shell) .history-vehicle-card{
  min-height:130px;
  grid-template-columns:58px minmax(220px,1.15fr) minmax(170px,.8fr) minmax(170px,.8fr) minmax(150px,.62fr);
  column-gap:18px;
  padding:0 18px;
}
body:has(.history-shell) .history-vehicle-main{
  padding-left:0;
}
body:has(.history-shell) .history-vehicle-main h2{
  font-size:18px;
}
body:has(.history-shell) .history-vehicle-meta{
  font-size:13px;
}
body:has(.history-shell) .history-spec{
  min-height:80px;
  padding:12px 18px;
}
body:has(.history-shell) .history-spec strong{
  font-size:13px;
}
body:has(.history-shell) .history-spec strong + span{
  margin-top:4px;
}
body:has(.history-shell) .history-quick-card{
  min-height:75px;
  padding:14px 20px;
}
body:has(.history-shell) .history-quick-icon{
  width:38px;
  height:38px;
}
body:has(.history-shell) .history-grid{
  grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);
  gap:14px;
  align-items:stretch;
}
body:has(.history-shell) .history-panel{
  min-height:286px;
  padding:18px;
  display:flex;
  flex-direction:column;
}
body:has(.history-shell) .history-panel-head{
  min-height:34px;
  margin-bottom:18px;
}
body:has(.history-shell) .history-panel-head h2{
  font-size:15px;
}
body:has(.history-shell) .history-panel-actions{
  margin-left:auto;
}
body:has(.history-shell) .history-filter,
body:has(.history-shell) .history-panel-head .btn{
  min-height:31px;
  border-radius:7px;
}
body:has(.history-shell) .history-workorders{
  flex:1;
  align-content:start;
}
body:has(.history-shell) .history-workorder{
  grid-template-columns:32px minmax(160px,1fr) 72px 72px 86px 16px;
  min-height:92px;
  gap:12px;
  padding:16px 14px;
  border-radius:7px;
  background:rgba(17,31,45,.76);
  border-color:rgba(108,135,168,.22);
  box-shadow:inset 3px 0 0 rgba(44,218,142,.68);
}
body:has(.history-shell) .history-workorder-icon{
  width:22px;
  height:22px;
  border-radius:999px;
  font-size:0;
}
body:has(.history-shell) .history-workorder-icon::before{
  content:"";
  width:12px;
  height:12px;
  background:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
body:has(.history-shell) .history-workorder-body h3{
  font-size:13px;
}
body:has(.history-shell) .history-workorder-body p{
  color:#c3d0e1;
  font-size:11px;
}
body:has(.history-shell) .history-workorder-data{
  border-left:1px solid rgba(255,255,255,.06);
}
body:has(.history-shell) .history-workorder-data span{
  font-size:10px;
}
body:has(.history-shell) .history-status-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  min-height:25px;
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}
body:has(.history-shell) .history-presence{
  margin-top:7px;
}
body:has(.history-shell) .history-timeline{
  flex:1;
  padding:2px 2px 0;
}
body:has(.history-shell) .history-timeline::before{
  left:19px;
  top:22px;
  bottom:22px;
}
body:has(.history-shell) .history-timeline-item{
  grid-template-columns:32px minmax(0,1fr) 18px;
  padding:13px 0;
}
body:has(.history-shell) .history-timeline-dot{
  width:28px;
  height:28px;
  color:#101820;
  background:#ffbf1f;
}
body:has(.history-shell) .history-timeline-item h3{
  font-size:12px;
}
body:has(.history-shell) .history-timeline-meta,
body:has(.history-shell) .history-timeline-item p{
  color:#9fb0c3;
  font-size:10px;
}
body:has(.history-shell) .history-empty-card{
  min-height:194px;
  padding:28px;
}
body:has(.history-shell) .history-empty-icon{
  width:47px;
  height:47px;
}

@media(max-width:1180px){
  body:has(.history-shell) .history-grid{grid-template-columns:1fr}
  body:has(.history-shell) .history-vehicle-card{grid-template-columns:58px minmax(0,1fr) repeat(2,minmax(130px,.55fr))}
}
@media(max-width:780px){
  body:has(.history-shell) .sidebar{width:240px}
  body:has(.history-shell) .main{margin-left:240px}
  body:has(.history-shell).sidebar-collapsed .main{margin-left:0}
  body:has(.history-shell) .content{padding:14px}
  body:has(.history-shell) .history-hero-action{margin-top:0}
  body:has(.history-shell) .history-vehicle-card{grid-template-columns:1fr}
}

/* Klanten overzicht - dashboard layout */
body:has(.klanten-shell) .sidebar{
  width:260px;
  padding:24px 18px;
  background:linear-gradient(90deg, rgba(8,15,25,.96), rgba(7,13,21,.86));
  border-right-color:rgba(149,164,190,.13);
  box-shadow:16px 0 44px rgba(0,0,0,.22);
}
body:has(.klanten-shell) .main{margin-left:260px}
body:has(.klanten-shell).sidebar-collapsed .main{margin-left:0}
body:has(.klanten-shell) .brand{
  min-height:58px;
  padding:14px 18px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
}
body:has(.klanten-shell) .brand-logo{width:26px;height:26px}
body:has(.klanten-shell) .brand-name{font-size:18px}
body:has(.klanten-shell) .nav{gap:10px;margin-top:8px}
body:has(.klanten-shell) .nav a{
  min-height:48px;
  display:flex;
  align-items:center;
  border-radius:10px;
  padding:12px 16px;
  font-weight:700;
  font-size:14px;
}
body:has(.klanten-shell) .nav a.active{
  padding-left:16px;
  background:linear-gradient(135deg,rgba(57,111,255,.42),rgba(91,72,235,.28));
  border-color:rgba(88,135,255,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 26px rgba(44,94,255,.17);
}
body:has(.klanten-shell) .sidebar-footer{display:none}
body:has(.klanten-shell) .dashboard-sidebar-extra{
  display:grid;
  gap:18px;
  margin-top:auto;
}
body:has(.klanten-shell) .dashboard-upgrade-card{
  display:grid;
  gap:10px;
  padding:18px;
  border-radius:12px;
  border:1px solid rgba(149,164,190,.12);
  background:linear-gradient(145deg,rgba(29,38,52,.86),rgba(15,22,32,.78));
}
body:has(.klanten-shell) .dashboard-upgrade-card strong{color:#fff;font-size:13px}
body:has(.klanten-shell) .dashboard-upgrade-card span{color:#9fb0c3;font-size:12px;line-height:1.45}
body:has(.klanten-shell) .dashboard-upgrade-card a{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  background:linear-gradient(135deg,#8a44ff,#2f70ff);
}
body:has(.klanten-shell) .dashboard-sidebar-user{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  color:#eaf1fb;
  text-decoration:none;
  padding:8px 2px;
}
body:has(.klanten-shell) .dashboard-sidebar-user strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
body:has(.klanten-shell) .dashboard-sidebar-user small{display:block;margin-top:2px;color:#9fb0c3;font-size:12px}
body:has(.klanten-shell) .topbar{
  height:0;
  min-height:0;
  padding:0;
  border:0;
  overflow:visible;
  background:transparent;
}
body:has(.klanten-shell) .topbar .user-menu{display:none}
body:has(.klanten-shell) .sidebar-toggle{
  display:none;
}
body:has(.klanten-shell) .sidebar-toggle::before{
  content:"";
  position:absolute;
  left:17px;
  top:50%;
  width:14px;
  height:14px;
  transform:translateY(-50%);
  background:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h10'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E") center / contain no-repeat;
}
body:has(.dashboard-shell) .nav a,
body:has(.klanten-shell) .nav a{padding-left:46px}
body:has(.dashboard-shell) .nav a.active,
body:has(.klanten-shell) .nav a.active{padding-left:46px}
body:has(.dashboard-shell) .nav a::before,
body:has(.klanten-shell) .nav a::before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  background:#d9e6f6;
  opacity:.84;
  mask:center/contain no-repeat;
}
body:has(.dashboard-shell) .nav a.active::before,
body:has(.klanten-shell) .nav a.active::before{opacity:1}
body:has(.dashboard-shell) .nav a[href="/dashboard"]::before,
body:has(.klanten-shell) .nav a[href="/dashboard"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E")}
body:has(.dashboard-shell) .nav a[href="/klanten"]::before,
body:has(.klanten-shell) .nav a[href="/klanten"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E")}
body:has(.dashboard-shell) .nav a[href="/agenda"]::before,
body:has(.klanten-shell) .nav a[href="/agenda"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")}
body:has(.dashboard-shell) .nav a[href="/instellingen"]::before,
body:has(.klanten-shell) .nav a[href="/instellingen"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.5 1.2V21a2 2 0 1 1-4 0v-.09A1.7 1.7 0 0 0 8 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 3.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.2-.5H2a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 3.6 8a1.7 1.7 0 0 0-.34-1.88l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 8 3.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .5-1.2V2a2 2 0 1 1 4 0v.09A1.7 1.7 0 0 0 15 3.6a1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 8c.14.37.36.7.6 1 .31.31.74.5 1.2.5H21a2 2 0 1 1 0 4h-.09A1.7 1.7 0 0 0 19.4 15Z'/%3E%3C/svg%3E")}
body:has(.dashboard-shell) .nav a[href="/dashboard-2"]::before,
body:has(.klanten-shell) .nav a[href="/dashboard-2"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E")}
body:has(.klanten-shell) .content{padding:28px 32px 54px}

.klanten-shell{
  max-width:1600px;
  margin:0 auto;
  padding-top:0;
}
.klanten-pagehead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin-bottom:22px;
}
.klanten-pagehead .h1{font-size:32px;margin-bottom:4px}
.klanten-pagehead .p{margin:0;color:#c0ccda}
.klanten-head-actions{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.klanten-date-pill,
.klanten-add-btn,
.klanten-view-btn,
.klanten-filter-wrap,
.klanten-search-wrap,
.klanten-action,
.klanten-pagination button{
  min-height:48px;
  border-radius:10px;
  border:1px solid rgba(149,164,190,.18);
  background:rgba(10,16,25,.66);
  color:#eef4ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.klanten-date-pill{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 18px;
  font-size:13px;
  font-weight:800;
}
.klanten-add-btn{
  gap:10px;
  padding-inline:20px;
  background:linear-gradient(135deg,#2f70ff,#6b48ff);
  border-color:rgba(123,148,255,.74);
  box-shadow:0 12px 26px rgba(47,112,255,.28);
}
.klanten-add-btn span{font-size:22px;line-height:1}
.klanten-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-bottom:26px;
}
.klanten-kpi{
  min-height:96px;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  grid-template-rows:auto auto auto;
  column-gap:16px;
  align-items:center;
  padding:18px 24px;
  border-radius:8px;
  border:1px solid rgba(109,137,177,.28);
  background:linear-gradient(145deg,rgba(22,34,50,.82),rgba(12,18,28,.74));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 42px rgba(0,0,0,.18);
}
.klanten-kpi-icon{
  grid-row:1 / 4;
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.klanten-kpi-purple{background:linear-gradient(135deg,#8b35ff,#5d2de1);box-shadow:0 0 34px rgba(139,53,255,.46)}
.klanten-kpi-blue{background:linear-gradient(135deg,#3f7bff,#1e54e6);box-shadow:0 0 34px rgba(47,112,255,.42)}
.klanten-kpi-green{background:linear-gradient(135deg,#22c56d,#14a355);box-shadow:0 0 34px rgba(34,197,109,.38)}
.klanten-kpi-yellow{background:linear-gradient(135deg,#f4bd18,#d99500);box-shadow:0 0 34px rgba(244,189,24,.40)}
.klanten-kpi-orange{background:linear-gradient(135deg,#ef7c22,#b95607);box-shadow:0 0 34px rgba(239,124,34,.36)}
.klanten-kpi-label{
  color:#aebbd0;
  font-size:10px;
  line-height:1.15;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.klanten-kpi strong{font-size:26px;line-height:1.05;color:#fff}
.klanten-kpi small{color:#c0ccda;font-size:12px}
.klanten-controls{
  display:grid;
  grid-template-columns:minmax(280px,1fr) 240px 58px;
  gap:18px;
  margin-bottom:26px;
}
.klanten-search-wrap,
.klanten-filter-wrap{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:0 18px;
}
.klanten-search-wrap input,
.klanten-filter-wrap select{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#eef4ff;
  font:inherit;
  font-size:14px;
}
.klanten-search-wrap input::placeholder{color:#8fa0b5}
.klanten-filter-wrap select{font-weight:800;appearance:none}
.klanten-filter-wrap option{color:#111827;background:#fff}
.klanten-view-btn{display:flex;align-items:center;justify-content:center;padding:0}
.klanten-list-card{
  display:grid;
  gap:16px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.klanten-row-list{display:grid;gap:12px}
.klanten-row{
  min-height:110px;
  display:grid;
  grid-template-columns:74px minmax(220px,1.15fr) minmax(170px,.45fr) minmax(140px,.35fr) auto;
  gap:18px;
  align-items:center;
  padding:22px 24px;
  border-radius:8px;
  border:1px solid rgba(109,137,177,.20);
  background:linear-gradient(145deg,rgba(18,30,43,.86),rgba(10,17,27,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.klanten-row[hidden]{display:none}
.klanten-avatar{
  width:58px;
  height:58px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:21px;
  font-weight:900;
  box-shadow:0 0 34px rgba(47,112,255,.28);
}
.klanten-avatar-0{background:linear-gradient(135deg,#3f7bff,#174eed)}
.klanten-avatar-1{background:linear-gradient(135deg,#8b35ff,#5d2de1)}
.klanten-avatar-2{background:linear-gradient(135deg,#1ecb73,#07934a)}
.klanten-person{display:grid;gap:7px;min-width:0}
.klanten-person strong{
  color:#fff;
  font-size:18px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.klanten-person span{color:#e3ebf7;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.klanten-person small{display:flex;align-items:center;gap:8px;color:#d5deeb;font-size:13px}
.klanten-meta{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:12px;
  align-items:center;
  color:#eaf1fb;
  min-width:0;
}
.klanten-meta span:last-child{display:grid;gap:4px;min-width:0}
.klanten-meta small{color:#aebbd0;font-size:12px}
.klanten-meta strong{color:#fff;font-size:14px;font-weight:750}
.klanten-actions{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.klanten-actions form{display:inline-flex;margin:0}
.klanten-action{
  min-width:118px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#eef4ff;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
}
.klanten-action-edit{color:#5285ff;border-color:rgba(47,112,255,.62);background:rgba(47,112,255,.07)}
.klanten-action-delete{
  min-width:48px;
  width:48px;
  padding:0;
  color:#ff4d4d;
  border-color:rgba(255,77,77,.62);
  background:rgba(255,77,77,.08);
}
.klanten-pagination{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 24px;
  margin-top:4px;
  border-radius:8px;
  border:1px solid rgba(109,137,177,.20);
  background:linear-gradient(145deg,rgba(18,30,43,.72),rgba(10,17,27,.72));
  color:#d2ddec;
}
.klanten-pagination > div{display:flex;gap:12px}
.klanten-pagination button{
  width:44px;
  min-height:44px;
  padding:0;
  font-size:20px;
}
.klanten-pagination button.active{
  font-size:15px;
  font-weight:900;
  background:linear-gradient(135deg,#2f70ff,#5d64ff);
  border-color:rgba(123,148,255,.74);
}
.klanten-pagination button:disabled{opacity:.48}
.klanten-icon{
  width:18px;
  height:18px;
  display:inline-block;
  flex:0 0 auto;
  background:currentColor;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
}
.klanten-kpi-icon.klanten-icon-users,
.klanten-kpi-icon.klanten-icon-user-plus,
.klanten-kpi-icon.klanten-icon-activity,
.klanten-kpi-icon.klanten-icon-calendar,
.klanten-kpi-icon.klanten-icon-work,
.klanten-kpi-icon.klanten-icon-map,
.klanten-kpi-icon.klanten-icon-coins{
  mask-image:none;
}
.klanten-kpi-icon::after{
  content:"";
  width:26px;
  height:26px;
  background:currentColor;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
}
.klanten-icon-users{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.klanten-icon-user-plus{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E")}
.klanten-icon-activity{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 8L9 4l-3 8H2'/%3E%3C/svg%3E")}
.klanten-icon-work{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9l-3.8 3.8z'/%3E%3C/svg%3E")}
.klanten-icon-map{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4.5 9.5 2 3 5.5v16l6.5-3.5 5 2.5 6.5-3.5v-16l-6.5 3.5z'/%3E%3Cpath d='M9.5 2v16'/%3E%3Cpath d='M14.5 4.5v16'/%3E%3C/svg%3E")}
.klanten-icon-coins{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5'/%3E%3Cpath d='M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6'/%3E%3C/svg%3E")}
.klanten-icon-calendar{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")}
.klanten-icon-search{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}
.klanten-icon-filter{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3H2l8 9.5V20l4 2v-9.5L22 3z'/%3E%3C/svg%3E")}
.klanten-icon-sliders{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7'/%3E%3Cpath d='M4 10V3'/%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 8V3'/%3E%3Cpath d='M20 21v-5'/%3E%3Cpath d='M20 12V3'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M10 8h4'/%3E%3Cpath d='M18 16h4'/%3E%3C/svg%3E")}
.klanten-icon-phone{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.35 1.9.65 2.81a2 2 0 0 1-.45 2.11L8.1 9.9a16 16 0 0 0 6 6l1.26-1.21a2 2 0 0 1 2.11-.45c.91.3 1.85.52 2.81.65A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")}
.klanten-icon-car{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9L18.4 10c-.3-.6-.7-1.1-1.2-1.5L15.8 7.1c-.4-.4-.9-.6-1.4-.6H6.6c-.8 0-1.5.5-1.8 1.2L3.5 11.1C2.6 11.3 2 12.1 2 13v3c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E")}
.klanten-icon-eye{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.klanten-icon-pencil{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E")}
.klanten-icon-trash{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E")}
.klanten-kpi-icon.klanten-icon-users::after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.klanten-kpi-icon.klanten-icon-user-plus::after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E")}
.klanten-kpi-icon.klanten-icon-activity::after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 8L9 4l-3 8H2'/%3E%3C/svg%3E")}
.klanten-kpi-icon.klanten-icon-calendar::after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")}
.klanten-kpi-icon.klanten-icon-work::after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9l-3.8 3.8z'/%3E%3C/svg%3E")}
.klanten-kpi-icon.klanten-icon-map::after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4.5 9.5 2 3 5.5v16l6.5-3.5 5 2.5 6.5-3.5v-16l-6.5 3.5z'/%3E%3Cpath d='M9.5 2v16'/%3E%3Cpath d='M14.5 4.5v16'/%3E%3C/svg%3E")}
.klanten-kpi-icon.klanten-icon-coins::after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5'/%3E%3Cpath d='M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6'/%3E%3C/svg%3E")}

@media(max-width:1220px){
  .klanten-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .klanten-row{grid-template-columns:74px minmax(220px,1fr) minmax(140px,.45fr);align-items:start}
  .klanten-actions{grid-column:2 / -1;justify-content:flex-start}
}
@media(max-width:820px){
  body:has(.klanten-shell) .sidebar{width:240px}
  body:has(.klanten-shell) .main{margin-left:240px}
  body:has(.klanten-shell) .content{padding:22px 16px 40px}
  .klanten-shell{padding-top:0}
  .klanten-pagehead{align-items:flex-start;flex-direction:column}
  .klanten-head-actions{width:100%;justify-content:stretch}
  .klanten-date-pill,.klanten-add-btn{flex:1}
  .klanten-kpi-grid{grid-template-columns:1fr;gap:12px}
  .klanten-controls{grid-template-columns:1fr}
  .klanten-view-btn{display:none}
  .klanten-row{grid-template-columns:58px minmax(0,1fr);gap:14px;padding:18px}
  .klanten-avatar{width:48px;height:48px;font-size:17px}
  .klanten-person strong{font-size:16px}
  .klanten-meta,.klanten-actions{grid-column:2}
  .klanten-action{min-width:0;flex:1}
  .klanten-pagination{align-items:flex-start;flex-direction:column;padding:18px}
}

/* Klant detail - screenshot layout */
body:has(.klant-detail-shell) .sidebar{
  width:260px;
  padding:24px 18px;
  background:linear-gradient(90deg, rgba(8,15,25,.96), rgba(7,13,21,.86));
  border-right-color:rgba(149,164,190,.13);
  box-shadow:16px 0 44px rgba(0,0,0,.22);
}
body:has(.klant-detail-shell) .main{margin-left:260px}
body:has(.klant-detail-shell).sidebar-collapsed .main{margin-left:0}
body:has(.klant-detail-shell) .brand{
  min-height:58px;
  padding:14px 18px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
}
body:has(.klant-detail-shell) .brand-logo{width:26px;height:26px}
body:has(.klant-detail-shell) .brand-name{font-size:18px}
body:has(.klant-detail-shell) .nav{gap:10px;margin-top:8px}
body:has(.klant-detail-shell) .nav a{
  min-height:48px;
  display:flex;
  align-items:center;
  border-radius:10px;
  padding:12px 16px;
  font-weight:700;
  font-size:14px;
}
body:has(.klant-detail-shell) .nav a.active{
  padding-left:16px;
  background:linear-gradient(135deg,rgba(57,111,255,.42),rgba(91,72,235,.28));
  border-color:rgba(88,135,255,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 26px rgba(44,94,255,.17);
}
body:has(.klant-detail-shell) .sidebar-footer{display:none}
body:has(.klant-detail-shell) .dashboard-sidebar-extra{
  display:grid;
  gap:18px;
  margin-top:auto;
}
body:has(.klant-detail-shell) .dashboard-upgrade-card{
  display:grid;
  gap:10px;
  padding:18px;
  border-radius:12px;
  border:1px solid rgba(149,164,190,.12);
  background:linear-gradient(145deg,rgba(29,38,52,.86),rgba(15,22,32,.78));
}
body:has(.klant-detail-shell) .dashboard-upgrade-card strong{color:#fff;font-size:13px}
body:has(.klant-detail-shell) .dashboard-upgrade-card span{color:#9fb0c3;font-size:12px;line-height:1.45}
body:has(.klant-detail-shell) .dashboard-upgrade-card a{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  background:linear-gradient(135deg,#8a44ff,#2f70ff);
}
body:has(.klant-detail-shell) .dashboard-sidebar-user{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  color:#eaf1fb;
  text-decoration:none;
  padding:8px 2px;
}
body:has(.klant-detail-shell) .dashboard-sidebar-user strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
body:has(.klant-detail-shell) .dashboard-sidebar-user small{display:block;margin-top:2px;color:#9fb0c3;font-size:12px}
body:has(.klant-detail-shell) .topbar{
  height:0;
  min-height:0;
  padding:0;
  border:0;
  overflow:visible;
  background:transparent;
}
body:has(.klant-detail-shell) .topbar .user-menu,
body:has(.klant-detail-shell) .sidebar-toggle{display:none}
body:has(.klant-detail-shell) .content{padding:38px 44px 54px}
body:has(.klant-detail-shell) .nav a,
body:has(.history-shell) .nav a{padding-left:46px}
body:has(.klant-detail-shell) .nav a.active,
body:has(.history-shell) .nav a.active{padding-left:46px}
body:has(.klant-detail-shell) .nav a::before,
body:has(.history-shell) .nav a::before{
  content:"";
  display:block;
  position:absolute;
  left:16px;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  background:#d9e6f6;
  opacity:.84;
  mask:center/contain no-repeat;
}
body:has(.klant-detail-shell) .nav a.active::before,
body:has(.history-shell) .nav a.active::before{opacity:1}
body:has(.klant-detail-shell) .nav a[href="/dashboard"]::before,
body:has(.history-shell) .nav a[href="/dashboard"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E")}
body:has(.klant-detail-shell) .nav a[href="/klanten"]::before,
body:has(.history-shell) .nav a[href="/klanten"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E")}
body:has(.klant-detail-shell) .nav a[href="/agenda"]::before,
body:has(.history-shell) .nav a[href="/agenda"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")}
body:has(.klant-detail-shell) .nav a[href="/instellingen"]::before,
body:has(.history-shell) .nav a[href="/instellingen"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.5 1.2V21a2 2 0 1 1-4 0v-.09A1.7 1.7 0 0 0 8 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 3.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.2-.5H2a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 3.6 8a1.7 1.7 0 0 0-.34-1.88l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 8 3.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .5-1.2V2a2 2 0 1 1 4 0v.09A1.7 1.7 0 0 0 15 3.6a1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 8c.14.37.36.7.6 1 .31.31.74.5 1.2.5H21a2 2 0 1 1 0 4h-.09A1.7 1.7 0 0 0 19.4 15Z'/%3E%3C/svg%3E")}
body:has(.klant-detail-shell) .nav a[href="/dashboard-2"]::before,
body:has(.history-shell) .nav a[href="/dashboard-2"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E")}

.klant-detail-shell{
  max-width:1560px;
  margin:0 auto;
  display:grid;
  gap:28px;
}
.klant-detail-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.klant-detail-back,
.klant-detail-edit-btn,
.klant-detail-history-btn,
.klant-detail-delete-btn{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:8px;
  border:1px solid rgba(149,164,190,.16);
  color:#eef4ff;
  background:rgba(17,27,41,.78);
  text-decoration:none;
  font-weight:850;
  font-size:14px;
}
.klant-detail-back{padding:0 20px}
.klant-detail-add-top,
.klant-detail-add-inline{
  gap:10px;
  min-height:48px;
  border-radius:8px;
  padding-inline:22px;
  background:linear-gradient(135deg,#2f70ff,#5a3dff);
  border-color:rgba(123,148,255,.74);
  box-shadow:0 12px 26px rgba(47,112,255,.28);
}
.klant-detail-add-top span,
.klant-detail-add-inline span{font-size:24px;line-height:1}
.klant-detail-panel{
  padding:28px;
  border-radius:8px;
  border:1px solid rgba(109,137,177,.22);
  background:linear-gradient(145deg,rgba(14,24,37,.84),rgba(8,15,25,.80));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 42px rgba(0,0,0,.16);
}
.klant-detail-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}
.klant-detail-panel-head h1,
.klant-detail-panel-head h2{
  margin:0;
  color:#fff;
  font-size:26px;
  line-height:1.15;
}
.klant-detail-edit-btn{
  min-width:132px;
  padding:0 18px;
  font-size:13px;
}
.klant-detail-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.klant-detail-info-card{
  min-height:122px;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:22px 24px;
  border-radius:8px;
  border:1px solid rgba(109,137,177,.20);
  background:linear-gradient(145deg,rgba(20,34,50,.72),rgba(12,20,32,.72));
}
.klant-detail-info-icon{
  width:58px;
  height:58px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(47,112,255,.18);
}
.klant-detail-info-blue{background:rgba(47,112,255,.24);color:#3f7bff}
.klant-detail-info-mail{background:rgba(47,112,255,.20);color:#3f8dff}
.klant-detail-info-green{background:rgba(16,185,103,.20);color:#17d579}
.klant-detail-info-orange{background:rgba(239,124,34,.22);color:#ef7c22}
.klant-detail-info-icon.klanten-icon-users,
.klant-detail-info-icon.klanten-icon-phone{
  mask-image:none;
}
.klant-detail-info-icon.klanten-icon-users::after,
.klant-detail-info-icon.klanten-icon-phone::after{
  content:"";
  width:26px;
  height:26px;
  background:currentColor;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
}
.klant-detail-info-icon.klanten-icon-users::after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.klant-detail-info-icon.klanten-icon-phone::after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.35 1.9.65 2.81a2 2 0 0 1-.45 2.11L8.1 9.9a16 16 0 0 0 6 6l1.26-1.21a2 2 0 0 1 2.11-.45c.91.3 1.85.52 2.81.65A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")}
.klant-detail-info-card small{
  display:block;
  color:#aebbd0;
  font-size:13px;
  line-height:1.15;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.klant-detail-info-card strong{
  display:block;
  color:#fff;
  font-size:17px;
  line-height:1.45;
  word-break:break-word;
}
.klant-detail-vehicle-list{display:grid;gap:14px}
.klant-detail-vehicle-card{
  min-height:138px;
  display:grid;
  grid-template-columns:74px minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  padding:26px 24px;
  border-radius:8px;
  border:1px solid rgba(109,137,177,.20);
  background:linear-gradient(145deg,rgba(20,34,50,.72),rgba(12,20,32,.72));
}
.klant-detail-vehicle-icon{
  width:58px;
  height:58px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(148,163,184,.20);
}
.klant-detail-vehicle-icon .klanten-icon{width:28px;height:28px}
.klant-detail-vehicle-main{min-width:0}
.klant-detail-vehicle-main h3{
  margin:0 0 7px;
  color:#fff;
  font-size:26px;
  line-height:1.1;
}
.klant-detail-vehicle-main p{
  margin:0;
  color:#c4d0df;
  font-size:17px;
  line-height:1.35;
  text-transform:uppercase;
}
.klant-detail-primary-chip{
  display:inline-flex;
  margin-top:10px;
  min-height:28px;
  align-items:center;
  padding:0 14px;
  border-radius:8px;
  color:#6da3ff;
  background:rgba(47,112,255,.18);
  font-size:13px;
  font-weight:750;
}
.klant-detail-vehicle-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  flex-wrap:wrap;
}
.klant-detail-vehicle-actions form{display:inline-flex;margin:0}
.klant-detail-history-btn{padding:0 22px}
.klant-detail-delete-btn{
  padding:0 22px;
  border-color:rgba(255,90,90,.48);
  background:linear-gradient(135deg,rgba(193,45,45,.88),rgba(143,30,30,.88));
  cursor:pointer;
}
.klant-detail-empty{
  display:grid;
  gap:8px;
  padding:26px;
  border-radius:8px;
  border:1px solid rgba(109,137,177,.20);
  color:#c4d0df;
  background:linear-gradient(145deg,rgba(20,34,50,.52),rgba(12,20,32,.56));
}
.klant-detail-empty strong{color:#fff;font-size:18px}
.klant-detail-icon-back{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E")}
.klant-detail-icon-history{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 3v6h6'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.klant-detail-icon-mail,
.klant-detail-icon-pin{
  width:58px;
  height:58px;
}
.klant-detail-icon-mail::after,
.klant-detail-icon-pin::after{
  content:"";
  width:26px;
  height:26px;
  background:currentColor;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
}
.klant-detail-icon-mail::after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")}
.klant-detail-icon-pin::after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.9-8 12-8 12S4 14.9 4 10a8 8 0 1 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}

@media(max-width:1180px){
  .klant-detail-info-grid{grid-template-columns:1fr}
  .klant-detail-vehicle-card{grid-template-columns:74px minmax(0,1fr)}
  .klant-detail-vehicle-actions{grid-column:2;justify-content:flex-start}
}
@media(max-width:820px){
  body:has(.klant-detail-shell) .sidebar{width:240px}
  body:has(.klant-detail-shell) .main{margin-left:240px}
  body:has(.klant-detail-shell) .content{padding:22px 16px 40px}
  .klant-detail-topbar,.klant-detail-panel-head{align-items:flex-start;flex-direction:column}
  .klant-detail-add-top,.klant-detail-add-inline,.klant-detail-back{width:100%}
  .klant-detail-panel{padding:18px}
  .klant-detail-info-card{grid-template-columns:58px minmax(0,1fr);padding:18px}
  .klant-detail-info-icon{width:48px;height:48px}
  .klant-detail-icon-mail,.klant-detail-icon-pin{width:48px;height:48px}
  .klant-detail-vehicle-card{grid-template-columns:58px minmax(0,1fr);padding:18px}
  .klant-detail-vehicle-icon{width:48px;height:48px}
  .klant-detail-vehicle-main h3{font-size:21px}
  .klant-detail-vehicle-main p{font-size:14px}
  .klant-detail-vehicle-actions{grid-column:1 / -1}
  .klant-detail-history-btn,.klant-detail-delete-btn{width:100%}
}

/* Agenda - screenshot style */
body:has(.planner-page){--planner-blue:#3157ff;--planner-line:rgba(148,163,184,.13);background:#06101a}
body:has(.planner-page) .topbar{display:none}
body:has(.planner-page) .main{margin-left:260px}
body:has(.planner-page).sidebar-collapsed .main{margin-left:0}
body:has(.planner-page) .content{padding:0}
body:has(.planner-page) .sidebar{width:260px;padding:24px 18px;background:linear-gradient(90deg, rgba(8,15,25,.96), rgba(7,13,21,.86));border-right-color:rgba(149,164,190,.13);box-shadow:16px 0 44px rgba(0,0,0,.22)}
body:has(.planner-page) .brand{min-height:58px;padding:14px 18px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))}
body:has(.planner-page) .brand-logo{width:26px;height:26px}
body:has(.planner-page) .brand-name{font-size:18px}
body:has(.planner-page) .nav{gap:10px;margin-top:8px}
body:has(.planner-page) .nav a{min-height:48px;padding:12px 16px 12px 46px;border-radius:10px;font-size:14px;font-weight:700}
body:has(.planner-page) .nav a.active{padding-left:46px;background:linear-gradient(135deg,rgba(57,111,255,.42),rgba(91,72,235,.28));border-color:rgba(88,135,255,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 26px rgba(44,94,255,.17)}
body:has(.planner-page) .nav a::before{content:"";position:absolute;left:16px;top:50%;width:18px;height:18px;transform:translateY(-50%);background:#d9e6f6;opacity:.84;mask:center/contain no-repeat}
body:has(.planner-page) .nav a.active::before{opacity:1}
body:has(.planner-page) .nav a[href="/dashboard"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E")}
body:has(.planner-page) .nav a[href="/klanten"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E")}
body:has(.planner-page) .nav a[href="/agenda"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")}
body:has(.planner-page) .nav a[href="/instellingen"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.5 1.2V21a2 2 0 1 1-4 0v-.09A1.7 1.7 0 0 0 8 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 3.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.2-.5H2a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 3.6 8a1.7 1.7 0 0 0-.34-1.88l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 8 3.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .5-1.2V2a2 2 0 1 1 4 0v.09A1.7 1.7 0 0 0 15 3.6a1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 8c.14.37.36.7.6 1 .31.31.74.5 1.2.5H21a2 2 0 1 1 0 4h-.09A1.7 1.7 0 0 0 19.4 15Z'/%3E%3C/svg%3E")}
body:has(.planner-page) .nav a[href="/dashboard-2"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E")}
body:has(.planner-page) .dashboard-sidebar-extra{display:grid;gap:18px;margin-top:auto}
body:has(.planner-page) .dashboard-upgrade-card{display:none}
body:has(.planner-page) .dashboard-upgrade-card strong{color:#fff;font-size:13px}
body:has(.planner-page) .dashboard-upgrade-card span{color:#9fb0c3;font-size:12px;line-height:1.45}
body:has(.planner-page) .dashboard-upgrade-card a{min-height:38px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:#fff;text-decoration:none;font-size:12px;font-weight:850;background:linear-gradient(135deg,#8a44ff,#2f70ff)}
body:has(.planner-page) .dashboard-sidebar-user{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;color:#eaf1fb;text-decoration:none;padding:8px 2px}
body:has(.planner-page) .dashboard-sidebar-user strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
body:has(.planner-page) .dashboard-sidebar-user small{display:block;margin-top:2px;color:#9fb0c3;font-size:12px}
body:has(.planner-page) .sidebar-footer{display:none}

.planner-page{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr);gap:0;background:radial-gradient(circle at 55% 20%,rgba(47,112,255,.10),transparent 30%),#06101a}
.planner-sidebar{position:sticky;top:0;min-height:100vh;padding:72px 16px 24px;display:flex;flex-direction:column;gap:16px;border-right:1px solid rgba(148,163,184,.09);background:rgba(5,13,22,.30)}
.planner-main{min-width:0;padding:26px 32px 34px}
.planner-create-trigger,.planner-create-top{border:1px solid rgba(71,121,255,.75);background:linear-gradient(135deg,#3157ff,#2444df);color:#fff;min-height:40px;border-radius:7px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 12px 24px rgba(32,70,220,.28)}
.planner-create-trigger{width:100%}
.planner-create-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.planner-mini-cal,.planner-detail-card,.planner-customer-card{border:1px solid rgba(148,163,184,.12);background:linear-gradient(180deg,rgba(20,32,46,.86),rgba(13,23,34,.88));border-radius:8px;box-shadow:0 18px 36px rgba(0,0,0,.20)}
.planner-mini-cal{padding:14px;margin-top:210px}
.planner-mini-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.planner-mini-head strong{font-size:18px;color:#f3f7ff}
.planner-mini-nav{display:flex;gap:8px}
.planner-mini-nav a,.planner-nav-btn,.planner-view-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;border:1px solid rgba(148,163,184,.12);background:rgba(255,255,255,.05);color:#dce8f7;text-decoration:none;font-size:21px;font-weight:800;cursor:pointer}
.planner-mini-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.planner-mini-row span,.planner-mini-row a{min-height:28px;display:flex;align-items:center;justify-content:center;border-radius:999px;color:#dce6f3;font-size:12px;text-decoration:none}
.planner-mini-row.weekdays span{min-height:20px;color:#8fa1b7;font-size:11px}
.planner-mini-row .is-empty{opacity:.24}.planner-mini-row .is-current{background:#2f70ff;color:#fff;font-weight:800;box-shadow:0 0 20px rgba(47,112,255,.55)}.planner-mini-row .is-today{border:1px solid rgba(47,112,255,.55)}.planner-mini-row .is-closed{color:#ff6b6b;font-weight:750}
.planner-note{margin:0;padding:14px;display:flex;gap:10px;color:#a9b7c9;font-size:12px;line-height:1.45;border:1px solid rgba(148,163,184,.10);border-radius:8px;background:rgba(255,255,255,.035)}
.planner-pagehead{min-height:44px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}
.planner-pagehead .h1{font-size:28px;margin:0;color:#f3f7ff}.planner-heading-sub{display:none;color:#8fa1b7;font-size:12px;margin-top:6px}
.planner-head-actions{display:flex;gap:12px;align-items:center}.planner-view-btn{background:rgba(255,255,255,.06)}
.planner-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.planner-toolbar-nav{display:flex;align-items:center;gap:10px;min-width:0}.planner-action-btn{min-height:40px;padding:0 18px;border-radius:7px;border:1px solid rgba(148,163,184,.12);background:rgba(255,255,255,.06);color:#dce8f7;font-size:13px;font-weight:800;display:inline-flex;align-items:center;text-decoration:none}
.planner-toolbar-title{margin-left:8px;min-width:0}.planner-month{font-size:20px;font-weight:850;color:#f3f7ff}.planner-range{margin-top:3px;color:#8fa1b7;font-size:13px}
.planner-toolbar-actions{display:flex;align-items:center;gap:0;padding:4px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(148,163,184,.10)}
.planner-tab,.planner-filter-link{min-width:74px;min-height:34px;padding:0 14px;border-radius:6px;color:#dce8f7;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;text-decoration:none}
.planner-tab.is-active{background:rgba(47,112,255,.18);color:#6fa0ff}.planner-filter-link{min-width:auto;color:#94a9c0}
.planner-workspace{display:grid;grid-template-columns:minmax(680px,1fr) 270px;gap:16px;align-items:start}
.planner-board{min-width:0;height:calc(100vh - 142px);overflow:auto;border:1px solid rgba(148,163,184,.12);border-radius:10px;background:rgba(11,20,30,.70)}
.planner-grid{display:grid;grid-template-columns:52px repeat(var(--planner-days),minmax(132px,1fr));min-width:960px}.planner-grid-head{position:sticky;top:0;z-index:4;background:rgba(10,18,28,.98)}
.planner-time-head,.planner-day-head{min-height:78px;border-right:1px solid var(--planner-line);border-bottom:1px solid var(--planner-line)}.planner-time-head{background:rgba(255,255,255,.02)}
.planner-day-head{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.planner-day-head.is-closed,.planner-day-column.is-closed{background:rgba(255,72,72,.08)}
.planner-day-name{color:#a4b3c5;text-transform:uppercase;font-size:11px;font-weight:850;letter-spacing:0}.planner-day-head.is-closed .planner-day-name,.planner-day-head.is-closed .planner-day-number{color:#ff6868}
.planner-day-number{width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#eaf1fb;text-decoration:none;font-size:21px;font-weight:850}.planner-day-number.is-current{background:#3157ff;color:#fff;box-shadow:0 0 20px rgba(49,87,255,.60)}.planner-day-number.is-today{border:1px solid rgba(47,112,255,.52)}
.planner-time-col{border-right:1px solid var(--planner-line);background:rgba(255,255,255,.015)}.planner-time-slot{height:64px;padding:9px 8px 0 0;text-align:right;color:#9db0c8;font-size:12px;font-weight:700;border-bottom:1px solid var(--planner-line)}
.planner-day-column{position:relative;min-height:calc(var(--planner-slots) * 64px);border-right:1px solid var(--planner-line)}.planner-day-slots{display:grid;grid-template-rows:repeat(var(--planner-slots),64px)}.planner-day-slot{border-bottom:1px solid var(--planner-line)}.planner-events-layer{position:absolute;inset:0;pointer-events:none}
.planner-event{position:absolute;top:calc(var(--slot-index) * 64px + 4px);left:8px;right:8px;height:calc(var(--slot-span, 1) * 64px - 8px);min-height:54px;padding:9px 10px;border-radius:6px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;cursor:pointer;pointer-events:auto;color:#f3f7ff;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 28px rgba(0,0,0,.20),inset 3px 0 0 currentColor}
.planner-event.is-selected{outline:2px solid rgba(255,255,255,.28);outline-offset:1px}.planner-event-time{font-size:11px;font-weight:750;color:#dbe7f8}.planner-event-title{font-size:12px;font-weight:850;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.planner-event-meta{font-size:11px;color:#d6e0ed;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.planner-event-status{display:flex;align-items:center;gap:6px;margin-top:auto;color:#dbe7f8;font-size:11px}.planner-event-status i,.planner-detail-status i{width:8px;height:8px;border-radius:999px;background:currentColor;box-shadow:0 0 12px currentColor}
.planner-event--sky{background:rgba(47,112,255,.20);color:#4381ff;border-color:rgba(47,112,255,.55)}.planner-event--lime{background:rgba(29,185,96,.20);color:#24d06f;border-color:rgba(29,185,96,.55)}.planner-event--orange{background:rgba(237,171,30,.20);color:#f5bd29;border-color:rgba(237,171,30,.58)}.planner-event--violet{background:rgba(154,73,255,.20);color:#b55dff;border-color:rgba(154,73,255,.58)}.planner-event--teal{background:rgba(15,188,170,.18);color:#25cfbd;border-color:rgba(15,188,170,.50)}
.planner-detail-stack{display:grid;gap:14px;position:sticky;top:26px}.planner-detail-card{display:none;padding:0;overflow:hidden}.planner-detail-card.is-active{display:block}.planner-detail-head,.planner-customer-head{min-height:54px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(148,163,184,.10)}.planner-detail-head strong,.planner-customer-head strong{font-size:13px;color:#f3f7ff}
.planner-edit-toggle{min-height:34px;padding:0 10px;border:1px solid rgba(148,163,184,.12);border-radius:7px;color:#dce8f7;background:rgba(255,255,255,.06);display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;cursor:pointer}
.planner-detail-person{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;padding:18px 16px 12px}.planner-detail-dot{width:12px;height:12px;margin-top:5px;border-radius:999px;background:#3157ff;box-shadow:0 0 18px rgba(49,87,255,.80)}.planner-detail-person h2{margin:0;color:#fff;font-size:18px;line-height:1.2;overflow-wrap:anywhere}.planner-detail-person a,.planner-customer-body a{display:inline-block;margin-top:8px;color:#4d86ff;font-size:12px;text-decoration:none}
.planner-detail-list{display:grid;gap:13px;padding:12px 16px;color:#dbe6f4;font-size:13px}.planner-detail-list div{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;line-height:1.35}.planner-detail-status{margin:2px 16px 14px;padding-top:14px;border-top:1px solid rgba(148,163,184,.12)}.planner-detail-status span{display:block;color:#f3f7ff;font-size:13px;font-weight:850;margin-bottom:10px}.planner-detail-status strong{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;border-radius:999px;background:rgba(25,185,96,.18);color:#39d77d;font-size:12px}
.planner-event-form{display:grid;gap:9px;padding:0 16px 14px}.planner-delete-btn{width:calc(100% - 32px);margin:0 16px 16px;min-height:38px;border:1px solid rgba(255,80,80,.12);border-radius:7px;background:rgba(255,80,80,.10);color:#ff6b6b;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:850;cursor:pointer}
.planner-customer-card{display:none;padding:0;overflow:hidden}.planner-customer-card.is-active{display:block}.planner-customer-head span{color:#8fa1b7;font-size:22px}.planner-customer-body{display:grid;gap:7px;padding:16px;color:#dce8f7;font-size:13px}.planner-customer-body span{color:#d0dbea;overflow-wrap:anywhere}.planner-empty{padding:24px 16px;color:#9fb0c3;font-size:13px}
.planner-icon{width:16px;height:16px;flex:0 0 auto;display:inline-block;background:currentColor;mask:center/contain no-repeat}.planner-icon-plus{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}.planner-icon-sliders{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M2 14h4M10 8h4M18 16h4'/%3E%3C/svg%3E")}.planner-icon-clock{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E")}.planner-icon-pencil{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E")}.planner-icon-calendar{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")}.planner-icon-user{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}.planner-icon-phone{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2A19.8 19.8 0 0 1 11.2 19a19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.35 1.9.65 2.81a2 2 0 0 1-.45 2.11L8.1 9.9a16 16 0 0 0 6 6l1.26-1.21a2 2 0 0 1 2.11-.45c.91.3 1.85.52 2.81.65A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")}.planner-icon-car{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9L18.4 10c-.3-.6-.7-1.1-1.2-1.5L15.8 7.1c-.4-.4-.9-.6-1.4-.6H6.6c-.8 0-1.5.5-1.8 1.2L3.5 11.1C2.6 11.3 2 12.1 2 13v3c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E")}.planner-icon-note{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E")}.planner-icon-trash{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E")}
@media(max-width:1280px){.planner-workspace{grid-template-columns:1fr}.planner-detail-stack{position:relative;top:0;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){body:has(.planner-page) .main{margin-left:0}body:has(.planner-page) .sidebar{transform:translateX(-100%);opacity:0;pointer-events:none}.planner-page{grid-template-columns:1fr}.planner-sidebar{display:none}.planner-main{padding:18px 14px 28px}.planner-pagehead,.planner-toolbar{align-items:flex-start;flex-direction:column}.planner-head-actions,.planner-create-top{width:100%}.planner-create-top{flex:1}.planner-toolbar-actions{width:100%;overflow:auto}.planner-workspace{display:block}.planner-board{height:620px}.planner-detail-stack{grid-template-columns:1fr;margin-top:14px}}

body:has(.planner-page) .nav{margin-top:10px}
body:has(.planner-page) .dashboard-sidebar-extra{z-index:3}
.planner-page{grid-template-columns:minmax(0,1fr)}
.planner-sidebar{
  position:fixed;
  z-index:2;
  left:0;
  top:64px;
  bottom:118px;
  width:250px;
  min-height:0;
  padding:0 18px;
  border-right:0;
  background:transparent;
  pointer-events:none;
}
.planner-sidebar > *{pointer-events:auto}
.planner-mini-cal{margin-top:350px}
@media(max-width:900px){
  body:has(.planner-page) .nav{margin-top:10px}
  .planner-sidebar{display:none}
}