/* ===== VoIPStarr Mobile Logo then Menu v1.7.4 ===== */

/* Hide all previous generated mobile menu controls */
.mobile-menu-toggle,
.mobile-drawer-close,
#vs-mobile-menu-button,#vs-mobile-menu-backdrop,#vs-mobile-menu-close,
#vs-final-menu-button,#vs-final-backdrop,#vs-final-close,
#vs-app-menu-button,#vs-app-backdrop,#vs-app-close,
#vs-clean-menu-btn,#vs-clean-backdrop,#vs-clean-close,
#vsmenu-button,#vsmenu-backdrop,#vsmenu-close,
#vs-top-menu,#vs-top-backdrop,#vs-top-close{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  width:0!important;
  height:0!important;
}

/* Desktop hidden */
#vs-mobile-header,
#vs-header-backdrop,
#vs-header-close{
  display:none;
}

@media(max-width:900px){
  html,body{
    margin:0!important;
    padding:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    background:#eef5ff!important;
  }

  /* Header: LOGO first, MENU second */
  #vs-mobile-header{
    display:flex!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:0!important;
    z-index:2147483000!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:8px!important;
    padding:calc(8px + env(safe-area-inset-top,0px)) 14px 10px!important;
    background:rgba(238,245,255,.96)!important;
    backdrop-filter:blur(8px)!important;
    box-sizing:border-box!important;
  }

  #vs-mobile-header .vs-mobile-logo{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:36px!important;
  }

  #vs-mobile-header .vs-mobile-logo img{
    display:block!important;
    max-width:165px!important;
    max-height:42px!important;
    width:auto!important;
    height:auto!important;
    margin:0 auto!important;
  }

  #vs-mobile-header .vs-mobile-menubar{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    width:100%!important;
    max-width:430px!important;
    height:46px!important;
    border:1px solid #dbe7f6!important;
    border-radius:15px!important;
    background:#10192f!important;
    color:#fff!important;
    box-shadow:0 10px 26px rgba(15,23,42,.16)!important;
    font-size:16px!important;
    font-weight:900!important;
    cursor:pointer!important;
    padding:0!important;
  }

  #vs-mobile-header .vs-mobile-menubar:before{
    content:"☰";
    font-size:22px;
    line-height:1;
  }

  body.vs-header-open #vs-mobile-header{
    display:none!important;
  }

  #vs-header-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:2147481000!important;
    background:rgba(7,14,30,.58)!important;
    backdrop-filter:blur(5px)!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .18s ease!important;
  }

  body.vs-header-open #vs-header-backdrop{
    opacity:1!important;
    pointer-events:auto!important;
  }

  .admin-sidebar,
  .sidebar,
  aside[class*="sidebar"]{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:min(86vw,390px)!important;
    max-width:min(86vw,390px)!important;
    min-width:0!important;
    height:100dvh!important;
    z-index:2147482000!important;
    transform:translateX(-110%)!important;
    transition:transform .2s ease!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding:calc(70px + env(safe-area-inset-top,0px)) 18px calc(18px + env(safe-area-inset-bottom,0px))!important;
    box-shadow:24px 0 60px rgba(15,23,42,.30)!important;
    border-radius:0 26px 26px 0!important;
    box-sizing:border-box!important;
  }

  body.vs-header-open .admin-sidebar,
  body.vs-header-open .sidebar,
  body.vs-header-open aside[class*="sidebar"]{
    transform:translateX(0)!important;
  }

  #vs-header-close{
    display:flex!important;
    position:absolute!important;
    right:16px!important;
    top:calc(14px + env(safe-area-inset-top,0px))!important;
    width:42px!important;
    height:42px!important;
    border:0!important;
    border-radius:14px!important;
    background:#10192f!important;
    color:#fff!important;
    font-size:30px!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
  }

  /* Sidebar logo stays centered */
  .admin-brand,.brand,.sidebar-logo{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    margin:0 auto 22px!important;
    width:100%!important;
    min-height:56px!important;
  }
  .admin-brand img,.brand img,.sidebar-logo img,.logo{
    max-width:185px!important;
    width:auto!important;
    height:auto!important;
    display:block!important;
    margin:0 auto!important;
  }

  .admin-nav,.sidebar nav,aside[class*="sidebar"] nav{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    width:100%!important;
  }
  .admin-nav a,.sidebar a,aside[class*="sidebar"] nav a{
    min-height:52px!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    padding:0 18px!important;
    border-radius:16px!important;
    font-size:16px!important;
    font-weight:850!important;
    text-decoration:none!important;
    box-sizing:border-box!important;
  }

  /* Content starts below logo+menubar */
  .admin-shell,.layout,.page-shell,.app-shell,body>.shell{
    display:block!important;
    margin:0!important;
    padding:0!important;
    min-height:0!important;
    height:auto!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
  }

  .admin-main,
  main.admin-main,
  main,
  .main,
  .content,
  .page-content{
    display:block!important;
    position:relative!important;
    margin:0!important;
    padding:calc(104px + env(safe-area-inset-top,0px)) 12px 24px!important;
    top:0!important;
    transform:none!important;
    min-height:0!important;
    height:auto!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .admin-main>*:first-child,
  main>*:first-child,
  .content>*:first-child,
  .page-content>*:first-child{
    margin-top:0!important;
  }

  .hero-card,.admin-header,.toolbar-card,.portal-hero,.hero{
    margin-top:0!important;
    margin-bottom:14px!important;
    top:0!important;
    transform:none!important;
    border-radius:22px!important;
    padding:20px 18px!important;
    min-height:auto!important;
  }

  /* Hide old standalone customer logo; header handles logo now */
  .vs-customer-mobile-logo{
    display:none!important;
  }

  /* Mobile search: existing form, clean stacked */
  .vs-clean-search-card{
    display:none!important;
  }

  .search-card form,
  .search-box,
  .search-form,
  .sim-search,
  form.search{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    margin-top:14px!important;
  }

  .search-card input,
  .search-box input,
  .search-form input,
  .sim-search input,
  form.search input,
  input[type="search"],
  input[name="q"]{
    width:100%!important;
    max-width:100%!important;
    height:54px!important;
    min-height:54px!important;
    border-radius:16px!important;
    padding:0 16px!important;
    box-sizing:border-box!important;
    margin:0!important;
    font-size:16px!important;
  }

  .search-card button,
  .search-box button,
  .search-form button,
  .sim-search button,
  form.search button{
    width:100%!important;
    max-width:100%!important;
    height:54px!important;
    min-height:54px!important;
    border-radius:16px!important;
    margin:0!important;
    box-sizing:border-box!important;
    font-size:16px!important;
    font-weight:900!important;
  }

  .search-card svg,.search-box svg,.search-form svg,.sim-search svg,
  .search-card .icon,.search-box .icon,.search-form .icon,.sim-search .icon{
    display:none!important;
  }

  .admin-usage-tiles,.stat-grid,.cards,.kpi-grid,.dashboard-cards,.portal-stats,.admin-summary-grid,.admin-dashboard-grid,.grid,.filter-grid,.preview-cards,.report-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .admin-usage-tile,.stat-card,.card,.panel{
    border-radius:22px!important;
    padding:16px!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .table-wrap,.clean-table,.data-table-wrap,.table-mobile-scroll{
    width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:18px!important;
  }
  table{min-width:680px!important}

  .pwa-install-tip{display:none!important}
}