/* ====================================================================== */
/* WATCHLIST.CSS - Стили для упрощенного компонента Листа наблюдения     */
/* 3 кнопки в ряд: [В лист] [Годовая] [Квартальная]                      */
/* Файл содержит только базовые стили страницы watchlist                 */
/* Стили для enhanced карточек перенесены в watchlist-card.css           */
/* ====================================================================== */

/* ДОБАВЛЕНО: CSS-переменные для состояний (оставлены для обратной совместимости) */
:root {
  --positive: #48bb78;   /* зеленый */
  --negative: #f56565;   /* красный */
  --neutral: #5faab8;    /* морской бирюзовый */
}

/* Основной контейнер с 3 кнопками в ряд */
.watchlist-analytics-container {
    display: flex;
    gap: 10px;
    width: 480px; /* (150px × 3) + (10px × 2) = 450px + 20px = 470px, округляем до 480px для запаса */
    min-height: 96px;
    animation: fadeIn 0.3s ease;
}

/* Общие стили для всех кнопок */
.watchlist-btn {
    width: 150px;
    height: 150px;
    background: var(--card-bg);
    border-radius: var(--radius, 8px);
    border: 1px solid rgba(95, 170, 184, 0.4);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 12px 8px;
    text-align: center;
    text-decoration: none;
    user-select: none;
}

.watchlist-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 26, 41, 0.1);
    border-color: var(--sea-turquoise);
}

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

.watchlist-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Кнопка "В лист наблюдения" */
.watchlist-btn.watchlist-action {
    border-color: rgba(95, 170, 184, 0.6);
}

.watchlist-btn.watchlist-action:hover {
    background: rgba(95, 170, 184, 0.05);
}

.watchlist-btn.watchlist-action.in-watchlist {
    background: linear-gradient(135deg, rgba(95, 170, 184, 0.1), rgba(13, 26, 41, 0.05));
    border-color: var(--sea-turquoise);
}

.watchlist-btn.watchlist-action.in-watchlist:hover {
    background: linear-gradient(135deg, rgba(95, 170, 184, 0.15), rgba(13, 26, 41, 0.08));
}

/* Кнопки аналитики (заглушки) */
.watchlist-btn.analytics-btn {
    border-color: var(--border);
    cursor: not-allowed;
}

.watchlist-btn.analytics-btn:hover {
    border-color: var(--border);
    background: var(--card-bg);
    box-shadow: var(--shadow);
}

/* Иконки кнопок */
.watchlist-icon {
    font-size: 36px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.watchlist-action .watchlist-icon {
    color: var(--sea-turquoise);
}

.watchlist-action.in-watchlist .watchlist-icon {
    color: #FFD700; /* Золотой цвет для заполненной звезды */
    text-shadow: 0 0 3px rgba(255, 215, 0, 0.3);
}

.analytics-btn .watchlist-icon {
    color: var(--muted);
}

/* Текст кнопок */
.watchlist-text {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.watchlist-text-line {
    display: block;
}

/* Для кнопки "В лист" - две строки */
.watchlist-action .watchlist-text {
    font-size: 14px;
}

/* Для кнопок аналитики - одна строка */
.analytics-btn .watchlist-text {
    font-size: 14px;
}

/* Состояние загрузки */
.watchlist-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.watchlist-loading-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(95, 170, 184, 0.3);
    border-top: 2px solid var(--sea-turquoise);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-top: 4px;
}

.watchlist-btn.loading .watchlist-loading-spinner {
    display: block;
}

/* Анимации */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(5px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

.watchlist-btn.pulsing {
    animation: pulse 2s ease-in-out 3;
}

/* ==================== НОВЫЙ ДВУХКОЛОНОЧНЫЙ МАКЕТ ДЛЯ СТРАНИЦЫ ЛИСТА НАБЛЮДЕНИЯ ==================== */

/* Двухколоночный макет */
.watchlist-two-column {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* ИЗМЕНЕНО: Пропорции колонок изменены с 70%/30% на 55%/45% */
/* Левая колонка - карточки (55% ширины) */
.watchlist-cards-column {
    flex: 1;
    min-width: 0;
    width: 55%; /* ИЗМЕНЕНО: было 70%, стало 55% */
}

/* Правая колонка - STICKY элемент */
.watchlist-stats-sidebar {
    width: 45%; /* ИЗМЕНЕНО: было 30%, стало 45% */
    flex-shrink: 0;
    position: sticky;
    top: 100px;
    align-self: flex-start;
    height: fit-content;
    z-index: 19;
}

/* ИСПРАВЛЕНО: селектор изменен с .lk-watchlist-grid на .enhanced-watchlist-grid */
/* УВЕЛИЧЕНА СПЕЦИФИЧНОСТЬ: добавлен родительский класс .watchlist-cards-column */
@media (min-width: 769px) {
    .watchlist-cards-column .enhanced-watchlist-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 24px;
    }
}

/* ==================== АДАПТИВНОСТЬ ДЛЯ 3-КНОПОЧНОГО КОМПОНЕНТА ==================== */

/* Большие экраны (больше 1200px) - обычный размер */
@media (min-width: 1200px) {
    .watchlist-analytics-container {
        width: 480px;
    }
}

/* Средние экраны (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .watchlist-analytics-container {
        width: 440px;
    }
    
    .watchlist-btn {
        width: 140px;
    }
}

/* Мобильные устройства (до 768px) - ДОБАВЛЕНА адаптация двухколоночного макета */
@media (max-width: 768px) {
    .watchlist-two-column {
        flex-direction: column-reverse;;
        gap: 20px;
    }
    
    .watchlist-cards-column,
    .watchlist-stats-sidebar {
        width: 100%;
    }
    
    .watchlist-stats-sidebar {
        position: static;
        top: auto;
    }
}

/* ==================== ТЕМНАЯ ТЕМА ДЛЯ 3-КНОПОЧНОГО КОМПОНЕНТА ==================== */

:root[data-theme="dark"] .watchlist-btn {
    background: var(--card-bg);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .watchlist-btn:hover {
    border-color: var(--sea-turquoise);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .watchlist-btn.watchlist-action {
    border-color: rgba(95, 170, 184, 0.4);
}

:root[data-theme="dark"] .watchlist-btn.watchlist-action:hover {
    background: rgba(95, 170, 184, 0.1);
}

:root[data-theme="dark"] .watchlist-btn.watchlist-action.in-watchlist {
    background: linear-gradient(135deg, rgba(95, 170, 184, 0.15), rgba(13, 26, 41, 0.1));
    border-color: var(--sea-turquoise);
}

:root[data-theme="dark"] .watchlist-btn.watchlist-action.in-watchlist:hover {
    background: linear-gradient(135deg, rgba(95, 170, 184, 0.2), rgba(13, 26, 41, 0.15));
}

:root[data-theme="dark"] .watchlist-btn.analytics-btn {
    border-color: rgba(255, 255, 255, 0.15);
}

:root[data-theme="dark"] .watchlist-btn.analytics-btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: var(--card-bg);
}

:root[data-theme="dark"] .watchlist-action .watchlist-icon {
    color: var(--sea-turquoise);
}

:root[data-theme="dark"] .watchlist-action.in-watchlist .watchlist-icon {
    color: #FFD700;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
}

:root[data-theme="dark"] .analytics-btn .watchlist-icon {
    color: rgba(255, 255, 255, 0.6);
}

:root[data-theme="dark"] .watchlist-text {
    color: var(--text);
}

/* ==================== КОНЕЦ ФАЙЛА WATCHLIST.CSS ==================== */