/* Mobile-only NarrowVision navigation: no desktop styling changes.
 * Safe-area aware, keyboard-friendly, accessible 44px+ touch targets.
 */
#dashboard > .nv-mobile-dock,
#dashboard > .nv-mobile-sheet,
#dashboard > .nv-mobile-more-backdrop{display:none}
#dashboard > .nv-mobile-dock [hidden],
#dashboard > .nv-mobile-sheet [hidden],
#dashboard > .nv-mobile-more-backdrop[hidden]{display:none!important}

@media(max-width:760px){
  /* Contain the mobile document at the visual layout width.
     An overflowing widget must not push the entire dashboard and fixed dock sideways. */
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:clip;
  }
  #dashboard,
  #dashboard .nv-shell-v2{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:clip;
    box-sizing:border-box;
  }
  #dashboard .nv-portal-v2,
  #dashboard .nv-portal-v2 #view{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  #dashboard .nv-live-dashboard,
  #dashboard .nv-live-heading,
  #dashboard .nv-live-cards,
  #dashboard .nv-live-card{
    max-width:100%;
    min-width:0;
  }
  #dashboard .nv-live-heading > div{
    flex:1 1 220px;
    min-width:0;
    max-width:100%;
  }
  #dashboard .nv-live-heading button{max-width:100%}
  #dashboard .nv-live-card{overflow-wrap:anywhere}
  /* Keep horizontal scrolling in individual data widgets, not in the site shell. */
  #dashboard .nv-screen-table-wrap,
  #dashboard .nv-builder-list{
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Remove the former full-screen drawer on phones; desktop sidebar stays intact. */
  #dashboard .nv-sidebar-v2,
  #dashboard .nv-mobile-menu,
  #dashboard .nv-nav-backdrop{display:none!important}
  #dashboard .nv-portal-v2{
    min-width:0;
    max-width:100%;
    padding-bottom:calc(102px + env(safe-area-inset-bottom,0px));
  }
  #dashboard .nv-portal-v2 #view{min-width:0;max-width:100%;overflow-wrap:anywhere}
  #dashboard .nv-portal-v2 .panel{min-width:0}
  #dashboard .nv-portal-v2 img{max-width:100%}
  #dashboard .nv-portal-v2 input:not([type="checkbox"]):not([type="radio"]),
  #dashboard .nv-portal-v2 textarea,
  #dashboard .nv-portal-v2 select{max-width:100%;min-width:0}
  body.nv-mobile-more-open{overflow:hidden}

  #dashboard > .nv-mobile-dock{
    position:fixed;
    z-index:150;
    inset:auto 0 0;
    width:100%;
    max-width:100vw;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    padding:7px 9px calc(8px + env(safe-area-inset-bottom,0px));
    border-top:1px solid rgba(142,126,207,.28);
    background:linear-gradient(180deg,rgba(19,26,46,.96),rgba(10,15,31,.98));
    box-shadow:0 -10px 35px rgba(2,5,16,.35);
    -webkit-backdrop-filter:blur(22px);
    backdrop-filter:blur(22px);
    box-sizing:border-box;
  }
  #dashboard .nv-mobile-dock-button{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-width:0;
    min-height:56px;
    margin:0;
    padding:5px 3px;
    border:1px solid transparent;
    border-radius:12px;
    background:transparent;
    color:#b6c2dc;
    font-size:10px;
    font-weight:650;
    line-height:1.2;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  #dashboard .nv-mobile-dock-button[data-active="true"]{
    border-color:rgba(158,126,255,.34);
    background:linear-gradient(160deg,rgba(112,80,213,.34),rgba(59,46,109,.28));
    color:#f7efff;
  }
  #dashboard .nv-mobile-dock-button:focus-visible,
  #dashboard .nv-mobile-sheet-link:focus-visible,
  #dashboard .nv-mobile-sheet-close:focus-visible{
    outline:2px solid #bda8ff;
    outline-offset:2px;
  }
  #dashboard .nv-mobile-item-icon{
    display:grid;
    place-items:center;
    width:23px;
    height:23px;
    flex:0 0 23px;
    color:#a7a0e7;
  }
  #dashboard .nv-mobile-item-icon svg{display:block;width:22px;height:22px}
  #dashboard .nv-mobile-item-label{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
  }
  #dashboard > .nv-mobile-more-backdrop{
    position:fixed;
    z-index:145;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border:0;
    background:rgba(3,6,17,.62);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
  }
  #dashboard > .nv-mobile-sheet{
    position:fixed;
    z-index:155;
    bottom:calc(77px + env(safe-area-inset-bottom,0px));
    left:11px;
    right:11px;
    display:block;
    max-height:calc(100dvh - 112px - env(safe-area-inset-bottom,0px));
    overflow-y:auto;
    overscroll-behavior:contain;
    border:1px solid rgba(146,122,214,.46);
    border-radius:20px;
    padding:14px;
    background:linear-gradient(155deg,#1d2947,#10182c);
    box-shadow:0 20px 65px rgba(1,4,15,.55);
    color:#eef0ff;
  }
  #dashboard .nv-mobile-sheet-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 10px;
    padding:1px 2px 11px;
    border-bottom:1px solid rgba(147,156,195,.18);
  }
  #dashboard .nv-mobile-sheet-head h2{
    margin:0;
    font-size:16px;
    font-weight:750;
    line-height:1.4;
  }
  #dashboard .nv-mobile-sheet-close{
    width:44px;
    height:44px;
    flex:0 0 44px;
    padding:0;
    margin:0;
    border:1px solid rgba(160,171,211,.28);
    border-radius:11px;
    background:rgba(36,49,76,.82);
    color:#f2f1ff;
    font-size:25px;
    cursor:pointer;
  }
  #dashboard .nv-mobile-sheet-list{display:grid;grid-template-columns:1fr;gap:5px}
  #dashboard .nv-mobile-sheet-link{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    width:100%;
    min-width:0;
    min-height:50px;
    margin:0;
    padding:10px 13px;
    border:1px solid transparent;
    border-radius:11px;
    background:transparent;
    color:#d6dff2;
    font-size:14px;
    font-weight:650;
    text-align:left;
    cursor:pointer;
  }
  #dashboard .nv-mobile-sheet-link[data-active="true"]{
    border-color:rgba(155,119,254,.36);
    background:rgba(110,79,203,.23);
    color:#fff;
  }
  #dashboard .nv-mobile-sheet-link .nv-mobile-item-label{
    white-space:normal;
    text-align:left;
  }
  /* Keep bottom navigation visible when forms auto-focus, including Playlists.
     Input focus alone does not mean the software keyboard is open. */
}
@media(max-width:520px){
  /* The locale flags move to a second row so customer name and logout remain legible. */
  #dashboard .nv-topbar-v2{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:6px 10px;
    padding-block:9px 12px;
  }
  #dashboard .nv-topbar-v2 .nv-header-identity{
    grid-column:1;
    grid-row:1;
    min-width:0;
    margin:0;
  }
  #dashboard .nv-topbar-v2 .nv-header-logout{
    grid-column:2;
    grid-row:1;
  }
  #dashboard .nv-topbar-v2 .nv-language-bar{
    grid-column:1/-1;
    grid-row:2;
    justify-self:center;
    justify-content:center;
    gap:2px;
    margin:0;
  }
}
@media(max-width:360px){
  #dashboard > .nv-mobile-dock{gap:2px;padding-inline:5px}
  #dashboard .nv-mobile-dock-button{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  #dashboard > .nv-mobile-dock,
  #dashboard > .nv-mobile-sheet{scroll-behavior:auto}
}
@media(forced-colors:active){
  #dashboard > .nv-mobile-dock,
  #dashboard > .nv-mobile-sheet{border-color:CanvasText;background:Canvas;color:CanvasText}
  #dashboard .nv-mobile-dock-button[data-active="true"],
  #dashboard .nv-mobile-sheet-link[data-active="true"]{outline:2px solid Highlight}
}