/* ==========================================================
   LicitaAI.club
   layout.css
   Design System v2.0
   Mobile First
   Compatível com todos os HTMLs existentes
==========================================================*/

/*==========================================================
  APP
==========================================================*/

.app{
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:var(--header-height) 1fr;
    background:var(--bg-body);
}

/*==========================================================
  HEADER
==========================================================*/

.header{
    position:sticky;
    top:0;
    z-index:var(--z-sticky);
    height:var(--header-height);
    width:100%;
}

/*==========================================================
  BODY
==========================================================*/

.app-body{
    display:grid;
    grid-template-columns:1fr;
    min-height:calc(100vh - var(--header-height));
}

/*==========================================================
  SIDEBAR
==========================================================*/

.sidebar{
    display:none;
    width:var(--sidebar-width);
    background:var(--bg-sidebar);
    border-right:1px solid var(--border-color);
}

/*==========================================================
  MAIN
==========================================================*/

.main{
    min-width:0;
    width:100%;
    padding:var(--space-6);
    overflow-x:hidden;
}

/*==========================================================
  CONTENT
==========================================================*/

.content{
    width:100%;
    max-width:1680px;
    margin-inline:auto;
}

/*==========================================================
  PAGE
==========================================================*/

.page{
    display:flex;
    flex-direction:column;
    gap:var(--space-7);
}

/*==========================================================
  PAGE HEADER
==========================================================*/

.page-header{
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
}

/*==========================================================
  PAGE ACTIONS
==========================================================*/

.page-actions{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-3);
    align-items:center;
    justify-content:space-between;
}

/*==========================================================
  PAGE BODY
==========================================================*/

.page-body{
    display:flex;
    flex-direction:column;
    gap:var(--space-6);
}

/*==========================================================
  SECTION
==========================================================*/

.section{
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
}

/*==========================================================
  FOOTER
==========================================================*/

.footer{
    margin-top:auto;
    padding-top:var(--space-8);
}

/*==========================================================
  TABLET
==========================================================*/

@media(min-width:768px){

    .main{
        padding:var(--space-7);
    }

    .page-actions{
        flex-direction:row;
    }

}

/*==========================================================
  DESKTOP
==========================================================*/

@media(min-width:1024px){

    .app-body{
        grid-template-columns:var(--sidebar-width) 1fr;
    }

    .sidebar{
        display:block;
    }

    .main{
        padding:var(--space-8);
    }

}

/*==========================================================
  LARGE DESKTOP
==========================================================*/

@media(min-width:1440px){

    .content{
        max-width:1800px;
    }

    .main{
        padding:calc(var(--space-8) + 8px);
    }

}