/* Shared small-screen safety rules for every SEVA page.
   Horizontal data tables keep their own intentional scroll containers. */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea {
    max-width: 100%;
}

main,
main > *,
.grid > *,
.flex > .flex-1 {
    min-width: 0;
}

/* Long staff names, departments, and generated status messages must wrap
   inside their card instead of expanding the page. */
.hrms-break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

@media (max-width: 640px) {
    main {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }

    #customModal {
        padding: 0.75rem;
    }

    #modalContainer {
        max-height: calc(100dvh - 1.5rem);
        overflow-y: auto;
    }
}