/*
|--------------------------------------------------------------------------
| Keberadaan Pegawai — Home UI
|--------------------------------------------------------------------------
| Scoped component CSS.
| Layout, typography heading, dan section rhythm mengikuti sistem Home.
|--------------------------------------------------------------------------
*/

/* Penting: jangan membuat container/spacing baru di level section. */
.employee-presence {
    width: 100%;
    min-width: 0;
    margin-inline: 0;
}

/* Heading berasal dari sistem global Home. Hanya cegah overflow copy/link. */
.employee-presence > .home-section-heading {
    width: 100%;
}

.employee-presence > .home-section-heading > div {
    min-width: 0;
}

/* -----------------------------------------------------------------------
   DI LUAR JAM PELAYANAN
------------------------------------------------------------------------ */
.employee-presence-closed {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(13.5rem, .72fr);
    overflow: hidden;
    border: 1px solid var(--ui-border, #d9e3de);
    border-radius: .55rem;
    background: var(--ui-surface, #fff);
}

.employee-presence-closed-main {
    min-width: 0;
    padding: 1.45rem 1.55rem;
}

.employee-presence-closed-state {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .7rem;
    color: #8a6500;
    font-size: .67rem;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.employee-presence-closed-state > span {
    width: .48rem;
    height: .48rem;
    flex: none;
    border-radius: 999px;
    background: #c99016;
}

.employee-presence-closed h3 {
    margin: 0;
    color: var(--ui-ink, #17251f);
    font-size: clamp(1.02rem, 1.45vw, 1.18rem);
    font-weight: 720;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.employee-presence-closed-main > p {
    max-width: 42rem;
    margin: .65rem 0 0;
    color: var(--ui-muted, #5f7068);
    font-size: var(--ui-small-size, .84rem);
    line-height: 1.65;
}

/* Jadwal adalah bagian dari card, bukan card kedua. */
.employee-presence-hours {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 1.35rem 1.4rem;
    border-left: 1px solid var(--ui-border, #d9e3de);
    background: var(--ui-surface-soft, #f7faf8);
}

.employee-presence-hours-label {
    margin: 0 0 .65rem;
    color: var(--ui-emerald-800, #086247);
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.employee-presence-hours dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.employee-presence-hours dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    padding: .52rem 0;
    border-bottom: 1px solid var(--ui-border, #d9e3de);
}

.employee-presence-hours dl > div:last-child {
    border-bottom: 0;
}

.employee-presence-hours dt,
.employee-presence-hours dd {
    margin: 0;
    font-size: .76rem;
    line-height: 1.45;
}

.employee-presence-hours dt {
    color: var(--ui-muted, #5f7068);
    font-weight: 550;
}

.employee-presence-hours dd {
    color: var(--ui-ink, #17251f);
    font-weight: 720;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------
   TABEL SAAT JAM PELAYANAN
------------------------------------------------------------------------ */
.employee-presence-table-shell {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--ui-border, #d9e3de);
    border-radius: .55rem;
    background: var(--ui-surface, #fff);
}

.employee-presence-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.employee-presence-table th {
    padding: .72rem .7rem;
    border-bottom: 1px solid var(--ui-border, #d9e3de);
    background: var(--ui-surface-soft, #f7faf8);
    color: var(--ui-emerald-800, #086247);
    font-size: .64rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .055em;
    text-align: left;
    text-transform: uppercase;
    vertical-align: middle;
}

.employee-presence-table td {
    padding: .78rem .7rem;
    border-bottom: 1px solid #edf2ef;
    color: var(--ui-text, #30423a);
    font-size: .75rem;
    line-height: 1.45;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.employee-presence-table tbody tr:last-child td {
    border-bottom: 0;
}

.employee-presence-table tbody tr:hover {
    background: #fbfdfc;
}

.employee-presence-table th:nth-child(1),
.employee-presence-table td:nth-child(1) {
    width: 2.75rem;
    text-align: center;
}

.employee-presence-table th:nth-child(2) {
    width: 16%;
}

.employee-presence-table th:nth-child(3) {
    width: 22%;
}

.employee-presence-table th:nth-child(4) {
    width: 27%;
}

.employee-presence-table th:nth-child(5),
.employee-presence-table td:nth-child(5) {
    width: 7.6rem;
}

.employee-presence-table th:nth-child(6) {
    width: 15%;
}

.employee-presence-number {
    color: var(--ui-muted, #5f7068);
    font-size: .7rem;
    font-weight: 700;
}

.employee-presence-name {
    color: var(--ui-ink, #17251f);
    font-weight: 700;
}

.employee-presence-status {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 1.65rem;
    padding: .22rem .48rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.employee-presence-status-dot {
    width: .42rem;
    height: .42rem;
    flex: none;
    border-radius: 999px;
    background: currentColor;
}

.employee-presence-status--di-kantor {
    border-color: #cde7da;
    background: #eef8f3;
    color: #087443;
}

.employee-presence-status--dinas-luar {
    border-color: #eedba2;
    background: #fff8e7;
    color: #856100;
}

.employee-presence-status--urusan-penting {
    border-color: #efd4bf;
    background: #fff5ec;
    color: #9b5119;
}

.employee-presence-status--cuti,
.employee-presence-status--izin {
    border-color: #cedcf0;
    background: #f1f6fc;
    color: #315f95;
}

.employee-presence-empty {
    padding: 1rem 1.1rem;
    border: 1px dashed var(--ui-border, #d9e3de);
    border-radius: .55rem;
    background: var(--ui-surface-soft, #f7faf8);
    color: var(--ui-muted, #5f7068);
    font-size: var(--ui-small-size, .84rem);
    text-align: center;
}

/* -----------------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------------------ */
@media (max-width: 860px) {
    .employee-presence-closed {
        grid-template-columns: 1fr;
    }

    .employee-presence-hours {
        border-top: 1px solid var(--ui-border, #d9e3de);
        border-left: 0;
    }

    .employee-presence-table {
        min-width: 760px;
    }
}

@media (max-width: 640px) {
    .employee-presence-closed-main,
    .employee-presence-hours {
        padding: 1.05rem;
    }

    .employee-presence-hours dl > div {
        grid-template-columns: 1fr;
        gap: .12rem;
    }

    .employee-presence-hours dd {
        white-space: normal;
    }

    .employee-presence-table-shell {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .employee-presence-table {
        min-width: 0;
        table-layout: auto;
    }

    .employee-presence-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .employee-presence-table,
    .employee-presence-table tbody,
    .employee-presence-table tr,
    .employee-presence-table td {
        display: block;
        width: 100%;
    }

    .employee-presence-table tbody {
        display: grid;
        gap: .65rem;
    }

    .employee-presence-table tr {
        overflow: hidden;
        border: 1px solid var(--ui-border, #d9e3de);
        border-radius: .55rem;
        background: var(--ui-surface, #fff);
    }

    .employee-presence-table td {
        display: grid;
        grid-template-columns: 6.4rem minmax(0, 1fr);
        gap: .65rem;
        padding: .55rem .7rem;
        border-bottom: 1px solid #edf2ef;
        text-align: left !important;
    }

    .employee-presence-table td::before {
        content: attr(data-label);
        color: var(--ui-muted, #5f7068);
        font-size: .63rem;
        font-weight: 750;
        letter-spacing: .045em;
        text-transform: uppercase;
    }

    .employee-presence-table td:first-child {
        display: none;
    }

    .employee-presence-table td:last-child {
        border-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .employee-presence-table tbody tr {
        transition: none;
    }
}