:root{--blue:#174b78;--blue2:#0f3658;--line:#cfd6dd;--muted:#687785;--bg:#eef2f5;--panel:#fff;--sel:#e7f1fb;--ok:#1e6b42;--warn:#8a5b00;--bad:#a52a2a;--text:#17232d}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:"Segoe UI","Malgun Gothic",Arial,sans-serif;color:var(--text);background:var(--bg);font-size:13px}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.app{height:100vh;display:flex;flex-direction:column;overflow:hidden;min-width:0}.top{height:44px;flex:none;background:var(--blue);color:#fff;display:flex;align-items:center;padding:0 14px;gap:10px}.brand{font-size:15px;font-weight:800;letter-spacing:.2px;white-space:nowrap}.badge{font-size:10px;background:#e9f1f7;color:#255777;padding:2px 5px;border:1px solid #bbcfdf;border-radius:2px;font-weight:700}.spacer{flex:1}.toplabel{font-size:11px;font-weight:700}.branch{height:29px;border:1px solid #8eb2cf;background:#fff;color:#18354d;border-radius:2px;padding:3px 8px;min-width:120px}.user{font-weight:700;white-space:nowrap}
.mainnav{height:38px;flex:none;background:#fff;border-bottom:1px solid var(--line);display:flex;padding-left:8px;overflow:auto}.mainnav a{padding:10px 16px 8px;text-decoration:none;color:#18354d;border-right:1px solid #e6ebef;white-space:nowrap}.mainnav a:hover{background:#f1f5f8;color:var(--blue)}.mainnav a.active{font-weight:700;color:var(--blue);border-bottom:3px solid var(--blue)}
.stage{height:28px;flex:none;background:#fff7d8;border-bottom:1px solid #e6d892;color:#6b5600;padding:6px 12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace{flex:1;min-height:0;display:flex;flex-direction:column}.subbar{min-height:42px;flex:none;background:#f8fafb;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:6px 10px;gap:6px;flex-wrap:wrap}.content{flex:1;min-height:0;overflow:auto;padding:10px}.footer{height:27px;flex:none;border-top:1px solid var(--line);background:#f8fafb;display:flex;align-items:center;padding:0 10px;color:#53616c;font-size:11px}
.btn{height:29px;border:1px solid #9eabb7;background:#fff;border-radius:2px;padding:0 10px;color:#18354d;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:5px}.btn:hover{background:#f1f5f8}.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.btn.primary:hover{background:var(--blue2)}.btn.danger{color:#8c1f1f}.btn:disabled{opacity:.48;cursor:not-allowed}.btn.small{height:25px;padding:0 7px;font-size:11px}.kbd{background:#edf1f4;border:1px solid #c8d0d7;border-bottom-width:2px;border-radius:3px;padding:1px 5px;font-family:Consolas,monospace;color:#34444f}
.pagehead{display:flex;align-items:center;gap:8px;margin-bottom:8px}.pagehead h1{font-size:18px;margin:0}.pagehint{margin-left:auto;color:var(--muted);font-size:11px}.panel{background:#fff;border:1px solid var(--line);border-radius:2px;min-width:0;margin-bottom:8px}.sectiontitle{font-weight:800;padding:8px 10px;border-bottom:1px solid var(--line);background:#f7f9fb}.panelbody{padding:8px 10px}.backend{font-size:11px;color:var(--ok);font-weight:700}.hint{font-size:11px;color:var(--muted)}.callout{padding:8px 10px;border-left:4px solid var(--blue);background:#eef6fd;margin-bottom:8px}.warnbox{padding:8px 10px;border-left:4px solid #c48a28;background:#fff8e9;margin-bottom:8px}.errorbox{padding:8px 10px;border-left:4px solid #b34545;background:#fff3f3;margin-bottom:8px}
.toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.filters{padding:8px;display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:6px}.searchrow{padding:7px 8px;border-top:1px solid #e1e5e9;display:flex;gap:6px;align-items:center}.field{display:flex;flex-direction:column;gap:3px;min-width:0}.label{font-size:11px;color:#5d6b77}.input,.select,.textarea{border:1px solid #b8c2cb;border-radius:2px;background:#fff;padding:5px 7px;min-width:0}.input,.select{height:30px}.textarea{min-height:64px;resize:vertical}.search{flex:1;height:30px;border:1px solid #aeb9c3;padding:5px 8px;min-width:180px}.readonly{background:#f1f3f5;color:#596875}
.summary{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:8px;margin-bottom:8px}.sumcard{background:#fff;border:1px solid var(--line);padding:7px 10px;min-height:62px;color:#53616c}.sumcard b{display:block;font-size:16px;color:#17232d;margin-top:3px}.sumcard small{display:block;color:var(--muted);margin-top:2px}
.gridwrap{width:100%;max-width:100%;min-width:0;overflow:auto;border:1px solid var(--line);background:#fff}.gridwrap.fill{min-height:260px;max-height:calc(100vh - 320px)}table{border-collapse:collapse;width:max-content;min-width:100%;background:#fff;table-layout:auto}th,td{border-right:1px solid #dde3e8;border-bottom:1px solid #dde3e8;padding:6px 7px;white-space:nowrap;text-align:left;height:31px;vertical-align:middle;word-break:keep-all;overflow-wrap:normal}th{position:sticky;top:0;background:#e9edf1;z-index:2;font-weight:700}.num{text-align:right}.center{text-align:center}tbody tr:not(.empty){cursor:pointer}tbody tr:not(.empty):hover{background:#f1f7fc}.selected{background:var(--sel)}.empty td{color:transparent}.status{display:inline-block;border:1px solid #a9b8c4;padding:2px 6px;border-radius:10px;font-size:11px;background:#f6f8fa;white-space:nowrap}.status.ok{border-color:#7fb394;color:var(--ok);background:#eff8f2}.status.warn{border-color:#d1ad60;color:var(--warn);background:#fff9e8}.status.bad{border-color:#d2aaaa;color:var(--bad);background:#fff2f2}.status.blue{border-color:#8db2d2;color:#164e7b;background:#eef6fd}
.two{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(380px,.75fr);gap:8px}.homegrid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(560px,1fr);gap:8px}.quicklower{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:8px}.sideactions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.sideactions .btn{width:100%}.tabs{min-height:35px;display:flex;background:#fff;border-bottom:1px solid var(--line);padding-left:10px;overflow:auto}.tab{padding:9px 13px 7px;border-right:1px solid #e6ebef;cursor:pointer;white-space:nowrap}.tab.active{font-weight:700;color:var(--blue);background:var(--sel);border-bottom:2px solid var(--blue)}
.formgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding:10px}.span2{grid-column:span 2}.span3{grid-column:span 3}.span6{grid-column:span 6}.linebar{display:flex;align-items:center;padding:6px 8px;border-top:1px solid var(--line);gap:6px;background:#fafbfc;flex-wrap:wrap}.totals{display:grid;grid-template-columns:1fr 180px 180px 180px 180px;gap:6px;padding:8px;border-top:1px solid var(--line);align-items:center}.totalbox{border:1px solid #b6c0c9;background:#f8fafb;padding:6px 8px;text-align:right}.totalbox b{font-size:16px}.docgrid{max-height:320px}.lineinput{width:92px;height:26px;border:1px solid #b8c2cb;padding:2px 4px}.lineproduct{min-width:220px;height:26px;border:1px solid #b8c2cb;padding:2px 4px;background:#fff}.linetax{min-width:110px;height:26px;border:1px solid #b8c2cb;background:#fff}
.settingsnav{display:flex;gap:4px;overflow:auto;padding:5px 8px 0;background:#f8fafb;border-bottom:1px solid var(--line)}.settingsnav .btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}.settingsgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:8px}.settingsform{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}.settingrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 10px;border-bottom:1px solid #e1e5e9}.systemcards{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:8px}.systemcard{background:#fff;border:1px solid var(--line);padding:9px 10px}.systemcard span{display:block;font-size:11px;color:var(--muted)}.systemcard b{display:block;font-size:15px;margin-top:3px}
.loginshade{position:fixed;inset:0;background:#eef2f5;display:flex;align-items:center;justify-content:center;z-index:100}.loginbox{width:min(420px,94vw);background:#fff;border:1px solid #9eabb7;box-shadow:0 10px 35px rgba(0,0,0,.15)}.loginhead{height:48px;background:var(--blue);color:#fff;padding:14px;font-weight:800}.loginbody{padding:14px}.loginbody .field{margin-bottom:9px}.loginfoot{padding:10px 14px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}.toast{position:fixed;right:18px;bottom:42px;background:#173b57;color:#fff;padding:10px 14px;border-radius:3px;box-shadow:0 4px 16px rgba(0,0,0,.22);z-index:80;display:none;max-width:520px}.toast.show{display:block}.toast.bad{background:#8b2f2f}.modalshade{position:fixed;inset:0;background:rgba(21,35,47,.38);display:flex;align-items:center;justify-content:center;z-index:70}.dialog{width:min(1000px,96vw);max-height:86vh;background:#fff;border:1px solid #7e8f9d;box-shadow:0 12px 40px rgba(0,0,0,.25);display:flex;flex-direction:column}.dialog.small{width:min(650px,94vw)}.dialoghead{height:42px;padding:11px 14px;font-weight:800;border-bottom:1px solid var(--line);display:flex;align-items:center}.dialogbody{padding:10px;overflow:auto}.dialogfoot{padding:8px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:6px}
@media(max-width:1250px){.filters{grid-template-columns:repeat(3,minmax(0,1fr))}.summary{grid-template-columns:repeat(2,minmax(0,1fr))}.homegrid,.two,.quicklower,.settingsgrid{grid-template-columns:1fr}.systemcards{grid-template-columns:repeat(2,minmax(0,1fr))}.totals{grid-template-columns:1fr 150px 150px 150px 150px}}
@media(max-width:760px){.content{padding:6px}.filters,.formgrid,.settingsform{grid-template-columns:1fr}.span2,.span3,.span6{grid-column:1}.summary,.systemcards{grid-template-columns:1fr}.toplabel,.badge{display:none}.branch{min-width:90px}.totals{grid-template-columns:1fr 1fr}.totals>div:first-child{grid-column:1/-1}th,td{padding:5px;font-size:11px}}
@media print{.top,.mainnav,.stage,.subbar,.footer,.toolbar,.filters,.searchrow,.tabs,.btn{display:none!important}.app,.workspace,.content{height:auto;overflow:visible}.gridwrap{overflow:visible}th{position:static}body{background:#fff;font-size:10px}}

/* WT Print Designer core */
.designer-shell{display:flex;flex-direction:column;gap:7px;min-width:0}
.designer-toolbar{display:grid;grid-template-columns:190px minmax(240px,1fr) 110px;gap:7px;align-items:end}
.designer-name{min-width:0}
.designer-vars{display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding:6px;border:1px solid var(--line);background:#f8fafb}
.designer-grid{max-height:470px;overflow:auto;border:1px solid var(--line);background:#dfe5ea;padding:10px}
.designer-grid table{width:100%;min-width:720px;table-layout:fixed;background:#fff}
.designer-grid th,.designer-grid td{height:31px;padding:0;border:1px solid #cfd6dd;white-space:nowrap}
.designer-grid thead th{background:#e9edf1;text-align:center;position:sticky;top:0;z-index:3}
.designer-rowhead{width:40px!important;min-width:40px!important;max-width:40px!important;text-align:center;background:#e9edf1;font-size:11px}
.designer-cell{width:100%;height:30px;border:0;padding:4px 6px;background:#fff;outline:none;font:inherit}
.designer-cell:focus{box-shadow:inset 0 0 0 2px var(--blue);background:#f8fbfe}
.designer-note{font-size:11px;color:var(--muted);padding:6px 8px;border:1px solid var(--line);background:#fbfcfd}
@media(max-width:900px){.designer-toolbar{grid-template-columns:1fr 1fr}.designer-name{grid-column:1/-1}}

/* ===== V10 UI alignment with approved ERP mockups ===== */
.content,.panel,.homegrid,.listlower,.analytics-layout,.report-builder-layout{min-width:0;max-width:100%}
.modebar{min-height:42px;background:#f8fafb;border:1px solid var(--line);border-bottom:0;display:flex;align-items:center;padding:5px 8px;gap:6px;margin-bottom:0;overflow:auto}
.modebtn{height:31px;border:1px solid #9eabb7;background:#fff;border-radius:2px;padding:0 14px;color:#18354d;font-weight:600;white-space:nowrap}.modebtn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.listlower{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:8px;margin-top:8px;align-items:start}.quickactions{display:flex;flex-direction:column;gap:8px}.quickbtngrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.quickactions .btn{width:100%;height:34px}.sidebox{background:#fff;border:1px solid var(--line)}.minirow{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dotted #d9dfe4}.minirow:last-child{border-bottom:0}.minirow b{text-align:right}
.quickhead{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);background:#f7f9fb}.quicksummary{grid-template-columns:repeat(5,minmax(115px,1fr));padding:8px;margin:0}.quickdetailgrid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:0}.quickdetailgrid>div{padding:8px 10px;border-right:1px solid #e1e5e9;border-bottom:1px solid #e1e5e9}.quickdetailgrid span{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}.quickdetailgrid b{display:block;min-height:20px}.emptymsg{padding:30px;text-align:center;color:var(--muted)}
.mainlistgrid,.mainwarehousegrid{height:220px;min-height:188px;max-height:260px}.sales-main-panel,.stock-main-panel{margin-bottom:0}.saleslistgrid table th:nth-child(1){min-width:150px}.saleslistgrid table th:nth-child(3){min-width:190px}.saleslistgrid table th:nth-child(4){min-width:130px}.saleslistgrid table th:nth-child(n+6):nth-child(-n+10){min-width:100px}.stock-main-grid table th:nth-child(1){min-width:100px}.stock-main-grid table th:nth-child(2){min-width:210px}.stock-main-grid table th:nth-child(n+4){min-width:88px}.quick-movement-grid{max-height:190px;border-left:0;border-right:0;border-bottom:0}.catalog-main-grid{min-height:300px}.compact{width:140px}
.steps{display:flex;padding:8px;border-bottom:1px solid var(--line);background:#fff;overflow:auto}.step{display:flex;align-items:center;white-space:nowrap;color:#60717f}.step:after{content:'›';margin:0 8px;color:#a8b2bb}.step:last-child:after{display:none}.step.current{font-weight:800;color:var(--blue)}.step.done{color:var(--ok);font-weight:700}
/* Reports */
.report-summary{grid-template-columns:repeat(6,minmax(140px,1fr))}.analytics-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.9fr);gap:8px;margin-bottom:8px}.analytics-panel{margin-bottom:0}.chartbody,.analyticsbody{padding:10px}.bar-chart{height:190px;display:flex;align-items:flex-end;gap:8px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 10px 0;overflow:hidden}.bar-col{flex:1;min-width:32px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.bar-pair{height:155px;display:flex;align-items:flex-end;gap:2px}.bar{display:block;width:11px;min-height:2px}.bar.sale{background:#174b78}.bar.purchase{background:#7aa7c9}.bar-col small{font-size:9px;color:var(--muted);padding:4px 0}.chartlegend{display:flex;gap:14px;margin-top:7px;font-size:11px}.legend{display:inline-block;width:10px;height:10px;margin-right:4px}.legend.sale{background:#174b78}.legend.purchase{background:#7aa7c9}.expense-bars{display:grid;gap:12px;padding:8px}.expense-row{display:grid;grid-template-columns:130px 1fr 105px;gap:8px;align-items:center}.expense-row b{text-align:right}.expense-track{height:13px;background:#eef3f8;overflow:hidden}.expense-track i{display:block;height:100%;background:#7aa7c9}.report-builder{margin-top:8px}.report-builder-layout{display:grid;grid-template-columns:330px minmax(0,1fr);min-height:320px}.reportparams{padding:10px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px}.reportpreview{min-width:0;overflow:auto}.report-preview-note{padding:8px 10px;border-bottom:1px solid var(--line);background:#fafcfe;font-size:11px;color:#61707f}.preview-grid{border:0}.report-detail-grid{max-height:250px}.commission-report-grid{max-height:250px}.compare-grid{max-height:235px}
/* Settings */
.inline-actions{display:flex;gap:6px;align-items:center;padding:8px;border-top:1px solid var(--line);background:#fafbfc}.settings-note{padding:8px 10px;border-top:1px solid var(--line);background:#f8fafb;color:var(--muted);font-size:11px}.runbook{margin:4px 0 12px;padding-left:22px;line-height:1.7}.dropzone{border:1px dashed #8ba1b3;background:#f8fafb;padding:24px;text-align:center;color:#53616c}.numbering-grid{min-height:260px}
/* Home laptop fix: stack before the 1366 viewport can overflow. */
@media(max-width:1450px){.homegrid{grid-template-columns:1fr}.homegrid>.panel{min-width:0}.homegrid .gridwrap{max-width:100%}}
@media(max-width:1250px){.listlower,.analytics-layout,.report-builder-layout{grid-template-columns:1fr}.reportparams{border-right:0;border-bottom:1px solid var(--line)}.report-summary{grid-template-columns:repeat(3,minmax(140px,1fr))}.quicksummary{grid-template-columns:repeat(3,minmax(120px,1fr))}}
@media(max-width:900px){.quickdetailgrid{grid-template-columns:1fr 1fr}.expense-row{grid-template-columns:100px 1fr}.expense-row b{grid-column:2}.report-summary{grid-template-columns:repeat(2,minmax(130px,1fr))}}
.bar.h10{height:10px}.bar.h20{height:20px}.bar.h30{height:30px}.bar.h40{height:40px}.bar.h50{height:50px}.bar.h60{height:60px}.bar.h70{height:70px}.bar.h80{height:80px}.bar.h90{height:90px}.bar.h100{height:100px}.bar.h110{height:110px}.bar.h120{height:120px}.bar.h130{height:130px}.bar.h140{height:140px}.bar.h150{height:150px}
.expense-track i.w5{width:5%}.expense-track i.w10{width:10%}.expense-track i.w15{width:15%}.expense-track i.w20{width:20%}.expense-track i.w25{width:25%}.expense-track i.w30{width:30%}.expense-track i.w35{width:35%}.expense-track i.w40{width:40%}.expense-track i.w45{width:45%}.expense-track i.w50{width:50%}.expense-track i.w55{width:55%}.expense-track i.w60{width:60%}.expense-track i.w65{width:65%}.expense-track i.w70{width:70%}.expense-track i.w75{width:75%}.expense-track i.w80{width:80%}.expense-track i.w85{width:85%}.expense-track i.w90{width:90%}.expense-track i.w95{width:95%}.expense-track i.w100{width:100%}