/*
    Иконки бокового меню.

    Файл ГЛОБАЛЬНЫЙ, а не привязанный к компоненту. Причина: меню строится на
    MudNavLink, и чтобы покрасить иконку при наведении на пункт, нужен
    селектор от ссылки к иконке. В стилях компонента такой селектор не
    работает: Blazor ограничивает их элементами своего компонента, а ссылка
    нарисована чужим.

    Знак стоит на светлой плашке своего цвета. Двадцать разноцветных линий
    в столбце читаются как пёстрая мешанина и цвет перестаёт что-либо
    значить; плашка отделяет знак от текста, и цвет становится меткой
    раздела, а не украшением.

    Размер знака у всех одинаковый (18), плашка — 26: столбец не «дрожит».
*/

.nav-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.5rem;
    margin-inline-end: 0.6rem;
    color: #64748b;
    background: rgba(148, 163, 184, 0.14);
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.nav-ico svg {
    width: 1.125rem;
    height: 1.125rem;
    display: block;
}

/* Наведение и активный пункт: плашка чуть плотнее, знак приподнимается.
   Цвет остаётся СВОИМ — иначе раздел терял бы метку при выборе. */
.mud-nav-link:hover .nav-ico,
.mud-nav-link.active .nav-ico {
    transform: translateY(-1px);
}

/* ── Цвета разделов ────────────────────────────────────────────────────
   Спокойные, одной насыщенности: соседние пункты различимы, но столбец
   не спорит с содержимым страницы. */

.nav-ico--home { color: #6366F1; background: rgba(99, 102, 241, 0.13); }
.nav-ico--dashboard { color: #0EA5E9; background: rgba(14, 165, 233, 0.13); }
.nav-ico--workers { color: #8B5CF6; background: rgba(139, 92, 246, 0.14); }
.nav-ico--org { color: #3B82F6; background: rgba(59, 130, 246, 0.13); }
.nav-ico--positions { color: #D97706; background: rgba(217, 119, 6, 0.13); }
.nav-ico--ovr { color: #F43F5E; background: rgba(244, 63, 94, 0.13); }
.nav-ico--production { color: #F97316; background: rgba(249, 115, 22, 0.14); }
.nav-ico--observations { color: #10B981; background: rgba(16, 185, 129, 0.14); }
.nav-ico--statistics { color: #0D9488; background: rgba(13, 148, 136, 0.14); }
.nav-ico--types { color: #D946EF; background: rgba(217, 70, 239, 0.13); }
.nav-ico--categories { color: #0891B2; background: rgba(8, 145, 178, 0.14); }
.nav-ico--documents { color: #64748B; background: rgba(100, 116, 139, 0.16); }
.nav-ico--offline { color: #94A3B8; background: rgba(148, 163, 184, 0.2); }
.nav-ico--mail { color: #0284C7; background: rgba(2, 132, 199, 0.13); }
.nav-ico--errors { color: #EF4444; background: rgba(239, 68, 68, 0.13); }
.nav-ico--actions { color: #B45309; background: rgba(180, 83, 9, 0.13); }
.nav-ico--notifications { color: #7C3AED; background: rgba(124, 58, 237, 0.13); }
.nav-ico--weather { color: #F59E0B; background: rgba(245, 158, 11, 0.16); }
.nav-ico--counter { color: #059669; background: rgba(5, 150, 105, 0.13); }
.nav-ico--localization { color: #06B6D4; background: rgba(6, 182, 212, 0.14); }
.nav-ico--classifier { color: #7C3AED; background: rgba(124, 58, 237, 0.13); }
.nav-ico--substitutions { color: #0D9488; background: rgba(13, 148, 136, 0.14); }
/* Объявления: розовый — единственная свободная «громкая» краска.
   Сообщение от администратора должно находиться взглядом в столбце. */
.nav-ico--announcements { color: #DB2777; background: rgba(219, 39, 119, 0.13); }

/* Блок входа/выхода: те же плашки. */
.nav-ico--user { color: #6366F1; background: rgba(99, 102, 241, 0.13); }
.nav-ico--login { color: #10B981; background: rgba(16, 185, 129, 0.14); }

/* В кнопке «Выйти» плашка не нужна: там своя плотность. */
.nav-ico--button {
    width: 1rem;
    height: 1rem;
    margin-inline-end: 0.4rem;
    color: inherit;
    background: transparent;
    border-radius: 0;
}

.mud-nav-link:hover .nav-ico--button,
.mud-button-root:hover .nav-ico--button {
    transform: none;
}

/* ── Наведение: подложка плотнее своего же цвета ─────────────────────── */

.mud-nav-link:hover .nav-ico--home,
.mud-nav-link.active .nav-ico--home { background: rgba(99, 102, 241, 0.22); }
.mud-nav-link:hover .nav-ico--dashboard,
.mud-nav-link.active .nav-ico--dashboard { background: rgba(14, 165, 233, 0.22); }
.mud-nav-link:hover .nav-ico--workers,
.mud-nav-link.active .nav-ico--workers { background: rgba(139, 92, 246, 0.23); }
.mud-nav-link:hover .nav-ico--org,
.mud-nav-link.active .nav-ico--org { background: rgba(59, 130, 246, 0.22); }
.mud-nav-link:hover .nav-ico--positions,
.mud-nav-link.active .nav-ico--positions { background: rgba(217, 119, 6, 0.22); }
.mud-nav-link:hover .nav-ico--ovr,
.mud-nav-link.active .nav-ico--ovr { background: rgba(244, 63, 94, 0.22); }
.mud-nav-link:hover .nav-ico--production,
.mud-nav-link.active .nav-ico--production { background: rgba(249, 115, 22, 0.23); }
.mud-nav-link:hover .nav-ico--observations,
.mud-nav-link.active .nav-ico--observations { background: rgba(16, 185, 129, 0.23); }
.mud-nav-link:hover .nav-ico--statistics,
.mud-nav-link.active .nav-ico--statistics { background: rgba(13, 148, 136, 0.23); }
.mud-nav-link:hover .nav-ico--types,
.mud-nav-link.active .nav-ico--types { background: rgba(217, 70, 239, 0.22); }
.mud-nav-link:hover .nav-ico--categories,
.mud-nav-link.active .nav-ico--categories { background: rgba(8, 145, 178, 0.23); }
.mud-nav-link:hover .nav-ico--documents,
.mud-nav-link.active .nav-ico--documents { background: rgba(100, 116, 139, 0.26); }
.mud-nav-link:hover .nav-ico--offline,
.mud-nav-link.active .nav-ico--offline { background: rgba(148, 163, 184, 0.3); }
.mud-nav-link:hover .nav-ico--mail,
.mud-nav-link.active .nav-ico--mail { background: rgba(2, 132, 199, 0.22); }
.mud-nav-link:hover .nav-ico--errors,
.mud-nav-link.active .nav-ico--errors { background: rgba(239, 68, 68, 0.22); }
.mud-nav-link:hover .nav-ico--actions,
.mud-nav-link.active .nav-ico--actions { background: rgba(180, 83, 9, 0.22); }
.mud-nav-link:hover .nav-ico--notifications,
.mud-nav-link.active .nav-ico--notifications { background: rgba(124, 58, 237, 0.22); }
.mud-nav-link:hover .nav-ico--weather,
.mud-nav-link.active .nav-ico--weather { background: rgba(245, 158, 11, 0.26); }
.mud-nav-link:hover .nav-ico--counter,
.mud-nav-link.active .nav-ico--counter { background: rgba(5, 150, 105, 0.22); }
.mud-nav-link:hover .nav-ico--classifier,
.mud-nav-link.active .nav-ico--classifier { background: rgba(124, 58, 237, 0.22); }
.mud-nav-link:hover .nav-ico--substitutions,
.mud-nav-link.active .nav-ico--substitutions { background: rgba(13, 148, 136, 0.23); }
.mud-nav-link:hover .nav-ico--announcements,
.mud-nav-link.active .nav-ico--announcements { background: rgba(219, 39, 119, 0.22); }
.mud-nav-link:hover .nav-ico--localization,
.mud-nav-link.active .nav-ico--localization { background: rgba(6, 182, 212, 0.23); }
.mud-nav-link:hover .nav-ico--user,
.mud-nav-link.active .nav-ico--user { background: rgba(99, 102, 241, 0.22); }
.mud-nav-link:hover .nav-ico--login,
.mud-nav-link.active .nav-ico--login { background: rgba(16, 185, 129, 0.23); }