/* ==========================================================
   BuddySocial v10.43 - MOBILE/TABLET FINAL POLISH
   Alleen <= 1100px.
   Ondermenu + algemene mobiele/tablet afwerking.
   ========================================================== */

@media (max-width:1100px){

  :root{
    --bs-m-blue:#2f6fa8;
    --bs-m-blue-dark:#245983;
    --bs-m-blue-light:#eaf5fb;
    --bs-m-border:#bcd5e4;
    --bs-m-orange:#f39a13;
    --bs-m-orange-soft:#fff2d2;
    --bs-m-text:#23455e;
    --bs-m-muted:#6f8494;
    --bs-m-surface:rgba(255,255,255,.97);
  }

  /* ---------- Entire mobile/tablet shell ---------- */
  .retro-wrap,
  .retro-content,
  main,
  .page-shell,
  .public-profile-shell,
  .classic-profile-bg,
  .pimp-page,
  .settings-page-v781{
    max-width:100% !important;
    min-width:0 !important;
  }

  .retro-content{
    padding-top:10px !important;
    padding-bottom:14px !important;
  }

  /* ---------- Main mobile menu ---------- */
  .nav-toggle{
    border-radius:14px !important;
    background:linear-gradient(180deg,#5598cf 0%,#367ab2 58%,#28669f 100%) !important;
    border-color:#8db5d1 !important;
    box-shadow:
      0 8px 18px rgba(33,78,115,.16),
      inset 0 1px 0 rgba(255,255,255,.25) !important;
  }

  .main-nav-links{
    border-radius:16px !important;
    border:1px solid var(--bs-m-border) !important;
    background:
      linear-gradient(180deg,rgba(250,253,255,.99),rgba(239,247,252,.99)) !important;
    box-shadow:0 14px 30px rgba(31,76,111,.14) !important;
  }

  /* ---------- Under menu / Meer ---------- */
  .nav-more{
    border:0 !important;
    background:transparent !important;
  }

  .nav-more > summary{
    position:relative !important;
    min-height:50px !important;
    padding:0 13px !important;
    border:1px solid #c5dbe8 !important;
    border-radius:12px !important;
    background:linear-gradient(180deg,#ffffff,#f3f8fc) !important;
    box-shadow:0 2px 7px rgba(42,88,119,.05) !important;
  }

  .nav-more[open] > summary{
    border-color:#8fb9d5 !important;
    background:linear-gradient(180deg,#eef8fd,#dceef8) !important;
    color:#20577d !important;
  }

  .nav-more-menu{
    position:relative !important;
    margin-top:8px !important;
    padding:10px !important;
    border:1px solid #c9ddea !important;
    border-radius:13px !important;
    background:linear-gradient(180deg,#f9fcfe,#eef6fa) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85) !important;
  }

  .nav-more-menu::before{
    content:"Meer onderdelen" !important;
    grid-column:1/-1 !important;
    display:block !important;
    margin:0 0 2px !important;
    color:#688094 !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
  }

  .nav-more-menu a{
    min-height:46px !important;
    padding:0 12px !important;
    border-radius:11px !important;
    border:1px solid #cfdfeb !important;
    background:#fff !important;
    color:var(--bs-m-text) !important;
    -webkit-text-fill-color:var(--bs-m-text) !important;
    box-shadow:0 2px 6px rgba(41,83,111,.04) !important;
  }

  .nav-more-menu a.active,
  .nav-more-menu a:hover{
    border-color:#e2b75c !important;
    background:linear-gradient(180deg,#fffaf0,#ffefc7) !important;
    color:#684a08 !important;
    -webkit-text-fill-color:#684a08 !important;
  }

  /* ---------- My account sub menu ---------- */
  .nav-utilities{
    margin-top:2px !important;
    padding-top:2px !important;
  }

  .nav-status-control,
  .nav-utilities > .utility-link,
  .notification-nav-wrap > .utility-link,
  .nav-sound-toggle{
    border-radius:12px !important;
  }

  .mobile-menu-account-actions{
    grid-column:1/-1 !important;
    padding:10px !important;
    border:1px solid #c9ddea !important;
    border-radius:13px !important;
    background:linear-gradient(180deg,#f8fcfe,#edf6fb) !important;
  }

  .mobile-menu-account-actions::before{
    content:"Snelle acties" !important;
    grid-column:1/-1 !important;
    color:#688094 !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
  }

  .mobile-menu-account-actions a{
    min-height:45px !important;
    border-radius:10px !important;
    border:1px solid #cbdfea !important;
    background:#fff !important;
    color:var(--bs-m-text) !important;
    -webkit-text-fill-color:var(--bs-m-text) !important;
  }

  .mobile-menu-account-actions a:last-child{
    color:#8d3e35 !important;
    -webkit-text-fill-color:#8d3e35 !important;
    background:#fff7f5 !important;
    border-color:#e5c1bc !important;
  }

  /* ---------- Notification sub menu ---------- */
  .notification-dropdown{
    overflow:hidden !important;
    border-radius:13px !important;
    border-color:#bfd7e6 !important;
  }

  .notification-dropdown-head{
    background:linear-gradient(180deg,#edf7fc,#dcecf6) !important;
  }

  .notification-dropdown-item.is-unread{
    background:#fffaf0 !important;
  }

  .notification-dropdown-item:hover{
    background:#f4f9fc !important;
  }

  /* ---------- Search block ---------- */
  .retro-search{
    grid-column:1/-1 !important;
    padding:10px !important;
    border:1px solid #c9ddea !important;
    border-radius:13px !important;
    background:#f8fcfe !important;
  }

  .retro-search input{
    border-radius:10px !important;
    border-color:#bdd4e3 !important;
    box-shadow:inset 0 1px 2px rgba(28,66,91,.04) !important;
  }

  .retro-search button{
    border-radius:10px !important;
  }

  /* ---------- Secondary page tabs / subnavigation ---------- */
  .profile-tabs,
  .info-tabs,
  .pimp-tabs,
  .admin-tabbar,
  .settings-nav{
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:thin !important;
    overscroll-behavior-x:contain !important;
  }

  .profile-tabs a,
  .info-tabs a,
  .settings-nav a{
    flex:0 0 auto !important;
    min-height:38px !important;
    padding:0 11px !important;
    border-radius:9px !important;
  }

  /* ---------- Site cards: same polished rhythm as desktop ---------- */
  body:not([data-page="profile"]) .retro-box,
  body:not([data-page="profile"]) .pimp-setting-card,
  body:not([data-page="profile"]) .settings-account-summary,
  body:not([data-page="profile"]) .player-studio-card{
    border-radius:12px !important;
    border-color:#c3d9e6 !important;
    box-shadow:0 5px 14px rgba(32,78,108,.06) !important;
  }

  .retro-box-title{
    min-height:38px !important;
    padding:7px 11px !important;
    background:linear-gradient(180deg,#dcecf7,#cde2f0) !important;
    color:#285d80 !important;
    border-bottom-color:#b9d1e1 !important;
  }

  .retro-pad{
    padding:11px !important;
  }

  /* ---------- Buttons ---------- */
  .blue-btn,
  .orange-btn,
  .light-btn{
    border-radius:9px !important;
    min-height:36px !important;
  }

  .blue-btn{
    background:linear-gradient(180deg,#4e94c8,#2f6fa8) !important;
  }

  .orange-btn{
    background:linear-gradient(180deg,#ffb32f,#ed900b) !important;
  }

  /* ---------- Forms ---------- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea{
    max-width:100% !important;
    border-radius:9px !important;
  }

  /* ---------- Tables / long content ---------- */
  table{
    max-width:100% !important;
  }

  .table-wrap,
  .retro-table-wrap{
    width:100% !important;
    overflow-x:auto !important;
  }

  /* ---------- Images/cards never push layout ---------- */
  .photo-grid,
  .friends-grid,
  .album-grid,
  .member-grid{
    max-width:100% !important;
  }

  /* ---------- Footer ---------- */
  .retro-footer{
    margin-top:14px !important;
  }

  .retro-footerin{
    gap:8px !important;
    padding:12px !important;
  }
}

/* ==========================================================
   TABLET polish
   ========================================================== */
@media (min-width:701px) and (max-width:1100px){

  .main-nav-links{
    padding:13px !important;
  }

  .nav-primary,
  .nav-utilities{
    gap:9px !important;
  }

  .nav-more-menu{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .mobile-menu-account-actions{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .mobile-menu-account-actions a:last-child{
    grid-column:auto !important;
  }

  .retro-content{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .retro-box-title{
    font-size:12px !important;
  }
}

/* ==========================================================
   MOBILE polish
   ========================================================== */
@media (max-width:700px){

  .main-nav-links{
    padding:9px !important;
  }

  .nav-primary,
  .nav-utilities{
    gap:7px !important;
  }

  .nav-more-menu{
    grid-template-columns:1fr !important;
    padding:8px !important;
    gap:7px !important;
  }

  .mobile-menu-account-actions{
    grid-template-columns:1fr !important;
    padding:8px !important;
    gap:7px !important;
  }

  .retro-search{
    padding:8px !important;
    grid-template-columns:minmax(0,1fr) 72px !important;
    gap:7px !important;
  }

  .retro-search input,
  .retro-search button{
    min-height:44px !important;
  }

  .retro-content{
    padding-left:7px !important;
    padding-right:7px !important;
  }

  .retro-box-title{
    min-height:36px !important;
    font-size:11px !important;
  }

  .retro-pad{
    padding:9px !important;
  }

  .profile-tabs,
  .info-tabs,
  .settings-nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:5px !important;
    padding-bottom:4px !important;
  }
}

/* tiny phones */
@media (max-width:390px){
  .retro-search{
    grid-template-columns:1fr !important;
  }

  .retro-search button{
    width:100% !important;
  }
}