/* ============================================================
   DS COMPONENT · Theme Button — пользовательская круглая icon-only кнопка темы
   Слой: assets/ds/components/  (независимый Design System)
   Источник истины: эталон §9 (иконки-кнопки, шаблон 9) + живая боевая .dc-header-theme.
   Круглая 28px, SVG moon/sun 14px (stroke 1.9), hover/active/focus-visible,
   смена иконки по data-theme (солнце=светлая, луна=тёмная).
   Отдельное представление функции темы; НЕ путать с админ-pill .ds-theme-switch.

   ДВА контекста:
   1) БАЗА (.ds-theme-button) — тема-зависимая (--ds-*), для обычных поверхностей
      (кабинет и др.): в светлой теме читается на светлом фоне.
   2) ШАПКА (header.dc-app-header .ds-theme-button) — ВСЕГДА-ТЁМНАЯ шапка → dark-locked
      литералы (rgba white-on-dark) + !important (вынужденный оверрайд стилей шапки).
      Снять !important/де-скоуп — вместе с чисткой глобальных !important шапки.

   Публичный API:
     .ds-theme-button                — button[type=button][data-theme-toggle]
     .ds-theme-button__ic            — svg-иконка
     .ds-theme-button__moon / __sun  — показ по теме
   ============================================================ */

/* ---- БАЗА (тема-зависимая, работает на любой поверхности) ---- */
.ds-theme-button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  flex:0 0 auto;
  padding:0;
  border-radius:50%;
  border:1px solid var(--ds-btn-bd);
  background:var(--ds-btn-bg);
  color:var(--ds-ink);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.ds-theme-button:hover{
  background:var(--ds-btn-bg-hover);
  border-color:var(--ds-btn-bd-hover);
}
.ds-theme-button:active{transform:scale(.94)}
.ds-theme-button:focus-visible{
  outline:2px solid var(--ds-brand-2);outline-offset:2px;
}
.ds-theme-button__ic{display:block;pointer-events:none}
.ds-theme-button svg{width:14px;height:14px}
.ds-theme-button__sun{display:none}
html[data-theme="light"] .ds-theme-button__moon{display:none}
html[data-theme="light"] .ds-theme-button__sun{display:block}

/* ---- ШАПКА (всегда тёмная) — dark-locked оверрайд ---- */
header.dc-app-header .ds-theme-button{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:28px!important;height:28px!important;
  flex:0 0 auto!important;
  padding:0!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.06)!important;
  color:#e8edf6!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease!important;
}
header.dc-app-header .ds-theme-button:hover{
  background:rgba(255,255,255,.12)!important;
  border-color:rgba(255,255,255,.24)!important;
}
header.dc-app-header .ds-theme-button:active{transform:scale(.94)!important}
header.dc-app-header .ds-theme-button:focus-visible{
  outline:2px solid var(--ds-brand-2)!important;outline-offset:2px!important;
}
header.dc-app-header .ds-theme-button__ic{display:block!important;pointer-events:none!important}
header.dc-app-header .ds-theme-button svg{width:14px!important;height:14px!important}
header.dc-app-header .ds-theme-button__sun{display:none!important}
html[data-theme="light"] header.dc-app-header .ds-theme-button__moon{display:none!important}
html[data-theme="light"] header.dc-app-header .ds-theme-button__sun{display:block!important}

/* Кастомный tooltip шапки (не системный title) — hover/focus. Временно здесь; уедет в DS Tooltip. */
header.dc-app-header .ds-theme-button[data-tip]::after{
  content:attr(data-tip);
  position:absolute!important;top:calc(100% + 8px)!important;right:0!important;
  white-space:nowrap!important;
  padding:5px 9px!important;border-radius:8px!important;
  background:rgba(12,16,26,.96)!important;color:#e8edf6!important;
  font:500 12px/1.2 -apple-system,system-ui,sans-serif!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.4)!important;
  opacity:0!important;transform:translateY(-3px)!important;pointer-events:none!important;
  transition:opacity .14s ease,transform .14s ease!important;
  z-index:60!important;
}
header.dc-app-header .ds-theme-button[data-tip]:hover::after,
header.dc-app-header .ds-theme-button[data-tip]:focus-visible::after{
  opacity:1!important;transform:translateY(0)!important;
}