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

.dashboard-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-bottom:24px;

    margin-bottom:28px;

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

}

.dashboard-header-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.dashboard-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

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

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

    flex-shrink:0;

}

.dashboard-icon svg{

    width:30px;

    height:30px;

    color:#ffffff;

}

.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;

    justify-content:center;

    padding:7px 18px;

    border-radius:999px;

    background:#ECFDF5;

    color:#15803D;

    font-size:13px;

    font-weight:700;

    border:1px solid #BBF7D0;

    width:max-content;

}



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

.dashboard-toolbar{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:35px;

    flex-wrap:wrap;

}



/* ==========================================
   Left Side
========================================== */

.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 Side
========================================== */

.dashboard-buttons{

    display:flex;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

}



/* ==========================================
   Content Card
========================================== */

.dashboard-content-card{

    background:#ffffff;

    border-radius:28px;

    padding:40px;

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

    box-shadow:var(--dashboard-shadow);

}



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

.dashboard-divider{

    width:100%;

    height:1px;

    background:var(--dashboard-border);

    margin:28px 0;

}



/* ==========================================
   Hover
========================================== */

.dashboard-content-card:hover{

    box-shadow:

        0 24px 60px rgba(15,23,42,.10),

        0 8px 20px rgba(15,23,42,.05);

}



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

@media (min-width:1200px){

    .dashboard-toolbar{

        flex-wrap:nowrap;

    }

}



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

@media (max-width:1199.98px){

    .dashboard-header{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

    .dashboard-toolbar{

        flex-direction:column;

        align-items:stretch;

    }

    .dashboard-left{

        width:100%;

    }

    .dashboard-buttons{

        width:100%;

        justify-content:flex-start;

    }

}



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

@media (max-width:767.98px){

    .dashboard-content-card{

        padding:25px;

    }

    .dashboard-header-left{

        gap:14px;

    }

    .dashboard-icon{

        width:56px;

        height:56px;

        border-radius:16px;

    }

    .dashboard-icon svg{

        width:26px;

        height:26px;

    }

    .dashboard-title h3{

        font-size:24px;

    }

    .profile-limit-badge{

        font-size:12px;

        padding:6px 14px;

    }

    .dashboard-left{

        flex-direction:column;

        align-items:stretch;

    }

    .dashboard-buttons{

        flex-direction:column;

        align-items:stretch;

    }

}