/**
 * HR2GO - Mobile Optimization & Responsive Touch Stylesheet
 * Location: assets/css/mobile.css
 * 
 * Enhances usability, touch ergonomics, and responsive layout across smartphones and small touch devices.
 */

/* ==========================================================================
   1. GLOBAL TOUCH & VIEWPORT ERGONOMICS
   ========================================================================== */
html, body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Smooth touch momentum scrolling for all scroll containers */
.touch-scroll,
.overflow-x-auto,
.overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* Eliminate tap delay on touch devices */
@media (hover: none) and (pointer: coarse) {
    button, a, select, input, [role="button"] {
        touch-action: manipulation;
    }
}

/* Prevent iOS Safari forced auto-zoom on input focus */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   2. HIDE SCROLLBARS FOR CLEAN MOBILE SWIPING
   ========================================================================== */
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.no-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* ==========================================================================
   3. MOBILE STICKY TABLE COLUMN ENHANCEMENT
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Subtle elevation shadow on sticky left column so users know data scrolls underneath */
    .sticky.left-0 {
        box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.15) !important;
    }

    /* Shift toggle cells: ergonomic touch targets on phone screens */
    td[id^="cell-shift-"] button {
        min-height: 40px !important;
        touch-action: manipulation;
    }
}

/* ==========================================================================
   4. MOBILE MODAL FULL-HEIGHT SHEET BEHAVIOR
   ========================================================================== */
@media screen and (max-width: 640px) {
    /* Modal cards adapt smoothly to mobile viewports */
    [data-modal="profile-modal"] #employeeDetailModalCard,
    #exportRosterModal > div,
    #fullMonthlyRosterModal > div,
    #pattern-modal > div,
    #quickDeployPersonnelModal > div {
        max-height: 94vh !important;
        width: 100% !important;
        margin: auto 8px !important;
        border-radius: 1rem !important;
    }
}