/* Employee mobile responsiveness patch pack */
body.employee-area {
    overflow-x: hidden;
}

body.employee-area .app-shell {
    width: 100%;
    min-width: 0;
}

body.employee-area * {
    box-sizing: border-box;
}

body.employee-area img,
body.employee-area svg,
body.employee-area iframe,
body.employee-area video,
body.employee-area canvas {
    max-width: 100%;
    height: auto;
}

body.employee-area .card,
body.employee-area .emp-card,
body.employee-area .schedule-card,
body.employee-area .fc-card,
body.employee-area .docs-card,
body.employee-area .mc-card,
body.employee-area .vol-card {
    min-width: 0;
}

body.employee-area .section-head,
body.employee-area .emp-head,
body.employee-area .schedule-head,
body.employee-area .doc-section-head,
body.employee-area .fc-day-head,
body.employee-area .modal-head {
    gap: 12px;
}

body.employee-area .table-wrap,
body.employee-area .schedule-table-wrap {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

body.employee-area .schedule-table,
body.employee-area .vol-table,
body.employee-area .emp-table,
body.employee-area .table-wrap table {
    width: 100%;
}

@media (max-width: 900px) {
    body.employee-area .section-head,
    body.employee-area .emp-head,
    body.employee-area .schedule-head,
    body.employee-area .doc-section-head,
    body.employee-area .fc-day-head,
    body.employee-area .modal-head,
    body.employee-area .button-row,
    body.employee-area .emp-button-row,
    body.employee-area .schedule-actions,
    body.employee-area .fc-actions {
        flex-direction: column;
        align-items: stretch;
    }

    body.employee-area .section-head > *,
    body.employee-area .emp-head > *,
    body.employee-area .schedule-head > * {
        width: 100%;
    }

    body.employee-area .section-head button,
    body.employee-area .section-head .btn,
    body.employee-area .section-head a,
    body.employee-area .schedule-actions a,
    body.employee-area .schedule-actions button,
    body.employee-area .fc-actions a,
    body.employee-area .fc-actions button,
    body.employee-area .emp-button-row > * {
        width: 100%;
    }

    body.employee-area .inline-form,
    body.employee-area .filter-grid,
    body.employee-area .mobile-form-grid,
    body.employee-area .form-grid-2,
    body.employee-area .form-grid-3,
    body.employee-area .request-type-grid,
    body.employee-area .schedule-meta,
    body.employee-area .modal-meta {
        grid-template-columns: 1fr !important;
    }

    body.employee-area .inline-form {
        display: grid;
        gap: 10px;
    }

    body.employee-area .inline-form > * {
        width: 100%;
    }
}

@media (max-width: 760px) {
    body.employee-area .wrap,
    body.employee-area .app-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    body.employee-area .emp-hero,
    body.employee-area .docs-hero,
    body.employee-area .mc-hero,
    body.employee-area .vol-hero,
    body.employee-area .fc-hero,
    body.employee-area .schedule-hero,
    body.employee-area .schedule-glass,
    body.employee-area .fc-stat,
    body.employee-area .fc-card,
    body.employee-area .fc-day,
    body.employee-area .emp-card,
    body.employee-area .card {
        border-radius: 18px;
    }

    body.employee-area .emp-hero,
    body.employee-area .docs-hero,
    body.employee-area .mc-hero,
    body.employee-area .vol-hero,
    body.employee-area .fc-hero,
    body.employee-area .schedule-hero {
        padding: 18px;
    }

    body.employee-area .schedule-title,
    body.employee-area .fc-hero h1,
    body.employee-area .docs-hero h1,
    body.employee-area .mc-hero h1,
    body.employee-area .vol-hero h1,
    body.employee-area .emp-hero h2 {
        word-break: break-word;
    }

    body.employee-area .schedule-table {
        min-width: 100% !important;
    }

    body.employee-area .month-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    body.employee-area .month-day-name {
        text-align: center;
    }

    body.employee-area .day-cell {
        min-height: 118px;
        padding: 10px;
    }

    body.employee-area .timeline-item,
    body.employee-area .doc-item,
    body.employee-area .mc-item,
    body.employee-area .fc-slot {
        grid-template-columns: 1fr !important;
    }

    body.employee-area .timeline-side,
    body.employee-area .doc-date,
    body.employee-area .mc-time {
        width: 100%;
    }

    body.employee-area .vol-table {
        min-width: 680px;
    }

    body.employee-area .schedule-table[data-mobile-stack="1"],
    body.employee-area .emp-table[data-mobile-stack="1"],
    body.employee-area .table-wrap table[data-mobile-stack="1"] {
        border-collapse: separate;
        border-spacing: 0;
    }

    body.employee-area .schedule-table[data-mobile-stack="1"] thead,
    body.employee-area .emp-table[data-mobile-stack="1"] thead,
    body.employee-area .table-wrap table[data-mobile-stack="1"] thead {
        display: none;
    }

    body.employee-area .schedule-table[data-mobile-stack="1"] tbody,
    body.employee-area .schedule-table[data-mobile-stack="1"] tr,
    body.employee-area .schedule-table[data-mobile-stack="1"] td,
    body.employee-area .emp-table[data-mobile-stack="1"] tbody,
    body.employee-area .emp-table[data-mobile-stack="1"] tr,
    body.employee-area .emp-table[data-mobile-stack="1"] td,
    body.employee-area .table-wrap table[data-mobile-stack="1"] tbody,
    body.employee-area .table-wrap table[data-mobile-stack="1"] tr,
    body.employee-area .table-wrap table[data-mobile-stack="1"] td {
        display: block;
        width: 100%;
    }

    body.employee-area .schedule-table[data-mobile-stack="1"] tr,
    body.employee-area .emp-table[data-mobile-stack="1"] tr,
    body.employee-area .table-wrap table[data-mobile-stack="1"] tr {
        margin-bottom: 14px;
        padding: 12px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 16px;
        background: #fff;
    }

    body.employee-area .schedule-table[data-mobile-stack="1"] td,
    body.employee-area .emp-table[data-mobile-stack="1"] td,
    body.employee-area .table-wrap table[data-mobile-stack="1"] td {
        padding: 8px 0;
        border: 0 !important;
        text-align: left;
    }

    body.employee-area .schedule-table[data-mobile-stack="1"] td::before,
    body.employee-area .emp-table[data-mobile-stack="1"] td::before,
    body.employee-area .table-wrap table[data-mobile-stack="1"] td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #64748b;
    }

    body.employee-area .schedule-table[data-mobile-stack="1"] td[data-label="" ]::before,
    body.employee-area .emp-table[data-mobile-stack="1"] td[data-label="" ]::before,
    body.employee-area .table-wrap table[data-mobile-stack="1"] td[data-label="" ]::before {
        display: none;
    }
}

@media (max-width: 520px) {
    body.employee-area .month-grid {
        grid-template-columns: 1fr !important;
    }

    body.employee-area .dashboard-panels,
    body.employee-area .dashboard-panels-4,
    body.employee-area .dashboard-panels-3 {
        grid-template-columns: 1fr !important;
    }

    body.employee-area .status-strip,
    body.employee-area .docs-kpis,
    body.employee-area .mc-kpis,
    body.employee-area .vol-kpis,
    body.employee-area .schedule-stats,
    body.employee-area .fc-stats,
    body.employee-area .emp-grid-4,
    body.employee-area .emp-grid-3,
    body.employee-area .emp-grid-2,
    body.employee-area .docs-grid-4,
    body.employee-area .mc-grid-4,
    body.employee-area .vol-grid-4 {
        grid-template-columns: 1fr !important;
    }
}
