body{background-color:#f8f8f6;margin:0;padding:0;font-family:Inter,system-ui,sans-serif}.app-layout{flex-direction:row;min-height:100vh;display:flex}.sidebar{z-index:100;background-color:#111827;flex-direction:column;flex-shrink:0;width:220px;transition:all .3s;display:flex}.main-content{box-sizing:border-box;flex:1;padding:32px;overflow:hidden auto}.sidebar-header{border-bottom:1px solid #ffffff14;flex-direction:column;gap:12px;padding:24px 20px 16px;display:flex}.sidebar-footer{border-top:1px solid #ffffff14;padding:16px 20px}.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto}.nav-item{cursor:pointer;border-left:3px solid #0000;align-items:center;gap:10px;padding:11px 20px;font-size:14px;transition:all .15s;display:flex}.nav-item.active{background:#ffffff0f;border-left-color:#f59e0b;color:#f59e0b!important}.nav-item:not(.active){color:#ffffffa6}.grid-4{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;display:grid}.grid-2{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;display:grid}.grid-detail{grid-template-columns:1fr 320px;gap:20px;display:grid}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{box-sizing:border-box;background:#fff;border-radius:16px;width:100%;max-width:500px;max-height:90vh;padding:24px;overflow-y:auto}.header-actions{justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px;display:flex}.table-header{color:#9ca3af;background:#f8f8f6;border-bottom:.5px solid #e0dfda;padding:10px 16px;font-size:12px;font-weight:500;display:grid}.table-row{cursor:pointer;border-bottom:.5px solid #f1efe8;align-items:center;padding:12px 16px;transition:background .1s;display:grid}.col-order{grid-template-columns:80px 1fr 130px 100px 120px 120px}.col-customer{grid-template-columns:1fr 130px 120px 100px}.mobile-card{background:#fff;border:1px solid #e0dfda;border-radius:12px;margin-bottom:12px;padding:16px;position:relative;box-shadow:0 1px 3px #0000000a}.mobile-card-row{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.mobile-card-footer{border-top:1px solid #f1efe8;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;display:flex}@media (width<=1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-detail{grid-template-columns:1fr}}@media (width<=768px){.app-layout{flex-direction:column}.sidebar{border-top:1px solid #ffffff1a;flex-direction:row;width:100%;height:65px;padding:0;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 10px #0000001a}.sidebar-header,.sidebar-footer{display:none!important}.sidebar-nav{white-space:nowrap;-webkit-overflow-scrolling:touch;flex-direction:row;padding:0;display:flex;overflow:auto hidden}.sidebar-nav::-webkit-scrollbar{display:none}.nav-item{flex-direction:column;justify-content:center;gap:4px;min-width:70px;padding:8px 12px;border-left:none!important}.nav-item i{margin-bottom:2px;font-size:20px!important}.nav-item span{text-align:center;font-size:10px;display:block}.nav-item.active{background:0 0;border-bottom:3px solid #f59e0b}.main-content{padding:16px 16px 80px}.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.header-actions{flex-direction:column;align-items:stretch}}