:root{--primary:#2d5016;--primary-light:#3a6b1d;--primary-dark:#1f3810;--status-received:#3b82f6;--status-accepted:#10b981;--status-packing:#f59e0b;--status-ready:#8b5cf6;--status-delivery:#ec4899;--background:#f8f9fa;--surface:#ffffff;--border:#e5e7eb;--text-primary:#111827;--text-secondary:#6b7280;--text-muted:#9ca3af;--accent:#FF7A1A;--shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1);--shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1);--shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1);--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--transition-fast:150ms cubic-bezier(0.4, 0, 0.2, 1);--transition-base:250ms cubic-bezier(0.4, 0, 0.2, 1);--transition-slow:350ms cubic-bezier(0.4, 0, 0.2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--background);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0);backface-visibility:hidden;perspective:1000px}.navbar{background:var(--surface);border-bottom:1px solid var(--border);padding:var(--spacing-md) var(--spacing-xl);display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100}.navbar-brand{display:flex;align-items:center;gap:var(--spacing-md)}.brand-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}.brand-icon img{width:100%;height:100%;object-fit:contain;border-radius:8px}.brand-text h1{font-size:1.25rem;font-weight:700;color:var(--text-primary);line-height:1.2}.brand-subtitle{font-size:.75rem;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.05em}.navbar-controls{display:flex;align-items:center;gap:var(--spacing-lg)}.control-group{display:flex;align-items:center;gap:var(--spacing-sm)}.control-label{display:flex;align-items:center;gap:var(--spacing-xs);font-size:.875rem;font-weight:500;color:var(--text-secondary)}.control-input{padding:.5rem .75rem;border:1px solid var(--border);border-radius:6px;font-size:.875rem;background:var(--surface);color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast)}.control-input:hover{border-color:var(--primary)}.control-input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(45,80,22,.1)}.icon-button{width:40px;height:40px;border:1px solid var(--border);background:var(--surface);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);color:var(--text-secondary)}.icon-button:hover{background:var(--background);border-color:var(--primary);color:var(--primary)}.icon-button.active{background:var(--accent);border-color:var(--accent);color:#fff}.status-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:var(--spacing-lg) var(--spacing-xl);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--spacing-lg);will-change:contents;transform:translateZ(0);backface-visibility:hidden;contain:layout style}.status-summary{display:flex;gap:var(--spacing-lg);flex-wrap:wrap}.summary-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);border-radius:12px;background:var(--background);border:2px solid transparent;transition:all var(--transition-base);cursor:pointer}.summary-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.summary-item[data-status=received]{border-color:var(--status-received)}.summary-item[data-status=accepted]{border-color:var(--status-accepted)}.summary-item[data-status=under-packing]{border-color:var(--status-packing)}.summary-item[data-status=ready-to-deliver]{border-color:var(--status-ready)}.summary-item[data-status=out-for-delivery]{border-color:var(--status-delivery)}.summary-icon{font-size:1.5rem}.summary-content{display:flex;flex-direction:column}.summary-count{font-size:1.5rem;font-weight:700;line-height:1;color:var(--text-primary)}.summary-label{font-size:.75rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.status-meta{display:flex;gap:var(--spacing-xl)}.meta-item{display:flex;align-items:center;gap:var(--spacing-sm)}.meta-label{font-size:.875rem;color:var(--text-secondary);font-weight:500}.meta-value{font-size:.875rem;color:var(--text-primary);font-weight:600;font-family:'SF Mono',Consolas,Monaco,monospace;font-variant-numeric:tabular-nums;min-width:5.5rem;display:inline-block;text-align:right}.content{padding:var(--spacing-xl);max-width:1800px;margin:0 auto;will-change:contents;transform:translateZ(0);contain:layout style}.toolbar{display:flex;align-items:center;gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);flex-wrap:wrap}.search-box{flex:1;min-width:300px;position:relative;display:flex;align-items:center}.search-box svg{position:absolute;left:var(--spacing-md);color:var(--text-muted);pointer-events:none}.search-box input{width:100%;padding:.75rem 1rem .75rem 2.75rem;border:1px solid var(--border);border-radius:12px;font-size:.9375rem;background:var(--surface);transition:all var(--transition-fast)}.search-box input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(45,80,22,.1)}.filter-group{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.filter-btn{padding:.5rem 1rem;border:1px solid var(--border);background:var(--surface);border-radius:8px;font-size:.875rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.filter-btn:hover{background:var(--background);border-color:var(--primary);color:var(--primary)}.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.orders-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--spacing-lg);contain:layout style paint}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.order-card{background:var(--surface);border-radius:16px;padding:var(--spacing-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:transform var(--transition-base),box-shadow var(--transition-base);position:relative;overflow:hidden;will-change:transform;contain:layout style paint}.order-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--primary)}.order-card[data-status=received]::before{background:var(--status-received)}.order-card[data-status=accepted]::before{background:var(--status-accepted)}.order-card[data-status=under-packing]::before{background:var(--status-packing)}.order-card[data-status=ready-to-deliver]::before{background:var(--status-ready)}.order-card[data-status=out-for-delivery]::before{background:var(--status-delivery)}.order-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.order-card.urgent{animation:2s infinite pulse}@keyframes pulse{0%,100%{box-shadow:var(--shadow-md)}50%{box-shadow:0 0 0 4px rgba(239,68,68,.2),var(--shadow-lg)}}.order-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.order-id{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.order-age{font-size:.75rem;color:var(--text-muted);font-weight:500;background:var(--background);padding:.25rem .5rem;border-radius:6px}.order-age.urgent{background:#fee2e2;color:#dc2626}.order-status-badge{display:inline-block;padding:.375rem .75rem;border-radius:8px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--spacing-md)}.status-received{background:#dbeafe;color:#1e40af}.status-accepted{background:#d1fae5;color:#065f46}.status-under-packing{background:#fed7aa;color:#92400e}.status-ready-to-deliver{background:#ede9fe;color:#5b21b6}.status-out-for-delivery{background:#fce7f3;color:#9f1239}.order-details{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.detail-row{display:flex;align-items:center;gap:var(--spacing-sm);font-size:.875rem}.detail-icon{width:16px;height:16px;color:var(--text-muted);flex-shrink:0}.detail-label{color:var(--text-secondary);font-weight:500;min-width:80px}.detail-value{color:var(--text-primary);font-weight:600;flex:1}.order-customer{background:var(--background);padding:var(--spacing-md);border-radius:8px;margin-bottom:var(--spacing-md)}.customer-name{font-weight:600;color:var(--text-primary);font-size:.9375rem;margin-bottom:var(--spacing-xs)}.customer-mobile{font-size:.875rem;color:var(--text-secondary);font-family:'Courier New',monospace}.order-address{font-size:.875rem;color:var(--text-secondary);line-height:1.5;margin-bottom:var(--spacing-md);padding-left:var(--spacing-lg);border-left:2px solid var(--border)}.order-notes{background:#fef3c7;border:1px solid #fbbf24;padding:var(--spacing-sm) var(--spacing-md);border-radius:6px;font-size:.8125rem;color:#92400e;margin-top:var(--spacing-md)}.order-footer{display:flex;justify-content:space-between;align-items:center;padding-top:var(--spacing-md);border-top:1px solid var(--border)}.order-total{display:flex;flex-direction:column}.total-label{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.total-amount{font-size:1.5rem;font-weight:700;color:var(--primary)}.order-actions{display:flex;gap:var(--spacing-sm)}.action-btn{padding:.5rem;border:none;background:var(--background);border-radius:6px;cursor:pointer;transition:all var(--transition-fast);color:var(--text-secondary)}.action-btn:hover{background:var(--primary);color:#fff}.orders-grid.ultra-compact-mode{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--spacing-sm)}.ultra-order-tile{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.5rem .625rem;display:flex;flex-direction:column;gap:.35rem;min-height:88px;box-shadow:var(--shadow-sm)}.tile-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.tile-order-id{font-size:.9rem;font-weight:700;color:var(--text-primary)}.tile-age{font-size:.7rem;color:var(--text-secondary);background:var(--background);border-radius:999px;padding:.1rem .4rem;white-space:nowrap}.tile-status{font-size:.7rem;font-weight:600;border-radius:6px;padding:.2rem .35rem;width:fit-content;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-created{font-size:.7rem;color:var(--text-muted)}body.ultra-compact-view .content .toolbar,body.ultra-compact-view .status-bar{display:none}.error-modal{position:fixed;inset:0;background:rgba(17,24,39,.6);z-index:1200;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg)}.error-modal-card{width:100%;max-width:420px;background:var(--surface);border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow-xl);padding:var(--spacing-lg)}.error-modal-card h3{font-size:1rem;font-weight:700;color:#b91c1c;margin-bottom:var(--spacing-sm)}.error-modal-card p{color:var(--text-secondary);font-size:.9rem;margin-bottom:var(--spacing-md)}.error-ok-btn{min-width:90px;height:38px;border:none;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.error-ok-btn:hover{background:var(--primary-light)}.kanban-board{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--spacing-lg);contain:layout style paint}.kanban-column{background:var(--surface);border-radius:12px;padding:var(--spacing-md);border:1px solid var(--border);min-height:500px}.kanban-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:2px solid var(--border)}.kanban-title{font-weight:600;font-size:.875rem;color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em}.kanban-count{background:var(--background);padding:.25rem .5rem;border-radius:6px;font-size:.75rem;font-weight:600}.kanban-cards{display:flex;flex-direction:column;gap:var(--spacing-md)}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.spinner{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{display:flex;flex-direction:column;text-align:center;padding:var(--spacing-xl);color:var(--text-muted);will-change:auto;contain:layout style paint}.empty-state svg{place-self:center;margin-bottom:var(--spacing-lg);opacity:.5}.empty-state h3{font-size:1.25rem;margin-bottom:var(--spacing-sm);color:var(--text-primary)}.details-modal{position:fixed;inset:0;background:rgba(17,24,39,.55);z-index:1100;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg)}.details-modal-card{width:100%;max-width:560px;background:var(--surface);border-radius:14px;box-shadow:var(--shadow-xl);border:1px solid var(--border);overflow:hidden}.details-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border)}.details-modal-header h3{font-size:1rem;font-weight:700;color:var(--text-primary)}.details-close-btn{width:34px;height:34px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.details-close-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--background)}.details-modal-body{padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm)}.details-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-md);padding:.5rem 0;border-bottom:1px dashed var(--border)}.details-row:last-child{border-bottom:none}.details-row span{color:var(--text-secondary);font-size:.875rem}.details-row strong{color:var(--text-primary);font-size:.9375rem;text-align:right}@media (max-width:1200px){.kanban-board{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.navbar{flex-direction:column;gap:var(--spacing-md)}.status-bar{flex-direction:column;align-items:flex-start}.status-summary{width:100%;overflow-x:auto}.toolbar{flex-direction:column}.search-box{width:100%}.kanban-board,.orders-grid{grid-template-columns:1fr}.orders-grid.ultra-compact-mode{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.details-modal{padding:var(--spacing-md)}}@media print{.action-btn,.navbar,.status-bar,.toolbar{display:none!important}.order-card{break-inside:avoid;page-break-inside:avoid}}