*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:DM Sans,system-ui,sans-serif;background:#f4f5f7;color:#1a1d2e;min-height:100vh;font-size:14px;-webkit-font-smoothing:antialiased}.app{display:flex;min-height:100vh}.sidebar{width:220px;min-width:220px;background:#fff;border-right:1px solid #e2e4ed;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:transform .25s ease}.sidebar-logo{padding:24px 20px 16px;border-bottom:1px solid #e2e4ed}.sidebar-logo h1{font-size:16px;font-weight:600;color:#1a1d2e}.sidebar-logo p{font-size:11px;color:#9ca3af;margin-top:3px}.sidebar-nav{padding:12px 10px;flex:1}.nav-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#4b5563;text-align:left;transition:background .15s,color .15s;margin-bottom:2px}.nav-btn:hover{background:#f0f1f5;color:#1a1d2e}.nav-btn.active{background:#ededfc;color:#6366f1}.nav-icon{font-size:16px;width:20px;text-align:center}.sidebar-footer{padding:16px 20px;border-top:1px solid #e2e4ed;font-size:11px;color:#4b5563}.sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:99}.topbar{display:none;position:fixed;top:0;left:0;right:0;height:52px;z-index:98;background:#fff;border-bottom:1px solid #e2e4ed;align-items:center;padding:0 16px;gap:12px}.hamburger{background:none;border:none;cursor:pointer;color:#1a1d2e;font-size:20px;padding:4px;line-height:1}.topbar-title{font-size:15px;font-weight:600;color:#1a1d2e}.sidebar-close{display:none;background:none;border:none;color:#9ca3af;font-size:20px;cursor:pointer;padding:4px;margin-left:auto}.app-main{margin-left:220px;flex:1;padding:32px;max-width:1100px;width:100%}.page-header{margin-bottom:28px}.page-header h2{font-size:20px;font-weight:600;color:#1a1d2e}.page-header p{font-size:12px;color:#9ca3af;margin-top:4px}.dash-section{margin-bottom:36px}.section-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.section-header h2{font-size:15px;font-weight:600;color:#1a1d2e}.badge{background:#e2e4ed;color:#4b5563;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:500}.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}.metric-card{background:#fff;border-radius:12px;padding:16px 20px;border:1px solid #e2e4ed;display:flex;flex-direction:column;gap:4px}.metric-label{font-size:11px;color:#9ca3af;font-weight:500;text-transform:uppercase;letter-spacing:.06em}.metric-value{font-size:22px;font-weight:600;color:#1a1d2e;font-family:DM Mono,monospace;letter-spacing:-.02em;margin-top:6px}.metric-sub{font-size:12px;color:#9ca3af}.metric-bar{margin-top:12px;height:3px;background:#e2e4ed;border-radius:2px}.metric-bar-fill{width:60%;height:100%;border-radius:2px}.chart-card{background:#fff;border-radius:12px;padding:16px 20px;border:1px solid #e2e4ed}.chart-label{font-size:11px;color:#9ca3af;font-weight:500;margin-bottom:14px;letter-spacing:.06em}.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.data-table{width:100%;border-collapse:collapse;min-width:520px}.data-table th{text-align:left;padding:6px 8px;font-size:11px;color:#9ca3af;font-weight:500;border-bottom:1px solid #e2e4ed;white-space:nowrap}.data-table td{padding:9px 8px;border-bottom:1px solid #f0f1f5;font-size:13px;color:#1a1d2e;white-space:nowrap}.data-table tr:last-child td{border-bottom:none}.mono{font-family:DM Mono,monospace}.muted{color:#6b7280!important}.accent{color:#6366f1!important}.danger{color:#ef4444!important}.status-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;letter-spacing:.03em;white-space:nowrap}.spinner-wrap{display:flex;align-items:center;justify-content:center;height:80px}.spinner{width:20px;height:20px;border:2px solid #2a2d3a;border-top-color:#6366f1;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-box{display:flex;align-items:center;justify-content:space-between;background:#1f1215;border:1px solid #3f1a1a;border-radius:8px;padding:12px 16px;color:#ef4444;font-size:13px;margin:8px 0}.error-box button{background:none;border:1px solid #ef4444;color:#ef4444;padding:4px 12px;border-radius:6px;cursor:pointer;font-size:12px;white-space:nowrap;margin-left:12px}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#2a2d3a;border-radius:4px}@media (max-width: 1024px){.sidebar{width:180px;min-width:180px}.app-main{margin-left:180px;padding:24px 20px}}@media (max-width: 768px){.topbar{display:flex}.sidebar-close{display:block}.sidebar{transform:translate(-100%);width:240px;min-width:240px;top:0}.sidebar.open{transform:translate(0)}.sidebar-overlay.open{display:block}.app-main{margin-left:0;padding:72px 16px 24px}.metric-grid{grid-template-columns:repeat(2,1fr);gap:10px}.metric-value{font-size:18px}.page-header h2{font-size:17px}}@media (max-width: 400px){.metric-grid{grid-template-columns:1fr}.app-main{padding:68px 12px 20px}}.date-filter{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px;flex-wrap:wrap}.date-filter-inputs{display:flex;gap:10px;flex-wrap:wrap}.date-input-group{display:flex;flex-direction:column;gap:4px}.date-input-group label{font-size:11px;color:#6b7280;font-weight:500;text-transform:uppercase;letter-spacing:.06em}.date-input-group input[type=date]{background:#161922;border:1px solid #1e2130;border-radius:8px;color:#c9cadb;font-family:DM Mono,monospace;font-size:13px;padding:8px 12px;outline:none;cursor:pointer;transition:border-color .15s}.date-input-group input[type=date]:focus{border-color:#6366f1}.date-filter-actions{display:flex;gap:8px}.btn-apply{background:#6366f1;border:none;border-radius:8px;color:#fff;font-family:inherit;font-size:13px;font-weight:500;padding:8px 16px;cursor:pointer;transition:background .15s}.btn-apply:hover{background:#4f46e5}.btn-reset{background:#1e2130;border:none;border-radius:8px;color:#6b7280;font-family:inherit;font-size:13px;font-weight:500;padding:8px 16px;cursor:pointer;transition:background .15s,color .15s}.btn-reset:hover{background:#2a2d3a;color:#c9cadb}@media (max-width: 768px){.date-filter{flex-direction:column;align-items:flex-start}.date-input-group input[type=date]{font-size:12px;padding:7px 10px}}.filters-row{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.cashier-filter{display:flex;flex-direction:column;gap:6px}.cashier-filter-label{font-size:11px;color:#6b7280;font-weight:500;text-transform:uppercase;letter-spacing:.06em}.cashier-checkboxes{display:flex;flex-wrap:wrap;gap:6px}.cashier-checkbox{display:flex;align-items:center;gap:6px;background:#161922;border:1px solid #1e2130;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:13px;color:#6b7280;transition:border-color .15s,color .15s,background .15s;-webkit-user-select:none;user-select:none}.cashier-checkbox:hover{border-color:#6366f1;color:#c9cadb}.cashier-checkbox.checked{border-color:#6366f1;color:#818cf8;background:#1e1f3a}.cashier-checkbox input[type=checkbox]{display:none}.cashier-count{background:#1e2130;color:#6b7280;font-size:10px;padding:1px 6px;border-radius:10px;font-family:DM Mono,monospace}.cashier-checkbox.checked .cashier-count{background:#2d2f5a;color:#818cf8}@media (max-width: 768px){.filters-row{flex-direction:column}.cashier-checkboxes{gap:5px}.cashier-checkbox{font-size:12px;padding:5px 10px}}body.light{background:#f4f5f7;color:#1a1d2e}body.light .sidebar{background:#fff;border-right-color:#e2e4ed}body.light .sidebar-logo h1{color:#1a1d2e}body.light .sidebar-logo p{color:#9ca3af}body.light .sidebar-footer{color:#9ca3af;border-top-color:#e2e4ed}body.light .nav-btn{color:#6b7280}body.light .nav-btn:hover{background:#f0f1f5;color:#1a1d2e}body.light .nav-btn.active{background:#ededfc;color:#6366f1}body.light .topbar{background:#fff;border-bottom-color:#e2e4ed}body.light .hamburger,body.light .topbar-title{color:#1a1d2e}body.light .sidebar-close{color:#9ca3af}body.light .page-header h2{color:#1a1d2e}body.light .page-header p{color:#9ca3af}body.light .section-header h2{color:#1a1d2e}body.light .badge{background:#e2e4ed;color:#6b7280}body.light .metric-card{background:#fff;border-color:#e2e4ed}body.light .metric-label{color:#9ca3af}body.light .metric-bar{background:#e2e4ed}body.light .chart-card{background:#fff;border-color:#e2e4ed}body.light .chart-label{color:#9ca3af}body.light .data-table th{color:#9ca3af;border-bottom-color:#e2e4ed}body.light .data-table td{color:#1a1d2e;border-bottom-color:#f0f1f5}body.light .muted{color:#9ca3af!important}body.light .date-input-group label{color:#9ca3af}body.light .date-input-group input[type=date]{background:#f4f5f7;border-color:#e2e4ed;color:#1a1d2e}body.light .btn-reset{background:#e2e4ed;color:#6b7280}body.light .btn-reset:hover{background:#d1d5db;color:#1a1d2e}body.light .cashier-checkbox{background:#f4f5f7;border-color:#e2e4ed;color:#6b7280}body.light .cashier-checkbox:hover{border-color:#6366f1;color:#1a1d2e}body.light .cashier-checkbox.checked{background:#ededfc;border-color:#6366f1;color:#6366f1}body.light .cashier-count{background:#e2e4ed;color:#9ca3af}body.light .cashier-checkbox.checked .cashier-count{background:#ddddfb;color:#6366f1}body.light .error-box{background:#fff5f5;border-color:#fecaca;color:#ef4444}body.light .sidebar-overlay.open{background:#0000004d}.theme-toggle{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;margin:0 10px 8px;background:none;border:1px solid #1e2130;border-radius:8px;cursor:pointer;font-family:inherit;font-size:12px;color:#6b7280;transition:border-color .15s,color .15s;width:calc(100% - 20px)}.theme-toggle:hover{border-color:#6366f1;color:#c9cadb}body.light .theme-toggle{border-color:#e2e4ed;color:#6b7280}body.light .theme-toggle:hover{border-color:#6366f1;color:#1a1d2e}.theme-toggle-track{width:32px;height:18px;background:#2a2d3a;border-radius:9px;position:relative;transition:background .2s;flex-shrink:0}.theme-toggle-track.on{background:#6366f1}.theme-toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s}.theme-toggle-track.on .theme-toggle-thumb{transform:translate(14px)}.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:0}@media (max-width: 768px){.charts-row{grid-template-columns:1fr}}body.light .data-table td{color:#1a1d2e}body.light .data-table th{color:#6b7280}body.light .metric-value{color:#1a1d2e}body.light .metric-label{color:#6b7280}body.light .metric-sub{color:#9ca3af}body.light .chart-label{color:#6b7280}body.light .section-header h2,body.light .page-header h2{color:#1a1d2e}body.light .page-header p{color:#6b7280}body.light .badge{color:#4b5563}body.light .mono{color:#1a1d2e}body.light .cashier-filter-label,body.light .date-input-group label,body.light .sidebar-footer{color:#6b7280}body.light .nav-btn{color:#4b5563}body.light .topbar-title{color:#1a1d2e}.inv-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:12px}.inv-status-tabs{display:flex;gap:6px;flex-wrap:wrap}.inv-tab{display:flex;align-items:center;gap:6px;background:#161922;border:1px solid #1e2130;border-radius:8px;padding:7px 14px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#6b7280;transition:border-color .15s,color .15s}.inv-tab:hover{border-color:#6366f1;color:#c9cadb}.inv-tab.active{border-color:#6366f1;color:#818cf8;background:#1e1f3a}.inv-tab-count{background:#1e2130;color:#6b7280;font-size:10px;padding:1px 6px;border-radius:10px;font-family:DM Mono,monospace}.inv-tab.active .inv-tab-count{background:#2d2f5a;color:#818cf8}.inv-search{display:flex;gap:6px}.inv-search input{background:#161922;border:1px solid #1e2130;border-radius:8px;color:#c9cadb;font-family:inherit;font-size:13px;padding:7px 12px;outline:none;transition:border-color .15s;width:200px}.inv-search input:focus{border-color:#6366f1}.inv-search button{background:#1e2130;border:none;border-radius:8px;color:#6b7280;font-family:inherit;font-size:13px;padding:7px 14px;cursor:pointer;transition:background .15s,color .15s}.inv-search button:hover{background:#2a2d3a;color:#c9cadb}.inv-pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid #1e2130}.inv-pagination button:disabled{opacity:.3;cursor:not-allowed}body.light .inv-tab{background:#f4f5f7;border-color:#e2e4ed;color:#6b7280}body.light .inv-tab:hover{border-color:#6366f1;color:#1a1d2e}body.light .inv-tab.active{background:#ededfc;border-color:#6366f1;color:#6366f1}body.light .inv-tab-count{background:#e2e4ed;color:#9ca3af}body.light .inv-tab.active .inv-tab-count{background:#ddddfb;color:#6366f1}body.light .inv-search input{background:#f4f5f7;border-color:#e2e4ed;color:#1a1d2e}body.light .inv-search button{background:#e2e4ed;color:#6b7280}body.light .inv-pagination{border-top-color:#e2e4ed}@media (max-width: 768px){.inv-toolbar{flex-direction:column;align-items:flex-start}.inv-search input{width:160px}}body.light .recharts-cartesian-axis-tick text{fill:#4b5563!important}body.light .recharts-yAxis .recharts-cartesian-axis-tick text{fill:#1a1d2e!important}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f4f5f7;padding:20px}body.dark .login-page{background:#0f1117}.login-card{background:#fff;border:1px solid #e2e4ed;border-radius:16px;padding:40px 36px;width:100%;max-width:400px;box-shadow:0 4px 24px #00000014}body.dark .login-card{background:#161922;border-color:#1e2130;box-shadow:0 4px 24px #0006}.login-logo{text-align:center;margin-bottom:32px}.login-logo-icon{width:52px;height:52px;background:#6366f1;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#fff;margin:0 auto 14px}.login-logo h1{font-size:20px;font-weight:600;color:#1a1d2e;margin-bottom:4px}.login-logo p{font-size:13px;color:#9ca3af}body.dark .login-logo h1{color:#f1f2f8}.login-form{display:flex;flex-direction:column;gap:16px}.login-field{display:flex;flex-direction:column;gap:6px}.login-field label{font-size:12px;font-weight:500;color:#6b7280;text-transform:uppercase;letter-spacing:.06em}.login-field input{background:#f4f5f7;border:1px solid #e2e4ed;border-radius:8px;color:#1a1d2e;font-family:inherit;font-size:14px;padding:10px 14px;outline:none;transition:border-color .15s}.login-field input:focus{border-color:#6366f1}body.dark .login-field input{background:#0f1117;border-color:#1e2130;color:#f1f2f8}.login-error{background:#fff5f5;border:1px solid #fecaca;border-radius:8px;color:#ef4444;font-size:13px;padding:10px 14px}body.dark .login-error{background:#1f1215;border-color:#3f1a1a}.login-btn{background:#6366f1;border:none;border-radius:8px;color:#fff;font-family:inherit;font-size:14px;font-weight:600;padding:11px;cursor:pointer;transition:background .15s;margin-top:4px}.login-btn:hover:not(:disabled){background:#4f46e5}.login-btn:disabled{opacity:.5;cursor:not-allowed}.login-footer{text-align:center;font-size:11px;color:#9ca3af;margin-top:24px}.logout-btn{display:flex;align-items:center;justify-content:center;width:calc(100% - 20px);margin:0 10px 8px;background:none;border:1px solid #1e2130;border-radius:8px;cursor:pointer;font-family:inherit;font-size:12px;color:#6b7280;padding:10px;transition:border-color .15s,color .15s}.logout-btn:hover{border-color:#ef4444;color:#ef4444}body.light .logout-btn{border-color:#e2e4ed}body.light .logout-btn:hover{border-color:#ef4444;color:#ef4444}.nav-btn{text-decoration:none}body.light .data-table td{color:#1a1d2e!important}body.light .data-table th{color:#4b5563!important}body.light .mono{color:#1a1d2e!important}body.light .muted{color:#6b7280!important}body.light .accent{color:#4f46e5!important}body.light .recharts-yAxis .recharts-cartesian-axis-tick text,body.light .recharts-xAxis .recharts-cartesian-axis-tick text{fill:#4b5563!important}body.light td{color:#1a1d2e}body.light td[style]{color:#1a1d2e!important}.product-name-cell{color:#c9cadb}body.light .product-name-cell{color:#1a1d2e!important}body.dark{background:#0f1117;color:#e8e9f0}body.dark .sidebar{background:#12151e;border-right-color:#1e2130}body.dark .sidebar-logo{border-bottom-color:#1e2130}body.dark .sidebar-logo h1{color:#f1f2f8}body.dark .sidebar-logo p{color:#6b7280}body.dark .sidebar-footer{color:#4b5563;border-top-color:#1e2130}body.dark .nav-btn{color:#6b7280}body.dark .nav-btn:hover{background:#1a1d2a;color:#c9cadb}body.dark .nav-btn.active{background:#1e1f3a;color:#818cf8}body.dark .topbar{background:#12151e;border-bottom-color:#1e2130}body.dark .topbar-title{color:#f1f2f8}body.dark .hamburger{color:#c9cadb}body.dark .sidebar-close{color:#6b7280}body.dark .page-header h2{color:#f1f2f8}body.dark .page-header p{color:#6b7280}body.dark .section-header h2{color:#c9cadb}body.dark .badge{background:#1e2130;color:#6b7280}body.dark .metric-card{background:#161922;border-color:#1e2130}body.dark .metric-label{color:#6b7280}body.dark .metric-value{color:#f1f2f8}body.dark .metric-sub{color:#6b7280}body.dark .metric-bar{background:#1e2130}body.dark .chart-card{background:#161922;border-color:#1e2130}body.dark .chart-label{color:#6b7280}body.dark .data-table th{color:#6b7280;border-bottom-color:#1e2130}body.dark .data-table td{color:#c9cadb;border-bottom-color:#1e2130}body.dark .product-name-cell{color:#c9cadb}body.dark .mono{color:#e8e9f0!important}body.dark .muted{color:#6b7280!important}body.dark .accent{color:#6366f1!important}