:root{--navy:#13223a;--navy2:#1b3152;--teal:#177f97;--teal2:#0f6c80;--green:#229b75;--red:#d64545;--orange:#df922c;--slate:#68788a;--bg:#eef3f7;--line:#d7e1e8;--head:#e6f0f6;--text:#0b1d34;--muted:#63758a;--white:#fff;--shadow:0 8px 30px rgba(14,35,58,.09)}
*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.app{height:100%;display:flex;overflow:hidden;background:var(--bg)}.sidebar{width:210px;flex:0 0 210px;background:var(--navy);color:#fff;display:flex;flex-direction:column;transition:.2s;z-index:5}.sidebar.collapsed{width:64px;flex-basis:64px}.brand{height:88px;padding:22px 20px 10px}.brand-title{font-size:21px;font-weight:800;letter-spacing:.2px}.brand-sub{font-size:10px;color:#9fb6d0;margin-top:3px;letter-spacing:.5px}.collapsed .brand{padding:22px 8px;text-align:center}.collapsed .brand-title{font-size:15px}.collapsed .brand-sub,.collapsed .menu-text{display:none}.menu{overflow:auto;padding:3px 0 12px}.menu button{width:100%;border:0;background:transparent;color:#fff;text-align:left;padding:12px 16px;display:flex;gap:10px;align-items:center;border-left:3px solid transparent;font-size:13px}.menu button:hover{background:rgba(255,255,255,.06)}.menu button.active{background:#20798d;border-left-color:#50c1d5}.menu-icon{width:18px;text-align:center;font-size:15px;opacity:.95}.collapsed .menu button{justify-content:center;padding:13px 8px}.main{min-width:0;flex:1;display:flex;flex-direction:column}.topbar{height:64px;flex:0 0 64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 12px 0 8px}.hamb{border:0;background:#fff;width:48px;height:46px;font-size:23px;color:var(--muted)}.page-title{font-size:21px;font-weight:750;margin-left:8px;flex:1}.userbox{text-align:right;color:#56677c;font-weight:600;line-height:1.2;margin-right:14px}.btn{border:0;color:#fff;padding:10px 18px;font-weight:650;min-height:38px;background:var(--teal);border-radius:0}.btn:hover{filter:brightness(.96)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-green{background:var(--green)}.btn-red{background:var(--red)}.btn-orange{background:var(--orange)}.btn-slate{background:var(--slate)}.btn-navy{background:var(--navy2)}.btn-light{background:#fff;color:var(--text);border:1px solid var(--line)}.content{flex:1;min-height:0;overflow:auto;padding:12px}.panel{background:#fff;border:1px solid var(--line)}.card{background:#fff;border:1px solid var(--line);padding:14px}.toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:12px}.toolbar .grow{flex:1;min-width:240px}.field{display:flex;flex-direction:column;gap:5px;min-width:130px}.field label{font-size:12px;font-weight:650;color:#24354a}.input,.select,.textarea{width:100%;border:1px solid #9da8b3;background:#fff;padding:8px 9px;min-height:36px;outline:none}.input:focus,.select:focus,.textarea:focus{border-color:var(--teal);box-shadow:0 0 0 2px rgba(23,127,151,.12)}.textarea{min-height:72px;resize:vertical}.check{display:flex;align-items:center;gap:7px}.check input{accent-color:#147db7}.data-wrap{overflow:auto;background:#fff;border:1px solid var(--line)}table.data{width:100%;border-collapse:collapse;min-width:780px;font-size:12px}table.data th{position:sticky;top:0;background:var(--head);z-index:1;color:#17304a;text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:650}table.data td{padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}table.data tbody tr:nth-child(even){background:#f8fafc}table.data tbody tr.selected{background:#d9f0f4}table.data tbody tr:hover{background:#edf7f9}.status-bad{color:#d93636;font-weight:700}.status-warn{color:#d67d18;font-weight:700}.status-good{color:#1c8b68;font-weight:700}.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:8px;margin-bottom:8px}.metric-card{background:#fff;border:1px solid var(--line);padding:12px}.metric-label{color:#5f7186;font-size:12px;font-weight:650}.metric-value{font-size:20px;color:var(--teal);font-weight:800;margin-top:10px}.alert-line{font-weight:800;color:#df2d2d;margin:4px 4px 14px}.empty{padding:50px 20px;text-align:center;color:#8795a5}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.section-title{font-size:16px;color:#096b83;font-weight:800;margin:0 0 14px}.form-grid{display:grid;grid-template-columns:190px minmax(200px,1fr);gap:12px 14px;align-items:center}.form-grid label{font-weight:650}.actions-right{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.danger-note{color:#e33434;font-weight:800}.muted{color:var(--muted)}
.sale-layout{display:grid;grid-template-rows:auto minmax(300px,1fr) auto;height:calc(100vh - 88px);gap:9px}.scanner-card{padding:10px}.scanner-title{font-size:12px;color:#05657d;font-weight:800;margin-bottom:4px}.scanner-row{display:grid;grid-template-columns:minmax(260px,1fr) 210px 260px;gap:10px}.scanner-status{display:flex;align-items:center;padding:0 12px;background:#eef9f5;color:#148465;font-weight:700}.sale-body{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:10px;min-height:0}.sale-table{min-height:0;overflow:auto;background:#fff;border:1px solid var(--line)}.sale-table table{min-width:650px}.summary{background:#fff;border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;min-height:0}.summary h3{color:#07657c;font-size:15px;margin:0 0 12px}.summary .spacer{flex:1}.summary-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-weight:650}.summary-total{border-top:1px solid var(--line);margin-top:4px;padding-top:10px}.summary-total .big{font-size:28px;color:var(--teal);font-weight:850;text-align:right;margin:6px 0}.sale-actions{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.sale-actions .btn{min-height:46px}.inline-input{width:90px;border:1px solid #a9b4bf;padding:6px;text-align:right}.remove-x{background:#fff;border:1px solid #e0a6a6;color:#c93434;padding:4px 8px}.status-box{padding:10px;background:#f2f7fa;border:1px solid var(--line);margin-bottom:10px;font-weight:650}.status-box.err{background:#fff1f1;color:#bd2d2d;border-color:#efc5c5}.status-box.ok{background:#eefaf5;color:#147a5f;border-color:#c7eadc}
.modal-bg{position:fixed;inset:0;background:rgba(5,16,30,.56);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}.modal{width:min(680px,100%);max-height:90vh;overflow:auto;background:#fff;box-shadow:0 18px 60px rgba(0,0,0,.28)}.modal-head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center}.modal-head h3{margin:0;flex:1}.modal-close{border:0;background:#fff;font-size:24px}.modal-body{padding:18px}.modal-actions{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-grid .full{grid-column:1/-1}
.login-page{min-height:100%;background:linear-gradient(135deg,#101d32,#17375b);display:flex;align-items:center;justify-content:center;padding:20px}.login-card{width:min(430px,100%);background:#fff;padding:32px;box-shadow:0 18px 55px rgba(0,0,0,.3)}.login-brand{font-size:28px;font-weight:850;color:var(--teal);text-align:center}.login-sub{text-align:center;color:var(--muted);margin:4px 0 28px}.login-card .field{margin-bottom:15px}.login-card .btn{width:100%;height:46px}.setup-warning{background:#fff2d8;border:1px solid #efc165;padding:12px;margin-bottom:15px;color:#72500c}.login-hint{font-size:12px;color:#7a8796;text-align:center;margin-top:14px}.loading{height:100%;display:flex;align-items:center;justify-content:center;color:#597086;font-weight:700}.toast{position:fixed;right:22px;bottom:22px;z-index:80;background:#14283f;color:#fff;padding:12px 16px;box-shadow:var(--shadow);max-width:360px}.toast.error{background:#b73131}.receipt{font-family:monospace}.receipt h2{text-align:center}.receipt table{width:100%;border-collapse:collapse}.receipt td{padding:3px}.receipt-total{font-size:20px;font-weight:bold;text-align:right}.print-only{display:none}
@media(max-width:1100px){.sidebar{width:180px;flex-basis:180px}.sale-body{grid-template-columns:minmax(0,1fr) 310px}.scanner-row{grid-template-columns:1fr 180px}.scanner-status{grid-column:1/-1;min-height:36px}.metric-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.sale-actions{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.sidebar{position:fixed;left:-220px;top:0;bottom:0;width:210px;flex-basis:210px;box-shadow:10px 0 30px rgba(0,0,0,.18)}.sidebar.mobile-open{left:0}.sidebar.collapsed{left:-80px}.topbar{height:58px;flex-basis:58px}.page-title{font-size:18px}.userbox{display:none}.content{padding:8px}.sale-layout{height:auto;min-height:calc(100vh - 74px)}.sale-body{grid-template-columns:1fr}.summary{min-height:330px}.scanner-row{grid-template-columns:1fr}.scanner-row .btn{width:100%}.sale-actions{grid-template-columns:repeat(2,1fr)}.metric-grid{grid-template-columns:1fr}.modal-grid{grid-template-columns:1fr}.modal-grid .full{grid-column:auto}.form-grid{grid-template-columns:1fr}.toolbar .grow{min-width:100%}}
@media print{body{background:#fff}.app,.modal-bg,.toast{display:none!important}.print-only{display:block!important;padding:20px}.receipt{max-width:360px;margin:auto}}