/* ================================================================================
   Файл: buttons.css
   Единый стиль для всех кнопок приложения
   ================================================================================ */

/* ================================================================================
   1. БАЗОВЫЙ СТИЛЬ КНОПОК
   ================================================================================ */
.btn,
.back-button, 
.save-button, 
.edit-button, 
.delete-button, 
.view-note-button, 
.save-button-small, 
.back-button-small,
.eventadd,
.view-back-button,
.view-edit-button,
.view-complete-button,
.view-restore-button,
.view-delete-button,
.create-save-button,
.create-back-button,
.edit-save-button,
.edit-back-button,
.clear-search,
.unhide-button,
.view-copy-path,
.year-button,
.all-filter,
.month-filter a,
.time-filters a,
.filter-btn,
.nav-ul li a,
.nav-link,
.nav-admin,
.nav-profile,
.nav-logout,
.category-actions .edit-button,
.category-actions .delete-button,
.day-actions a,
.card-index .view-note-button,
.card-index .edit-button,
.card-index .save-button,
.card-index .delete-button,
.filters-main-container .search-filter button,
.filters-main-container .category-filter select,
.modal .btn {
    /* Базовые размеры и отступы */
    padding: 0.75rem 1.5rem;
    
    /* Сброс стандартных стилей */
    border: none;
    background: none;
    
    /* Текст */
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    font-family: inherit;
    
    /* Геометрия */
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    
    /* Тени и эффекты */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    
    /* Цвет текста по умолчанию */
    color: #e0e0e0;
}

/* Эффект при наведении для всех кнопок */
.btn:hover,
.back-button:hover, 
.save-button:hover, 
.edit-button:hover, 
.delete-button:hover, 
.view-note-button:hover, 
.save-button-small:hover, 
.back-button-small:hover,
.eventadd:hover,
.view-back-button:hover,
.view-edit-button:hover,
.view-complete-button:hover,
.view-restore-button:hover,
.view-delete-button:hover,
.create-save-button:hover,
.create-back-button:hover,
.edit-save-button:hover,
.edit-back-button:hover,
.clear-search:hover,
.unhide-button:hover,
.view-copy-path:hover,
.year-button:hover,
.all-filter:hover,
.month-filter a:hover,
.time-filters a:hover,
.filter-btn:hover,
.nav-ul li a:hover,
.nav-link:hover,
.nav-admin:hover,
.nav-profile:hover,
.nav-logout:hover,
.category-actions .edit-button:hover,
.category-actions .delete-button:hover,
.day-actions a:hover,
.card-index .view-note-button:hover,
.card-index .edit-button:hover,
.card-index .save-button:hover,
.card-index .delete-button:hover,
.filters-main-container .search-filter button:hover,
.modal .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    text-decoration: none;
}

/* Активное состояние */
.btn:active,
.back-button:active,
.save-button:active,
.edit-button:active,
.delete-button:active,
.view-note-button:active,
.save-button-small:active,
.back-button-small:active,
.eventadd:active,
.view-back-button:active,
.view-edit-button:active,
.view-complete-button:active,
.view-restore-button:active,
.view-delete-button:active,
.create-save-button:active,
.create-back-button:active,
.edit-save-button:active,
.edit-back-button:active,
.clear-search:active,
.unhide-button:active,
.view-copy-path:active,
.year-button:active,
.all-filter:active,
.month-filter a:active,
.time-filters a:active,
.filter-btn:active,
.nav-ul li a:active,
.nav-link:active,
.nav-admin:active,
.nav-profile:active,
.nav-logout:active,
.category-actions .edit-button:active,
.category-actions .delete-button:active,
.day-actions a:active,
.card-index .view-note-button:active,
.card-index .edit-button:active,
.card-index .save-button:active,
.card-index .delete-button:active,
.filters-main-container .search-filter button:active,
.modal .btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Отключенное состояние */
.btn:disabled,
.back-button:disabled,
.save-button:disabled,
.edit-button:disabled,
.delete-button:disabled,
.view-note-button:disabled,
.save-button-small:disabled,
.back-button-small:disabled,
.eventadd:disabled,
.view-back-button:disabled,
.view-edit-button:disabled,
.view-complete-button:disabled,
.view-restore-button:disabled,
.view-delete-button:disabled,
.create-save-button:disabled,
.create-back-button:disabled,
.edit-save-button:disabled,
.edit-back-button:disabled,
.clear-search:disabled,
.unhide-button:disabled,
.view-copy-path:disabled,
.year-button:disabled,
.all-filter:disabled,
.month-filter a:disabled,
.time-filters a:disabled,
.filter-btn:disabled,
.nav-ul li a:disabled,
.nav-link:disabled,
.nav-admin:disabled,
.nav-profile:disabled,
.nav-logout:disabled,
.category-actions .edit-button:disabled,
.category-actions .delete-button:disabled,
.day-actions a:disabled,
.card-index .view-note-button:disabled,
.card-index .edit-button:disabled,
.card-index .save-button:disabled,
.card-index .delete-button:disabled,
.filters-main-container .search-filter button:disabled,
.modal .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* ================================================================================
   2. РАЗМЕРЫ КНОПОК
   ================================================================================ */

/* Большие кнопки */
.btn-lg,
.eventadd,
.view-back-button,
.view-edit-button,
.view-complete-button,
.view-restore-button,
.view-delete-button,
.create-save-button,
.edit-save-button {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    min-width: 200px;
}

/* Маленькие кнопки */
.btn-sm,
.save-button-small,
.back-button-small,
.clear-search,
.unhide-button,
.view-copy-path,
.year-button,
.filter-btn,
.category-actions .edit-button,
.category-actions .delete-button,
.day-actions a,
.card-index .view-note-button,
.card-index .edit-button,
.card-index .save-button,
.card-index .delete-button,
.filters-main-container .search-filter button,
.filters-main-container .category-filter select,
.nav-link,
.nav-admin,
.nav-profile,
.nav-logout {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    min-width: auto;
}

/* Очень маленькие кнопки (иконки) */
.clear-search,
.unhide-button,
.view-copy-path {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    min-width: auto;
}

/* Круглые кнопки */
.clear-search {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}

/* ================================================================================
   3. ЦВЕТОВЫЕ ВАРИАНТЫ КНОПОК
   ================================================================================ */

/* Primary - синий (основное действие) */
.btn-primary,
.view-note-button,
.card-index .view-note-button,
.nav-ul li a {
    background: #4299e1;
    color: white;
    border: 2px solid #4299e1;
}

.btn-primary:hover,
.view-note-button:hover,
.card-index .view-note-button:hover,
.nav-ul li a:hover,
.nav-ul li a.active {
    background: #3182ce;
    border-color: #3182ce;
    color: white;
}

/* Secondary - серый (второстепенное действие) */
.btn-secondary,
.back-button,
.back-button-small,
.view-back-button,
.create-back-button,
.edit-back-button,
.year-button,
.filter-btn,
.modal .btn-secondary {
    background: #718096;
    color: white;
    border: 2px solid #718096;
}

.btn-secondary:hover,
.back-button:hover,
.back-button-small:hover,
.view-back-button:hover,
.create-back-button:hover,
.edit-back-button:hover,
.year-button:hover,
.filter-btn:hover,
.modal .btn-secondary:hover {
    background: #4a5568;
    border-color: #4a5568;
    color: white;
}

/* Warning - желтый (предупреждение/редактирование) */
.btn-warning,
.edit-button,
.view-edit-button,
.card-index .edit-button,
.category-actions .edit-button {
    background: #ffb300;
    color: #1a1a1a;
    border: 2px solid #ffb300;
}

.btn-warning:hover,
.edit-button:hover,
.view-edit-button:hover,
.card-index .edit-button:hover,
.category-actions .edit-button:hover {
    background: #ffca28;
    border-color: #ffca28;
    color: #1a1a1a;
}

/* Success - зеленый (сохранение/подтверждение) */
.btn-success,
.save-button,
.save-button-small,
.eventadd,
.view-complete-button,
.create-save-button,
.edit-save-button,
.unhide-button,
.filters-main-container .search-filter button,
.card-index .save-button {
    background: #4caf50;
    color: white;
    border: 2px solid #4caf50;
}

.btn-success:hover,
.save-button:hover,
.save-button-small:hover,
.eventadd:hover,
.view-complete-button:hover,
.create-save-button:hover,
.edit-save-button:hover,
.unhide-button:hover,
.filters-main-container .search-filter button:hover,
.card-index .save-button:hover {
    background: #66bb6a;
    border-color: #66bb6a;
    color: white;
}

/* Danger - красный (удаление/опасное действие) */
.btn-danger,
.delete-button,
.view-delete-button,
.card-index .delete-button,
.category-actions .delete-button,
.clear-search,
.modal .btn-danger {
    background: #f44336;
    color: white;
    border: 2px solid #f44336;
}

.btn-danger:hover,
.delete-button:hover,
.view-delete-button:hover,
.card-index .delete-button:hover,
.category-actions .delete-button:hover,
.clear-search:hover,
.modal .btn-danger:hover {
    background: #ef5350;
    border-color: #ef5350;
    color: white;
}

/* Info - голубой (информация/детали) */
.btn-info,
.view-restore-button,
.day-actions a,
.nav-profile {
    background: #64b5f6;
    color: #1a1a1a;
    border: 2px solid #64b5f6;
}

.btn-info:hover,
.view-restore-button:hover,
.day-actions a:hover,
.nav-profile:hover {
    background: #90caf9;
    border-color: #90caf9;
    color: #1a1a1a;
}

/* Ghost - прозрачный (менее заметные кнопки) */
.btn-ghost,
.all-filter,
.month-filter a,
.time-filters a,
.nav-link {
    background: transparent;
    color: #e0e0e0;
    border: 2px solid #404040;
    box-shadow: none;
}

.btn-ghost:hover,
.all-filter:hover,
.month-filter a:hover,
.time-filters a:hover,
.nav-link:hover,
.all-filter.active,
.month-filter a.active,
.time-filters a.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: #64b5f6;
    color: #64b5f6;
    transform: translateY(-2px);
}

/* Admin - специальный стиль для админки */
.nav-admin {
    background: #2d2d2d;
    color: #ffb300;
    border: 1px solid #ffb300;
}

.nav-admin:hover {
    background: #ffb300;
    color: #1a1a1a;
}

/* Logout - специальный стиль для выхода */
.nav-logout {
    background: #2d2d2d;
    color: #f44336;
    border: 1px solid #f44336;
}

.nav-logout:hover {
    background: #f44336;
    color: white;
}

/* Copy Path - специальная кнопка */
.view-copy-path {
    background: transparent;
    border: 1px solid #48bb78;
    color: #48bb78;
    box-shadow: none;
}

.view-copy-path:hover {
    background: #48bb78;
    color: white;
}

/* ================================================================================
   4. СПЕЦИАЛЬНЫЕ ВАРИАНТЫ КНОПОК
   ================================================================================ */

/* Кнопки в навигации (наследуют цвета от цветовых вариантов) */
.nav-ul li a {
    background: #363636;
    color: #64b5f6;
    border: 2px solid transparent;
}

.nav-ul li a:hover,
.nav-ul li a.active {
    background: #64b5f6;
    color: #1a1a1a;
}

/* Кнопки в фильтрах */
.filters-main-container .search-filter button {
    /* использует btn-success */
}

.filters-main-container .category-filter select {
    padding: 0.5rem 1rem;
    border: 2px solid #404040;
    border-radius: 0.5rem;
    background: #363636;
    color: #e0e0e0;
    cursor: pointer;
    font-size: 1.1rem;
    min-width: 200px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0e0e0'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1.5rem;
}

.filters-main-container .category-filter select:hover {
    border-color: #64b5f6;
}

/* Кнопки в карточках событий */
.day-actions a {
    /* использует btn-info */
    padding: 0.5rem 0.25rem;
    font-size: 0.8rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-word;
    white-space: normal;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* Кнопки в модальных окнах */
.modal .btn {
    min-width: 100px;
}

/* Кнопки в группах */
.btn-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.btn-group .btn {
    margin: 0;
}

/* ================================================================================
   5. СОСТОЯНИЯ КНОПОК
   ================================================================================ */

/* Активное состояние для фильтров и навигации */
.active {
    background: #64b5f6 !important;
    color: #1a1a1a !important;
    border-color: #64b5f6 !important;
}

.month-filter a.active,
.time-filters a.active,
.all-filter.active {
    background: #64b5f6;
    color: #1a1a1a;
    border-color: #64b5f6;
}

/* Фокус для доступности */
.btn:focus,
.back-button:focus,
.save-button:focus,
.edit-button:focus,
.delete-button:focus,
.view-note-button:focus,
.eventadd:focus,
.view-back-button:focus,
.view-edit-button:focus,
.view-complete-button:focus,
.view-restore-button:focus,
.view-delete-button:focus,
.create-save-button:focus,
.create-back-button:focus,
.edit-save-button:focus,
.edit-back-button:focus,
.clear-search:focus,
.unhide-button:focus,
.view-copy-path:focus,
.year-button:focus,
.all-filter:focus,
.month-filter a:focus,
.time-filters a:focus,
.filter-btn:focus,
.nav-ul li a:focus,
.nav-link:focus,
.nav-admin:focus,
.nav-profile:focus,
.nav-logout:focus,
.category-actions .edit-button:focus,
.category-actions .delete-button:focus,
.day-actions a:focus,
.card-index .view-note-button:focus,
.card-index .edit-button:focus,
.card-index .save-button:focus,
.card-index .delete-button:focus,
.filters-main-container .search-filter button:focus,
.filters-main-container .category-filter select:focus,
.modal .btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ================================================================================
   6. АНИМАЦИИ КНОПОК
   ================================================================================ */
@keyframes buttonPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.btn-pulse {
    animation: buttonPulse 2s ease-in-out infinite;
}

/* ================================================================================
   7. ИНТЕГРАЦИЯ С ДРУГИМИ КОМПОНЕНТАМИ
   ================================================================================ */

/* Кнопки в формах */
.form-actions .btn {
    margin-left: 0.5rem;
}

.form-actions .btn:first-child {
    margin-left: 0;
}

/* Кнопки в заголовке */
.header .btn {
    margin: 0 0.25rem;
}

/* Кнопки в таблицах */
.admin-table .btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

/* Кнопки с иконками */
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-icon svg,
.btn-icon img {
    width: 1.2em;
    height: 1.2em;
}

/* ================================================================================
   8. УТИЛИТЫ ДЛЯ КНОПОК
   ================================================================================ */
.btn-block {
    display: block;
    width: 100%;
}

.btn-circle {
    border-radius: 50%;
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-circle.btn-sm {
    width: 2rem;
    height: 2rem;
}

.btn-circle.btn-lg {
    width: 3rem;
    height: 3rem;
}

/* Отступы между кнопками */
.btn + .btn {
    margin-left: 0;
}

.btn-group .btn + .btn {
    margin-left: 0;
}

/* Вертикальные группы кнопок */
.btn-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-group-vertical .btn {
    margin: 0;
}