/* =========================================================
   PENDAMPING GINJAL SEHAT
   ADMIN MOBILE DASHBOARD
========================================================= */

:root {

    --primary: #1769e0;
    --primary-dark: #0754c7;

    --green: #16a36a;
    --orange: #f28b19;
    --purple: #7546e8;
    --pink: #e83e8c;
    --teal: #19a59b;

    --text: #14213d;
    --muted: #7b8499;

    --background: #f6f8fc;
    --card: #ffffff;

    --border: #e9edf4;

    --shadow:
        0 5px 25px rgba(22, 41, 72, .06);

    --radius: 20px;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;

}


a {
    text-decoration: none;
    color: inherit;
}


button {
    font: inherit;
}


.admin-app {

    width: 100%;
    min-height: 100vh;

    padding-bottom: 90px;

}


/* =========================================================
   HEADER
========================================================= */

.app-header {

    height: 74px;

    padding:
        0 18px;

    background:
        rgba(255,255,255,.96);

    display:
        flex;

    align-items:
        center;

    gap: 14px;

    position:
        sticky;

    top: 0;

    z-index: 100;

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

}


.header-menu {

    width: 40px;
    height: 40px;

    border: 0;

    background:
        transparent;

    color:
        var(--text);

    font-size: 22px;

    cursor: pointer;

}


.brand {

    display:
        flex;

    align-items:
        center;

    gap: 9px;

    flex: 1;

}


.brand-logo {

    width: 42px;
    height: 42px;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #16a8e0,
            #13a8c7
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        white;

    font-size:
        20px;

}


.brand-text {

    display:
        flex;

    flex-direction:
        column;

    line-height:
        1.1;

}


.brand-text span {

    font-size:
        12px;

}


.brand-text strong {

    color:
        var(--green);

    font-size:
        16px;

}


.header-right {

    display:
        flex;

    align-items:
        center;

    gap: 10px;

}


.notification-btn {

    position:
        relative;

    width:
        38px;

    height:
        38px;

    border:
        0;

    background:
        transparent;

    font-size:
        21px;

    color:
        #4c566d;

}


.notification-badge {

    position:
        absolute;

    right:
        -1px;

    top:
        -2px;

    min-width:
        18px;

    height:
        18px;

    padding:
        0 4px;

    border-radius:
        20px;

    background:
        #ef4444;

    color:
        white;

    font-size:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.admin-profile {

    display:
        flex;

    align-items:
        center;

    gap: 6px;

    font-size:
        13px;

    font-weight:
        600;

}


.admin-profile i {
    font-size: 10px;
}


.admin-avatar {

    width:
        38px;

    height:
        38px;

    border-radius:
        50%;

    background:
        #edf3ff;

    color:
        var(--primary);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================================================
   CONTENT
========================================================= */

.dashboard-content {

    width:
        100%;

    max-width:
        1180px;

    margin:
        auto;

    padding:
        16px;

}


/* =========================================================
   WELCOME
========================================================= */

.welcome-card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        205px;

    border-radius:
        25px;

    padding:
        27px;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #145cd7,
            #0876df
        );

    display:
        flex;

    align-items:
        center;

    margin-bottom:
        18px;

}


.welcome-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        65%;

}


.welcome-label {

    font-size:
        15px;

    margin-bottom:
        10px;

}


.welcome-card h1 {

    margin:
        0;

    font-size:
        23px;

    line-height:
        1.3;

}


.welcome-card p {

    margin:
        12px 0 0;

    opacity:
        .88;

    font-size:
        13px;

    line-height:
        1.5;

}


.welcome-illustration {

    position:
        absolute;

    right:
        25px;

    font-size:
        100px;

    opacity:
        .18;

}


.floating-gear {

    position:
        absolute;

    right:
        -15px;

    bottom:
        -15px;

    font-size:
        42px;

}


/* =========================================================
   STATISTICS
========================================================= */

.statistics-grid {

    display:
        grid;

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

    gap:
        12px;

    margin-bottom:
        18px;

}


.stat-card {

    background:
        var(--card);

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

    border-radius:
        var(--radius);

    padding:
        17px 14px;

    box-shadow:
        var(--shadow);

}


.stat-icon {

    width:
        42px;

    height:
        42px;

    border-radius:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        11px;

    font-size:
        19px;

}


.stat-icon.purple {
    background: #f1eaff;
    color: var(--purple);
}

.stat-icon.green {
    background: #e8f8ef;
    color: var(--green);
}

.stat-icon.blue {
    background: #e8f1ff;
    color: var(--primary);
}

.stat-icon.orange {
    background: #fff1df;
    color: var(--orange);
}


.stat-number {

    font-size:
        24px;

    font-weight:
        750;

}


.stat-label {

    margin-top:
        3px;

    font-size:
        12px;

    color:
        #505a70;

}


.stat-growth {

    margin-top:
        10px;

    font-size:
        11px;

    font-weight:
        600;

}


.stat-growth span {

    color:
        var(--muted);

    font-weight:
        400;

}


.positive {
    color:
        var(--green);
}


/* =========================================================
   SECTION
========================================================= */

.dashboard-section {

    margin-bottom:
        18px;

}


.section-card {

    background:
        var(--card);

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

    border-radius:
        var(--radius);

    padding:
        18px;

    box-shadow:
        var(--shadow);

}


.section-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        18px;

}


.section-header h2 {

    margin:
        0;

    font-size:
        17px;

}


.view-all {

    color:
        var(--primary);

    font-size:
        13px;

    font-weight:
        600;

}


.period-select {

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

    background:
        white;

    border-radius:
        20px;

    padding:
        8px 11px;

    color:
        #566078;

    font-size:
        11px;

}


/* =========================================================
   CONSULTATION
========================================================= */

.consultation-summary {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

}


.donut-wrapper {

    flex:
        0 0 130px;

    display:
        flex;

    justify-content:
        center;

}


.donut-chart {

    width:
        128px;

    height:
        128px;

    border-radius:
        50%;

    background:
        conic-gradient(
            #1cae9d 0 69%,
            #3b82df 69% 91%,
            #f2ad27 91% 97%,
            #ec3c76 97% 100%
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.donut-chart::before {

    content:
        "";

    position:
        absolute;

    width:
        78px;

    height:
        78px;

    background:
        white;

    border-radius:
        50%;

}


.donut-center {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}


.donut-center strong {

    font-size:
        20px;

}


.donut-center span {

    font-size:
        10px;

    color:
        var(--muted);

}


.consultation-list {

    flex:
        1;

}


.consultation-row {

    display:
        grid;

    grid-template-columns:
        10px 1fr auto;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 0;

    font-size:
        12px;

    border-bottom:
        1px solid #f0f2f6;

}


.consultation-row:last-child {
    border-bottom: 0;
}


.status-dot {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

}


.status-dot.done {
    background: #1cae9d;
}

.status-dot.scheduled {
    background: #3b82df;
}

.status-dot.active {
    background: #f2ad27;
}

.status-dot.cancelled {
    background: #ec3c76;
}


.consultation-row strong {

    font-size:
        12px;

}


/* =========================================================
   USERS
========================================================= */

.user-row {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 0;

    border-bottom:
        1px solid #eef1f5;

}


.user-row:last-child {
    border-bottom: 0;
}


.user-avatar {

    position:
        relative;

    flex:
        0 0 42px;

    width:
        42px;

    height:
        42px;

    border-radius:
        50%;

    overflow:
        hidden;

    background:
        #edf2fa;

}


.user-avatar img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.avatar-fallback {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #8390a7;

}


.user-info {

    min-width:
        0;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

}


.user-info strong {

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    font-size:
        13px;

}


.user-info span {

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    font-size:
        10px;

    color:
        var(--muted);

}


.role-badge {

    padding:
        5px 8px;

    border-radius:
        8px;

    font-size:
        9px;

    font-weight:
        600;

}


.role-badge.pasien {

    background:
        #eaf8f0;

    color:
        var(--green);

}


.role-badge.dokter {

    background:
        #e9f1ff;

    color:
        var(--primary);

}


.user-time {

    display:
        none;

    color:
        var(--muted);

    font-size:
        9px;

}


.user-more {

    background:
        transparent;

    border:
        0;

    color:
        #778196;

}


/* =========================================================
   ADMIN MENU
========================================================= */

.admin-menu-grid {

    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap:
        10px;

}


.admin-menu-item {

    min-height:
        92px;

    border:
        1px solid #edf0f5;

    border-radius:
        15px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    text-align:
        center;

    font-size:
        10px;

    color:
        #394258;

    transition:
        .2s;

}


.admin-menu-item:hover {

    transform:
        translateY(-2px);

}


.menu-icon {

    width:
        37px;

    height:
        37px;

    border-radius:
        11px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        17px;

}


.admin-menu-item.purple .menu-icon {
    background: #f1eaff;
    color: var(--purple);
}

.admin-menu-item.green .menu-icon {
    background: #e8f8ef;
    color: var(--green);
}

.admin-menu-item.blue .menu-icon {
    background: #e9f1ff;
    color: var(--primary);
}

.admin-menu-item.orange .menu-icon {
    background: #fff1df;
    color: var(--orange);
}

.admin-menu-item.pink .menu-icon {
    background: #ffe8f2;
    color: var(--pink);
}

.admin-menu-item.teal .menu-icon {
    background: #e5f8f6;
    color: var(--teal);
}

.admin-menu-item.gray .menu-icon {
    background: #eef1f5;
    color: #68738a;
}


/* =========================================================
   SYSTEM
========================================================= */

.system-status {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        15px;

    border-radius:
        18px;

    background:
        #effbf6;

    border:
        1px solid #d9f2e7;

}


.system-icon {

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    border-radius:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #0ca66d;

    color:
        white;

    font-size:
        18px;

}


.system-info {

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.system-info strong {

    color:
        #087b52;

    font-size:
        12px;

}


.system-info span {

    color:
        #617467;

    font-size:
        9px;

}


.server-status i {

    display:
        inline-block;

    width:
        6px;

    height:
        6px;

    background:
        #16a36a;

    border-radius:
        50%;

}


.system-button {

    padding:
        9px 11px;

    border-radius:
        9px;

    background:
        #0ca66d;

    color:
        white;

    font-size:
        10px;

    font-weight:
        600;

}


/* =========================================================
   BOTTOM NAVIGATION
========================================================= */

.bottom-navigation {

    position:
        fixed;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        76px;

    background:
        rgba(255,255,255,.98);

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

    box-shadow:
        0 -5px 20px rgba(25,45,75,.06);

    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    z-index:
        200;

}


.bottom-nav-item {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    color:
        #7b8498;

    font-size:
        10px;

    font-weight:
        500;

}


.bottom-nav-item i {

    font-size:
        19px;

}


.bottom-nav-item.active {

    color:
        var(--primary);

}


.bottom-nav-item.active i {

    font-weight:
        900;

}


.nav-badge {

    position:
        absolute;

    top:
        10px;

    right:
        calc(50% - 22px);

    min-width:
        17px;

    height:
        17px;

    padding:
        0 4px;

    border-radius:
        20px;

    background:
        #ef4444;

    color:
        white;

    font-size:
        9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================================================
   EMPTY
========================================================= */

.empty-state {

    padding:
        25px;

    text-align:
        center;

    color:
        var(--muted);

}


.empty-state i {

    font-size:
        30px;

    margin-bottom:
        8px;

}


.empty-state p {

    margin:
        0;

    font-size:
        12px;

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 768px) {

    .dashboard-content {

        padding:
            28px;

    }


    .statistics-grid {

        grid-template-columns:
            repeat(4, 1fr);

    }


    .welcome-card {

        min-height:
            230px;

    }


    .user-time {

        display:
            block;

    }


    .bottom-navigation {

        max-width:
            1180px;

        left:
            50%;

        transform:
            translateX(-50%);

        border-radius:
            20px 20px 0 0;

    }

}


@media (max-width: 430px) {

    .admin-menu-grid {

        grid-template-columns:
            repeat(5, 1fr);

        gap:
            7px;

    }


    .admin-menu-item {

        min-height:
            78px;

        font-size:
            8px;

    }


    .menu-icon {

        width:
            31px;

        height:
            31px;

        font-size:
            14px;

    }


    .welcome-card {

        padding:
            21px;

    }


    .welcome-card h1 {

        font-size:
            20px;

    }


    .welcome-content {

        max-width:
            72%;

    }


    .welcome-illustration {

        right:
            5px;

        font-size:
            75px;

    }

}


@media (max-width: 360px) {

    .admin-profile span,
    .admin-profile > i {

        display:
            none;

    }


    .consultation-summary {

        gap:
            10px;

    }


    .donut-wrapper {

        flex-basis:
            105px;

    }


    .donut-chart {

        width:
            105px;

        height:
            105px;

    }


    .donut-chart::before {

        width:
            65px;

        height:
            65px;

    }

}