/* Flinapp CMS V4.24.32 — compact professional content widths + responsive layout */

/* Core page width system */
:root{
  --fx32-admin-max:1480px;
  --fx32-content-max:1380px;
  --fx32-auth-max:1280px;
  --fx32-gap:22px;
}

/* Never stretch content edge-to-edge on large displays */
.main{
  padding-left:clamp(18px,3vw,46px)!important;
  padding-right:clamp(18px,3vw,46px)!important;
}
.topbar,
.admin-section{
  width:min(100%,var(--fx32-admin-max))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.admin-section{
  padding-top:22px!important;
}

/* Keep sections visually grouped, not full-screen slabs */
#overview>.card,
#settings>.card,
#users>.card,
#packages>.card,
#payments>.card,
#notifications>.card,
#builds>.card,
#addons>.fx-upgrade-shell,
#cms-update>.fx-upgrade-shell,
#maintenance>.system-module-card,
#page-designer>.page-designer-shell{
  width:100%!important;
  max-width:var(--fx32-content-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Page Designer more refined */
#page-designer .page-designer-hero{
  max-width:var(--fx32-content-max)!important;
  margin:0 auto!important;
  padding:20px 22px!important;
}
#page-designer .designer-tabs{
  margin-left:auto!important;
  margin-right:auto!important;
}
#page-designer .fx20-model-panel{
  max-width:var(--fx32-content-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#page-designer .fx20-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
}
#page-designer .fx20-card{
  max-width:none!important;
}
#page-designer .fx20-preview{
  height:220px!important;
}
#page-designer .fx20-shot{
  width:220%!important;height:220%!important;
  transform:scale(.455)!important;
  transform-origin:0 0!important;
}

/* Admin overview/settings/users/packages etc */
#overview .stats{gap:14px!important}
#overview .admin-grid,
#settings .admin-grid,
#payments .admin-grid,
#notifications .notification-layout{
  gap:16px!important;
}
#settings .card,
#users .users-card,
#packages .package-admin-card,
#payments .card,
#notifications .card,
#builds .card{
  padding:20px!important;
}

/* User area should feel like a real product page, not edge-to-edge */
.fx-user-auth{
  width:min(100%,var(--fx32-auth-max))!important;
  min-height:auto!important;
  margin:36px auto!important;
  border:1px solid rgba(117,158,199,.16)!important;
  border-radius:24px!important;
  overflow:hidden!important;
  box-shadow:0 28px 80px rgba(0,0,0,.24)!important;
}
.fx-user-showcase{
  min-height:720px!important;
}
.fx-user-panel{
  width:min(480px,calc(100% - 42px))!important;
}

/* App Studio centered workspace */
.studio-page-designed .main{
  width:100%!important;
}
.studio-page-designed .main>.topbar,
.studio-page-designed .view{
  width:min(100%,var(--fx32-content-max))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.studio-page-designed .studio-designer-intro,
.studio-page-designed .studio-designer-blocks,
.studio-page-designed .studio-custom-html{
  max-width:var(--fx32-content-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Remove stale demo-only chip navigation */
.demo-aura-studio-nav,
.demo-studio-tags,
.studio-custom-html:has(.demo-aura-studio-nav),
.studio-custom-html:has(.demo-studio-tags){
  display:none!important;
}

/* App Studio editor: balanced width, no stretched controls */
#builder .builder-grid{
  grid-template-columns:minmax(0,1fr) 320px!important;
  gap:18px!important;
}
#builder .controls{
  max-width:1040px!important;
}
#builder .preview-wrap{
  width:320px!important;
}
#builder .device{
  width:292px!important;
  height:610px!important;
}

/* Edit APK control */
.edit-build-app{
  position:relative!important;
  z-index:5!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:40px!important;
  padding:9px 13px!important;
  border:1px solid rgba(70,140,220,.34)!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,rgba(33,120,219,.18),rgba(105,76,236,.19))!important;
  color:#e9f3ff!important;
  font-weight:850!important;
}

/* Public homepage constrained sections */
body:not(.portal-auth-body):not(.studio-page-designed) main>section>div,
body:not(.portal-auth-body):not(.studio-page-designed) header>div,
body:not(.portal-auth-body):not(.studio-page-designed) footer>div{
  max-width:var(--fx32-content-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Tablet */
@media(max-width:1180px){
  :root{--fx32-admin-max:1120px;--fx32-content-max:1080px}
  #builder .builder-grid{grid-template-columns:minmax(0,1fr) 290px!important}
  #builder .preview-wrap{width:290px!important}
  #builder .device{width:270px!important;height:580px!important}
}

/* Mobile/tablet */
@media(max-width:980px){
  .fx-user-auth{
    width:min(94%,760px)!important;
    margin:22px auto!important;
    grid-template-columns:1fr!important;
  }
  .fx-user-showcase{min-height:auto!important}
  #builder .builder-grid{grid-template-columns:1fr!important}
  #builder .preview-wrap{
    position:relative!important;
    top:auto!important;
    width:min(340px,100%)!important;
    margin:18px auto 0!important;
  }
  #builder .device{width:min(310px,100%)!important;height:625px!important}
  #page-designer .fx20-grid{grid-template-columns:1fr!important}
}

/* Phones */
@media(max-width:760px){
  .main{padding-left:12px!important;padding-right:12px!important}
  .topbar,.admin-section{width:100%!important}
  .fx-user-auth{
    width:calc(100% - 18px)!important;
    margin:9px auto!important;
    border-radius:18px!important;
  }
  .fx-user-panel{width:calc(100% - 24px)!important}
  #page-designer .page-designer-hero{padding:16px!important}
  #page-designer .fx20-preview{height:190px!important}
  #page-designer .fx20-actions{grid-template-columns:1fr!important}
}