/**
 * Hotel HR Suite - ESS Portal PWA / Native-like mobile styles
 * Scoped to .hotel-hr-ess-portal for installable employee portal experience.
 */

/* Base: box-sizing and font */
.hotel-hr-ess-portal {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

.hotel-hr-ess-portal *,
.hotel-hr-ess-portal *::before,
.hotel-hr-ess-portal *::after {
    box-sizing: border-box;
}

/* Safe areas for notched devices and home indicator */
@supports (padding: env(safe-area-inset-top)) {
    .hotel-hr-ess-portal {
        padding-left: calc(20px + env(safe-area-inset-left));
        padding-right: calc(20px + env(safe-area-inset-right));
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

/* Extra top padding when running as standalone PWA (status bar) */
@media all and (display-mode: standalone) {
    .hotel-hr-ess-portal {
        padding-top: calc(24px + env(safe-area-inset-top, 0px));
    }
}

/* Small viewports: full-bleed, consistent padding */
@media screen and (max-width: 767px) {
    .hotel-hr-ess-portal {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding: 16px;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .hotel-hr-ess-header .hotel-hr-btn {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 16px;
    }

    .hotel-hr-tab-btn {
        min-height: 48px;
        padding: 14px 18px;
        font-size: 15px;
    }

    .hotel-hr-dashboard-widgets .hotel-hr-btn,
    .hotel-hr-schedule-view .hotel-hr-btn,
    .hotel-hr-leave-section .hotel-hr-btn,
    .hotel-hr-announcement-detail .hotel-hr-btn,
    .hotel-hr-announcements .hotel-hr-btn {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 16px;
    }

    .hotel-hr-leave-section .hotel-hr-form-group input,
    .hotel-hr-leave-section .hotel-hr-form-group select,
    .hotel-hr-leave-section .hotel-hr-form-group textarea {
        min-height: 48px;
        font-size: 16px;
    }
}

/* Login form: full width and safe-area on small screens */
@media screen and (max-width: 767px) {
    .hotel-hr-ess-portal .hotel-hr-login-form {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding: 24px;
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }

    .hotel-hr-ess-portal .hotel-hr-login-form input[type="text"],
    .hotel-hr-ess-portal .hotel-hr-login-form input[type="password"] {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
        padding: 12px 16px;
    }

    .hotel-hr-ess-portal .hotel-hr-login-form input[type="submit"] {
        min-height: 48px;
        padding: 14px 24px;
        font-size: 16px;
        width: 100%;
    }
}

/* Very small phones: extra touch and spacing */
@media screen and (max-width: 360px) {
    .hotel-hr-ess-portal {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .hotel-hr-tab-btn {
        padding: 12px 14px;
        font-size: 14px;
    }
}