/* Общие стили */
html{
    height: 100%;
}

body{
    height: 85%;

    margin:0;

    font-family:system-ui, sans-serif;

    background:#f5f7fa;
}

header{

    background:#283593;

    color:#fff;

    padding:1rem 2rem;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

header a{

    color:#fff;

    text-decoration:none;

    margin-left:1rem
}

main{
    padding:2rem
}

h1,h2{
    margin:0 0 1rem
}

button{

    cursor:pointer;
    
    padding:.5rem 1rem;
    
    margin:.5rem 0
}

table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    box-shadow:0 1px 3px rgba(0,0,0,.1);
}

th{

    text-align: center; vertical-align: middle;

    padding:.5rem;
    
    border:1px solid #ddd;
    
}

td{

    text-align: left;

    padding:.5rem;
    
    border:1px solid #ddd;
    
}

tr:nth-child(even){

    background:#fafafa
}

.login-box{

    width:300px;

    margin:5rem auto;

    padding:2rem;

    background:#fff;

    box-shadow:0 2px 6px rgba(0,0,0,.1);
}

label{

    display:block;

    margin-bottom:.5rem
}

input{

    width:100%;

    padding:.4rem
}

.error{

    color:#d32f2f;

    margin-top:.5rem
}

.main-header{

    position: sticky;

    top: 0;

    z-index: 999;

    background:#283593;

    color:#fff;    
    padding:0.1rem 2rem;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;
}

.main-header .brand{

    display:flex;

    align-items:center;

    gap:.6rem;
}

.main-header img{

    width:48px;

    height:48px;

}

.main-header .title{

    font-size:1.3rem;

    font-weight:600
}

.nav-list{

    list-style:none;

    display:flex;

    gap:1rem;
    
    margin:0;
    
    padding:0
}

.nav-list li a{
    
    color:#fff;
    
    text-decoration:none;
    
    opacity:.8
}

.nav-list li a.active,

.nav-list li a:hover{
    
    opacity:1;
    text-decoration:underline
}

.nav-list li a.logout{

    margin-left:1.5rem;
    color:#ffcdd2;
    text-decoration:none
}

.nav-list li a.logout:hover{

    text-decoration:underline
}
.form-field { 

    margin-bottom: 1em; 
}
label {
     
    font-weight: bold; 
}
/* --- Начало добавляемых стилей --- */

/* Стили для секций в форме редактирования чата */
.form-section {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #e0e0e0; /* Немного мягче чем #ddd */
    border-radius: 4px;
    background-color: #f9f9f9; /* Чуть темнее основного фона для выделения */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.form-section h4 {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 1.1rem;
    color: #283593; /* В_стиле хедера */
}

/* Стили для списка связанных категорий */
#linked-categories-management-section ul {
    list-style: none;
    padding-left: 0;
}

#linked-categories-management-section ul li {
    padding: 8px 0;
    border-bottom: 1px dotted #eee;
    display: flex; /* Для выравнивания кнопок */
    align-items: center; /* Выравнивание по центру вертикали */
}
#linked-categories-management-section ul li:last-child {
    border-bottom: none;
}

#linked-categories-management-section ul li a { /* Стили для иконок-ссылок */
    margin-left: 8px;
    font-size: 0.9em;
    text-decoration: none;
    padding: 2px 4px; /* Небольшой паддинг для кликабельности */
    border-radius: 3px;
}
#linked-categories-management-section ul li a:hover {
    opacity: 0.7;
}


/* Стили для управления Вопросами и Ответами (QnA) */
.qna-category-section {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    background-color: #fff; /* Белый фон для контраста с form-section */
}

.qna-category-section h5 {
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1rem;
    color: #333;
}

/* Стили для форм добавления вопросов/ответов и форм редактирования */
.add-question-form,
.add-answer-form,
.edit-form {
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f5f5f5; /* Светлее чем form-section */
    border: 1px solid #eee;
    border-radius: 3px;
    display: flex; /* Для выравнивания textarea и кнопки */
    flex-wrap: wrap; /* Позволяет переносить на новую строку, если не влезает */
    align-items: flex-start; /* Кнопки будут сверху, если textarea высокая */
}

.add-question-form textarea,
.add-answer-form textarea,
.edit-form textarea {
    flex-grow: 1; /* Занимает доступное пространство */
    min-height: 40px; /* Минимальная высота */
    padding: 0.4rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box; /* Учитывает padding и border в общей ширине */
    margin-right: 10px; /* Отступ справа от кнопки */
    margin-bottom: 5px; /* Отступ снизу, если кнопки перенесутся */
    font-family: inherit; /* Наследует шрифт */
}

.add-question-form button,
.add-answer-form button,
.edit-form button {
    padding: 0.4rem 0.8rem; /* Чуть меньше стандартных кнопок */
    margin: 0 5px 5px 0; /* Убираем вертикальный отступ, добавляем правый */
    border: 1px solid transparent; /* Для единообразия */
    border-radius: 3px;
    background-color: #4CAF50; /* Зеленый для "Добавить/Сохранить" */
    color: white;
    font-size: 0.9rem;
}
.edit-form button.button-secondary, /* Для кнопки "Отмена" в edit-form */
.add-question-form button.button-secondary, /* Если вдруг появится */
.add-answer-form button.button-secondary {
    background-color: #757575; /* Серый для "Отмена" */
}

.add-question-form button:hover,
.add-answer-form button:hover,
.edit-form button:hover {
    opacity: 0.9;
}

/* Стили для списков вопросов и ответов */
.questions-list,
.answers-list {
    margin-top: 10px;
    padding-left: 10px; /* Небольшой отступ для вложенности */
}

.qna-question-item,
.qna-answer-item {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px dashed #ddd;
    border-radius: 3px;
    background-color: #fdfdfd;
}

.qna-answer-item {
    margin-left: 20px; /* Дополнительный отступ для ответов */
    border-left: 3px solid #ccc; /* Визуальное выделение ответов */
    background-color: #fff;
}

.qna-question-item p,
.qna-answer-item p {
    margin: 0.3em 0;
    display: flex; /* Для выравнивания текста и иконок действий */
    align-items: center;
}

.qna-question-item p strong,
.qna-answer-item p em {
    margin-right: 5px; /* Отступ после "Вопрос:" / "Ответ:" */
}
.qna-question-item p > span, /* Текст вопроса/ответа */
.qna-answer-item p > span {
    flex-grow: 1; /* Чтобы текст занимал место, а иконки были справа */
}


.qna-question-item p a, /* Иконки действий для вопросов/ответов */
.qna-answer-item p a {
    font-size: 0.9em;
    margin-left: 8px !important; /* Гарантируем отступ, даже если есть общий стиль для header a */
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 3px;
}
.qna-question-item p a:hover,
.qna-answer-item p a:hover {
    opacity: 0.7;
}


/* Стили для сообщений о статусе */
.status-message {
    font-size: 0.9em;
    margin-top: 8px;
    padding: 5px 8px;
    border-radius: 3px;
    width: 100%; /* Чтобы занимал всю ширину в форме */
    box-sizing: border-box;
    display: block; /* По умолчанию скрыт или пуст */
}
.status-message.success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}
.status-message.error { /* Уже есть, но можно уточнить */
    color: #721c24; /* Темнее #d32f2f для лучшего контраста на фоне */
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    margin-top: 0.5rem; /* Возвращаем стандартный отступ, если нужно */
}
.status-message.info {
    color: #0c5460;
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
}

/* Для кнопок, которые деактивированы */
button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Общие кнопки, если нужны специфичные */
.button-primary { /* Уже есть стиль для button, но можно сделать более явным */
    background-color: #283593; /* Основной цвет хедера */
    color: white;
    border: 1px solid transparent;
    border-radius: 4px; /* Добавлено для единообразия */
}
.button-primary:hover {
    background-color: #1a237e;
}

.button-login { /* Уже есть стиль для button, но можно сделать более явным */
    width: 100%;
    background-color: #283593; /* Основной цвет хедера */
    color: white;
    border: 1px solid transparent;
    border-radius: 4px; /* Добавлено для единообразия */
}
.button-login:hover {
    background-color: #1a237e;
}

.button-secondary {
    background-color: #6c757d; /* Серый */
    color: white;
    border: 1px solid transparent;
    border-radius: 4px; /* Добавлено для единообразия */
}
.button-secondary:hover {
    background-color: #5a6268;
}

.button-danger {
    background-color: #d32f2f; /* Красный, как у .error */
    color: white;
    border: 1px solid transparent;
    border-radius: 4px; /* Добавлено для единообразия */
}
.button-danger:hover {
    background-color: #c62828;
}

/* Кнопка для действий "Добавить" или "Связать" */
.button-add-link {
    background-color: #4CAF50; /* Зеленый, как для других кнопок добавления */
    color: white;
    border: 1px solid transparent;
    border-radius: 4px; /* Единообразие с другими кнопками */
}
.button-add-link:hover {
    background-color: #45a049; /* Более темный зеленый при наведении */
}

/* Для инпутов, чтобы соответствовать общему стилю */
input[type="text"],
input[type="password"],
input[type="color"],
input[type="file"],
select,
textarea {
    box-sizing: border-box; /* Добавим это всем инпутам для консистентности */
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: inherit; /* Наследуем шрифт */
    font-size: 0.95rem; /* Чуть крупнее для читаемости */
}

input[type="file"] {
    padding: 0.2rem; /* Файловый инпут имеет свои особенности */
}

/* --- Конец добавляемых стилей --- */

/* --- Стили для универсальной формы --- */
.form-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.form-header {
    margin-bottom: 25px;
    text-align: center;
}

.form-header h2 {
    font-size: 1.8rem;
    color: #283593;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
    font-size: 18px;
    font-weight: bold;
}

.add-icon {
    background-color: #4CAF50;
    color: white;
}

.edit-icon {
    background-color: #2196F3;
    color: white;
}

.form-subtitle {
    color: #666;
    font-size: 1rem;
}

.form-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

.form-fields-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .form-fields-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.form-field {
    margin-bottom: 0; /* Override previous style */
}

.form-field label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Specific styling for color input field */
.form-field input[type="color"] {
    width: 80px;
    height: 40px;
    padding: 2px;
    cursor: pointer;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #283593;
    box-shadow: 0 0 0 3px rgba(40, 53, 147, 0.1);
    outline: none;
}

.form-field textarea {
    min-height: 100px;
    resize: vertical;
}

.form-field input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
}

.form-field .required {
    color: #d32f2f;
}

.form-actions {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* .form-actions button {
    color: white;
    background-color: #283593;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color 0.3s, transform 0.1s;
} */

#btn-add:hover {
    background-color: #1a237e;
}

/* .form-actions button:hover {
    background-color: #1a237e;
} */

.button-primary {
    background-color: #283593;
    color: white;
    border: none;
}

.button-primary:hover {
    background-color: #1a237e;
}

.button-secondary {
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
}

.button-secondary:hover {
    background-color: #e0e0e0;
}

/* Error container styling */
.form-error-container {
    margin: 20px 0;
    border-radius: 6px;
    border: 1px solid #f5c6cb;
    background-color: #f8d7da;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.error-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: rgba(220, 53, 69, 0.1);
    border-bottom: 1px solid #f5c6cb;
}

.error-icon {
    font-size: 18px;
    margin-right: 10px;
}

.error-title {
    font-weight: 600;
    color: #721c24;
    flex-grow: 1;
}

.error-close {
    background: none;
    border: none;
    color: #721c24;
    font-size: 20px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.error-message {
    padding: 15px;
    color: #721c24;
    font-weight: 500;
}

.error-details {
    padding: 0 15px 15px;
    color: #721c24;
    font-size: 0.9em;
    white-space: pre-line;
}

th.action-column-header,
td.action-column-cell {
    width: 1%; /* Попытка сделать колонку как можно уже, но содержимое ее расширит при необходимости */
    white-space: nowrap; /* Предотвращает перенос текста в заголовке и содержимом ячейки */
    text-align: center; /* Центрирует иконки/текст в колонках действий */
}

/* Уменьшаем горизонтальный padding для ячеек действий, чтобы они были компактнее */
td.action-column-cell {
    padding-left: 6px;
    padding-right: 6px;
}

/* Уменьшаем горизонтальный padding для заголовков действий */
th.action-column-header {
    padding-left: 6px;
    padding-right: 6px;
}

/* Можно также стилизовать сами ссылки-иконки, если нужно */
td.action-column-cell a {
    display: inline-block; /* Чтобы padding применялся корректно */
    padding: 2px; /* Минимальный padding вокруг иконки */
    line-height: 1; /* Для лучшего вертикального выравнивания иконок-символов */
}
/* Field validation styles */
.field-error {
    color: #d32f2f;
    font-size: 0.85em;
    margin-top: 4px;
    display: block;
}

/* Invalid field styles */
input[style*="border-color: #d32f2f"], 
textarea[style*="border-color: #d32f2f"], 
select[style*="border-color: #d32f2f"] {
    border-color: #d32f2f !important;
    background-color: #fff6f6 !important;
}

/* Warning field styles for incomplete masks */
input[style*="border-color: #ff9800"], 
textarea[style*="border-color: #ff9800"], 
select[style*="border-color: #ff9800"] {
    border-color: #ff9800 !important;
    background-color: #fff8e1 !important;
}

/* Required field indicator */
.required {
    color: #d32f2f;
    font-weight: bold;
}

/* Form field container */
.form-field {
    margin-bottom: 15px;
}

.form-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.grid-form-chat{
    display: grid;
    grid-template-columns: 1fr 1fr 3fr;
    grid-auto-rows: minmax(100px, 800px);
    column-gap: 20px;
}

.B{
    overflow-y: auto; 
}

.C{
    overflow-y: auto; 
}

.grid-form-org{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}
#btn-add{
    
    float: right;

    background-color: #283593; /* Основной цвет хедера */

    color: white;

    border: 1px solid transparent;

    border-radius: 4px; /* Добавлено для единообразия */
}

#btn-add:hover {
    background-color: #1a237e;
}

footer{

    position: fixed;  
    
    bottom: 0;  
}