/* Тема «Терминал» (SiteTheme::TERMINAL) — надстройка над тёмной темой:
   у <body> классы dark terminal, поэтому все body.dark-правила страниц уже
   действуют, а здесь только то, чем «Терминал» от них отличается.
   Стилистика торгового терминала: графит вместо синевы, один фирменный
   акцент — бирюза логотипа, все цифры моноширинные, чёткие углы, тонкие
   линии. Селекторы начинаются с body.dark.terminal: так они перебивают
   body.dark-правила независимо от порядка подключения — часть страниц
   держит их во встроенных <style> ниже общих стилей. */

/* Шрифты лежат у нас (assets/fonts, лицензия OFL) и скачиваются только в
   этой теме: в других ни одно правило на них не ссылается. */
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../../fonts/onest-cyrillic-wght-normal-omZrnh8.woff2") format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../../fonts/onest-latin-wght-normal-OX8m3S5.woff2") format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url("../../fonts/jetbrains-mono-cyrillic-wght-normal-NgJXiL4.woff2") format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url("../../fonts/jetbrains-mono-latin-wght-normal-qI6BF9f.woff2") format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.dark.terminal {
    --zg-bg: #0b0d10;
    --zg-surface: #101317;
    --zg-surface-2: #151920;
    --zg-line: rgba(255, 255, 255, 0.065);
    --zg-line-strong: rgba(255, 255, 255, 0.11);
    --zg-text: #e6e9ee;
    --zg-muted: #8a929e;
    --zg-cyan: #19e3f0;
    --zg-cyan-soft: rgba(25, 227, 240, 0.12);
    --zg-sans: 'Onest', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --zg-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    /* Пять уровней графита от фона до заметной рамки. Их же ждут
       var(--tm-…, <цвет тёмной темы>) в *-dark.css: в тёмной теме этих
       переменных нет и действует исходный цвет, здесь — графит той же
       светлоты. */
    --tm-bg: var(--zg-bg);
    --tm-surface: var(--zg-surface);
    --tm-surface-2: var(--zg-surface-2);
    --tm-line: #1d222a;
    --tm-line-strong: #262c35;
    --primary-color: var(--tm-surface);
    --secondary-color: var(--tm-surface);
    --accent-color: #0891b2;
    --hover-color: var(--tm-surface-2);
    /* Палитра тёмной темы (layout/main-layout-dark.css) — в графит: так
       карточки, панели и рамки всех страниц переходят в «Терминал» без
       правил под каждую страницу. */
    --dk-bg: var(--tm-bg);
    --dk-panel: var(--tm-surface);
    --dk-card: var(--tm-surface);
    --dk-raised: var(--tm-surface-2);
    --dk-raised-alt: var(--tm-surface-2);
    --dk-soft: var(--tm-surface-2);
    --dk-soft-alt: var(--tm-surface-2);
    --dk-control: var(--tm-surface-2);
    --dk-line: var(--tm-line);
    --dk-edge: var(--tm-line);
    --dk-hover: var(--tm-line);
    --dk-hover-alt: #232831;
    --dk-edge-strong: var(--tm-line-strong);
    /* Базовые переменные Bootstrap: в тёмной теме они остались светлыми,
       поэтому не переопределённые ею карточки, таблицы, меню и окна
       Bootstrap были белыми или с текстом #212529 на тёмном фоне. */
    --bs-body-bg: var(--tm-surface);
    --bs-body-bg-rgb: 16, 19, 23;
    --bs-body-color: var(--zg-text);
    --bs-body-color-rgb: 230, 233, 238;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: var(--zg-muted);
    --bs-secondary-color-rgb: 138, 146, 158;
    --bs-secondary-bg: var(--tm-surface-2);
    --bs-tertiary-color: rgba(230, 233, 238, 0.5);
    --bs-tertiary-bg: var(--tm-surface-2);
    --bs-border-color: var(--tm-line);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
    --bs-link-color: var(--zg-cyan);
    --bs-link-color-rgb: 25, 227, 240;
    --bs-link-hover-color: #5ff0f7;
    --bs-link-hover-color-rgb: 95, 240, 247;
    background-color: var(--zg-bg);
    color: var(--zg-text);
    font-variant-numeric: tabular-nums;
}

/* Каркас и элементы, которые задают шрифт сами, — на Onest. */
body.dark.terminal,
body.dark.terminal .main-content,
body.dark.terminal .sidebar,
body.dark.terminal .header,
body.dark.terminal .form-control,
body.dark.terminal .form-select,
body.dark.terminal button {
    font-family: var(--zg-sans);
}

/* ---- Шапка ---- */

body.dark.terminal .header {
    background-color: var(--zg-surface);
    border-bottom: 1px solid var(--zg-line);
    box-shadow: none;
}

body.dark.terminal .header-title {
    font-family: var(--zg-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--zg-muted);
}

body.dark.terminal .logo-gradient {
    padding: 7px;
    border-radius: 8px;
    box-shadow: none;
}

body.dark.terminal .logo-svg {
    width: 26px;
    height: 26px;
}

body.dark.terminal .logo-primary {
    font-family: var(--zg-mono);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

body.dark.terminal .logo-domain {
    font-family: var(--zg-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

body.dark.terminal .header-switch-btn,
body.dark.terminal .user-info {
    border-radius: 6px;
}

body.dark.terminal .header-switch-menu,
body.dark.terminal .user-dropdown {
    background-color: var(--zg-surface-2);
    border: 1px solid var(--zg-line-strong);
    border-radius: 8px;
}

body.dark.terminal .header-switch-option:hover,
body.dark.terminal .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark.terminal .header-switch-option.active {
    color: var(--zg-cyan);
}

body.dark.terminal .header-lines {
    --header-lines-rgb: 25, 227, 240;
}

/* ---- Сайдбар ---- */

body.dark.terminal .sidebar {
    --sidebar-accent: var(--zg-cyan);
    --sidebar-accent-2: var(--zg-cyan);
    --sidebar-active-bg: var(--zg-cyan-soft);
    background-color: var(--zg-surface);
    background-image: none;
    border-right: 1px solid var(--zg-line);
    box-shadow: none;
}

body.dark.terminal .sidebar-section-title {
    font-family: var(--zg-mono);
    font-weight: 500;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.32);
}

body.dark.terminal .sidebar-link {
    border-radius: 6px;
}

body.dark.terminal .sidebar-link.active {
    box-shadow: none;
}

/* ---- Контент: «миллиметровка» из точек вместо цветных пятен ---- */

body.dark.terminal .main-content {
    background-color: var(--zg-bg);
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.2px);
    background-size: 22px 22px;
}

/* ---- Поля и кнопки: одна высота, чёткие углы, бирюзовый фокус ---- */

body.dark.terminal .form-control,
body.dark.terminal .form-select {
    background-color: var(--zg-surface-2);
    border: 1px solid var(--zg-line-strong);
    border-radius: 6px;
    color: var(--zg-text);
}

body.dark.terminal .form-control:focus,
body.dark.terminal .form-select:focus {
    border-color: var(--zg-cyan);
    box-shadow: 0 0 0 3px rgba(25, 227, 240, 0.15);
}

/* Главная кнопка — бирюзовая с тёмным текстом: фирменный цвет логотипа. */
body.dark.terminal .btn-refresh,
body.dark.terminal .btn-primary {
    border: 0;
    border-radius: 6px;
    background: var(--zg-cyan);
    color: #031317;
    font-weight: 600;
    box-shadow: none;
}

body.dark.terminal .btn-refresh:hover,
body.dark.terminal .btn-primary:hover {
    background: #5ff0f7;
    color: #031317;
}

body.dark.terminal .btn-outline-primary {
    --bs-btn-color: var(--zg-cyan);
    --bs-btn-border-color: rgba(25, 227, 240, 0.5);
    --bs-btn-hover-color: #031317;
    --bs-btn-hover-bg: var(--zg-cyan);
    --bs-btn-hover-border-color: var(--zg-cyan);
    --bs-btn-active-color: #031317;
    --bs-btn-active-bg: var(--zg-cyan);
    --bs-btn-active-border-color: var(--zg-cyan);
    border-radius: 6px;
}

/* Светлые рамки шапок и подвалов карточек из стилей страниц (#f1f5f9). */
body.dark.terminal .card-header {
    border-bottom-color: var(--tm-line);
}

body.dark.terminal .card-footer {
    border-top-color: var(--tm-line);
}

/* Главная (main/index.html.twig) оформлена сама по себе, со светлыми
   карточками тарифов; её .btn-outline перебивает .btn из Bootstrap, а с
   переменными Bootstrap этой темы текст кнопки стал бы светлым на белом. */
body.dark.terminal .homepage .btn-outline {
    --bs-btn-color: #667eea;
    --bs-btn-hover-color: #fff;
}

body.dark.terminal #current-spread-info {
    background-color: var(--zg-cyan-soft);
}

body.dark.terminal .view-toggle {
    display: inline-flex;
    gap: 0;
    padding: 3px;
    background: var(--zg-surface-2);
    border: 1px solid var(--zg-line-strong);
    border-radius: 8px;
}

body.dark.terminal .view-btn {
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--zg-muted);
    font-family: var(--zg-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.dark.terminal .view-btn.active {
    background: var(--zg-cyan-soft);
    color: var(--zg-cyan);
}

/* Синий акцент тёмной темы — в бирюзу; на ней текст тёмный, белый не читается. */
body.dark.terminal .multi-select__count,
body.dark.terminal .notif-btn--primary {
    background: var(--zg-cyan);
    color: #031317;
}

body.dark.terminal .notif-btn--primary:hover {
    background: #5ff0f7;
}

body.dark.terminal .notif-btn--ghost {
    color: var(--zg-cyan);
    border-color: rgba(25, 227, 240, 0.5);
}

body.dark.terminal .multi-select__item:has(input:checked) {
    color: var(--zg-cyan);
}

body.dark.terminal .multi-select__item:has(input:checked)::before {
    border-color: var(--zg-cyan);
    background-color: var(--zg-cyan);
}

/* Метки сетей — строгие контурные, как в терминале, а не синие «таблетки». */
body.dark.terminal .chain-badge,
body.dark.terminal .coin-meta .chain {
    background: transparent;
    color: var(--zg-muted);
    box-shadow: inset 0 0 0 1px var(--zg-line-strong);
    border-radius: 4px;
    font-family: var(--zg-mono);
    letter-spacing: 0.04em;
}

/* Флажки Bootstrap светлые и в тёмной теме: здесь — графит, отмеченный —
   бирюза с тёмной галочкой. */
body.dark.terminal .form-check-input {
    background-color: var(--zg-surface-2);
    border-color: var(--tm-line-strong);
}

body.dark.terminal .form-check-input:focus {
    border-color: var(--zg-cyan);
    box-shadow: 0 0 0 3px rgba(25, 227, 240, 0.15);
}

body.dark.terminal .form-check-input:checked {
    background-color: var(--zg-cyan);
    border-color: var(--zg-cyan);
}

body.dark.terminal .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23031317' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

body.dark.terminal .form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238a929e'/%3e%3c/svg%3e");
}

body.dark.terminal .form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23031317'/%3e%3c/svg%3e");
}

/* Уведомления Bootstrap (.alert) светлые и в тёмной теме: здесь — тёмная
   плашка с цветной рамкой и светлым текстом того же оттенка. */
body.dark.terminal .alert-success {
    --bs-alert-bg: rgba(74, 222, 128, 0.08);
    --bs-alert-border-color: rgba(74, 222, 128, 0.3);
    --bs-alert-color: #86efac;
    --bs-alert-link-color: #bbf7d0;
}

body.dark.terminal .alert-info,
body.dark.terminal .alert-primary {
    --bs-alert-bg: rgba(25, 227, 240, 0.07);
    --bs-alert-border-color: rgba(25, 227, 240, 0.3);
    --bs-alert-color: #a5f3fc;
    --bs-alert-link-color: #cffafe;
}

body.dark.terminal .alert-warning {
    --bs-alert-bg: rgba(251, 191, 36, 0.08);
    --bs-alert-border-color: rgba(251, 191, 36, 0.3);
    --bs-alert-color: #fcd34d;
    --bs-alert-link-color: #fde68a;
}

body.dark.terminal .alert-danger {
    --bs-alert-bg: rgba(248, 113, 113, 0.08);
    --bs-alert-border-color: rgba(248, 113, 113, 0.3);
    --bs-alert-color: #fca5a5;
    --bs-alert-link-color: #fecaca;
}

body.dark.terminal .alert-secondary,
body.dark.terminal .alert-light,
body.dark.terminal .alert-dark {
    --bs-alert-bg: var(--zg-surface-2);
    --bs-alert-border-color: var(--tm-line-strong);
    --bs-alert-color: var(--zg-text);
    --bs-alert-link-color: var(--zg-cyan);
}

/* ---- Сканер спредов (pages/spread.css, components/cards.css) ---- */

body.dark.terminal .spread-header h1 small {
    font-family: var(--zg-mono);
    font-size: 0.8rem;
    color: var(--zg-muted);
}

body.dark.terminal .sort-control label,
body.dark.terminal .favourite-filter label,
body.dark.terminal .limit-control label,
body.dark.terminal .filter-label,
body.dark.terminal .filter-field label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--zg-muted);
}

body.dark.terminal .sort-control .form-select,
body.dark.terminal .favourite-filter .form-select,
body.dark.terminal .limit-control .form-select,
body.dark.terminal .spread-header .btn-refresh {
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.92rem;
}

/* Карточка: графитовая панель с бирюзовой чертой по верху — продолжение
   линий данных в шапке. */
body.dark.terminal .spread-card {
    position: relative;
    overflow: hidden;
    background: var(--zg-surface);
    border: 1px solid var(--zg-line);
    border-radius: 8px;
    box-shadow: none;
}

body.dark.terminal .spread-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--zg-cyan), rgba(25, 227, 240, 0) 70%);
    opacity: 0.7;
    pointer-events: none;
}

body.dark.terminal .spread-card:hover {
    border-color: rgba(25, 227, 240, 0.35);
    box-shadow: none;
}

body.dark.terminal .spread-card .card-header,
body.dark.terminal .spread-card .card-footer {
    background: transparent;
    border-color: var(--zg-line);
}

body.dark.terminal .spread-card .coin-meta .symbol,
body.dark.terminal .spread-card .coin-meta .chain {
    font-size: 0.72rem;
}

body.dark.terminal .spread-card .coin-meta .symbol {
    font-family: var(--zg-mono);
    letter-spacing: 0.04em;
}

/* Классы вроде .exchange-price есть и на главной (main/index.html.twig),
   поэтому правила карточки — только внутри .spread-card. */
body.dark.terminal .spread-card .spread-percentage .value,
body.dark.terminal .spread-card .volume-value,
body.dark.terminal .spread-card .max-position-value,
body.dark.terminal .spread-card .exchange-price,
body.dark.terminal .spread-card .card-footer .time,
body.dark.terminal .st-leg__price,
body.dark.terminal .st-exit,
body.dark.terminal .st-ext {
    font-family: var(--zg-mono);
}

/* Текущий спред — главная цифра карточки, он в фирменном цвете. */
body.dark.terminal .spread-card .spread-percentage-current .value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--zg-cyan);
}

body.dark.terminal .spread-card .spread-percentage-current .value.reverse {
    margin-left: 6px;
    color: var(--zg-text);
}

body.dark.terminal .spread-card .exchange-price {
    background: var(--zg-surface-2);
    border-radius: 4px;
}