/* ================================================================
   Holyee – Central mobile overrides
   Targets: Chrome & Safari on iOS / Android mobile

   KEY RULES:
   - No blanket float:none (breaks .w-row badge rows)
   - Touch / performance rules are global (all screens)
   - Layout fixes are gated by breakpoint
   ================================================================ */


/* ================================================================
   ALL SCREENS – Touch & performance improvements
   ================================================================ */

/* Remove 300ms tap delay on Chrome & Safari mobile.
   touch-action:manipulation tells the browser not to wait for
   a double-tap gesture before firing the click event.             */
.btn,
button,
a[role="button"],
[data-toggle] {
    touch-action: manipulation;
}

/* Remove iOS Safari blue flash on element tap                     */
a,
.btn,
button,
[data-toggle] {
    -webkit-tap-highlight-color: transparent;
}

/* iOS Safari momentum/flick scrolling for scroll panels           */
.divScroll {
    -webkit-overflow-scrolling: touch;
}


/* ================================================================
   MAX-WIDTH 767px – Generic mobile fixes
   ================================================================ */

@media (max-width: 767px) {

    /* Prevent horizontal scroll on mobile only.
       Global overflow-x:hidden breaks Bootstrap .row negative margins
       and position:sticky on desktop – so it only applies here.     */
    body {
        overflow-x: hidden;
    }

    /* Touch-friendly scroll: override hover-only pattern on touch devices.
       .divScroll uses overflow:hidden by default and overflow:auto on :hover
       which never fires on touch. Force always-visible scroll in mobile.   */
    .divScroll,
    .dashboard-page .divScroll {
        overflow-y: auto !important;
        overflow-x: hidden;
    }

    /* iOS Safari auto-zoom prevention.
       Safari auto-zooms when a focused input has font-size < 16px.
       Scoped to .content-wrapper and .modal to limit blast radius. */
    .content-wrapper input[type="text"],
    .content-wrapper input[type="email"],
    .content-wrapper input[type="password"],
    .content-wrapper input[type="number"],
    .content-wrapper input[type="date"],
    .content-wrapper input[type="tel"],
    .content-wrapper input[type="search"],
    .content-wrapper textarea,
    .content-wrapper select,
    .modal input[type="text"],
    .modal input[type="email"],
    .modal input[type="password"],
    .modal input[type="number"],
    .modal input[type="date"],
    .modal input[type="tel"],
    .modal input[type="search"],
    .modal textarea,
    .modal select {
        font-size: 16px !important;
    }

    /* Generic modal safety for legacy inline fixed widths         */
    .modal-dialog {
        width: auto;
        min-width: 0;
        margin: 10px auto;
        max-width: 95%;
    }

    .modal-dialog[style*="width:500px"],
    .modal-dialog[style*="width:650px"],
    .modal-dialog[style*="min-width:750px"],
    .modal-dialog[style*="min-width:900px"] {
        width: 95% !important;
        min-width: 0 !important;
        max-width: 95% !important;
    }

    #modalUserDays .modal-dialog {
        width: 95% !important;
        min-width: 0 !important;
        max-width: 95% !important;
    }

    .modal-body {
        overflow-x: auto;
    }

    /* Schedule / Absence / HomeOffice toolbar rows.
       These divs use min-width:1000px / min-width:850px inline.   */
    #divSaveInfo {
        min-width: 0 !important;
        width: 100% !important;
    }

    #divSaveInfo > div {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        max-width: 100% !important;
        width: 100% !important;
    }

    #divSaveInfo > div > div,
    #divSaveInfo button,
    #divSaveInfo .btn {
        float: none !important;
    }

    #divProgress {
        margin-left: 0 !important;
    }

    #btnModalHolidays {
        min-width: 0 !important;
        width: 100% !important;
    }

    .main-header [style*="width:350px"] {
        float: none !important;
        width: 100% !important;
        margin-top: 8px;
    }

    /* Dashboard action cards with fixed inline width:195px        */
    .dashboard-page .col-xs-12.col-sm-6.col-md-3[style*="width:195px"] {
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }

    .dashboard-page .btn.btn-block.btn-lg {
        white-space: normal;
    }

    /* Auth: top bar logo min-width and profile fixed width        */
    .top-bar .logo[style*="min-width: 450px"] {
        min-width: 0 !important;
        width: 100% !important;
        float: none !important;
    }

    .top-bar .container > .row {
        display: flex;
        flex-wrap: wrap;
    }

    .top-bar .logged-user {
        float: none !important;
        margin-right: 0 !important;
        margin-top: 8px;
    }

    .user-info-right[style*="width:500px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Manage page approval block with min-width:520px             */
    .holyee-manage [style*="min-width:520px"] {
        min-width: 0 !important;
        width: 100% !important;
        float: none !important;
    }

    /* Landing: hero carousel captions and CTA buttons            */
    #inSlider .carousel-caption {
        left: 5%;
        right: 5%;
        padding: 10px;
    }

    #inSlider .carousel-caption .btn.btn-xs {
        font-size: 14px;
        padding: 10px 14px;
        line-height: 1.4;
    }

    /* Landing: language selector misalignment                    */
    #navbar .navbar-nav > li > div[style*="margin-top:30px"] {
        float: none !important;
        margin-top: 10px !important;
    }

    /* Calendar / datepicker popup legacy fixed 800px rule        */
    .datepicker.dropdown-menu {
        width: auto !important;
        max-width: 95vw;
        min-width: 280px;
    }

    /* iPhone X+ safe area – content above the home indicator bar */
    .footer {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
}


/* ================================================================
   MAX-WIDTH 767px – btn-xs minimum touch targets
   iOS HIG / WCAG recommends 44×44px; Bootstrap btn-xs is ~22×25px.
   Only enlarges the tap area on mobile, desktop stays compact.
   ================================================================ */

@media (max-width: 767px) {
    .btn-xs {
        min-height: 36px;
        min-width: 36px;
        padding: 5px 8px;
        font-size: 12px;
    }
}

/* ================================================================
   576px–767px – Dashboard 2-column button grid
   ================================================================ */

@media (min-width: 576px) and (max-width: 767px) {
    .dashboard-page .col-xs-12.col-sm-6.col-md-3[style*="width:195px"] {
        width: 50% !important;
        float: left !important;
    }
}