/*
 * a11y-keyboard.css
 *
 * Visible keyboard focus indicators (WCAG 2.0 2.4.7 Focus Visible) for the interactive
 * "rubric" cells that admin-template/js/a11y-keyboard.js makes keyboard operable, plus a
 * fix that keeps the colour-coded lesson-event checkboxes reachable from the keyboard.
 *
 * The focus ring is intentionally a high-contrast outline + box-shadow so it stays visible
 * on top of coloured cell backgrounds (where a plain coloured outline could be swallowed).
 */

/* ---- Generic focus ring for every cell enhanced by the keyboard layer ---- */
[data-a11y-group]:focus,
.one_lesson:focus,
.td_table:focus,
.input_range_mark:focus,
.grade-box:focus,
.comp-grade-cell:focus,
.student-row:focus,
.td-name-ev:focus,
.in_array.lessons:focus,
.my_student_is:focus,
.edit_tala_student:focus,
.change_cla_tea:focus,
.delete_time_lesson:focus,
.remove_cube.btn-shibutz:focus,
.mizug_able:focus {
    outline: 3px solid #0b5fff !important;
    outline-offset: -3px !important;
    /* white "halo" so the blue ring is readable over any background colour */
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #0b5fff !important;
    position: relative;
    z-index: 30;
}

/* Use :focus-visible where supported so mouse clicks don't show the ring,
   but keyboard focus always does. */
[data-a11y-group]:focus-visible,
.one_lesson:focus-visible,
.td_table:focus-visible,
.input_range_mark:focus-visible,
.grade-box:focus-visible,
.comp-grade-cell:focus-visible,
.student-row:focus-visible,
.td-name-ev:focus-visible,
.in_array.lessons:focus-visible,
.my_student_is:focus-visible,
.edit_tala_student:focus-visible,
.change_cla_tea:focus-visible,
.delete_time_lesson:focus-visible,
.remove_cube.btn-shibutz:focus-visible,
.mizug_able:focus-visible {
    outline: 3px solid #0b5fff !important;
    outline-offset: -3px !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #0b5fff !important;
}

/* Drop the generic ring for pointer-only focus when :focus-visible is supported. */
@supports selector(:focus-visible) {
    [data-a11y-group]:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }
}

/* ---- Colour-coded lesson-event rubrics (hidden checkboxes) ----
 *
 * The global theme rule `[type="checkbox"]{display:none !important}` removes these
 * checkboxes from the tab order, so the colour-coded marking boxes can only be toggled
 * with the mouse. We re-expose just the event-marking checkboxes to keyboard / screen
 * readers while keeping them visually hidden (the coloured <label> remains the visual),
 * and we render the focus ring on the adjacent label so it is actually visible.
 */
.checkbox-group input[type="checkbox"].student_event_lesson,
.checkbox-group input[type="checkbox"].teacher_event_lesson,
.checkbox-group input[type="checkbox"].events_check_all,
.checkbox-group input[type="checkbox"].miss_lesson_event {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    pointer-events: none; /* keep the visible label as the click target */
}

.checkbox-group input[type="checkbox"].student_event_lesson:focus-visible + label.checkbox-label,
.checkbox-group input[type="checkbox"].teacher_event_lesson:focus-visible + label.checkbox-label,
.checkbox-group input[type="checkbox"].events_check_all:focus-visible + label.checkbox-label,
.checkbox-group input[type="checkbox"].miss_lesson_event:focus-visible + label.checkbox-label,
.checkbox-group input[type="checkbox"].student_event_lesson:focus + label.checkbox-label,
.checkbox-group input[type="checkbox"].teacher_event_lesson:focus + label.checkbox-label,
.checkbox-group input[type="checkbox"].events_check_all:focus + label.checkbox-label,
.checkbox-group input[type="checkbox"].miss_lesson_event:focus + label.checkbox-label {
    outline: 3px solid #0b5fff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #0b5fff !important;
    position: relative;
    z-index: 30;
}

/* ---- Shibutz study-group selection rows (Vue keydown handled in template) ---- */
table.table-shibutz tr[role="button"]:focus,
.title_study_list ~ tr[role="button"]:focus,
tr[role="button"].shibutz_group_row:focus,
tr[role="button"].shibutz_group_row:focus-visible {
    outline: 3px solid #0b5fff !important;
    outline-offset: -3px !important;
    box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 5px #0b5fff !important;
}