/*
  VELAEA My EA — mobile sidebar stacking/layout repair
  Loaded after the shared Dashboard mobile parity stylesheet.
  Scope is intentionally limited to my-ea-rentals.html.
*/

@media (max-width:980px){
  /* The My EA desktop rules use a more specific selector with !important.
     Override them at the same/higher specificity so the mobile shell is truly one column. */
  body[data-velaea-dashboard-page="my-ea"][data-velaea-dashboard-shell="v1"] .app{
    display:block!important;
    grid-template-columns:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:100dvh!important;
    margin:0!important;
  }

  body[data-velaea-dashboard-page="my-ea"][data-velaea-dashboard-shell="v1"] .main,
  body[data-velaea-dashboard-page="my-ea"][data-velaea-dashboard-shell="v1"] main.main{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
  }

  /* Keep the drawer above the blur layer. */
  body[data-velaea-dashboard-page="my-ea"][data-velaea-dashboard-shell="v1"] .sidebar{
    position:fixed!important;
    top:0!important;
    right:auto!important;
    bottom:0!important;
    left:-290px!important;
    width:268px!important;
    min-width:268px!important;
    max-width:min(86vw,320px)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    transform:none!important;
    transition:left .22s ease!important;
    z-index:1100!important;
  }

  body[data-velaea-dashboard-page="my-ea"][data-velaea-dashboard-shell="v1"] .sidebar.open,
  body[data-velaea-dashboard-page="my-ea"][data-velaea-dashboard-shell="v1"].sidebar-open .sidebar{
    left:0!important;
  }

  /* Closed state must be fully inert. */
  body[data-velaea-dashboard-page="my-ea"][data-velaea-dashboard-shell="v1"] .sidebar-backdrop{
    position:fixed!important;
    inset:0!important;
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    background:rgba(2,8,18,.56)!important;
    backdrop-filter:blur(5px)!important;
    -webkit-backdrop-filter:blur(5px)!important;
    z-index:1050!important;
  }

  body[data-velaea-dashboard-page="my-ea"][data-velaea-dashboard-shell="v1"].sidebar-open .sidebar-backdrop{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Match the proven Account mobile shell. */
  body[data-velaea-dashboard-page="my-ea"][data-velaea-dashboard-shell="v1"] .topbar{
    position:sticky!important;
    top:0!important;
    z-index:900!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:62px!important;
    min-height:62px!important;
    padding:0 10px!important;
    gap:8px!important;
    box-sizing:border-box!important;
  }

  body[data-velaea-dashboard-page="my-ea"][data-velaea-dashboard-shell="v1"] .content{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:18px 10px!important;
    box-sizing:border-box!important;
    overflow-x:clip!important;
  }

  body[data-velaea-dashboard-page="my-ea"][data-velaea-dashboard-shell="v1"].sidebar-open{
    overflow:hidden!important;
    touch-action:none;
  }
}

@media (max-width:620px){
  body[data-velaea-dashboard-page="my-ea"][data-velaea-dashboard-shell="v1"] .content{
    padding:14px 8px!important;
  }
}

@media (min-width:981px){
  /* Defensive reset when rotating/resizing back to desktop. */
  body[data-velaea-dashboard-page="my-ea"][data-velaea-dashboard-shell="v1"] .sidebar-backdrop{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}