/* CSS Reset & Variables */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#f5f5f5;--bg-secondary:#ffffff;--bg-tertiary:#eeeeee;--bg-elevated:#e0e0e0;--text-primary:#000000;--text-secondary:#000000;--text-muted:#666666;--accent:#505050;--accent-hover:#383838;--accent-muted:rgba(208,208,208,.15);--success:#00aa00;--success-hover:#009900;--success-muted:rgba(0,170,0,.15);--danger:#e74c3c;--danger-hover:#c0392b;--border:#cccccc;--border-hover:#999999;--shadow:0 4px 24px rgba(0,0,0,.1);--shadow-sm:0 2px 8px rgba(0,0,0,.08);--radius:8px;--radius-lg:12px;--radius-sm:6px;--font-mono:'JetBrains Mono',monospace;--font-display:'Space Grotesk',sans-serif;--header-height:60px;--receipt-width:420px;--scanner-height:0px;--transition:all .2s ease}[data-theme="light"]{--bg-primary:#f5f5f5;--bg-secondary:#ffffff;--bg-tertiary:#eeeeee;--bg-elevated:#e0e0e0;--text-primary:#000000;--text-secondary:#000000;--text-muted:#666666;--accent:#505050;--accent-hover:#383838;--accent-muted:rgba(208,208,208,.15);--success:#00aa00;--success-hover:#009900;--success-muted:rgba(0,170,0,.15);--danger:#e74c3c;--danger-hover:#c0392b;--border:#cccccc;--border-hover:#999999;--shadow:0 4px 24px rgba(0,0,0,.1);--shadow-sm:0 2px 8px rgba(0,0,0,.08)}html{font-size:16px;-webkit-tap-highlight-color:transparent;color-scheme:light dark}body{font-family:var(--font-display);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100vh;min-height:100dvh;overflow-x:hidden;transition:background-color .3s ease,color .3s ease}button{font-family:inherit;cursor:pointer;border:none;background:0}input{font-family:inherit;border:none;outline:0;background:0}.hidden{display:none!important}#app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:#f5f5f5;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;z-index:100;gap:6px;overflow-x:auto}.header-left,.header-center,.header-right{display:flex;align-items:center}.header-left{gap:8px;flex-shrink:0}.logo{display:flex;align-items:center;gap:6px}.logo-icon{font-size:20px;color:#00aa00}.logo-text{font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:1px;color:var(--text-primary)}.header-center{gap:6px;flex-grow:1}.header-right{gap:6px;flex-shrink:0}.view-toggle,.cart-toggle,.hold-orders-btn,.scan-mode-toggle{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:#555555;color:#ffffff;transition:var(--transition);position:relative;border:1px solid #555555}.view-toggle:hover,.cart-toggle:hover,.hold-orders-btn:hover,.scan-mode-toggle:hover{background:#3a3a3a;color:#ffffff;border-color:#3a3a3a}.cart-toggle{display:flex}.view-toggle svg,.cart-toggle svg,.hold-orders-btn svg{width:18px;height:18px;color:#ffffff}.cart-badge,.hold-badge{position:absolute;top:0px;right:0px;min-width:16px;height:16px;background:var(--accent);color:#ffffff;font-size:9px;font-weight:700;font-family:var(--font-mono);border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 2px}.scan-mode-toggle{padding:0;width:40px;height:40px;gap:0;font-size:0}.scan-mode-toggle span{display:none}.scan-mode-toggle svg{display:block;width:20px;height:20px}.toggle-switch{width:0;height:0;display:none}.toggle-knob{width:0;height:0;display:none}.main-content{margin-top:calc(var(--header-height) + var(--scanner-height));flex:1;display:flex;flex-direction:column;padding-bottom:20px;transition:margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.content-wrapper{display:flex;gap:0;flex:1;min-height:100%}.products-container{flex:1;display:flex;flex-direction:column;overflow-y:auto}.scan-mode-banner{background:rgba(34,197,94,.1);border-bottom:1px solid rgba(34,197,94,.3);padding:8px 16px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--danger);height:32px}@media(max-width:768px){.scan-mode-banner{padding:6px 12px;height:28px;font-size:10px}.scanner-section{padding:8px}.scanner-header-card{padding:6px 8px;gap:6px}.section-title{font-size:9px}.scanner-toggle-btn{width:32px;height:32px;padding:4px}.view-toggle,.cart-toggle,.hold-orders-btn,.backup-btn,.print-settings-btn,.nav-action-btn{width:36px;height:36px;font-size:9px}.view-toggle svg,.cart-toggle svg,.hold-orders-btn svg,.backup-btn svg,.print-settings-btn svg,.nav-action-btn svg{width:16px;height:16px}.category-btn{padding:8px 12px;font-size:10px}}.scan-mode-info{display:flex;align-items:center;gap:8px}.pulse-dot{width:8px;height:8px;background:var(--danger);border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}.last-scanned{font-family:var(--font-mono);font-size:12px}.scanner-section{background:var(--bg-secondary);padding:8px;border-bottom:1px solid var(--border)}.scanner-header-card{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 10px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px}.scanner-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-title{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:0px;color:var(--text-secondary);text-transform:uppercase;white-space:nowrap;flex:1}.section-title svg{color:var(--accent);width:12px;height:12px;flex-shrink:0}.scanner-toggle-btn{font-family:var(--font-mono);font-size:9px;font-weight:600;padding:4px;background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);transition:var(--transition);width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.scanner-toggle-btn:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--accent)}.scanner-toggle-btn svg{width:14px;height:14px}.scanner-toggle-btn.active{background:var(--danger);color:#fff;border-color:var(--danger)}.scanner-action-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border);transition:var(--transition);flex-shrink:0;padding:0}.scanner-action-btn:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--accent)}.scanner-action-btn svg{width:14px;height:14px}.qr-scanner{background:var(--bg-primary);border-radius:var(--radius-lg);overflow:hidden;border:2px dashed var(--border)}#qrReader{width:100%;min-height:150px;transition:min-height 0.3s ease}#qrReader.reduced-height{min-height:112px}#qrReader video{border-radius:var(--radius-lg)}#qrReader img[alt="Info icon"]{display:none}#qrReader>div{border:0!important}.search-bar{display:flex;align-items:center;gap:12px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;transition:var(--transition)}.search-bar:focus-within{border-color:var(--accent);border-width:2px;box-shadow:0 0 0 3px var(--accent-muted)}.search-bar svg{color:var(--text-muted);flex-shrink:0}.search-bar input{flex:1;font-size:15px;color:var(--text-primary);background:transparent}.search-bar input::placeholder{color:var(--text-muted)}.clear-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--danger);border-radius:50%;font-size:18px;transition:var(--transition);border:1px solid var(--danger)}.clear-btn:hover{background:var(--danger);color:#fff}.categories-section{padding:12px 0;border-bottom:2px solid var(--border)}.loader-inline{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;color:var(--text-secondary);font-size:13px}.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.spinner.large{width:32px;height:32px;border-width:3px}@keyframes spin{to{transform:rotate(360deg)}}.categories-scroll{display:flex;gap:8px;padding:4px 16px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.categories-scroll::-webkit-scrollbar{display:none}.category-btn{flex-shrink:0;font-family:var(--font-mono);font-size:12px;font-weight:600;padding:10px 16px;background:var(--bg-tertiary);color:var(--text-secondary);border-radius:var(--radius);border:1px solid var(--border);transition:var(--transition);white-space:nowrap}.category-btn:hover{background:var(--bg-elevated);border-color:var(--accent);color:var(--text-primary)}.category-btn.active{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.products-section{flex:1;padding:16px}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:60px 20px;color:var(--text-secondary);font-size:14px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--text-muted)}.empty-state svg{opacity:.5}.empty-state p{font-size:15px}/* ============================================
   PRODUCT GRID - BASE & VIEWS
   ============================================ */

/* BASE GRID (Default = Grid View - 2 columns) */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}

/* GRID VIEW - Multi-column layout */
/* Handled by base .products-grid and @media queries */

/* LIST VIEW - 1 column with thumbnails on left */
.products-grid.list-view {
  grid-template-columns: 1fr;
  gap: 12px;
}

.products-grid.list-view .product-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.products-grid.list-view .product-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  aspect-ratio: auto;
}

.products-grid.list-view .product-image .placeholder {
  font-size: 32px;
}

.products-grid.list-view .product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.products-grid.list-view .product-name {
  margin-bottom: 0;
}

.products-grid.list-view .product-code {
  margin-bottom: 0;
}

.products-grid.list-view .product-price {
  margin-top: auto;
}

.products-grid.list-view .product-view-btn {
  flex-shrink: 0;
}

/* COMPACT VIEW - 1 column without images */
.products-grid.compact-view {
  grid-template-columns: 1fr;
  gap: 0;
}

.products-grid.compact-view .product-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  min-height: 40px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  transition: var(--transition);
}

.products-grid.compact-view .product-card:hover {
  background: var(--bg-tertiary);
  border-bottom-color: var(--accent);
}

.products-grid.compact-view .product-image {
  display: none;
}

.products-grid.compact-view .product-info {
  padding: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.products-grid.compact-view .product-name {
  font-size: 9px;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}

.products-grid.compact-view .product-code {
  font-size: 8px;
  font-weight: 600;
  margin-bottom: 0;
  color: #666;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: -6px;
  margin-right: 0;
  gap: 0;
}

.products-grid.compact-view .product-price {
  font-size: 9px;
  margin-top: 0;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
  margin-left: auto;
}

.products-grid.compact-view .product-stock {
  font-size: 8px;
  font-weight: 600;
  color: #666;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 2px;
}

.products-grid.compact-view .expand-name-btn {
  margin-left: 2px;
  flex-shrink: 0;
}

.products-grid.compact-view .product-view-btn {
  margin-left: 8px;
  flex-shrink: 0;
}.receipt-panel{position:relative;width:var(--receipt-width);background:var(--bg-secondary);border-left:2px solid var(--border);display:flex;flex-direction:column;height:100%;flex-shrink:0;box-shadow:var(--shadow)}.receipt-header{padding:16px;border-bottom:2px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg-tertiary)}.receipt-header h3{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:2px;color:var(--accent)}.receipt-header svg{color:var(--accent)}.receipt-toggle-mobile{display:none}.receipt-content{flex:1;overflow-y:auto;padding:12px}.receipt-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:var(--text-muted);text-align:center}.receipt-empty p{font-size:15px;font-weight:600;color:var(--text-secondary)}.receipt-items{display:none}.receipt-items.active{display:block}.receipt-table{width:100%;border-collapse:collapse;font-size:12px;font-family:var(--font-mono)}.receipt-table thead{background:var(--bg-elevated);border-bottom:2px solid var(--border)}.receipt-table th{padding:8px 6px;text-align:left;color:var(--text-primary);font-weight:700;text-transform:uppercase;letter-spacing:.5px}.receipt-table td{padding:10px 6px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.receipt-table tbody tr{transition:var(--transition)}.receipt-table tbody tr:hover{background:var(--bg-tertiary)}.receipt-table td:nth-child(2),.receipt-table td:nth-child(3),.receipt-table td:nth-child(4){text-align:right}.receipt-table td:nth-child(2),.receipt-table th:nth-child(2),.receipt-table td:nth-child(3),.receipt-table th:nth-child(3),.receipt-table td:nth-child(4),.receipt-table th:nth-child(4){padding-right:8px}.receipt-footer{padding:16px;border-top:2px solid var(--border);background:var(--bg-primary);min-height:150px;display:flex;flex-direction:column;gap:12px}.receipt-summary{margin-bottom:12px}.summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;color:var(--text-secondary);border-bottom:1px solid var(--border)}.summary-row span:first-child{color:#00cc00;font-weight:700}.summary-row span:last-child{color:var(--text-primary);font-weight:600}.summary-row.total{padding-top:12px;margin-top:8px;border-top:2px solid var(--accent);font-family:var(--font-mono);font-size:16px;font-weight:700;background:var(--accent-muted);padding:12px;border-radius:var(--radius);border-bottom:0;color:#000000}}.summary-row.total span:first-child{color:var(--text-primary)}.summary-row.total span:last-child{color:var(--accent);font-size:18px}.receipt-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.btn-sm{padding:10px 8px;font-size:11px;font-weight:600;letter-spacing:.5px;border-radius:var(--radius)}.btn-accent{background:#0066ff;color:#ffffff}.btn-accent:hover{background:#0052cc}@media(max-width:1280px){.receipt-panel{width:380px}}@media(max-width:1024px){.content-wrapper{flex-direction:column}.receipt-panel{width:100%;height:auto;border-left:0;border-top:2px solid var(--border);box-shadow:none}.receipt-toggle-mobile{display:flex;align-items:center;justify-content:center;cursor:pointer;color:#000000;width:32px;height:32px;border-radius:var(--radius);background:var(--accent);border:1px solid var(--accent)}.receipt-toggle-mobile:hover{background:var(--bg-elevated);color:var(--text-primary)}}.summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--text-secondary)}.summary-row.total{padding-top:12px;margin-top:8px;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--text-primary)}.summary-row.total span:last-child{color:var(--accent)}.cart-actions{display:flex;gap:12px}.btn{flex:1;padding:14px 20px;font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:1px;border-radius:var(--radius);transition:var(--transition);border:1px solid transparent}.btn-primary{background:#0066ff;color:#ffffff;border-color:#0066ff}.btn-primary:hover{background:#0052cc;border-color:#0052cc}.btn-primary:active{transform:scale(.98)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--accent)}.toast{position:fixed;top:80px;right:16px;left:auto;transform:translateX(0) translateY(-20px);background:#ffffff;color:#000000;padding:12px 16px;border-radius:8px;font-size:13px;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,0.12);z-index:502;opacity:0;visibility:hidden;transition:all .2s ease;border-left:4px solid #999999;max-width:320px;min-width:200px;word-wrap:break-word;white-space:normal}.toast.show{opacity:1;visibility:visible;transform:translateX(0) translateY(0)}.toast.success{border-left-color:#00aa00;background:#f0fff0}.toast.success::before{content:'✓ ';color:#00aa00;font-weight:bold}.toast.error{border-left-color:#e74c3c;background:#fff5f5}.toast.error::before{content:'✕ ';color:#e74c3c;font-weight:bold}.hold-orders-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-lg);z-index:400;min-width:300px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow)}.hold-orders-modal.visible{display:block}.hold-orders-title{padding:16px;border-bottom:2px solid var(--border);font-family:var(--font-mono);font-size:14px;font-weight:700;display:flex;justify-content:space-between;align-items:center}.hold-orders-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);background:transparent;border:1px solid var(--border);border-radius:var(--radius)}.hold-orders-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.hold-orders-list{padding:16px}.held-order{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:10px;cursor:pointer;transition:var(--transition)}.held-order:hover{border-color:var(--accent);background:var(--bg-elevated)}.held-order-time{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}.held-order-items{font-size:13px;margin:6px 0}.held-order-total{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--accent)}@media(min-width:768px){.products-grid{grid-template-columns:repeat(3,1fr)}.products-grid.list-view{grid-template-columns:1fr}.products-grid.list-view .product-image{width:100px;height:100px}}@media(min-width:1024px){.products-grid{grid-template-columns:repeat(4,1fr);gap:16px}.products-grid.list-view{grid-template-columns:1fr}.scanner-section{padding:20px 24px}.categories-scroll{padding:8px 24px}.products-section{padding:24px}}@media(max-width:1024px){.main-content{margin-right:0}.content-wrapper{margin-bottom:var(--receipt-width)}.receipt-panel{position:fixed;bottom:0;left:0;right:0;width:100%;height:auto;max-height:40vh;border-left:0;border-top:2px solid var(--border);z-index:200}.receipt-content{max-height:200px}}@media(min-width:1280px){.products-grid{grid-template-columns:repeat(5,1fr)}.products-grid.list-view{grid-template-columns:1fr !important;max-width:100%!important}}.products-grid.compact-view .products-section{padding:8px}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:500;opacity:0;visibility:hidden;transition:var(--transition)}[data-theme="light"] .modal-overlay{background:rgba(0,0,0,.3)}.modal-overlay.visible{opacity:1;visibility:visible}.modal-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-lg);z-index:501;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow)}.modal-header{padding:20px;border-bottom:2px solid var(--border);display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--text-primary)}.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius);background:transparent;border:1px solid transparent;transition:var(--transition)}.modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border)}.modal-body{padding:20px}.payment-modal .modal-body{display:flex;flex-direction:column;gap:16px}.payment-section{display:flex;gap:16px}.payment-display,.change-display{flex:1}.payment-display label,.change-display label{display:block;font-size:12px;color:#00cc00;margin-bottom:6px;font-weight:700}.payment-input-display,.change-amount{font-family:var(--font-mono);font-size:32px;font-weight:700;color:var(--text-primary);padding:12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);text-align:right}.change-amount{color:var(--text-primary)}.numeric-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.key-btn{padding:16px;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);font-weight:600;font-size:14px;transition:var(--transition)}.key-btn:hover{background:var(--bg-elevated);border-color:var(--accent)}.key-btn:active{background:var(--accent);color:var(--bg-primary)}.key-clear{grid-column:span 2;background:var(--danger);color:#fff;border-color:var(--danger)}.key-clear:hover{background:var(--danger-hover);border-color:var(--danger-hover)}.key-exact{background:#00cc00;color:#000;border-color:#00cc00}.key-exact:hover{background:#00aa00;border-color:#00aa00}.payment-methods{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.pay-btn{padding:16px 12px;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--font-mono);font-weight:600;font-size:12px;transition:var(--transition)}.pay-btn svg{width:24px;height:24px}.pay-btn:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--accent)}.pay-cancel{grid-column:span 2;background:var(--danger);color:#fff;border-color:var(--danger)}.pay-cancel:hover{background:var(--danger-hover);border-color:var(--danger-hover)}.pay-cash,.pay-stk{background:var(--success);color:var(--bg-primary);border-color:var(--success)}.pay-cash:hover,.pay-stk:hover{background:var(--success-hover);border-color:var(--success-hover)}.stk-modal .modal-body{display:flex;flex-direction:column;gap:16px}.stk-amount{display:flex;justify-content:space-between;padding:12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono)}.stk-amount span:last-child{color:var(--accent);font-weight:700}.stk-input-group label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:8px;font-weight:600}.phone-input{display:flex;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.phone-prefix{padding:10px 12px;background:var(--bg-elevated);color:var(--text-secondary);font-family:var(--font-mono);font-weight:600;border-right:1px solid var(--border)}.phone-input input{flex:1;padding:10px 12px;background:transparent;color:var(--text-primary);font-family:var(--font-mono)}.stk-status{width:100%;padding:12px;border-radius:var(--radius);text-align:center;font-weight:600;display:flex;flex-direction:column;gap:12px}.stk-status.success{background:var(--success-muted);color:var(--success);border:1px solid var(--success)}.stk-status.error{background:rgba(255,0,0,.1);color:var(--danger);border:1px solid var(--danger)}.btn-full{width:100%}.btn-loader{display:flex;gap:8px;align-items:center}.spinner.small{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent)}.order-summary-modal{margin-bottom:16px;padding:12px;background:var(--bg-tertiary);border-radius:var(--radius);border:1px solid var(--border);max-height:280px;overflow-y:auto}.order-table{width:100%;border-collapse:collapse;font-size:11px;font-family:var(--font-mono)}.order-table thead{background:var(--bg-elevated);border-bottom:1px solid var(--border)}.order-table th{padding:6px;text-align:left;color:var(--text-primary);font-weight:700;text-transform:uppercase;letter-spacing:.5px}.order-table td{padding:6px;color:var(--text-secondary);border-bottom:1px solid var(--border);text-align:left}.order-table td:nth-child(2),.order-table td:nth-child(3){text-align:right}.order-table tbody tr:hover{background:var(--bg-elevated)}.order-summary-totals{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}.total-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;color:var(--text-secondary)}.total-row span:last-child{color:var(--text-primary);font-weight:600}.total-row.total{font-size:14px;font-family:var(--font-mono);font-weight:700;color:var(--accent);padding:6px 0}.total-row.total span:first-child{color:var(--text-primary)}.total-row.total span:last-child{color:var(--accent)}.cart-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:99;display:none;pointer-events:none}[data-theme="light"] .cart-overlay{background:rgba(0,0,0,.3)}.cart-overlay.visible{display:block}.cart-panel{position:fixed;top:var(--header-height);right:0;bottom:0;width:var(--cart-width);background:var(--bg-secondary);border-left:2px solid var(--border);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease;z-index:100;box-shadow:var(--shadow)}.cart-panel.open{transform:translateX(0)}.cart-header{padding:16px;border-bottom:2px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg-tertiary)}.cart-header h2{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:1px;color:var(--text-primary)}.cart-header svg{color:var(--accent)}.cart-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--text-secondary);cursor:pointer;background:transparent;border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition);flex-shrink:0;padding:0}.cart-close:hover{color:var(--text-primary);background:var(--bg-elevated);border-color:var(--accent)}@media(max-width:768px){.cart-close{width:44px;height:44px;font-size:32px}}.cart-items{flex:1;overflow-y:auto;padding:12px}.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:var(--text-muted);text-align:center}.cart-empty p{font-size:15px;font-weight:600;color:var(--text-secondary)}.cart-item{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);padding:12px;padding-right:40px;margin-bottom:10px;display:flex;gap:12px;align-items:flex-start;position:relative;transition:var(--transition)}.cart-item:hover{border-color:var(--accent)}.cart-item-image{width:60px;height:60px;flex-shrink:0;background:var(--bg-primary);border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center}.cart-item-image img{width:100%;height:100%;object-fit:cover}.cart-item-image .placeholder{font-size:28px;opacity:.4}.cart-item-details{flex:1;display:flex;flex-direction:column;gap:8px}.cart-item-name{font-size:13px;font-weight:600;color:var(--text-primary)}.cart-item-price{font-family:var(--font-mono);font-size:12px;color:#000000;font-weight:700;white-space:nowrap;flex-shrink:0}.cart-item-controls{display:flex;align-items:center;gap:6px}.qty-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);color:#000000;border-radius:var(--radius-sm);font-size:12px;font-weight:700;transition:var(--transition);border:1px solid var(--border)}.qty-btn:hover{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.qty-value{flex:1;text-align:center;font-family:var(--font-mono);font-size:12px;color:var(--text-primary)}.cart-item-remove{position:absolute;top:4px;right:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--danger);border-radius:50%;font-size:16px;cursor:pointer;transition:var(--transition);border:1px solid var(--danger)}.cart-item-remove:hover{background:var(--danger);color:#fff}.cart-footer{padding:16px;border-top:2px solid var(--border);background:var(--bg-primary)}.cart-summary{margin-bottom:16px}.cart-summary .summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;color:var(--text-secondary);border-bottom:1px solid var(--border)}.cart-summary .summary-row span:last-child{color:var(--text-primary);font-weight:600;font-family:var(--font-mono)}.cart-summary .summary-row.total{border-top:2px solid var(--border);padding-top:8px;margin-top:8px;font-size:16px;font-weight:700;color:#000000}.backup-btn,.print-settings-btn,.nav-action-btn,.theme-toggle{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:#555555;color:#ffffff;transition:var(--transition);border:1px solid #555555;padding:4px;pointer-events:auto;cursor:pointer}.backup-btn svg,.print-settings-btn svg,.nav-action-btn svg{width:16px;height:16px;color:#ffffff;stroke:#ffffff;fill:none}.backup-btn:hover,.print-settings-btn:hover,.nav-action-btn:hover,.theme-toggle:hover{background:#3a3a3a;color:#ffffff;border-color:#3a3a3a;cursor:pointer}.theme-toggle{position:relative;z-index:101;pointer-events:auto}.theme-toggle svg{width:16px;height:16px;stroke:#ffffff;color:#ffffff;fill:#ffffff;pointer-events:none}.theme-icon-dark,.theme-icon-light{position:absolute;transition:all .3s ease;opacity:1;pointer-events:none;display:block}.theme-toggle .theme-icon-light{opacity:0;transform:rotate(-90deg)}.theme-toggle.light-mode .theme-icon-dark{opacity:0;transform:rotate(90deg)}.theme-toggle.light-mode .theme-icon-light{opacity:1;transform:rotate(0deg)}/* Dark mode - show dark icon */[data-theme="dark"] .theme-toggle .theme-icon-dark{opacity:1;display:block}[data-theme="dark"] .theme-toggle .theme-icon-light{opacity:0;display:none}/* Light mode - show light icon */[data-theme="light"] .theme-toggle .theme-icon-dark{opacity:0;display:none}[data-theme="light"] .theme-toggle .theme-icon-light{opacity:1;display:block}/* Light mode theme toggle - blue icon */[data-theme="light"] .theme-toggle{color:#ffffff;background:#00cc00}[data-theme="light"] .theme-toggle .theme-icon-dark{opacity:0;display:none}[data-theme="light"] .theme-toggle .theme-icon-light{opacity:1;display:block;stroke:#ffffff;color:#ffffff}[data-theme="light"] .theme-toggle svg{stroke:#ffffff !important;color:#ffffff !important}/* Dark mode - ensure visibility */[data-theme="dark"] .theme-toggle .theme-icon-dark{opacity:1;display:block;stroke:#ffffff;fill:#ffffff;color:#ffffff}[data-theme="dark"] .theme-toggle .theme-icon-light{opacity:0;display:none}button{font-family:inherit;cursor:pointer;border:none;background:0}input{font-family:inherit;border:none;outline:0;background:0}.hidden{display:none!important}#app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:#f5f5f5;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:100;backdrop-filter:blur(8px)}.header-left,.header-center,.header-right{display:flex;align-items:center}.header-left{gap:12px}.home-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius);background:var(--bg-tertiary);color:#00cc00;transition:var(--transition);border:1px solid var(--border);text-decoration:none}.home-btn:hover{background:var(--bg-elevated);color:#00dd00;border-color:var(--accent)}.home-btn svg{width:20px;height:20px;color:#00cc00}.logo{display:flex;align-items:center;gap:8px}.logo-icon{font-size:24px;color:var(--accent)}.header-center{gap:12px}.header-right{gap:8px}.view-toggle,.cart-toggle,.hold-orders-btn,.scan-mode-toggle{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:#555555;color:#ffffff;transition:var(--transition);position:relative}.view-toggle:hover,.cart-toggle:hover,.hold-orders-btn:hover,.scan-mode-toggle:hover{background:#3a3a3a;color:#ffffff}.cart-toggle{display:flex}@media(max-width:1024px){.cart-toggle{display:flex}}.view-toggle svg,.cart-toggle svg,.hold-orders-btn svg{width:22px;height:22px;color:#ffffff}.cart-badge,.hold-badge{position:absolute;top:4px;right:4px;min-width:18px;height:18px;background:var(--accent);color:#ffffff;font-size:11px;font-weight:700;font-family:var(--font-mono);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 4px}.scan-mode-toggle{padding:8px 12px;width:auto;height:auto;gap:8px;font-size:12px;font-weight:600;color:#ffffff}.scan-mode-toggle svg{color:#ffffff}.toggle-switch{width:40px;height:20px;background:var(--border);border-radius:10px;display:flex;align-items:center;padding:2px;transition:var(--transition)}.scan-mode-toggle.active .toggle-switch{background:var(--accent)}.toggle-knob{width:16px;height:16px;background:var(--text-primary);border-radius:50%;transition:var(--transition)}.scan-mode-toggle.active .toggle-knob{transform:translateX(20px)}.main-content{margin-top:calc(var(--header-height) + var(--scanner-height));flex:1;display:flex;flex-direction:column;padding-bottom:20px;transition:margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.content-wrapper{display:flex;gap:0;flex:1;min-height:100%}.products-container{flex:1;display:flex;flex-direction:column;overflow-y:auto}.scan-mode-banner{background:rgba(239,68,68,.1);border-bottom:1px solid rgba(239,68,68,.3);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--danger)}.scan-mode-info{display:flex;align-items:center;gap:8px}.pulse-dot{width:8px;height:8px;background:var(--danger);border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}.last-scanned{font-family:var(--font-mono);font-size:12px}.scanner-section{background:var(--bg-secondary);padding:16px;border-bottom:1px solid var(--border)}.scanner-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-title{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:1px;color:var(--text-secondary)}.section-title svg{color:var(--accent)}.scanner-toggle-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border);transition:var(--transition);flex-shrink:0;padding:0}.scanner-toggle-btn:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--accent)}.scanner-toggle-btn svg{width:20px;height:20px}.scanner-toggle-btn.active{background:var(--danger);color:#fff;border-color:var(--danger)}.scanner-container{display:flex;flex-direction:column;gap:12px}.qr-scanner{background:var(--bg-primary);border-radius:var(--radius-lg);overflow:hidden;border:2px dashed var(--border)}#qrReader{width:100%;min-height:150px}#qrReader video{border-radius:var(--radius-lg)}#qrReader img[alt="Info icon"]{display:none}#qrReader>div{border:0!important}.search-bar{display:flex;align-items:center;gap:12px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;transition:var(--transition)}.search-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}.search-bar svg{color:var(--text-muted);flex-shrink:0}.search-bar input{flex:1;font-size:15px;color:var(--text-primary)}.search-bar input::placeholder{color:var(--text-muted)}.clear-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);color:var(--text-secondary);border-radius:50%;font-size:18px;transition:var(--transition)}.clear-btn:hover{background:var(--danger);color:#fff}.categories-section{padding:12px 0;border-bottom:1px solid var(--border)}.loader-inline{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;color:var(--text-secondary);font-size:13px}.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.spinner.large{width:32px;height:32px;border-width:3px}@keyframes spin{to{transform:rotate(360deg)}}.categories-scroll{display:flex;gap:8px;padding:4px 16px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.categories-scroll::-webkit-scrollbar{display:none}.category-btn{flex-shrink:0;font-family:var(--font-mono);font-size:12px;font-weight:600;padding:10px 16px;background:var(--bg-tertiary);color:var(--text-secondary);border-radius:var(--radius);border:1px solid var(--border);transition:var(--transition);white-space:nowrap}.category-btn:hover{background:var(--bg-elevated);border-color:var(--border-hover);color:var(--text-primary)}.category-btn.active{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.products-section{flex:1;padding:16px}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:60px 20px;color:var(--text-secondary);font-size:14px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--text-muted)}.empty-state svg{opacity:.5}.empty-state p{font-size:15px}.products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.products-grid.list-view{grid-template-columns:1fr !important}.product-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition);cursor:pointer;box-shadow:var(--shadow-sm)}.product-card:hover{border-color:var(--primary-blue);transform:translateY(-4px);box-shadow:0 8px 24px rgba(59,130,246,.2);border-top:3px solid var(--primary-blue)}.product-card:active{transform:scale(.97)}.product-card.added{animation:addPulse .4s ease}@keyframes addPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}.product-image{aspect-ratio:1;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;overflow:hidden}.product-image img{width:100%;height:100%;object-fit:cover}.product-image .placeholder{font-size:48px;opacity:.3}.product-info{padding:12px}.product-name{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-code{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-bottom:8px}.product-price{font-family:var(--font-mono);font-size:16px;font-weight:700;color:#000000 !important}
[data-theme="light"] .product-price{color:var(--accent)}.products-grid.list-view .product-card{display:flex;align-items:center;padding:8px;gap:8px}.products-grid.list-view .product-image{width:80px;height:80px;aspect-ratio:auto;flex-shrink:0}.products-grid.list-view .product-image .placeholder{font-size:32px}.products-grid.list-view .product-info{flex:1;display:flex;flex-direction:column;gap:4px}.products-grid.list-view .product-name{margin-bottom:0}.products-grid.list-view .product-code{margin-bottom:0}.products-grid.list-view .product-price{margin-top:auto}.products-grid.list-view .product-view-btn{flex-shrink:0;width:36px;height:36px;padding:6px;margin:0;background:var(--accent);color:#fff;border-radius:50%;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;opacity:1}.receipt-panel{position:relative;width:var(--receipt-width);background:var(--bg-secondary);border-left:2px solid var(--border);display:flex;flex-direction:column;height:100%;flex-shrink:0;box-shadow:-4px 0 12px rgba(0,0,0,.3)}.receipt-header{padding:16px;border-bottom:2px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg, var(--bg-secondary) 0%, var(--primary-blue-muted) 100%)}.receipt-header h3{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:2px;color:var(--primary-blue)}.receipt-header svg{color:var(--primary-blue)}.receipt-toggle-mobile{display:none}.receipt-content{flex:1;overflow-y:auto;padding:12px}.receipt-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:var(--text-muted);text-align:center}.receipt-empty p{font-size:15px;font-weight:600;color:var(--text-secondary)}.receipt-items{display:none}.receipt-items.active{display:block}.receipt-table{width:100%;border-collapse:collapse;font-size:12px;font-family:var(--font-mono)}.receipt-table thead{background:var(--primary-blue-muted);border-bottom:2px solid var(--primary-blue)}.receipt-table th{padding:8px 6px;text-align:left;color:var(--primary-blue);font-weight:700;text-transform:uppercase;letter-spacing:.5px}.receipt-table td{padding:10px 6px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.receipt-table tbody tr{transition:var(--transition)}.receipt-table tbody tr:hover{background:var(--bg-tertiary)}.receipt-table td:nth-child(2),.receipt-table td:nth-child(3),.receipt-table td:nth-child(4){text-align:right}.receipt-table td:nth-child(2),.receipt-table th:nth-child(2),.receipt-table td:nth-child(3),.receipt-table th:nth-child(3),.receipt-table td:nth-child(4),.receipt-table th:nth-child(4){padding-right:8px}.receipt-footer{padding:16px;border-top:2px solid var(--border);background:var(--bg-primary);min-height:150px;display:flex;flex-direction:column;gap:12px}.receipt-summary{margin-bottom:12px}.summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;color:var(--text-secondary);border-bottom:1px solid var(--border-hover)}.summary-row span:last-child{color:var(--text-primary);font-weight:600}.summary-row.total{padding-top:12px;margin-top:8px;border-top:2px solid var(--primary-blue);font-family:var(--font-mono);font-size:16px;font-weight:700;background:linear-gradient(90deg, rgba(59,130,246,.1) 0%, rgba(34,197,94,.1) 100%);padding:12px;border-radius:var(--radius);border-bottom:0}.summary-row.total span:first-child{color:var(--primary-blue)}.summary-row.total span:last-child{color:var(--accent);font-size:18px}.receipt-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.btn-sm{padding:10px 8px;font-size:11px;font-weight:600;letter-spacing:.5px;border-radius:var(--radius)}.btn-accent{background:var(--primary-blue);color:var(--bg-primary)}.btn-accent:hover{background:var(--primary-blue-hover)}@media(max-width:1280px){.receipt-panel{width:380px}}@media(max-width:1024px){.content-wrapper{flex-direction:column}.receipt-panel{width:100%;height:auto;border-left:0;border-top:2px solid var(--border);box-shadow:none}.receipt-toggle-mobile{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);width:32px;height:32px;border-radius:var(--radius);background:var(--bg-tertiary)}.receipt-toggle-mobile:hover{background:var(--bg-elevated);color:var(--text-primary)}}.summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--text-secondary)}.summary-row.total{padding-top:12px;margin-top:8px;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--text-primary)}.summary-row.total span:last-child{color:var(--accent)}.cart-actions{display:flex;gap:12px}.btn{flex:1;padding:14px 20px;font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:1px;border-radius:var(--radius);transition:var(--transition)}.btn-primary{background:var(--accent);color:var(--bg-primary)}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:active{transform:scale(.98)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg-elevated);color:var(--text-primary)}.toast{position:fixed;top:80px;right:16px;left:auto;transform:translateX(0) translateY(-20px);background:#ffffff;color:#000000;padding:12px 16px;border-radius:8px;font-size:13px;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,0.12);z-index:502;opacity:0;visibility:hidden;transition:all .2s ease;border-left:4px solid #999999;max-width:320px;min-width:200px;word-wrap:break-word;white-space:normal}.toast.show{opacity:1;visibility:visible;transform:translateX(0) translateY(0)}.toast.success{border-left-color:#00aa00;background:#f0fff0}.toast.success::before{content:'✓ ';color:#00aa00;font-weight:bold}.toast.error{border-left-color:#e74c3c;background:#fff5f5}.toast.error::before{content:'✕ ';color:#e74c3c;font-weight:bold}.hold-orders-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);z-index:400;min-width:300px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow)}.hold-orders-modal.visible{display:block}.hold-orders-title{padding:16px;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:14px;font-weight:700;display:flex;justify-content:space-between;align-items:center}.hold-orders-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted)}.hold-orders-list{padding:16px}.held-order{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:10px;cursor:pointer;transition:var(--transition)}.held-order:hover{border-color:var(--accent);background:var(--bg-elevated)}.held-order-time{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}.held-order-items{font-size:13px;margin:6px 0}.held-order-total{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--accent)}@media(min-width:768px){.products-grid{grid-template-columns:repeat(3,1fr)}.products-grid.list-view{grid-template-columns:1fr}.products-grid.list-view .product-image{width:100px;height:100px}}@media(min-width:1024px){.products-grid{grid-template-columns:repeat(4,1fr);gap:16px}.products-grid.list-view{grid-template-columns:1fr}.scanner-section{padding:20px 24px}.categories-scroll{padding:8px 24px}.products-section{padding:24px}}@media(max-width:1024px){.main-content{margin-right:0}.content-wrapper{margin-bottom:var(--receipt-width)}.receipt-panel{position:fixed;bottom:0;left:0;right:0;width:100%;height:auto;max-height:40vh;border-left:0;border-top:2px solid var(--border);z-index:200}.receipt-content{max-height:200px}}@media(min-width:1280px){.products-grid{grid-template-columns:repeat(5,1fr)}.products-grid.list-view{grid-template-columns:1fr}}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:500;opacity:0;visibility:hidden;transition:var(--transition)}.modal-overlay.visible{opacity:1;visibility:visible}.modal-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);z-index:501;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow)}@media(max-width:480px){.modal-content{width:95%;max-width:100%;max-height:85vh;top:45%}}.modal-header{padding:20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-family:var(--font-mono);font-size:16px;font-weight:700}.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--text-muted);cursor:pointer;border-radius:var(--radius)}.modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.modal-body{padding:20px}.payment-modal .modal-body{display:flex;flex-direction:column;gap:16px}.payment-section{display:flex;gap:16px}.payment-display,.change-display{flex:1}.payment-display label,.change-display label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:6px;font-weight:600}.payment-input-display,.change-amount{font-family:var(--font-mono);font-size:32px;font-weight:700;color:var(--accent);padding:12px;background:var(--bg-tertiary);border-radius:var(--radius);text-align:right}.change-amount{color:var(--accent)}.numeric-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.key-btn{padding:16px;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);font-weight:600;font-size:14px;transition:var(--transition)}.key-btn:hover{background:var(--bg-elevated);border-color:var(--border-hover)}.key-btn:active{background:var(--accent);color:var(--bg-primary)}.key-clear{grid-column:span 2;background:var(--danger)}.key-clear:hover{background:var(--danger-hover)}.key-exact{background:#00cc00;color:#000}.key-exact:hover{background:#00aa00}.payment-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.pay-btn{padding:16px 12px;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--font-mono);font-weight:600;font-size:12px;transition:var(--transition)}.pay-btn svg{width:24px;height:24px}.pay-btn:hover{background:var(--bg-elevated);color:var(--text-primary)}.pay-cancel{background:var(--danger)}.pay-cancel:hover{background:var(--danger-hover)}.pay-cash,.pay-stk{grid-column:span 2;background:#0066ff;color:#ffffff;border-color:#0066ff}.pay-cash:hover,.pay-stk:hover{background:#0052cc;color:#ffffff;border-color:#0052cc}.stk-modal .modal-body{display:flex;flex-direction:column;gap:16px}.stk-amount{display:flex;justify-content:space-between;padding:12px;background:var(--bg-tertiary);border-radius:var(--radius);font-family:var(--font-mono)}.stk-amount span:last-child{color:var(--accent);font-weight:700}.stk-input-group label{display:block;font-size:12px;color:var(--text-muted);font-weight:600;margin-bottom:6px}.phone-input{display:flex;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.phone-prefix{padding:8px 10px;background:var(--bg-elevated);color:var(--text-secondary);font-family:var(--font-mono);font-weight:600;border-right:1px solid var(--border);font-size:12px}.phone-input input{flex:1;padding:8px 10px;background:transparent;color:var(--text-primary);font-family:var(--font-mono);font-size:13px}.stk-status{width:100%;padding:12px;border-radius:var(--radius);text-align:center;font-weight:600;display:flex;flex-direction:column;gap:12px}.stk-status.success{background:rgba(34,197,94,.1);color:var(--accent);border:1px solid var(--accent)}.stk-status.error{background:rgba(239,68,68,.1);color:var(--danger);border:1px solid var(--danger)}.btn-full{width:100%}.btn-loader{display:flex;gap:8px;align-items:center}.spinner.small{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent)}.order-summary-modal{margin-bottom:16px;padding:12px;background:var(--bg-tertiary);border-radius:var(--radius);border:1px solid var(--border);max-height:280px;overflow-y:auto}.order-table{width:100%;border-collapse:collapse;font-size:11px;font-family:var(--font-mono)}.order-table thead{background:var(--bg-elevated);border-bottom:1px solid var(--border)}.order-table th{padding:6px;text-align:left;color:var(--text-secondary);font-weight:700;text-transform:uppercase;letter-spacing:.5px}.order-table td{padding:6px;color:var(--text-secondary);border-bottom:1px solid var(--border-hover);text-align:left}.order-table td:nth-child(2),.order-table td:nth-child(3){text-align:right}.order-table tbody tr:hover{background:var(--bg-elevated)}.order-summary-totals{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}.total-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;color:var(--text-secondary)}.total-row span:last-child{color:var(--text-primary);font-weight:600}.total-row.total{font-size:14px;font-family:var(--font-mono);font-weight:700;color:var(--accent);padding:6px 0}.total-row.total span:first-child{color:var(--text-primary)}.total-row.total span:last-child{color:var(--accent)}.cart-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:99;display:none}.cart-overlay.visible{display:block}.cart-panel{position:fixed;top:var(--header-height);right:0;bottom:0;width:var(--cart-width);background:var(--bg-secondary);border-left:1px solid var(--border);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease;z-index:100;box-shadow:-4px 0 12px rgba(0,0,0,.3)}.cart-panel.open{transform:translateX(0)}.cart-header{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg-tertiary)}.cart-header h2{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:1px}.cart-header svg{color:var(--accent)}.cart-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--text-secondary);cursor:pointer;background:transparent}.cart-close:hover{color:var(--text-primary)}.cart-items{flex:1;overflow-y:auto;padding:12px}.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:var(--text-muted);text-align:center}.cart-empty p{font-size:15px;font-weight:600;color:var(--text-secondary)}.cart-item{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:10px;display:flex;gap:12px;align-items:stretch;position:relative}.cart-item:hover{border-color:var(--accent)}.cart-item-image{width:60px;height:60px;flex-shrink:0;background:var(--bg-primary);border-radius:var(--radius);overflow:hidden}.cart-item-image img{width:100%;height:100%;object-fit:cover}.cart-item-image .placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:24px;opacity:.3}.cart-item-details{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}.cart-item-name-wrapper{display:flex;align-items:center;gap:4px;width:100%;min-width:0}.cart-item-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.cart-item-meta{display:flex;align-items:center;gap:8px;width:100%;font-size:11px}.cart-item-code{color:var(--text-muted);white-space:nowrap;flex-shrink:0}.cart-item-price{font-family:var(--font-mono);font-size:8px;font-weight:600;color:var(--accent);white-space:nowrap;flex-shrink:0}.cart-item-controls{display:flex;align-items:center;gap:6px;margin-top:2px}.cart-item-actions{display:flex;gap:6px;flex-shrink:0;align-items:center}.qty-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);color:var(--text-secondary);border-radius:var(--radius-sm);font-size:12px;font-weight:700;transition:var(--transition)}.qty-btn:hover{background:var(--accent);color:var(--bg-primary)}.qty-value{flex:1;text-align:center;font-family:var(--font-mono);font-size:12px;color:var(--text-primary)}.cart-item-view-btn{width:18px;height:18px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--accent);border:none;border-radius:50%;cursor:pointer;flex-shrink:0;transition:all .2s ease}[data-theme="light"] .cart-item-view-btn{color:#000}.cart-item-view-btn:hover{background:transparent;color:var(--accent-hover);transform:scale(1.15)}.eye-dark{display:block}.eye-light{display:none}[data-theme="light"] .eye-dark{display:none}[data-theme="light"] .eye-light{display:block}.cart-item-remove{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:rgba(239,68,68,.2);color:var(--danger);border-radius:50%;font-size:16px;cursor:pointer;transition:var(--transition);border:none;flex-shrink:0}.cart-item-remove:hover{background:var(--danger);color:#fff}.cart-footer{padding:16px;border-top:1px solid var(--border);background:var(--bg-primary)}.cart-summary{margin-bottom:16px}.cart-summary .summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;color:var(--text-secondary);border-bottom:1px solid var(--border-hover)}.cart-summary .summary-row span:last-child{color:var(--text-primary);font-weight:600;font-family:var(--font-mono)}.cart-summary .summary-row.total{border-top:1px solid var(--border);padding-top:8px;margin-top:8px;font-size:16px;font-weight:700;color:var(--accent)}/* Product View Button */
.product-view-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border:none;border-radius:50%;cursor:pointer;opacity:0.9;transition:all .2s ease;margin-top:6px;flex-shrink:0}
.product-view-btn:hover{background:var(--accent-hover);transform:scale(1.15);opacity:1}
.product-view-btn svg{width:12px;height:12px;stroke:#fff}
[data-theme="light"] .product-view-btn{color:#000}
[data-theme="light"] .product-view-btn svg{stroke:#000}
/* Compact view - always show eye button */
.products-grid.compact-view .product-view-btn{opacity:1;margin-top:0;margin-left:auto;width:20px;height:20px}

/* ============================================ GYROSCOPE INDICATOR & ANIMATIONS ============================================ */
#gyroscopeIndicator{width:100px;height:100px;background:linear-gradient(135deg, var(--accent), var(--accent-hover));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 8px 32px rgba(45,80,22,.3);transform-style:preserve-3d;transition:transform .05s linear}#gyroscopeIndicator::before{content:'🧭';position:absolute;font-size:48px;z-index:1}
.gyroscope-gauge{display:flex;gap:12px;align-items:center;padding:16px;background:var(--bg-tertiary);border-radius:var(--radius);border:1px solid var(--border);margin:8px 0}
.gyroscope-gauge-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.gyroscope-gauge-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.gyroscope-gauge-bar{width:100%;height:24px;background:var(--bg-elevated);border-radius:4px;overflow:hidden;position:relative;border:1px solid var(--border)}
.gyroscope-gauge-fill{height:100%;background:linear-gradient(90deg, var(--accent), var(--accent-hover));width:0%;transition:width .05s linear;display:flex;align-items:center;justify-content:center;color:#000;font-size:9px;font-weight:700}
.gyroscope-gauge-value{font-size:10px;font-weight:600;color:var(--text-secondary);font-family:var(--font-mono);min-width:40px;text-align:center}
.gyroscope-status{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);font-size:11px;font-weight:600}
.gyroscope-status.active{background:var(--accent-muted);border-color:var(--accent)}
.gyroscope-status::before{content:'🧭';font-size:12px}
.gyroscope-status.active::after{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulse-dot 1.5s infinite}
.nav-gyro-view{perspective:1000px;width:100%;height:300px;background:var(--bg-primary);border-radius:var(--radius-lg);overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.nav-gyro-cube{width:150px;height:150px;background:linear-gradient(135deg, var(--accent), var(--accent-hover));transform-style:preserve-3d;position:relative;box-shadow:0 10px 40px rgba(45,80,22,.3)}
.compass-ring{width:120px;height:120px;border:3px solid var(--accent);border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;font-size:32px;animation:slow-spin 30s linear infinite}
@keyframes slow-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(max-width:768px){#gyroscopeIndicator{width:80px;height:80px;font-size:20px}.gyroscope-gauge{padding:12px;gap:8px}.nav-gyro-view{height:200px}.nav-gyro-cube{width:100px;height:100px}}
/* ============================================
   PDF DOWNLOAD PROGRESS & FEEDBACK
   ============================================ */
.download-progress{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-lg);padding:30px;z-index:600;opacity:0;visibility:hidden;transition:all .3s ease;box-shadow:var(--shadow)}.download-progress.active{opacity:1;visibility:visible}.download-progress-content{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:200px}.download-spinner{width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.download-text{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--text-primary);text-align:center}.download-feedback{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-elevated);border:2px solid var(--border);border-radius:var(--radius);padding:12px 16px;z-index:601;opacity:0;visibility:hidden;transition:all .3s ease;box-shadow:var(--shadow);font-size:13px;font-weight:600;max-width:300px;white-space:normal;text-align:center}.download-feedback-success{border-color:#00aa00;background:rgba(0,170,0,.1)}.download-feedback-success span{color:#00aa00}.download-feedback-error{border-color:var(--danger);background:rgba(239,68,68,.1)}.download-feedback-error span{color:var(--danger)}.download-feedback-warning{border-color:#ff9800;background:rgba(255,152,0,.1)}.download-feedback-warning span{color:#ff9800}.download-feedback.active,.download-feedback-success.active,.download-feedback-error.active,.download-feedback-warning.active{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.download-feedback-content{display:flex;align-items:center;gap:8px;width:100%;justify-content:space-between}.feedback-close{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:inherit;font-size:16px;opacity:.7;transition:opacity .2s}.feedback-close:hover{opacity:1}
.products-grid.compact-view .product-view-btn svg{width:10px;height:10px}
/* Product Details Modal */
.product-details-image-container{width:100%;aspect-ratio:1;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius);margin-bottom:16px}
.product-details-image{width:100%;height:100%;object-fit:cover}
.product-details-placeholder{font-size:64px;opacity:.3}
.product-details-info{display:flex;flex-direction:column;gap:12px}
.details-name{font-size:18px;font-weight:700;color:var(--text-primary)}
.details-code{font-family:var(--font-mono);font-size:13px;color:var(--text-muted)}
.details-price{font-family:var(--font-mono);font-size:24px;font-weight:700;color:var(--accent)}
/* PIN Field and VAT Section Styles */
.vat-section{margin-bottom:6px}
.pin-section{background:var(--bg-elevated);padding:6px;border-radius:var(--radius);border:1px solid var(--border)}
.pin-input{width:100%;padding:6px 10px;font-size:12px;border:1px solid var(--border);border-radius:var(--radius);text-align:center;letter-spacing:2px;background:var(--bg-tertiary);color:var(--text-primary);font-weight:600}
.pin-input::placeholder{color:var(--text-muted);letter-spacing:normal;font-size:11px}
.pin-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
#vatTypeOptions{display:none}
#vatTypeOptions.show{display:flex}
.pay-btn-small{padding:8px 6px !important;gap:4px !important;font-size:10px !important}
.pay-btn-small svg{width:16px !important;height:16px !important}

/* ============================================
   RECEIPT PREVIEW STYLING
   ============================================ */
.receipt-preview {
  font-family: 'Courier New', 'Consolas', monospace !important;
  letter-spacing: 0.5px;
  background: var(--bg-primary);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.8;
  font-size: 12px;
}

.receipt-preview::-webkit-scrollbar {
  width: 6px;
}

/* ============================================
   QR CODE GENERATOR MODAL
   ============================================ */
.qr-generator-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 70vh;
  overflow-y: auto;
}

.qr-generator-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qr-preview-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.qr-preview-container {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 10px;
  border: 2px solid var(--accent);
}

.qr-preview-container canvas,
.qr-preview-container img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
}

.qr-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.qr-product-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.qr-product-code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
}

.qr-export-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qr-export-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.qr-export-btn {
  padding: 12px 16px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.qr-export-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--accent);
  color: var(--accent);
}

.qr-export-btn.print {
  background: rgba(0, 170, 0, 0.15);
  color: var(--success);
  border-color: var(--success);
  grid-column: span 2;
}

.qr-export-btn.print:hover {
  background: var(--success);
  color: var(--bg-primary);
  border-color: var(--success);
}

.qr-paper-size {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qr-paper-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.qr-paper-options {
  display: flex;
  gap: 8px;
}

.qr-paper-option {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.qr-paper-option:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.qr-paper-option.active {
  background: var(--accent);
  color: var(--bg-primary);
  border-color: var(--accent);
}

.qr-quantity-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qr-quantity-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.qr-quantity-input {
  padding: 10px 12px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.qr-quantity-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.qr-batch-section {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}

.qr-batch-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.qr-batch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.qr-batch-input {
  padding: 8px 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
}

.qr-batch-input::placeholder {
  color: var(--text-muted);
}

.qr-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.qr-action-btn {
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.qr-action-btn.primary {
  background: var(--accent);
  color: var(--bg-primary);
  grid-column: span 2;
}

.qr-action-btn.primary:hover {
  background: var(--accent-hover);
}

.qr-action-btn.secondary {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.qr-action-btn.secondary:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--accent);
}

/* Batch QR Preview Grid Container */
#qrPreview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 100%;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  box-sizing: border-box;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border);
  align-content: start;
}

#qrPreview img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
  background: white;
  padding: 4px;
}

/* Responsive QR grid on tablet */
@media (max-width: 768px) {
  #qrPreview {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 10px;
    max-height: 350px;
  }

  #qrPreview img {
    width: 90px;
    height: 90px;
  }
}

/* Responsive QR grid on mobile */
@media (max-width: 480px) {
  #qrPreview {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    padding: 8px;
    max-height: 300px;
  }

  #qrPreview img {
    width: 80px;
    height: 80px;
  }
}

.receipt-preview::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 3px;
}

.receipt-preview::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.receipt-preview::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}
.printer-settings-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
}

/* Mobile Responsive - Additional breakpoints */
@media(max-width:480px){
  .header{padding:0 8px}
  .header-right{gap:4px}
  .hold-orders-btn,.view-toggle,.cart-toggle,.backup-btn,.theme-toggle,.print-settings-btn,.nav-action-btn{width:36px;height:36px;padding:3px}
  .hold-orders-btn svg,.view-toggle svg,.cart-toggle svg,.backup-btn svg,.theme-toggle svg,.print-settings-btn svg,.nav-action-btn svg{width:14px;height:14px}
  .hold-badge,.cart-badge{font-size:9px;width:16px;height:16px}
  .scanner-section{padding:6px}
  .section-title{font-size:8px;gap:2px}
  .section-title svg{width:10px;height:10px}
  .search-bar{height:32px;gap:4px}
  .clear-btn{width:24px;height:24px}
  .scanner-toggle-btn{width:28px;height:28px;padding:2px;font-size:8px}
}

/* Price Mode Toggle Buttons */
.price-mode-btn {
  transition: all 0.2s ease;
}

.price-mode-btn.active {
  background: var(--accent) !important;
  color: var(--bg-primary) !important;
  border-color: var(--accent) !important;
  font-weight: 600;
}

/* Modal Backdrop */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 0;
}

[data-theme="light"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.3);
}

/* Modal Container */
.modal {
  display: none;
  align-items: center;
  justify-content: center;
}

.modal[style*="display: flex"] {
  display: flex !important;
}

/* Modal Card - Backup/Restore and other modals */
.modal-card {
  position: relative;
  z-index: 10;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.price-mode-btn:hover {
  border-color: var(--accent);
  background: var(--accent-muted);
}
  justify-content: center;
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  transition: var(--transition);
  position: relative;
  border: 1px solid var(--border);
  cursor: pointer;
}

.printer-settings-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--accent);
}

.printer-settings-btn:active {
  background: var(--accent-muted);
}

/* Success Dialog Styling */
.success-badge {
  font-size: 48px;
  animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Reprint Dialog */
.reprint-dialog {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
[data-theme="light"] .details-price{color:var(--accent)}
/* Responsive product details modal */
/* Text truncation for names */
.truncate-20{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-name{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:help}
.cart-item-name{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:help}/* Product name wrapper with expand button */
.product-name-wrapper{display:flex;align-items:center;gap:4px;width:100%}
.product-name-wrapper .product-name{flex:1;min-width:0}
.expand-name-btn{background:none;border:none;color:var(--accent);font-size:14px;cursor:pointer;padding:2px 4px;line-height:1;flex-shrink:0;transition:var(--transition);opacity:0.7}
.expand-name-btn:hover{opacity:1;transform:scale(1.2)}
/* Cart item name wrapper with expand button */
.cart-item-name-wrapper{display:flex;align-items:center;gap:4px;width:100%;min-width:0}
.cart-item-name-wrapper .cart-item-name{flex:1;min-width:0}

/* ============================================
   PAGINATION CONTROLS
   ============================================ */
.pagination-container {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-secondary);
  border-top: 2px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
}

.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

.pagination-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--bg-primary);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.pagination-btn:active:not(:disabled) {
  transform: translateY(0);
}

.pagination-btn.disabled,
.pagination-btn:disabled {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination-info {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 200px;
  text-align: center;
}

.pagination-info strong {
  color: var(--accent);
  font-weight: 700;
}

/* Responsive pagination */
@media (max-width: 768px) {
  .pagination-controls {
    gap: 8px;
    padding: 0 8px;
  }

  .pagination-btn {
    padding: 8px 12px;
    font-size: 11px;
  }

  .pagination-info {
    font-size: 11px;
    min-width: auto;
    flex: 1;
  }
}
.expand-name-btn-cart{background:none;border:none;color:var(--accent);font-size:12px;cursor:pointer;padding:2px 4px;line-height:1;flex-shrink:0;transition:var(--transition);opacity:0.7}
.expand-name-btn-cart:hover{opacity:1;transform:scale(1.2)}
/* Full name modal */
.full-name-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:600;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}[data-theme="light"] .full-name-modal{background:rgba(0,0,0,.3)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.full-name-content{background:var(--bg-secondary);border:2px solid var(--accent);border-radius:var(--radius-lg);padding:24px;max-width:90%;width:100%;max-width:400px;margin:auto;position:relative;box-shadow:var(--shadow)}
.full-name-content h3{font-size:14px;font-weight:700;color:var(--text-secondary);margin-bottom:12px;letter-spacing:1px;text-transform:uppercase}
.full-name-content p{font-size:15px;font-weight:600;color:var(--text-primary);line-height:1.5;word-wrap:break-word}
.full-name-close{position:absolute;top:12px;right:12px;width:28px;height:28px;background:none;border:none;color:var(--text-secondary);font-size:20px;cursor:pointer;transition:var(--transition);border-radius:var(--radius)}
.full-name-close:hover{color:var(--text-primary);background:var(--bg-tertiary)}

/* ============================================
   NAVIGATOR BRIDGE STYLES
   ============================================ */

.nav-bridge-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
  border: 1px solid #2563eb;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.nav-bridge-button:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.nav-bridge-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.nav-bridge-button-small {
  padding: 8px 12px;
  font-size: 11px;
  gap: 6px;
}

.nav-bridge-button-medium {
  padding: 10px 16px;
  font-size: 12px;
}

.nav-bridge-button-large {
  padding: 12px 20px;
  font-size: 14px;
  gap: 10px;
}

.nav-bridge-button-back {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: #dc2626;
}

.nav-bridge-button-back:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border-color: #b91c1c;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

/* Navigation button in modals */
.modal-footer .nav-bridge-button,
.modal-actions .nav-bridge-button {
  flex: 1;
}

/* Navigation button in header */
.header-right .nav-bridge-button {
  padding: 8px 12px;
  font-size: 11px;
  height: 40px;
}

/* Responsive */
@media (max-width: 768px) {
  .nav-bridge-button {
    padding: 8px 12px;
    font-size: 11px;
  }

  .nav-bridge-button-large {
    padding: 10px 16px;
    font-size: 12px;
  }
}