/* Wimmer Community V6.0 - Mobilfix
   Lægger sig ovenpå eksisterende design uden at ændre database eller funktioner. */

:root{
  --wc-mobile-top: 64px;
}

/* Generel sikkerhed mod vandret scroll */
html, body{
  max-width:100%;
  overflow-x:hidden;
}
*, *::before, *::after{
  box-sizing:border-box;
}
img, video, iframe{
  max-width:100%;
  height:auto;
}
table{
  max-width:100%;
}

/* Mobilknap skjult på desktop */
.wc-mobile-menu-btn,
.wc-mobile-backdrop{
  display:none;
}

/* Bedre tables på mindre skærme */
@media (max-width: 1100px){
  .table-wrap,
  .admin-table,
  .user-table,
  .super-table,
  .reports-table,
  .backup-table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  table{
    min-width:720px;
  }
}

/* Tablet */
@media (max-width: 980px){
  .app-shell{
    display:block !important;
    width:100% !important;
    min-height:100vh;
  }

  .app-stage{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .app-topbar{
    position:sticky;
    top:0;
    z-index:80;
    min-height:var(--wc-mobile-top);
    padding:10px 12px 10px 68px !important;
    gap:10px;
    backdrop-filter: blur(18px);
  }

  .top-search{
    min-width:0 !important;
    width:100% !important;
    flex:1 1 auto !important;
  }

  .top-search input{
    width:100% !important;
    min-width:0 !important;
  }

  .top-search kbd{
    display:none !important;
  }

  .top-actions{
    display:flex !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }

  .top-admin-btn{
    display:none !important;
  }

  .user-chip{
    display:none !important;
  }

  .layout{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:14px !important;
  }

  .card,
  .wc-settings-card,
  .verify-card,
  .va-card,
  .wc-rel-editor,
  .profile-hero,
  .post-card,
  .feed-card,
  .chat-card{
    width:100% !important;
    max-width:100% !important;
  }

  .super-grid,
  .stats-grid,
  .admin-grid,
  .launch-grid,
  .wc-settings-layout,
  .wc-settings-layout.forms,
  .wc-card-grid,
  .verify-grid,
  .va-row,
  .profile-layout,
  .feed-layout,
  .group-layout{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
  }

  .super-hero,
  .wc-settings-hero,
  .verify-hero,
  .va-hero,
  .wc-rel-top{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    text-align:left;
  }

  .wc-hero-actions,
  .verify-actions,
  .va-stats{
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }

  .two,
  .form-grid,
  .upload-row,
  .settings-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  input,
  textarea,
  select,
  button{
    max-width:100%;
  }

  textarea{
    min-height:110px;
  }

  .btn,
  .wc-btn,
  .verify-btn,
  .va-btn{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* Off-canvas sidebar */
  .wc-mobile-menu-btn{
    display:flex;
    position:fixed;
    top:12px;
    left:12px;
    z-index:220;
    width:46px;
    height:46px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:15px;
    background:rgba(5,14,24,.92);
    box-shadow:0 18px 45px rgba(0,0,0,.35);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    padding:0;
  }
  .wc-mobile-menu-btn span{
    display:block;
    width:22px;
    height:2px;
    border-radius:999px;
    background:#e9fff7;
    transition:.2s ease;
  }
  body.wc-menu-open .wc-mobile-menu-btn span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }
  body.wc-menu-open .wc-mobile-menu-btn span:nth-child(2){
    opacity:0;
  }
  body.wc-menu-open .wc-mobile-menu-btn span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  .wc-mobile-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:180;
    background:rgba(0,0,0,.58);
    backdrop-filter:blur(5px);
    opacity:0;
    pointer-events:none;
    transition:.18s ease;
  }
  body.wc-menu-open .wc-mobile-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  .app-sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:min(86vw, 340px) !important;
    max-width:340px !important;
    height:100vh !important;
    z-index:210 !important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    border-right:1px solid rgba(255,255,255,.10);
    box-shadow:22px 0 70px rgba(0,0,0,.45);
  }
  body.wc-menu-open .app-sidebar{
    transform:translateX(0);
  }

  .side-menu{
    display:grid !important;
    gap:7px !important;
  }

  .side-menu a{
    min-height:44px;
  }

  .side-card,
  .system-card{
    margin-bottom:10px;
  }
}

/* Telefon */
@media (max-width: 680px){
  body{
    font-size:15px;
  }

  .app-topbar{
    display:flex !important;
    align-items:center;
  }

  .top-actions{
    margin-left:auto;
  }

  .top-pill{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
  }

  .layout{
    padding:10px !important;
    gap:12px !important;
  }

  h1{
    font-size:clamp(24px, 8vw, 34px) !important;
    line-height:1.1 !important;
  }

  h2{
    font-size:clamp(20px, 6vw, 26px) !important;
  }

  .card,
  .wc-settings-card,
  .verify-card,
  .va-card{
    border-radius:18px !important;
    padding:14px !important;
  }

  .wc-settings-hero,
  .verify-hero,
  .va-hero,
  .super-hero{
    border-radius:20px !important;
    padding:16px !important;
  }

  .wc-settings-avatar img,
  .avatar.big{
    width:86px !important;
    height:86px !important;
  }

  .wc-mini-stats{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  .wc-mini-stats span{
    flex:1 1 calc(50% - 8px);
    min-width:130px;
  }

  .wc-menu-row{
    gap:10px !important;
    padding:13px !important;
  }

  .wc-menu-row .ico,
  .wc-card-grid a span{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
  }

  .wc-menu-row b{
    display:none;
  }

  .wc-card-grid{
    gap:10px !important;
  }

  .wc-card-grid a{
    min-height:84px;
  }

  .profile-hero,
  .wc-profile-hero{
    overflow:hidden;
  }

  .wc-profile-main{
    display:grid !important;
    grid-template-columns:1fr !important;
    text-align:center;
    justify-items:center;
  }

  .wc-profile-actions,
  .profile-actions,
  .post-actions,
  .comment-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  .wc-profile-actions a,
  .wc-profile-actions button,
  .profile-actions a,
  .profile-actions button{
    flex:1 1 auto;
  }

  /* Chat mere mobilvenlig */
  .chat-shell,
  .chat-layout,
  .messages-shell{
    display:grid !important;
    grid-template-columns:1fr !important;
    height:auto !important;
    min-height:0 !important;
  }

  .chat-users,
  .conversation-list{
    max-height:320px !important;
    overflow:auto !important;
  }

  .chat-window,
  .messages-panel{
    min-height:430px !important;
  }

  .message,
  .chat-message{
    max-width:92% !important;
  }

  .chat-compose,
  .message-form{
    position:sticky;
    bottom:0;
    z-index:30;
    background:rgba(5,13,22,.96);
    padding:10px;
    border-radius:16px;
  }

  /* Superadmin/bruger-tabeller */
  .va-row,
  .user-row,
  .admin-user-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .va-actions,
  .admin-actions{
    width:100% !important;
  }

  .va-form-row{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .va-actions textarea{
    min-height:90px;
  }

  /* Rejsekort */
  .travel-card{
    border-radius:18px !important;
    overflow:hidden !important;
  }
  .travel-img,
  .travel-card img{
    min-height:180px !important;
  }
  .travel-prices{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  .travel-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
}

/* Meget små telefoner */
@media (max-width: 420px){
  .layout{
    padding:8px !important;
  }

  .app-topbar{
    padding-left:62px !important;
  }

  .top-search span{
    display:none;
  }

  .top-search input{
    font-size:14px;
  }

  .top-pill:nth-child(n+3){
    display:none !important;
  }

  .btn,
  .wc-btn,
  .verify-btn,
  .va-btn,
  button{
    width:100%;
  }

  .wc-rel-savebar,
  .wc-about-savebar{
    grid-template-columns:1fr !important;
  }
}