.product-thumb{width:58px;height:58px;border-radius:10px;object-fit:cover;background:#eef2f7;display:block}.product-thumb.placeholder{display:grid;place-items:center;font-size:24px}.product-image-editor{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;margin:12px 0}.product-image-preview{width:120px;height:100px;border:1px dashed #cbd5e1;border-radius:12px;display:grid;place-items:center;font-size:32px;background:#f8fafc;overflow:hidden}.product-image-preview img{width:100%;height:100%;object-fit:cover}.spec-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}.spec-chip{font-size:10px;padding:2px 6px;border-radius:999px;background:#eef2ff;color:#3730a3;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:650px){.product-image-editor{grid-template-columns:1fr}.product-image-preview{width:100%;height:160px}}

.email-layout{display:grid;grid-template-columns:minmax(340px,42%) 1fr;gap:16px}.email-list-panel,.email-reader{min-height:620px}.email-tabs{display:flex;gap:8px;border-bottom:1px solid #e5e7eb;padding-bottom:12px;margin-bottom:8px}.email-tab{border:0;background:transparent;padding:9px 12px;border-radius:9px;cursor:pointer}.email-tab.active{background:var(--primary,#b68b2c);color:#fff}.email-list{display:flex;flex-direction:column}.email-item{padding:14px 8px;border-bottom:1px solid #edf0f2;cursor:pointer}.email-item:hover,.email-item.active{background:#f7f8fa}.email-item.unseen strong{font-weight:800}.email-item-head{display:flex;justify-content:space-between;gap:12px}.email-item small{display:block;margin-top:4px;color:#667085}.email-reader-head{border-bottom:1px solid #e5e7eb;padding-bottom:16px;margin-bottom:18px}.email-reader-meta{display:grid;gap:5px;color:#667085;font-size:14px}.email-reader-body{white-space:pre-wrap;line-height:1.65;overflow-wrap:anywhere}.email-reader-actions{display:flex;gap:8px;margin-top:16px}@media(max-width:900px){.email-layout{grid-template-columns:1fr}.email-list-panel,.email-reader{min-height:auto}}

.email-workspace{display:grid;grid-template-columns:220px minmax(300px,380px) minmax(420px,1fr);padding:0;overflow:hidden;min-height:680px}.mail-folders{padding:18px 12px;border-right:1px solid #e5e7eb;background:#fafafa}.mail-folder-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#667085;font-weight:700;margin:20px 10px 8px}.mail-folder-list{display:flex;flex-direction:column;gap:4px}.mail-folder{border:0;background:transparent;border-radius:9px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer;width:100%;color:#344054}.mail-folder:hover{background:#f0f2f5}.mail-folder.active{background:var(--primary,#b68b2c);color:#fff}.mail-folder b{min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.22);font-size:12px}.mail-folder-loading{padding:10px;color:#667085}.mail-message-column{border-right:1px solid #e5e7eb;min-width:0;background:#fff}.mail-list-header{height:82px;padding:14px 16px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;gap:12px}.mail-list-header small{display:block;color:#667085;margin-top:3px}.mail-list-header input{max-width:190px}.mail-message-column .email-list{max-height:598px;overflow:auto}.email-item{padding:14px 16px}.email-item.active{border-left:4px solid var(--primary,#b68b2c);padding-left:12px}.email-subject{font-weight:600;margin-top:4px}.email-preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail-reader{padding:22px;overflow:auto;max-height:680px;background:#fff}.mail-reader .empty{min-height:580px}.email-reader-head h2{font-size:22px;line-height:1.3}.email-toolbar{margin-bottom:12px}@media(max-width:1150px){.email-workspace{grid-template-columns:190px 330px 1fr}}@media(max-width:900px){.email-workspace{grid-template-columns:180px 1fr}.mail-reader{grid-column:1/-1;border-top:1px solid #e5e7eb;max-height:none}.mail-message-column .email-list{max-height:460px}}@media(max-width:650px){.email-workspace{display:block}.mail-folders{border-right:0;border-bottom:1px solid #e5e7eb}.mail-folder-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.mail-message-column{border-right:0}.mail-list-header{height:auto;align-items:stretch;flex-direction:column}.mail-list-header input{max-width:none}.mail-reader{padding:16px}.mail-reader .empty{min-height:220px}}

/* Definitieve vaste mailbox-layout */
#emailView{min-width:0}
#emailView .email-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#emailView .toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}
#emailView .email-workspace{height:calc(100vh - 210px);min-height:620px;max-height:820px;display:grid;grid-template-columns:230px 390px minmax(0,1fr);gap:0;padding:0;overflow:hidden;border:1px solid #e5e7eb;border-radius:14px;background:#fff}
#emailView .mail-folders,#emailView .mail-message-column,#emailView .mail-reader{min-width:0;min-height:0;height:100%;overflow:hidden}
#emailView .mail-folders{display:flex;flex-direction:column;padding:16px 10px;border-right:1px solid #e5e7eb;background:#f8fafc}
#emailView .mail-folder-list{overflow-y:auto;overflow-x:hidden;padding-right:3px}
#emailView .mail-folder{flex:0 0 auto;min-height:42px;gap:8px}
#emailView .mail-folder span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#emailView .mail-message-column{display:grid;grid-template-rows:auto minmax(0,1fr);border-right:1px solid #e5e7eb;background:#fff}
#emailView .mail-list-header{height:auto;min-height:86px;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:center}
#emailView .mail-list-header input{width:100%;max-width:none;min-width:0}
#emailView .mail-message-column .email-list{max-height:none;height:100%;overflow-y:auto;overflow-x:hidden}
#emailView .email-item{display:block;width:100%;box-sizing:border-box;overflow:hidden;border-left:4px solid transparent}
#emailView .email-item.active{border-left-color:var(--primary,#b68b2c);background:#f5f7fa}
#emailView .email-item-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px}
#emailView .email-item-head strong,#emailView .email-subject,#emailView .email-preview{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#emailView .email-item-head small{white-space:nowrap;font-size:11px}
#emailView .mail-reader{height:100%;max-height:none;padding:0;display:block;overflow-y:auto;overflow-x:hidden;background:#fff}
#emailView .mail-reader>#emailReaderEmpty{min-height:100%;display:grid;place-content:center;text-align:center;padding:32px}
#emailView .mail-reader>#emailReaderContent{padding:24px;box-sizing:border-box;min-width:0}
#emailView .email-reader-head{position:sticky;top:0;z-index:2;background:#fff;padding:0 0 16px;margin-bottom:18px}
#emailView .email-reader-head h2{overflow-wrap:anywhere;margin-top:0}
#emailView .email-reader-meta span{overflow-wrap:anywhere}
#emailView .email-reader-body{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
#emailView .email-reader-body img,#emailView .email-reader-body table{max-width:100%!important;height:auto!important}

@media(max-width:1250px){
 #emailView .email-workspace{grid-template-columns:200px 340px minmax(0,1fr)}
}
@media(max-width:1000px){
 #emailView .email-workspace{height:auto;max-height:none;grid-template-columns:210px minmax(0,1fr);grid-template-rows:620px auto}
 #emailView .mail-reader{grid-column:1/-1;min-height:460px;border-top:1px solid #e5e7eb}
}
@media(max-width:700px){
 #emailView .email-toolbar{align-items:stretch}
 #emailView .toolbar-actions{width:100%}
 #emailView .toolbar-actions button{flex:1}
 #emailView .email-workspace{display:flex;flex-direction:column;height:auto;max-height:none}
 #emailView .mail-folders{height:auto;max-height:230px;border-right:0;border-bottom:1px solid #e5e7eb}
 #emailView .mail-folder-list{display:grid;grid-template-columns:1fr 1fr;gap:5px}
 #emailView .mail-message-column{height:520px;border-right:0;border-bottom:1px solid #e5e7eb}
 #emailView .mail-reader{height:auto;min-height:420px}
 #emailView .mail-reader>#emailReaderContent{padding:18px}
}

/* Betrouwbare en leesbare e-mailinhoud */
#emailView .email-reader-body{white-space:normal;max-width:100%;min-width:0}
#emailView .email-html-frame{display:block;width:100%;min-height:420px;border:0;background:#fff}
#emailView .email-plain-text{white-space:pre-wrap;line-height:1.7;font-size:15px;color:#1f2937;overflow-wrap:anywhere}
#emailView .empty-state{display:flex;min-height:360px;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:32px;color:#667085}
#emailView .empty-state h3{color:#101828;margin:12px 0 4px}
#emailView .loader{width:30px;height:30px;border:3px solid #e4e7ec;border-top-color:var(--primary,#b68b2c);border-radius:50%;animation:hbsSpin .8s linear infinite}
@keyframes hbsSpin{to{transform:rotate(360deg)}}
\n\n/* Duidelijk onderscheid gelezen en ongelezen e-mail */
#emailView .email-item .email-sender{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#emailView .email-item .email-unread-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:transparent}
#emailView .email-item.unseen{background:#f8fbff;color:#101828}
#emailView .email-item.unseen .email-sender,
#emailView .email-item.unseen .email-subject{font-weight:750;color:#101828}
#emailView .email-item.unseen .email-preview{font-weight:500;color:#344054}
#emailView .email-item.unseen .email-unread-dot{background:var(--primary,#b68b2c)}
#emailView .email-item.seen{background:#fff;color:#667085}
#emailView .email-item.seen .email-sender,
#emailView .email-item.seen .email-subject{font-weight:400;color:#475467}
#emailView .email-item.seen .email-preview{font-weight:400;color:#98a2b3}
#emailView .email-item.seen .email-item-head small{color:#98a2b3}
#emailView .email-item.active{background:#f2f4f7}
#emailView .email-item.active.seen .email-subject,
#emailView .email-item.active.seen .email-sender{color:#344054}

/* E-mail naar map verplaatsen */
#emailView .email-reader-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
#emailView .email-move-control{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:280px}
#emailView .email-move-control select{min-width:180px;max-width:260px}
@media(max-width:700px){#emailView .email-move-control{width:100%;margin-left:0;min-width:0}#emailView .email-move-control select{flex:1;min-width:0}}


/* Berichten in alle mailboxmappen altijd volledig zichtbaar */
#emailView .mail-message-column .email-list{
  scroll-padding-top:0;
  overscroll-behavior:contain;
}
#emailView .email-item{
  position:relative;
  flex:0 0 auto;
  min-height:104px;
  padding:15px 16px 14px;
  display:grid;
  grid-template-rows:auto auto auto;
  align-content:start;
  row-gap:6px;
  line-height:1.35;
  transform:none!important;
  top:auto!important;
  margin:0;
}
#emailView .email-item-head{
  min-height:22px;
  align-items:center;
}
#emailView .email-sender{
  height:22px;
  line-height:22px;
}
#emailView .email-sender-text{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#emailView .email-date{
  display:block;
  margin:0!important;
  align-self:center;
  line-height:20px;
}
#emailView .email-subject{
  min-height:20px;
  margin:0;
  line-height:20px;
}
#emailView .email-preview{
  display:-webkit-box;
  min-height:34px;
  max-height:38px;
  margin:0;
  overflow:hidden;
  white-space:normal;
  line-height:18px;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
#emailView .email-item:first-child{margin-top:0}
#emailView .mail-list-header{position:relative;z-index:3;background:#fff}

.chat-nav-badge{margin-left:auto;background:#ef4444;color:#fff;border-radius:999px;min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center;font-size:11px}.chat-shell{display:grid;grid-template-columns:300px minmax(0,1fr);height:calc(100vh - 145px);min-height:560px;overflow:hidden;padding:0}.chat-people{border-right:1px solid #e5e7eb;min-width:0;display:flex;flex-direction:column}.chat-people-head,.chat-header{padding:18px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between}.chat-people-head small,.chat-header small{display:block;color:#64748b;margin-top:3px}.chat-search{margin:12px;border:1px solid #dbe2ea;border-radius:10px;padding:11px}.chat-user-list{overflow:auto;flex:1}.chat-user{width:100%;border:0;background:#fff;padding:12px 14px;display:flex;align-items:center;gap:11px;text-align:left;border-bottom:1px solid #f1f5f9;cursor:pointer}.chat-user:hover,.chat-user.active{background:#f4f8f6}.chat-avatar{width:40px;height:40px;border-radius:50%;background:var(--sidebar);color:#fff;display:grid;place-items:center;font-weight:700;flex:0 0 auto}.chat-user-info{min-width:0;flex:1}.chat-user-info strong,.chat-user-info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-user-info small{color:#64748b;margin-top:4px}.chat-user>b{background:var(--gold);color:#fff;border-radius:999px;padding:3px 7px;font-size:11px}.presence{display:inline-block;width:8px;height:8px;border-radius:50%;background:#94a3b8;margin-right:6px}.presence.online{background:#22c55e}.chat-conversation{min-width:0;display:grid;grid-template-rows:auto 1fr auto;background:#f8fafc}.chat-messages{overflow:auto;padding:22px}.chat-bubble-row{display:flex;margin:8px 0}.chat-bubble-row.mine{justify-content:flex-end}.chat-bubble{max-width:min(680px,78%);background:#fff;border:1px solid #e2e8f0;border-radius:16px 16px 16px 4px;padding:10px 13px;box-shadow:0 1px 2px rgba(0,0,0,.04)}.chat-bubble-row.mine .chat-bubble{background:var(--sidebar);color:#fff;border-color:transparent;border-radius:16px 16px 4px 16px}.chat-bubble p{margin:0;line-height:1.45;overflow-wrap:anywhere}.chat-bubble small{display:block;margin-top:6px;opacity:.7;text-align:right}.chat-compose{padding:14px;border-top:1px solid #e5e7eb;background:#fff;display:flex;gap:10px;align-items:flex-end}.chat-compose textarea{flex:1;resize:none;min-height:46px;max-height:140px;border:1px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit}.chat-compose button{height:46px}@media(max-width:850px){.chat-shell{grid-template-columns:230px 1fr}}@media(max-width:650px){.chat-shell{grid-template-columns:1fr;height:auto;min-height:0}.chat-people{border-right:0;border-bottom:1px solid #e5e7eb;max-height:280px}.chat-conversation{min-height:520px}.chat-bubble{max-width:88%}}

.chat-tools{position:relative;display:flex;gap:6px;align-items:center}.chat-tool-btn{width:42px;height:42px;border:1px solid #cbd5e1;background:#fff;border-radius:11px;cursor:pointer;font-size:19px}.chat-tool-btn:hover{background:#f1f5f9}.chat-tool-btn:disabled{opacity:.45;cursor:not-allowed}.chat-input-wrap{flex:1;min-width:0}.chat-emoji-picker{position:absolute;left:0;bottom:52px;width:260px;padding:10px;background:#fff;border:1px solid #dbe2ea;border-radius:14px;box-shadow:0 12px 35px rgba(15,23,42,.18);display:grid;grid-template-columns:repeat(6,1fr);gap:5px;z-index:30}.chat-emoji-picker button{border:0;background:transparent;border-radius:8px;font-size:21px;padding:6px;cursor:pointer}.chat-emoji-picker button:hover{background:#f1f5f9}.chat-file-preview{display:flex;align-items:center;gap:9px;background:#eef5f2;border:1px solid #cbded6;border-radius:10px;padding:7px 9px;margin-bottom:7px}.chat-file-preview>span:nth-child(2){min-width:0;flex:1}.chat-file-preview strong,.chat-file-preview small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-file-preview small{color:#64748b;margin-top:2px}.chat-file-preview button{border:0;background:transparent;font-size:20px;cursor:pointer}.chat-attachment{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;background:rgba(148,163,184,.16);border-radius:10px;padding:10px;margin-bottom:8px;min-width:230px}.chat-attachment>span:nth-child(2){flex:1;min-width:0}.chat-attachment strong,.chat-attachment small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-attachment b{font-size:12px}.chat-image-preview{display:block;max-width:360px;max-height:280px;width:auto;height:auto;border-radius:10px;margin-bottom:8px;object-fit:contain;background:#fff}.chat-image-link{display:block}.chat-bubble-row.mine .chat-attachment{background:rgba(255,255,255,.16)}@media(max-width:650px){.chat-compose{flex-wrap:wrap}.chat-tools{order:1}.chat-input-wrap{order:2;flex-basis:calc(100% - 100px)}.chat-compose>.primary{order:3}.chat-image-preview{max-width:100%;height:auto}.chat-emoji-picker{left:0;width:240px}}

/* Chat UX fix: stabiele scroll, ruim invoerveld en zwevende meldingen */
.chat-shell{grid-template-columns:320px minmax(560px,1fr);}
.chat-conversation{min-height:0;}
.chat-messages{min-height:0;scroll-behavior:auto;overflow-anchor:none;}
.chat-compose{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;padding:16px 18px;gap:12px;}
.chat-input-wrap{width:100%;min-width:0;}
.chat-compose textarea{display:block;width:100%;box-sizing:border-box;min-height:76px;max-height:220px;resize:vertical;padding:14px 15px;line-height:1.45;font-size:15px;}
.chat-compose>.primary{min-width:112px;height:50px;}
.chat-tools{align-self:end;padding-bottom:4px;}
.chat-floating{position:fixed;right:24px;bottom:24px;z-index:120;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.chat-floating-toggle{position:relative;width:58px;height:58px;border:0;border-radius:50%;background:var(--sidebar);color:#fff;font-size:25px;cursor:pointer;box-shadow:0 12px 30px rgba(15,23,42,.28);display:grid;place-items:center;}
.chat-floating-toggle:hover{transform:translateY(-1px);}
.chat-floating-toggle b{position:absolute;right:-4px;top:-5px;min-width:23px;height:23px;padding:0 6px;border-radius:999px;background:#ef4444;color:#fff;border:2px solid #fff;font-size:11px;display:grid;place-items:center;}
.chat-floating-panel{width:350px;max-height:min(520px,70vh);background:#fff;border:1px solid #dbe2ea;border-radius:16px;box-shadow:0 20px 55px rgba(15,23,42,.25);overflow:hidden;display:flex;flex-direction:column;}
.chat-floating-panel>header{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid #e5e7eb;background:#f8fafc;}
.chat-floating-panel>header strong,.chat-floating-panel>header small{display:block}.chat-floating-panel>header small{margin-top:2px;color:#64748b}.chat-floating-panel>header button{border:0;background:transparent;font-size:25px;cursor:pointer;color:#64748b;}
.chat-floating-list{overflow:auto;min-height:90px;max-height:350px;}
.chat-floating-user{width:100%;border:0;border-bottom:1px solid #eef2f6;background:#fff;padding:12px 14px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;}
.chat-floating-user:hover{background:#f4f8f6}.chat-floating-user>span:nth-child(2){min-width:0;flex:1}.chat-floating-user strong,.chat-floating-user small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-floating-user small{color:#64748b;margin-top:3px}.chat-floating-user>b{background:#ef4444;color:#fff;border-radius:999px;padding:3px 7px;font-size:11px}.chat-floating-panel>.primary{margin:12px;width:calc(100% - 24px)}
@media(max-width:1050px){.chat-shell{grid-template-columns:280px minmax(0,1fr)}}
@media(max-width:650px){.chat-compose{grid-template-columns:auto minmax(0,1fr);}.chat-compose>.primary{grid-column:1/-1;width:100%;}.chat-compose textarea{min-height:92px}.chat-floating{right:14px;bottom:14px}.chat-floating-panel{width:min(360px,calc(100vw - 28px));}.chat-floating-toggle{width:54px;height:54px}}

/* Dashboard informatieblokken: chat, mail, offertes en facturen */
.dashboard-module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 20px}
.dashboard-module-card{appearance:none;border:1px solid #e4e7ec;background:#fff;border-radius:var(--card-radius,14px);padding:18px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;text-align:left;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.04);min-height:142px;position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;color:var(--text,#17231f)}
.dashboard-module-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--module-accent,var(--gold))}
.dashboard-module-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.1);border-color:#cbd5e1}
.dashboard-module-card .module-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:23px;background:var(--module-soft,#f2f4f7)}
.dashboard-module-card .module-copy{min-width:0;display:block;padding-right:4px}
.dashboard-module-card small,.dashboard-module-card strong,.dashboard-module-card em{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dashboard-module-card small{font-size:12px;color:#667085;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.dashboard-module-card strong{font-size:20px;line-height:1.2;color:#101828;white-space:nowrap}
.dashboard-module-card em{font-style:normal;color:#667085;font-size:13px;margin-top:7px;white-space:nowrap}
.dashboard-module-card>b{grid-column:2;font-size:12px;color:var(--module-accent,var(--gold));align-self:end;margin-top:4px}
.dashboard-module-card.chat-card{--module-accent:#7c3aed;--module-soft:#f3e8ff}.dashboard-module-card.mail-card{--module-accent:#2563eb;--module-soft:#dbeafe}.dashboard-module-card.quote-card{--module-accent:#d97706;--module-soft:#fef3c7}.dashboard-module-card.invoice-card{--module-accent:#059669;--module-soft:#d1fae5}
@media(max-width:1180px){.dashboard-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.dashboard-module-grid{grid-template-columns:1fr}.dashboard-module-card{min-height:126px}}


/* Helder, donker en automatisch */
.theme-control{display:flex;align-items:center;gap:7px;border:1px solid var(--line,#dfe5e2);background:var(--surface,#fff);border-radius:11px;padding:5px 8px;color:var(--text,#17231f)}
.theme-control select{border:0;background:transparent;color:inherit;padding:5px 24px 5px 2px;min-width:108px;outline:0}
html[data-theme="dark"]{color-scheme:dark;--bg:#0f1513;--surface:#18201d;--panel:#18201d;--text:#eef4f1;--muted:#9eaaa5;--line:#33413c;--border:#33413c;--sidebar:#081d18;--sidebar-text:#f6fbf9}
html[data-theme="dark"] body,html[data-theme="dark"] .main{background:#0f1513;color:#eef4f1}
html[data-theme="dark"] .panel,html[data-theme="dark"] .stat-card,html[data-theme="dark"] .toolbar,html[data-theme="dark"] .modal,html[data-theme="dark"] .topbar,html[data-theme="dark"] .dashboard-module-card,html[data-theme="dark"] .notification-panel,html[data-theme="dark"] .notification-panel-head,html[data-theme="dark"] .notification-item{background:#18201d!important;color:#eef4f1;border-color:#33413c!important}
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select,html[data-theme="dark"] .theme-control,html[data-theme="dark"] .mail-message-column,html[data-theme="dark"] .mail-reader,html[data-theme="dark"] #emailView .email-reader-head{background:#111815!important;color:#eef4f1!important;border-color:#33413c!important}
html[data-theme="dark"] .mail-folders,html[data-theme="dark"] .email-item.seen,html[data-theme="dark"] .email-item.unseen,html[data-theme="dark"] .email-item:hover,html[data-theme="dark"] .email-item.active{background:#151d1a!important;color:#eef4f1!important}
html[data-theme="dark"] table th,html[data-theme="dark"] table td{border-color:#33413c!important;color:#e5ece8}
html[data-theme="dark"] .muted,html[data-theme="dark"] small,html[data-theme="dark"] p,html[data-theme="dark"] em{color:#9eaaa5!important}
html[data-theme="dark"] .ghost,html[data-theme="dark"] .icon-btn,html[data-theme="dark"] .notification-btn{background:#202b27;color:#eef4f1;border-color:#3b4b45}
@media(max-width:700px){.theme-control select{min-width:0;width:36px;color:transparent}.theme-control select option{color:#111}}

/* E-mailacties: markeren, verwijderen en afdrukken */
#emailView .email-item-tools{display:flex;align-items:center;gap:7px;min-width:0}
#emailView .email-star-btn{border:0;background:transparent;color:#98a2b3;font-size:20px;line-height:1;padding:0 2px;cursor:pointer;flex:0 0 auto}
#emailView .email-star-btn:hover,#emailView .email-star-btn.active{color:#d49b00;transform:scale(1.06)}
#emailView .email-item.flagged{box-shadow:inset 3px 0 0 #d49b00}
#emailView .email-reader-actions .danger{background:#fff;color:#b42318;border:1px solid #fecdca;border-radius:8px;padding:9px 12px;cursor:pointer;font-weight:700}
#emailView .email-reader-actions .danger:hover{background:#fef3f2}
html[data-theme="dark"] #emailView .email-star-btn{color:#8f9b96}
html[data-theme="dark"] #emailView .email-star-btn.active{color:#ffd166}
html[data-theme="dark"] #emailView .email-reader-actions .danger{background:#2a1718;color:#ffb4ad;border-color:#6f2a2c}
@media(max-width:650px){#emailView .email-reader-actions>button{flex:1 1 calc(50% - 8px)}#emailView .email-item-tools{gap:4px}}
/* Lichtkrant */
body.has-news-ticker{padding-bottom:44px}
.news-ticker{position:fixed;left:0;right:0;bottom:0;height:44px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;z-index:9990;background:#111827;color:#fff;border-top:1px solid rgba(255,255,255,.15);box-shadow:0 -5px 18px rgba(0,0,0,.18);overflow:hidden}
.news-ticker.hidden{display:none}.news-ticker-label{height:100%;display:flex;align-items:center;padding:0 18px;font-weight:800;background:var(--primary,#2563eb);white-space:nowrap}.news-ticker-window{overflow:hidden;min-width:0}.news-ticker-track{display:flex;width:max-content;align-items:center;white-space:nowrap;animation:ticker-scroll var(--ticker-duration,45s) linear infinite;will-change:transform}.news-ticker.pause-hover .news-ticker-window:hover .news-ticker-track{animation-play-state:paused}.news-ticker-item{display:inline-flex;align-items:center;gap:12px;padding:0 32px;font-size:14px;font-weight:650}.news-ticker-item:after{content:'•';opacity:.45;margin-left:32px}.news-ticker-item a{color:inherit;text-decoration:underline;text-underline-offset:3px}.news-ticker-close{border:0;background:transparent;color:#fff;font-size:20px;width:44px;height:44px;cursor:pointer;opacity:.8}.news-ticker-close:hover{opacity:1;background:rgba(255,255,255,.1)}
@keyframes ticker-scroll{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
.ticker-settings-panel{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}.ticker-settings-panel .form-grid{flex:1}.ticker-admin-list{display:grid;gap:10px}.ticker-admin-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:14px;border:1px solid var(--border,#e5e7eb);border-radius:12px;background:var(--surface,#fff)}.ticker-admin-row.inactive{opacity:.58}.ticker-admin-message{font-weight:750;overflow-wrap:anywhere}.ticker-admin-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;color:var(--muted,#64748b);font-size:12px}.ticker-admin-actions{display:flex;gap:8px}.ticker-status{display:inline-flex;border-radius:999px;padding:3px 8px;background:rgba(37,99,235,.1)}
@media(max-width:700px){body.has-news-ticker{padding-bottom:40px}.news-ticker{height:40px;grid-template-columns:auto 1fr}.news-ticker-label{padding:0 10px;font-size:12px}.news-ticker-close{display:none}.news-ticker-item{font-size:13px;padding:0 20px}.ticker-settings-panel{display:block}.ticker-settings-panel>button{margin-top:12px;width:100%}.ticker-admin-row{grid-template-columns:1fr}.ticker-admin-actions{justify-content:flex-end}}

/* =========================================================
   DEFINITIEVE MOBIELE LAYOUT + LICHTKRANT FIX (2026-07-23)
   Laatste laag: voorkomt horizontale overflow en botsende regels.
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas,iframe{max-width:100%}
.app-shell,.main,.view,.panel,.toolbar,.topbar,.user-chip,.modal,.modal-backdrop{min-width:0;max-width:100%}
.view{overflow-x:hidden}
.panel{overflow-wrap:anywhere}
.table-wrap,.responsive-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{max-width:100%}
input,select,textarea,button{max-width:100%}

/* Lichtkrant altijd echt binnen viewport */
body.has-news-ticker{padding-bottom:max(52px,env(safe-area-inset-bottom))!important}
.news-ticker{
 width:100vw!important;
 max-width:100vw!important;
 min-width:0!important;
 left:0!important;
 right:auto!important;
 bottom:0!important;
 height:52px!important;
 grid-template-columns:auto minmax(0,1fr) 42px!important;
 padding-bottom:env(safe-area-inset-bottom);
 overflow:hidden!important;
}
.news-ticker-label{min-width:0;max-width:125px;padding:0 12px!important;overflow:hidden;text-overflow:ellipsis}
.news-ticker-window{width:100%;min-width:0;overflow:hidden!important}
.news-ticker-track{min-width:max-content;max-width:none}
.news-ticker-item{max-width:none;flex:0 0 auto;padding:0 22px!important;line-height:1.25}
.news-ticker-close{display:grid!important;place-items:center;width:42px!important;min-width:42px;height:100%!important}

@media(max-width:700px){
 body.has-news-ticker{padding-bottom:58px!important}
 .news-ticker{height:58px!important;grid-template-columns:minmax(0,1fr) 40px!important}
 .news-ticker-label{display:none!important}
 .news-ticker-close{display:grid!important;width:40px!important;min-width:40px!important}
 .news-ticker-item{font-size:13px!important;padding:0 18px!important}
 .news-ticker-item:after{margin-left:18px!important}

 /* Hoofdstructuur */
 .app-shell{display:block!important;width:100%!important;min-height:100dvh}
 .main{width:100%!important;min-width:0!important;margin:0!important;padding:0!important}
 .sidebar{position:fixed!important;top:0;bottom:0;left:0;width:min(290px,88vw)!important;max-width:88vw;z-index:10020;transform:translateX(-105%);transition:transform .2s ease;overflow-y:auto}
 .sidebar.open{transform:translateX(0)}
 .topbar{position:sticky;top:0;z-index:80;display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:10px!important;align-items:center;padding:10px 12px!important;width:100%!important}
 .topbar>div:nth-child(2){min-width:0}
 .topbar h1{font-size:19px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
 .topbar p{display:none!important}
 .menu-button{display:inline-grid!important;place-items:center;min-width:42px;height:42px}
 .user-chip{grid-column:1/-1;width:100%;display:flex!important;align-items:center;gap:7px!important;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
 .user-chip::-webkit-scrollbar{display:none}
 .user-chip>*{flex:0 0 auto}
 .user-chip #currentUser{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .theme-control{min-width:112px}
 .theme-control select{width:90px}
 .user-chip .primary,.user-chip .ghost{min-height:38px;padding:8px 10px!important;font-size:13px}

 .content,.main-content{width:100%!important;max-width:100%!important;padding:12px!important;margin:0!important}
 .view{width:100%!important;max-width:100%!important}
 .panel{width:100%!important;max-width:100%!important;border-radius:12px!important}
 .toolbar,.panel-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important}
 .toolbar>*,.panel-head>*{max-width:100%}
 .toolbar button,.toolbar select,.toolbar input{width:100%}
 .toolbar-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%!important}
 .toolbar-actions>*{width:100%!important}

 /* Dashboard */
 .stats-grid,.dashboard-module-grid{grid-template-columns:1fr!important;gap:10px!important}
 .dashboard-module-card,.stat-card{min-height:0!important;padding:14px!important}

 /* Formulieren en modals */
 .form-grid{grid-template-columns:1fr!important}
 .modal-backdrop{padding:10px!important;align-items:flex-start!important;overflow-y:auto!important}
 .modal,.small-modal{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 20px)!important;margin:0!important;overflow-y:auto!important;border-radius:12px!important}
 .modal-head{position:sticky;top:0;z-index:4;background:inherit;padding-top:4px}
 .modal-actions{position:sticky;bottom:0;z-index:4;background:inherit;display:grid!important;grid-template-columns:1fr 1fr;gap:8px;padding-top:10px}
 .modal-actions button{width:100%!important}
 label,input,select,textarea{width:100%;min-width:0}

 /* Tabellen blijven bruikbaar zonder hele pagina breder te maken */
 .panel:has(table),.table-panel{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
 table{width:max-content!important;min-width:100%!important;font-size:13px}
 th,td{white-space:nowrap;padding:10px 9px!important}
 td .actions,.table-actions{display:flex;flex-wrap:nowrap}

 /* Mailbox mobiel */
 #emailView .email-workspace{width:100%!important;border-radius:12px!important}
 #emailView .mail-folders{max-height:none!important;padding:10px!important}
 #emailView .mail-folder-list{display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;gap:7px!important;padding:2px 0 8px!important;scrollbar-width:thin}
 #emailView .mail-folder{width:auto!important;min-width:max-content!important;padding:9px 11px!important}
 #emailView .mail-message-column{height:min(530px,65dvh)!important}
 #emailView .mail-reader{min-height:360px!important;width:100%!important}
 #emailView .email-reader-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
 #emailView .email-reader-actions>*{width:100%!important;min-width:0!important;margin:0!important}
 #emailView .email-move-control{grid-column:1/-1;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important}
 #emailView .email-move-control select{width:100%!important;max-width:none!important}
 #emailView .email-html-frame{min-height:500px;width:100%!important}

 /* Chat mobiel */
 .chat-shell{width:100%!important;grid-template-columns:1fr!important;height:auto!important;min-height:0!important}
 .chat-people{max-height:240px!important}
 .chat-conversation{min-height:520px!important;width:100%!important}
 .chat-header{padding:12px!important}
 .chat-messages{padding:12px!important}
 .chat-bubble{max-width:92%!important}
 .chat-compose{display:grid!important;grid-template-columns:auto auto!important;padding:10px!important;gap:8px!important}
 .chat-input-wrap{grid-column:1/-1!important;grid-row:1;width:100%!important}
 .chat-tools{grid-row:2;grid-column:1;justify-self:start}
 .chat-compose>.primary{grid-row:2!important;grid-column:2!important;width:auto!important;min-width:105px!important}
 .chat-compose textarea{width:100%!important;min-height:96px!important}
 .chat-floating{right:10px!important;bottom:calc(68px + env(safe-area-inset-bottom))!important;max-width:calc(100vw - 20px)}
 .chat-floating-panel{width:calc(100vw - 20px)!important;max-width:380px!important;max-height:65dvh!important}
 .chat-floating-toggle{width:52px!important;height:52px!important}

 /* Lichtkrant beheer */
 .ticker-settings-panel{display:block!important}
 .ticker-settings-panel .form-grid{display:grid!important;grid-template-columns:1fr!important}
 .ticker-settings-panel>button{width:100%!important;margin-top:10px}
 .ticker-admin-row{grid-template-columns:1fr!important;padding:12px!important}
 .ticker-admin-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
 .ticker-admin-actions button{width:100%!important}
}

@media(max-width:390px){
 .topbar{padding:8px!important}
 .content,.main-content{padding:8px!important}
 .toolbar-actions{grid-template-columns:1fr!important}
 .modal-actions{grid-template-columns:1fr!important}
 #emailView .email-reader-actions{grid-template-columns:1fr!important}
 #emailView .email-move-control{grid-template-columns:1fr!important}
 .news-ticker-item{font-size:12px!important;padding:0 13px!important}
}

/* DEFINITIEVE MOBIELE LAYOUT + LICHTKRANT FIX */
html,body{max-width:100%;overflow-x:hidden}*,*::before,*::after{box-sizing:border-box}img,svg,video,canvas,iframe{max-width:100%}.app-shell,.main,.view,.panel,.toolbar,.topbar,.user-chip,.modal,.modal-backdrop{min-width:0;max-width:100%}.view{overflow-x:hidden}.panel{overflow-wrap:anywhere}.table-wrap,.responsive-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}table{max-width:100%}input,select,textarea,button{max-width:100%}
body.has-news-ticker{padding-bottom:max(52px,env(safe-area-inset-bottom))!important}.news-ticker{width:100vw!important;max-width:100vw!important;min-width:0!important;left:0!important;right:auto!important;bottom:0!important;height:52px!important;grid-template-columns:auto minmax(0,1fr) 42px!important;padding-bottom:env(safe-area-inset-bottom);overflow:hidden!important}.news-ticker-label{min-width:0;max-width:125px;padding:0 12px!important;overflow:hidden;text-overflow:ellipsis}.news-ticker-window{width:100%;min-width:0;overflow:hidden!important}.news-ticker-track{min-width:max-content;max-width:none}.news-ticker-item{max-width:none;flex:0 0 auto;padding:0 22px!important;line-height:1.25}.news-ticker-close{display:grid!important;place-items:center;width:42px!important;min-width:42px;height:100%!important}
@media(max-width:700px){body.has-news-ticker{padding-bottom:58px!important}.news-ticker{height:58px!important;grid-template-columns:minmax(0,1fr) 40px!important}.news-ticker-label{display:none!important}.news-ticker-close{display:grid!important;width:40px!important;min-width:40px!important}.news-ticker-item{font-size:13px!important;padding:0 18px!important}.news-ticker-item:after{margin-left:18px!important}.app-shell{display:block!important;width:100%!important;min-height:100dvh}.main{width:100%!important;min-width:0!important;margin:0!important;padding:0!important}.sidebar{position:fixed!important;top:0;bottom:0;left:0;width:min(290px,88vw)!important;max-width:88vw;z-index:10020;transform:translateX(-105%);transition:transform .2s ease;overflow-y:auto}.sidebar.open{transform:translateX(0)}.topbar{position:sticky;top:0;z-index:80;display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:10px!important;align-items:center;padding:10px 12px!important;width:100%!important}.topbar>div:nth-child(2){min-width:0}.topbar h1{font-size:19px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.topbar p{display:none!important}.menu-button{display:inline-grid!important;place-items:center;min-width:42px;height:42px}.user-chip{grid-column:1/-1;width:100%;display:flex!important;align-items:center;gap:7px!important;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.user-chip::-webkit-scrollbar{display:none}.user-chip>*{flex:0 0 auto}.user-chip #currentUser{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.theme-control{min-width:112px}.theme-control select{width:90px}.user-chip .primary,.user-chip .ghost{min-height:38px;padding:8px 10px!important;font-size:13px}.content,.main-content{width:100%!important;max-width:100%!important;padding:12px!important;margin:0!important}.view{width:100%!important;max-width:100%!important}.panel{width:100%!important;max-width:100%!important;border-radius:12px!important}.toolbar,.panel-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important}.toolbar>*,.panel-head>*{max-width:100%}.toolbar button,.toolbar select,.toolbar input{width:100%}.toolbar-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%!important}.toolbar-actions>*{width:100%!important}.stats-grid,.dashboard-module-grid{grid-template-columns:1fr!important;gap:10px!important}.dashboard-module-card,.stat-card{min-height:0!important;padding:14px!important}.form-grid{grid-template-columns:1fr!important}.modal-backdrop{padding:10px!important;align-items:flex-start!important;overflow-y:auto!important}.modal,.small-modal{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 20px)!important;margin:0!important;overflow-y:auto!important;border-radius:12px!important}.modal-head{position:sticky;top:0;z-index:4;background:inherit;padding-top:4px}.modal-actions{position:sticky;bottom:0;z-index:4;background:inherit;display:grid!important;grid-template-columns:1fr 1fr;gap:8px;padding-top:10px}.modal-actions button{width:100%!important}label,input,select,textarea{width:100%;min-width:0}.panel:has(table),.table-panel{overflow-x:auto!important;-webkit-overflow-scrolling:touch}table{width:max-content!important;min-width:100%!important;font-size:13px}th,td{white-space:nowrap;padding:10px 9px!important}td .actions,.table-actions{display:flex;flex-wrap:nowrap}#emailView .email-workspace{width:100%!important;border-radius:12px!important}#emailView .mail-folders{max-height:none!important;padding:10px!important}#emailView .mail-folder-list{display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;gap:7px!important;padding:2px 0 8px!important;scrollbar-width:thin}#emailView .mail-folder{width:auto!important;min-width:max-content!important;padding:9px 11px!important}#emailView .mail-message-column{height:min(530px,65dvh)!important}#emailView .mail-reader{min-height:360px!important;width:100%!important}#emailView .email-reader-actions{display:grid!important;grid-template-columns:1fr 1fr!important}#emailView .email-reader-actions>*{width:100%!important;min-width:0!important;margin:0!important}#emailView .email-move-control{grid-column:1/-1;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important}#emailView .email-move-control select{width:100%!important;max-width:none!important}#emailView .email-html-frame{min-height:500px;width:100%!important}.chat-shell{width:100%!important;grid-template-columns:1fr!important;height:auto!important;min-height:0!important}.chat-people{max-height:240px!important}.chat-conversation{min-height:520px!important;width:100%!important}.chat-header{padding:12px!important}.chat-messages{padding:12px!important}.chat-bubble{max-width:92%!important}.chat-compose{display:grid!important;grid-template-columns:auto auto!important;padding:10px!important;gap:8px!important}.chat-input-wrap{grid-column:1/-1!important;grid-row:1;width:100%!important}.chat-tools{grid-row:2;grid-column:1;justify-self:start}.chat-compose>.primary{grid-row:2!important;grid-column:2!important;width:auto!important;min-width:105px!important}.chat-compose textarea{width:100%!important;min-height:96px!important}.chat-floating{right:10px!important;bottom:calc(68px + env(safe-area-inset-bottom))!important;max-width:calc(100vw - 20px)}.chat-floating-panel{width:calc(100vw - 20px)!important;max-width:380px!important;max-height:65dvh!important}.chat-floating-toggle{width:52px!important;height:52px!important}.ticker-settings-panel{display:block!important}.ticker-settings-panel .form-grid{display:grid!important;grid-template-columns:1fr!important}.ticker-settings-panel>button{width:100%!important;margin-top:10px}.ticker-admin-row{grid-template-columns:1fr!important;padding:12px!important}.ticker-admin-actions{display:grid!important;grid-template-columns:1fr 1fr!important}.ticker-admin-actions button{width:100%!important}}
@media(max-width:390px){.topbar{padding:8px!important}.content,.main-content{padding:8px!important}.toolbar-actions{grid-template-columns:1fr!important}.modal-actions{grid-template-columns:1fr!important}#emailView .email-reader-actions{grid-template-columns:1fr!important}#emailView .email-move-control{grid-template-columns:1fr!important}.news-ticker-item{font-size:12px!important;padding:0 13px!important}}


/* Compact weergavemodus-icoon op mobiel */
.theme-mobile-wrap{display:none;position:relative;flex:0 0 auto}
.theme-mobile-button{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line,#dfe5e2);background:var(--surface,#fff);color:var(--text,#17231f);border-radius:11px;font-size:18px;cursor:pointer;padding:0}
.theme-mobile-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:10120;width:174px;padding:7px;background:var(--surface,#fff);color:var(--text,#17231f);border:1px solid var(--line,#dfe5e2);border-radius:12px;box-shadow:0 14px 35px rgba(15,23,42,.18)}
.theme-mobile-menu.hidden{display:none!important}
.theme-mobile-menu button{width:100%;display:flex;align-items:center;gap:9px;border:0;background:transparent;color:inherit;border-radius:9px;padding:10px 11px;text-align:left;cursor:pointer;font:inherit}
.theme-mobile-menu button:hover,.theme-mobile-menu button.active{background:rgba(36,120,87,.12);font-weight:700}
html[data-theme="dark"] .theme-mobile-button,html[data-theme="dark"] .theme-mobile-menu{background:#18201d;color:#eef4f1;border-color:#33413c}
@media(max-width:700px){.theme-control-desktop{display:none!important}.theme-mobile-wrap{display:block!important}.theme-mobile-button{min-width:40px!important}.user-chip{overflow:visible!important}.user-chip #currentUser{max-width:105px}.theme-mobile-menu{position:fixed;right:12px;top:66px;width:min(190px,calc(100vw - 24px))}}


/* MOBIELE EN TABLET BOVENBALK - COMPACTE ACTIE-ICONEN */
.topbar-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.topbar-action-icon{font-size:18px;line-height:1;font-weight:800}
@media(max-width:900px){
 .topbar{display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;padding:9px 10px!important;min-height:62px;background:var(--surface,#fff);border-bottom:1px solid var(--line,#dfe5e2);box-shadow:0 3px 12px rgba(15,23,42,.05)}
 .topbar>.menu-button{grid-column:1;grid-row:1;width:40px!important;min-width:40px!important;height:40px!important;border-radius:11px!important}
 .topbar>div:nth-child(2){grid-column:2;grid-row:1;min-width:0;align-self:center}
 .topbar h1{font-size:18px!important;line-height:1.15!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .topbar p{display:none!important}
 .topbar>.user-chip{grid-column:3!important;grid-row:1!important;width:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:5px!important;overflow:visible!important;padding:0!important}
 .user-chip #currentUser{display:none!important}
 .user-chip .notification-btn,.theme-mobile-button,.topbar-action{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;border-radius:11px!important;display:inline-grid!important;place-items:center!important;font-size:0!important}
 .user-chip .notification-btn{font-size:17px!important}
 .topbar-action-icon{font-size:19px!important;display:block!important}
 .topbar-action-text{display:none!important}
 .topbar-new-customer{box-shadow:0 5px 12px rgba(36,120,87,.2)}
 .topbar-logout{border-color:var(--line,#dfe5e2)!important;background:var(--surface,#fff)!important;color:var(--text,#17231f)!important}
 .theme-control-desktop{display:none!important}
 .theme-mobile-wrap{display:block!important}
 .notification-panel{position:fixed!important;top:64px!important;right:10px!important;left:10px!important;width:auto!important;max-width:none!important;max-height:70dvh!important}
 .theme-mobile-menu{position:fixed!important;top:64px!important;right:10px!important;width:min(190px,calc(100vw - 20px))!important}
}
@media(max-width:520px){
 .topbar{grid-template-columns:40px minmax(0,1fr) auto!important;gap:5px!important;padding:8px!important;min-height:58px}
 .topbar>.menu-button,.user-chip .notification-btn,.theme-mobile-button,.topbar-action{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;border-radius:10px!important}
 .topbar h1{font-size:16px!important}
 .topbar>.user-chip{gap:3px!important}
 .topbar-action-icon{font-size:18px!important}
}
@media(max-width:380px){
 .topbar{grid-template-columns:38px minmax(62px,1fr) auto!important;padding:7px 6px!important}
 .topbar>.menu-button,.user-chip .notification-btn,.theme-mobile-button,.topbar-action{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important}
 .topbar h1{font-size:15px!important}
 .topbar>.user-chip{gap:2px!important}
}
html[data-theme="dark"] .topbar-logout{background:#18201d!important;color:#eef4f1!important;border-color:#33413c!important}


/* =========================================================
   LICHTKRANT MOBIEL ALTIJD ZICHTBAAR + KLEURENSETS
   ========================================================= */
:root{
 --palette-primary:#1f6b57;
 --palette-sidebar:#0c2f27;
 --palette-gold:#c59a3d;
 --palette-soft:#eef7f3;
}
.news-ticker{
 position:fixed!important;
 inset:auto 0 0 0!important;
 width:100%!important;
 max-width:none!important;
 z-index:2147482000!important;
 visibility:visible;
 transform:translateZ(0);
 -webkit-transform:translateZ(0);
}
.news-ticker:not(.hidden){display:grid!important;opacity:1!important}
body.has-news-ticker{padding-bottom:calc(58px + env(safe-area-inset-bottom))!important}
.news-ticker-window{height:100%;display:flex;align-items:center}
.news-ticker-track{display:flex!important;align-items:center;height:100%}
.news-ticker-item{display:inline-flex!important;align-items:center;height:100%;color:#fff!important}
.news-ticker-item a{color:#fff!important}

.color-palette-widget{position:fixed;left:18px;bottom:18px;z-index:2147482100;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:10px}
body.has-news-ticker .color-palette-widget{bottom:calc(62px + env(safe-area-inset-bottom))}
.color-palette-toggle{width:48px;height:48px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:grid;place-items:center;background:var(--sidebar,#0c2f27);color:#fff;font-size:21px;cursor:pointer;box-shadow:0 10px 26px rgba(15,23,42,.25)}
.color-palette-toggle:hover{transform:translateY(-1px)}
.color-palette-panel{width:320px;max-width:calc(100vw - 28px);background:var(--surface,#fff);color:var(--text,#17231f);border:1px solid var(--line,#dfe5e2);border-radius:16px;box-shadow:0 18px 50px rgba(15,23,42,.25);padding:12px;overflow:hidden}
.color-palette-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 2px}
.color-palette-head button{border:0;background:transparent;color:inherit;font-size:23px;cursor:pointer;width:32px;height:32px}
.color-palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.color-palette-option{border:1px solid var(--line,#dfe5e2);background:var(--surface,#fff);color:inherit;border-radius:11px;padding:8px;display:flex;align-items:center;gap:8px;text-align:left;cursor:pointer;min-width:0}
.color-palette-option:hover,.color-palette-option.active{border-color:var(--primary,#1f6b57);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,#1f6b57) 18%,transparent)}
.color-palette-swatches{display:flex;flex:0 0 auto}
.color-palette-swatches i{width:16px;height:24px;display:block;border:1px solid rgba(0,0,0,.08)}
.color-palette-swatches i:first-child{border-radius:7px 0 0 7px}.color-palette-swatches i:last-child{border-radius:0 7px 7px 0}
.color-palette-option span:last-child{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-theme="dark"] .color-palette-panel,html[data-theme="dark"] .color-palette-option{background:#18201d;color:#eef4f1;border-color:#33413c}

/* De gekozen set kleurt de belangrijkste onderdelen zonder leesbaarheid te verstoren */
.sidebar,.chat-floating-toggle,.chat-avatar{background:var(--sidebar)!important}
.primary,.email-tab.active,.mail-folder.active,.news-ticker-label{background:var(--primary)!important}
.chat-nav-badge,.notification-count{background:var(--gold)!important}
.dashboard-module-card:hover{border-color:var(--primary)!important}

@media(max-width:700px){
 body.has-news-ticker{padding-bottom:calc(64px + env(safe-area-inset-bottom))!important}
 .news-ticker{height:calc(56px + env(safe-area-inset-bottom))!important;padding:0 0 env(safe-area-inset-bottom)!important;grid-template-columns:minmax(0,1fr) 42px!important;background:#111827!important}
 .news-ticker-window{min-height:56px!important}
 .news-ticker-track{min-height:56px!important}
 .news-ticker-item{min-height:56px!important;font-size:13px!important;padding:0 20px!important}
 .news-ticker-close{display:grid!important;min-height:56px!important;height:56px!important;align-self:start!important}
 .color-palette-widget{left:10px;bottom:12px}
 body.has-news-ticker .color-palette-widget{bottom:calc(66px + env(safe-area-inset-bottom))}
 .color-palette-toggle{width:44px;height:44px;font-size:19px}
 .color-palette-panel{width:min(330px,calc(100vw - 20px));max-height:min(430px,65dvh);overflow:auto}
 .color-palette-grid{grid-template-columns:1fr}
}