/* Файл: wwwroot/css/site.css (или любой подключенный файл) */

/* 1️⃣ Общий layout */
.layout {
    display: flex;
}

/* 2️⃣ Sidebar (с фиксированной шириной) */
.sidebar {
    width: 250px; /* полная ширина */
    min-width: 250px; /* чтобы не сжималась при flex‑shrink */
    background: #343a40;
    color: white;
    overflow: hidden;
    transition: width .3s ease; /* плавный переход */
    flex-shrink: 0; /* важно! иначе flex может занять 0 */
}

    /* 3️⃣ Свернутая версия – оставляем только заглушку (60px) */
    .sidebar.collapsed {
        width: 60px;
    }


.sidebar-menu .menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 16px;
    color: #444;
    transition: all .25s ease;
}

.sidebar-menu .menu-link {
    display: flex;
    align-items: center;
    gap: 6px; /* зменшили відстань між іконкою і текстом */
    padding: 10px 14px; /* трохи менше padding для компактності */
    border-radius: 8px;
    font-size: 15px;
    color: #444;
    transition: all .25s ease;
}

    .sidebar-menu .menu-link i {
        font-size: 18px;
        opacity: 0.9;
        transition: .25s;
    }

    .sidebar-menu .menu-link:hover {
        background: #f0f0f0;
        color: #0d6efd;
        transform: translateX(3px);
    }

        .sidebar-menu .menu-link:hover i {
            opacity: 1;
        }

    .sidebar-menu .menu-link.active {
        background: #e8f0ff;
        color: #0d6efd;
        font-weight: 600;
    }

        .sidebar-menu .menu-link.active i {
            color: #0d6efd;
            opacity: 1;
        }

.nav-item {
    margin-bottom: 5px;
}

.menu-text {
    white-space: nowrap; /* текст не переноситься на новий рядок */
}
/* ========================= */
/* 📱 MOBILE FIX (до 768px) */
/* ========================= */
@media (max-width: 768px) {

    .sidebar {
        position: relative; /* не fixed */
        width: 100%; /* повна ширина */
        height: auto; /* мінімальна висота при згорнутому стані */
        background: #343a40;
        overflow: hidden; /* ховаємо меню при згорнутому стані */
        transition: height 0.3s ease;
    }

        /* Згорнутий стан — смужка висотою 60px */
        .sidebar.collapsed {
            height: 60px;
        }

        /* Розгорнутий стан — автоматична висота контенту */
        .sidebar.expanded {
            height: auto; /* або можна max-height: 300px; якщо хочеш обмежити */
        }

    /* Горизонтальна смужка кнопки/тексту завжди видно */
    .menu-text {
        display: inline;
    }
}

/* ----------------------------------------------------
   Специфичные стили для NavMenu.razor
   ---------------------------------------------------- */

/* Фиксированная ширина боковой панели */
.nav-scrollable {
    width: 220px; /* можно изменить под дизайн */
    /*background-color: #f8f9fa;*/ /* светло‑серый фон (можно поменять) */
    height: 100vh;
    overflow-y: auto;
}

/* Базовый стиль ссылок в меню */
.nav-link {
    font-size: 18px; /* увеличиваем шрифт */
    color: #212529; /* обычный цвет текста */
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
}

    /* Эффекты наведения и активации */
    .nav-link:hover,
    .nav-link.active {
        background-color: #e9ecef; /* фон при hover/активном пункте */
        color: #0d6efd; /* синий цвет текста в активном состоянии */
    }


/* -------------------------------------------------------------
   Общий стиль для всех кнопок авторизации
------------------------------------------------------------- */
.auth-nav {
    list-style: none;
    padding: 0;
    margin-left: auto;
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: none;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

    /* Иконки */
    .auth-btn i {
        font-size: 0.95rem;
    }

    /* Варианты */
    .auth-btn.login {
        background: #0d6efd;
        color: #fff;
    }

    .auth-btn.register {
        background: #fff;
        color: #0d6efd;
        border: 1px solid #0d6efd;
    }

    .auth-btn.profile {
        background: #f8f9fa;
        color: #0d6efd;
    }

    .auth-btn.logout {
        background: #dc3545;
        color: #fff;
    }

    /* Hover */
    .auth-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,.15);
    }

    .auth-btn.register:hover {
        background: #0d6efd;
        color: #fff;
    }


.work-schedule-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

    .work-schedule-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

/* Щоб блок не розтягувався у вузькому sidebar */
.sidebar .d-flex.align-items-center {
    min-width: 0;
    overflow: hidden;
}

    /* Hover ефект для інтерактивності */
    .sidebar .d-flex.align-items-center:hover {
        
        transform: translateX(2px);
        transition: all 0.2s;
    }