/* ====================================
   RESET
==================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ====================================
   LAYOUT CONFIG
==================================== */

:root{

    /* SCREEN PADDING */

    --screen-padding-top:20px;
    --screen-padding-right:30px;
    --screen-padding-bottom:0px;
    --screen-padding-left:30px;

    /* SIDEBAR */

    --sidebar-web-width:270px;

    /* QUICK PANEL */

    --quick-panel-width:370px;

    /* LAYOUT */

    --layout-gap:20px;

}

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

body{

    min-height:100vh;
    font-family:Arial, Helvetica, sans-serif;

}

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

.main-layout{

    display:grid;

    grid-template-columns:
        var(--sidebar-web-width)
        minmax(0,1fr)
        var(--quick-panel-width);

    gap:var(--layout-gap);

    min-height:100vh;

    padding-top:var(--screen-padding-top);
    padding-right:var(--screen-padding-right);
    padding-bottom:var(--screen-padding-bottom);
    padding-left:var(--screen-padding-left);

}

/* ====================================
   COLUMN
==================================== */

.sidebar-web,
.panel-content,
.quick-panel{

    min-width:0;

}

/* ====================================
   GUIDE BORDER (HAPUS NANTI)
==================================== */

.sidebar-web{

    border:1px dashed #ef4444;

}

.panel-content{

    border:1px dashed #22c55e;

}

.quick-panel{

    border:1px dashed #3b82f6;

}

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

@media (max-width:1200px){

    .main-layout{

        grid-template-columns:
            var(--sidebar-web-width)
            minmax(0,1fr);

    }

    .quick-panel{

        display:none;

    }

}

/* ====================================
   MOBILE
==================================== */

@media (max-width:768px){

    .main-layout{

        grid-template-columns:1fr;

    }

}