/* =========================================================
   EMPLOYEE ATTENDANCE DASHBOARD

   File:
   css/employee.css
   ========================================================= */


.workspace-card {

    width:
        min(
            1180px,
            100%
        );

}


.workspace-description {

    margin-top:
        6px;

    color:
        var(--text-secondary);

    font-size:
        13px;

}


.workspace-user {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

}


.workspace-user__details {

    display:
        grid;

    gap:
        3px;

    text-align:
        right;

}


.workspace-user__details span {

    color:
        var(--text-secondary);

    font-size:
        12px;

}


.role-badge {

    justify-self:
        end;

    width:
        fit-content;

    margin-top:
        4px;

    padding:
        4px 8px;

    border-radius:
        999px;

    color:
        #a9ceff !important;

    background:
        rgba(
            98,
            166,
            255,
            0.09
        );

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;

}


.role-workspace {

    margin-top:
        28px;

}


/* =========================================================
   MESSAGES
   ========================================================= */


.attendance-message {

    margin-bottom:
        18px;

    padding:
        12px 15px;

    border-radius:
        11px;

    font-size:
        13px;

}


.attendance-message--info {

    color:
        #b9d8ff;

    border:
        1px solid
        rgba(
            98,
            166,
            255,
            0.18
        );

    background:
        rgba(
            98,
            166,
            255,
            0.06
        );

}


.attendance-message--error {

    color:
        #ffb3ba;

    border:
        1px solid
        rgba(
            255,
            107,
            120,
            0.2
        );

    background:
        rgba(
            255,
            107,
            120,
            0.06
        );

}


/* =========================================================
   START ATTENDANCE
   ========================================================= */


.attendance-start-card {

    display:
        grid;

    grid-template-columns:
        1.3fr 1fr auto;

    align-items:
        center;

    gap:
        30px;

    padding:
        28px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

    border-radius:
        20px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

}


.attendance-start-card h2 {

    margin-bottom:
        10px;

    font-size:
        24px;

}


.attendance-start-card p {

    color:
        var(--text-secondary);

    font-size:
        14px;

    line-height:
        1.6;

}


.shift-summary {

    display:
        grid;

    gap:
        13px;

}


.shift-summary > div {

    display:
        grid;

    gap:
        4px;

}


.shift-summary span {

    color:
        var(--text-secondary);

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

}


.shift-summary strong {

    font-size:
        14px;

}


.attendance-start-button {

    min-width:
        160px;

}


/* =========================================================
   CURRENT STATUS
   ========================================================= */


.current-status-card {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        24px;

    padding:
        26px;

    border:
        1px solid
        rgba(
            98,
            166,
            255,
            0.15
        );

    border-radius:
        20px;

    background:

        linear-gradient(
            135deg,
            rgba(
                98,
                166,
                255,
                0.075
            ),
            rgba(
                255,
                255,
                255,
                0.018
            )
        );

}


.status-title-row {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.status-title-row h2 {

    font-size:
        30px;

}


.attendance-state {

    padding:
        5px 9px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.attendance-state--active {

    color:
        #8cf0c4;

    background:
        rgba(
            79,
            227,
            164,
            0.1
        );

}


.attendance-state--closed {

    color:
        #aebcd0;

    background:
        rgba(
            174,
            188,
            208,
            0.08
        );

}


.attendance-date {

    margin-top:
        8px;

    color:
        var(--text-secondary);

    font-size:
        13px;

}


.status-duration {

    display:
        grid;

    gap:
        5px;

    min-width:
        170px;

    text-align:
        right;

}


.status-duration span {

    color:
        var(--text-secondary);

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

}


.status-duration strong {

    font-size:
        21px;

}


/* =========================================================
   METRICS
   ========================================================= */


.attendance-metrics {

    display:
        grid;

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

    gap:
        14px;

    margin-top:
        16px;

}


.metric-card {

    display:
        grid;

    gap:
        8px;

    min-height:
        112px;

    padding:
        18px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

    border-radius:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            0.024
        );

}


.metric-card > span {

    color:
        var(--text-secondary);

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

}


.metric-card strong {

    align-self:
        end;

    font-size:
        22px;

}


.metric-card small {

    color:
        var(--text-secondary);

    font-size:
        11px;

}


.metric-value--warning {

    color:
        #ff9a9f;

}


/* =========================================================
   AUX
   ========================================================= */


.aux-section,
.timeline-section {

    margin-top:
        18px;

    padding:
        24px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            0.018
        );

}


.section-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        18px;

}


.section-heading h3 {

    font-size:
        18px;

}


.aux-grid {

    display:
        grid;

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

    gap:
        11px;

}


.aux-button {

    display:
        grid;

    gap:
        7px;

    min-height:
        90px;

    padding:
        15px;

    text-align:
        left;

    border:
        1px solid
        rgba(
            98,
            166,
            255,
            0.12
        );

    border-radius:
        13px;

    color:
        var(--text-primary);

    background:
        rgba(
            98,
            166,
            255,
            0.045
        );

    transition:
        150ms ease;

}


.aux-button:hover:not(:disabled) {

    transform:
        translateY(-2px);

    border-color:
        rgba(
            98,
            166,
            255,
            0.32
        );

    background:
        rgba(
            98,
            166,
            255,
            0.08
        );

}


.aux-button span {

    color:
        var(--text-secondary);

    font-size:
        11px;

    line-height:
        1.4;

}


.aux-button--break {

    border-color:
        rgba(
            255,
            186,
            92,
            0.13
        );

    background:
        rgba(
            255,
            186,
            92,
            0.035
        );

}


.aux-button--break:hover:not(:disabled) {

    border-color:
        rgba(
            255,
            186,
            92,
            0.3
        );

    background:
        rgba(
            255,
            186,
            92,
            0.065
        );

}


/* =========================================================
   WORKSTATION
   ========================================================= */


.workstation-panel {

    margin-top:
        16px;

    padding:
        18px;

    border:
        1px solid
        rgba(
            98,
            166,
            255,
            0.13
        );

    border-radius:
        14px;

    background:
        rgba(
            98,
            166,
            255,
            0.035
        );

}


.workstation-form {

    display:
        grid;

    grid-template-columns:
        1fr 1.5fr;

    gap:
        14px;

}


.workstation-form > div {

    display:
        grid;

    gap:
        7px;

}


.workstation-form label {

    color:
        #d4ddec;

    font-size:
        12px;

    font-weight:
        700;

}


.workstation-form label span {

    margin-left:
        5px;

    color:
        var(--text-secondary);

    font-weight:
        400;

}


.workstation-form input,
.workstation-form textarea {

    width:
        100%;

    padding:
        11px 12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius:
        10px;

    outline:
        0;

    resize:
        vertical;

    color:
        var(--text-primary);

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    font:
        inherit;

}


.workstation-actions {

    grid-column:
        1 / -1;

    display:
        flex !important;

    justify-content:
        flex-end;

    gap:
        10px !important;

}


.active-aux-actions {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        18px;

}


.danger-button {

    min-height:
        42px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(
            255,
            107,
            120,
            0.2
        );

    border-radius:
        11px;

    color:
        #ffabb3;

    background:
        rgba(
            255,
            107,
            120,
            0.055
        );

}


.danger-button:hover:not(:disabled) {

    background:
        rgba(
            255,
            107,
            120,
            0.1
        );

}


/* =========================================================
   TIMELINE
   ========================================================= */


.timeline-list {

    display:
        grid;

    gap:
        0;

}


.timeline-item {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        18px 1fr;

    gap:
        12px;

    padding:
        0 0 22px;

}


.timeline-item:not(:last-child)::before {

    content:
        "";

    position:
        absolute;

    top:
        11px;

    bottom:
        -1px;

    left:
        5px;

    width:
        1px;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.timeline-marker {

    position:
        relative;

    z-index:
        1;

    width:
        11px;

    height:
        11px;

    margin-top:
        4px;

    border-radius:
        50%;

    background:
        #8190a5;

    box-shadow:
        0 0 0 4px
        rgba(
            129,
            144,
            165,
            0.08
        );

}


.timeline-marker--work {

    background:
        #69abff;

}


.timeline-marker--break {

    background:
        #ffbd67;

}


.timeline-marker--session {

    background:
        #6fe0ad;

}


.timeline-body {

    display:
        grid;

    gap:
        6px;

}


.timeline-heading {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

}


.timeline-heading span,
.timeline-details {

    color:
        var(--text-secondary);

    font-size:
        12px;

}


.timeline-notes {

    color:
        #b9c6d8;

    font-size:
        12px;

    line-height:
        1.5;

}


.timeline-empty {

    padding:
        20px 0;

    color:
        var(--text-secondary);

    font-size:
        13px;

}


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


@media (
    max-width: 950px
) {

    .attendance-start-card {

        grid-template-columns:
            1fr;

    }


    .aux-grid {

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

    }


    .attendance-metrics {

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

    }


    .workstation-form {

        grid-template-columns:
            1fr;

    }

}


@media (
    max-width: 650px
) {

    .workspace-header {

        display:
            grid;

    }


    .workspace-user {

        justify-content:
            space-between;

    }


    .workspace-user__details {

        text-align:
            left;

    }


    .role-badge {

        justify-self:
            start;

    }


    .current-status-card {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .status-duration {

        text-align:
            left;

    }


    .attendance-metrics {

        grid-template-columns:
            1fr;

    }


    .aux-grid {

        grid-template-columns:
            1fr;

    }


    .active-aux-actions {

        flex-direction:
            column;

    }


    .active-aux-actions button {

        width:
            100%;

    }


    .timeline-heading {

        flex-direction:
            column;

        gap:
            4px;

    }

}