/* =====================================================
   FULL RESPONSIVE LAYOUT
   Paste at the END of your CSS
===================================================== */

/* Global */
html,
body{
    width:100%;
    overflow-x:hidden;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

img{
    max-width:100%;
    height:auto;
}

iframe,
video{
    max-width:100%;
}

table{
    width:100%;
}

input,
select,
textarea,
button{
    max-width:100%;
}

/* Fluid spacing */
.view{
    padding:clamp(15px,3vw,30px);
}

.card{
    padding:clamp(15px,2vw,20px);
}

.topbar{
    padding:clamp(12px,2vw,20px) clamp(15px,3vw,30px);
}

.topbar h2{
    font-size:clamp(17px,3vw,22px);
}

.stat .num{
    font-size:clamp(22px,4vw,30px);
}

.btn{
    min-height:42px;
}

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

@media (max-width:1024px){

    .grid-4{
        grid-template-columns:repeat(2,1fr);
    }

    .grid-2{
        grid-template-columns:1fr;
    }

}

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

@media (max-width:768px){

    .shell{
        display:block;
        width:100%;
    }

    /* Sidebar */

    .rail{
        width:100%;
        flex:none;
        border-right:none;
        border-bottom:4px solid var(--gold);
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        padding:10px;
    }

    .brand{
        width:100%;
        padding:10px;
        border:none;
        margin:0;
    }

    .brand h1{
        font-size:15px;
    }

    .brand p{
        display:none;
    }

    .nav-group{
        display:flex;
        flex-wrap:wrap;
        width:100%;
        margin:0;
    }

    .nav-group .label{
        display:none;
    }

    .nav-link{
        flex:1 1 50%;
        justify-content:center;
        text-align:center;
        padding:12px;
        border-left:none;
        border-bottom:3px solid transparent;
        font-size:12px;
    }

    .nav-link.active{
        border-bottom:3px solid var(--gold);
    }

    .rail-foot{
        display:none;
    }

    /* Header */

    .topbar{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .who{
        width:100%;
    }

    /* Content */

    .view{
        padding:15px;
    }

    /* Cards */

    .grid{
        gap:15px;
    }

    .grid-4{
        grid-template-columns:1fr;
    }

    .grid-2{
        grid-template-columns:1fr;
    }

    .card{
        width:100%;
    }

    /* Statistics */

    .stat{
        text-align:center;
    }

    /* Forms */

    .field-row{
        flex-direction:column;
        gap:10px;
    }

    .field-row input,
    .field-row select{
        width:100%;
        flex:1;
    }

    input,
    select{
        font-size:16px;
    }

    /* Buttons */

    .btn{
        width:100%;
        justify-content:center;
    }

    .btn-sm{
        width:auto;
    }

    /* Tables */

    table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
        -webkit-overflow-scrolling:touch;
    }

    th,
    td{
        padding:8px;
        font-size:12px;
    }

}

/* ============================
   SMALL PHONES
============================ */

@media (max-width:480px){

    html{
        font-size:13px;
    }

    .brand h1{
        font-size:14px;
    }

    .topbar h2{
        font-size:16px;
    }

    .stat .num{
        font-size:20px;
    }

    .card{
        padding:12px;
    }

    .btn{
        width:100%;
        padding:12px;
        font-size:12px;
    }

    .login-card{
        width:95%;
        padding:20px;
    }

    .login-card h1{
        font-size:18px;
    }

}

/* ============================
   VERY SMALL DEVICES
============================ */

@media (max-width:360px){

    .nav-link{
        flex:1 1 100%;
    }

    .topbar{
        padding:10px;
    }

    .view{
        padding:10px;
    }

    .card{
        padding:10px;
    }

    .stat .num{
        font-size:18px;
    }

}