/* ======================================================
   RESPONSIVE DESIGN
   Sistem Kenderaan Muzium
====================================================== */

/* Desktop Besar */
@media (min-width:1400px){

    .wrapper{

        max-width:1800px;

        margin:auto;

    }

}


/* Laptop */
@media (max-width:1200px){

    .wrapper{

        gap:18px;

        padding:18px;

    }

    .sidebar{

        width:230px;

    }

}


/* Tablet */
@media (max-width:992px){

    .wrapper{

        flex-direction:column;

    }

    .sidebar{

        width:100%;

    }

    .main{

        width:100%;

    }

}


/* Mobile */
@media (max-width:768px){
    html,body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .topbar{
        height:auto;
        min-height:64px;
        padding:8px 10px;
    }

    .topbar-inner{
        display:grid;
        grid-template-columns:auto minmax(0,1fr) auto;
        gap:8px;
        width:100%;
    }

    .mobile-menu-btn{
        margin:0;
        font-size:24px;
    }

    .brand{
        gap:8px;
        overflow:hidden;
    }

    .brand-icon{
        width:40px;
        height:40px;
        flex-basis:40px;
        padding:5px;
    }

    .brand-icon img{
        max-width:30px;
        max-height:30px;
    }

    .brand-title{
        overflow:hidden;
        font-size:13px;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .ai-badge{
        padding:4px 7px;
        margin-left:5px;
        font-size:9px;
    }

    .top-actions{
        width:auto;
        max-width:100%;
        margin:0;
        gap:6px;
    }

    .top-actions > .top-btn{
        display:none;
    }

    .top-actions form{
        width:auto;
        margin:0;
    }

    .top-btn{
        width:auto;
        padding:9px 10px;
        border-radius:10px;
        font-size:11px;
    }

    .wrapper{

        display:block;

        padding:12px;

    }

    .sidebar{

        width:100%;

        margin-bottom:15px;

    }

    .main{

        width:100%;
        min-width:0;
        overflow:hidden;

        padding:12px;

        border-radius:18px;

    }

    .brand-sub{

        display:none;

    }
    .sidebar{

    display:none;

}

.sidebar.show-sidebar{

    display:block;

}

}


/* Small Phone */
@media (max-width:576px){

    .top-actions{

        width:auto;

    }

    .top-btn{

        width:auto;

        text-align:center;

    }

}