.grm-dash{font-family:var(--grm-font-body,"Inter",Inter,sans-serif);color:var(--grm-ink,#041E42);max-width:1400px;margin:24px auto;padding:0 16px;background:var(--grm-canvas,#F5F7FA)}
.grm-dash h1,.grm-dash h2,.grm-dash h3,.grm-dash h4{font-family:var(--grm-font-display,"Inter Tight",sans-serif);font-weight:800;letter-spacing:-.01em;color:var(--grm-ink,#041E42)}

.grm-dash__guard{text-align:center;padding:60px 20px;background:#fff;border:1px solid var(--grm-line,#D7DEE7);border-radius:16px;box-shadow:0 2px 6px rgba(4,30,66,.04)}
.grm-dash__guard h3{font-size:24px;margin:0 0 12px}


.grm-dash__current{display:flex;align-items:center;gap:10px;background:transparent;border:0;cursor:pointer;text-align:left;font-family:inherit;padding:4px 8px;border-radius:10px;transition:background .14s}
.grm-dash__current:hover{background:var(--grm-brand-50,#EDF2F8)}
.grm-dash__current-letter,.grm-dash__letter{width:40px;height:40px;border-radius:11px;background:var(--grm-rij-merk);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;font-family:var(--grm-font-display,"Inter Tight",sans-serif)}
.grm-dash__current strong{font-size:14.5px;display:block;line-height:1.2;font-weight:800;color:var(--grm-ink,#041E42);font-family:var(--grm-font-display)}
.grm-dash__current em{font-size:11.5px;color:var(--grm-ink-500,#55636E);font-style:normal;text-transform:capitalize;margin-top:2px;display:block}
.grm-dash__menu{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;background:#fff;border:1px solid var(--grm-line,#D7DEE7);border-radius:14px;list-style:none;padding:8px;margin:0;box-shadow:0 16px 40px rgba(4,30,66,.12);z-index:50}
.grm-dash__menu li button,.grm-dash__menu li a{display:flex;width:100%;align-items:center;gap:10px;padding:10px 12px;border:0;background:transparent;cursor:pointer;border-radius:10px;font-family:inherit;text-align:left;text-decoration:none;color:inherit;font-size:14px;transition:background .14s,color .14s}
.grm-dash__menu li button:hover,.grm-dash__menu li a:hover{background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63)}
.grm-dash__menu li button strong{font-weight:700}
.grm-dash__menu li button em{font-size:11px;color:var(--grm-ink-500,#55636E);font-style:normal;text-transform:capitalize}
.grm-dash__menu-sep{border-top:1px solid var(--grm-line,#D7DEE7);margin-top:8px;padding-top:8px}
.grm-dash__menu-sep a{font-weight:700;color:var(--grm-brand,#103A63)}

.grm-dash__body{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
@media(max-width:860px){.grm-dash__body{grid-template-columns:1fr}}

.grm-dash__side{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--grm-line,#D7DEE7);border-radius:14px;padding:12px;position:sticky;top:96px;box-shadow:0 2px 6px rgba(4,30,66,.04)}
@media(max-width:860px){.grm-dash__side{position:static;flex-direction:row;overflow-x:auto;padding:8px}}

.grm-dash__navbtn{display:flex;align-items:center;gap:10px;background:transparent;border:0;font-family:inherit;font-size:14px;font-weight:600;color:var(--grm-ink-700,#33424F);padding:11px 14px;border-radius:10px;cursor:pointer;transition:background .14s,color .14s;text-align:left;width:100%;justify-content:flex-start;white-space:nowrap}
.grm-dash__navbtn .material-symbols-rounded{font-size:20px;color:var(--grm-ink-500,#55636E);transition:color .14s,font-variation-settings .14s}
.grm-dash__navbtn:hover{background:#fff;color:var(--grm-ink,#041E42)}
.grm-dash__navbtn:hover .material-symbols-rounded{color:var(--grm-brand,#103A63)}

.grm-dash__navbadge{margin-left:auto;background:#fff;color:var(--grm-ink-500,#55636E);font-size:11px;padding:3px 8px;border-radius:99px;font-weight:800}

.grm-dash__main{background:#fff;border:1px solid var(--grm-line,#D7DEE7);border-radius:14px;padding:28px;min-height:500px;box-shadow:0 2px 6px rgba(4,30,66,.04)}
.grm-dash__panel{display:none}
.grm-dash__panel.is-active{display:block}
.grm-dash__panel h2{font-size:24px;font-weight:800;margin:0 0 4px;letter-spacing:-.02em;color:var(--grm-ink,#041E42)}
.grm-dash__sub{color:var(--grm-ink-500,#55636E);font-size:14px;margin:0 0 22px;line-height:1.55}
.grm-dash__empty{color:var(--grm-ink-300,#A8B4BC);text-align:center;padding:48px 20px;font-style:italic;font-size:14px}

.grm-dash__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
@media(max-width:600px){.grm-dash__kpis{grid-template-columns:1fr}}
.grm-dash__kpi{background:linear-gradient(135deg,var(--grm-brand-50,#EDF2F8) 0%,#fff 100%);border:1px solid var(--grm-line,#D7DEE7);border-radius:14px;padding:22px;text-align:left;display:flex;align-items:center;gap:14px;transition:transform .15s,box-shadow .15s,border-color .15s}
.grm-dash__kpi:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(4,30,66,.10);border-color:transparent}
.grm-dash__kpi-ic{flex-shrink:0;width:46px;height:46px;border-radius:11px;background:var(--grm-brand,#103A63);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 12px rgba(16,58,99,.28)}
.grm-dash__kpi-ic .material-symbols-rounded{font-size:22px}
.grm-dash__kpi:nth-child(2) .grm-dash__kpi-ic{background:var(--grm-accent,#1668C7);color:#FFFFFF;box-shadow:0 4px 12px rgba(22,104,199,.28)}
.grm-dash__kpi:nth-child(3) .grm-dash__kpi-ic{background:var(--grm-success,#103A63);box-shadow:0 4px 12px rgba(16,58,99,.28)}
.grm-dash__kpi-txt{display:flex;flex-direction:column;line-height:1.2}
.grm-dash__kpi strong{display:block;font-size:28px;font-weight:800;color:var(--grm-ink,#041E42);letter-spacing:-.02em;font-family:var(--grm-font-display)}
.grm-dash__kpi span{font-size:13px;color:var(--grm-ink-500,#55636E);font-weight:600;margin-top:2px}

.grm-dash__tipbox{background:#fff;border:1px dashed var(--grm-line,#D7DEE7);border-radius:14px;padding:24px;text-align:center}
.grm-dash__tipbox strong{display:block;margin-bottom:6px;color:var(--grm-ink,#041E42);font-family:var(--grm-font-display);font-weight:800}
.grm-dash__tipbox p{margin:0 0 14px;color:var(--grm-ink-500,#55636E);line-height:1.55}

.grm-dash__toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.grm-dash__toolbar h2{margin:0}
.grm-dash__toolbar-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grm-dash__toolbar-right input[type="search"]{padding:9px 14px;border:1px solid var(--grm-line,#D7DEE7);border-radius:10px;font-size:13.5px;min-width:240px;font-family:inherit;background:var(--grm-canvas,#F5F7FA);color:var(--grm-ink,#041E42);transition:border-color .14s,box-shadow .14s,background .14s;outline:none}
.grm-dash__toolbar-right input[type="search"]:focus{border-color:var(--grm-brand,#103A63);background:#fff;box-shadow:0 0 0 4px rgba(22,104,199,.14)}
.grm-dash__toolbar-right input[type="search"]::placeholder{color:var(--grm-ink-500,#55636E)}

.grm-dash__table{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border-radius:12px;overflow:hidden}
.grm-dash__table thead th{background:#fff;color:var(--grm-ink-500,#55636E);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:800;padding:12px 14px;text-align:left;border-bottom:1px solid var(--grm-line,#D7DEE7);font-family:var(--grm-font-display)}
.grm-dash__table tbody td{padding:14px;border-bottom:1px solid var(--grm-canvas,#f5f7fa);vertical-align:middle;color:var(--grm-ink,#041E42)}
.grm-dash__table tbody tr{cursor:pointer;transition:background .12s}
.grm-dash__table tbody tr:hover{background:var(--grm-brand-50,#EDF2F8)}
.grm-dash__table tbody tr:last-child td{border-bottom:0}
.grm-dash__table small{color:var(--grm-ink-500,#55636E);font-size:12px}
.grm-dash__td-img{width:48px}
.grm-dash__td-img img{width:40px;height:40px;object-fit:cover;border-radius:8px;display:block}
.grm-dash__thumb{width:40px;height:40px;border-radius:8px;background:var(--grm-rij-merk);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-family:var(--grm-font-display)}

.grm-dash__pill{padding:3px 10px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.grm-dash__pill.ok{background:rgba(16,58,99,.14);color:var(--grm-success,#103A63)}
.grm-dash__pill.off{background:var(--grm-canvas,#f5f7fa);color:var(--grm-ink-500,#55636E)}
.grm-dash__pill.warn{background:rgba(22,104,199,.14);color:var(--grm-accent,#1668C7)}

.grm-dash__form{display:flex;flex-direction:column;gap:20px}
.grm-dash__form fieldset{border:1px solid var(--grm-line,#D7DEE7);border-radius:14px;padding:22px;margin:0;background:#fff}
.grm-dash__form legend{font-weight:800;color:var(--grm-ink,#041E42);padding:0 10px;font-size:14px;font-family:var(--grm-font-display)}
.grm-dash__grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.grm-dash__grid2{grid-template-columns:1fr}}
.grm-dash__grid2 label,.grm-dash__lbl{display:block;font-size:12px;font-weight:700;color:var(--grm-ink-500,#55636E);text-transform:uppercase;letter-spacing:.04em}
.grm-dash__grid2 input,.grm-dash__grid2 select,.grm-dash__grid2 textarea,.grm-dash__lbl input,.grm-dash__lbl select,.grm-dash__lbl textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--grm-line,#D7DEE7);border-radius:10px;font-size:14px;font-family:inherit;background:var(--grm-canvas,#F5F7FA);text-transform:none;font-weight:400;color:var(--grm-ink,#041E42);outline:none;transition:border-color .14s,box-shadow .14s,background .14s;box-sizing:border-box}
.grm-dash__grid2 input:focus,.grm-dash__grid2 select:focus,.grm-dash__grid2 textarea:focus,.grm-dash__lbl input:focus,.grm-dash__lbl select:focus,.grm-dash__lbl textarea:focus{border-color:var(--grm-brand,#103A63);background:#fff;box-shadow:0 0 0 4px rgba(22,104,199,.14)}
.grm-dash__col2{grid-column:span 2}
@media(max-width:700px){.grm-dash__col2{grid-column:span 1}}
.grm-dash__check{display:flex;align-items:center;gap:8px;font-size:13.5px;text-transform:none;font-weight:600;color:var(--grm-ink,#041E42)}
.grm-dash__check input{width:auto;margin:0;accent-color:var(--grm-brand,#103A63)}

.grm-dash__fields{display:flex;flex-direction:column;gap:16px}
.grm-dash__field{padding-bottom:10px}
.grm-dash__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.grm-dash__chip{background:#fff;border:1px solid var(--grm-line,#D7DEE7);border-radius:99px;font-size:12px;font-weight:700;color:var(--grm-ink-700,#33424F);padding:6px 12px;cursor:pointer;transition:all .14s;font-family:inherit}
.grm-dash__chip:hover{background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63);border-color:var(--grm-brand,#103A63)}
.grm-dash__chip.is-active{background:var(--grm-brand,#103A63);color:#fff;border-color:var(--grm-brand,#103A63)}

.grm-dash__form-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px}
.grm-dash__msg{font-size:13px;color:var(--grm-ink-500,#55636E);margin:0;min-height:18px}

.grm-dash__modal{position:fixed;inset:0;background:rgba(4,30,66,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:grmDashModalFade .25s ease-out both;font-family:var(--grm-font-body)}
.grm-dash__modal[hidden]{display:none}
@keyframes grmDashModalFade{from{opacity:0}to{opacity:1}}
.grm-dash__modal-box{background:#fff;border-radius:18px;max-width:720px;width:100%;max-height:90vh;overflow-y:auto;padding:24px;box-shadow:0 24px 60px rgba(4,30,66,.22);animation:grmDashModalRise .35s cubic-bezier(.22,1,.36,1) both}
@keyframes grmDashModalRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.grm-dash__modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--grm-line,#D7DEE7)}
.grm-dash__modal-head h3{margin:0;font-size:19px;font-weight:800;font-family:var(--grm-font-display);color:var(--grm-ink,#041E42)}
.grm-dash__modal-close{background:#fff;border:1px solid var(--grm-line,#D7DEE7);width:36px;height:36px;border-radius:10px;font-size:0;cursor:pointer;color:var(--grm-ink-500,#55636E);line-height:1;display:flex;align-items:center;justify-content:center;transition:background .14s}
.grm-dash__modal-close::before{content:"×";font-size:24px;font-weight:600}
.grm-dash__modal-close:hover{background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63)}
.grm-dash__modal textarea[data-role="csv-text"]{width:100%;margin-top:10px;padding:12px;border:1px solid var(--grm-line,#D7DEE7);border-radius:10px;font-family:monospace;font-size:12px;background:var(--grm-canvas,#F5F7FA)}

.grm-btn{font-family:inherit;font-size:14px;font-weight:700;padding:10px 18px;border-radius:10px;cursor:pointer;border:1px solid transparent;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .14s,color .14s,transform .12s,box-shadow .14s;line-height:1}
.grm-btn--primary{background:var(--grm-brand,#103A63);color:#fff;box-shadow:0 4px 12px rgba(22,104,199,.32)}
.grm-btn--primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(22,104,199,.42);color:#fff;background:var(--grm-accent-hover,#125AAC)}
.grm-btn--ghost{background:transparent;color:var(--grm-ink,#041E42);border-color:var(--grm-line,#D7DEE7)}
.grm-btn--ghost:hover{border-color:var(--grm-brand,#103A63);color:var(--grm-brand,#103A63);background:var(--grm-brand-50,#EDF2F8)}

@media(max-width:980px){.grm-dash{padding-bottom:80px}}

/* ── Zijbalk in de OfferteKlik-opzet, in Grootmarkt-marine ────────────────
   Vaste kolom links met de bedrijfswisselaar bovenin, navigatie in benoemde
   groepen, en het eigen account onderaan. De actieve regel is een gevulde
   merkbalk in plaats van een lichte markering, en niet-actieve regels schuiven
   bij aanwijzen iets naar rechts. Dat laatste is precies wat het OfferteKlik-
   dashboard leesbaar maakt: je ziet waar je bent zonder de kleuren te tellen. */
.grm-dash{--grm-dash-sw:264px;max-width:none;margin:0;padding:0;background:var(--grm-canvas,#F5F7FA);min-height:100vh}
.grm-dash__body{display:block;gap:0}
.grm-dash__tabblad{min-height:1px}
.grm-dash.is-laden .grm-dash__tabblad{opacity:.5;pointer-events:none;transition:opacity .12s}

.grm-dash__side{
  position:fixed;left:0;top:0;bottom:0;width:var(--grm-dash-sw);z-index:60;
  display:flex;flex-direction:column;gap:0;
  background:#fff;border:0;border-right:1px solid var(--grm-line,#D7DEE7);
  border-radius:0;padding:0;box-shadow:none;overflow:hidden;
}
.grm-dash__main{margin-left:var(--grm-dash-sw);padding:26px 30px 60px;min-width:0}

.grm-dash__org{position:relative;padding:16px 14px 12px;border-bottom:1px solid var(--grm-line-soft,#EDF2F8);flex:0 0 auto}
.grm-dash__current{width:100%;gap:11px;padding:8px 10px;border-radius:12px}
.grm-dash__current-txt{flex:1;min-width:0}
.grm-dash__current-txt strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grm-dash__current-caret{margin-left:auto;color:var(--grm-ink-300,#A8B4BC);font-size:18px;transition:transform .18s}
.grm-dash__current[aria-expanded="true"] .grm-dash__current-caret{transform:rotate(180deg)}
.grm-dash__org .grm-dash__menu{left:10px;right:10px;min-width:0;top:calc(100% - 4px)}

.grm-dash__nav{flex:1 1 auto;overflow-y:auto;padding:10px 12px 14px;scrollbar-width:thin}
.grm-dash__nav::-webkit-scrollbar{width:4px}
.grm-dash__nav::-webkit-scrollbar-thumb{background:var(--grm-line,#D7DEE7);border-radius:99px}
.grm-dash__navlabel{display:block;font-size:10.5px;font-weight:800;color:var(--grm-ink-300,#A8B4BC);text-transform:uppercase;letter-spacing:.08em;padding:14px 12px 6px}
.grm-dash__navlabel:first-child{padding-top:4px}

.grm-dash__navbtn{
  margin-bottom:1px;padding:9px 12px;border-radius:10px;font-size:13.5px;
  transition:background .18s cubic-bezier(.4,0,.2,1),color .18s,padding .18s,box-shadow .18s;
}
.grm-dash__navbtn:hover{background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63);padding-left:18px}
.grm-dash__navbtn:hover .material-symbols-rounded{color:var(--grm-brand,#103A63)}
.grm-dash__navbtn.is-active{
  background:linear-gradient(135deg,var(--grm-brand,#103A63),var(--grm-accent,#1668C7));
  color:#fff;padding-left:12px;box-shadow:0 6px 14px -4px rgba(16,58,99,.45);
}
.grm-dash__navbtn.is-active .material-symbols-rounded{color:#fff}
.grm-dash__navbtn.is-active:hover{padding-left:12px}
.grm-dash__navbtn.is-active .grm-dash__navbadge{background:rgba(255,255,255,.24);color:#fff}
.grm-dash__navbadge{margin-left:auto}

.grm-dash__side-foot{flex:0 0 auto;border-top:1px solid var(--grm-line-soft,#EDF2F8);padding:10px 12px 12px}
.grm-dash__side-link{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--grm-ink-500,#55636E);text-decoration:none;transition:background .18s,color .18s,padding .18s}
.grm-dash__side-link .material-symbols-rounded{font-size:17px}
.grm-dash__side-link:hover{background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63);padding-left:18px}
.grm-dash__user{display:flex;align-items:center;gap:10px;margin-top:4px;padding:9px 10px;border-radius:12px;background:var(--grm-canvas,#F5F7FA)}
.grm-dash__user-av{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:linear-gradient(135deg,var(--grm-brand,#103A63),var(--grm-accent,#1668C7));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;font-family:var(--grm-font-display,"Inter Tight",sans-serif)}
.grm-dash__user-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.grm-dash__user-txt strong{font-size:12.5px;font-weight:700;color:var(--grm-ink,#041E42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grm-dash__user-txt em{font-size:10.5px;font-style:normal;color:var(--grm-ink-500,#55636E)}
.grm-dash__user-uit{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:var(--grm-ink-500,#55636E);text-decoration:none;transition:background .16s,color .16s}
.grm-dash__user-uit:hover{background:#fff;color:var(--grm-danger,#dc2626)}
.grm-dash__user-uit .material-symbols-rounded{font-size:18px}

@media(max-width:980px){
  .grm-dash{--grm-dash-sw:0px}
  .grm-dash__side{position:static;width:auto;inset:auto;border-right:0;border-bottom:1px solid var(--grm-line,#D7DEE7);overflow:visible}
  .grm-dash__nav{display:flex;gap:4px;overflow-x:auto;padding:10px 12px}
  .grm-dash__navlabel{display:none}
  .grm-dash__navbtn{width:auto;white-space:nowrap;margin-bottom:0}
  .grm-dash__navbtn:hover{padding-left:12px}
  .grm-dash__main{margin-left:0;padding:20px 16px 48px}
  .grm-dash__side-foot{display:flex;gap:8px;align-items:center}
  .grm-dash__user{margin-top:0;flex:1}
}

.grm-dash__hint{margin:0 0 12px;font-size:13px;line-height:1.6;color:var(--grm-ink-500,#55636E)}
.grm-dash__kaartrij{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.grm-dash__geo-status{font-size:12.5px;color:var(--grm-ink-500,#55636E)}
.grm-dash__kaart{height:320px;border-radius:12px;overflow:hidden;border:1px solid var(--grm-line,#D7DEE7);background:var(--grm-canvas,#F5F7FA)}
.grm-dash__kaart .leaflet-container{height:100%;width:100%;font:inherit}
@media(max-width:640px){.grm-dash__kaart{height:240px}}

/* Ontdekken: de branchekiezer boven de voorstellen. */
.grm-ontdek__uitleg{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--grm-ink-500,#55636E)}
.grm-ontdek__kiezer{
  margin-bottom:18px;padding:14px 16px;border-radius:14px;
  background:var(--grm-rij-zacht,#F5F7FA);border:1px solid var(--grm-line,#D7DEE7);
}
.grm-ontdek__kiezerkop{display:block;margin-bottom:9px;font-size:13.5px;color:var(--grm-ink,#041E42)}
.grm-ontdek__chips{display:flex;flex-wrap:wrap;gap:7px}
.grm-ontdek__chip{
  padding:7px 13px;border-radius:99px;cursor:pointer;
  border:1px solid var(--grm-line,#D7DEE7);background:#fff;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--grm-ink,#041E42);
}
.grm-ontdek__chip:hover{border-color:var(--grm-accent,#1668C7)}
.grm-ontdek__chip.is-aan{
  background:var(--grm-brand,#103A63);border-color:var(--grm-brand,#103A63);color:#fff;
}
.grm-ontdek__melding{margin:9px 0 0;font-size:12.5px;color:var(--grm-accent,#1668C7);min-height:1.1em}
.grm-ontdek__rooster{margin-top:4px}

/* De uitrusting van een gesprek. */
.grm-chat__kop{display:flex;align-items:center;gap:10px}
.grm-chat__koptxt{flex:1;min-width:0;display:flex;flex-direction:column}
.grm-chat__meerwrap{position:relative;flex:0 0 auto}
.grm-chat__meer{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--grm-brand-50,#EDF2F8);color:var(--grm-brand,#103A63);
}
.grm-chat__meer:hover{background:#D3E0EF}
.grm-chat__menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:238px;
  display:flex;flex-direction:column;padding:6px;
  background:#fff;border:1px solid var(--grm-line,#D7DEE7);border-radius:12px;
  box-shadow:0 16px 40px -14px rgba(4,30,66,.4);
}
.grm-chat__menu[hidden]{display:none}
.grm-chat__menu button{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;
  border:0;border-radius:9px;background:none;cursor:pointer;text-align:left;
  font:inherit;font-size:13px;font-weight:600;color:var(--grm-ink,#041E42);
}
.grm-chat__menu button:hover{background:var(--grm-brand-50,#EDF2F8)}
.grm-chat__menu .material-symbols-rounded{font-size:18px;color:var(--grm-ink-500,#55636E)}

/* Onderaan de bel: tijd, bewerkt-teken en of hij is afgeleverd of gelezen. */
.grm-chat__meta{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11px;opacity:.75}
.grm-chat__meta time{font-size:11px}
.grm-chat__bewerkt{font-style:italic}
.grm-chat__stand{display:inline-flex;align-items:center}
.grm-chat__stand .material-symbols-rounded{font-size:14px}
.grm-chat__stand.is-gelezen .material-symbols-rounded{color:#9CC4EE}
.grm-chat__bewerkknop{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;padding:0;border:0;border-radius:6px;
  background:none;cursor:pointer;color:inherit;opacity:.8;
}
.grm-chat__bewerkknop:hover{opacity:1;background:rgba(255,255,255,.18)}
.grm-chat__bewerkknop .material-symbols-rounded{font-size:14px}
.grm-chat__bel--weg{font-style:italic;opacity:.7}
.grm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* De verloopgrafiek. Een lijn en geen staven: staven vergelijken losse blokken,
   een lijn laat een richting zien, en de richting is waar een verlenging op
   hangt. */
.grm-grafiek__kop{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px}
.grm-grafiek__kop h2{margin:0;flex:1 1 auto;font-size:15px}
.grm-grafiek__perioden{display:flex;flex-wrap:wrap;gap:4px}
.grm-grafiek__periode{
  padding:7px 12px;border-radius:99px;cursor:pointer;
  border:1px solid var(--grm-line,#D7DEE7);background:#fff;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--grm-ink-500,#55636E);
}
.grm-grafiek__periode:hover{border-color:var(--grm-accent,#1668C7);color:var(--grm-ink,#041E42)}
.grm-grafiek__periode.is-aan{
  background:var(--grm-brand,#103A63);border-color:var(--grm-brand,#103A63);color:#fff;
}
.grm-grafiek__spiegel{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;
  font-size:12.5px;font-weight:600;color:var(--grm-ink-500,#55636E);cursor:pointer;
}
.grm-grafiek__vlak{width:100%;overflow:hidden}
/* De grafiek rekt mee met de breedte; de verhouding houdt hem leesbaar. */
.grm-grafiek__svg{display:block;width:100%;height:auto;aspect-ratio:720/260}
.grm-grafiek__hulplijn{stroke:var(--grm-line,#D7DEE7);stroke-width:1}
.grm-grafiek__as{fill:var(--grm-ink-400,#7A8794);font-size:11px;font-family:var(--grm-font,'Inter',sans-serif)}
.grm-grafiek__lijn{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.grm-grafiek__lijn--weergaven{stroke:var(--grm-brand,#103A63)}
.grm-grafiek__lijn--kliks{stroke:var(--grm-accent,#1668C7)}
/* Vorig jaar streept: gelijke lijnen naast elkaar zijn niet uit elkaar te
   houden zodra ze elkaar kruisen. */
.grm-grafiek__lijn--vorig{stroke:var(--grm-ink-400,#7A8794);stroke-width:1.8;stroke-dasharray:5 5}
.grm-grafiek__punt--weergaven{fill:var(--grm-brand,#103A63)}
.grm-grafiek__punt--kliks{fill:var(--grm-accent,#1668C7)}
.grm-grafiek__legenda{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;font-size:12.5px;color:var(--grm-ink-500,#55636E)}
.grm-grafiek__merk{display:inline-block;width:16px;height:3px;margin-right:6px;border-radius:2px;vertical-align:middle}
.grm-grafiek__merk--weergaven{background:var(--grm-brand,#103A63)}
.grm-grafiek__merk--kliks{background:var(--grm-accent,#1668C7)}
.grm-grafiek__merk--vorig{background:repeating-linear-gradient(90deg,var(--grm-ink-400,#7A8794) 0 5px,transparent 5px 10px)}
.grm-grafiek__voet{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--grm-ink-500,#55636E)}
.grm-grafiek__voet:empty{display:none}
@media(max-width:600px){
  .grm-grafiek__svg{aspect-ratio:520/300}
  .grm-grafiek__periode{padding:6px 10px;font-size:12px}
}

/* Producten importeren: eerst het bestand, dan de toewijzing per kolom. */
.grm-imp{max-width:100%}
.grm-imp__uitleg{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--grm-ink-500,#55636E)}
.grm-imp__form{display:flex;flex-direction:column;gap:14px}
.grm-imp__veld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--grm-ink,#041E42)}
.grm-imp__veld input[type="file"]{
  padding:12px;border:1px dashed var(--grm-line,#D7DEE7);border-radius:11px;
  background:var(--grm-rij-zacht,#F5F7FA);font:inherit;font-weight:400;
}
.grm-imp__soorten{margin:0;padding:0 0 0 18px;font-size:13px;line-height:1.7;color:var(--grm-ink-500,#55636E)}
.grm-imp__vink{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--grm-ink,#041E42)}
.grm-imp__knoppen{display:flex;flex-wrap:wrap;gap:10px}

/* De voorbeeldtabel schuift; een importbestand heeft zo twintig kolommen en
   die passen nooit allemaal in beeld. */
.grm-imp__tabelwrap{overflow-x:auto;border:1px solid var(--grm-line,#D7DEE7);border-radius:12px}
.grm-imp__tabel{border-collapse:collapse;width:100%;font-size:13px}
.grm-imp__tabel th{
  vertical-align:top;padding:10px;text-align:left;
  background:var(--grm-rij-zacht,#F5F7FA);border-bottom:1px solid var(--grm-line,#D7DEE7);
}
.grm-imp__kolomnaam{
  display:block;margin-bottom:6px;font-size:12px;font-weight:800;
  color:var(--grm-ink,#041E42);white-space:nowrap;
}
.grm-imp__kies{
  width:100%;min-width:170px;padding:7px 9px;font:inherit;font-size:12.5px;
  border:1px solid var(--grm-line,#D7DEE7);border-radius:8px;background:#fff;
}
.grm-imp__tabel td{
  padding:8px 10px;border-bottom:1px solid var(--grm-line,#D7DEE7);
  color:var(--grm-ink-500,#55636E);white-space:nowrap;
}
.grm-imp__tabel tr:last-child td{border-bottom:0}
.grm-imp__let{
  display:flex;gap:8px;align-items:flex-start;margin:0;padding:11px 13px;
  background:var(--grm-brand-50,#EDF2F8);border-radius:11px;
  font-size:13px;line-height:1.55;color:var(--grm-ink,#041E42);
}
.grm-imp__let .material-symbols-rounded{font-size:18px;color:var(--grm-accent,#1668C7)}
.grm-cat__kopknoppen{display:flex;flex-wrap:wrap;gap:10px}