/* ===== VoIPStarr Mobile App Friendly update v1.6.0 ===== */
:root{
  --mobile-sidebar-width:280px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-menu-toggle{
  display:none;
  position:fixed;
  left:14px;
  top:14px;
  z-index:10020;
  width:46px;
  height:46px;
  border:0;
  border-radius:15px;
  background:#0f172a;
  color:#fff;
  box-shadow:0 14px 32px rgba(15,23,42,.25);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.mobile-menu-toggle span,
.mobile-menu-toggle span:before,
.mobile-menu-toggle span:after{
  display:block;
  width:20px;
  height:2px;
  background:#fff;
  border-radius:99px;
  content:"";
  transition:.2s ease;
}
.mobile-menu-toggle span:before{transform:translateY(-7px)}
.mobile-menu-toggle span:after{transform:translateY(5px)}
body.mobile-menu-open .mobile-menu-toggle span{background:transparent}
body.mobile-menu-open .mobile-menu-toggle span:before{transform:translateY(0) rotate(45deg)}
body.mobile-menu-open .mobile-menu-toggle span:after{transform:translateY(-2px) rotate(-45deg)}
.mobile-menu-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(4,12,28,.54);
  backdrop-filter:blur(4px);
}
.pwa-install-tip{
  display:none;
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(12px + var(--mobile-safe-bottom));
  z-index:10050;
  background:#0f172a;
  color:#fff;
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 18px 48px rgba(15,23,42,.28);
  font-size:14px;
  line-height:1.35;
}
.pwa-install-tip strong{display:block;margin-bottom:4px}
.pwa-install-tip button{
  position:absolute;
  top:8px;
  right:10px;
  background:rgba(255,255,255,.14);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:4px 8px;
}
.table-mobile-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
@media (max-width: 900px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    background:#eef5ff!important;
  }
  body{
    padding-top:0!important;
  }
  .mobile-menu-toggle{
    display:flex;
  }
  .mobile-menu-backdrop{
    display:block;
    opacity:0;
    pointer-events:none;
    transition:.2s ease;
  }
  body.mobile-menu-open .mobile-menu-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  /* Sidebar variants used in admin + portal */
  .admin-sidebar,
  .sidebar,
  aside[class*="sidebar"]{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:var(--mobile-sidebar-width)!important;
    min-width:var(--mobile-sidebar-width)!important;
    max-width:var(--mobile-sidebar-width)!important;
    height:100dvh!important;
    z-index:10010!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding-top:74px!important;
    box-shadow:24px 0 60px rgba(15,23,42,.28)!important;
  }
  body.mobile-menu-open .admin-sidebar,
  body.mobile-menu-open .sidebar,
  body.mobile-menu-open aside[class*="sidebar"]{
    transform:translateX(0)!important;
  }

  .admin-shell,
  .layout,
  body > .shell{
    display:block!important;
    width:100%!important;
    min-height:100dvh!important;
  }
  .admin-main,
  .content,
  main,
  .main{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    padding:76px 14px 26px!important;
    box-sizing:border-box!important;
  }

  .admin-header,
  .toolbar-card,
  .hero-card,
  .portal-hero,
  .hero{
    border-radius:22px!important;
    padding:22px 18px!important;
    margin:0 0 14px!important;
    min-height:auto!important;
    display:block!important;
  }
  .admin-header h1,
  .toolbar-card h1,
  .hero-card h1,
  .portal-hero h1,
  .hero h1{
    font-size:28px!important;
    line-height:1.1!important;
    margin:0 0 6px!important;
    letter-spacing:-.03em!important;
  }
  .hero-card h2,
  .hero h2{
    font-size:22px!important;
    margin:4px 0!important;
  }

  .top-actions,
  .page-actions,
  .month-picker,
  .month-picker-inline,
  .prompt-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    width:100%!important;
    margin-top:14px!important;
  }
  .top-actions .btn,
  .page-actions .btn,
  .month-picker select,
  .month-picker-inline select,
  .month-picker .btn,
  .prompt-action,
  button,
  input[type=submit]{
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    border-radius:15px!important;
  }

  .admin-usage-tiles,
  .stat-grid,
  .cards,
  .kpi-grid,
  .dashboard-cards,
  .portal-stats{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .admin-usage-tile,
  .stat-card,
  .card,
  .panel{
    border-radius:20px!important;
    padding:16px!important;
    min-width:0!important;
  }
  .admin-usage-tile strong,
  .stat-card .stat-value,
  .card strong{
    font-size:24px!important;
    word-break:break-word!important;
  }

  .admin-summary-grid,
  .admin-dashboard-grid,
  .grid,
  .filter-grid,
  .preview-cards,
  .report-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .filter-grid.two-col{
    grid-template-columns:1fr!important;
  }

  .card-header,
  .chart-header-row{
    display:block!important;
  }
  .chart-stat-wrap{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin-top:10px!important;
  }
  .chart-shell,
  .chart-main,
  canvas{
    min-height:260px!important;
    max-height:320px!important;
  }
  .bars,
  .chart-bars{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:8px!important;
  }
  .bar-col{
    min-width:34px!important;
  }

  .donut-card{
    display:block!important;
    text-align:center!important;
  }
  .admin-donut,
  .donut{
    margin:0 auto 16px!important;
  }

  .table-wrap,
  .clean-table,
  .data-table-wrap{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:18px!important;
  }
  table{
    min-width:720px!important;
  }
  th,td{
    padding:11px 12px!important;
    font-size:13px!important;
  }

  input,
  select,
  textarea{
    width:100%!important;
    max-width:100%!important;
    min-height:46px!important;
    font-size:16px!important; /* voorkomt iOS zoom */
    box-sizing:border-box!important;
  }
  label{
    font-size:13px!important;
  }

  .userbox,
  .sidebar-bottom,
  .portal-user-card{
    position:static!important;
    margin-top:18px!important;
  }
}
@media (max-width: 480px){
  .admin-main,
  .content,
  main,
  .main{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .admin-header h1,
  .toolbar-card h1,
  .hero-card h1,
  .portal-hero h1,
  .hero h1{
    font-size:24px!important;
  }
  .admin-usage-tile strong,
  .stat-card .stat-value{
    font-size:22px!important;
  }
  .card,
  .panel,
  .admin-usage-tile,
  .stat-card{
    padding:14px!important;
  }
}
@media (display-mode: standalone){
  .pwa-install-tip{display:none!important}
  body{overscroll-behavior-y:contain}
}



/* ===== VoIPStarr mobile clean menu v1.6.4 ===== */
:root{
  --vs-mobile-sidebar: min(82vw, 390px);
  --vs-mobile-gap: 14px;
}

/* Floating menu button */
.mobile-menu-toggle{
  display:none;
  position:fixed;
  left:50%;
  top:calc(12px + env(safe-area-inset-top, 0px));
  transform:translateX(-50%);
  z-index:10030;
  width:min(92vw, 420px);
  height:52px;
  border:0;
  border-radius:18px;
  background:#10192f;
  color:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,.25);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.mobile-menu-toggle span,
.mobile-menu-toggle span:before,
.mobile-menu-toggle span:after{
  display:block;
  width:26px;
  height:3px;
  background:#fff;
  border-radius:99px;
  content:"";
  transition:.18s ease;
}
.mobile-menu-toggle span:before{transform:translateY(-9px)}
.mobile-menu-toggle span:after{transform:translateY(6px)}

/* Als menu open is: zwarte balk volledig weg, alleen X in menu zelf */
body.mobile-menu-open .mobile-menu-toggle{
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(-12px);
}

/* Backdrop */
.mobile-menu-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(7,14,30,.54);
  backdrop-filter:blur(5px);
}

/* Close button inside drawer */
.mobile-drawer-close{
  display:none;
  position:absolute;
  right:18px;
  top:calc(14px + env(safe-area-inset-top, 0px));
  width:44px;
  height:44px;
  border:0;
  border-radius:14px;
  background:#10192f;
  color:#fff;
  font-size:30px;
  line-height:1;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px rgba(15,23,42,.18);
}

/* PWA tip */
.pwa-install-tip{
  display:none;
  position:fixed;
  left:14px;
  right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  z-index:10050;
  background:#10192f;
  color:#fff;
  border-radius:18px;
  padding:14px 44px 14px 16px;
  box-shadow:0 18px 48px rgba(15,23,42,.28);
  font-size:14px;
  line-height:1.35;
}
.pwa-install-tip strong{display:block;margin-bottom:4px}
.pwa-install-tip button{
  position:absolute;
  top:8px;
  right:10px;
  background:rgba(255,255,255,.14);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:4px 8px;
}

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

  .mobile-menu-toggle{display:flex!important}
  .mobile-menu-backdrop{
    display:block!important;
    opacity:0;
    pointer-events:none;
    transition:.2s ease;
  }
  body.mobile-menu-open .mobile-menu-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  /* Drawer/menu */
  .admin-sidebar,
  .sidebar,
  aside[class*="sidebar"]{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:var(--vs-mobile-sidebar)!important;
    min-width:0!important;
    max-width:var(--vs-mobile-sidebar)!important;
    height:100dvh!important;
    z-index:10020!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding:
      calc(74px + 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,.28)!important;
    border-radius:0 28px 28px 0!important;
    box-sizing:border-box!important;
  }
  body.mobile-menu-open .admin-sidebar,
  body.mobile-menu-open .sidebar,
  body.mobile-menu-open aside[class*="sidebar"]{
    transform:translateX(0)!important;
  }
  body.mobile-menu-open .mobile-drawer-close{
    display:flex!important;
  }

  /* Drawer content center/strak */
  .admin-brand,
  .brand,
  .sidebar-logo{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    margin:0 auto 26px!important;
    width:100%!important;
    min-height:58px!important;
    text-align:center!important;
  }
  .admin-brand img,
  .brand img,
  .sidebar-logo img,
  .logo{
    max-width:190px!important;
    width:auto!important;
    height:auto!important;
    margin:0 auto!important;
    display:block!important;
  }

  .admin-nav,
  .sidebar nav,
  aside[class*="sidebar"] nav{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    width:100%!important;
    margin:0 auto!important;
  }

  .admin-nav a,
  .sidebar a,
  aside[class*="sidebar"] nav a{
    min-height:54px!important;
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
    padding:0 20px!important;
    border-radius:17px!important;
    font-size:17px!important;
    font-weight:850!important;
    text-decoration:none!important;
    box-sizing:border-box!important;
  }

  /* Layout */
  .admin-shell,
  .layout,
  body > .shell{
    display:block!important;
    width:100%!important;
    min-height:100dvh!important;
  }
  .admin-main,
  .content,
  main,
  .main{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    padding:
      calc(76px + env(safe-area-inset-top, 0px))
      12px
      calc(24px + env(safe-area-inset-bottom, 0px))!important;
    box-sizing:border-box!important;
  }

  /* Hero/cards */
  .admin-header,
  .toolbar-card,
  .hero-card,
  .portal-hero,
  .hero{
    border-radius:24px!important;
    padding:22px 18px!important;
    margin:0 0 14px!important;
    min-height:auto!important;
    display:block!important;
    overflow:hidden!important;
  }
  .admin-header h1,
  .toolbar-card h1,
  .hero-card h1,
  .portal-hero h1,
  .hero h1{
    font-size:27px!important;
    line-height:1.1!important;
    margin:0 0 6px!important;
    letter-spacing:-.03em!important;
  }

  .top-actions,
  .page-actions,
  .month-picker,
  .month-picker-inline,
  .prompt-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    width:100%!important;
    margin-top:14px!important;
  }

  .top-actions .btn,
  .page-actions .btn,
  .month-picker select,
  .month-picker-inline select,
  .month-picker .btn,
  .prompt-action,
  button,
  input[type=submit]{
    width:100%!important;
    min-width:0!important;
    height:50px!important;
    border-radius:16px!important;
    box-sizing:border-box!important;
  }

  .admin-usage-tiles,
  .stat-grid,
  .cards,
  .kpi-grid,
  .dashboard-cards,
  .portal-stats{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

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

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

  /* Chart/table */
  .chart-shell,
  .chart-main,
  canvas{
    min-height:250px!important;
    max-height:320px!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;
  }
  th,td{
    padding:12px 12px!important;
    font-size:14px!important;
  }

  /* Search block on SIM page */
  .search-card,
  .search-box,
  .card form{
    max-width:100%!important;
  }

  input,
  select,
  textarea{
    width:100%!important;
    max-width:100%!important;
    min-height:48px!important;
    font-size:16px!important;
    box-sizing:border-box!important;
  }

  /* User/login blocks bottom in drawer */
  .userbox,
  .sidebar-bottom,
  .portal-user-card{
    position:static!important;
    margin-top:26px!important;
    width:100%!important;
  }
}

@media (max-width: 430px){
  :root{--vs-mobile-sidebar: 78vw}
  .mobile-menu-toggle{
    width:calc(100vw - 28px);
  }
  .admin-main,
  .content,
  main,
  .main{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .admin-header h1,
  .toolbar-card h1,
  .hero-card h1,
  .portal-hero h1,
  .hero h1{
    font-size:24px!important;
  }
  .admin-nav a,
  .sidebar a,
  aside[class*="sidebar"] nav a{
    font-size:16px!important;
    min-height:52px!important;
  }
}

@media (display-mode: standalone){
  .pwa-install-tip{display:none!important}
  body{overscroll-behavior-y:contain}
}

/* disabled old floating mobile 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{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}