: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:#505867;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:#f4a900;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:#505867;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:#505867;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:#f00000!important}.catalog-card .risk-orange{background:#f5a900!important}.catalog-card .risk-blue{background:#0a10ef!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:78px;max-width:260px;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-catalog-template-row{margin-top:10px;display:grid;grid-template-columns:minmax(0,1fr) 38px 60px;gap:6px}.web-catalog-template-row input{min-width:0;height:27px;border:1px solid #9b9b9b;padding:4px 6px;box-sizing:border-box}.web-catalog-template-row button{height:27px;border:1px solid #8a8a8a;background:linear-gradient(#fff,#ddd);cursor:pointer}.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: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;
}