/* ZyroDevv V1.7.2-HF27 — desktop shell alignment + no clipped sidebar */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}

/* BUYER DESKTOP/TABLET
   ui-v1728 used margin:0 auto on .content, which removed the sidebar offset.
   Force a real two-area desktop shell so the left side can never cover content. */
@media (min-width:781px){
  body:not(.admin-body){
    --sidebar:270px;
  }

  body:not(.admin-body) .shell{
    position:relative!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-height:100vh!important;
    overflow-x:clip!important;
  }

  body:not(.admin-body) .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    left:0!important;
    width:var(--sidebar)!important;
    min-width:var(--sidebar)!important;
    max-width:var(--sidebar)!important;
    height:100vh!important;
    margin:0!important;
    padding:20px 16px!important;
    transform:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    color:#eef7ff!important;
    background:linear-gradient(180deg,#07162e 0%,#0b2447 58%,#172d62 100%)!important;
    border-right:1px solid rgba(255,255,255,.09)!important;
    box-shadow:14px 0 38px rgba(16,31,63,.16)!important;
    z-index:60!important;
  }

  body:not(.admin-body) .side-brand{
    min-width:0!important;
    padding:2px 7px 18px!important;
    margin-bottom:14px!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
  }
  body:not(.admin-body) .side-brand>div,
  body:not(.admin-body) .user-card>div{min-width:0!important}
  body:not(.admin-body) .side-brand strong,
  body:not(.admin-body) .side-brand small,
  body:not(.admin-body) .user-card b{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body:not(.admin-body) .side-brand strong{color:#fff!important}
  body:not(.admin-body) .side-brand small{color:#9eb8d6!important}

  body:not(.admin-body) .user-card{
    min-width:0!important;
    color:#fff!important;
    background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(86,107,230,.18))!important;
    border:1px solid rgba(255,255,255,.13)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
  }
  body:not(.admin-body) .role-chip{
    color:#cfeaff!important;
    background:rgba(56,189,248,.14)!important;
    border-color:rgba(125,211,252,.30)!important;
    box-shadow:none!important;
  }
  body:not(.admin-body) .side-label{color:#89a7c9!important}
  body:not(.admin-body) .nav a{
    color:#d6e4f3!important;
    border-color:transparent!important;
    box-shadow:none!important;
  }
  body:not(.admin-body) .nav a:hover{
    color:#fff!important;
    background:rgba(255,255,255,.08)!important;
  }
  body:not(.admin-body) .nav a.active{
    color:#fff!important;
    background:linear-gradient(110deg,#0ba8df 0%,#3474f2 52%,#7e3aee 100%)!important;
    border-color:rgba(255,255,255,.17)!important;
    box-shadow:0 10px 24px rgba(54,79,218,.28)!important;
  }
  body:not(.admin-body) .side-footer{
    border-top-color:rgba(255,255,255,.10)!important;
  }

  body:not(.admin-body) .topbar{
    position:sticky!important;
    top:0!important;
    left:auto!important;
    right:auto!important;
    width:calc(100% - var(--sidebar))!important;
    max-width:calc(100% - var(--sidebar))!important;
    min-width:0!important;
    height:76px!important;
    margin:0 0 0 var(--sidebar)!important;
    padding:0 clamp(20px,2.4vw,38px)!important;
    box-sizing:border-box!important;
    z-index:45!important;
  }

  body:not(.admin-body) .content{
    position:relative!important;
    width:calc(100% - var(--sidebar))!important;
    max-width:none!important;
    min-width:0!important;
    margin:0 0 0 var(--sidebar)!important;
    padding:26px clamp(20px,2.7vw,42px) 54px!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }

  body:not(.admin-body) .content>*{
    width:100%!important;
    max-width:1540px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  body:not(.admin-body) .dashboard-page,
  body:not(.admin-body) .dashboard-page>*,
  body:not(.admin-body) .grid>*,
  body:not(.admin-body) .card,
  body:not(.admin-body) .dashboard-heading,
  body:not(.admin-body) .dashboard-role,
  body:not(.admin-body) .create-panel-card,
  body:not(.admin-body) .server-status-card{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  body:not(.admin-body) .sidebar-backdrop{display:none!important}
}

@media (min-width:1250px){
  body:not(.admin-body){--sidebar:286px}
}

/* ADMIN DESKTOP
   Keep the sidebar inside a fixed grid track and confine wide tables/cards to
   their own containers instead of widening the whole document. */
@media (min-width:1051px){
  body.admin-body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    background:#f4f7fb!important;
  }

  .admin-body #adminApp,
  .admin-body .admin-layout,
  .admin-body .v13-admin{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:clip!important;
  }

  .admin-body .v13-admin{
    --admin-side:268px!important;
    display:grid!important;
    grid-template-columns:var(--admin-side) minmax(0,1fr)!important;
    align-items:start!important;
  }

  .admin-body .v13-admin .admin-side{
    position:sticky!important;
    inset:auto!important;
    top:0!important;
    left:0!important;
    transform:none!important;
    width:var(--admin-side)!important;
    min-width:var(--admin-side)!important;
    max-width:var(--admin-side)!important;
    height:100vh!important;
    margin:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    z-index:60!important;
  }

  .admin-body .admin-brand,
  .admin-body .admin-user-card,
  .admin-body .admin-nav,
  .admin-body .admin-nav-group,
  .admin-body .admin-nav button,
  .admin-body .admin-side-footer{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .admin-body .admin-brand>div,
  .admin-body .admin-user-copy{min-width:0!important}
  .admin-body .admin-brand strong,
  .admin-body .admin-brand small,
  .admin-body .admin-user-copy b{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .admin-body .v13-admin .admin-main{
    grid-column:2!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }

  .admin-body .admin-topbar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .admin-body .admin-content{
    width:100%!important;
    max-width:1600px!important;
    min-width:0!important;
    margin:0 auto!important;
    padding:26px clamp(20px,2.5vw,38px) 56px!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }

  .admin-body .admin-content>*,
  .admin-body .admin-content section,
  .admin-body .admin-content article,
  .admin-body .admin-content .card,
  .admin-body .admin-content [class*="grid"],
  .admin-body .admin-content [class*="layout"]{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .admin-body .admin-dashboard-grid,
  .admin-body .admin-quick-grid,
  .admin-body .admin-stats-grid,
  .admin-body .admin-role-grid,
  .admin-body .admin-code-list,
  .admin-body .admin-panel-grid,
  .admin-body .admin-server-grid,
  .admin-body .admin-server-config-list{
    width:100%!important;
    max-width:100%!important;
  }
  .admin-body .admin-dashboard-grid>*,
  .admin-body .admin-quick-grid>*,
  .admin-body .admin-stats-grid>*,
  .admin-body .admin-role-grid>*,
  .admin-body .admin-code-list>*,
  .admin-body .admin-panel-grid>*,
  .admin-body .admin-server-grid>*,
  .admin-body .admin-server-config-list>*{
    min-width:0!important;
    max-width:100%!important;
  }

  .admin-body .admin-table-card,
  .admin-body .table-wrap,
  .admin-body .admin-audit-table{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain!important;
  }
  .admin-body .admin-table{
    width:100%!important;
    max-width:none!important;
  }

  .admin-body .admin-side-overlay{display:none!important}
}

@media (min-width:1051px) and (max-width:1180px){
  .admin-body .v13-admin{--admin-side:246px!important}
  .admin-body .admin-role-grid,
  .admin-body .admin-dashboard-grid,
  .admin-body .admin-server-grid{
    grid-template-columns:1fr!important;
  }
  .admin-body .admin-quick-grid,
  .admin-body .admin-stats-grid,
  .admin-body .admin-code-list,
  .admin-body .admin-panel-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}