/* Standalone HTML reconstruction from the supplied Delphi/uniGUI source.
   Geometry is derived from Main.dfm, mulogin2.dfm, Coverzicht*.dfm,
   Claag.dfm, STorders.dfm and STbackorder.dfm. Theme = neptune. */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#222;background:#fff;overflow:hidden}
button,input,select{font-family:Arial,Helvetica,sans-serif;font-size:13px}
.hidden{display:none!important}

/* ---- Login form: mulogin2.dfm (275 x 411 centered) ---- */
#loginLayer{position:fixed;inset:0;background:#fff;z-index:10000;display:flex;align-items:center;justify-content:center}
.login-panel{position:relative;width:275px;height:411px;border:1px solid #b5b8c8;background:#fff;box-shadow:0 0 0 1px #e5e5e5}
.login-logo{position:absolute;left:36px;top:20px;width:201px;height:175px;object-fit:contain}
.login-label{position:absolute;left:63px;height:19px;font-size:16px;line-height:19px}
#lblUser{top:221px;width:160px}
#lblPass{top:280px;width:160px}
.login-input{position:absolute;left:63px;width:149px;height:24px;border:1px solid #b5b8c8;padding:2px 5px;background:#fff}
#loginUser{top:244px} #loginPass{top:303px}
#loginBtn{position:absolute;left:36px;top:351px;width:201px;height:33px;font-size:16px}
.lang-panel{position:absolute;inset:0;background:#fff;border:1px solid #b5b8c8;z-index:4}
.lang-title{position:absolute;left:15px;top:15px;width:242px;height:26px;text-align:center;font-size:19px;line-height:26px}
.lang-title.en{top:39px}
.lang-img{position:absolute;object-fit:fill;cursor:pointer}
#nlFlag{left:73px;top:105px;width:126px;height:122px}
#ukFlag{left:81px;top:239px;width:111px;height:106px}
.msgbox{position:absolute;left:24px;right:24px;bottom:12px;min-height:22px;text-align:center;color:#b00020;font-size:12px}

/* ---- uniGUI Neptune shell: Main.dfm ---- */
#app{position:fixed;inset:0;background:#fff;display:none}
#leftPanel{position:absolute;left:0;top:0;bottom:19px;width:200px;border-right:1px solid #157fcc;background:#fff;z-index:10}
.panel-title{height:30px;line-height:30px;text-align:center;color:#fff;background:#157fcc;font-weight:bold;position:relative;user-select:none}
.collapse-tool{position:absolute;right:5px;top:5px;width:20px;height:20px;line-height:18px;border:1px solid rgba(255,255,255,.4);cursor:pointer;font-weight:normal}
#navTree{position:absolute;left:1px;right:1px;top:30px;bottom:43px;overflow:auto;background:#fff;padding:6px 0}
.tree-row{height:24px;line-height:24px;white-space:nowrap;cursor:pointer;user-select:none}
.tree-row:hover{background:#eaf3fb}
.tree-row.selected{background:#c1ddf1}
.tree-root{padding-left:8px}
.tree-group{padding-left:8px;font-weight:normal}
.tree-child{padding-left:28px}
.tree-toggle{display:inline-block;width:14px;color:#555;text-align:center}
.tree-icon{display:inline-flex;width:16px;height:16px;vertical-align:-3px;margin-right:4px;align-items:center;justify-content:center}
.tree-icon.home{background:url('images/main.ico') center/16px 16px no-repeat}
.tree-icon.folder::before{content:'▣';color:#e1a526;font-size:15px}
.tree-icon.item::before{content:'▪';color:#157fcc;font-size:16px}
#splitter{position:absolute;left:200px;top:0;bottom:19px;width:6px;background:#dfeaf2;border-left:1px solid #c6d4df;border-right:1px solid #b8c9d6;z-index:9;cursor:col-resize}
#content{position:absolute;left:206px;right:0;top:0;bottom:19px;background:#fff;overflow:hidden}
#status{position:absolute;left:0;right:0;bottom:0;height:19px;border-top:1px solid #b5b8c8;background:#fff;display:flex;z-index:30;color:#333}
.status-panel{height:18px;line-height:18px;border-right:1px solid #d6d6d6;text-align:center;width:200px}
.status-fill{flex:1}

/* Tabs: TUniPageControl */
#tabbar{height:29px;background:#157fcc;border-bottom:1px solid #157fcc;padding-left:3px;display:flex;align-items:flex-end;gap:2px;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
.tab{height:26px;line-height:25px;padding:0 9px;border:1px solid #157fcc;border-bottom:none;background:#4c9dd8;cursor:pointer;min-width:62px;position:relative;color:#fff}
.tab.active{background:#add2ed;color:#157fcc;height:27px;line-height:26px}
.tab .close{margin-left:9px;color:currentColor;font-weight:bold;opacity:.85}
.tab-home-icon{display:inline-block;width:16px;height:16px;margin-right:6px;vertical-align:-3px;background:url('images/main.ico') center/16px 16px no-repeat}
.tab[data-key="home"]{font-weight:bold}
#pages{position:absolute;left:0;right:0;top:29px;bottom:0;background:#fff;overflow:hidden}
.page{position:absolute;inset:0;background:#fff;overflow:hidden}

/* Home / FrameMain */
.home-main{position:absolute;inset:0 0 16px 0;background:#fff}
.home-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px}
.home-image img{max-width:100%;max-height:100%;object-fit:contain}
.home-footer{position:absolute;left:0;right:0;bottom:0;height:16px;line-height:16px;text-align:center;color:#808080;font-weight:bold}

/* Generic 653 x 334 frame geometry, adapted with anchors as in DFM */
.frame{position:absolute;inset:0;background:#fff;overflow:hidden}
.label{position:absolute;height:13px;line-height:13px;font-weight:bold}
.field{position:absolute;height:24px;border:1px solid #b5b8c8;background:#fff;padding:2px 5px}
.combo{position:absolute;height:24px;border:1px solid #b5b8c8;background:#fff;padding:1px 3px}
.ext-btn{border:1px solid #126daf;background:linear-gradient(#5fa9df,#378bc7);color:#fff;border-radius:2px;cursor:pointer;text-align:center}
.ext-btn:hover{background:linear-gradient(#6db2e5,#4397d1)}
.ext-btn.light{border-color:#a7b9c6;background:linear-gradient(#fff,#dce9f2);color:#222}
.search-top{height:65px;position:absolute;left:0;right:0;top:0;background:#fff}
.catalog-results{position:absolute;left:3px;right:3px;top:65px;bottom:0;background:#fff;overflow:auto;display:flex;align-content:flex-start;align-items:flex-start;flex-wrap:wrap;padding:0}
.catalog-results.low{left:6px;right:0}
.product-card{position:relative;width:192px;height:124px;margin:1px;flex:0 0 192px;background:#fff;overflow:hidden}
.product-inner{position:absolute;left:3px;top:0;width:185px;height:121px;background:#eee;overflow:hidden}
.product-head{position:absolute;left:0;top:0;width:185px;height:23px;background:#596273;color:#fff;text-align:center;line-height:23px;font-size:13px;z-index:3;border:1px solid #1e2430;border-bottom:0}
.product-head.mag{background:#f0a400}
.product-photo{position:absolute;left:0;top:23px;width:185px;height:98px;background:linear-gradient(135deg,#eeeeee,#d8d8d8);object-fit:cover}
.metric{position:absolute;width:60px;height:39px;color:#fff;text-align:center;z-index:4;background:#596273;border:1px solid #1e2430}
.metric .m-label{font-size:11px;line-height:17px;height:17px;padding-top:1px}
.metric .m-value{font-size:12px;line-height:18px;height:18px}
.metric.expected{left:0;top:31px}
.metric.vnv{left:125px;top:31px}
.metric.free{left:0;top:82px}
.metric.order{left:62px;top:82px;width:61px}
.metric.buy{left:125px;top:82px}
.metric.red{background:#ff1209} .metric.orange{background:#f0a400} .metric.blue{background:#000dff} .metric.green{background:#138f17} .metric.gray{background:#596273}
.empty-note{display:none}

/* Data grids: uniDBGrid Neptune-like */
.grid-wrap{position:absolute;left:8px;right:12px;top:65px;bottom:8px;border:1px solid #9fb4c4;overflow:auto;background:#fff}
table.grid{border-collapse:collapse;table-layout:fixed;min-width:1200px;width:max-content;font-size:13px}
.grid th{height:27px;background:linear-gradient(#f8fbfd,#d9e8f2);border-right:1px solid #aebfca;border-bottom:1px solid #95afc1;text-align:left;padding:4px 6px;font-weight:bold;white-space:nowrap}
.grid td{height:24px;border-right:1px solid #d6dee4;border-bottom:1px solid #dfe5e9;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff}
.grid tr:nth-child(even) td{background:#f8fbfd}
.grid tbody tr:hover td{background:#dbeeff}
.grid-empty td{height:238px;background:#fff!important;border-right:0}

/* Order detail panel (same dimensions and 376/259 split as DFM) */
.detail-panel{position:absolute;left:8px;right:12px;top:3px;bottom:8px;border:1px solid #9fb4c4;background:#fff;display:none}
.detail-grid{position:absolute;left:0;top:0;bottom:0;width:calc(100% - 259px);overflow:auto;border-right:1px solid #8c8c8c}
.detail-side{position:absolute;right:0;top:0;bottom:0;width:259px;background:#808080;color:#fff}
.detail-title{position:absolute;left:8px;right:8px;top:11px;text-align:center;font-weight:bold;border-bottom:1px solid #fff;line-height:16px;padding:0 2px 4px;white-space:normal;overflow-wrap:anywhere}
.detail-pair{position:absolute;left:19px;right:18px;height:18px;display:grid;grid-template-columns:88px 1fr;line-height:18px}
.detail-ok{position:absolute;left:25px;right:22px;top:210px;height:30px}

/* Modal warning matching TUniSweetAlert intent without introducing new layout */
#modalMask{position:fixed;inset:0;background:rgba(0,0,0,.22);z-index:15000;display:none;align-items:center;justify-content:center}
.warnbox{width:340px;background:#fff;border:1px solid #8aa7bd;box-shadow:0 5px 22px rgba(0,0,0,.28)}
.warn-title{height:34px;line-height:34px;padding-left:12px;background:#157fcc;color:#fff;font-weight:bold}
.warn-text{padding:22px 18px;font-size:14px}
.warn-actions{padding:0 18px 16px;text-align:right}
.warn-actions button{width:75px;height:29px}

@media(max-width:560px){
  #leftPanel{width:160px} #splitter{left:160px} #content{left:166px}
}

/* V2 live backend additions - no layout redesign */
.loading-mask{position:absolute;inset:0;z-index:9000;background:rgba(255,255,255,.66);display:none;align-items:center;justify-content:center;color:#333;font-size:14px}
.loading-mask.show{display:flex}
.loading-box{padding:12px 18px;border:1px solid #9fb4c4;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.grid tbody tr.selected td{background:#c1ddf1!important}
.grid tbody tr{cursor:default}
.detail-grid .child-row td{background:#fafafa}
.detail-grid .child-row td:nth-child(2){padding-left:24px}
.detail-grid img.grid-photo{width:50px;height:35px;object-fit:cover;display:block;margin:auto}
.error-banner{position:absolute;left:8px;right:8px;top:68px;z-index:50;padding:8px 10px;border:1px solid #d99;background:#fff2f2;color:#8c1d1d;display:none}
.error-banner.show{display:block}
.catalog-results.error-offset{top:104px}
.login-note{position:absolute;left:20px;right:20px;top:389px;text-align:center;font-size:10px;color:#777}
.tree-children.hidden{display:none}
#statusbar{position:absolute;left:0;right:0;bottom:0;height:19px;border-top:1px solid #b5b8c8;background:#fff;z-index:40;display:flex}
#content{bottom:19px!important}
#splitter{bottom:19px!important}
#leftPanel{bottom:19px!important}
.catalog-results{position:absolute;left:3px;right:3px;top:65px;bottom:0;overflow:auto;display:flex;flex-wrap:wrap;align-content:flex-start;background:#fff}
.page.frame{position:absolute;inset:0;background:#fff;min-width:653px;min-height:334px}
.search-top{position:absolute;left:0;top:0;width:653px;height:65px;background:#fff}
.toast{position:fixed;right:16px;bottom:34px;max-width:520px;z-index:20000;background:#fff;border:1px solid #8aa7bd;box-shadow:0 3px 12px rgba(0,0,0,.25);padding:10px 12px;display:none}
.toast.show{display:block}

/* Detail side keeps the Delphi width; the grid stretches to it on wider browsers. */
.detail-grid{width:calc(100% - 259px)!important}
.detail-side{width:259px!important}
.page[data-kind="backorders"] .detail-grid{width:calc(100% - 256px)!important}
.page[data-kind="backorders"] .detail-side{width:256px!important}
.detail-grid table.grid{width:100%!important;min-width:100%!important}
.logout-btn{position:absolute;left:8px;right:8px;bottom:7px;height:29px;line-height:25px;z-index:5}

/* V5 - navigator and order-detail tree-grid closer to the original uniGUI TreeView/DBTreeGrid. */
.tree-group{position:relative;padding-left:31px}
.tree-toggle{position:absolute;left:9px;top:7px;width:10px;height:10px;line-height:9px;background:#e4e7e9;color:#6d7378;text-align:center;font-size:10px;border:0;padding:0;font-family:Arial,Helvetica,sans-serif}
.tree-children{position:relative}
.tree-children::before{content:"";position:absolute;left:14px;top:0;bottom:12px;border-left:1px dotted #aeb5ba;pointer-events:none}
.tree-child{position:relative;padding-left:51px}
.tree-child::before{content:"";position:absolute;left:14px;top:12px;width:27px;border-top:1px dotted #aeb5ba;pointer-events:none}
.tree-row.selected{background:#bddbf0}

.detail-photo-cell{position:relative;min-height:40px;display:flex;align-items:center;padding-left:29px}
.detail-photo-cell .grid-photo{margin:0;width:50px;height:35px}
.detail-expander,.detail-expander-spacer{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:11px;height:11px}
.detail-expander{border:1px solid #c8cccf;background:#e7e9ea;color:#777;padding:0;line-height:8px;text-align:center;font-size:11px;cursor:pointer;font-family:Arial,Helvetica,sans-serif}
.detail-expander:hover{background:#f2f3f4}
.detail-parent-row td{height:47px}
.detail-child td{height:24px!important;background:#fff!important}
.detail-child td:first-child{position:relative}
.detail-tree-branch{position:absolute;left:14px;top:0;bottom:0;width:28px;border-left:1px dotted #b8bdc1}
.detail-tree-branch::after{content:"";position:absolute;left:0;top:12px;width:28px;border-top:1px dotted #b8bdc1}
.detail-grid .detail-child td:nth-child(2){padding-left:6px}

/* V7 - IP lives in the status bar, matching the requested shell layout. */
#statusbar .status-fill{flex:1;min-width:0}
#statusbar .status-ip{width:220px;text-align:right;padding:0 8px;border-right:0;border-left:1px solid #d6d6d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* V9 - Expected: keep label size, make only date/value line smaller so full date fits. */
.metric.expected .m-value{font-size:10px;line-height:18px;white-space:nowrap}