/* ============================================================
 * Mobile responsiveness primitives — kept identical across the
 * tenant, kitchen, waiter, superadmin, business, and customer
 * stylesheets so behaviour matches everywhere.
 * ============================================================ */

/* Prevent iOS Safari from zooming in on form inputs that have a
 * font-size below 16px. Tailwind's `text-sm` (14px) trips this; the
 * rule below restores 16px at small viewports without touching the
 * desktop type scale. */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Honour the iOS home-indicator inset on mobile bottom navs. */
.safe-area-bottom {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* Dynamic viewport-height helpers for full-height containers that
 * shouldn't clip behind the mobile URL bar. */
.h-screen-d {
  height: 100dvh;
}
.min-h-screen-d {
  min-height: 100dvh;
}

/* Custom scrollbar for tables */
.overflow-x-auto::-webkit-scrollbar {
  height: 6px;
}
.overflow-x-auto::-webkit-scrollbar-track {
  background: transparent;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Toast Animations */
#toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Modal Scale Animation */
#detail-modal.show {
  opacity: 1;
}
#detail-modal.show #modal-panel {
  transform: scale(1);
}

/* Dropdown override */
select.status-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1em 1em;
  padding-right: 2rem !important;
}

/* ── Reports print stylesheet ──
   Save-as-PDF works straight from the browser print dialog. Hides
   chrome (sidebar, top nav, mobile nav, filter chrome) and lets the
   reports paper expand to the page width. We keep summary cards,
   spark, top items and the orders table — everything a tenant would
   want in a hard copy. */
@media print {
  body * { visibility: hidden !important; }
  #reports-container, #reports-container * { visibility: visible !important; }
  #reports-container { position: absolute; left: 0; top: 0; width: 100%; padding: 0; }
  #reports-paper { box-shadow: none !important; border: none !important; }
  .reports-actions, .reports-filters, .reports-subtabs { display: none !important; }
  #reports-orders-tbody tr { break-inside: avoid; }
  @page { margin: 12mm; }
}

/* ── Reports heatmap tooltip ──
   Custom CSS-only tooltip on the activity heatmap cells. Appears
   instantly on hover (no native title-attribute delay), positioned
   above the cell. data-tip carries the human-readable label. */
.reports-heatmap-cell {
  position: relative;
  cursor: default;
  transition: outline 0.05s linear;
}
.reports-heatmap-cell:hover {
  outline: 2px solid rgba(212, 134, 26, 0.6);
  outline-offset: -1px;
  z-index: 5;
}
.reports-heatmap-cell:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  padding: 5px 8px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.reports-heatmap-cell:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1f2937;
  pointer-events: none;
  z-index: 10;
}