/* ==========================================
   Dashboard Header
========================================== */

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:35px;

    padding-bottom:25px;

    border-bottom:1px solid var(--dashboard-border);

}


/* ==========================================
   Header Left
========================================== */

.dashboard-header-left{

    display:flex;

    align-items:center;

    gap:18px;

}


/* ==========================================
   Dashboard Icon
========================================== */

.dashboard-icon{

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:linear-gradient(135deg,#0A9396,#38BDF8);

    box-shadow:0 15px 30px rgba(10,147,150,.25);

    flex-shrink:0;

}

.dashboard-icon svg{

    width:30px;

    height:30px;

    color:#ffffff;

}


/* ==========================================
   Title
========================================== */

.dashboard-title{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.dashboard-title h3{

    margin:0;

    font-size:30px;

    font-weight:700;

    color:var(--dashboard-title);

}

.profile-limit-badge{

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:7px 16px;

    border-radius:999px;

    background:#ECFDF5;

    color:#15803D;

    font-size:13px;

    font-weight:700;

    border:1px solid #BBF7D0;

}


/* ==========================================
   Toolbar
========================================== */

.dashboard-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:30px;

    margin-bottom:35px;

}


/* ==========================================
   Left Section
========================================== */

.dashboard-left{

    display:flex;

    align-items:flex-end;

    gap:20px;

    flex-wrap:wrap;

}


/* ==========================================
   Category
========================================== */

.dashboard-category{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.dashboard-label{

    font-size:15px;

    font-weight:600;

    color:var(--dashboard-title);

}


/* ==========================================
   Right Buttons
========================================== */

.dashboard-buttons{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:16px;

    flex-wrap:wrap;

}


/* ==========================================
   Delete Form
========================================== */

#deleteAccountForm{

    display:none;

}


/* ==========================================
   Divider
========================================== */

.dashboard-toolbar::after{

    content:"";

    display:block;

    clear:both;

}


/* ==========================================
   Large Desktop
========================================== */

@media (min-width:1400px){

    .dashboard-toolbar{

        gap:40px;

    }

}


/* ==========================================
   Tablet
========================================== */

@media (max-width:1199.98px){

    .dashboard-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .dashboard-toolbar{

        flex-direction:column;

        align-items:stretch;

        gap:25px;

    }

    .dashboard-left{

        width:100%;

        flex-direction:column;

        align-items:stretch;

    }

    .dashboard-buttons{

        width:100%;

        justify-content:flex-start;

    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width:767.98px){

    .dashboard-icon{

        width:58px;

        height:58px;

        border-radius:16px;

    }

    .dashboard-icon svg{

        width:26px;

        height:26px;

    }

    .dashboard-title h3{

        font-size:24px;

    }

    .profile-limit-badge{

        font-size:12px;

    }

    .dashboard-buttons{

        flex-direction:column;

        align-items:stretch;

    }

}