/* ── Componentes de navegação (fe-nav) ─────────────────────────────────
   Cobre components/_dropdown.html, _stepper.html e _breadcrumbs.html.
   Apenas variáveis do design system; linkado em base.html.
   Ocultação acessível usa .visually-hidden de styles.css.
   ──────────────────────────────────────────────────────────────────── */

/* ── Dropdown (components/_dropdown) ────────────────────────────────── */

.cmp-dropdown {
    position: relative;
    display: inline-block;
    font-family: var(--font-sans);
}

.cmp-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
    padding: 0 14px;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.cmp-dropdown-toggle:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.cmp-dropdown-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cmp-dropdown-toggle[aria-expanded="true"] {
    color: var(--text-primary);
    border-color: var(--accent-border);
}

.cmp-dropdown-caret {
    flex-shrink: 0;
    color: var(--text-faint);
    transition: transform var(--dur-fast) var(--ease-standard);
}

.cmp-dropdown-toggle[aria-expanded="true"] .cmp-dropdown-caret {
    transform: rotate(180deg);
}

.cmp-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    min-width: 180px;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    z-index: var(--z-float);
}

.cmp-dropdown--right .cmp-dropdown-menu {
    right: 0;
}

.cmp-dropdown--left .cmp-dropdown-menu {
    left: 0;
}

.cmp-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--touch-target);
    padding: 0 var(--space-3);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    text-align: left;
    color: var(--text-secondary);
    text-decoration: none;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.cmp-dropdown-item:hover {
    background: var(--status-bg);
    color: var(--text-primary);
}

.cmp-dropdown-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.cmp-dropdown-item--danger {
    color: var(--danger);
}

.cmp-dropdown-item--danger:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.cmp-dropdown-item.is-disabled {
    color: var(--text-faint);
    cursor: default;
}

.cmp-dropdown-item.is-disabled:hover {
    background: none;
    color: var(--text-faint);
}

.cmp-dropdown-separator {
    height: 1px;
    margin: var(--space-1) 0;
    background: var(--border);
}

@media (prefers-reduced-motion: reduce) {
    .cmp-dropdown-caret {
        transition: none;
    }
}

/* ── Stepper (components/_stepper) ──────────────────────────────────── */

.cmp-stepper {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-sans);
}

.cmp-stepper-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
    color: var(--text-muted);
}

/* Conector 1px entre etapas (pseudo-elemento, some no último item). */

.cmp-stepper-item:not(:last-child) {
    flex: 1;
}

.cmp-stepper-item:not(:last-child)::after {
    content: "";
    flex: 1;
    min-width: var(--space-6);
    height: 1px;
    margin: 0 var(--space-3);
    background: var(--border);
}

.cmp-stepper-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-7);
    height: var(--space-7);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
}

.cmp-stepper-label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
}

/* Etapa concluída: check em tom de acento, sem preencher o círculo. */

.cmp-stepper-item.is-done .cmp-stepper-circle {
    color: var(--accent);
    border-color: var(--accent-border);
    background: var(--accent-ghost-bg);
}

.cmp-stepper-item.is-done .cmp-stepper-label {
    color: var(--text-secondary);
}

/* Etapa ativa: anel --accent via outline (proibido box-shadow fora de
   flutuantes) + label em primeiro plano. */

.cmp-stepper-item.is-current .cmp-stepper-circle {
    color: var(--accent);
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cmp-stepper-item.is-current .cmp-stepper-label {
    color: var(--text-primary);
    font-weight: 600;
}

/* Variante compacta: círculo e respiro menores. */

.cmp-stepper--compact .cmp-stepper-item {
    min-height: var(--space-8);
    gap: 6px;
}

.cmp-stepper--compact .cmp-stepper-circle {
    width: 22px;
    height: 22px;
    font-size: 11px;
}

.cmp-stepper--compact .cmp-stepper-label {
    font-size: var(--fs-xs);
}

.cmp-stepper--compact .cmp-stepper-item:not(:last-child)::after {
    min-width: 16px;
    margin: 0 8px;
}

/* Mobile: mantém círculos + conectores; labels das etapas não-current
   saem da tela com a receita visually-hidden (seguem anunciáveis). */

@media (max-width: 640px) {
    .cmp-stepper-item:not(.is-current) .cmp-stepper-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ── Breadcrumbs (components/_breadcrumbs) ──────────────────────────── */

.cmp-breadcrumbs {
    font-family: var(--font-sans);
}

.cmp-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Separador "/" via pseudo-elemento. */

.cmp-breadcrumbs li + li::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--text-faint);
}

.cmp-breadcrumbs a {
    color: var(--text-secondary);
    text-decoration: none;
}

.cmp-breadcrumbs a:hover {
    color: var(--text-primary);
}

.cmp-breadcrumbs a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cmp-breadcrumbs [aria-current="page"] {
    color: var(--text-primary);
}