/* ============================================
   Browser Compatibility + Mobile Polish
   BandThai
   ============================================ */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color:var(--premium-text-muted);opacity:.6 }
input::-moz-placeholder,
textarea::-moz-placeholder { color:var(--premium-text-muted);opacity:.6 }
input::placeholder,
textarea::placeholder { color:var(--premium-text-muted);opacity:.6 }

*{scrollbar-width:thin;scrollbar-color:var(--premium-light-gray) transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--premium-light-gray);border-radius:3px}

/* Prevent iOS zoom on input focus (must be ≥16px) */
@media(max-width:768px){
  input,select,textarea{font-size:16px!important}
}
/* Prevent any element from overflowing viewport width */
img,video,canvas,iframe{max-width:100%;height:auto}

/* Smooth touch scrolling on scrollable containers */
.nav-menu-wrap,
.modal-box{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;  /* prevent page scroll when modal is at boundary */
}
.table-responsive{
  -webkit-overflow-scrolling: touch;  /* smooth momentum scroll for table */
  /* NO overscroll-behavior here — would eat mouse wheel & touch scroll on page */
}

/* Table responsive: allow horizontal scroll + both pan directions */
.table-responsive{
  overflow-x: auto;
  border-radius: var(--radius-md);
  touch-action: pan-x pan-y;
}

/* Prevent text selection flash on tap */
.btn, .nav-menu li a, .qci-venue-btn, .qci-slot-btn,
.slot-btn, .qci-btn, .leave-tab, .member-chip {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* Safe area padding for notched phones (iPhone X+) */
.main-nav .nav-inner {
  padding-left: max(var(--spacing-md), env(safe-area-inset-left));
  padding-right: max(var(--spacing-md), env(safe-area-inset-right));
}
main, .page-main {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ============================================
   Mobile Table — horizontal scroll + larger text
   ============================================ */
@media (max-width: 600px) {
  /* Make table cells bigger for touch */
  thead th { font-size: 12px; padding: 10px 8px; }
  tbody td  { font-size: 13px; padding: 10px 8px; }

  /* Add scrollbar hint shadow on tables */
  .table-responsive {
    box-shadow: inset -8px 0 8px -4px rgba(0,0,0,.08);
  }

  /* Page header: stack title + button vertically */
  .page-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: flex-start;
  }
  .page-header > *:last-child { align-self: stretch; }
  .page-header .btn { width: 100%; justify-content: center; }

  /* Card gap between cards (reduce on small screens) */
  .card { margin-bottom: var(--spacing-md); }

  /* Modal: slide up from bottom on mobile */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    max-height: 85vh;
    max-width: 100% !important;
    margin: 0 !important;
    padding-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom));
  }

  /* Confirm modal: still centered on mobile (small box) */
  .confirm-overlay { align-items: center; padding: var(--spacing-md); }

  /* Form groups: a bit more breathing room */
  .form-group { margin-bottom: var(--spacing-md); }
}

/* ============================================
   Bottom tab bar safe area (bottom-tab-bar
   already handles padding-bottom with env(),
   but ensure bottom-tab-bar itself is safe)
   ============================================ */
.bottom-tab-bar {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ============================================
   .modal-backdrop — legacy modal pattern
   Used in clients, band-info, equipment, quotation pages.
   Provides position:fixed overlay when JS sets display:flex.
   ============================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: var(--z-modal-backdrop, 1040);
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md, 16px);
  overflow-y: auto;
}
/* Shown by JS: element.style.display = 'flex' or .show class */
.modal-backdrop[style*="flex"],
.modal-backdrop.show {
  display: flex !important;
}
/* Inner panel */
.modal-backdrop > .modal {
  background: var(--premium-white, #fff);
  border-radius: var(--radius-xl, 24px);
  box-shadow: var(--shadow-2xl, 0 20px 40px rgba(0,0,0,.35));
  width: 100%;
  padding: var(--spacing-xl, 32px);
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ============================================
   Touch devices: reveal hidden card-action
   buttons that rely on :hover (opacity:0 default)
   ============================================ */
@media (hover: none) {
  /* band-info.html — member card edit/delete */
  .card-actions { opacity: 1 !important; }
  /* clients.html — client card edit button */
  .card-edit-btn { opacity: 1 !important; }
  /* songs.html — action buttons already handled inline */
}

/* ============================================
   Mobile modals — slide up from bottom
   ============================================ */
@media (max-width: 600px) {
  /* .modal-overlay (theme.css modal) */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    max-height: 85vh;
    max-width: 100% !important;
    margin: 0 !important;
    padding-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom));
  }
  /* .modal-backdrop (legacy) */
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .modal-backdrop > .modal {
    border-radius: var(--radius-xl, 24px) var(--radius-xl, 24px) 0 0 !important;
    max-width: 100% !important;
    max-height: 85vh;
    padding-bottom: calc(var(--spacing-xl, 32px) + env(safe-area-inset-bottom));
  }
  /* Stack any 2-col inline grid inside modal to 1 column */
  .modal-backdrop [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}