/* =============================================================================
   BUTTONS - Унифицированные стили кнопок
   ============================================================================= */

:root {
    /* Зелёные цвета (Основные - viridian) */
    --btn-green-primary: #6b9080;
    --btn-green-dark: #4a6b5c;
    --btn-green-light: #a4c3b2;
    --btn-green-hover: #5a8070;
    
    /* Красные цвета */
    --btn-red-primary: #dc3545;
    --btn-red-dark: #c82333;
    --btn-red-light: #ff6b6b;
    --btn-red-hover: #bb2d3b;
    
    /* Серые цвета */
    --btn-gray-primary: #6c757d;
    --btn-gray-dark: #5a6268;
    --btn-gray-hover: #5f6870;
    
    /* Белый */
    --btn-white: #ffffff;
    
    /* Тени */
    --btn-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --btn-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --btn-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    
    /* Радиусы */
    --btn-radius-sm: 8px;
    --btn-radius-md: 12px;
    
    /* Размеры */
    --btn-small-size: 36px;
}

/* Базовые стили для всех кнопок действий */
.btn-action {
    border-radius: var(--btn-radius-sm);
    box-shadow: var(--btn-shadow-sm);
    transition: all 0.3s ease;
    font-weight: 500;
    white-space: nowrap;
    padding: 0.5rem 1rem;
}

.btn-action:hover {
    box-shadow: var(--btn-shadow-md);
}

.btn-action:active {
    transform: translateY(0);
}

/* Маленькие кнопки (btn-sm) */
.btn-sm.btn-action {
    padding: 0.19rem 0.5rem;
    font-size: 0.8rem;
    border-radius: var(--btn-radius-sm);
}

/* Специальные стили для кнопок в заголовке */
.list-header .btn-action {
    white-space: nowrap;
    padding: 0.5rem 1rem;
}

/* =============================================================================
   ЗЕЛЁНЫЕ КНОПКИ (btn-success)
   ============================================================================= */

/* Сохранить (Create/Update) */
.btn-save,
.btn-success.btn-action[type="submit"] {
    background: var(--btn-green-primary);
    border-color: var(--btn-green-primary);
    color: var(--btn-white);
}

.btn-save:hover {
    background: var(--btn-green-dark);
    border-color: var(--btn-green-dark);
    color: var(--btn-white);
}

/* Редактировать (List/Info) */
.btn-update,
.btn-success.btn-action[href*="Update"] {
    background: var(--btn-green-primary);
    border-color: var(--btn-green-primary);
    color: var(--btn-white);
}

.btn-update:hover {
    background: var(--btn-green-dark);
    border-color: var(--btn-green-dark);
    color: var(--btn-white);
}

/* =============================================================================
   КНОПКИ ДЛЯ TAG-CLOUD (используют цвета btn-update)
   ============================================================================= */

/* Заполненная кнопка для tag-cloud */
.tag-cloud .btn-tag-cloud {
    background: var(--btn-green-primary);
    border-color: var(--btn-green-primary);
    color: var(--btn-white);
    transition: all 0.3s ease;
}

.tag-cloud .btn-tag-cloud:hover {
    background: var(--btn-green-dark);
    border-color: var(--btn-green-dark);
    color: var(--btn-white);
}

/* Outline кнопка для tag-cloud */
.tag-cloud .btn-tag-cloud-outline,
.btn-tag-cloud-outline {
    background: transparent;
    border-color: var(--btn-green-primary);
    color: var(--btn-green-primary);
    transition: all 0.3s ease;
}

.tag-cloud .btn-tag-cloud-outline:hover,
.btn-tag-cloud-outline:hover {
    background: var(--btn-green-primary);
    border-color: var(--btn-green-primary);
    color: var(--btn-white);
}

/* Заполненная кнопка для tag-cloud (также доступна вне tag-cloud для карточек книг) */
.btn-tag-cloud {
    background: var(--btn-green-primary);
    border-color: var(--btn-green-primary);
    color: var(--btn-white);
    transition: all 0.3s ease;
}

.btn-tag-cloud:hover {
    background: var(--btn-green-dark);
    border-color: var(--btn-green-dark);
    color: var(--btn-white);
}

/* Маленькие кнопки в списке */
.list-group .btn-update,
.list-group .btn-delete,
.list-group .btn-info {
    width: var(--btn-small-size);
    height: var(--btn-small-size);
    border-radius: var(--btn-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Просмотреть (List) */
.btn-info {
    width: var(--btn-small-size);
    height: var(--btn-small-size);
    border-radius: var(--btn-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: var(--btn-green-primary);
    color: var(--btn-white);
}

.btn-info:hover {
    background: var(--btn-green-dark);
    color: var(--btn-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(107, 144, 128, 0.3);
}

/* Badge с оценкой (vote badge) - размер как у btn-info */
.badge-vote {
    width: var(--btn-small-size);
    height: var(--btn-small-size);
    border-radius: var(--btn-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--btn-white);
}

.badge-vote i {
    color: var(--btn-white);
}

/* Зелёный цвет для лайка */
.badge-vote-like {
    background: var(--btn-green-primary) !important;
    color: var(--btn-white) !important;
}

.badge-vote-like i {
    color: var(--btn-white) !important;
}

/* Красный цвет для дизлайка */
.badge-vote-dislike {
    background: var(--btn-red-primary) !important;
    color: var(--btn-white) !important;
}

.badge-vote-dislike i {
    color: var(--btn-white) !important;
}

/* Серый цвет по умолчанию */
.badge-vote-default {
    background: var(--btn-gray-primary) !important;
    color: var(--btn-white) !important;
}

.badge-vote-default i {
    color: var(--btn-white) !important;
}

/* Badge для статуса прочтения */
.badge-read {
    width: var(--btn-small-size);
    height: var(--btn-small-size);
    border-radius: var(--btn-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--btn-white);
}

.badge-read i {
    color: var(--btn-white);
}

.badge-read-read {
    background: var(--btn-green-primary);
    border-color: var(--btn-green-primary);
    color: var(--btn-white);
}

.badge-read-read:hover,
.badge-read-read:focus {
    background: var(--btn-green-dark);
    border-color: var(--btn-green-dark);
    color: var(--btn-white);
}

.badge-read-unread {
    background: var(--btn-gray-primary);
    border-color: var(--btn-gray-primary);
    color: var(--btn-white);
}

.badge-read-unread:hover,
.badge-read-unread:focus {
    background: var(--btn-gray-dark);
    border-color: var(--btn-gray-dark);
    color: var(--btn-white);
}

/* Кнопки голосования (лайк/дизлайк) */
.btn-vote {
    border-radius: var(--btn-radius-sm);
    transition: all 0.3s ease;
}

.btn-vote i {
    font-size: 1.1em;
}

.btn-vote-like {
    background: var(--btn-green-primary);
    border-color: var(--btn-green-primary);
    color: var(--btn-white);
}

.btn-vote-like:hover,
.btn-vote-like:focus,
.btn-vote-like.active {
    background: var(--btn-green-dark);
    border-color: var(--btn-green-dark);
    color: var(--btn-white);
}

.btn-vote-like-outline {
    background: transparent;
    border-color: var(--btn-green-primary);
    color: var(--btn-green-primary);
}

.btn-vote-like-outline:hover,
.btn-vote-like-outline:focus {
    background: var(--btn-green-primary);
    border-color: var(--btn-green-primary);
    color: var(--btn-white);
}

.btn-vote-dislike {
    background: var(--btn-red-primary);
    border-color: var(--btn-red-primary);
    color: var(--btn-white);
}

.btn-vote-dislike:hover,
.btn-vote-dislike:focus,
.btn-vote-dislike.active {
    background: var(--btn-red-dark);
    border-color: var(--btn-red-dark);
    color: var(--btn-white);
}

.btn-vote-dislike-outline {
    background: transparent;
    border-color: var(--btn-red-primary);
    color: var(--btn-red-primary);
}

.btn-vote-dislike-outline:hover,
.btn-vote-dislike-outline:focus {
    background: var(--btn-red-primary);
    border-color: var(--btn-red-primary);
    color: var(--btn-white);
}

/* Breadcrumb кнопки (маленькие с цветом как у info) */
.btn-breadcrumb-sm {
    padding: 0.19rem 0.5rem;
    font-size: 0.8rem;
    border-radius: var(--btn-radius-sm);
    background: var(--btn-green-primary);
    border-color: var(--btn-green-primary);
    color: var(--btn-white);
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-breadcrumb-sm:hover {
    background: var(--btn-green-dark);
    border-color: var(--btn-green-dark);
    color: var(--btn-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(107, 144, 128, 0.3);
}

/* Breadcrumb кнопки outline вариант (для неактивных элементов) */
.btn-breadcrumb-outline-sm {
    padding: 0.19rem 0.5rem;
    font-size: 0.8rem;
    border-radius: var(--btn-radius-sm);
    background: transparent;
    border: 1px solid var(--btn-green-primary);
    color: var(--btn-green-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-breadcrumb-outline-sm:hover {
    background: var(--btn-green-primary);
    border-color: var(--btn-green-primary);
    color: var(--btn-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(107, 144, 128, 0.3);
}

/* Добавим одинаковый hover-эффект для маленьких иконок Update/Delete в списках */
.list-group .btn-update:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(107, 144, 128, 0.3); /* зелёная тень в тон update */
}

.list-group .btn-delete:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3); /* красная тень в тон delete */
}

/* Создать (List) */
.btn-create,
.btn-success[href*="Create"] {
    background: var(--btn-green-primary);
    border-color: var(--btn-green-primary);
    color: var(--btn-white);
}

.btn-create:hover {
    background: var(--btn-green-dark);
    border-color: var(--btn-green-dark);
    color: var(--btn-white);
}

/* Добавить строку (Create/Update) */
.btn-add {
    background: var(--btn-green-primary);
    border-color: var(--btn-green-primary);
    color: var(--btn-white);
}

.btn-add:hover {
    background: var(--btn-green-dark);
    border-color: var(--btn-green-dark);
    color: var(--btn-white);
}

/* =============================================================================
   КРАСНЫЕ КНОПКИ (btn-danger)
   ============================================================================= */

/* Подтвердить удаление (Delete) */
.btn-confirm-delete,
.btn-danger.btn-action[type="submit"] {
    background: var(--btn-red-primary);
    border-color: var(--btn-red-primary);
    color: var(--btn-white);
}

.btn-confirm-delete:hover {
    background: var(--btn-red-dark);
    border-color: var(--btn-red-dark);
    color: var(--btn-white);
}

/* Удалить тип (List/Info) */
.btn-delete,
.btn-danger.btn-action[href*="Delete"] {
    background: var(--btn-red-primary);
    border-color: var(--btn-red-primary);
    color: var(--btn-white);
}

.btn-delete:hover {
    background: var(--btn-red-dark);
    border-color: var(--btn-red-dark);
    color: var(--btn-white);
}

/* Удалить строку (Create/Update) */
.btn-remove,
.btn-outline-danger {
    border-color: var(--btn-red-primary);
    color: var(--btn-red-primary);
    transition: all 0.3s ease;
}

.btn-remove:hover,
.btn-outline-danger:hover {
    background-color: var(--btn-red-primary);
    color: var(--btn-white);
}

/* =============================================================================
   СЕРЫЕ КНОПКИ (btn-secondary)
   ============================================================================= */

/* Отмена */
.btn-cancel,
.btn-secondary.btn-action[href*="List"] {
    background: var(--btn-gray-primary);
    border-color: var(--btn-gray-primary);
    color: var(--btn-white);
}

.btn-cancel:hover {
    background: var(--btn-gray-dark);
    border-color: var(--btn-gray-dark);
    color: var(--btn-white);
}

/* Назад */
.btn-back {
    background: var(--btn-gray-primary);
    border-color: var(--btn-gray-primary);
    color: var(--btn-white);
}

.btn-back:hover {
    background: var(--btn-gray-dark);
    border-color: var(--btn-gray-dark);
    color: var(--btn-white);
}

/* Список (имеет те же стили что и btn-back) */
.btn-list {
    background: var(--btn-gray-primary);
    border-color: var(--btn-gray-primary);
    color: var(--btn-white);
}

.btn-list:hover {
    background: var(--btn-gray-dark);
    border-color: var(--btn-gray-dark);
    color: var(--btn-white);
}

/* =============================================================================
   АДАПТИВНОСТЬ
   ============================================================================= */

@media (max-width: 768px) {
    .btn-action,
    .btn-add,
    .btn-create {
        width: 100%;
    }
    
    .btn-action-small {
        width: 100%;
    }
    
    /* На мобильных - маленькие кнопки в списке растягиваются */
    .list-group .btn-info,
    .list-group .btn-update,
    .list-group .btn-delete {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* Кнопки удаления строк в динамических формах */
    .btn-remove,
    .btn-outline-danger {
        width: 100%;
    }
    
    /* Группа кнопок в мобильной версии вертикально */
    .list-group-item > .d-flex.gap-2 {
        flex-direction: column;
        width: 100%;
    }
}

/* =============================================================================
   АНИМАЦИИ
   ============================================================================= */

@keyframes button-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.btn-action:focus {
    animation: button-pulse 0.3s ease;
}

/* =============================================================================
   ИКОНКИ В КНОПКАХ
   ============================================================================= */

.btn-action i,
.btn-action-small i {
    font-size: 1.1em;
}

.btn-action .fas,
.btn-action .fa {
    margin-right: 0.5rem;
}