/* 🔹 Контент, когда панель открыта таблица ближе к боковой панели*/
.content {
    margin-left: 70px;            /* или 270px, как вам нужно */
    padding: 70px 20px 20px;       /* или только padding-top: 80px; */
    width: auto;     /* если нужно вычислять ширину */
    min-height: 100vh;            /* чтобы растягивать по высоте экрана */
    box-sizing: border-box;        /* учитываем отступы */
    transition: all 0.3s ease-in-out; /* универсальная анимация */
}


/* ================================================================== */


/* ================================================================== */

/* 🔹 Форма фильтра */
.filter-form {
    display: flex;         /* Выстраиваем элементы в линию */
    align-items: center;   /* Выравниваем по центру по вертикали */
    gap: 10px;             /* Расстояние между элементами */
    margin-bottom: 10px;   /* Отступ снизу */
}

/* 🔹 Поля ввода фильтра */
.filter-form input,
.filter-form select {
    width: 200px;          /* Фиксированная ширина */
    padding: 6px;          /* Внутренний отступ */
    border-radius: 5px;    /* Скруглённые углы */
    border: 1px solid #ccc;/* Серая рамка */
}

/* 🔹 Кнопки в форме */
.filter-form .btn {
    padding: 6px 12px;     /* Отступы */
    font-size: 14px;       /* Размер шрифта */
}

/* 🔹 Кнопка "Добавить клиента" */
.add-client-btn {
    display: inline-block;     /* Не на всю строку */
    background-color: #007bff; /* Синий фон */
    color: #fff;               /* Белый текст */
    border-radius: 5px;        /* Скруглённые углы */
    padding: 10px 15px;        /* Отступы */
    font-size: 14px;           /* Размер шрифта */
    text-decoration: none;     /* Без подчёркиваний */
    transition: all 0.3s ease; /* Плавная анимация */
}

.add-client-btn:hover {
    background-color: #0056b3; /* Темнее при наведении */
}

/* 🔹 Центрирование формы клиента */
.client-form-container {
    max-width: 450px;  /* Максимальная ширина */
    margin: 20px auto; /* Отступ сверху/снизу 20px, по центру по горизонтали */
    padding: 20px;     /* Внутренние отступы */
    background: #fff;  /* Белый фон */
    border-radius: 10px; /* Скруглённые углы */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
}

/* 🔹 Заголовок формы */
.client-form-container h2 {
    color: #000;       /* Чёрный цвет */
    font-weight: bold; /* Жирный шрифт */
    text-align: center;/* По центру */
    margin-bottom: 15px; /* Отступ снизу */
}

/* 🔹 Поля формы клиента */
.client-form-container input,
.client-form-container select,
.client-form-container textarea {
    width: 100%;           /* На всю ширину контейнера */
    padding: 8px;          /* Внутренний отступ */
    margin-bottom: 10px;   /* Отступ снизу */
    border: 1px solid #ccc;/* Серая рамка */
    border-radius: 5px;    /* Скруглённые углы */
}


/* 🔹 Форма авторизации */
.login-container {
    max-width: 350px;  /* Максимальная ширина блока */
    margin: 100px auto;/* Отступ сверху 100px, авто по горизонтали */
    padding: 20px;     /* Внутренние отступы */
    background: #fff;  /* Белый фон */
    border-radius: 10px;/* Скруглённые углы */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);/* Лёгкая тень */
    text-align: center;/* Текст по центру */
}

/* 🔹 Заголовок авторизации */
.login-container h2 {
    color: #000;       /* Чёрный цвет */
    font-weight: bold; /* Жирное начертание */
    margin-bottom: 20px; /* Отступ снизу */
}

/* 🔹 Поля ввода в авторизации */
.login-container input {
    width: 100%;           /* Полная ширина контейнера */
    padding: 8px;          /* Внутренний отступ */
    margin-bottom: 10px;   /* Отступ снизу */
    border: 1px solid #ccc;/* Серая рамка */
    border-radius: 5px;    /* Скруглённые углы */
}

/* 🔹 Блок для чекбокса (ЗАПОМНИТЬ МЕНЯ) */
.checkbox-container {
    display: flex;           /* Выстраиваем чекбокс и текст в одну строку */
    align-items: center;     /* Выравниваем по вертикали по центру */
    justify-content: start;  /* Прижимаем к левому краю */
    gap: 8px;                /* Промежуток между элементами */
    margin-top: 10px;        /* Отступ сверху */
}

/* 🔹 Стилизация самого чекбокса */
.checkbox-container input {
    width: 18px;  /* Ширина чекбокса */
    height: 18px; /* Высота чекбокса */
}

/* 🔹 Кнопка входа */
.login-container button {
    background-color: #3d6066; /* Зелёный фон */
    color: #fff;               /* Белый текст */
    border: none;              /* Без рамки */
    padding: 10px;             /* Внутренний отступ */
    border-radius: 5px;        /* Скруглённые углы */
    width: 100%;               /* На всю ширину контейнера */
    font-weight: bold;         /* Жирный шрифт */
    margin-top: 10px;          /* Отступ сверху */
    transition: background-color 0.3s ease; /* Плавное изменение цвета */
}

.login-container button:hover {
    background-color: #002e36; /* Темнее при наведении */
}