/* ============================================================
   EASY WAY OPERATION SYSTEM
   PHASE 5 — MANAGEMENT ANALYTICS
   ============================================================ */


/* ============================================================
   PAGE
   ============================================================ */

.analytics-page {

    max-width:
        1500px;

}


.analytics-heading {

    margin-bottom:
        30px;

}


.analytics-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


/* ============================================================
   KPI
   ============================================================ */

.analytics-kpi-grid {

    display:
        grid;

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

    gap:
        14px;

    margin-bottom:
        18px;

}


.analytics-kpi-card {

    min-height:
        145px;

    padding:
        22px;

    background:
        var(--surface);

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

    border-radius:
        16px;

    transition:
        transform .2s ease,
        border-color .2s ease;

}


.analytics-kpi-card:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--border-light);

}


.analytics-kpi-card span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .14em;

}


.analytics-kpi-card strong {

    display:
        block;

    margin-top:
        22px;

    color:
        var(--text);

    font-size:
        36px;

    line-height:
        1;

    letter-spacing:
        -.04em;

}


.analytics-kpi-card small {

    display:
        block;

    margin-top:
        8px;

    color:
        var(--muted-dark);

    font-size:
        9px;

}


/* ============================================================
   GRID
   ============================================================ */

.analytics-grid-2 {

    display:
        grid;

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

    gap:
        18px;

    margin-bottom:
        18px;

}


/* ============================================================
   PANEL
   ============================================================ */

.analytics-panel {

    min-width:
        0;

    background:
        var(--surface);

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

    border-radius:
        18px;

    overflow:
        hidden;

}


.analytics-panel-header {

    min-height:
        80px;

    padding:
        23px 25px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

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

}


.analytics-panel-header h2 {

    margin:
        0;

    font-size:
        25px;

    line-height:
        1;

    letter-spacing:
        -.035em;

}


/* ============================================================
   BARS
   ============================================================ */

.analytics-bars {

    padding:
        23px 25px;

}


.analytics-bar-row {

    display:
        grid;

    grid-template-columns:
        minmax(
            90px,
            130px
        )
        minmax(
            0,
            1fr
        )
        45px;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        17px;

}


.analytics-bar-row:last-child {

    margin-bottom:
        0;

}


.analytics-bar-meta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

}


.analytics-bar-meta span {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        #999;

    font-size:
        10px;

}


.analytics-bar-meta strong {

    color:
        var(--text);

    font-size:
        10px;

}


.analytics-bar-track {

    height:
        8px;

    overflow:
        hidden;

    border-radius:
        5px;

    background:
        #202020;

}


.analytics-bar-fill {

    height:
        100%;

    min-width:
        2px;

    border-radius:
        5px;

    background:
        #858585;

}


.status-bar-completed,
.status-bar-delivered {

    background:
        #e6e6e6;

}


.status-bar-in_progress {

    background:
        #b6b6b6;

}


.status-bar-review {

    background:
        #9f9f9f;

}


.status-bar-assigned {

    background:
        #777;

}


.status-bar-new {

    background:
        #5b5b5b;

}


.status-bar-waiting {

    background:
        #696969;

}


.status-bar-archived {

    background:
        #444;

}


.priority-bar-urgent {

    background:
        #ededed;

}


.priority-bar-high {

    background:
        #c3c3c3;

}


.priority-bar-medium {

    background:
        #8f8f8f;

}


.priority-bar-low {

    background:
        #5a5a5a;

}


.analytics-bar-percent {

    color:
        var(--muted-dark);

    font-size:
        9px;

    text-align:
        right;

}


/* ============================================================
   REQUEST TYPES
   ============================================================ */

.analytics-type-list {

    padding:
        23px 25px;

}


.analytics-type-row {

    padding:
        14px 0;

    border-bottom:
        1px solid #202020;

}


.analytics-type-row:first-child {

    padding-top:
        0;

}


.analytics-type-row:last-child {

    padding-bottom:
        0;

    border-bottom:
        none;

}


.analytics-type-title {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        7px;

}


.analytics-type-title strong {

    color:
        #bbb;

    font-size:
        11px;

}


.analytics-type-title span {

    color:
        var(--muted-dark);

    font-size:
        9px;

}


.analytics-type-bar {

    height:
        6px;

    overflow:
        hidden;

    border-radius:
        4px;

    background:
        #202020;

}


.analytics-type-fill {

    height:
        100%;

    min-width:
        2px;

    border-radius:
        4px;

    background:
        #999;

}


.analytics-type-row small {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--muted-dark);

    font-size:
        8px;

}


/* ============================================================
   DEADLINE HEALTH
   ============================================================ */

.deadline-health-list {

    padding:
        24px 25px;

}


.deadline-health-item {

    margin-bottom:
        20px;

}


.deadline-health-item:last-child {

    margin-bottom:
        0;

}


.deadline-health-top {

    display:
        grid;

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

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        7px;

}


.deadline-health-top strong {

    color:
        #b5b5b5;

    font-size:
        10px;

}


.deadline-health-top > span:last-child {

    color:
        var(--muted-dark);

    font-size:
        9px;

}


.deadline-health-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #888;

}


.health-overdue {

    background:
        #e5e5e5;

}


.health-due_today {

    background:
        #b5b5b5;

}


.health-upcoming {

    background:
        #777;

}


.health-no_deadline {

    background:
        #4d4d4d;

}


.health-bar-overdue {

    background:
        #d8d8d8;

}


.health-bar-due_today {

    background:
        #aaa;

}


.health-bar-upcoming {

    background:
        #777;

}


.health-bar-no_deadline {

    background:
        #4a4a4a;

}


/* ============================================================
   TRENDS
   ============================================================ */

.trend-chart {

    min-height:
        275px;

    padding:
        25px;

    display:
        grid;

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

    align-items:
        end;

    gap:
        8px;

}


.trend-chart.monthly-chart {

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

}


.trend-day {

    height:
        215px;

    display:
        grid;

    grid-template-rows:
        22px
        minmax(
            0,
            1fr
        )
        45px;

    align-items:
        end;

    text-align:
        center;

}


.trend-value {

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        800;

}


.trend-column-area {

    height:
        100%;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    padding:
        0 5px;

}


.trend-column {

    width:
        100%;

    max-width:
        34px;

    min-height:
        3px;

    border-radius:
        6px 6px 2px 2px;

    background:
        #999;

}


.trend-label {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        3px;

    padding-top:
        10px;

}


.trend-label strong {

    color:
        #999;

    font-size:
        8px;

    text-transform:
        uppercase;

}


.trend-label span {

    color:
        #555;

    font-size:
        8px;

}


/* ============================================================
   TEAM ANALYTICS
   ============================================================ */

.team-analytics-panel {

    margin-bottom:
        18px;

}


.analytics-team-table-wrapper {

    width:
        100%;

    overflow-x:
        auto;

}


.analytics-team-table {

    width:
        100%;

    min-width:
        900px;

    border-collapse:
        collapse;

}


.analytics-team-table th {

    padding:
        14px 16px;

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

    background:
        #101010;

    color:
        var(--muted);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-align:
        left;

    white-space:
        nowrap;

}


.analytics-team-table td {

    padding:
        16px;

    border-bottom:
        1px solid #202020;

    color:
        #999;

    font-size:
        10px;

    white-space:
        nowrap;

}


.analytics-team-table tbody tr:last-child td {

    border-bottom:
        none;

}


.analytics-team-table tbody tr:hover {

    background:
        #151515;

}


.analytics-employee {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.analytics-avatar {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        9px;

    background:
        #181818;

    color:
        var(--text);

    font-size:
        10px;

    font-weight:
        900;

}


.analytics-employee strong {

    display:
        block;

    color:
        var(--text);

    font-size:
        11px;

}


.analytics-employee span {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--muted-dark);

    font-size:
        8px;

}


.analytics-warning {

    color:
        #d0d0d0;

    font-weight:
        900;

}


.analytics-danger {

    color:
        #fff;

    font-weight:
        900;

}


.analytics-success {

    color:
        #aaa;

    font-weight:
        800;

}


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

.analytics-empty {

    padding:
        45px 25px;

    color:
        var(--muted-dark);

    font-size:
        11px;

    text-align:
        center;

}


/* ============================================================
   NOTE
   ============================================================ */

.analytics-note {

    display:
        grid;

    grid-template-columns:
        28px
        minmax(
            0,
            1fr
        );

    gap:
        12px;

    padding:
        16px 18px;

    background:
        #111;

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

    border-radius:
        12px;

}


.analytics-note-mark {

    width:
        24px;

    height:
        24px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        7px;

    color:
        #aaa;

    font-size:
        10px;

    font-weight:
        900;

}


.analytics-note p {

    color:
        #6b6b6b;

    font-size:
        10px;

    line-height:
        1.7;

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1150px) {

    .analytics-kpi-grid {

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

    }

}


@media (max-width: 900px) {

    .analytics-kpi-grid {

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

    }


    .analytics-grid-2 {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 650px) {

    .analytics-kpi-grid {

        grid-template-columns:
            1fr;

    }


    .analytics-heading {

        align-items:
            flex-start;

    }


    .analytics-actions {

        width:
            100%;

    }


    .analytics-actions a {

        width:
            100%;

    }


    .analytics-bar-row {

        grid-template-columns:
            1fr
            45px;

        gap:
            6px;

    }


    .analytics-bar-meta {

        grid-column:
            1 / -1;

    }


    .analytics-panel-header {

        align-items:
            flex-start;

    }


    .trend-chart {

        padding:
            20px 12px;

        gap:
            4px;

    }

}