/*
 * Хлебные крошки — вид «путь-стрелки».
 *
 * Звенья сцеплены в одну ленту: каждое, кроме первого, заходит на
 * предыдущее на 7 px, а вырез слева и остриё справа оставляют между ними
 * тонкую светлую «галочку». Текущая страница залита цветом сайта.
 *
 * Отдельным файлом, а не в app.css: app.css собирает Vite, а крошки нужны
 * и в админке, где этой сборки нет.
 *
 * Цвета — через --bc-*: правовые страницы со своей тёплой палитрой
 * переопределяют только их (см. legal.css). Разметка —
 * resources/views/layouts/page/components/crumbs.blade.php.
 */
.cw-bc {
    --bc-seg: var(--bg-tertiary, #f1f5f9);
    --bc-text: var(--text-secondary, #64748b);
    --bc-hover: color-mix(in srgb, var(--accent-primary, #3b82f6) 16%, var(--bc-seg));
    --bc-hover-text: var(--text-primary, #1e293b);
    /* #2563eb, а не #3b82f6: белый на #3b82f6 не дотягивает до 4.5:1 */
    --bc-here: #2563eb;
    --bc-here-text: #ffffff;
    min-width: 0;
    max-width: 100%;
}
[data-theme="dark"] .cw-bc {
    --bc-here: #60a5fa;
    --bc-here-text: #0f172a;
}

.cw-bc .cw-bc__list {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1;
}

.cw-bc .cw-bc__li {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    height: 30px;
    margin: 0 0 0 -7px;
    padding: 0;
}
.cw-bc .cw-bc__li--first,
.cw-bc .cw-bc__more { margin-left: 0; }
.cw-bc .cw-bc__li--here { flex: 0 1 auto; }

/* Звено. Селекторы с .cw-bc впереди: у строки оболочки есть свои правила
   для ссылок (.cw-crumbs a), и без этого они перебили бы цвет. */
.cw-bc .cw-bc__seg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 30px;
    margin: 0;
    padding: 0 16px 0 20px;
    border: 0;
    border-radius: 0;
    background: var(--bc-seg);
    color: var(--bc-text);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
    transition: background-color .12s, color .12s;
}
.cw-bc a.cw-bc__seg:hover,
.cw-bc button.cw-bc__seg:hover {
    background: var(--bc-hover);
    color: var(--bc-hover-text);
}
/* Контур фокуса срезала бы clip-path, поэтому фокус — подсветкой и чертой */
.cw-bc a.cw-bc__seg:focus-visible,
.cw-bc button.cw-bc__seg:focus-visible {
    outline: none;
    background: var(--bc-hover);
    color: var(--bc-hover-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cw-bc .cw-bc__seg svg { flex: 0 0 auto; display: block; }

.cw-bc .cw-bc__txt {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* Первое звено: ровный скруглённый левый край */
.cw-bc .cw-bc__li--first > .cw-bc__seg,
.cw-bc .cw-bc__more > .cw-bc__seg {
    padding-left: 12px;
    border-radius: 8px 0 0 8px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}

/* Текущая страница: залита, правый край ровный */
.cw-bc .cw-bc__li--here > .cw-bc__seg {
    padding-right: 14px;
    border-radius: 0 8px 8px 0;
    background: var(--bc-here);
    color: var(--bc-here-text);
    font-weight: 700;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
}
.cw-bc .cw-bc__li--here .cw-bc__txt { max-width: none; }

/* Единственное звено — просто плашка */
.cw-bc .cw-bc__li--first.cw-bc__li--here > .cw-bc__seg {
    padding: 0 12px;
    border-radius: 8px;
    clip-path: none;
}

.cw-bc .cw-bc__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* «…» на телефоне прячет всё, кроме двух последних звеньев */
.cw-bc .cw-bc__more { display: none; }
.cw-bc .cw-bc__more > .cw-bc__seg { cursor: pointer; letter-spacing: .08em; }

@media (max-width: 640px) {
    .cw-bc--fold:not(.is-open) .cw-bc__more { display: flex; }
    .cw-bc--fold:not(.is-open) .cw-bc__li--mid { display: none; }
    .cw-bc.is-open .cw-bc__list { overflow-x: auto; scrollbar-width: none; }
    .cw-bc.is-open .cw-bc__list::-webkit-scrollbar { display: none; }
    .cw-bc .cw-bc__txt { max-width: 130px; }
}

@media (prefers-reduced-motion: reduce) {
    .cw-bc .cw-bc__seg { transition: none; }
}