/**
 * CRAM - Estilos de Navegação por Teclado
 * Melhorias de acessibilidade e focus states
 * WCAG 2.1 AA Compliant
 */

/* ===================================
   1. FOCUS STATES MELHORADOS
   =================================== */

/* Focus outline padrão (todos os elementos interativos) */
*:focus-visible {
    outline: 3px solid var(--focus-color, #7C3AED);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Focus em botões */
.btn:focus-visible {
    outline: 3px solid var(--focus-color, #7C3AED);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(var(--focus-color-rgb, 124, 58, 237), 0.15);
}

.btn-primary:focus-visible {
    outline-color: var(--primary-dark, #1E40AF);
}

.btn-danger:focus-visible {
    outline-color: #DC2626;
}

.btn-success:focus-visible {
    outline-color: #059669;
}

/* Focus em inputs e textareas */
.form-control:focus,
.form-select:focus,
textarea:focus {
    border-color: var(--focus-color, #7C3AED);
    box-shadow: 0 0 0 3px rgba(var(--focus-color-rgb, 124, 58, 237), 0.15);
    outline: none;
}

/* Focus em checkboxes e radios */
.form-check-input:focus {
    border-color: var(--focus-color, #7C3AED);
    box-shadow: 0 0 0 3px rgba(var(--focus-color-rgb, 124, 58, 237), 0.15);
}

/* Focus em links */
a:focus-visible {
    outline: 3px solid var(--focus-color, #7C3AED);
    outline-offset: 2px;
    border-radius: 2px;
    text-decoration: underline;
}

/* Focus em nav links */
.nav-link:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: -3px;
}

/* Focus em badges e chips */
.badge:focus-visible,
.chip:focus-visible {
    outline: 2px solid var(--focus-color, #7C3AED);
    outline-offset: 2px;
}

/* ===================================
   2. SKIP LINKS
   =================================== */

/* Skip link principal (já existe, melhorar) */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--focus-color, #7C3AED);
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: 600;
    z-index: 10000;
    border-radius: 0 0 8px 0;
    transition: top 0.2s ease;
}

.skip-to-main:focus {
    top: 0;
    outline: 3px solid var(--primary-dark, #1E40AF);
    outline-offset: 3px;
}

/* Skip links dinâmicos */
.skip-links-dynamic {
    position: absolute;
    top: -200px;
    left: 0;
    z-index: 10000;
    display: flex;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 0 0 8px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: top 0.2s ease;
}

.skip-links-dynamic:focus-within {
    top: 0;
}

.skip-link {
    display: block;
    padding: 8px 16px;
    background: var(--focus-color, #7C3AED);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.skip-link:hover,
.skip-link:focus {
    background: var(--primary-dark, #1E40AF);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ===================================
   3. NAVEGAÇÃO EM TABELAS
   =================================== */

/* Tabela navegável */
.keyboard-navigable {
    position: relative;
}

/* Célula focada */
.keyboard-navigable td:focus,
.keyboard-navigable th:focus {
    outline: 3px solid var(--focus-color, #7C3AED);
    outline-offset: -3px;
    background-color: rgba(var(--focus-color-rgb, 124, 58, 237), 0.08);
    position: relative;
    z-index: 1;
}

/* Célula com elemento interativo */
.keyboard-navigable td.has-interactive:focus {
    outline-style: dashed;
}

/* Indicador de linha ativa */
.keyboard-navigable tr:has(td:focus) {
    background-color: rgba(var(--focus-color-rgb, 124, 58, 237), 0.03);
}

/* Cursor em modo de navegação */
.keyboard-navigable td[tabindex="0"] {
    cursor: cell;
}

/* Headers sortable */
th.sortable:focus-visible {
    outline: 3px solid var(--focus-color, #7C3AED);
    outline-offset: -3px;
    background-color: rgba(var(--focus-color-rgb, 124, 58, 237), 0.1);
}

/* ===================================
   4. INDICADOR DE MODO DE NAVEGAÇÃO
   =================================== */

.navigation-indicator {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, var(--focus-color, #7C3AED) 0%, var(--primary-dark, #1E40AF) 100%);
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(var(--focus-color-rgb, 124, 58, 237), 0.3);
    z-index: 9998;
    font-size: 10.5px;
    font-weight: 500;
    animation: slideInRight 0.3s ease;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.navigation-indicator.hiding {
    opacity: 0;
}

.navigation-indicator kbd {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    margin: 0 2px;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===================================
   5. FOCUS TRAP EM MODALS
   =================================== */

/* Modal com focus trap ativo */
.modal.show {
    /* Já gerenciado pelo JavaScript */
}

/* Primeiro e último elemento focável em modal */
.modal .modal-header button:first-of-type:focus-visible,
.modal .modal-footer button:last-of-type:focus-visible {
    outline-color: rgba(255, 255, 255, 0.5);
}

/* ===================================
   6. ELEMENTOS CUSTOMIZADOS FOCÁVEIS
   =================================== */

/* Cards clicáveis */
.card-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.card-clickable:focus-visible {
    outline: 3px solid var(--focus-color, #7C3AED);
    outline-offset: 3px;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Chips de filtro */
.filter-chip,
.chip {
    transition: all 0.2s ease;
}

.filter-chip:focus-visible,
.chip:focus-visible {
    outline: 2px solid var(--focus-color, #7C3AED);
    outline-offset: 2px;
    transform: scale(1.05);
}

/* Action icons */
.action-icon:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    transform: scale(1.1);
}

/* ===================================
   7. BREADCRUMBS
   =================================== */

.breadcrumb-item a:focus-visible {
    outline: 2px solid var(--focus-color, #7C3AED);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ===================================
   8. ACCORDION E COLLAPSE
   =================================== */

.accordion-button:focus {
    border-color: var(--focus-color, #7C3AED);
    box-shadow: 0 0 0 3px rgba(var(--focus-color-rgb, 124, 58, 237), 0.15);
}

button[data-bs-toggle="collapse"]:focus-visible {
    outline: 3px solid var(--focus-color, #7C3AED);
    outline-offset: 3px;
}

/* ===================================
   9. PAGINATION
   =================================== */

.pagination .page-link:focus {
    box-shadow: 0 0 0 3px rgba(var(--focus-color-rgb, 124, 58, 237), 0.15);
    border-color: var(--focus-color, #7C3AED);
    outline: none;
}

/* ===================================
   10. TABS E PILLS
   =================================== */

.nav-tabs .nav-link:focus,
.nav-pills .nav-link:focus {
    outline: 3px solid var(--focus-color, #7C3AED);
    outline-offset: -3px;
}

.nav-tabs .nav-link.active:focus {
    outline-color: var(--primary-color);
}

/* ===================================
   11. DROPDOWNS
   =================================== */

.dropdown-item:focus {
    background-color: rgba(var(--focus-color-rgb, 124, 58, 237), 0.1);
    outline: 2px solid var(--focus-color, #7C3AED);
    outline-offset: -2px;
}

.dropdown-toggle:focus-visible {
    outline: 3px solid var(--focus-color, #7C3AED);
    outline-offset: 3px;
}

/* ===================================
   12. TOOLTIPS E POPOVERS
   =================================== */

[data-bs-toggle="tooltip"]:focus-visible,
[data-bs-toggle="popover"]:focus-visible {
    outline: 2px solid var(--focus-color, #7C3AED);
    outline-offset: 2px;
}

/* ===================================
   13. AUTOCOMPLETE
   =================================== */

.autocomplete-item:focus,
.autocomplete-item.active {
    background-color: rgba(var(--focus-color-rgb, 124, 58, 237), 0.1);
    outline: 2px solid var(--focus-color, #7C3AED);
    outline-offset: -2px;
}

/* ===================================
   14. LOADING STATES
   =================================== */

/* Desabilitar outline em elementos loading */
button.loading:focus,
button:disabled:focus {
    outline: 2px dashed #9CA3AF;
    outline-offset: 2px;
}

/* ===================================
   15. EMPTY STATES
   =================================== */

/* Links em empty states */
.text-center a:focus-visible {
    outline: 3px solid var(--focus-color, #7C3AED);
    outline-offset: 3px;
}

/* ===================================
   16. RESPONSIVIDADE
   =================================== */

@media (max-width: 768px) {
    /* Skip links em mobile */
    .skip-links-dynamic {
        flex-direction: column;
        gap: 4px;
    }

    .skip-link {
        width: 100%;
        text-align: center;
    }

    /* Navigation indicator menor */
    .navigation-indicator {
        bottom: 20px;
        right: 20px;
        padding: 12px 16px;
        font-size: 9.75px;
    }

    /* Focus offset menor em mobile */
    *:focus-visible {
        outline-offset: 1px;
    }
}

/* ===================================
   17. IMPRESSÃO
   =================================== */

@media print {
    /* Ocultar indicadores de navegação */
    .navigation-indicator,
    .skip-links-dynamic,
    .skip-to-main {
        display: none !important;
    }

    /* Remover outlines */
    *:focus-visible {
        outline: none !important;
    }
}

/* ===================================
   18. HIGH CONTRAST MODE
   =================================== */

@media (prefers-contrast: high) {
    *:focus-visible {
        outline-width: 4px;
        outline-offset: 3px;
    }

    .btn:focus-visible {
        box-shadow: 0 0 0 6px rgba(var(--focus-color-rgb, 124, 58, 237), 0.3);
    }
}

/* ===================================
   19. REDUCED MOTION
   =================================== */

@media (prefers-reduced-motion: reduce) {
    .navigation-indicator,
    .skip-link,
    .card-clickable,
    .filter-chip,
    .action-icon {
        transition: none !important;
        animation: none !important;
    }

    .navigation-indicator {
        animation: none;
    }
}

/* ===================================
   20. DARK MODE (FUTURO)
   =================================== */

@media (prefers-color-scheme: dark) {
    *:focus-visible {
        outline-color: var(--color-support-light, #60A5FA);
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--color-support-light, #60A5FA);
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
    }

    .skip-to-main,
    .skip-link {
        background: var(--primary-dark, #1E40AF);
    }

    .navigation-indicator {
        background: linear-gradient(135deg, var(--primary-dark, #1E40AF) 0%, var(--primary-dark, #1E40AF) 100%);
    }
}