/* ============================================================================
   THEME SWITCH — общий переключатель оформления
   ----------------------------------------------------------------------------
   Разметка (любая страница):
     <button type="button" class="theme-switch" data-theme-switch id="theme-switch" ...>
       <span class="theme-switch-track"><span class="theme-switch-thumb"></span></span>
       <span class="theme-switch-text">Тема</span>
     </button>

   Поведение — js/Ts/theme_switch.js (TS_ThemeSwitch): переключает атрибут
   [theme='dark'] на <html> через TS_Global.WebBrowser.DarkMode и класс .is-dark.

   Классы оформления:
     .theme-switch            корень (кнопка)
     .theme-switch-track      дорожка
     .theme-switch-thumb      кружок с иконкой ☀/☾
     .theme-switch-text       подпись
     .is-dark                 тёмная тема включена
     .theme-switch--compact   только дорожка, без подписи

   Стили сознательно не зависят от переменных конкретной страницы (--auth-*),
   а используют общие токены темы из vars.css, чтобы компонент можно было
   ставить где угодно.
   ========================================================================== */

.theme-switch {
    --tsw-border: var(--border-color, #e0e0e0);
    --tsw-text: var(--fore-color, #373737);
    --tsw-track-bg: color-mix(in srgb, var(--fore-color, #373737) 8%, transparent);
    --tsw-track-border: color-mix(in srgb, var(--fore-color, #373737) 22%, transparent);
    --tsw-thumb-bg: var(--theme-background-color, #ffffff);
    --tsw-accent: var(--theme-color-1, #b8860b);
    --tsw-focus: color-mix(in srgb, var(--theme-color-1, #b8860b) 35%, transparent);

    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 10px 0 3px;
    box-sizing: border-box;
    border: 1px solid var(--tsw-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-background-color, #ffffff) 55%, transparent);
    color: var(--tsw-text);
    font: inherit;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.theme-switch:hover {
    border-color: color-mix(in srgb, var(--fore-color, #373737) 40%, transparent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.theme-switch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--tsw-focus);
}

.theme-switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--tsw-track-bg);
    border: 1px solid var(--tsw-track-border);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.theme-switch-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tsw-thumb-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    font-size: 10px;
    line-height: 1;
    transition: transform 0.25s ease, background 0.25s ease;
}

.theme-switch-thumb::before {
    content: "☀";
    color: #b8860b;
}

.theme-switch.is-dark .theme-switch-thumb {
    transform: translateX(14px);
}

.theme-switch.is-dark .theme-switch-thumb::before {
    content: "☾";
    color: #ffab00;
}

.theme-switch.is-dark .theme-switch-track {
    background: color-mix(in srgb, var(--tsw-accent) 28%, transparent);
    border-color: color-mix(in srgb, var(--tsw-accent) 45%, transparent);
}

.theme-switch-text {
    white-space: nowrap;
}

/* Компактный вариант: только дорожка */
.theme-switch--compact {
    padding: 0 3px;
}

.theme-switch--compact .theme-switch-text {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .theme-switch,
    .theme-switch-track,
    .theme-switch-thumb {
        transition: none !important;
    }
}