:root {
    --skinlab-navy: #120a52;
    --skinlab-navy-deep: #0b063b;
    --skinlab-navy-soft: #262064;

    --skinlab-pink: #cf168d;
    --skinlab-pink-dark: #ae0f76;
    --skinlab-pink-soft: #fbeaf5;

    --skinlab-grey-900: #292929;
    --skinlab-grey-700: #595959;
    --skinlab-grey-600: #707070;
    --skinlab-grey-500: #8b8b8b;
    --skinlab-grey-300: #d7d7d7;
    --skinlab-grey-100: #f6f6f8;

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

    color: var(--skinlab-grey-900);
    background: #f7f6fa;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(207, 22, 141, 0.09),
            transparent 26rem
        ),
        radial-gradient(
            circle at 100% 15%,
            rgba(18, 10, 82, 0.08),
            transparent 30rem
        ),
        linear-gradient(
            145deg,
            #fbfafd 0%,
            #f4f3f8 100%
        );
}

button,
input {
    font: inherit;
}

.staff-clock-shell {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 30px 18px 18px;
}

.staff-clock-card {
    width: min(100%, 540px);

    margin: auto 0;

    padding: 34px 38px;

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

    border:
        1px solid
        rgba(18, 10, 82, 0.08);

    border-radius: 28px;

    box-shadow:
        0 28px 70px
        rgba(23, 16, 69, 0.11);
}

.brand-header {
    text-align: center;
}

.skinlab-logo {
    display: block;

    width: min(100%, 370px);

    max-height: 145px;

    margin: 0 auto 25px;

    object-fit: contain;
}

.staff-clock-heading {
    text-align: center;
}

.eyebrow {
    margin: 0 0 8px;

    color: var(--skinlab-pink);

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}

h1 {
    margin: 0;

    color: var(--skinlab-navy);

    font-size:
        clamp(
            2rem,
            7vw,
            3rem
        );

    font-weight: 760;

    line-height: 1;

    letter-spacing: -0.045em;
}

.subtitle {
    max-width: 430px;

    margin: 14px auto 0;

    color: var(--skinlab-grey-600);

    font-size: 0.94rem;

    line-height: 1.6;
}

.clock-panel {
    position: relative;

    overflow: hidden;

    margin: 28px 0;

    padding: 24px 20px;

    border-radius: 22px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            var(--skinlab-navy-deep),
            var(--skinlab-navy)
        );

    color: white;

    box-shadow:
        0 16px 34px
        rgba(18, 10, 82, 0.17);
}

.clock-panel::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -72px;
    right: -32px;

    border-radius: 50%;

    background:
        rgba(207, 22, 141, 0.22);
}

.clock-date,
.clock-time,
.clock-zone {
    position: relative;
    z-index: 1;
}

.clock-date {
    font-size: 0.9rem;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );
}

.clock-time {
    margin-top: 5px;

    font-size:
        clamp(
            2.3rem,
            10vw,
            3.5rem
        );

    font-weight: 780;

    line-height: 1.08;

    letter-spacing: -0.045em;
}

.clock-zone {
    margin-top: 6px;

    color:
        rgba(
            255,
            255,
            255,
            0.58
        );

    font-size: 0.72rem;

    font-weight: 650;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.attendance-form {
    display: grid;
    gap: 18px;
}

.field-group {
    display: grid;
    gap: 8px;
}

.field-group label {
    color: var(--skinlab-grey-900);

    font-size: 0.86rem;

    font-weight: 700;
}

.field-group input {
    width: 100%;
    min-height: 56px;

    padding: 0 17px;

    border:
        1px solid
        var(--skinlab-grey-300);

    border-radius: 14px;

    outline: none;

    color: var(--skinlab-grey-900);

    background: white;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.field-group input::placeholder {
    color: #a3a3a3;
}

.field-group input:focus {
    border-color: var(--skinlab-navy);

    box-shadow:
        0 0 0 4px
        rgba(18, 10, 82, 0.09);
}

.location-status {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 13px 14px;

    border: 1px solid #ecebf1;

    border-radius: 13px;

    background: #f8f8fa;

    color: var(--skinlab-grey-600);

    font-size: 0.82rem;

    line-height: 1.45;
}

.status-indicator {
    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    margin-top: 4px;

    border-radius: 50%;

    background: #9e9e9e;
}

.location-status.checking {
    border-color: #eadca7;
    background: #fff9e9;
    color: #785e17;
}

.location-status.checking
.status-indicator {
    background: #d2a318;
}

.location-status.verified {
    border-color: #bee1cb;
    background: #edf8f1;
    color: #23633f;
}

.location-status.verified
.status-indicator {
    background: #3d9562;
}

.location-status.failed {
    border-color: #efcbcb;
    background: #fff1f1;
    color: #993b3b;
}

.location-status.failed
.status-indicator {
    background: #d05252;
}

.attendance-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;
}

.clock-button {
    min-height: 91px;

    padding: 17px;

    border: 0;

    border-radius: 18px;

    text-align: left;

    cursor: pointer;

    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        opacity 120ms ease;
}

.clock-button:hover {
    transform: translateY(-2px);
}

.clock-button:active {
    transform: translateY(0);
}

.clock-button:disabled {
    cursor: wait;
    opacity: 0.55;
}

.button-title,
.button-description {
    display: block;
}

.button-title {
    font-size: 1.08rem;
    font-weight: 800;
}

.button-description {
    margin-top: 6px;

    font-size: 0.73rem;

    line-height: 1.3;

    opacity: 0.72;
}

.clock-in {
    color: white;

    background:
        linear-gradient(
            145deg,
            var(--skinlab-navy),
            var(--skinlab-navy-soft)
        );

    box-shadow:
        0 12px 25px
        rgba(18, 10, 82, 0.18);
}

.clock-out {
    color: white;

    background:
        linear-gradient(
            145deg,
            var(--skinlab-pink-dark),
            var(--skinlab-pink)
        );

    box-shadow:
        0 12px 25px
        rgba(207, 22, 141, 0.16);
}

.result-card {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 22px;

    padding: 15px;

    border-radius: 15px;
}

.result-card.success {
    border: 1px solid #c8e4d3;
    background: #edf8f1;
    color: #245d3e;
}

.result-card.error {
    border: 1px solid #efcece;
    background: #fff1f1;
    color: #8e3838;
}

.result-icon {
    flex: 0 0 auto;

    display: grid;

    place-items: center;

    width: 29px;
    height: 29px;

    border-radius: 50%;

    font-weight: 900;

    background:
        rgba(
            255,
            255,
            255,
            0.75
        );
}

.result-content strong {
    display: block;
    margin-bottom: 3px;
}

.result-content p {
    margin: 0;

    font-size: 0.86rem;

    line-height: 1.45;
}

.attendance-note {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding-top: 2px;

    color: var(--skinlab-grey-500);

    font-size: 0.74rem;

    line-height: 1.45;
}

.attendance-note p {
    margin: 0;
}

.shield-icon {
    flex: 0 0 auto;

    display: grid;

    place-items: center;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: var(--skinlab-pink-soft);

    color: var(--skinlab-pink-dark);

    font-size: 0.72rem;

    font-weight: 900;
}

.staff-clock-footer {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    padding-top: 24px;

    color: var(--skinlab-grey-500);

    font-size: 0.75rem;

    text-align: center;
}

.footer-divider {
    color: var(--skinlab-pink);
}

@media (max-width: 560px) {
    .staff-clock-shell {
        padding: 14px 11px 18px;
    }

    .staff-clock-card {
        padding: 25px 20px;

        border-radius: 22px;
    }

    .skinlab-logo {
        width: min(100%, 320px);

        margin-bottom: 22px;
    }

    .attendance-actions {
        grid-template-columns: 1fr;
    }

    .clock-button {
        min-height: 76px;
    }

    .staff-clock-footer {
        padding-top: 18px;
    }
}

/* Location feedback appears only while an attendance action is being processed. */
.location-status {
    display: none;
}

.location-status.checking,
.location-status.verified,
.location-status.failed {
    display: flex;
}

.continue-button {
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    background: var(--skinlab-navy);
    color: white;
    font-weight: 800;
    cursor: pointer;
}

.continue-button:hover {
    background: var(--skinlab-navy-soft);
}

.employee-status-card {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f7f6fb;
    border: 1px solid rgba(18, 10, 82, 0.08);
}

.employee-status-card strong {
    color: var(--skinlab-navy);
    font-size: 0.95rem;
}

.employee-status-card span {
    color: var(--skinlab-grey-600);
    font-size: 0.82rem;
}

.attendance-actions.single-action {
    grid-template-columns: 1fr;
}

.change-employee-button {
    border: 0;
    padding: 4px;
    background: transparent;
    color: var(--skinlab-grey-600);
    font-size: 0.78rem;
    cursor: pointer;
    text-decoration: underline;
}

.employee-profile-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.employee-name {
    display: block;
    color: var(--skinlab-navy);
    font-size: 1.05rem;
}

.employee-designation {
    display: block;
    margin-top: 3px;
    color: var(--skinlab-grey-600);
    font-size: 0.8rem;
}

.employee-state {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
}

.employee-state.ready {
    color: var(--skinlab-navy);
    background: rgba(18, 10, 82, 0.08);
}

.employee-state.clocked-in {
    color: #23633f;
    background: #e7f5ec;
}

.employee-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px 16px;
    margin-top: 18px;
}

.employee-detail {
    min-width: 0;
}

.employee-detail small {
    display: block;
    margin-bottom: 3px;
    color: var(--skinlab-grey-500);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.employee-detail span {
    display: block;
    overflow-wrap: anywhere;
    color: var(--skinlab-grey-900);
    font-size: 0.82rem;
}

.current-clock-status {
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid rgba(18, 10, 82, 0.08);
    color: var(--skinlab-grey-600);
    font-size: 0.82rem;
}

.current-clock-status strong {
    color: var(--skinlab-navy);
}

@media (max-width: 480px) {
    .employee-detail-grid {
        grid-template-columns: 1fr;
    }
}

.late-arrival-panel {
    padding: 16px;
    border: 1px solid #eed6a7;
    border-radius: 14px;
    background: #fff9eb;
}

.late-arrival-heading {
    color: #775714;
    font-size: 0.9rem;
    font-weight: 800;
}

.late-arrival-panel p {
    margin: 5px 0 14px;
    color: #80682f;
    font-size: 0.8rem;
    line-height: 1.45;
}

.late-arrival-panel label {
    display: block;
    margin-bottom: 7px;
    color: var(--skinlab-grey-900);
    font-size: 0.82rem;
    font-weight: 700;
}

.late-arrival-panel label span {
    color: var(--skinlab-pink);
}

.late-arrival-panel textarea {
    width: 100%;
    min-height: 105px;
    resize: vertical;
    padding: 12px 14px;
    border: 1px solid #d9cfb7;
    border-radius: 12px;
    outline: none;
    background: white;
    color: var(--skinlab-grey-900);
    font: inherit;
    line-height: 1.45;
}

.late-arrival-panel textarea:focus {
    border-color: var(--skinlab-navy);
    box-shadow:
        0 0 0 4px
        rgba(18, 10, 82, 0.08);
}

.development-simulation-warning {
    display: grid;
    gap: 3px;
    margin: 18px 0;
    padding: 13px 15px;
    border: 1px solid #e1c172;
    border-radius: 13px;
    background: #fff8df;
    color: #715516;
}

.development-simulation-warning strong {
    font-size: 0.82rem;
}

.development-simulation-warning span {
    font-size: 0.74rem;
    line-height: 1.4;
}

.employee-state.completed {
    background: #e9f6ee;
    color: #216640;
}

.attendance-complete-status {
    display: grid;
    gap: 4px;
}

.attendance-complete-status span {
    font-size: 0.86rem;
    color: #6d6d78;
}