[data-color-theme="dark"] body {
	background: #141517;
}

/* Card shadow */
.card {
	box-shadow: rgba(4, 9, 20, 0.03) 0px 0.46875rem 2.1875rem, rgba(4, 9, 20, 0.03) 0px 0.9375rem 1.40625rem, rgba(4, 9, 20, 0.05) 0px 0.25rem 0.53125rem, rgba(4, 9, 20, 0.03) 0px 0.125rem 0.1875rem;
	border-width: 0px;
	transition: 0.2s;
}

/* iOS PWA - content area background (covers body) */
.content-wrapper {
	background-color: transparent !important;
	background-image: linear-gradient(to top, #cfd9df, #e2ebf0) !important;
}

[data-color-theme="dark"] .content-wrapper {
	background-image: none !important;
	background-color: #1a1a1f !important;
}

/* ── Прелоадер раздела (htmx tab-навигация: innerHTML-свап #content-inner) ──
   Оверлей висит на .content-wrapper (переживает swap внутренностей #content-inner);
   на время загрузки старые карточки притухают, по центру крутится спиннер. */
.content-wrapper { position: relative; }
#content-inner { transition: opacity .15s ease; }
/* Оверлей переключения раздела — полупрозрачный синий #315292 (как сплэш перехода
   в head.php) + маленький белый спиннер в правом нижнем углу. Контент не гасим
   opacity — вуаль сама даёт затемнение; pointer-events:none блокирует клики. */
.content-wrapper.fxm-section-loading > #content-inner { pointer-events: none; }
#fxm-section-loader { position: absolute; inset: 0; z-index: 30; display: none; pointer-events: none; }
#fxm-section-loader.show { display: flex; justify-content: center; align-items: center; background: rgba(49, 82, 146, .3); }
#fxm-section-loader .fxm-sl-spin {
	width: 28px; height: 28px; border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .3);
	border-top-color: #fff; border-right-color: #fff;
	animation: fxm-sl-rot .7s linear infinite;
}
@keyframes fxm-sl-rot { to { transform: rotate(360deg); } }

/* Page background */
.bg_page {
	background-image: linear-gradient(to top, #d9e1e5 0%, #eff3f6 100%);
	background-attachment: fixed;
	min-height: 100vh;
}
.bg_spage {
	background-color: #3f6ad8;
}

:root,
[data-color-theme=light] {
	--font-sans-serif: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
	--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--body-font-family: var(--font-sans-serif);

	/* FXmonitor colors from previous version */
	--primary: #3f6ad8;
	--secondary: #6c757d;
	--success: #3ac47d;
	--info: #16aaff;
	--warning: #f7b924;
	--danger: #d92550;
	--light: #eee;
	--dark: #343a40;
	--focus: #444054;
	--alternate: #794c8a;
}

/* Background colors */
.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-light { background-color: var(--light) !important; }
.bg-dark { background-color: var(--dark) !important; }
.bg-focus { background-color: var(--focus) !important; }
.bg-alternate { background-color: var(--alternate) !important; }

/* Gradient backgrounds */
.bg-malibu { background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important; }
.bg-aurora { background: linear-gradient(180deg, #2af598 0%, #009efd 100%) !important; }
.bg-flamingo { background: linear-gradient(to top, #ff0844 0%, #ffb199 100%) !important; }
.bg-unicorn { background: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%) !important; }
.bg-fxi { background: linear-gradient(to top, #16AAFD 0%, #7EFFE5 100%) !important; }
.bg-fxm { background: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%) !important; }
.bg-navbar { background: linear-gradient(to top, #233d6e, #315292); }

/* Text colors */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success { color: var(--success) !important; }
.text-info { color: var(--info) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-light { color: var(--light) !important; }
.text-dark { color: var(--dark) !important; }
.text-focus { color: var(--focus) !important; }
.text-alternate { color: var(--alternate) !important; }

/* Border colors */
.border-primary { border-color: var(--primary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-success { border-color: var(--success) !important; }
.border-info { border-color: var(--info) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-danger { border-color: var(--danger) !important; }
.border-light { border-color: var(--light) !important; }
.border-dark { border-color: var(--dark) !important; }
.border-focus { border-color: var(--focus) !important; }
.border-alternate { border-color: var(--alternate) !important; }

/* Solid buttons */
.btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-primary:hover { background-color: #2651be !important; border-color: #2651be !important; }
.btn-secondary { background-color: var(--secondary) !important; border-color: var(--secondary) !important; }
.btn-secondary:hover { background-color: #545b62 !important; border-color: #545b62 !important; }
.btn-success { background-color: var(--success) !important; border-color: var(--success) !important; }
.btn-success:hover { background-color: #2e9d64 !important; border-color: #2e9d64 !important; }
.btn-info { background-color: var(--info) !important; border-color: var(--info) !important; }
.btn-info:hover { background-color: #0090e2 !important; border-color: #0090e2 !important; }
.btn-warning { background-color: var(--warning) !important; border-color: var(--warning) !important; }
.btn-warning:hover { background-color: #e0a008 !important; border-color: #e0a008 !important; }
.btn-danger { background-color: var(--danger) !important; border-color: var(--danger) !important; }
.btn-danger:hover { background-color: #ad1e40 !important; border-color: #ad1e40 !important; }

/* Outline buttons */
.btn-outline-primary { color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-outline-primary:hover { background-color: var(--primary) !important; color: #fff !important; }
.btn-outline-secondary { color: var(--secondary) !important; border-color: var(--secondary) !important; }
.btn-outline-secondary:hover { background-color: var(--secondary) !important; color: #fff !important; }
.btn-outline-success { color: var(--success) !important; border-color: var(--success) !important; }
.btn-outline-success:hover { background-color: var(--success) !important; color: #fff !important; }
.btn-outline-info { color: var(--info) !important; border-color: var(--info) !important; }
.btn-outline-info:hover { background-color: var(--info) !important; color: #fff !important; }
.btn-outline-warning { color: var(--warning) !important; border-color: var(--warning) !important; }
.btn-outline-warning:hover { background-color: var(--warning) !important; color: #212529 !important; }
.btn-outline-danger { color: var(--danger) !important; border-color: var(--danger) !important; }
.btn-outline-danger:hover { background-color: var(--danger) !important; color: #fff !important; }

/* Flat buttons */
.btn-flat-primary { color: var(--primary) !important; }
.btn-flat-primary:hover { background-color: rgba(63, 106, 216, 0.1) !important; }
.btn-flat-secondary { color: var(--secondary) !important; }
.btn-flat-secondary:hover { background-color: rgba(108, 117, 125, 0.1) !important; }
.btn-flat-success { color: var(--success) !important; }
.btn-flat-success:hover { background-color: rgba(58, 196, 125, 0.1) !important; }
.btn-flat-info { color: var(--info) !important; }
.btn-flat-info:hover { background-color: rgba(22, 170, 255, 0.1) !important; }
.btn-flat-warning { color: var(--warning) !important; }
.btn-flat-warning:hover { background-color: rgba(247, 185, 36, 0.1) !important; }
.btn-flat-danger { color: var(--danger) !important; }
.btn-flat-danger:hover { background-color: rgba(217, 37, 80, 0.1) !important; }

/* Alerts */
.alert-primary { background-color: rgba(63, 106, 216, 0.15) !important; border-color: rgba(63, 106, 216, 0.3) !important; color: #213770 !important; }
.alert-success { background-color: rgba(58, 196, 125, 0.15) !important; border-color: rgba(58, 196, 125, 0.3) !important; color: #1e6641 !important; }
.alert-info { background-color: rgba(22, 170, 255, 0.15) !important; border-color: rgba(22, 170, 255, 0.3) !important; color: #0b5885 !important; }
.alert-warning { background-color: rgba(247, 185, 36, 0.15) !important; border-color: rgba(247, 185, 36, 0.3) !important; color: #806013 !important; }
.alert-danger { background-color: rgba(217, 37, 80, 0.15) !important; border-color: rgba(217, 37, 80, 0.3) !important; color: #71132a !important; }

/* Badge colors */
.badge.bg-primary { background-color: var(--primary) !important; }
.badge.bg-secondary { background-color: var(--secondary) !important; }
.badge.bg-success { background-color: var(--success) !important; }
.badge.bg-info { background-color: var(--info) !important; }
.badge.bg-warning { background-color: var(--warning) !important; }
.badge.bg-danger { background-color: var(--danger) !important; }

/* Form switch - fixed animation */
.form-check-input {
	cursor: pointer;
}
.form-check-label {
	cursor: pointer;
}
.form-switch .form-check-input {
	width: 2.5rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	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='rgba(0,0,0,.25)'/%3e%3c/svg%3e");
	background-position: left center;
	background-size: contain;
	border-radius: 1.25rem;
	transition: background-position 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.form-switch .form-check-input:checked {
	background-position: right center;
	background-color: var(--primary);
	border-color: var(--primary);
	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");
}
.form-switch .form-check-input:focus {
	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='%233f6ad8'/%3e%3c/svg%3e");
	border-color: var(--primary);
	box-shadow: 0 0 0 0.2rem rgba(63, 106, 216, 0.25);
}
.form-switch .form-check-input:checked:focus {
	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");
}
.form-switch .form-check-input.switch-success:checked {
	background-color: var(--success) !important;
	border-color: var(--success) !important;
}
.form-switch .form-check-input.switch-success:focus {
	box-shadow: none !important;
	border-color: rgba(0, 0, 0, .25) !important;
}

/* Mobile sidebar backdrop */
.sidebar-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 1039;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sidebar-backdrop.show {
	opacity: 1;
	visibility: visible;
}

/* Mobile bottom navigation spacing */
@media (max-width: 991.98px) {
	.content-inner {
		padding-bottom: 70px;
	}

	/* Reduce header top padding on mobile */
	.navbar-static {
		padding-top: 0.4rem;
	}

	/* Reduce footer bottom padding on mobile, increase side padding */
	.fixed-bottom.navbar {
		padding-bottom: 0.4rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* Mobile: reduce side paddings */
@media (max-width: 575.98px) {
	.navbar {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.container-fluid {
		--bs-gutter-x: 1.8rem !important;
		padding-left: calc(var(--bs-gutter-x) * .5) !important;
		padding-right: calc(var(--bs-gutter-x) * .5) !important;
	}
	.page-header-content,
	.content {
		padding-left: 0.9rem !important;
		padding-right: 0.9rem !important;
	}
}

/* Avatar button with gradient border */
.avatar-wrapper {
	padding: 2px;
	border-radius: 50%;
	background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
	display: inline-flex;
}
.avatar-btn {
	width: 32px;
	height: 32px;
	padding: 0;
	font-size: 0.8rem;
	border: none;
}

/* Theme toggle link - prevent color change on click */
.theme-toggle-link,
.theme-toggle-link:hover,
.theme-toggle-link:active,
.theme-toggle-link:visited,
.theme-toggle-link:focus {
	color: inherit !important;
}

/* Gradient text (icon) - fxi palette: #7EFFE5 top → #16AAFD bottom */
.text-gradient-fxi {
	background: linear-gradient(to bottom, #7EFFE5 0%, #16AAFD 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent !important;
}

/* Gradient text (icon) - malibu palette: #4facfe left → #00f2fe right */
.text-gradient-malibu {
	background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent !important;
}

/* Desktop tabs active state */
.navbar-nav-link.active {
	background: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%) !important;
	color: #fff !important;
}
.navbar-nav-link.active:hover {
	color: #fff !important;
}

/* Mobile bottom nav styling */
.fixed-bottom .nav-link.active,
.fixed-bottom a.text-primary {
	color: var(--primary) !important;
}
.fixed-bottom a {
	text-decoration: none;
}
.fixed-bottom a:focus {
	outline: none;
	box-shadow: none;
}

/* Restore sidebar resized state before JS loads */
[data-sidebar-resized] .sidebar-main {
	width: 56px !important;
}
[data-sidebar-resized] .sidebar-main .sidebar-resize-hide {
	display: none !important;
}
[data-sidebar-resized] .sidebar-main .sidebar-resize-show {
	display: block !important;
}

/* Sidebar toggle button - no hover effect */
.nav-link.sidebar-main-resize:hover {
	background-color: transparent !important;
}

/* Dark theme */
[data-color-theme="dark"] {
	--primary: #2d5bbf;
}

[data-color-theme="dark"] .bg-navbar,
[data-color-theme="dark"] .sidebar {
	background: #141517 !important;
}

[data-color-theme="dark"] .bg-fxm,
[data-color-theme="dark"] .navbar-nav-link.active {
	background: var(--primary) !important;
}

[data-color-theme="dark"] .avatar-btn.bg-fxm {
	background: #000 !important;
}

[data-color-theme="dark"] .page-header .bg-light {
	background: #232429 !important;
	color: #fff !important;
}

[data-color-theme="dark"] .card .bg-light {
	background: #1a1b1f !important;
	color: #fff !important;
}

.page-header-light[data-color-theme="dark"],
[data-color-theme="dark"] .page-header-light:not([data-color-theme]),
html[data-color-theme="dark"] .page-header-light {
	background: #232429 !important;
}

[data-color-theme="dark"] .fixed-bottom {
	background: #141517 !important;
	border-color: #2a2a2d !important;
}

[data-color-theme="dark"] .page-header .navbar {
	background: transparent !important;
}

/* Dark theme alerts - light text for readability */
[data-color-theme="dark"] .alert-primary { color: #a3bfff !important; }
[data-color-theme="dark"] .alert-success { color: #7be8ac !important; }
[data-color-theme="dark"] .alert-info { color: #7dd3ff !important; }
[data-color-theme="dark"] .alert-warning { color: #ffd666 !important; }
[data-color-theme="dark"] .alert-danger { color: #ff8fa3 !important; }

/* Status dot */
.status-dot {
	position: relative;
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 7px;
	z-index: 1;
}
.status-dot--active {
	background: #3ac47d;
}
.status-dot--pause {
	background: #f7b924;
}
.status-dot--pause::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #f7b924;
	transform: translate(-50%, -50%) scale(1);
	z-index: -1;
	animation: pulse-ripple-pause 2s linear infinite;
}
@keyframes pulse-ripple-pause {
	0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
	30%  { opacity: 0.3; }
	60%  { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
	100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}
.status-dot--connect {
	background: #4facfe;
}
.status-dot--connect::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4facfe;
	transform: translate(-50%, -50%) scale(1);
	z-index: -1;
	animation: pulse-ripple-pause 2s linear infinite;
}
.status-dot--error {
	background: #d92550;
}
.status-dot--error::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #d92550;
	transform: translate(-50%, -50%) scale(1);
	z-index: -1;
	animation: pulse-ripple-error 1.2s linear infinite;
}
@keyframes pulse-ripple-error {
	0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
	30%  { opacity: 0.3; }
	60%  { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
	100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}
.status-dot--active::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #3ac47d;
	transform: translate(-50%, -50%) scale(1);
	z-index: -1;
	animation: pulse-ripple 2.5s linear infinite;
}
@keyframes pulse-ripple {
	0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
	30%  { opacity: 0.3; }
	60%  { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
	100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

/* Card header dropdown toggle - no focus ring, darker bg on press */
.card-header .dropdown > a {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease;
}
.card-header .dropdown > a:active,
.card-header .dropdown > a.show {
    background-color: #d0d0d0 !important;
}
[data-color-theme="dark"] .card-header .dropdown > a:active,
[data-color-theme="dark"] .card-header .dropdown > a.show {
    background-color: #2e2f35 !important;
}

/* Card section padding */
.card-header,
.card-body,
.card-footer {
	padding-left: 16px !important;
	padding-right: 16px !important;
}
.card-header {
	padding-right: 10px !important;
}

/* Название счёта в шапке — это ссылка (<a>), и при наведении тема красит её в синий
   link-hover. Гасим: сохраняем заданный цвет (text-body реал / text-secondary демо)
   на :hover/:focus/:active. Per-class — чтобы не сбить нужный оттенок. */
.card-header a.text-body:hover,
.card-header a.text-body:focus,
.card-header a.text-body:active {
	color: rgba(var(--body-color-rgb), 1) !important;
}
.card-header a.text-secondary:hover,
.card-header a.text-secondary:focus,
.card-header a.text-secondary:active {
	color: rgba(var(--secondary-rgb), 1) !important;
}

/* Card dividers */
.card-header, .card-footer,
.card-body .border-bottom {
	border-color: rgba(0, 0, 0, 0.06) !important;
}
[data-color-theme="dark"] .card-header,
[data-color-theme="dark"] .card-footer,
[data-color-theme="dark"] .card-body .border-bottom {
	border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Acc-card: равная высота карточек в строке грида + футер прижат к низу.
   Колонку делаем flex-контейнером — карточка как flex-item тянется на всю
   высоту колонки (align-items:stretch у колонки по умолчанию), а колонки в
   строке уже равны самой высокой (.row — flex, align-items:stretch).
   ВАЖНО: вертикальный зазор между карточками переносим с card.margin-bottom
   (его «съедает», когда карточка заполняет растянутую flex-строку — margin
   уходит внахлёст в следующую строку) на padding-bottom колонки — надёжно.
   #sym-modal не трогаем: там .acc-card — потомок .modal-content, не колонки.
   Тело (.card-body, дефолт Bootstrap flex:1 1 auto) НЕ растягиваем — иначе
   пустота копится внутри тела; margin-top:auto прижимает прогресс-полосу +
   футер к низу карточки (для arc без прогресса — сразу футер). */
[class*="col-"]:has(> .acc-card) { display: flex; padding-bottom: var(--spacer, 1.25rem); }
[class*="col-"] > .acc-card { flex: 1 1 auto; width: 100%; margin-bottom: 0; }
[class*="col-"] > .acc-card > .card-body { flex: 0 1 auto; }
[class*="col-"] > .acc-card > .acc-progress,
[class*="col-"] > .acc-card > .card-footer { margin-top: auto; }
[class*="col-"] > .acc-card > .acc-progress ~ .card-footer { margin-top: 0; }

/* Acc-card: прогресс-разделитель между body и footer (заменяет border-top футера). */
.acc-card .card-footer { border-top: 0 !important; }
/* ЭКГ-таймер: тонкий baseline + SVG-линия с тремя пиками, бегущая «голова»
   с fade-хвостом слева. Цикл 11 сек: 10 сек бег от левого края до правого,
   1 сек хвост уезжает за правый край и плавно тает.
   Фазовый сдвиг (animation-delay) — управляет Alpine accCard (см.
   view/layout/footer.php § _restartEkgAnim): на каждом polling-тике ставит
   `svg.style.animationDelay = "-N s"` где N — серверный upd, и force-reflow
   перезапускает CSS-keyframes. Server-rendered first-paint тоже ставит этот
   inline-style (см. партиалы), чтобы анимация была корректна до Alpine.init. */
/* Контейнер занимает ровно 1px в layout карточки — это высота baseline.
   SVG-линия вытянута на 16px и спозиционирована так, чтобы baseline в SVG
   совпадал с этим 1px, а пики (±5px) и fade-«голова» вылезали вверх/вниз
   и накладывались на соседние блоки (body/footer). По горизонтали обрезание
   обеспечивает сама fade-маска — справа от «головы» всё прозрачно. */
.acc-progress {
	height: 1px;
	background: transparent;
	position: relative;
}
.acc-progress-baseline {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: rgba(0, 0, 0, 0.10);
}
[data-color-theme="dark"] .acc-progress-baseline {
	background: rgba(255, 255, 255, 0.08);
}
/* Линия должна примыкать вплотную к футеру — без верхнего паддинга и border-top */
.acc-card .card-footer { padding-top: 0; border-top: none; }
.acc-progress-ekg {
	position: absolute;
	left: 0;
	/* baseline path в SVG на y=8 из viewBox 16, при height:15px → screen y=7.5px;
	   top:-7px → SVG-stroke попадает на y=0.5 контейнера (центр baseline-div'а 1px) */
	top: -7px;
	width: 100%;
	height: 15px;
	display: block;
	pointer-events: none;
	-webkit-mask: linear-gradient(to right,
		rgba(0,0,0,0)   0%,
		rgba(0,0,0,0)   30%,
		rgba(0,0,0,0.6) 45%,
		rgba(0,0,0,1)   50%,
		rgba(0,0,0,0)   50.1%,
		rgba(0,0,0,0)   100%);
	        mask: linear-gradient(to right,
		rgba(0,0,0,0)   0%,
		rgba(0,0,0,0)   30%,
		rgba(0,0,0,0.6) 45%,
		rgba(0,0,0,1)   50%,
		rgba(0,0,0,0)   50.1%,
		rgba(0,0,0,0)   100%);
	-webkit-mask-size: 200% 100%;
	        mask-size: 200% 100%;
	/* iteration-count:1 + fill-mode:forwards — бар играет один цикл и замирает
	   в финальном кадре (голова за правым краем). Новый цикл стартует только
	   на свежей DOM-ноде после htmx swap'а — то есть только когда реально
	   пришёл ответ от сервера. Длительность 11s = period + 1, чтобы анимация
	   с запасом доезжала до конца к моменту следующего ожидаемого ответа. */
	animation: acc-progress-ekg 11s linear 1 forwards;
}
.acc-progress-ekg path {
	stroke-width: 1.2;
	fill: none;
	vector-effect: non-scaling-stroke;
}
.acc-progress-ekg.ekg--success path { stroke: #69edea; }
.acc-progress-ekg.ekg--warning path { stroke: var(--warning); }
.acc-progress-ekg.ekg--danger  path { stroke: var(--danger);  }
@keyframes acc-progress-ekg {
	/* Длительность 11s. Голова доезжает до правого края к 10/11 ≈ 90.91% (= 10s),
	   далее последняя 1s — растворение хвоста за правым краем. */
	0%      { -webkit-mask-position: 100% 0;  mask-position: 100% 0;  animation-timing-function: linear; }
	90.91%  { -webkit-mask-position:   0% 0;  mask-position:   0% 0;  animation-timing-function: ease-out; }
	100%    { -webkit-mask-position: -60% 0;  mask-position: -60% 0; }
}

/* Acc-card "stale": счёт не отвечает (upd > 300s).
   Вешается ТОЛЬКО на сами значения (числа) внутри .card-body — НЕ на лейблы,
   НЕ на шапку и НЕ на футер. Исторические цвета остаются «как было», но цифры
   размыты + обесцвечены + полупрозрачны: пользователь видит оттенок (был ли
   зелёный/жёлтый/красный), но точное значение не читается — сигнал «устарело».
   Чёткими ВСЕГДА остаются: строка «Не отвечает» (красная плашка статуса)
   и красная плоская полоса .acc-progress--danger — активные маркеры offline. */
.acc-stale-fade {
	filter: blur(0.8px) saturate(0.5);
	opacity: 0.6;
}

/* Dark theme cards - darker background */
[data-color-theme="dark"] .card {
	background-color: #232429 !important;
	border-color: #2a2a2d !important;
}

/* Плашка символа в _acc_card_trading.php — состояние «нет позиции / нулевой PnL».
   Чуть темнее фона карточки в обеих темах (одинаковый «вдавленный» оттенок):
   light — #eee на #fff, dark — #1a1b1f на #232429 (тот же тон, что Limitless даёт
   .card .bg-light в dark). Текст — text-muted (не перетираем, в отличие от .bg-light). */
.bg-sym-empty                       { background: #eee !important; }
[data-color-theme="dark"] .bg-sym-empty { background: #1a1b1f !important; }

/* Плашка-индикатор советника заходит ПОД тело плашки. Тело (.fxm-sym-body) выше по
   z-index и отбрасывает 1px box-shadow цвета карточки — разделительная линия (повторяет
   скругление тела). Полоска (.fxm-sym-eabar) высотой 9px подтянута на -4px и торчит
   снизу на 5px (1px под разделителем + 4px цвета). Так в нижних углах нет «белых
   уголочков» от двух раздельных скруглений: тело перекрывает верх полоски, и его
   скруглённый низ подложен её цветом. box-shadow не клипуется overflow:hidden тела. */
.fxm-sym-body                       { position: relative; z-index: 1; box-shadow: 0 1px 0 0 #fff; }
[data-color-theme="dark"] .fxm-sym-body { box-shadow: 0 1px 0 0 #232429; }
/* Лёгкий блик-градиент сверху плашки: верхняя 1/5 высоты, белая полупрозрачность
   к нулю. Самую малость — даёт «глянец» по верхнему краю. pointer-events:none —
   не мешает клику по плашке. */
.fxm-sym-body::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 20%;
	background: linear-gradient(to bottom, rgba(255,255,255,0.22), rgba(255,255,255,0));
	pointer-events: none; z-index: 2;
}
.fxm-sym-eabar                      { position: relative; z-index: 0; height: 9px; margin-top: -4px; }

/* Раздел «Система»: +1px к межстрочному отступу (mb-1 = 4px → 5px). */
.fxm-sys-rows > .mb-1 { margin-bottom: 5px !important; }

/* ───────── Sym-modal (попап «детали по паре», см. view/_acc_card_trading_sym.php) ───────── */

/* Верт. отступы попапа. modal-dialog-centered центрирует диалог по вьюпорту,
   и высокий попап заезжает под навбар сверху и под нижнюю навигацию снизу.
   Даём padding-top/bottom контейнеру .modal → центрированный диалог ужимается
   и сдвигается к центру, сверху и снизу остаётся зазор (видны шапка и футер);
   бэкдроп (overlay) на весь экран не меняется. padding-right НЕ трогаем — его
   bootstrap выставляет инлайном под компенсацию скроллбара. Мобильный навбар
   чуть ниже → отступы меньше; sm+ — больше. */
#sym-modal { padding-top: 65px; padding-bottom: 86px; }
@media (min-width: 576px) {
	#sym-modal { padding-top: 77px; padding-bottom: 98px; }
}

/* Горизонтальные отступы шапки/тела/футера попапа — 16px, как у карточек
   (.card-header/.card-body/.card-footer). Дефолт Limitless = --spacer (20px),
   поэтому переопределяем модальные переменные прямо на #sym-modal: от них bootstrap
   считает паддинги шапки/футера И calc'и btn-close / footer>* margin — так всё
   остаётся внутренне согласованным (footer-padding 11px + child-margin 5px = 16px).
   Тело модала — p-0; его горизонталь задают паддинги колонок/таблицы (см. ниже). */
#sym-modal {
	--modal-padding: 16px;
	--modal-header-padding: 16px 16px;
	--modal-header-padding-x: 16px;
	--modal-header-padding-y: 16px;
}
/* Тень попапа — выраженнее, чтобы он сильнее «приподнимался» над страницей. */
#sym-modal .modal-content {
	box-shadow: 0 0.75rem 2.5rem rgba(4, 9, 20, 0.45);
}
/* Затемнение фона — чуть сильнее дефолта (0.5 → 0.6). Backdrop общий для всех
   модалок, так что эффект единый по сайту. */
.modal-backdrop {
	--bs-backdrop-opacity: 0.6;
}

/* Bootstrap `modal-dialog-scrollable` ставит `display:flex; flex-direction:column;
   max-height` на .modal-content и `flex:1 1 auto; overflow-y:auto` на .modal-body —
   но прямой потомок .modal-content у нас .acc-card (роль polling-якоря для
   restartCardPolling). Без явного flex'а на ней цепочка ломается → modal-body
   не получает flex-grow, прокрутка не работает (была жалоба пользователя 2026-05-08).
   Делаем .acc-card сама собой flex-column во всю высоту .modal-content. */
#sym-modal .modal-content > .acc-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	max-height: 100%;
	overflow: hidden;
}
#sym-modal .modal-content > .acc-card > .modal-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Шапка модала — сплошная заливка = цвету плашки пары (bg-* класс или inline
   для профита, см. _acc_card_trading_sym.php). border-bottom обнуляем: цветная
   шапка сама отделяет себя от тела, лишняя полоска не нужна.
   min-height = высоте шапки обычной карточки (.card-header), чтобы попап и
   карточки на странице были одной высоты: py-2 (0.625rem×2) + кнопка меню с
   иконкой (--icon-font-size 1.25rem + .p-1 0.3125rem×2) ≈ 50px, по факту в
   браузере .card-header = 51px (граница карточки). Контент попапа сам по себе
   ниже (самый высокий — TF-бейдж ~24px), поэтому без этого флора шапка попапа
   выходила 44px. */
#sym-modal .sym-modal-header {
	border-bottom: 0;
	min-height: 51px;
}

/* Мобильная шапка: при переносе содержимого (тикер/TF/цена слева, дата/время
   справа) на несколько строк row-gap от gap-2 (0.5rem) даёт слишком высокие
   строки. Ужимаем вертикальный зазор и паддинг шапки; горизонтальный gap не
   трогаем. row-gap !important — перебиваем bootstrap-утилиту .gap-2 (тоже !imp). */
@media (max-width: 575.98px) {
	#sym-modal .sym-modal-header {
		padding-top: 0.3rem !important;
		padding-bottom: 0.3rem !important;
	}
	#sym-modal .sym-modal-header .d-flex.flex-wrap {
		row-gap: 2px !important;
	}
}

/* ekg-полоса (#sym-modal-progress) теперь стоит между телом и подвалом — как в
   обычной карточке (.acc-card .card-footer, см. выше). У .modal-footer убираем
   border-top, чтобы ekg-линия примыкала к футеру вплотную, без двойной черты. */
#sym-modal .modal-footer {
	border-top: 0;
	background-color: rgba(var(--black-rgb), 0.015); /* = --card-cap-bg, тинт как у .card-footer */
	min-height: 51px; /* как у шапки (.sym-modal-header) — попап симметричен сверху/снизу */
}
/* Обнуляем ВЕРТИКАЛЬНЫЕ bootstrap-margin'ы детей футера (.modal-footer>* = 5px),
   иначе высокий бейдж советника (с иконкой 0.9rem) раздувает футер выше шапки.
   Горизонтальные margin'ы оставляем — на них держится выравнивание контента в 16px. */
#sym-modal .modal-footer > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* TradingView Symbol Overview Widget — фикс высота + отступы вокруг. Вкладки
   диапазона (1D/1M/…) даёт сам виджет (dateRanges, см. footer.php → initSymTvHost),
   от высоты они не зависят. На xs тянется содержимым. Padding вокруг + bg-card-tone
   фон, чтобы лишний раз не контрастировать с шапкой. */
#sym-modal .sym-modal-tv-col {
	padding: 14px 14px 14px 16px; /* график слева: левый — внешний край (16px), правый — зазор от показателей */
}
#sym-modal .sym-modal-tv {
	width: 100%;
	height: 280px;
	background: #f4f4f4; /* чуть светлее плашки без ордеров (#eee); dark — ниже */
	overflow: hidden;
	border-radius: 0.4rem;
}
[data-color-theme="dark"] #sym-modal .sym-modal-tv {
	background: var(--bs-dark, #212529); /* как шапка таблицы */
}
/* Рамка графика (.tv-widget-chart--with-border) живёт ВНУТРИ кросс-доменного
   iframe TradingView — нашим CSS не достать. Прячем клиппингом: iframe чуть больше
   контейнера и сдвинут на -1px, краевой бордер уходит за overflow:hidden + скругление
   у .sym-modal-tv. */
#sym-modal .sym-modal-tv iframe {
	border: 0;
	width: calc(100% + 2px) !important;
	height: calc(100% + 2px) !important;
	margin: -1px !important;
	display: block;
}

/* Единственная колонка показателей справа от графика (col-md-6). Две группы строк
   (риск + стороны/EA) стопкой; строки — в стиле карточки Система (d-flex justify-between,
   лейбл fs-sm text-muted, значение справа; тот же размер шрифта и высота строк). */
#sym-modal .sym-modal-stats-col {
	padding: 14px 16px 14px 4px; /* показатели справа: right 16 — внешний край; left 4 — зазор от графика */
	min-height: 280px;
}
/* < lg колонки складываются в стопку и тянутся на всю ширину: левый паддинг показателей
   (десктопный зазор-от-графика 4px) превратил бы лейблы во вприжимку к краю окна —
   возвращаем 16px как у карточек. Симметрично правый край графика. Брейкпоинт = lg
   (991.98px): modal-lg ниже 992px схлопывается до 500px, и колонки бок-о-бок там
   зажаты — переключаем на стэк ровно с этой точки (см. _sym_modal.php col-lg-*). */
@media (max-width: 991.98px) {
	/* min-height:300px нужен только на десктопе (колонка вровень с графиком сбоку);
	   на мобиле колонки стопкой → этот min-height давал большой пустой разрыв между
	   показателями и таблицей. Снимаем — блок по контенту. Заодно режем вертикальные
	   промежутки на стеке: TV ↔ показатели ↔ таблица. */
	#sym-modal .sym-modal-tv-col   { padding-right: 16px; padding-bottom: 4px; }
	#sym-modal .sym-modal-stats-col { padding-left: 16px; min-height: 0; padding-top: 6px; padding-bottom: 2px; }
	/* Нижний spacer: даёт .modal-body запас прокрутки, чтобы шапка таблицы (thead)
	   могла уехать к самому верху scroll-зоны (под шапку попапа) при клике на
	   аккордион — иначе короткой таблице некуда прокручиваться (контент ≈ вьюпорт). */
	#sym-modal .sym-modal-trades   { padding-top: 0; padding-bottom: 60vh; }
}
/* Строки показателей — равномерные: единый ритм (mb-1 у всех, без доп. отступов
   между группами) + вертикальное центрирование контента, чтобы строка с flex-значением
   советника была той же высоты, что текстовые. Высота строк — как в карточке Система. */
#sym-modal .sym-modal-stats-group > div {
	align-items: center;
}

/* Таблица сделок: компактная, ВСЕ ЯЧЕЙКИ ВЫРОВНЕНЫ ПО ЛЕВОМУ КРАЮ
   (ТЗ 2026-05-08 #2 — пользователь явно попросил). 11 колонок на ширине
   modal-xl (1140px). Числа держат tabular-nums для приличного выравнивания
   столбиком даже без text-end. */
#sym-modal .sym-modal-trades {
	padding: 0.5rem 16px; /* горизонталь 16px как у карточек */
}
/* Горизонтальная прокрутка: таблица из 11 nowrap-колонок не должна распирать
   попап — если не влезает по ширине, скроллится внутри своей обёртки. Обёртка
   оформлена как фрейм с бордером и скруглёнными углами; overflow-x:auto (не
   visible) → border-radius клипует содержимое, в т.ч. тёмную шапку таблицы. */
#sym-modal .sym-trades-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--border-color, #dee2e6);
	border-radius: 0.5rem;
}
[data-color-theme="dark"] #sym-modal .sym-trades-scroll {
	border-color: #2a2a2d;
}
#sym-modal .sym-trades-table {
	font-size: 12px;
	margin-bottom: 0;
}
#sym-modal .sym-trades-table th,
#sym-modal .sym-trades-table td {
	padding: 0.25rem 0.4rem;
	white-space: nowrap;
	text-align: left;
}
/* Шапка таблицы — тёмная, как бейдж таймфрейма в шапке попапа (bg-dark).
   Заголовки маленькими буквами (без uppercase), нормальным начертанием.
   vertical-align: middle перебивает дефолтный thead `vertical-align: bottom` из
   Bootstrap — заголовки центрируются по вертикали. */
#sym-modal .sym-trades-table th {
	font-weight: 400;
	color: #fff;
	background-color: var(--bs-dark, #212529);
	font-size: 0.68rem;
	/* Высота фиксирована 41px (как строки-аккордионы). vertical-align: top +
	   асимметричный паддинг: верхний (~14px) опускает первую строку так, что
	   ОДНОстрочный заголовок визуально по центру 41px, а первая строка ДВУ­строчного
	   (имя,/единица) — на том же уровне; нижний паддинг минимальный, чтобы две
	   строки влезли в 41px. */
	vertical-align: top;
	line-height: 1.15;
	height: 41px;
	padding-top: 10px;
	padding-bottom: 2px;
	border-bottom: 0;
	cursor: pointer;
	user-select: none;
}
/* Активная колонка сортировки — лейбл бирюзовым (цвет линии ЭКГ, .ekg--success). */
#sym-modal .sym-trades-table th.is-active {
	color: #69edea;
}
/* Иконка сортировки (Phosphor ph-sort-ascending/descending) — ПОСЛЕ названия,
   рисуется только у активной колонки (x-show → display:none у остальных), места
   заранее НЕ резервирует (компактнее; активная колонка чуть шире). */
#sym-modal .sym-trades-table th .sort-mark {
	font-size: 1.1em;
	margin-left: 0.2rem;
	vertical-align: middle;
	opacity: 0.85;
}
/* Последняя строка последней группы — без нижней границы (не задваивать с
   бордером фрейма .sym-trades-scroll). */
#sym-modal .sym-trades-table > tbody:last-child > tr:last-child > td {
	border-bottom: 0;
}
/* ===== Аккордион-группы Buy/Sell ===== */
/* Строка-сводка = тоггл: курсор-указатель, лёгкий тинт фона (без жирного). */
#sym-modal .sym-trades-table tr.sym-group-head,
#sym-modal .sym-trades-table tr.sym-magic-head {
	cursor: pointer;
	user-select: none;
}
#sym-modal .sym-trades-table tr.sym-group-head > td,
#sym-modal .sym-trades-table tr.sym-magic-head > td {
	background-color: rgba(0, 0, 0, 0.07);
	font-weight: 400;
	/* Высота сводки фиксированная 41px (под две строки мин-макс), даже если
	   контент в одну — строки сводок всегда одинаковой высоты. border-box:
	   41px включает паддинги, контентная зона ~33px вмещает две строки. */
	height: 41px;
	line-height: 1.35;
	vertical-align: middle;
}
[data-color-theme="dark"] #sym-modal .sym-trades-table tr.sym-group-head > td,
[data-color-theme="dark"] #sym-modal .sym-trades-table tr.sym-magic-head > td {
	background-color: rgba(255, 255, 255, 0.09);
}
/* Жирность в строках-сводках — только на ключевых колонках: направление/магик (1),
   Объём (2), Результат (10). Остальные значения (цена/дист/TP/SL/профит/комис/своп/
   длит) — обычным начертанием. */
#sym-modal .sym-trades-table tr.sym-group-head > td:nth-child(1),
#sym-modal .sym-trades-table tr.sym-group-head > td:nth-child(2),
#sym-modal .sym-trades-table tr.sym-group-head > td:nth-child(10),
#sym-modal .sym-trades-table tr.sym-magic-head > td:nth-child(1),
#sym-modal .sym-trades-table tr.sym-magic-head > td:nth-child(2),
#sym-modal .sym-trades-table tr.sym-magic-head > td:nth-child(10) {
	font-weight: 700;
}
#sym-modal .sym-trades-table .sym-caret {
	margin-right: 0.4rem;
	font-size: 0.85em;
	vertical-align: middle;
	opacity: 0.7;
}
/* Иерархия — ступенчатый отступ слева в 1-й колонке: +4px на уровень вложенности
   (направление = дефолт 0.4rem → магик → сделка). */
#sym-modal .sym-trades-table tr.sym-magic-head > td:first-child {
	padding-left: calc(0.4rem + 4px);
}
#sym-modal .sym-trades-table tr.sym-group-child > td:first-child {
	padding-left: calc(0.4rem + 8px);
}

/* Мобильная вёрстка: оставляем только Открытые сделки (1) + Объём (2) +
   Дист (4) + Итого (10) + Длит (11); прячем Цена откр (3), TP (5), SL (6),
   Профит (7), Комис. (8), Своп (9). Кнопка-стрелка в шапке попапа ставит на
   #sym-modal-trades класс .sym-trades-show-all → скрытые колонки возвращаются
   (с гориз. прокруткой). Брейкпоинт = lg (991.98px), как и стэк колонок выше. */
@media (max-width: 991.98px) {
	#sym-modal .sym-trades-table th:nth-child(3), #sym-modal .sym-trades-table td:nth-child(3),
	#sym-modal .sym-trades-table th:nth-child(5), #sym-modal .sym-trades-table td:nth-child(5),
	#sym-modal .sym-trades-table th:nth-child(6), #sym-modal .sym-trades-table td:nth-child(6),
	#sym-modal .sym-trades-table th:nth-child(7), #sym-modal .sym-trades-table td:nth-child(7),
	#sym-modal .sym-trades-table th:nth-child(8), #sym-modal .sym-trades-table td:nth-child(8),
	#sym-modal .sym-trades-table th:nth-child(9), #sym-modal .sym-trades-table td:nth-child(9) {
		display: none;
	}
	#sym-modal .sym-trades-show-all .sym-trades-table th:nth-child(3), #sym-modal .sym-trades-show-all .sym-trades-table td:nth-child(3),
	#sym-modal .sym-trades-show-all .sym-trades-table th:nth-child(5), #sym-modal .sym-trades-show-all .sym-trades-table td:nth-child(5),
	#sym-modal .sym-trades-show-all .sym-trades-table th:nth-child(6), #sym-modal .sym-trades-show-all .sym-trades-table td:nth-child(6),
	#sym-modal .sym-trades-show-all .sym-trades-table th:nth-child(7), #sym-modal .sym-trades-show-all .sym-trades-table td:nth-child(7),
	#sym-modal .sym-trades-show-all .sym-trades-table th:nth-child(8), #sym-modal .sym-trades-show-all .sym-trades-table td:nth-child(8),
	#sym-modal .sym-trades-show-all .sym-trades-table th:nth-child(9), #sym-modal .sym-trades-show-all .sym-trades-table td:nth-child(9) {
		display: table-cell;
	}
}




/* Dark theme - temporarily disabled to test Limitless default
[data-color-theme="dark"] {
	--bg-body: #000000;
	--bg-card: #131316;
	--bg-header: #131316;
	--text-primary: #e4e6eb;
	--text-secondary: #7a7d82;
	--border-color: #232328;
}

[data-color-theme="dark"] .bg-navbar {
	background: linear-gradient(to top, #0a0a0c, #131316) !important;
}

[data-color-theme="dark"] .btn.bg-fxm,
[data-color-theme="dark"] .navbar-nav-link.active {
	background: var(--primary) !important;
}

[data-color-theme="dark"] .avatar-btn.bg-fxm {
	background: #1a1a1f !important;
}

[data-color-theme="dark"] body {
	background-color: var(--bg-body);
	color: var(--text-primary);
}

[data-color-theme="dark"] .page-header-light {
	background-color: var(--bg-header) !important;
}

[data-color-theme="dark"] .page-header .navbar {
	background-color: var(--bg-header) !important;
}

[data-color-theme="dark"] .card {
	background-color: var(--bg-card);
	border-color: var(--border-color);
}

[data-color-theme="dark"] .card-header,
[data-color-theme="dark"] .card-footer {
	background-color: transparent;
	border-color: var(--border-color);
}

[data-color-theme="dark"] .sidebar-light {
	background-color: var(--bg-card);
}

[data-color-theme="dark"] .sidebar-light .nav-link {
	color: var(--text-secondary);
}

[data-color-theme="dark"] .sidebar-light .nav-link:hover {
	color: var(--text-primary);
}

[data-color-theme="dark"] .fixed-bottom {
	background-color: var(--bg-header) !important;
	border-color: var(--border-color) !important;
}

[data-color-theme="dark"] .fixed-bottom a.text-body {
	color: var(--text-secondary) !important;
}

[data-color-theme="dark"] .dropdown-menu {
	background-color: var(--bg-card);
	border-color: var(--border-color);
}

[data-color-theme="dark"] .dropdown-item {
	color: var(--text-primary);
}

[data-color-theme="dark"] .dropdown-item:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

[data-color-theme="dark"] .dropdown-divider {
	border-color: var(--border-color);
}

[data-color-theme="dark"] .dropdown-header {
	color: var(--text-secondary);
}

[data-color-theme="dark"] .bg-light {
	background-color: #252530 !important;
}

[data-color-theme="dark"] .text-muted {
	color: var(--text-secondary) !important;
}

[data-color-theme="dark"] .text-body {
	color: var(--text-primary) !important;
}

[data-color-theme="dark"] .text-dark {
	color: var(--text-primary) !important;
}

[data-color-theme="dark"] .navbar-nav-link {
	color: var(--text-secondary);
}

[data-color-theme="dark"] .navbar-nav-link:hover {
	color: var(--text-primary);
}

[data-color-theme="dark"] .border-top {
	border-color: var(--border-color) !important;
}

[data-color-theme="dark"] .content-wrapper {
	background-color: var(--bg-body);
}
*/

/* График «История»: курсор-указатель на всей области (ECharts ставит cursor на
   canvas сам — pointer только над элементами; форсим на весь холст). */
.history-chart, .history-chart > div, .history-chart canvas {
	cursor: pointer !important;
}

/* ============================================================================
 * Bootstrap dropdown popper-позиционирование (восстановлено после PurgeCSS).
 * Эти правила Bootstrap применяет через атрибут data-bs-popper, который Popper
 * навешивает в РАНТАЙМЕ — в статической разметке его нет, поэтому purge их режет
 * (см. purgecss.config.cjs). Без них .dropdown-menu-end не прижимается вправо и
 * меню (аватар/помощь) уезжает за край экрана. Живут здесь (custom.css не
 * подрезается) → переживают любой ре-purge all.min.css.
 * ==========================================================================*/
.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--dropdown-spacer)}
.dropdown-menu-start[data-bs-popper]{right:auto;left:0}
.dropdown-menu-end[data-bs-popper]{right:0;left:auto}
.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}
.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}
.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}
.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}
.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}
.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}
.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}
.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}
.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}
.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}
.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--dropdown-spacer)}
.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--dropdown-spacer)}
.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--dropdown-spacer)}