/* FRA Prop HQ v11.2.0 — mobile layout parity */

@media (max-width:760px){
  :root{--v1120-mobile-gutter:12px;}

  html body:not(.signed-out).fra-v11-command-deck #appShell>.main-content{
    margin-left:0!important;
    padding-top:var(--v11-nav-h)!important;
    width:100%!important;
  }

  /* Keep the mobile utility row neat without changing the site hierarchy. */
  html body:not(.signed-out).fra-v11-command-deck #appShell .topbar{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    min-height:auto!important;
    height:auto!important;
    padding:10px var(--v1120-mobile-gutter)!important;
    display:flex!important;
    justify-content:flex-end!important;
    gap:8px!important;
    background:#0d1216!important;
    border:0!important;
  }
  html body:not(.signed-out).fra-v11-command-deck #appShell .topbar-left{display:none!important;}
  html body:not(.signed-out).fra-v11-command-deck #appShell .topbar-actions{
    width:100%!important;
    display:flex!important;
    gap:7px!important;
    overflow-x:auto!important;
    padding:0!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html body:not(.signed-out).fra-v11-command-deck #appShell .topbar-actions::-webkit-scrollbar{display:none!important;}
  html body:not(.signed-out).fra-v11-command-deck #appShell .topbar-actions > *{flex:0 0 auto!important;}

  /* Every page uses the same edge gutters. */
  html body:not(.signed-out).fra-v11-command-deck #appShell>.main-content>.view.active,
  html body:not(.signed-out).fra-v11-command-deck #appShell>.main-content>#view-copier.view.active{
    width:calc(100% - (var(--v1120-mobile-gutter) * 2))!important;
    max-width:none!important;
    margin:0 var(--v1120-mobile-gutter)!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  /* Dashboard keeps the same content order and identity. */
  html body:not(.signed-out).fra-v11-command-deck #view-dashboard .v101-dashboard-masthead-inner{gap:12px!important;}
  html body:not(.signed-out).fra-v11-command-deck #view-dashboard .v801-command-hero{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:14px!important;
    padding:16px 0 4px!important;
  }
  html body:not(.signed-out).fra-v11-command-deck #view-dashboard .v801-hero-actions{
    width:100%!important;
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  html body:not(.signed-out).fra-v11-command-deck #view-dashboard .v801-hero-actions::-webkit-scrollbar{display:none!important;}
  html body:not(.signed-out).fra-v11-command-deck #view-dashboard .v801-hero-actions .button{flex:0 0 auto!important;}

  /* KPI strips/cards adapt without changing their ordering. */
  html body:not(.signed-out).fra-v11-command-deck #view-dashboard .kpi-grid,
  html body:not(.signed-out).fra-v11-command-deck #dashboardTerminalStrip{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  /* Keep account/report tables usable instead of squeezing columns. */
  html body:not(.signed-out).fra-v11-command-deck .table-wrap,
  html body:not(.signed-out).fra-v11-command-deck .data-table-wrap,
  html body:not(.signed-out).fra-v11-command-deck .admin-members-table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html body:not(.signed-out).fra-v11-command-deck .data-table{
    min-width:760px!important;
  }

  /* Generic wide grids stack cleanly. */
  html body:not(.signed-out).fra-v11-command-deck .view.active .settings-grid,
  html body:not(.signed-out).fra-v11-command-deck .view.active .report-grid,
  html body:not(.signed-out).fra-v11-command-deck .view.active .notebook-grid,
  html body:not(.signed-out).fra-v11-command-deck .view.active .main-grid,
  html body:not(.signed-out).fra-v11-command-deck .view.active .content-grid,
  html body:not(.signed-out).fra-v11-command-deck .view.active .page-grid{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:480px){
  html body:not(.signed-out).fra-v11-command-deck #view-dashboard .kpi-grid,
  html body:not(.signed-out).fra-v11-command-deck #dashboardTerminalStrip{
    grid-template-columns:1fr!important;
  }
}