/* ================================================================
   PlaylistMap mobile polish — 2026-07-13
   Additive, phone/tablet-scoped overrides. Desktop (>=768/1024px) untouched.
   Loaded site-wide via the frontend head partial.
   Sources: Claude live-viewport measurements + Codex ultra audit (15 findings).
   ================================================================ */

/* ---------------- Phones (<=576px) ---------------- */
@media (max-width: 576px) {

  /* Comfortable tap targets — footer + nav links were ~19px tall. */
  footer a, .footer a, .navbar-nav .nav-link {
    padding-top: 8px !important; padding-bottom: 8px !important; display: inline-block;
  }

  /* Browse GRID view: 2 cards per row instead of 1 full-width card. */
  .list-responsive [data-grid-id] { flex: 0 0 48% !important; max-width: 48% !important; padding-top: 1.25rem !important; }
  .list-responsive { justify-content: space-between !important; }

  /* Finger-friendly controls (>=44px): search clear, layout toggles, unlock, close X. */
  .text-cancel, .grid-layout, .list-layout,
  #main-search-table .open-modal, .list-responsive .unlock-button,
  .open-modal.rounded-circle, .ulock-btn.btn { min-width: 44px !important; min-height: 44px !important; }
  .mobile-nav-button { min-width: 44px; min-height: 44px; }
  .modal .btn, .modal .btn-sm { min-height: 44px; }
  .modal .btn-close, .modal .x-button,
  #paymentModal .modal-content > [data-dismiss="modal"] {
    width: 44px !important; height: 44px !important; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Break long search terms / emails / Instagram URLs so they never widen the page. */
  body.browse .card-header, body.search-guest .card-header { overflow-wrap: anywhere; word-break: break-word; }
  [id^="pld_"][id$="_modal"] .flex-1 { min-width: 0; }
  [id^="pld_"][id$="_modal"] .nav-link-card-details,
  [id^="pld_"][id$="_modal"] .nav-link-card-details a {
    max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word;
  }

  /* Constrain Spotify autocomplete dropdowns to the modal width. */
  #profile_modal .profile-spotify, #register_modal .spotify-list {
    left: .75rem !important; right: .75rem !important; width: auto !important; max-width: calc(100% - 1.5rem);
    max-height: 40dvh !important; overflow-x: hidden !important; overflow-y: auto !important;
  }

  /* Registration artist input keeps full width when the 200px image is hidden. */
  #register_modal .artist-wrapper input#artist-id { width: 100% !important; margin-right: 0 !important; }

  /* Payment modal: stack plan/price columns, scroll on short screens. */
  #paymentModal .monthly-yearly-wrapper { flex-wrap: wrap !important; justify-content: center !important; row-gap: .5rem; }
  #paymentModal .plan-details { flex-direction: column !important; gap: 1rem; }
  #paymentModal .plan-details > .col-6 { width: 100% !important; }
  #paymentModal .plan-price { text-align: center; }
  #paymentModal .yearly-plan-save { justify-content: center; flex-wrap: wrap; }
  #paymentModal .modal-content { max-height: calc(100dvh - 1rem); overflow-y: auto; }

  /* Confirm-unlock footer stacks at ~320px instead of crushing two buttons. */
  #unlock_playlist_modal form.d-flex.container { flex-direction: column !important; gap: .75rem; }
  #unlock_playlist_modal form > .w-25, #unlock_playlist_modal form > .w-75 {
    width: 100% !important; padding-right: 0 !important; text-align: center !important;
  }

  /* Reclaim space in the playlist-details modal + breathing room after results. */
  #staticBackdropLabel, .modal-body .bg-card-gradient .p-4 { padding: .75rem !important; }
  .modal-lg .modal-body .p-4 { padding: 1rem !important; }
  .list-responsive, .table-responsive { padding-bottom: 1.5rem !important; }

  /* Keep the results table from side-panning; ellipsize long playlist names. */
  body.browse .table-responsive, body.search-guest .table-responsive { overflow-x: hidden; padding-inline: .5rem; }
  #main-search-table #playlist_name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------------- Phones + small tablets (<=767.98px) ---------------- */
@media (max-width: 767.98px) {

  /* Security modal's inline 809px panel must fit the screen. */
  #security_modal .updatePassword > div:last-child { width: 100% !important; max-width: 100% !important; height: auto !important; }

  /* Subscription plan row stacks instead of a 5-across squeeze. */
  #subscription_modal .profile-plan { flex-direction: column !important; align-items: stretch !important; gap: .75rem; }
  #subscription_modal .profile-plan .thLetter { width: 100% !important; text-align: left; }
  #subscription_modal .profile-plan a, #subscription_modal .profile-plan button,
  #subscription_modal .desc_manage button { display: block; width: 100% !important; margin-left: 0 !important; float: none !important; }

  /* Full-screen modals: use dvh (survives mobile browser chrome/keyboard) + scroll. */
  #profile_modal .modal-dialog, #subscription_modal .modal-dialog,
  #security_modal .modal-dialog, #settings-modal .modal-dialog {
    width: 100%; max-width: none; min-height: 100dvh; margin: 0 !important;
  }
  #profile_modal .modal-content, #subscription_modal .modal-content,
  #security_modal .modal-content, #settings-modal .modal-content {
    height: 100dvh !important; max-height: 100dvh; border-radius: 0 !important;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  #profile_modal .modal-body, #subscription_modal .modal-body, #security_modal .modal-body {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }

  /* Auth bottom-sheet modals scroll instead of clipping tall content. */
  #login_modal .modal-content, #register_modal .modal-content,
  #forget_modal .modal-content, #reset_modal .modal-content { max-height: calc(100dvh - 1rem); }
  #login_modal .modal-body, #register_modal .modal-body,
  #forget_modal .modal-body, #reset_modal .modal-body { overflow-y: auto; }

  /* Guest search: reveal the header search box so no-result pages have a retry field. */
  body.search-guest .navbar-top { flex-wrap: wrap !important; }
  body.search-guest .navbar-top > .search-wrapper { display: block !important; order: 10; flex: 0 0 100%; width: 100% !important; }
  body.search-guest .navbar-top .searchform { display: block !important; width: 100%; }
  body.search-guest > header { height: auto !important; }
}

/* ---------------- Tablets (768–1024px) ---------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Upgrade / Create-Account CTA margins (m-md-5) overflowed the container at ~768px. */
  body.browse .alert.container, body.search-guest .alert.container {
    width: calc(100% - 2rem); max-width: none; margin: 1rem auto !important; padding: 1.5rem !important;
  }
}

/* ================================================================
   Pass 2 (2026-07-13): logged-in dashboard + message-generator
   (Codex-audited). Additive, phone/tablet-scoped.
   ================================================================ */
@media (max-width: 767.98px) {
  /* Account "Edit Password" panel had a fixed 809px width → horizontal scroll. */
  .updatePassword { width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
  .updatePassword > div:last-child { width: 100% !important; max-width: 100% !important; height: auto !important; min-width: 0; }
  .newDiv { padding: 16px !important; }

  /* Plan cards + "most popular" badge overlap when they stack. */
  #boxmobile, #boxmobile > .row { width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
  #boxmobile { padding-left: 12px; padding-right: 12px; }
  #popularplan { margin-top: 0 !important; }

  /* Message-generator: show template picker first, then composer, on phones. */
  body.generate-message .email-template { order: 1; }
  body.generate-message .composer-email { order: 2; }
}

@media (max-width: 576px) {
  /* Account menu card: fluid width, fix the 263px divider + avatar margin. */
  .profileModal { display: block !important; box-sizing: border-box; width: 100%; max-width: 100%; padding: 16px !important; }
  .profileModal > div[style*="263px"] { width: 100% !important; max-width: 100%; }
  .profileModal .profile-image { margin-left: 0 !important; max-width: 100%; }

  /* Subscription / plan buttons: strip stray margin/float so they don't overflow. */
  .profile-plan .btn, .manage-plan { margin-left: 0 !important; float: none !important; max-width: 100%; }

  /* Password Save/Cancel row stacks full-width. */
  .updatePassword #save { flex-direction: column; gap: 8px; }
  .updatePassword #save .btn { width: 100%; }

  /* Tap targets >=44px on message-generator + dashboard controls. */
  body.generate-message .head_text a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  body.generate-message .form-control,
  body.generate-message .copy-message-mobile,
  .updatePassword .btn, .cancel-plan { min-height: 44px; }
  body.generate-message .copy-message-mobile { width: 100%; }
  .cancel-plan { display: inline-flex; align-items: center; padding: 10px 12px; }

  /* My Playlists reuses the grid partial WITHOUT a .list-responsive wrapper,
     so broaden the 2-up phone grid to any playlist card. */
  [data-grid-id] { flex: 0 0 48% !important; max-width: 48% !important; }
}