:root{--primary:#ff8a00;--primary-hover:#e67a00;--bg-color:#f8f9fa;--surface:#fff;--text-main:#1a1a1a;--text-muted:#666;--border:#f0f0f0;--success:#2e7d32;--success-bg:#e8f5e9;--radius:12px;--shadow-sm:0 2px 8px #0000000a;--shadow-md:0 4px 16px #00000014}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;font-family:Inter,-apple-system,sans-serif}input,textarea{-webkit-user-select:auto;user-select:auto}.app-container{height:100vh;display:flex;overflow:hidden}.sidebar{background:var(--surface);border-right:1px solid var(--border);z-index:100;width:280px;box-shadow:var(--shadow-md);flex-direction:column;padding:24px 16px;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;bottom:0;left:-280px}.sidebar.open{transform:translate(280px)}.sidebar-overlay{z-index:99;opacity:0;background:#00000080;transition:opacity .3s;display:none;position:fixed;inset:0}.sidebar-overlay.open{opacity:1;display:block}.sidebar-logo{border-bottom:1px solid var(--border);flex-direction:column;align-items:center;margin-bottom:40px;padding-bottom:20px;display:flex}.logo-text{color:var(--primary);letter-spacing:-1px;font-size:32px;font-weight:800}.logo-subtext{letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;font-size:14px;font-weight:500}.sidebar-nav{flex-direction:column;flex:1;gap:8px;display:flex}.nav-item{color:var(--text-muted);border-radius:var(--radius);cursor:pointer;background:0 0;border:none;align-items:center;gap:12px;padding:12px 16px;font-size:15px;font-weight:500;transition:all .2s;display:flex}.nav-item:hover{background:var(--bg-color);color:var(--text-main)}.nav-item.active{background:var(--primary);color:#fff}.sidebar-footer{border-top:1px solid var(--border);margin-top:auto;padding-top:16px}.user-info{align-items:center;gap:12px;display:flex}.avatar{background:var(--bg-color);width:36px;height:36px;color:var(--primary);border-radius:50%;justify-content:center;align-items:center;font-weight:600;display:flex}.details{flex-direction:column;display:flex}.details .name{font-size:14px;font-weight:600}.details .role{color:var(--text-muted);font-size:12px}.main-content{flex-direction:column;flex:1;height:100vh;display:flex;position:relative;overflow:hidden}.view-container{flex:1;padding:24px;overflow-y:auto}.global-header{background:var(--surface);border-bottom:1px solid var(--border);z-index:5;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.network-status-dot{border-radius:50%;width:10px;height:10px}.network-status-dot.online{background:#4ade80;box-shadow:0 0 0 4px #dcfce7}.network-status-dot.offline{background:#f87171;box-shadow:0 0 0 4px #fee2e2}.header-icon-btn{border:1px solid var(--border);border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;display:flex}.header-avatar{background:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;font-weight:600;display:flex}.bottom-nav{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border);z-index:40;background:#ffffffe6;justify-content:center;padding:8px 0;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav-item{color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;display:flex}.bottom-sheet{background:var(--surface);z-index:100;border-radius:20px 20px 0 0;flex-direction:column;gap:12px;padding:20px;animation:.3s cubic-bezier(.16,1,.3,1) slideUp;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 24px #0000001a}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sheet-item{background:var(--bg-color);border-radius:var(--radius);cursor:pointer;text-align:left;border:none;padding:16px;font-size:15px;font-weight:600}.floating-cart-btn{background:var(--primary);color:#fff;border-radius:var(--radius);z-index:30;cursor:pointer;border:none;justify-content:space-between;align-items:center;padding:16px 20px;font-size:15px;font-weight:700;display:flex;position:fixed;bottom:80px;left:16px;right:16px;box-shadow:0 8px 24px #ff8a004d}.search-bar{border:1px solid var(--border);border-radius:var(--radius);background:#fff;width:100%;margin-bottom:20px;padding:12px 16px;font-size:14px}.page-header{justify-content:space-between;align-items:flex-end;margin-bottom:32px;display:flex}.page-title{margin-bottom:4px;font-size:28px;font-weight:700}.page-subtitle{color:var(--text-muted);font-size:14px}.btn{border-radius:var(--radius);cursor:pointer;border:none;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn-secondary{background:var(--surface);border:1px solid var(--border);color:var(--text-main)}.btn-secondary:hover{background:var(--bg-color)}.form-group{margin-bottom:16px}.form-label{color:var(--text-muted);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-input{border:1px solid var(--border);border-radius:var(--radius);width:100%;padding:10px 12px;font-size:14px;transition:border-color .2s}.form-input:focus{border-color:var(--primary);outline:none}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:24px}.pos-layout{grid-template-columns:1fr 380px;gap:24px;height:calc(100vh - 120px);display:grid}.menu-section{flex-direction:column;gap:24px;display:flex}.category-tabs{gap:16px;padding-bottom:16px;display:flex;overflow-x:auto}.category-tab{background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s;display:flex}.category-tab.active{background:var(--text-main);border-color:var(--text-main);color:#fff}.menu-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding-right:8px;display:grid;overflow-y:auto}.menu-card{background:var(--surface);border-radius:var(--radius);cursor:pointer;box-shadow:var(--shadow-sm);border:2px solid #0000;flex-direction:column;justify-content:space-between;min-height:120px;padding:16px;transition:all .2s;display:flex}.menu-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary);transform:translateY(-2px)}.menu-card .item-name{margin-bottom:8px;font-size:15px;font-weight:600}.menu-card .item-price{color:var(--primary);font-size:16px;font-weight:700}.cart-section{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);flex-direction:column;display:flex}.cart-header{border-bottom:1px solid var(--border);padding:20px;font-size:18px;font-weight:700}.cart-items{flex-direction:column;flex:1;gap:16px;padding:20px;display:flex;overflow-y:auto}.cart-item{justify-content:space-between;align-items:center;display:flex}.cart-item-info{flex:1}.cart-item-name{font-size:14px;font-weight:500}.cart-item-price{color:var(--text-muted);font-size:13px}.cart-item-actions{align-items:center;gap:12px;display:flex}.qty-btn{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.qty-btn:hover{background:var(--bg-color)}.cart-footer{border-top:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);background:#fdfdfd;padding:20px}.summary-row{color:var(--text-muted);justify-content:space-between;margin-bottom:12px;font-size:14px;display:flex}.summary-row.total{color:var(--text-main);border-top:1px dashed var(--border);margin-top:16px;margin-bottom:24px;padding-top:16px;font-size:20px;font-weight:700}.checkout-btn{width:100%;padding:16px;font-size:16px}.table-container{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}table{border-collapse:collapse;width:100%}th{text-align:left;color:var(--text-muted);text-transform:uppercase;border-bottom:1px solid var(--border);background:#fafafa;padding:16px;font-size:12px;font-weight:600}td{border-bottom:1px solid var(--border);vertical-align:middle;padding:16px;font-size:14px}tr:last-child td{border-bottom:none}.status-badge{border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600}.status-badge.optimal{background:var(--success-bg);color:var(--success)}.status-badge.low{color:#e65100;background:#fff3e0}.reports-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.date-filters{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-sm);align-items:center;gap:12px;padding:6px;display:flex}.date-separator{color:var(--text-muted);font-size:14px;font-weight:500}.date-input-group{background:var(--bg-color);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;display:flex}.date-icon{color:var(--text-muted)}.date-picker{color:var(--text-main);cursor:pointer;background:0 0;border:none;outline:none;font-family:inherit;font-size:14px;font-weight:500}.highlight-today{border:2px solid var(--primary);background:#fffafb}.kpi-icon.today-rev{background:var(--primary);color:#fff}.kpi-grid{grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px;display:grid}.kpi-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);align-items:center;gap:16px;padding:24px;display:flex}.kpi-icon{border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.kpi-icon.revenue{color:var(--primary);background:#ffebee}.kpi-icon.orders{color:#3f51b5;background:#e8eaf6}.kpi-icon.aov{color:#2e7d32;background:#e8f5e9}.kpi-icon.tax{color:#e65100;background:#fff3e0}.kpi-details .label{color:var(--text-muted);margin-bottom:4px;font-size:13px}.kpi-details .value{font-size:24px;font-weight:700}.charts-grid{grid-template-columns:2fr 1fr;gap:24px;display:grid}.chart-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:24px}.chart-title{margin-bottom:24px;font-size:16px;font-weight:600}.empty-state{height:200px;color:var(--text-muted);border:1px dashed var(--border);background:#fafafa;border-radius:8px;justify-content:center;align-items:center;font-size:14px;display:flex}.menu-editor-layout{grid-template-columns:300px 1fr;gap:24px;display:grid}.toggle-switch{width:44px;height:24px;display:inline-block;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;background-color:#ccc;border-radius:24px;transition:all .4s;position:absolute;inset:0}.toggle-slider:before{content:"";background-color:#fff;border-radius:50%;width:18px;height:18px;transition:all .4s;position:absolute;bottom:3px;left:3px}input:checked+.toggle-slider{background-color:#ff6d00}input:checked+.toggle-slider:before{transform:translate(20px)}.action-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px}.action-btn:hover{background:var(--bg-color);color:var(--text-main)}.status-badge.critical{color:#c62828;background:#ffebee}.notification-dot{border-radius:50%;width:8px;height:8px;position:absolute;top:10px;right:12px}.notification-dot.critical{background:#c62828}.notification-dot.low{background:#e65100}.menu-card{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .1s cubic-bezier(.4,0,.2,1),box-shadow .1s}.menu-card:active{background:#f0f0f0;transform:scale(.94)}.qty-btn:active,.btn:active{transform:scale(.92)}.mobile-header{background:var(--surface);border-bottom:1px solid var(--border);z-index:5;align-items:center;padding:16px 20px;display:none;position:sticky;top:0}.mobile-header .logo-text{margin-left:16px;font-size:20px}@media (width<=1024px){.view-container{padding:16px}.global-header{padding:12px 16px}.pos-layout{flex-direction:column;gap:16px;height:auto;display:flex}.menu-section{padding:0}.cart-section{border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-sm);margin-top:0}.menu-grid,.kpi-grid{grid-template-columns:repeat(2,1fr)}.hide-mobile{display:none!important}.date-filters{justify-content:space-between;width:100%}.date-input-group{padding:4px 8px}.date-picker{width:100px;font-size:13px}.charts-grid,.menu-editor-layout{grid-template-columns:1fr}}