/* Кастомные стили для A-Media - ОБНОВЛЕННАЯ ВЕРСИЯ */

/* ===== ШАПКА ===== */
.navbar,
.navbar-light,
.bg-light,
.app-navbar,
.main-navbar {
    background-color: #CAC3C3 !important;
    background: #CAC3C3 !important;
}

.navbar-brand,
.navbar-nav .nav-link,
.navbar-text,
.navbar .material-icons,
.navbar a:not(.btn),
.navbar span:not(.btn) {
    color: #ed3e33 !important;
}

.navbar .btn-outline-primary {
    color: #ed3e33 !important;
    border-color: #ed3e33 !important;
}

.navbar .btn-outline-primary:hover {
    background-color: #ed3e33 !important;
    color: white !important;
}

/* ===== ЛОГОТИПЫ ===== */
.navbar-brand img,
.navbar-brand svg {
    max-height: 40px !important;
    height: 40px !important;
    width: auto !important;
    object-fit: contain;
}

[data-theme="dark"] .navbar-brand img,
.dark .navbar-brand img {
    filter: brightness(0) invert(1);
}

/* ===== ОСНОВНЫЕ ЭЛЕМЕНТЫ ===== */
.btn-primary {
    background-color: #ed3e33 !important;
    border-color: #ed3e33 !important;
    color: white !important;
}

.btn-primary:hover {
    background-color: #d32f2f !important;
    border-color: #d32f2f !important;
}

a {
    color: #ed3e33 !important;
}

a:hover {
    color: #d32f2f !important;
}

.media-action-btn.active,
.media-action-btn:hover,
[class*="action"].active {
    color: #ed3e33 !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #ed3e33 !important;
}

/* ===== ИКОНКИ В НАВИГАЦИОННОМ МЕНЮ ===== */
/* По умолчанию иконки серые */
.nav-menu .menu-item-icon,
.nav-menu .material-icons,
.nav-menu li.link-item .menu-item-icon,
.nav-menu li.link-item .material-icons {
    color: #CAC3C3 !important;
    transition: color 0.3s ease !important;
}

/* При наведении - немного темнее серого */
.nav-menu li.link-item:hover .menu-item-icon,
.nav-menu li.link-item:hover .material-icons {
    color: #A0A0A0 !important;
}

/* АКТИВНАЯ СТРАНИЦА - иконка загорается цветом #ad1a10 */
.nav-menu li.link-item.active .menu-item-icon,
.nav-menu li.link-item.active .material-icons {
    color: #ad1a10 !important;
}

/* Фон активного пункта меню */
.nav-menu li.link-item.active {
    background-color: rgba(173, 26, 16, 0.1) !important;
}

/* Для тёмной темы */
body.dark_theme .nav-menu li.link-item.active {
    background-color: rgba(173, 26, 16, 0.2) !important;
}

/* ===== ОСТАЛЬНЫЕ ИКОНКИ ОСТАЮТСЯ КАК БЫЛИ ===== */
/* Иконки темы и другие остаются обычного красного цвета */
.material-icons[data-icon="brightness_4"],
.material-icons[data-icon="brightness_5"],
.material-icons[data-icon="wb_sunny"],
.material-icons[data-icon="dark_mode"],
.theme-switch .material-icons,
.theme-toggle .material-icons,
[class*="theme"] .material-icons,
.circle-icon-button .material-icons {
    color: #ed3e33 !important;
}

/* ===== ЗАМЕНА ЗЕЛЕНОГО ЦВЕТА ТЕМЫ НА СЕРЫЙ ===== */
/* Переопределяем переменную темы */
:root {
    --default-theme-color: #CAC3C3 !important;
}

body {
    --default-theme-color: #CAC3C3 !important;
}

/* Дополнительно переопределяем конкретные элементы */
/* Кнопки редактирования, удаления, подтверждения */
.btn-primary,
.btn-success,
[class*="edit"],
[class*="delete"],
[class*="confirm"],
[class*="approve"],
.media-author-actions button,
.media-author-actions a,
.comment-actions .remove-comment button,
.comment-actions .reply-comment button,
.form-actions-bottom button:not(.cancel),
.popup-message-bottom button:not(.cancel) {
    background-color: #CAC3C3 !important;
    border-color: #CAC3C3 !important;
    color: #333 !important; /* Темный текст для контраста */
}

/* Для темной темы - светлый текст */
body.dark_theme .btn-primary,
body.dark_theme .btn-success,
body.dark_theme [class*="edit"],
body.dark_theme [class*="delete"],
body.dark_theme [class*="confirm"],
body.dark_theme [class*="approve"],
body.dark_theme .media-author-actions button,
body.dark_theme .media-author-actions a,
body.dark_theme .comment-actions .remove-comment button,
body.dark_theme .comment-actions .reply-comment button,
body.dark_theme .form-actions-bottom button:not(.cancel),
body.dark_theme .popup-message-bottom button:not(.cancel) {
    color: #fff !important;
}

/* Ховер-эффекты */
.btn-primary:hover,
.btn-success:hover,
[class*="edit"]:hover,
[class*="delete"]:hover,
[class*="confirm"]:hover,
[class*="approve"]:hover,
.media-author-actions button:hover,
.media-author-actions a:hover,
.comment-actions .remove-comment button:hover,
.comment-actions .reply-comment button:hover,
.form-actions-bottom button:not(.cancel):hover,
.popup-message-bottom button:not(.cancel):hover {
    background-color: #b8b1b1 !important;
    border-color: #b8b1b1 !important;
}

/* ===== ЗАМЕНА ЦВЕТА КНОПКИ ПОИСКА ===== */
:root {
    --search-field-submit-bg-color: #ed3e33 !important;
}

body {
    --search-field-submit-bg-color: #ed3e33 !important;
}

body.dark_theme {
    --search-field-submit-bg-color: #ed3e33 !important;
}

/* Дополнительно переопределяем конкретные элементы поиска */
.search-field .submit,
.search-field button,
[class*="search"] button[type="submit"],
[class*="search"] .submit-btn {
    background-color: #ed3e33 !important;
    border-color: #ed3e33 !important;
    color: white !important;
}

/* Ховер-эффекты для кнопки поиска */
.search-field .submit:hover,
.search-field button:hover,
[class*="search"] button[type="submit"]:hover,
[class*="search"] .submit-btn:hover {
    background-color: #d32f2f !important;
    border-color: #d32f2f !important;
}

/* ===== ЦВЕТА ДЛЯ ВИДЕО ПЛЕЕРА - БЕЗОПАСНЫЕ СЕЛЕКТОРЫ ===== */

/* Цвет прогресс-бара воспроизведения */
.video-js .vjs-play-progress,
.vjs-play-progress.vjs-slider-bar,
#video-main .vjs-play-progress.vjs-slider-bar {
    background-color: #ed3e33 !important;
    background-image: none !important;
}

/* Цвет точки (handle) на прогресс-баре */
.video-js .vjs-play-progress::before {
    background-color: #ed3e33 !important;
}

/* Цвет при наведении на прогресс-бар */
.video-js .vjs-mouse-display {
    background-color: #ed3e33 !important;
}

/* Цвет иконок - ТОЛЬКО внутри плеера */
.video-js .vjs-control .vjs-icon-placeholder,
.video-js .vjs-play-control .vjs-icon-placeholder,
.video-js .vjs-volume-menu-button .vjs-icon-placeholder,
.video-js .vjs-mute-control .vjs-icon-placeholder,
.video-js .vjs-fullscreen-control .vjs-icon-placeholder,
.video-js .vjs-captions-button .vjs-icon-placeholder,
.video-js .vjs-chapters-button .vjs-icon-placeholder,
.video-js .vjs-autoplay-control .vjs-icon-placeholder {
    color: #ed3e33 !important;
    fill: #ed3e33 !important;
}

/* Цвет SVG путей - ТОЛЬКО внутри элементов управления */
.video-js .vjs-control svg path,
.video-js .vjs-control svg rect,
.video-js .vjs-control svg circle,
.video-js .vjs-control svg polygon {
    fill: #ed3e33 !important;
    stroke: #ed3e33 !important;
}

/* Цвет времени воспроизведения */
.video-js .vjs-current-time,
.video-js .vjs-duration,
.video-js .vjs-time-divider {
    color: #ed3e33 !important;
}

/* Цвет бегунка громкости */
.video-js .vjs-volume-level {
    background-color: #ed3e33 !important;
}

/* Цвет при наведении - ТОЛЬКО для иконок */
.video-js .vjs-control:hover .vjs-icon-placeholder,
.video-js .vjs-control:focus .vjs-icon-placeholder {
    color: #ed3e33 !important;
    text-shadow: 0 0 1em rgba(237, 62, 51, 0.5);
}

/* === ИСПРАВЛЕНИЕ: Featured → Избранное в меню === */

/* Скрываем оригинальный текст "Рекомендуемое" */
.nav-item-featured .menu-item-icon + span {
    display: none !important;
}

/* Вставляем свой текст "Избранное" */
.nav-item-featured a::after {
    content: "Избранное";
    margin-left: 8px;
    font-weight: 500;
    color: inherit;
}

/* Также обновляем title при наведении */
.nav-item-featured a {
    title: "Избранное" !important;
}

/* Скрываем оригинальный текст */
.custom-page-wrapper p {
    display: none;
}

/* Добавляем свой текст */
.custom-page-wrapper::after {
    content: "Платформа создана для хранения видеозаписей обучающих материалов для сотрудников: внутренние курсы, мастер-классы, запись вебинаров, технические инструктажи, презентации и архивные выступления. A-Media создан для эффективного распространения знаний внутри организации и поддержки непрерывного профессионального развития.";
    display: block;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}