:root{font-family:Segoe UI,Arial,sans-serif;background:#ececec;color:#222;color-scheme:light}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#d9d9d9}
body{user-select:none}
#viewport{position:fixed;inset:0;overflow:hidden;background:#d9d9d9}
#scale-shell{position:absolute;left:0;top:0;transform-origin:0 0}
#surface{position:relative;width:1565px;height:736px;overflow:hidden;background:#e2e2e2;box-shadow:0 0 20px rgba(0,0,0,.25)}
.fmx{position:absolute;margin:0;padding:0;font-family:Segoe UI,Arial,sans-serif;font-size:12px;overflow:hidden}
.fmx-label{display:flex;align-items:center;white-space:pre-wrap;background:transparent;line-height:1.15}
.fmx-rectangle,.fmx-panel,.fmx-group{border:1px solid #bdbdbd;background:transparent}
.fmx-group{overflow:visible;padding-top:14px}
.fmx-group>.legend{position:absolute;top:-1px;left:8px;padding:0 4px;background:inherit;z-index:4;white-space:nowrap}
.fmx-button,.fmx-barbutton{border:1px solid #aaa;border-radius:2px;background:linear-gradient(#fafafa,#e5e5e5);color:#222;padding:2px 8px;cursor:pointer;white-space:pre-wrap;display:flex;align-items:center;justify-content:center;text-align:center}
.fmx-button:active,.fmx-barbutton:active{background:linear-gradient(#ddd,#f6f6f6)}
.fmx-button[disabled],.fmx-barbutton[disabled],.fmx.disabled{opacity:.45;pointer-events:none}
.fmx-edit,.fmx-memo,.fmx-select{border:1px solid #9f9f9f;background:#fff;color:#222;border-radius:1px;padding:2px 4px;outline:none;user-select:text}
.fmx-edit:focus,.fmx-memo:focus,.fmx-select:focus{border-color:#5a86b7;box-shadow:0 0 0 1px rgba(90,134,183,.28)}
.fmx-memo{resize:none;white-space:pre-wrap}
.fmx-checkbox,.fmx-radio{display:flex;align-items:center;gap:5px;background:transparent;overflow:visible;white-space:nowrap}
.fmx-checkbox input,.fmx-radio input{margin:0}
.fmx-image{object-fit:contain;pointer-events:auto}
.fmx-line{background:transparent;min-width:1px;min-height:1px;pointer-events:none}
.fmx-grid{border:1px solid #a5a5a5;background-color:#fff;background-image:linear-gradient(#ddd 1px,transparent 1px),linear-gradient(90deg,#ddd 1px,transparent 1px);background-size:100% 24px,90px 100%;overflow:auto}
.fmx-tree,.fmx-list{border:1px solid #aaa;background:#fff;overflow:auto}
.fmx-tabcontrol{overflow:hidden;background:transparent}
.fmx-tab-page{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;display:none;overflow:hidden;background:transparent}
.fmx-popup{display:none!important;z-index:9000;border:1px solid #777;background:white;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.status{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);padding:8px 14px;background:rgba(32,32,32,.92);color:white;border-radius:4px;z-index:20000;opacity:0;pointer-events:none;transition:opacity .18s;max-width:min(720px,90vw);font-size:13px}
.status.show{opacity:1}
.audit-panel{position:fixed;right:10px;top:10px;bottom:10px;width:350px;background:#fff;border:1px solid #777;z-index:30000;box-shadow:0 8px 28px rgba(0,0,0,.35);overflow:auto;font-size:12px;user-select:text}
.audit-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;background:#373737;color:#fff;padding:8px;z-index:2}
.audit-head button{border:0;background:transparent;color:white;font-size:22px;cursor:pointer}
.audit-section{padding:8px;border-bottom:1px solid #ddd}
.audit-row{width:100%;text-align:left;border:0;border-bottom:1px solid #eee;background:white;padding:7px;cursor:pointer;font-size:11px}
.audit-row:hover{background:#f3f3f3}
.audit-row small{display:block;color:#666;margin-top:2px}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:25000;display:flex;align-items:center;justify-content:center}
.modal-surface{position:relative;background:#f5f5f5;box-shadow:0 12px 40px rgba(0,0,0,.35);overflow:hidden}
.debug-outline .fmx:hover{outline:1px solid #f00;outline-offset:-1px}

/* FireMonkey menu GlowEffect compatibility: hover = gold, selected = green. */
.fmx-menu-item{cursor:pointer;transition:text-shadow .08s ease,color .08s ease;overflow:visible!important;font-size:12px!important;line-height:1!important;height:14px!important}
.fmx-menu-item:not(.disabled):hover{text-shadow:0 0 4px #ffd700,0 0 7px #ffd700}
.fmx-menu-item.menu-active:not(.disabled){text-shadow:0 0 4px #00ff09,0 0 7px #00ff09}
.fmx-menu-item.menu-active:not(.disabled):hover{text-shadow:0 0 4px #ffd700,0 0 7px #ffd700,0 0 9px #00ff09}

/* TStringGrid web rendering used by the first fully ported Colors screen. */
.legacy-grid-table{border-collapse:collapse;table-layout:fixed;min-width:100%;font:13px Segoe UI,Arial,sans-serif;background:#fff;color:#222;user-select:none}
.legacy-grid-table th,.legacy-grid-table td{height:24px;border-right:1px solid #d6d6d6;border-bottom:1px solid #dedede;padding:2px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-weight:400}
.legacy-grid-table th{height:25px;background:linear-gradient(#f8f8f8,#e6e6e6);border-bottom-color:#a9a9a9}
.legacy-grid-table tbody tr:nth-child(even){background:#f7f7f7}
.legacy-grid-table tbody tr:hover{background:#e7f0fb}
.legacy-grid-table tbody tr:focus{outline:1px solid #5a86b7;outline-offset:-1px;background:#dceafb}


/* 0.2.4 fidelity fixes */
#fmx-Rectangle1 .fmx-label{font-size:13px!important;line-height:1.05!important}
#fmx-Rectangle1 .fmx-line{background:#fff!important;height:1px!important;border:0!important}
#fmx-Image11{object-fit:contain!important;object-position:center!important}
#fmx-StringGrid26{overflow-x:auto!important;overflow-y:scroll!important;overscroll-behavior:contain;scrollbar-gutter:stable;touch-action:pan-y;background:#fff;background-image:none}
#fmx-StringGrid26 .legacy-grid-table{width:max-content;min-width:100%;font-size:12px}
#fmx-StringGrid26 .legacy-grid-table th,#fmx-StringGrid26 .legacy-grid-table td{height:24px;padding:1px 4px}
#fmx-StringGrid26 .legacy-grid-table tbody tr:nth-child(even){background:#dcdcdc}
#fmx-StringGrid26 .legacy-grid-table tbody tr:nth-child(odd){background:#fff}
#fmx-StringGrid26 .legacy-grid-table tbody tr:hover{background:#cbd9e8}
#fmx-StringGrid26 .legacy-grid-table tbody tr.grid-selected{background:#b9cee4!important}
.grid-icon-cell{padding:0!important;text-align:center!important;vertical-align:middle!important}
.grid-icon{width:16px;height:16px;display:inline-block;vertical-align:middle;pointer-events:none}
#fmx-Rectangle117.legacy-dialog-overlay{z-index:8000!important;background:rgba(225,225,225,.7)!important;opacity:1!important}
#fmx-Rectangle118.legacy-dialog-surface{z-index:8100!important;overflow:hidden!important}
#fmx-Rectangle118 .fmx-image{z-index:0}
#fmx-Rectangle118 .fmx-edit,#fmx-Rectangle118 .fmx-label,#fmx-Rectangle118 .fmx-barbutton,#fmx-Rectangle118 .fmx-line{z-index:2}
#fmx-Rectangle118 #fmx-Image87{object-fit:fill!important}
#fmx-Rectangle118 #fmx-Image88{object-fit:contain!important}

/* 0.2.5 hit-test + AT Locatie */
.fmx-passive-hit{pointer-events:none}
#fmx-Rectangle119{pointer-events:none!important}
#fmx-StringGrid9{overflow-x:auto!important;overflow-y:scroll!important;overscroll-behavior:contain;scrollbar-gutter:stable;touch-action:pan-y;background:#fff;background-image:none}
#fmx-StringGrid9 .legacy-grid-table{width:max-content;min-width:100%;font-size:12px}
#fmx-StringGrid9 .legacy-grid-table th,#fmx-StringGrid9 .legacy-grid-table td{height:24px;padding:1px 4px}
#fmx-StringGrid9 .legacy-grid-table tbody tr:nth-child(even){background:#dcdcdc}
#fmx-StringGrid9 .legacy-grid-table tbody tr:nth-child(odd){background:#fff}
#fmx-Rectangle27.legacy-dialog-overlay{z-index:8000!important;background:rgba(225,225,225,.7)!important;opacity:1!important}
#fmx-Rectangle26.legacy-dialog-surface{z-index:8100!important;overflow:hidden!important}
#fmx-Rectangle26 .fmx-image{z-index:0}
#fmx-Rectangle26 .fmx-edit,#fmx-Rectangle26 .fmx-label,#fmx-Rectangle26 .fmx-barbutton,#fmx-Rectangle26 .fmx-line{z-index:2;pointer-events:auto}
#fmx-Rectangle26 #fmx-Image29{object-fit:fill!important}
#fmx-Rectangle26 #fmx-Image30{object-fit:contain!important}


/* 0.2.6 fidelity: echte FMX strokes in dialogen + compact menu */
#fmx-Rectangle118 .fmx-line,#fmx-Rectangle26 .fmx-line{height:1px!important;min-height:1px!important;border:0!important}
#fmx-Rectangle118 .fmx-barbutton,#fmx-Rectangle26 .fmx-barbutton{
  background:linear-gradient(#aeb9c5,#72849a)!important;
  border-color:#59697a!important;color:#fff!important;font-weight:600!important;border-radius:4px!important;
}

/* 0.2.8 AT - Locatie: Delphi StringGrid9 kolommen en compacte tabelweergave */
#fmx-StringGrid9 .location-grid{width:1317px!important;min-width:1317px!important;table-layout:fixed!important}
#fmx-StringGrid9 .location-grid th,#fmx-StringGrid9 .location-grid td{height:24px!important;font-size:12px!important;padding:1px 4px!important}
#fmx-StringGrid9 .location-grid tbody tr:nth-child(even){background:#dcdcdc!important}
#fmx-StringGrid9 .location-grid tbody tr:nth-child(odd){background:#fff!important}
#fmx-StringGrid9 .location-grid th{background:linear-gradient(#f8f8f8,#e7e7e7)!important}

/* 0.3.0 AT - Categorie (StringGrid8 + originele Delphi popup Rectangle21/25) */
#fmx-StringGrid8{overflow-x:auto!important;overflow-y:scroll!important;overscroll-behavior:contain;scrollbar-gutter:stable;touch-action:pan-y;background:#fff;background-image:none}
#fmx-StringGrid8 .category-grid{width:1323px!important;min-width:1323px!important;table-layout:fixed!important;font-size:12px}
#fmx-StringGrid8 .category-grid th,#fmx-StringGrid8 .category-grid td{height:24px!important;padding:1px 4px!important}
#fmx-StringGrid8 .category-grid tbody tr:nth-child(even){background:#dcdcdc!important}
#fmx-StringGrid8 .category-grid tbody tr:nth-child(odd){background:#fff!important}
#fmx-StringGrid8 .category-grid tbody tr:hover{background:#cbd9e8!important}
#fmx-StringGrid8 .category-grid tbody tr.grid-selected{background:#b9cee4!important}
#fmx-Rectangle21.legacy-dialog-overlay{z-index:8000!important;background:rgba(225,225,225,.7)!important;opacity:1!important}
#fmx-Rectangle25.legacy-dialog-surface{z-index:8100!important;overflow:hidden!important}
#fmx-Rectangle25 .fmx-image{z-index:0}
#fmx-Rectangle25 .fmx-edit,#fmx-Rectangle25 .fmx-label,#fmx-Rectangle25 .fmx-barbutton,#fmx-Rectangle25 .fmx-line{z-index:2;pointer-events:auto}
#fmx-Rectangle25 .fmx-line{height:1px!important;min-height:1px!important;border:0!important}
#fmx-Rectangle25 .fmx-barbutton{background:linear-gradient(#aeb9c5,#72849a)!important;border-color:#59697a!important;color:#fff!important;font-weight:600!important;border-radius:4px!important}
#fmx-Rectangle25 #fmx-Image27{object-fit:fill!important}
#fmx-Rectangle25 #fmx-Image28{object-fit:contain!important}

/* 0.3.1 menu fidelity: Delphi sectiekoppen vet + gelijke Samples-regelafstand */
#fmx-Rectangle1 .fmx-label{font-size:12px!important;line-height:14px!important;height:14px!important}
#fmx-Rectangle1 .fmx-menu-section{font-weight:700!important;font-size:12px!important;line-height:14px!important;height:14px!important}
#fmx-Rectangle1 .fmx-menu-item{font-size:12px!important;line-height:14px!important;height:14px!important}

/* Batch grids 0.3.1 */
#fmx-StringGrid3,#fmx-StringGrid7,#fmx-StringGrid32,#fmx-StringGrid36,#fmx-StringGrid41{overflow-x:auto!important;overflow-y:scroll!important;overscroll-behavior:contain;scrollbar-gutter:stable;touch-action:pan-y;background:#fff;background-image:none}
#fmx-StringGrid3 .legacy-grid-table,#fmx-StringGrid7 .legacy-grid-table,#fmx-StringGrid32 .legacy-grid-table,#fmx-StringGrid36 .legacy-grid-table,#fmx-StringGrid41 .legacy-grid-table{width:max-content;min-width:100%;font-size:12px}
#fmx-StringGrid3 .legacy-grid-table th,#fmx-StringGrid3 .legacy-grid-table td,#fmx-StringGrid7 .legacy-grid-table th,#fmx-StringGrid7 .legacy-grid-table td,#fmx-StringGrid32 .legacy-grid-table th,#fmx-StringGrid32 .legacy-grid-table td,#fmx-StringGrid36 .legacy-grid-table th,#fmx-StringGrid36 .legacy-grid-table td,#fmx-StringGrid41 .legacy-grid-table th,#fmx-StringGrid41 .legacy-grid-table td{height:24px!important;padding:1px 4px!important}
#fmx-StringGrid3 .legacy-grid-table tbody tr:nth-child(even),#fmx-StringGrid7 .legacy-grid-table tbody tr:nth-child(even),#fmx-StringGrid32 .legacy-grid-table tbody tr:nth-child(even),#fmx-StringGrid36 .legacy-grid-table tbody tr:nth-child(even),#fmx-StringGrid41 .legacy-grid-table tbody tr:nth-child(even){background:#dcdcdc!important}
#fmx-StringGrid3 .legacy-grid-table tbody tr:nth-child(odd),#fmx-StringGrid7 .legacy-grid-table tbody tr:nth-child(odd),#fmx-StringGrid32 .legacy-grid-table tbody tr:nth-child(odd),#fmx-StringGrid36 .legacy-grid-table tbody tr:nth-child(odd),#fmx-StringGrid41 .legacy-grid-table tbody tr:nth-child(odd){background:#fff!important}
#fmx-StringGrid3 .legacy-grid-table tbody tr.grid-selected,#fmx-StringGrid7 .legacy-grid-table tbody tr.grid-selected,#fmx-StringGrid36 .legacy-grid-table tbody tr.grid-selected{background:#b9cee4!important}
#fmx-StringGrid32 .sample-open-cell{cursor:pointer}
#fmx-Rectangle8.legacy-dialog-overlay,#fmx-Rectangle147.legacy-dialog-overlay{z-index:8000!important;background:rgba(225,225,225,.7)!important;opacity:1!important}
#fmx-Rectangle9.legacy-dialog-surface,#fmx-Rectangle148.legacy-dialog-surface{z-index:8100!important;overflow:hidden!important}
#fmx-Rectangle9 .fmx-edit,#fmx-Rectangle9 .fmx-select,#fmx-Rectangle9 .fmx-checkbox,#fmx-Rectangle9 .fmx-barbutton,#fmx-Rectangle148 .fmx-edit,#fmx-Rectangle148 .fmx-label,#fmx-Rectangle148 .fmx-barbutton{z-index:2;pointer-events:auto}
#fmx-StringGrid5{overflow-x:auto!important;overflow-y:scroll!important;overscroll-behavior:contain;scrollbar-gutter:stable;background:#fff;background-image:none}
#fmx-StringGrid5 .legacy-grid-table{width:max-content;min-width:100%;font-size:12px}
#fmx-StringGrid5 .legacy-grid-table th,#fmx-StringGrid5 .legacy-grid-table td{height:24px!important;padding:1px 4px!important}
#fmx-StringGrid5 .legacy-grid-table tbody tr:nth-child(even){background:#dcdcdc!important}
#fmx-StringGrid5 .legacy-grid-table tbody tr:nth-child(odd){background:#fff!important}
#fmx-StringGrid5 .legacy-grid-table tbody tr.grid-selected{background:#b9cee4!important}
#fmx-Rectangle31.legacy-dialog-surface{z-index:8100!important;overflow:hidden!important;pointer-events:auto!important}
#fmx-Rectangle31 .fmx-edit,#fmx-Rectangle31 .fmx-select,#fmx-Rectangle31 .fmx-checkbox,#fmx-Rectangle31 .fmx-barbutton,#fmx-Rectangle31 .fmx-memo{pointer-events:auto!important;z-index:2}

/* 0.7.0 Prijslijst bestand/workflow panel */
.web-pricelist-panel{position:absolute;right:24px;bottom:22px;z-index:70;width:min(620px,calc(100% - 48px));box-sizing:border-box;padding:16px 18px;background:rgba(250,250,250,.97);border:1px solid #8c8c8c;border-radius:5px;box-shadow:0 2px 9px rgba(0,0,0,.18);font:13px/1.45 Arial,sans-serif;color:#222}
.web-pricelist-title{font-size:16px;font-weight:700;margin-bottom:7px}
.web-pricelist-meta{word-break:break-word;margin-bottom:10px}
.web-pricelist-meta code{font-size:11px}
.web-pricelist-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.web-pricelist-actions button{border:1px solid #6d6d6d;border-radius:4px;padding:7px 11px;background:linear-gradient(#fefefe,#d9d9d9);color:#202020;cursor:pointer}
.web-pricelist-actions button:hover{background:linear-gradient(#fff,#cfcfcf)}
.web-pricelist-note{font-size:11px;color:#555}

/* 0.8.0 – Delphi visual catalogus / lage voorraad / sample catalogus */
#fmx-VertScrollBox1,#fmx-VertScrollBox5,#fmx-VertScrollBox13{
  overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;background:#e5e5e5!important;background-image:none!important;
}
#fmx-VertScrollBox1.legacy-card-scroll,#fmx-VertScrollBox5.legacy-card-scroll,#fmx-VertScrollBox13.legacy-card-scroll{
  display:grid!important;grid-template-columns:repeat(6,210px);grid-auto-rows:146px;gap:9px 10px;padding:7px 14px;align-content:start;justify-content:start;
}
.catalog-card{position:relative;width:210px;height:146px;border:1px solid #111;background:#d6d6d6;color:#fff;overflow:hidden;font:12px/1.1 Segoe UI,Arial,sans-serif}
.catalog-card-title{height:20px;display:flex;align-items:center;justify-content:center;background:#515868;border-bottom:1px solid #222;color:#fff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.catalog-card-title.catalog-card-title-alert{background:#ffa500;color:#fff}
.catalog-card-image{position:relative;height:91px;background:#ddd;overflow:hidden}
.catalog-card-image img{display:block;width:100%;height:100%;object-fit:cover;background:#eee}
.catalog-card-vnv{position:absolute;right:0;top:0;width:65px;min-height:39px;border-left:1px solid #222;border-bottom:1px solid #222;background:#515868;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:3px 2px;color:#fff}
.catalog-card-vnv strong,.catalog-card-stats strong{font-size:11px;font-weight:700}
.catalog-card-vnv span,.catalog-card-stats span{font-size:11px}
.catalog-card-stats{height:35px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#d8d8d8}
.catalog-card-stats>div{background:#515868;border-top:1px solid #222;border-right:1px solid #222;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;min-width:0}
.catalog-card-stats>div:last-child{border-right:0}
.catalog-card .risk-red{background:#ff0000!important}.catalog-card .risk-orange{background:#ffa500!important}.catalog-card .risk-blue{background:#0000ff!important}
.catalog-loading{grid-column:1/-1;padding:18px;color:#555;font-size:13px}
#fmx-StringGrid21,#fmx-StringGrid25{background:#fff;background-image:none;overflow:auto!important}
#fmx-StringGrid21 .legacy-grid-table,#fmx-StringGrid25 .legacy-grid-table{width:max-content;min-width:100%;font-size:12px}

/* 0.8.0 – Sample overzicht: tijdelijke barcode/order overlays zijn via JS hidden bij scherm-entree. */
#fmx-StringGrid33{background:#fff;background-image:none;overflow:auto!important}
#fmx-StringGrid33 .legacy-grid-table{width:max-content;min-width:100%;font-size:12px}
#fmx-TMSFMXTreeView5 .sample-loose-grid{width:100%;font-size:12px}

/* 0.8.0 – echte XLS-data in de bestaande TMSFMXGrid1 ruimte */
#fmx-TMSFMXGrid1.pricelist-grid-host{overflow:auto!important;background:#fff!important;background-image:none!important;user-select:text}
.pricelist-grid-table{border-collapse:collapse;table-layout:auto;min-width:100%;width:max-content;background:#fff;color:#111;font:12px/1.25 Segoe UI,Arial,sans-serif}
.pricelist-grid-table th,.pricelist-grid-table td{height:24px;min-width:0;max-width:none;border-right:1px solid #d5d5d5;border-bottom:1px solid #ddd;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-weight:400}
.pricelist-grid-table .pricelist-header-row th{position:sticky;top:0;z-index:3;background:linear-gradient(#f5f5f5,#dedede);border-bottom:1px solid #999;font-weight:600}
.pricelist-grid-table tr:nth-child(even) td{background:#fafafa}
.pricelist-empty{padding:18px;color:#555;background:#fff;font-size:13px}
.web-pricelist-panel{position:absolute!important;left:7px!important;right:auto!important;bottom:3px!important;top:auto!important;z-index:70!important;width:auto!important;max-width:1040px!important;height:22px!important;min-height:0!important;padding:3px 8px!important;margin:0!important;background:rgba(250,250,250,.94)!important;border:1px solid #aaa!important;border-radius:3px!important;box-shadow:none!important;font:11px/14px Segoe UI,Arial,sans-serif!important;color:#333!important;white-space:nowrap!important;overflow:hidden!important;pointer-events:none!important}
.web-pricelist-title,.web-pricelist-actions,.web-pricelist-note{display:none!important}.web-pricelist-meta{display:inline!important;margin:0!important;word-break:normal!important}

/* 0.9.0 – globale laad-overlay voor serveracties */
.web-busy-overlay{position:fixed;inset:0;z-index:50000;background:rgba(225,225,225,.62);display:none;align-items:center;justify-content:center;cursor:wait}
.web-busy-overlay.show{display:flex}
.web-busy-box{display:flex;align-items:center;gap:12px;padding:13px 18px;border:1px solid #aaa;border-radius:5px;background:rgba(250,250,250,.96);box-shadow:0 2px 12px rgba(0,0,0,.18);font:600 13px Segoe UI,Arial,sans-serif;color:#333}
.web-spinner{width:24px;height:24px;border:3px solid #bbb;border-top-color:#4e5968;border-radius:50%;animation:webspin .75s linear infinite}
@keyframes webspin{to{transform:rotate(360deg)}}

/* 0.9.0 – elke door de weblaag gevulde grid krijgt een echte witte host en sticky header */
.fmx-grid.legacy-grid-host{background:#fff!important;background-image:none!important}
.legacy-grid-table thead th{position:sticky;top:0;z-index:8;background:linear-gradient(#f8f8f8,#e6e6e6);box-shadow:0 1px 0 #aaa}

/* 0.9.0 – catalogusblokken terug naar de compacte Delphi-maat. */
#fmx-VertScrollBox1.legacy-card-scroll,#fmx-VertScrollBox5.legacy-card-scroll,#fmx-VertScrollBox13.legacy-card-scroll{
  grid-template-columns:repeat(6,210px)!important;grid-auto-rows:146px!important;gap:9px 10px!important;padding:7px 14px!important;
}
.catalog-card{width:210px!important;height:146px!important;font-size:12px!important;cursor:pointer}
.catalog-card-title{height:20px!important;font-size:12px!important;padding:0 4px!important}
.catalog-card-image{height:91px!important}
.catalog-card-vnv{width:65px!important;min-height:39px!important;gap:3px!important;padding:3px 2px!important}
.catalog-card-vnv strong,.catalog-card-stats strong{font-size:11px!important}
.catalog-card-vnv span,.catalog-card-stats span{font-size:11px!important}
.catalog-card-stats{height:35px!important;gap:6px!important}
.catalog-card-stats>div{gap:2px!important}

/* 0.9.0 – webdetailvensters voor geporteerde grid/card details */
.web-detail-backdrop{position:fixed;inset:0;z-index:30000;background:rgba(35,39,47,.55);display:flex;align-items:center;justify-content:center;padding:26px}
.web-detail-dialog{width:min(1180px,calc(100vw - 52px));max-height:calc(100vh - 52px);background:#e7e7e7;border:1px solid #6f7580;box-shadow:0 7px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;color:#222;font:13px Segoe UI,Arial,sans-serif}
.web-detail-head{height:38px;min-height:38px;background:#515969;color:#fff;display:flex;align-items:center;gap:10px;padding:0 12px;font-weight:700}
.web-detail-head .title{flex:1;text-align:center;font-size:15px}.web-detail-close{border:0;background:#737b8b;color:#fff;width:30px;height:26px;cursor:pointer;font-size:18px}
.web-detail-body{overflow:auto;padding:14px;background:#ddd;min-height:160px}
.web-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:10px 16px}.web-detail-grid .field{display:grid;grid-template-columns:130px 1fr;gap:8px;align-items:center}.web-detail-grid label{font-weight:600;color:#515969}.web-detail-grid input,.web-detail-grid select,.web-detail-grid textarea{min-width:0;padding:6px;border:1px solid #aaa;background:#fff;font:13px Segoe UI,Arial,sans-serif}.web-detail-grid textarea{min-height:64px;resize:vertical}
.web-detail-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:9px 12px;background:#c9c9c9;border-top:1px solid #aaa;flex-wrap:wrap}.web-detail-actions button{min-width:110px;padding:7px 12px;border:1px solid #8d8d8d;background:linear-gradient(#fff,#ddd);cursor:pointer}.web-detail-actions button.primary{background:#515969;color:#fff;border-color:#3d4451}.web-detail-actions button.danger{background:#eb4d3d;color:#fff;border-color:#99261d}
.web-detail-table-wrap{overflow:auto;max-height:360px;background:#fff;border:1px solid #aaa}.web-detail-table{border-collapse:collapse;min-width:100%;width:max-content;background:#fff}.web-detail-table th,.web-detail-table td{height:25px;border-right:1px solid #d6d6d6;border-bottom:1px solid #ddd;padding:3px 6px;white-space:nowrap;text-align:left}.web-detail-table th{position:sticky;top:0;z-index:2;background:#515969;color:#fff;font-weight:600}
.catalog-detail-dialog{width:min(1285px,calc(100vw - 30px))}
.catalog-editor-dialog{width:min(820px,calc(100vw - 32px))}
.web-catalog-detail{display:grid;grid-template-columns:minmax(410px,42%) minmax(610px,58%);gap:14px}.web-catalog-left img{width:100%;max-height:355px;object-fit:contain;background:#eee;border:1px solid #aaa}.web-catalog-panels{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.web-catalog-panel{border:1px solid #222;background:#dedede}.web-catalog-panel h4{margin:0;background:#515969;color:#fff;padding:7px 9px;text-align:center;display:flex;align-items:center;justify-content:space-between;gap:10px}.web-catalog-panel .content{padding:12px;text-align:center;font-size:15px}.web-catalog-panel .props{text-align:left;line-height:1.55}.web-catalog-tools{display:flex;gap:6px}.web-catalog-tools button{width:24px;height:24px;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.web-catalog-tools img{max-width:21px;max-height:21px;object-fit:contain}.web-catalog-props-grid{display:grid;gap:3px}.web-catalog-props-grid .row{display:grid;grid-template-columns:145px 1fr;align-items:start;gap:10px}.web-catalog-props-grid label{font-weight:400;color:#222}.web-catalog-props-grid label::after{content:' :';font-weight:700}.web-catalog-props-grid span{font-weight:700;color:#222}.web-stock-tabs{display:flex;gap:3px;flex-wrap:nowrap;margin-bottom:5px;overflow:auto;padding-bottom:2px}.web-stock-tabs button{border:1px solid #aaa;border-radius:5px 5px 0 0;background:#d1d1d1;padding:7px 10px;cursor:pointer;white-space:nowrap;font-size:12px;line-height:1.15}.web-stock-tabs button.active{background:#515969;color:#fff}.web-stock-summary{font-size:11px;display:block;font-weight:400}.web-catalog-overview-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.web-catalog-overview-summary>div{background:#fff;border:1px solid #bbb;padding:10px 12px;display:flex;justify-content:space-between;gap:8px}.web-catalog-overview-title{margin:12px 0 6px;color:#515969;font-size:15px}.catalog-editor-grid{display:grid;grid-template-columns:1fr 304px;gap:18px}.catalog-editor-left h3,.catalog-editor-right h3{margin:0 0 10px;color:#fff;background:#515969;padding:8px 12px;font-size:15px}.catalog-editor-form{display:grid;grid-template-columns:128px minmax(0,1fr);gap:8px 10px;align-items:center}.catalog-editor-form label{font-weight:600;color:#333;text-align:right}.catalog-editor-form input,.catalog-editor-form select{min-width:0;height:28px;padding:4px 6px;border:1px solid #a0a0a0;background:#fff;box-sizing:border-box}.catalog-editor-duo,.catalog-editor-inline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}.catalog-editor-inline{grid-template-columns:minmax(0,1fr) auto auto}.catalog-editor-inline button{height:28px;border:1px solid #7d899a;background:#758bab;color:#fff;padding:0 10px;cursor:pointer;white-space:nowrap}.catalog-editor-check{display:flex;align-items:center;gap:8px;font-size:12px;text-align:left!important}.catalog-editor-check input{width:14px;height:14px}.catalog-editor-image-wrap{border:4px solid #000;background:#fff;padding:0}.catalog-editor-image-wrap img{display:block;width:100%;height:174px;object-fit:cover;background:#e54b3e}.catalog-editor-image-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}.catalog-editor-image-actions button{height:28px;border:1px solid #7d899a;background:#758bab;color:#fff;cursor:pointer}.catalog-editor-comp{display:grid;grid-template-columns:minmax(0,1fr) 58px 20px;gap:8px;align-items:center}.catalog-editor-comp input{height:28px;padding:4px 6px;border:1px solid #a0a0a0;background:#fff;box-sizing:border-box}.catalog-editor-bottom-id{font-weight:700;color:#444;padding:0 10px}.catalog-editor-duplicate{display:flex;gap:8px;align-items:center}.catalog-editor-duplicate input{width:52px;height:28px;border:1px solid #a0a0a0;padding:4px 6px;background:#fff;box-sizing:border-box}.web-agent-color-row{display:flex;gap:6px;flex-wrap:wrap}.web-agent-color{width:24px;height:24px;border:2px solid transparent;border-radius:50%;cursor:pointer}.web-agent-color.selected{border-color:#111;box-shadow:0 0 0 2px #fff inset}

/* 0.9.0 – prijslijst selectie/opmaak zoals Delphi TMSFMXGrid1 */
.fmx-colorbutton{border:1px solid #8f8f8f!important;border-radius:3px!important;cursor:pointer!important;padding:0!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.fmx-colorbutton:active{transform:translateY(1px)}
.pricelist-grid-table td.pricelist-selected,.pricelist-grid-table th.pricelist-selected{outline:2px solid #4b82b8;outline-offset:-2px;box-shadow:inset 0 0 0 9999px rgba(80,140,205,.13)}
.pricelist-grid-table td{cursor:cell;user-select:none}
.fmx-font-picker,.fmx-font-size-picker{font-size:11px!important;padding:1px 2px!important}
/* 0.9.0 – Delphi grids met HeaderClick tonen dat de header sorteerbaar is. */
.legacy-grid-table th.grid-sortable{cursor:pointer;user-select:none}
.legacy-grid-table th.grid-sortable:hover{background:linear-gradient(#fff,#dbe6f1)}
.customer-copy-cell{cursor:copy}
/* 0.9.0 grid detail affordance */
.legacy-grid-table td.grid-company-detail{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
/* 0.9.2 catalogusdetail: venster is direct zichtbaar; tabdata laadt afzonderlijk. */
.web-detail-backdrop{z-index:40000}
.catalog-detail-dialog{min-height:min(720px,calc(100vh - 52px))}
.catalog-detail-dialog .web-detail-body{flex:1;min-height:430px;background:#d9d9d9}
.web-detail-loading,.web-detail-error{display:flex;align-items:center;justify-content:center;gap:10px;min-height:120px;padding:18px;background:#fff;border:1px solid #aaa;box-sizing:border-box}
.web-detail-error{color:#8c1e1e;font-weight:600;white-space:normal}

/* 0.9.3 debug/hit-test: visuele catalogus moet altijd boven passieve FMX-oppervlakken klikbaar blijven. */
#fmx-VertScrollBox1.legacy-card-scroll,#fmx-VertScrollBox5.legacy-card-scroll,#fmx-VertScrollBox13.legacy-card-scroll{
  z-index:120!important;pointer-events:auto!important;
}
.catalog-card,.catalog-card *{pointer-events:auto!important}
#fmx-StringGrid6.legacy-grid-host{z-index:120!important;pointer-events:auto!important;background:#fff!important;background-image:none!important}

/* 0.9.6 – ST Orderdetail / ST Backorders: compacte Delphi-maatvoering uit TabItem28.
   Delphi source-maten zijn hier circa 80% gebruikt om Windows/browser DPI-scaling te compenseren.
   Daardoor komen de zichtbare pixels weer overeen met de originele FireMonkey-weergave. */
.legacy-order-detail-layer{position:absolute;inset:0;z-index:24000;display:grid;grid-template-columns:minmax(0,1fr) 224px;background:#fff;color:#111;font:10px "Segoe UI",Arial,sans-serif;overflow:hidden;box-sizing:border-box}
.legacy-order-left{min-width:0;height:100%;background:#fff;overflow:hidden;border-right:1px solid #4a4a4a}
.legacy-order-table-scroll{width:100%;height:100%;overflow:auto;background:#fff}
.legacy-order-table{border-collapse:separate;border-spacing:0;min-width:0;width:875px;background:#fff;table-layout:fixed;font-size:10px}
.legacy-order-table th{position:sticky;top:0;z-index:9;height:20px;padding:2px 4px;border:0;border-right:1px solid #b9b9b9;border-bottom:1px solid #9c9c9c;background:#f4f4f4;color:#111;font-size:10px;font-weight:400;text-align:left;white-space:nowrap;box-sizing:border-box}
.legacy-order-table th:last-child{border-right:0}
.legacy-order-table td{height:20px;padding:1px 4px;border:0;vertical-align:middle;white-space:nowrap;box-sizing:border-box;font-size:10px}
.legacy-order-table tbody tr{cursor:default;background:#fff}
.legacy-order-table tbody tr.no-units{background:#ffb6c1}
.legacy-order-table tbody tr.selected{background:#a8d8ee!important}
.legacy-order-table tbody tr:focus{outline:1px dotted #4c657c;outline-offset:-1px}
.legacy-order-parent td{height:50px}
.legacy-order-product{position:relative;display:flex;align-items:center;gap:3px;min-width:0;padding-left:4px!important}
.legacy-order-product:before{content:"";position:absolute;left:8px;top:0;bottom:-20px;border-left:1px dotted #aaa;z-index:0}
.legacy-order-product img{width:80px;height:48px;object-fit:cover;background:#eee;border:0;flex:0 0 auto;position:relative;z-index:1}
.legacy-order-product img.image-missing{visibility:hidden}
.legacy-order-product span{overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.legacy-order-expand{width:12px;height:12px;line-height:9px;padding:0;border:1px solid #8e8e8e;background:#fff;color:#333;font-size:9px;flex:0 0 12px;cursor:pointer;position:relative;z-index:2}
.legacy-order-unit td{height:20px;background:#fff;border:0}
.legacy-order-unit-tree{position:relative;padding-left:28px!important;color:#aaa}
.legacy-order-unit-tree:before{content:"";position:absolute;left:12px;top:-11px;height:12px;border-left:1px dotted #aaa}
.legacy-order-unit-tree:after{content:"";position:absolute;left:12px;top:9px;width:12px;border-top:1px dotted #aaa}
.legacy-order-branch{display:none}
.legacy-order-empty{height:48px!important;text-align:center;color:#666}

/* Rechter detailvlak: bronbreedte 276px -> 224 CSS-px. Alle Y-posities volgen TabItem28. */
.legacy-order-side{position:relative;height:100%;min-height:0;overflow:hidden;background:#666;color:#fff;padding:0;box-sizing:border-box;border-left:0}
.legacy-order-customer{position:absolute;left:8px;top:1px;width:204px;height:21px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11.2px;line-height:15px;text-align:center;border:0;padding:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legacy-order-info-line{position:absolute;left:4px;width:216px;height:20px;display:grid;grid-template-columns:27px minmax(0,1fr) 27px;align-items:center;gap:3px;box-sizing:border-box}
.legacy-order-info-line.legacy-order-number{top:31px}
.legacy-order-info-line.legacy-order-date{top:48px;grid-template-columns:27px minmax(0,1fr)}
.legacy-order-info-line b{font-size:10.4px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.legacy-order-mini,.legacy-order-save,.legacy-order-clear,.legacy-order-scan-button{height:16px;border:1px solid #334559;background:#7894b8;color:#fff;cursor:pointer;font-weight:700;line-height:13px;text-align:center;padding:0;box-sizing:border-box;font-size:10px}
.legacy-order-mini{width:27px}.legacy-order-mini.static{display:inline-flex;align-items:center;justify-content:center;cursor:default}.legacy-order-save,.legacy-order-clear{width:27px}.legacy-order-clear{background:#617a9c;font-size:15px;font-weight:400}.legacy-order-scan-button{width:22px}
.legacy-order-label{position:absolute;top:65px;left:0;width:224px;height:17px;text-align:center;font-size:11.2px;line-height:16px;font-weight:700;margin:0}.legacy-order-label span{font-weight:400}
.legacy-order-select{position:absolute;top:84px;left:45px;width:142px;height:18px;border:1px solid #999;background:#f6f6f6;font:9.8px "Segoe UI",Arial,sans-serif;padding:0 2px;box-sizing:border-box}
.legacy-order-history{position:absolute;left:6px;top:102px}
.legacy-order-summary{position:absolute;top:105px;left:0;width:224px;text-align:center;font-size:11.2px;line-height:15px;margin:0;padding:0}.legacy-order-summary b{font-weight:700}
.legacy-order-formrow{position:absolute;left:0;width:216px;height:18px;display:grid;grid-template-columns:96px 78px 27px;align-items:center;gap:4px;min-height:0;margin:0;padding:0;box-sizing:border-box}
.legacy-order-formrow.legacy-order-creation{top:171px}.legacy-order-formrow.legacy-order-shipping{top:193px}
.legacy-order-formrow label{text-align:right;font-size:11.2px;font-weight:700;line-height:15px}.legacy-order-formrow input,.legacy-order-formrow select{height:18px;min-width:0;border:1px solid #a6a6a6;background:#fff;padding:0 3px;box-sizing:border-box;font:9.8px "Segoe UI",Arial,sans-serif}
.legacy-order-memo-row{position:absolute;left:13px;top:221px;width:201px;height:46px;display:grid;grid-template-columns:152px 27px;gap:5px;margin:0;padding:0}.legacy-order-memo-row textarea{height:45px;resize:none;border:1px solid #999;background:#fff;font:9.8px "Segoe UI",Arial,sans-serif;padding:3px;box-sizing:border-box}.legacy-order-memo-row>div{display:flex;flex-direction:column;gap:12px}
.legacy-order-sep{position:absolute;left:0;width:224px;height:1px;background:#7d7d7d;border-top:1px solid #555;margin:0;padding:0;box-sizing:border-box}.legacy-order-sep-employee{top:275px}.legacy-order-sep-add{top:323px}.legacy-order-sep-remove{top:370px}.legacy-order-sep-reports{top:418px}
.legacy-order-section-title{position:absolute;left:34px;width:166px;height:14px;text-align:center;font-size:11.2px;line-height:14px;font-weight:700;margin:0;padding:0}.legacy-order-employee-title{top:279px}.legacy-order-add-title{top:326px}.legacy-order-remove-title{top:373px}
.legacy-order-employee{position:absolute;left:34px;top:294px;width:154px;height:21px;display:grid;grid-template-columns:21px 130px;gap:3px;align-items:center;padding:0;margin:0}.legacy-order-employee select{height:18px;min-width:0;border:1px solid #999;background:#fff;font:9.8px "Segoe UI",Arial,sans-serif;padding:0 2px;box-sizing:border-box}
.legacy-order-barcode{display:flex;align-items:center;justify-content:center;width:21px;height:21px;padding:0;border:0;background:transparent;color:#eee;font-size:17px;line-height:18px;text-align:center;text-shadow:0 0 1px #222;box-sizing:border-box}.legacy-order-barcode-button{cursor:pointer}
.legacy-order-scan{position:absolute;left:3px;width:211px;height:21px;display:grid;grid-template-columns:27px 21px 129px;gap:3px;align-items:center;padding:0;margin:0}.legacy-order-add-scan{top:342px}.legacy-order-remove-scan{top:389px}.legacy-order-scan input{height:18px;min-width:0;border:1px solid #aaa;background:#fff;padding:0 3px;box-sizing:border-box;font:9.8px "Segoe UI",Arial,sans-serif}
.legacy-order-report-stack{position:absolute;left:26px;top:420px;width:168px;display:flex;flex-direction:column;gap:3px;margin:0;padding:0}
.legacy-order-report{position:relative;width:168px;height:22px;border:1px solid #23384f;background:#7896bd;color:#fff;display:grid;grid-template-columns:26px 1fr 14px;align-items:center;cursor:pointer;font:10.4px "Segoe UI",Arial,sans-serif;padding:0;box-sizing:border-box}.legacy-order-report:hover{filter:brightness(1.05)}.legacy-order-list-icon{font-size:16px;line-height:16px;text-align:center}.legacy-order-report b{text-align:center}.legacy-order-report-check{width:11px;height:11px;border-radius:2px;background:#eee;border:1px solid #aaa;justify-self:center;box-sizing:border-box}
.legacy-order-ok{position:absolute;left:26px;top:522px;width:168px;height:31px;margin:0;border:1px solid #263a50;background:#7896bd;color:#fff;font-weight:700;font-size:10.4px;cursor:pointer;box-sizing:border-box}.legacy-order-ok:hover{filter:brightness(1.05)}
@media (max-width:1050px){.legacy-order-detail-layer{grid-template-columns:minmax(0,1fr) 224px}.legacy-order-table{font-size:10px}}
.legacy-order-report-check.done{background:#e8f4e8;border-color:#c7dfc7;position:relative}
.legacy-order-report-check.done:after{content:"✓";position:absolute;left:1px;top:-4px;color:#2f6f2f;font-size:13px;font-weight:700}
/* 0.9.7 - compacte Delphi popup achter het lijsticoon bij Door. */
.legacy-order-history-popup{position:absolute;right:214px;top:12px;width:392px;height:250px;z-index:24600;background:#e9e9e9;border:1px solid #0f2238;border-radius:9px;box-shadow:0 5px 12px rgba(0,0,0,.5);overflow:hidden;color:#111;font:10px "Segoe UI",Arial,sans-serif}
.legacy-order-history-popup:after{content:"";position:absolute;right:-13px;top:11px;border-width:12px 0 12px 13px;border-style:solid;border-color:transparent transparent transparent #162942}
.legacy-order-history-head{height:28px;background:linear-gradient(#233c5a,#13253c);color:#fff;display:grid;grid-template-columns:52px 1fr 52px;align-items:center;border-bottom:1px solid #071421}.legacy-order-history-head button{grid-column:1;width:43px;height:17px;margin-left:6px;padding:0;border:1px solid #7fa2c9;border-radius:4px;background:#4e83c7;color:#fff;font:9px "Segoe UI",Arial,sans-serif;cursor:pointer}.legacy-order-history-head span{grid-column:2;text-align:center;font-size:10px}
.legacy-order-history-scroll{position:absolute;left:6px;right:6px;top:31px;bottom:7px;overflow:auto;background:#fff;border:1px solid #777}.legacy-order-history-scroll table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:9.5px}.legacy-order-history-scroll th{position:sticky;top:0;background:#f2f2f2;border:1px solid #bbb;padding:2px 4px;text-align:left;font-weight:400}.legacy-order-history-scroll td{border:1px solid #ccc;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.legacy-order-history-scroll th:nth-child(1),.legacy-order-history-scroll td:nth-child(1){width:140px}.legacy-order-history-scroll th:nth-child(2),.legacy-order-history-scroll td:nth-child(2){width:150px}

/* 0.10.0 – KLANTEN > AT - Prijsafspraken.
   TabControl5 heeft in FireMonkey TabPosition=Bottom; de generieke FMX-renderer verbergt tabs,
   daarom wordt alleen voor deze brongetrouw geporteerde module de originele tabbalk toegevoegd. */
#fmx-TabControl5{overflow:hidden!important}
#fmx-TabControl5>.fmx-tab-page{z-index:1}
.price-agreement-tab-strip{position:absolute;left:0;right:0;bottom:0;height:50px;display:flex;align-items:stretch;justify-content:flex-start;z-index:40;background:#dedede;border-top:1px solid #b9b9b9;box-sizing:border-box}
.price-agreement-tab{height:50px;flex:0 0 auto;margin:0;padding:0 10px;border:0;border-right:1px solid #b8b8b8;background:linear-gradient(#e5e5e5,#d5d5d5);color:#333;font:13px "Segoe UI",Arial,sans-serif;cursor:pointer;box-sizing:border-box}
.price-agreement-tab:hover{background:linear-gradient(#eeeeee,#dcdcdc)}
.price-agreement-tab.active{background:#596579;color:#fff;border-right-color:#596579;font-weight:400}
.price-agreement-tab.hidden{display:none}
#fmx-StringGrid43.grid-selected{background:#b9cee4}
#fmx-StringGrid43 .legacy-grid-table,#fmx-StringGrid44 .legacy-grid-table,#fmx-StringGrid45 .legacy-grid-table{width:max-content;min-width:100%;font-size:12px}
#fmx-StringGrid43 .legacy-grid-table th,#fmx-StringGrid43 .legacy-grid-table td,#fmx-StringGrid44 .legacy-grid-table th,#fmx-StringGrid44 .legacy-grid-table td,#fmx-StringGrid45 .legacy-grid-table th,#fmx-StringGrid45 .legacy-grid-table td{height:23px!important;padding:1px 4px!important}
#fmx-StringGrid43 .legacy-grid-table tbody tr:nth-child(even),#fmx-StringGrid44 .legacy-grid-table tbody tr:nth-child(even),#fmx-StringGrid45 .legacy-grid-table tbody tr:nth-child(even){background:#d8d8d8!important}
#fmx-StringGrid43 .legacy-grid-table tbody tr:nth-child(odd),#fmx-StringGrid44 .legacy-grid-table tbody tr:nth-child(odd),#fmx-StringGrid45 .legacy-grid-table tbody tr:nth-child(odd){background:#fff!important}
#fmx-StringGrid43 .legacy-grid-table tbody tr.grid-selected,#fmx-StringGrid44 .legacy-grid-table tbody tr.grid-selected,#fmx-StringGrid45 .legacy-grid-table tbody tr.grid-selected{background:#9ecce3!important}
#fmx-StringGrid44 .price-agreement-check,#fmx-StringGrid45 .price-agreement-check{text-align:center;padding:0!important}
#fmx-StringGrid44 .price-agreement-check input,#fmx-StringGrid45 .price-agreement-check input{width:14px;height:14px;margin:0;vertical-align:middle}
#fmx-StringGrid43.disabled{opacity:.58;pointer-events:none}

.price-agreement-picker-dialog{width:min(760px,calc(100vw - 48px));height:min(520px,calc(100vh - 48px))}
.price-agreement-picker-dialog .web-detail-body{display:flex;flex-direction:column;min-height:0;background:#d7d7d7}
.price-agreement-picker-search{display:grid;grid-template-columns:minmax(180px,1fr) 150px 82px 72px;gap:4px;padding:8px;background:#d7d7d7}
.price-agreement-picker-search input,.price-agreement-picker-search button{height:25px;box-sizing:border-box;font:12px "Segoe UI",Arial,sans-serif}
.price-agreement-picker-grid{flex:1;min-height:0;margin:0 8px 8px;overflow:auto;border:1px solid #888;background:#fff}
.price-agreement-picker-grid table{width:100%;border-collapse:collapse;table-layout:fixed;font:12px "Segoe UI",Arial,sans-serif}
.price-agreement-picker-grid th,.price-agreement-picker-grid td{height:23px;border-right:1px solid #d0d0d0;border-bottom:1px solid #d8d8d8;padding:1px 5px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.price-agreement-picker-grid th{position:sticky;top:0;background:#f0f0f0;z-index:2}
.price-agreement-picker-grid th:nth-child(1){width:110px}.price-agreement-picker-grid th:nth-child(2){width:auto}.price-agreement-picker-grid th:nth-child(3){width:170px}
.price-agreement-picker-grid tbody tr:nth-child(even){background:#e0e0e0}.price-agreement-picker-grid tbody tr.grid-selected{background:#9ecce3!important}

/* 0.11.1 - INKOOP > AT - Verwacht / inkoopdetail.
   Bron: TabbedTemplate.fmx ST-Inkoopdetail (1490x672). De detailweergave neemt net als
   FireMonkey de volledige TabControl1 client-area over; geen webmodal/popup. */
.legacy-purchase-detail-layer{position:absolute;inset:0;z-index:24700;display:grid;grid-template-columns:minmax(0,1fr) 276px;background:#fff;color:#111;font:12px Arial,"Segoe UI",sans-serif;overflow:hidden;box-sizing:border-box}
.legacy-purchase-left{min-width:0;height:100%;overflow:hidden;background:#fff;border-right:1px solid #4a4a4a}
.legacy-purchase-tree-scroll{width:100%;height:100%;overflow:auto;background:#fff}
.legacy-purchase-tree{border-collapse:separate;border-spacing:0;width:100%;min-width:1120px;table-layout:fixed;background:#fff;font:11px Arial,"Segoe UI",sans-serif}
.legacy-purchase-tree th{position:sticky;top:0;z-index:12;height:26px;padding:3px 4px;border-right:1px solid #b7b7b7;border-bottom:1px solid #9a9a9a;background:#f8f8f8;color:#111;font-size:11px;font-weight:400;text-align:left;white-space:nowrap;box-sizing:border-box}
.legacy-purchase-tree th:last-child{border-right:0}
.legacy-purchase-tree td{height:58px;padding:3px 4px;border:0;vertical-align:middle;white-space:nowrap;font-size:11px;box-sizing:border-box}
.legacy-purchase-tree tbody tr{cursor:default;background:#fff}
.legacy-purchase-tree tbody tr.no-units{background:#ffb6c1}
.legacy-purchase-tree tbody tr.selected{background:#20a8e8!important;color:#fff}
.legacy-purchase-tree tbody tr.selected input,.legacy-purchase-tree tbody tr.selected select{color:#fff}
.legacy-purchase-tree tbody tr.selected .purchase-grid-edit:hover,.legacy-purchase-tree tbody tr.selected .purchase-grid-edit:focus{background:#fff!important;color:#111!important;caret-color:#111}
.legacy-purchase-tree tbody tr:focus{outline:1px dotted #285d80;outline-offset:-1px}
.legacy-purchase-tree tr.purchase-unit td{height:24px;background:#fff;color:#333;font-size:11px}
.legacy-purchase-tree tr.purchase-unit.received td{background:#f5f5f5}
.legacy-purchase-tree tr.purchase-unit.selected td{background:#20a8e8;color:#fff}
.purchase-product{display:flex;align-items:center;gap:6px;position:relative;padding-left:22px!important;overflow:hidden}
.purchase-product .purchase-tree-line{position:absolute;left:18px;top:0;bottom:-24px;border-left:1px dotted #aaa}
.purchase-product img{width:46px;height:27px;object-fit:cover;background:#eee;flex:0 0 auto}
.purchase-product img.missing{visibility:hidden}
.purchase-product>span:last-child{overflow:hidden;text-overflow:ellipsis}
.purchase-unit-tree{position:relative}.purchase-unit-tree:before{content:"";position:absolute;left:18px;top:-14px;height:27px;border-left:1px dotted #aaa}.purchase-unit-tree:after{content:"";position:absolute;left:18px;top:12px;width:14px;border-top:1px dotted #aaa}
.purchase-grid-edit{width:100%;height:25px;min-width:0;border:1px solid transparent;background:transparent;color:inherit;font:11px Arial,"Segoe UI",sans-serif;padding:1px 2px;box-sizing:border-box;outline:0}
select.purchase-grid-edit{appearance:none;-webkit-appearance:none;background-image:none}
.purchase-grid-edit:hover,.purchase-grid-edit:focus{border-color:#8fa6b8;background:#fff;color:#111}
.purchase-header-check{display:flex;align-items:center;gap:5px}.purchase-header-check input{margin:0;width:14px;height:14px}
.purchase-sample-all{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:2px;align-items:center}.purchase-sample-all select,.purchase-sample-all button{height:22px;border:1px solid #aaa;background:#fff;font:11px Arial,"Segoe UI",sans-serif;box-sizing:border-box}.purchase-sample-all button{cursor:pointer}
.purchase-empty{height:52px!important;text-align:center;color:#666;background:#fff!important}

/* Rechtervlak bron: xFF666565, ongeveer 276px op 1490 bronpixels. */
.legacy-purchase-side{position:relative;height:100%;min-height:0;overflow:hidden;background:#666;color:#fff;border-left:0;box-sizing:border-box;font:12px Arial,"Segoe UI",sans-serif}
.purchase-company{position:absolute;left:7px;right:7px;top:5px;height:16px;display:flex;align-items:center;justify-content:flex-start;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;padding:0 2px;box-sizing:border-box}
.purchase-meta{position:absolute;left:12px;right:10px;height:18px;display:grid;grid-template-columns:114px minmax(0,1fr);align-items:center;gap:7px;line-height:15px;font-size:11px}.purchase-meta b{text-align:right;font-weight:700}.purchase-meta strong,.purchase-meta span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}.purchase-meta-order{top:28px}.purchase-meta-created{top:47px}.purchase-meta-created-date{top:66px}.purchase-meta-status{top:85px}.purchase-meta-modified{top:106px}.purchase-meta-modified-date{top:125px}
.purchase-meta-status select{width:116px;height:21px;border:1px solid #999;background:#fff;color:#111;font:11px Arial,"Segoe UI",sans-serif;padding:0 4px;box-sizing:border-box}
.purchase-side-sep{position:absolute;left:0;right:0;top:152px;height:1px;border-top:1px solid #7d7d7d;background:#555}
.purchase-total{position:absolute;left:12px;right:10px;display:grid;grid-template-columns:114px minmax(0,1fr);align-items:start;line-height:17px;font-size:11px}.purchase-total b{text-align:right}.purchase-total span{padding-left:7px}.purchase-total-requested{top:160px}.purchase-total-confirmed{top:180px}.purchase-total-delivered{top:200px}.purchase-total-delivered small{grid-column:2;padding-left:7px;font-size:11px}.purchase-total-lines{top:238px}.purchase-total-lines span{font-size:11px}
.purchase-delete-order{position:absolute;right:16px;top:186px;width:36px;height:41px;border:1px solid #222;background:#ff1c13;color:#fff;font-size:22px;line-height:31px;cursor:pointer;padding:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden}.purchase-delete-order img{display:block;width:23px;height:22px;max-width:23px;max-height:22px;object-fit:contain;object-position:center;flex:0 0 23px}
.purchase-side-actions{position:absolute;inset:0;display:block;pointer-events:none}
.purchase-side-btn{position:absolute;left:33px;width:209px;height:34px;min-height:34px;border:1px solid #23384f;background:#758bab;color:#fff;display:grid;grid-template-columns:34px 1fr 18px;align-items:center;padding:0 4px;box-sizing:border-box;cursor:pointer;font:11px Arial,"Segoe UI",sans-serif;pointer-events:auto;overflow:hidden}.purchase-side-btn b{font-weight:700;text-align:center;grid-column:2;white-space:nowrap;position:relative;z-index:2}.purchase-side-icon{display:block;width:21px;height:20px;max-width:21px;max-height:20px;object-fit:contain;object-position:center;text-align:center;grid-column:1;justify-self:center;align-self:center;position:relative;z-index:2}.purchase-side-btn:not(:has(.purchase-side-icon)) b{grid-column:1/4}.purchase-side-btn:hover{filter:brightness(1.06)}.purchase-side-btn.conditional{display:none}.purchase-side-btn.conditional.visible{display:grid}
.purchase-side-btn[data-purchase-action="unit-import"]{left:31px;top:270px}
.purchase-side-btn[data-purchase-action="checkin"]{left:32px;top:307px;width:103px}
.purchase-side-btn[data-purchase-action="checkin-all"]{left:137px;top:307px;width:103px}
.purchase-side-btn[data-purchase-action="checkout"]{left:32px;top:344px}
.purchase-side-btn[data-purchase-action="delete-units"]{left:32px;top:418px}
.purchase-side-btn[data-purchase-action="add-units"]{top:455px}
.purchase-side-btn[data-purchase-action="purchase-pdf"]{top:492px}
.purchase-side-btn[data-purchase-action="undelivered-pdf"]{top:529px}
.purchase-side-btn[data-purchase-action="close"]{top:566px;height:58px;min-height:58px}
.purchase-inert-check{grid-column:3;width:13px;height:13px;border:1px solid #b7b7b7;background:#eee;border-radius:2px;justify-self:center}
/* Rectangle38: checkbox staat buiten de knop; printer, waarschuwing, labelvoorraad en tekst staan IN de knop. */
.purchase-label-row{position:absolute;left:0;right:0;top:381px;height:34px;pointer-events:none;display:none}.purchase-label-row.visible{display:block}.purchase-label-row .purchase-side-btn{left:32px;top:0;pointer-events:auto}.purchase-label-list{position:absolute;left:4px;top:7px;width:20px;height:20px;display:none;pointer-events:auto;z-index:5}.purchase-label-row.visible .purchase-label-list{display:block}.purchase-label-list input{width:15px;height:15px;margin:0}.purchase-print-labels{padding:0!important;overflow:hidden}.purchase-print-labels.conditional.visible{display:block}.purchase-print-labels .purchase-print-icon{position:absolute;left:10px;top:6px;width:21px;height:20px;max-width:21px;max-height:20px;object-fit:contain;margin:0}.purchase-print-labels .purchase-label-warning-icon{position:absolute;left:40px;top:6px;width:21px;height:20px;max-width:21px;max-height:20px;object-fit:contain;z-index:3;pointer-events:none}.purchase-print-labels .purchase-label-stock{position:absolute;left:67px;top:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:8.5px;line-height:24px;font-weight:700;color:#fff;z-index:3;pointer-events:none;padding:0}.purchase-print-labels b{position:absolute;left:91px;top:0;width:104px;height:34px;display:flex;align-items:center;justify-content:flex-end;font-size:11px;line-height:34px;text-align:right;padding:0;margin:0;z-index:3}

/* Child-unit editvlak (Rectangle93). */
.purchase-unit-editor{position:absolute;right:12px;top:290px;width:242px;height:224px;z-index:24760;background:#666;color:#fff;border:1px solid #4b4b4b;box-shadow:0 2px 7px rgba(0,0,0,.35);font:13px Arial,"Segoe UI",sans-serif;padding:0 12px}
.purchase-unit-editor-title{height:34px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}.purchase-unit-editor-x{position:absolute;right:4px;top:4px;width:25px;height:23px;border:1px solid #444;background:#758bab;color:#fff;cursor:pointer}.purchase-unit-art{position:absolute;left:12px;top:42px;font-weight:700}.purchase-unit-roll{position:absolute;left:12px;top:62px}.purchase-unit-received{position:absolute;left:12px;top:91px;display:flex;align-items:center;gap:7px}.purchase-unit-length{position:absolute;left:12px;top:118px;display:grid;grid-template-columns:60px 110px;gap:7px;align-items:center}.purchase-unit-length input{height:24px;border:1px solid #aaa;padding:2px 4px;box-sizing:border-box}.purchase-unit-actions{position:absolute;left:12px;right:12px;top:157px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.purchase-unit-actions button{height:31px;border:1px solid #526277;background:#758bab;color:#fff;font-weight:700;cursor:pointer}

/* Rectangle50 - Toevoegen Units. */
.purchase-add-units{position:absolute;z-index:24840;left:38.6%;right:0;top:0;bottom:0;background:#cacaca;border-left:1px solid #555;color:#111;display:grid;grid-template-columns:255px minmax(0,1fr);gap:16px;padding:18px 20px 28px 16px;box-sizing:border-box;font:12px Arial,"Segoe UI",sans-serif}
.purchase-add-units fieldset{border:1px solid #888;margin:0;padding:8px;background:#c9c9c9;min-width:0}.purchase-add-units legend{padding:0 5px;background:#c9c9c9}.purchase-add-search{height:calc(100% - 6px);display:flex;flex-direction:column}.purchase-add-query{display:grid;grid-template-columns:1fr 54px 72px;gap:2px}.purchase-add-query input,.purchase-add-query button{height:25px;border:1px solid #999;background:#fff;box-sizing:border-box;font:12px Arial,"Segoe UI",sans-serif}.purchase-add-query button{cursor:pointer}.purchase-add-results{margin-top:6px;flex:1;overflow:auto;border:1px solid #aaa;background:#eee}.purchase-add-result{width:100%;min-height:48px;display:grid;grid-template-columns:56px 1fr;align-items:center;gap:6px;border:0;border-bottom:1px solid #bbb;background:#eee;text-align:left;cursor:pointer;padding:3px}.purchase-add-result:hover{background:#dceaf4}.purchase-add-result img{width:52px;height:36px;object-fit:cover}.purchase-add-result img.missing{visibility:hidden}.purchase-add-result span{min-width:0}.purchase-add-result b,.purchase-add-result small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.purchase-add-empty{padding:12px;color:#666}
.purchase-add-main{min-width:0;display:grid;grid-template-rows:47px minmax(0,1fr);gap:8px}.purchase-add-top{display:grid;grid-template-columns:200px 1fr 144px 145px;gap:8px}.purchase-add-top button{height:44px;border:1px solid #aaa;background:linear-gradient(#f8f8f8,#e5e5e5);cursor:pointer;font:12px Arial,"Segoe UI",sans-serif}.purchase-add-lines{min-height:0;overflow:auto!important}.purchase-add-lines table{width:100%;border-collapse:collapse;table-layout:fixed;background:#fff}.purchase-add-lines th,.purchase-add-lines td{height:29px;border:1px solid #aaa;padding:2px 4px;text-align:left;box-sizing:border-box}.purchase-add-lines th{background:#f5f5f5;font-weight:400}.purchase-add-lines th:nth-child(1){width:22%}.purchase-add-lines th:nth-child(2){width:13%}.purchase-add-lines th:nth-child(3){width:12%}.purchase-add-lines th:nth-child(4){width:20%}.purchase-add-lines th:nth-child(5){width:15%}.purchase-add-lines th:nth-child(6){width:10%}.purchase-add-lines input,.purchase-add-lines select{width:100%;height:23px;border:1px solid #aaa;font:12px Arial,"Segoe UI",sans-serif;box-sizing:border-box}.purchase-add-trash{width:30px!important;height:24px!important;border:0!important;background:transparent!important;cursor:pointer;font-size:18px}

/* Rectangle76 - Unit Import. */
.purchase-unit-import-back{position:absolute;inset:0;z-index:24900;background:rgba(255,255,255,.80);display:flex;align-items:center;justify-content:center}.purchase-unit-import{position:relative;width:436px;height:377px;background:#666;color:#fff;border:1px solid #3d3d3d;box-shadow:0 4px 14px rgba(0,0,0,.38);font:12px Arial,"Segoe UI",sans-serif;box-sizing:border-box}.purchase-unit-import h2{position:absolute;left:16px;right:19px;top:0;height:53px;margin:0;display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:18px;line-height:22px;border-bottom:1px solid #cfcece}.purchase-unit-import h2 span{font-size:18px}.purchase-unit-import-print{position:absolute;left:8px;top:5px;font-size:11px}.purchase-unit-import-printer{position:absolute;right:16px;top:34px;font-size:11px}.purchase-unit-import-stock{position:absolute;left:15px;top:-84px;width:120px;color:#111;text-align:center;display:none}.purchase-unit-import-cols{position:absolute;left:70px;top:58px;display:grid;grid-template-columns:146px 146px;gap:6px}.purchase-unit-import-cols label{display:grid;grid-template-rows:20px 233px}.purchase-unit-import-cols textarea{resize:none;border:1px solid #aaa;font:12px Consolas,monospace;padding:4px;box-sizing:border-box}.purchase-unit-import-add{position:absolute;left:220px;bottom:16px}.purchase-unit-import-mode{position:absolute;left:224px;bottom:12px;display:none}.purchase-unit-import-actions{position:absolute;left:16px;right:11px;bottom:11px;display:grid;grid-template-columns:65px 129px 1fr 81px;gap:7px;border-top:1px solid #cfcece;padding-top:11px}.purchase-unit-import-actions:before{content:""}.purchase-unit-import-actions button{height:30px;border:1px solid #aaa;background:linear-gradient(#fff,#e5e5e5);color:#111;cursor:pointer}.purchase-unit-import-actions button:nth-child(1){grid-column:1}.purchase-unit-import-actions button:nth-child(2){grid-column:2}.purchase-unit-import-actions button:nth-child(3){grid-column:4}.purchase-browser-printer-note{position:absolute;left:10px;right:10px;bottom:-53px;margin:0;color:#333;background:#fff8d9;border:1px solid #d8cc91;padding:5px;font-size:10px;line-height:13px}

@media (max-width:1150px){.legacy-purchase-detail-layer{grid-template-columns:minmax(0,1fr) 276px}.purchase-add-units{left:34%}}

/* 0.11.6 catalog detail/editor refinement */
.catalog-detail-dialog{width:min(1280px,calc(100vw - 24px))}
.web-catalog-detail{display:grid;grid-template-columns:minmax(410px,42%) minmax(610px,58%);gap:14px;align-items:stretch}
.web-catalog-left,.web-catalog-right{display:flex;flex-direction:column;min-height:0}
.web-catalog-left img{width:100%;height:305px;max-height:none;object-fit:cover;background:#eee;border:1px solid #aaa}
.web-catalog-panels{display:grid;grid-template-columns:255px minmax(0,1fr);gap:8px;margin-top:8px;align-items:stretch}
.web-catalog-stack{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:8px;min-height:252px}
.web-catalog-panel{display:flex;flex-direction:column;min-height:0}
.web-catalog-panel-properties{min-height:252px}
.web-catalog-panel-properties .content{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.web-catalog-panel-tall .content{flex:1;min-height:92px;display:flex;align-items:center;justify-content:center}
.web-catalog-tools{display:flex;gap:10px;align-items:center}
.web-catalog-tools button{width:20px;height:20px;border:0!important;background:transparent!important;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:none!important;color:#fff}
.web-catalog-tools svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.web-stock-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;flex:0 0 auto;margin-bottom:5px;overflow:visible;padding-bottom:0}
.web-stock-tabs button{border:1px solid #aaa;border-radius:5px 5px 0 0;background:#d1d1d1;padding:7px 6px;cursor:pointer;white-space:normal;font-size:12px;line-height:1.15;min-width:0;text-align:center}
#web-stock-grid{flex:1 1 auto;min-height:0;overflow:auto}
.catalog-editor-inline-roll{grid-template-columns:minmax(0,1fr) auto}
.catalog-editor-inline button{height:28px;border:1px solid #7d899a;background:#758bab;color:#fff;padding:0 10px;cursor:pointer;white-space:nowrap;font-size:12px}

/* 0.11.8 – hoofdtabbladen + sluitbare tabs + lokale rapportmodus */
#fmx-TabControl1{position:absolute;overflow:hidden}
#fmx-TabControl1.web-tabs-top>.fmx-tab-page{top:29px!important;height:calc(100% - 29px)!important}
#fmx-TabControl1.web-tabs-bottom>.fmx-tab-page{top:0!important;height:calc(100% - 29px)!important}
.web-main-tabs{position:absolute;left:0;right:0;height:29px;z-index:1200;display:flex;align-items:flex-end;gap:2px;padding:3px 4px 0;box-sizing:border-box;background:#d5d5d5;border-color:#8c8c8c;overflow:hidden}
.web-main-tabs[hidden]{display:none!important}
.web-main-tabs.top{top:0;border-bottom:1px solid #8c8c8c}
.web-main-tabs.bottom{bottom:0;align-items:flex-start;padding:0 4px 3px;border-top:1px solid #8c8c8c}
.web-main-tabs button{height:25px;min-width:92px;max-width:210px;padding:3px 5px 3px 10px;border:1px solid #9b9b9b;background:linear-gradient(#f7f7f7,#d4d4d4);color:#111;font:12px Arial,"Segoe UI",sans-serif;white-space:nowrap;overflow:hidden;cursor:pointer;border-radius:4px 4px 0 0;display:flex;align-items:center;gap:6px}
.web-main-tabs.bottom button{border-radius:0 0 4px 4px}
.web-main-tabs button.active{background:#758bab;color:#fff;border-color:#455b78;font-weight:700}
.web-main-tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;text-align:left}
.web-main-tab-close{width:17px;height:17px;flex:0 0 17px;border-radius:2px;display:flex;align-items:center;justify-content:center;font:bold 15px/15px Arial,sans-serif;color:inherit;opacity:.78;cursor:pointer}
.web-main-tab-close:hover{background:#d83a34;color:#fff;opacity:1}
.web-main-tabs button.active .web-main-tab-close{opacity:.95}
.web-report-mode-switch{position:absolute!important;right:68px!important;left:auto!important;top:5px!important;width:50px!important;height:36px!important;z-index:1600!important;border:1px solid rgba(255,255,255,.78)!important;border-radius:4px;background:rgba(255,255,255,.05)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:3px;padding:2px 4px!important;box-sizing:border-box;cursor:pointer;box-shadow:none!important}
.web-report-mode-switch:hover{background:rgba(255,255,255,.15)!important}
.web-report-mode-switch[data-mode="download"]{background:rgba(24,46,75,.22)!important}
.web-report-mode-switch svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.web-report-mode-switch small{font:700 8px Arial,"Segoe UI",sans-serif;line-height:1;color:#fff}

/* 0.11.9 - AT Standaard */
.standard-dialog{width:min(980px,calc(100vw - 44px))}
.standard-dialog .web-detail-body{padding:16px;background:#d7d7d7}
.standard-layout{display:grid;grid-template-columns:minmax(0,1fr) 170px 215px;gap:12px;min-height:500px}
.standard-input-card,.standard-options{border:1px solid #8d8d8d;background:#efefef;display:flex;flex-direction:column;min-width:0}
.standard-input-card h3,.standard-options h3{margin:0;background:#515969;color:#fff;padding:8px 10px;font-size:13px;text-align:left}
.standard-input-card textarea{margin:10px 10px 6px;min-height:390px;resize:none;border:1px solid #9c9c9c;background:#fff;padding:8px;font:13px Arial,"Segoe UI",sans-serif;box-sizing:border-box;white-space:pre;overflow:auto}
.standard-locations textarea{font-size:13px;text-align:left}
.standard-help{padding:0 10px 8px;font-size:11px;line-height:1.4;color:#555;min-height:34px}
.standard-field-actions{display:flex;gap:8px;padding:0 10px 10px;margin-top:auto}
.standard-field-actions button,.standard-options button{border:1px solid #7c8797;background:linear-gradient(#fff,#d8d8d8);height:34px;padding:0 14px;cursor:pointer;font:12px Arial,"Segoe UI",sans-serif}
.standard-field-actions button{flex:1}
.standard-options{padding-bottom:12px}
.standard-options>label{display:flex;flex-direction:column;gap:6px;padding:14px 12px 4px;font-size:12px;font-weight:700}
.standard-options input[type="number"]{height:32px;border:1px solid #999;background:#fff;padding:4px 7px;font:13px Arial,"Segoe UI",sans-serif;box-sizing:border-box}
.standard-options>small{padding:0 12px 14px;color:#555;line-height:1.35}
.standard-options button{margin:0 12px 9px;background:#758bab;color:#fff;border-color:#40546c;font-weight:700}
.standard-options button.standard-report{margin-top:4px}
.standard-options>label.standard-detail-toggle{display:flex;flex-direction:row;align-items:center;gap:8px;padding:2px 12px 10px;font-size:12px;font-weight:700;cursor:pointer}
.standard-options>label.standard-detail-toggle input{margin:0;width:15px;height:15px;accent-color:#758bab}
.standard-mode,.standard-legend{margin:5px 12px 0;padding:9px;border-top:1px solid #bbb;font-size:11px;line-height:1.4;color:#444}
.standard-legend{margin-top:auto}
.web-demo-mode .fmx-menu-item{cursor:default}
.web-demo-mode [data-fmx-name="WebATStandard"]{cursor:pointer}

/* 0.12.16 - ST Backorders concept-picklists + orderdetail 1:1 alignment */
#fmx-WebBackorderConceptDownload{font-size:11px!important;color:#222!important;z-index:8!important;pointer-events:auto!important;gap:4px!important}
#fmx-WebBackorderConceptDownload input{width:14px;height:14px;margin:0}
#fmx-Button94{z-index:8!important}
.web-demo-mode [data-fmx-name="WebATStandard"],.web-demo-mode [data-fmx-name="Label24"],.web-demo-mode [data-fmx-name="Label25"]{cursor:pointer}

/* Rechter orderpaneel: de controls centreren zoals in het originele FMX-scherm. */
.legacy-order-select{left:43px;width:145px}
.legacy-order-formrow{left:-9px;width:225px}
.legacy-order-memo-row{left:11px;width:203px}
.legacy-order-section-title{left:31px;width:172px}
.legacy-order-employee{left:31px;width:160px;grid-template-columns:21px 136px}
.legacy-order-report-stack{left:28px}
.legacy-order-ok{left:28px}


/* 0.12.17 - ST Orders/Backorders orderdetail: 1:1 uitlijning t.o.v. originele FMX TabItem28. */
.legacy-order-detail-layer{grid-template-columns:minmax(0,1fr) 227px}
.legacy-order-side{background:rgb(102,101,101)}
.legacy-order-customer{left:8px;top:1px;width:211px}
.legacy-order-info-line{left:6px;width:212px}
.legacy-order-label{top:65px;width:227px}
.legacy-order-select{top:84px;left:46px;width:145px}
.legacy-order-history{left:6px;top:102px}
.legacy-order-summary{top:107px;width:227px}
.legacy-order-formrow{left:-7px;width:228px;grid-template-columns:96px 78px 28px}
.legacy-order-formrow.legacy-order-creation{top:174px}
.legacy-order-formrow.legacy-order-shipping{top:195px;left:-8px;grid-template-columns:96px 79px 28px}
.legacy-order-memo-row{left:15px;top:224px;width:187px;height:44px;grid-template-columns:154px 28px;gap:5px}
.legacy-order-memo-row textarea{width:154px;height:43px;overflow-y:scroll;scrollbar-gutter:stable}
.legacy-order-sep{width:227px}
.legacy-order-sep-memo{top:215px}
.legacy-order-sep-employee{top:275px}
.legacy-order-employee-title{top:280px}
.legacy-order-employee{left:36px;top:296px;width:160px;grid-template-columns:21px 133px}
.legacy-order-sep-add{top:323px}
.legacy-order-add-title{top:329px}
.legacy-order-scan{left:4px;width:216px;grid-template-columns:27px 21px 131px;gap:5px}
.legacy-order-add-scan{top:346px}
.legacy-order-sep-remove{top:372px}
.legacy-order-remove-title{top:376px}
.legacy-order-remove-scan{top:394px}
.legacy-order-sep-reports{top:420px}
.legacy-order-report-stack{left:29px}
.legacy-order-ok{left:29px}

/* Gebruik dezelfde pictogrammen als in de FMX controls in plaats van Unicode-benaderingen. */
.legacy-order-mini,.legacy-order-save,.legacy-order-clear,.legacy-order-barcode{background-position:center;background-repeat:no-repeat}
.legacy-order-mini[data-copy-order]{font-size:0;background-image:url("fmx/main/Image97.png");background-size:13px 11px}
.legacy-order-mini[data-copy-customer]{font-size:0;background-image:url("fmx/main/Image113.png");background-size:13px 11px}
.legacy-order-info-line .legacy-order-mini.static{font-size:0;background-image:url("fmx/main/Image149.png");background-size:13px 13px}
.legacy-order-history{font-size:0;background-image:url("fmx/main/Image120.png");background-size:13px 11px}
.legacy-order-save[data-save-creation]{font-size:0;background-image:url("fmx/main/Image115.png");background-size:13px 13px}
.legacy-order-save[data-save-shipping]{font-size:0;background-image:url("fmx/main/Image119.png");background-size:13px 13px}
.legacy-order-save[data-save-memo]{font-size:0;background-image:url("fmx/main/Image99.png");background-size:13px 13px}
.legacy-order-clear[data-clear-memo]{font-size:0;background-image:url("fmx/main/Image100.png");background-size:13px 13px}
.legacy-order-mini[data-release-last]{font-size:0;background-image:url("fmx/main/Image98.png");background-size:13px 11px}
.legacy-order-save,.legacy-order-clear{width:28px}
.legacy-order-barcode{font-size:0!important;text-shadow:none!important;background-image:url("fmx/main/Image84.png");background-size:21px 21px}


/* 0.12.18 - ST Orders/Backorders: labels rechts uitlijnen op exact dezelfde dubbele-puntlijn als Datum. */
.legacy-order-info-line.legacy-order-date{
  grid-template-columns:27px 47px minmax(0,1fr);
  gap:3px;
}
.legacy-order-info-line.legacy-order-date b{
  text-align:right;
  overflow:visible;
  text-overflow:clip;
}
.legacy-order-info-line.legacy-order-date>span:last-child{
  white-space:nowrap;
  text-align:left;
}
.legacy-order-kv{
  display:grid;
  grid-template-columns:83px minmax(0,1fr);
  column-gap:4px;
  align-items:center;
  box-sizing:border-box;
}
.legacy-order-kv b{
  text-align:right;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}
.legacy-order-kv span{
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.legacy-order-label.legacy-order-kv{
  left:0;
  width:227px;
  text-align:initial;
}
.legacy-order-summary{
  text-align:initial;
}
.legacy-order-summary .legacy-order-kv{
  width:227px;
  height:15px;
  line-height:15px;
}
/* Medewerker in het origineel staat duidelijk verder links dan in 0.12.17. */
.legacy-order-employee-title{
  left:18px;
  width:172px;
}
.legacy-order-employee{
  left:34px;
}

/* 0.12.19 - extra 24-uurs toegangspoort + demo ST Catalogus */
.web-demo-mode [data-fmx-name="Label19"]{cursor:pointer}
body.access-gate-locked #viewport,
body.access-gate-locked #status,
body.access-gate-locked #audit-panel,
body.access-gate-locked #modal-host{visibility:hidden!important}
.access-gate{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 50% 22%,#f8fafc 0,#e6e9ed 48%,#cfd5dc 100%);user-select:none}
.access-gate[hidden]{display:none!important}
.access-gate-card{width:min(430px,calc(100vw - 32px));background:#fff;border:1px solid #b9c2cc;border-radius:12px;box-shadow:0 22px 65px rgba(24,37,51,.28);overflow:hidden}
.access-gate-head{padding:24px 30px 17px;text-align:center;border-bottom:1px solid #e2e5e9;background:linear-gradient(#fff,#f7f8f9)}
.access-gate-logo{display:block;width:185px;max-height:135px;object-fit:contain;margin:0 auto 8px}
.access-gate-head h1{margin:0;color:#465565;font:700 20px/1.25 Segoe UI,Arial,sans-serif}
.access-gate-head p{margin:7px 0 0;color:#6a7580;font:12px/1.45 Segoe UI,Arial,sans-serif}
.access-gate-form{padding:22px 30px 27px}
.access-gate-field{display:block;margin:0 0 14px;color:#3d4853;font:600 12px/1.2 Segoe UI,Arial,sans-serif}
.access-gate-field span{display:block;margin:0 0 6px}
.access-gate-field input{display:block;width:100%;height:39px;border:1px solid #aeb8c3;border-radius:5px;background:#fff;color:#222;padding:7px 10px;outline:none;font:14px Segoe UI,Arial,sans-serif;user-select:text}
.access-gate-field input:focus{border-color:#708baa;box-shadow:0 0 0 3px rgba(112,139,170,.16)}
.access-gate-error{margin:2px 0 13px;padding:9px 10px;border:1px solid #dfb5b5;border-radius:5px;background:#fff4f4;color:#9b2727;font:12px/1.35 Segoe UI,Arial,sans-serif}
.access-gate-submit{width:100%;height:40px;border:1px solid #526a85;border-radius:5px;background:linear-gradient(#8399b4,#6e86a3);color:#fff;cursor:pointer;font:700 13px Segoe UI,Arial,sans-serif;box-shadow:inset 0 1px rgba(255,255,255,.25)}
.access-gate-submit:hover{background:linear-gradient(#8da2bc,#758daa)}
.access-gate-submit:disabled{opacity:.65;cursor:wait}
.access-gate-foot{margin:12px 0 0;text-align:center;color:#88919a;font:11px/1.35 Segoe UI,Arial,sans-serif}

/* 0.12.20 - layout polish, optionele responsive modus en detailcorrecties */
/* Cataloguskaarten: dichter bij de compactere Delphi-maat uit het origineel. */
#fmx-VertScrollBox1.legacy-card-scroll,#fmx-VertScrollBox5.legacy-card-scroll,#fmx-VertScrollBox13.legacy-card-scroll{
  grid-template-columns:repeat(6,190px)!important;
  grid-auto-rows:132px!important;
  gap:7px 9px!important;
  padding:6px 12px!important;
}
.catalog-card{width:190px!important;height:132px!important;font-size:11px!important}
.catalog-card-title{height:19px!important;font-size:11px!important;padding:0 3px!important}
.catalog-card-image{height:81px!important}
.catalog-card-vnv{width:60px!important;min-height:36px!important;gap:2px!important;padding:2px!important}
.catalog-card-vnv strong,.catalog-card-stats strong{font-size:10px!important}
.catalog-card-vnv span,.catalog-card-stats span{font-size:10px!important}
.catalog-card-stats{height:32px!important;gap:5px!important}
.catalog-card-stats>div{gap:1px!important}

/* Catalogusdetail: alle voorraadgrids vullen de rechterkolom tot dezelfde bodem als TARIC. */
.catalog-detail-dialog .web-detail-body{display:flex!important;flex-direction:column!important;overflow:hidden!important}
.catalog-detail-dialog .web-catalog-detail{flex:1 1 auto;min-height:0;height:100%;align-items:stretch}
.catalog-detail-dialog .web-catalog-left,.catalog-detail-dialog .web-catalog-right{min-height:0;display:flex;flex-direction:column}
.catalog-detail-dialog .web-catalog-left>img{flex:0 0 auto}
.catalog-detail-dialog .web-catalog-panels{flex:1 1 auto;min-height:0}
.catalog-detail-dialog .web-catalog-right #web-stock-grid{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.catalog-detail-dialog .web-catalog-right #web-stock-grid>.web-detail-table-wrap{flex:1 1 auto;min-height:0;max-height:none!important;height:100%;width:100%;box-sizing:border-box}

/* Prijsafspraak: beide onderste tabs starten exact op dezelfde plek. */
#fmx-GroupBox22{top:57px!important}

/* ST Orders / Backorders: verzendlabel is verwijderd; OK sluit nu direct aan onder PICKLIJST. */
.legacy-order-ok{top:494px!important}

/* Responsive=1: geen globale verkleining; FMX anchors/client-layout vullen de browserruimte. */
body.web-responsive-mode{overflow:hidden!important}
body.web-responsive-mode #viewport{position:fixed;inset:0;overflow:hidden}
body.web-responsive-mode #scale-shell{transform:none!important;width:100vw;height:100vh}
body.web-responsive-mode #surface{box-shadow:none;width:100vw;height:100vh}
body.web-responsive-mode #fmx-Rectangle1{overflow-y:auto!important;overflow-x:hidden!important}

/* 0.12.21 - correcties na praktijktest 0.12.20 */
/* Catalogusdetail blijft een vaste Delphi-achtige hoogte houden. Meer regels vergroten het venster niet;
   uitsluitend de grid zelf scrollt. Op kleinere schermen krimpt het venster alleen tot de viewport. */
.catalog-detail-dialog{
  height:min(720px,calc(100vh - 52px))!important;
  min-height:0!important;
}
.catalog-detail-dialog .web-detail-body{flex:1 1 auto!important;min-height:0!important}
.catalog-detail-dialog .web-catalog-detail{height:100%!important;min-height:0!important}
.catalog-detail-dialog .web-catalog-right{height:100%!important;min-height:0!important}
.catalog-detail-dialog .web-catalog-right #web-stock-grid{overflow:hidden!important}
.catalog-detail-dialog .web-catalog-right #web-stock-grid>.web-detail-table-wrap{overflow:auto!important}

/* Het linker hoofdmenu blijft in responsive mode dezelfde vaste 0.12.19/FM X-maatvoering gebruiken.
   Alleen de beschikbare menubalkhoogte mag met de viewport meegaan. */
body.web-responsive-mode #fmx-Rectangle1{width:200px!important;min-width:200px!important;max-width:200px!important;overflow-y:auto!important;overflow-x:hidden!important}
body.web-responsive-mode #fmx-Rectangle1 .fmx-label,
body.web-responsive-mode #fmx-Rectangle1 .fmx-menu-item,
body.web-responsive-mode #fmx-Rectangle1 .fmx-menu-section{white-space:nowrap!important}

/* ST Orders / Backorders: kleine marge onder scheidingslijn voor BEVESTIGING; OK volgt er direct onder. */
.legacy-order-report-stack{top:426px!important}
.legacy-order-ok{top:503px!important}

/* Prijsafspraak detail: Omschrijving en Door bewust compact; resterende ruimte gaat vooral naar Datum/lege rest. */
#fmx-StringGrid44 .price-agreement-detail-grid{width:100%!important;min-width:100%!important;table-layout:fixed!important}
#fmx-StringGrid44 .price-agreement-detail-grid th:nth-child(1),#fmx-StringGrid44 .price-agreement-detail-grid td:nth-child(1){width:28px!important}
#fmx-StringGrid44 .price-agreement-detail-grid th:nth-child(2),#fmx-StringGrid44 .price-agreement-detail-grid td:nth-child(2){width:82px!important}
#fmx-StringGrid44 .price-agreement-detail-grid th:nth-child(3),#fmx-StringGrid44 .price-agreement-detail-grid td:nth-child(3){width:185px!important;max-width:185px!important}
#fmx-StringGrid44 .price-agreement-detail-grid th:nth-child(4),#fmx-StringGrid44 .price-agreement-detail-grid td:nth-child(4){width:58px!important}
#fmx-StringGrid44 .price-agreement-detail-grid th:nth-child(5),#fmx-StringGrid44 .price-agreement-detail-grid td:nth-child(5){width:66px!important}
#fmx-StringGrid44 .price-agreement-detail-grid th:nth-child(6),#fmx-StringGrid44 .price-agreement-detail-grid td:nth-child(6){width:66px!important}
#fmx-StringGrid44 .price-agreement-detail-grid th:nth-child(7),#fmx-StringGrid44 .price-agreement-detail-grid td:nth-child(7){width:50px!important}
#fmx-StringGrid44 .price-agreement-detail-grid th:nth-child(8),#fmx-StringGrid44 .price-agreement-detail-grid td:nth-child(8){width:18px!important}
#fmx-StringGrid44 .price-agreement-detail-grid th:nth-child(9),#fmx-StringGrid44 .price-agreement-detail-grid td:nth-child(9){width:58px!important;max-width:58px!important}
#fmx-StringGrid44 .price-agreement-detail-grid th:nth-child(10),#fmx-StringGrid44 .price-agreement-detail-grid td:nth-child(10){width:85px!important}

/* 0.12.22 - visuele schaal terug naar 0.12.19 als basis.
   De optionele ui_scale in user_preferences.ini schaalt de complete FMX-surface subtiel.
   Hierdoor blijven fonts, grids, knoppen en onderlinge verhoudingen gelijk aan de stabiele 0.12.19-layout. */
#fmx-VertScrollBox1.legacy-card-scroll,#fmx-VertScrollBox5.legacy-card-scroll,#fmx-VertScrollBox13.legacy-card-scroll{
  grid-template-columns:repeat(6,210px)!important;
  grid-auto-rows:146px!important;
  gap:9px 10px!important;
  padding:7px 14px!important;
}
.catalog-card{width:210px!important;height:146px!important;font-size:12px!important}
.catalog-card-title{height:20px!important;font-size:12px!important;padding:0 4px!important}
.catalog-card-image{height:91px!important}
.catalog-card-vnv{width:65px!important;min-height:39px!important;gap:3px!important;padding:3px 2px!important}
.catalog-card-vnv strong,.catalog-card-stats strong{font-size:11px!important}
.catalog-card-vnv span,.catalog-card-stats span{font-size:11px!important}
.catalog-card-stats{height:35px!important;gap:6px!important}
.catalog-card-stats>div{gap:2px!important}

/* De linker menubalk blijft altijd een doorlopende donkere balk, ook in responsive modus. */
#fmx-Rectangle1{background:#000!important}
#fmx-Rectangle1 #fmx-Image1{height:100%!important;min-height:100%!important}
body.web-responsive-mode #fmx-Rectangle1,
body.web-responsive-active #fmx-Rectangle1{background:#000!important;overflow-y:auto!important;overflow-x:hidden!important}
body.web-responsive-active #fmx-Rectangle1{width:200px!important;min-width:200px!important;max-width:200px!important}
body.web-responsive-active #fmx-Rectangle1 .fmx-label,
body.web-responsive-active #fmx-Rectangle1 .fmx-menu-item,
body.web-responsive-active #fmx-Rectangle1 .fmx-menu-section{white-space:nowrap!important}

/* Echte responsive reflow is alleen actief op werkelijk kleinere viewports. Op grote schermen blijft de 0.12.19 schaal intact, maar de vrije dimensie vult nu de volledige viewport. */
body.web-responsive-mode:not(.web-responsive-active) #viewport{position:absolute!important;inset:0!important;overflow:hidden!important}
body.web-responsive-mode:not(.web-responsive-active) #scale-shell{width:auto!important;height:auto!important}
body.web-responsive-mode:not(.web-responsive-active) #surface{box-shadow:0 0 20px rgba(0,0,0,.25)!important}
body.web-responsive-mode:not(.web-responsive-active) #fmx-Rectangle1{overflow:hidden!important}


/* 0.12.23 - viewport altijd volledig gevuld.
   fitSurface vergroot de logische vrije dimensie via FMX Align/Anchors in plaats van
   de complete surface te centreren met letterboxing. Achtergrond is alleen fallback
   voor subpixel-randen; top/bottom horen niet meer zichtbaar te zijn. */
#viewport,#scale-shell{margin:0!important}
#scale-shell{left:0!important;top:0!important}

/* 0.12.24 - orderdetail: Bevestigd gecentreerd; Kleur krijgt meer ruimte. */
.legacy-order-table th:nth-child(3),
.legacy-order-table td:nth-child(3){text-align:center}

/* 0.12.25 - ST Catalogus: Delphi RuntimeAllScroll2023V2_p/Unit1fr kleuren 1:1. */

/* 0.12.31 – Catalogus EXPECTED lokaal berekend; groen blok zoals originele Unit1/Delphi kaart. */
.catalog-card-expected{position:absolute;left:0;top:0;width:65px;min-height:39px;box-sizing:border-box;border-right:1px solid #222;border-bottom:1px solid #222;background:#008000;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:3px 2px;color:#fff;z-index:2}
.catalog-card-expected strong{font-size:11px;font-weight:700}.catalog-card-expected span{font-size:11px;white-space:nowrap}
/* 0.12.32 - AT Verwacht: Delphi gridgedrag */
.purchase-expected-grid td{position:relative}
.purchase-expected-grid .purchase-expected-open{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.purchase-expected-edit{box-sizing:border-box;width:100%;height:22px;margin:-2px 0;padding:1px 4px;border:1px solid transparent;background:transparent;font:inherit;color:inherit;outline:none}
.purchase-expected-edit:focus{border-color:#5b9bd5;background:#fff;box-shadow:inset 0 0 0 1px rgba(91,155,213,.18)}
/* 0.12.60 - Nieuwe Inkooporder bovenblok 1:1 netter uitgelijnd en compacter gemaakt. */
.purchase-new-dialog{width:min(1125px,95vw);height:min(790px,92vh)}
.purchase-new-dialog .web-detail-body{flex:1 1 auto;min-height:0;overflow:hidden;padding:10px}
.purchase-new-layout{display:grid;grid-template-columns:236px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:9px;height:100%;min-height:0}
.purchase-new-products{grid-column:1;grid-row:1 / 3}
.purchase-new-head{grid-column:2;grid-row:1;border:1px solid #aaa;padding:8px 10px 14px;background:#eee;min-width:0}
.purchase-new-lines{grid-column:2;grid-row:2}
.purchase-new-head h3,.purchase-new-products h3,.purchase-new-lines h3{margin:0 0 4px 0;font-size:14px;line-height:18px}
.purchase-new-form{display:grid;grid-template-columns:126px 272px 64px 220px;grid-template-rows:26px 26px 74px;gap:4px 24px;align-items:start;min-width:0;justify-content:center}
.purchase-new-form input,.purchase-new-form select,.purchase-new-form textarea,.purchase-new-form button{box-sizing:border-box;font:12px "Segoe UI",Arial,sans-serif}
.purchase-new-form input,.purchase-new-form select{height:23px;min-width:0}.purchase-new-form textarea{min-width:0}
.purchase-new-supplier-tools{grid-column:2;grid-row:1;display:grid;grid-template-columns:156px 64px 56px;gap:6px;min-width:0;width:288px;max-width:288px}
.purchase-new-supplier-tools input{width:100%}.purchase-new-supplier-tools button{height:23px;min-width:0;padding:0 8px}
.purchase-new-label-supplier{grid-column:1;grid-row:2;padding-top:4px;text-align:left}.purchase-new-supplier{grid-column:2;grid-row:2;width:288px;max-width:288px}
.purchase-new-label-vat{grid-column:3;grid-row:2;padding-top:4px;text-align:left}.purchase-new-vat{grid-column:4;grid-row:2;width:220px;max-width:220px}
.purchase-new-label-remarks{grid-column:1;grid-row:3;align-self:start;padding-top:8px;text-align:left}.purchase-new-remarks{grid-column:2;grid-row:3;height:auto;min-height:74px;max-height:74px;resize:none;align-self:stretch;width:288px;max-width:288px}
.purchase-new-check{grid-column:3;grid-row:3;display:flex;align-items:flex-start;gap:6px;white-space:nowrap;align-self:start;padding-top:0;font-weight:400}.purchase-new-check input{width:15px;height:15px;min-width:15px;margin:0}.purchase-new-check span{display:inline-block;line-height:15px;margin-top:0}
.purchase-new-expected{grid-column:4;grid-row:3;align-self:start;width:132px;max-width:132px;margin-top:0}
.purchase-new-bulk{grid-column:4;grid-row:3;display:grid;grid-template-rows:23px 23px;gap:4px;align-self:end;padding-top:0;width:220px;max-width:220px}.purchase-new-bulk>div{display:grid;grid-template-columns:178px 40px;gap:4px}.purchase-new-bulk input{width:100%}.purchase-new-bulk button{height:23px;padding:0 4px}
.purchase-new-products,.purchase-new-lines{border:1px solid #aaa;background:#eee;padding:8px 10px 10px;min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column}
.purchase-new-search{display:grid;grid-template-columns:minmax(0,1fr) 58px 48px 44px;gap:4px;min-width:0}.purchase-new-search input,.purchase-new-search button{box-sizing:border-box;min-width:0;height:23px;font:12px "Segoe UI",Arial,sans-serif}.purchase-new-search button{padding:0 5px}
.purchase-new-results{margin-top:8px;display:flex;flex:1 1 auto;min-height:0;flex-direction:column;align-items:center;gap:8px;overflow-y:auto;overflow-x:hidden;padding:2px}
.purchase-new-results>small{align-self:stretch;padding:4px;color:#444}.purchase-new-product-card{flex:0 0 auto!important;cursor:pointer!important;width:196px!important}
.purchase-new-lines-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}.purchase-new-lines-head h3{flex:1 1 auto;margin-bottom:0}
.purchase-new-count-wrap{display:flex;align-items:center;gap:8px;white-space:nowrap;font:12px "Segoe UI",Arial,sans-serif}.purchase-new-count-wrap label{font-weight:400}
.purchase-new-count{width:58px!important;max-width:58px;height:23px;background:#e5e5e5;border:1px solid #aaa;padding:0 4px}
.purchase-new-lines-scroll{flex:1 1 auto;min-height:0;overflow:auto;background:#fff;border:1px solid #c7c7c7}
.purchase-new-lines table{width:100%;min-width:0;border-collapse:collapse;table-layout:fixed}.purchase-new-lines th,.purchase-new-lines td{border-right:1px solid #ccc;border-bottom:1px solid #ccc;padding:4px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.purchase-new-lines th:nth-child(1){width:56%}.purchase-new-lines th:nth-child(2){width:10%}.purchase-new-lines th:nth-child(3){width:11%}.purchase-new-lines th:nth-child(4){width:13%}.purchase-new-lines th:nth-child(5){width:32px}.purchase-new-lines input{width:100%;height:23px;box-sizing:border-box}.purchase-new-lines [data-np-del]{width:26px;height:23px;padding:0}.purchase-new-empty-line{color:#555;white-space:normal!important}
.purchase-new-line-product{display:flex;align-items:center;gap:8px;min-width:0}.purchase-new-line-product img{display:block;width:66px;height:44px;object-fit:cover;border:1px solid #666;background:#fff;flex:0 0 auto}.purchase-new-line-product span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.purchase-new-dialog{width:calc(100vw - 18px);height:calc(100vh - 18px)}.purchase-new-layout{grid-template-columns:220px minmax(0,1fr);gap:9px}.purchase-new-form{grid-template-columns:88px minmax(170px,1fr) 78px minmax(140px,1fr);grid-template-rows:28px 28px 74px;justify-content:start;gap:4px 12px}.purchase-new-supplier-tools{grid-template-columns:minmax(0,1fr) 64px 54px;width:auto;max-width:none}.purchase-new-supplier,.purchase-new-remarks,.purchase-new-vat,.purchase-new-expected,.purchase-new-bulk{width:auto;max-width:none}.purchase-new-bulk>div{grid-template-columns:minmax(0,1fr) 40px}.purchase-new-line-product img{width:56px;height:38px}.purchase-new-lines-head{align-items:flex-start;flex-wrap:wrap}.purchase-new-count-wrap{margin-left:auto}}

/* 0.12.33 - AT Verwacht/AT Overzicht compact als Leveranciers + handmatig resizebare kolommen. */
#fmx-StringGrid4 .legacy-grid-table,#fmx-StringGrid6 .legacy-grid-table{width:max-content;min-width:100%;font-size:12px}
#fmx-StringGrid4 .legacy-grid-table th,#fmx-StringGrid4 .legacy-grid-table td,#fmx-StringGrid6 .legacy-grid-table th,#fmx-StringGrid6 .legacy-grid-table td{height:24px!important;padding:1px 4px!important}
#fmx-StringGrid6 .purchase-expected-grid td:nth-child(3){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
th.grid-resizable{position:relative}
.grid-col-resizer{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:20;touch-action:none}
.grid-col-resizer:hover{background:rgba(80,120,160,.18)}
body.grid-column-resizing,body.grid-column-resizing *{cursor:col-resize!important;user-select:none!important}
/* De twee AT-Verwacht uitvoerknoppen blijven, net als in FMX, altijd uiterst rechts verankerd. */
#fmx-Button36{left:auto!important;right:92px!important;top:4px!important;width:69px!important}
#fmx-Button35{left:auto!important;right:4px!important;top:4px!important;width:85px!important}

/* 0.12.34 - AT Verwacht: Artikel standaard 40% smaller; exacte kolombreedtes i.p.v. content/viewport-stretch. */
#fmx-StringGrid6 .purchase-expected-grid th:nth-child(3),#fmx-StringGrid6 .purchase-expected-grid td:nth-child(3){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 0.12.36 - 0.12.35 gridfont behouden; Google Maps loadfix zit in bootstrap/app.js. */
.legacy-grid-table,.legacy-grid-table th,.legacy-grid-table td,
.fmx-grid table,.fmx-grid th,.fmx-grid td,
.web-detail-table,.web-detail-table th,.web-detail-table td,
.legacy-order-table,.legacy-order-table th,.legacy-order-table td,
.legacy-purchase-tree,.legacy-purchase-tree th,.legacy-purchase-tree td,
.legacy-purchase-tree .purchase-grid-edit,
.price-agreement-picker-grid table,.price-agreement-picker-grid th,.price-agreement-picker-grid td,
.legacy-order-history-scroll table,.legacy-order-history-scroll th,.legacy-order-history-scroll td,
.purchase-add-lines table,.purchase-add-lines th,.purchase-add-lines td,.purchase-add-lines input,.purchase-add-lines select,
.purchase-new-lines table,.purchase-new-lines th,.purchase-new-lines td,.purchase-new-lines input{font-size:12px!important;font-family:"Segoe UI",Arial,sans-serif!important}

/* Demo-menu: items die in [demo_menu] op 0 staan worden in demo-mode niet getoond. */
.demo-menu-disabled{display:none!important}

/* ST - Klanten: MAP geheel rechts zoals de originele FMX Anchors=[akTop,akRight]. */
#fmx-Button61{left:auto!important;right:10px!important;top:4px!important;width:80px!important;z-index:215!important}
#fmx-Layout1{z-index:1300!important;background:#d9d9d9!important}
#fmx-Rectangle84,#fmx-Rectangle85,#fmx-Rectangle86,#fmx-Rectangle87{z-index:1450!important}
#fmx-Rectangle81{overflow:hidden!important;background:#eee!important}
.customer-map-canvas{position:absolute;inset:0;width:100%;height:100%;background:#e7e7e7}
.customer-map-agent-switch,.customer-map-count{margin:8px;background:#fff;border:1px solid #888;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.28);font:12px "Segoe UI",Arial,sans-serif;color:#222}
.customer-map-agent-switch{display:flex;align-items:center;gap:6px;padding:5px 7px}.customer-map-agent-switch select{min-width:150px;height:25px;border:1px solid #aaa;background:#fff}
.customer-map-count{padding:6px 10px;font-weight:700}
.customer-map-info{width:315px;max-width:315px;font:12px "Segoe UI",Arial,sans-serif;color:#222;text-align:center}.customer-map-info h3{margin:3px 0 4px;color:#2e6c80;font-size:18px}.customer-map-logo img{max-width:112px;max-height:70px;object-fit:contain}.customer-map-code{margin-bottom:5px}.customer-map-info p{line-height:1.45;margin:6px 0 10px}.customer-map-info table{width:100%;border-collapse:collapse;text-align:left}.customer-map-info th,.customer-map-info td{border:1px solid #bbb;padding:4px 6px;font-size:12px}.customer-map-info th{width:57%;font-weight:700}
.customer-map-options-dialog{width:353px!important;min-height:249px}.customer-map-options{display:grid;gap:10px;padding:4px}.customer-map-options>label{display:flex;align-items:center;gap:6px}.customer-map-options fieldset{border:1px solid #bbb;padding:7px 10px;display:grid;gap:5px}.customer-map-options fieldset label{display:flex;gap:6px;align-items:center}.customer-map-year select{height:25px;min-width:150px}.customer-map-options-dialog .web-detail-actions{justify-content:flex-end}
.customer-compare-dialog{width:233px!important;min-height:409px}.customer-compare-list{height:300px;overflow:auto;border:1px solid #999;background:#fff}.customer-compare-list label{display:flex;align-items:center;gap:7px;padding:4px 7px;border-bottom:1px solid #ddd;font-size:12px}.customer-compare-detail{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px}.customer-compare-dialog .web-detail-actions{display:flex!important;flex-direction:column;gap:6px;align-items:stretch;padding:9px 12px}.customer-compare-dialog .web-detail-actions button{width:100%;min-height:29px}.customer-compare-spacer{display:none}

/* 0.12.37 - alle tabel/grids exact dezelfde typografie als Leveranciers (StringGrid5). */
.legacy-grid-table,.legacy-grid-table th,.legacy-grid-table td,.legacy-grid-table input,.legacy-grid-table select,.legacy-grid-table textarea,
.fmx-grid table,.fmx-grid th,.fmx-grid td,.fmx-grid table input,.fmx-grid table select,.fmx-grid table textarea,
.web-detail-table,.web-detail-table th,.web-detail-table td,.web-detail-table input,.web-detail-table select,
.legacy-order-table,.legacy-order-table th,.legacy-order-table td,.legacy-order-table input,.legacy-order-table select,
.legacy-purchase-tree,.legacy-purchase-tree th,.legacy-purchase-tree td,.legacy-purchase-tree input,.legacy-purchase-tree select,
.price-agreement-picker-grid table,.price-agreement-picker-grid th,.price-agreement-picker-grid td,.price-agreement-picker-grid input,.price-agreement-picker-grid select,
.legacy-order-history-scroll table,.legacy-order-history-scroll th,.legacy-order-history-scroll td,
.purchase-add-lines table,.purchase-add-lines th,.purchase-add-lines td,.purchase-add-lines input,.purchase-add-lines select,
.purchase-new-lines table,.purchase-new-lines th,.purchase-new-lines td,.purchase-new-lines input,.purchase-new-lines select{
  font-family:"Segoe UI",Arial,sans-serif!important;
  font-size:12px!important;
}

/* 0.12.38 - Google Maps hit testing. Rectangle81 zelf moet pointer-input accepteren,
   maar forceer NOOIT pointer-events op alle Google Maps descendants. Google zet
   transparante overlay-lagen bewust op pointer-events:none; die globaal op auto zetten
   vormt juist een onzichtbaar schild boven slepen/zoomen/marker-clicks. Google beheert
   daarom zelf de pointer-events en touch-action van alle interne kaartlagen. */
#fmx-Rectangle81{pointer-events:auto!important}
.customer-map-canvas{z-index:2!important;pointer-events:auto!important}

/* Bovenbalk kaart: Positie links van Streetview zodat het label niet meer onder de knop valt. */
#fmx-Button60{left:auto!important;right:4px!important;top:4px!important;width:122px!important;z-index:1510!important;pointer-events:auto!important}
#fmx-Button62{left:auto!important;right:132px!important;top:4px!important;width:88px!important;z-index:1510!important;pointer-events:auto!important}
#fmx-CheckBox17{left:auto!important;right:226px!important;top:5px!important;width:86px!important;z-index:1510!important;pointer-events:auto!important;white-space:nowrap!important}


/* 0.12.39 - Google Maps/Street View buiten de geschaalde FMX-surface.
   Pegman gebruikt viewport-pixels voor drag/drop; een ancestor met transform:scale()
   kan zijn drop-coordinaten verschuiven. De portal ligt direct in #viewport en volgt
   schermpositie/maat van Rectangle81. De oude Delphi Streetview-knop is een no-op en
   wordt daarom verborgen; Google's native Pegman + terugpijl zijn leidend. */
.customer-map-portal{position:fixed;z-index:1400;overflow:hidden;background:#e7e7e7;pointer-events:auto!important}
.customer-map-portal>.customer-map-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1!important;pointer-events:auto!important}
#fmx-Button62{display:none!important}
#fmx-CheckBox17{left:auto!important;right:132px!important;top:5px!important;width:86px!important;z-index:1510!important;pointer-events:auto!important;white-space:nowrap!important}
.customer-map-logo{min-height:52px;display:flex;align-items:center;justify-content:center;margin:0 auto 2px}
.customer-map-logo img{display:block;max-width:118px!important;max-height:76px!important;width:auto;height:auto;object-fit:contain}


/* 0.12.40 - Klanten API instellingen */
.customer-api-dialog{width:520px!important;max-width:min(94vw,520px)}
.customer-api-form{display:grid;gap:9px;padding:4px 2px;font:12px "Segoe UI",Arial,sans-serif}
.customer-api-head{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;border-bottom:1px solid #c9c9c9;padding-bottom:8px}
.customer-api-head>div{display:grid;grid-template-columns:72px 1fr;gap:6px;align-items:center}.customer-api-head b{font-weight:700}.customer-api-head span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.customer-api-row{display:grid;grid-template-columns:145px minmax(0,1fr) 38px;gap:7px;align-items:center}.customer-api-row label{text-align:right;font-weight:600}.customer-api-row input{height:26px;border:1px solid #aaa;padding:3px 6px;font:12px "Segoe UI",Arial,sans-serif}.customer-api-row button{height:27px}
.customer-api-check{display:grid;grid-template-columns:145px 24px;gap:7px;align-items:center}.customer-api-check span{text-align:right;font-weight:600}.customer-api-check input{margin:0}
.customer-api-dialog .web-detail-actions{display:flex;gap:7px;align-items:center}.customer-api-actions-spacer{flex:1}
body.grid-column-resizing,body.grid-column-resizing *{cursor:col-resize!important;user-select:none!important}


/* 0.12.41 - Delphi Positie-checkbox had geen actieve kaartlogica; web-only geolocatie verwijderd. */
#fmx-CheckBox17,#fmx-CheckBox52{display:none!important}

/* 0.12.42 - AT Agenten: NIEUWE AGENT exact als originele Rectangle173/Label489/Image125. */
#fmx-Rectangle173{
  left:auto!important;right:0!important;top:-1px!important;width:195px!important;height:30px!important;
  box-sizing:border-box!important;background:#515868!important;background-image:none!important;
  border:0!important;border-radius:0!important;cursor:pointer!important;overflow:hidden!important;
  z-index:220!important;pointer-events:auto!important;
}
#fmx-Rectangle173:hover{filter:brightness(1.06)}
#fmx-Rectangle173:active{filter:brightness(.96)}
#fmx-Rectangle173 #fmx-Label489{
  left:23px!important;top:1px!important;width:138px!important;height:26px!important;
  color:#fff!important;font-family:"Segoe UI",Arial,sans-serif!important;font-size:13px!important;
  font-weight:700!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;
  text-align:right!important;pointer-events:none!important;
}
#fmx-Rectangle173 #fmx-Image125{
  left:10px!important;top:4px!important;width:23px!important;height:22px!important;object-fit:contain!important;
  pointer-events:none!important;
}

/* 0.12.43 - Prijslijst is bewust uitgezonderd van de globale Leveranciers-gridfont.
   De BIFF/XLS celopmaak (font, grootte, kleur en vulling) is hier leidend, net als in TMSFMXGridExcelIO. */
.fxml-color-picker{padding:1px 2px!important;border:1px solid #9a9a9a!important;background:#fff!important;cursor:pointer!important}

/* 0.12.44 - Catalogus/list, AT -> M - Internet, prijslijst labeldialoog en gebruikersdetail. */
.grid-empty-cell{padding:18px 10px!important;text-align:center!important;color:#666!important;background:#f3f3f3!important;font-style:italic!important}
#m-fmx-StringGrid47,#fmx-StringGrid47{background:#fff!important;overflow:auto!important}
#fmx-StringGrid47 .legacy-grid-table,#fmx-StringGrid47 .legacy-grid-table th,#fmx-StringGrid47 .legacy-grid-table td{
  font-family:"Segoe UI",Arial,sans-serif!important;font-size:12px!important;
}
.pricelist-label-dialog{width:min(560px,94vw)!important}
.pricelist-label-options{font:12px "Segoe UI",Arial,sans-serif;padding:6px 2px 2px}.pricelist-label-options p{margin:0 0 10px}.pricelist-label-options small{display:block;margin-top:10px;color:#555}
.pricelist-label-option-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pricelist-label-option-grid button{min-height:34px}

/* Gebruikerspopup: Delphi Rectangle9 is 631x377, donkergrijs met watermerk. De
   bestaande FMX-posities blijven leidend; dit voorkomt dat generieke web-CSS
   input/labels groter trekt dan het origineel. */
#fmx-Rectangle9.legacy-dialog-surface{width:631px!important;height:377px!important;max-width:calc(100vw - 28px)!important;max-height:calc(100vh - 28px)!important;background:#666565!important;border-radius:0!important}
#fmx-Rectangle9 .fmx-label,#fmx-Rectangle9 .fmx-checkbox,#fmx-Rectangle9 .fmx-edit,#fmx-Rectangle9 .fmx-select,#fmx-Rectangle9 .fmx-barbutton{
  font-family:"Segoe UI",Arial,sans-serif!important;font-size:12px!important;
}
#fmx-Rectangle9 #fmx-Label11{font-size:18px!important;font-weight:700!important}
#fmx-Rectangle9 #fmx-DateEdit4,#fmx-Rectangle9 #fmx-TMSFMXBarButton61{display:block!important;visibility:visible!important}

/* 0.12.45 - zoekbalken / datumselectie / dialog backdrops */
.web-search-row-control{box-sizing:border-box!important;min-height:22px!important;line-height:18px!important}
input.web-native-date{padding:1px 4px!important;min-width:102px!important;overflow:visible!important}
input.web-native-date::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.85}
.legacy-dialog-overlay{left:0!important;top:0!important;width:100%!important;height:100%!important;right:auto!important;bottom:auto!important}
.doubleer-empty-report{padding:18px 16px 14px;min-width:340px;font:13px "Segoe UI",Arial,sans-serif;color:#222}

/* Samengestelde FMX-knoppen: tekst/iconen mogen het klikvlak van de parent niet blokkeren. */
.fmx-rectangle[data-fmx-name]>.fmx-label,.fmx-rectangle[data-fmx-name]>.fmx-image{cursor:inherit}

/* 0.12.46 - Sample Order webport */
.web-sample-order-overlay{position:absolute;inset:0;z-index:12000;background:rgba(235,235,235,.72);display:none;align-items:center;justify-content:center;font:12px 'Segoe UI',Arial,sans-serif;pointer-events:auto}
.web-sample-order-dialog{width:min(1220px,calc(100% - 40px));height:min(690px,calc(100% - 40px));background:#c9c9c9;border:1px solid #6c6c6c;box-shadow:0 4px 18px rgba(0,0,0,.35);display:flex;flex-direction:column}
.web-sample-order-head{height:34px;background:#596274;color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;position:relative}.web-sample-order-head button{position:absolute;right:7px;top:5px;width:25px;height:24px;border:0;background:#718096;color:white;font-size:18px;line-height:20px}
.web-sample-order-body{display:grid;grid-template-columns:29% 32% 39%;gap:10px;padding:12px;min-height:0;flex:1}.web-sample-order-body section{border:1px solid #999;background:#d8d8d8;min-height:0;padding:8px;overflow:auto}.web-sample-order-body h3{font-size:12px;font-weight:400;margin:-17px 0 8px 4px;background:#d8d8d8;display:inline-block;padding:0 6px}.web-so-row{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.web-so-row input,.web-so-row select,.web-so-row button{height:24px;box-sizing:border-box;font:12px 'Segoe UI',Arial,sans-serif}.web-so-row input{min-width:105px;flex:1}.web-so-row button{min-width:65px}.web-so-results,.web-so-selected,.web-so-link-grid{margin-top:8px;border:1px solid #999;background:#fff;min-height:120px;overflow:auto}.web-so-results{height:460px}.web-so-selected{height:270px}.web-so-link-grid{height:390px}.web-so-result{display:flex;width:100%;text-align:left;gap:7px;flex-direction:column;border:0;border-bottom:1px solid #ddd;background:#fff;padding:6px;font:12px 'Segoe UI',Arial,sans-serif}.web-so-result:hover{background:#e8f1fb}.web-so-result span{color:#555}.web-so-chip{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd;padding:5px 7px}.web-so-chip button{width:25px;height:22px}.web-sample-selected label{display:flex;flex-direction:column;margin-top:8px}.web-sample-selected textarea{height:120px;resize:none}.web-sample-link>label{display:block;margin:5px 0}.web-so-link-grid table{width:100%;border-collapse:collapse}.web-so-link-grid td{border:1px solid #d1d1d1;padding:5px}.web-so-link-grid tr{cursor:pointer}.web-so-link-grid tr.grid-selected{background:#b8d6f5}.web-sample-order-foot{height:48px;border-top:1px solid #aaa;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 12px}.web-sample-order-foot button{height:29px;min-width:135px}.web-sample-order-foot button.primary{background:#596274;color:#fff;border:1px solid #475064;font-weight:600}
/* Afronden in losse Sample-weergave iets verder rechts / los van checkbox */
#fmx-Button123{transform:translateX(10px)!important}
/* 0.12.46 - Delphi TabControl4: STUK NR / ARTIKEL NR */
#web-pricelist-view-tabs{position:absolute;left:6px;bottom:0;z-index:160;display:flex;height:42px;align-items:stretch;pointer-events:auto}
#web-pricelist-view-tabs button{min-width:135px;border:1px solid #b6b6b6;border-bottom:0;background:#ddd;color:#444;font:12px 'Segoe UI',Arial,sans-serif;padding:0 18px;cursor:pointer}
#web-pricelist-view-tabs button.active{background:#596274;color:#fff;font-weight:600;border-color:#596274;border-radius:0 0 4px 4px}
#web-pricelist-panel{display:none!important}

/* 0.12.47 - modal Winkelverkoop werkelijk boven de onderliggende tab/control-laag. */
#fmx-Rectangle123.shop-sale-overlay{z-index:25000!important;left:0!important;top:0!important;width:100%!important;height:100%!important;right:0!important;bottom:0!important;background:rgba(225,225,225,.72)!important;pointer-events:auto!important}
#fmx-Rectangle122.shop-sale-dialog{z-index:25020!important;top:4px!important;bottom:4px!important;height:auto!important;background:#cacaca!important;pointer-events:auto!important}
#fmx-Rectangle135.shop-sale-issues{z-index:25030!important;pointer-events:auto!important}

/* 0.12.47 - prijslijsttabs horen ONDER de grid, niet er bovenop. */
#fmx-TMSFMXGrid1.pricelist-grid-host{bottom:44px!important;height:auto!important}
#fmx-TMSFMXGrid2.pricelist-grid-host{bottom:44px!important;height:auto!important}
#web-pricelist-view-tabs{bottom:0!important;height:42px!important}

/* 0.12.47 - Nieuwe Sample Order begint bovenaan het tabblad in plaats van verticaal gecentreerd. */
.web-sample-order-overlay{align-items:flex-start!important;justify-content:center!important;padding-top:4px!important;box-sizing:border-box!important}
.web-sample-order-dialog{height:min(690px,calc(100% - 8px))!important;margin-top:0!important}


/* 0.12.48 - Winkelverkoop compacter zoals Delphi: Item Issues links, verkoopdialoog rechts. */
#fmx-Rectangle122.shop-sale-dialog{left:378px!important;right:4px!important;width:auto!important;max-width:none!important;overflow:visible!important}
#fmx-Rectangle135.shop-sale-issues{left:-378px!important;top:0!important;width:378px!important;height:100%!important;bottom:0!important;background:#fff!important;overflow:visible!important}
#fmx-Rectangle135.shop-sale-issues #fmx-Button101{left:8px!important;top:3px!important;width:80px!important;height:22px!important;z-index:25035!important}
#fmx-Rectangle135.shop-sale-issues #fmx-Label394{left:148px!important;top:8px!important;font-weight:700!important;text-align:center!important}
#fmx-Rectangle135.shop-sale-issues #fmx-Label393{left:148px!important;top:28px!important;font-size:18px!important;text-align:center!important}
#fmx-Rectangle135.shop-sale-issues #fmx-StringGrid29{left:3px!important;top:64px!important;right:3px!important;width:auto!important;bottom:4px!important;height:auto!important}
#fmx-GroupBox8 #fmx-VertScrollBox9.shop-article-card-list{display:flex!important;flex-direction:column!important;align-items:center!important;gap:8px!important;padding:3px!important;box-sizing:border-box!important;overflow-y:auto!important;overflow-x:hidden!important}
#fmx-GroupBox8 .shop-article-card{flex:0 0 auto!important;width:210px!important;cursor:default!important}
.shop-article-empty{padding:18px 8px;text-align:center;color:#666;font:12px 'Segoe UI',Arial,sans-serif}
.shop-issue-popup-back{position:absolute;inset:0;z-index:26000;background:rgba(0,0,0,.06);pointer-events:auto}
.shop-issue-popup{position:absolute;left:34px;top:70px;width:320px;height:240px;background:#07152d;border:1px solid #000;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.45);padding:30px 7px 28px;box-sizing:border-box;color:#fff;font:12px 'Segoe UI',Arial,sans-serif}
.shop-issue-popup-head{position:absolute;left:6px;right:6px;top:5px;height:23px;text-align:center}.shop-issue-popup-head strong{line-height:23px;font-weight:600}.shop-issue-done{position:absolute;left:0;top:0;height:22px;min-width:50px;border:1px solid #4d6a93;border-radius:8px;background:linear-gradient(#5d8bd0,#3265b1);color:#fff;font-weight:700;cursor:pointer}
.shop-issue-popup-grid{height:100%;overflow:auto;background:#fff;border:1px solid #7d8796}.shop-issue-popup-grid table{width:100%;border-collapse:collapse;color:#222;background:#fff;font-size:var(--grid-font-size,12px)}.shop-issue-popup-grid th,.shop-issue-popup-grid td{border:1px solid #c7c7c7;height:22px;padding:2px 4px;text-align:left;font-weight:400}.shop-issue-popup-grid th{background:#f0f0f0}.shop-issue-empty{text-align:center!important;color:#666}
.shop-issue-warning{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-weight:700;color:#fff}
@media(max-width:1050px){#fmx-Rectangle122.shop-sale-dialog{left:300px!important}#fmx-Rectangle135.shop-sale-issues{left:-300px!important;width:300px!important}.shop-issue-popup{left:10px;width:280px}}

/* 0.12.48 - Prijslijst: reserveer de tabstrook op het TabControl zelf; de grid mag er nooit onder doorlopen. */
#fmx-TabItem38 #fmx-TabControl4{bottom:44px!important;height:auto!important}
#fmx-TabItem38 #fmx-TabItem39,#fmx-TabItem38 #fmx-TabItem40{bottom:0!important;height:100%!important}
#fmx-TabItem38 #fmx-TMSFMXGrid1.pricelist-grid-host,#fmx-TabItem38 #fmx-TMSFMXGrid2.pricelist-grid-host{bottom:0!important;height:100%!important}
#web-pricelist-view-tabs{z-index:500!important}

/* 0.12.48 - één globale grid-fontinstelling uit user_preferences.ini. */
.legacy-grid-table,.fmx-grid table,.web-detail-table,.legacy-order-table,.legacy-purchase-tree,.price-agreement-picker-grid table,.legacy-order-history-scroll table,.purchase-add-lines table,.purchase-new-lines table,.shop-sale-basket-table{font-family:'Segoe UI',Arial,sans-serif!important;font-size:var(--grid-font-size,12px)!important}
.pricelist-grid-table{font-size:var(--grid-font-size,12px)}
.pricelist-grid-table th{font-size:var(--grid-font-size,12px)!important}

/* 0.12.49 - Winkelverkoop: TreeView7 zichtbaar als echte Delphi-grid + bronposities knoppen. */
#fmx-GroupBox7 #fmx-Button88{left:auto!important;right:14px!important;top:21px!important;width:125px!important;height:37px!important}
#fmx-GroupBox7 #fmx-Button87{left:auto!important;right:14px!important;top:60px!important;width:125px!important;height:37px!important}
#fmx-GroupBox7 #fmx-Button86{left:auto!important;right:14px!important;top:99px!important;width:125px!important;height:37px!important}
#fmx-GroupBox7 #fmx-Button95{left:auto!important;right:14px!important;top:138px!important;width:125px!important;height:37px!important}
#fmx-GroupBox7 #fmx-Button89{left:auto!important;right:14px!important;top:184px!important;width:125px!important;height:37px!important}
#fmx-TMSFMXTreeView7,#fmx-TMSFMXTreeView7.shop-sale-basket-host{display:block!important;background:#fff!important;background-image:none!important;border:1px solid #aaa!important;overflow:auto!important;pointer-events:auto!important}
#fmx-TMSFMXTreeView7 .shop-sale-basket-table{width:100%!important;min-width:700px!important;background:#fff!important;border-collapse:collapse!important;table-layout:fixed!important}
#fmx-TMSFMXTreeView7 .shop-sale-basket-table th,#fmx-TMSFMXTreeView7 .shop-sale-basket-table td{height:26px!important;padding:2px 4px!important;border-right:1px solid #c7c7c7!important;border-bottom:1px solid #ddd!important;vertical-align:middle!important}
#fmx-TMSFMXTreeView7 .shop-sale-basket-table tbody tr{background:#fff!important;cursor:default}
#fmx-TMSFMXTreeView7 .shop-sale-basket-table tbody tr.grid-selected{background:#27a8e8!important;color:#fff!important}
#fmx-TMSFMXTreeView7 .shop-sale-basket-table tbody tr.grid-selected td{background:transparent!important;color:inherit!important}
#fmx-TMSFMXTreeView7 .shop-sale-basket-table tbody tr.shop-sale-draft-row{height:66px!important}
#fmx-TMSFMXTreeView7 .shop-sale-basket-table tbody tr.shop-sale-draft-row td{height:66px!important}
.shop-sale-product{display:flex;align-items:center;gap:5px;min-width:0}.shop-sale-product img{width:66px;height:52px;object-fit:cover;flex:0 0 66px}.shop-sale-product span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fmx-GroupBox8 .shop-article-card{cursor:pointer!important}