/* assets/styles.css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* Weights from target */

:root { /* Dark Theme Vars - Adjusted based on feedback */
    /* --- Обновленные переменные для темной темы (синхронизация с Tailwind) --- */
    --bg-primary: hsl(220 13% 9%);    /* Tailwind: --background */
    --bg-secondary: hsl(220 13% 15%); /* Tailwind: --secondary (для шапки, меню dropdown) */
    --bg-panel: hsl(220 13% 11%);     /* Tailwind: --card (карточки, модальные окна) */
    --bg-highlight: hsl(220 13% 20%); /* Tailwind: --border (для ховера, подсветки) */
    --text-primary: hsl(220 9% 82%);  /* Tailwind: --foreground */
    --text-secondary: hsl(220 9% 45%);/* Tailwind: --muted-foreground */
    --border: hsl(220 13% 20%);       /* Tailwind: --border */
    --ring: hsl(217 91% 60%);         /* Tailwind: --ring (which is --primary) */
    --hover: hsl(220 13% 20%);        /* Используем --bg-highlight для ховера */

    /* ------------------------------------------- */

    /* Orderbook Colors - НЕ ТРОГАЕМ ЭТИ ЗНАЧЕНИЯ */
    --rgb-bid: 34, 197, 94;
    --rgb-ask: 239, 68, 68;
    --bid: hsl(142, 70%, 45%);
    --ask: hsl(358, 70%, 60%);
    --bid-bg: rgba(var(--rgb-bid), 0.11);
    --ask-bg: rgba(var(--rgb-ask), 0.11);
    --bid-bar: rgba(var(--rgb-bid), 0.18);
    --ask-bar: rgba(var(--rgb-ask), 0.18);
    --spread: hsl(45, 93%, 47%);
    /* ------------------------------------------- */

    /* Accents & Status - Обновляем основные */
    --accent: hsl(217 91% 60%);       /* Tailwind: --primary (для кнопок, активных вкладок) */
    --accent-dark: hsl(217 91% 50%);  /* Чуть темнее для некоторых состояний, если нужно */
    --green: hsl(145 63% 42%);        /* Tailwind: --profit */
    --red: hsl(0 63% 51%);            /* Tailwind: --loss */
    --yellow: hsl(38 92% 50%);        /* Tailwind: --warning */
    --blue: hsl(204 100% 50%);        /* Оставляем, если используется где-то специфично */
    --purple: #ae7bef;                /* Оставляем, если используется где-то специфично */

    /* Component Specific - Обновляем на основе новых базовых */
    --chart-bg: var(--bg-panel);
    --modal-header-bg: var(--bg-secondary);
    --modal-footer-bg: var(--bg-secondary);
    --input-bg: var(--bg-primary);    /* Tailwind: --background (т.к. --input в TW это border) */
    --input-border: var(--border);    /* Tailwind: --border / --input */
    --button-bg: var(--accent);       /* Используем новый --accent */
    --button-text: hsl(210 20% 98%);  /* Tailwind: --primary-foreground */
    --button-hover-bg: hsl(217 91% 55%); /* Затемненный --accent для ховера */
    --tab-active-bg: var(--bg-primary); /* Может быть var(--bg-panel) или var(--accent) в зависимости от дизайна */
    --tab-active-border: var(--accent); /* Используем новый --accent */
    --tab-inactive-text: var(--text-secondary);
    --table-header-bg: var(--bg-panel);
    --table-header-text: var(--text-secondary);
    --scrollbar-thumb: hsl(220 12% 25%);
    --scrollbar-track: var(--bg-primary);
    --scrollbar-thumb-hover: hsl(220 15% 70%);
    --tooltip-bg: var(--bg-panel);
    --tooltip-text: var(--text-primary);
    --tooltip-border: var(--border);

    /* Exchange Colors (Используются в Python и CSS) */
    --color-binance: hsla(64, 90%, 46%, 0.952);
    --color-bybit: hsla(36, 89%, 44%, 0.907);
    --color-okx: hsl(0, 0%, 42%);
    --color-gateio: hsla(186, 91%, 49%, 0.8);
    --color-bitget: hsla(204, 92%, 37%, 0.985);
    --color-mexc: hsla(240, 91%, 40%, 0.934);
    --color-kucoin: hsla(99, 84%, 35%, 0.977);
    --color-exchange-default: hsla(277, 85%, 51%, 0.7);

    /* Transitions & Shadows */
    --theme-transition-duration: 0.15s;
    --radius: 0.5rem;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.15), inset 0 1px 0 0 hsl(var(--border));
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.2),0 2px 4px -1px rgba(0,0,0,.12), inset 0 1px 0 0 hsl(var(--border));
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.2),0 4px 6px -2px rgba(0,0,0,.1), inset 0 1px 0 0 hsl(var(--border));
    --close-button-filter: invert(89%) sepia(6%) saturate(178%) hue-rotate(178deg) brightness(95%) contrast(86%);
}

.theme-light { /* Light Theme Vars - Синхронизация с Tailwind */
    --bg-primary: hsl(220 6% 88%);    /* Tailwind: --background */
    --bg-secondary: hsl(220 8% 82%);  /* Tailwind: --secondary */
    --bg-panel: hsl(220 8% 92%);      /* Tailwind: --card */
    --bg-highlight: hsl(220 8% 80%);  /* Tailwind: --input (или чуть светлее --secondary) */
    --text-primary: hsl(220 15% 15%); /* Tailwind: --foreground */
    --text-secondary: hsl(220 12% 45%);/* Tailwind: --muted-foreground */
    --border: hsl(220 10% 75%);       /* Tailwind: --border */
    --ring: hsl(220 18% 38%);         /* Tailwind: light --primary */
    --hover: hsl(220 8% 80%);         /* Используем --bg-highlight для ховера */

    /* Orderbook Colors - НЕ ТРОГАЕМ */
    --rgb-bid: 39, 174, 96;
    --rgb-ask: 217, 48, 37;
    --bid: hsl(142.1, 70.6%, 45.3%);
    --ask: hsl(0, 72.2%, 50.6%);
    --bid-bg: rgba(var(--rgb-bid), 0.07);
    --ask-bg: rgba(var(--rgb-ask), 0.07);
    --bid-bar: rgba(var(--rgb-bid), 0.12);
    --ask-bar: rgba(var(--rgb-ask), 0.12);
    --spread: hsl(45, 93%, 47%);
    /* ------------------------------------------- */

    /* Accents & Status - Обновляем основные */
    --accent: hsl(220 18% 38%);       /* Tailwind: light --primary */
    --accent-dark: hsl(220 18% 30%);  /* Чуть темнее для некоторых состояний */
    --green: hsl(145 63% 42%);        /* Tailwind: --profit (одинаковый для обеих тем) */
    --red: hsl(0 63% 51%);            /* Tailwind: --loss (одинаковый для обеих тем) */
    --yellow: hsl(38 40% 45%);        /* Tailwind: light --warning */
    --blue: hsl(204 100% 50%);
    --purple: #6f42c1;

    /* Component Specific - Обновляем на основе новых базовых */
    --chart-bg: var(--bg-panel);
    --modal-header-bg: var(--bg-secondary);
    --modal-footer-bg: var(--bg-secondary);
    --input-bg: hsl(220 8% 80%);      /* Tailwind: light --input */
    --input-border: var(--border);    /* Tailwind: light --border */
    --button-bg: var(--accent);       /* Используем новый --accent */
    --button-text: hsl(220 10% 95%);  /* Tailwind: light --primary-foreground */
    --button-hover-bg: hsl(220 18% 33%); /* Затемненный --accent для ховера */
    --tab-active-bg: var(--bg-primary);
    --tab-active-border: var(--accent);
    --tab-inactive-text: var(--text-secondary);
    --table-header-bg: var(--bg-panel);
    --table-header-text: var(--text-secondary);
    --scrollbar-thumb: hsl(0 0% 80%);
    --scrollbar-track: var(--bg-primary);
    --scrollbar-thumb-hover: hsl(0 0% 65%);
    --tooltip-bg: var(--bg-primary);
    --tooltip-text: var(--text-primary);
    --tooltip-border: var(--border);

    /* Exchange Colors (same as dark, opacity handled by hsla) */
    --color-binance: hsla(64, 90%, 46%, 0.952);
    --color-bybit: hsla(36, 89%, 44%, 0.907);
    --color-okx: hsl(0, 0%, 42%);
    --color-gateio: hsla(186, 91%, 49%, 0.8);
    --color-bitget: hsla(204, 92%, 37%, 0.985);
    --color-mexc: hsla(240, 91%, 40%, 0.934);
    --color-kucoin: hsla(99, 84%, 35%, 0.977);
    --color-exchange-default: hsla(277, 85%, 51%, 0.7);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
    --close-button-filter: none;

    /* Окрашивание названий бирж в таблицах */
    .dash-table-container table td span.exchange-name-colored {
    /* Применяем цвет из переменной, !important для гарантии */
    color: var(--color-exchange-current) !important;
    /* font-weight: 500; */ /* Можно убрать, если стиль есть в inline */
    }

    /* Окрашивание точек на графиках (в аннотациях) */
    /* Примечание: Селектор может зависеть от структуры аннотации Plotly,
        возможно, понадобится .annotation-text span.exchange-dot-colored */
    .annotation-text span.exchange-dot-colored, /* Стандартный класс аннотации */
    div[data-testid="annotation-text"] span.exchange-dot-colored { /* Иногда Plotly использует data-testid */
        /* Применяем цвет из переменной, !important для гарантии */
        color: var(--color-exchange-current) !important;
    }

    /* --- КОНЕЦ НОВЫХ ПРАВИЛ --- */
}

/* Base styles */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: var(--border); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: 'Inter', sans-serif; height: 100%; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-primary); color: var(--text-primary); margin: 0; padding: 0; min-height: 100vh; height: 100%; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; transition: background-color var(--theme-transition-duration) ease, color var(--theme-transition-duration) ease; }
body.loading { overflow: hidden; }
#app-container { min-height: 100vh; height: 100%; display: flex; flex-direction: column; }

/* Global transition application */
.card, .card-header, .card-body, .modal-content, .modal-header, .modal-footer, input, select, textarea, .btn, .nav-link, .dash-table-container table td, .dash-table-container table th, .custom-control-label::before, .Select-control, .Select-menu-outer, .tabs-trigger {
    transition: background-color var(--theme-transition-duration) ease, color var(--theme-transition-duration) ease, border-color var(--theme-transition-duration) ease, box-shadow var(--theme-transition-duration) ease;
}
/* Specific transitions for orderbook */
.book-row, .book-row-bar-container, .book-row-bar-container span, .orderbook-side-container span, .orderbook-side-container div {
    transition: background-color var(--theme-transition-duration) ease, color var(--theme-transition-duration) ease, border-color var(--theme-transition-duration) ease, opacity var(--theme-transition-duration) ease, width 0.08s ease-out;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* Dropdown (Dash Core Components / Plotly Select) */
/* Стиль самого поля ввода (оставляем как есть) */
.Select-control {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: calc(var(--radius) - 2px);
    height: 2.25rem;
    font-size: 0.875rem;
    box-shadow: none !important;
}
/* Применяем стили только к инпуту */
.Select-control {
     background-color: var(--input-bg) !important;
     height: 2.25rem;
}
.Select-control:hover { border-color: var(--ring) !important; }
.Select-value-label, .Select--single > .Select-control .Select-value { color: var(--text-primary) !important; line-height: 2rem; }
.Select-input > input { color: var(--text-primary) !important; }
.Select-placeholder { color: var(--text-secondary) !important; line-height: 2rem; }

/* Стиль самого поля ввода (оставляем как есть) */
.Select-control {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: calc(var(--radius) - 2px);
    height: 2.25rem;
    font-size: 0.875rem;
    box-shadow: none !important;
}
/* ... (стили для :hover, value, placeholder как были) ... */

/* --- ИЗМЕНЕНИЕ: Фон самого выпадающего меню --- */
/* Повышаем специфичность, добавляя родительский класс dash-dropdown */
div.dash-dropdown > div > .Select-menu-outer {
    /* background-color: var(--bg-panel) !important; */ /* БЫЛО */
    background-color: var(--bg-secondary) !important; /* СТАЛО: ЕЩЕ ТЕМНЕЕ */
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    margin-top: 4px !important;
    box-shadow: var(--shadow-md);
    z-index: 1050;
}
/* Дополнительное правило на всякий случай */
.Select-menu-outer {
    background-color: var(--bg-secondary) !important;
}
/* --- КОНЕЦ ИЗМЕНЕНИЯ --- */

/* --- ИЗМЕНЕНИЕ: Фон опций внутри меню --- */
div.dash-dropdown > div > .Select-menu-outer .VirtualizedSelectOption {
    /* background-color: var(--bg-panel) !important; */ /* БЫЛО */
    background-color: var(--bg-secondary) !important; /* СТАЛО: ЕЩЕ ТЕМНЕЕ */
    color: var(--text-primary) !important;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--border); /* Добавим разделитель между опциями */
}
.Select-menu-outer .VirtualizedSelectOption:last-child {
    border-bottom: none; /* Убираем у последней опции */
}
/* --- КОНЕЦ ИЗМЕНЕНИЯ --- */

/* Стиль опции при наведении (используем --bg-highlight, он светлее --bg-secondary) */
div.dash-dropdown > div > .Select-menu-outer .VirtualizedSelectOption.is-focused {
    background-color: var(--bg-highlight) !important;
    color: var(--text-primary) !important;
}

/* Стиль выбранной опции (оставляем --accent) */
div.dash-dropdown > div > .Select-menu-outer .VirtualizedSelectOption.is-selected {
    background-color: var(--accent) !important;
    color: var(--button-text) !important;
    font-weight: 500;
}
.Select-arrow { border-color: var(--text-secondary) transparent transparent !important; border-width: 5px 5px 0; right: 10px; }
.Select.is-open > .Select-control .Select-arrow { border-color: transparent transparent var(--text-secondary) !important; border-width: 0 5px 5px; }

/* Input (General) */
input[type="text"], input[type="number"], input[type="search"], textarea, select {
    display: flex; height: 2.25rem; width: 100%; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--input-border); background-color: var(--input-bg); padding: 0.375rem 0.75rem; font-size: 0.875rem; color: var(--text-primary); box-shadow: none; transition: border-color var(--theme-transition-duration) ease, box-shadow var(--theme-transition-duration) ease;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: 1; }
input.form-control-sm, select.form-select-sm, .input-group-sm > .form-control, .input-group-sm > .input-group-text { height: 2rem; padding: 0.25rem 0.5rem; font-size: 0.8rem; border-radius: calc(var(--radius) - 4px); }
.input-group-text { background-color: var(--bg-secondary); color: var(--text-secondary); border-color: var(--input-border); font-size: 0.8rem; border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px); }
.input-group > .form-control:not(:first-child) { border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0; }
.input-group:focus-within { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
.input-group > .form-control:focus { box-shadow: none; border-color: var(--input-border); }

/* Button (dbc.Button mapped to target) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; border-radius: calc(var(--radius) - 2px); font-size: 0.875rem; font-weight: 500; transition: all var(--theme-transition-duration) ease; cursor: pointer; padding: 0.5rem 1rem; border: 1px solid transparent; line-height: 1.25; height: 2.25rem; }
.btn:focus, .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: none; }
.btn.disabled, .btn:disabled { cursor: not-allowed; opacity: 0.5; }
.btn-primary { background-color: var(--button-bg); color: var(--button-text); border-color: var(--button-bg); }
.btn-primary:hover { opacity: 0.9; background-color: var(--button-bg); border-color: var(--button-bg); }
.btn-secondary { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); }
.btn-secondary:hover { opacity: 0.8; background-color: var(--bg-secondary); border-color: var(--border); }
.btn-outline-primary { color: var(--button-bg); border-color: var(--button-bg); background-color: transparent; }
.btn-outline-primary:hover { background-color: var(--button-bg); color: var(--button-text); }
.btn-outline-secondary { color: var(--text-primary); border-color: var(--border); background-color: transparent; }
.btn-outline-secondary:hover { background-color: var(--bg-highlight); }
.btn-icon { padding: 0; width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.btn-icon.btn-sm { width: 2rem; height: 2rem; }
.btn-sm { height: 2rem; padding: 0.25rem 0.75rem; font-size: 0.8rem; }

/* Header adjustments */
header .nav-tabs { background-color: transparent; padding: 0; height: 100%; margin: 0 1rem; border-bottom: none; flex-grow: 1; display: flex; justify-content: center; align-items: center; }
header .nav-tabs .nav-item { margin-bottom: 0; }
header .nav-tabs .nav-link { height: 100%; border-radius: 0; border-bottom: 3px solid transparent; margin: 0 0.5rem; padding: 0 1rem; background-color: transparent !important; box-shadow: none !important; color: var(--tab-inactive-text); font-size: 0.875rem; font-weight: 500; display: inline-flex; align-items: center; border-top: none; border-left: none; border-right: none; }
header .nav-tabs .nav-link:hover { color: var(--text-primary); border-bottom-color: var(--border); background: none; }
header .nav-tabs .nav-link.active { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--accent); background-color: transparent !important; box-shadow: none !important; }

/* Content Area */
#tab-content-area { flex-grow: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 1rem; }
#tab-content-area > .container-fluid { flex-grow: 1; display: flex; flex-direction: column; height: 100%; }
#tab-content-area > .container-fluid > .row { flex-grow: 1; height: 100%; }

/* Ensure Col also flexes */
.col, .col-lg-6, .col-lg-7, .col-lg-5, .col-12, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-true { display: flex; flex-direction: column; }

/* Graph */
.dash-graph { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }

/* Fade-in */
@keyframes fadeIn { from { opacity: 0; }} to { opacity: 1; } .fade-in { animation: fadeIn 0.3s ease-in-out; }

/* === Переопределение для СВЕТЛОЙ ТЕМЫ === */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
    --accent: var(--accent) !important;
    --border: var(--border) !important;
    --text-color: var(--text-primary) !important;
    --hover: var(--bg-highlight) !important;
    --faded-text-header: var(--text-secondary) !important;
    --selected-background: hsla(var(--ask-hsl), 0.15) !important;
    --background-color-ellipses: var(--bg-panel) !important;
    --faded-text: var(--text-secondary) !important;
    --faded-dropdown: var(--bg-secondary) !important;
    --muted: var(--text-secondary) !important;
    background-color: var(--bg-panel) !important; /* Для фона тоже */
}

.theme-light .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table th {
     background-color: var(--table-header-bg);
}
/* --- Конец переопределения переменных --- */


/* --- Стили, которые НЕ зависят от переменных DataTable (или для подстраховки) --- */

/* Убираем лишние границы, оставляем только нижнюю у td/th */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table td,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table th {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    /* Нижняя граница теперь должна управляться переменной --border */
    /* border-bottom: 1px solid var(--border) !important; */ /* Можно закомментировать */
}
/* Убираем границу у последней строки */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tr:last-child td {
    border-bottom: none !important;
}

/* Стили заголовков */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table th {
    /* Свойства, управляемые переменными, закомментированы */
    /* background-color: var(--table-header-bg); */
    /* color: var(--faded-text-header); */ /* Используется переменная DataTable */
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: normal;
    padding: 0.5rem 0.75rem;
    text-align: left !important;
    vertical-align: middle;
    position: sticky !important; /* Оставляем */
    top: 0 !important;
    z-index: 5 !important;
}

/* Стили ячеек */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table td {
    background-color: transparent; /* Явно прозрачный фон */
    /* color: var(--text-color); */ /* Используется переменная DataTable */
    font-weight: 400;
    font-size: 0.8rem;
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    overflow: hidden; /* Оставляем */
    text-overflow: ellipsis; /* Оставляем */
}

/* Стиль строки при наведении (должен управляться переменной --hover) */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tr:hover td {
    background-color: var(--hover); /* Используем переменную DataTable */
}

/* П.3: Раскраска процентов (классы из Python) */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table td.positive-value {
    color: var(--green) !important; /* !important для перекрытия --text-color */
    font-weight: 500 !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table td.negative-value {
    color: var(--red) !important; /* !important для перекрытия --text-color */
    font-weight: 500 !important;
}

/* П.1: Скрытие кнопок */
.dash-table-container .dash-filter-actions,
.dash-table-container .column-actions,
.dash-table-container .dash-spreadsheet-header button {
    display: none !important;
}

/* Стили стрелок сортировки (оставляем) */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table .dash-header { position: relative; padding-right: 1.25rem; cursor: pointer; }
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table .dash-header:hover { color: var(--text-primary); }
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table .dash-header::after,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table .dash-header::before { content: ''; position: absolute; right: 0.5rem; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: 0.4; transition: opacity 0.2s ease; }
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table .dash-header::before { bottom: 55%; border-bottom: 4px solid var(--text-secondary); }
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table .dash-header::after { top: 55%; border-top: 4px solid var(--text-secondary); }
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table .dash-header.dash-filter--sort.sorted { color: var(--text-primary); }
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table .dash-header.dash-filter--sort.sorted::before,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table .dash-header.dash-filter--sort.sorted::after { opacity: 1; }
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table .dash-header.dash-filter--sort.sorted[data-dash-sort_direction="asc"]::after { opacity: 0.4; }
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table .dash-header.dash-filter--sort.sorted[data-dash-sort_direction="asc"]::before { border-bottom-color: var(--accent); opacity: 1; }
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table .dash-header.dash-filter--sort.sorted[data-dash-sort_direction="desc"]::before { opacity: 0.4; }
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table .dash-header.dash-filter--sort.sorted[data-dash-sort_direction="desc"]::after { border-top-color: var(--accent); opacity: 1; }


/* Switch General (Using Bootstrap's structure + Custom) */
.custom-switch { padding-left: 2.5rem; min-height: 1.5rem; display: inline-flex; align-items: center; position: relative; }
.custom-control-label { position: relative; vertical-align: top; margin-bottom: 0; padding-top: .15rem; }
.custom-control-input { position: absolute; left: 0; z-index: -1; width: 1rem; height: 1.25rem; opacity: 0; }
.custom-switch .custom-control-label::before {
    pointer-events: all; cursor: pointer; content: ""; position: absolute; top: .25rem; left: -2.5rem; display: block; width: 2.25rem; height: 1.25rem; background-color: var(--input-bg); border: 1px solid var(--border); border-radius: 9999px; transition: background-color var(--theme-transition-duration) ease, border-color var(--theme-transition-duration) ease; box-shadow: none;
}
.custom-switch .custom-control-label::after {
    content: ""; position: absolute; top: calc(.25rem + 2px); left: calc(-2.5rem + 2px); display: block; width: calc(1.25rem - 4px); height: calc(1.25rem - 4px); background-color: #fff; border-radius: 9999px; box-shadow: 0 1px 3px rgba(0,0,0,.1); transition: transform .2s ease, background-color var(--theme-transition-duration) ease;
}
.theme-dark .custom-switch .custom-control-label::after { background-color: hsl(210 40% 98%); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--accent); border-color: var(--accent); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(1rem); background-color: #fff; }
.theme-dark .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: hsl(210 40% 98%); }
.custom-switch .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem hsla(var(--ring), 0.25); }
.custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--ring); }

/* --- UPDATED SWITCH STYLES --- */
.exchange-toggles .form-check {
  padding-left: 0;
  margin-right: 5px;
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  vertical-align: middle;
  position: relative; /* Добавляем для позиционирования псевдоэлементов */
}

.exchange-toggles .form-check-input {
  /* Оставляем скрытым */
  opacity: 0;
  position: absolute;
  width: 1.75rem; /* Задаем размер, чтобы клик работал */
  height: 1rem;
  z-index: 1; /* Ставим поверх псевдоэлемента */
  cursor: pointer; /* Показываем курсор */
  margin: 0; /* Убираем отступы */
  top: 50%; /* Центрируем */
  left: 0;
  transform: translateY(-50%);
}

.show-hide{
    display: none;;
}
.exchange-toggles .form-check-label {
   padding-left: 32px;
   padding-top: 8px;
   font-size: 0.9rem;
   font-weight: 500;
   line-height: 1.25rem;
   position: relative;
   cursor: pointer;
   user-select: none;
   display: inline-block;
   min-width: 2.5em;
   color: var(--text-primary);
   z-index: 0; /* Ниже инпута */
}

/* Style the track - рисуем под инпутом */
.exchange-toggles .form-check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1rem;
  background-color: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 9999px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  z-index: 0; /* Под инпутом и thumb */
}

/* Style the thumb - рисуем под инпутом */
.exchange-toggles .form-check::after {
  content: "";
  position: absolute;
  left: 1.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  background-color: #fff;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  transition: transform 0.2s ease;
  z-index: 0; /* Под инпутом */
}

.theme-dark .exchange-toggles .form-check::after {
  background-color: hsl(210 40% 98%);
}

/* Checked state: Thumb movement */
.exchange-toggles .form-check-input:checked ~ .form-check-label::after, /* Fallback if direct doesn't work */
.exchange-toggles .form-check-input:checked::after { /* Trying direct :checked */
  transform: translate(0.75rem, -50%);
}
/* Applying thumb movement based on input state relative to the parent */
.exchange-toggles .form-check-input:checked + label + .form-check::after { /* This might be needed if structure changes */
    transform: translate(0.75rem, -50%);
}
/* Direct targeting of parent when input is checked */
.exchange-toggles .form-check:has(.form-check-input:checked)::after {
    transform: translate(0.75rem, -50%);
}


/* --- Checked state: Track color by exchange (using parent :has) --- */
/* Это самый современный способ, может не работать в старых браузерах, но лучший для этой структуры */
.exchange-toggles .form-check.switch-binance:has(.form-check-input:checked)::before { background-color: var(--color-binance); border-color: var(--color-binance); }
.exchange-toggles .form-check.switch-bybit:has(.form-check-input:checked)::before { background-color: var(--color-bybit); border-color: var(--color-bybit); }
.exchange-toggles .form-check.switch-okx:has(.form-check-input:checked)::before { background-color: var(--color-okx); border-color: var(--color-okx); }
.exchange-toggles .form-check.switch-gateio:has(.form-check-input:checked)::before { background-color: var(--color-gateio); border-color: var(--color-gateio); }
.exchange-toggles .form-check.switch-bitget:has(.form-check-input:checked)::before { background-color: var(--color-bitget); border-color: var(--color-bitget); }
.exchange-toggles .form-check.switch-mexc:has(.form-check-input:checked)::before { background-color: var(--color-mexc); border-color: var(--color-mexc); }
.exchange-toggles .form-check.switch-kucoin:has(.form-check-input:checked)::before { background-color: var(--color-kucoin); border-color: var(--color-kucoin); }
/* --- END UPDATED SWITCH STYLES --- */

/* Orderbook Header (created in JS) */
.orderbook-header {
    display: flex;
    justify-content: space-between;
    padding: 2px 8px; /* Match JS */
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    flex-shrink: 0; /* Prevent header shrinking */
}


/* Switch Exchange Colors - Применяются к ::before треку */
/* П.8: Обновленные селекторы для цвета переключателей на вкладке Рейтинг */
.switch-binance .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-binance); border-color: var(--color-binance); }
.switch-bybit .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-bybit); border-color: var(--color-bybit); }
.switch-okx .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-okx); border-color: var(--color-okx); }
.switch-gateio .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-gateio); border-color: var(--color-gateio); }
.switch-bitget .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-bitget); border-color: var(--color-bitget); }
.switch-mexc .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-mexc); border-color: var(--color-mexc); }
.switch-kucoin .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-kucoin); border-color: var(--color-kucoin); }
.ranking-switch-binance .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-binance); border-color: var(--color-binance); }
.ranking-switch-bybit .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-bybit); border-color: var(--color-bybit); }
.ranking-switch-okx .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-okx); border-color: var(--color-okx); }
.ranking-switch-gateio .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-gateio); border-color: var(--color-gateio); }
.ranking-switch-bitget .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-bitget); border-color: var(--color-bitget); }
.ranking-switch-mexc .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-mexc); border-color: var(--color-mexc); }
.ranking-switch-kucoin .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-kucoin); border-color: var(--color-kucoin); }


/* Tabs (Outside Header) */
.nav-tabs:not(header .nav-tabs) { border-bottom: none; display: inline-flex; background-color: var(--bg-secondary); padding: 0.25rem; border-radius: calc(var(--radius) - 2px); height: 2.5rem; align-items: center; }
.nav-tabs:not(header .nav-tabs) .nav-item { margin-bottom: 0; margin-right: 0; }
.nav-tabs:not(header .nav-tabs) .nav-link { color: var(--tab-inactive-text); background-color: transparent; border: none; border-radius: calc(var(--radius) - 4px); padding: 0.25rem 0.75rem; font-size: 0.875rem; font-weight: 500; line-height: 1.5; height: 2rem; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; margin: 0 0.125rem; transition: all var(--theme-transition-duration) ease; }
.nav-tabs:not(header .nav-tabs) .nav-link:hover { color: var(--text-primary); background-color: transparent; }
.nav-tabs:not(header .nav-tabs) .nav-link.active { color: var(--text-primary); background-color: var(--tab-active-bg); border: none; box-shadow: var(--shadow-sm); }
.nav-tabs:not(header .nav-tabs) .nav-link:focus, .nav-tabs:not(header .nav-tabs) .nav-link.active:focus { outline: none; box-shadow: var(--shadow-sm), 0 0 0 2px var(--ring); }


/* Tooltip */
.tooltip-inner { background-color: var(--tooltip-bg); color: var(--tooltip-text); border: 1px solid var(--tooltip-border); padding: 0.375rem 0.75rem; font-size: 0.8rem; max-width: 300px; box-shadow: var(--shadow-md); border-radius: calc(var(--radius) - 2px); }
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before { border-top-color: var(--tooltip-border); }
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before { border-right-color: var(--tooltip-border); }
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: var(--tooltip-border); }
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before { border-left-color: var(--tooltip-border); }

/* Modal */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; z-index: 1050; }
.modal.show { display: block; }
.modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.7); z-index: 1040; }
.modal-backdrop.fade { opacity: 0; transition: opacity 0.15s linear; }
.modal-backdrop.show { opacity: 0.5; }
.modal-dialog { position: relative; margin: 1.75rem auto; width: auto; pointer-events: none; }
.modal.show .modal-dialog { transform: translate(0, 0); pointer-events: auto; }
@media (min-width: 576px) { .modal-dialog { max-width: 500px; margin: 1.75rem auto; } }
@media (min-width: 992px) { .modal-lg, .modal-xl { max-width: 800px; } }
@media (min-width: 1200px) { .modal-xl { max-width: 1140px; } }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: var(--bg-panel); color: var(--text-primary); border: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: var(--radius); outline: 0; max-height: calc(100vh - 3.5rem); }
.modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); background-color: var(--modal-header-bg); border-top-left-radius: calc(var(--radius) - 1px); border-top-right-radius: calc(var(--radius) - 1px); }
.modal-title { color: var(--text-primary); font-size: 1.125rem; font-weight: 600; margin-bottom: 0; line-height: 1.5; }
.modal-body { position: relative; flex: 1 1 auto; padding: 1.5rem; overflow-y: auto; }
.modal-footer { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; justify-content: flex-end; padding: 1rem 1.5rem; background-color: var(--modal-footer-bg); border-top: 1px solid var(--border); border-bottom-right-radius: calc(var(--radius) - 1px); border-bottom-left-radius: calc(var(--radius) - 1px); }
.modal-footer > * { margin: 0.25rem; }
.btn-close { box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em 0.25em; color: var(--text-primary); background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat; border: 0; border-radius: 0.25rem; opacity: 0.7; filter: var(--close-button-filter); }
.btn-close:hover { opacity: 1; text-decoration: none;}
.btn-close:focus { outline: 0; box-shadow: 0 0 0 0.25rem hsla(var(--ring), 0.25); }
.modal-header .btn-close { padding: 0.5rem 0.5rem; margin: -0.5rem -0.5rem -0.5rem auto; }


/* Cards */
.card { border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-primary); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; height: 100%; }
.card-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background-color: transparent; font-size: 1rem; font-weight: 600; flex-shrink: 0; }
/* П.2: Заголовки сканера */
.card-header h5 { color: var(--text-primary); margin-bottom: 0; font-size: 1rem; font-weight: 600; }
.theme-light .card-header h5 { color: var(--text-primary); } /* Явное указание для светлой темы */
.card-body { padding: 0.5rem; flex-grow: 1; display: flex; flex-direction: column; }
/* Specific card adjustments */
.order-book-panel .card-header {
    padding: 0.75rem;
}
.order-book-panel .card-body {
    /* Keep padding adjustments for the order book card body if needed */
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    /* --- ADD overflow: hidden HERE instead --- */
    overflow: hidden; /* Apply overflow hidden specifically to the order book card body */
}
.order-book-panel .card-body { padding: 0.5rem 0.5rem 0.5rem 0.5rem; }

/* Order Book Specific */
.orderbook-side-container { 
    overflow-y: auto; 
    padding-right: 4px; 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: 0; 
    min-height: 0; 
    display: flex; 
    flex-direction: column; 
}
/* [ИЗМЕНЕНИЕ №1] Добавляем инверсию для контейнера продаж, чтобы ряды шли снизу вверх */
.orderbook-side-container.asks-container {
    flex-direction: column-reverse;
}

.book-row { height: 1.5rem; display: flex; align-items: center; justify-content: space-between; padding: 0 0.4rem; border-radius: calc(var(--radius) - 4px); font-size: 0.75rem; position: relative; /* Ensure position relative for z-index context */ transition: background-color 0.08s ease; margin-bottom: 1px; flex-shrink: 0; }
.orderbook-side-container.asks-container .book-row { background-color: var(--ask-bg); }
.orderbook-side-container.bids-container .book-row { background-color: var(--bid-bg); }
.book-row:hover { background-color: var(--bg-highlight) !important; }
.orderbook-side-container .book-row span { /* Target all spans within the row */
    z-index: 2; /* Higher z-index for text */
    position: relative; /* Ensure stacking context */
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.orderbook-side-container .volume-coin-span, .orderbook-side-container .volume-usd-span { flex: 1 1 40%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); padding-right: 0.25rem; font-size: 0.75rem; }
.orderbook-side-container .price-span { flex: 0 0 30%; text-align: right; font-weight: 500; padding: 0 0.25rem; font-size: 0.75rem; }
.orderbook-side-container .total-span { flex: 0 0 30%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); padding-left: 0.25rem; font-size: 0.75rem; }
.orderbook-side-container.asks-container .price-span { color: var(--ask); }
.orderbook-side-container.bids-container .price-span { color: var(--bid); }

.book-row-bar-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0; /* Все бары теперь начинаются слева */
    z-index: 1;
    display: flex;
    flex-direction: row; /* Сегменты всегда идут слева направо */
    transition: width 0.08s ease-out, background-color var(--theme-transition-duration) ease;
    border-top-left-radius: calc(var(--radius) - 4px);
    border-bottom-left-radius: calc(var(--radius) - 4px);
}

/* MODIFIED RULE for asks bars */
/* Задаем только цвет для баров продаж */
.orderbook-side-container.asks-container .book-row-bar-container {
    background-color: var(--ask-bar);
}

/* Bids bar rule remains the same */
/* Задаем только цвет для баров покупок */
.orderbook-side-container.bids-container .book-row-bar-container {
    background-color: var(--bid-bar);
}

.book-row-bar-container span { height: 100%; display: inline-block; opacity: 0.8; transition: background-color var(--theme-transition-duration) ease; }
.spread-indicator { padding: 0.15rem 0.5rem; background-color: var(--bg-primary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; justify-content: center; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--spread); margin: 2px 0; flex-shrink: 0; }
.orderbook-header { display: flex; justify-content: space-between; padding: 2px 8px; font-weight: 500; color: var(--text-secondary); font-size: 0.75rem; border-bottom: 1px solid var(--border); margin-bottom: 4px; flex-shrink: 0; }


/* --- Стили для переключателей на вкладке стаканов (П.10, П.11) --- */
.exchange-toggles .custom-switch {
    position: relative;
    margin-right: 5px; /* Отступ между переключателями */
    min-height: 1.25rem; /* Базовая высота */
    vertical-align: middle;
}
/* Стилизация стандартного лейбла dbc.Switch */
.exchange-toggles .custom-control-label {
    font-size: 0.7rem; /* Размер текста BIN, OKX */
    font-weight: 500;
    padding-top: 0.1rem; /* Небольшая подстройка вертикального выравнивания */
    padding-left: 0.3rem; /* Небольшой отступ слева от бегунка */
    color: var(--text-secondary); /* Цвет неактивного лейбла по умолчанию */
    transition: color var(--theme-transition-duration) ease;
    /* Не добавляем left/top, чтобы не ломать структуру */
}
/* Красим текст лейбла в цвет биржи */
.switch-label-binance .custom-control-label { color: var(--color-binance); }
.switch-label-bybit .custom-control-label { color: var(--color-bybit); }
.switch-label-okx .custom-control-label { color: var(--color-okx); }
.switch-label-gateio .custom-control-label { color: var(--color-gateio); }
.switch-label-bitget .custom-control-label { color: var(--color-bitget); }
.switch-label-mexc .custom-control-label { color: var(--color-mexc); }
.switch-label-kucoin .custom-control-label { color: var(--color-kucoin); }
/* Затемняем текст неактивных (отключенных) переключателей */
.exchange-toggles .custom-control-input:not(:checked) ~ .custom-control-label {
    color: var(--text-secondary);
    opacity: 0.6; /* Делаем неактивные биржи бледнее */
}
/* Цвет самого переключателя (трека) в Активном состоянии */
.exchange-toggles .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--accent); /* Основной цвет для активных */
    border-color: var(--accent);
}
/* Опционально: Индивидуальные цвета для активных переключателей (закомментировано) */
/*
.switch-label-binance .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-binance); border-color: var(--color-binance); }
.switch-label-bybit .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-bybit); border-color: var(--color-bybit); }
.switch-label-okx .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-okx); border-color: var(--color-okx); }
.switch-label-gateio .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-gateio); border-color: var(--color-gateio); }
.switch-label-bitget .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-bitget); border-color: var(--color-bitget); }
.switch-label-mexc .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-mexc); border-color: var(--color-mexc); }
.switch-label-kucoin .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-kucoin); border-color: var(--color-kucoin); }
*/

.orderbook-exchange-label {
    margin-left: 4px;
    margin-right: 8px;
    margin-top: 2px;
    font-weight: 600;
    font-size: 0.8rem;
}

.orderbook-exchange-label.binance { color: var(--color-binance); }
.orderbook-exchange-label.bybit { color: var(--color-bybit); }
.orderbook-exchange-label.okx { color: var(--color-okx); }
.orderbook-exchange-label.gateio { color: var(--color-gateio); }
.orderbook-exchange-label.bitget { color: var(--color-bitget); }
.orderbook-exchange-label.mexc { color: var(--color-mexc); }
.orderbook-exchange-label.kucoin { color: var(--color-kucoin); }


/* Responsive */
@media (max-width: 992px) {
    header .nav-tabs { display: none; }
    header { padding: 0 15px; height: 3rem; }
    header h1 { font-size: 1.1rem; }
    header nav { gap: 5px; }
    #tab-content-area { padding: 0.5rem; }
}
@media (max-width: 768px) {
    .container { padding-left: 10px; padding-right: 10px; }
    body { font-size: 14px; }
    .card-header { padding: 10px 12px; font-size: 0.9rem; }
    .card-body { padding: 12px; }
    .btn { padding: 0.4rem 0.8rem; font-size: 0.8rem; height: 2rem; }
    .btn-sm { height: 1.75rem; padding: 0.2rem 0.6rem; font-size: 0.75rem; }
    input, select, textarea { height: 2rem; font-size: 0.8rem; }
    .input-group-sm > .form-control, .input-group-sm > .input-group-text { height: 1.75rem; font-size: 0.75rem; }
    .book-row { font-size: 0.7rem; height: 1.4rem; padding: 0 0.3rem;}
    .orderbook-side-container .price-span,
    .orderbook-side-container .volume-coin-span,
    .orderbook-side-container .volume-usd-span,
    .orderbook-side-container .total-span { font-size: 0.7rem; }
    .modal-dialog { margin: 0.5rem; }
    .modal-content { max-height: calc(100vh - 1rem); }
}

/* Loading Indicator */
#loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-primary); display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 1; transition: opacity 0.5s ease-out; }
#loading-overlay.hidden { opacity: 0; pointer-events: none; }
.loader { border: 4px solid var(--border); border-top: 4px solid var(--accent); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

/* Ensure the columns in the ranking grid behave correctly as flex items */
.ranking-chart-column {
    display: flex !important; /* Override potential inline styles */
    flex-direction: column !important;
    /* height is set inline in python based on rows */
    /* min-height: 200px; /* Optional: Define a minimum sensible height */
}

/* Колонка сетки */
.ranking-chart-column {
    display: flex !important;
    flex-direction: column !important;
    padding: 2px !important; /* Уменьшим padding, чтобы дать больше места графику */
    /* Высота задается инлайн-стилем в Python */
}

/* Обертка для графика внутри колонки */
.ranking-chart-wrapper {
    flex-grow: 1; /* Растет по высоте */
    display: flex; /* Контекст для графика */
    min-height: 0; /* Для корректной работы flex-grow */
    height: 100%;
    width: 100%; /* <<< ЗАНИМАЕТ ВСЮ ШИРИНУ КОЛОНКИ */
    position: relative; /* Для позиционирования внутренних элементов plotly */
}

/* Компонент dcc.Graph */
.ranking-chart-wrapper .dash-graph {
    height: 100% !important;
    width: 100% !important; /* <<< ЗАНИМАЕТ ВСЮ ШИРИНУ ОБЕРТКИ */
    min-width: 0; /* Предотвращает случайное сжатие flex-элементами */
}

/* Внутренний div самого Plotly (на всякий случай) */
.ranking-chart-wrapper .js-plotly-plot,
.ranking-chart-wrapper .plotly {
    height: 100% !important;
    width: 100% !important; /* <<< ЗАНИМАЕТ ВСЮ ШИРИНУ dash-graph */
}

/* Строка сетки */
#ranking-charts-grid-container > .row {
  align-items: stretch !important; /* Колонки одинаковой высоты */
  /* Убедимся, что нет горизонтальных ограничений */
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* assets/styles.css ИЛИ assets/custom.css */

/* Стиль для лейбла биржи на вкладке Рейтинг */
.ranking-tab-exchange-label {
    display: block; /* Занимает всю ширину над свитчами */
    font-size: 0.9rem; /* Размер шрифта (можно 1rem) */
    font-weight: 600;
    /* margin: 0 0.4rem;  УБРАТЬ горизонтальные отступы */
    margin-bottom: 0.25rem; /* Добавлен отступ снизу (можно настроить) */
    line-height: 1.2;
    white-space: nowrap;
    text-align: center; /* Центрируем текст над свитчами */
    /* color задается инлайн-стилем в Python */
  }

  /* Стилизация основной шапки Navbar */
.main-header-navbar {
    background-color: var(--bg-secondary) !important; /* Фон */
    border-bottom: 1px solid var(--border) !important; /* Граница снизу */
    padding-top: 0 !important;    /* Убираем верхний padding */
    padding-bottom: 0 !important; /* Убираем нижний padding */
    min-height: 3.5rem; /* Сохраняем высоту шапки */
  }
  
  /* Стиль для ссылок в Navbar, имитирующий Tabs */
  .navbar-nav .nav-link-custom {
    height: 3.5rem; /* Высота как у шапки */
    border-radius: 0;
    border-bottom: 3px solid transparent;
    margin: 0 0.5rem;
    padding: 0 1rem !important; /* !important может понадобиться для переопределения */
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--tab-inactive-text);
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  
  .navbar-nav .nav-link-custom:hover {
    color: var(--text-primary);
    border-bottom-color: var(--border);
    background: none;
  }
  
  /* Активная ссылка */
  .navbar-nav .nav-link-custom.active {
    color: var(--text-primary);
    font-weight: 600;
    border-bottom-color: var(--accent);
    background-color: transparent !important;
    box-shadow: none !important;
  }
  
  /* Кнопка "бургер" - цвет иконки */
  .navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  .navbar-dark .navbar-toggler {
      border-color: rgba(255, 255, 255, 0.2); /* Цвет рамки кнопки */
  }
  
  /* При открытии меню на мобильных */
  @media (max-width: 991.98px) { /* Точка перелома lg */
    .navbar-collapse {
      background-color: var(--bg-secondary); /* Фон для выпадающего меню */
      border-top: 1px solid var(--border);
      margin-top: 1px; /* Небольшой отступ */
    }
    .navbar-nav .nav-link-custom {
      height: auto; /* Убираем фикс. высоту */
      padding: 0.75rem 1rem !important; /* Стандартный padding для моб. меню */
      border-bottom: 1px solid var(--border); /* Разделитель между пунктами */
    }
    .navbar-nav .nav-link-custom.active {
      border-bottom-color: var(--accent); /* Подчеркивание для активного */
      font-weight: 600;
    }
    .navbar-nav .nav-link-custom:last-child {
        border-bottom: none; /* Убираем границу у последнего элемента */
    }
    /* Выравниваем правую часть в столбец */
    .navbar-collapse .ms-auto {
      padding: 0.5rem 1rem;
      align-items: flex-start !important; /* Выравнивание влево */
      flex-direction: column !important;
      gap: 0.5rem; /* Отступ между элементами в мобильном меню */
    }
    .navbar-collapse .ms-auto .text-nowrap {
        margin-right: 0 !important; /* Убираем правый отступ у статуса */
    }
     .navbar-collapse .ms-auto .btn {
        margin-right: 0 !important; /* Убираем правый отступ у кнопок */
    }
  }
/* Используем класс .ranking-tab-switch, который мы добавили */
.ranking-tab-switch .form-check-input[type="checkbox"]:checked {
    background-color: var(--text-secondary) !important; /* Используем серый цвет */
    border-color: var(--text-secondary) !important;
    /* background-image для активного состояния (белая точка) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
 /* Стиль неактивного состояния для вкладки рейтинг (если отличается от дефолта) */
.ranking-tab-switch .form-check-input[type="checkbox"]:not(:checked) {
     background-color: var(--input-bg);
     border-color: var(--border);
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='hsl(210 40% 98%)'/%3e%3c/svg%3e");
}
/* Обводка при фокусе для вкладки рейтинг */
.ranking-tab-switch .form-check-input[type="checkbox"]:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 0.25rem hsla(var(--ring-hsl, 220 15% 70%), 0.25);
}
/* --- ИЗМЕНЕНИЕ: Фон выпадающего меню (ЕЩЕ БОЛЕЕ СПЕЦИФИЧНЫЙ СЕЛЕКТОР) --- */
/* Нацеливаемся на div с классом dash-dropdown и его потомка */
.dash-dropdown .Select-menu-outer {
    background-color: var(--bg-secondary) !important; /* Используем ТЕМНО-СЕРЫЙ */
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    margin-top: 4px !important;
    box-shadow: var(--shadow-md);
    z-index: 1050;
}
/* --- КОНЕЦ ИЗМЕНЕНИЯ --- */

/* --- ИЗМЕНЕНИЕ: Фон опций внутри меню (ЕЩЕ БОЛЕЕ СПЕЦИФИЧНЫЙ СЕЛЕКТОР) --- */
.dash-dropdown .Select-menu-outer .VirtualizedSelectOption {
    background-color: var(--bg-secondary) !important; /* ТЕМНО-СЕРЫЙ */
    color: var(--text-primary) !important;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.dash-dropdown .Select-menu-outer .VirtualizedSelectOption:last-child {
    border-bottom: none;
}
/* --- КОНЕЦ ИЗМЕНЕНИЯ --- */

/* Стиль опции при наведении (используем --bg-highlight) */
.dash-dropdown .Select-menu-outer .VirtualizedSelectOption.is-focused {
    background-color: var(--bg-highlight) !important;
    color: var(--text-primary) !important;
}

/* Стиль выбранной опции (оставляем --accent) */
.dash-dropdown .Select-menu-outer .VirtualizedSelectOption.is-selected {
    background-color: var(--accent) !important;
    color: var(--button-text) !important;
    font-weight: 500;
}

/* assets/styles.css или assets/custom.css */

/* --- AG Grid Custom Styling --- */

/* Задаем базовый класс для наших таблиц */
.styled-ag-grid {
    border: none !important; /* Убираем внешнюю рамку сетки */
    font-size: 0.85rem; /* Базовый размер шрифта для ячеек */
}

/* Переопределение переменных темы AG Grid (Alpine Dark) */
.styled-ag-grid.ag-theme-alpine-dark {
    /* Фоны */
    --ag-background-color: transparent; /* Прозрачный фон самой сетки */
    --ag-header-background-color: var(--table-header-bg, transparent); /* Фон заголовка */
    --ag-row-background-color: transparent; /* Прозрачный фон строк */
    --ag-odd-row-background-color: transparent; /* Убираем чередование */
    --ag-row-hover-color: var(--bg-highlight); /* Цвет строки при наведении */
    --ag-selected-row-background-color: hsla(var(--accent-hsl, 190, 90%, 55%), 0.15); /* Фон выбранной строки */
    --ag-modal-overlay-background-color: hsla(230, 18%, 10%, 0.7); /* Фон оверлея */
    --ag-header-cell-hover-background-color: var(--bg-highlight);
    --ag-header-cell-moving-background-color: var(--bg-secondary);

    /* Текст */
    --ag-data-color: var(--text-primary); /* Основной цвет текста */
    --ag-header-foreground-color: var(--table-header-text, var(--text-secondary)); /* Цвет заголовка */
    --ag-secondary-foreground-color: var(--text-secondary); /* Вторичный текст (пагинация и т.д.) */
    --ag-disabled-foreground-color: var(--text-placeholder);

    /* Границы */
    --ag-border-color: var(--border); /* Цвет тонких разделителей строк/колонок */
    --ag-header-column-separator-color: transparent; /* Убираем разделитель колонок в шапке */
    --ag-row-border-color: var(--border); /* Горизонтальный разделитель строк */
    --ag-borders: none; /* Отключаем большинство стандартных рамок */
    --ag-borders-row: var(--ag-row-border-style) var(--ag-row-border-width) var(--ag-row-border-color); /* Только нижняя граница строки */
     --ag-row-border-style: solid;
     --ag-row-border-width: 1px;

    /* Контролы */
    --ag-checkbox-unchecked-color: var(--input-border);
    --ag-checkbox-checked-color: var(--accent-start);
    --ag-range-selection-border-color: var(--accent-start);
    --ag-range-selection-background-color: hsla(var(--accent-hsl, 190, 90%, 55%), 0.1);
    --ag-input-focus-border-color: var(--accent-start);

    /* Размеры и отступы (можно настроить) */
    --ag-header-height: 32px; /* Высота заголовка */
    --ag-list-item-height: var(--ag-row-height, 34px); /* Высота строки */
    --ag-cell-horizontal-padding: 0.9rem; /* Горизонтальный паддинг ячейки */
    --ag-cell-vertical-padding: 0; /* Управляем высотой строки через rowHeight/cellStyle */
    --ag-grid-size: 4px; /* Базовый размер для отступов/иконок */
    --ag-icon-size: 12px; /* Размер иконок сортировки/меню */
}

/* Стилизация Заголовков */
.styled-ag-grid .ag-header-cell {
    border-bottom: 1px solid var(--table-header-border, var(--border-light)) !important; /* Граница заголовка */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.styled-ag-grid .ag-header-cell-label {
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--table-header-text, var(--text-secondary));
}
/* Убираем фон иконки меню колонки */
.styled-ag-grid .ag-header-cell-menu-button .ag-icon {
    background: none !important;
    color: var(--text-secondary);
    opacity: 0.6;
}
.styled-ag-grid .ag-header-cell-menu-button:hover .ag-icon {
    opacity: 1;
    color: var(--text-primary);
}
/* Стилизация иконок сортировки */
.styled-ag-grid .ag-sort-indicator-icon .ag-icon {
     color: var(--text-secondary);
     font-size: 0.8em;
     opacity: 0.5;
}
.styled-ag-grid .ag-header-cell-label.ag-header-cell-sorted .ag-sort-indicator-icon .ag-icon {
    opacity: 1;
    color: var(--accent-start); /* Цвет активной сортировки */
}

/* Стилизация Ячеек */
.styled-ag-grid .ag-cell {
    line-height: 1.3; /* Улучшаем читаемость */
    border-bottom: none; /* Убираем стандартную нижнюю границу ячейки */
    border-right: none; /* Убираем правую границу ячейки */
    padding-left: 0.9rem; /* Синхронизируем с --ag-cell-horizontal-padding */
    padding-right: 0.9rem;
    display: flex; /* Используем flex для вертикального выравнивания */
    align-items: center; /* Выравниваем по центру */
    overflow: visible; /* Позволяем рендерерам типа бейджа выходить за границы */
}
/* Горизонтальная линия между строками (вместо границы ячеек) */
.styled-ag-grid .ag-row {
    border-bottom: 1px solid var(--ag-row-border-color, var(--border));
}
.styled-ag-grid .ag-row:last-of-type {
    border-bottom: none; /* Убираем у последней строки */
}

/* Стиль для ячеек с моноширинными цифрами */
.styled-ag-grid .numeric .ag-cell-value {
    font-feature-settings: 'tnum' on, 'lnum' on;
}
/* Выравнивание текста в числовых колонках (дополнительно к cellStyle) */
.styled-ag-grid .ag-cell.numeric {
   justify-content: flex-end; /* Выравниваем содержимое ячейки вправо */
}

/* --- Стили для Кастомных Рендереров и Классов --- */

/* Точка биржи */
.exchange-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}
.exchange-cell { /* Контейнер для точки и имени */
    display: flex;
    align-items: center;
    height: 100%; /* Занимает всю высоту ячейки */
    overflow: hidden; /* Обрезаем имя, если не влезает */
}
.exchange-cell span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500; /* Выделяем имя биржи */
}

/* Цвет текста для процентов */
.styled-ag-grid .positive-value {
    color: var(--green);
    /* font-weight: 500; // Можно добавить, если не задано в cellStyle */
}
.styled-ag-grid .negative-value {
    color: var(--red);
    /* font-weight: 500; */
}

/* Цвет текста и жирность для NATR */
.styled-ag-grid .high-natr-critical {
    color: var(--red);
    font-weight: bold;
}
.styled-ag-grid .high-natr-warning {
    color: var(--yellow);
    font-weight: bold;
}
/* .styled-ag-grid .normal-natr { } // Обычный стиль, если нужно */

/* --- Стили Бейджей (Общие) --- */
.badge {
    display: inline-block;
    padding: 0.2em 0.6em;
    font-size: 0.75em; /* От размера шрифта ячейки */
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--radius-md, 4px);
    border: none;
    text-transform: uppercase;
}

/* Стили для конкретных цветов бейджей */
.badge-green {
    background-color: var(--green);
    color: hsl(130, 85%, 10%);
}
.theme-light .badge-green {
     color: hsl(130, 60%, 95%);
}
.badge-red {
    background-color: var(--red);
    color: var(--text-on-accent, #fff);
}
.theme-light .badge-red {
    color: var(--text-on-accent, #fff);
}
.badge-outline {
    color: var(--text-secondary);
    border: 1px solid var(--border);
    background-color: transparent;
    padding: 0.15em 0.5em;
}

/* --- Применение к AG Grid --- */

/* Центрируем содержимое ячейки */
.styled-ag-grid .ag-cell.cell-badge { /* Добавим свой класс для удобства */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Убираем внутренние отступы ячейки, чтобы бейдж прилегал */
    padding: 0.2rem 0.4rem !important;
}

/* Стилизуем НЕПОСРЕДСТВЕННО элемент .ag-cell-value ВНУТРИ ячейки */
.styled-ag-grid .ag-cell.badge-green .ag-cell-value,
.styled-ag-grid .ag-cell.badge-red .ag-cell-value,
.styled-ag-grid .ag-cell.badge-outline .ag-cell-value {
    /* Применяем стили бейджа к внутреннему элементу */
    display: inline-block; /* Важно */
    padding: 0.2em 0.6em;
    font-size: 0.75em; /* Наследуется или задаем явно */
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--radius-md, 4px);
    border: none;
    text-transform: uppercase;
    /* Убираем фон ячейки, если он мешает */
    background: none !important;
}

/* Применяем цвета фона и текста к .ag-cell-value */
.styled-ag-grid .ag-cell.badge-green .ag-cell-value {
    background-color: var(--green);
    color: hsl(130, 85%, 10%);
}
.styled-ag-grid .ag-cell.badge-red .ag-cell-value {
    background-color: var(--red);
    color: var(--text-on-accent, #fff);
}
.styled-ag-grid .ag-cell.badge-outline .ag-cell-value {
    color: var(--text-secondary);
    border: 1px solid var(--border);
    background-color: transparent;
    padding: 0.15em 0.5em;
}

/* Светлая тема (переопределение цвета текста) */
.theme-light .styled-ag-grid .ag-cell.badge-green .ag-cell-value {
    color: hsl(130, 60%, 95%);
}
.theme-light .styled-ag-grid .ag-cell.badge-red .ag-cell-value {
    color: var(--text-on-accent, #fff);
}


/* Стилизация пагинации (пример) */
.styled-ag-grid .ag-paging-panel {
    border-top: 1px solid var(--border);
    padding: 0.3rem 0.5rem;
    justify-content: flex-end; /* Выравниваем вправо */
}
.styled-ag-grid .ag-paging-button {
    color: var(--text-secondary);
    opacity: 0.7;
}
.styled-ag-grid .ag-paging-button:hover {
    opacity: 1;
    color: var(--text-primary);
}
.styled-ag-grid .ag-disabled .ag-paging-button {
    opacity: 0.3;
    cursor: default;
}
.styled-ag-grid .ag-paging-description {
    font-size: 0.8rem;
    margin-right: 0.5rem;
}

/* Убираем фон фильтра */
.styled-ag-grid .ag-floating-filter-input {
    background: transparent !important;
}
.styled-ag-grid .ag-floating-filter-button {
    background: transparent !important;
    border: none !important;
    margin-top: 3px;
}

/* Увеличиваем высоту заголовка и выравниваем текст по центру */
.styled-ag-grid .ag-header-cell {
    /* Увеличиваем высоту, например, до 40px (подберите значение) */
    height: 40px !important; /* !important может понадобиться для перекрытия */
    line-height: 40px !important; /* Выравнивание по вертикали */
    padding-top: 0 !important; /* Убираем стандартные паддинги */
    padding-bottom: 0 !important;
    border-bottom: 1px solid var(--table-header-border, var(--border-light)) !important;
    display: flex; /* Используем flex для выравнивания */
    align-items: center; /* Вертикальное выравнивание */
}

/* Дополнительно стилизуем сам текст заголовка, если нужно */
.styled-ag-grid .ag-header-cell-label {
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--table-header-text, var(--text-secondary));
    padding-left: 0.9rem; /* Возвращаем горизонтальный паддинг тексту */
    padding-right: 0.9rem;
     white-space: nowrap; /* Предотвращаем перенос */
     overflow: hidden; /* Скрываем то, что не помещается */
     text-overflow: ellipsis; /* Добавляем троеточие */
}

/* Выравнивание иконки сортировки/фильтра */
.styled-ag-grid .ag-header-cell-label .ag-header-icon,
.styled-ag-grid .ag-header-cell-label .ag-header-cell-menu-button {
    margin-top: 0; /* Убираем возможный сдвиг */
    height: 100%; /* Занимаем всю высоту ячейки заголовка */
    display: flex;
    align-items: center;
}

/* Убедимся, что иконки сортировки не мешают */
.styled-ag-grid .ag-sort-indicator-icon {
     margin-left: 4px;
}

/* --- Стили для сетки графиков рейтинга --- */

.ranking-chart-item {
    position: relative; /* Необходимо для позиционирования дочерних absolute элементов */
    overflow: hidden;   /* Обрезаем все, что выходит за границы */
    border: 1px solid var(--border);
    border-radius: var(--radius-md); /* Или ваш радиус */
    background-color: var(--bg-panel); /* Или var(--chart-bg) */
    display: flex;
    flex-direction: column;
    padding: 0; /* Убираем внутренний паддинг у колонки, если он был */
}

.tv-chart-container {
    width: 100%;
    height: 100%;
    flex-grow: 1; /* Растягиваем контейнер на всю высоту ячейки */
    min-height: 0; /* Важно для flexbox */
}

.ranking-chart-annotations {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 4px 6px; /* Небольшие отступы внутри панели */
    display: flex;
    justify-content: space-between; /* Разносим левую и правую части */
    align-items: flex-start; /* Выравниваем по верху */
    z-index: 10; /* Поверх графика */
    pointer-events: none; /* Не мешает взаимодействию с графиком */
    /* Небольшой градиент сверху для читаемости текста на графике */
    background: linear-gradient(to bottom, hsla(var(--bg-primary-hsl, 230, 18%, 10%), 0.7) 0%, hsla(var(--bg-primary-hsl, 230, 18%, 10%), 0) 100%);
}
.theme-light .ranking-chart-annotations {
     background: linear-gradient(to bottom, hsla(var(--bg-primary-hsl, 210, 30%, 99%), 0.7) 0%, hsla(var(--bg-primary-hsl, 210, 30%, 99%), 0) 100%);
}


.ranking-chart-annotations .left-info,
.ranking-chart-annotations .right-info {
    font-size: 0.7rem; /* Мелкий шрифт */
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px; /* Небольшой отступ между элементами */
    line-height: 1.2;
    text-shadow: 0 0 2px var(--bg-primary); /* Небольшая тень для читаемости */
}

.ranking-chart-annotations .left-info {
    color: var(--text-primary);
    font-weight: 500;
}
.ranking-chart-annotations .right-info {
    color: var(--text-secondary);
    font-size: 0.65rem; /* Еще мельче */
    justify-content: flex-end; /* Выравниваем текст вправо */
}

/* Стили для цветной точки (если еще не определены) */
.exchange-dot {
    display: inline-block;
    width: 7px;  /* Чуть больше */
    height: 7px;
    border-radius: 50%;
    margin-right: 4px; /* Отступ справа */
    vertical-align: middle; /* Выравнивание по центру строки */
    flex-shrink: 0;
    /* background-color задается инлайн-стилем */
}

/* Стили для процентов и NATR (если еще не определены) */
.positive-value { color: var(--green) !important; }
.negative-value { color: var(--red) !important; }
.high-natr-critical { color: var(--red) !important; font-weight: bold !important; }
.high-natr-warning { color: var(--yellow) !important; font-weight: bold !important; }

/* Стили для контейнера графика/заглушки */
.ranking-chart-placeholder {
    flex-grow: 1; /* Занимает оставшееся место */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
    min-height: 140px; /* Минимальная высота */
    margin-top: 20px; /* Отступ от панели аннотаций */
    /* background-color: transparent; */ /* Фон не нужен, если график занимает все место */
}

/* Обертка для dcc.Graph внутри .ranking-chart-placeholder */
.ranking-chart-placeholder .dash-graph {
     height: 100%;
     width: 100%;
}
/* Убедитесь, что сам график растягивается */
.ranking-chart-placeholder .js-plotly-plot,
.ranking-chart-placeholder .plotly {
     height: 100% !important;
     width: 100% !important;
}

/* === Темные Переключатели для Рейтинга и Настроек === */

/* Общие стили для неактивного состояния в нужных секциях */
.ranking-tab-switches .form-switch .form-check-input,
#settings-modal .form-switch .form-check-input,
#settings-modal .form-check-inline.form-switch .form-check-input /* Для Checklist */ {
    background-color: var(--bg-secondary) !important; /* Темный фон для неактивного */
    border-color: var(--border) !important;       /* Темная граница */
    background-image: none !important; /* Убираем стандартную иконку Bootstrap */
    cursor: pointer;
    /* Убираем стандартное изображение точки/галочки */
    -webkit-appearance: none;
    appearance: none;
    position: relative; /* Для позиционирования псевдо-элемента */
    width: 2em; /* Стандартная ширина */
    height: 1.1em; /* Стандартная высота */
    border-radius: 1.1em;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Стилизация "бегунка" (thumb) - ::before псевдо-элемент */
.ranking-tab-switches .form-switch .form-check-input::before,
#settings-modal .form-switch .form-check-input::before,
#settings-modal .form-check-inline.form-switch .form-check-input::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(1.1em - 4px);
    height: calc(1.1em - 4px);
    border-radius: 50%;
    background-color: hsl(210 40% 98%); /* Светлый бегунок (как в темной теме) */
    transition: transform 0.2s ease, background-color 0.2s ease;
    pointer-events: none; /* Не мешает клику по инпуту */
}

/* Стили для активного (checked) состояния */
.ranking-tab-switches .form-switch .form-check-input:checked,
#settings-modal .form-switch .form-check-input:checked,
#settings-modal .form-check-inline.form-switch .form-check-input:checked {
    background-color: var(--text-secondary) !important; /* Нейтральный серый фон для активного */
    border-color: var(--text-secondary) !important;
}

/* Перемещение "бегунка" в активном состоянии */
.ranking-tab-switches .form-switch .form-check-input:checked::before,
#settings-modal .form-switch .form-check-input:checked::before,
#settings-modal .form-check-inline.form-switch .form-check-input:checked::before {
    transform: translateX(calc(2em - 1.1em)); /* Сдвиг вправо */
    background-color: hsl(210 40% 98%); /* Бегунок остается светлым */
}

/* Стиль фокуса */
.ranking-tab-switches .form-switch .form-check-input:focus,
#settings-modal .form-switch .form-check-input:focus,
#settings-modal .form-check-inline.form-switch .form-check-input:focus {
    border-color: var(--focus-ring) !important; /* Цвет рамки фокуса */
    box-shadow: 0 0 0 2px var(--focus-ring) !important; /* Тень фокуса */
}

/* Стили для лейблов (можно настроить цвет, если нужно) */
.ranking-tab-switches .form-switch .form-check-label,
#settings-modal .form-switch .form-check-label,
#settings-modal .form-check-inline.form-switch .form-check-label {
    color: var(--text-secondary); /* Убедимся, что цвет лейбла подходит */
    cursor: pointer;
}

/* --- Стили для области спреда и ленты внутри нее --- */
.spread-indicator-container {
    padding: 4px 12px; /* Вертикальные отступы + горизонтальные */
    background-color: var(--bg-secondary); /* Фон чуть темнее основного */
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column; /* Текст спреда сверху, лента снизу */
    align-items: center;   /* Центрируем содержимое по горизонтали */
    gap: 3px;             /* Небольшой отступ между текстом и лентой */
    flex-shrink: 0;       /* Предотвращаем сжатие */
    min-height: 40px;     /* Минимальная высота для вмещения ленты */
}

.spread-indicator-text {
    font-size: 0.7rem;    /* Меньший шрифт для текста спреда */
    font-weight: 500;
    color: var(--spread);
    line-height: 1.2;
    text-align: center;
    width: 100%;          /* Занимает всю ширину контейнера */
}

.tick-tape-container {
    display: flex;
    align-items: center;
    flex-direction: row-reverse; /* Новые справа */
    overflow: hidden;
    height: 16px;          /* Уменьшенная высота ленты */
    width: 100%;           /* Лента занимает всю ширину контейнера спреда */
    max-width: 500px;      /* Ограничим максимальную ширину ленты */
    gap: 1px;              /* Минимальный отступ */
    padding: 0;            /* Убираем внутренние отступы */
    background: none;      /* Убираем фон ленты */
    border-radius: 0;      /* Убираем скругление ленты */
    margin: 0;             /* Убираем внешние отступы ленты */
}

.tape-block {
    height: 100%;
    border-radius: 1px;    /* Минимальное скругление */
    opacity: 0.9;
    transition: width 0.1s ease-out;
    flex-shrink: 0;
    min-width: 5px;       /* Минимальная ширина увеличена */
    position: relative;     /* Для позиционирования текста */
    display: flex;          /* Для центрирования текста (хотя он absolute) */
    justify-content: center;
    align-items: center;
    overflow: hidden;       /* Обрезаем текст, если не помещается */
}

.tick-block-buy {
    background-color: var(--green);
}

.tick-block-sell {
    background-color: var(--red);
}

.tape-block-volume {
    position: absolute;     /* Позиционируем поверх блока */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Точное центрирование */
    font-size: 0.6rem;      /* Очень маленький шрифт */
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9); /* Белый полупрозрачный */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.7); /* Тень для читаемости */
    pointer-events: none;   /* Не мешает событиям мыши */
    white-space: nowrap;    /* Запрещаем перенос текста */
    line-height: 1;         /* Убираем лишнюю высоту строки */
    overflow: hidden;       /* Обрезаем, если текст шире блока */
    text-overflow: clip;    /* Просто обрезаем, без троеточия */
    max-width: 90%;         /* Ограничиваем ширину текста */
}
/* Опционально: другой цвет текста для светлой темы */
.theme-light .tape-block-volume {
   color: rgba(20, 20, 20, 0.85);
   text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Убираем рамку у стакана, т.к. теперь есть рамки у спреда */
.order-book-panel {
    border: none;
    box-shadow: none;
}

.logo-iframe {
    height: 66px;
    width: 160px;
    
    border: none;
    background-color: transparent;
    pointer-events: none;
    
    /* --- ИЗМЕНЕНИЯ ЗДЕСЬ --- */
    
    /* 1. Убираем полосы прокрутки */
    overflow: hidden; 
    
    /* 2. Поднимаем логотип немного выше */
    margin-top: 6px; /* Отрицательный отступ "тянет" элемент вверх */
  }

/* --- Стили для загрузочного экрана --- */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--background);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

/* Стили для самого спиннера (тоже должны быть в файле) */
.loading-spinner-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 400px;
    text-align: center;
    color: var(--text-secondary);
}

.logo-spinner {
    width: 120px;
    height: 120px;
}

.logo-spinner svg {
    width: 100%;
    height: 100%;
}

.loading-spinner-text {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 500;
}

/* Это правило нацелено на контейнер, который Dash создает для загрузки */
._dash-loading {
    position: relative;
    /* Убираем стандартное затемнение, если оно мешает */
    color: transparent !important;
  }
  
  /* Скрываем стандартный текст "Loading..." */
  ._dash-loading::before {
    content: '' !important; /* Важно! Убираем текст */
    display: none !important;
  }
  
  /* Скрываем стандартный вращающийся кружок */
  ._dash-loading::after {
    content: '' !important; /* Важно! Убираем иконку спиннера */
    display: none !important;
  }

/* --- Центрирование навигационных ссылок в хедере --- */
.navbar-nav-centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Добавьте это в ваш основной файл стилей */

.tv-chart-container {
    position: relative; /* Необходимо для позиционирования лоадера */
}

.chart-loader {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 16px;
}
.chart-loader div {
  position: absolute;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-accent, #6fa8dc);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.chart-loader div:nth-child(1) {
  left: 4px;
  animation: chart-loader1 0.6s infinite;
}
.chart-loader div:nth-child(2) {
  left: 4px;
  animation: chart-loader2 0.6s infinite;
}
.chart-loader div:nth-child(3) {
  left: 24px;
  animation: chart-loader2 0.6s infinite;
}
.chart-loader div:nth-child(4) {
  left: 44px;
  animation: chart-loader3 0.6s infinite;
}
@keyframes chart-loader1 {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
@keyframes chart-loader3 {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}
@keyframes chart-loader2 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(20px, 0); }
}

.book-row .total-volume-display {
    flex-basis: 35%;
    z-index: 10;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-row .chips-container {
    flex-basis: 30%;
    z-index: 10;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    display: flex;
    align-items: center;
}

.exchange-chip {
    color: var(--text-primary-inverted, #111);
    border-radius: 3px;
    padding: 1px 3px;
    font-size: 0.65rem;
    margin-left: 2px;
    display: inline-block;
    line-height: 1;
}

.book-row .price-span {
    flex-basis: 35%;
    z-index: 10;
    text-align: right;
    font-weight: 500;
}

.bar-segment {
    display: inline-block;
    height: 100%;
}

.book-row {
    display: flex;
    position: relative; /* Необходимо для позиционирования бара */
    justify-content: space-between;
    align-items: center;
    height: 22px; /* Фиксированная высота, как в APPROX_ROW_HEIGHT */
    padding: 0 8px;
    font-size: 0.8rem;
    overflow: hidden;
}

.book-row .row-volume,
.book-row .row-exchanges,
.book-row .row-price {
    z-index: 2; /* Чтобы текст был поверх бара */
    pointer-events: none; /* Чтобы события мыши проходили на .book-row */
}

.book-row .row-volume {
    flex: 1;
    text-align: left;
}

.book-row .row-exchanges {
    flex: 1;
    text-align: center;
    display: flex;
    gap: 2px;
    justify-content: center;
}

.book-row .row-price {
    flex: 1;
    text-align: right;
    font-weight: 500;
}

/* Стили для бара */
.row-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0; /* Для бидов */
    height: 100%;
    z-index: 1;
    transition: width 0.1s ease-in-out;
    opacity: 0.5;
}