/* POS Specific Styles */
.pos-active .header{display:none !important}
.pos-active #pageTitle{display:none !important}
.pos-active .main-content{padding-top:15px}

/* Additional rule to ensure header is hidden when POS section is active */
body.pos-mode .header,
body.pos-mode #pageTitle {display:none !important}

/* POS Specific Dark Mode Styling */
.pos-search-input{font-size:16px;padding:12px;border:2px solid var(--border-primary);border-radius:10px;width:100%;background:var(--bg-primary);color:var(--text-primary);transition:all 0.3s ease}
.pos-search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(102,126,234,0.1)}
.pos-search-input::placeholder{color:var(--text-tertiary)}

/* .pos-grid-header{margin-top:6px;padding:6px 8px;background:white;color:#2d3748;border:2px solid var(--primary);border-radius:6px;font-size:11px;font-weight:500;text-align:center} */
.pos-grid-header {
  margin-top: 6px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--primary) 35%, transparent); /* more transparent */
  border: 2px solid color-mix(in srgb, var(--primary) 75%, transparent); /* less transparent */
  color: white;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

.cart-title{margin-bottom:15px;color:var(--text-primary);font-size:18px;font-weight:600}

/* Cart Item Styling */
.cart-item{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;padding:8px 10px;background:var(--bg-primary);border-radius:6px;border:1px solid var(--border-primary);font-size:12px;transition:all 0.2s ease}
.cart-item:hover{background:var(--bg-secondary)}
.cart-item-name{font-weight:600;color:var(--text-primary);margin-bottom:2px}
.cart-item-price{color:var(--text-secondary)}
.cart-item-controls{display:flex;align-items:center;gap:4px}
.cart-item-controls button{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:4px;width:22px;height:22px;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;color:var(--text-primary);transition:all 0.2s ease}
.cart-item-controls button:hover{background:var(--bg-secondary);border-color:var(--primary)}
.cart-item-controls input{width:60px;padding:6px 8px;border:1px solid var(--border-primary);border-radius:6px;text-align:center;font-size:14px;font-weight:600;background:var(--bg-secondary);color:var(--text-primary);min-height:32px}
.cart-item-total{min-width:65px;text-align:right;font-weight:600;color:var(--primary)}
.cart-item-remove{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:4px;width:22px;height:22px;cursor:pointer;color:var(--text-tertiary);font-size:11px;margin-left:4px;transition:all 0.2s ease}
.cart-item-remove:hover{background:#fed7d7;color:#742a2a;border-color:#fca5a5}

/* Payment Section */
.payment-section{border-top:1px solid var(--border-primary);padding-top:15px;margin-top:15px}
.payment-summary{background:var(--bg-tertiary);padding:16px;border-radius:12px;margin:12px 0;border:1px solid var(--border-primary)}
.payment-row{display:flex;justify-content:space-between;margin-bottom:8px}
.payment-label{font-weight:600;color:var(--text-primary)}
.payment-value{color:var(--text-primary)}
.payment-total{padding-bottom:10px;border-bottom:2px solid var(--border-primary);font-weight:800;font-size:16px;color:var(--text-primary);margin-bottom:12px}
.change-due-section{margin-top:12px}
.payment-status{padding:10px;border-radius:8px;text-align:center;font-weight:600;margin-top:12px}
.payment-actions{display:flex;gap:10px;margin-top:16px}
.receipt-section{margin-top:12px}

/* Enhanced POS styles */
#paymentStatus.insufficient {background: #fed7d7;color: #e53e3e;border: 1px solid #feb2b2;}
#paymentStatus.sufficient {background: #c6f6d5;color: #38a169;border: 1px solid #9ae6b4;}
#paymentStatus.exact {background: #bee3f8;color: #2b6cb0;border: 1px solid #90cdf4;}

#receiptContent {font-size: 12px;line-height: 1.4;}

@media print {
  body * {visibility: hidden;}
  #receiptContent, #receiptContent * {visibility: visible;}
  #receiptContent {position: absolute;left: 0;top: 0;width: 100%;}
}

/* Product Grid */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;max-height:calc(100vh - 160px);overflow-y:auto;padding:2px}
.product-card{border:1px solid var(--border-primary);border-radius:10px;padding:12px;cursor:pointer;background:var(--card-bg);min-height:120px;transition:all 0.3s ease;box-shadow:0 2px 8px var(--shadow)}
.product-card:hover{border-color:var(--primary);background:var(--bg-secondary);transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow)}
.product-card .product-name{color:var(--text-primary);font-weight:600;font-size:13px;margin-bottom:6px}
.product-card .product-price{color:var(--primary);font-weight:700;font-size:14px}
.product-card .product-stock{color:var(--text-tertiary);font-size:11px;margin-top:4px}
.pos-grid{display:grid;grid-template-columns:1fr 380px;gap:16px;height:calc(100vh - 220px)}
.pos-grid > div:last-child{display:flex;flex-direction:column}
.pos-grid > div:last-child .card{flex:1;display:flex;flex-direction:column}
#cartItems{flex:1;overflow-y:auto;max-height:calc(100vh - 500px);border:1px solid var(--border-primary);border-radius:12px;padding:12px;background:var(--bg-secondary)}

/* POS Alert Tiles */
.pos-alert-tiles{display:flex;gap:12px;margin-bottom:20px;height:60px;position:relative}
.pos-alert-tiles::after{content:'🔄 Live Updates';position:absolute;top:-16px;right:0;font-size:10px;color:var(--text-tertiary);font-weight:500}
.pos-alert-tile{flex:1;display:flex;align-items:center;padding:12px 16px;border-radius:12px;cursor:pointer;transition:all 0.3s ease;min-height:60px;box-shadow:0 2px 8px rgba(0,0,0,0.1);background:white;color:#2d3748;border:2px solid white}
.pos-alert-tile:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.15)}

/* Alert tiles */
.pos-alert-tile.warning{background:white;color:#2d3748;border:2px solid var(--primary);border-left:4px solid var(--primary)}
.pos-alert-tile.danger{background:white;color:#2d3748;border:2px solid #ef4444;border-left:4px solid #ef4444}
.pos-alert-tile.critical{background:white;color:#2d3748;border:2px solid #8b5cf6;border-left:4px solid #8b5cf6}

.pos-alert-tile.warning:hover{border-color:var(--primary-dark);border-left-color:var(--primary-dark)}
.pos-alert-tile.danger:hover{border-color:#dc2626;border-left-color:#dc2626}
.pos-alert-tile.critical:hover{border-color:#7c3aed;border-left-color:#7c3aed}


.pos-alert-icon{font-size:20px;margin-right:12px}
.pos-alert-content{flex:1}
.pos-alert-label{font-size:12px;font-weight:600;color:inherit;margin-bottom:2px}
.pos-alert-count{font-size:16px;font-weight:800;color:inherit}

/* Alert Details Container */
.alert-details-container{margin-top:15px;background:var(--card-bg);border:1px solid var(--border-primary);border-radius:12px;box-shadow:0 4px 12px var(--shadow);width:100%;max-width:100%}
.alert-details-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-primary);background:var(--bg-tertiary);border-radius:12px 12px 0 0}
.alert-details-header h4{margin:0;font-size:16px;font-weight:600;color:var(--text-primary)}
.alert-close-btn{background:none;border:none;font-size:20px;color:var(--text-tertiary);cursor:pointer;padding:6px 10px;border-radius:8px;transition:all 0.2s ease}
.alert-close-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}
.alert-details-content{padding:20px;max-height:400px;overflow-y:auto;width:100%;box-sizing:border-box}
.alert-product-name{font-weight:600;color:var(--text-primary)}
.alert-product-details{font-size:11px;color:var(--text-tertiary);margin-top:2px}
.alert-product-status{font-weight:600;padding:3px 8px;border-radius:6px;font-size:10px}

/* Status badges */
.alert-product-status.warning{background:#fef3c7;color:#92400e}
.alert-product-status.danger{background:#fecaca;color:#991b1b}
.alert-product-status.critical{background:#e0e7ff;color:#3730a3}

/* Shift Transactions Modal Responsive Design */
@media (max-width: 768px) {
  #shiftTransactionsModal .modal-content {
    max-width: 95% !important;
    margin: 20px auto !important;
    max-height: calc(100vh - 40px) !important;
    border-radius: 12px !important;
  }
  
  #shiftTransactionsModal .modal-content > div:first-child {
    padding: 16px !important;
  }
  
  #shiftTransactionsModal .modal-content > div:first-child > div:first-child > div:first-child > h2 {
    font-size: 20px !important;
  }
  
  #shiftTransactionsModal .modal-content > div:first-child > div:first-child > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  #shiftTransactionsModal .modal-content > div:last-child {
    padding: 16px !important;
  }
  
  .transaction-card {
    margin-bottom: 12px !important;
  }
  
  .transaction-card > div:first-child {
    padding: 12px !important;
  }
  
  .transaction-card > div:last-child {
    padding: 12px !important;
  }
}

@media (max-width: 480px) {
  #shiftTransactionsModal .modal-content > div:first-child > div:first-child > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
  
  #shiftTransactionsModal .modal-content > div:first-child > div:first-child > div:nth-child(2) > div {
    padding: 12px !important;
  }
  
  .transaction-card .amount-badge {
    font-size: 18px !important;
  }
  
  .transaction-card .customer-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  
  .transaction-card .customer-info > div:last-child {
    margin-left: 0 !important;
  }
}

/* Enhanced Modal Animation */
#shiftTransactionsModal.show {
  animation: modalFadeIn 0.3s ease-out;
}

#shiftTransactionsModal.show .modal-content {
  animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-50px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Modal layering - ensure proper stacking order */
#shiftTransactionsModal {
  z-index: 1000 !important;
}

#shiftTransactionsModal.show {
  z-index: 1000 !important;
}

/* Ensure receipt modal appears above other modals */
#receiptModal {
  z-index: 1100 !important;
}

#receiptModal.show {
  z-index: 1100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure receipt modal content is also properly layered */
#receiptModal .modal-content {
  z-index: 1101 !important;
  position: relative;
}