:root{
  --bg:#f3f7f9;--paper:#fff;--line:#d9e3e9;--line2:#c8d5dd;
  --text:#10283c;--muted:#667b8d;--navy:#0f3854;--navy2:#173f5c;
  --teal:#176a72;--teal2:#0f5c64;--wood:#ae6e3d;--wood2:#c88b55;
  --wood-soft:#fbf4ec;--success:#42a647;--shadow:0 10px 28px rgba(20,50,72,.075);
  --radius:12px
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font:14px "Segoe UI",Arial,sans-serif;color:var(--text);background:var(--bg)}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.app-shell{min-height:100vh;padding-top:72px;padding-left:228px}
.topbar{
  position:fixed;z-index:50;left:0;right:0;top:0;height:72px;background:#fff;
  display:flex;align-items:center;justify-content:space-between;padding:0 28px 0 0;
  border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(15,56,84,.035)
}
.topbar-brand{display:flex;align-items:center;gap:0;min-width:0;height:72px}
.topbar-brand img{
  width:228px;height:72px;max-width:none;object-fit:contain;padding:6px 24px;
  background:linear-gradient(135deg,#1a5378 0%,#174866 48%,#123c58 100%);
  border-right:1px solid #2d6689;
  filter:drop-shadow(0 3px 8px rgba(5,29,45,.18));
}
.topbar-divider{display:none}
.erp-name{
  font-size:18px;color:#60778a;white-space:nowrap;
  margin-left:52px;font-weight:600;letter-spacing:.01em;
}
.topbar-actions{display:flex;align-items:center;gap:18px}
.topbar-org{font-size:13px;color:var(--muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-user{display:flex;align-items:center;gap:9px;font-weight:600}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff}
.topbar-logout{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 11px;color:#52697b}
.sidebar{
  position:fixed;z-index:40;left:0;top:72px;bottom:0;width:228px;background:linear-gradient(180deg,#123a56 0%,#0b2e46 100%);
  color:#dbe7ef;display:flex;flex-direction:column;overflow-y:auto;box-shadow:4px 0 16px rgba(15,50,76,.06);
  isolation:isolate
}
.sidebar::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('/public/assets/images/sidebar-interior-watermark.svg') center 54px / 228px auto repeat-y;
  opacity:.055;
  mix-blend-mode:screen;
}

.organization-switch{padding:15px 16px 6px}
.organization-switch>span{font-size:10px;letter-spacing:.1em;color:#8faabc}
.organization-switch select{margin-top:7px;width:100%;border:1px solid rgba(255,255,255,.17);background:#173f5c;color:#fff;padding:8px;border-radius:7px}
.side-nav{padding:8px 0 18px}
.side-nav>a,.nav-parent>a{min-height:48px;padding:0 18px 0 22px;display:flex;align-items:center;gap:12px;color:#e3edf3;border-left:3px solid transparent}
.side-nav>a:hover,.nav-parent>a:hover{background:rgba(255,255,255,.055)}
.side-nav>a.active,.nav-parent>a.active{background:linear-gradient(90deg,rgba(174,110,61,.9),rgba(174,110,61,.72));border-left-color:#f2c59c;color:#fff}
.nav-glyph{width:20px;text-align:center;font-size:18px;color:#b9d0df}
.side-nav a.active .nav-glyph{color:#fff}
.chevron{margin-left:auto}
.nav-section{padding:17px 23px 6px;font-size:10px;letter-spacing:.12em;color:#7695a9;font-weight:700}
.subnav{padding:2px 0 6px 0}
.subnav a{display:block;padding:9px 12px 9px 61px;color:#cbdbe5;font-size:13px;border-left:3px solid transparent}
.subnav a:hover{color:#fff;background:rgba(255,255,255,.045)}
.subnav a.active{color:#fff;background:rgba(174,110,61,.18);border-left-color:var(--wood2)}
.side-nav .disabled{opacity:.38;pointer-events:none}
.main-content{min-width:0}
.page{padding:26px 28px 40px;max-width:1600px;margin:0 auto}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}
.head small{color:var(--wood);font-weight:800;letter-spacing:.09em}
.head h1{margin:4px 0 5px;font-size:29px;line-height:1.08;color:#10283c}
.head p{margin:0;color:var(--muted);max-width:900px}
.panel,fieldset,.stats article{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.panel{padding:18px;margin-bottom:16px}
.panel h2{margin:0 0 6px;font-size:20px}
.panel h3{color:#173850}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 18px}
.form-grid label{display:flex;flex-direction:column;gap:6px;margin:0;font-weight:650}
.form-grid .wide{grid-column:1/-1}
input,select,textarea{
  width:100%;margin:0;padding:10px 11px;border:1px solid #bfd0dc;border-radius:7px;background:#fff;outline:none;
  transition:border-color .15s,box-shadow .15s
}
input:focus,select:focus,textarea:focus{border-color:#5b91aa;box-shadow:0 0 0 3px rgba(50,114,143,.1)}
label>small,.field-help{font-weight:400;color:var(--muted);font-size:12px}
.check{display:flex!important;align-items:center;flex-direction:row!important;gap:9px!important}
.check input{width:auto}
.btn,.button,.head button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border:1px solid var(--line2);
  border-radius:8px;background:#fff;font-weight:650;color:#183149
}
.btn:hover,.button:hover{background:#f7fafb}
.primary{background:linear-gradient(180deg,var(--teal),var(--teal2))!important;color:#fff!important;border-color:var(--teal2)!important}
.btn.small{padding:6px 10px;font-size:12px}
.table{overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{background:#f6f9fb;color:#385267;font-size:12px}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#fbfdfe}
.alert{padding:12px 14px;border-radius:9px;margin-bottom:14px}
.alert.success{background:#e9f6eb;color:#287345}
.alert.error{background:#fdecec;color:#a33e3e}
.status-pill{display:inline-flex;padding:4px 8px;border-radius:99px;font-size:12px;font-weight:700;background:#edf2f5}
.status-pill.active{background:#e9f6eb;color:#297645}
.status-pill.archived{color:#657785}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stats article{padding:18px}.stats span{color:var(--muted)}.stats b{display:block;font-size:28px;margin-top:6px}
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:13px;overflow:auto}
.tabs button{padding:10px 14px;border:0;background:none;border-bottom:2px solid transparent}
.tabs button.active{color:var(--teal);border-bottom-color:var(--teal);font-weight:700}
.tab{display:none}.tab.active{display:block}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cards div{padding:14px;background:#f8fafb;border:1px solid var(--line);border-radius:8px}
.cards b,.cards span{display:block}.cards span{margin-top:5px;color:var(--muted)}
.wood-config{
  background:linear-gradient(90deg,#fffaf5,#fdf8f1);border:1px solid #f0dfce;border-radius:10px;padding:16px;margin-top:16px;
  box-shadow:inset 3px 0 0 var(--wood2)
}
.wood-config h3{margin:0 0 4px;color:#173850}
.wood-config p{margin:0 0 13px;color:var(--muted)}
.type-table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.type-table-toolbar input{width:270px}
.section-heading{display:flex;gap:12px;align-items:flex-start}
.section-icon{width:42px;height:42px;border-radius:9px;background:var(--wood-soft);border:1px solid #ecd7c3;display:grid;place-items:center;color:var(--wood);font-size:22px;flex:0 0 42px}
.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0f3854,#eff4f6)}
.login-card{width:min(430px,calc(100% - 30px));padding:28px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 55px rgba(10,45,68,.18)}
.login-card h1{margin:15px 0 5px}.login-card p{color:var(--muted)}.login-card button{width:100%;padding:10px;border:0;border-radius:8px}
@media(max-width:1000px){
  .topbar-brand img{width:228px;height:72px;max-width:none}.erp-name{font-size:17px;margin-left:30px}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){
  .app-shell{padding-left:0}.sidebar{display:none}
  .topbar{padding:0 14px;height:66px}.app-shell{padding-top:66px}
  .topbar-brand img{width:190px;height:66px;max-width:none;padding:8px 12px}.topbar-divider,.erp-name,.topbar-org{display:none}
  .page{padding:18px 14px}.form-grid,.cards{grid-template-columns:1fr}
  .head{flex-direction:column}.head .btn{align-self:flex-start}
}


/* ---------------------------------------------------------------
   DutchCtrl PWA install gate
   --------------------------------------------------------------- */
.pwa-install-gate{
  min-height:100vh;
  width:100%;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    radial-gradient(circle at 16% 18%,rgba(38,105,143,.24),transparent 34%),
    radial-gradient(circle at 84% 82%,rgba(174,110,61,.18),transparent 31%),
    linear-gradient(135deg,#0c3049 0%,#164a69 50%,#eef4f7 50.1%,#f7fafb 100%);
}
.pwa-install-card{
  width:min(620px,100%);
  padding:34px 38px 32px;
  border:1px solid rgba(210,223,231,.95);
  border-radius:18px;
  background:rgba(255,255,255,.97);
  box-shadow:0 26px 75px rgba(7,35,53,.24);
  text-align:center;
}
.pwa-install-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-bottom:17px;
}
.pwa-install-logo img{
  width:165px;
  max-width:52%;
  height:58px;
  object-fit:contain;
}
.pwa-install-logo span{
  padding-left:18px;
  border-left:1px solid var(--line2);
  color:#60778a;
  font-size:20px;
  font-weight:650;
}
.pwa-install-icon{
  width:58px;
  height:58px;
  margin:0 auto 12px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(15,56,84,.18);
}
.pwa-install-icon img{display:block;width:100%;height:100%}
.pwa-install-card h1{
  margin:8px 0 8px;
  font-size:29px;
  color:var(--text);
}
.pwa-install-lead{
  max-width:500px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.55;
}
.pwa-browser-support{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  margin:19px 0 17px;
}
.pwa-browser-support span{
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#f5f8fa;
  color:#496276;
  font-size:12px;
  font-weight:650;
}
.pwa-install-help{
  margin:0 0 17px;
  padding:13px 15px;
  border:1px solid #e7d7c8;
  border-radius:9px;
  background:#fff9f3;
  color:#485f70;
  line-height:1.5;
  text-align:left;
}
.pwa-install-button{
  min-width:220px;
  min-height:44px;
}
.pwa-install-button.is-waiting{opacity:.65}
.pwa-install-status{
  min-height:21px;
  margin:13px 0 2px;
  color:#587083;
  line-height:1.45;
}
.pwa-install-note{
  display:block;
  margin-top:14px;
  color:#8192a0;
}
@media(max-width:650px){
  .pwa-install-gate{padding:14px;background:linear-gradient(180deg,#103b58 0 28%,#f4f8fa 28% 100%)}
  .pwa-install-card{padding:25px 20px 24px}
  .pwa-install-logo img{width:145px;height:52px}
  .pwa-install-logo span{font-size:17px;padding-left:12px}
  .pwa-install-card h1{font-size:25px}
}



/* ---------------------------------------------------------------
   PWA schermkeuze - zonder afhankelijkheid van JavaScript.
   Browser: installatiescherm.
   Geïnstalleerde app (standalone): inlogscherm.
   --------------------------------------------------------------- */
#pwa-login-content{
  display:none;
}

#pwa-install-gate{
  display:grid;
}

@media (display-mode: standalone), (display-mode: fullscreen){
  #pwa-install-gate{
    display:none !important;
  }

  #pwa-login-content{
    display:block !important;
  }
}

/* Extra fallback voor browsers die de JS-detectie wel geven. */
html.pwa-standalone #pwa-install-gate{
  display:none !important;
}

html.pwa-standalone #pwa-login-content{
  display:block !important;
}


/* SNCTRL 3.2.6 - login */
.login-brand-logo{
  margin:0 0 18px;
}
.login-brand-logo img{
  display:block;
  width:145px;
  max-width:55%;
  height:auto;
  object-fit:contain;
}
.login-remember{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:8px;
  margin:12px 0 14px;
  font-size:13px;
  color:#4f6678;
  cursor:pointer;
}
.login-remember input{
  width:16px !important;
  height:16px !important;
  min-height:0 !important;
  margin:0;
  accent-color:#176f77;
}
.login-submit{
  width:100%;
}


/* SNCTRL 3.3.0 - medewerker toegang en rechten */
.panel-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.panel-title strong{font-size:16px;color:var(--text)}
.panel-title small{display:block;margin-top:3px;color:var(--muted);font-weight:400}
.access-switches{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:18px;
}
.access-card{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start;
  gap:10px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f8fafb;
  cursor:pointer;
}
.access-card input{
  width:17px !important;
  height:17px !important;
  min-height:0 !important;
  margin:2px 0 0;
}
.access-card strong,.access-card small{display:block}
.access-card small{margin-top:3px;color:var(--muted);line-height:1.35}
.access-fields{margin-top:4px}
.permission-table-wrap{overflow:auto}
.permission-table select{min-width:140px}
.permission-group td{
  padding-top:17px !important;
  padding-bottom:7px !important;
  background:#f3f7f9;
  color:#426074;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.access-note{
  margin-top:15px;
  padding:12px 14px;
  border-left:3px solid #b87943;
  background:#fff9f3;
  color:#536a7b;
  line-height:1.5;
}
.block{display:block}
.right{text-align:right}
.btn.small{padding:6px 9px;font-size:12px}
.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin:16px 0 28px;
}
@media(max-width:1000px){
  .access-switches{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .access-switches{grid-template-columns:1fr}
}


/* SNCTRL 3.3.2 - Medewerker tabbladen */
.employee-tabs{
  display:flex;
  gap:5px;
  align-items:flex-end;
  margin:0 0 14px;
  border-bottom:1px solid var(--line);
}
.employee-tab{
  border:1px solid transparent;
  border-bottom:0;
  background:transparent;
  color:#62798b;
  padding:11px 17px 10px;
  border-radius:9px 9px 0 0;
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  position:relative;
  bottom:-1px;
}
.employee-tab:hover{
  background:#f5f8fa;
  color:#214d68;
}
.employee-tab.active{
  background:#fff;
  color:#173e58;
  border-color:var(--line);
}
.employee-tab.active:after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:3px;
  background:#b87943;
}
.employee-tab-page{display:none}
.employee-tab-page.active{display:block}

@media(max-width:700px){
  .employee-tabs{overflow-x:auto}
  .employee-tab{white-space:nowrap;flex:0 0 auto;padding:10px 12px}
}

/* 3.4.0 offerte sectie-detail */
.quote-section-head{align-items:flex-start}.quote-section-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 18px}.quote-section-tabs a{padding:10px 16px;border:1px solid #d7dce3;border-radius:8px;background:#fff;text-decoration:none;color:inherit;font-weight:600}.quote-section-tabs a.active{background:#173a63;color:#fff;border-color:#173a63}.quote-text-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.text-preview{min-height:90px;padding:12px;border:1px solid #e0e4e9;border-radius:8px;background:#fafafa}.quote-material-add{display:grid;grid-template-columns:minmax(420px,1fr) 130px 180px;gap:14px;align-items:end}.quote-material-add label{display:flex;flex-direction:column;gap:6px}.quote-material-add .grow{grid-row:span 2}.quote-material-add select{min-height:220px}.quote-calculation-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px}.stat-card{display:flex;flex-direction:column;gap:6px}.stat-card span{font-size:13px;color:#667085}.stat-card strong{font-size:24px}.table-wrap{overflow:auto}@media(max-width:900px){.quote-material-add{grid-template-columns:1fr}.quote-text-grid,.quote-calculation-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.quote-text-grid,.quote-calculation-grid{grid-template-columns:1fr}}


/* 3.4.1 Secties: inline maten en formulier alleen op aanvraag */
.quote-section-toolbar,
.quote-section-form-head{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:center;
    flex-wrap:wrap;
}
.quote-empty-sections{
    padding:34px 12px;
    text-align:center;
    color:#667085;
}
.quote-sections-table-wrap{
    overflow:auto;
    margin-top:16px;
}
.quote-sections-table{
    min-width:1120px;
}
.quote-sections-table th.num,
.quote-sections-table td.num{
    text-align:right;
    white-space:nowrap;
}
.quote-sections-table th.center,
.quote-sections-table td.center{
    text-align:center;
}
.quote-sections-table .dim-col{
    width:92px;
    text-align:center;
}
.quote-sections-table .section-name-cell{
    min-width:280px;
}
.section-name-copy{
    min-width:0;
}
.section-alt{
    display:block;
    color:#8a5a00;
    margin-top:3px;
}
.section-sales-text{
    display:block;
    color:#667085;
    margin-top:3px;
    max-width:420px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.inline-dimensions-cell{
    min-width:350px;
}
.inline-dimensions-form{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    margin:0;
}
.inline-dimensions-form label{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:4px;
    margin:0;
}
.inline-dimensions-form label span{
    font-size:11px;
    font-weight:700;
    color:#667085;
}
.inline-dimensions-form input{
    width:72px;
    min-width:72px;
    padding:7px 8px;
    text-align:right;
}
.inline-dimensions-form .mm-label{
    font-size:11px;
    color:#667085;
    margin-right:2px;
}
.inline-dimensions-form .inline-save{
    margin-left:3px;
}
.quote-sections-table .actions-col{
    text-align:right;
    white-space:nowrap;
    min-width:220px;
}
.inline-delete{
    display:inline;
}
.quote-section-edit-panel{
    margin-top:18px;
}
.quote-section-form-grid{
    grid-template-columns:140px minmax(240px,1fr) 130px 100px;
}
.quote-section-form-grid .span-2{
    grid-column:span 2;
}
.quote-section-form-grid .span-full{
    grid-column:1/-1;
}
.quote-section-visible{
    align-self:end;
}
.quote-section-form-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:16px;
}
@media(max-width:1050px){
    .quote-section-form-grid{
        grid-template-columns:1fr 1fr;
    }
}
@media(max-width:650px){
    .quote-section-form-grid{
        grid-template-columns:1fr;
    }
    .quote-section-form-grid .span-2,
    .quote-section-form-grid .span-full{
        grid-column:auto;
    }
}


/* 3.4.2 Compacte maatvelden in sectieregels */
.quote-sections-table{
    min-width:980px;
}
.quote-sections-table .dim-col{
    width:118px;
    min-width:118px;
    text-align:left;
}
.quote-sections-table td.dimension-value{
    width:118px;
    min-width:118px;
    white-space:nowrap;
}
.dimension-hidden-form{
    display:none;
}
.dimension-input-wrap{
    display:flex;
    align-items:center;
    gap:5px;
}
.dimension-input-wrap input{
    width:66px !important;
    min-width:66px !important;
    max-width:66px !important;
    flex:0 0 66px !important;
    padding:6px 7px !important;
    text-align:right;
}
.dimension-input-wrap span{
    font-size:11px;
    color:#667085;
    flex:0 0 auto;
}
.dimension-save{
    width:28px;
    min-width:28px;
    height:28px;
    padding:0 !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:2px;
}


/* 3.4.3 Artikelzoeker offerte */
#article-search{
    margin-bottom:8px;
}
#article-select{
    min-height:190px;
}
#article-select option{
    padding:7px 8px;
}
#article-result-info{
    display:block;
    margin-top:6px;
}


/* 3.4.4 materiaal verwijderen */
.btn.danger{
    border-color:#c94b4b;
    color:#a72f2f;
    background:#fff;
}
.btn.danger:hover{
    background:#fff3f3;
}

/* 3.4.5 - verwijderknop materiaal altijd zichtbaar */
.quote-materials-table .material-actions-head,
.quote-materials-table .material-actions{
    width:120px;
    min-width:120px;
    text-align:right;
    white-space:nowrap;
}
.quote-materials-table .material-actions form{
    margin:0;
    display:inline-block;
}
.material-delete-btn{
    appearance:none;
    border:1px solid #d8a0a0;
    background:#fff7f7;
    color:#9d2525;
    border-radius:7px;
    padding:6px 9px;
    font:inherit;
    font-size:12px;
    font-weight:600;
    line-height:1.2;
    cursor:pointer;
    white-space:nowrap;
}
.material-delete-btn:hover{
    background:#fdeaea;
    border-color:#c86d6d;
}
.material-delete-btn > span{
    margin-left:3px;
}


/* 3.4.6 compact artikel kiezen: zoeken of via groepen */
.quote-material-picker-form{
    display:grid;
    grid-template-columns:minmax(380px,1fr) minmax(180px,280px) 100px 130px;
    gap:14px;
    align-items:end;
}
.article-picker-main{
    position:relative;
}
.article-search-label{
    display:block;
}
.article-search-row{
    display:flex;
    gap:8px;
    align-items:center;
}
.article-search-row input{
    flex:1 1 auto;
    min-width:0;
}
.article-picker-results{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 6px);
    z-index:80;
    background:#fff;
    border:1px solid #ccd5df;
    border-radius:9px;
    box-shadow:0 12px 28px rgba(18,42,66,.16);
    overflow:hidden;
    max-height:360px;
}
.article-picker-results-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-bottom:1px solid #e5e9ee;
    background:#f8fafc;
}
.article-picker-close{
    border:0;
    background:transparent;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    color:#667085;
}
.article-group-list,
.article-option-list{
    max-height:310px;
    overflow:auto;
}
.article-group-option,
.article-picker-option{
    width:100%;
    border:0;
    border-bottom:1px solid #eef1f4;
    background:#fff;
    text-align:left;
    cursor:pointer;
}
.article-group-option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:11px 13px;
    font-weight:600;
}
.article-group-option:hover,
.article-picker-option:hover{
    background:#f3f7fb;
}
.article-group-arrow{
    font-size:20px;
    color:#748399;
}
.article-picker-option{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:10px 13px;
}
.article-option-main{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.article-option-main small,
.article-option-group{
    font-size:11px;
    color:#667085;
}
.article-picker-empty{
    padding:18px 13px;
    color:#667085;
}
.selected-article-box{
    min-height:42px;
    border:1px solid #d8e0e8;
    border-radius:8px;
    padding:6px 10px;
    background:#f8fafc;
}
.selected-article-box > span{
    display:block;
    font-size:10px;
    color:#667085;
}
.selected-article-box strong{
    display:inline-block;
    margin-right:8px;
}
.article-clear{
    border:0;
    background:transparent;
    color:#0f6073;
    padding:0;
    font-size:11px;
    cursor:pointer;
    text-decoration:underline;
}
.quote-material-qty input{
    width:90px;
}
@media(max-width:1000px){
    .quote-material-picker-form{
        grid-template-columns:1fr 180px 100px;
    }
    .selected-article-box{
        grid-column:1/-1;
        grid-row:2;
    }
}
@media(max-width:650px){
    .quote-material-picker-form{
        grid-template-columns:1fr;
    }
    .selected-article-box{
        grid-column:auto;
    }
}

/* 3.5.0 eenvoudige 2D tekenmodule */
.drawing-layout{display:grid;grid-template-columns:minmax(520px,1fr) 300px;gap:18px;margin-top:14px}.drawing-stage-wrap{min-width:0}.drawing-stage-wrap svg{width:100%;height:auto;max-height:650px;background:#fbfcfd;border:1px solid #d9e0e7;border-radius:10px}.drawing-hint{font-size:12px;color:#667085;margin-top:7px}.drawing-tools{border-left:1px solid #e4e8ed;padding-left:18px}.drawing-tools h3{margin:4px 0 10px}.drawing-size-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:18px}.drawing-size-grid label{display:grid;grid-template-columns:1fr 90px 25px;gap:6px;align-items:center}.drawing-size-grid input{text-align:right;padding:7px}.drawing-size-grid small{color:#667085}.drawing-selected-info{padding:10px;border:1px solid #dbe2e9;background:#f8fafc;border-radius:7px;margin-bottom:10px}.drawing-tool-buttons{display:grid;gap:7px}.drawing-position{display:block;margin-top:16px}.drawing-position input{width:100%}.drawing-position output{font-size:12px;color:#667085}.drawing-save-state{margin-top:16px;font-size:12px;color:#667085}.draw-outer{fill:#fff;stroke:#173a63;stroke-width:5}.draw-cell{fill:rgba(23,58,99,.025);stroke:transparent;stroke-width:7;cursor:pointer}.draw-cell:hover{fill:rgba(15,96,115,.08)}.draw-cell.selected{fill:rgba(15,96,115,.13);stroke:#0f6073}.draw-divider{stroke:#173a63;stroke-width:5;pointer-events:none}.draw-dimension-text{font-size:22px;font-weight:700;fill:#526174}@media(max-width:1000px){.drawing-layout{grid-template-columns:1fr}.drawing-tools{border-left:0;border-top:1px solid #e4e8ed;padding:16px 0 0}}

/* 3.6.0 interactieve sectietekening */
.draw-divider{stroke:#173a63;stroke-width:5;pointer-events:none}
.draw-divider.selected{stroke:#0f6073;stroke-width:7}
.draw-divider-hit{stroke:transparent;stroke-width:24;cursor:grab;touch-action:none}
.draw-divider-hit:active{cursor:grabbing}
.drawing-divider-properties{margin-top:16px;padding-top:14px;border-top:1px solid #e4e8ed}
.drawing-divider-properties label{display:block}
.drawing-mm-input{display:flex;align-items:center;gap:7px;margin-top:5px}
.drawing-mm-input input{width:120px;text-align:right}
.drawing-mm-input small{color:#667085}
.drawing-property-help{font-size:11px;color:#667085;margin-top:6px}


/* 3.7.0 deuren en laden in de sectietekening */
.drawing-object-properties{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid #e4e8ed;
}
.drawing-object-properties label{
    display:block;
}
.drawing-object-properties select,
.drawing-object-properties input{
    margin-top:5px;
    max-width:220px;
}
.draw-object{
    cursor:pointer;
}
.draw-door{
    fill:rgba(30,70,110,.035);
    stroke:#586b7d;
    stroke-width:2;
}
.draw-object.selected .draw-door{
    stroke:#0f6073;
    stroke-width:4;
}
.draw-door-diag{
    stroke:#9aa8b5;
    stroke-width:1.5;
    pointer-events:none;
}
.draw-door-handle{
    fill:#586b7d;
    pointer-events:none;
}
.draw-drawer{
    fill:rgba(30,70,110,.045);
    stroke:#687887;
    stroke-width:1.7;
}
.draw-object.selected .draw-drawer{
    stroke:#0f6073;
    stroke-width:3;
}
.draw-drawer-handle{
    stroke:#586b7d;
    stroke-width:2.5;
    stroke-linecap:round;
    pointer-events:none;
}


/* 3.8.0 materiaal aan tekenonderdelen + onderdelen genereren */
.drawing-material-properties,
.drawing-generate-box{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid #e4e8ed;
}
.drawing-material-properties label{
    display:block;
}
.drawing-material-properties select{
    width:100%;
    margin-top:5px;
}
.drawing-generate-box form{
    margin-top:8px;
}


/* 4.0.0 begeleide materiaal-/uitvoeringkeuze */
.drawing-material-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}
.drawing-material-grid label{
    display:block;
}
.drawing-material-grid select,
.drawing-material-grid input{
    width:100%;
    margin-top:5px;
}
.drawing-material-match{
    margin-top:8px;
    padding:7px 9px;
    border-radius:6px;
    background:#f4f6f8;
    font-size:12px;
    color:#53606c;
}


/* 4.2.0 complexere tekeningen */
.drawing-presets{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid #e3e7eb;
}
.drawing-presets h3{
    margin:0 0 8px;
}


/* 4.3.0 - plaatoptimalisatie */
.optimization-material{overflow:hidden}
.optimization-material-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:14px}
.optimization-material-head h2{margin:0 0 3px}
.optimization-material-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.optimization-material-stats span,.optimization-material-stats strong{background:#f4f6f8;border-radius:7px;padding:6px 9px;white-space:nowrap}
.optimization-warning{padding:10px 12px;margin:10px 0;border:1px solid #e0a800;border-radius:7px;background:#fff9df}
.optimization-sheets{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px}
.optimization-sheet-card{border:1px solid #dce2e8;border-radius:9px;padding:12px;background:#fff}
.optimization-sheet-title{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
.optimization-svg-wrap{background:#f6f8fa;border-radius:6px;padding:8px;overflow:hidden}
.optimization-svg{display:block;width:100%;height:auto;max-height:430px}
.optimization-stock{fill:#fff;stroke:#687583;stroke-width:5}
.optimization-piece rect{fill:#e9eef4;stroke:#526272;stroke-width:4}
.optimization-piece text{font-size:38px;font-weight:700;fill:#263746;pointer-events:none}
.optimization-piece text.optimization-size{font-size:31px;font-weight:400}
.optimization-piece-list{display:grid;gap:4px;margin-top:9px}
.optimization-piece-list>div{display:grid;grid-template-columns:minmax(100px,1fr) auto;gap:5px 12px;padding:5px 0;border-bottom:1px solid #edf0f2;font-size:12px}
.optimization-piece-list small{grid-column:1/-1;color:#7a8793}
.optimization-unplaced{margin-top:12px;padding:10px;border:1px solid #d5a0a0;border-radius:7px}
.optimization-unplaced span{display:block;margin-top:4px}
@media(max-width:700px){
  .optimization-material-head{display:block}
  .optimization-material-stats{justify-content:flex-start;margin-top:8px}
  .optimization-sheets{grid-template-columns:1fr}
}


/* 4.3.1 - offertebrede workflow */
.quote-workflow-nav{
    padding:10px 14px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    margin-bottom:14px;
}
.quote-workflow-disabled{
    opacity:.5;
    cursor:not-allowed;
}
.optimization-next-step{
    margin-top:16px;
}


/* 4.3.2 - artikeltype definities + popup navigatie */
body.modal-open{overflow:hidden}

.dc-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:2500;
    background:rgba(14,29,40,.48);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}
.dc-modal-backdrop[hidden]{display:none!important}

.dc-modal{
    width:min(880px,96vw);
    max-height:90vh;
    overflow:auto;
    background:#fff;
    border-radius:14px;
    box-shadow:0 24px 70px rgba(0,0,0,.28);
    padding:20px;
}
.dc-modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding-bottom:14px;
    border-bottom:1px solid var(--border,#dfe5e8);
    margin-bottom:18px;
}
.dc-modal-head h2{margin:2px 0 0}
.dc-modal-head small{color:var(--muted);font-weight:700;letter-spacing:.06em}
.dc-modal-close{
    width:38px;
    height:38px;
    border:0;
    border-radius:10px;
    background:#eef3f6;
    font-size:28px;
    line-height:1;
    cursor:pointer;
}
.dc-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:18px;
    padding-top:15px;
    border-top:1px solid var(--border,#dfe5e8);
}

.type-definition-box{
    margin-top:18px;
    padding:16px;
    border:1px solid var(--border,#dfe5e8);
    border-radius:12px;
    background:#f8fafb;
}
.property-definition-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}
.property-definition-list[hidden]{display:none!important}
.property-definition-card{
    display:flex;
    align-items:flex-start;
    gap:10px;
    border:1px solid #dfe6ea;
    border-radius:10px;
    padding:12px;
    background:#fff;
    cursor:pointer;
}
.property-definition-card:hover{border-color:#aabcc7}
.property-definition-card input{margin-top:3px}
.property-definition-card span{display:flex;flex-direction:column;gap:3px}
.property-definition-card small{color:var(--muted);line-height:1.35}
.type-definition-count{
    display:block;
    font-weight:700;
    margin-bottom:2px;
}
.type-row .muted{display:block;max-width:360px}

.article-type-native-select{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
}
.article-type-picker-current{display:flex}
.article-type-choose{
    width:100%;
    min-height:48px;
    justify-content:space-between;
    align-items:center;
    text-align:left;
    padding:8px 12px;
}
.article-type-choose strong,
.article-type-choose span{display:block}
.article-type-choose span{
    margin-left:auto;
    color:var(--muted);
    font-size:12px;
    font-weight:500;
}
.article-type-choice-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}
.article-type-choice{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:14px;
    border:1px solid #dbe4e9;
    border-radius:11px;
    background:#fff;
    cursor:pointer;
    text-align:left;
}
.article-type-choice:hover{border-color:#8ea8b8;background:#f8fbfc}
.article-type-choice.selected{
    border-color:#123b59;
    box-shadow:0 0 0 2px rgba(18,59,89,.10);
    background:#f3f8fb;
}
.article-type-choice span,
.article-type-choice small{color:var(--muted)}
.article-type-definition-help{
    color:var(--muted);
    margin-top:-2px;
}

@media(max-width:760px){
    .property-definition-list,
    .article-type-choice-grid{grid-template-columns:1fr}
    .dc-modal-backdrop{padding:10px}
    .dc-modal{max-height:95vh;padding:15px}
}


/* 4.3.3 - nette artikeltype-keuze */
#type-modal [hidden],
#type-modal .type-active-wrap[hidden],
#type-modal .property-definition-list[hidden]{
    display:none!important;
}

.article-type-kind-native{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
}

.field-label{
    display:block;
    font-weight:700;
    margin-bottom:8px;
}

.article-type-kind-choices{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.article-type-kind-card{
    position:relative;
    min-height:106px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:11px;
    align-items:flex-start;
    border:1px solid #d8e2e8;
    border-radius:12px;
    background:#fff;
    padding:14px;
    text-align:left;
    cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.article-type-kind-card:hover{
    border-color:#98afbd;
    background:#f8fbfc;
}
.article-type-kind-card.selected{
    border-color:#187486;
    background:#f3fafb;
    box-shadow:0 0 0 2px rgba(24,116,134,.09);
}
.article-type-kind-card .kind-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:9px;
    background:#eef5f7;
    font-size:18px;
}
.article-type-kind-card strong{
    display:block;
    margin-bottom:5px;
    color:#102b40;
}
.article-type-kind-card small{
    display:block;
    color:var(--muted);
    line-height:1.35;
}
.article-type-kind-card .kind-check{
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border:1px solid #cfdce3;
    border-radius:50%;
    color:transparent;
    background:#fff;
    font-size:13px;
    font-weight:800;
}
.article-type-kind-card.selected .kind-check{
    color:#fff;
    border-color:#187486;
    background:#187486;
}

.type-definition-box-polished{
    margin-top:20px;
    padding:16px;
}
.type-definition-box-polished .section-heading{
    margin-bottom:14px;
}
.property-definition-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.property-definition-card{
    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:flex-start;
    min-height:82px;
    margin:0;
    padding:14px 14px 13px;
    border:1px solid #d9e3e8;
    border-radius:11px;
    background:#fff;
    cursor:pointer;
}
.property-definition-card:hover{
    border-color:#9db2be;
    background:#fbfcfd;
}
.property-definition-card input[type="checkbox"]{
    grid-column:2;
    grid-row:1;
    width:18px!important;
    height:18px!important;
    min-width:18px;
    margin:1px 0 0!important;
    padding:0!important;
    accent-color:#1682c4;
}
.property-definition-card > span{
    grid-column:1;
    grid-row:1;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.property-definition-card strong{
    color:#0e2940;
    line-height:1.25;
}
.property-definition-card small{
    color:var(--muted);
    line-height:1.35;
}
.property-definition-card:has(input:checked){
    border-color:#a7c6d3;
    background:#f8fcfd;
}

@media(max-width:900px){
    .article-type-kind-choices{grid-template-columns:1fr}
}
@media(max-width:760px){
    .property-definition-list{grid-template-columns:1fr}
}


/* 4.3.5 - uitgebreid artikeltypeprofiel */
#type-modal .article-type-kind-choices{
    grid-template-columns:repeat(3,minmax(0,1fr));
}
#type-modal .article-type-kind-card{
    min-height:92px;
    grid-template-columns:1fr auto;
}
#type-modal .article-type-kind-card > span:first-child{
    min-width:0;
}
#generic-property-fields[hidden]{display:none!important}
#generic-property-fields [data-generic-property][hidden]{display:none!important}

@media(max-width:980px){
    #type-modal .article-type-kind-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
    #type-modal .article-type-kind-choices{grid-template-columns:1fr}
}


/* 4.3.6 - brede artikeltype editor */
.type-definition-modal{
    width:min(1220px,97vw);
    max-height:92vh;
}

.article-type-editor-layout{
    display:grid;
    grid-template-columns:minmax(360px,.9fr) minmax(520px,1.35fr);
    gap:18px;
    align-items:start;
}

.article-type-editor-left{
    min-width:0;
}

.article-type-basic-fields{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    padding:16px;
    border:1px solid #dfe6ea;
    border-radius:12px;
    background:#f9fbfc;
}

.article-type-basic-fields label{
    margin:0;
}

.article-type-basic-fields input{
    width:100%;
}

.article-type-kind-field{
    margin-top:16px;
}

.article-type-kind-choices.compact{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px;
}

.article-type-kind-choices.compact .article-type-kind-card{
    min-height:76px!important;
    padding:11px 12px!important;
    border-radius:10px;
}

.article-type-kind-choices.compact .article-type-kind-card strong{
    font-size:13.5px;
    margin-bottom:3px;
}

.article-type-kind-choices.compact .article-type-kind-card small{
    font-size:11.5px;
    line-height:1.28;
}

.article-type-kind-choices.compact .kind-check{
    width:20px;
    height:20px;
    font-size:12px;
}

.article-type-editor-right{
    min-width:0;
}

.article-type-editor-right .type-definition-box{
    margin-top:0;
    min-height:100%;
    padding:16px;
    background:#f8fafb;
}

.article-type-editor-right .property-definition-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.article-type-editor-right .property-definition-card{
    min-height:76px;
    padding:12px;
}

.article-type-editor-right .property-definition-card strong{
    font-size:13.5px;
}

.article-type-editor-right .property-definition-card small{
    font-size:11.5px;
}

@media(max-width:1050px){
    .article-type-editor-layout{
        grid-template-columns:1fr;
    }
    .article-type-kind-choices.compact{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}

@media(max-width:760px){
    .article-type-kind-choices.compact{
        grid-template-columns:1fr!important;
    }
    .article-type-editor-right .property-definition-list{
        grid-template-columns:1fr;
    }
}


/* 4.3.7 - compacte kop en volgorde/actief */
.type-modal-title-line{
    display:flex;
    align-items:baseline;
    gap:12px;
    flex-wrap:wrap;
}
.type-modal-title-line h2{
    margin:0;
    font-size:18px;
}
.type-modal-title-line small{
    margin:0;
}

.type-order-active-row{
    display:flex;
    align-items:flex-end;
    gap:18px;
}
.type-order-active-row .type-sort-field{
    width:115px;
    flex:0 0 115px;
    margin:0;
}
.type-order-active-row .type-sort-field input{
    width:100%;
}
.type-order-active-row .type-active-inline{
    margin:0 0 10px 0;
    min-height:auto;
    white-space:nowrap;
}
.type-order-active-row .type-active-inline[hidden]{
    display:none!important;
}


/* 4.4.0 - offerte secties als vaste werkruimte */
.quote-sections-workspace{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.quote-workspace-tree{padding:0;overflow:hidden;position:sticky;top:88px;max-height:calc(100vh - 110px)}
.workspace-pane-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid #e5e9ec}
.workspace-pane-head h2,.workspace-pane-head h3{margin:2px 0 0}
.workspace-pane-head small,.workspace-section-title small{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.06em}
.section-tree-nav{padding:7px;overflow:auto;max-height:calc(100vh - 185px)}
.section-tree-item{display:flex;align-items:center;gap:9px;padding:10px 9px 10px calc(9px + (var(--section-depth) * 15px));border-radius:9px;color:inherit;text-decoration:none;margin:2px 0;border:1px solid transparent}
.section-tree-item:hover{background:#f5f8fa}
.section-tree-item.active{background:#eef6ff;border-color:#cfe2f5}
.section-tree-code{min-width:34px;font-size:12px;font-weight:700;color:#52616b}
.section-tree-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.section-tree-copy strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.section-tree-copy small{font-size:10.5px;color:var(--muted)}
.section-tree-arrow{font-size:20px;color:#98a2b3}
.quote-workspace-main{min-width:0;display:grid;gap:16px}
.workspace-section-summary{padding:18px}
.workspace-section-title{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.workspace-section-title h2{margin:3px 0 8px}
.workspace-section-meta{display:flex;gap:7px;flex-wrap:wrap}
.workspace-section-meta span{background:#f3f6f8;border:1px solid #e1e7ea;border-radius:999px;padding:5px 9px;font-size:12px}
.workspace-section-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.workspace-sales-text{margin-top:14px;padding-top:13px;border-top:1px solid #e6eaed;color:#52616b;font-size:13px}
.quote-workspace-right-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.workspace-materials,.workspace-subsections{padding:0;overflow:hidden;min-height:245px}
.workspace-simple-list{padding:7px}
.workspace-list-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:10px 9px;border-bottom:1px solid #edf0f2}
.workspace-list-row:last-child{border-bottom:0}
.workspace-list-row>div{display:flex;flex-direction:column;min-width:0}
.workspace-list-row strong{font-size:13px}
.workspace-list-row small{font-size:11px;color:var(--muted);margin-top:2px}
.workspace-list-row>span{font-size:12px;white-space:nowrap;color:#52616b}
.workspace-list-row.linked{color:inherit;text-decoration:none;border-radius:8px}
.workspace-list-row.linked:hover{background:#f5f8fa}
.workspace-empty{padding:22px;color:var(--muted);text-align:center}
.workspace-empty.compact{padding:32px 16px}
.workspace-welcome{text-align:center;padding:48px 24px}

/* 4.4.18 - Secties werkruimte vult op desktop vrijwel de volledige schermhoogte.
   De drie werkvlakken (structuur, materialen en subsecties) scrollen zelfstandig. */
@media(min-width:1051px){
    .quote-sections-workspace-fill{
        height:calc(100dvh - 205px);
        min-height:500px;
        align-items:stretch;
    }
    .quote-sections-workspace-fill .quote-workspace-tree{
        height:100%;
        max-height:none;
        display:flex;
        flex-direction:column;
        min-height:0;
    }
    .quote-sections-workspace-fill .section-tree-nav{
        flex:1 1 auto;
        min-height:0;
        max-height:none;
        overflow-y:auto;
        overflow-x:hidden;
    }
    .quote-sections-workspace-fill .quote-workspace-main{
        height:100%;
        min-height:0;
        grid-template-rows:auto minmax(0,1fr);
    }
    .quote-sections-workspace-fill .quote-workspace-right-grid{
        height:100%;
        min-height:0;
        align-items:stretch;
    }
    .quote-sections-workspace-fill .workspace-materials,
    .quote-sections-workspace-fill .workspace-subsections{
        height:100%;
        min-height:0;
        display:flex;
        flex-direction:column;
    }
    .quote-sections-workspace-fill .workspace-materials .workspace-simple-list,
    .quote-sections-workspace-fill .workspace-subsections .workspace-simple-list{
        flex:1 1 auto;
        min-height:0;
        overflow-y:auto;
        overflow-x:hidden;
    }
    .quote-sections-workspace-fill .workspace-materials .workspace-empty,
    .quote-sections-workspace-fill .workspace-subsections .workspace-empty{
        overflow:auto;
    }
}
.quote-section-edit-panel{margin-top:16px}
@media(max-width:1050px){.quote-sections-workspace{grid-template-columns:245px minmax(0,1fr)}.quote-workspace-right-grid{grid-template-columns:1fr}}
@media(max-width:760px){.quote-sections-workspace{grid-template-columns:1fr}.quote-workspace-tree{position:static;max-height:none}.section-tree-nav{max-height:300px}.workspace-section-title{flex-direction:column}.workspace-section-actions{justify-content:flex-start}}


/* 4.4.1 - materiaal kiezen zonder de sectiewerkruimte te verlaten */
.workspace-modal-backdrop{position:fixed;inset:0;z-index:1200;background:rgba(24,34,43,.42);display:flex;align-items:center;justify-content:center;padding:24px}
.workspace-modal-backdrop[hidden]{display:none!important}
body.workspace-modal-open{overflow:hidden}
.workspace-material-modal{width:min(920px,96vw);max-height:88vh;background:#fff;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.24);overflow:hidden;display:flex;flex-direction:column}
.workspace-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:17px 20px;border-bottom:1px solid #e5e9ec}
.workspace-modal-head small{font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--muted)}
.workspace-modal-head h2{margin:3px 0 0;font-size:19px}
.workspace-modal-close{border:0;background:transparent;font-size:27px;line-height:1;cursor:pointer;color:#66747d;padding:2px 5px}
#workspace-material-form{display:flex;flex-direction:column;min-height:0}
.workspace-material-searchbar{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:12px;padding:15px 18px;border-bottom:1px solid #edf0f2}
.workspace-material-searchbar label{margin:0}
.workspace-material-results{padding:8px;overflow:auto;min-height:260px;max-height:48vh}
.workspace-material-option{width:100%;border:0;border-bottom:1px solid #edf0f2;background:#fff;padding:10px 11px;display:flex;justify-content:space-between;gap:16px;text-align:left;cursor:pointer;border-radius:7px}
.workspace-material-option:hover{background:#f5f8fa}
.workspace-material-option.selected{background:#eef6ff;box-shadow:inset 0 0 0 1px #cfe2f5}
.workspace-material-option>span:first-child{display:flex;flex-direction:column;min-width:0}
.workspace-material-option strong{font-size:13px}
.workspace-material-option small{font-size:11px;color:var(--muted);margin-top:2px}
.workspace-material-groupname{font-size:11.5px;color:#66747d;white-space:nowrap}
.workspace-material-selected{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:12px;align-items:end;padding:14px 18px;border-top:1px solid #dfe6ea;background:#f8fafb}
.workspace-material-selected>div{display:flex;flex-direction:column}
.workspace-material-selected>div small{font-size:10px;color:var(--muted);font-weight:700}
.workspace-material-selected>div strong{font-size:13px;margin-top:3px}
.workspace-material-selected label{margin:0}
@media(max-width:700px){.workspace-material-searchbar{grid-template-columns:1fr}.workspace-material-selected{grid-template-columns:1fr}.workspace-material-modal{max-height:94vh}.workspace-modal-backdrop{padding:10px}}


/* 4.4.2 - subsecties toevoegen/wijzigen in popup */
.workspace-subsection-modal{width:min(900px,96vw);max-height:90vh;background:#fff;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.24);overflow:auto}
.workspace-subsection-parent{margin-top:4px;font-size:12px;color:var(--muted)}
.workspace-subsection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;padding:18px}
.workspace-subsection-grid label{margin:0}
.workspace-subsection-grid .sub-position{grid-column:span 1}
.workspace-subsection-grid .sub-title{grid-column:span 3}
.workspace-subsection-grid .span-full{grid-column:1/-1}
.workspace-subsection-visible{align-self:end;min-height:39px}
.workspace-subsection-actions{display:flex;justify-content:flex-end;gap:9px;padding:14px 18px;border-top:1px solid #e5e9ec;background:#f8fafb}
.subsection-row{padding-right:7px}
.subsection-main-link{display:flex;justify-content:space-between;gap:12px;align-items:center;min-width:0;flex:1;color:inherit;text-decoration:none}
.subsection-main-link>div{display:flex;flex-direction:column;min-width:0}
.subsection-main-link strong{font-size:13px}
.subsection-main-link small{font-size:11px;color:var(--muted);margin-top:2px}
.subsection-main-link>span{font-size:18px;color:#98a2b3}
@media(max-width:760px){
    .workspace-subsection-grid{grid-template-columns:1fr 1fr}
    .workspace-subsection-grid .sub-position,.workspace-subsection-grid .sub-title{grid-column:1/-1}
}
@media(max-width:520px){
    .workspace-subsection-grid{grid-template-columns:1fr}
    .workspace-subsection-grid .span-full{grid-column:auto}
}


/* 4.4.3 - automatische positiecodes en slepen */
.section-drag-handle,.subsection-drag-handle{
    flex:0 0 auto;cursor:grab;user-select:none;color:#98a2b3;font-weight:700;
    letter-spacing:-2px;padding:4px 5px;border-radius:6px
}
.section-drag-handle:active,.subsection-drag-handle:active{cursor:grabbing}
.section-drag-handle:hover,.subsection-drag-handle:hover{background:#e9eef2;color:#52616b}
.section-tree-item.is-dragging,.subsection-row.is-dragging{opacity:.45}
.section-tree-item.drag-over-before,.subsection-row.drag-over-before{box-shadow:inset 0 3px 0 #4e85b5}
.section-tree-item.drag-over-after,.subsection-row.drag-over-after{box-shadow:inset 0 -3px 0 #4e85b5}
.workspace-subsection-auto{margin-top:3px;font-size:11px;color:#7a8891}
.workspace-subsection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.workspace-subsection-grid .sub-title{grid-column:1/-1}
.subsection-row{gap:5px}
@media(max-width:760px){.workspace-subsection-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.workspace-subsection-grid{grid-template-columns:1fr}}


/* 4.4.4 - robuust slepen met muis/touch */
.section-drag-handle,.subsection-drag-handle{
    touch-action:none;
    cursor:grab;
}
body.section-reorder-active{
    user-select:none;
    cursor:grabbing;
}
.is-pointer-dragging{
    opacity:.96!important;
    box-shadow:0 10px 28px rgba(0,0,0,.18)!important;
    background:#fff!important;
}
.section-sort-placeholder{
    border:2px dashed #9db8cf;
    background:#f3f8fc;
    border-radius:8px;
    margin:2px 0;
    box-sizing:border-box;
}

/* 4.4.6 - groep en type direct vanuit artikeloverzicht wijzigen */
.article-inline-edit{
    display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 7px;
    border:1px solid transparent;border-radius:7px;background:transparent;color:inherit;
    font:inherit;text-align:left;cursor:pointer
}
.article-inline-edit:hover{background:#f1f6f9;border-color:#dce7ed}
.article-inline-edit:focus-visible{outline:2px solid #6e9dc2;outline-offset:1px}
.article-inline-edit [data-inline-label]{min-width:0;overflow:hidden;text-overflow:ellipsis}
.article-inline-edit-icon{font-size:11px;color:#87959e;flex:0 0 auto}
.article-quick-modal-backdrop{z-index:1300}
.article-quick-modal{width:min(520px,94vw);background:#fff;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.24);overflow:hidden}
.article-quick-body{padding:18px 20px}
.article-quick-body label{margin:0}
.article-quick-body select{width:100%}
.article-quick-hint{margin-top:9px;color:var(--muted);font-size:12px;line-height:1.45}
.article-quick-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:13px 18px;border-top:1px solid #e5e9ec;background:#f8fafb}
.article-quick-status{margin-right:auto;font-size:12px;color:#61727e}

/* 4.4.7 artikelgroepen werkruimte */
.article-group-workspace{display:grid;grid-template-columns:minmax(280px,34%) minmax(0,1fr);gap:16px;align-items:start}
.article-group-tree-panel{position:sticky;top:88px;padding:0;overflow:hidden}.article-group-tree-head{padding:16px 18px;border-bottom:1px solid #dfe5ec}.article-group-tree-head>div{display:flex;justify-content:space-between;gap:12px}.article-group-tree{padding:8px}.article-group-tree-block+.article-group-tree-block{margin-top:6px}
.article-group-tree-row{width:100%;border:0;background:transparent;text-align:left;display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 11px;border-radius:9px;cursor:pointer;color:inherit}.article-group-tree-row:hover{background:#f3f6f9}.article-group-tree-row.is-selected{background:#eaf3fb;box-shadow:inset 3px 0 0 #2879b9}.article-group-tree-row.is-root .article-group-tree-name{font-weight:700}.article-group-tree-row.is-child{padding-left:28px;font-size:.95em}.article-group-tree-code{font-size:.78em;color:#718096;overflow:hidden;text-overflow:ellipsis}.article-group-tree-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.article-group-tree-count{border-radius:12px;background:#edf1f5;padding:2px 7px;font-size:.78em}
.article-group-detail{min-height:330px}.article-group-detail-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid #dfe5ec;padding-bottom:16px}.article-group-detail-head h2{margin:4px 0}.article-group-detail-head p{margin:0;color:#718096}.article-group-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.article-group-summary>div{border:1px solid #dfe5ec;border-radius:10px;padding:14px;background:#fafbfd}.article-group-summary small,.article-group-summary strong{display:block}.article-group-summary small{color:#718096;margin-bottom:5px}.article-group-info{padding:15px;border-radius:10px;background:#f6f8fa}.article-group-info h3{margin:0 0 6px;font-size:1rem}.article-group-info p{margin:0;line-height:1.5}.article-group-empty,.article-group-detail-empty{padding:24px;color:#718096}.article-group-modal-card{width:min(760px,calc(100vw - 32px))}
@media(max-width:850px){.article-group-workspace{grid-template-columns:1fr}.article-group-tree-panel{position:static}.article-group-summary{grid-template-columns:1fr}}

/* 4.4.8 artikelgroepen popup fix */
.article-group-modal-card{
    width:min(760px,96vw);
    max-height:90vh;
}

/* 4.4.9 PaletteCAD import */
.palettecad-import-modal{width:min(980px,96vw)}
.palettecad-import-sub{margin-top:4px;color:#6f7d8b;font-size:.92rem}
.palettecad-import-body{padding:20px;overflow:auto}
.palettecad-file-picker{display:block;border:1px solid #d9e1e8;border-radius:12px;padding:16px;background:#fafbfd}
.palettecad-file-picker>span{display:block;font-weight:700;margin-bottom:8px}
.palettecad-file-picker input[type=file]{display:block;width:100%;padding:10px;border:1px solid #ced8e2;border-radius:8px;background:white}
.palettecad-file-picker small{display:block;margin-top:8px;color:#718096;line-height:1.45}
.palettecad-import-actions-top{display:flex;align-items:center;gap:12px;margin-top:14px;min-height:38px}
.palettecad-import-status{font-size:.92rem;color:#667788}.palettecad-import-status.ok{color:#23703f}.palettecad-import-status.error{color:#a33a3a}.palettecad-import-status.busy{color:#52667a}
.palettecad-preview-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.palettecad-preview-cards>div{border:1px solid #dfe6ed;border-radius:10px;padding:12px 14px;background:#fff}
.palettecad-preview-cards small,.palettecad-preview-cards strong{display:block}.palettecad-preview-cards small{color:#718096;margin-bottom:4px}.palettecad-preview-cards strong{font-size:1.35rem}
.palettecad-existing-warning{margin-top:14px;padding:12px 14px;border-radius:9px;background:#fff7e8;border:1px solid #ead3a1;color:#795b1f}
.palettecad-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.palettecad-preview-grid h3{margin:0 0 9px;font-size:1rem}
.palettecad-chip-list,.palettecad-unknown-list{display:flex;gap:7px;flex-wrap:wrap;max-height:150px;overflow:auto;padding:2px}
.palettecad-chip-list span{background:#edf4fa;border:1px solid #d2e2ef;border-radius:999px;padding:5px 9px;font-size:.86rem}
.palettecad-unknown-list code{background:#f3f5f7;border:1px solid #dfe4e8;border-radius:6px;padding:4px 7px;font-size:.83rem}.palettecad-all-known{color:#23703f}
.palettecad-preview-note{font-size:.84rem;color:#718096;line-height:1.45;margin:10px 0 0}
.palettecad-import-explain{margin-top:18px;padding:14px;border-radius:10px;background:#f6f8fa;display:grid;gap:4px}.palettecad-import-explain span{color:#5f6e7b;line-height:1.45}
.palettecad-footer{padding:14px 20px;border-top:1px solid #e0e6ec;display:flex;justify-content:flex-end;gap:8px}
@media(max-width:760px){.palettecad-preview-cards{grid-template-columns:1fr 1fr}.palettecad-preview-grid{grid-template-columns:1fr}}

/* 4.4.11 PaletteCAD controle + permanente koppelingen */
.palettecad-link-modal{width:min(1120px,96vw);max-height:92vh}
.palettecad-control-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:14px}
.palettecad-control-head h3{margin:3px 0 4px}.palettecad-control-head p{margin:0;color:#687586}
.palettecad-link-summary{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:10px;margin:14px 0}
.palettecad-link-summary strong,.palettecad-link-summary span{display:block}.palettecad-link-summary.all-ok{background:#edf8f0}.palettecad-link-summary.needs-links{background:#fff6e5}
.palettecad-link-list{display:flex;flex-direction:column;gap:8px}
.palettecad-link-row{display:grid;grid-template-columns:36px minmax(210px,.8fr) minmax(300px,1.2fr) auto;gap:12px;align-items:center;border:1px solid #dfe5ec;border-radius:10px;padding:11px;background:#fff}
.palettecad-link-row.is-linked{border-color:#b9dfc3;background:#f7fcf8}.palettecad-link-row.is-open{border-color:#ead29e;background:#fffdf8}.palettecad-link-row.is-saving{opacity:.6;pointer-events:none}
.palettecad-link-state{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:#e9edf2}.is-linked .palettecad-link-state{background:#d9f2df}
.palettecad-link-source strong,.palettecad-link-source span,.palettecad-link-source small,.palettecad-linked-article strong,.palettecad-linked-article span{display:block}
.palettecad-link-source span{color:#526170;margin:2px 0}.palettecad-link-source small,.palettecad-linked-article span{color:#718096}
.palettecad-search-wrap{position:relative}.palettecad-article-search{width:100%}
.palettecad-search-results{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);max-height:260px;overflow:auto;background:#fff;border:1px solid #ccd6e0;border-radius:9px;box-shadow:0 12px 30px rgba(20,35,50,.16)}
.palettecad-search-results button{display:block;width:100%;border:0;border-bottom:1px solid #edf0f3;background:#fff;text-align:left;padding:10px 12px;cursor:pointer}.palettecad-search-results button:hover{background:#f2f7fb}.palettecad-search-results strong,.palettecad-search-results span{display:block}.palettecad-search-results span{font-size:.85em;color:#718096;margin-top:2px}.palettecad-search-wait{padding:12px;color:#718096}
@media(max-width:800px){.palettecad-link-row{grid-template-columns:36px 1fr}.palettecad-link-target{grid-column:2}.palettecad-link-row>.btn{grid-column:2;justify-self:start}.palettecad-control-head{display:block}.palettecad-control-head .btn{margin-top:10px}}


/* 4.4.12 PaletteCAD controlescherm */
.palettecad-link-modal{
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.palettecad-link-modal .workspace-modal-head{
    flex:0 0 auto;
}
.palettecad-link-modal #palettecad-import-form{
    min-height:0;
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
}
.palettecad-link-modal .palettecad-import-body{
    min-height:0;
    flex:1 1 auto;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-right:4px;
}
.palettecad-link-modal .palettecad-footer{
    flex:0 0 auto;
    background:#fff;
    border-top:1px solid #dfe5ec;
}
.palettecad-link-list{
    max-height:52vh;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    padding-right:4px;
}


/* 4.4.16 Loginbeveiliging */
.login-security-links{
    margin-top:14px;
    text-align:center;
}
.login-security-links a{
    font-weight:600;
    text-decoration:none;
}
.login-security-links a:hover{text-decoration:underline}
.login-security-note,
.login-blocked-note,
.login-help-text{
    margin-top:12px;
    font-size:.9rem;
    line-height:1.45;
    color:#687586;
}
.login-blocked-note{
    padding:10px 12px;
    border-radius:9px;
    background:#fff4e5;
    color:#8a5700;
}
.login-submit[disabled]{
    opacity:.55;
    cursor:not-allowed;
}


/* 4.4.17 Publiek wachtwoord-vergeten scherm */
.public-auth-screen{
    position:fixed;
    inset:0;
    z-index:99999;
    display:grid;
    place-items:center;
    width:100vw;
    height:100vh;
    min-height:100dvh;
    overflow:auto;
    padding:24px;
    box-sizing:border-box;
    background:#f3f7fa;
}
.public-auth-screen .login-wrap{
    width:100%;
    min-height:0;
    display:grid;
    place-items:center;
    padding:0;
    margin:0;
}
.public-auth-screen .login-card{
    width:min(420px,calc(100vw - 48px));
    margin:0;
}
@media(max-width:520px){
    .public-auth-screen{padding:14px}
    .public-auth-screen .login-card{
        width:min(420px,calc(100vw - 28px));
    }
}