/* =====================================
   MELVA ARCHIVE RESPONSIVE SYSTEM
===================================== */


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

@media (max-width:1100px){

    .app-shell{
        grid-template-columns:180px 1fr;
    }


    .dashboard-grid{

        grid-template-columns:
        repeat(2, minmax(0,1fr));

        grid-template-areas:

        "calendar agenda"
        "messages tasks";

    }


    .main{

        padding:
        0 18px 20px;

    }


}


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

@media (max-width:760px){


    body{
        overflow-x:hidden;
    }


    .app-shell{

        display:block;
        min-height:100vh;

    }



    /* SIDEBAR MOBILE */

    .sidebar{

        position:fixed;

        top:0;
        left:0;

        width:260px;
        height:100vh;

        z-index:1000;

        transform:translateX(-100%);

        transition:.3s ease;

    }


    .sidebar.open{

        transform:translateX(0);

    }



    .main{

        width:100%;

        padding:
        12px;

    }



    /* HEADER */

    .topbar{

        min-height:auto;

        flex-direction:row;

        align-items:center;

        gap:10px;

    }


    .menu-btn{

        display:grid;

        place-items:center;

        width:42px;

        height:42px;

        border-radius:12px;

        border:0;

        background:#eee9d8;

        cursor:pointer;

        font-size:20px;

    }



    .welcome h1{

        font-size:18px;

    }


    .welcome p{

        font-size:10px;

    }



    /* HERO */

    .hero-landscape{

        height:130px;

        border-radius:18px;

        margin-bottom:15px;

    }



    /* DASHBOARD */

    .dashboard-grid{

        display:flex;

        flex-direction:column;

        gap:14px;

    }



    .card{

        width:100%;

        height:auto !important;

        min-height:auto;

        padding:15px;

        border-radius:18px;

    }



    /* CALENDAR */

    .calendar{

        font-size:13px;

        gap:5px;

    }


    .calendar span{

        min-height:32px;

    }



    /* AGENDA */

    #taskList{

        min-height:auto;

        gap:12px;

    }


    .task-item{

        font-size:14px;

    }



    #newTask{

        height:40px;

        font-size:14px;

    }


    #addTaskBtn{

        width:40px;

        height:40px;

    }



    /* CHAT */

    .chat-card{

        min-height:350px;

    }


    .chat-messages{

        max-height:230px;

    }


    .message-bubble{

        font-size:13px;

    }


    #chatInput{

        height:42px;

        font-size:14px;

    }



    .chat-send{

        width:42px;

        height:42px;

    }



    /* PROFILE */

    .sidebar .sidebar-profile .profile-avatar{

        width:90px;

        height:90px;

    }


}



/* =========================
   SMALL PHONE
========================= */

@media(max-width:400px){


    .main{

        padding:10px;

    }


    .welcome h1{

        font-size:16px;

    }


    .date-box{

        display:none;

    }


    .card{

        padding:12px;

    }


}