/* ── Portal mobile layout ────────────────────────────────────────────────────────
   Phone and tablet rules for the therapist portal (therapist/includes/header.php loads it).
   The admin panel can opt in later by linking the same file; nothing here is admin-specific.

   Desktop (>= 1200px) is left untouched: every rule sits inside a max-width media query.
   Selectors start with `body` because therapist/includes/header.php has an inline <style>
   block after this link, and equal specificity would lose to it. */

/* ── Sidebar as a drawer (below 1200px the sidebar is off-canvas) ─────────────── */
@media (max-width: 1199.98px) {
  body .sidebar {
    width: min(86vw, 300px);
    left: calc(-1 * min(86vw, 300px));
    padding: 12px 10px;
    box-shadow: none;
  }

  body.toggle-sidebar .sidebar {
    left: 0;
    box-shadow: 0 18px 44px rgba(31, 43, 26, .22);
  }

  /* Dim the page behind the open drawer. The click that closes it is in includes/footer.php. */
  body.toggle-sidebar::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 995;
    background: rgba(31, 43, 26, .45);
  }

  body.toggle-sidebar {
    overflow: hidden;
  }

  /* Bigger tap targets in the drawer */
  body .sidebar .nav-link {
    padding: 11px 12px;
    font-size: 14.5px;
  }

  body .sidebar .nav-content .nav-link {
    padding: 9px 12px;
  }
}

/* ── Page frame ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  body #main {
    padding: 14px 12px;
  }

  body .pagetitle {
    margin-bottom: 12px;
  }

  body .pagetitle h1 {
    font-size: 20px;
  }

  body .card {
    margin-bottom: 14px;
  }

  body .card-body {
    padding: 16px 14px;
  }

  body .card-title {
    font-size: 16px;
    padding: 14px 0 8px 0;
  }

  /* Nothing should push the page sideways */
  body #main,
  body #main .card,
  body #main .row {
    max-width: 100%;
  }

  body #main img {
    max-width: 100%;
  }
}

/* ── Forms and buttons ───────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* 16px keeps iOS from zooming in when a field is focused */
  body #main .form-control,
  body #main .form-select,
  body #main input,
  body #main textarea,
  body #main select {
    font-size: 16px;
  }

  body #main .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  body #main .btn-sm {
    min-height: 36px;
  }

  /* Rows of buttons wrap instead of running off the screen */
  body #main .d-flex.gap-2,
  body #main .btn-group,
  body #main .pm-btn-row {
    flex-wrap: wrap;
  }
}

/* ── Tables become cards on phones ───────────────────────────────────────────────
   The portal's list tables (.patients_table) are 5-6 columns wide, which no phone can
   show. Each row turns into a card and every cell prints its column name from
   data-label, so nothing is guessed from position. Cells without a data-label (action
   buttons) just stack. */
@media (max-width: 767.98px) {
  body .table.patients_table,
  body .table.patients_table tbody,
  body .table.patients_table tr,
  body .table.patients_table td {
    display: block;
    width: 100%;
  }

  body .table.patients_table thead {
    display: none;
  }

  body .table.patients_table tr {
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid #e6ece3;
    border-radius: 12px;
    background: #fff;
  }

  body .table.patients_table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border: 0;
    border-top: 1px solid #f1f4ef;
    text-align: left;
    white-space: normal;
    word-break: break-word;
  }

  body .table.patients_table td:first-child {
    border-top: 0;
    padding-top: 0;
  }

  body .table.patients_table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 38%;
    color: #6b7c72;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding-top: 2px;
  }

  body .table.patients_table td > * {
    min-width: 0;
  }

  body .table.patients_table td textarea {
    width: 100%;
    min-height: 62px;
    resize: vertical;
  }

  /* The action cell: full-width buttons under each other */
  body .table.patients_table td.pm-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body .table.patients_table td.pm-actions::before {
    flex: none;
    padding-bottom: 2px;
  }

  body .table.patients_table td.pm-actions .btn,
  body .table.patients_table td.pm-actions .dropdown {
    width: 100%;
  }

  body .table.patients_table td.pm-actions .dropdown .btn {
    width: 100%;
  }

  /* Patient name cell reads as the card's heading */
  body .table.patients_table td.pm-title {
    font-size: 15px;
    font-weight: 700;
    color: #173b29;
  }

  body .table.patients_table td.pm-title::before {
    display: none;
  }

  /* Any other table in the portal at least scrolls instead of stretching the page */
  body #main .table:not(.patients_table) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ── Modals ──────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  body .modal-dialog {
    margin: 10px;
  }

  body .modal-dialog.modal-lg,
  body .modal-dialog.modal-xl {
    max-width: none;
  }

  body .modal-body {
    padding: 14px;
  }

  body .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  body .modal-footer .btn {
    flex: 1 1 auto;
  }
}

/* ── Single-patient chat pages (/chat/<id>, /newchat/<id>) ───────────────────────
   style.css gives the message area a fixed 35rem and the input box 100px, which is
   taller than a phone screen. The inbox page (/chat-inbox) builds its own flex
   layout, so its message area is left alone. */
@media (max-width: 767.98px) {
  body #main .chat_messages_wap:not(.chat-right-messages) {
    height: 58vh;
    padding: 12px;
  }

  body #main .chat_input_wap:not(.chat-right-input) {
    padding: 10px 0;
  }

  body #main .chat_input_wap:not(.chat-right-input) .chat_input_msg {
    height: 64px;
    padding: 10px 46px 10px 30px;
  }

  body #main .single_chat {
    max-width: 92%;
  }
}

/* ── Small things that overflow on a phone ───────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Filter tabs scroll sideways instead of wrapping into a tall block */
  body #main .tabs-custom {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  body #main .tabs-custom::-webkit-scrollbar {
    display: none;
  }

  body #main .tabs-custom .btn-custon-tab {
    flex: 0 0 auto;
  }

  /* A dropdown opened near the right edge stays inside the screen */
  body .dropdown-menu {
    max-width: calc(100vw - 24px);
  }

  /* Notification and profile menus from the header */
  body .header-nav .notifications,
  body .header-nav .profile .dropdown-menu {
    max-width: calc(100vw - 20px);
    white-space: normal;
  }
}

/* ── Session notes ────────────────────────────────────────────────────────────
   "Back to Dashboard" is pinned to the bottom of the left column on desktop. On a
   phone that column is short, so the link would sit on top of the conversation
   list; here it simply follows the list. */
@media (max-width: 991.98px) {
  body #main .col-12.position-relative > .position-absolute.bottom-0 {
    position: static !important;
    padding: 0 0 4px 0 !important;
  }

  body #main .chat-conversations_wap {
    padding-bottom: 0 !important;
    margin-bottom: 10px !important;
    height: auto !important;
  }

  body #main .chat_conversations_list {
    max-height: 320px !important;
  }
}

/* ── Calendar (My Availability, Schedule a Session) ──────────────────────────── */
@media (max-width: 575.98px) {
  /* The vendor sheet drops the day cells to 35px, which is too small to tap and
     leaves no room for the marked-hours badge. */
  body #main .calendar #days .day {
    height: 46px;
    width: 13.4%;
    font-size: 13px;
  }

  body #main .calendar .weekdays > div {
    font-size: 11px;
  }

  body #main .confirm-btn,
  body #main .event-time {
    height: 46px;
  }
}

/* ── No sideways scrolling ───────────────────────────────────────────────────────
   A few widgets (the dashboard chart above all) render wider than a phone screen,
   which leaves an empty strip down the right of every page and lets the whole page
   slide sideways. Keep the page inside the screen and let those widgets shrink. */
@media (max-width: 1199.98px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  body #main,
  body #footer {
    overflow-x: hidden;
  }

  body #main .apexcharts-canvas,
  body #main .apexcharts-canvas svg,
  body #main .dataTable-wrapper,
  body #main .dataTable-container {
    max-width: 100% !important;
  }
}