/* ============================================================================
   КАРКАС «Мотор-Плейс»: боковое меню, плашка профиля, общий поиск, плотность.
   Раздел 3 ТЗ на дизайн.

   Файл грузится ПОСЛЕ base-theme.css и theme.css намеренно: там живёт облик
   (цвета, шрифт, токены), и он переписывается генератором темы. Здесь — только
   устройство каркаса, которого в облике нет. Поэтому `!important` стоит у тех
   правил, где прежний облик уже назвал своё значение: иначе каркас проигрывал
   бы по весу файлу, который и не знает о нём.
   ============================================================================ */

:root {
    /* Числа и цвета — из гайдлайна заказчика (стр. 3–4) через п. 3.2 ТЗ.
       Тёмная поверхность рельса не зависит от светлой/тёмной темы полотна:
       меню темно в обеих. */
    --mp-nav: #222326;
    --mp-nav-active: #2c2d30;
    --mp-nav-hover: #2a2b2e;
    --mp-nav-line: #303136;
    --mp-nav-ink: #e9eaeb;
    --mp-nav-ink-mute: #9a9ca1;
    --mp-accent: #b1212e;

    /* Плотность: «обычно» — числа гайдлайна как есть, «компактно» — те же
       компоненты меньшей высоты (п. 3.6 ТЗ). Значение по умолчанию компактное:
       атрибут ставится скриптом, но до его выполнения страница не должна
       мигать другой плотностью. */
    --mp-row: 36px;
    --mp-head-row: 36px;
    --mp-control: 32px;
}

html[data-density='regular'] {
    --mp-row: 48px;
    --mp-head-row: 40px;
    --mp-control: 40px;
}

/* ── Боковое меню ────────────────────────────────────────────────────────── */

.fi-sidebar,
.fi-main-sidebar {
    background: var(--mp-nav) !important;
    border-right: 1px solid var(--mp-nav-line) !important;
}

.fi-main-sidebar .fi-sidebar-header {
    align-items: center !important;
    background: var(--mp-nav) !important;
    border-bottom: 1px solid var(--mp-nav-line) !important;
    box-shadow: none !important;
    display: flex;
    gap: 6px;
    min-height: 52px;
    padding-inline: 12px !important;
}

.fi-main-sidebar .fi-logo {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
}

/* Кнопки «свернуть/развернуть», которые Filament ставит в шапку рельса, когда
   верхней панели нет. */
.fi-main-sidebar .fi-sidebar-header .fi-icon-btn {
    color: var(--mp-nav-ink-mute) !important;
}

.fi-main-sidebar .fi-sidebar-header .fi-icon-btn:hover {
    background: var(--mp-nav-hover) !important;
    color: #fff !important;
}

.fi-main-sidebar .fi-sidebar-nav {
    padding: 8px 8px 12px !important;
    row-gap: 10px !important;
}

.fi-main-sidebar .fi-sidebar-group-label {
    color: var(--mp-nav-ink-mute) !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fi-main-sidebar .fi-sidebar-group-btn {
    padding: 4px 8px !important;
}

.fi-main-sidebar .fi-sidebar-group-collapse-btn,
.fi-main-sidebar .fi-sidebar-group-btn .fi-icon {
    color: var(--mp-nav-ink-mute) !important;
}

.fi-main-sidebar .fi-sidebar-item-btn {
    align-items: center;
    border-radius: 8px;
    color: var(--mp-nav-ink) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    min-height: 32px;
    padding: 4px 8px !important;
    position: relative;
}

.fi-main-sidebar .fi-sidebar-item-icon,
.fi-main-sidebar .fi-sidebar-item-btn > .fi-icon {
    color: var(--mp-nav-ink-mute) !important;
    height: 18px !important;
    width: 18px !important;
}

.fi-main-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-main-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background: var(--mp-nav-hover) !important;
    color: #fff !important;
}

/* Активный пункт: поверхность #2C2D30 плюс акцентная черта слева — акцент в
   системе один, и он же отмечает основную кнопку. */
.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--mp-nav-active) !important;
    color: #fff !important;
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    background: var(--mp-accent);
    border-radius: 0 2px 2px 0;
    content: '';
    inset-block: 4px;
    inset-inline-start: -8px;
    position: absolute;
    width: 3px;
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: #fff !important;
}

/* Раздел, внутри которого мы находимся: сам пункт приглушён, подсвечен
   открытый экран. Иначе на экране два «текущих» места. */
.fi-main-sidebar .fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn {
    color: #fff !important;
}

.fi-main-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-btn {
    font-size: 13px !important;
    min-height: 28px;
}

.fi-main-sidebar .fi-sidebar-item-grouped-border-part,
.fi-main-sidebar .fi-sidebar-item-grouped-border-part-not-first,
.fi-main-sidebar .fi-sidebar-item-grouped-border-part-not-last {
    background: var(--mp-nav-line) !important;
}

/* Свёрнутое меню — полоса значков в 48 точек: подписи скрывает Filament,
   значки остаётся выровнять по центру. */
.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
    justify-content: center;
    padding-inline: 0 !important;
}

.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    inset-inline-start: -4px;
}

.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
    padding-inline: 6px !important;
}

/* ── Кнопка общего поиска рядом со знаком ────────────────────────────────── */

.mp-nav-search-btn {
    align-items: center;
    background: #2a2b2e;
    border: 1px solid var(--mp-nav-line);
    border-radius: 8px;
    color: var(--mp-nav-ink-mute);
    display: inline-flex;
    flex: 0 0 auto;
    height: 28px;
    justify-content: center;
    margin-inline-start: auto;
    width: 28px;
}

.mp-nav-search-btn:hover {
    background: #34353a;
    color: #fff;
}

.mp-nav-search-btn .fi-icon {
    height: 16px;
    width: 16px;
}

/* ── Плашка профиля ──────────────────────────────────────────────────────── */

.mp-profile {
    border-top: 1px solid var(--mp-nav-line);
    padding: 8px;
    position: relative;
}

.mp-profile-plate {
    align-items: center;
    border-radius: 10px;
    color: var(--mp-nav-ink);
    display: flex;
    gap: 8px;
    padding: 6px;
    text-align: start;
    width: 100%;
}

.mp-profile-plate:hover {
    background: var(--mp-nav-hover);
}

.mp-profile-initials {
    align-items: center;
    background: var(--mp-accent);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 28px;
    font-size: 11.5px;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.mp-profile-who {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.mp-profile-name {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-profile-sub {
    color: var(--mp-nav-ink-mute);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-profile-caret {
    color: var(--mp-nav-ink-mute);
    flex: 0 0 14px;
    height: 14px;
    margin-inline-start: auto;
    width: 14px;
}

/* Меню раскрывается ВВЕРХ: плашка стоит у нижнего края экрана. */
.mp-profile-menu {
    background: #2c2d30;
    border: 1px solid var(--mp-nav-line);
    border-radius: 12px;
    bottom: calc(100% - 4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    inset-inline: 8px;
    min-width: 232px;
    padding: 6px;
    position: absolute;
    z-index: 40;
}

.mp-profile-email {
    color: var(--mp-nav-ink-mute);
    font-size: 11.5px;
    overflow: hidden;
    padding: 6px 8px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-profile-item {
    align-items: center;
    border-radius: 8px;
    color: var(--mp-nav-ink);
    display: flex;
    font-size: 13px;
    gap: 8px;
    padding: 7px 8px;
    width: 100%;
}

.mp-profile-item:hover {
    background: #3a3b40;
    color: #fff;
}

.mp-profile-item .fi-icon {
    color: var(--mp-nav-ink-mute);
    height: 16px;
    width: 16px;
}

.mp-profile-section {
    border-top: 1px solid var(--mp-nav-line);
    margin-top: 6px;
    padding: 8px 8px 6px;
}

.mp-profile-section-label {
    color: var(--mp-nav-ink-mute);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.mp-profile-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mp-profile-choice button {
    background: #35363b;
    border-radius: 7px;
    color: var(--mp-nav-ink);
    font-size: 12px;
    padding: 4px 8px;
}

.mp-profile-choice button:hover {
    background: #42434a;
}

.mp-profile-choice button.mp-chosen {
    background: var(--mp-accent);
    color: #fff;
}

/* «Выйти» отделён чертой — п. 3.5 ТЗ. */
.mp-profile-exit {
    border-top: 1px solid var(--mp-nav-line);
    margin-top: 6px;
    padding-top: 6px;
}

/* ── Общий поиск ─────────────────────────────────────────────────────────── */

.mp-search-veil {
    background: rgba(22, 23, 24, 0.55);
    inset: 0;
    position: fixed;
    z-index: 50;
}

.mp-search-dialog {
    background: var(--bf-surface, #fff);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(22, 23, 24, 0.32);
    display: flex;
    flex-direction: column;
    inset-inline: 0;
    margin-inline: auto;
    max-height: min(560px, 80vh);
    max-width: 640px;
    position: fixed;
    top: 72px;
    width: calc(100% - 32px);
    z-index: 51;
}

.mp-search-field {
    align-items: center;
    border-bottom: 1px solid var(--bf-line, #e1e1e3);
    display: flex;
    gap: 8px;
    padding: 10px 14px;
}

.mp-search-field-icon {
    color: var(--bf-ink-mute, #6b6b6b);
    flex: 0 0 18px;
    height: 18px;
    width: 18px;
}

.mp-search-field input {
    background: transparent;
    border: 0;
    color: var(--bf-ink, #161718);
    flex: 1 1 auto;
    font-size: 14px;
    height: var(--mp-control);
    outline: none;
}

.mp-search-field input::-webkit-search-cancel-button {
    display: none;
}

.mp-search-esc {
    border: 1px solid var(--bf-line, #e1e1e3);
    border-radius: 6px;
    color: var(--bf-ink-mute, #6b6b6b);
    font-size: 11px;
    padding: 2px 6px;
}

.mp-search-body {
    overflow-y: auto;
    padding: 6px;
}

.mp-search-group + .mp-search-group {
    border-top: 1px solid var(--bf-line-soft, #ededef);
    margin-top: 6px;
    padding-top: 6px;
}

.mp-search-group-label {
    color: var(--bf-ink-mute, #6b6b6b);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 6px 8px;
    text-transform: uppercase;
}

.mp-search-row {
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 8px;
}

.mp-search-row:hover {
    background: var(--bf-line-soft, #f4f4f5);
}

.mp-search-row-title {
    color: var(--bf-ink, #161718);
    font-size: 13.5px;
    font-weight: 600;
}

.mp-search-row-subtitle {
    color: var(--bf-ink-soft, #505050);
    font-size: 12px;
}

.mp-search-empty {
    color: var(--bf-ink-soft, #505050);
    font-size: 13px;
    padding: 18px 14px;
}

/* ── Плотность (п. 3.6 ТЗ) ───────────────────────────────────────────────── */

.fi-ta-row .fi-ta-cell {
    height: var(--mp-row);
}

.fi-ta-header-cell {
    height: var(--mp-head-row);
}

.fi-input-wrp,
.fi-fo-field-wrp .fi-input,
.fi-btn {
    min-height: var(--mp-control);
}

.fi-btn {
    padding-block: 0;
}