/* Breadcrumb Component Styles */
.breadcrumb-nav {
    margin: clamp(12px, 2vw, 16px) 0;
    font-size: clamp(12px, 1.5vw, 14px);
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: clamp(4px, 1vw, 8px);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1vw, 8px);
}

.breadcrumb-link {
    color: var(--muted-foreground);
    text-decoration: none;
    padding: clamp(2px, 0.5vw, 4px) clamp(4px, 1vw, 8px);
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.breadcrumb-link:hover {
    color: var(--primary);
    background-color: var(--subtle);
    text-decoration: none;
}

.breadcrumb-text {
    color: var(--foreground);
    font-weight: 500;
    padding: clamp(2px, 0.5vw, 4px) clamp(4px, 1vw, 8px);
}

.breadcrumb-item.active .breadcrumb-text {
    color: var(--foreground);
}

.breadcrumb-separator {
    color: var(--border);
    display: flex;
    align-items: center;
}

.breadcrumb-separator svg {
    width: clamp(12px, 1.5vw, 16px) !important;
    height: clamp(12px, 1.5vw, 16px) !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .breadcrumb-link {
        color: #9ca3af;
    }

    .breadcrumb-link:hover {
        color: #60a5fa;
        background-color: #374151;
    }

    .breadcrumb-text {
        color: #d1d5db;
    }

    .breadcrumb-item.active .breadcrumb-text {
        color: #f9fafb;
    }

    .breadcrumb-separator {
        color: #6b7280;
    }
}

/* Responsive design */
@media (max-width: 1024px) {
    .breadcrumb-nav {
        font-size: clamp(12px, 1.5vw, 14px);
    }

    .breadcrumb-list {
        gap: clamp(4px, 1vw, 6px);
    }
}

@media (max-width: 768px) {
    .breadcrumb-nav {
        font-size: clamp(11px, 1.3vw, 13px);
    }

    .breadcrumb-list {
        gap: clamp(3px, 0.8vw, 5px);
    }

    .breadcrumb-link,
    .breadcrumb-text {
        padding: clamp(2px, 0.4vw, 3px) clamp(3px, 0.8vw, 6px);
    }

    .breadcrumb-separator svg {
        width: clamp(11px, 1.3vw, 14px) !important;
        height: clamp(11px, 1.3vw, 14px) !important;
    }
}

@media (max-width: 640px) {
    .breadcrumb-nav {
        font-size: clamp(10px, 1.2vw, 12px);
        margin: clamp(8px, 1.5vw, 12px) 0;
    }

    .breadcrumb-list {
        gap: clamp(2px, 0.5vw, 4px);
    }

    .breadcrumb-link,
    .breadcrumb-text {
        padding: clamp(1px, 0.3vw, 2px) clamp(2px, 0.5vw, 4px);
    }

    .breadcrumb-separator svg {
        width: clamp(10px, 1vw, 12px) !important;
        height: clamp(10px, 1vw, 12px) !important;
    }
}