/* Breadcrumb Navigation */
.breadcrumb-nav {
    padding: 12px 16px;
    background-color: var(--office-surface-secondary, #F8FAFC);
    border-bottom: 1px solid var(--office-border, #E2E8F0);
    margin-bottom: 0;
    position: sticky;
    top: 55px;  /* Below fixed header */
    z-index: 100;
}

.breadcrumb-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    align-items: center;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.breadcrumb-link {
    color: var(--office-primary, #2563EB);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color var(--office-duration-fast, 150ms) ease;
}

.breadcrumb-link:hover {
    color: var(--office-primary-hover, #1D4ED8);
    text-decoration: underline;
}

.breadcrumb-current {
    color: var(--office-text, #0F172A);
    font-size: 0.875rem;
    font-weight: 600;
}

.breadcrumb-separator {
    color: var(--office-text-muted, #94A3B8);
    font-size: 0.875rem;
    margin: 0 4px;
    user-select: none;
}

/* Dark mode */
[data-theme="dark"] .breadcrumb-nav {
    background-color: var(--office-surface-elevated, #1E293B);
    border-bottom-color: var(--office-border, #334155);
}

[data-theme="dark"] .breadcrumb-link {
    color: var(--office-primary, #60A5FA);
}

[data-theme="dark"] .breadcrumb-link:hover {
    color: var(--office-primary-hover, #93C5FD);
}

[data-theme="dark"] .breadcrumb-current {
    color: var(--office-text, #F1F5F9);
}

[data-theme="dark"] .breadcrumb-separator {
    color: var(--office-text-muted, #64748B);
}

/* Responsive: Mobile (<600px) */
@media (max-width: 600px) {
    .breadcrumb-nav {
        padding: 8px 12px;
        position: relative;  /* Not sticky on mobile to save space */
        top: 0;
    }

    .breadcrumb-list {
        gap: 2px;
    }

    .breadcrumb-link,
    .breadcrumb-current {
        font-size: 0.813rem;
    }

    .breadcrumb-separator {
        margin: 0 2px;
        font-size: 0.813rem;
    }
}

/* Responsive: Tablet (600px-1023px) */
@media (min-width: 600px) and (max-width: 1023px) {
    .breadcrumb-nav {
        padding: 10px 16px;
    }
}

/* Responsive: Desktop (≥1024px) */
@media (min-width: 1024px) {
    .breadcrumb-nav {
        padding: 12px 24px;
        /* margin-left: 260px; - OBSOLETO após migração MudBlazor - MudMainContent gerencia isso */
    }
}