/* ===========================================
   Gloobify Meet Dashboard
=========================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    font-family:
    "Segoe UI",
    sans-serif;

    background:#f7f9fc;

    color:#1f2937;

    overflow:hidden;

}

/* ===========================================
   Layout
=========================================== */

.dashboard{

    display:flex;

    width:100vw;

    height:100vh;

}

/* ===========================================
   Main Content
=========================================== */

.main-content{

    flex:1;

    display:flex;

    flex-direction:column;

    overflow:auto;

    background:#f8fafc;

}

/* ===========================================
   Welcome
=========================================== */

.welcome-section{

    padding:40px;

}

.welcome-section h2{

    font-size:34px;

    font-weight:700;

    color:#111827;

}

.welcome-section span{

    color:#2563eb;

}

.welcome-section p{

    margin-top:10px;

    color:#6b7280;

    font-size:17px;

}

/* ===========================================
   Quick Actions
=========================================== */

.quick-actions{

    display:flex;

    gap:18px;

    padding:0 40px 35px;

    flex-wrap:wrap;

}

.quick-actions button{

    border:none;

    cursor:pointer;

    border-radius:14px;

    padding:17px 34px;

    font-size:16px;

    font-weight:600;

    transition:.25s;

}

/* New Meeting */

#newMeetingBtn{

    background:#2563eb;

    color:white;

}

#newMeetingBtn:hover{

    background:#1d4ed8;

}

/* Join */

#joinMeetingBtn{

    background:white;

    color:#2563eb;

    border:2px solid #2563eb;

}

#joinMeetingBtn:hover{

    background:#2563eb;

    color:white;

}

/* Schedule */

#scheduleMeetingBtn{

    background:#111827;

    color:white;

}

#scheduleMeetingBtn:hover{

    background:#000;

}

/* ===========================================
   Cards Grid
=========================================== */

.cards-grid{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:25px;

    padding:0 40px 40px;

}

/* ===========================================
   Generic Card
=========================================== */

.card{

    min-height:260px;

    background:white;

    border-radius:22px;

    box-shadow:

    0 8px 30px

    rgba(0,0,0,.06);

    padding:28px;

    transition:.25s;

}

.card:hover{

    transform:translateY(-4px);

}

/* ===========================================
   Responsive
=========================================== */

@media(max-width:1200px){

.cards-grid{

grid-template-columns:

repeat(2,1fr);

}

}

@media(max-width:900px){

.cards-grid{

grid-template-columns:1fr;

}

.quick-actions{

flex-direction:column;

}

.quick-actions button{

width:100%;

}

.welcome-section{

padding:30px;

}

}

@media(max-width:700px){

.main-content{

width:100%;

}

.welcome-section h2{

font-size:28px;

}

}