:root{font-family:'Noto Sans Thai',system-ui,sans-serif;color:#172033;background:#f3f6fa;line-height:1.5;--brand:#087f72;--brand2:#075e55;--border:#d9e1ea;--muted:#68758a;--danger:#b42318;--warning:#a15c00}*{box-sizing:border-box}body{margin:0}.center{min-height:100vh;display:grid;place-items:center}.spinner{width:24px;height:24px;border:3px solid #d7e5e3;border-top-color:var(--brand);border-radius:50%;display:inline-block;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}button,input,select,textarea{font:inherit}.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(320px,500px) 1fr}.login-panel{background:white;padding:clamp(32px,7vw,92px);display:flex;flex-direction:column;justify-content:center}.login-art{background:linear-gradient(145deg,#075e55,#0d9488);padding:72px;color:white;display:flex;align-items:flex-end}.login-art h2{font-size:clamp(32px,5vw,64px);line-height:1.15;margin:0 0 16px}.brand{display:flex;gap:12px;align-items:center;margin-bottom:44px}.logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#43c69f,#087f72);display:grid;place-items:center;color:#fff;font-weight:800}.brand strong{font-size:21px}.muted{color:var(--muted)}.mini{font-size:12px}.stack{display:flex;flex-direction:column;gap:16px}.field{display:flex;flex-direction:column;gap:6px;font-weight:600}.input{width:100%;border:1px solid var(--border);border-radius:10px;padding:11px 13px;background:#fff;color:#172033}.input:focus{outline:3px solid #cdeee8;border-color:var(--brand)}.btn{border:1px solid var(--border);background:#fff;color:#26344a;border-radius:10px;padding:9px 14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600}.btn:hover{border-color:#9dafc0}.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.danger{color:var(--danger)}.btn:disabled{opacity:.55;cursor:not-allowed}.error{background:#fff0ee;color:var(--danger);border:1px solid #ffc9c2;padding:12px 14px;border-radius:10px}.notice{background:#ecfdf3;color:#067647;border:1px solid #abefc6;padding:12px 14px;border-radius:10px}.layout{min-height:100vh}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 1280px)/2));position:sticky;top:0;z-index:5}.nav{display:flex;gap:6px}.nav button{border:0;background:transparent;padding:9px 12px;border-radius:9px;cursor:pointer;color:#536177}.nav button.active{background:#e7f5f2;color:var(--brand2);font-weight:700}.content{max-width:1280px;margin:0 auto;padding:26px 20px 60px}.page-head,.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.page-head h1{margin:0;font-size:25px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 2px 8px #17203308}.pad{padding:18px}.metric{font-size:30px;font-weight:700;margin-top:5px}.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:600;background:#edf1f6;color:#536177}.pill.ok{background:#e8f7ef;color:#087443}.pill.warn{background:#fff4df;color:#8a4b00}.pill.bad{background:#ffedeb;color:#b42318}.pill.info{background:#e8f1ff;color:#245ea9}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--border);border-radius:14px}.table{width:100%;border-collapse:collapse;min-width:780px}.table th,.table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:top}.table th{font-size:12px;text-transform:uppercase;color:#748197;background:#f8fafc}.table tr:last-child td{border-bottom:0}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.actions{display:flex;gap:7px;flex-wrap:wrap}.modal-backdrop{position:fixed;inset:0;background:#10182880;z-index:20;display:grid;place-items:center;padding:20px}.modal{width:min(960px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:17px;box-shadow:0 24px 70px #1018284d}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:2}.modal-head h2{margin:0;font-size:19px}.modal-body{padding:20px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.branch-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}.check{border:1px solid var(--border);border-radius:10px;padding:10px;display:flex;gap:8px;align-items:flex-start}.search{display:flex;gap:8px;flex:1;min-width:260px}.search .input{flex:1}.empty{text-align:center;padding:34px;color:var(--muted)}.section-title{font-size:17px;font-weight:700}.danger-text{color:var(--danger)}.form-section{border:1px solid var(--border);border-radius:12px;padding:15px;background:#fbfcfe}.form-section .section-title{margin-bottom:12px}.grid-span-2{grid-column:span 2}textarea.input{resize:vertical;min-height:70px}@media(max-width:760px){.login-page{display:block}.login-panel{min-height:100vh}.login-art{display:none}.topbar{height:auto;padding:10px 14px;align-items:flex-start}.topbar>.brand{margin:0}.nav{overflow:auto;width:100%}.content{padding:18px 12px 50px}.grid{grid-template-columns:1fr}.grid-span-2{grid-column:span 1}.table{min-width:680px}}

/* Compact product editor: arranged like the EasyMart desktop product screen. */
.modal:has(.compact-form){width:min(1360px,100%);max-height:98vh}
.modal:has(.compact-form) .modal-head{padding:10px 16px}
.modal:has(.compact-form) .modal-body{padding:10px 16px 12px}
.compact-form{gap:5px}
.compact-form .form-section{border:0;border-top:1px solid var(--border);border-radius:0;padding:6px 0 0;background:transparent}
.compact-form .section-title{font-size:14px;margin-bottom:4px}
.compact-form .field{font-size:12px;gap:2px}
.compact-form .input{min-height:29px;padding:3px 7px;border-radius:6px}
.compact-form .btn{padding:7px 11px;border-radius:7px}
.compact-form .btn.sm{padding:4px 8px;font-size:12px}
.product-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px 8px}
.wide-2{grid-column:span 2}
.price-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px 8px}
.compact-checks{display:flex;flex-wrap:wrap;gap:4px}
.compact-checks .check{padding:3px 7px;border-radius:6px;align-items:center;font-size:12px}
.barcode-row{display:grid;grid-template-columns:minmax(240px,1fr) 1fr;gap:10px;align-items:end}
.compact-alert{padding:7px 9px;margin-bottom:7px;font-size:13px}
.form-footer{display:flex;gap:10px;align-items:end}
.grow{flex:1}
.relation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.relation-details>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.relation-details>summary::-webkit-details-marker{display:none}
.relation-details>summary:before{content:'▸';color:var(--brand);font-size:13px}
.relation-details[open]>summary:before{content:'▾'}
.relation-details .relation-content{padding-top:6px}
.relation-block{min-width:0}
.relation-head{margin-bottom:4px}
.relation-wrap{overflow:auto;border:1px solid var(--border);border-radius:8px;background:#fff}
.relation-table{width:100%;border-collapse:collapse;min-width:360px}
.relation-table th,.relation-table td{padding:4px 5px;border-bottom:1px solid var(--border);vertical-align:middle}
.relation-table th{background:#f7f9fc;color:#64748b;font-size:11px;text-align:left}
.relation-table tr:last-child td{border-bottom:0}
.product-unit-tabs{display:flex;gap:5px;align-items:center;overflow:auto;padding:0 1px 4px;border-bottom:1px solid var(--border)}
.product-unit-tab{white-space:nowrap;border:1px solid var(--border);background:#f7f9fc;color:#536177;border-radius:8px 8px 3px 3px;padding:5px 10px;cursor:pointer;font-weight:700;font-size:12px}
.product-unit-tab.active{background:#e7f5f2;border-color:#87cfc4;color:var(--brand2)}
.product-unit-tab.add{background:#fff;color:var(--brand)}
.relation-table .input{min-height:30px;padding:4px 7px}
.row-remove{border:0;background:transparent;color:var(--danger);cursor:pointer;padding:3px 6px;font-size:18px;line-height:1}
.minmax-grid{display:grid;grid-template-columns:auto minmax(130px,1fr) 100px auto minmax(130px,1fr) 100px;gap:6px;align-items:center;margin-top:9px}
.spinner.tiny{width:13px;height:13px;border-width:2px}
@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.price-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.relation-grid{grid-template-columns:1fr}.minmax-grid{grid-template-columns:auto 1fr 100px}}
@media(max-width:600px){.modal-backdrop{padding:0}.modal:has(.compact-form){max-height:100vh;border-radius:0}.modal-body{padding:12px}.barcode-row,.product-grid,.price-grid{grid-template-columns:1fr}.wide-2{grid-column:span 1}.form-footer{align-items:stretch;flex-direction:column}.minmax-grid{grid-template-columns:1fr}.minmax-grid>span{margin-top:4px}}