/* ======================= */
/* === MEDIA QUERIES ==== */
/* ======================= */


/* === DESKTOP BESAR (≥ 1200px) === */
@media (min-width: 1200px) {

    .layout-wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    
    .layout-container {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    
    /* SIDEBAR */
    .layout-container > .bg-dark {
        width: 200px;
        min-height: 100vh;
        flex-shrink: 0;
    }
    
    /* MAIN PAGE */
    .layout-page {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    /* MAIN CONTENT */
    .layout-page main {
        flex: 1;
        padding: 1rem;
    }
    
    /* FOOTER */
    .layout-page footer {
        background-color: #f8f9fa;
    }

    .wide-side, .nav.wide-side {
        width: 1320px !important;
        max-height: 100% !important;
    }

    .footer-wrapper{
        padding: 0 1rem !important;
    }

}

    

  
/* === DESKTOP KECIL (992px - 1199px) === */
@media (min-width: 992px) and (max-width: 1199px) {

    .wide-side, .nav.wide-side {
        width: 1140px !important;
        max-height: 100% !important;
    }
    .footer-wrapper{
        padding: 0 1rem !important;
    }

}

/* === TABLET BESAR / LANDSCAPE (768px - 991px) === */
@media (min-width: 768px) and (max-width: 991px) {

    .layout-container {
      flex-direction: column;
    }
  
    .layout-container > .bg-dark {
      width: 100%;
      height: auto;
      min-height: unset;
    }
  
    .layout-page {
      width: 100%;
    }
  
    .navbar .container-fluid {
      flex-direction: column;
      align-items: flex-start;
    }

    .wide-side, .nav.wide-side {
        width: 960px !important;
        max-height: 100% !important;
    }
    .footer-wrapper{
        padding: 0 1rem !important;
    }

}

  
/* --- MOBILE (≤ 767px) --- */
@media (max-width: 767px) {

    .layout-page main {
        padding: 0rem;
    }
    .layout-page main .container {
      /* padding-left: 0.5rem;
      padding-right: 0.5rem; */
      padding-left: 0px;
      padding-right: 0px;
    }
  
    .layout-container > .bg-dark {
      padding: 1rem 0.5rem;
      text-align: center;
    }
  
    .navbar .container-fluid {
      padding: 0.5rem 1rem;
    }
  
    .wide-side, .nav.wide-side {
        width: 100% !important;
        max-height: 100% !important;
    }
    .footer-wrapper{
        padding: 0 1rem !important;
    }
    img.footer-logo {
        width: 200px !important;
    }
}