/* ОБЩИЕ СТИЛИ (из base.html) */
body { background-color: #f4f7f6; }
.navbar { background-color: #2c3e50; }
.navbar-brand { font-weight: bold; color: #ecf0f1 !important; }
.nav-link { color: #bdc3c7 !important; }
.nav-link:hover { color: #ffffff !important; }

/* СТИЛИ АНАЛИЗА (из analysis.html) */
.cam-section-header { background: #e9ecef; cursor: pointer; }
.cam-card { transition: all 0.2s; border-left: 5px solid #ccc; }
.cam-card:hover { background-color: #f8f9fa; }
.color-indicator {
    width: 12px; height: 12px; border-radius: 50%; 
    display: inline-block; margin-right: 5px; background: transparent; border: 1px solid #ccc;
}
.text-warning { color: #fd7e14 !important; }

/* СТИЛИ КОНСТРУКТОРА (из profile_list.html) */
.stat-card { transition: all 0.2s; border-left: 4px solid transparent; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.stat-value { font-size: 1.1rem; font-weight: 700; color: #343a40; }
.nav-tabs .nav-link.active { font-weight: bold; border-top: 3px solid #0d6efd; color: #0d6efd !important; background-color: #fff; }
#plotTabs .nav-link:hover { color: #212529 !important; background-color: #e9ecef; }
#plotTabs .nav-link.active { color: #0d6efd !important; background-color: #fff; }

.overlay-error {
    position: absolute;       /* Вырываем из потока - верстка не поедет */
    top: 20px;                /* Отступ сверху */
    left: 50%;                /* Центруем по горизонтали... */
    transform: translateX(-50%); /* ...с учетом собственной ширины */
    z-index: 1050;            /* Поверх графиков Plotly */
    
    width: 90%;               /* Не слишком широко */
    max-width: 600px;
    
    /* Полупрозрачный фон с размытием заднего плана */
    background-color: rgba(255, 220, 220, 0.95) !important; 
    border: 1px solid #dc3545;
    border-left: 5px solid #dc3545 !important;
    backdrop-filter: blur(4px); /* Эффект матового стекла */
    
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Тень для объема */
    pointer-events: none;     /* Чтобы можно было кликать сквозь него (опционально, но лучше оставить кликабельным если там будет кнопка закрытия. Пока уберем pointer-events, чтобы не мешал крутить график) */
    pointer-events: auto;     /* Оставим auto, вдруг захочется скопировать текст */
    
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Наш кастомный тултип */
#custom-tooltip {
    position: fixed; /* Фиксирован относительно окна браузера */
    display: none;   /* Скрыт по умолчанию */
    z-index: 9999;   /* Поверх всего */
    
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    padding: 8px 12px;
    
    font-family: monospace; /* Моноширинный шрифт для ровных цифр */
    font-size: 12px;
    color: #333;
    pointer-events: none; /* Мышь сквозь него кликает (чтобы не мешал) */
    white-space: nowrap;  /* Текст не переносится */
}

/* Стили внутри тултипа */
#custom-tooltip .tt-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 2px;
}
#custom-tooltip .tt-label { font-weight: bold; }
#custom-tooltip .tt-val { text-align: right; }