/* ============================================================
   improvements.css
   Additive UX / accessibility enhancements. Loaded after the
   main stylesheets so these rules layer on top without
   altering existing component markup or server logic.
   ============================================================ */

/* 1. Visible keyboard focus indicator.
   Previously only form inputs had focus styles; links, buttons,
   nav items and sort headers gave keyboard users no cue. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible,
.sort-link:focus-visible,
.clickable-row:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Make clickable table rows show a focus cue via their inner link. */
.clickable-row { cursor: pointer; }
.clickable-row:focus-within {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: -2px;
}

/* 2. Responsive tables: ensure horizontal scroll at all widths,
   not only below 768px, so wide rosters never clip on tablets. */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 3. Comfortable mobile tap targets (>= ~44px) for the dense
   button / filter rows and form controls. */
@media (max-width: 768px) {
    .btn,
    .btn-sm,
    .nav-toggle,
    .form-control,
    .form-select,
    select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="date"] {
        min-height: 44px;
    }
    .btn,
    .btn-sm {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* 4. Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}