/* large screens */

@media(max-width:1199px){

    .panel-grid,
    .comparison-grid{
        grid-template-columns:1fr;
    }

    .sidebar{
        width:220px;
    }

    .topbar h1{
        font-size:24px;
    }

    .main-content{
        padding:20px;
    }
}

/* tablet */

@media(max-width:992px){

    .app-container{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
        height:auto;
        position:relative;
        padding:16px;
        border-right:none;
        border-bottom:1px solid var(--border);
    }

    .sidebar nav ul{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        gap:10px;
    }

    .sidebar li{
        margin-bottom:0;
    }

    .nav-btn{
        text-align:center;
        padding:10px 14px;
    }

    .theme-toggle{
        margin-top:16px;
        padding-top:16px;
    }

    .main-content{
        padding:18px;
    }

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

    .topbar{
        position:relative;
    }
}

/* mobile */

@media(max-width:767px){

    body{
        font-size:14px;
    }

    .main-content{
        padding:14px;
    }

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

    .topbar h1{
        font-size:22px;
    }

    .sidebar nav ul{
        flex-direction:column;
        width:100%;
    }

    .nav-btn{
        width:100%;
        text-align:left;
    }

    .button-group,
    .metrics{
        flex-direction:column;
        gap:8px;
    }

    .button-group button{
        width:100%;
    }

    .card{
        padding:18px;
    }

    textarea{
        min-height:90px;
    }

    .output-box{
        min-height:250px;
        max-height:400px;
    }

    .card-grid,
    .sweep-grid,
    .comparison-grid{
        grid-template-columns:1fr;
    }

    .comparison-output{
        min-height:180px;
    }

    th,
    td{
        padding:10px;
        font-size:13px;
    }

    .table-container{
        overflow-x:auto;
    }
}

/* small mobile */

@media(max-width:480px){

    .logo h2{
        font-size:22px;
    }

    .topbar h1{
        font-size:20px;
    }

    .card{
        padding:16px;
    }

    .card h3{
        font-size:18px;
    }

    button{
        font-size:14px;
        padding:10px 14px;
    }

    textarea,
    select,
    input{
        font-size:14px;
        padding:10px;
    }

    .toast{
        left:10px;
        right:10px;
        bottom:10px;
        text-align:center;
    }

    .metrics{
        font-size:13px;
    }

    .output-box{
        min-height:220px;
    }
}