/*
 * Employee Mobile Native UX Layer
 * Scope: mobile/touch only. Desktop layouts stay controlled by existing page CSS.
 */
@media (hover: none), (max-width: 900px) {
    :root {
        --wmf-mobile-radius: 18px;
        --wmf-mobile-tap: 54px;
        --wmf-mobile-gap: 12px;
        --wmf-mobile-shadow: 0 10px 24px rgba(15, 23, 42, .10);
    }

    body.employee-area .app-shell,
    body.employee-area main.wrap.app-shell {
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
        padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    }

    body.employee-area .emp-shell,
    body.employee-area .docs-shell,
    body.employee-area .schedule-shell,
    body.employee-area .mobile-clock-wrap {
        gap: 14px !important;
    }

    body.employee-area .emp-card,
    body.employee-area .docs-card,
    body.employee-area .schedule-card,
    body.employee-area .mobile-clock-card,
    body.employee-area .card {
        border-radius: var(--wmf-mobile-radius) !important;
        box-shadow: var(--wmf-mobile-shadow) !important;
    }

    body.employee-area .emp-head,
    body.employee-area .docs-section-head,
    body.employee-area .section-head {
        align-items: flex-start !important;
        gap: 10px !important;
    }

    body.employee-area .quick-actions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.employee-area .quick-actions-grid .command-action {
        min-height: 108px !important;
        padding: 12px 8px !important;
        border-radius: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        text-align: center !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    body.employee-area .quick-actions-grid .command-action .icon {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        border-radius: 14px !important;
        font-size: 20px !important;
    }

    body.employee-area .quick-actions-grid .command-action .text {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.employee-area .quick-actions-grid .command-action .title {
        display: block !important;
        font-size: 12px !important;
        line-height: 1.16 !important;
        font-weight: 850 !important;
        overflow-wrap: anywhere !important;
    }

    body.employee-area .quick-actions-grid .command-action .desc {
        display: none !important;
    }

    body.employee-area .live-clock-banner .command-action {
        min-height: 76px !important;
        padding: 14px 16px !important;
        border-radius: 20px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    body.employee-area .live-clock-banner .command-action .text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    body.employee-area .live-clock-banner .command-action .desc {
        display: block !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    body.employee-area .live-clock-status {
        padding: 8px 10px !important;
        font-size: 11px !important;
        margin-left: auto !important;
    }

    body.employee-area .emp-button-row,
    body.employee-area .button-row,
    body.employee-area .cert-record-toolbar,
    body.employee-area .month-nav,
    body.employee-area .modal-actions,
    body.employee-area .card-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    body.employee-area .emp-button-row > *,
    body.employee-area .button-row > *,
    body.employee-area .cert-record-toolbar > *,
    body.employee-area .month-nav > *,
    body.employee-area .modal-actions > *,
    body.employee-area .card-actions > * {
        width: 100% !important;
        min-height: var(--wmf-mobile-tap) !important;
    }

    body.employee-area a.emp-link,
    body.employee-area .secondary-btn,
    body.employee-area .small-btn,
    body.employee-area .primary-btn,
    body.employee-area .mobile-clock-btn,
    body.employee-area .button-row button,
    body.employee-area .button-row a,
    body.employee-area .paystub-year-btn,
    body.employee-area .paystub-hide-btn,
    body.employee-area .cert-record-btn,
    body.employee-area .cert-record-hide-btn,
    body.employee-area .filter-grid button,
    body.employee-area .modal-close,
    body.employee-area button[type="submit"],
    body.employee-area input[type="submit"] {
        min-height: var(--wmf-mobile-tap) !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.15 !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    body.employee-area input,
    body.employee-area select,
    body.employee-area textarea {
        min-height: 50px !important;
        border-radius: 15px !important;
        font-size: 16px !important;
    }

    body.employee-area .emp-form-grid,
    body.employee-area .mobile-clock-form-grid,
    body.employee-area .filter-grid,
    body.employee-area .upload-grid,
    body.employee-area .cert-edit-grid,
    body.employee-area .cert-search-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.employee-area .emp-form-grid > *,
    body.employee-area .mobile-clock-form-grid > *,
    body.employee-area .filter-grid > *,
    body.employee-area .upload-grid > *,
    body.employee-area .cert-edit-grid > *,
    body.employee-area .cert-search-row > * {
        grid-column: 1 / -1 !important;
    }

    body.employee-area .docs-grid-4,
    body.employee-area .docs-kpis,
    body.employee-area .status-strip,
    body.employee-area .schedule-stats,
    body.employee-area .schedule-meta,
    body.employee-area .modal-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.employee-area .timeline-item,
    body.employee-area .doc-item {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.employee-area .month-grid {
        gap: 6px !important;
    }

    body.employee-area .day-badge {
        min-height: 44px !important;
        border-radius: 13px !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    body:not(.employee-area) .login-elite-shell {
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }

    body:not(.employee-area) .login-elite-card {
        border-radius: 26px !important;
        box-shadow: 0 18px 42px rgba(15, 23, 42, .13) !important;
    }

    body:not(.employee-area) .login-elite-title {
        font-size: 30px !important;
        line-height: 1.05 !important;
    }

    body:not(.employee-area) .login-elite-form input {
        min-height: 58px !important;
        border-radius: 18px !important;
        font-size: 16px !important;
    }

    body:not(.employee-area) .login-elite-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body:not(.employee-area) .login-elite-actions button,
    body:not(.employee-area) .login-elite-actions .install-app-trigger {
        width: 100% !important;
        min-height: 58px !important;
        border-radius: 18px !important;
        justify-content: center !important;
        font-size: 16px !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

@media (hover: none) and (max-width: 370px), (max-width: 370px) {
    body.employee-area .quick-actions-grid,
    body.employee-area .emp-button-row,
    body.employee-area .button-row,
    body.employee-area .cert-record-toolbar,
    body.employee-area .docs-grid-4,
    body.employee-area .docs-kpis,
    body.employee-area .status-strip,
    body.employee-area .schedule-stats,
    body.employee-area .schedule-meta,
    body.employee-area .modal-meta {
        grid-template-columns: 1fr !important;
    }
}

@media (hover: none), (max-width: 900px) {
    /* Hide the dashboard profile snapshot card on mobile/touch only.
       Desktop keeps the full card exactly as before. */
    body.employee-area .emp-profile-snapshot-card {
        display: none !important;
    }
}


@media (hover: none), (max-width: 900px) {
    /* Dashboard mobile order:
       1) Member Workspace header
       2) Nav bar
       3) Clock In/Out
       4) Quick Actions
       5) Leave & Payroll Snapshot
       Desktop remains unchanged. */
    body.mobile-member-workspace-active .site-header { display: none !important; }

    /* V6: restore V5 red hero colors on the mobile Member Workspace header. */
    body.mobile-member-workspace-active .mobile-member-workspace-header {
        display: block !important;
        color: #fff !important;
        padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 12px max(10px, env(safe-area-inset-left));
        background: linear-gradient(135deg, #b31217 0%, #d32f2f 56%, #861313 100%);
        border-bottom: 1px solid rgba(255,255,255,.14);
        box-shadow: 0 14px 34px rgba(2,6,23,.20);
    }

    body.mobile-member-workspace-active .mobile-member-workspace-inner { width: 100%; max-width: none; margin: 0; display: grid; gap: 12px; }
    body.mobile-member-workspace-active .mobile-member-workspace-top { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; }
    body.mobile-member-workspace-active .mobile-member-workspace-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
    body.mobile-member-workspace-active .mobile-member-workspace-logo { width: 54px; height: 54px; object-fit: contain; flex: 0 0 54px; border-radius: 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); padding: 6px; box-shadow: 0 12px 28px rgba(2,6,23,.18); }
    body.mobile-member-workspace-active .mobile-member-workspace-copy { min-width: 0; display: grid; gap: 4px; }
    body.mobile-member-workspace-active .mobile-member-workspace-eyebrow { display: inline-flex; width: fit-content; max-width: 100%; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.84); font-size: 10px; line-height: 1.1; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.mobile-member-workspace-active .mobile-member-workspace-copy h1 { margin: 0; color: #fff !important; font-size: clamp(19px, 5.5vw, 26px); line-height: 1.05; font-weight: 900; letter-spacing: -.025em; overflow-wrap: anywhere; }
    body.mobile-member-workspace-active .mobile-member-workspace-status { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 10px; border-radius: 999px; background: rgba(15,23,42,.28); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
    body.mobile-member-workspace-active .mobile-member-workspace-status .dot { width: 9px; height: 9px; border-radius: 999px; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
    body.mobile-member-workspace-active .mobile-member-workspace-status.off .dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.20); }
    body.mobile-member-workspace-active .mobile-member-workspace-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    body.mobile-member-workspace-active .mobile-member-workspace-field { min-width: 0; padding: 9px 10px; border-radius: 14px; background: rgba(15,23,42,.18); border: 1px solid rgba(255,255,255,.12); }
    body.mobile-member-workspace-active .mobile-member-workspace-field span { display: block; margin-bottom: 4px; color: rgba(255,255,255,.68); font-size: 10px; line-height: 1; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
    body.mobile-member-workspace-active .mobile-member-workspace-field strong { display: block; color: #fff; font-size: 13px; line-height: 1.15; font-weight: 850; overflow-wrap: anywhere; }

    body.mobile-member-workspace-active .nav-wrap { margin-top: 0 !important; border-top: 0 !important; position: relative; z-index: 50; }
    body.mobile-member-workspace-active .nav-shell { padding-left: max(10px, env(safe-area-inset-left)) !important; padding-right: max(10px, env(safe-area-inset-right)) !important; }
    body.mobile-member-workspace-active .emp-shell { display: grid !important; gap: 14px !important; }
    body.mobile-member-workspace-active .emp-shell > * { order: 50; }
    body.mobile-member-workspace-active .emp-hero { display: none !important; }
    body.mobile-member-workspace-active .live-clock-banner { order: 1 !important; margin-top: 0 !important; }
    body.mobile-member-workspace-active .alert { order: 2 !important; }
    body.mobile-member-workspace-active .emp-profile-snapshot-card { display: none !important; }
    body.mobile-member-workspace-active .emp-grid-2,
    body.mobile-member-workspace-active .emp-shell > .emp-card:not(.emp-profile-snapshot-card) { order: 3 !important; }
    body.mobile-member-workspace-active .emp-grid-2 { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
    body.mobile-member-workspace-active .emp-grid-2 > .emp-card:first-child { order: 1; }
    body.mobile-member-workspace-active .emp-grid-2 > .emp-card:last-child { order: 2; }
}

@media (hover: none) and (max-width: 390px), (max-width: 390px) {
    body.mobile-member-workspace-active .mobile-member-workspace-top { grid-template-columns: 1fr; align-items: start; }
    body.mobile-member-workspace-active .mobile-member-workspace-status { width: fit-content; }
    /* V7: keep identity fields in a compact 2x2 grid on small phones. */
    body.mobile-member-workspace-active .mobile-member-workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    body.mobile-member-workspace-active .mobile-member-workspace-field { padding: 8px 9px !important; border-radius: 15px !important; min-height: 58px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
    body.mobile-member-workspace-active .mobile-member-workspace-field span { margin-bottom: 4px !important; font-size: 9px !important; line-height: 1 !important; white-space: nowrap !important; }
    body.mobile-member-workspace-active .mobile-member-workspace-field strong { font-size: clamp(11px, 3.45vw, 14px) !important; line-height: 1.08 !important; overflow-wrap: anywhere !important; }
}

/* V4 mobile order fix: keep Clock In/Out card directly above Quick Actions on mobile. */

/* V5 mobile spacing fix: even spacing between nav, Clock In/Out, and Quick Actions. */
@media (hover: none), (max-width: 900px) {
    body.mobile-member-workspace-active {
        --wmf-mobile-section-gap: 14px;
    }

    /* V9: remove the gap between the mobile Member Workspace header and the nav bar.
       Keep the lower spacing between Nav, Clock In/Out, and Quick Actions intact. */
    body.mobile-member-workspace-active .mobile-member-workspace-header {
        margin-bottom: 0 !important;
    }

    /* Space between the nav bar and the first dashboard card below it. */
    body.mobile-member-workspace-active .nav-wrap {
        margin-top: 0 !important;
        margin-bottom: var(--wmf-mobile-section-gap) !important;
    }

    body.mobile-member-workspace-active .nav-shell {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.mobile-member-workspace-active main.wrap,
    body.mobile-member-workspace-active main.wrap.app-shell,
    body.mobile-member-workspace-active .app-shell {
        padding-top: 0 !important;
    }

    /* Keep an even gap between Clock In/Out and Quick Actions. */
    body.mobile-member-workspace-active .emp-shell {
        gap: var(--wmf-mobile-section-gap) !important;
        row-gap: var(--wmf-mobile-section-gap) !important;
    }

    body.mobile-member-workspace-active .live-clock-banner {
        margin-top: 0 !important;
        margin-bottom: var(--wmf-mobile-section-gap) !important;
    }

    body.mobile-member-workspace-active .emp-grid-2 {
        gap: var(--wmf-mobile-section-gap) !important;
        row-gap: var(--wmf-mobile-section-gap) !important;
        margin-top: 0 !important;
    }

    body.mobile-member-workspace-active .live-clock-banner + .emp-grid-2,
    body.mobile-member-workspace-active .live-clock-banner + .emp-card,
    body.mobile-member-workspace-active .live-clock-banner + section,
    body.mobile-member-workspace-active .live-clock-banner + div {
        margin-top: 0 !important;
    }
}

/* V7 mobile header identity-pill tightening: two rows, not four, while keeping the V6 red hero + spacing fixes. */
@media (hover: none), (max-width: 900px) {
    body.mobile-member-workspace-active .mobile-member-workspace-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    body.mobile-member-workspace-active .mobile-member-workspace-field {
        min-width: 0 !important;
        min-height: 60px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}

/* V8: mobile-only cleanup - duty status is shown on the Clock In/Out card, so remove header duplicate space. */
@media (hover: none) and (pointer: coarse), (max-width: 820px) {
    body.mobile-member-workspace-active .mobile-member-workspace-top {
        grid-template-columns: 1fr !important;
    }
    body.mobile-member-workspace-active .mobile-member-workspace-brand {
        width: 100% !important;
    }
    body.mobile-member-workspace-active .mobile-member-workspace-status {
        display: none !important;
    }
}

/* V9 final guard: header should touch the mobile nav with no spacer\/gutter. */
@media (hover: none), (max-width: 900px) {
    body.mobile-member-workspace-active .mobile-member-workspace-header {
        margin-bottom: 0 !important;
    }
    body.mobile-member-workspace-active .mobile-member-workspace-header + .nav-wrap,
    body.mobile-member-workspace-active .nav-wrap {
        margin-top: 0 !important;
    }
}

/* ==========================================================
   V11 Employee Mobile Shared UX Layer
   Built on the restored V9 dashboard baseline.
   IMPORTANT:
   - Dashboard-specific mobile order stays protected by .mobile-member-workspace-active.
   - These additions target non-dashboard /employee/ pages only.
   - Desktop / PC / Mac layouts are not changed by this layer.
   ========================================================== */
@media (hover: none) and (pointer: coarse), (pointer: coarse) and (max-width: 1024px) {
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) {
        --wmf-mobile-radius: 18px;
        --wmf-mobile-tap: 54px;
        --wmf-mobile-gap: 14px;
        --wmf-mobile-shadow: 0 10px 24px rgba(15, 23, 42, .10);
        background: #f3f4f6 !important;
        -webkit-text-size-adjust: 100%;
    }

    /* Give every employee page the same clean red mobile header used by the restored dashboard,
       but do not apply the dashboard card re-ordering rules. */
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .site-header {
        display: none !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-header {
        display: block !important;
        color: #fff !important;
        padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 12px max(10px, env(safe-area-inset-left)) !important;
        margin-bottom: 0 !important;
        background: linear-gradient(135deg, #b31217 0%, #d32f2f 56%, #861313 100%) !important;
        border-bottom: 1px solid rgba(255,255,255,.14) !important;
        box-shadow: 0 14px 34px rgba(2,6,23,.20) !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-inner {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        display: grid !important;
        gap: 12px !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-top {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: start !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-brand {
        display: flex !important;
        align-items: center !important;
        gap: 11px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-logo {
        width: 54px !important;
        height: 54px !important;
        object-fit: contain !important;
        flex: 0 0 54px !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,.12) !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        padding: 6px !important;
        box-shadow: 0 12px 28px rgba(2,6,23,.18) !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-copy {
        min-width: 0 !important;
        display: grid !important;
        gap: 4px !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-eyebrow {
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 5px 9px !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.14) !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        color: rgba(255,255,255,.84) !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        font-weight: 850 !important;
        letter-spacing: .07em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-copy h1 {
        margin: 0 !important;
        color: #fff !important;
        font-size: clamp(19px, 5.5vw, 26px) !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        letter-spacing: -.025em !important;
        overflow-wrap: anywhere !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-status {
        display: none !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-field {
        min-width: 0 !important;
        min-height: 60px !important;
        padding: 8px 9px !important;
        border-radius: 15px !important;
        background: rgba(15,23,42,.18) !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-field span {
        display: block !important;
        margin-bottom: 4px !important;
        color: rgba(255,255,255,.68) !important;
        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 850 !important;
        letter-spacing: .07em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-field strong {
        display: block !important;
        color: #fff !important;
        font-size: clamp(11px, 3.45vw, 14px) !important;
        line-height: 1.08 !important;
        font-weight: 850 !important;
        overflow-wrap: anywhere !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .nav-wrap {
        margin-top: 0 !important;
        margin-bottom: var(--wmf-mobile-gap) !important;
        border-top: 0 !important;
        position: relative !important;
        z-index: 50 !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .nav-shell {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) main.wrap,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) main.wrap.app-shell,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .app-shell {
        width: 100% !important;
        max-width: none !important;
        padding-top: 0 !important;
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
        padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-hero,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-hero,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .schedule-hero,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .resource-hero,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .rl-hero,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-clock-hero {
        display: none !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-shell,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-shell,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .schedule-shell,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-clock-wrap,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .resource-links-shell,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .rl-shell {
        display: grid !important;
        gap: var(--wmf-mobile-gap) !important;
        row-gap: var(--wmf-mobile-gap) !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-card,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-card,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .schedule-card,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-clock-card,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .card,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) section[class*="card"],
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) div[class*="card"] {
        border-radius: var(--wmf-mobile-radius) !important;
        box-shadow: var(--wmf-mobile-shadow) !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-head,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-section-head,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .section-head,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .card-header,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .card-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        align-items: start !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-head h1,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-head h2,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-head h3,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-section-head h1,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-section-head h2,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-section-head h3 {
        line-height: 1.12 !important;
        overflow-wrap: anywhere !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-grid-2,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-grid-3,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-grid-4,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .profile-panels,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-grid-4,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-kpis,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .status-strip,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .schedule-stats,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .schedule-meta,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .modal-meta,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .quick-actions-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-form-grid,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-clock-form-grid,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .filter-grid,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .upload-grid,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .cert-edit-grid,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .cert-search-row,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) form[class*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-form-grid > *,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-clock-form-grid > *,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .filter-grid > *,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .upload-grid > *,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .cert-edit-grid > *,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .cert-search-row > *,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) form[class*="grid"] > * {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-button-row,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .button-row,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .cert-record-toolbar,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .month-nav,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .modal-actions,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .card-actions,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-actions,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .entry-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-button-row > *,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .button-row > *,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .cert-record-toolbar > *,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .month-nav > *,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .modal-actions > *,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .card-actions > *,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-actions > *,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .entry-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        min-height: var(--wmf-mobile-tap) !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) a.emp-link,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-btn,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-btn,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-btn-alt,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .secondary-btn,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .small-btn,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .primary-btn,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-clock-btn,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .button-row button,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .button-row a,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .paystub-year-btn,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .paystub-hide-btn,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .cert-record-btn,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .cert-record-hide-btn,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .filter-grid button,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .modal-close,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) button[type="submit"],
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) input[type="submit"] {
        min-height: var(--wmf-mobile-tap) !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.15 !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) input,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) select,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) textarea {
        width: 100% !important;
        min-height: 50px !important;
        border-radius: 15px !important;
        font-size: 16px !important;
        max-width: 100% !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) textarea {
        min-height: 118px !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-table-wrap,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .table-wrap,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-table-wrap {
        overflow: visible !important;
        max-width: 100% !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.emp-table,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.docs-table,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.schedule-table {
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 10px !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.emp-table thead,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.docs-table thead,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.schedule-table thead {
        display: none !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.emp-table tr,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.docs-table tr,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.schedule-table tr {
        display: block !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 8px 22px rgba(15,23,42,.08) !important;
        overflow: hidden !important;
        margin-bottom: 10px !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.emp-table td,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.docs-table td,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.schedule-table td {
        display: grid !important;
        grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
        width: 100% !important;
        padding: 11px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(148,163,184,.22) !important;
        text-align: left !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.emp-table td::before,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.docs-table td::before,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.schedule-table td::before {
        content: attr(data-label);
        color: #64748b !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: .05em !important;
        text-transform: uppercase !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.emp-table td:not([data-label])::before,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.docs-table td:not([data-label])::before,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.schedule-table td:not([data-label])::before {
        content: none !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .edit-box,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .modal,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .modal-card {
        border-radius: 18px !important;
        max-width: calc(100vw - 20px) !important;
    }
}

@media (hover: none) and (pointer: coarse) and (max-width: 520px), (pointer: coarse) and (max-width: 520px) {
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-grid-2,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-grid-3,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-grid-4,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .profile-panels,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-grid-4,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-kpis,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .status-strip,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .schedule-stats,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .schedule-meta,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .modal-meta,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .quick-actions-grid,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-button-row,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .button-row,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-actions,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .entry-actions {
        grid-template-columns: 1fr !important;
    }

    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.emp-table td,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.docs-table td,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) table.schedule-table td {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
}


/* ==========================================================
   Employee Mobile Full-Width Repair V12
   Scope: /employee/ pages only. Does not touch Vehicle, Launcher,
   Admin, Comms, Training, Medical, desktop, PC, or Mac layouts.
   ========================================================== */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
    html,
    body.employee-area {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    body.employee-area .wrap,
    body.employee-area main.wrap,
    body.employee-area main.wrap.app-shell,
    body.employee-area .app-shell {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
    }

    body.employee-area .nav-wrap,
    body.employee-area .nav-shell,
    body.employee-area .mobile-member-workspace-header,
    body.employee-area .mobile-member-workspace-inner {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.employee-area .nav-shell {
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
    }

    body.employee-area .emp-shell,
    body.employee-area .docs-shell,
    body.employee-area .fc-shell,
    body.employee-area .fc-grid-shell,
    body.employee-area .mobile-clock-wrap,
    body.employee-area .profile-shell,
    body.employee-area .schedule-shell,
    body.employee-area .passdown-stack,
    body.employee-area .rl-wrap,
    body.employee-area .rl-employee-shell,
    body.employee-area .rl-shell,
    body.employee-area .resource-links-shell,
    body.employee-area .shift-shell,
    body.employee-area .timesheet-shell {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.employee-area .emp-card,
    body.employee-area .docs-card,
    body.employee-area .command-card,
    body.employee-area .brand-card,
    body.employee-area .fc-card,
    body.employee-area .mobile-clock-card,
    body.employee-area .profile-card,
    body.employee-area .schedule-card,
    body.employee-area .passdown-card,
    body.employee-area .passdown-search-card,
    body.employee-area .rl-card,
    body.employee-area .rl-panel,
    body.employee-area .rl-top-panel,
    body.employee-area .rl-overview-panel,
    body.employee-area .card,
    body.employee-area section[class*="card"],
    body.employee-area div[class*="card"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.employee-area .emp-grid-2,
    body.employee-area .emp-grid-3,
    body.employee-area .emp-grid-4,
    body.employee-area .docs-two,
    body.employee-area .docs-grid-4,
    body.employee-area .docs-kpis,
    body.employee-area .fc-grid-top,
    body.employee-area .fc-top,
    body.employee-area .fc-stats,
    body.employee-area .fc-mini-stats,
    body.employee-area .mobile-clock-grid,
    body.employee-area .profile-grid,
    body.employee-area .profile-kpis,
    body.employee-area .profile-data-grid,
    body.employee-area .schedule-grid,
    body.employee-area .schedule-hero-grid,
    body.employee-area .schedule-stats,
    body.employee-area .grid,
    body.employee-area .grid-2,
    body.employee-area .shift-grid-2,
    body.employee-area .shift-stat-grid,
    body.employee-area .request-type-grid,
    body.employee-area .rl-cards {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.employee-area .emp-table-wrap,
    body.employee-area .table-wrap,
    body.employee-area .schedule-table-wrap,
    body.employee-area .fc-month-card,
    body.employee-area .month-grid,
    body.employee-area .calendar-grid,
    body.employee-area .volunteer-grid,
    body.employee-area .passdown-list,
    body.employee-area .passdown-attachments-grid,
    body.employee-area .rl-card-top,
    body.employee-area .rl-search-row,
    body.employee-area .rl-inline-form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.employee-area .emp-table-wrap,
    body.employee-area .table-wrap,
    body.employee-area .schedule-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.employee-area img,
    body.employee-area video,
    body.employee-area canvas,
    body.employee-area table {
        max-width: 100% !important;
    }
}

/* ==========================================================
   Employee Mobile Native Edge-to-Edge Repair V13
   Scope: /employee/ mobile/touch only.
   Purpose: restore true native-app full width by removing the
   10px side gutters left by V12. Does not touch Vehicle CSS/header.
   ========================================================== */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
    html,
    body.employee-area {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        background: #f3f4f6 !important;
    }

    body.employee-area .mobile-member-workspace-header,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-header,
    body.mobile-member-workspace-active .mobile-member-workspace-header {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box !important;
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }

    body.employee-area .mobile-member-workspace-inner,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-member-workspace-inner,
    body.mobile-member-workspace-active .mobile-member-workspace-inner {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    body.employee-area .nav-wrap,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .nav-wrap,
    body.mobile-member-workspace-active .nav-wrap {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }

    body.employee-area .nav-shell,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .nav-shell,
    body.mobile-member-workspace-active .nav-shell {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }

    body.employee-area main.wrap,
    body.employee-area main.wrap.app-shell,
    body.employee-area .wrap.app-shell,
    body.employee-area .app-shell,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) main.wrap,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) main.wrap.app-shell,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .app-shell,
    body.mobile-member-workspace-active main.wrap,
    body.mobile-member-workspace-active main.wrap.app-shell,
    body.mobile-member-workspace-active .app-shell {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        box-sizing: border-box !important;
    }

    body.employee-area .emp-shell,
    body.employee-area .docs-shell,
    body.employee-area .fc-shell,
    body.employee-area .fc-grid-shell,
    body.employee-area .mobile-clock-wrap,
    body.employee-area .profile-shell,
    body.employee-area .schedule-shell,
    body.employee-area .passdown-stack,
    body.employee-area .rl-wrap,
    body.employee-area .rl-employee-shell,
    body.employee-area .rl-shell,
    body.employee-area .resource-links-shell,
    body.employee-area .shift-shell,
    body.employee-area .timesheet-shell,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .emp-shell,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .docs-shell,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .schedule-shell,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .mobile-clock-wrap,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .resource-links-shell,
    body.employee-area.employee-mobile-shared-ux:not(.mobile-member-workspace-active) .rl-shell,
    body.mobile-member-workspace-active .emp-shell {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.employee-area .emp-card,
    body.employee-area .docs-card,
    body.employee-area .command-card,
    body.employee-area .brand-card,
    body.employee-area .fc-card,
    body.employee-area .mobile-clock-card,
    body.employee-area .profile-card,
    body.employee-area .schedule-card,
    body.employee-area .passdown-card,
    body.employee-area .passdown-search-card,
    body.employee-area .rl-card,
    body.employee-area .rl-panel,
    body.employee-area .rl-top-panel,
    body.employee-area .rl-overview-panel,
    body.employee-area .card,
    body.employee-area section[class*="card"],
    body.employee-area div[class*="card"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.employee-area .emp-grid-2,
    body.employee-area .emp-grid-3,
    body.employee-area .emp-grid-4,
    body.employee-area .docs-two,
    body.employee-area .docs-grid-4,
    body.employee-area .docs-kpis,
    body.employee-area .fc-grid-top,
    body.employee-area .fc-top,
    body.employee-area .fc-stats,
    body.employee-area .fc-mini-stats,
    body.employee-area .mobile-clock-grid,
    body.employee-area .profile-grid,
    body.employee-area .profile-kpis,
    body.employee-area .profile-data-grid,
    body.employee-area .schedule-grid,
    body.employee-area .schedule-hero-grid,
    body.employee-area .schedule-stats,
    body.employee-area .grid,
    body.employee-area .grid-2,
    body.employee-area .shift-grid-2,
    body.employee-area .shift-stat-grid,
    body.employee-area .request-type-grid,
    body.employee-area .rl-cards,
    body.employee-area .quick-actions-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.employee-area .emp-table-wrap,
    body.employee-area .table-wrap,
    body.employee-area .docs-table-wrap,
    body.employee-area .schedule-table-wrap,
    body.employee-area .fc-month-card,
    body.employee-area .month-grid,
    body.employee-area .calendar-grid,
    body.employee-area .volunteer-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}