/* ── a11y.css — UI-12 WCAG AA foundations ────────────────────
   focus-visible outlines, skip nav, reduced-motion, touch targets
   Uses --accent/--radius from theme-tokens.css (layered over --crud-* vars)
   ─────────────────────────────────────────────────────────── */

/* ── Skip-to-content link ───────────────────────────── */
.skip-to-content {
    position: absolute;
    top: -4rem;
    left: 1rem;
    padding: 0.5rem 1.25rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0 0 var(--radius) var(--radius);
    z-index: 10000;
    transition: top 120ms ease;
    white-space: nowrap;
}
.skip-to-content:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* ── Global focus-visible ring ──────────────────────── */
/* --accent auto-switches via [data-theme="dark"] in crud-engine.css */
:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
}

/* Suppress default focus ring when :focus-visible is available */
:focus:not(:focus-visible) {
    outline: none;
}

/* ── Text-entry controls: SINGLE focus ring ─────────── */
/* Inputs/selects/textareas get a box-shadow ring only — the global
   outline above would stack on top of the per-component box-shadow
   focus styles (crud-engine.css, crud-ux-v3.css, Bootstrap) and
   produce a double outline. The box-shadow fallback below guarantees
   every text control still has a visible focus indicator. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none !important;
    border-color: var(--crud-primary, var(--accent));
    box-shadow: var(--crud-input-focus-shadow, 0 0 0 2px rgba(38, 133, 241, 0.12));
}

/* ── Nav / sidebar items ────────────────────────────── */
.nav-item:focus-visible,
.sidebar-logo:focus-visible,
[data-home-link]:focus-visible {
    outline: 2px solid var(--crud-sidebar-accent) !important;
    outline-offset: -2px;
    border-radius: var(--radius);
}

/* ── Modals: focus managed by Bootstrap — suppress outline on .modal root ── */
.modal:focus {
    outline: none;
}

/* ── Close / icon-only buttons ──────────────────────── */
.btn-close:focus-visible,
.crud-preview-close:focus-visible,
.crud-toast-close:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Checkboxes and radios ──────────────────────────── */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
}

/* ── Table row keyboard focus ───────────────────────── */
.table tbody tr:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: -2px;
}

/* ── Touch targets: min 44×44 px on coarse pointer ─── */
@media (pointer: coarse) {
    button,
    [role="button"],
    a[href],
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-height: 44px;
    }

    .crud-toast-close,
    .btn-close,
    .mobile-menu-btn,
    .mobile-theme-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ── prefers-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;
    }

    /* Bootstrap modal fade */
    .modal.fade .modal-dialog {
        transform: none !important;
    }
    .modal.fade {
        transition: none !important;
    }

    /* Toast slide-in / exit */
    .crud-toast {
        animation: none !important;
    }
    .toast-exiting {
        animation: none !important;
        opacity: 0;
    }

    /* Sidebar overlay transition */
    .sidebar-overlay {
        transition: none !important;
    }

    /* Skip-to-content transition */
    .skip-to-content {
        transition: none;
    }
}

/* ── Visually-hidden helper (screen-reader only) ────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}