/* Боковое меню как в siamtaskmanager: свёрнуто до иконок, раскрывается при наведении.
   Там раскрытие сделано на JS, здесь то же самое на CSS (:hover / :focus-within). */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--color-grey-white);
    border-right: 1px solid var(--color-grey-82);
    overflow: hidden;
    transition: width 0.2s ease, box-shadow 0.2s ease;
}

.sidebar:hover,
.sidebar:focus-within {
    width: var(--sidebar-width-expanded);
    box-shadow: var(--shadow-3);
}

.sidebar-header {
    display: flex;
    align-items: center;
    height: var(--page-header-height);
    min-height: var(--page-header-height);
    padding: 0 14px;
    border-bottom: 1px solid var(--color-grey-82);
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-black);
    overflow: hidden;
}

.logo-icon {
    width: 42px;
    min-width: 42px;
    height: 42px;
}

.logo-text {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.sidebar-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 8px 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.nav-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 12px 26px;
    border: none;
    background: none;
    color: var(--color-text-black);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

a.nav-link:hover,
button.nav-link:hover {
    background-color: var(--color-grey-92);
}

.nav-link.active {
    background-color: var(--color-blue-160);
    color: var(--color-blue-80);
}

.nav-link.active::before {
    content: "";
    position: absolute;
    top: 4px;
    right: 0;
    bottom: 4px;
    width: 2px;
    border-radius: 0 0 2px 2px;
    background-color: var(--color-blue-80);
}

.nav-text {
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.logo-text {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.sidebar:hover .nav-text,
.sidebar:focus-within .nav-text,
.sidebar:hover .logo-text,
.sidebar:focus-within .logo-text {
    opacity: 1;
}

/* Иконки разделов: обычная и залитая для активного пункта */
.nav-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.nav-icon--home {
    background-image: url("../../img/icon/boards.svg");
}

.nav-link.active .nav-icon--home {
    background-image: url("../../img/icon/boards-filled.svg");
}

.nav-icon--projects {
    background-image: url("../../img/icon/projects.svg");
}

.nav-link.active .nav-icon--projects {
    background-image: url("../../img/icon/projects-filled.svg");
}

.nav-icon--summary {
    background-image: url("../../img/icon/tasks.svg");
}

.nav-link.active .nav-icon--summary {
    background-image: url("../../img/icon/tasks-filled.svg");
}

.nav-icon--metrics {
    background-image: url("../../img/icon/backlog.svg");
}

.nav-link.active .nav-icon--metrics {
    background-image: url("../../img/icon/backlog-filled.svg");
}

.nav-icon--sprints {
    background-image: url("../../img/icon/calendar.svg");
}

.nav-link.active .nav-icon--sprints {
    background-image: url("../../img/icon/calendar-filled.svg");
}

.nav-icon--dynamics {
    background-image: url("../../img/icon/reports.svg");
}

.nav-link.active .nav-icon--dynamics {
    background-image: url("../../img/icon/reports-filled.svg");
}

/* Командные метрики — часы реактива и развития (в TaskManager у «Тайм-трекинга» одна иконка на оба состояния) */
.nav-icon--team {
    background-image: url("../../img/icon/time-track-icon.svg");
}

.nav-icon--users {
    background-image: url("../../img/icon/users.svg");
}

.nav-link.active .nav-icon--users {
    background-image: url("../../img/icon/users-filled.svg");
}

.nav-icon--logout {
    background-image: url("../../img/icon/logout.svg");
}

/* Пользователь и выход внизу меню */
.user-menu {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--color-grey-82);
}

.user-link {
    height: 52px;
    padding: 6px 20px;
    cursor: default;
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #B3C8E6;
    color: #333333;
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
}

/* Аватарка-картинка из единой системы в том же кружке, что и инициалы */
img.avatar {
    object-fit: cover;
}

.user-name {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.user-role {
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-grey-48);
}

.logout-form {
    margin: 0;
}