/**
 * Breadcrumb Component - SIDASP Design System
 *
 * Componente de navegação breadcrumb (migalha de pão) seguindo especificações Figma
 * Suporte completo para light/dark mode via CSS variables
 *
 * @version 1.0.0
 * @date 2025-10-30
 */

/* ==========================================================================
   Container Principal
   ========================================================================== */

.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* 4px */
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .breadcrumb {
        gap: 0.5rem; /* 8px */
    }
}

/* ==========================================================================
   Items do Breadcrumb
   ========================================================================== */

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Links clicáveis */
.breadcrumb-item a {
    font-family: var(--font-sans);
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--color-text-secondary);
}

.breadcrumb-item a:focus {
    outline: 2px solid var(--color-accent-400);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Item ativo (último da navegação - sem link) */
.breadcrumb-item span,
.breadcrumb-item strong {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text-primary);
}

/* ==========================================================================
   Separadores (Chevron)
   ========================================================================== */

.breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    margin: 0 0.5rem; /* 8px */
    color: var(--color-text-muted);
    opacity: 0.6;
}

.breadcrumb-separator svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* ==========================================================================
   Responsividade
   ========================================================================== */

/* Mobile: ocultar itens intermediários se necessário */
@media (max-width: 640px) {
    .breadcrumb-item:not(:first-child):not(:last-child) {
        display: none;
    }

    /* Mostrar separador especial "..." */
    .breadcrumb-item:first-child + .breadcrumb-separator::after {
        content: '...';
        margin: 0 0.5rem;
    }
}

/* ==========================================================================
   Estados Especiais
   ========================================================================== */

/* Primeiro item (Home) */
.breadcrumb-item:first-child a {
    font-weight: 500;
}

/* Último item sempre sem link e em destaque */
.breadcrumb-item:last-child span,
.breadcrumb-item:last-child strong {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ==========================================================================
   Integração com Sistema Existente
   ========================================================================== */

/* Classes legadas (manter compatibilidade) */
.migalha {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .migalha {
        gap: 0.5rem;
    }
}

.migalha li {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.migalha a {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.migalha a:hover {
    color: var(--color-text-secondary);
}

/* Último item da migalha (ativo) */
.migalha > li:last-child,
.migalha > li:last-child span,
.migalha > li:last-child strong {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ==========================================================================
   Utilitários
   ========================================================================== */

/* Ocultar breadcrumb em impressão */
.breadcrumb.noprint,
.migalha.noprint {
    display: none !important;
}

@media print {
    .breadcrumb,
    .migalha {
        display: none !important;
    }
}

/* Variante compacta */
.breadcrumb--compact {
    font-size: 0.875rem; /* 14px */
    gap: 0.25rem;
}

.breadcrumb--compact .breadcrumb-item a,
.breadcrumb--compact .breadcrumb-item span {
    font-size: 0.875rem;
}

/* ==========================================================================
   Dark Mode Específico
   ========================================================================== */

[data-theme="dark"] .breadcrumb-item a {
    color: #a0aec0; /* Cinza claro para dark mode */
}

[data-theme="dark"] .breadcrumb-item a:hover {
    color: #cbd5e0; /* Cinza mais claro no hover */
}

[data-theme="dark"] .breadcrumb-item span,
[data-theme="dark"] .breadcrumb-item strong {
    color: #e2e8f0; /* Quase branco para item ativo */
}

[data-theme="dark"] .breadcrumb-separator {
    color: #718096;
    opacity: 0.7;
}

/* ==========================================================================
   Acessibilidade
   ========================================================================== */

/* Melhorar contraste para WCAG AA */
@media (prefers-contrast: high) {
    .breadcrumb-item a {
        color: var(--color-text-primary);
    }

    .breadcrumb-item a:hover {
        text-decoration: underline;
    }
}

/* Respeitar preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .breadcrumb-item a {
        transition: none;
    }
}

/* Screen readers */
.breadcrumb[aria-label],
.migalha[aria-label] {
    position: relative;
}

/* Indicador visual de foco para navegação por teclado */
.breadcrumb-item a:focus-visible {
    outline: 2px solid var(--color-accent-400);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}