/* Каркас ЛК: app-shell, сайдбар, навигация, адаптив */

body {
    background: var(--tkd-app-bg);
    min-height: 100vh;
}

/* === App-shell === */
.lk-shell {
    display: grid;
    /* колонка держит ФИО ребёнка в одну строку */
    grid-template-columns: 320px 1fr;
    min-height: 100vh;
    /* каркас не шире вьюпорта + гасит фантомный горизонтальный скролл в 1-2px
       (min-content топбара распирает grid при узкой ширине); clip не создаёт
       scroll-контейнер, вертикальный скролл страницы и sticky-топбар целы */
    max-width: 100%;
    overflow-x: clip;
}

/* === Сайдбар === */
.lk-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    color: #fff;
    background: linear-gradient(
            160deg,
            var(--tkd-sidebar-1) 0%,
            var(--tkd-sidebar-2) 100%
        ),
        /* тонкий «татами»-паттерн */
            repeating-linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.03) 0,
                rgba(255, 255, 255, 0.03) 1px,
                transparent 1px,
                transparent 9px
            );
    border-right: 3px solid var(--tkd-accent);
}

.lk-sidebar__head {
    padding: 22px 22px 16px;
}

.lk-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}

.lk-brand img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    padding: 2px;
}

.lk-brand__text {
    display: flex;
    flex-direction: column;
}

.lk-brand__title {
    display: block;
    font-family: 'Bitter', Georgia, serif;
    font-weight: 600;
    font-size: 0.78rem;
    line-height: 1.25;
    white-space: nowrap;
}

.lk-brand__sub {
    display: block;
    font-family: 'Bitter', Georgia, serif;
    font-weight: 500;
    font-size: 0.72rem;
    line-height: 1.25;
    white-space: nowrap;
}

.lk-sidebar__head .belt-stripe {
    margin-top: 16px;
}

/* === Навигация === */
.lk-nav {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.lk-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.lk-nav__link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.lk-nav__link.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.lk-nav__link.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: var(--tkd-accent);
}

/* logout — кнопка-форма в виде nav-ссылки */
button.lk-nav__link {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lk-nav__icon {
    width: 18px;
    flex: none;
}

/* Список детей под «Мои дети» */
.lk-nav__children {
    list-style: none;
    margin: 0 0 4px;
    padding: 2px 0 2px 30px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Черта и заголовок ушедших в меню: её формулировка про синее поле.
   Цвет пунктов не гасим, ниже 4.5:1 на синем уходит любой оттенок */
.lk-nav__divider {
    height: 1px;
    margin: 10px 12px 6px;
    background: rgba(255, 255, 255, 0.22);
}

.lk-nav__group {
    padding: 0 12px 4px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.lk-nav__sublink {
    display: block;
    padding: 7px 12px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.66);
    text-decoration: none;
    font-size: 0.86rem;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.lk-nav__sublink:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.lk-nav__sublink.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.lk-sidebar__foot {
    padding: 14px 22px 20px;
    font-size: 0.78rem;
    opacity: 0.7;
}

.lk-sidebar__foot a {
    color: rgba(255, 255, 255, 0.8);
}

/* === Контент === */
.lk-main {
    min-width: 0;
    background: radial-gradient(
            1200px 320px at 70% -10%,
            rgba(35, 67, 130, 0.06),
            transparent 70%
        ),
        var(--tkd-app-bg);
}

.lk-content {
    max-width: 1040px;
    margin: 0 auto;
    padding: 30px 28px 56px;
}

/* === Мобильный топбар (скрыт на десктопе) === */
.lk-topbar {
    display: none;
}

/* Кебаб-меню второстепенного — только мобайл */
.lk-kebab {
    display: none;
}

/* === Сообщения === */
.lk-messages {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* === Адаптив: сайдбар → липкий верхний топбар === */
@media (max-width: 768px) {
    .lk-shell {
        grid-template-columns: 1fr;
        /* строка топбара — по контенту, контент забирает остаток высоты;
           иначе min-height:100vh раздувает строку топбара (пустая полоса) */
        grid-template-rows: auto 1fr;
    }

    /* Липкий топбар: лого | разделы (растягиваются) | кебаб */
    .lk-sidebar {
        position: sticky;
        top: 0;
        z-index: 1030;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        padding: 0 8px;
        border-right: 0;
        border-bottom: 3px solid var(--tkd-accent);
    }

    .lk-sidebar__head {
        padding: 8px 4px;
    }

    .lk-brand img {
        width: 36px;
        height: 36px;
    }

    /* На мобайле бренд — только эмблема (текст занял бы место разделов) */
    .lk-brand__text,
    .lk-sidebar__head .belt-stripe,
    .lk-nav__logout,
    .lk-nav__children,
    .lk-sidebar__foot {
        display: none;
    }

    .lk-nav {
        flex: 1;
        flex-direction: row;
        align-items: center;
        padding: 6px 0;
        gap: 2px;
    }

    /* Тач-таргет ≥44px (WCAG 2.5.8 / рабочий стандарт) */
    .lk-nav__link {
        min-height: 44px;
        gap: 6px;
        padding: 8px 9px;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    /* «родителя» уточняет там, где других профилей нет: на узком ряду лишнее */
    .lk-nav__long {
        display: none;
    }

    /* В мобильном ряду максимум два раздела, лишнее живёт в кебаб-меню:
       «Профиль» после онбординга почти не открывают, а новый раздел
       по умолчанию рождается в кебабе, ряд не резиновый */
    .lk-nav__profile {
        display: none;
    }

    .lk-nav__equipment,
    .lk-nav__insurance {
        display: none;
    }

    .lk-nav__icon {
        width: 16px;
        height: 16px;
    }

    .lk-nav__link.is-active::before {
        top: auto;
        bottom: 0;
        left: 8px;
        right: 8px;
        width: auto;
        height: 4px;
        border-radius: 3px 3px 0 0;
    }

    .lk-kebab {
        display: block;
        flex: none;
    }

    .lk-kebab__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        cursor: pointer;
        transition: background-color 0.18s ease;
    }

    .lk-kebab__btn:hover,
    .lk-kebab__btn[aria-expanded='true'] {
        background: rgba(255, 255, 255, 0.18);
    }

    .lk-content {
        padding: 22px 16px 44px;
    }
}

/* На самых узких экранах иконки уступают место тексту пунктов */
@media (max-width: 340px) {
    .lk-nav__icon {
        display: none;
    }
}