/* =========================================================
   VYO Mobile Stability Layer
   Ziel:
   - kein horizontales Abschneiden
   - bessere Navbar auf Handy
   - bessere Modals auf Handy
   - Friends/Settings Overlay mobil bedienbar
   ========================================================= */

/* ---------- Global: horizontales Herausrutschen eindämmen ---------- */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

.container,
.container-fluid,
.row,
[class^="col-"],
[class*=" col-"] {
  min-width: 0;
}

main.container {
  max-width: 100%;
}

/* lange Wörter, URLs, Nutzernamen, Shopnamen dürfen nicht rausdrücken */
.card,
.modal-content,
.list-group-item,
.dropdown-item,
.alert,
.vyo-glass,
.vyo-card,
.vyo-shop-headcard {
  overflow-wrap: anywhere;
}

/* Bootstrap Rows dürfen auf kleinen Screens nicht seitlich drücken */
@media (max-width: 575.98px) {
  .container,
  main.container {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .row {
    --bs-gutter-x: 1rem;
  }
}

/* ---------- Navbar: Mobile ---------- */
@media (max-width: 991.98px) {
  #mainNavbar {
    margin-bottom: 1rem !important;
  }

  #mainNavbar .container-fluid {
    min-width: 0;
  }

  #mainNavbar .navbar-brand {
    max-width: calc(100vw - 96px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.12rem !important;
    min-width: 0;
  }

  #navbarNav {
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  /* Desktop-Abstand darf mobil nicht wirken */
  .navbar-nav.me-auto .nav-link-animated:first-child {
    margin-left: 0 !important;
  }

  #mainNavbar .navbar-nav,
  #mainNavbar .nav-item {
    width: 100%;
    min-width: 0;
  }

  #mainNavbar .nav-link,
  #mainNavbar .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  #mainNavbar .dropdown-menu {
    position: static !important;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    margin: 0.25rem 0 0.5rem;
    border-radius: 14px;
    box-shadow: none;
  }

  #userMenu {
    max-width: 100%;
    min-width: 0;
  }

  #navUsername {
    min-width: 0;
    max-width: calc(100vw - 140px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .theme-toggle {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
}

/* ---------- Navbar-Suche ---------- */
@media (max-width: 991.98px) {
  .nav-search {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #navSearchInput {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  #navSearchDropdown.bottomsheet {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(var(--vyo-bottombar-h, 0px) + 8px) !important;
    width: auto !important;
    max-height: min(70dvh, 520px);
    border-radius: 18px;
  }

  #navSearchDropdown .list-group-item {
    white-space: normal !important;
    align-items: flex-start;
  }

  #navSearchDropdown .list-group-item > .d-flex {
    min-width: 0;
    gap: 0.5rem;
  }

  #navSearchDropdown small {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
  }
}

/* ---------- Allgemeine Mobile-Modals ---------- */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100vw - 1rem) !important;
  }

  .modal-content {
    max-width: 100%;
    border-radius: 18px;
  }

  .modal-header {
    gap: 0.75rem;
  }

  .modal-title {
    font-size: 1rem;
    line-height: 1.25;
  }

  .modal-body {
    overflow-x: hidden;
  }

  .modal-footer {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem;
  }

  .modal-footer > div {
    width: 100%;
    display: grid;
    gap: 0.5rem;
  }

  .modal-footer .btn {
    width: 100%;
  }
}

/* ---------- Globaler Filter mobil als Fullscreen-Sheet ---------- */
@media (max-width: 767.98px) {
  #globalFilterModal .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    height: 100dvh;
  }

  #globalFilterModal .modal-content {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  #globalFilterModal form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  #globalFilterModal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
  }

  #globalFilterModal .modal-footer {
    flex: 0 0 auto;
    padding: 0.75rem;
  }

  #globalFilterModal .row > [class^="col-"],
  #globalFilterModal .row > [class*=" col-"] {
    width: 100%;
  }

  #singleCritMenu {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #topicRows .row > [class^="col-"],
  #topicRows .row > [class*=" col-"] {
    width: 100%;
  }

  .vyo-filter-modal .dropdown-menu {
    max-width: 100%;
  }

  #entitySuggest {
    max-width: 100%;
  }
}

/* ---------- Settings Modal mobil ---------- */
@media (max-width: 767.98px) {
  #settingsModal .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    height: 100dvh;
  }

  #settingsModal .modal-content {
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  #settingsModal .modal-body {
    padding: 0.75rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #settingsModal #settingsForm {
    min-height: auto;
  }

  #settingsModal .settings-layout {
    height: auto !important;
    min-height: 0;
    flex-direction: column;
    gap: 0.75rem;
  }

  #settingsModal .settings-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--set-border, rgba(255,255,255,.12));
    padding-right: 0 !important;
    padding-bottom: 0.6rem;
    overflow-x: auto;
    overflow-y: hidden;
  }

  #settingsModal .settings-sidebar .nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    gap: 0.4rem;
  }

  #settingsModal .settings-sidebar .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.55rem 0.75rem;
  }

  #settingsModal .settings-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  #settingsModal .vyo-set-stack {
    max-width: 100%;
  }

  #settingsModal .vyo-set-panehead {
    flex-direction: column;
    align-items: flex-start;
  }

  #settingsModal .card-body {
    padding: 0.9rem;
  }

  .badge-vis-list .settings-badge-row {
    flex-direction: column;
    align-items: flex-start;
  }

  #settingsModal .input-group {
    min-width: 0;
  }

  #settingsModal .input-group > .form-control {
    min-width: 0;
  }
}

/* ---------- Friends Overlay mobil ---------- */
@media (max-width: 767.98px) {
  #friendsOverlayModal .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    height: 100dvh;
  }

  #friendsOverlayModal .modal-content {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  #friendsOverlayModal .modal-body {
    overflow: auto;
  }

  #friendsOverlayBody {
    padding: 0.75rem !important;
  }

  .vyo-overlay-modal .modal-dialog {
    max-width: 100% !important;
  }

  .vyo-friends-layout {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .vyo-friends-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .vyo-friends-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }

  .vyo-friends-tabs .nav-link {
    flex: 0 0 auto;
    padding: 0.45rem 0.65rem;
  }

  .vyo-friends-main {
    overflow: hidden !important;
    min-width: 0;
  }

  #tabInbox .list-group-item,
  .vyo-friend-row,
  .vyo-group-row,
  .vyo-recent-list .list-group-item {
    min-width: 0;
  }

  #tabInbox .vyo-inbox-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #dmMessages.vyo-chat-scroller .vyo-msg,
  #groupMessages.vyo-chat-scroller .vyo-msg {
    max-width: 88%;
  }

  #dmModal .modal-dialog,
  #groupModal .modal-dialog,
  #groupManageModal .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100vw - 1rem) !important;
  }

  .vyo-dm-footer .input-group {
    flex-wrap: nowrap;
  }

  .vyo-dm-footer .form-control {
    min-width: 0;
  }

  .vyo-dm-footer .btn {
    flex: 0 0 auto;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }
}

/* ---------- Landing / Home zusätzliche Absicherung ---------- */
@media (max-width: 767.98px) {
  .is-landing-page .vyo-search-row {
    max-width: 100%;
  }

  .is-landing-page .vyo-query,
  .is-landing-page .vyo-radius,
  .is-landing-page .vyo-cta {
    min-width: 0 !important;
    max-width: 100%;
  }

  .is-landing-page .vyo-pill,
  .is-landing-page .vyo-chip,
  .vyo-chip {
    max-width: 100%;
  }
}

/* ---------- Full-bleed Bereiche sicherer machen ---------- */
@media (max-width: 767.98px) {
  .vyo-bleed,
  .vyo-shopprofile-shell {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---------- Tabellen/Listen: nicht die ganze Seite sprengen ---------- */
.table-responsive {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 575.98px) {
  table {
    max-width: 100%;
  }

  .table {
    font-size: 0.9rem;
  }
}

/* =========================================================
   Landing Search Mobile Layout v6
   Fix:
   - Kategorie/Shop volle Breite
   - Stecknadel + Manuell breiter
   - Radius schmaler
   - CTA volle Breite
   ========================================================= */

@media (max-width: 991.98px){
  body.is-landing-page .vyo-search-wrap,
  .vyo-lp .vyo-search-wrap{
    width: 100% !important;
    max-width: 100% !important;
  }

  body.is-landing-page .vyo-search-card,
  .vyo-lp .vyo-search-card{
    width: 100% !important;
    max-width: 100% !important;
    padding: .85rem !important;
    overflow: hidden !important;
  }

  body.is-landing-page .vyo-search-card .vyo-search-row,
  .vyo-lp .vyo-search-card .vyo-search-row{
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) 90px !important;
    gap: .65rem !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.is-landing-page .vyo-search-card .vyo-query,
  .vyo-lp .vyo-search-card .vyo-query{
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;
  }

  body.is-landing-page .vyo-search-card .vyo-geo-actions,
  .vyo-lp .vyo-search-card .vyo-geo-actions{
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) !important;
    gap: .65rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.is-landing-page .vyo-search-card .vyo-locbtn,
  .vyo-lp .vyo-search-card .vyo-locbtn{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    font-size: 1.18rem !important;
  }

  body.is-landing-page .vyo-search-card .vyo-manualbtn,
  .vyo-lp .vyo-search-card .vyo-manualbtn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 .55rem !important;
    border-radius: 16px !important;
    font-size: .88rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.is-landing-page .vyo-search-card .vyo-radius,
  .vyo-lp .vyo-search-card .vyo-radius{
    grid-column: 3 !important;
    grid-row: 2 !important;
    width: 90px !important;
    min-width: 0 !important;
    max-width: 90px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding-left: .35rem !important;
    padding-right: .35rem !important;
    text-align: center !important;
    font-size: .82rem !important;
  }

  body.is-landing-page .vyo-search-card .vyo-cta,
  .vyo-lp .vyo-search-card .vyo-cta{
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
  }
}

@media (max-width: 430px){
  body.is-landing-page .vyo-search-card .vyo-search-row,
  .vyo-lp .vyo-search-card .vyo-search-row{
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) 82px !important;
    gap: .58rem !important;
  }

  body.is-landing-page .vyo-search-card .vyo-geo-actions,
  .vyo-lp .vyo-search-card .vyo-geo-actions{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) !important;
    gap: .58rem !important;
  }

  body.is-landing-page .vyo-search-card .vyo-radius,
  .vyo-lp .vyo-search-card .vyo-radius{
    width: 82px !important;
    max-width: 82px !important;
    font-size: .78rem !important;
    padding-left: .25rem !important;
    padding-right: .25rem !important;
  }

  body.is-landing-page .vyo-search-card .vyo-manualbtn,
  .vyo-lp .vyo-search-card .vyo-manualbtn{
    font-size: .82rem !important;
    padding-left: .35rem !important;
    padding-right: .35rem !important;
  }
}