/* Order Status Badge Colors */
.bg-gray-200 { background-color: #e5e7eb !important; }
.text-gray-700 { color: #374151 !important; }
.bg-blue-100 { background-color: #dbeafe !important; }
.text-blue-700 { color: #1d4ed8 !important; }
.bg-green-100 { background-color: #dcfce7 !important; }
.text-green-700 { color: #15803d !important; }
.bg-green-200 { background-color: #bbf7d0 !important; }
.text-green-900 { color: #14532d !important; }
.bg-red-100 { background-color: #fee2e2 !important; }
.text-red-700 { color: #b91c1c !important; }
.bg-amber-100 { background-color: #fef3c7 !important; }
.text-amber-700 { color: #b45309 !important; }
.bg-wine-100 { background-color: #f5ede7 !important; }
.text-wine-700 { color: #8b3a3a !important; }
/* Highlight selected/active table in sidebar */
.table-item {
  background: #fff;
  color: #3d1f1f;
  border: 2px solid transparent;
  border-radius: 1rem;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.table-item.selected, .table-item.active {
  background: #8b3a3a !important; /* wine-600 */
  color: #fff !important;
  border-color: #a84848 !important; /* wine-500 */
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(139, 58, 58, 0.10);
}

/* Header item fix for visibility on both dark and light headers */
.header-btn,
.header-btn:visited {
  font-weight: bold;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
/* When header has dark wine background (default RestauPOS header) */
header.bg-wine-900 .header-btn,
header.bg-wine-900 .header-btn:visited {
  color: #fdfaf9 !important;
  background: transparent;
}
header.bg-wine-900 .header-btn:hover,
header.bg-wine-900 .header-btn:focus {
  color: #ffd9b3 !important;
  background: #722c2c !important;
}
/* Fallback for light headers (avoid white on white) */
header:not(.bg-wine-900) .header-btn,
header:not(.bg-wine-900) .header-btn:visited {
  color: #3d1f1f !important;
  background: #f5ede7 !important;
  border: 1px solid #d4b5a0;
}
header:not(.bg-wine-900) .header-btn:hover,
header:not(.bg-wine-900) .header-btn:focus {
  background: #e8d4c8 !important;
}
/* App-like Responsive Enhancements for RestauPOS */
/* Ensure login button is visible and themed */
.login-btn {
  background-color: #8b3a3a !important; /* wine-600 */
  color: #fff !important;
  font-weight: bold;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(139, 58, 58, 0.15);
  transition: background 0.2s, transform 0.1s;
}
.login-btn:hover, .login-btn:focus {
  background-color: #722c2c !important; /* wine-700 */
  color: #fff !important;
  transform: scale(0.98);
}

/* Logout button for light header: solid wine button with white text */
.logout-btn {
  background-color: #8b3a3a !important; /* wine-600 */
  color: #ffffff !important;
  border-radius: 0.75rem;
}
.logout-btn:hover,
.logout-btn:focus {
  background-color: #722c2c !important; /* wine-700 */
  color: #ffffff !important;
}

/* Complete Checkout button: ensure visible even if Tailwind fails */
.complete-checkout-btn {
  background-color: #3d1f1f !important; /* wine-900 - dark, high contrast */
  color: #ffffff !important;
  font-weight: bold;
  border-radius: 1rem;
  border: 1px solid #8b3a3a !important;
  box-shadow: 0 4px 14px rgba(61, 31, 31, 0.35);
}
.complete-checkout-btn:hover,
.complete-checkout-btn:focus {
  background-color: #8b3a3a !important; /* wine-600 */
  color: #ffffff !important;
}

/* Confirm & Print button in modal: green theme */
.confirm-print-btn {
  background-color: #16a34a !important; /* green-600 */
  color: #ffffff !important;
  border: 1px solid #16a34a !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
}
.confirm-print-btn:hover,
.confirm-print-btn:focus {
  background-color: #15803d !important; /* green-700 */
  color: #ffffff !important;
}

/* Checkout modal responsiveness */
.checkout-modal-body {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}
@media (max-width: 640px) {
  #checkout-modal > div {
    max-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .checkout-modal-body {
    flex: 1;
    max-height: none;
    overflow-y: auto;
  }
}

/* Ensure key modal texts are dark and readable even if theme fails */
#checkout-modal h3,
#checkout-modal #modal-user,
#checkout-modal .checkout-modal-body span {
  color: #3d1f1f;
}

/* Quantity buttons: minus (red) and plus (green) squares */
.qty-minus-btn {
  background-color: #fee2e2 !important; /* red-100 */
  color: #b91c1c !important;           /* red-700 */
}
.qty-minus-btn:hover,
.qty-minus-btn:focus {
  background-color: #fecaca !important; /* red-200 */
}
.qty-plus-btn {
  background-color: #dcfce7 !important; /* green-100 */
  color: #15803d !important;            /* green-700 */
}
.qty-plus-btn:hover,
.qty-plus-btn:focus {
  background-color: #bbf7d0 !important; /* green-200 */
}

/* Selected order type & payment buttons: solid wine background, readable text */
.order-selected,
.payment-selected {
  background-color: #8b3a3a !important; /* wine-600 */
  color: #ffffff !important;
  border-color: #8b3a3a !important;
}
.order-selected i,
.payment-selected i {
  color: #f9fafb !important;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f9fafb;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.smooth-tap {
  transition: all 0.2s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.smooth-tap:active {
  transform: scale(0.97);
}

.card-shadow {
  box-shadow: 0 2px 10px rgba(61, 31, 31, 0.08);
}

@media (max-width: 640px) {
  h1 { font-size: 1.25rem; }
  h2, h3 { font-size: 1rem; }
  .responsive-container { padding: 1rem; }
  .hide-mobile { display: none !important; }
}

@media (min-width: 641px) {
  .hide-desktop { display: none !important; }
}

.fixed-bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
  z-index: 50;
  display: flex;
  justify-content: space-around;
  padding: 0.5rem 0;
}

.app-transition {
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

/* Scroll-to-top floating button */
.scroll-top-btn {
  position: fixed !important;
  right: 1rem !important;
  left: auto !important;
  bottom: 1rem !important;
  z-index: 60;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 2px solid #c9a961; /* wine-400 accent */
  background: #ffffff;       /* white fill */
  color: #8b3a3a;           /* wine-600 icon */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  cursor: pointer;
}
.scroll-top-btn i {
  font-size: 0.9rem;
}
.scroll-top-btn:hover,
.scroll-top-btn:focus {
  background: #f5ede7; /* light wine background */
}

/* Mobile responsiveness tweaks */
@media (max-width: 768px) {
  body {
    overflow: auto; /* allow full-page scroll on small devices */
  }
  .menu-panel,
  .order-panel {
    max-height: none !important;
    position: static !important;
  }
  .scroll-top-btn {
    bottom: 4.5rem; /* avoid overlapping with mobile browser bars */
  }
}