/**
 * SYSTEM-админка: боковое меню и отступ контента (эталон — sys_country).
 * Подключайте на страницах /index_sys, /sys_*.
 * Для дашборда с портальной шапкой: body.sys-admin-with-header
 */
@import url('./tokens.css');

:root {
    --sidebar-width-effective: var(--sidebar-width);
    /* Отступ всплывающего подменю от правого края колонки (как на референсе) */
    --sys-sidebar-flyout-gap: 10px;
    /* Мин. Y для flyout (ниже шапки shell), если JS не нашёл .sys-shell-tabbar */
    --sys-sidebar-flyout-min-top: 106px;
}

:root.sys-sidebar-collapsed {
    --sidebar-width-effective: var(--sidebar-width-collapsed);
}

body {
    font-family: var(--font-ui);
    display: flex;
    margin: 0;
    background: var(--color-bg-page);
    color: var(--color-text);
}

body.sys-admin-with-header {
    padding-top: 64px;
}

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    flex-shrink: 0;
    box-sizing: border-box;
    background: var(--color-sidebar-bg);
    color: white;
    height: calc(100vh - var(--sys-page-edge-inset));
    position: fixed;
    top: var(--sys-page-edge-inset);
    left: var(--sys-page-edge-inset);
    padding-top: 0;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: auto;
    scrollbar-width: none; /* Firefox: скрыть полосу, прокрутка сохраняется */
    -ms-overflow-style: none; /* IE / legacy Edge */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    /* SVG-маски для иконок (fill #000 для mask) */
    --sys-ic-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.5' fill='%23000'/%3E%3C/svg%3E");
    --sys-ic-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
    --sys-ic-currency: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v12M15 9.5a3 3 0 0 0-6 0c0 2 6 1.5 6 3.5a3 3 0 0 1-6 0'/%3E%3C/svg%3E");
    --sys-ic-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    --sys-ic-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    --sys-ic-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
    --sys-ic-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolygon points='1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6'/%3E%3Cline x1='8' y1='2' x2='8' y2='18'/%3E%3Cline x1='16' y1='6' x2='16' y2='22'/%3E%3C/svg%3E");
    --sys-ic-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");
    --sys-ic-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 21h18M5 21V7l8-4v18M19 21V11l-6-4M9 9v0M9 12v0M9 15v0M9 18v0'/%3E%3C/svg%3E");
    --sys-ic-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
    --sys-ic-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E");
    --sys-ic-mountain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M8 3l4 8 5-5 5 15H2L8 3z'/%3E%3C/svg%3E");
    --sys-ic-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
    --sys-ic-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
    --sys-ic-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
    --sys-ic-table: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3Cline x1='9' y1='3' x2='9' y2='21'/%3E%3Cline x1='15' y1='3' x2='15' y2='21'/%3E%3C/svg%3E");
    --sys-ic-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
}

.sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

body.sys-admin-with-header .sidebar {
    top: calc(var(--portal-header-stack) + var(--sys-page-edge-inset));
    height: calc(100vh - var(--portal-header-stack) - var(--sys-page-edge-inset));
    left: var(--sys-page-edge-inset);
}

.sidebar-brand {
    display: block;
    padding: 8px 10px 10px 8px;
    color: var(--color-sidebar-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.sidebar-brand:hover {
    color: #fff;
}

/* Базовый верх SYSTEM-sidebar: заголовок «SYSTEM ПАНЕЛЬ» + избранное + слот объявлений */
.sidebar .portal-sidebar-top {
    margin-bottom: 4px;
}

.sidebar .portal-sidebar-top__head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 2px 6px 4px 4px;
}

/* Стрелка «как на скрине»: свернуть / развернуть колонку */
.sidebar .portal-sidebar-top__collapse {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: rgba(255, 255, 255, 0.58);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sidebar .portal-sidebar-top__collapse:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar .portal-sidebar-top__collapse:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.35);
    outline-offset: 1px;
}

.sidebar .portal-sidebar-top__collapse svg {
    display: block;
}

/* Страницы без блока «SYSTEM ПАНЕЛЬ» — только кнопка сворачивания под брендом */
.sidebar .sys-sidebar-collapse-only {
    display: flex;
    justify-content: center;
    padding: 0 2px 8px;
}

.sidebar .portal-sidebar-top__label {
    padding: 2px 0;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    flex: 1;
    min-width: 0;
    margin: 0;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
}

.sidebar .portal-sidebar-top__label:hover {
    color: rgba(255, 255, 255, 0.65);
}

.sidebar .portal-sidebar-top__label:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.35);
    outline-offset: 2px;
}

/* Режим «только избранное»: скрыть всё меню кроме бренда и блока шапки */
.sidebar.sidebar--favorites-only {
    display: flex;
    flex-direction: column;
}

.sidebar.sidebar--favorites-only > .sidebar-brand {
    flex-shrink: 0;
}

.sidebar.sidebar--favorites-only > *:not(.sidebar-brand):not([data-portal-sidebar-top]) {
    display: none !important;
}

.sidebar.sidebar--favorites-only > .portal-sidebar-top {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.sidebar.sidebar--favorites-only .portal-sidebar-top__head {
    flex-shrink: 0;
}

.sidebar.sidebar--favorites-only .portal-announcements-strip--rail {
    display: none !important;
}

.sidebar.sidebar--favorites-only .portal-sidebar-favorites-panel {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

.sidebar.sidebar--favorites-only .portal-sidebar-favorites-panel .sys-favorites-sidebar-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar .portal-sidebar-favorites-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sidebar .portal-sidebar-favorites-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar .portal-sidebar-favorites-btn--open {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.sidebar .portal-sidebar-favorites-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.35);
    outline-offset: 1px;
}

.sidebar .portal-sidebar-favorites-btn svg {
    display: block;
}

.sidebar .portal-sidebar-favorites-btn svg path {
    fill: none;
}

.sidebar .portal-sidebar-favorites-btn--has-items:not(.portal-sidebar-favorites-btn--open) {
    color: #fbbf24;
}

/* Звезда залита, если есть избранные маршруты или открыт режим «только избранное» */
.sidebar .portal-sidebar-favorites-btn--has-items svg path,
.sidebar .portal-sidebar-favorites-btn--open svg path {
    fill: currentColor;
    stroke: none;
}

.sidebar .portal-sidebar-favorites-panel {
    background: var(--color-sidebar-surface);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 4px;
    max-height: min(50vh, 320px);
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar .portal-sidebar-favorites-panel[hidden] {
    display: none !important;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-sidebar-text);
    padding: 9px 10px;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.25;
    transition: background 0.18s, color 0.18s;
    cursor: pointer;
    border-left: 3px solid transparent;
    box-sizing: border-box;
}

.nav-link:hover {
    background: var(--color-sidebar-hover);
    color: var(--color-sidebar-text-hover);
}

/* Одиночные верхние ссылки: иконка слева */
.sidebar > a.nav-link:not(.dropdown-item)[href="/index_sys"]::before,
.sidebar > a.nav-link:not(.dropdown-item)[href="/sys_currency_rate"]::before {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: currentColor;
    opacity: 0.85;
    -webkit-mask: center / 16px 16px no-repeat;
    mask: center / 16px 16px no-repeat;
}

.sidebar > a.nav-link:not(.dropdown-item)[href="/index_sys"]::before {
    -webkit-mask-image: var(--sys-ic-home);
    mask-image: var(--sys-ic-home);
}

.sidebar > a.nav-link:not(.dropdown-item)[href="/sys_currency_rate"]::before {
    -webkit-mask-image: var(--sys-ic-currency);
    mask-image: var(--sys-ic-currency);
}

.nav-link.active:not(.dropdown-item) {
    background: var(--color-sidebar-active);
    color: var(--color-sidebar-text-hover);
    font-weight: 600;
    border-left: 3px solid var(--color-sidebar-accent);
}

.dropdown-btn {
    position: relative;
    user-select: none;
    padding-right: 36px;
}

.dropdown-btn::before {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: currentColor;
    opacity: 0.85;
    -webkit-mask: center / 16px 16px no-repeat;
    mask: center / 16px 16px no-repeat;
    -webkit-mask-image: var(--sys-ic-menu);
    mask-image: var(--sys-ic-menu);
}

.nav-link.dropdown-btn[onclick*='systemMessagesDropdown']::before {
    -webkit-mask-image: var(--sys-ic-chat);
    mask-image: var(--sys-ic-chat);
}

.nav-link.dropdown-btn[onclick*='userDataDropdown']::before {
    -webkit-mask-image: var(--sys-ic-users);
    mask-image: var(--sys-ic-users);
}

.nav-link.dropdown-btn[onclick*='accessDropdown']::before {
    -webkit-mask-image: var(--sys-ic-shield);
    mask-image: var(--sys-ic-shield);
}

.nav-link.dropdown-btn[onclick*='locationDropdown']::before {
    -webkit-mask-image: var(--sys-ic-map);
    mask-image: var(--sys-ic-map);
}

.nav-link.dropdown-btn[onclick*='systemActivitiesDropdown']::before {
    -webkit-mask-image: var(--sys-ic-layers);
    mask-image: var(--sys-ic-layers);
}

.nav-link.dropdown-btn[onclick*='companiesDropdown']::before {
    -webkit-mask-image: var(--sys-ic-building);
    mask-image: var(--sys-ic-building);
}

.nav-link.dropdown-btn[onclick*='agentsDropdown']::before {
    -webkit-mask-image: var(--sys-ic-briefcase);
    mask-image: var(--sys-ic-briefcase);
}

.nav-link.dropdown-btn[onclick*='excursionsDropdown']::before {
    -webkit-mask-image: var(--sys-ic-compass);
    mask-image: var(--sys-ic-compass);
}

.nav-link.dropdown-btn[onclick*='attractionsDropdown']::before,
.nav-link.dropdown-btn[onclick*='attractionCrmDropdown']::before {
    -webkit-mask-image: var(--sys-ic-mountain);
    mask-image: var(--sys-ic-mountain);
}

.nav-link.dropdown-btn[onclick*='excursionCrmDropdown']::before {
    -webkit-mask-image: var(--sys-ic-compass);
    mask-image: var(--sys-ic-compass);
}

.nav-link.dropdown-btn[onclick*='ordersCrmDropdown']::before {
    -webkit-mask-image: var(--sys-ic-receipt);
    mask-image: var(--sys-ic-receipt);
}

.nav-link.dropdown-btn[onclick*='ordersCrmCourseDropdown']::before,
.nav-link.dropdown-btn[onclick*='courseOrderCrmDropdown']::before {
    -webkit-mask-image: var(--sys-ic-book);
    mask-image: var(--sys-ic-book);
}

.nav-link.dropdown-btn[onclick*='cursCrmDropdown']::before {
    -webkit-mask-image: var(--sys-ic-book);
    mask-image: var(--sys-ic-book);
}

.nav-link.dropdown-btn[onclick*='photosTablesDropdown']::before {
    -webkit-mask-image: var(--sys-ic-image);
    mask-image: var(--sys-ic-image);
}

/* Шеврон раскрытия */
.dropdown-btn::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--color-sidebar-accent-muted);
    transition: transform 0.2s ease, border-top-color 0.2s;
}

.dropdown-btn:has(+ .dropdown-container.show)::after {
    transform: rotate(180deg);
    border-top-color: var(--color-sidebar-accent);
}

/* Активный раздел: тонкая рамка у заголовка (как на референсе) */
.dropdown-btn:has(+ .dropdown-container .dropdown-item.active) {
    color: var(--color-sidebar-text-hover);
    box-shadow: inset 0 0 0 1px var(--color-sidebar-accent);
    border-radius: var(--radius-sm);
    margin: 2px 6px;
    padding-left: 8px;
    padding-right: 36px;
}

.dropdown-btn:has(+ .dropdown-container .dropdown-item.active)::before {
    opacity: 1;
    background: var(--color-sidebar-accent);
}

.dropdown-container {
    display: none;
    background: transparent;
    margin: 0 6px 6px 8px;
    padding: 2px 0 4px 6px;
    border-left: 2px solid var(--color-sidebar-rail);
}

.dropdown-container.show {
    display: block;
}

.dropdown-container.show:not(:has(.dropdown-item.active)) {
    border-left-color: var(--color-sidebar-rail);
}

/* Толстая зелёная линия у активного подменю */
.dropdown-container:has(.dropdown-item.active) {
    border-left-width: 4px;
    border-left-color: var(--color-sidebar-accent);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 4px;
    font-size: 12px;
    color: var(--color-sidebar-text);
    border-left: none !important;
    border-radius: 4px;
    margin: 1px 0;
}

.dropdown-item::before {
    content: '';
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    background: currentColor;
    opacity: 0.48;
    -webkit-mask: center / 13px 13px no-repeat;
    mask: center / 13px 13px no-repeat;
    -webkit-mask-image: var(--sys-ic-dot);
    mask-image: var(--sys-ic-dot);
}

.dropdown-item[href*='/sys_msg']::before,
.dropdown-item[href*='/sys_messages']::before,
.dropdown-item[href*='/sys_internal_messages']::before {
    -webkit-mask-image: var(--sys-ic-chat);
    mask-image: var(--sys-ic-chat);
}

.dropdown-item[href*='/sys_user']::before,
.dropdown-item[href='/sys_group_has_user']::before {
    -webkit-mask-image: var(--sys-ic-users);
    mask-image: var(--sys-ic-users);
}

.dropdown-item[href='/sys_category']::before,
.dropdown-item[href='/sys_interface']::before,
.dropdown-item[href='/sys_access']::before,
.dropdown-item[href='/sys_group']::before,
.dropdown-item[href='/sys_group_permission']::before,
.dropdown-item[href='/sys_registration_rule_map']::before {
    -webkit-mask-image: var(--sys-ic-shield);
    mask-image: var(--sys-ic-shield);
}

.dropdown-item[href='/sys_country']::before,
.dropdown-item[href='/sys_region']::before,
.dropdown-item[href='/sys_locality']::before {
    -webkit-mask-image: var(--sys-ic-map);
    mask-image: var(--sys-ic-map);
}

.dropdown-item[href='/sys_type_of_resource']::before,
.dropdown-item[href='/sys_action_element']::before,
.dropdown-item[href='/sys_action_system']::before,
.dropdown-item[href='/sys_additional_service']::before {
    -webkit-mask-image: var(--sys-ic-layers);
    mask-image: var(--sys-ic-layers);
}

.dropdown-item[href*='/sys_company']::before,
.dropdown-item[href*='/sys_tariff_company']::before,
.dropdown-item[href*='/sys_staff_company']::before,
.dropdown-item[href*='/sys_action_crm']::before,
.dropdown-item[href*='/sys_location_crm']::before,
.dropdown-item[href*='/sys_curs_of_stady_crm']::before,
.dropdown-item[href*='/sys_staff_crm_curs']::before,
.dropdown-item[href*='/sys_action_sys_']::before {
    -webkit-mask-image: var(--sys-ic-building);
    mask-image: var(--sys-ic-building);
}

.dropdown-item[href*='/sys_agent']::before,
.dropdown-item[href*='/sys_tariff_agent']::before,
.dropdown-item[href*='/sys_staff_agent']::before {
    -webkit-mask-image: var(--sys-ic-briefcase);
    mask-image: var(--sys-ic-briefcase);
}

.dropdown-item[href*='/sys_excursion']::before,
.dropdown-item[href*='/sys_attraction_excursion']::before,
.dropdown-item[href*='/sys_staff_crm_excursion']::before,
.dropdown-item[href*='/sys_agent_booking']::before {
    -webkit-mask-image: var(--sys-ic-compass);
    mask-image: var(--sys-ic-compass);
}

.dropdown-item[href*='/sys_attraction_crm']::before {
    -webkit-mask-image: var(--sys-ic-mountain);
    mask-image: var(--sys-ic-mountain);
}

.dropdown-item[href*='/sys_order_crm']:not([href*='/sys_order_crm_course'])::before {
    -webkit-mask-image: var(--sys-ic-receipt);
    mask-image: var(--sys-ic-receipt);
}

.dropdown-item[href*='/sys_order_crm_course']::before {
    -webkit-mask-image: var(--sys-ic-book);
    mask-image: var(--sys-ic-book);
}

.dropdown-item[href*='/sys_foto']::before,
.dropdown-item[href*='/sys_photos']::before {
    -webkit-mask-image: var(--sys-ic-image);
    mask-image: var(--sys-ic-image);
}

.dropdown-item[href*='/sys_msg_']::before {
    -webkit-mask-image: var(--sys-ic-table);
    mask-image: var(--sys-ic-table);
}

.dropdown-item:hover {
    color: var(--color-sidebar-text-hover);
    background: var(--color-sidebar-hover);
}

.dropdown-item:hover::before {
    opacity: 0.72;
}

.dropdown-item.active {
    color: var(--color-sidebar-text-hover);
    background: var(--color-sidebar-active);
    font-weight: 600;
}

.dropdown-item.active::before {
    opacity: 1;
    background: var(--color-sidebar-accent);
}

/* Избранное в сайдбаре: без дублирующих иконок у ссылок */
.portal-sidebar-favorites-panel .sys-favorites-sidebar-link::before {
    content: none;
    display: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.portal-sidebar-favorites-panel .sys-favorites-sidebar-link {
    gap: 0;
}

.main-content {
    margin-left: calc(var(--sidebar-width-effective) + var(--sys-page-edge-inset));
    margin-top: var(--sys-page-edge-inset);
    padding: 30px;
    width: 100%;
    box-sizing: border-box;
}

/* SYSTEM shell: без лишних полей вокруг шапки и контента (как полноразмерное меню) */
:is(body.sys-crm-page) .main-content {
    padding: 0;
    /* width:100% + margin-left давали ширину больше viewport — вкладки обрезались справа */
    width: calc(100vw - var(--sidebar-width-effective) - var(--sys-page-edge-inset) * 2);
    max-width: calc(100vw - var(--sidebar-width-effective) - var(--sys-page-edge-inset) * 2);
    min-width: 0;
    overflow-x: hidden;
}

body.sys-crm-page {
    overflow-x: hidden;
    background: #fff;
}

/* ——— Свернутая колонка (только иконки), класс на <html> ——— */
html.sys-sidebar-collapsed .sidebar {
    width: var(--sidebar-width-collapsed);
    min-width: var(--sidebar-width-collapsed);
    max-width: var(--sidebar-width-collapsed);
}

html.sys-sidebar-collapsed .sidebar-brand {
    font-size: 0;
    padding: 8px 4px;
    text-align: center;
    overflow: hidden;
}

html.sys-sidebar-collapsed .sidebar-brand::after {
    content: 'G';
    font-size: 15px;
    font-weight: 700;
    color: var(--color-sidebar-text-hover);
}

html.sys-sidebar-collapsed .portal-sidebar-top__head {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 6px;
}

html.sys-sidebar-collapsed .portal-sidebar-top__label {
    display: none;
}

html.sys-sidebar-collapsed .portal-sidebar-favorites-btn {
    width: 36px;
    height: 36px;
}

html.sys-sidebar-collapsed .portal-sidebar-favorites-panel:not(.portal-sidebar-favorites-panel--flyout-open),
html.sys-sidebar-collapsed .portal-announcements-strip--rail {
    display: none !important;
}

html.sys-sidebar-collapsed .portal-sidebar-favorites-panel.portal-sidebar-favorites-panel--flyout-open {
    display: flex !important;
    flex-direction: column;
    max-height: min(70vh, 380px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--radius-md);
    background: var(--color-sidebar-surface);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overscroll-behavior: contain;
}

html.sys-sidebar-collapsed .portal-sidebar-favorites-panel.portal-sidebar-favorites-panel--flyout-open .sys-favorites-sidebar-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

html.sys-sidebar-collapsed .sidebar .nav-link:not(.dropdown-item) {
    justify-content: center;
    font-size: 0;
    letter-spacing: 0;
    gap: 0;
    padding: 10px 6px;
}

html.sys-sidebar-collapsed .sidebar .nav-link:not(.dropdown-item)::before {
    margin: 0;
}

html.sys-sidebar-collapsed .sidebar .dropdown-btn {
    justify-content: center;
    font-size: 0;
    gap: 0;
    padding: 10px 6px;
    padding-right: 6px;
}

html.sys-sidebar-collapsed .sidebar .dropdown-btn::before {
    margin: 0;
}

html.sys-sidebar-collapsed .sidebar .dropdown-btn::after {
    display: none;
}

/* В свёрнутом виде подменю только по hover (класс выставляет JS) */
html.sys-sidebar-collapsed .sidebar .dropdown-container {
    display: none !important;
}

html.sys-sidebar-collapsed .sidebar .dropdown-container.show:not(.dropdown-container--flyout-open) {
    display: none !important;
}

html.sys-sidebar-collapsed .sidebar .dropdown-container.dropdown-container--flyout-open {
    display: block !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    border-left: none !important;
    border-radius: var(--radius-md);
    background: var(--color-sidebar-surface);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overscroll-behavior: contain;
}

/* Epic C-005: избранное в сайдбаре SYSTEM */
.sys-favorites-sidebar-list {
    margin: 0;
    padding: 0;
}

.sys-favorites-sidebar-item {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sys-favorites-sidebar-item--drag {
    opacity: 0.75;
}

.sys-favorites-sidebar-drag {
    flex: 0 0 auto;
    padding: 8px 6px 8px 10px;
    cursor: grab;
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
    line-height: 1.2;
    user-select: none;
}

.sys-favorites-sidebar-drag:active {
    cursor: grabbing;
}

.sys-favorites-sidebar-link {
    flex: 1 1 auto;
    padding-left: 4px !important;
}

.sys-favorites-sidebar-hint {
    margin: 0;
    padding: 8px 12px 10px;
    font-size: 10px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.4);
}