/* Employee attendance phone view. Status classes still come from attendance data. */
.employee-attendance-view-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.employee-attendance-view-controls > span { font-size: 12px; color: var(--ep-muted, #607187); }
.employee-attendance-view-controls button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 10px;
    background: var(--ep-soft, #e2f5f0); color: var(--ep-brand, #00877d); font: inherit; font-size: 12px;
}
.employee-attendance-view-controls button:focus-visible { outline: 2px solid var(--ep-brand, #00877d); outline-offset: 2px; }
.employee-attendance-view-controls button svg { transition: transform .32s cubic-bezier(.22, .72, .18, 1); }
.employee-attendance-view-controls button[aria-expanded="true"] svg { transform: rotate(180deg); }
.employee-attendance-calendar-body { display: grid; gap: 16px; min-width: 0; overflow: hidden; align-content: start; }
.employee-attendance-calendar-panel { overflow-anchor: none; }
.employee-attendance-day-details {
    display: grid; grid-template-rows: 1fr; min-width: 0;
    animation: attendance-details-expand .2s ease-out;
    scroll-margin-top: 88px;
    scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom));
}
.employee-attendance-day-details-content { min-height: 0; overflow: hidden; }
.employee-attendance-day-details-body { padding-top: 16px; border-top: 1px solid var(--ep-border, #e0ebee); }
.employee-attendance-day-details-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.employee-attendance-day-details-heading span { color: var(--ep-brand, #00877d); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.employee-attendance-day-details-heading h3 { margin: 4px 0 0; color: var(--ep-text, #101e43); font-size: 16px; line-height: 1.3; }
.employee-attendance-day-details .employee-attendance-modal-log { min-width: 0; color: var(--ep-muted, #607187); background: var(--ep-bg, #f2f8fa); }
.employee-attendance-day-details .employee-attendance-modal-log.is-present { color: var(--ep-brand, #00877d); background: var(--ep-soft, #e2f5f0); }
.employee-attendance-day-details .employee-attendance-modal-log strong { font-size: clamp(10px, 3vw, 14px); }
.employee-attendance-page .employee-attendance-day[aria-expanded="true"] { outline: 2px solid var(--ep-text, #101e43); outline-offset: -2px; }
@keyframes attendance-details-expand {
    from { grid-template-rows: 0fr; opacity: 0; }
    to { grid-template-rows: 1fr; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .employee-attendance-day-details { animation: none; }
    .employee-attendance-view-controls button svg { transition: none; }
}
@media screen and (max-width: 760px) {
    body .page:has(.employee-attendance-page) {
        --ep-brand: #00877d;
        --ep-soft: #e2f5f0;
        --ep-bg: #f2f8fa;
        --ep-surface: #fff;
        --ep-text: #101e43;
        --ep-muted: #607187;
        --ep-border: #e0ebee;
    }
    html[data-theme="dark"] body .page:has(.employee-attendance-page) {
        --ep-brand: #7ddfc9;
        --ep-soft: #1b423f;
        --ep-bg: #12232b;
        --ep-surface: #1b303b;
        --ep-text: #edf6ff;
        --ep-muted: #b4c8d7;
        --ep-border: #354d58;
    }
    html body .page:not(.login-only-layout):has(.employee-attendance-page) > .sidebar,
    html body .page:not(.login-only-layout):has(.employee-attendance-page) > .sidebar .brand-panel {
        background: var(--ep-surface) !important;
        border-bottom-color: var(--ep-border) !important;
    }
    body .page:has(.employee-attendance-page) .sidebar .brand-panel .employee-mobile-header-actions > .theme-toggle,
    body .page:has(.employee-attendance-page) .sidebar .brand-panel .employee-mobile-header-actions > .notification-menu > summary {
        border-radius: 50% !important;
        color: var(--ep-muted) !important;
        background: var(--ep-surface) !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-unified-heading.employee-unified-heading h1 {
        font-size: 28px !important;
        letter-spacing: -.04em !important;
        color: var(--ep-text) !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-mobile {
        display: grid !important;
        gap: 14px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-log-strip {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-log-card {
        display: grid !important;
        justify-items: center;
        align-content: center;
        gap: 6px !important;
        min-width: 0 !important;
        min-height: 114px !important;
        padding: 10px 3px !important;
        border: 1px solid var(--ep-border) !important;
        border-radius: 13px !important;
        background: var(--ep-surface) !important;
        box-shadow: 0 4px 12px #28445b06 !important;
        text-align: center;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-log-card::before { display: none !important; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-log-card > span {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--ep-muted) !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-transform: uppercase;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-log-card strong {
        color: var(--ep-text) !important;
        font-size: clamp(12px, 3.7vw, 17px) !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: -.04em !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-log-card.is-empty strong { font-size: 23px !important; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-log-card small {
        color: var(--ep-muted) !important;
        font-size: 9px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
        white-space: nowrap;
    }
    .ep-attendance-log-icon {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        color: #007f75;
        background: #e1f5ef;
    }
    .ep-attendance-log-icon svg { width: 21px; height: 21px; }
    .ep-attendance-log-icon.is-break { color: #087abc; background: #e3f1ff; }
    .ep-attendance-log-icon.is-evening { color: #6253ac; background: #ece9ff; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-calendar-panel {
        display: grid !important;
        gap: 16px !important;
        padding: 16px 12px 10px !important;
        border: 1px solid var(--ep-border) !important;
        border-radius: 20px !important;
        background: var(--ep-surface) !important;
        box-shadow: 0 4px 16px #28445b05 !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-calendar-heading {
        display: grid !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-calendar-title {
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 12px;
        align-items: center;
    }
    .ep-attendance-calendar-icon {
        grid-row: 1 / 3;
        width: 40px;
        height: 40px;
        padding: 10px;
        color: var(--ep-brand);
        background: var(--ep-soft);
        border-radius: 12px;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-calendar-title > span {
        grid-column: 2;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        color: var(--ep-brand) !important;
        font-size: 9px !important;
        line-height: 1.3 !important;
        letter-spacing: .08em !important;
        font-weight: 750 !important;
        text-transform: uppercase;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-calendar-title > h2 {
        grid-column: 2;
        color: var(--ep-text) !important;
        font-size: 22px !important;
        line-height: 1.2 !important;
        letter-spacing: -.035em !important;
        margin: 2px 0 0 !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-legend {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px 12px !important;
        justify-content: flex-start !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-legend > span {
        display: inline-flex !important;
        align-items: center;
        gap: 5px;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--ep-muted) !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
        white-space: nowrap;
        text-transform: none !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-legend > span::before {
        content: "";
        position: static !important;
        transform: none !important;
        flex: 0 0 9px;
        margin: 0;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #008768;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-legend > .missing::before { background: #efb518; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-legend > .absent::before { background: #e42d35; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-calendar-viewport { min-width: 0; overflow: hidden !important; }
    /* Keep this gap in sync with CalendarTrackStyle in the component. */
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-calendar-track { display: flex; align-items: flex-start; gap: .78rem !important; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-month { flex: 0 0 100%; min-width: 0; }
    /* Off-screen months retain their horizontal slots without stretching the active month. */
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-month[aria-hidden="true"] { height: 0; min-height: 0; overflow: hidden; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page :is(.employee-attendance-weekdays, .employee-attendance-days) {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 5px !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-weekdays { margin-bottom: 8px !important; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-weekdays span {
        color: var(--ep-muted) !important;
        font-size: 9px !important;
        text-transform: uppercase;
        text-align: center;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-day {
        min-width: 0 !important;
        min-height: 36px !important;
        aspect-ratio: 1.08;
        height: auto !important;
        padding: 0 !important;
        display: grid;
        place-items: center;
        border: 0 !important;
        border-radius: 9px !important;
        color: var(--ep-text) !important;
        background: var(--ep-bg) !important;
        box-shadow: none !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-day > span { font-size: 13px !important; font-weight: 650 !important; color: inherit !important; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-day.is-complete { background: #008768 !important; color: #fff !important; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-day.is-missing { background: #f6c442 !important; color: #573900 !important; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-day.is-absent { background: #e42d35 !important; color: #fff !important; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-day.is-rest { color: var(--ep-muted) !important; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-month-dots { display: flex; justify-content: center; gap: 0; margin: 0 !important; padding: 0 !important; }
    .employee-attendance-month-dots > button { display: grid; place-items: center; width: 28px; height: 28px !important; min-height: 28px !important; padding: 0; border: 0; border-radius: 50%; background: transparent; }
    .employee-attendance-month-dots > button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ep-border); }
    .employee-attendance-month-dots > button.active::before { background: var(--ep-brand); }
    @media (max-width: 360px) {
        .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-log-strip { gap: 5px !important; }
        .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-log-card small { font-size: 8px !important; }
        .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-calendar-panel { padding-inline: 10px !important; }
        .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-page .employee-attendance-legend { gap: 7px !important; }
    }
    @media (prefers-reduced-motion: reduce) {
        .employee-attendance-calendar-track { transition: none !important; }
    }
}