/* Employee portal foundation. Keep report/desktop styling outside this phone scope.
   Legacy route-specific rules are deliberately normalized here, in one place. */
@media screen and (max-width: 760px) {
    .page:has(.employee-mobile-tabbar) {
        --ep-brand: #0f766e;
        --ep-soft: #e8f5f2;
        --ep-bg: #f4f7f8;
        --ep-surface: #fff;
        --ep-text: #183239;
        --ep-muted: #576d75;
        --ep-border: #dce6e8;
        --ep-radius: 16px;
        --employee-mobile-tabbar-space: calc(72px + env(safe-area-inset-bottom));
        font-family: "Segoe UI", system-ui, sans-serif;
        color: var(--ep-text);
        background: var(--ep-bg) !important;
    }
    html[data-theme="dark"] .page:has(.employee-mobile-tabbar) {
        --ep-brand: #81d8c9;
        --ep-soft: #193b3a;
        --ep-bg: #111e24;
        --ep-surface: #1b2a31;
        --ep-text: #e6f0f2;
        --ep-muted: #b3c5cb;
        --ep-border: #354950;
    }
    .page:has(.employee-mobile-tabbar) main .content.content {
        height: calc(100dvh - 72px - var(--employee-mobile-tabbar-space)) !important;
        min-height: 0 !important; max-height: calc(100dvh - 72px - var(--employee-mobile-tabbar-space)) !important;
        box-sizing: border-box;
        background: var(--ep-bg) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: thin;
    }
    /* One page scroll owner, instead of different full-height panels per route. */
    .page:has(.employee-mobile-tabbar) main .content.content > :is(.employee-page-shell, .employee-portal) {
        display: flex !important; flex-direction: column !important; gap: 16px !important;
        width: 100% !important; min-width: 0 !important;
        height: auto !important; min-height: 0 !important; max-height: none !important;
        margin: 0 !important; padding: 0 !important; overflow: visible !important;
        background: transparent !important;
    }
    .page:has(.employee-mobile-tabbar) .content .employee-unified-heading.employee-unified-heading {
        display: block !important; position: static !important;
        min-height: 0 !important; height: auto !important; width: 100% !important;
        margin: 0 !important; padding: 0 0 4px !important;
        border: 0 !important; border-radius: 0 !important;
        color: var(--ep-text) !important; background: transparent !important;
        box-shadow: none !important; animation: none !important; transform: none !important;
    }
    .page:has(.employee-mobile-tabbar) .content .employee-unified-heading.employee-unified-heading h1 {
        display: block !important; font-size: 24px !important; font-weight: 750 !important;
        line-height: 1.25 !important; letter-spacing: -.025em !important;
        margin: 4px 0 6px !important; color: var(--ep-text) !important;
    }
    .page:has(.employee-mobile-tabbar) .content .employee-unified-heading.employee-unified-heading p {
        display: block !important; font-size: 13px !important; line-height: 1.5 !important;
        font-weight: 400 !important; color: var(--ep-muted) !important;
        margin: 0 !important; opacity: 1 !important; visibility: visible !important;
        white-space: normal !important;
    }
    .page:has(.employee-mobile-tabbar) main .content.content :is(
        .employee-workflow-panel, .employee-request-menu-panel, .employee-actions-panel,
        .employee-attendance-calendar-panel, .employee-payroll-preview-panel,
        .employee-mobile-announcements, .employee-mobile-requests-card) {
        width: 100% !important; min-width: 0 !important; height: auto !important;
        min-height: 0 !important; max-height: none !important;
        margin: 0 !important; padding: 16px !important; gap: 16px !important;
        overflow: visible !important; border: 1px solid var(--ep-border) !important;
        border-radius: var(--ep-radius) !important; background: var(--ep-surface) !important;
        color: var(--ep-text) !important; box-shadow: none !important;
        animation: none !important; transform: none !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content :is(.employee-payslip-latest-list, .employee-service-record-latest-list, .employee-filed-leave-list) {
        display: grid !important; gap: 12px !important; padding: 0 !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content :is(.employee-payroll-card, .employee-filed-leave-card, .employee-action-card) {
        min-height: 88px !important; height: auto !important; margin: 0 !important;
        padding: 16px !important; border: 1px solid var(--ep-border) !important;
        border-radius: 12px !important; box-shadow: none !important;
        white-space: normal !important; overflow-wrap: anywhere;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-payroll-card {
        color: var(--ep-text) !important; background: var(--ep-surface) !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-payroll-card-main :is(strong, em) {
        color: var(--ep-text) !important; font-size: 15px !important; line-height: 1.45 !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-payroll-card-main span {
        color: var(--ep-muted) !important; font-size: 12px !important; line-height: 1.5 !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-payroll-card-arrow {
        width: 32px !important; height: 32px !important; background: var(--ep-soft) !important;
        color: var(--ep-brand) !important; box-shadow: none !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-employment-flat-section h3 {
        font-size: 16px !important; color: var(--ep-text) !important; margin: 0 0 12px !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-employment-flat-row {
        display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px !important; padding: 12px 0 !important; height: auto !important;
        border-bottom: 1px solid var(--ep-border) !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-employment-flat-row .employee-employment-flat-label {
        font-size: 12px !important; line-height: 1.5 !important; color: var(--ep-muted) !important;
        white-space: normal !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-employment-flat-row .employee-employment-flat-value {
        font-size: 15px !important; line-height: 1.5 !important; color: var(--ep-text) !important;
        white-space: normal !important; overflow: visible !important; text-align: left !important;
        overflow-wrap: anywhere; max-width: 100% !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-request-card-grid {
        display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content :is(.employee-request-menu-card, .employee-mobile-glance-card) {
        display: flex !important; flex-direction: column !important; justify-content: center !important;
        align-items: flex-start !important; text-align: left !important;
        min-width: 0 !important; min-height: 140px !important; height: auto !important;
        padding: 16px !important; gap: 8px !important;
        border: 1px solid var(--ep-border) !important; border-radius: var(--ep-radius) !important;
        color: var(--ep-text) !important; background: var(--ep-surface) !important; box-shadow: none !important;
        white-space: normal !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content :is(.employee-request-menu-card, .employee-mobile-glance-card) > span {
        width: 24px !important; height: 24px !important; color: var(--ep-brand) !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content :is(.employee-request-menu-card, .employee-mobile-glance-card) strong {
        color: var(--ep-text) !important; font-size: 14px !important; line-height: 1.4 !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content :is(.employee-request-menu-card, .employee-mobile-glance-card) small {
        color: var(--ep-muted); font-size: 12px !important; line-height: 1.45 !important; font-weight: 400 !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-request-menu-card::before { background: var(--ep-brand) !important; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-attendance-day.is-upcoming { color: var(--ep-muted) !important; }
    .page:has(.employee-mobile-tabbar) .content.content .employee-mobile-hero-card {
        min-height: 144px !important; padding: 20px !important;
        border-radius: var(--ep-radius) !important; background: #0f766e !important; box-shadow: none !important;
    }
    .page:has(.employee-mobile-tabbar) .content.content .employee-mobile-hero-card::after { display: none !important; }
    /* The request destination has the same weight as the other four destinations. */
    .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar .employee-mobile-tab {
        transform: none !important; top: auto !important; margin: 0 !important;
        height: 56px !important; min-height: 52px !important; padding: 6px 2px !important;
        display: grid !important; align-content: center !important; color: var(--ep-muted) !important;
        background: transparent !important; box-shadow: none !important;
    }
    .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar { background: var(--ep-surface) !important; }
    .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar .employee-mobile-tab.active {
        background: var(--ep-soft) !important; color: var(--ep-brand) !important;
    }
    .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar .employee-mobile-tab > span {
        width: 22px !important; height: 22px !important; margin: 0 !important;
        transform: none !important; border: 0 !important; border-radius: 0 !important;
        box-shadow: none !important; background-color: currentColor !important;
        color: inherit !important;
    }
    .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar .employee-mobile-tab strong { color: inherit !important; }
    .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar .is-request > span {
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E") center / contain no-repeat !important;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E") center / contain no-repeat !important;
    }
    .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar .is-request > span::before,
    .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar .is-request > span::after { display: none !important; }
    .page:has(.employee-mobile-tabbar) .employee-mobile-more-panel {
        padding: 8px !important; background: var(--ep-surface) !important; border: 1px solid var(--ep-border) !important;
        border-radius: var(--ep-radius) !important; color: var(--ep-text) !important;
    }
    .page:has(.employee-mobile-tabbar) .employee-mobile-more-panel a { color: var(--ep-text) !important; padding: 12px !important; border-radius: 10px; }
    .page:has(.employee-mobile-tabbar) .content.content :is(.empty-workflow-state, .employee-request-inline-success, .employee-request-error) {
        height: auto !important; min-height: 80px; padding: 20px 16px !important;
        border-radius: 12px !important; font-size: 14px !important; line-height: 1.5 !important;
        white-space: normal; overflow-wrap: anywhere;
    }
    .page:has(.employee-mobile-tabbar) :is(.employee-request-form, .employee-service-record-modal-panel, .employee-attendance-modal, .employee-request-notice) {
        border-radius: 20px !important; background: var(--ep-surface) !important;
        color: var(--ep-text) !important; padding: 20px !important;
        border: 1px solid var(--ep-border) !important; max-width: 100% !important;
    }
    .page:has(.employee-mobile-tabbar) :is(.employee-request-form-backdrop, .employee-request-notice-backdrop, .employee-service-record-modal, .employee-attendance-modal-backdrop) {
        inset: 0 !important; z-index: 16000 !important; padding: 16px !important;
    }
    .page:has(.employee-mobile-tabbar) :is(.employee-request-form, .employee-request-notice, .employee-service-record-modal-panel, .employee-attendance-modal) {
        max-height: calc(100dvh - 32px) !important; overflow-y: auto !important;
        overscroll-behavior: contain;
    }
    .page:has(.employee-mobile-tabbar) .employee-request-form :is(input.form-control, textarea.form-control) {
        min-height: 48px !important; border-radius: 10px !important; border: 1px solid var(--ep-border) !important;
        background: var(--ep-surface) !important; color: var(--ep-text) !important;
    }
    .page:has(.employee-mobile-tabbar) :is(.employee-request-close-button, .employee-service-record-modal-close, .employee-attendance-modal-close) {
        min-width: 44px !important; min-height: 44px !important; box-shadow: none !important;
    }
    .page:has(.employee-mobile-tabbar) .content .btn { min-height: 44px !important; border-radius: 10px !important; }
    /* Header controls must never impose their circular 44px shape on list buttons. */
    .page:has(.employee-mobile-tabbar) .notification-drawer-backdrop {
        z-index: 16000 !important; inset: 0 !important;
    }
    .page:has(.employee-mobile-tabbar) .notification-panel.notification-drawer {
        width: 100% !important; max-width: 100% !important; height: 100dvh !important;
        background: var(--ep-bg) !important; overflow: hidden !important;
    }
    .page:has(.employee-mobile-tabbar) .notification-panel.notification-drawer > header {
        display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important;
        padding: 16px !important; gap: 12px !important; background: var(--ep-surface) !important;
        border-bottom: 1px solid var(--ep-border) !important;
    }
    .page:has(.employee-mobile-tabbar) .notification-drawer-title strong {
        font-size: 20px !important; line-height: 1.3 !important; color: var(--ep-text) !important;
    }
    .page:has(.employee-mobile-tabbar) .notification-drawer-title > span {
        font-size: 12px !important; line-height: 1.5 !important; color: var(--ep-muted) !important;
    }
    .page:has(.employee-mobile-tabbar) .notification-drawer-actions { gap: 6px !important; flex-wrap: wrap; justify-content: flex-end; }
    .page:has(.employee-mobile-tabbar) .notification-panel.notification-drawer .notification-mark-all {
        width: auto !important; height: auto !important; min-height: 44px !important;
        padding: 8px !important; border-radius: 10px !important; border: 0 !important;
        background: var(--ep-soft) !important; color: var(--ep-brand) !important;
        font-size: 12px !important; white-space: normal !important; box-shadow: none !important;
    }
    .page:has(.employee-mobile-tabbar) .notification-panel.notification-drawer .notification-drawer-close {
        width: 44px !important; height: 44px !important; flex: 0 0 44px !important;
        border-radius: 12px !important; color: var(--ep-text) !important; background: var(--ep-bg) !important;
        box-shadow: none !important; border: 1px solid var(--ep-border) !important;
    }
    .page:has(.employee-mobile-tabbar) .notification-panel.notification-drawer .notification-list {
        display: flex !important; flex-direction: column !important; gap: 10px !important;
        padding: 16px 16px calc(24px + env(safe-area-inset-bottom)) !important;
        min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain;
    }
    .page:has(.employee-mobile-tabbar) .notification-panel.notification-drawer .notification-list .notification-item {
        display: flex !important; flex-direction: column !important; flex: 0 0 auto !important;
        align-items: stretch !important; justify-content: flex-start !important; gap: 6px !important;
        width: 100% !important; height: auto !important; min-height: 100px !important; max-height: none !important;
        padding: 16px !important; border-radius: var(--ep-radius) !important;
        border: 1px solid var(--ep-border) !important; box-shadow: none !important;
        background: var(--ep-surface) !important; text-align: left !important;
        white-space: normal !important; transform: none !important; overflow-wrap: anywhere;
    }
    .page:has(.employee-mobile-tabbar) .notification-panel.notification-drawer .notification-list .notification-item.is-unread {
        border-left: 3px solid var(--ep-brand) !important; background: var(--ep-soft) !important;
    }
    .page:has(.employee-mobile-tabbar) .notification-list .notification-item strong {
        font-size: 15px !important; line-height: 1.45 !important; color: var(--ep-text) !important;
    }
    .page:has(.employee-mobile-tabbar) .notification-list .notification-item span {
        font-size: 13px !important; line-height: 1.5 !important; color: var(--ep-muted) !important;
    }
    .page:has(.employee-mobile-tabbar) .notification-list .notification-item small {
        font-size: 11px !important; line-height: 1.5 !important; color: var(--ep-muted) !important;
    }
    .page:has(.notification-drawer-backdrop) .employee-mobile-tabbar { visibility: hidden !important; }
    @media (prefers-reduced-motion: reduce) {
        .page:has(.employee-mobile-tabbar) *, .page:has(.employee-mobile-tabbar) *::before,
        .page:has(.employee-mobile-tabbar) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    }
}