/* ==========================================================================
   Тёмная тема блога.
   Включается атрибутом data-theme="dark" на <html> (скрипт в <head>
   header.php, переключатель — js/blog.js). Подключается последним файлом,
   поэтому перекрывает main.min.css / blog.css без !important там, где хватает
   специфичности селектора html[data-theme="dark"].
   ========================================================================== */

html[data-theme="dark"] {
  color-scheme: dark;

  --dk-bg:        #0E1219;  /* фон страницы                       */
  --dk-surface:   #171C26;  /* карточки, шапка, меню              */
  --dk-surface-2: #212836;  /* ховеры, чипы, кнопки               */
  --dk-border:    rgba(255, 255, 255, 0.12);
  --dk-text:      #E6E9EF;  /* основной текст                     */
  --dk-text-2:    #A9B4C4;  /* вторичный (был #44596d)            */
  --dk-text-3:    #8391A5;  /* приглушённый (был #667389)         */
  --dk-link:      #FF4D7D;  /* малиновые ссылки читаемее на тёмном */
}

/* --- Фон и текст ------------------------------------------------------- */
html[data-theme="dark"] body {
  background: var(--dk-bg);
  color: var(--dk-text);
}

/* --- Поверхности ------------------------------------------------------- */
html[data-theme="dark"] .header,
html[data-theme="dark"] .logged-list,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .content-title,
html[data-theme="dark"] .news,
html[data-theme="dark"] .post,
html[data-theme="dark"] .settings,
html[data-theme="dark"] .draft-item,
html[data-theme="dark"] .author,
html[data-theme="dark"] .blogger,
html[data-theme="dark"] .menu,
html[data-theme="dark"] .hamburger,
html[data-theme="dark"] .content-nav__list a,
html[data-theme="dark"] .comment-nav__btn,
html[data-theme="dark"] .add-post-sticky-fields,
html[data-theme="dark"] .fieldset__label,
html[data-theme="dark"] .ai-hubs,
html[data-theme="dark"] .ai-hubs__more,
html[data-theme="dark"] .blog-gallery-view__card,
html[data-theme="dark"] .post-related__link,
html[data-theme="dark"] .blog-share__copy,
html[data-theme="dark"] .blog-share__tg,
html[data-theme="dark"] .blog-new-post,
html[data-theme="dark"] .ai-writer__result,
html[data-theme="dark"] .modal .modal-content {
  background: var(--dk-surface);
  color: var(--dk-text);
}

html[data-theme="dark"] .header,
html[data-theme="dark"] .header .search.open .search-input {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .logged-list { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .popover { border-color: var(--dk-border); }
html[data-theme="dark"] .main-nav { background-color: var(--dk-bg); }

html[data-theme="dark"] .btn-gray,
html[data-theme="dark"] .paging-list__link,
html[data-theme="dark"] .ai-hubs__chip,
html[data-theme="dark"] .hub__cta,
html[data-theme="dark"] .ai-writer__switch,
html[data-theme="dark"] .ai-writer__panel,
html[data-theme="dark"] .add-rection .add-rection__toggler,
html[data-theme="dark"] .post-body table tr:nth-child(odd) th,
html[data-theme="dark"] .post-body table tr:nth-child(odd) td {
  background: var(--dk-surface-2);
}

html[data-theme="dark"] .btn-gray:hover,
html[data-theme="dark"] .popover-list a:hover,
html[data-theme="dark"] .popover-list .active a,
html[data-theme="dark"] .news-nav__btn:hover .news-nav__btn-icon,
html[data-theme="dark"] .add-rection:hover .add-rection__toggler,
html[data-theme="dark"] .add-rection__toggler.active,
html[data-theme="dark"] .comment-nav__btn.active,
html[data-theme="dark"] .comment-nav__btn:hover,
html[data-theme="dark"] .paging-list__link:hover,
html[data-theme="dark"] .paging-list__link:focus-visible,
html[data-theme="dark"] .ai-hubs__chip:hover,
html[data-theme="dark"] .ai-hubs__chip.is-active,
html[data-theme="dark"] .ai-writer__mode.active {
  background: #2B3343;
  border-color: var(--dk-border);
}

/* Заглушки под картинки */
html[data-theme="dark"] .blog-gallery__item,
html[data-theme="dark"] .hub__card-img,
html[data-theme="dark"] .blog-share__media a,
html[data-theme="dark"] .blog-new-post__img {
  background: var(--dk-surface-2);
}

/* --- Поля ввода -------------------------------------------------------- */
html[data-theme="dark"] .search-input input,
html[data-theme="dark"] .header .search.open .search-input,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-textarea,
html[data-theme="dark"] .comment-form textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
  border-color: var(--dk-border);
}
html[data-theme="dark"] .search-input input::placeholder,
html[data-theme="dark"] .form-input::placeholder,
html[data-theme="dark"] .form-textarea::placeholder,
html[data-theme="dark"] .comment-form textarea::placeholder,
html[data-theme="dark"] .form-control::placeholder {
  color: var(--dk-text-3);
}
html[data-theme="dark"] .form-input:hover,
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .form-textarea:hover,
html[data-theme="dark"] .form-textarea:focus,
html[data-theme="dark"] .search-input input:hover,
html[data-theme="dark"] .search-input input:focus {
  border-color: #5A6A82;
}

/* --- Основной текст ---------------------------------------------------- */
html[data-theme="dark"] .menu-top__list li.active a,
html[data-theme="dark"] .menu-top__list a:hover,
html[data-theme="dark"] .logged-list a:hover,
html[data-theme="dark"] .popover-list a,
html[data-theme="dark"] .popover-list a:hover,
html[data-theme="dark"] .popover-list .active a,
html[data-theme="dark"] .news-user__title,
html[data-theme="dark"] .news-title,
html[data-theme="dark"] .post-body,
html[data-theme="dark"] .post-body p,
html[data-theme="dark"] .post-body h1,
html[data-theme="dark"] .post-body h2,
html[data-theme="dark"] .post-body h3,
html[data-theme="dark"] .post-body h4,
html[data-theme="dark"] .post-body ol li,
html[data-theme="dark"] .post-body ul li,
html[data-theme="dark"] .comment-total,
html[data-theme="dark"] .comment-item__name,
html[data-theme="dark"] .comment-item__answer,
html[data-theme="dark"] .comment-item__answer-prev,
html[data-theme="dark"] .draft-item__nav-btn svg:hover,
html[data-theme="dark"] .form-checkbox input[type=checkbox] + label,
html[data-theme="dark"] .content-nav__list li.active a,
html[data-theme="dark"] .fieldset__label,
html[data-theme="dark"] .paging-list__link,
html[data-theme="dark"] .ai-hubs__chip,
html[data-theme="dark"] .blog-gallery__title,
html[data-theme="dark"] .hub__h2,
html[data-theme="dark"] .hub__card-title,
html[data-theme="dark"] .blog-gallery-view__author,
html[data-theme="dark"] .blog-gallery-view__prompt,
html[data-theme="dark"] .blog-gallery-view__params dd,
html[data-theme="dark"] .post-related__title,
html[data-theme="dark"] .post-related__name,
html[data-theme="dark"] .blog-share__subtitle,
html[data-theme="dark"] .blog-share__prompt,
html[data-theme="dark"] .blog-share__params dd,
html[data-theme="dark"] .blog-share__copy,
html[data-theme="dark"] .blog-share__tg,
html[data-theme="dark"] .blog-new-post__link,
html[data-theme="dark"] .blog-tariffs__remind,
html[data-theme="dark"] .ai-writer__mode:hover,
html[data-theme="dark"] .ai-writer__mode.active,
html[data-theme="dark"] .ai-writer__tab.active,
html[data-theme="dark"] .modal .modal-content {
  color: var(--dk-text);
}

html[data-theme="dark"] .news-title:hover,
html[data-theme="dark"] .comment-item__nav-open:hover {
  color: #FFFFFF;
}

/* --- Вторичный текст --------------------------------------------------- */
html[data-theme="dark"] .logged-list a,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-edit,
html[data-theme="dark"] .btn-gray,
html[data-theme="dark"] .btn-gray:hover,
html[data-theme="dark"] .news-content p,
html[data-theme="dark"] .news-reaction__item,
html[data-theme="dark"] .comment-nav__btn,
html[data-theme="dark"] .comment-item__nav-open,
html[data-theme="dark"] .content-nav__list a,
html[data-theme="dark"] .feed-head__title,
html[data-theme="dark"] .add-post-seo__summary,
html[data-theme="dark"] .ai-hubs__label,
html[data-theme="dark"] .ai-hubs__more,
html[data-theme="dark"] .hub__lead,
html[data-theme="dark"] .hub__card-text,
html[data-theme="dark"] .hub__cta p,
html[data-theme="dark"] .blog-share__lead,
html[data-theme="dark"] .ai-writer__mode,
html[data-theme="dark"] .ai-writer__title,
html[data-theme="dark"] .ai-writer__status,
html[data-theme="dark"] .menu-theme {
  color: var(--dk-text-2);
}

html[data-theme="dark"] .btn-white.btn-white,
html[data-theme="dark"] .news-info__time,
html[data-theme="dark"] .news-nav__btn {
  color: var(--dk-text-3);
}

/* Малиновые ссылки — светлее, иначе тонут в тёмном фоне */
html[data-theme="dark"] .news-link,
html[data-theme="dark"] .post-link,
html[data-theme="dark"] .post-body a,
html[data-theme="dark"] .comment-item__nav-answer,
html[data-theme="dark"] .news-user__title:hover,
html[data-theme="dark"] .blogger-box .read-more {
  color: var(--dk-link);
}

/* --- Бордеры ----------------------------------------------------------- */
html[data-theme="dark"] .comment-nav__btn,
html[data-theme="dark"] .comment-hidden,
html[data-theme="dark"] .post-related__link,
html[data-theme="dark"] .blog-share__copy,
html[data-theme="dark"] .blog-share__tg,
html[data-theme="dark"] .ai-writer__panel,
html[data-theme="dark"] .ai-writer__result {
  border-color: var(--dk-border);
}
html[data-theme="dark"] .comment-item__answer-prev { border-left-color: #5A6A82; }

/* --- Логотип: чёрные буквы → светлые ------------------------------------ */
html[data-theme="dark"] .logo img {
  content: url(../img/logo-dark.svg);
}

/* --- Переключатель ------------------------------------------------------
   Как на turbotext.pro: круглая прозрачная кнопка 33px, иконка 17px.
   Светлая тема — месяц со звёздами («Тёмная тема»), тёмная — жёлтое
   солнце («Светлая тема»). Иконки — Material Design Icons
   (weather-night / white-balance-sunny), inline в header.php и sidebar.php.
   ----------------------------------------------------------------------- */
.theme-switcher,
.menu-theme {
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.theme-switcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 33px;
  height: 33px;
  padding: 8px;
  border-radius: 100px;
  color: #44596D;
  transition: background-color .2s ease, color .2s ease;
}
.theme-switcher:hover,
.theme-switcher:focus-visible { background: rgba(68, 89, 109, 0.10); }
.theme-switcher:focus-visible { outline: 2px solid #7393C6; outline-offset: 1px; }
/* Кнопка стоит в форме поиска сразу за лупой (header.php). Отступ слева
   из main.min.css (26px / 10px) рассчитан на старое место в конце шапки. */
.header .search .theme-switcher { margin-left: 6px; }

/* На мобильном лупа — кружок 24px с обводкой (main.min.css); переключатель
   рядом делаем таким же, чтобы шапка не распухла. main.min.css здесь его
   прятал — возвращаем. */
@media only screen and (max-width: 767px) {
  /* Кружок лупы светлый только в мобильной вёрстке — там и темним. */
  html[data-theme="dark"] .header .search-toggler { background: var(--dk-surface-2); }
  .header .search .theme-switcher {
    display: inline-flex;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 6px;
    border: 1px solid rgba(115, 147, 198, 0.5);
    border-radius: 50%;
  }
  .header .search .theme-switcher .theme-switcher__icon {
    width: 14px;
    height: 14px;
  }
  html[data-theme="dark"] .header .search .theme-switcher { border-color: rgba(246, 206, 85, 0.45); }
}

/* main.min.css крутит и подменяет svg старого переключателя на :hover —
   здесь это гасим (селектор сильнее .theme-switcher:hover svg:last-child). */
.theme-switcher.theme-switcher .theme-switcher__icon {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  display: block;
  width: 17px;
  height: 17px;
  fill: currentColor;
  transition: none;
}
.menu-theme { padding: 0; }
.menu-theme .theme-switcher__icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Какую иконку показывать */
.theme-switcher__icon--sun { display: none !important; }
html[data-theme="dark"] .theme-switcher__icon--moon { display: none !important; }
html[data-theme="dark"] .theme-switcher__icon--sun { display: block !important; }

html[data-theme="dark"] .theme-switcher { color: #F6CE55; }
html[data-theme="dark"] .theme-switcher:hover,
html[data-theme="dark"] .theme-switcher:focus-visible { background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .menu-theme .theme-switcher__icon--sun { color: #F6CE55; }

/* --- Дизайн-токены (виджет генерации, тарифы, карточка аккаунта) ---------
   Компоненты design/ и blog-ai*.css красятся токенами из design/tokens.css,
   поэтому для них достаточно переопределить сами токены: тексты H1–H4
   светлеют, фоны темнеют. */
html[data-theme="dark"] {
  --tt-h1:          #E6E9EF;
  --tt-h2:          #C9D0DB;
  --tt-h3:          #A9B4C4;
  --tt-h4:          #7F8A99;
  --tt-stroke:      rgba(255, 255, 255, 0.16);
  --tt-bg-soft:     #262D3B;
  --tt-bg:          #1B2130;
  --tt-bg-page:     #0E1219;
  --tt-placeholder: #2B3343;
  --tt-surface:     #1B2130;
  --tt-bg-2:        #262D3B;
}

/* Там, где --tt-bg был белым текстом на цветной кнопке, — оставляем белый. */
html[data-theme="dark"] .tt-btn,
html[data-theme="dark"] .tt-gen__menu-item[aria-selected='true'],
html[data-theme="dark"] .tt-player__play,
html[data-theme="dark"] .tt-like__count,
html[data-theme="dark"] .tt-like__icon,
html[data-theme="dark"] .blog-ai-files__drop,
html[data-theme="dark"] .blog-ai-btn--glass,
html[data-theme="dark"] .blog-ai-tariff__badge,
html[data-theme="dark"] .tt-acc-buy,
html[data-theme="dark"] .tt-acc-card__buy {
  color: #FFFFFF;
}
/* Тёмная «outline»-кнопка после инверсии токенов — светлая, текст тёмный. */
html[data-theme="dark"] .tt-btn--outline { color: #11151E; }

/* --- Меню аккаунта (css/blog.css .tt-menu): пастельные плашки ----------- */
html[data-theme="dark"] .tt-menu                  { --tt-menu-bg: rgba(131, 122, 240, 0.20); --tt-menu-fg: #B9B3F7; }
html[data-theme="dark"] .tt-menu__group--create   { --tt-menu-bg: rgba(226, 110, 70, 0.20);  --tt-menu-fg: #F2A88B; }
html[data-theme="dark"] .tt-menu__group--help     { --tt-menu-bg: rgba(40, 180, 140, 0.20);  --tt-menu-fg: #74D9B8; }
html[data-theme="dark"] .tt-menu--drawer .tt-menu__list--tiles a.tt-menu__item { color: var(--tt-menu-fg); }
html[data-theme="dark"] .tt-menu--drawer .tt-menu__group + .tt-menu__group,
html[data-theme="dark"] .tt-menu--drawer .tt-menu__item--logout { border-top-color: var(--dk-border); }

/* --- Редактор Quill (модаль «Написать») -------------------------------- */
html[data-theme="dark"] .ql-toolbar.ql-snow,
html[data-theme="dark"] .ql-container.ql-snow { border-color: var(--dk-border); }
html[data-theme="dark"] .ql-editor { color: var(--dk-text); }
html[data-theme="dark"] .ql-editor.ql-blank::before { color: var(--dk-text-3); }
html[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--dk-text-2); }
html[data-theme="dark"] .ql-snow .ql-fill,
html[data-theme="dark"] .ql-snow .ql-stroke.ql-fill { fill: var(--dk-text-2); }
html[data-theme="dark"] .ql-snow .ql-picker { color: var(--dk-text-2); }
html[data-theme="dark"] .ql-snow .ql-picker-options,
html[data-theme="dark"] .ql-snow .ql-tooltip {
  background: var(--dk-surface-2);
  color: var(--dk-text);
  border-color: var(--dk-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .ql-snow .ql-tooltip input[type=text] {
  background: var(--dk-surface);
  color: var(--dk-text);
  border-color: var(--dk-border);
}
html[data-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-stroke,
html[data-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: #6FA8FF; }
html[data-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-fill,
html[data-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: #6FA8FF; }