/* parent-mobile.css
 * Small-screen layout for the parent pages only (loaded from the root header.php,
 * not from admin/). Desktop layout is unchanged: every rule is inside a media query.
 */

/* Phones and small tablets (Bootstrap "sm" and below) */
@media (max-width: 767.98px) {

  /* Booking grid: scroll sideways inside the page instead of overflowing it */
  .booking-scroll {
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  .booking-scroll #booking_tbl {
    margin-bottom: 0;
  }

  .booking-scroll #booking_tbl td {
    width: auto;
    min-width: 110px;
    padding: .4rem;
    vertical-align: middle;
  }

  /* Keep the time column pinned while scrolling through teachers */
  .booking-scroll #booking_tbl tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: auto !important;
    min-width: 88px;
    background-color: #fff;
    box-shadow: 1px 0 0 #dee2e6;
    font-size: .8rem;
    font-weight: 600;
  }

  /* Match the striped row colour on the pinned cell */
  .booking-scroll #booking_tbl.table-striped tbody tr:nth-of-type(odd) > td:first-child {
    background-color: #f2f2f2;
  }
}

/* Phones */
@media (max-width: 575.98px) {

  /* Header: smaller logo and title so content is visible without scrolling */
  .pricing-header {
    padding: .5rem 1rem !important;
  }

  .pricing-header h1.display-4 {
    font-size: 1.75rem;
  }

  .pricing-header h1.display-4 img {
    width: 44px;
    height: 44px;
  }

  /* Less nested padding so cards and tables get the screen width */
  .container-fluid {
    padding-left: 8px;
    padding-right: 8px;
  }

  .card-header,
  .card-body {
    padding: .75rem;
  }

  /* Child switcher: one swipeable row of tabs instead of a tall stacked list */
  .student-navbar {
    padding: .25rem .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .student-navbar .navbar-nav {
    flex-wrap: nowrap;
  }

  .student-navbar .nav-link {
    white-space: nowrap;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  .student-navbar .nav-item.active .nav-link {
    border-bottom: 2px solid #fff;
  }

  /* Appointment list page */
  .appointments_card h4 {
    font-size: 1.25rem;
  }

  .appointments_card #add_appointment {
    width: 100%;
    padding: .5rem;
  }

  .appointments_card .table td,
  .appointments_card .table th {
    font-size: .85rem;
    padding: .5rem;
  }

  .appointments_card .table td:first-child {
    white-space: nowrap;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Booking page: conference date line and grid text */
  .main-container > .row {
    margin: 8px 0 !important;
    font-size: 1rem !important;
  }

  .booking-scroll #booking_tbl {
    font-size: .85rem;
  }

  span#teacher_courses {
    font-size: 12px;
  }

  .booking-scroll .booking_btn {
    padding: .35rem .5rem;
    font-size: .8rem;
    min-width: 80px;
  }

  /* Dashboard child cards: space between stacked cards */
  .row > [class*="col-"] > .card {
    margin-bottom: 1rem;
  }
}