/* responsive.css - mobile / small-screen fixes shared by all pages (iPhone SE 375px and up) */

img, video { max-width: 100%; height: auto; }

/* Tables: scroll sideways inside their own box instead of breaking the page */
table { max-width: 100%; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 991.98px) {
  /* every data table scrolls horizontally on tablet/phone, even without a wrapper */
  table, .table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table th, table td { white-space: nowrap; }
  /* keep table cells that hold long text readable */
  table td.wrap, table th.wrap { white-space: normal; }

  /* cards/sections must never be wider than the screen */
  .card, .card-body, .top-selling, .section, section, .container, .container-fluid, .main, #main {
    max-width: 100% !important;
  }
  .top-selling { overflow-x: auto; }
  .main, #main { margin-left: 0 !important; padding: 15px 8px !important; }

  /* fixed-width boxes written inline (350px / 300px / 250px ...) */
  [style*="width:350px"], [style*="width: 350px"],
  [style*="width:300px"], [style*="width: 300px"],
  [style*="width:250px"], [style*="width: 250px"],
  [style*="width:400px"], [style*="width: 400px"],
  [style*="width:500px"], [style*="width: 500px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* side-by-side Bootstrap columns stack on phones (title row + Kozhikode/Malhar link) */
  .card-body .row > .col-6 { flex: 0 0 100%; max-width: 100%; }
  a[style*="padding-left:150px"], a[style*="padding-left: 150px"] { padding-left: 0 !important; }
  .card-body h4 { word-break: normal; overflow-wrap: break-word; }
}

@media (max-width: 767.98px) {
  /* Date filter row: date on its own line, Filter / All / Count share the next line */
  #bookingForm, form[id*="ooking"], form[id*="filter" i] {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  }
  #bookingForm input[type="date"], #selected_date, .form-controls {
    flex: 1 1 100%; width: 100% !important; max-width: 100%;
  }
  #bookingForm input[type="submit"], #bookingForm button, #bookingForm input[type="button"] {
    flex: 1 1 30%; width: auto !important; min-width: 70px; height: 38px !important;
  }

  /* any plain form control fills its box */
  .form-control, .input-field, input[type="text"], input[type="tel"],
  input[type="date"], input[type="number"], select, textarea {
    max-width: 100%;
  }

  /* pop-up windows (edit / reschedule / limits / time pickers) */
  .modal-content, .modal-dialog {
    width: 94% !important; max-width: 94% !important; margin: 10px auto !important;
  }
  .modal { padding-top: 20px; overflow-y: auto; }

  /* header bars / button rows wrap instead of overflowing */
  .header, .header-actions, .d-flex { flex-wrap: wrap; }
  .header { gap: 8px; padding: 10px 12px !important; }
  .header h2 { font-size: 18px; }
  button, .btn, input[type="submit"] { max-width: 100%; }

  /* big headings */
  h1 { font-size: 1.6rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.2rem; } h4 { font-size: 1.1rem; }
}

@media (max-width: 400px) {
  body { font-size: 14px; }
  table th, table td { padding: 6px 8px !important; font-size: 12px; }
  .card-body { padding-left: 10px !important; padding-right: 10px !important; }
  .btn, button { font-size: 13px; }
}