/* ============================================
   FOCUS MANAGEMENT - Accessibilità
   Principio: nasconde focus su mouse/touch,
   mostra indicatore chiaro solo da tastiera
   ============================================ */

/* Variabili per consistenza */
:root {
    --focus-color: #007bff;
    --focus-offset: 2px;
    --focus-width: 3px;
    --focus-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8);
}

/* 1. Reset per interazione mouse/touch */
*:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
    border-color: #ced4da !important;
}

/* 2. Focus visibile SOLO da tastiera (Tab) */
*:focus-visible {
    outline: var(--focus-width) solid var(--focus-color) !important;
    outline-offset: var(--focus-offset) !important;
    box-shadow: var(--focus-shadow) !important;
    border-radius: 4px !important;
}

/* 3. Eccezione: elementi che non devono mai mostrare focus */
[tabindex="-1"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 4. Filter items - eredita le regole globali,
      solo override specifici necessari */
.filter-item {
    border: none;
}

/* 5. Previeni outline su click in Chrome/Safari */
:active {
    outline: none !important;
}

/* Form: nessun stile di default al focus */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #ced4da !important;
    border-width: 1px !important;
}

/* Form: stile SOLO quando navigazione da tastiera */
body.keyboard-nav .form-control:focus,
body.keyboard-nav .form-select:focus,
body.keyboard-nav input:focus,
body.keyboard-nav textarea:focus,
body.keyboard-nav select:focus {
    border-color: var(--focus-color) !important;
    outline: var(--focus-width) solid var(--focus-color) !important;
    outline-offset: var(--focus-offset) !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25) !important;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    background: var(--focus-color);
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    z-index: 9999;
    font-weight: 600;
    transition: top 0.2s;
}

    .skip-link:focus {
        top: 10px;
    }


.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}