/*!
ELYSIANGO Atlas Responsive System
Mobile-first Enterprise Layout Utilities
*/

/* =========================================================
   01. RESPONSIVE TOKENS
   ========================================================= */
:root{
  --bp-xs:420px;
  --bp-sm:640px;
  --bp-md:768px;
  --bp-lg:1024px;
  --bp-xl:1280px;
  --bp-2xl:1536px;
}

/* =========================================================
   02. GLOBAL RESPONSIVE SAFETY
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe,table{max-width:100%}
.atlas-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.atlas-scroll-y{overflow-y:auto;-webkit-overflow-scrolling:touch}

/* =========================================================
   03. RESPONSIVE CONTAINERS
   ========================================================= */
.atlas-container-fluid{width:100%;padding-inline:clamp(14px,3vw,32px)}
.atlas-container-sm{max-width:760px;margin-inline:auto;padding-inline:16px}
.atlas-container-md{max-width:1100px;margin-inline:auto;padding-inline:20px}
.atlas-container-lg{max-width:1360px;margin-inline:auto;padding-inline:24px}
.atlas-container-xl{max-width:1560px;margin-inline:auto;padding-inline:30px}

/* =========================================================
   04. RESPONSIVE GRID UTILITIES
   ========================================================= */
.atlas-responsive-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.atlas-responsive-grid-sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.atlas-responsive-grid-lg{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.atlas-auto-fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--min,260px),1fr));gap:var(--gap,18px)}
.atlas-stack{display:grid;gap:18px}

/* =========================================================
   05. DESKTOP WIDE
   ========================================================= */
@media(max-width:1536px){
  .atlas-kpis,.kpis{grid-template-columns:repeat(4,1fr)}
  .exec-kpi-grid{grid-template-columns:repeat(4,1fr)}
  .atlas-content,.content{max-width:1440px}
}

/* =========================================================
   06. LAPTOP
   ========================================================= */
@media(max-width:1280px){
  .atlas-module-grid,
  .main{
    grid-template-columns:1fr;
  }
  .wide,
  .grid2,
  .atlas-grid-2{
    grid-template-columns:1fr;
  }
  .grid3,
  .atlas-grid-3{
    grid-template-columns:1fr;
  }
  .atlas-card-grid,
  .service-grid,
  .country-grid,
  .asset-grid,
  .automation-grid,
  .builder-grid,
  .category-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   07. TABLET
   ========================================================= */
@media(max-width:1024px){
  .atlas-app,
  .app{
    grid-template-columns:1fr;
  }
  .atlas-sidebar,
  .side{
    position:relative;
    height:auto;
    max-height:none;
  }
  .atlas-topbar,
  .top{
    position:relative;
  }
  .atlas-hero,
  .hero,
  .exec-hero{
    grid-template-columns:1fr;
  }
  .atlas-hero-visual,
  .exec-cockpit,
  .media-visual,
  .integration-visual,
  .auto-visual,
  .research-visual,
  .country-visual,
  .revenue-visual{
    min-height:320px;
  }
  .atlas-table,
  .table{
    min-width:900px;
  }
}

/* =========================================================
   08. MOBILE LARGE
   ========================================================= */
@media(max-width:768px){
  .atlas-content,
  .content,
  .exec-shell{
    padding:16px;
  }
  .atlas-topbar,
  .top{
    min-height:auto;
    height:auto;
    padding:14px 16px;
    flex-direction:column;
    align-items:flex-start;
  }
  .atlas-sidebar,
  .side{
    padding:16px;
  }
  .atlas-brand,
  .brand{
    font-size:24px;
  }
  .atlas-display,
  h1,
  .exec-title{
    font-size:42px;
  }
  .atlas-heading,
  h2{
    font-size:28px;
  }
  .atlas-hero,
  .hero,
  .exec-hero{
    padding:22px;
    border-radius:26px;
  }
  .atlas-kpis,
  .kpis,
  .exec-kpi-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .atlas-command-row,
  .command-row{
    display:grid;
  }
  .atlas-toolbar,
  .toolbar{
    justify-content:flex-start;
  }
  .atlas-btn,
  .btn{
    width:auto;
  }
  .atlas-footer,
  .footer{
    display:block;
  }
  .atlas-form-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   09. MOBILE SMALL
   ========================================================= */
@media(max-width:520px){
  .atlas-content,
  .content,
  .exec-shell{
    padding:12px;
  }
  .atlas-sidebar,
  .side{
    padding:14px;
  }
  .atlas-hero,
  .hero,
  .exec-hero{
    padding:18px;
  }
  .atlas-display,
  h1,
  .exec-title{
    font-size:36px;
    line-height:.95;
  }
  .atlas-heading,
  h2{
    font-size:25px;
  }
  .atlas-kpis,
  .kpis,
  .exec-kpi-grid{
    grid-template-columns:1fr;
  }
  .atlas-stat,
  .stat,
  .exec-kpi{
    min-height:auto;
  }
  .atlas-btn,
  .btn,
  .atlas-tool,
  .tool{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
  .atlas-chip,
  .chip{
    margin-left:0;
    margin-top:6px;
  }
  .atlas-hero-visual,
  .exec-cockpit,
  .media-visual,
  .integration-visual,
  .auto-visual,
  .research-visual,
  .country-visual,
  .revenue-visual{
    min-height:280px;
    height:auto;
  }
  .atlas-quality,
  .quality{
    grid-template-columns:1fr;
  }
  .atlas-ring,
  .ring{
    margin:auto;
  }
  .atlas-row,
  .row{
    grid-template-columns:1fr;
  }
  .atlas-table-pagination{
    display:grid;
    gap:12px;
  }
}

/* =========================================================
   10. EXTRA SMALL
   ========================================================= */
@media(max-width:420px){
  .atlas-display,
  h1,
  .exec-title{
    font-size:32px;
  }
  .atlas-card,
  .card,
  .atlas-panel,
  .panel,
  .atlas-item,
  .item{
    border-radius:18px;
    padding:14px;
  }
  .atlas-command,
  .command{
    padding:14px;
    border-radius:22px;
  }
}

/* =========================================================
   11. RESPONSIVE VISIBILITY
   ========================================================= */
.hide-mobile{display:initial}
.show-mobile{display:none}
@media(max-width:768px){
  .hide-mobile{display:none!important}
  .show-mobile{display:initial!important}
}
.hide-tablet{display:initial}
.show-tablet{display:none}
@media(max-width:1024px){
  .hide-tablet{display:none!important}
  .show-tablet{display:initial!important}
}

/* =========================================================
   12. SAFE AREA SUPPORT
   ========================================================= */
@supports(padding:max(0px)){
  .atlas-safe{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
    padding-bottom:max(16px,env(safe-area-inset-bottom));
  }
}

/* =========================================================
   13. PRINT RESPONSIVE
   ========================================================= */
@media print{
  .atlas-app,
  .app{
    display:block!important;
  }
  .atlas-sidebar,
  .side,
  .atlas-topbar,
  .top,
  .atlas-float,
  .float{
    display:none!important;
  }
  .atlas-content,
  .content{
    max-width:none;
    padding:0;
  }
}