/* Shared sizing for the Phase16 Arabic screens; never hide page overflow. */
body { overflow-wrap: anywhere; }
:where(main, section, article, header, form, .flex-1),
:where(.flex, .grid) > :where(div, main, section, article, aside) { min-inline-size: 0; }
:where(input, select, textarea) { max-inline-size: 100%; }
:where(img, video, iframe) { max-inline-size: 100%; }
:where(button, a, input, select, textarea):focus-visible {
    outline: 3px solid #0891b2;
    outline-offset: 3px;
}
button:has(> i:only-child), a:has(> i:only-child) {
    min-inline-size: 44px;
    min-block-size: 44px;
}
.password-toggle, button[onclick^="togglePassword("] { top: 50%; transform: translateY(-50%); }
.form-group:has(.password-toggle, button[onclick^="togglePassword("]) input { padding-inline-end: 64px; }
.checkbox-wrapper:focus-within { outline: 3px solid #0891b2; outline-offset: 3px; }
.table-wrap { max-inline-size: 100%; }
#filterCourse { inline-size: 240px; max-inline-size: 100%; }
#quizzesListSection > .flex { flex-wrap: wrap; gap: 12px; }
#quizzesGrid > .col-span-3 { grid-column: 1 / -1; }
#students > .flex { flex-wrap: wrap; gap: 12px; }
#students > .flex > div { max-inline-size: 100%; }
#studentSearch { max-inline-size: 100%; }
#videoLocked { padding: 12px; overflow-y: auto; }
@media (max-width: 767px) {
    :where(button, input:not([type="checkbox"]):not([type="radio"]), select) { min-block-size: 44px; }
    #videoContainer { min-block-size: 300px; }
    #mobileMenu { max-block-size: calc(100dvh - 80px); overflow-y: auto; }
}