:root{
  --topbar-height:60px;
  --navy:#093855;
  --ink:#093855;
  --muted:rgba(9,56,85,.64);
  --bg:#f4f6f8;
  --surface:#fff;
  --border:rgba(9,56,85,.12);
  --border-strong:rgba(9,56,85,.24);

  --green:#51af3f;
  --green-dark:#3e8934;
  --green-bg:#eef7ec;
  --blue:#2581c4;
  --blue-dark:#246699;
  --blue-bg:#e9f2f9;
  --yellow:#efd72f;
  --yellow-bg:#fcf8dd;

  --cta:var(--blue);
  --cta-hover:var(--blue-dark);
  /* Hoofdknop navy, net als in de app (huisstijl-in-de-app.md, keuze Joris 2026-11-05). */
  --knop:var(--navy);
  --knop-hover:#0f4a6e;
  --accent:#ff9457;
  --accent-hover:#f5813a;
  --danger:#c0392b;
  --danger-bg:rgba(192,57,43,.08);
  --success:#3e8934;
  --success-bg:#eef7ec;
  --warning:#8a6a12;
  --warning-bg:#fcf8dd;

  --radius:16px;
  --radius-sm:12px;
  --shadow-card:0 14px 30px rgba(9,56,54,.08),0 1px 2px rgba(9,56,85,.06);
  --shadow-pop:0 20px 40px rgba(9,56,85,.16);
  font-family:Gilroy,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:16px;
}
@font-face{font-family:'Gilroy';font-weight:400;src:url('fonts/Gilroy-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Gilroy';font-weight:500 900;src:url('fonts/Gilroy-Bold.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Whitewood';src:url('fonts/WhiteWood.woff2') format('woff2');font-display:swap}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
body:is(.is-customer-admin,.is-system){--topbar-height:64px}

.topbar{height:var(--topbar-height);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,40px);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--border);box-shadow:0 2px 8px rgba(9,56,85,.05)}
.topbar form{margin:0}
.topbar__logout{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--blue-dark);cursor:pointer}
.topbar__logout:hover{background:var(--blue-bg);color:var(--navy)}
.topbar__logout:focus-visible{outline:2px solid #9cc3dd;outline-offset:2px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand__mark{height:34px;width:auto;display:block}
.account-menu{position:relative}
.account-menu>summary{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer;list-style:none;border:1px solid var(--border);border-radius:999px;background:#f9fbfc;padding:5px 12px 5px 5px;transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease}
.account-menu>summary::-webkit-details-marker{display:none}
.account-menu>summary:hover,.account-menu[open]>summary{background:var(--blue-bg);border-color:#cfe3f2;box-shadow:0 6px 18px rgba(9,56,85,.08)}
.account-menu>summary:focus-visible{outline:2px solid #9cc3dd;outline-offset:2px}
.account-menu__avatar{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800}
.account-menu__copy{display:grid;gap:1px;min-width:0;text-align:left}
.account-menu__copy strong{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem}
.account-menu__copy small{color:var(--muted);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.account-menu__panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:260px;max-width:calc(100vw - 28px);display:grid;gap:4px;padding:8px;border:1px solid var(--border-strong);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-pop)}
.account-menu__panel::before{content:'';position:absolute;right:22px;top:-7px;width:12px;height:12px;transform:rotate(45deg);background:var(--surface);border-left:1px solid var(--border-strong);border-top:1px solid var(--border-strong)}
.account-menu__panel a,.account-menu__panel button{position:relative;z-index:1;display:flex;align-items:center;gap:8px;width:100%;min-height:38px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:.86rem;font-weight:700;text-align:left;text-decoration:none;padding:8px 10px;cursor:pointer}
.account-menu__panel a:hover,.account-menu__panel button:hover,.account-menu__panel a.active{background:var(--blue-bg);color:var(--blue-dark)}
.account-menu__panel form{border-top:1px solid var(--border);padding-top:5px;margin-top:3px}

.page{max-width:960px;margin:0 auto;padding:24px 20px}
body.is-system .page,body:is(.is-customer-admin,.is-system) .page{max-width:1800px;padding:24px clamp(20px,3vw,40px)}
.portal-footer{max-width:960px;margin:8px auto 0;padding:16px 20px 28px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;border-top:1px solid var(--border);color:var(--muted);font-size:.86rem}
.portal-footer a{color:var(--ink);font-weight:600}
body.is-customer-admin .portal-footer{max-width:1800px;padding-left:clamp(20px,3vw,40px);padding-right:clamp(20px,3vw,40px)}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:var(--shadow-card)}
.hero{max-width:640px;margin:8vh auto}
.narrow{max-width:460px;margin:6vh auto}
.form-card{max-width:640px}
.form-card h2{margin-bottom:12px}
.mail-status{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0;font-size:.88rem}
.mail-status dt{font-weight:600;color:var(--muted)}
.mail-status dd{margin:0}
.status-ok{color:var(--success)}
body.is-system .narrow{margin:4vh auto}
.auth-card{max-width:380px;margin:8vh auto;text-align:center}
.auth-card .button--lg{margin-top:8px}
.auth-card form{display:grid;gap:12px;margin-top:16px;text-align:left}

.eyebrow{font-family:Gilroy,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--green-dark);font-size:.8rem;font-weight:700}
.muted{color:var(--muted)}

.button,.link-button{border:1px solid transparent;border-radius:999px;background:var(--knop);color:#fff;padding:10px 18px;font-weight:700;font-size:.88rem;text-decoration:none;display:inline-block;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}
button.button{font-family:inherit}
.button:hover{background:var(--knop-hover)}
.button.secondary{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.button.secondary:hover{background:var(--blue-bg)}
.button.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.button.danger:hover{background:#a93226;border-color:#a93226}
.button.small{padding:7px 12px;font-size:.8rem}
.button--lg{width:100%;font-size:.95rem;padding:13px}
.button:disabled{opacity:.6;cursor:default}
.link-button{background:transparent;color:var(--danger);border:0;padding:6px;font-weight:600}
.text-link{color:var(--ink);font-weight:600;text-decoration:underline;background:none;border:0;padding:0;cursor:pointer;font-size:inherit}
.text-link--danger{color:var(--danger)}
/* minmax in plaats van een vaste 32px: een icoonknop blijft precies 32px, maar een
   knop met tekst erin ("Nieuwe link", "Intrekken") groeit mee. Met een vaste 32px
   liepen die tekstknoppen buiten hun kolom en dus over elkaar heen. */
.row-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(32px,auto);align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.row-actions .inline-action{display:grid;place-items:center;margin:0}
.inline-action{display:inline}
.copy-url-field{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0}
.copy-url-field input{width:100%;min-width:0;font-size:.78rem}
.copy-url-field--table{min-width:300px}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;padding:0;background:none;color:var(--muted);text-decoration:none}
.icon-btn--ghost{width:32px;height:32px;border-radius:50%;background:var(--blue-bg)}
.icon-btn--ghost:hover{background:#d8e9f5;color:var(--blue-dark)}
.icon-btn--ghost.icon-btn--danger{color:var(--danger);background:var(--danger-bg)}
.icon-btn--ghost.icon-btn--danger:hover{background:#f5d9d9}
.icon-btn--add{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--accent);color:var(--navy);list-style:none}
.icon-btn--add:hover{background:var(--accent-hover)}
.icon-btn--add::-webkit-details-marker{display:none}
.icon-btn--add svg{transition:transform .12s ease}
.add-panel[open]>.icon-btn--add{background:var(--navy);color:#fff}
.add-panel[open]>.icon-btn--add svg{transform:rotate(45deg)}

.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 12px;font-size:.72rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;border:1px solid transparent}
.badge--info{background:var(--blue-dark);color:#fff}
.badge--muted{background:var(--bg);color:var(--muted);border-color:var(--border-strong)}
.badge--warning{background:var(--warning-bg);color:var(--warning);border-color:#f0dba8}
.badge--danger{background:var(--danger-bg);color:var(--danger);border-color:#f0c7c7}

.replenishment-note{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--blue-bg);color:var(--navy);border:1px solid #cfe3f2;border-radius:var(--radius-sm);padding:12px 14px;font-size:.85rem;line-height:1.45;margin:2px 0 16px}

.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:2px}
.section-head h2{margin:0}
.section-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.add-panel{position:relative}
.add-panel-body{display:none}
.add-panel[open] .add-panel-body{
  display:block;position:absolute;right:0;top:calc(100% + 8px);z-index:20;
  width:380px;max-width:90vw;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow-pop);
}
.add-panel-body--wide{width:460px}
.location-search{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.add-panel-body h3{margin:0 0 14px;font-size:1rem;color:var(--ink);font-weight:700}
.add-panel-body .form-grid+.form-grid{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.location-link{text-decoration:none;color:inherit;display:grid;gap:6px}
.locations-page-head{align-items:flex-end;margin-bottom:16px}
.locations-page-head h1{margin:0}
.locations-page-head p{margin:5px 0 0}
.location-card-search{display:grid;gap:6px;min-width:min(360px,100%);font-size:.8rem;font-weight:700}
.location-card-search input{min-height:42px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:.88rem;padding:9px 14px}
.location-card-search input:focus{outline:2px solid #9cc3dd;outline-offset:2px;border-color:#9cc3dd}
.locations-grid{align-items:stretch}
.locations-grid .location-link{min-height:132px}
.locations-empty{grid-column:1/-1;margin:0}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;align-items:end}
/* Filters standaard dicht: de lijst is het werk, filteren is uitzondering. */
.filter-details>summary{cursor:pointer;font-weight:700}
.filter-details[open]>summary{margin-bottom:12px}
.management-row{display:block;border-top:1px solid var(--border);padding:12px 0}
.management-row summary{cursor:pointer;font-weight:700;margin-bottom:10px}
.management-row summary small{display:block;color:var(--muted);font-size:.74rem;font-weight:600;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.management-row form+form{margin-top:8px}
.management-user-form .management-location-panel{grid-column:1/-1}
.management-location-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px;max-height:260px;overflow:auto;padding:9px}
.management-location-checks .check{align-items:flex-start;padding:7px 8px;border:1px solid var(--border);border-radius:8px;background:#fbfdfe}
.management-location-checks .check span{display:grid;gap:2px;min-width:0}
.management-location-checks .check small{color:var(--muted);font-size:.72rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.management-hidden-note{grid-column:1/-1;margin:0;font-size:.78rem}
label,fieldset{display:grid;gap:4px;min-width:0;font-size:.8rem;font-weight:600}
input,select,textarea{width:100%;min-width:0;min-height:38px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:7px 9px;background:var(--surface);font:inherit;color:var(--ink)}
textarea{resize:vertical;line-height:1.45}
input:focus,select:focus,textarea:focus{outline:2px solid #9cc3dd;outline-offset:0;border-color:var(--blue)}
fieldset{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px}
.check{display:flex;align-items:center;font-weight:500}
.check input{min-height:auto;width:auto}
.notice{padding:11px;border-radius:var(--radius-sm);margin-bottom:12px;white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid transparent}
.notice.success{background:var(--success-bg);color:var(--success);border-color:#bfe2d1}
.notice.error,.form-error{background:var(--danger-bg);color:var(--danger);border-color:#f0c7c7}
.notice.warning{background:var(--warning-bg);color:var(--warning);border-color:#f0dba8}
.form-error:empty{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Apparatuur en NEN-3140 in het klantportaal. */
.location-head__actions{display:grid;gap:10px;margin-top:16px;max-width:360px}
.equipment-page{max-width:none;margin:0}
.equipment-table__more details{margin-top:8px}
.equipment-table__more summary{cursor:pointer;font-weight:700}
.overview-service-grid a{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#f8fbfd;color:inherit;text-decoration:none}
.overview-service-grid a:hover{border-color:var(--border-strong)}
.overview-service-grid a strong{font-size:1.05rem;color:var(--ink)}
.overview-service-grid a small{color:var(--muted);font-size:.78rem;font-weight:700}
.equipment-head{margin:4px 0 22px}.equipment-head h1{margin:0 0 7px}.equipment-head>p:not(.eyebrow){margin:0;color:var(--muted)}
.equipment-company{margin:22px 0 36px}.equipment-company>h2{margin:0 0 12px;font-size:1.2rem}
.equipment-section{margin:28px 0}.equipment-section .section-head{margin-bottom:13px}.equipment-section h2{font-size:1.15rem}.equipment-section .section-head p{margin:4px 0 0;font-size:.88rem}
.tab-count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:4px;padding:0 6px;border-radius:999px;background:var(--bg);color:var(--muted);font-size:.7rem;font-weight:700}
.tab-count--alert{background:var(--danger-bg);color:var(--danger)}
.equipment-count{color:var(--muted);font-size:.8rem;font-weight:600;white-space:nowrap}
.equipment-filter{width:100%;margin:0 0 4px;border-radius:999px}
.equipment-global-search{display:flex;align-items:center;gap:8px}
.equipment-global-search .equipment-filter{flex:1;min-width:0;width:auto;margin:0}
.equipment-global-count{margin:6px 0 0;font-size:.85rem}
.equipment-no-results{margin:10px 0 0}
.equipment-row__icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-sm);background:var(--blue-bg);color:var(--navy);font-weight:800;font-size:.95rem}
.equipment-row__icon--machine{background:var(--navy);color:#fff}
.equipment-row .agenda-body{gap:4px}
.equipment-row .agenda-summary{white-space:normal;overflow-wrap:anywhere;line-height:1.25}
.equipment-row__meta{display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px;min-width:0;color:var(--muted);font-size:.76rem}
.equipment-row__meta>span:not(.equipment-status)+span::before{content:'·';margin-right:8px;color:rgba(9,56,85,.32)}
.equipment-row__meta .equipment-status{padding:2px 8px;font-size:.7rem}
.equipment-status{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--bg);color:var(--muted);font-size:.72rem;font-weight:700;white-space:nowrap}
.equipment-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.equipment-status--success{background:var(--success-bg);color:var(--success)}
.equipment-status--warning{background:var(--warning-bg);color:var(--warning)}
.equipment-status--danger{background:var(--danger-bg);color:var(--danger)}
.equipment-date{height:auto;min-height:54px;padding:6px 4px}
.equipment-date-year{color:var(--muted);font-size:.6rem;font-weight:600}
.equipment-date--warning{background:var(--warning-bg);color:var(--warning)}
.equipment-date--danger{background:var(--danger-bg);color:var(--danger)}
.inspection-result{font-weight:700}.inspection-result--good{color:var(--success)}.inspection-result--bad{color:var(--danger)}
.equipment-block+.equipment-block{margin-top:22px}
.equipment-block h3{margin:0 0 4px;color:var(--muted);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase}
.equipment-more{margin-top:10px}.equipment-more summary{cursor:pointer;color:var(--blue-dark);font-size:.84rem;font-weight:700}
.equipment-detail{max-width:840px;margin:0 auto}
.equipment-detail-head__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.location-head .equipment-detail-head__top .eyebrow{margin:0}
.equipment-detail-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.equipment-detail button.button{font-family:inherit}
.equipment-detail-grid{display:grid;gap:12px}
.equipment-detail-grid .card{margin:0;padding:16px 18px}
.equipment-detail-grid h2{margin:0 0 10px;font-size:1rem}
.equipment-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.equipment-detail-grid .equipment-section-head h2{margin:0}
.equipment-section-head .equipment-section-head__action{flex:none;min-height:32px;color:var(--blue-dark);font-family:inherit;font-size:.84rem;font-weight:700;text-decoration:none}
.equipment-section-head .equipment-section-head__action:hover{text-decoration:underline}
/* Gegevens als rustige label/waarde-regels, twee kolommen waar het past. */
.equipment-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));column-gap:28px;margin:0}
.equipment-facts div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0;padding:7px 0;border-bottom:1px solid var(--border);font-size:.84rem}
.equipment-facts dt{flex:none;color:var(--muted)}
.equipment-facts dd{min-width:0;margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.equipment-inspections{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.equipment-inspection-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fcfdfd;color:inherit;text-decoration:none}
a.equipment-inspection-row{transition:border-color .12s ease,background-color .12s ease}
a.equipment-inspection-row:hover{border-color:var(--border-strong);background:var(--blue-bg)}
.equipment-inspection-row__body{flex:1;min-width:0;display:grid;gap:2px}
.equipment-inspection-row__body span{color:var(--muted);font-size:.78rem}
.equipment-inspection-row__hint{flex:none;display:inline-flex;align-items:center;gap:2px;color:var(--blue-dark);font-size:.76rem;font-weight:700}
/* Werkorders (klantbeheer): uitklapbare rij met de regels zoals ze op de bon staan. */
.equipment-workorder summary{cursor:pointer;list-style:none}
.equipment-workorder summary::-webkit-details-marker{display:none}
.equipment-workorder[open] summary .equipment-inspection-row__hint svg{transform:rotate(90deg)}
.equipment-workorder__lines{display:grid;gap:0;list-style:none;margin:6px 0 2px;padding:0 10px}
.equipment-workorder__line{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--border);font-size:.84rem}
.equipment-workorder__line:last-child{border-bottom:0}
.equipment-workorder__line--tekst{color:var(--ink);white-space:pre-line}
.equipment-workorder__line--arbeid span:first-child,.equipment-workorder__line--artikel span:first-child{color:var(--muted)}
.equipment-workorder__amount{flex:none;font-weight:600}
.equipment-workorder__empty{margin:6px 10px 2px;font-size:.84rem}
.equipment-timeline{display:grid;gap:14px;list-style:none;margin:0 0 0 6px;padding:0 0 0 16px;border-left:2px solid var(--border)}
.equipment-timeline li{position:relative;display:grid;gap:2px}
.equipment-timeline li::before{content:'';position:absolute;left:-23px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--surface)}
.equipment-timeline time{color:var(--muted);font-size:.76rem;font-weight:600}
.equipment-timeline p{margin:2px 0 0;font-size:.88rem;line-height:1.4}
.portal-dialog{width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--border-strong);border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop)}
.portal-dialog::backdrop{background:rgba(9,30,44,.38)}
.portal-dialog__panel{display:grid;gap:12px;margin:0;padding:18px}
.portal-dialog__panel>p{margin:0;font-size:.84rem}
.portal-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.portal-dialog__head h2{margin:0;font-size:1.05rem}
.portal-dialog__close{display:grid;place-items:center;flex:none;width:34px;height:34px;border:0;border-radius:50%;background:var(--blue-bg);color:var(--blue-dark);cursor:pointer}
.portal-dialog__actions{display:flex;justify-content:flex-end;gap:8px}
.copy-field{display:flex;gap:8px}.copy-field input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}
.equipment-request-list{display:grid;gap:12px}.equipment-request{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.7fr);gap:18px;margin:0}.equipment-request>div{display:grid;align-content:start;gap:4px}.equipment-request>div>span,.equipment-request small{color:var(--muted);font-size:.78rem}.equipment-request p{margin:6px 0;font-size:.88rem;line-height:1.4}.equipment-request form{display:grid;gap:8px;align-content:start}.equipment-request .button{justify-self:start}
@media(max-width:640px){.equipment-request{grid-template-columns:1fr}.equipment-row__icon,.equipment-row__extra{display:none}.equipment-detail-grid .card{padding:14px}}
@media print{.topbar,.system-nav,.location-back-link,.equipment-detail-actions,.portal-dialog,.equipment-detail-nfc,.equipment-inspection-row__hint{display:none!important}.card,.location-head{box-shadow:none;break-inside:avoid}.location-head{background:none}}
h1{font-size:clamp(1.6rem,1.15rem + 1.4vw,2.1rem);font-weight:800;line-height:1.18;letter-spacing:-.01em}
h2{margin-top:.2rem;font-size:1.05rem;font-weight:700}
h3{font-size:.95rem;font-weight:700}
ul{padding-left:20px}
.search-results{display:grid;gap:6px;margin-top:12px}
.search-result{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 10px}
.search-result span{display:grid;gap:2px}
.search-result small{color:var(--muted)}
/* Zoekveld met knop op één regel, in een smalle kolom (geen velden over de hele breedte). */
.inline-search{display:flex;gap:8px;max-width:560px;margin:10px 0 14px}
.inline-search input{flex:1;min-width:0}
.inline-search .button{flex:none}
/* Locatie uit AFAS toevoegen: gewoon in de pagina, geen zwevend paneel meer. */
.afas-location-add>p{margin:4px 0 0;max-width:640px;font-size:.88rem}
.afas-location-add .inline-search{margin-bottom:0}
.afas-results{display:grid;max-width:760px;margin-top:14px;border-top:1px solid var(--border)}
.afas-result{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}
.afas-result__text{display:grid;gap:2px;min-width:0}
.afas-result__text small{color:var(--muted);font-size:.8rem;overflow-wrap:anywhere}
.afas-result__actions{display:flex;gap:8px;flex:none}
.afas-results__empty{margin:12px 0 0}

.location-shell{max-width:840px;margin:0 auto}
.location-back-link{display:inline-flex;margin:0 0 12px;color:var(--muted);font-size:.82rem;font-weight:600;text-decoration:none}
.location-back-link:hover{color:var(--ink);text-decoration:underline}
.location-head{margin-bottom:28px;padding:24px 26px;border:1px solid rgba(81,175,63,.16);border-radius:24px;background:linear-gradient(135deg,#f2f8ef 0%,#edf6fa 100%)}
.location-head .eyebrow{margin:0 0 6px}
.location-head h1{margin:0 0 7px}
.location-subtitle{margin:0;color:var(--muted);font-size:.88rem}
.location-head__links{display:flex;flex-wrap:wrap;gap:4px 20px;margin:12px 0 0}
.location-head__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.topbar__right{display:flex;align-items:center;gap:12px}
/* Meldingencentrum (portal-shell.js): bel naast het accountmenu, paneel met de meldingen van de afgelopen week. */
.meldingen{position:relative}
.meldingen>summary{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--blue-dark);cursor:pointer;list-style:none}
.meldingen>summary::-webkit-details-marker{display:none}
.meldingen>summary:hover,.meldingen[open]>summary{background:var(--blue-bg);color:var(--navy)}
.meldingen>summary:focus-visible{outline:2px solid #9cc3dd;outline-offset:2px}
.meldingen__teller{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;font-size:.68rem;font-weight:800;line-height:18px;text-align:center}
.meldingen__paneel{position:absolute;right:-6px;top:calc(100% + 10px);z-index:60;width:360px;max-width:calc(100vw - 16px);border:1px solid var(--border-strong);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-pop);overflow:hidden}
.meldingen__kop{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:6px 8px 6px 16px;border-bottom:1px solid var(--border)}
.meldingen__kop button{border:0;border-radius:10px;background:transparent;color:var(--blue-dark);font:inherit;font-size:.84rem;font-weight:700;padding:8px 10px;cursor:pointer}
.meldingen__kop button:hover{background:var(--blue-bg)}
.meldingen__lijst{list-style:none;margin:0;padding:4px 0;max-height:min(420px,calc(100dvh - var(--topbar-height) - 90px));overflow-y:auto}
.meldingen__leeg{padding:18px 16px;color:var(--muted);font-size:.88rem}
.melding{padding:10px 16px;border-left:3px solid transparent}
.melding+.melding{border-top:1px solid var(--border)}
.melding--success{border-left-color:var(--success)}
.melding--error{border-left-color:var(--danger)}
.melding--warning{border-left-color:var(--warning)}
.melding.is-nieuw{background:var(--blue-bg)}
.melding__tekst{margin:0;font-size:.88rem;line-height:1.35;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.melding__waar{margin:2px 0 0;font-size:.76rem;color:var(--muted)}
.melding__waar a{color:inherit}
@media(max-width:480px){.topbar{padding:0 12px}.topbar__right{gap:6px;min-width:0}.account-menu{min-width:0}.account-menu__copy strong{max-width:104px}.account-menu__copy small{display:none}.meldingen{position:static}.meldingen__paneel{position:fixed;left:8px;right:8px;top:calc(var(--topbar-height) + 4px);width:auto}}
.cleanipedia-mark-link{flex:none;display:grid;justify-items:center;gap:1px;color:var(--muted);font-size:.62rem;font-weight:700;text-decoration:none}
.cleanipedia-mark-link:hover{color:var(--ink)}
.cleanipedia-mark-link img{display:block;width:30px;height:30px}
.cleanipedia-title{display:flex;align-items:center;gap:12px}
.work-advice-link img{width:22px;height:22px;margin-right:6px;vertical-align:middle}
.location-tabs{display:flex;gap:2px;margin:0 0 20px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.location-shell>.location-tabs{position:sticky;top:var(--topbar-height);z-index:20;background:var(--bg);padding-top:4px}
.location-tab{display:inline-flex;align-items:center;min-height:44px;appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:9px 15px;font:inherit;font-weight:600;font-size:.9rem;color:var(--muted);text-decoration:none;cursor:pointer}
.location-tab:hover{color:var(--ink)}
.location-tab.is-active{color:var(--ink);border-bottom-color:var(--cta)}
.today-todo h2{margin:0 0 10px}
.today-todo__list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.today-todo__list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #f0dba8;border-radius:var(--radius-sm);background:var(--warning-bg)}
.today-todo__list span{display:grid;gap:2px;min-width:0}
.today-todo__list small{color:var(--muted);font-size:.8rem}
.today-todo__list .button{flex:none}
.today-todo__empty{margin:0;padding:10px 12px;border-radius:var(--radius-sm);background:var(--success-bg);color:var(--success)}
.today-todo__more{margin:10px 0 0;font-size:.85rem}
.today-shift--busy{color:var(--warning);font-weight:700}
.today-shift--done{color:var(--success);font-weight:700}
.today-shift--none{color:var(--muted)}
.shift-card h2{margin:0 0 12px}
.shift-card.is-active{border-color:#bfe2d1;background:var(--green-bg)}
.shift-card.is-active h2{margin:0}
.shift-card.is-done{border-color:#bfe2d1}
.shift-card__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.shift-card__row .eyebrow{margin:0 0 2px}
.shift-card form{margin:0}
.shift-summary{display:grid;gap:0;margin:14px 0 0;border-top:1px solid var(--border)}
.shift-summary div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:.92rem}
.shift-summary dt{color:var(--muted)}
.shift-summary dd{margin:0;font-weight:700}
.shift-finish-action{margin:4px 0 20px}
.shift-finish{max-width:640px;margin:0 auto}
.shift-finish h1{margin:0 0 4px}
.shift-finish__part{margin-top:18px}
.shift-finish__part h2{margin:0 0 8px;font-size:1rem}
.shift-finish__part p{margin:0 0 10px}
.shift-open-tasks{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.shift-open-tasks li{display:grid;gap:1px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;font-weight:600;font-size:.9rem}
.shift-open-tasks small{color:var(--muted);font-weight:400;font-size:.76rem}
.shift-finish__submit{margin-top:22px}
.location-panel-action{margin:0 0 16px}
.location-panel-action .button{display:inline-flex;align-items:center;gap:6px}
.fixed-deliveries{margin:0 0 28px}
.customer-section-head{margin-bottom:12px}
.customer-section-head .eyebrow{margin:0 0 4px;font-size:.77rem}
.customer-section-head h2{margin:0;font-size:1.2rem}
.customer-section-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.section-intro{max-width:620px;margin:6px 0 0;color:var(--muted);font-size:.84rem;line-height:1.45}
.section-history-link{flex:none;font-size:.8rem}
.delivery-card{border:1px solid var(--border);border-radius:var(--radius);margin-top:12px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-card)}
.delivery-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;background:var(--blue-bg);border-bottom:1px solid var(--border)}
.delivery-meta-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.delivery-meta{margin:0;font-weight:700;font-size:.92rem;color:var(--navy)}
.delivery-lines{overflow-x:auto}
.delivery-lines-head,.delivery-line{display:flex;gap:12px;align-items:center;min-width:520px;padding:8px 12px}
.delivery-lines-head{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.delivery-line{border-top:1px solid var(--border);font-size:.88rem}
.col-item{flex:1 1 40%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-card .col-item{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
.col-qty{flex:0 0 60px;text-align:right}
.col-unit{flex:0 0 60px;color:var(--muted)}
.col-freq{flex:0 0 110px;color:var(--muted)}
.col-last{flex:0 0 110px;text-align:right;color:var(--muted);font-size:.8rem}
.line-qty-form{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.line-qty-form input{min-height:32px;width:58px;padding:4px 6px;text-align:right}
.line-qty-form .qty-stepper__input{min-height:42px;width:60px;border:0;text-align:center;padding:6px 2px}

.qty-stepper{display:inline-flex;align-self:flex-start;align-items:stretch;width:max-content;border:1px solid var(--border-strong);background:var(--surface);border-radius:999px;overflow:hidden}
.qty-stepper__btn{width:40px;min-height:42px;flex:none;border:0;background:var(--blue-bg);color:var(--blue-dark);font-size:1.15rem;font-weight:700;line-height:1;cursor:pointer}
.qty-stepper__btn:hover{background:#d8e9f5}
.qty-stepper__btn:first-child{border-right:1px solid var(--border-strong)}
.qty-stepper__btn:last-child{border-left:1px solid var(--border-strong)}
.qty-stepper__input{min-height:42px;width:60px;border:0;text-align:center;padding:6px 2px;font-size:1rem;-moz-appearance:textfield}
.qty-stepper__input::-webkit-outer-spin-button,.qty-stepper__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-stepper__input:focus{outline:none}

.order-flow-card{overflow:visible}
.order-flow-card h1{margin-bottom:12px}
.order-page-summary{display:flex;align-items:flex-start;gap:10px;margin:14px 0 18px}
.order-page-summary span:last-child{min-width:0}
.order-flow-form{display:grid;gap:16px}
.order-form-lines{display:grid;gap:10px;margin:10px 0 0;overflow:visible}
.order-form-lines .delivery-lines-head{display:none}
.order-form-lines .delivery-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:12px;min-width:0;padding:14px 0;border-top:1px solid var(--border);font-size:.9rem}
.order-form-lines .delivery-lines-head+.delivery-line{border-top:0}
.order-line-item{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.32}
.order-line-item strong{font-size:.95rem}
.order-line-article{display:flex;align-items:center;gap:10px;min-width:0}
.order-line-article strong{min-width:0;overflow-wrap:anywhere}
.order-line-article .article-search-thumb{flex:none}
.upcoming-detail-lines .col-item{white-space:normal;overflow:visible;line-height:1.3}
.order-flow-card .col-item,.order-flow-card .col-qty,.order-flow-card .col-unit{flex:none;min-width:0;text-align:left}
.order-flow-card .col-qty,.order-flow-card .col-unit{display:grid;gap:5px;align-content:end}
.order-flow-card .col-qty::before,.order-flow-card .col-unit::before{color:var(--muted);font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.order-flow-card .col-qty::before{content:"Aantal"}
.order-flow-card .col-unit::before{content:"Eenheid"}
.order-flow-card .is-replenishment .col-qty::before{content:"Aanvullen tot"}
.unit-badge{display:inline-flex;align-items:center;min-height:42px;color:var(--muted);font-size:.95rem}
.order-line-card--search{align-items:start}
.order-line-card--search .article-search-label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.order-add-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:end;margin:0;padding:14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#f7fbfd}
.order-add-card .article-search{min-width:0}
.order-add-card .button{min-height:42px}
.order-list-page{max-width:640px;margin:0 auto}
.order-list-card .eyebrow{margin:0 0 4px}
.order-list-card h1{margin:0 0 4px}
.order-list-lead{margin:0 0 12px;font-size:.84rem}
.order-list-lines{display:grid;margin:0 0 14px;padding:0;list-style:none;border-top:1px solid var(--border)}
.order-list-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.order-list-line__item{display:grid;gap:1px;min-width:0}
.order-list-line__item strong{font-size:.88rem;line-height:1.25;overflow-wrap:anywhere}
.order-list-line__item small{color:var(--muted);font-size:.72rem}
.order-list-line__remove{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.order-list-line__remove:hover{background:var(--danger-bg);color:var(--danger)}
.order-list-line__remove svg{width:16px;height:16px}
.qty-stepper--compact .qty-stepper__btn{width:32px;min-height:34px;font-size:1rem}
.qty-stepper--compact .qty-stepper__input{width:40px;min-height:34px;padding:4px 2px;font-size:.92rem}
.order-list-actions{display:flex;gap:8px}
.order-list-actions .button{flex:1 1 0;text-align:center}
.order-list-add{display:grid;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.order-list-add h2{margin:0;font-size:.92rem}
.order-list-add__form{display:grid;gap:8px}
.order-list-add__row{display:flex;align-items:center;gap:8px}
.order-list-add__row .button{flex:1}
.order-flow-card .col-unit .text-link{justify-self:start;font-size:.78rem}
.order-list-confirm{display:grid;gap:8px;margin:4px 0 18px}
.order-list-confirm-line{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff}
.order-list-confirm-line span{display:grid;gap:2px;min-width:0}
.order-list-confirm-line small{color:var(--muted);font-size:.72rem}
.order-list-confirm-qty{font-weight:800;font-size:.95rem;text-align:right}
.order-list-confirm-actions{display:grid;gap:10px}
.order-list-confirm-actions .button{width:100%}
.order-list-confirm-actions .note-field{margin-top:0}
.order-list-suggestions__title{margin:4px 0 0;font-size:.82rem;color:var(--muted)}
.order-list-suggestions{margin:0 0 6px}
.order-list-suggestion form{margin:0}
.order-actions{display:grid;gap:14px}
.order-actions .js-confirm-cancel{display:grid;gap:10px}

.article-search{position:relative;min-width:0}
.article-search-label{display:grid;gap:5px;color:var(--muted);font-size:.72rem}
.order-line-card--search .article-search.has-selected-thumbnail{display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 10px;align-items:end}
.order-line-card--search .has-selected-thumbnail .article-search-label{grid-column:2;grid-row:1;min-width:0}
.article-search-selected{grid-column:1;grid-row:1}
.article-search-selected[hidden]{display:none}
.article-search-selected .article-search-thumb{width:48px;height:48px}
.order-line-card--search .has-selected-thumbnail .article-search-results{grid-column:1/-1}
.article-search-input{width:100%}
.article-search-results:empty{display:none}
.article-search-results{position:absolute;z-index:20;left:0;right:0;top:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);max-height:min(320px,45vh);overflow:auto}
.article-search-results button{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:10px;width:100%;border:0;border-bottom:1px solid var(--border);background:var(--surface);text-align:left;padding:8px 10px;font-size:.85rem;cursor:pointer}
.article-search-results button:last-child{border-bottom:0}
.article-search-results button:hover{background:var(--bg)}
.article-search-thumb{display:grid;place-items:center;width:48px;height:48px;overflow:hidden;border:1px solid var(--border);border-radius:10px;background:#fff}
.article-search-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.article-search-thumb--empty{background:linear-gradient(145deg,#f7f8f8,#e9f2f4)}
.article-search-thumb--empty::after{content:'';width:19px;height:15px;border:1.5px solid rgba(9,56,85,.2);border-radius:4px;background:linear-gradient(145deg,transparent 48%,rgba(9,56,85,.12) 49% 58%,transparent 59%)}
.article-search-result-copy{min-width:0;display:grid;gap:3px}
.article-search-result-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.85rem}
.article-search-result-copy small{color:var(--muted);font-size:.72rem}
.article-search-empty,.article-search-error{display:block;padding:8px 10px;font-size:.82rem;color:var(--muted)}
.article-search-error{color:var(--danger)}

.add-article-control{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#f7faf8}
.add-article-control p{display:grid;gap:2px;margin:0;font-size:.82rem;line-height:1.35}
.add-article-control p span{color:var(--muted);font-size:.76rem}
.add-article-control .button{flex:none}

.add-line-form{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap}
.add-line-form .article-search{flex:1 1 240px;min-width:180px}
.add-line-form input[type=number]{width:70px}

@media (max-width:640px){
  .delivery-lines{overflow-x:visible}
  .delivery-lines-head{display:none}
  .delivery-lines-head,.delivery-line{min-width:0}
  .delivery-line{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:start;padding:10px 12px}
  .col-item{grid-column:1/-1;flex:none;overflow:visible;text-overflow:clip;white-space:normal;font-weight:700;font-size:.92rem}
  .col-qty,.col-unit,.col-freq,.col-last{flex:none;display:flex;flex-direction:column;gap:4px;text-align:left;font-size:.86rem}
  .col-qty::before,.col-unit::before,.col-freq::before,.col-last::before{color:var(--muted);font-weight:700;font-size:.65rem;text-transform:uppercase;letter-spacing:.04em}
  .col-qty::before{content:"Aantal"}
  .col-unit::before{content:"Eenheid"}
  .col-freq::before{content:"Frequentie"}
  .col-last::before{content:"Laatst geleverd"}
  .is-replenishment .col-qty::before{content:"Aanvullen tot"}
  .line-qty-form{justify-content:flex-start}
}

.upcoming-order{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;font-size:.85rem}
.upcoming-order+.upcoming-order{border-top:1px solid var(--border)}

.upcoming-overview{margin-top:0;border-color:rgba(37,129,196,.14);box-shadow:0 10px 24px rgba(9,56,85,.055)}
.agenda-list{display:grid;gap:8px;margin-top:10px}
.agenda-item{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-sm);text-decoration:none;color:inherit;background:#fcfdfd;transition:border-color .12s ease,background-color .12s ease}
.agenda-item:hover{border-color:var(--border-strong);background:var(--blue-bg)}
.agenda-item svg{flex:none;color:var(--muted)}
.agenda-date{flex:none;display:grid;place-content:center;justify-items:center;gap:2px;width:56px;height:54px;padding:0 4px;border-radius:var(--radius-sm);background:var(--blue-bg);color:var(--navy)}
.agenda-date-day{font-size:1.05rem;font-weight:800;line-height:1}
.agenda-date-month{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.agenda-date-pending{display:grid;gap:1px;font-size:.62rem;font-weight:700;line-height:1.05;text-align:center;text-transform:uppercase;letter-spacing:.015em;white-space:nowrap}
.agenda-body{flex:1;min-width:0;display:grid;gap:2px}
.agenda-summary{font-weight:700;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agenda-sub{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;color:var(--muted);font-size:.76rem}
.agenda-sub>span+span::before{content:'·';margin-right:10px;color:rgba(9,56,85,.32)}
.order-kind{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.72rem;font-weight:600;line-height:1.2;white-space:nowrap}
.order-kind::before{content:'';width:6px;height:6px;border-radius:50%;background:#8ca2af}
.order-kind--call-off::before{background:var(--accent)}
.order-kind--fixed::before{background:var(--green)}
.order-kind--regular::before{background:var(--blue)}

.empty-state{text-align:center;padding:18px 8px;display:grid;gap:10px;justify-items:center}

.delivery-lines-toggle>summary{cursor:pointer;list-style:none;padding:10px 12px;font-size:.82rem;font-weight:600;color:var(--blue-dark);display:flex;align-items:center;gap:6px}
.delivery-lines-toggle>summary::-webkit-details-marker{display:none}
.delivery-lines-toggle>summary::before{content:'▸';font-size:.68rem;color:var(--muted)}
.delivery-lines-toggle[open]>summary::before{content:'▾'}
.delivery-lines-toggle[open]>summary{border-bottom:1px solid var(--border)}

.location-delivery-card{margin-top:8px;border-radius:var(--radius-sm);box-shadow:0 7px 18px rgba(9,56,85,.045)}
.location-delivery-card .delivery-card-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 12px}
.location-delivery-card .delivery-card-head .button{width:auto;min-height:36px;padding:7px 12px;white-space:nowrap}
.location-delivery-card .delivery-card-head{background:#f5f9f6}
.location-delivery-card .delivery-meta-group{gap:6px 10px}
.location-delivery-card .delivery-meta{font-size:.84rem;font-weight:600}
.delivery-next{flex-basis:100%;margin:2px 0 0;color:var(--navy);line-height:1.3}
.delivery-next span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.delivery-next strong{font-size:1.05rem;font-weight:700}
.delivery-next small{color:var(--muted);font-size:.8rem}
.delivery-card-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.delivery-note{color:var(--muted);font-size:.7rem}
.delivery-order-action{box-shadow:0 4px 10px rgba(37,129,196,.16)}
.location-delivery-card .delivery-lines-toggle>summary{padding:8px 12px}
.location-delivery-lines{overflow:visible}
.location-delivery-lines .delivery-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0;padding:9px 12px}
.location-line-item{min-width:0;display:grid;gap:2px;font-size:.88rem;font-weight:600;line-height:1.25}
.location-line-item>span{overflow-wrap:anywhere}
.location-line-item small{font-size:.74rem;font-weight:400;color:var(--muted)}
.location-line-details{display:flex;flex-wrap:wrap;gap:2px 8px}
.location-line-details>span+span::before{content:'·';margin-right:8px}
.location-line-amount{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:5px;white-space:nowrap;font-size:.86rem;color:var(--muted)}
.location-line-amount strong{font-size:.94rem;color:var(--ink)}

.work-schedule-card{border-color:rgba(81,175,63,.24)}
.work-schedule-card.is-updated{animation:work-card-updated .42s ease}
@keyframes work-card-updated{
  0%{box-shadow:0 0 0 3px rgba(81,175,63,.2),var(--shadow-card)}
  100%{box-shadow:var(--shadow-card)}
}
.work-progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:12px;border:1px solid #93c8ec;border-radius:999px;background:#cfe9fb;overflow:hidden}
.work-progress::-webkit-progress-bar{background:#cfe9fb}
.work-progress::-webkit-progress-value{border-radius:999px;background:#51af3f;box-shadow:inset 0 -1px 0 rgba(0,0,0,.08)}
.work-progress::-moz-progress-bar{border-radius:999px;background:#51af3f;box-shadow:inset 0 -1px 0 rgba(0,0,0,.08)}
.work-progress-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 0 14px;font-size:.82rem}
.work-progress-label strong{color:var(--ink)}
.work-progress-label span{color:var(--muted);font-weight:700}
.work-progress-label.is-complete{border:1px solid #cbe8c4;border-radius:var(--radius-sm);background:var(--success-bg);padding:9px 11px}
.work-progress-label.is-complete span{color:var(--success)}
.work-task-list{display:grid;gap:16px}
.work-task-group{display:grid;gap:6px}
.work-task-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px}
.work-task-group-head h3{margin:0;color:var(--ink);font-size:.9rem}
.work-task-group-head span{color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
/* Per categorie één lijst; taken zijn rijen met een scheidingslijn, geen losse kaarten. */
.work-task-group-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.work-completed-section{display:grid;border-top:1px solid var(--border);padding-top:12px;margin-top:4px}
.work-completed-section>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;color:var(--success);font-weight:800;font-size:.86rem}
.work-completed-section>summary::-webkit-details-marker{display:none}
.work-completed-section>summary::before{content:'▸';color:var(--success);font-size:.72rem}
.work-completed-section[open]>summary::before{content:'▾'}
.work-completed-section>summary small{margin-left:auto;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.035em}
.work-completed-section .work-task-group{margin-top:10px}
.work-task-group.is-completed .work-task-group-head span{color:var(--success)}
.work-task{background:#fff}
.work-task+.work-task{border-top:1px solid var(--border)}
.work-task.is-done{order:2}
.work-task-action{position:relative}
.work-task-action.is-done{background:#f6fbf4}
/* De rij zelf is de uitklapper; rechts blijft ruimte vrij voor de (los gepositioneerde) knop. */
.work-task-main{display:flex;align-items:center;gap:8px;min-height:56px;padding:9px 118px 9px 12px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.work-task-main::-webkit-details-marker{display:none}
.work-task-main::before{content:'';flex:none;width:6px;height:6px;margin:0 3px 0 1px;border-right:2px solid rgba(9,56,85,.4);border-bottom:2px solid rgba(9,56,85,.4);transform:rotate(-45deg);transition:transform .15s ease}
.work-task-details[open]>.work-task-main::before{transform:rotate(45deg)}
@media (hover:hover){.work-task-main:hover{background:#f7fbfd}}
.work-task-details[open]>.work-task-main{background:#f7fbfd}
.work-task-title{flex:1;display:grid;gap:2px;min-width:0}
.work-task-title strong{font-size:.92rem;line-height:1.25;overflow-wrap:anywhere}
.work-task-subline{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;color:var(--muted);font-size:.76rem;font-weight:600}
.work-task-subline>span+span::before{content:'·';margin-right:6px}
.work-method-label{color:var(--blue-dark)}
.work-method-label--empty{color:var(--muted)}
.work-task.is-done .work-task-title strong,.work-task-action.is-done .work-task-title strong{color:var(--success)}
.work-task-toggle{position:absolute;top:10px;right:10px;margin:0}
.work-complete-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:96px;min-height:36px;border-radius:999px;padding:6px 12px;font-size:.8rem;line-height:1.1;white-space:nowrap;background:#fff;color:var(--blue-dark);border-color:#b7d5ec}
.work-complete-button::before{content:'✓';font-weight:800}
.work-complete-button:hover{background:var(--blue-bg);color:var(--blue-dark)}
.work-complete-button.is-reopen{color:var(--muted);border-color:var(--border-strong)}
.work-complete-button.is-reopen::before{content:'↺'}
.work-task-action.is-done>.work-task-details>.work-task-main{padding-right:134px}
.work-task-bundle-head{padding:10px 12px 2px 12px}
.work-task-bundle-head>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.work-task-bundle-head strong{font-size:.92rem;line-height:1.25}
.work-task-bundle-head span{flex:none;color:var(--muted);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.035em}
.work-task-variants{display:grid;padding-left:12px}
.work-task-bundle .work-task-action+.work-task-action{border-top:1px dashed var(--border)}
.work-task-bundle .work-task-main{min-height:52px;padding-left:4px}
.work-task-bundle .work-task-toggle{top:8px}
.work-task-bundle .work-task-title strong{font-size:.88rem;color:var(--blue-dark)}
.work-task-bundle.is-done .work-task-bundle-head strong{color:var(--success)}
.work-task-body{display:grid;gap:10px;padding:2px 12px 14px 29px;font-size:.86rem;line-height:1.45}
.work-task-bundle .work-task-body{padding-left:21px}
.work-task-body>p{margin:0}
.work-method-summary{font-weight:600}
.work-method-instructions{color:var(--muted)}
.work-period-note{color:var(--muted);font-size:.74rem;font-weight:700}
.work-attention{padding:9px 11px;border-radius:10px;background:var(--yellow-bg);color:var(--warning);font-size:.82rem;line-height:1.4}
.work-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.work-product{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:9px;border:1px solid var(--border);border-radius:10px;background:#fff;padding:8px}
.work-product.is-placeholder{grid-template-columns:44px minmax(0,1fr);background:#f8fafb;color:var(--muted)}
.work-product.is-placeholder strong{color:var(--ink)}
.work-product form{margin:0}
.work-product .button{min-height:34px;padding:6px 10px;white-space:nowrap}
.work-product .button.is-confirmed{background:var(--success-bg);border-color:#bfe2d1;color:var(--success)}
.work-inline-error{margin:0 12px 10px;font-size:.8rem}
.work-products .work-inline-error{margin:0}
.work-product img,.work-product-fallback{width:44px;height:44px;border-radius:8px;border:1px solid var(--border);background:#f5f8fa;object-fit:contain}
.work-product-fallback{display:grid;place-items:center;color:var(--muted);font-weight:800}
.work-product span{display:grid;gap:2px;min-width:0}
.work-product strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem}
.work-product small{color:var(--muted);font-size:.72rem}
.work-completion{border:1px solid #cbe8c4;border-radius:10px;background:var(--success-bg);color:var(--success);padding:9px 10px;font-size:.78rem;font-weight:700}
.work-order-list{display:grid;gap:10px;margin-top:14px;padding:12px;border:1px solid #cbe8c4;border-radius:var(--radius-sm);background:#f4faf2}
.work-order-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.work-order-list h3{margin:0;font-size:.95rem;color:var(--success)}
.work-order-list p{margin:2px 0 0;color:var(--muted);font-size:.78rem;font-weight:700}
.work-order-list-items{display:grid;gap:6px}
.work-order-list-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(81,175,63,.22);border-radius:10px;background:#fff}
.work-order-list-item span{display:grid;gap:2px;min-width:0}
.work-order-list-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem}
.work-order-list-item small{color:var(--muted);font-size:.72rem}
.work-order-list-item form{margin:0}
/* Staat bewust ná de werkschema-basisregels: bij gelijke specificiteit beslist de volgorde. */
@media (max-width:640px){
  /* Geen kaart-in-kaart: de taaklijsten krijgen de volle breedte, de kop wordt compacter. */
  .card.work-schedule-card{padding:0;border:0;background:none;box-shadow:none}
  .work-schedule-card .customer-section-head{margin-bottom:10px;padding:0 2px}
  .work-schedule-card .customer-section-head .eyebrow{display:none}
  .work-progress{height:10px}
  .work-progress-label{margin:7px 0 14px;font-size:.8rem}
  .work-task-main{padding:8px 98px 8px 10px}
  .work-task-action.is-done>.work-task-details>.work-task-main{padding-right:118px}
  .work-task-toggle{right:8px}
  .work-complete-button{min-width:0;padding:6px 12px}
  .work-task-body{padding:2px 10px 12px 27px}
  .work-order-list{padding:10px}
  .work-order-list-head{flex-wrap:wrap}
  .work-order-list-item .text-link{min-height:36px;font-size:.8rem}
  .work-product{grid-template-columns:40px minmax(0,1fr) auto;gap:8px;padding:7px}
  .work-product img,.work-product-fallback{width:40px;height:40px}
}
.wide-field{grid-column:1/-1}
.product-checks{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:7px}
.product-checks legend{font-size:.78rem;font-weight:700;color:var(--muted);padding:0 5px}
.method-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.method-row .inline-action,.work-management-row .inline-action{display:flex;justify-content:flex-end;margin-top:8px}
.work-schedule-add-form{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.work-schedule-add-form .button{align-self:end}
.work-schedule-edit-form{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.work-schedule-edit-card{grid-column:1/-1}
.work-schedule-edit-list{margin-top:14px}
.entity-title-with-icon{display:flex;align-items:flex-start;gap:11px}
.entity-section-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:var(--blue-bg);color:var(--blue-dark)}
.task-method-group{display:grid;gap:6px;align-content:start;padding:8px;border:1px solid var(--border);border-radius:10px;background:#fbfdfe}
.task-method-group strong{font-size:.78rem;color:var(--ink)}
.task-group-list{display:grid;gap:8px;margin-top:12px}
.task-group{border:1px solid var(--border);border-radius:var(--radius-sm);background:#fbfdfe;overflow:hidden}
.task-group>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:11px 12px;font-weight:700;list-style:none}
.task-group>summary::-webkit-details-marker{display:none}
.task-group>summary span{border-radius:999px;background:var(--blue-bg);color:var(--blue-dark);padding:3px 8px;font-size:.72rem}
.task-group .table-wrap{margin:0;border-top:1px solid var(--border)}

.catalogue-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.catalogue-head h1{margin-bottom:0}
.catalogue-metrics{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.catalogue-metrics span{display:inline-flex;align-items:baseline;gap:5px;border:1px solid var(--border);border-radius:999px;background:var(--surface);padding:7px 11px;color:var(--muted);font-size:.78rem;font-weight:700}
.catalogue-metrics strong{color:var(--ink);font-size:.98rem}
.catalogue-tabs{display:flex;gap:2px;margin:0 0 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.catalogue-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:9px 15px;font:inherit;font-weight:600;font-size:.9rem;color:var(--muted);cursor:pointer}
.catalogue-tab:hover{color:var(--ink)}
.catalogue-tab.is-active{color:var(--ink);border-bottom-color:var(--cta)}
.section-head-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.catalogue-filter{min-height:34px;width:220px;max-width:100%;border-radius:999px;font-size:.83rem;padding:6px 12px}
.catalogue-connect{display:grid;gap:14px;border-color:#cfe3f2;background:linear-gradient(135deg,#fff 0%,#f6fbfe 100%)}
.catalogue-connect h2{margin-bottom:4px}
.catalogue-connect p{margin:0}
.catalogue-kind{width:auto;min-width:148px}
.product-add-form{display:grid;gap:12px}
.product-defaults{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.product-add-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.product-add-bar .button{margin-left:auto}
.article-search-results button:disabled{opacity:.55;cursor:default}
.cleaning-product-search{position:relative}
.cleaning-product-search input{width:100%;min-height:46px;border-radius:14px;font-weight:700}
.catalogue-layout{display:grid;grid-template-columns:minmax(300px,.75fr) minmax(520px,1.25fr);gap:16px;align-items:start}
.catalogue-panel{min-width:0}
.catalogue-panel--wide{min-width:0}
.product-card-grid{display:grid;gap:8px;margin-top:12px;max-height:560px;overflow:auto;padding-right:2px}
.product-card,.method-card{border:1px solid var(--border);border-radius:14px;background:#fbfdfe;overflow:hidden}
.method-card[hidden],.product-card[hidden]{display:none}
.product-card>summary,.method-card>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:10px 11px}
.method-card>summary{grid-template-columns:minmax(0,1fr) auto}
.product-card>summary::-webkit-details-marker,.method-card>summary::-webkit-details-marker{display:none}
.product-card[open],.method-card[open]{background:#fff;border-color:var(--border-strong);box-shadow:0 8px 20px rgba(9,56,85,.06)}
.product-card img,.product-card .work-product-fallback{width:42px;height:42px;border-radius:10px;object-fit:contain;background:#f4f6f8;border:1px solid var(--border)}
.product-card strong,.method-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}
.product-card summary span,.method-card summary span{display:grid;gap:2px;min-width:0}
.product-card small,.method-card small{color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-edit-form,.method-card .method-form{padding:0 11px 11px}
.method-card-grid,.role-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;margin-top:12px}
.catalogue-chip-row{display:flex;flex-wrap:wrap;gap:5px;padding:0 11px 10px}
.catalogue-chip-row span{display:inline-flex;align-items:center;border-radius:999px;background:var(--blue-bg);color:var(--blue-dark);padding:4px 8px;font-size:.68rem;font-weight:700}
.method-card-grid,.role-card-grid{align-items:start}
.method-card--compact{display:grid;align-content:start;gap:8px;min-height:118px;padding:0}
.method-card-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px;padding:11px 12px 0}
.method-card-summary span:first-child{display:grid;gap:2px;min-width:0}
.method-card-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:0 11px 11px}
.method-card-actions .button{display:inline-flex;align-items:center;gap:6px}
.method-card-actions .inline-action{display:grid;place-items:center;margin:0}
.compact-checks{max-height:220px;overflow:auto;align-content:start;background:#fbfdfe}
.afas-linker{position:relative;display:grid;gap:8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#f8fbfd;padding:10px}
.afas-linker input[type=search]{min-height:40px;background:#fff}
.afas-selected-list{display:flex;flex-wrap:wrap;gap:6px}
.afas-selected-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;border:1px solid #cfe3f2;border-radius:999px;background:var(--blue-bg);color:var(--blue-dark);padding:5px 5px 5px 10px;font-size:.72rem;font-weight:800}
.afas-selected-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afas-selected-chip button{display:grid;place-items:center;width:22px;height:22px;flex:none;border:0;border-radius:50%;background:#fff;color:var(--blue-dark);font:inherit;font-size:1rem;line-height:1;cursor:pointer}
.afas-selected-chip button:hover{background:#d8e9f5}
.task-card-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
.task-family{display:grid;align-content:start;gap:8px;border:1px solid var(--border);border-radius:14px;background:#fbfdfe;padding:12px}
.task-family h3{display:flex;align-items:center;gap:8px;margin:0 0 2px}
.task-mini-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:4px;align-items:center;border:1px solid var(--border);border-radius:10px;background:#fff;padding:10px 12px}
.task-mini-card[data-filter-kind="inactive"]{opacity:.72}
.catalogue-groups{display:grid;gap:12px;margin-top:12px}
.catalogue-group{border:1px solid var(--border);border-radius:14px;background:#fbfdfe;overflow:hidden}
.catalogue-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 0}
.catalogue-group-head h3{display:flex;align-items:center;gap:8px;margin:0;font-size:.98rem}
.catalogue-group-hint{margin:4px 12px 8px;color:var(--muted);font-size:.75rem}
.catalogue-row{display:grid;grid-template-columns:36px minmax(160px,1.3fr) minmax(150px,.7fr) auto;gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--border);background:#fff}
.catalogue-row.is-inactive{opacity:.72}
.catalogue-row img,.catalogue-row .work-product-fallback{width:36px;height:36px;border-radius:10px;object-fit:contain;background:#f4f6f8;border:1px solid var(--border)}
.catalogue-row-copy{display:grid;gap:2px;min-width:0}
.catalogue-row-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}
.catalogue-row-copy small{color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catalogue-row select{width:100%;min-height:34px;font-size:.8rem}
.catalogue-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.catalogue-row-actions .inline-action{display:grid;place-items:center;margin:0}
.catalogue-row-actions .button{display:inline-flex;align-items:center;gap:6px}
.catalogue-gaps{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.catalogue-gaps h3{margin:0 0 4px;font-size:.95rem}
.catalogue-gaps p{margin:0 0 10px}
.catalogue-gap-list{display:flex;flex-wrap:wrap;gap:8px}
.catalogue-gap{display:grid;gap:1px;justify-items:start;border:1px solid var(--border);border-radius:12px;background:#fff;padding:8px 10px;text-align:left;cursor:pointer}
.catalogue-gap:hover{border-color:var(--border-strong);background:var(--blue-bg)}
.catalogue-gap strong{font-size:.8rem}
.catalogue-gap small{color:var(--muted);font-size:.7rem}
.schedule-editor-panel .product-edit-form>label{grid-column:span 4}
.schedule-editor-panel .product-edit-form>.wide-field{grid-column:1/-1}
.task-mini-card>strong{font-size:.85rem}
.task-mini-card>small{color:var(--muted);font-size:.72rem;font-weight:700}
.task-mini-card .catalogue-chip-row{padding:0}
.task-template-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.task-template-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.task-template-heading strong{font-size:.88rem}
.task-template-attention{margin:2px 0;font-size:.76rem}
.task-mini-card>.task-template-heading,.task-mini-card>small,.task-mini-card>.task-template-attention{grid-column:1}
.task-template-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:0;grid-column:2;grid-row:1 / span 3;align-self:center}
.task-template-actions .inline-action{margin:0}
.task-template-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.task-template-form .wide-field{grid-column:1/-1}
.advice-task-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.advice-task-settings label{min-width:0}

.knowledge-head{margin:4px 0 18px}
.knowledge-head h1{margin:2px 0 5px}
.knowledge-head p:last-child{margin:0}
.knowledge-search{display:grid;grid-template-columns:minmax(260px,2fr) repeat(2,minmax(170px,1fr)) auto auto;align-items:end;gap:10px}
.knowledge-search label{min-width:0}
.knowledge-search .button{min-height:40px}
.knowledge-results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 10px}
.knowledge-results-head h2{margin:0}
.knowledge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-items:stretch;gap:12px}
.knowledge-card{display:flex;flex-direction:column;gap:9px;min-width:0}
.knowledge-card h3{margin:0;font-size:1.07rem}
.knowledge-card h3 a{color:var(--ink);text-decoration:none}
.knowledge-card h3 a:hover{text-decoration:underline}
.knowledge-card p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.45}
.knowledge-card>.text-link{margin-top:auto}
.knowledge-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:.72rem;font-weight:800}
.knowledge-card-meta a{color:var(--blue-dark)}
.knowledge-tags{display:flex;flex-wrap:wrap;gap:5px}
.knowledge-tags span,.knowledge-tags a{display:inline-flex;border:1px solid var(--border);border-radius:999px;background:#f8fbfd;padding:4px 8px;color:var(--muted);font-size:.72rem;font-weight:700;text-decoration:none}
.knowledge-tags a:hover{border-color:var(--border-strong);color:var(--blue-dark)}
.knowledge-empty{grid-column:1/-1}
.knowledge-empty h3{margin-top:0}
.knowledge-article{max-width:880px;margin:14px auto 40px;display:grid;gap:18px}
.knowledge-article-head h1{margin:4px 0 10px}
.knowledge-article-head .eyebrow{margin:0}
.knowledge-lead{max-width:720px;font-size:1.07rem;line-height:1.55;color:var(--muted)}
.knowledge-attention{border-left:4px solid var(--cta);border-radius:0 10px 10px 0;background:var(--blue-bg);padding:13px 16px}
.knowledge-attention p{margin:5px 0 0;white-space:pre-line}
.knowledge-body h2,.knowledge-methods h2{margin:0 0 12px}
.knowledge-body>div,.knowledge-method-instructions{white-space:pre-line;line-height:1.65}
.knowledge-methods{display:grid;gap:10px}
.knowledge-method h3{margin:0 0 6px}
.knowledge-method p{margin:0 0 12px}
.knowledge-roles{display:grid;gap:7px;border-top:1px solid var(--border);padding-top:10px}
.knowledge-roles>strong{font-size:.8rem}
.work-advice-link{display:inline-block;margin:3px 0 8px}
.work-method-extra{margin:5px 0 10px}
.work-method-extra summary{color:var(--blue-dark);font-size:.8rem;font-weight:800;cursor:pointer}
.work-method-extra p{white-space:pre-line}
@media(max-width:900px){.knowledge-search{grid-template-columns:repeat(2,minmax(0,1fr))}.knowledge-query{grid-column:1/-1}}
@media(max-width:600px){.knowledge-search{grid-template-columns:1fr}.knowledge-query{grid-column:auto}.knowledge-search .button{width:100%}.knowledge-grid{grid-template-columns:1fr}.advice-task-settings{grid-template-columns:1fr}}
@media(max-width:800px){
  .task-mini-card{grid-template-columns:1fr}
  .task-mini-card>.task-template-heading,.task-mini-card>small,.task-mini-card>.task-template-attention,.task-mini-card>.task-template-actions{grid-column:auto;grid-row:auto}
  .catalogue-row{grid-template-columns:36px minmax(0,1fr);align-items:start}
  .catalogue-row form,.catalogue-row-actions{grid-column:2}
  .catalogue-group-head{align-items:flex-start;flex-wrap:wrap}
  .product-add-bar .button{width:100%;margin-left:0}
}

.schedule-command-card{display:grid;gap:14px;border-color:#cfe3f2;background:linear-gradient(135deg,#fff 0%,#f7fbfe 100%)}
.schedule-command-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.schedule-command-head h2{margin-bottom:4px}
.schedule-command-card h3{margin:0}
.schedule-add-panel{border-top:1px solid var(--border);padding-top:12px}
.schedule-add-panel>summary{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;color:var(--blue-dark);font-size:.94rem;font-weight:800;cursor:pointer}
.schedule-add-panel>summary::before{content:'▸';font-size:.9rem}
.schedule-add-panel[open]>summary::before{content:'▾'}
.schedule-add-panel>summary small{color:var(--muted);font-size:.74rem;font-weight:700}
.schedule-add-panel>p{margin:8px 0;font-size:.8rem}
.schedule-task-picker{display:grid;gap:10px}
.schedule-task-picker>input[type=search]{width:min(100%,420px)}
.schedule-picker-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.schedule-picker-tools .muted{font-size:.76rem}
.schedule-picker-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start;gap:10px;max-height:440px;overflow:auto}
.schedule-picker-group{display:grid;align-content:start;gap:2px;min-width:0;margin:0;padding:9px;border:1px solid var(--border);border-radius:12px;background:#fff}
.schedule-picker-group legend{padding:0 4px;font-weight:800;font-size:.85rem}
.schedule-picker-row{display:flex;align-items:flex-start;gap:9px;padding:7px;border-radius:8px;cursor:pointer}
.schedule-picker-row:hover{background:var(--blue-bg)}
.schedule-picker-row:has(input:disabled){opacity:.58;cursor:default}
.schedule-picker-row span{display:grid;gap:2px}
.schedule-picker-row strong{font-size:.81rem}
.schedule-picker-row small{color:var(--muted);font-size:.72rem}
.schedule-task-picker>.button{justify-self:start}
.schedule-single-add{border-top:1px solid var(--border);padding-top:10px}
.schedule-single-add summary{width:max-content;max-width:100%;color:var(--blue-dark);font-size:.82rem;font-weight:800;cursor:pointer}
.schedule-single-add .work-schedule-add-form{margin-top:12px}
.schedule-board{display:grid;gap:10px}
.schedule-board-tools{display:flex;gap:8px;flex-wrap:wrap}
.schedule-board-tools input{width:min(100%,360px)}
.schedule-board-tools select{width:auto;min-width:165px}
.schedule-board-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start;gap:10px}
.schedule-task-row{border:1px solid var(--border);border-radius:14px;background:#fbfdfe;padding:0;overflow:hidden}
.schedule-task-row.is-open{border-color:#cfe3f2;background:#f8fcff}
.schedule-task-row.is-done{border-color:#cbe8c4;background:#f6fbf4}
.schedule-task-row+.schedule-task-row{margin-top:0}
.schedule-task-row>summary{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;margin:0;padding:12px 14px;list-style:none}
.schedule-task-row>summary::-webkit-details-marker{display:none}
.schedule-task-row[open]{background:#fff;border-color:var(--border-strong);box-shadow:0 8px 20px rgba(9,56,85,.06)}
.schedule-task-row .work-schedule-edit-form{padding:0 14px 12px}
.schedule-task-row .inline-action{padding:0 14px 12px}
.schedule-row-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}
.schedule-row-copy{display:grid;gap:2px;min-width:0}
.schedule-row-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.schedule-row-copy small{color:var(--muted);font-size:.74rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.schedule-row-status{display:inline-flex;align-items:center;justify-content:center;min-width:72px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--muted);padding:5px 9px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.035em}
.schedule-row-status.is-open{background:var(--blue-bg);border-color:#cfe3f2;color:var(--blue-dark)}
.schedule-row-status.is-done{background:var(--success-bg);border-color:#cbe8c4;color:var(--success)}
.schedule-row-completion{display:grid;justify-items:end;gap:4px;text-align:right}
.schedule-row-completion small{max-width:260px;color:var(--success);font-size:.72rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.schedule-card{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:134px;overflow:visible}
/* In een smalle kaart: titel volledig, status en wie het deed eronder. */
.schedule-card .schedule-row-summary{grid-template-columns:minmax(0,1fr);align-items:start;gap:8px}
.schedule-card .schedule-row-copy strong{white-space:normal}
.schedule-card .schedule-row-status,.schedule-card .schedule-row-completion{justify-self:start}
.schedule-card .schedule-row-completion{justify-items:start;text-align:left}
.schedule-card-content{padding:12px 14px}
.schedule-card-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px 12px}
.schedule-card-actions .button{display:inline-flex;align-items:center;gap:6px}
.schedule-card-actions .inline-action{display:grid;place-items:center;margin:0}
.schedule-editor-overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px}
.schedule-editor-backdrop{position:absolute;inset:0;border:0;background:rgba(9,30,44,.38);cursor:pointer}
.schedule-editor-panel{position:relative;z-index:1;width:min(980px,calc(100vw - 32px));max-height:min(860px,calc(100vh - 48px));overflow:auto;border:1px solid var(--border-strong);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-pop);padding:20px}
.method-editor-panel{width:min(760px,calc(100vw - 32px))}
.schedule-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.schedule-editor-head h3{margin:0 0 4px;font-size:1.08rem}
.schedule-editor-head p{margin:0}
.schedule-editor-panel .work-schedule-edit-form,
.schedule-editor-panel .method-form,
.schedule-editor-panel .product-edit-form,
.schedule-editor-panel .task-template-form{padding:0;grid-template-columns:repeat(12,minmax(0,1fr))}
.schedule-editor-panel .task-template-form>label{grid-column:span 6}
.schedule-editor-panel .task-template-form>.wide-field{grid-column:1/-1}
.schedule-editor-panel .compact-checks{max-height:260px}
.schedule-editor-panel .role-product-checks{max-height:330px;overflow:auto}
.role-product-checks>p{margin:0 0 6px}
.role-product-checks .check{align-items:flex-start;padding:7px;border-bottom:1px solid var(--border)}
.role-product-checks .check:last-of-type{border-bottom:0}
.role-product-checks .check span{display:grid;gap:2px}
.role-product-checks .check small{color:var(--muted)}
.schedule-editor-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:6px}
.schedule-editor-actions .check{min-height:40px;padding:8px 4px}
.schedule-editor-actions .button{width:auto;min-width:128px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;line-height:1.2}
body.has-schedule-editor-open{overflow:hidden}
.work-schedule-add-form,.work-schedule-edit-form{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
.work-schedule-add-form label:nth-of-type(1),.work-schedule-edit-form label:nth-of-type(1){grid-column:span 3}
.work-schedule-add-form label:nth-of-type(2),.work-schedule-edit-form label:nth-of-type(2){grid-column:span 4}
.work-schedule-add-form label:nth-of-type(3),.work-schedule-edit-form label:nth-of-type(3){grid-column:span 2}
.work-schedule-add-form label:nth-of-type(4),.work-schedule-edit-form label:nth-of-type(4){grid-column:span 3}
.work-schedule-add-form label:nth-of-type(5),.work-schedule-edit-form label:nth-of-type(5){grid-column:span 5}
.work-schedule-add-form label:nth-of-type(6),.work-schedule-edit-form label:nth-of-type(6){grid-column:span 2}
.work-schedule-edit-form label:nth-of-type(7){grid-column:span 2}
.work-schedule-add-form .button,.work-schedule-edit-form .button{grid-column:span 3;min-height:38px;width:100%}
.work-schedule-edit-form .schedule-editor-actions{grid-column:1/-1}
.work-schedule-edit-form .schedule-editor-actions .button{width:auto}

.cleaning-day-report{display:block}
.cleaning-day-report>div{margin-top:14px}
.schedule-report-summary{font-weight:800;cursor:pointer}
.cleaning-day-report-head{align-items:flex-end}
.cleaning-day-report-head h2{margin:0}
.cleaning-day-report-head p{margin:0 0 3px}
.hours-close-form,.cleaning-report-date-form{display:flex;align-items:end;gap:8px}
.hours-close-form{justify-content:flex-end}
.hours-close-form label{min-width:190px;font-size:.85rem}
.cleaning-report-date-form label{min-width:155px}
.cleaning-report-date-form{flex-wrap:wrap}
.hours-week-nav{display:flex;gap:8px}
.hours-week-nav .button{flex:1;text-align:center}
.cleaning-report-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cleaning-report-summary>span{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#f8fbfd}
.cleaning-report-summary small,.cleaning-report-summary em{color:var(--muted);font-size:.7rem;font-style:normal}
.cleaning-report-summary strong{font-size:1.22rem}
.cleaning-report-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cleaning-report-columns h3,.cleaning-report-orders h3{margin:0 0 8px}
.cleaning-report-list{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.cleaning-report-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border-bottom:1px solid var(--border)}
.cleaning-report-list li:last-child{border-bottom:0}
.cleaning-report-list li span{display:grid;gap:2px}
.cleaning-report-list small{color:var(--muted)}
.cleaning-report-list time{flex:none;color:var(--blue-dark);font-weight:800}
.cleaning-report-orders{padding-top:4px}
.cleaning-report-orders article{display:grid;grid-template-columns:minmax(170px,.5fr) minmax(0,1fr);gap:14px;padding:10px 0;border-top:1px solid var(--border)}
.cleaning-report-orders article>div{display:grid;gap:2px}
.cleaning-report-orders small{color:var(--muted)}
.cleaning-report-orders ul{margin:0;padding-left:18px}
@media(max-width:700px){
  .schedule-editor-overlay{padding:10px;place-items:stretch}
  .schedule-editor-panel{width:100%;max-height:calc(100vh - 20px);border-radius:14px;padding:16px}
  .schedule-editor-head{align-items:flex-start}
  .schedule-editor-panel .work-schedule-edit-form,
  .schedule-editor-panel .method-form,
  .schedule-editor-panel .product-edit-form,
  .schedule-editor-panel .task-template-form{grid-template-columns:1fr}
  .schedule-editor-panel .work-schedule-edit-form label,
  .schedule-editor-panel .method-form label,
  .schedule-editor-panel .product-edit-form label,
  .schedule-editor-panel .task-template-form label,
  .schedule-editor-panel .work-schedule-edit-form fieldset,
  .schedule-editor-panel .method-form fieldset,
  .schedule-editor-panel .product-edit-form fieldset,
  .schedule-editor-panel .task-template-form fieldset,
  .schedule-editor-panel .work-schedule-edit-form .button,
  .schedule-editor-panel .method-form .button,
  .schedule-editor-panel .product-edit-form .button,
  .schedule-editor-panel .task-template-form .button{grid-column:1}
  .schedule-picker-groups{grid-template-columns:1fr;max-height:360px}
  .schedule-board-grid{grid-template-columns:1fr}
  .schedule-editor-actions{align-items:stretch;flex-direction:column}
  .schedule-editor-actions .button{width:100%}
  .cleaning-day-report-head,.cleaning-report-date-form,.hours-close-form{align-items:stretch;flex-direction:column}
  .cleaning-report-date-form label,.hours-close-form label{min-width:0}
  .cleaning-report-summary,.cleaning-report-columns{grid-template-columns:1fr}
  .cleaning-report-orders article{grid-template-columns:1fr}
}

.other-orders{margin-top:8px}
.other-orders-list .upcoming-order{padding:9px 0}
.pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px;padding-top:10px;border-top:1px solid var(--border)}
.pagination-status{font-size:.8rem}
.pagination .is-disabled{opacity:.4;pointer-events:none}

.note-field{display:grid;gap:7px;font-size:.88rem;font-weight:600;margin-top:20px;max-width:none}
.note-field input{min-height:48px}
.form-card form>.button--lg{margin-top:20px}

.system-nav{display:flex;gap:2px;margin-bottom:20px;border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center}
.system-nav__label{margin:0 4px 0 12px;padding-left:12px;border-left:1px solid var(--border-strong);color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.system-nav a{padding:9px 13px;text-decoration:none;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;font-size:.86rem}
.system-nav a:hover{color:var(--ink)}
.system-nav a.active{color:var(--ink);border-bottom-color:var(--cta)}

.table-wrap{overflow-x:auto;margin-top:12px}
.data-table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:520px}
/* Kleine tabellen (artikel, aantal, eenheid) passen ook op de telefoon. */
.data-table--fit{min-width:0}
.data-table th{text-align:left;padding:8px 10px;background:var(--bg);border-bottom:1px solid var(--border-strong);color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.data-table td{padding:8px 10px;border-bottom:1px solid var(--border)}
.data-table tr:last-child td{border-bottom:0}
.data-table tbody tr:hover td{background:var(--bg)}
.data-table tr.highlight td{background:var(--yellow-bg)}
.history-table{min-width:0}
.history-table th:last-child,.history-table td:last-child{text-align:right;width:1%;white-space:nowrap}
.history-order-link{color:var(--blue);font-weight:700;text-decoration:none}
.history-order-link:hover{text-decoration:underline}
.system-locations-table{table-layout:fixed;min-width:1180px}
.system-locations-table th:nth-child(1){width:96px}
.system-locations-table th:nth-child(3){width:350px}
.system-locations-table th:nth-child(4){width:240px}
.system-locations-table th:nth-child(6),.system-locations-table td:nth-child(6){width:92px;text-align:center}
.system-locations-table th:nth-child(7),.system-locations-table td:nth-child(7){width:96px;text-align:center}
.system-locations-table td{height:56px;vertical-align:middle}
.system-locations-table td:nth-child(2),.system-locations-table td:nth-child(4),.system-locations-table td:nth-child(5){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.system-locations-table .copy-url-field--table{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px}
.system-locations-table .row-actions{width:96px;margin:0 auto}
.system-locations-table .row-actions .icon-btn{width:32px;height:32px}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.stat-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-card);display:grid;gap:3px}
.stat-tile--link{color:inherit;text-decoration:none}
.stat-tile--link:hover{border-color:var(--blue)}
.stat-tile--link:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.system-attention .section-head{margin-bottom:0}
.system-attention .section-head p{margin:4px 0 0}
.system-data-status summary{cursor:pointer;font-weight:700}
.system-data-status .mail-status{margin-top:14px}
.system-request-history summary{cursor:pointer;font-weight:700}
.system-request-history[open] summary{margin-bottom:16px}
.stat-value{font-size:1.7rem;font-weight:700;color:var(--ink)}
.stat-label{color:var(--muted);font-size:.78rem;font-weight:600}
.stat-comparison{display:contents}
.stat-grid:has(.analytics-comparison-tile){grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:stretch}
.analytics-comparison-tile{grid-column:auto;gap:9px}
.stat-series-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.stat-series-value{display:grid;align-content:center;gap:4px;min-height:82px;padding:11px 13px;border-left:5px solid var(--blue);background:#f5faff}
.stat-series-value.is-b{border-left-color:var(--accent);background:#fff8f3}
.stat-series-value.is-previous{border-top:1px solid var(--border);background:#f2f5f8}
.stat-series-value small{color:var(--muted);font-size:.68rem;font-weight:700;line-height:1.25}
.stat-series-value strong{color:var(--ink);font-size:1.25rem;line-height:1.15}

.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.chart-bars{width:100%;height:auto;max-width:320px}
.chart-pie{width:150px;height:150px}
.split-bar{appearance:none;-webkit-appearance:none;display:block;width:100%;height:20px;border:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--accent)}
.split-bar::-webkit-progress-bar{background:var(--accent)}
.split-bar::-webkit-progress-value{background:var(--navy)}
.split-bar::-moz-progress-bar{background:var(--navy)}
.split-bar-svg{background:#e6eef1}
.split-bar-svg rect[data-color="orange"]{fill:var(--accent)}
.split-bar-svg rect[data-color="navy"]{fill:var(--navy)}
.split-bar-svg rect[data-color="red"]{fill:var(--danger)}
.split-bar-segment[data-color="orange"]{background:var(--accent)}
.split-bar-segment[data-color="navy"]{background:var(--navy)}
.split-bar-segment[data-color="red"]{background:var(--danger)}
.chart-legend{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px;font-size:.83rem}
.chart-legend li{display:flex;align-items:center;gap:8px}
.legend-dot{width:9px;height:9px;border-radius:1px;display:inline-block}
.legend-dot[data-color="orange"]{background:var(--accent)}
.legend-dot[data-color="navy"]{background:var(--navy)}
.legend-dot[data-color="red"]{background:var(--danger)}

.bar-chart{display:flex;align-items:flex-end;gap:8px;height:150px;padding-top:20px}
.bar-chart-col{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.bar-chart-bar{width:100%;max-width:34px;height:100%;min-height:2px;position:relative;display:flex;justify-content:center}
.bar-chart-value{position:absolute;top:-18px;font-size:.72rem;font-weight:700;color:var(--ink)}
.bar-chart-label{font-size:.7rem;color:var(--muted);white-space:nowrap}
.bar-chart-progress{appearance:none;-webkit-appearance:none;align-self:flex-end;width:100%;height:100%;border:0;background:transparent;writing-mode:vertical-lr;direction:rtl}
.bar-chart-progress::-webkit-progress-bar{background:transparent}
.bar-chart-progress::-webkit-progress-value{min-height:4%;border-radius:3px 3px 0 0;background:var(--blue)}
.bar-chart-progress::-moz-progress-bar{min-height:4%;border-radius:3px 3px 0 0;background:var(--blue)}

.analytics-page-intro{max-width:760px;margin:4px 0 18px}
.analytics-filter{padding:20px 20px 18px}
.analytics-company-filter{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:16px}
.analytics-company-filter>.button{align-self:start;margin-top:20px}
.analytics-selection-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;padding:16px;border:1px solid #cfe3f2;border-radius:var(--radius);background:#f7fbfe}
.analytics-selection-card.is-comparison{border-color:#f0d3bd;background:#fffaf6}
.analytics-selection-card[hidden]{display:none}
.analytics-selection-heading{grid-column:1/-1;display:flex;align-items:center;gap:8px}.analytics-selection-heading>span:last-child{color:var(--muted);font-size:.76rem}
.analytics-series-swatch{display:inline-block;flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--blue)}
.analytics-series-swatch.is-b{background:var(--accent)}
.analytics-series-swatch.is-previous{box-shadow:inset 0 0 0 3px rgba(255,255,255,.6)}
.analytics-scope-filter{display:grid;grid-template-columns:minmax(160px,.65fr) minmax(220px,.9fr) minmax(220px,.9fr);gap:14px 18px;align-items:start;padding-top:16px;border-top:1px solid var(--border)}
.analytics-comparison-filter{display:grid;gap:7px;min-width:0}
.analytics-filter-label{font-size:.8rem;font-weight:600}
.analytics-compare-toggle{position:relative;display:flex;align-items:center;gap:9px;min-height:38px;font-size:.8rem;font-weight:600;cursor:pointer}
.analytics-compare-toggle input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.analytics-compare-track{position:relative;flex:0 0 38px;width:38px;height:22px;border-radius:999px;background:#dce5ea;box-shadow:inset 0 0 0 1px var(--border-strong);transition:background-color .12s ease}
.analytics-compare-track::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(12,45,61,.25);transition:transform .12s ease}
.analytics-compare-toggle input:checked+.analytics-compare-track{background:var(--blue);box-shadow:none}
.analytics-compare-toggle input:checked+.analytics-compare-track::after{transform:translateX(16px)}
.analytics-compare-toggle input:focus-visible+.analytics-compare-track{outline:3px solid var(--blue-bg);outline-offset:2px}
.analytics-compare-toggle input:disabled+.analytics-compare-track{opacity:.55}
.analytics-compare-toggle:has(input:disabled){cursor:not-allowed;color:var(--muted)}
.analytics-compare-options{display:grid;gap:5px;font-size:.72rem;color:var(--muted)}
.analytics-compare-options select{color:var(--ink)}
.analytics-compare-options[hidden]{display:none}
.analytics-compare-hint{font-size:.72rem;line-height:1.35}
.analytics-custom-period{grid-column:1/-1;display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.analytics-custom-period label{min-width:180px}
.analytics-scope-filter>.button{align-self:start;margin-top:20px}
.analytics-company-static{display:grid;gap:2px;min-width:0}
.analytics-company-static .analytics-filter-label{font-size:.8rem;font-weight:600}
.analytics-location-picker,.analytics-company-picker{display:grid;gap:6px;min-width:0}
.analytics-location-picker>label,.analytics-company-picker>label{font-size:.8rem;font-weight:600}
.analytics-location-search-wrap,.analytics-company-search-wrap{position:relative}
.analytics-location-search-wrap input,.analytics-company-search-wrap input{display:block;width:100%}
.analytics-location-results,.analytics-company-results{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:30;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);padding:5px;max-height:280px;overflow:auto}
.analytics-location-result,.analytics-company-result{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;border:0;background:transparent;color:var(--ink);padding:9px 10px;border-radius:8px;text-align:left;cursor:pointer}
.analytics-location-result:hover,.analytics-location-result:focus-visible,.analytics-company-result:hover,.analytics-company-result:focus-visible{background:var(--blue-bg);outline:0}
.analytics-location-result span,.analytics-company-result span{color:var(--muted);font-size:.76rem;white-space:nowrap}
.analytics-location-result-empty,.analytics-company-result-empty{display:block;padding:10px;color:var(--muted);font-size:.8rem}
.analytics-location-tools{position:sticky;top:-5px;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:-5px -5px 4px;padding:9px 12px;border-bottom:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:.78rem}
.analytics-location-tools .text-link{font-weight:700}
.analytics-location-picker .analytics-location-results{max-height:min(420px,60vh)}
.analytics-location-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer}
.analytics-location-option:hover,.analytics-location-option:focus-within{background:var(--blue-bg)}
.analytics-location-picker .analytics-location-search-wrap .analytics-location-option input{width:18px;height:18px;min-height:0;margin:0;padding:0}
.analytics-location-option strong{overflow-wrap:anywhere;font-weight:600}
.analytics-location-option span{color:var(--muted);font-size:.76rem;white-space:nowrap}
.analytics-location-done{position:sticky;bottom:-5px;display:block;width:100%;margin-top:4px}
.analytics-location-more{cursor:pointer}
.analytics-location-clear{font-size:.78rem;font-weight:700}
@media (max-width:560px){.analytics-location-option{grid-template-columns:auto minmax(0,1fr);row-gap:1px}.analytics-location-option input{grid-row:span 2}.analytics-location-option span{grid-column:2}}
.analytics-location-chips,.analytics-company-selection{display:flex;flex-wrap:wrap;gap:6px;min-height:30px;align-items:center}
.analytics-company-empty{font-size:.76rem}
.user-company-picker{grid-column:1/-1}
.user-edit-form>.user-company-picker,.user-edit-form>.user-location-picker{grid-column:1/-1}
.user-edit-form>.button{grid-column:1/-1;max-width:290px;width:100%}
.user-edit-form .analytics-company-selection,.user-location-picker--compact .analytics-location-chips{max-height:104px;overflow:auto;align-content:flex-start;border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px;background:#fbfdfe}
.user-create-intro{margin-top:-8px}
.user-create-card{max-width:none}
.user-create-form{grid-template-columns:minmax(260px,.7fr) minmax(420px,1.3fr);gap:20px 32px;align-items:start}
.user-create-fields{display:grid;grid-template-columns:1fr;gap:12px}
.user-create-form>.user-company-picker,.user-create-form>.user-location-picker{grid-column:2}
.user-location-picker{display:grid;gap:6px;min-width:0}
.user-location-picker>label{font-size:.8rem;font-weight:600}
.user-location-hint{font-size:.78rem;margin:0}
.assignment-link-panel{border:1px solid var(--border);border-radius:var(--radius-sm);padding:0;background:var(--surface)}
.assignment-link-panel summary{cursor:pointer;padding:9px 11px;font-size:.8rem;font-weight:700;color:var(--blue-dark)}
.assignment-link-panel__body{max-height:220px;overflow:auto;border-top:1px solid var(--border);padding:0 9px}
.management-location-search{width:calc(100% - 18px);margin:0 9px 9px;min-height:34px;font-size:.82rem}
.form-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:4px}
.user-create-form>.form-actions{grid-column:1/-1}
.management-scope{margin-top:-10px}
.filter-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;border:1px solid #cfe3f2;border-radius:999px;background:var(--blue-bg);padding:5px 8px 5px 10px;font-size:.75rem;font-weight:600}
.filter-chip.is-all{padding-right:10px;color:var(--blue-dark)}
.filter-chip button{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1rem;line-height:1;cursor:pointer}
.filter-chip button:hover{background:#d8e9f5;color:var(--ink)}
.analytics-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:.78rem;margin:-4px 0 12px}
.analytics-meta span+span::before{content:'·';margin-right:16px}
.analytics-active-scope{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:13px 15px;border:1px solid #cfe3f2;border-radius:var(--radius-sm);background:var(--blue-bg)}
.analytics-active-scope-label{flex:none;color:var(--blue-dark);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.analytics-active-scope>div{display:grid;gap:2px;min-width:0}
.analytics-active-scope>div strong,.analytics-active-scope>div small{overflow-wrap:anywhere}
.analytics-active-scope>div small{color:var(--muted)}
.analytics-active-article{display:grid;gap:1px;margin-left:auto;padding-left:14px;border-left:1px solid #c4ddea;text-align:right}
.analytics-active-article small,.analytics-active-article em{color:var(--muted);font-size:.7rem;font-style:normal}
.analytics-scope-main{display:grid;gap:14px;min-width:0}
.analytics-active-scope{flex-wrap:wrap;align-items:flex-start}
.analytics-active-scope-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;flex:1;min-width:0;margin:0}
.analytics-active-scope-list>div{min-width:0}
.analytics-active-scope-list dt{color:var(--muted);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.analytics-active-scope-list dd{display:grid;gap:1px;margin:2px 0 0;font-weight:700;overflow-wrap:anywhere}
.analytics-active-scope-list dd small{color:var(--muted);font-size:.74rem;font-weight:500}
.analytics-active-scope-updated{flex:none;align-self:center;color:var(--muted);font-size:.72rem}
.analytics-article-months{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(34px,1fr);gap:6px;align-items:end;margin:6px 0 4px;overflow-x:auto}
.analytics-article-month{display:grid;justify-items:center;min-width:0}
.analytics-article-month-bar{display:block;width:70%;max-width:28px;height:84px}
.analytics-article-month-bar rect{fill:var(--blue)}
.analytics-article-month strong{font-size:.7rem;line-height:1.4}
.analytics-article-month small{color:var(--muted);font-size:.66rem;white-space:nowrap}
.analytics-article-months-note{margin:0 0 10px;font-size:.74rem}
.stat-value small{font-size:.55em;font-weight:600;color:var(--muted)}
.analytics-drilldown-link{text-decoration:none}
.analytics-drilldown-link:hover{color:var(--blue-dark)}
.analytics-comparison-context{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:0 0 12px;padding:10px 13px;border:1px solid #cfe3f2;border-radius:var(--radius-sm);background:var(--blue-bg);font-size:.8rem}
.analytics-comparison-context>span,.analytics-comparison-context>small{color:var(--muted)}
.analytics-comparison-context>strong{color:var(--ink)}
.analytics-month-list{display:grid;gap:8px;margin-top:14px}
.analytics-month-row{display:grid;grid-template-columns:54px minmax(100px,1fr) 30px;align-items:center;gap:10px;font-size:.78rem}
.analytics-month-row progress{width:100%;height:12px;accent-color:var(--blue)}
.analytics-month-row strong{text-align:right}
.analytics-trend-card{min-width:0}
.analytics-trend-grid{grid-template-columns:minmax(0,2fr) minmax(240px,1fr)}
.analytics-trend-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.analytics-trend-head h2,.analytics-trend-head .eyebrow{margin-bottom:4px}
.analytics-trend-head .muted{margin:0}
.analytics-trend-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.analytics-trend-legend span{display:flex;align-items:center;gap:6px}
.analytics-trend-legend i{display:inline-block;width:22px;height:0;border-top:3px solid var(--blue);border-radius:999px}
.analytics-trend-legend i.is-b{border-top-color:var(--accent)}
.analytics-trend-legend i.is-previous{border-top-style:dashed}
.analytics-trend-chart{margin-top:18px;min-height:260px}
.analytics-trend-chart svg{display:block;width:100%;height:auto;max-height:340px;overflow:visible}
.trend-grid-line{stroke:var(--border);stroke-width:1}
.trend-axis-label{fill:var(--muted);font-family:Gilroy,Arial,sans-serif;font-size:11px}
.trend-area{fill:url('#trend-area-gradient')}
.trend-line{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3}
.trend-line--a-current{stroke:var(--blue)}
.trend-line--b-current{stroke:var(--accent)}
.trend-line--a-previous{stroke:var(--blue);stroke-dasharray:8 6}
.trend-line--b-previous{stroke:var(--accent);stroke-dasharray:8 6}
.trend-point{stroke-width:2.5;outline:none}
.trend-point--a-current{fill:var(--blue);stroke:var(--surface)}
.trend-point--b-current{fill:var(--accent);stroke:var(--surface)}
.trend-point--a-previous{fill:var(--surface);stroke:var(--blue)}
.trend-point--b-previous{fill:var(--surface);stroke:var(--accent)}
.trend-point:focus{stroke:var(--navy);stroke-width:4}
.trend-average-line{stroke-width:1.5;stroke-dasharray:5 6;opacity:.68}
.trend-average-line--a-current,.trend-average-line--a-previous{stroke:var(--blue)}
.trend-average-line--b-current,.trend-average-line--b-previous{stroke:var(--accent)}
.trend-average-label{font-family:Gilroy,Arial,sans-serif;font-size:11px;font-weight:700}
.trend-average-label--a-current,.trend-average-label--a-previous{fill:var(--blue-dark)}
.trend-average-label--b-current,.trend-average-label--b-previous{fill:var(--accent-hover)}
.analytics-trend-summary{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:4px;padding-top:14px;border-top:1px solid var(--border)}
.trend-change{font-size:.82rem;font-weight:600;color:var(--muted)}
.trend-change.is-up{color:var(--success)}
.trend-change.is-down{color:var(--danger)}
.overview-intro{max-width:860px;line-height:1.55}
.overview-service-card{margin-top:2px}
.overview-service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.overview-service-grid span{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#f8fbfd}
.overview-service-grid strong{font-size:1.05rem;color:var(--ink)}
.overview-service-grid small{color:var(--muted);font-size:.78rem;font-weight:700}
.account-settings-card>details>summary{cursor:pointer;color:var(--blue-dark);font-weight:800}
.account-details-form{margin-top:14px}
.request-actions{display:grid;gap:8px;min-width:220px}
.request-actions form{display:grid;gap:6px;margin:0}
.request-actions input{min-height:34px}
.analytics-breakdown{margin:8px 0 0;display:grid;gap:0}
.analytics-breakdown div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border)}
.analytics-breakdown div:last-child{border-bottom:0}
.analytics-breakdown dt{color:var(--muted)}
.analytics-breakdown dd{margin:0;font-weight:700}
.analytics-composition-series{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.analytics-composition-series .analytics-breakdown{padding:8px 10px;border-left:4px solid var(--blue);background:#f5faff}.analytics-composition-series .analytics-breakdown.is-b{border-left-color:var(--accent);background:#fff8f3}.analytics-composition-series .analytics-breakdown.is-previous{opacity:.72}.analytics-breakdown-title{font-size:.72rem;font-weight:700;display:flex;flex-direction:column;gap:2px}.analytics-breakdown-title span:last-child{color:var(--muted)}
.composition-pie{display:block;width:142px;height:142px;margin:14px auto 2px}
.composition-pie circle{fill:none;stroke-width:8}
.composition-pie-track{stroke:var(--accent)}
.composition-pie-fixed{stroke:var(--navy);transform:rotate(-90deg);transform-origin:50% 50%}
.composition-pie text{fill:var(--ink);font-size:.45rem;font-weight:800;font-variant-numeric:tabular-nums}
.analytics-composition-series .chart-legend{font-size:.78rem}
.analytics-detail-series{display:grid;gap:16px;margin-top:16px}
.analytics-detail-series.is-comparison{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.analytics-detail-series.is-comparison .analytics-series-detail{display:grid;grid-template-rows:auto auto;gap:16px}
.analytics-detail-series.is-comparison .analytics-series-detail>.card{height:100%}
.analytics-series-detail{min-width:0;margin:0;padding:8px;border-radius:var(--radius);background:#f4f8fb}
.analytics-series-detail.is-b{background:#fff8f3}
.analytics-series-detail.is-previous{margin-top:0;background:#eef3f6}
.analytics-series-detail-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:flex-start;gap:9px}.analytics-series-detail-head h2{margin:0}.analytics-series-detail-head p{margin:2px 0 0;color:var(--muted);font-size:.74rem}
.analytics-export-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.analytics-export-actions .button{min-height:32px;padding:7px 11px}
.rank-bars{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.rank-bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.8rem;margin-bottom:4px}
.rank-bar-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-bar-value{flex:none;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.rank-bar-track{height:8px;border-radius:999px;background:#e6eef1;overflow:hidden}
.rank-bar-fill{height:100%;border-radius:999px;background:var(--blue);min-width:4px}
.rank-bar-progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:8px;border:0;border-radius:999px;overflow:hidden;background:#e6eef1}
.rank-bar-progress::-webkit-progress-bar{background:#e6eef1}
.rank-bar-progress::-webkit-progress-value{min-width:4px;border-radius:999px;background:var(--blue)}
.rank-bar-progress::-moz-progress-bar{min-width:4px;border-radius:999px;background:var(--blue)}
.analytics-series-detail.is-b .rank-bar-progress::-webkit-progress-value{background:var(--accent)}
.analytics-series-detail.is-b .rank-bar-progress::-moz-progress-bar{background:var(--accent)}
.analytics-series-detail.is-previous .rank-bar-progress{opacity:.7}
@media(max-width:760px){
  .analytics-series-detail-head{grid-template-columns:auto minmax(0,1fr)}
  .analytics-export-actions{grid-column:1/-1;justify-content:flex-start}
}
.analytics-series-detail.is-b .rank-bar-fill{background:var(--accent)}
.analytics-series-detail.is-previous .rank-bar-fill{opacity:.55}
.analytics-location-table,.analytics-item-table{table-layout:fixed}
.analytics-location-table th:first-child,.analytics-location-table td:first-child,.analytics-item-table th:first-child,.analytics-item-table td:first-child{width:32%;overflow-wrap:break-word}
.analytics-location-table th:not(:first-child),.analytics-item-table th:not(:first-child){white-space:normal;line-height:1.25}
.analytics-location-table th:not(:first-child) .table-sort,.analytics-item-table th:not(:first-child) .table-sort{white-space:normal;text-align:right}
.analytics-location-table th:not(:first-child),.analytics-location-table td:not(:first-child){text-align:right}
.analytics-item-table th:not(:first-child),.analytics-item-table td:not(:first-child){text-align:right}
.table-sort{display:inline-flex;align-items:center;justify-content:inherit;gap:4px;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;text-transform:inherit;padding:0;cursor:pointer;white-space:nowrap}
.analytics-location-table th:not(:first-child) .table-sort,.analytics-item-table th:not(:first-child) .table-sort{margin-left:auto}
.table-sort span{color:var(--muted);font-size:.7rem}
.table-pagination{display:flex;align-items:end;justify-content:flex-end;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:.8rem}
.table-pagination label{display:flex;align-items:center;gap:7px;white-space:nowrap}
.table-pagination select{min-height:34px;padding:4px 28px 4px 8px}
.table-pagination [data-page-info]{min-width:88px;text-align:center;line-height:34px}
.table-pagination-actions{display:flex;gap:6px}

body:is(.is-customer-admin,.is-system){background:#eef3f6}
body:is(.is-customer-admin,.is-system) .topbar{background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(10px);box-shadow:0 10px 28px rgba(9,56,85,.07)}
body:is(.is-customer-admin,.is-system) .brand__mark{height:38px}
body:is(.is-customer-admin,.is-system) .page{padding-top:28px}
body:is(.is-customer-admin,.is-system) .system-nav{gap:6px;margin-bottom:28px;padding:6px;border:1px solid rgba(9,56,85,.08);border-radius:14px;background:rgba(255,255,255,.72);box-shadow:0 10px 26px rgba(9,56,85,.04)}
body:is(.is-customer-admin,.is-system) .system-nav a{border:0;border-radius:10px;padding:10px 14px;color:rgba(9,56,85,.62);transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}
body:is(.is-customer-admin,.is-system) .system-nav a:hover{background:#f3f8fb;color:var(--ink)}
body:is(.is-customer-admin,.is-system) .system-nav a.active{background:#fff;color:var(--ink);box-shadow:0 8px 18px rgba(9,56,85,.08)}
body:is(.is-customer-admin,.is-system) .analytics-page-head{position:relative;margin:0 0 20px;padding:18px 0 6px;max-width:920px}
body:is(.is-customer-admin,.is-system) .analytics-page-head::before{content:'';position:absolute;left:0;top:0;width:58px;height:4px;border-radius:999px;background:var(--green)}
body:is(.is-customer-admin,.is-system) .analytics-page-head .eyebrow{margin:0 0 12px;color:var(--green-dark);font-size:.82rem}
body:is(.is-customer-admin,.is-system) .analytics-page-head h1{margin:0;font-size:clamp(2rem,1.55rem + 1.2vw,2.7rem);line-height:1.05;letter-spacing:0}
body:is(.is-customer-admin,.is-system) .analytics-page-intro{margin:16px 0 0;font-size:1rem;line-height:1.55;color:rgba(9,56,85,.68)}
body:is(.is-customer-admin,.is-system) .card{border-color:rgba(9,56,85,.1);box-shadow:0 16px 38px rgba(9,56,85,.075),0 1px 0 rgba(255,255,255,.9) inset}
body:is(.is-customer-admin,.is-system) .analytics-filter{padding:20px;border-radius:18px;background:#fff}
body:is(.is-customer-admin,.is-system) .analytics-company-filter{gap:18px}
body:is(.is-customer-admin,.is-system) .analytics-selection-card{border-color:#bcd9ec;border-radius:14px;background:#f6fbfe;padding:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.82)}
body:is(.is-customer-admin,.is-system) .analytics-selection-card.is-comparison{border-color:#f0ceb2;background:#fff8f2}
body:is(.is-customer-admin,.is-system) .analytics-selection-heading strong{font-size:.95rem}
body:is(.is-customer-admin,.is-system) .analytics-selection-heading>span:last-child{font-weight:700}
body:is(.is-customer-admin,.is-system) .analytics-series-swatch{width:11px;height:11px;box-shadow:0 0 0 3px rgba(37,129,196,.14)}
body:is(.is-customer-admin,.is-system) .analytics-series-swatch.is-b{box-shadow:0 0 0 3px rgba(255,148,87,.18)}
body:is(.is-customer-admin,.is-system) .analytics-company-static{align-content:center;min-height:64px}
body:is(.is-customer-admin,.is-system) .analytics-company-static strong{font-size:1rem}
body:is(.is-customer-admin,.is-system) .analytics-location-picker>label,
body:is(.is-customer-admin,.is-system) .analytics-company-picker>label,
body:is(.is-customer-admin,.is-system) .analytics-filter-label{color:var(--ink);font-size:.76rem;font-weight:800}
body:is(.is-customer-admin,.is-system) .analytics-location-search-wrap input,
body:is(.is-customer-admin,.is-system) .analytics-company-search-wrap input,
body:is(.is-customer-admin,.is-system) .analytics-period-filter select,
body:is(.is-customer-admin,.is-system) .analytics-compare-options select,
body:is(.is-customer-admin,.is-system) .analytics-custom-period input{min-height:44px;border-color:#b8cada;border-radius:12px;background:#fff}
body:is(.is-customer-admin,.is-system) .analytics-location-search-wrap input:focus,
body:is(.is-customer-admin,.is-system) .analytics-company-search-wrap input:focus{box-shadow:0 0 0 4px rgba(37,129,196,.12)}
body:is(.is-customer-admin,.is-system) .filter-chip{min-height:30px;border-color:#bfdef3;background:#eaf5fc;color:var(--blue-dark);font-weight:800}
body:is(.is-customer-admin,.is-system) .filter-chip .muted{color:rgba(9,56,85,.54)}
body:is(.is-customer-admin,.is-system) .analytics-scope-filter{grid-template-columns:minmax(240px,.9fr) minmax(250px,.8fr) minmax(250px,.8fr);gap:18px 28px;padding:18px 0 0;border-top-color:rgba(9,56,85,.1)}
body:is(.is-customer-admin,.is-system) .analytics-compare-toggle{min-height:44px;color:var(--ink);font-weight:800}
body:is(.is-customer-admin,.is-system) .analytics-compare-track{background:#dfe9ee;border:1px solid #b8cada;box-shadow:inset 0 2px 4px rgba(9,56,85,.06)}
body:is(.is-customer-admin,.is-system) .analytics-compare-toggle input:checked+.analytics-compare-track{background:var(--green);border-color:var(--green)}
body:is(.is-customer-admin,.is-system) .analytics-meta{margin:4px 0 14px;padding:0 2px;color:#668196;font-weight:700}
body:is(.is-customer-admin,.is-system) .stat-grid{grid-template-columns:repeat(6,minmax(150px,1fr));gap:14px;margin-bottom:18px}
body.is-system .system-stat-grid{grid-template-columns:repeat(3,minmax(160px,1fr))}
body:is(.is-customer-admin,.is-system) .stat-grid:has(.analytics-comparison-tile){grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
body:is(.is-customer-admin,.is-system) .stat-tile{position:relative;overflow:hidden;min-height:104px;padding:18px 18px 16px;border-radius:14px;background:#fff}
body:is(.is-customer-admin,.is-system) .stat-tile::before{content:'';position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:999px;background:#d6e7ef}
body:is(.is-customer-admin,.is-system) .stat-tile:nth-child(1)::before{background:var(--blue)}
body:is(.is-customer-admin,.is-system) .stat-tile:nth-child(2)::before{background:var(--green)}
body:is(.is-customer-admin,.is-system) .stat-tile:nth-child(3)::before{background:var(--yellow)}
body:is(.is-customer-admin,.is-system) .stat-tile:nth-child(4)::before{background:var(--accent)}
body:is(.is-customer-admin,.is-system) .stat-value{font-size:1.85rem;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
body:is(.is-customer-admin,.is-system) .stat-label{max-width:220px;color:#637f94;font-size:.82rem;line-height:1.25}
body:is(.is-customer-admin,.is-system) .analytics-trend-grid{grid-template-columns:minmax(0,2.1fr) minmax(300px,.95fr);gap:18px}
body:is(.is-customer-admin,.is-system) .analytics-trend-card,
body:is(.is-customer-admin,.is-system) .analytics-composition-card{border-radius:14px;background:#fff}
body:is(.is-customer-admin,.is-system) .analytics-trend-head{align-items:flex-start}
body:is(.is-customer-admin,.is-system) .analytics-trend-head .eyebrow{font-size:.76rem;margin:0 0 5px}
body:is(.is-customer-admin,.is-system) .analytics-trend-head h2,
body:is(.is-customer-admin,.is-system) .analytics-composition-card h2{font-size:1.08rem;margin:0 0 6px}
body:is(.is-customer-admin,.is-system) .analytics-trend-legend{gap:8px 12px;justify-content:flex-end;max-width:520px}
body:is(.is-customer-admin,.is-system) .analytics-trend-legend span{min-height:28px;padding:5px 9px;border:1px solid rgba(9,56,85,.1);border-radius:999px;background:#f7fafb;color:#668196;font-weight:700}
body:is(.is-customer-admin,.is-system) .analytics-trend-chart{margin-top:14px;padding:4px 6px 0;min-height:278px}
body:is(.is-customer-admin,.is-system) .trend-grid-line{stroke:#dce7ed}
body:is(.is-customer-admin,.is-system) .trend-axis-label{fill:#668196;font-size:12px}
body:is(.is-customer-admin,.is-system) .trend-line{stroke-width:3.4}
body:is(.is-customer-admin,.is-system) .trend-point{r:6}
body:is(.is-customer-admin,.is-system) .analytics-composition-card{padding:22px 20px}
body:is(.is-customer-admin,.is-system) .analytics-composition-series{grid-template-columns:1fr;gap:12px;margin-top:14px}
body:is(.is-customer-admin,.is-system) .analytics-composition-series .analytics-breakdown{margin:0;padding:16px;border:1px solid rgba(37,129,196,.14);border-left:4px solid var(--blue);border-radius:12px;background:#f7fbfe}
body:is(.is-customer-admin,.is-system) .analytics-composition-series .analytics-breakdown.is-b{border-left-color:var(--accent);background:#fff9f5}
body:is(.is-customer-admin,.is-system) .analytics-breakdown div{padding:0;border:0}
body:is(.is-customer-admin,.is-system) .analytics-breakdown-title{font-size:.78rem}
body:is(.is-customer-admin,.is-system) .split-bar{height:16px;border-radius:999px;background:#edf2f5}
body:is(.is-customer-admin,.is-system) progress.split-bar::-webkit-progress-bar{background:var(--accent)}
body:is(.is-customer-admin,.is-system) progress.split-bar::-webkit-progress-value{background:var(--navy)}
body:is(.is-customer-admin,.is-system) progress.split-bar::-moz-progress-bar{background:var(--navy)}
body:is(.is-customer-admin,.is-system) .chart-legend{gap:8px;margin-top:14px;color:#637f94;font-weight:700}
body:is(.is-customer-admin,.is-system) .legend-dot{width:10px;height:10px;border-radius:50%}
body:is(.is-customer-admin,.is-system) .analytics-series-detail{padding:0;background:transparent}
body:is(.is-customer-admin,.is-system) .analytics-series-detail>.card{border-radius:14px}
body:is(.is-customer-admin,.is-system) .analytics-series-detail-head{align-items:center;padding-bottom:10px;border-bottom:1px solid rgba(9,56,85,.08)}
body:is(.is-customer-admin,.is-system) .analytics-series-detail-head h2{font-size:1.06rem}
body:is(.is-customer-admin,.is-system) .rank-bar-track{height:9px;background:#edf2f5}
body:is(.is-customer-admin,.is-system) .rank-bar-label{font-weight:700}
body:is(.is-customer-admin,.is-system) .data-table th{background:#f5f8fa;color:#668196}
body:is(.is-customer-admin,.is-system) .data-table tbody tr:hover td{background:#f8fbfd}
@media(max-width:760px){
  body:is(.is-customer-admin,.is-system) .page{padding:18px 14px}
  body:is(.is-customer-admin,.is-system) .system-nav{margin-bottom:18px;overflow-x:auto;flex-wrap:nowrap}
  body:is(.is-customer-admin,.is-system) .system-nav a{white-space:nowrap}
  /* Klantbeheerder: hooguit zes onderdelen, dus op twee rijen in plaats van zijwaarts scrollen. */
  body.is-customer-admin .system-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow-x:visible}
  body.is-customer-admin .system-nav a{padding:9px 6px;text-align:center}
  body:is(.is-customer-admin,.is-system) .analytics-page-head{padding-top:14px}
  body:is(.is-customer-admin,.is-system) .analytics-filter{padding:16px}
  body:is(.is-customer-admin,.is-system) .analytics-scope-filter,
  body:is(.is-customer-admin,.is-system) .stat-grid,
  body:is(.is-customer-admin,.is-system) .analytics-trend-grid{grid-template-columns:1fr}
  body:is(.is-customer-admin,.is-system) .analytics-trend-legend{justify-content:flex-start}
  .analytics-trend-grid{grid-template-columns:1fr}
  .analytics-company-filter,.analytics-scope-filter,.analytics-selection-card,.analytics-detail-series.is-comparison{grid-template-columns:1fr}
  .analytics-company-filter>.button,.analytics-scope-filter>.button{width:100%;margin-top:0}
  .analytics-active-scope{flex-direction:column;gap:10px}
  .analytics-active-scope-list{grid-template-columns:1fr;width:100%}
  .analytics-active-scope-updated{align-self:flex-start}
  .analytics-meta span+span::before{content:'';margin:0}
  .analytics-meta{display:grid;gap:3px}
  .table-pagination{align-items:stretch;justify-content:space-between;flex-wrap:wrap}
  .table-pagination-actions{width:100%}
  .table-pagination-actions .button{flex:1}
  .section-head{align-items:flex-start;flex-direction:column}
  .section-actions{width:100%;justify-content:stretch}
  .section-actions .button{flex:1;text-align:center}
  .user-create-fields{grid-template-columns:1fr}
  .user-create-form{grid-template-columns:1fr}
  .user-create-form>.user-company-picker,.user-create-form>.user-location-picker,.user-create-form>.form-actions{grid-column:1}
  .form-actions{align-items:stretch;flex-direction:column-reverse}
  .form-actions .button{text-align:center;width:100%}
}

.log-row{padding:8px 0;border-top:1px solid var(--border);font-size:.86rem}
.log-row:first-child{border-top:0}
.log-row summary{display:flex;justify-content:space-between;align-items:baseline;gap:14px;cursor:pointer;list-style:none}
.log-row summary::-webkit-details-marker{display:none}
.log-row summary::before{content:'▸';color:var(--muted);margin-right:8px;font-size:.7rem}
.log-row[open] summary::before{content:'▾'}
.log-summary{font-weight:600;flex:1}
.log-when{color:var(--muted);white-space:nowrap;font-size:.8rem}
.log-detail{margin:8px 0 4px 20px}
.log-detail ul{margin:4px 0 0;padding-left:18px}

.back-link{display:inline-flex;margin:0 0 12px}
.order-detail-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-6px 0 18px}
.order-actions{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.order-actions h2{font-size:1rem;margin-bottom:12px}
.order-actions .js-confirm-cancel{margin-top:22px;padding-top:16px;border-top:1px solid var(--border)}

@media(max-width:600px){
  .page{padding:16px 14px}
  .card{padding:20px 16px}
  .location-head{padding:16px 18px;border-radius:18px;margin-bottom:14px}
  .location-head h1{font-size:1.5rem;margin-bottom:4px}
  .location-subtitle{font-size:.82rem}
  .location-tabs{margin-bottom:12px}
  .location-shell>.location-tabs{flex-wrap:nowrap}
  .location-shell>.location-tabs .location-tab{flex:1;min-width:0;justify-content:center;padding:10px 8px}
  .customer-section-head--row{align-items:flex-start}
  .section-history-link{margin-top:-7px}
  .location-delivery-card .delivery-card-head{flex-direction:row;align-items:center}
  .location-delivery-card .delivery-card-head .button{flex:none;width:auto}
  .add-article-control{align-items:stretch;flex-direction:column}
  .add-article-control .button{width:100%}
  .form-card h1{margin-top:8px;margin-bottom:18px}
  .form-card .delivery-line{padding:14px 12px;gap:12px 16px}
  .order-flow-card{padding:22px 16px}
  .order-flow-card .delivery-line{padding:14px 0}
  .order-form-lines .delivery-line{grid-template-columns:minmax(0,1fr) auto}
  .order-form-lines .col-item{grid-column:1/-1}
  .order-form-lines .col-unit{justify-self:end;text-align:right}
  .order-line-card--search .col-qty{grid-column:1}
  .order-add-card{grid-template-columns:1fr auto;align-items:start}
  .order-add-card .article-search{grid-column:1/-1}
  .order-add-card .button{grid-column:1/-1;width:100%}
  .order-flow-card .article-search-results,.order-actions .article-search-results{position:relative;top:auto;margin-top:8px;border-radius:14px;box-shadow:0 8px 18px rgba(9,56,85,.08);max-height:330px}
  .article-search-results button{grid-template-columns:44px minmax(0,1fr);padding:9px}
  .article-search-thumb{width:44px;height:44px}
  .article-search-selected .article-search-thumb{width:44px;height:52px}
  .form-card .col-item{font-size:1rem;line-height:1.35}
  .form-card .col-qty,.form-card .col-unit{font-size:.95rem}
  .form-card .col-qty::before,.form-card .col-unit::before{font-size:.72rem}
  .replenishment-note{font-size:.92rem;padding:14px;line-height:1.5}
  .text-link{min-height:40px;display:inline-flex;align-items:center}
  .form-grid{grid-template-columns:1fr}
  .search-result{align-items:flex-start;flex-direction:column}
  .afas-result{align-items:stretch;flex-direction:column;gap:10px}
  .afas-result__actions .button{flex:1}
  /* Uitklappanelen (+) staan op telefoon onder de kop: gewoon in de pagina tonen in plaats
     van zwevend, anders vallen ze links buiten het scherm. */
  .add-panel[open]{width:100%}
  .add-panel[open] .add-panel-body{position:static;width:auto;max-width:none;margin-top:10px;box-shadow:none}
  .delivery-card-head{flex-direction:column;align-items:stretch;gap:8px}
  .delivery-card-head .button{width:100%;text-align:center}
  .button{min-height:42px;display:inline-flex;align-items:center;justify-content:center}
  .button.small{min-height:36px}
  input,select{min-height:42px}
}
.analytics-detail-lists {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.analytics-locations-list { order: 1; }
.analytics-items-list { order: 2; }
.analytics-items-list.analytics-article-detail { order: 0; }

.analytics-custom-period[hidden] { display: none; }

/* Bedrijfspagina: smalle kolom, blokken per rol, één Opslaan onderaan in beeld. */
.company-page{max-width:760px}
.company-page-meta{margin:-6px 0 18px}
.company-page-form{display:grid;gap:16px}
.company-block{display:grid;gap:10px;margin:0}
.company-page>.company-block{margin-top:16px}
.company-block h2{margin:0 0 2px}
.company-block>p{margin:0}
.company-option{font-size:.9rem;font-weight:500;display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer}
.company-option input{min-height:auto;width:auto;margin:3px 0 0}
.company-option strong{display:block;color:var(--ink);font-size:.95rem}
.company-option small{display:block;color:var(--muted);font-size:.82rem;line-height:1.4;margin-top:2px}
.company-option.is-fixed{cursor:default;background:var(--bg)}
.company-option-mark{color:var(--green-dark);font-weight:700;text-align:center}
.company-people{font-size:.9rem;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline;padding-top:4px;border-top:1px solid var(--border)}
.company-people-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-right:4px}
.company-rights-group{display:grid}
.company-rights-group h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:8px 0 2px}
.company-right{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--border);font-weight:500}
.company-right select{width:190px;flex:0 0 auto}
.company-save-bar{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));z-index:5;display:flex;justify-content:flex-end;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 16px rgba(9,56,85,.12)}
@media (max-width:560px){
  .company-right{font-size:.88rem;line-height:1.3}
  .company-right select{width:150px}
  .company-save-bar .button{width:100%}
}

.company-assortment-setting{display:grid;gap:8px;align-content:start;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px}
.company-assortment-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.company-assortment-setting .notice{margin:0;font-size:.78rem}
.assortment-manager{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(420px,1.2fr);gap:16px;align-items:start}
.assortment-search-card,.assortment-selection-card{min-width:0}
.assortment-search-card h2,.assortment-selection-card h2{margin-bottom:4px}
.assortment-search-card>label{display:grid;gap:6px;margin-top:18px}
.assortment-search-results{margin-top:6px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);max-height:420px;overflow:auto;background:var(--surface)}
.assortment-search-results[hidden]{display:none}
.assortment-search-results button{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:10px;width:100%;border:0;border-bottom:1px solid var(--border);background:var(--surface);text-align:left;padding:9px 10px;cursor:pointer}
.assortment-search-results button:last-child{border-bottom:0}
.assortment-search-results button:hover,.assortment-search-results button:focus-visible{background:var(--blue-bg);outline:0}
.assortment-selection-head{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:12px}
.assortment-count{flex:0 0 auto;border-radius:999px;background:var(--blue-bg);color:var(--blue-dark);padding:6px 10px;font-size:.75rem;font-weight:700}
.assortment-selection-list{display:grid;border-top:1px solid var(--border)}
.assortment-selected-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.assortment-selected-item>span{display:grid;gap:3px;min-width:0}
.assortment-selected-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}
.assortment-selected-item small{color:var(--muted);font-size:.74rem}
.assortment-selected-item input{display:none}
.assortment-empty{border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;padding:28px 10px}
.assortment-save-row{display:flex;align-items:center;justify-content:flex-end;gap:14px;min-height:42px;margin-top:16px}
.assortment-save-row [data-assortment-status]{margin-right:auto;font-size:.76rem}
@media(max-width:900px){
  .assortment-manager{grid-template-columns:1fr}
  .method-form{grid-template-columns:1fr}
  .catalogue-head,.schedule-command-head{align-items:flex-start;flex-direction:column}
  .catalogue-connect,.catalogue-layout,.work-schedule-add-form,.work-schedule-edit-form{grid-template-columns:1fr}
  .work-schedule-add-form label,.work-schedule-edit-form label,.work-schedule-add-form .button,.work-schedule-edit-form .button{grid-column:1}
  .schedule-row-summary{grid-template-columns:1fr}
  .schedule-row-status,.schedule-row-completion{justify-self:start}
  .schedule-row-completion{justify-items:start;text-align:left}
}

@media(max-width:700px){
  .locations-page-head{align-items:flex-start;flex-direction:column}
  .location-card-search{width:100%;min-width:0}
}

.entity-page-head{align-items:flex-end;margin-bottom:22px}
.entity-page-head h1{margin-bottom:0}
.entity-page-head .eyebrow{margin-bottom:6px}
.entity-edit-layout{display:grid;grid-template-columns:minmax(360px,460px) minmax(620px,1fr);gap:18px;max-width:none;align-items:start}
.entity-edit-card{min-width:0;margin:0}
.entity-edit-card>h2{margin-bottom:16px}
.entity-settings-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.entity-url-field,.entity-address-field,.entity-form-actions{grid-column:1/-1}
.entity-form-actions{padding-top:4px}
.entity-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.entity-card-head h2{margin-bottom:4px}
.entity-card-head p{margin:0;font-size:.8rem}
.entity-count{display:grid;place-items:center;min-width:34px;height:34px;border-radius:999px;background:var(--blue-bg);color:var(--blue-dark);font-size:.8rem;font-weight:700}
.entity-link-list{display:grid;border-top:1px solid var(--border)}
.entity-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border);color:var(--ink);text-decoration:none}
.entity-link-row:hover{background:var(--blue-bg)}
.entity-link-copy{display:grid;gap:3px;min-width:0;color:inherit;text-decoration:none}
.entity-link-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}
.entity-link-copy small{color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entity-link-arrow{color:var(--blue-dark);font-size:1.4rem;line-height:1}
.entity-list-empty{border:0;border-radius:0;box-shadow:none;padding:28px 10px}
.location-user-assign-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;margin:0 0 14px;padding:12px;border:1px solid #cfe3f2;border-radius:12px;background:#f7fbfe}
.location-user-assign-form label{display:grid;gap:6px;margin:0}
.location-user-assign-form .button{min-height:40px}
.entity-user-row{grid-template-columns:minmax(0,1fr) auto 36px}
.entity-user-row .inline-action{display:grid;place-items:center;margin:0}
.entity-user-row .icon-btn{width:32px;height:32px}
.assignment-link-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 2px;border-bottom:1px solid var(--border)}
.assignment-link-row:last-child{border-bottom:0}
.assignment-link-row .check{min-width:0}
.assignment-link-row .check>span{display:grid;gap:2px;min-width:0}
.assignment-link-row .check strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem}
.assignment-link-row .check small{color:var(--muted);font-size:.7rem}
.assignment-link-row>a{flex:0 0 auto;color:var(--blue-dark);font-size:.74rem;font-weight:700;text-decoration:none}
.assignment-link-row>a:hover{text-decoration:underline}
.company-access .assignment-link-row>span{display:grid;gap:2px;min-width:0}
.company-access .assignment-link-row small{color:var(--muted);font-size:.78rem}
.entity-edit-layout .work-schedule-edit-card{grid-column:2;grid-row:1/span 2}
.work-schedule-edit-card{padding:22px}
.work-schedule-edit-card .entity-card-head{align-items:center;padding-bottom:14px;border-bottom:1px solid var(--border)}
.work-schedule-add-form{margin-bottom:16px;padding:14px;border:1px solid #cfe3f2;border-radius:14px;background:#f7fbfe}
.schedule-task-row{display:grid;gap:0;border-radius:12px;background:#fff}
.schedule-task-row-head{padding:12px 14px;border-bottom:1px solid rgba(9,56,85,.08)}
.schedule-task-row-body{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:10px;align-items:end;padding:12px 14px}
.schedule-task-row .work-schedule-edit-form{padding:0;grid-template-columns:minmax(150px,1.2fr) minmax(200px,1.5fr) minmax(130px,.75fr) minmax(140px,.75fr) minmax(160px,1fr) minmax(84px,.4fr) minmax(72px,.35fr) minmax(110px,.55fr);gap:8px}
.schedule-task-row .work-schedule-edit-form label,
.schedule-task-row .work-schedule-edit-form .button{grid-column:auto}
.schedule-task-row .inline-action{align-self:end;padding:0}
.schedule-task-row .icon-btn--danger{width:38px;height:38px;border-radius:12px}
.schedule-row-copy strong{font-size:.95rem}
.schedule-row-status{min-width:62px;padding:4px 8px;font-size:.66rem}
@media(max-width:800px){
  .entity-edit-layout{grid-template-columns:1fr}
  .entity-edit-layout .work-schedule-edit-card{grid-column:1;grid-row:auto}
  .entity-settings-form{grid-template-columns:1fr}
  .entity-address-field,.entity-form-actions{grid-column:1}
  .entity-link-row{grid-template-columns:minmax(0,1fr) auto}
  .entity-link-row .badge{display:none}
  .location-user-assign-form{grid-template-columns:1fr}
  .entity-user-row{grid-template-columns:minmax(0,1fr) 36px}
  .schedule-task-row-body{grid-template-columns:1fr}
  .schedule-task-row .work-schedule-edit-form{grid-template-columns:1fr}
  .schedule-task-row .inline-action{justify-self:start}
}

.intranet-page{--screen-navy:#083650;--screen-blue:#2387c8;--screen-green:#68a936;--screen-lime:#b7d53f;max-width:1680px;margin:0 auto}
/* Signage-scherm: geen topbar en geen paginamarge; de JS zet direct daarna
   dezelfde presentatiestand als de knop "Presenteren". */
body.is-screen-display{background:#f4f7f9;background:var(--bg)}
.intranet-page.is-screen{max-width:none;margin:0}
.intranet-page.is-presenting{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:60;max-width:none;width:100%;height:100vh;height:100dvh;margin:0;display:flex;flex-direction:column;background:#f4f7f9;background:var(--bg);overflow:hidden;padding:18px 22px 8px;padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}
body.has-intranet-presentation{overflow:hidden}
.intranet-page.is-presenting .intranet-toolbar{display:none}
.intranet-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}
.intranet-toolbar h1{margin-bottom:0}
.intranet-toolbar .eyebrow{margin-bottom:5px}
.intranet-toolbar-actions{display:flex;gap:8px}
.intranet-stage{position:relative;min-height:640px;min-height:min(720px,calc(100vh - 245px));background:linear-gradient(135deg,#fff 0%,#f6fafb 100%);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-card);overflow:hidden}
.intranet-page.is-presenting .intranet-stage{flex:1;min-height:0;height:auto}
.intranet-slide{display:none;height:100%;min-height:inherit;padding:48px;padding:clamp(34px,4vw,72px);align-content:start}
.intranet-slide.is-active{display:block;display:grid}
/* Vangnet voor een tv-browser die de JS niet draait: dan blijft er tenminste één
   dia staan in plaats van een leeg scherm. De JS zet is-script-driven op de stage. */
.intranet-stage:not(.is-script-driven) .intranet-slide:first-of-type{display:block;display:grid}
.intranet-slide-heading{display:grid;gap:4px;margin-bottom:32px;margin-bottom:clamp(24px,3vw,44px)}
.intranet-slide-heading span{font-family:Whitewood,Gilroy,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#68a936;color:var(--screen-green);font-size:1.2rem;font-size:clamp(1rem,1.4vw,1.4rem)}
.intranet-slide-heading strong{color:#083650;color:var(--screen-navy);font-size:3rem;font-size:clamp(2rem,4vw,4.4rem);line-height:1.05;letter-spacing:-.025em}
.intranet-kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.intranet-kpi-grid--four{grid-template-columns:repeat(4,minmax(0,1fr));align-self:center}
.intranet-kpi-grid article{display:grid;gap:8px;padding:clamp(22px,2.5vw,38px);border-radius:18px;background:#fff;border:1px solid var(--border);box-shadow:0 12px 32px rgba(9,56,85,.08)}
.intranet-kpi-grid article span{color:var(--muted);font-size:clamp(.9rem,1.2vw,1.2rem);font-weight:600}
.intranet-kpi-grid article strong{color:var(--screen-navy);font-size:clamp(2rem,4.5vw,5rem);line-height:1}
.intranet-context{align-self:end;margin:32px 0 0;color:var(--muted);font-size:1rem}
.intranet-trend{min-height:330px}
.intranet-trend svg{display:block;width:100%;height:min(48vh,440px)}
.intranet-chart-grid{stroke:#d9e4e8;stroke-width:1}
.intranet-chart-label{fill:#6c8796;font-family:Gilroy,Arial,sans-serif;font-size:13px}
.intranet-chart-line{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.intranet-chart-line.is-current{stroke:var(--screen-blue)}
.intranet-chart-line.is-previous{stroke:#ef8b4a;stroke-width:3;stroke-dasharray:10 9}
.intranet-chart-legend{display:flex;justify-content:center;gap:24px;margin:-12px 0 8px;color:var(--muted);font-weight:700}
.intranet-chart-legend span::before{content:'';display:inline-block;width:28px;margin-right:8px;border-top:4px solid var(--screen-blue);vertical-align:middle}
.intranet-chart-legend .is-previous::before{border-color:#ef8b4a;border-top-width:3px;border-top-style:dashed}
.intranet-comparison-line{display:flex;align-items:baseline;justify-content:center;gap:18px;font-size:clamp(1rem,1.6vw,1.5rem)}
.intranet-comparison-line strong{color:var(--screen-navy);font-size:clamp(1.6rem,2.8vw,3rem)}
.intranet-comparison-line span{color:var(--muted)}
.intranet-split-layout{display:grid;grid-template-columns:minmax(260px,.65fr) minmax(480px,1.35fr);align-items:center;gap:clamp(30px,5vw,80px)}
.intranet-composition-fixed{display:grid;justify-items:center;gap:18px;width:100%}
.intranet-pie{display:block;aspect-ratio:1;max-width:390px;width:100%;margin:auto;border-radius:50%;box-shadow:0 12px 32px rgba(9,56,85,.12)}
.intranet-composition-total{display:grid;justify-items:center;text-align:center;gap:2px}
.intranet-composition-total strong{color:var(--screen-navy);font-size:clamp(2rem,4vw,3.2rem);line-height:1}
.intranet-composition-total span{color:var(--muted);font-size:1.1rem}
.intranet-composition-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px}
.intranet-composition-legend span{display:flex;align-items:center;gap:9px;color:var(--muted);font-weight:600}
.intranet-composition-legend span::before{content:'';width:14px;height:14px;border-radius:50%;flex:none}
.intranet-composition-legend .is-fixed::before{background:var(--screen-green)}
.intranet-composition-legend .is-replenishment::before{background:var(--screen-lime)}
.intranet-composition-legend .is-loose::before{background:var(--screen-blue)}
.intranet-composition-legend strong{color:var(--screen-navy)}
.intranet-quality-layout{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(260px,.85fr) minmax(420px,1.4fr);gap:24px;align-items:stretch}
.intranet-quality-kpi,.intranet-quality-trend{display:grid;align-content:center;gap:10px;padding:30px;border-radius:20px;background:#fff;border:1px solid var(--border);box-shadow:0 12px 32px rgba(9,56,85,.08)}
.intranet-quality-kpi>span,.intranet-quality-trend>span{color:var(--muted);font-weight:700}
.intranet-quality-kpi>strong,.intranet-quality-trend>strong{color:var(--screen-navy);font-size:clamp(3rem,6vw,6rem);line-height:1}
.intranet-quality-kpi small,.intranet-quality-trend small{color:var(--muted)}
.intranet-quality-trend b{font-size:.95rem;color:#6c8796}
.intranet-quality-trend.is-improving{border-color:#9bcf75;background:#f4fbef}.intranet-quality-trend.is-improving b{color:#43851f}
.intranet-quality-trend.is-worsening{border-color:#e9a2a2;background:#fff4f4}.intranet-quality-trend.is-worsening b{color:#b83d3d}
.intranet-mini-bars{display:flex;align-items:flex-end;justify-content:space-around;gap:12px;min-height:280px;padding:24px 18px 12px;border-radius:20px;background:#fff;border:1px solid var(--border);box-shadow:0 12px 32px rgba(9,56,85,.08)}
.intranet-mini-bars>div{display:grid;grid-template-rows:24px 200px 22px;align-items:end;justify-items:center;gap:8px;width:100%}
.intranet-mini-bars progress{appearance:none;-webkit-appearance:none;width:min(48px,75%);height:100%;border:0;background:transparent;writing-mode:vertical-lr;direction:rtl}
.intranet-mini-bars progress::-webkit-progress-bar{background:transparent}
.intranet-mini-bars progress::-webkit-progress-value{min-height:3px;border-radius:8px 8px 3px 3px;background:#e46d6d}
.intranet-mini-bars progress::-moz-progress-bar{min-height:3px;border-radius:8px 8px 3px 3px;background:#e46d6d}
.intranet-mini-bars span{font-weight:700;color:var(--screen-navy)}.intranet-mini-bars small{color:var(--muted);text-transform:uppercase}
.intranet-driver-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-content:start}
.intranet-driver-grid article{display:grid;gap:6px;border-left:7px solid var(--screen-lime);border-radius:14px;background:#fff;padding:22px 24px;box-shadow:0 8px 24px rgba(9,56,85,.08)}
.intranet-driver-grid strong{font-size:clamp(1.25rem,2vw,2rem);color:var(--screen-navy)}
.intranet-driver-grid span{color:var(--muted);font-size:1rem}
.intranet-now-board{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start}
.intranet-now-map{position:relative;width:auto;height:min(68vh,640px);aspect-ratio:3/4;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#e7eef2}
.intranet-now-photo{display:block;width:52px;height:52px;border-radius:50%;background:#083650;color:#fff;font-size:18px;font-weight:800;line-height:52px;text-align:center;object-fit:cover}
.intranet-now-copy strong{display:block;color:#083650;color:var(--screen-navy);font-size:1.35rem;line-height:1.15}
.intranet-now-copy b,.intranet-now-copy span,.intranet-now-copy em{display:block;font-style:normal}
.intranet-now-copy b{margin-top:2px;color:#083650;color:var(--screen-navy);font-size:1.05rem}
.intranet-now-copy span,.intranet-now-copy em{color:#5d7684;color:var(--muted);font-size:.98rem}
.intranet-now-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:4px 28px;margin:0;padding:0;list-style:none}
.intranet-now-list li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;padding:8px 2px;border-bottom:1px solid #d5e0e6;border-bottom:1px solid var(--border)}
.intranet-now-list .intranet-no-data{display:block;grid-column:1/-1;border:0}
.intranet-now-pin{position:absolute;z-index:1;width:48px;height:48px;margin:-24px 0 0 -24px}
.intranet-now-pin img,.intranet-now-pin i{display:block;width:48px;height:48px;border:3px solid #fff;border-radius:50%;background:#083650;color:#fff;box-shadow:0 6px 16px rgba(9,56,85,.35);object-fit:cover;font-style:normal;font-weight:800;font-size:15px;line-height:42px;text-align:center}
.intranet-now-pin b{position:absolute;top:50px;left:50%;transform:translateX(-50%);max-width:96px;padding:1px 7px;border-radius:999px;background:rgba(8,54,80,.9);color:#fff;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.data-table .intranet-now-photo{display:inline-block;width:42px;height:42px;line-height:42px;font-size:14px;vertical-align:middle;margin:0 8px 0 0}
.intranet-route-map-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:18px;min-height:460px}
.intranet-route-map{min-height:460px;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#e8eef1}
.intranet-route-map-layout aside{display:grid;align-content:start;gap:16px}
.intranet-route-days{display:grid;gap:7px}
.intranet-route-days button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:1px solid var(--border);border-radius:11px;background:#fff;color:var(--ink);padding:10px 12px;font:inherit;text-align:left;cursor:pointer}
.intranet-route-days button span{color:var(--muted);font-size:.75rem}
.intranet-route-days button.is-active{border-color:var(--screen-blue);background:#eaf5fc;color:var(--screen-navy)}
.intranet-route-legend{display:grid;gap:8px;color:var(--muted);font-size:.8rem}
.intranet-route-legend span{display:flex;align-items:center;gap:8px}
.intranet-route-legend i{width:11px;height:11px;border-radius:50%;flex:none}
.intranet-subtitle{margin:-30px 0 24px;color:var(--muted)}
.intranet-ranking{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.intranet-ranking>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;border-bottom:1px solid var(--border);padding:13px 4px;font-size:clamp(.88rem,1.2vw,1.15rem)}
.intranet-ranking strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--screen-navy)}
.intranet-ranking span{color:var(--muted);white-space:nowrap}
.intranet-ranking--regions>div{grid-template-columns:minmax(0,1fr) auto auto 52px}
.intranet-ranking b{text-align:right;color:var(--screen-green)}
.intranet-ranking--regions .is-negative b{color:#bd4141}.intranet-ranking--regions .is-neutral b{color:var(--muted)}
.intranet-highlight{display:flex;align-items:baseline;gap:16px;margin:-12px 0 18px;padding:18px 24px;border-radius:15px;background:var(--blue-bg)}
.intranet-highlight span{color:var(--muted)}
.intranet-highlight strong{color:var(--screen-navy);font-size:clamp(1.4rem,2.4vw,2.4rem)}
.intranet-highlight small{color:var(--screen-green);font-size:1rem;font-weight:700}
.intranet-region-bars{display:grid;gap:10px}
.intranet-region-bars>div{display:grid;grid-template-columns:minmax(190px,1fr) minmax(220px,2.2fr) 110px 155px;align-items:center;gap:16px;padding:8px 12px;border-radius:12px;background:#fff;border:1px solid var(--border)}
.intranet-region-bars strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--screen-navy)}
.intranet-region-bars .bar{appearance:none;-webkit-appearance:none;width:100%;height:14px;border:0;border-radius:999px;background:#e6eef1;overflow:hidden}
.intranet-region-bars .bar::-webkit-progress-bar{background:#e6eef1}
.intranet-region-bars .bar::-webkit-progress-value{border-radius:999px;background:#67aa3c}
.intranet-region-bars .bar::-moz-progress-bar{border-radius:999px;background:#67aa3c}
.intranet-region-bars .is-medium .bar::-webkit-progress-value{background:#e5a43d}.intranet-region-bars .is-high .bar::-webkit-progress-value{background:#d95a5a}
.intranet-region-bars .is-medium .bar::-moz-progress-bar{background:#e5a43d}.intranet-region-bars .is-high .bar::-moz-progress-bar{background:#d95a5a}
.intranet-region-bars b{text-align:right;color:var(--screen-navy)}.intranet-region-bars small{color:var(--muted);text-align:right}
.intranet-top-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.intranet-top-products--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.intranet-top-products>div{border-radius:16px;background:#fff;border:1px solid var(--border);padding:20px 24px}
.intranet-top-products h3{color:var(--screen-green);font-size:1.2rem;text-transform:uppercase;letter-spacing:.04em}
.intranet-top-products p{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin:0;padding:13px 0;border-bottom:1px solid var(--border);font-size:clamp(.88rem,1.1vw,1.05rem)}
.intranet-top-products p:last-child{border-bottom:0}
.intranet-top-products p strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--screen-navy)}
.intranet-top-products p span{color:var(--muted);white-space:nowrap}
.intranet-transport-total{display:flex;flex-direction:column;gap:2px;margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--blue-bg)}
.intranet-transport-total strong{color:var(--screen-navy);font-size:1.3rem}
.intranet-transport-total span{color:var(--muted);font-size:.85rem}
.intranet-transport-total b{color:var(--screen-green);font-size:.85rem}
.intranet-no-data{grid-column:1/-1;display:grid;place-items:center;min-height:220px;color:var(--muted);font-size:1.15rem}
.intranet-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 8px;color:var(--muted);font-size:.78rem}
.intranet-footer-status{display:flex;align-items:center;gap:18px}
.intranet-freshness::before{content:'';display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#70ad42}.intranet-freshness.is-stale{color:#a46216;font-weight:700}.intranet-freshness.is-stale::before{background:#e5a43d}
.intranet-dots{display:flex;gap:8px}
.intranet-dots button{width:9px;height:9px;border:0;border-radius:999px;padding:0;background:#bfd0d8;cursor:pointer}
.intranet-dots button.is-active{width:28px;background:var(--screen-blue)}
.intranet-controls{display:flex;align-items:center;gap:6px}
.intranet-control{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.intranet-control:hover{background:var(--blue-bg)}
.intranet-control .icon-play,.intranet-control.is-paused .icon-pause{display:none}
.intranet-control.is-paused .icon-play{display:block}
.intranet-control.is-exit{display:none}
.intranet-page.is-presenting .intranet-control.is-exit{display:inline-grid}
.intranet-page.is-presenting .intranet-control{width:46px;height:46px}
.intranet-page.is-presenting .intranet-footer{flex:none;padding:14px 4px;font-size:.85rem}
.intranet-page.is-presenting .intranet-slide{overflow-y:auto;-webkit-overflow-scrolling:touch}
.intranet-page.is-presenting .intranet-slide.is-active{align-content:safe center}
.intranet-empty{min-height:420px;display:grid;place-content:center;text-align:center}
/* Signage-tv's lopen ver achter. De LG NetCast 6.0 in de kantine draait Chrome 53:
   geen CSS Grid, geen `gap`, geen `clamp()`, geen `min()`. Zonder grid is
   `display:grid` een ongeldige waarde en blijft elke dia op `display:none` staan;
   zonder `gap` plakt alle tekst aan elkaar en zonder `clamp()` verdwijnen padding en
   lettergrootte. Flexbox kent die tv wel, dus de kolommen blijven hier naast elkaar
   staan in plaats van te stapelen — een tv kan immers niet scrollen. De vaste waarden
   zijn gekozen voor een 1920px-scherm dat je van een meter of vijf afleest.
   Flex-eigenschappen op kinderen doen in een grid-container niets, dus alles hier is
   veilig voor moderne browsers. Let op: in dit blok mag geen gap/clamp/min/grid meer
   voorkomen. */
@supports not (display:grid){
  .intranet-slide{padding:46px 56px}
  .intranet-slide.is-active,
  .intranet-stage:not(.is-script-driven) .intranet-slide:first-of-type{display:block}
  .intranet-slide-heading{display:block;margin-bottom:28px}
  .intranet-slide-heading span,.intranet-slide-heading strong{display:block}
  .intranet-slide-heading span{margin-bottom:8px;font-size:1.35rem}
  .intranet-slide-heading strong{font-size:3.4rem}
  .intranet-context{margin-top:24px;font-size:1.05rem}
  .intranet-subtitle{margin:0 0 20px;font-size:1.05rem}
  .intranet-empty{display:block;text-align:center}

  /* Wat een grid met kolommen was, wordt een flexrij met eigen marges. */
  .intranet-kpi-grid,.intranet-split-layout,.intranet-quality-layout,
  .intranet-top-products,.intranet-driver-grid,.intranet-ranking,
  .intranet-route-map-layout{display:flex}
  .intranet-split-layout,.intranet-quality-layout,
  .intranet-route-map-layout{align-items:center}
  .intranet-kpi-grid,.intranet-driver-grid,.intranet-ranking{flex-wrap:wrap}

  /* Kentallen. */
  .intranet-kpi-grid{margin-left:-9px;margin-right:-9px}
  .intranet-kpi-grid>article{display:block;flex:1 1 40%;margin:0 9px 18px;padding:26px 30px}
  .intranet-kpi-grid--four>article{flex:1 1 20%}
  .intranet-kpi-grid article span{display:block;margin-bottom:6px;font-size:1.15rem}
  .intranet-kpi-grid article strong{display:block;font-size:3.6rem}

  /* Trendgrafiek. */
  /* De grafiek schaalt op ratio; hoger betekent hier dus ook breder. */
  .intranet-trend svg{height:480px}
  .intranet-chart-legend{margin-top:6px;margin-bottom:14px}
  .intranet-chart-legend span{margin:0 14px}
  .intranet-comparison-line{font-size:1.35rem}
  .intranet-comparison-line>*{margin:0 10px}
  .intranet-comparison-line strong{font-size:2.4rem}

  /* Samenstelling: taart links, kentallen rechts. */
  .intranet-split-layout>.intranet-composition-fixed{display:block;text-align:center;
    flex:0 0 34%;margin-right:44px}
  .intranet-split-layout>.intranet-kpi-grid{flex:1 1 auto}
  .intranet-pie{max-width:320px}
  .intranet-composition-total{display:block;text-align:center;margin:16px 0 12px}
  .intranet-composition-total strong{display:block;font-size:2.8rem}
  .intranet-composition-total span{display:block;font-size:1.05rem}
  .intranet-composition-legend span{margin:0 12px 8px}
  .intranet-composition-legend span::before{margin-right:9px}
  .intranet-composition-legend strong{margin-right:7px}

  /* Leverkwaliteit: twee kentallen, daarnaast de maanden als liggende balken. */
  .intranet-quality-layout>*{margin-right:16px}
  .intranet-quality-layout>*:last-child{margin-right:0}
  .intranet-quality-kpi,.intranet-quality-trend{display:block;flex:1 1 0;padding:24px 28px}
  .intranet-quality-kpi>span,.intranet-quality-trend>span,
  .intranet-quality-kpi>strong,.intranet-quality-trend>strong,
  .intranet-quality-kpi small,.intranet-quality-trend small,
  .intranet-quality-trend b{display:block}
  .intranet-quality-kpi>strong,.intranet-quality-trend>strong{margin:6px 0;font-size:3.4rem}
  .intranet-mini-bars{display:block;flex:2 1 0;min-height:0;padding:18px 22px}
  .intranet-mini-bars>div{display:block;margin-bottom:8px}
  .intranet-mini-bars>div>*{display:inline-block;vertical-align:middle;margin-right:12px}
  .intranet-mini-bars small{width:46px;text-align:left}
  .intranet-mini-bars span{width:52px;text-align:right}
  .intranet-mini-bars progress{width:60%;height:15px;writing-mode:horizontal-tb;direction:ltr}

  /* Routeplanning: drie chauffeurs per rij, of de kaart met zijbalk. */
  .intranet-driver-grid{margin-left:-8px;margin-right:-8px}
  .intranet-driver-grid article{display:block;flex:1 1 28%;margin:0 8px 16px;padding:18px 22px}
  .intranet-driver-grid strong{display:block;margin-bottom:6px;font-size:1.6rem}
  .intranet-driver-grid span{display:inline-block;margin-right:18px;font-size:1.05rem}
  .intranet-route-map-layout>.intranet-route-map{flex:1 1 auto;margin-right:18px}
  .intranet-route-map-layout>aside{display:block;flex:0 0 260px}
  .intranet-route-days,.intranet-route-legend{display:block}
  .intranet-route-days button{margin-bottom:7px}
  .intranet-route-legend span{margin-bottom:8px}
  .intranet-route-legend i{margin-right:8px}

  /* Ranglijsten, regiokosten en artikelen. */
  .intranet-ranking>div{flex:0 0 46%;margin:0 2%}
  .intranet-ranking>div,.intranet-region-bars>div{display:flex;
    justify-content:space-between;align-items:center;font-size:1.1rem}
  .intranet-ranking>div>*,.intranet-region-bars>div>*{margin-right:18px}
  .intranet-ranking>div>*:last-child,.intranet-region-bars>div>*:last-child{margin-right:0}
  .intranet-ranking strong{flex:1 1 auto}
  .intranet-region-bars{display:block}
  .intranet-region-bars>div{margin-bottom:9px}
  /* Houd deze vier kolommen vast. Met `flex: 1` op de regiobenaming groeit die
     mee met de tekstlengte; op oude WebOS begint iedere voortgangsbalk dan op een
     andere plek. De balk vult uitsluitend de ruimte tussen de vaste kolommen. */
  .intranet-region-bars>div>strong{flex:0 0 430px}
  .intranet-region-bars .bar{flex:1 1 auto}
  .intranet-region-bars>div>b{flex:0 0 110px}
  .intranet-region-bars>div>small{flex:0 0 155px}
  .intranet-highlight{margin-bottom:20px}
  .intranet-highlight>*{margin-right:16px}
  .intranet-highlight strong{font-size:2.2rem}
  .intranet-top-products{margin-left:-9px;margin-right:-9px}
  .intranet-top-products>div{flex:1 1 0;margin:0 9px;padding:18px 22px}
  .intranet-top-products p{font-size:1.02rem}
  .intranet-top-products p strong{margin-right:18px}
  .intranet-transport-total>*{display:block}

  /* Voettekst en bolletjes. */
  .intranet-footer-status>span{margin-left:20px}
  .intranet-dots button{margin-right:8px}
  .intranet-control{display:inline-block;margin-right:6px;line-height:40px;text-align:center}
}
@media(max-width:900px){
  .intranet-kpi-grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intranet-split-layout,.intranet-top-products,.intranet-top-products--three{grid-template-columns:1fr}
  .intranet-pie{max-width:240px}
  .intranet-ranking{grid-template-columns:1fr}
  .intranet-quality-layout{grid-template-columns:1fr}.intranet-region-bars>div{grid-template-columns:1fr 2fr auto}.intranet-region-bars small{display:none}
  .intranet-slide{padding:28px 22px}
  .intranet-route-map-layout{grid-template-columns:1fr}
  .intranet-route-map-layout aside{grid-template-columns:1fr 1fr}
  .intranet-now-board{grid-template-columns:1fr}
  .intranet-now-map{width:min(100%,420px);height:auto;margin-inline:auto}
}

@media(max-width:640px){
  .intranet-page{max-width:none}
  .intranet-toolbar{flex-wrap:wrap;align-items:flex-start;gap:12px}
  .intranet-toolbar-actions{width:100%;flex-wrap:wrap}
  .intranet-toolbar-actions .button{flex:1 1 auto;text-align:center}
  .intranet-toolbar [data-intranet-pause]{display:none}
  .intranet-stage{min-height:min(620px,calc(100dvh - 235px));border-radius:18px}
  .intranet-slide{padding:22px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* Kort passende dia's staan gecentreerd; 'safe' houdt de bovenkant bereikbaar zodra
     een dia toch langer is dan het scherm. */
  .intranet-slide.is-active{align-content:safe center}
  .intranet-slide-heading{margin-bottom:18px}
  .intranet-slide-heading strong{font-size:clamp(1.6rem,7vw,2.4rem)}
  .intranet-route-map-layout{min-height:0}
  .intranet-route-map{min-height:340px}
  .intranet-route-map-layout aside{grid-template-columns:1fr}
  .intranet-pie{max-width:170px}
  .intranet-composition-fixed{gap:10px}
  .intranet-composition-total strong{font-size:2rem}
  .intranet-composition-total span{font-size:.95rem}
  .intranet-composition-legend{gap:6px 16px;font-size:.85rem}
  .intranet-split-layout{gap:18px}
  .intranet-split-layout .intranet-kpi-grid article{padding:12px 14px}
  .intranet-split-layout .intranet-kpi-grid article span{font-size:.78rem}
  .intranet-split-layout .intranet-kpi-grid article strong{font-size:clamp(1.4rem,6.5vw,2rem)}
  .intranet-kpi-grid{gap:12px}
  .intranet-kpi-grid article{padding:16px 18px;gap:4px}
  .intranet-kpi-grid article strong{font-size:clamp(2rem,11vw,3.2rem)}
  .intranet-context{margin-top:12px;font-size:.85rem}
  .intranet-trend{min-height:0}
  .intranet-trend svg{height:auto}
  .intranet-chart-label{font-size:26px}
  .intranet-chart-line{stroke-width:8}
  .intranet-chart-line.is-previous{stroke-width:5;stroke-dasharray:14 12}
  .intranet-chart-legend{gap:16px;margin:6px 0}
  .intranet-comparison-line{flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
  .intranet-subtitle{margin:-10px 0 18px}
  .intranet-quality-kpi,.intranet-quality-trend{padding:18px}
  .intranet-mini-bars{min-height:0;gap:6px;padding:16px 10px 8px}
  .intranet-mini-bars>div{grid-template-rows:20px 120px 18px;gap:5px;font-size:.8rem}
  .intranet-mini-bars small{font-size:.65rem}
  .intranet-ranking>div{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 2px}
  .intranet-ranking--regions>div{grid-template-columns:minmax(0,1fr) auto}
  .intranet-ranking--regions>div span{font-size:.8rem}
  .intranet-ranking b{grid-column:2}
  .intranet-region-bars>div{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:10px}
  .intranet-region-bars .bar{grid-column:1/-1;order:2}
  .intranet-highlight{flex-wrap:wrap;gap:4px 14px;padding:14px 16px}
  .intranet-driver-grid{grid-template-columns:1fr}
  .intranet-driver-grid article{padding:14px 16px}
  .intranet-top-products{gap:12px}
  .intranet-top-products>div{padding:12px 14px}
  .intranet-top-products h3{font-size:.95rem}
  .intranet-top-products p{padding:8px 0;font-size:.92rem;gap:12px}
  .intranet-transport-total{margin-bottom:8px;padding:9px 12px}
  .intranet-transport-total strong{font-size:1.1rem}
  .intranet-transport-total span,.intranet-transport-total b{font-size:.78rem}
  .intranet-no-data{min-height:140px;font-size:1rem}
  .intranet-footer{flex-wrap:wrap;justify-content:center;gap:10px;padding:12px 4px}
  .intranet-footer-status{order:3;width:100%;justify-content:center;flex-wrap:wrap;gap:8px;text-align:center}
  .intranet-dots button{width:11px;height:11px}
  .intranet-dots button.is-active{width:30px}
  .intranet-control{width:46px;height:46px}
  .intranet-page.is-presenting{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .intranet-page.is-presenting .intranet-footer{padding:10px 2px}
}
/* Tablet staand: breed genoeg voor de meerkolomsdia's, te smal voor de volle desktopmaat. */
@media(min-width:641px) and (max-width:900px){
  .intranet-top-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intranet-top-products--three{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .intranet-top-products--three>div{padding:16px 14px}
  .intranet-top-products--three p{flex-direction:column;align-items:flex-start;gap:2px}
  .intranet-split-layout{grid-template-columns:minmax(220px,.8fr) minmax(300px,1.2fr);gap:28px}
  .intranet-ranking{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Liggend en breed genoeg (telefoon of tablet in landschap): de brede indeling van het
   grote scherm past hier beter dan de smalle kolomweergave. */
@media(max-height:640px) and (orientation:landscape) and (min-width:700px){
  .intranet-split-layout{grid-template-columns:minmax(200px,.7fr) minmax(320px,1.3fr);gap:28px}
  .intranet-pie{max-width:min(220px,34vh)}
  .intranet-composition-legend{flex-direction:column;align-items:flex-start;gap:4px}
  .intranet-quality-layout{grid-template-columns:minmax(160px,.7fr) minmax(200px,.9fr) minmax(260px,1.5fr)}
  .intranet-quality-kpi,.intranet-quality-trend{padding:14px 18px}
  .intranet-quality-kpi>strong,.intranet-quality-trend>strong{font-size:clamp(2rem,9vh,3.4rem)}
  .intranet-mini-bars{min-height:0;padding:12px 12px 6px}
  .intranet-mini-bars>div{grid-template-rows:18px 1fr 16px}
  .intranet-ranking{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intranet-ranking>div{grid-template-columns:minmax(0,1fr) auto auto;padding:7px 2px}
  .intranet-ranking--regions>div{grid-template-columns:minmax(0,1fr) auto auto 52px}
  .intranet-ranking b{grid-column:auto}
  .intranet-region-bars>div{grid-template-columns:minmax(140px,1fr) minmax(150px,2fr) 90px;padding:6px 10px}
  .intranet-region-bars .bar{grid-column:auto;order:0}
  .intranet-top-products,.intranet-top-products--three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .intranet-top-products:not(.intranet-top-products--three){grid-template-columns:repeat(2,minmax(0,1fr))}
  .intranet-driver-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .intranet-kpi-grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}
  .intranet-trend svg{height:min(52vh,300px)}
  .intranet-now-map{height:min(70vh,420px)}
  .intranet-slide.is-active{align-content:safe center}
}
/* Telefoon in liggende stand: koppen en marges terug zodat de cijfers in beeld blijven. */
@media(max-height:520px) and (orientation:landscape){
  .intranet-slide{padding:18px 22px}
  .intranet-slide-heading{margin-bottom:12px}
  .intranet-slide-heading strong{font-size:clamp(1.3rem,4vw,2rem)}
  .intranet-kpi-grid article{padding:12px 16px}
  .intranet-kpi-grid article strong{font-size:clamp(1.6rem,7vh,3rem)}
  .intranet-context{margin-top:12px}
  .intranet-mini-bars>div{grid-template-rows:18px 90px 16px}
  .intranet-page.is-presenting .intranet-footer{padding:6px 2px}
  .intranet-page.is-presenting .intranet-control{width:38px;height:38px}
}

.equipment-map{margin:12px 0 20px}.equipment-map summary{cursor:pointer}.equipment-map iframe{display:block;width:100%;height:260px;border:0;border-radius:12px;margin:12px 0}.equipment-location{margin-bottom:20px}

.equipment-table__name small{display:block;color:var(--muted);font-size:.76rem}

@media (max-width:640px){
  .location-delivery-card .delivery-card-head{grid-template-columns:minmax(0,1fr);align-items:stretch}
  .location-delivery-card .delivery-card-head .button{width:100%;min-height:48px}
  .delivery-card-actions{display:grid;grid-template-columns:minmax(0,1fr)}
  /* Tabellen op de telefoon: elke rij een blok, geen zijwaarts scrollen. */
  .data-table--stack{min-width:0}
  .data-table--stack thead{display:none}
  .data-table--stack,.data-table--stack tbody,.data-table--stack tr,.data-table--stack td{display:block;width:100%}
  .data-table--stack tr{padding:10px 0;border-bottom:1px solid var(--border)}
  .data-table--stack tr:last-child{border-bottom:0}
  .data-table--stack td,.data-table--stack tr:last-child td{padding:2px 0;border:0}
  .data-table--stack tbody tr:hover td{background:none}
  .data-table--stack td[data-label]{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px;font-size:.84rem}
  .data-table--stack td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:.74rem;font-weight:700}
  .data-table--stack .equipment-table__name{font-size:.95rem;margin-bottom:4px}
  .location-delivery-card .delivery-lines-toggle>summary{min-height:48px;align-items:center}
  .order-flow-card .article-search-input{min-height:52px;font-size:16px}
  .order-flow-card .qty-stepper__btn{width:48px;min-height:48px}
  .order-flow-card .qty-stepper__input{min-height:48px;font-size:16px}
  .order-flow-card .unit-badge{min-height:50px} /* even hoog als de teller, zodat Aantal en Eenheid op één lijn staan */
  .order-flow-submit{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));z-index:2;width:100%;min-height:52px;box-shadow:0 4px 16px rgba(9,56,85,.18)}
  .order-list-line .qty-stepper__btn{width:42px;min-height:44px}
  .order-list-line .qty-stepper__input{width:46px;min-height:44px;font-size:16px}
  .order-list-line__remove{width:44px;height:44px}
  .order-list-actions{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));z-index:2;padding:8px 0;background:var(--surface);box-shadow:0 -5px 14px rgba(9,56,85,.06)}
  .order-list-actions .button{min-height:48px}
  .order-current-lines .delivery-line{grid-template-columns:minmax(0,1fr)}
  .order-current-lines .col-qty,.order-current-lines .col-unit{grid-column:1;justify-self:start}
  .order-current-lines .line-qty-form{flex-wrap:wrap;width:100%}
  .order-current-lines .line-qty-form .button{min-height:44px}
  .order-actions .order-add-card .article-search-input{min-height:52px;font-size:16px}
  .order-actions .order-add-card .button,.order-actions .js-confirm-cancel .button{min-height:48px;width:100%}
  .order-current-lines.is-in-transit .col-qty::before{content:"Nog te leveren"}
  /* Alleen bekijken: artikel links, aantal en eenheid rechts op dezelfde regel. */
  .order-current-lines--readonly .delivery-line{grid-template-columns:minmax(0,1fr) auto auto;align-items:center}
  .order-current-lines--readonly .col-qty,.order-current-lines--readonly .col-unit{grid-column:auto;justify-self:end}
  .order-current-lines--readonly .col-qty::before,.order-current-lines--readonly .col-unit::before{content:none}
}

/* Kennis en aanvragen volgen dezelfde Fleet-afstanden en kleurvariabelen. */
.knowledge-editor>label,.knowledge-editor>fieldset{display:block;margin-bottom:1.25rem}
.knowledge-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.5rem 0}
.knowledge-toolbar button{padding:.5rem .75rem;border:1px solid var(--border);border-radius:.4rem;background:var(--surface);color:inherit;cursor:pointer}
.knowledge-body-input{min-height:20rem;padding:1.25rem;border:1px solid var(--border);border-radius:.5rem;line-height:1.65}
.knowledge-body img,.knowledge-body-input img{max-width:100%;height:auto;border-radius:.5rem}
.knowledge-product-picker{max-height:16rem;overflow:auto;display:grid;gap:.5rem}
.knowledge-topics{margin:1.5rem 0}.pagination{display:flex;gap:1rem;margin:1.5rem 0}
@media(max-width:640px){.line-qty-form{display:flex;flex-wrap:wrap}.line-qty-form input{max-width:5rem}.knowledge-body-input{min-height:15rem;padding:.75rem}}

/* Bestellingen: filterpaneel, rijbalkjes en vergelijking (tablet en telefoon zonder zijwaarts scrollen). */
.analytics-filter-summary{display:none}
.analytics-row-bar{width:100%;height:6px;margin-top:6px}
.analytics-cell-note{display:block;color:var(--muted);font-size:.72rem;font-weight:600;white-space:nowrap}
body:is(.is-customer-admin,.is-system) .stat-tile .stat-value,.stat-series-value strong{white-space:nowrap}
.stat-delta{display:block;margin-top:2px;color:var(--muted);font-size:.72rem;font-style:normal;font-weight:700}
.stat-delta.is-up::before{content:'▲ '}
.stat-delta.is-down::before{content:'▼ '}
body:is(.is-customer-admin,.is-system) .analytics-scope-filter{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
@media(max-width:1199px){
  body:is(.is-customer-admin,.is-system) .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1100px){
  body:is(.is-customer-admin,.is-system) .analytics-scope-filter{grid-template-columns:repeat(2,minmax(0,1fr))}
  body:is(.is-customer-admin,.is-system) .analytics-scope-main{grid-row:span 2}
  body:is(.is-customer-admin,.is-system) .analytics-trend-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
}
@media(max-width:760px){
  body:is(.is-customer-admin,.is-system) .analytics-scope-filter{grid-template-columns:1fr}
  body:is(.is-customer-admin,.is-system) .analytics-scope-main{grid-row:auto}
  body:is(.is-customer-admin,.is-system) .analytics-trend-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .analytics-filter{padding:0!important}
  .analytics-filter-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 16px;cursor:pointer;list-style:none}
  .analytics-filter-summary::-webkit-details-marker{display:none}
  .analytics-filter-summary>span:first-child{display:grid;gap:2px;min-width:0}
  .analytics-filter-summary small{color:var(--muted);font-size:.78rem;font-weight:600;overflow-wrap:anywhere}
  .analytics-filter-summary-action{flex:none;color:var(--blue-dark);font-size:.82rem;font-weight:800}
  .analytics-filter[open] .analytics-filter-summary-action{visibility:hidden}
  .analytics-filter[open]>form{padding:0 16px 16px}
  /* De filterregel zegt al wat u bekijkt. */
  .analytics-active-scope{display:none}
  body:is(.is-customer-admin,.is-system) .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body:is(.is-customer-admin,.is-system) .stat-grid:has(.analytics-comparison-tile){grid-template-columns:1fr}
  body:is(.is-customer-admin,.is-system) .stat-tile{min-height:0;padding:14px 14px 12px}
  body:is(.is-customer-admin,.is-system) .stat-tile .stat-value{font-size:1.35rem}
  body:is(.is-customer-admin,.is-system) .analytics-trend-chart{min-height:0;padding:0}
  /* Tabelrij als compact blok: naam over de volle breedte, cijfers in twee kolommen. */
  .analytics-location-table tr,.analytics-item-table tr,.analytics-article-table tr{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
  .analytics-location-table td,.analytics-item-table td,.analytics-article-table td{width:auto!important;text-align:left!important}
  .analytics-location-table td:first-child,.analytics-item-table td:first-child,.analytics-article-table td:first-child{grid-column:1/-1}
  .analytics-location-table td:first-child .muted,.analytics-item-table td:first-child .muted,.analytics-article-table td:first-child .muted{display:block;font-size:.76rem}
  .analytics-location-table td[data-label],.analytics-item-table td[data-label],.analytics-article-table td[data-label]{display:grid;grid-template-columns:1fr;gap:0}
}

/* Bestellingen: blok Vaste leveringen (geleverd, binnen de filters). */
.analytics-fixed-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 18px;margin:14px 0 6px}
.analytics-fixed-summary>div{min-width:0;padding:10px 12px;border-radius:var(--radius-sm);background:#f5f8fa}
.analytics-fixed-summary dt{color:var(--muted);font-size:.72rem;font-weight:700}
.analytics-fixed-summary dd{margin:2px 0 0;font-size:1.15rem;font-weight:700;color:var(--navy);white-space:nowrap}
.analytics-fixed-items-title{margin:18px 0 6px;font-size:.92rem}
@media(max-width:760px){.analytics-fixed-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.analytics-fixed-list{order:3}

/* Rondleiding (rondleiding.js): het onderdeel licht op, de uitleg staat ernaast; op de telefoon onderaan. */
.tour-layer{position:fixed;inset:0;z-index:2000}
.tour-blocker{position:fixed;inset:0}
.tour-layer--plain .tour-blocker{background:rgba(9,56,85,.5)}
.tour-ring{position:fixed;border-radius:12px;box-shadow:0 0 0 3px var(--accent),0 0 0 9999px rgba(9,56,85,.5);pointer-events:none;transition:top .2s ease,left .2s ease,width .2s ease,height .2s ease}
.tour{position:fixed;width:min(400px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;padding:18px 20px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);color:var(--ink);box-shadow:0 18px 48px rgba(9,56,85,.32)}
.tour-layer--plain .tour{top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px))}
.tour__roles{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tour__role{min-height:32px;padding:0 12px;border:1px solid var(--border-strong);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.tour__role[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
.tour__count{margin:0 0 4px;color:var(--muted);font-size:.8rem;font-weight:700}
.tour__title{margin:0 0 6px;font-size:1.15rem}
.tour__text{margin:0 0 8px;line-height:1.5}
.tour__where{display:inline-block;margin:0 0 4px;padding:3px 10px;border-radius:999px;background:var(--blue-bg);font-size:.82rem;font-weight:700}
.tour__again{margin:10px 0 0;color:var(--muted);font-size:.85rem}
.tour__actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:14px}
.tour__actions .button{min-height:44px;min-width:96px}
.tour__skip{margin-right:auto;min-height:44px;padding:0 4px;border:0;background:none;color:var(--muted);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
@media (max-width:599.98px){.tour,.tour-layer--plain .tour{top:auto!important;left:0!important;right:0;bottom:0;width:100%;max-height:55vh;transform:none;border-radius:var(--radius) var(--radius) 0 0;border-bottom:0}}
@media (prefers-reduced-motion:reduce){.tour-ring{transition:none}}

/* Openbare Track & Trace. */
body.is-track{
  background:
    radial-gradient(880px 380px at 50% -120px, rgba(37,129,196,.18), transparent 62%),
    radial-gradient(640px 320px at 100% 0, rgba(81,175,63,.12), transparent 58%),
    var(--bg);
}
body.is-track .page,body.is-system.is-track .page,body.is-customer-admin.is-track .page{max-width:680px}
.track-page{max-width:560px;margin:5vh auto 0}
.track-card{position:relative;overflow:hidden;padding:32px 28px 26px}
.track-card::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--navy),var(--blue) 58%,var(--green))}
.track-card h1{margin:0 0 8px}
.track-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;color:var(--muted);font-size:.82rem;font-weight:600}
.track-status{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:var(--blue-bg);color:var(--navy);font-size:.75rem;font-weight:600;letter-spacing:.02em}
.track-status--prepared{background:#e7eef3}
.track-status--delivered,.track-status--unfinished{background:var(--green-bg);color:var(--green-dark)}
.track-status--unfinished,.track-status--warehouse,.track-status--missed{background:var(--yellow-bg);color:#6d5410}
.track-headline{font-size:clamp(1.45rem,4.4vw,1.85rem);line-height:1.25;letter-spacing:-.025em}
.track-lead,.track-date,.track-detail,.track-refresh{margin:0 0 16px;color:var(--muted);line-height:1.45}
.track-detail{margin-bottom:22px}
.track-card form{display:grid;gap:14px;margin-top:8px}
.track-steps{list-style:none;margin:8px 0 0;padding:0;display:grid}
.track-steps li{display:grid;grid-template-columns:28px 1fr;column-gap:12px;min-height:48px}
.track-mark{position:relative;width:16px;height:16px;margin-top:3px;border:2px solid var(--border-strong);border-radius:50%;background:#fff}
.track-steps li:not(:last-child) .track-mark::after{content:'';position:absolute;left:5px;top:16px;width:2px;height:30px;background:var(--border)}
.track-steps .is-done .track-mark{background:var(--green);border-color:var(--green)}
.track-steps .is-done .track-mark::after{background:var(--green)}
.track-steps .is-current .track-mark{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 5px var(--blue-bg)}
.track-steps .is-current.track-step--missed .track-mark{background:#FF9457;border-color:#FF9457;box-shadow:0 0 0 5px #FFF4EE}
.track-steps--done .is-current .track-mark{background:var(--green);border-color:var(--green);box-shadow:0 0 0 5px var(--green-bg)}
.track-label{padding-top:1px;font-weight:600}
.track-steps .is-done .track-label,.track-steps .is-current .track-label{font-weight:600;color:var(--navy)}
.track-steps .is-upcoming .track-label{color:var(--muted)}
.track-place{display:grid;grid-template-columns:168px 1fr;margin-top:18px;border:1px solid rgba(9,56,85,.1);border-radius:18px;overflow:hidden;background:#f8fbfe}
.track-map{position:relative;min-height:148px;background:#e8f3fa}
.track-map svg{display:block;width:100%;height:100%}
.track-map--live .track-route{stroke:#093855}
.track-pin{position:absolute;left:58%;top:46%;width:18px;height:18px;border:3px solid #fff;border-radius:50% 50% 50% 0;background:var(--navy);transform:translate(-50%,-50%) rotate(-45deg);box-shadow:0 8px 16px rgba(9,56,85,.28)}
.track-pin::after{content:'';position:absolute;left:3px;top:3px;width:6px;height:6px;border-radius:50%;background:#fff}
.track-place-copy{display:grid;align-content:center;gap:2px;min-width:0;padding:16px 16px 16px 14px}
.track-place-copy .eyebrow{margin:0 0 4px}
.track-place-copy strong{color:var(--navy);font-weight:600;line-height:1.3}
.track-place-copy span{color:var(--ink);line-height:1.35;overflow-wrap:anywhere}
.track-refresh{margin:16px 0 0;font-size:.82rem}
@media (max-width:560px){
  .track-card{padding:26px 18px 20px}
  .track-place{grid-template-columns:1fr}
  .track-map{height:132px}
}

/* Ontwerpsysteem (docs/ontwerp.md), zelfde basis als de app: groot en rustig.
   Knoppen en velden minstens 44px, op een touchscherm 48px; tekst in velden 16px+ zodat iOS niet inzoomt. */
.button,.link-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:.95rem}
.button.small{min-height:36px;font-size:.85rem}
input:not([type=checkbox]):not([type=radio]),select{min-height:44px;font-size:1rem}
textarea{font-size:1rem}
@media (pointer:coarse){
  .button,.link-button{min-height:48px}
  input:not([type=checkbox]):not([type=radio]),select{min-height:48px}
}
/* Keuzeknoppen in plaats van een uitklaplijst: radio's in pillen, gekozen = navy met vinkje. */
.kbl-keuze{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.kbl-keuze>label{position:relative;margin:0}
.kbl-keuze>label>input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;pointer-events:none}
.kbl-keuze>label>span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1.5px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--ink);font-weight:600;cursor:pointer}
.kbl-keuze>label>span:hover{background:var(--blue-bg)}
.kbl-keuze>label>input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.kbl-keuze>label>input:checked+span::before{content:"✓"}
.kbl-keuze>label>input:focus-visible+span{outline:2px solid #9cc3dd;outline-offset:2px}

/* ── Welkomstkop voor klanten (Joris 2026-11-05: het portaal mag meer uitstraling hebben) ──
   Navy-verloop uit de huisstijl (#1F5A84 midden naar #093855), beeldmerk recht en transparant rechts,
   groet in Gilroy wit en lichtblauw, titel in White Wood, knoppen wit met navy tekst. */
.portal-hero{position:relative;overflow:hidden;isolation:isolate;margin:0 0 28px;padding:34px 36px 32px;border:0;border-radius:28px;color:#fff;
  background:radial-gradient(120% 140% at 70% 40%,#1F5A84 0%,#0d4467 45%,#093855 100%);box-shadow:0 24px 48px rgba(9,56,85,.22)}
/* Brandbook: beeldmerk groot rechts, 80-82% transparant, nooit draaien of effecten. */
.portal-hero__merk{position:absolute;right:-3%;top:50%;transform:translateY(-50%);height:130%;width:auto;opacity:.19;z-index:-1;pointer-events:none}
.portal-hero__tekst{position:relative;max-width:640px}
.portal-hero__groet{margin:0 0 8px;font-size:1.1rem;font-weight:700;color:#E9F2F9}
/* Geen geel als tekstkleur (brandbook); op donker wit en lichtblauw. */
.portal-hero__dagdeel{color:#fff}
.portal-hero h1{margin:0 0 8px;color:#fff;font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.08;letter-spacing:-.01em}
.portal-hero__sub,.portal-hero .location-subtitle{margin:0;color:rgba(255,255,255,.78);font-size:1.05rem}
.portal-hero__acties{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.portal-hero .text-link{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.portal-hero .text-link:hover{text-decoration-color:#fff}
.portal-hero .location-head__links{margin-top:14px}
.portal-hero .location-head__actions{margin-top:22px;max-width:380px}
/* Knoppen op het navy-verloop wit met navy tekst; geel blijft alleen accent (koppen, aantallen). */
.portal-hero .button,.portal-hero .button--lg{background:#fff;color:var(--navy);border-color:#fff;font-weight:600;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.portal-hero .button:hover,.portal-hero .button--lg:hover{background:#e8f1f8;color:var(--navy)}
.location-head.portal-hero{padding:34px 36px 32px;border-radius:28px;background:radial-gradient(120% 140% at 70% 40%,#1F5A84 0%,#0d4467 45%,#093855 100%)}
.location-head.portal-hero h1{margin:0 0 6px}
@media (max-width:640px){
  .portal-hero,.location-head.portal-hero{padding:24px 22px 22px;border-radius:22px;margin-bottom:18px}
  .portal-hero__merk{height:120%;right:-22%;opacity:.13}
  .portal-hero .location-head__actions{max-width:none}
}
@media print{.portal-hero{background:none;color:var(--ink);box-shadow:none}.portal-hero h1{color:var(--ink)}.portal-hero__merk{display:none}}

/* Locatiekaarten: icoon, duidelijke "Openen" en een rustige beweging bij aanwijzen. */
.locations-grid .location-link{position:relative;gap:8px;padding:22px 22px 18px;border:1px solid var(--border);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.locations-grid .location-link:hover{transform:translateY(-3px);border-color:rgba(81,175,63,.45);box-shadow:var(--shadow-pop)}
.locations-grid .location-link strong{font-size:1.2rem;line-height:1.25}
.location-link__icoon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#DCEEDD,#9EC6A1);color:var(--green-dark);margin-bottom:4px}
.location-link__pijl{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:4px;color:var(--blue-dark);font-weight:600;font-size:.95rem}
.locations-page-head:has(> div[hidden]:only-child){display:none}
.portal-hero__cijfer{display:inline-flex;align-items:baseline;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.88);backdrop-filter:blur(4px)}
.portal-hero__cijfer strong{font-size:1.35rem;color:#fff;font-variant-numeric:tabular-nums}

.portal-hero__cijfer.is-aandacht{background:#FFF4EE;border-color:#FF9457;color:var(--navy)}
.portal-hero__cijfer.is-aandacht strong{color:var(--navy)}
/* Vaste levering: de volgende datum is het belangrijkste, dus groot. */
.delivery-next strong{font-size:1.45rem;letter-spacing:-.01em}

/* Compacte welkomstkop (bestellijst, bestellingen) en een rijkere bestellijst. */
.portal-hero--compact{padding:26px 32px 24px;margin-bottom:18px}
.portal-hero--compact h1{font-size:clamp(1.7rem,3.4vw,2.3rem)}
.portal-hero--compact .portal-hero__merk{height:190%}
body .analytics-page-head.portal-hero,body:is(.is-customer-admin,.is-system) .analytics-page-head.portal-hero{display:block;max-width:none;margin:0 0 20px;padding:26px 32px 24px;background:#2581C4}
body:is(.is-customer-admin,.is-system) .analytics-page-head.portal-hero::before{content:none}
body:is(.is-customer-admin,.is-system) .analytics-page-head.portal-hero h1{margin:0 0 6px;color:#fff}
@media (max-width:640px){body:is(.is-customer-admin,.is-system) .analytics-page-head.portal-hero{padding:20px 20px 18px}}
/* Navy-verloop alleen voor welkom; andere koppen zijn een blauw accentvlak zonder beeldmerk. */
.portal-hero--compact{background:#2581C4;box-shadow:0 16px 32px rgba(37,129,196,.22)}
.portal-hero--compact .portal-hero__merk{display:none}
.portal-hero--compact .portal-hero__sub{color:#E9F2F9}
.order-list-page .location-back-link{display:inline-block;margin-bottom:12px}
.order-list-card{padding:22px 24px;border-radius:22px}
.order-list-lines{gap:10px;border-top:0}
.order-list-line{padding:12px 14px;border:1px solid var(--border);border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s}
.order-list-line:hover{border-color:#cfe3f2;box-shadow:0 6px 16px rgba(9,56,85,.06)}
.order-list-line__item strong{font-size:1.02rem}
.order-list-line__item small{font-size:.82rem}
.order-list-actions{margin-top:4px}
.order-list-actions .button{min-height:50px;font-size:1rem}
.order-list-actions__bestel{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--navy);border-color:var(--navy)}
.order-list-actions__bestel:hover{background:#0d4a70}
.order-list-actions__aantal{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:#fff;color:var(--navy);font-size:.85rem;font-weight:700}
.order-list-leeg{display:flex;align-items:center;gap:16px;padding:18px;margin:0 0 4px;border-radius:18px;background:linear-gradient(135deg,#DCEEDD,#eef7ef)}
.order-list-leeg__icoon{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;background:#fff;color:var(--green-dark);box-shadow:0 6px 16px rgba(9,56,85,.08)}
.order-list-leeg__icoon svg{width:30px;height:30px}
.order-list-leeg .order-list-lead{margin:0;font-size:1rem;color:var(--ink)}
.order-list-add{gap:12px;margin-top:22px;padding-top:18px}
.order-list-add h2{font-size:1.15rem}
.order-list-suggestions__title{font-family:Gilroy,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--green-dark);font-size:.82rem;font-weight:700}
.order-list-suggestions{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.order-list-suggestion{grid-template-columns:minmax(0,1fr) auto;background:linear-gradient(135deg,#f6fbf6,#fff)}
.order-list-suggestion__knop{min-height:44px;white-space:nowrap}
.order-list-suggestion__knop span{font-weight:700;color:var(--green-dark)}
.order-list-add__form .article-search-input{min-height:50px;font-size:1rem}
.order-list-add__row .button{min-height:48px}
@media (max-width:640px){
  .portal-hero--compact{padding:20px 20px 18px}
  .order-list-card{padding:16px;border-radius:18px}
  .order-list-line:not(.order-list-suggestion){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"item weg" "aantal aantal"}
  .order-list-line:not(.order-list-suggestion) .order-list-line__item{grid-area:item}
  .order-list-line:not(.order-list-suggestion) .order-list-line__remove{grid-area:weg}
  .order-list-line:not(.order-list-suggestion) .qty-stepper{grid-area:aantal}
  .order-list-actions{border-radius:18px;padding:8px}
}

/* Brandbook: grote titels in White Wood, hoofdletters. Een titel met tekens die White Wood mist (é ë ï ö ü – · €) blijft Gilroy-Bold. */
.portal-hero h1.is-whitewood{font-family:Whitewood,Gilroy,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1.02}

/* ── Cleanipedia (docs/ontwerp.md, portaal): kennisbank met grote zoekbalk in de welkomstkop,
   onderwerpen als tegels, filters als keuzechips en artikelen met stappen en KBL-producten. ── */
.kb{display:block}
.kb-hero{padding-bottom:30px}
.kb-hero__tekst{max-width:760px}
.kb-hero__boven{display:flex;align-items:center;gap:10px}
.kb-hero__boven img{width:28px;height:28px;filter:brightness(0) invert(1)}
.kb-zoek{display:flex;gap:10px;margin-top:22px;max-width:680px}
.kb-zoek__veld{position:relative;flex:1;margin:0;display:block}
.kb-zoek__veld .kb-icoon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.kb-zoek__veld input{width:100%;min-height:56px;padding:0 48px 0 50px;border:0;border-radius:16px;background:#fff;color:var(--ink);font-size:1.08rem;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.kb-zoek__veld input:focus{outline:3px solid #9cc3dd;outline-offset:2px}
.kb-zoek__toets{position:absolute;right:14px;top:50%;transform:translateY(-50%);min-width:24px;padding:2px 7px;border:1px solid var(--border-strong);border-radius:6px;background:var(--bg);color:var(--muted);font:600 .8rem/1.3 Gilroy,sans-serif;text-align:center}
.kb-zoek .button{min-height:56px;padding:0 24px;border-radius:16px;font-size:1.02rem}
.kb-hero__vaak{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0;color:#E9F2F9;font-size:.95rem}
.kb-hero__vaak a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.1);color:#fff;text-decoration:none;font-weight:600}
.kb-hero__vaak a:hover{background:rgba(255,255,255,.2)}
.kb-hero__beheer{margin:14px 0 0}
.kb-icoon{flex:none}
.kb-blok{margin:0 0 30px}
.kb-blok__titel{margin:0 0 14px;font-size:1.3rem;font-weight:600;color:var(--navy)}
/* Onderwerpen: tegels met icoon, uitleg en aantal artikelen. */
.kb-onderwerpen{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.kb-onderwerp{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:88px;padding:16px 18px;border:1px solid var(--border);border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:var(--shadow-card);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.kb-onderwerp:hover{transform:translateY(-2px);border-color:#cfe3f2;box-shadow:var(--shadow-pop)}
.kb-onderwerp__icoon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--blue-bg);color:var(--blue-dark)}
.kb-onderwerp:nth-child(4n+2) .kb-onderwerp__icoon{background:var(--green-bg);color:var(--green-dark)}
.kb-onderwerp:nth-child(4n+3) .kb-onderwerp__icoon{background:#FFF4EE;color:#b4572a}
.kb-onderwerp:nth-child(4n+4) .kb-onderwerp__icoon{background:var(--yellow-bg);color:var(--warning)}
.kb-onderwerp__tekst{display:grid;gap:3px;min-width:0}
.kb-onderwerp__tekst strong{font-size:1.06rem;font-weight:600;line-height:1.25}
.kb-onderwerp__tekst small{color:var(--muted);font-size:.88rem;line-height:1.35}
.kb-onderwerp__aantal{display:grid;place-items:center;min-width:34px;height:30px;padding:0 9px;border-radius:999px;background:var(--bg);color:var(--navy);font-weight:600;font-size:.9rem;font-variant-numeric:tabular-nums}
/* Soort: vier grote keuzekaarten. */
.kb-soorten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kb-soort{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--border);border-top:4px solid var(--blue);border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:var(--shadow-card);transition:transform .16s ease,box-shadow .16s ease}
.kb-soort:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.kb-soort--vlek{border-top-color:var(--accent)}
.kb-soort--middel{border-top-color:var(--green)}
.kb-soort--kennis{border-top-color:var(--yellow)}
.kb-soort__icoon{color:var(--navy);margin-bottom:4px}
.kb-soort strong{font-size:1.08rem;font-weight:600}
.kb-soort small{color:var(--muted);font-size:.9rem;line-height:1.4}
.kb-soort__aantal{margin-top:auto;padding-top:6px;color:var(--blue-dark);font-weight:600;font-size:.9rem}
.kb-taken{display:flex;flex-wrap:wrap;gap:8px}
.kb-taken a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:1.5px solid var(--border-strong);border-radius:999px;background:#fff;color:var(--ink);font-weight:600;text-decoration:none}
.kb-taken a:hover{background:var(--blue-bg)}
.kb-alles{margin:4px 0 30px;text-align:center}
/* Artikelkaarten */
.kb-kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.kb-kaart{min-width:0}
.kb-kaart__link{display:flex;flex-direction:column;gap:8px;height:100%;padding:18px 18px 14px;border:1px solid var(--border);border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:var(--shadow-card);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.kb-kaart__link:hover{transform:translateY(-2px);border-color:#cfe3f2;box-shadow:var(--shadow-pop)}
.kb-kaart__link:focus-visible{outline:3px solid #9cc3dd;outline-offset:2px}
.kb-kaart__soort{display:inline-flex;align-items:center;gap:6px;color:var(--blue-dark);font-size:.82rem;font-weight:600}
.kb-kaart--vlek .kb-kaart__soort{color:#b4572a}
.kb-kaart--middel .kb-kaart__soort{color:var(--green-dark)}
.kb-kaart--kennis .kb-kaart__soort{color:var(--warning)}
.kb-kaart h3{margin:0;font-size:1.1rem;font-weight:600;line-height:1.3;color:var(--navy)}
.kb-kaart p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kb-kaart__voet{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;border-top:1px solid var(--border);color:var(--muted);font-size:.84rem}
.kb-kaart__voet .kb-icoon{color:var(--blue-dark)}
/* Zoeken: filters links (pc) of als rijen chips (telefoon), resultaten rechts. */
.kb-zoeken{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:start;gap:24px}
.kb-filters{position:sticky;top:calc(var(--topbar-height) + 16px);display:grid;gap:18px;padding:18px;border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:var(--shadow-card)}
.kb-zoeken>*,.kb-filters,.kb-filter{min-width:0}
.kb-filter h2{margin:0 0 8px;font-size:.95rem;font-weight:600;color:var(--muted)}
.kb-chips{display:flex;flex-wrap:wrap;gap:6px}
.kb-chips--lijst{display:grid;gap:4px}
.kb-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px solid var(--border-strong);border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none}
.kb-chips--lijst .kb-chip{border-color:transparent;border-radius:12px;padding:0 10px}
.kb-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-chip em{margin-left:auto;font-style:normal;color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.kb-chip:hover{background:var(--blue-bg)}
.kb-chip.is-gekozen{background:var(--navy);border-color:var(--navy);color:#fff}
.kb-chip.is-gekozen em{color:#E9F2F9}
.kb-chip.is-gekozen::after{content:"×";margin-left:2px;font-size:1.1rem;line-height:1}
.kb-chips--lijst .kb-chip.is-gekozen::after{margin-left:0}
.kb-chips--lijst .kb-chip:first-child.is-gekozen::after{content:none}
.kb-chip--klein{min-height:38px;font-size:.88rem;padding:0 12px}
.kb-resultaten__kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin:0 0 14px}
.kb-resultaten__kop h2{margin:0;font-size:1.3rem;font-weight:600}
.kb-inhoud[aria-busy=true] .kb-kaarten{opacity:.55;transition:opacity .15s}
.kb-leeg{grid-column:1/-1;display:grid;justify-items:center;gap:6px;padding:36px 20px;border:1.5px dashed var(--border-strong);border-radius:20px;background:#fff;text-align:center;color:var(--muted)}
.kb-leeg h3{margin:4px 0 0;font-size:1.15rem;color:var(--navy)}
.kb-leeg p{margin:0;max-width:440px}
.kb-paginas{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px 0}
/* Artikel */
.kb-kruimel{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 14px;color:var(--muted);font-size:.95rem}
.kb-kruimel a{color:var(--blue-dark);font-weight:600;text-decoration:none}
.kb-kruimel a:hover{text-decoration:underline}
.kb-artikel{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:0 0 34px}
.kb-artikel.heeft-nodig{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"kop kop" "hoofd zij";align-items:start;column-gap:28px}
.kb-artikel.heeft-nodig .kb-artikel__kop{grid-area:kop}
.kb-artikel.heeft-nodig .kb-artikel__hoofd{grid-area:hoofd}
.kb-artikel.heeft-nodig .kb-artikel__zij{grid-area:zij}
.kb-artikel__kop{display:flex;gap:18px;padding:26px 28px;border-radius:24px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-card)}
.kb-artikel__icoon{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:20px;background:var(--blue-bg);color:var(--blue-dark)}
.kb-artikel--vlek .kb-artikel__icoon{background:#FFF4EE;color:#b4572a}
.kb-artikel--middel .kb-artikel__icoon{background:var(--green-bg);color:var(--green-dark)}
.kb-artikel--kennis .kb-artikel__icoon{background:var(--yellow-bg);color:var(--warning)}
.kb-artikel__soort{margin:0 0 4px}
.kb-artikel__soort a{display:inline-flex;align-items:center;gap:6px;color:var(--blue-dark);font-weight:600;font-size:.92rem;text-decoration:none}
.kb-artikel__kop h1{margin:0 0 8px;color:var(--navy);font-weight:600;font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem)}
.kb-artikel__lead{margin:0;max-width:720px;font-size:1.12rem;line-height:1.55;color:var(--ink)}
.kb-artikel__labels{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.kb-artikel__labels li{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 12px;border-radius:999px;background:var(--bg);color:var(--muted);font-size:.88rem;font-weight:600}
.kb-artikel__labels a{color:inherit;text-decoration:none}
.kb-artikel__labels a:hover{color:var(--blue-dark)}
.kb-artikel__hoofd{display:grid;gap:18px;min-width:0}
.kb-letop{display:flex;gap:14px;padding:16px 18px;border-radius:18px;border-left:5px solid var(--accent);background:#FFF4EE;color:var(--ink)}
.kb-letop .kb-icoon{color:#b4572a;margin-top:2px}
.kb-letop strong{font-weight:600}
.kb-letop p{margin:4px 0 0;line-height:1.55;white-space:pre-line}
.kb-tekst{padding:24px 28px;border:1px solid var(--border);border-radius:22px;background:#fff;font-size:1.06rem;line-height:1.7}
.kb-tekst>:first-child{margin-top:0}
.kb-tekst>:last-child{margin-bottom:0}
.kb-tekst h2{margin:1.4em 0 .5em;font-size:1.25rem;font-weight:600;color:var(--navy)}
.kb-tekst h3{margin:1.2em 0 .4em;font-size:1.08rem;font-weight:600}
.kb-tekst p{margin:0 0 .9em}
.kb-tekst ul,.kb-tekst ol{margin:0 0 1em;padding-left:1.4em}
.kb-tekst li{margin:.3em 0}
.kb-tekst ol{list-style:none;counter-reset:kb-stap;padding-left:0}
.kb-tekst ol>li{counter-increment:kb-stap;position:relative;padding:4px 0 8px 46px;min-height:36px}
.kb-tekst ol>li::before,.kb-stappen>li::before{content:counter(kb-stap);position:absolute;left:0;top:2px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-weight:600;font-size:.95rem}
.kb-tekst img{max-width:100%;height:auto;border-radius:14px}
.kb-tekst blockquote{margin:0 0 1em;padding:12px 16px;border-left:4px solid var(--green);border-radius:0 12px 12px 0;background:var(--green-bg)}
.kb-werkwijzen{padding:24px 28px;border:1px solid var(--border);border-radius:22px;background:#fff}
.kb-werkwijzen>h2{margin:0 0 14px;font-size:1.3rem;font-weight:600;color:var(--navy)}
.kb-werkwijzen__keuze{margin:0 0 18px}
.kb-werkwijze[data-kb-verborgen]{display:none}
.kb-werkwijze h3{margin:0 0 4px;font-size:1.12rem;font-weight:600}
.kb-werkwijze__kort{margin:0 0 14px;color:var(--muted)}
.kb-stappen{list-style:none;counter-reset:kb-stap;margin:0 0 6px;padding:0;display:grid;gap:4px}
.kb-stappen>li{counter-increment:kb-stap;position:relative;padding:5px 0 10px 48px;min-height:38px;font-size:1.04rem;line-height:1.6}
.kb-stappen>li:not(:last-child)::after{content:"";position:absolute;left:15px;top:38px;bottom:-2px;width:2px;background:var(--border)}
.kb-werkwijze__nodig{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.kb-werkwijze__nodig h4{margin:0 0 10px;font-size:1rem;font-weight:600}
.kb-werkwijze__nodig .kb-nodig-lijst{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.kb-zijkaart{position:sticky;top:calc(var(--topbar-height) + 16px);padding:20px;border:1px solid var(--border);border-top:4px solid var(--green);border-radius:22px;background:#fff;box-shadow:var(--shadow-card)}
.kb-zijkaart h2{margin:0 0 12px;font-size:1.15rem;font-weight:600;color:var(--navy)}
.kb-zijkaart__voet{margin:12px 0 0;font-size:.95rem}
/* Benodigdheid met productfoto uit AFAS, artikelnummer en eventueel Op bestellijst. */
.kb-nodig-lijst{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kb-nodig{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px;padding:10px;border:1px solid var(--border);border-radius:16px;background:#fff}
.kb-nodig.is-leeg{border-style:dashed;background:var(--bg)}
.kb-nodig__foto{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:12px;background:var(--blue-bg);overflow:hidden}
.kb-nodig__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.kb-nodig__letter{color:var(--blue-dark);font-weight:600;font-size:1.3rem;text-transform:uppercase}
.kb-nodig__tekst{display:grid;gap:1px;min-width:0}
.kb-nodig__tekst small{color:var(--green-dark);font-weight:600;font-size:.8rem;text-transform:none}
.kb-nodig__tekst strong{font-weight:600;font-size:.97rem;line-height:1.3;overflow-wrap:anywhere}
.kb-nodig__code{color:var(--muted);font-size:.84rem;font-variant-numeric:tabular-nums}
.kb-nodig__bestel{grid-column:1/-1;margin:2px 0 0}
.kb-nodig__bestel .button{width:100%;min-height:42px}
.kb-nodig__bestel .button.is-gelukt{background:var(--green-bg);border-color:#bfe2c0;color:var(--green-dark)}
.kb-verder{margin-top:8px}
@media (max-width:1000px){
  .kb-artikel.heeft-nodig{grid-template-columns:minmax(0,1fr);grid-template-areas:"kop" "zij" "hoofd"}
  .kb-zijkaart{position:static}
  .kb-soorten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kb-zoeken{grid-template-columns:minmax(0,1fr)}
  .kb-filters{position:static;padding:14px}
  .kb-filters .kb-chips,.kb-filters .kb-chips--lijst{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0 -14px;padding:2px 14px 6px;scrollbar-width:none}
  .kb-filters .kb-chips::-webkit-scrollbar{display:none}
  .kb-filters .kb-chip,.kb-chips--lijst .kb-chip{flex:none;border-color:var(--border-strong);border-radius:999px;padding:0 14px}
  .kb-chips--lijst .kb-chip:first-child.is-gekozen::after{content:none}
  .kb-filter h2{margin-bottom:6px}
}
@media (max-width:640px){
  .kb-zoek{flex-direction:column}
  .kb-zoek .button{min-height:52px}
  .kb-zoek__veld input{min-height:54px;font-size:1.05rem}
  .kb-zoek__toets{display:none}
  .kb-onderwerpen{grid-template-columns:minmax(0,1fr)}
  .kb-onderwerp{min-height:76px;padding:12px 14px;gap:12px}
  .kb-onderwerp__icoon{width:46px;height:46px;border-radius:14px}
  .kb-onderwerp__tekst small{display:none}
  .kb-soorten{gap:10px}
  .kb-soort{padding:14px}
  .kb-soort small{display:none}
  .kb-kaarten{grid-template-columns:minmax(0,1fr)}
  .kb-artikel__kop{flex-direction:column;gap:12px;padding:20px}
  .kb-artikel__icoon{width:52px;height:52px;border-radius:16px}
  .kb-tekst,.kb-werkwijzen{padding:18px}
  .kb-tekst{font-size:1.04rem}
  .kb-tekst ol>li{padding-left:42px}
  .kb-stappen>li{padding-left:44px}
}
@media print{.kb-hero,.kb-filters,.kb-nodig__bestel,.kb-verder,.kb-kruimel{display:none}.kb-artikel.heeft-nodig{grid-template-columns:1fr;grid-template-areas:"kop" "zij" "hoofd"}}
/* Cleanipedia beheren: filters als chips, tabel op pc, kaarten op telefoon; editor in twee kolommen. */
.kb-beheer__kop{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 20px;margin:4px 0 16px}
.kb-beheer__kop h1{margin:0 0 4px}
.kb-beheer__kop p{margin:0}
.kb-beheer__acties{display:flex;flex-wrap:wrap;gap:8px}
.kb-beheer__links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.kb-beheer__links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:14px;background:#fff;border:1px solid var(--border);color:var(--ink);font-weight:600;text-decoration:none}
.kb-beheer__links a:hover{background:var(--blue-bg)}
.kb-beheer__zoek{display:flex;gap:8px;max-width:560px;margin:0 0 12px}
.kb-beheer__zoek .kb-zoek__veld input{min-height:48px;padding:0 14px 0 44px;border:1.5px solid var(--border-strong);border-radius:14px;font-size:1rem}
.kb-beheer__zoek .kb-zoek__veld .kb-icoon{left:14px}
.kb-beheer__filters{display:grid;gap:8px;margin:0 0 16px}
.kb-chip--klein.is-alle::after{content:none}
.kb-chip--status{border-style:dashed}
.kb-beheer__lijst{padding:6px 0}
.kb-beheer__telling{margin:0 0 8px;color:var(--muted)}
.kb-beheer__tabel{width:100%;background:#fff;border-radius:16px;overflow:hidden}
.kb-beheer__tabel td,.kb-beheer__tabel th{padding:12px 14px}
.kb-beheer__taak{display:block;color:var(--muted);font-size:.82rem}
.kb-koppeling{display:inline-flex;min-height:28px;align-items:center;padding:0 10px;border-radius:999px;background:#FFF4EE;color:#9a4a22;font-weight:600;font-size:.88rem}
.kb-koppeling.is-compleet{background:var(--green-bg);color:var(--green-dark)}
.kb-status{display:inline-flex;min-height:28px;align-items:center;padding:0 10px;border-radius:999px;background:var(--bg);color:var(--muted);font-weight:600;font-size:.88rem}
.kb-status.is-live{background:var(--blue-bg);color:var(--blue-dark)}
.kb-editor__vlak{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
.kb-editor__vlak .card{display:grid;gap:14px}
.kb-editor__vlak fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.kb-editor__vlak legend{font-weight:600;margin-bottom:6px}
.kb-editor .kbl-keuze--klein>label>span{min-height:38px;padding:0 12px;font-size:.9rem}
.kb-editor__zij{display:grid;gap:18px}
@media (max-width:1000px){.kb-editor__vlak{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .kb-beheer__tabel thead{display:none}
  .kb-beheer__tabel,.kb-beheer__tabel tbody,.kb-beheer__tabel tr,.kb-beheer__tabel td{display:block;width:100%}
  .kb-beheer__tabel{background:none}
  .kb-beheer__tabel tr{margin:0 0 10px;padding:12px 14px;border:1px solid var(--border);border-radius:16px;background:#fff}
  .kb-beheer__tabel td{padding:3px 0;border:0}
  .kb-beheer__tabel td[data-label="Onderwerp"],.kb-beheer__tabel td[data-label="Soort"]{display:inline;color:var(--muted);font-size:.9rem}
  .kb-beheer__tabel td[data-label="Soort"]::before{content:" · "}
  .kb-beheer__tabel td[data-label="AFAS-artikelen"],.kb-beheer__tabel td[data-label="Status"]{display:inline-block;width:auto;margin:6px 6px 0 0}
  .kb-beheer__filters .kb-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .kb-beheer__filters .kb-chip{flex:none}
}

/* Te lange voorbeeldtekst in een zoekveld eindigt met … in plaats van midden in een woord af te breken. */
input[type="search"],input[type="text"]{text-overflow:ellipsis}