/**
 * @file: dark-theme.css
 * @description: Тёмная тема сайта. Все правила работают ТОЛЬКО при
 *               html[data-theme="dark"] — светлая тема (текущий дизайн)
 *               не изменяется вообще. Подключается последним файлом стилей.
 * @dependencies: main.css, update.css, news.css, poster.css, groups.css,
 *                media_archive.css, app/views/partials/theme-toggle.php,
 *                template/js/theme-switcher.js
 * @created: 2026-08-18
 */

/* ============================================================
   1. КНОПКА-ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ (видна в обеих темах)
      Позиция: правый нижний угол, над кнопкой «Наверх»
   ============================================================ */
.theme-toggle-btn {
    position: fixed;
    right: 20px;
    bottom: 146px; /* 90px (кнопка «Наверх») + 46px + отступ 10px */
    z-index: 10001;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: #0f3460;
    color: #ffd76a;
    font-size: 19px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
    opacity: .85;
    transition: opacity .3s ease, background-color .2s ease, transform .2s ease;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus {
    background: #16498c;
    opacity: 1;
    transform: scale(1.08);
}

/* Иконка: в светлой теме показываем луну, в тёмной — солнце */
.theme-toggle-btn .fa-sun { display: none; }
html[data-theme="dark"] .theme-toggle-btn .fa-moon { display: none; }
html[data-theme="dark"] .theme-toggle-btn .fa-sun { display: inline-block; }

@media (max-width: 800px) {
    .theme-toggle-btn {
        right: 12px;
        bottom: 120px; /* мобильная кнопка «Наверх»: 70px + 40px + 10px */
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* Плавный переход цветов при переключении темы (класс вешает JS на 400мс) */
html.theme-switching,
html.theme-switching body,
html.theme-switching body *:not(img):not(video):not(iframe) {
    transition: background-color .4s ease, color .4s ease, border-color .4s ease !important;
}

/* ============================================================
   2. ПАЛИТРА ТЁМНОЙ ТЕМЫ (CSS-переменные)
   ============================================================ */
html[data-theme="dark"] {
    --dt-bg: #0d1520;         /* фон страницы */
    --dt-panel: #14202f;      /* панели/блоки */
    --dt-card: #1a2942;       /* карточки */
    --dt-card-hover: #223349; /* карточки при наведении */
    --dt-border: #2e415c;     /* рамки */
    --dt-text: #dbe6f3;       /* основной текст */
    --dt-muted: #93a5bb;      /* вторичный текст */
    --dt-accent: #7db8e8;     /* ссылки/акценты */
}

/* ============================================================
   3. БАЗОВЫЙ ФОН И ТЕКСТ
   ============================================================ */
html[data-theme="dark"] body {
    background-color: var(--dt-bg);
    background-image:
        radial-gradient(1100px 700px at 15% 10%, rgba(30, 66, 110, .55), rgba(30, 66, 110, 0) 60%),
        radial-gradient(900px 650px at 85% 18%, rgba(24, 53, 92, .45), rgba(24, 53, 92, 0) 58%),
        linear-gradient(180deg, #0d1520 0%, #101b2a 45%, #0d1520 100%);
    background-attachment: fixed;
    color: var(--dt-text);
}

html[data-theme="dark"] .wrapper {
    background-color: rgba(13, 21, 32, .55);
}

/* Заголовки страниц */
html[data-theme="dark"] h1 {
    background-color: #1f3b63;
    color: #fff;
    border-color: #3a5a8c;
}

html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
    color: var(--dt-text);
}

/* Ссылки в контенте (меню и футер переопределяются отдельно) */
html[data-theme="dark"] .center-block a,
html[data-theme="dark"] .left-block a,
html[data-theme="dark"] .right-block a {
    color: var(--dt-accent);
}

/* ============================================================
   4. ТРИ КОЛОНКИ: РАМКИ И ФОН
   ============================================================ */
html[data-theme="dark"] .left-block,
html[data-theme="dark"] .center-block,
html[data-theme="dark"] .right-block {
    border-color: var(--dt-border);
}

/* Афиша (левая колонка) */
html[data-theme="dark"] .left-block__container .block-afish .afisha-wrapper {
    background-color: var(--dt-card);
    border-color: var(--dt-border);
    color: var(--dt-text);
}

html[data-theme="dark"] .left-block__container .block-afish .afisha-wrapper:hover {
    background: var(--dt-card-hover);
}

html[data-theme="dark"] .left-block__container .block-afish .afisha-wrapper .afisha-title {
    background-color: rgba(226, 255, 0, .12);
    color: #e8e4a0;
    border-color: var(--dt-border);
}

/* Проекты/виджеты (правая колонка) */
html[data-theme="dark"] .right-block__container .block-projects .project-wrapper {
    background-color: var(--dt-card);
    border-color: var(--dt-border);
    color: var(--dt-text);
}

html[data-theme="dark"] .right-block__container .block-projects .project-wrapper:hover {
    background: var(--dt-card-hover);
}

/* ============================================================
   5. ГЛАВНОЕ МЕНЮ
   ============================================================ */
html[data-theme="dark"] .menu_block__container .menu > ul li a {
    background: #1c3a5f;
    color: #dce9f7;
}

html[data-theme="dark"] .menu_block__container .menu > ul li {
    border-right-color: #2e415c;
}

html[data-theme="dark"] .menu_block__container .menu > ul li:first-child,
html[data-theme="dark"] .menu_block__container .menu > ul li:last-child {
    border-left-color: #2e415c;
}

html[data-theme="dark"] .menu_block__container .menu li > ul li {
    border-color: #2e415c;
}

/* Активный пункт и hover — оставляем фирменный #465397, он хорошо
   читается и на тёмном фоне */

/* ============================================================
   6. БЕЛЫЕ КАРТОЧКИ ИЗ ДРУГИХ ФАЙЛОВ СТИЛЕЙ
      (перекрываем с !important там, где он был в исходниках)
   ============================================================ */
html[data-theme="dark"] .news .items__news article {
    border-color: var(--dt-border);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .5);
    background: var(--dt-card);
    color: var(--dt-text);
}

html[data-theme="dark"] .news .items__news article .news-image .news__img {
    border-color: var(--dt-border);
}

html[data-theme="dark"] .news .news__arhiv {
    background: #2a3b55;
    color: var(--dt-text);
    border-color: var(--dt-border);
}

html[data-theme="dark"] .category_button_news {
    color: var(--dt-accent) !important;
}

/* /news (news.css) */
html[data-theme="dark"] .news-filters,
html[data-theme="dark"] .filter-status-item,
html[data-theme="dark"] .filter-status,
html[data-theme="dark"] .tip,
html[data-theme="dark"] .news-count-container,
html[data-theme="dark"] .poster-count-container,
html[data-theme="dark"] .infinite-scroll-indicator,
html[data-theme="dark"] .view-toggle-btn,
html[data-theme="dark"] .pagination-list .pagenav {
    background: var(--dt-card) !important;
    color: var(--dt-text) !important;
    border-color: var(--dt-border) !important;
}

html[data-theme="dark"] .filter-status-label,
html[data-theme="dark"] .news-count-label,
html[data-theme="dark"] .news-count-info,
html[data-theme="dark"] .poster-count-label,
html[data-theme="dark"] .poster-count-info {
    color: var(--dt-accent);
}

/* ВАЖНО: news.css/poster.css/groups.css подключаются ПОСЛЕ этого файла
   (в <head> внутри вьюх) и содержат !important. Перекрываем их повышенной
   спецификой: цепочка классов исходника + html[data-theme]. */
html[data-theme="dark"] .news .items__news article .news-image,
html[data-theme="dark"] .news .items__news .news-item .news-image,
html[data-theme="dark"] .news-item .news-image,
html[data-theme="dark"] .items__news.items__news-cards article .news-image,
html[data-theme="dark"] .items__news.items__news-cards .news-item .news-image,
html[data-theme="dark"] .items__news-list .news-item .news-image,
html[data-theme="dark"] .news-image {
    background: var(--dt-card) !important;
}

/* Служебные блоки: пусто/загрузка/конец списка */
html[data-theme="dark"] .no-more-news,
html[data-theme="dark"] .no-news,
html[data-theme="dark"] .no-news-found,
html[data-theme="dark"] .no-posters-found,
html[data-theme="dark"] .loading-indicator,
html[data-theme="dark"] .filter-loading-indicator,
html[data-theme="dark"] .pagination-list li.disabled span,
html[data-theme="dark"] .media-archive__card--stub,
html[data-theme="dark"] .media-archive__stub,
html[data-theme="dark"] .video-archive__scroll-indicator,
html[data-theme="dark"] .video-archive__remaining-block,
html[data-theme="dark"] .video-archive__end-list {
    background: var(--dt-card) !important;
    color: var(--dt-muted) !important;
    border-color: var(--dt-border) !important;
}

html[data-theme="dark"] .filter-group input,
html[data-theme="dark"] .filter-group select {
    background: #101b2b !important;
    color: var(--dt-text) !important;
    border-color: var(--dt-border) !important;
}

html[data-theme="dark"] .news-item,
html[data-theme="dark"] .news .items__news article.news-item,
html[data-theme="dark"] .news .items__news .news-item,
html[data-theme="dark"] #group-news.news-item,
html[data-theme="dark"] .items__news-list .news-item,
html[data-theme="dark"] .news .items__news.items__news-list .news-item {
    background: var(--dt-card) !important;
    color: var(--dt-text) !important;
    border-color: var(--dt-border) !important;
}

/* /poster (poster.css) */
html[data-theme="dark"] .items__news.items__news-cards article.news-item,
html[data-theme="dark"] .items__news.items__news-cards .news-item,
html[data-theme="dark"] .items__news.items__news-cards article .news-content,
html[data-theme="dark"] .items__news.items__news-cards .news-item .news-content,
html[data-theme="dark"] .items__news.items__news-list .news-item,
html[data-theme="dark"] .items__news.items__news-list .news-item .news-content {
    background: var(--dt-card) !important;
    color: var(--dt-text) !important;
    border-color: var(--dt-border) !important;
}

/* /groups (groups.css — там всё с !important, перекрываем спецификой) */
html[data-theme="dark"] .group-card__details,
html[data-theme="dark"] .group-card__value,
html[data-theme="dark"] .group-card__badge,
html[data-theme="dark"] .group-card__label {
    background: var(--dt-card) !important;
    color: var(--dt-text) !important;
    border-color: var(--dt-border) !important;
}

html[data-theme="dark"] .group-card__row {
    border-bottom-color: var(--dt-border) !important;
}

html[data-theme="dark"] .group-card__label {
    border-right-color: var(--dt-border) !important;
}

html[data-theme="dark"] .filters-header {
    color: var(--dt-text) !important;
    border-bottom-color: var(--dt-border) !important;
}

/* ============================================================
   6.1. КОНТРАСТ ТЕКСТА В КАРТОЧКАХ
        (цепочки селекторов повторяют news.css/poster.css —
        там color с !important, коротким селектором не перебить)
   ============================================================ */
html[data-theme="dark"] .news .items__news article .news-content .news__title,
html[data-theme="dark"] .news .items__news .news-item .news-content .news__title,
html[data-theme="dark"] .news-item .news-content .news__title,
html[data-theme="dark"] .items__news.items__news-cards article .news-content .news__title,
html[data-theme="dark"] .items__news.items__news-cards .news-item .news-content .news__title,
html[data-theme="dark"] .items__news-list .news-item .news__title,
html[data-theme="dark"] .news__title {
    color: #ffffff !important;
}

html[data-theme="dark"] .news-item:hover .news__title,
html[data-theme="dark"] .items__news.items__news-cards .news-item:hover .news__title {
    color: var(--dt-accent) !important;
}

html[data-theme="dark"] .news .items__news article .news-content .news__text,
html[data-theme="dark"] .news .items__news .news-item .news-content .news__text,
html[data-theme="dark"] .news-item .news-content .news__text,
html[data-theme="dark"] .items__news-list .news-item .news__text,
html[data-theme="dark"] .news__text {
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .news .items__news article .news-content .news__date,
html[data-theme="dark"] .news .items__news .news-item .news-content .news__date,
html[data-theme="dark"] .news-item .news-content .news__date,
html[data-theme="dark"] .items__news.items__news-cards .news-item .news-content .news__date,
html[data-theme="dark"] .news__date {
    color: var(--dt-muted) !important;
}

html[data-theme="dark"] .filter-group label,
html[data-theme="dark"] .pagination p {
    color: var(--dt-text);
}

/* Хлебные крошки: единый вид на всех страницах
   (компонент Breadcrumbs::front, разметка div.breadcrumb > ul > li)
   Исходник main.css: серый #3d3d3d, ссылки белые, активный оранжевый.
   В тёмной теме приводим к палитре --dt-*: ссылки-акцент, активный —
   обычный текст, «Вы здесь:» и разделители — приглушённые. */
html[data-theme="dark"] .breadcrumb {
    background: var(--dt-panel);
    border-color: var(--dt-border);
}

html[data-theme="dark"] .breadcrumb ul,
html[data-theme="dark"] .breadcrumb li,
html[data-theme="dark"] .breadcrumb .separator {
    color: var(--dt-muted);
}

html[data-theme="dark"] .breadcrumb a,
html[data-theme="dark"] .breadcrumb a.pathway {
    color: var(--dt-accent);
}

html[data-theme="dark"] .breadcrumb ul li:hover a {
    color: #ffffff;
}

html[data-theme="dark"] .breadcrumb ul > .active {
    color: var(--dt-text);
}

/* Ошибки форм */
html[data-theme="dark"] .error-message {
    background: #3a1a1a;
    color: #ff8a80;
}

/* ============================================================
   6.2. ИНФОБЛОК «КАК ПОЛЬЗОВАТЬСЯ…» (news/poster/groups/contacts)
        У афиши блок называется .poster-info-block (poster.css)
   ============================================================ */
html[data-theme="dark"] .news-info-block,
html[data-theme="dark"] .poster-info-block {
    background: linear-gradient(135deg, var(--dt-panel) 0%, var(--dt-card) 100%) !important;
    border-color: var(--dt-border) !important;
}

html[data-theme="dark"] .info-text h3 {
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .info-text p,
html[data-theme="dark"] .info-text li {
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .info-text strong {
    color: #ffffff !important;
}

html[data-theme="dark"] .tip {
    color: var(--dt-text) !important;
}

/* ============================================================
   6.3. СТРАНИЦА РЕКВИЗИТОВ /contacts/props
        (стили лежат в контенте БД — перекрываем повышенной
        спецификой, градиент секции договоров оставляем)
   ============================================================ */
html[data-theme="dark"] .requisites-header h1 {
    color: #ffffff;
}

html[data-theme="dark"] .requisites-header p {
    color: var(--dt-muted);
}

html[data-theme="dark"] .requisite-card {
    background: linear-gradient(135deg, var(--dt-panel) 0%, var(--dt-card) 100%);
}

html[data-theme="dark"] .requisite-card h3 {
    color: var(--dt-text);
}

html[data-theme="dark"] .requisite-field {
    background: rgba(13, 21, 32, .8);
}

html[data-theme="dark"] .requisite-field label {
    color: var(--dt-muted);
}

html[data-theme="dark"] .requisite-field .value {
    color: var(--dt-text);
}

/* ============================================================
   6.4. СТРАНИЦА ТЕЛЕФОНОВ /contacts/telephone
        (стили в <style> внутри вьюхи — простые классы,
        перекрываем спецификой html[data-theme])
   ============================================================ */
html[data-theme="dark"] .contacts-header h1 {
    color: #ffffff;
}

html[data-theme="dark"] .contacts-header p {
    color: var(--dt-muted);
}

html[data-theme="dark"] .contact-card {
    background: var(--dt-card);
    border-color: var(--dt-border);
}

html[data-theme="dark"] .contact-card:hover {
    border-color: var(--dt-accent);
}

html[data-theme="dark"] .contact-name,
html[data-theme="dark"] .contact-detail,
html[data-theme="dark"] .contact-detail strong,
html[data-theme="dark"] .contact-detail.value {
    color: var(--dt-text);
}

html[data-theme="dark"] .contact-position {
    color: var(--dt-muted);
}

html[data-theme="dark"] .contact-card .icon,
html[data-theme="dark"] .contact-detail .icon {
    fill: var(--dt-muted);
}

html[data-theme="dark"] .special-contacts {
    background: var(--dt-panel);
    border-color: var(--dt-border);
}

html[data-theme="dark"] .special-contacts h2 {
    color: var(--dt-text);
}

html[data-theme="dark"] .special-item {
    background: var(--dt-card);
    border-color: var(--dt-border);
}

html[data-theme="dark"] .special-item h3 {
    color: var(--dt-text);
}

html[data-theme="dark"] .special-item .phone {
    background: #101b2b;
    border-color: var(--dt-border);
    color: var(--dt-text);
}

html[data-theme="dark"] .special-item .phone:hover {
    background: #3498db;
    border-color: #3498db;
    color: #ffffff;
}

/* /media-archive, /video (media_archive.css) */
html[data-theme="dark"] .media-archive__card,
html[data-theme="dark"] .video-archive__tabs,
html[data-theme="dark"] .video-archive__tab,
html[data-theme="dark"] .video-archive__filters,
html[data-theme="dark"] .video-archive__card,
html[data-theme="dark"] .video-archive__modal-dialog {
    background: var(--dt-card) !important;
    color: var(--dt-text) !important;
    border-color: var(--dt-border) !important;
}

html[data-theme="dark"] .video-archive__subscribe-link {
    background: #b0362e !important;
    color: #fff !important;
}

/* Главная: слайдер партнёров, видеоальбомы, проекты, коллективы */
html[data-theme="dark"] .slider-partners__container,
html[data-theme="dark"] .videoalbom .items-video,
html[data-theme="dark"] .our_projects__container .block-our_projects .project,
html[data-theme="dark"] .afisha__container .block-afisha .afisha-item,
html[data-theme="dark"] .collective .collective_list .group .group-name {
    background-color: var(--dt-card);
    color: var(--dt-text);
}

/* Техническая информация (параметры сцены) */
html[data-theme="dark"] .tech__info .info-ck .param-scene tr,
html[data-theme="dark"] .tech__info .info-gorod .param-scene tr {
    background: var(--dt-card);
    color: var(--dt-text);
}

/* Мобильное меню и слайдер */
html[data-theme="dark"] .slicknav_menu .slicknav_icon-bar {
    background-color: #dce9f7;
}

html[data-theme="dark"] .bx-wrapper .bx-pager.bx-default-pager a {
    background: rgba(255, 255, 255, .35);
}

/* ============================================================
   7. ПАГИНАЦИЯ
   ============================================================ */
html[data-theme="dark"] .pagination .pagination-list li a {
    color: var(--dt-text);
}

/* ============================================================
   8. ФОРМЫ И ТАБЛИЦЫ В КОНТЕНТЕ
   ============================================================ */
html[data-theme="dark"] .center-block input[type="text"],
html[data-theme="dark"] .center-block input[type="email"],
html[data-theme="dark"] .center-block input[type="tel"],
html[data-theme="dark"] .center-block input[type="search"],
html[data-theme="dark"] .center-block textarea,
html[data-theme="dark"] .center-block select {
    background: #101b2b;
    color: var(--dt-text);
    border: 1px solid var(--dt-border);
}

html[data-theme="dark"] .center-block table td,
html[data-theme="dark"] .center-block table th {
    border-color: var(--dt-border);
}

/* Ленивая загрузка изображений */
html[data-theme="dark"] .lazy-placeholder {
    background: #1c2a3d;
    color: var(--dt-muted);
}

/* Блок текста на главной и лоадер старой версии */
html[data-theme="dark"] #main-text {
    background: var(--dt-card) !important;
    color: var(--dt-text) !important;
}

html[data-theme="dark"] .loaderArea__inner {
    background: var(--dt-panel) !important;
    color: var(--dt-text) !important;
}

/* Блок виджета перевода (стили в шапке template.php) */
html[data-theme="dark"] .translation-toggle {
    background: var(--dt-card);
    border-color: var(--dt-border);
    color: var(--dt-text);
}

html[data-theme="dark"] .translation-toggle:hover:not(:disabled) {
    background: var(--dt-card-hover);
}

html[data-theme="dark"] .translation-status {
    color: var(--dt-muted);
}

/* Контейнер Яндекс-карты в футере (background задан inline — нужен !important) */
html[data-theme="dark"] #map-container {
    background: var(--dt-panel) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text);
}

/* ============================================================
   9. ФУТЕР (уже тёмный #3d3d3d — чуть углубляем под палитру)
   ============================================================ */
html[data-theme="dark"] footer .container {
    background-color: #101a26;
}

/* Кнопка «Наверх» — чуть светлее на тёмном фоне */
html[data-theme="dark"] .scroll-top-btn {
    background: #2a4a75;
}