/* Хлебные крошки над заголовком страницы: includes/_breadcrumbs.html (тег {% breadcrumbs %} в base.html).
   Отступы повторяют .management-container, чтобы путь стоял ровно над заголовком. */

/* width + flex-shrink: на страницах, где .main-content — flex-колонка (канбан), иначе крошки сжимаются и встают по центру */
.breadcrumbs {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-10) 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* карточки уже обычных страниц — ширина как у .employee-form-page (employee_form.css) */
.breadcrumbs:has(+ .employee-form-page) {
    max-width: 900px;
}

/* настройки: своя ширина и отступы (expenses/css/settings.css) */
.breadcrumbs:has(+ .settings-container) {
    max-width: 1200px;
    padding-inline: var(--space-8);
}

/* поиск сотрудников и вакансий: контейнер без полей, край задаёт .search-hero (module-hero.css) */
.breadcrumbs:has(+ .search-container) {
    padding-inline: var(--space-5);
}

/* заголовок страницы прижимается к крошкам */
.breadcrumbs + .management-container {
    padding-top: var(--space-2);
}

.breadcrumbs + .settings-container {
    margin-top: 0;
}

.breadcrumbs + .kanban-container > .page-header,
.breadcrumbs + .search-container > .search-hero {
    padding-top: 0;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: '›';
    opacity: 0.6;
}

.breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

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

.breadcrumbs__current {
    color: var(--text-primary);
    font-weight: 500;
}

.breadcrumbs__back {
    display: none;
}

@media (max-width: 1024px) {
    .breadcrumbs {
        padding-inline: var(--space-5);
    }
}

/* Телефон: вместо пути — одна ссылка на ближайший уровень выше */
@media (max-width: 768px) {
    .breadcrumbs {
        padding: var(--space-3) var(--space-4) 0;
    }

    .breadcrumbs:not(:has(.breadcrumbs__back)) {
        display: none;
    }

    .breadcrumbs:not(:has(.breadcrumbs__back)) + .management-container {
        padding-top: var(--space-4);
    }

    .breadcrumbs__list {
        display: none;
    }

    .breadcrumbs__back {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        color: var(--text-secondary);
        font-weight: 500;
        text-decoration: none;
    }

    .breadcrumbs__back svg {
        width: var(--icon-sm);
        height: var(--icon-sm);
        flex-shrink: 0;
    }
}

[dir="rtl"] .breadcrumbs__back svg {
    transform: scaleX(-1);
}