@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
@import url('_menu.css?v=7');
@import url('_widget.css?v=5');
@import url('_cadence.css?v=3');
@import url('_ats.css?v=11');

:root {
	/* === ПАЛИТРА ГлавПро (Light Mode) === */
	--brand-yellow: #FFE119;
	--brand-yellow-hover: #E6CB17;
	--brand-yellow-light: rgba(255, 225, 25, 0.12);
	--brand-yellow-glow: rgba(255, 225, 25, 0.35);
	--brand-dark: #1A1A2E;
	--brand-dark-soft: #232340;

	--app-bg: #F5F5F7;
	--card-bg: #FFFFFF;
	--panel-bg: #FFFFFF;
	--sidebar-bg: rgba(255, 255, 255, 0.82);

	--text-primary: #1A1A2E;
	--text-secondary: #6B7280;
	--text-tertiary: #B0B5BE;

	--input-bg: #ffffff;
	--input-text: #1A1A2E;
	--input-border: #E2E4E9;
	--input-placeholder: #9CA3AF;
	--input-bg-disabled: #F3F4F6;
	--input-text-disabled: #6B7280;
	--divider: rgba(0, 0, 0, 0.07);

	--accent: #FFE119;
	--accent-text: #1A1A2E;
	--accent-hover: #E6CB17;
	--accent-soft: rgba(255, 225, 25, 0.15);
	--link: #2563EB;
	--success: #10B981;
	--warning: #F59E0B;
	--danger: #EF4444;
	--purple: #8B5CF6;

	--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
	--shadow-elevated: 0 8px 30px rgba(0, 0, 0, 0.08);
	--glass: blur(25px) saturate(180%);

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;

	--font-ui: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

	/* CRM-2374: шкала размеров шрифта (1.125 modular).
	   Использовать в новом коде вместо хардкода px.
	   Применяются ВНУТРИ зоны масштабирования body[data-font-scale]. */
	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-md: 14px;
	--fs-lg: 16px;
	--fs-xl: 18px;
}

/* === CRM-2374: per-user font preferences ===
   Закрывает helpdesk #19 (Сердюкова: глаза устают, мелкий нечитаем).
   Размер шрифта (zoom) делегирован существующему механизму CRM-2124
   (localStorage `crm2124_zoom` + body.style.zoom inline) — наш JS
   синхронизируется с этим стейтом. CSS-правила html[data-font-scale]
   не работают: inline style на body перебивает их.

   Семейство шрифта хранится в cookie user-font-family (по образцу темы),
   data-font-family проставляется в index.php (PHP) и в JS-фолбэке. */

/* Семейство шрифта — переопределяем --font-ui через корневой селектор.
   Все правила, использующие var(--font-ui), подхватят автоматически. */
html[data-font-family="inter"] {
	--font-ui: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}
html[data-font-family="verdana"] {
	--font-ui: Verdana, Geneva, Tahoma, sans-serif;
}
html[data-font-family="system"] {
	--font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
/* Дефолт (data-font-family="roboto" или отсутствие атрибута) — оставляет --font-ui из :root. */

/* === CRM-2374: кнопка «настройки шрифта» в навбаре === */
.font-prefs-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--divider);
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 13px;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.font-prefs-btn:hover {
	background: var(--accent-soft);
	color: var(--text-primary);
}
.font-prefs-btn.active {
	background: var(--accent-soft);
	color: var(--text-primary);
}

/* === CRM-2374: модалка «настройки шрифта» === */
.font-prefs-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.font-prefs-dialog {
	background: var(--card-bg);
	color: var(--text-primary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-elevated);
	width: 480px;
	max-width: 100%;
	max-height: 90vh;
	overflow: auto;
	font-family: var(--font-ui);
}
.font-prefs-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--divider);
}
.font-prefs-head__title {
	font-size: 16px;
	font-weight: 600;
}
.font-prefs-close {
	background: transparent;
	border: 0;
	color: var(--text-secondary);
	font-size: 16px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
}
.font-prefs-close:hover {
	background: var(--input-bg-disabled);
	color: var(--text-primary);
}
.font-prefs-body {
	padding: 16px 20px;
}
.font-prefs-section + .font-prefs-section {
	margin-top: 18px;
}
.font-prefs-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.font-prefs-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.font-prefs-option {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	background: var(--input-bg);
	transition: border-color 0.15s ease, background 0.15s ease;
	font-size: 14px;
}
.font-prefs-option:hover {
	border-color: var(--accent);
}
.font-prefs-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.font-prefs-option span {
	font-weight: 500;
	color: var(--text-primary);
}
.font-prefs-option small {
	font-size: 12px;
	color: var(--text-tertiary);
}
.font-prefs-option:has(input:checked) {
	border-color: var(--accent);
	background: var(--accent-soft);
}
.font-prefs-hint {
	margin-top: 16px;
	padding: 10px 12px;
	font-size: 12px;
	color: var(--text-secondary);
	background: var(--input-bg-disabled);
	border-radius: var(--radius-sm);
}
.font-prefs-actions {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 20px 16px;
	border-top: 1px solid var(--divider);
}
.font-prefs-btn-reset,
.font-prefs-btn-done {
	padding: 8px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--input-border);
	background: var(--input-bg);
	color: var(--text-primary);
	font-size: 13px;
	cursor: pointer;
}
.font-prefs-btn-done {
	background: var(--accent);
	color: var(--accent-text);
	border-color: var(--accent);
	font-weight: 600;
}
.font-prefs-btn-reset:hover {
	background: var(--input-bg-disabled);
}
.font-prefs-btn-done:hover {
	background: var(--accent-hover);
}
@media (max-width: 480px) {
	.font-prefs-options { grid-template-columns: 1fr; }
}

/* === DARK MODE === */
[data-theme="dark"] {
	color-scheme: dark;
	--app-bg: #0F0F1A;
	--card-bg: #1A1A2E;
	--panel-bg: #141432;
	--sidebar-bg: rgba(26, 26, 46, 0.85);

	--text-primary: #F0F0F5;
	--text-secondary: #8B8FA3;
	--text-tertiary: #4A4E5A;

	--input-bg: #232340;
	--input-text: #F0F0F5;
	--input-border: #2E2E4A;
	--input-placeholder: #6B7280;
	--input-bg-disabled: #16162B;
	--input-text-disabled: #4A4E5A;
	--divider: rgba(255, 255, 255, 0.08);

	--accent: #FFE119;
	--accent-text: #1A1A2E;
	--accent-hover: #E6CB17;
	--accent-soft: rgba(255, 225, 25, 0.12);
	--link: #60A5FA;
	--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
	--shadow-elevated: 0 8px 30px rgba(0, 0, 0, 0.5);
}

* {
	box-sizing: border-box;
	outline: none;
}

/* Плавный переход темы — класс добавляется на время переключения */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
	transition: background-color 0.45s ease,
	            color 0.45s ease,
	            border-color 0.45s ease,
	            box-shadow 0.45s ease,
	            fill 0.45s ease !important;
}

/* Отключение анимаций — пользовательский выбор */
html.reduce-motion,
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
	animation-duration: 0s !important;
	transition-duration: 0s !important;
}

/* === GLOBAL SCROLLBAR — тонкий стиль === */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: var(--text-tertiary);
	border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--text-secondary);
}
/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--text-tertiary) transparent;
}

/* === GLOBAL LINKS === */
a {
	color: var(--link);
	text-decoration: none;
	transition: color 0.15s;
}
a:hover {
	color: var(--brand-dark);
	text-decoration: none;
}
[data-theme="dark"] a {
	color: var(--brand-yellow);
}
[data-theme="dark"] a:hover {
	color: #fff;
}

.btn.jmodedit {
	display: none !important;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--app-bg);
	color: var(--text-primary);
	font-family: var(--font-ui);
	font-size: 13px;
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
}

/* tmpl=component — модальные окна и iframe-страницы */
body.contentpane {
	height: auto;
	overflow: auto;
	display: block;
	background: var(--app-bg);
	color: var(--text-primary);
	padding: 24px 32px;
}

/* === TOP NAVBAR === */
.navbar {
	height: 54px;
	flex-shrink: 0;
	background: var(--sidebar-bg);
	backdrop-filter: var(--glass);
	-webkit-backdrop-filter: var(--glass);
	border-bottom: 1px solid var(--divider);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 24px;
	z-index: 100;
}

/* Отключаем Bootstrap псевдоэлементы для navbar */
.navbar:before,
.navbar:after {
	content: none !important;
}

.nav-left {
	display: flex;
	align-items: center;
	gap: 16px;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.menu-toggle-btn {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 1px solid var(--divider);
	background: transparent;
	color: var(--text-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: background 0.2s, color 0.2s;
	flex-shrink: 0;
}

.menu-toggle-btn:hover {
	background: rgba(118, 118, 128, 0.15);
}

.menu-toggle-btn:active {
	background: rgba(118, 118, 128, 0.25);
}

.brand-logo {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text-primary);
	text-transform: uppercase;
	cursor: pointer;
}

.brand-icon {
	width: 4px;
	height: 24px;
	background: var(--brand-yellow);
	border-radius: 2px;
	flex-shrink: 0;
	box-shadow: 0 0 8px var(--brand-yellow-glow);
}

.nav-btn {
	background: rgba(118, 118, 128, 0.12);
	border: none;
	padding: 6px 14px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: 0.2s;
}

.nav-btn:hover {
	background: rgba(118, 118, 128, 0.2);
}

.theme-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--divider);
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.reduce-motion-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--divider);
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.reduce-motion-btn.active {
	color: var(--text-primary);
	border-color: var(--brand-yellow);
}

/* === GRID LAYOUT === */
.grid-container {
	overflow: auto;
	/* CRM-3034: scroll-shadow indicator. Карточка клиента в режиме «две колонки»
	   на низких viewport (height ~660px) держит ~2200px контента в ~445px
	   полезной высоты — хронология за фолдом. Стандартный scrollbar (~10px)
	   пользователи не замечают, особенно если курсор внутри блока ЛПР со
	   своим скроллом .faces-panel-body — колесо «застревает» там.
	   Lea Verou pattern: linear-маски «прибиты» к контенту (background-attachment:
	   local), radial-тени к viewport scroll-контейнера (scroll). При прокрутке
	   маски уезжают вместе с контентом, открывая тени — это даёт «обрезанный
	   край» сверху/снизу, привычный UX-hint «есть контент за фолдом». */
	background:
		linear-gradient(var(--app-bg) 30%, rgba(0, 0, 0, 0)) center 0,
		linear-gradient(rgba(0, 0, 0, 0), var(--app-bg) 70%) center 100%,
		radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)) center 0,
		radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)) center 100%;
	background-repeat: no-repeat;
	background-size: 100% 24px, 100% 24px, 100% 10px, 100% 10px;
	background-attachment: local, local, scroll, scroll;
}



.container-fluid {
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	max-width: 960px;
	margin: 0 auto;
	width: 100%;
	padding: 0 20px;
}

/* CRM-2462: модификатор для табличных страниц (Заявки, Статистика).
   Снимает ограничение 960px — таблица помещается без горизонтального скролла. */
.container-fluid.container-fluid--wide {
	max-width: none;
}

/* CRM-2462 (фикс по фидбеку): на wide-листинге таблица занимает всю ширину,
   а filter-bar и pagination ужимаем до 1200px и центрируем — иначе «20»
   улетает на другой край экрана, между группами кнопок ~1300px пустоты. */
.container-fluid.container-fluid--wide .js-stools,
.container-fluid.container-fluid--wide .zayavkas-pagination {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* CRM-2462 (фикс gap'а в filter-dropdown): Joomla searchtools.js при клике
   на «Фильтрация» выставляет inline `style="display: block"`, что перебивает
   .js-stools-container-filters.shown { display: flex; gap: ... } из style.css.
   В block-контексте gap не работает, и inline-block-поля слипаются впритык
   (3px whitespace вместо 10px gap). !important гарантированно перебивает
   inline-style. Скоупим только wide-листингами, чтобы не задеть админку
   и legacy-шаблоны. */
.container-fluid.container-fluid--wide .js-stools-container-filters.shown {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px 10px;
	align-items: center;
}

/* CRM-3140: тот же баг inline display:block (см. CRM-2462 выше), но для
   НЕ-wide менеджерских листингов — /myorgs, /audits, /affs, /otkazs,
   /dolgs, /favors и т.п. Все они выводят панель searchtools внутри
   #j-main-container.fefiltr и НЕ имеют .container-fluid--wide, поэтому
   правило CRM-2462 их не покрывало, и фильтры слипались. Расширяем тот
   же приём на .fefiltr отдельным правилом (чтобы не ломать селектор/тест
   CRM-2462). Правило живёт в gp_salesos/style.css → на legacy-шаблон
   (css не подключается) и админку (.fefiltr там нет) не влияет. */
.fefiltr .js-stools-container-filters.shown {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px 10px;
	align-items: center;
}

/* BS3 Panels override for iOS style */
.panel {
	background: var(--card-bg) !important;
	border-radius: var(--radius-lg) !important;
	box-shadow: var(--shadow-card) !important;
	border: 1px solid var(--divider) !important;
	margin-bottom: 24px;
	position: relative;
}

.panel-heading {
	border-bottom: 1px solid var(--divider);
	background: transparent;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 43px;
	padding: 7px 15px;
}

.panel-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0;
}

/* Hero Card */
.hero-card {
	background: var(--card-bg);
	border-left: 4px solid var(--brand-yellow);
}

.hero-card .panel-body {
	padding: 20px;
}

.client-title {
	margin: 0;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--text-primary);
}

.client-details {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
	position: relative;
}

.badge {
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 20px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.b-ent {
	background: rgba(139, 92, 246, 0.1);
	color: var(--purple);
	border: 1px solid rgba(139, 92, 246, 0.2);
}

.b-primary {
	background: var(--accent-soft);
	color: var(--brand-dark);
	border: 1px solid rgba(255, 225, 25, 0.3);
	font-weight: 600;
}

.b-secondary {
	background: rgba(16, 185, 129, 0.1);
	color: var(--success);
	border: 1px solid rgba(16, 185, 129, 0.2);
}

.b-warning {
	background: rgba(255, 149, 0, 0.1);
	color: var(--warning);
	border: 1px solid rgba(255, 149, 0, 0.2);
}

.b-id {
	font-family: var(--font-mono);
	color: var(--text-secondary);
	background: var(--input-bg-disabled);
}

/* CRM-2273: единый размер 13px для верхнего ряда бейджей карточки v2
   (Время клиента / Прошлый 5-й / Рек. цена) — продолжение CRM-2267,
   где подняли ИНН/LS/ФИО ЛПР. До правки бейджи наследовали .badge=11px. */
.b-time {
	font-family: var(--font-mono);
	color: var(--text-secondary);
	background: var(--input-bg-disabled);
	font-size: 13px;
	padding: 5px 11px;
}

.client-meta {
	display: flex;
	gap: 24px;
	margin-top: 12px;
	font-size: 14px;
	color: var(--text-secondary);
	font-weight: 500;
}

.meta-link {
	color: var(--link);
	cursor: pointer;
	transition: 0.2s;
	border-bottom: 1px dashed rgba(37, 99, 235, 0.3);
}

/* Pipeline */
.pipeline {
	margin-top: 24px;
	display: flex;
	align-items: center;
	background: var(--input-bg);
	padding: 4px;
	border-radius: 12px;
	width: fit-content;
}

.pp-step {
	padding: 8px 18px;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	cursor: default;
	transition: 0.3s;
	display: flex;
	align-items: center;
	gap: 6px;
}

.pp-step.active {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	box-shadow: 0 2px 8px var(--brand-yellow-glow);
	font-weight: 700;
}

.pp-step.done {
	color: var(--success);
}

/* Split View */
.split-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

/* Inline widgets row (cadence + calendar) — CRM-1940, заменяет правую панель */
.v2-widgets-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}
@media (max-width: 900px) {
	.v2-widgets-row {
		grid-template-columns: 1fr;
	}
}

/* BS3 Table override for iOS style */
.table {
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	margin-bottom: 0;
	border-collapse: separate;
	border-spacing: 0;
}

.table>thead>tr>th {
	background: var(--card-bg);
	border-bottom: 2px solid var(--divider);
	padding: 12px;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.table>tbody>tr>td {
	border-bottom: 1px solid var(--divider);
	vertical-align: middle;
	background: transparent;
}

.table>tbody>tr:last-child>td {
	border-bottom: none;
}

.table-hover>tbody>tr:hover>td {
	background: var(--input-bg);
	transition: 0.2s;
}

/* === FACES CONTACTS TABLE === */
/* Override .table for contacts list */
.table {
	border-collapse: collapse;
	margin-bottom: 0;
}

.table>tbody>tr>td {
	border-top: none;
	border-bottom: 1px solid var(--divider);
	vertical-align: middle;
}

.table tr:last-child td {
	border-bottom: none;
}

.table tr:hover td {
	background: var(--accent-soft);
	transition: 0.2s;
}

/* Input group for email dropdown */

.input-group .form-control {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	flex: 1;
}

.no-resize {
	resize: none;
}

/* Стили для кнопки диктовки */
.btn-speech {
	font-size: 18px;
	transition: all 0.2s ease;
}

.btn-speech i {
	transition: color 0.2s ease;
}

.btn-speech.speaking i {
	color: #8B0000;
	animation: pulse-red 1s infinite;
}

.btn-speech.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-speech.disabled i {
	color: #9ca3af;
	/* Серый цвет для недоступного состояния */
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
	outline: none;
	border: 1px solid var(--divider);
}

.dropdown-menu {
	background: var(--card-bg);
	border: 1px solid var(--divider);
	border-radius: 8px;
	box-shadow: var(--shadow-elevated, 0 4px 12px rgba(0, 0, 0, 0.1));
	padding: 4px 0;
	min-width: 200px;
}

.dropdown-menu li a {
	padding: 8px 16px;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	transition: 0.2s;
}

.dropdown-menu li a:hover {
	background: var(--input-bg);
	text-decoration: none;
	color: var(--text-primary);
}

.dropdown-menu .divider {
	margin: 4px 0;
	border-top: 1px solid var(--divider);
}

/* === Bootstrap Modal — dark theme support === */
.modal-content {
	background: var(--card-bg);
	border: 1px solid var(--divider);
	border-radius: var(--radius-lg, 16px);
	color: var(--text-primary);
	box-shadow: var(--shadow-elevated);
}

.modal-header {
	border-bottom: 1px solid var(--divider);
	color: var(--text-primary);
}

.modal-header .close {
	color: var(--text-secondary);
	opacity: 0.7;
	text-shadow: none;
}

.modal-header .close:hover {
	color: var(--text-primary);
	opacity: 1;
}

.modal-body {
	color: var(--text-primary);
}

.modal-footer {
	border-top: 1px solid var(--divider);
}

.modal-backdrop.in {
	opacity: 0.5;
}

[data-theme="dark"] .modal-backdrop.in {
	opacity: 0.7;
}

/* Override inline styles from CMS content in dark theme modals */
[data-theme="dark"] .modal-body p[style*="background-color: #fff"],
[data-theme="dark"] .modal-body p[style*="background-color: #FFF"],
[data-theme="dark"] .modal-body p[style*="background-color: #ffffff"],
[data-theme="dark"] .modal-body span[style*="background-color: #fff"],
[data-theme="dark"] .modal-body span[style*="background-color: #FFF"],
[data-theme="dark"] .modal-body span[style*="background-color: #ffffff"],
[data-theme="dark"] .modal-body div[style*="background-color: #fff"],
[data-theme="dark"] .modal-body div[style*="background-color: #ffffff"],
[data-theme="dark"] .modal-body [style*="background-color: rgba(255, 255, 255"] {
	background-color: transparent !important;
}

[data-theme="dark"] .modal-body [style*="color: #000"],
[data-theme="dark"] .modal-body [style*="color:#000"],
[data-theme="dark"] .modal-body [style*="color: #111"],
[data-theme="dark"] .modal-body [style*="color:#111"],
[data-theme="dark"] .modal-body [style*="color: #222"],
[data-theme="dark"] .modal-body [style*="color:#222"],
[data-theme="dark"] .modal-body [style*="color: #333"],
[data-theme="dark"] .modal-body [style*="color:#333"] {
	color: var(--text-primary) !important;
}

/* === Tooltip dark theme === */
.tooltip-inner {
	background: #1A1A2E !important;
	color: #fff !important;
	border-radius: 6px;
	font-size: 12px;
	padding: 6px 12px;
	max-width: 300px;
}

.tooltip.top .tooltip-arrow {
	border-top-color: #1A1A2E !important;
}
.tooltip.bottom .tooltip-arrow {
	border-bottom-color: #1A1A2E !important;
}
.tooltip.left .tooltip-arrow {
	border-left-color: #1A1A2E !important;
}
.tooltip.right .tooltip-arrow {
	border-right-color: #1A1A2E !important;
}

[data-theme="dark"] .tooltip-inner {
	background: #2A2A3E !important;
	color: #F0F0F5 !important;
	border: 1px solid var(--divider);
}
[data-theme="dark"] .tooltip.top .tooltip-arrow { border-top-color: #2A2A3E !important; }
[data-theme="dark"] .tooltip.bottom .tooltip-arrow { border-bottom-color: #2A2A3E !important; }
[data-theme="dark"] .tooltip.left .tooltip-arrow { border-left-color: #2A2A3E !important; }
[data-theme="dark"] .tooltip.right .tooltip-arrow { border-right-color: #2A2A3E !important; }

/* CRM-2241: читаемый Bootstrap popover в тёмной теме (по умолчанию popover идёт
   со светлым фоном + серым текстом — на dark bg виден только заголовок).
   Затронутые попаперы в v2: «Постоянный клиент» (.regular-client-popover),
   любые будущие data-toggle="popover". */
[data-theme="dark"] .popover {
	background: #2A2A3E !important;
	border: 1px solid var(--divider) !important;
	color: #F0F0F5 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .popover-title {
	background: rgba(255, 255, 255, 0.04) !important;
	border-bottom: 1px solid var(--divider) !important;
	color: #F0F0F5 !important;
}
[data-theme="dark"] .popover-content {
	color: #F0F0F5 !important;
}
[data-theme="dark"] .popover-content hr {
	border-top-color: var(--divider) !important;
	border-color: var(--divider) !important;
}
[data-theme="dark"] .popover-content a {
	color: #FFE119 !important;
}
[data-theme="dark"] .popover-content a:hover {
	color: #FFF266 !important;
}
/* Стрелки popover — Bootstrap 3 рисует двойной border (outer/inner) */
[data-theme="dark"] .popover.top > .arrow { border-top-color: var(--divider) !important; }
[data-theme="dark"] .popover.top > .arrow::after { border-top-color: #2A2A3E !important; }
[data-theme="dark"] .popover.bottom > .arrow { border-bottom-color: var(--divider) !important; }
[data-theme="dark"] .popover.bottom > .arrow::after { border-bottom-color: rgba(255, 255, 255, 0.04) !important; }
[data-theme="dark"] .popover.left > .arrow { border-left-color: var(--divider) !important; }
[data-theme="dark"] .popover.left > .arrow::after { border-left-color: #2A2A3E !important; }
[data-theme="dark"] .popover.right > .arrow { border-right-color: var(--divider) !important; }
[data-theme="dark"] .popover.right > .arrow::after { border-right-color: #2A2A3E !important; }

/* === Select element styling === */
select.form-control,
select.selectstate,
select.inpzakaz,
select.inputbox,
.panel-body select,
.stthomeoffice select,
.sttcalc select,
.sttlkoffice select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 30px;
	border: 1px solid var(--divider);
	background-color: var(--input-bg, #fff);
	color: var(--text-primary);
	font-size: 13px;
	line-height: 1.4;
	height: 34px;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

select.form-control:focus,
select.selectstate:focus,
select.inpzakaz:focus,
select.inputbox:focus,
.panel-body select:focus,
.stthomeoffice select:focus,
.sttcalc select:focus,
.sttlkoffice select:focus {
	outline: none;
	border-color: var(--accent, #FFE119);
	box-shadow: 0 0 0 2px rgba(255, 225, 25, 0.25);
}

[data-theme="dark"] select.form-control,
[data-theme="dark"] select.selectstate,
[data-theme="dark"] select.inpzakaz,
[data-theme="dark"] select.inputbox,
[data-theme="dark"] .panel-body select,
[data-theme="dark"] .stthomeoffice select,
[data-theme="dark"] .sttcalc select,
[data-theme="dark"] .sttlkoffice select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238B8FA3' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-color: var(--input-bg, var(--card-bg));
	color: var(--text-primary);
	border-color: var(--input-border, var(--divider));
}

/* Dark theme select option elements */
[data-theme="dark"] select.form-control option,
[data-theme="dark"] select.selectstate option,
[data-theme="dark"] select.inpzakaz option,
[data-theme="dark"] select.inputbox option,
[data-theme="dark"] .focus-select option,
[data-theme="dark"] .panel-body select option,
[data-theme="dark"] .stthomeoffice select option,
[data-theme="dark"] .sttcalc select option,
[data-theme="dark"] .sttlkoffice select option {
	background: #1A1A2E;
	color: #F0F0F5;
}

/* Light theme select option elements */
select.form-control option,
select.selectstate option,
select.inpzakaz option,
select.inputbox option,
.focus-select option,
.panel-body select option,
.stthomeoffice select option,
.sttcalc select option,
.sttlkoffice select option {
	background: var(--card-bg, #fff);
	color: var(--text-primary, #1A1A2E);
}

/* Custom select & option styling */
select.form-control option,
select.selectstate option,
select.inpzakaz option,
select.inputbox option,
.focus-select option,
.panel-body select option,
.stthomeoffice select option,
.sttcalc select option,
.sttlkoffice select option {
	padding: 8px 12px;
	line-height: 1.6;
	font-size: 13px;
	border: none;
	outline: none;
}
select.form-control option:checked,
select.selectstate option:checked,
select.inpzakaz option:checked,
select.inputbox option:checked,
.focus-select option:checked,
.panel-body select option:checked,
.stthomeoffice select option:checked,
.sttcalc select option:checked,
.sttlkoffice select option:checked {
	background: var(--accent, #FFE119);
	color: var(--accent-text, #1A1A2E);
}
select.form-control option:hover,
select.selectstate option:hover,
select.inpzakaz option:hover,
select.inputbox option:hover,
.focus-select option:hover,
.panel-body select option:hover,
.stthomeoffice select option:hover,
.sttcalc select option:hover,
.sttlkoffice select option:hover {
	background: var(--input-bg);
}

/* === Global list-style reset for v2 === */
.container-fluid ul,
.container-fluid ol,
.focus-overlay ul,
.focus-overlay ol,
.widget-control ul,
.widget-control ol,
.ats-panel ul,
.ats-panel ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dropdown-menu {
	list-style: none;
}
.dropdown-menu li {
	list-style: none;
}

/* Table Bordered - скругленные углы */
.table.table-bordered {
	border: 1px solid var(--divider);
}

.table.table-bordered>thead>tr>th:first-child {
	border-top-left-radius: var(--radius-lg);
}

.table.table-bordered>thead>tr>th:last-child {
	border-top-right-radius: var(--radius-lg);
}

.table.table-bordered>tbody>tr:last-child>td:first-child {
	border-bottom-left-radius: var(--radius-lg);
}

.table.table-bordered>tbody>tr:last-child>td:last-child {
	border-bottom-right-radius: var(--radius-lg);
}

.table.table-bordered>thead>tr>th,
.table.table-bordered>tbody>tr>td {
	border: 1px solid var(--divider) !important;
}

.table.table-bordered>tbody>tr>td:first-child {
	border-left-width: 1px;
}

.table.table-bordered>tbody>tr>td:last-child {
	border-right-width: 1px;
}

.user-avatar {
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, #E9E9EB, #D1D1D6);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
	color: #636366;
}

/* BS3 Form control override for iOS style */
.form-control {
	width: 100%;
	border-radius: 10px;
	border: 1px solid var(--divider);
	background: var(--input-bg);
	color: var(--text-primary);
	font-size: 13px;
	font-family: var(--font-mono);
	transition: 0.2s;
	box-shadow: none;
}

.form-control:focus {
	border-color: var(--brand-yellow);
	box-shadow: 0 0 0 2px var(--brand-yellow-light);
	outline: none;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
	background: var(--input-bg-disabled);

}

.q-high {
	color: var(--success);
	background: rgba(16, 185, 129, 0.1);
}

/* Utility */
.w100 { width: 100%; }

.btn-round {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: var(--accent-soft);
	color: var(--brand-dark);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.2s;
	font-size: 14px;
}

.btn-round:hover {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	transform: scale(1.05);
	box-shadow: 0 2px 8px var(--brand-yellow-glow);
}

.btn-round.btn-sm {
	width: 24px;
	height: 24px;
	font-size: 12px;
}

/* Lock Screen */
.lock-container {
	position: relative;
	min-height: 160px;
}

.frosted-overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-lg);
	transition: opacity 0.4s;
}

[data-theme="dark"] .frosted-overlay {
	background: rgba(30, 30, 30, 0.5);
}

.unlock-pill {
	background: var(--card-bg);
	padding: 12px 28px;
	border-radius: 100px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	border: 1px solid var(--divider);
	font-weight: 600;
	color: var(--text-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	transition: transform 0.2s;
}

.unlock-pill:hover {
	transform: scale(1.03);
	color: var(--brand-dark);
	border-color: var(--brand-yellow);
}

/* === HISTORY SCROLL FIX === */
/* Добавляем контейнеру истории фиксированную высоту и скролл */
.history-container {
	max-height: 400px;
	/* Ограничиваем высоту */
	overflow-y: auto;
	/* Включаем скролл */
	position: relative;
	padding-left: 10px;
	-webkit-overflow-scrolling: touch;
}

/* Стилизация скроллбара (тонкий в стиле Mac) */
.history-container::-webkit-scrollbar {
	width: 5px;
}

.history-container::-webkit-scrollbar-track {
	background: transparent;
}

.history-container::-webkit-scrollbar-thumb {
	background: var(--text-tertiary);
	border-radius: 10px;
}

.history-container::-webkit-scrollbar-thumb:hover {
	background: var(--text-secondary);
}

.history-feed {
	position: relative;
	padding-left: 20px;
	padding-right: 10px;
}

.history-feed::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: var(--divider);
	border-radius: 2px;
}

.h-dot {
	position: absolute;
	left: -24px;
	top: 0;
	width: 10px;
	height: 10px;
	background: var(--card-bg);
	border: 2px solid var(--text-secondary);
	border-radius: 50%;
	z-index: 2;
}

.h-item.achievement .h-dot {
	border-color: var(--brand-yellow);
	background: var(--brand-yellow);
}

.h-meta {
	font-size: 11px;
	color: var(--text-secondary);
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px; /* CRM-2074: пробел между именем и датой */
}

.h-text {
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-primary);
}




/* BS3 Button overrides for iOS style */
.btn {
	border-radius: 8px;
	font-weight: 500;
	transition: 0.2s;
	border: 1px solid var(--divider);
	box-shadow: none;
}

.btn-primary {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border-color: var(--brand-yellow);
	font-weight: 600;
}

.btn-primary:hover {
	background: var(--brand-yellow-hover);
	color: var(--brand-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px var(--brand-yellow-glow);
}

.btn-secondary {
	background: var(--input-bg);
	color: var(--text-primary);
}

.btn-secondary:hover {
	background: var(--divider);
}

/* btn-success — ГлавПро бренд */
.btn-success {
	background: var(--brand-yellow, #FFE119);
	color: var(--brand-dark, #1A1A2E);
	border-color: var(--brand-yellow-hover, #E6CB17);
	font-weight: 600;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
	background: var(--brand-yellow-hover, #E6CB17);
	color: var(--brand-dark, #1A1A2E);
	border-color: var(--brand-yellow-hover, #E6CB17);
	box-shadow: 0 4px 12px var(--brand-yellow-glow, rgba(255, 225, 25, 0.35));
}

/* btn-default */
.btn-default {
	background: var(--input-bg);
	color: var(--text-primary);
	border-color: var(--divider);
}

.btn-default:hover,
.btn-default:focus {
	background: var(--input-bg-disabled);
	color: var(--text-primary);
	border-color: var(--input-border);
}

/* btn-info */
.btn-info {
	background: var(--brand-dark, #1A1A2E);
	color: #fff;
	border-color: var(--brand-dark, #1A1A2E);
}

.btn-info:hover {
	background: var(--brand-dark-soft, #232340);
	color: #fff;
}

/* === OVERLAY: DIRECTORY === */
.overlay {
	position: fixed;
	inset: 0;
	background: var(--app-bg);
	z-index: 200;
	display: none;
	flex-direction: column;
	opacity: 0;
	transition: opacity 0.3s;
}

.overlay.open {
	opacity: 1;
}

.overlay-header {
	height: 60px;
	background: var(--card-bg);
	border-bottom: 1px solid var(--divider);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px;
}

.overlay-body {
	flex: 1;
	overflow-y: auto;
	padding: 40px;
}

.dir-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 8px;
	max-width: 1200px;
	margin: 0 auto;
}

.dir-table th {
	text-align: left;
	padding: 10px 20px;
	color: var(--text-secondary);
	font-size: 11px;
	text-transform: uppercase;
}

.dir-table td {
	background: var(--card-bg);
	padding: 16px 20px;
	border-top: 1px solid var(--divider);
	border-bottom: 1px solid var(--divider);
}

.dir-table tr td:first-child {
	border-left: 1px solid var(--divider);
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
}

.dir-table tr td:last-child {
	border-right: 1px solid var(--divider);
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
}

.dir-table tr:hover td {
	transform: scale(1.005);
	box-shadow: var(--shadow-card);
	transition: 0.2s;
	border-color: transparent;
}

.row-child td:first-child {
	padding-left: 60px;
	position: relative;
}

.row-child td:first-child::before {
	content: '↳';
	position: absolute;
	left: 30px;
	color: var(--text-tertiary);
	font-size: 16px;
}

/* === USER BLOCK IN NAVBAR === */
.user-block {
	position: relative;
}

.user-info {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.user-name {
	text-align: right;
	line-height: 1.2;
}

.user-name-text {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-primary);
}

.user-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	color: var(--text-secondary);
	cursor: pointer;
}

.user-avatar img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.user-avatar-placeholder {
	background: var(--input-bg-disabled);
}

.user-menu {
	position: absolute;
	top: 100%;
	right: 0;
	background: var(--card-bg);
	border: 1px solid var(--divider);
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	padding: 8px;
	min-width: 150px;
	display: none;
	z-index: 1000;
}

.user-menu-btn {
	width: 100%;
	background: none;
	border: none;
	padding: 8px 12px;
	text-align: left;
	cursor: pointer;
	border-radius: 6px;
	color: var(--text-primary);
	transition: 0.2s;
}

.user-menu-btn:hover {
	background: var(--input-bg);
}

/* === HISTORY ITEMS - COMPACT === */
.h-item {
	position: relative;
	margin-bottom: 12px;
	padding-left: 20px;
}

.h-card {
	background: var(--card-bg);
	border: 1px solid var(--divider);
	border-radius: 8px;
	padding: 8px 12px;
	box-shadow: var(--shadow-card);
}

.h-item.achievement .h-card {
	align-items: flex-start;
	gap: 10px;
	background: linear-gradient(135deg, var(--accent-soft) 0%, rgba(139, 92, 246, 0.05) 100%);
	border: 1px solid rgba(255, 225, 25, 0.25);
	border-radius: 12px;
	padding: 8px;
	display: flex;
	align-items: center;
}

.h-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--brand-yellow);
	color: var(--brand-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
	box-shadow: 0 4px 10px var(--brand-yellow-glow);
}

.h-content {
	flex: 1;
}

.tooltip {
	position: fixed !important;
	pointer-events: none;
}

.inline-flex {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}



/* === FACES STYLES === */
/* Panel body без верхнего отступа */
.faces-panel-body {
	padding-top: 0;
}

/* Пустое состояние контактов */
.empty-state-icon {
	font-size: 24px;
	color: var(--text-tertiary);
	margin-bottom: 8px;
}

.empty-state-text {
	color: var(--text-secondary);
}

/* Стили для ФИО */
.face-fio {
	font-weight: 600;
}

/* CRM-2311 (Пальмина 28.04 helpdesk #11): длинное ФИО ЛПР раздувало
   первую колонку <table.faces> и колонка контактов с кнопками звонка
   уезжала за правую границу панели — пользователь не мог позвонить.
   table-layout:fixed закрепляет ширину второй колонки (.faces-contact-column
   = 210px), а min-width:0 + word-break/overflow-wrap позволяют flex-child
   <span.face-fio-text> внутри .face-fio (display:flex) переноситься по
   словам/буквам вместо распирания td. */
.faces-panel-body table.faces {
	table-layout: fixed;
	width: 100%;
}
.face-fio-text {
	min-width: 0;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.face-position,
.face-comment {
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* Стили для должности */
.face-position {
	font-size: 11px;
	color: var(--text-secondary);
}

/* Стили для комментария.
   CRM-2164 (Мария 22.04.2026): в dark-теме var(--text-tertiary)=#4A4E5A
   практически невидимо на тёмном фоне карточки. Подняли контраст:
   light #555C72 (темнее чем #B0B5BE), dark #B5BAD0 (светлее чем #4A4E5A). */
.face-comment {
	font-size: 11px;
	color: #555C72;
	margin-top: 4px;
	font-style: italic;
}
[data-theme="dark"] .face-comment {
	color: #B5BAD0;
}

/* Ширина колонки с контактами */
.faces-contact-column {
	width: 210px;
}

/* Контролы телефона */
.phone-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

/* Контролы email */
.email-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Отступ для иконок в меню */
.dropdown-menu-icon {
	margin-right: 8px;
}

/* Стили для ошибок валидации */
.error {
	border-color: var(--danger) !important;
	box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.1) !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td>div {
	position: relative;
}

/* CRM-2165 → CRM-2171 (Мария 22.04.2026): ярко-красный «бил в глаза» →
   бордовый. Цвет устроил, но чип был слишком жирный/яркий — снижаем
   font-weight 700 → 600 и прозрачность фона (0.12 → 0.07 light,
   0.18 → 0.10 dark). Цифра-chip остаётся читаемой, но не кричит. */
span.infodt {
	color: #5B0000;
	background: rgba(139, 0, 0, 0.07);
	font-size: 10px;
	font-weight: 600;
	line-height: 12px;
	padding: 0 4px;
	border-radius: 8px;
	position: absolute;
	bottom: -3px;
	left: 2px;
}
[data-theme="dark"] span.infodt {
	color: #FFA8A8;
	background: rgba(255, 168, 168, 0.10);
}

/* ============================================
   DATETIMEPICKER — Кастомизация под дизайн v2
   Жёлтый акцент, скруглённые углы, glass-эффект
   ============================================ */
.xdsoft_datetimepicker {
	background: var(--card-bg, #fff) !important;
	border: 1px solid var(--divider, rgba(0,0,0,0.07)) !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
	padding: 8px !important;
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
	color: var(--text-primary, #1A1A2E) !important;
	overflow: hidden;
}

/* Заголовок месяца/года */
.xdsoft_datetimepicker .xdsoft_label {
	background: transparent !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--text-primary, #1A1A2E) !important;
	padding: 6px 4px !important;
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
	background: var(--card-bg, #fff) !important;
	border: 1px solid var(--divider) !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
	overflow: hidden;
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
	padding: 4px 10px !important;
	font-size: 12px !important;
	color: var(--text-primary, #1A1A2E) !important;
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
	background: var(--brand-yellow, #FFE119) !important;
	color: var(--accent-text, #1A1A2E) !important;
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
	background: var(--brand-yellow, #FFE119) !important;
	box-shadow: none !important;
	color: var(--accent-text, #1A1A2E) !important;
	font-weight: 700 !important;
}

/* Навигация (стрелки) */
.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_today_button {
	opacity: 0.6 !important;
	border-radius: 6px !important;
	transition: opacity 0.15s, background 0.15s !important;
}
.xdsoft_datetimepicker .xdsoft_prev:hover,
.xdsoft_datetimepicker .xdsoft_next:hover,
.xdsoft_datetimepicker .xdsoft_today_button:hover {
	opacity: 1 !important;
	background-color: var(--accent-soft, rgba(255,225,25,0.15)) !important;
}

/* Ячейки календаря */
.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
	background: var(--card-bg, #fff) !important;
	border: none !important;
	color: var(--text-primary, #1A1A2E) !important;
	font-size: 12px !important;
	border-radius: 8px !important;
	height: 30px !important;
	text-align: center !important;
	vertical-align: middle !important;
	transition: background 0.12s, color 0.12s !important;
}
.xdsoft_datetimepicker .xdsoft_calendar th {
	color: var(--text-secondary, #6B7280) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	text-align: center !important;
	letter-spacing: 0.03em !important;
}

/* Сегодня */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
	background: var(--brand-yellow-light, rgba(255,225,25,0.12)) !important;
	color: var(--accent-text, #1A1A2E) !important;
	font-weight: 700 !important;
}

/* Выбранная дата / текущая */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current {
	background: var(--brand-yellow, #FFE119) !important;
	box-shadow: 0 2px 8px rgba(255,225,25,0.35) !important;
	color: var(--accent-text, #1A1A2E) !important;
	font-weight: 700 !important;
}

/* Hover */
.xdsoft_datetimepicker .xdsoft_calendar td:hover {
	background: var(--accent-soft, rgba(255,225,25,0.15)) !important;
	color: var(--accent-text, #1A1A2E) !important;
	box-shadow: none !important;
}

/* Другой месяц */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month {
	opacity: 0.35 !important;
}

/* Подсвеченные дни (запланированные звонки) */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default {
	background: rgba(255,225,25,0.2) !important;
	box-shadow: inset 0 0 0 2px var(--brand-yellow, #FFE119) !important;
	color: var(--text-primary, #1A1A2E) !important;
}

/* Timepicker */
.xdsoft_datetimepicker .xdsoft_timepicker {
	width: 100px !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
	border: none !important;
	border-radius: 10px !important;
	overflow: hidden !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
	background: var(--card-bg, #fff) !important;
	border-top: 1px solid var(--divider, rgba(0,0,0,0.07)) !important;
	color: var(--text-primary, #1A1A2E) !important;
	font-size: 12px !important;
	font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
	text-align: center !important;
	padding: 6px 8px !important;
	min-width: 60px !important;
	letter-spacing: 0.5px !important;
	white-space: nowrap !important;
	transition: background 0.12s !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
	background: var(--accent-soft, rgba(255,225,25,0.15)) !important;
	color: var(--accent-text, #1A1A2E) !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
	background: var(--brand-yellow, #FFE119) !important;
	box-shadow: none !important;
	color: var(--accent-text, #1A1A2E) !important;
	font-weight: 700 !important;
}

/* Скроллбар */
.xdsoft_datetimepicker .xdsoft_scrollbar > .xdsoft_scroller {
	background: var(--text-tertiary, #B0B5BE) !important;
	border-radius: 4px !important;
}

/* Копирайт — скрываем */
.xdsoft_datetimepicker .xdsoft_copyright {
	display: none !important;
}

/* === Dark theme === */
[data-theme="dark"] .xdsoft_datetimepicker {
	background: var(--card-bg, #1A1A2E) !important;
	border-color: var(--divider, rgba(255,255,255,0.08)) !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2) !important;
}
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label {
	color: var(--text-primary, #F0F0F5) !important;
}
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar th {
	background: var(--card-bg, #1A1A2E) !important;
	color: var(--text-primary, #F0F0F5) !important;
}
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar th {
	color: var(--text-secondary, #8B8FA3) !important;
}
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
	background: var(--card-bg, #1A1A2E) !important;
	border-top-color: var(--divider, rgba(255,255,255,0.08)) !important;
	color: var(--text-primary, #F0F0F5) !important;
}
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
	background: var(--card-bg, #1A1A2E) !important;
	border-color: var(--divider) !important;
}
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
	color: var(--text-primary, #F0F0F5) !important;
}

/* CRM-2709 (Артём 13.05.2026): иконки навигации datetimepicker'а
   рисуются плагином через data:URI спрайт тёмно-серым цветом
   (jquery.datetimepicker.css:111-115). На тёмной теме эти иконки
   сливаются с фоном, opacity 0.6 их добивает. Инвертируем спрайт
   через filter и поднимаем непрозрачность, чтобы стрелки и кнопка
   today были читаемы. Чёрная стрелка-«ёлочка» в .xdsoft_label
   (между названием месяца и года) — тот же приём. */
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_prev,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_next,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_today_button {
	filter: invert(1) brightness(1.4) !important;
	opacity: 0.85 !important;
}
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_prev:hover,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_next:hover,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_today_button:hover {
	opacity: 1 !important;
	background-color: rgba(255,225,25,0.18) !important;
}
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label i {
	filter: invert(1) brightness(1.4) !important;
	opacity: 0.8 !important;
}

/* Разделители строк в колонке времени: rgba(255,255,255,0.08) почти
   неотличимы от тёмного фона — слоты «09:00 МСК … 14:00 МСК»
   выглядят как одна сплошная масса. Поднимаем контраст до 0.18. */
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
	border-top-color: rgba(255,255,255,0.18) !important;
}


/* ============================================
   CALENDAR_DR — Годовой календарь звонков
   Поддержка dark theme для com_sttlkoffice/calendar
   ============================================ */
.sttlkoffice {
	color: var(--text-primary);
}
.calendar_dr .container {
	color: var(--text-primary);
}
.calendar_dr .month {
	border-color: var(--divider);
	background: var(--card-bg);
	box-shadow: var(--shadow-card);
	border-radius: var(--radius-md, 12px);
}
.calendar_dr .month-name {
	color: var(--text-primary);
}
.calendar_dr table td,
.calendar_dr table th {
	color: var(--text-primary);
}
.calendar_dr .weekend {
	color: var(--danger, #EF4444);
}
.calendar_dr .task {
	background-color: var(--input-bg-disabled, #eee);
	color: var(--text-primary);
}
.calendar_dr .task.taskempty {
	background-color: transparent;
}
.calendar_dr .task.zproblem {
	background-color: var(--danger, #f00);
	color: #fff;
}
.calendar_dr h1 {
	color: var(--text-primary);
}
[data-theme="dark"] .calendar_dr .rearrange_modal,
[data-theme="dark"] .calendar_dr .zproblem_modal {
	background-color: var(--card-bg);
	border-color: var(--divider);
	color: var(--text-primary);
}
/* sttlkoffice stat tables — dark theme */
.sttlkoffice table.stat tr.row0 {
	background-color: var(--input-bg, #e0f0ff);
}
.sttlkoffice table.stat tr.row1 {
	background-color: var(--card-bg, #f8ffff);
}
.sttlkoffice table.stat td {
	color: var(--text-primary);
}
/* stthomeoffice stat tables — dark theme (страница Статистика) */
[data-theme="dark"] .stthomeoffice .stat th {
	background-color: var(--surface-bg, #1e1e2e) !important;
	color: var(--text-primary) !important;
}
[data-theme="dark"] .stthomeoffice .stat td {
	color: var(--text-primary);
}
[data-theme="dark"] .stthomeoffice table.facttarget th,
[data-theme="dark"] .stthomeoffice table.timestat th {
	background-color: var(--surface-bg, #1e1e2e) !important;
	color: var(--text-primary) !important;
}

/* ============================================
   RESPONSIVE DESIGN — Адаптивность v2
   Брейкпоинты: 1200 / 900 / 600
   ============================================ */

/* --- Laptop (≤1200px): сужаем workspace --- */
@media (max-width: 1200px) {
	.container-fluid {
		max-width: 100%;
		padding: 0 16px;
	}
	.split-cols {
		gap: 16px;
	}
	.pipeline {
		flex-wrap: wrap;
		width: 100%;
	}
	.pp-step {
		padding: 6px 12px;
		font-size: 11px;
	}
}

/* --- Tablet (≤900px): одна колонка, виджеты внизу --- */
@media (max-width: 900px) {
	html {
		overflow-x: hidden;
	}
	body {
		height: auto;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.grid-container {
		flex-direction: column;
		max-width: 100%;
	}
	.container-fluid {
		max-width: 100%;
		padding: 0 12px;
	}
	.split-cols {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.hero-card .panel-body .row {
		flex-direction: column;
	}
	.hero-card .col-md-4 {
		text-align: left;
		margin-top: 12px;
	}
	.client-title {
		font-size: 20px;
	}
	.client-details {
		flex-wrap: wrap;
		gap: 8px;
	}
	.client-meta {
		flex-wrap: wrap;
		gap: 8px;
		font-size: 12px;
	}
	.navbar {
		padding: 0 12px;
		height: 48px;
	}
	.nav-left, .nav-right {
		gap: 8px;
	}
	.panel {
		margin-bottom: 16px;
	}
	.faces-contact-column {
		width: auto;
	}
	.phone-controls {
		flex-wrap: nowrap;
	}
	.pipeline {
		flex-wrap: wrap;
		width: 100%;
	}
	.pp-step {
		padding: 6px 10px;
		font-size: 11px;
	}
	.btn {
		white-space: nowrap;
	}
	.panel-heading {
		flex-wrap: wrap;
		gap: 6px;
	}
}

/* --- Mobile (≤600px): компактный режим --- */
@media (max-width: 600px) {
	body {
		font-size: 12px;
	}
	.navbar {
		height: 44px;
		padding: 0 8px;
		gap: 8px;
	}
	.brand-logo {
		font-size: 13px;
	}
	.brand-icon {
		width: 24px; height: 24px;
		font-size: 12px;
	}
	.menu-toggle-btn {
		width: 30px; height: 30px;
		font-size: 14px;
	}
	.navbar .nav-left > div[style] {
		display: none;
	}
	.nav-left, .nav-right {
		gap: 6px;
	}
	.nav-btn {
		padding: 4px 8px;
		font-size: 11px;
	}
	.theme-btn, .reduce-motion-btn {
		width: 28px; height: 28px;
		font-size: 12px;
	}
	.container-fluid {
		padding: 0 8px;
	}
	.hero-card .panel-body {
		padding: 12px;
	}
	.client-title {
		font-size: 16px;
	}
	.badge {
		font-size: 10px;
		padding: 3px 8px;
	}
	.client-meta {
		font-size: 11px;
		gap: 6px;
	}
	.panel-heading {
		padding: 6px 12px;
		min-height: 36px;
		flex-wrap: wrap;
		gap: 4px;
	}
	.panel-title {
		font-size: 11px;
	}
	.panel-body, .focus-card-body {
		padding: 10px;
	}
	.processing .panel-body {
		padding: 12px 14px;
	}
	.processing .row {
		flex-direction: column;
		gap: 0;
	}
	.processing .row > [class*="col-"] {
		width: 100%;
	}
	.split-cols {
		gap: 12px;
	}
	.table > tbody > tr > td {
		padding: 8px 6px;
		font-size: 12px;
	}
	.form-control {
		font-size: 12px;
		padding: 6px 8px;
	}
	.btn-round {
		width: 30px; height: 30px;
		font-size: 12px;
	}
	.btn-round.btn-sm {
		width: 22px; height: 22px;
		font-size: 10px;
	}
	.h-card {
		padding: 6px 10px;
	}
	.h-text {
		font-size: 12px;
	}
	.h-meta {
		font-size: 10px;
	}
	.history-container {
		max-height: 300px;
	}
	.user-name { display: none; }
	.user-avatar { width: 28px; height: 28px; }
	.user-avatar img { width: 28px; height: 28px; }
	.pipeline {
		flex-wrap: wrap;
		gap: 4px;
	}
	.pp-step {
		padding: 4px 8px;
		font-size: 10px;
	}
	.btn {
		font-size: 11px;
		padding: 5px 10px;
	}
	.inline-flex {
		flex-wrap: wrap;
		gap: 4px;
	}
	.v2-orgemail {
		margin-left: 0;
		width: 100%;
	}
	.v2-orgemail .form-control {
		width: 100%;
	}
	/* Custom select mobile */
	.cs-wrap { min-width: 100px; font-size: 12px; }
	.cs-trigger { padding: 6px 10px; }
	.cs-option { padding: 7px 10px; font-size: 12px; }
	.cs-dropdown { max-height: 200px; }

	/* Mobile: Hero card improvements */
	.client-details {
		flex-wrap: wrap;
		gap: 6px;
	}
	.client-meta {
		flex-direction: column;
		gap: 8px;
		align-items: flex-start;
	}
	.v2-orgemail {
		width: 100%;
		margin-left: 0;
	}
	.v2-orgemail .form-control {
		width: 100%;
	}
	.v2-orgemail .form-control:hover,
	.v2-orgemail .form-control:focus {
		width: 100%;
		max-width: 100%;
	}

	/* Mobile: Action buttons — full width stack */
	.hero-card div[style*="display:flex"][style*="gap:8px"] {
		flex-direction: column;
		width: 100%;
	}
	.btn-focus-mode, .btn-ats-demo {
		width: 100%;
		justify-content: center;
		padding: 12px 16px;
		font-size: 13px;
		border-radius: 10px;
	}

	/* Mobile: Faces table — compact */
	.faces-contact-column {
		width: auto;
		min-width: 0;
	}
	.phone-controls,
	.email-controls {
		flex-wrap: nowrap;
		gap: 4px;
	}
	.phone-controls .form-control,
	.email-controls .form-control {
		font-size: 12px;
		min-width: 0;
		flex: 1;
	}

	/* Mobile: Panel spacing */
	.panel {
		margin-bottom: 12px;
		border-radius: var(--radius-md, 12px) !important;
	}
	.hero-card {
		border-radius: var(--radius-md, 12px) !important;
	}

	/* Mobile: Split cols gap */
	.split-cols {
		gap: 12px;
	}

	/* Mobile: Stats block */
	.v2-stats .panel-body {
		font-size: 12px;
		padding: 10px 12px;
	}
}

/* --- Small mobile (≤400px) --- */
@media (max-width: 400px) {
	.client-title {
		font-size: 14px;
	}
	.hero-card .panel-body {
		padding: 10px;
	}
	.btn-focus-mode, .btn-ats-demo {
		width: 100%;
		justify-content: center;
		padding: 10px 16px;
		font-size: 12px;
	}
	.navbar {
		padding: 0 6px;
	}
	.nav-btn {
		padding: 3px 6px;
		font-size: 10px;
	}
	.brand-logo {
		font-size: 12px;
		gap: 6px;
	}
	.panel-heading .btn,
	.panel-heading .btn-round {
		flex-shrink: 0;
	}
	.badge {
		font-size: 9px;
		padding: 2px 6px;
	}
	.client-meta {
		font-size: 11px;
	}
	.container-fluid {
		padding: 0 6px;
	}
	.v2-incoming-call {
		min-width: auto;
		width: calc(100% - 24px);
		padding: 16px 20px;
	}
	.v2-incoming-call .btn {
		min-width: 100px;
		font-size: 12px;
	}
}

/* =============================================
   Field save indicator (галочка сохранения)
   ============================================= */
.field-wrapper {
	position: relative;
}

.field-saved-indicator {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: #4CAF50;
	font-size: 16px;
	font-weight: 700;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 2;
}

.field-wrapper.saved .field-saved-indicator {
	opacity: 1;
}

/* =============================================
   Loader — загрузка формы контакта
   ============================================= */
.face-form-loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 260px;
	padding: 48px 16px;
	gap: 16px;
	color: var(--text-secondary);
}

.face-form-loader .spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--border-color, rgba(255,255,255,0.15));
	border-top-color: var(--brand-yellow);
	border-radius: 50%;
	animation: spin-loader 0.7s linear infinite;
}

@keyframes spin-loader {
	to { transform: rotate(360deg); }
}

/* =============================================
   Loader — загрузка формы квалификации
   ============================================= */
.orgqual_loading {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 0;
	color: var(--text-secondary);
	font-size: 13px;
}

.orgqual-spinner {
	width: 24px;
	height: 24px;
	border: 3px solid var(--divider, rgba(255,255,255,0.15));
	border-top-color: var(--brand-yellow, #FFE119);
	border-radius: 50%;
	animation: spin-loader 0.7s linear infinite;
	flex-shrink: 0;
}

/* === V2 PAGE STYLES — таблицы, календари, профиль === */

/* Единый стиль таблиц для v2 layout */
.v2-table {
	width: 100%;
	border-collapse: collapse;
}
.v2-table th {
	padding: 8px 12px;
	background: var(--accent-soft);
	color: var(--text-primary);
	font-weight: 600;
	text-align: left;
	border-bottom: 2px solid var(--divider);
	white-space: nowrap;
}
.v2-table td {
	padding: 8px 12px;
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider);
}
.v2-table tr:hover td {
	background: var(--accent-soft);
}
.v2-table .center { text-align: center; }
.v2-table .right { text-align: right; }

/* CRM-2397: Документация — карточки сгруппированы по типу интеграции */
.v2-doc-group { margin-bottom: 24px; }
.v2-doc-group:last-child { margin-bottom: 0; }
.v2-doc-group-head { margin-bottom: 12px; }
.v2-doc-group-title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	letter-spacing: 0.01em;
}
.v2-doc-group-desc {
	font-size: 13px;
	color: var(--text-secondary);
}
.v2-doc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}
.v2-doc-card {
	display: block;
	padding: 14px 16px;
	background: var(--card-bg, #fff);
	border: 1px solid var(--divider);
	border-radius: var(--radius-md, 12px);
	color: var(--text-primary);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.v2-doc-card:hover,
.v2-doc-card:focus {
	border-color: var(--brand-green);
	box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
	text-decoration: none;
	color: var(--text-primary);
	transform: translateY(-1px);
}
.v2-doc-card-title {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
}

/* CRM-2397: страница статьи документации */
.v2-doc-article { padding: 24px 28px; }
.v2-doc-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--text-secondary);
	text-decoration: none;
	margin-bottom: 16px;
	transition: color 0.15s ease;
}
.v2-doc-back:hover,
.v2-doc-back:focus {
	color: var(--brand-green);
	text-decoration: none;
}
.v2-doc-back-arrow { font-size: 15px; line-height: 1; }
.v2-doc-article-h1,
.v2-doc-article-title {
	margin: 0 0 8px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--text-primary);
	letter-spacing: -0.005em;
}
.v2-doc-article-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--divider);
	font-size: 12px;
	color: var(--text-secondary);
}
.v2-doc-chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--text-primary);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.01em;
}
.v2-doc-article-body {
	color: var(--text-primary);
	font-size: 14px;
	line-height: 1.6;
}
.v2-doc-article-body p { margin: 0 0 12px; }
.v2-doc-article-body b,
.v2-doc-article-body strong { font-weight: 600; }
.v2-doc-article-body h1,
.v2-doc-article-body h2 {
	font-size: 18px;
	font-weight: 600;
	margin: 24px 0 10px;
	color: var(--text-primary);
}
.v2-doc-article-body h3 {
	font-size: 15px;
	font-weight: 600;
	margin: 20px 0 8px;
}
.v2-doc-article-body a {
	color: var(--brand-green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	word-break: break-all;
	transition: text-decoration-thickness 0.1s ease;
}
.v2-doc-article-body a:hover,
.v2-doc-article-body a:focus {
	text-decoration-thickness: 2px;
}
/* URL внутри обычного текста (post-processing JS оборачивает в <code class="v2-doc-url">),
   а также любой <code> в теле статьи */
.v2-doc-article-body code,
.v2-doc-url {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: rgba(0, 0, 0, 0.045);
	padding: 1px 6px;
	border-radius: 4px;
	color: var(--text-primary);
	word-break: break-all;
}
[data-theme="dark"] .v2-doc-article-body code,
[data-theme="dark"] .v2-doc-url {
	background: rgba(255, 255, 255, 0.07);
}
/* Pre-блок (многострочный код): на тёмной теме Bootstrap-овский белый фон
   создавал «белую дыру» в статье. Делаем pre на той же палитре что и inline code. */
.v2-doc-article-body pre {
	background: rgba(0, 0, 0, 0.045);
	color: var(--text-primary);
	border: 1px solid var(--divider);
	padding: 12px 16px;
	border-radius: var(--radius-sm, 8px);
	margin: 12px 0;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.5;
	overflow: auto;
	white-space: pre;
	word-break: normal;
}
[data-theme="dark"] .v2-doc-article-body pre {
	background: rgba(255, 255, 255, 0.07);
}
/* Внутри pre оставляем code прозрачным — иначе двойной фон + рамка. */
.v2-doc-article-body pre code,
.v2-doc-article-body pre .v2-doc-url {
	background: transparent;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
	color: inherit;
}
/* HTTP-методы — маленький pill, цвет по семантике */
.v2-doc-method {
	display: inline-block;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 1px 7px;
	border-radius: 4px;
	background: var(--success, #10B981);
	color: #fff;
	text-transform: uppercase;
	vertical-align: 1px;
	margin: 0 2px;
}
.v2-doc-method[data-method="GET"] { background: #3b82f6; }
.v2-doc-method[data-method="POST"] { background: var(--success, #10B981); }
.v2-doc-method[data-method="PUT"], .v2-doc-method[data-method="PATCH"] { background: #f59e0b; }
.v2-doc-method[data-method="DELETE"] { background: #ef4444; }
/* Заголовки секций внутри статьи (после JS-обнаружения <b>...</b> в начале <p>) */
.v2-doc-section-title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 18px 0 6px;
}
/* Таблица параметров (генерится JS из «name - description» строк).
   Базовый стиль наследуется от .v2-doc-article-body table — те же
   UPPERCASE-заголовки, hover, моноширинная первая колонка с code-плашкой. */
.v2-doc-params { table-layout: auto; }
.v2-doc-article-body .v2-doc-params td:first-child { width: 1%; white-space: nowrap; }
/* Перебиваем .v2-doc-article-body table td { vertical-align: top } — для
   JS-генерируемых таблиц параметров центрируем по вертикали (имя короткое,
   описание может быть многострочным). */
.v2-doc-article-body .v2-doc-params td,
.v2-doc-article-body .v2-doc-params th { vertical-align: middle; }
/* Списки в теле статьи */
.v2-doc-article-body ul,
.v2-doc-article-body ol {
	margin: 8px 0 16px;
	padding-left: 24px;
}
.v2-doc-article-body ul li,
.v2-doc-article-body ol li {
	margin-bottom: 6px;
	line-height: 1.55;
}
/* Цитата */
.v2-doc-article-body blockquote {
	margin: 12px 0;
	padding: 10px 16px;
	border-left: 3px solid var(--brand-green);
	background: var(--accent-soft);
	border-radius: 4px;
	color: var(--text-primary);
}
.v2-doc-article-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 20px;
	font-size: 13px;
	background: var(--card-bg, #fff);
	border: 1px solid var(--divider);
	border-radius: var(--radius-md, 12px);
	overflow: hidden;
}
.v2-doc-article-body table th,
.v2-doc-article-body table td {
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--divider);
	height: auto !important;
}
.v2-doc-article-body table th {
	background: var(--accent-soft);
	color: var(--text-primary);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.v2-doc-article-body table tr:last-child td { border-bottom: 0; }
.v2-doc-article-body table tr:hover td { background: var(--accent-soft); }
/* Первая колонка таблиц параметров — имя параметра моноширинно */
.v2-doc-article-body table td:first-child {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 12.5px;
	color: var(--text-primary);
	white-space: nowrap;
}
/* Вторая колонка — тип, выделяем pill-ом */
.v2-doc-article-body table td:nth-child(2) {
	color: var(--text-secondary);
	font-size: 12px;
}
/* Третья колонка — обязательность, нюанс */
.v2-doc-article-body table td:nth-child(3) {
	color: var(--text-secondary);
	font-size: 12.5px;
}
/* первая колонка таблиц (имя параметра) — code-плашка, темплейт code задан выше */
.v2-doc-article-body table td:first-child {
	background: rgba(0, 0, 0, 0.045);
	border-radius: 4px;
	padding: 1px 6px;
}
[data-theme="dark"] .v2-doc-article-body table td:first-child {
	background: rgba(255, 255, 255, 0.07);
}

/* Календари v2 */
.v2-calendar {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	padding: 0;
}
.v2-calendar .month {
	background: var(--card-bg, #fff);
	border: 1px solid var(--divider);
	border-radius: var(--radius-md, 12px);
	padding: 14px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.v2-calendar .month-name {
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 8px;
	font-size: 15px;
	letter-spacing: 0.01em;
}
.v2-calendar table {
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}
.v2-calendar th {
	padding: 4px 2px;
	font-size: 10px;
	color: var(--text-secondary);
	text-align: center;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.v2-calendar th.weekend {
	color: var(--danger);
}
.v2-calendar td {
	padding: 3px 2px;
	font-size: 12px;
	text-align: center;
	color: var(--text-primary);
	vertical-align: top;
	position: relative;
	min-height: 32px;
	border-radius: 6px;
	transition: background 0.12s;
}
.v2-calendar td:hover {
	background: var(--accent-soft, rgba(255,225,25,0.08));
}
.v2-calendar td.weekend {
	color: var(--danger);
}
.v2-calendar td.today {
	background: var(--brand-yellow-light, rgba(255,225,25,0.15));
	font-weight: 700;
	box-shadow: inset 0 0 0 2px var(--brand-yellow, #FFE119);
	border-radius: 6px;
}
.v2-calendar .tasks {
	list-style: none;
	padding: 0;
	margin: 2px 0 0;
}
.v2-calendar .task {
	font-size: 10px;
	padding: 1px 4px;
	border-radius: 4px;
	background: var(--accent-soft);
	color: var(--text-primary);
	margin-bottom: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
	display: block;
	position: relative;
	cursor: help;
}
.v2-calendar .task-more {
	background: var(--brand-green, #4caf50);
	color: #fff;
	text-align: center;
	cursor: help;
	font-weight: 600;
}
/* CRM-2630: мгновенный CSS-tooltip с полным ФИО при наведении на ячейку
   календаря ДР. Native browser-tooltip приходит с ~1.5 сек задержкой и плохо
   виден при clientWidth ~36px — менеджер не успевал увидеть, у кого ДР. */
.v2-calendar .task[title]:hover::after {
	content: attr(title);
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--text-primary, #1a1a2e);
	color: var(--card-bg, #fff);
	padding: 5px 9px;
	border-radius: 6px;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	z-index: 9999;
	pointer-events: none;
	max-width: 320px;
	overflow: visible;
	text-overflow: clip;
}
.v2-calendar .task[title]:hover::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: var(--text-primary, #1a1a2e);
	z-index: 9999;
	pointer-events: none;
}

/* Dark theme — v2 page overrides */
[data-theme="dark"] .v2-table th {
	background: var(--accent-soft);
}
[data-theme="dark"] .v2-calendar .task {
	background: var(--accent-soft);
}
[data-theme="dark"] .btn-warning { color: #1a1a2e; }
/* CRM-2273: жёлтый брендовый btn-success в dark-теме должен сохранять
   тёмный текст (как .btn-warning рядом). Раньше color:#fff давал «белое
   на жёлтом» — нечитаемо для кнопок «Квалификация компании» / «Создать
   договор» в карточке обработки v2. */
[data-theme="dark"] .btn-success { color: var(--brand-dark, #1A1A2E); }

/* Пагинация в v2 таблицах */
.v2-table tfoot td { border-bottom: none; }
.pagination { margin: 8px 0; }
.pagination a, .pagination span { color: var(--text-primary); padding: 4px 10px; border-radius: var(--radius-sm, 4px); text-decoration: none; }
.pagination .active a, .pagination .active span { background: var(--brand-green); color: #fff; }
.pagination a:hover { background: var(--accent-soft); }

/* Статистика v2 */
.v2-stat .density-row td { padding: 4px 8px; font-size: 13px; }
.v2-stat .density-high { background: var(--success); color: #fff; }
.v2-stat .density-mid { background: var(--brand-yellow, #FFE119); color: #333; }
.v2-stat .density-low { background: var(--danger); color: #fff; }
.v2-stat .zp-block { padding: 12px; border-radius: 8px; background: var(--accent-soft); margin-bottom: 12px; }

/* Профиль / ЛК v2 */
.v2-profile .avatar-wrap { text-align: center; margin-bottom: 16px; }
.v2-profile .avatar-wrap img { border-radius: 50%; border: 3px solid var(--brand-green); max-width: 120px; }
.v2-profile .form-section { margin-bottom: 20px; }
.v2-profile .form-section label { color: var(--text-secondary); font-size: 13px; margin-bottom: 4px; display: block; }
.v2-profile select.form-control {
	background: var(--input-bg, var(--card-bg)); color: var(--text-primary);
	border: 1px solid var(--input-border, var(--divider)); border-radius: var(--radius-sm, 4px);
	padding: 8px 12px; max-width: 300px;
}
.v2-profile .file-input-wrap {
	display: inline-block; position: relative; overflow: hidden;
	border: 1px dashed var(--divider); border-radius: var(--radius-sm, 4px);
	padding: 12px 20px; cursor: pointer; color: var(--text-secondary);
	transition: border-color 0.2s;
}
.v2-profile .file-input-wrap:hover { border-color: var(--brand-green); }
.v2-profile .file-input-wrap input[type="file"] {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	opacity: 0; cursor: pointer;
}

/* Контентные страницы v2 (новости, документация) */
.v2-content { color: var(--text-primary); line-height: 1.6; }
/* Не схлопываем заголовки внутри .v2-doc-article-body — там свои отступы
   (24px над h2, 20px над h3). Иначе .v2-content h2 с margin:0 перебивал
   их из-за порядка в файле — заголовки секций «прилипали» к параграфам
   (CRM-2616, доклад «Входящая линия»). */
.v2-content h1,
.v2-content h2,
.v2-content h3 { color: var(--text-primary); margin: 0 0 12px; }
.v2-content .v2-doc-article-body h1,
.v2-content .v2-doc-article-body h2 { margin: 24px 0 10px; }
.v2-content .v2-doc-article-body h3 { margin: 20px 0 8px; }
.v2-content p { margin: 0 0 12px; }
.v2-content a { color: var(--brand-green); }
.v2-content img { max-width: 100%; height: auto; border-radius: 8px; }
.v2-content .article-item { padding: 16px 0; border-bottom: 1px solid var(--divider); }
.v2-content .article-item:last-child { border-bottom: none; }
.v2-content .article-date { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.v2-content .article-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.v2-content .article-title a { color: var(--text-primary); text-decoration: none; }
.v2-content .article-title a:hover { color: var(--brand-green); }
.v2-content .article-intro { color: var(--text-secondary); font-size: 14px; }

/* =============================================
   V2 ANIMATIONS — fade-in, loaders
   Уважает html.reduce-motion (animation-duration: 0s)
   ============================================= */

/* Fade-in для панелей */
@keyframes v2-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.v2-animate-in {
    animation: v2-fade-in 0.35s ease-out both;
}

/* Staggered delay для нескольких панелей */
.v2-animate-in:nth-child(2) { animation-delay: 0.07s; }
.v2-animate-in:nth-child(3) { animation-delay: 0.14s; }
.v2-animate-in:nth-child(4) { animation-delay: 0.21s; }
.v2-animate-in:nth-child(5) { animation-delay: 0.28s; }

/* Skeleton loader — пульсирующий placeholder */
@keyframes v2-skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.v2-skeleton {
    background: linear-gradient(90deg, var(--divider) 25%, var(--input-bg-disabled) 50%, var(--divider) 75%);
    background-size: 200% 100%;
    animation: v2-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
    min-height: 20px;
}

.v2-skeleton-line { height: 14px; margin-bottom: 8px; border-radius: 4px; }
.v2-skeleton-line.short { width: 60%; }
.v2-skeleton-line.medium { width: 80%; }
.v2-skeleton-block { height: 120px; margin-bottom: 12px; }

/* Spinner — для AJAX загрузок */
.v2-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 24px 0;
}

.v2-spinner::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid var(--divider);
    border-top-color: var(--brand-yellow);
    border-radius: 50%;
    animation: spin-loader 0.7s linear infinite;
}

/* Hover lift для карточек */
.v2-calendar .month {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.v2-calendar .month:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

/* Table row fade-in */
.v2-table tbody tr {
    transition: background-color 0.15s ease;
}

/* Panel hover subtle lift */
.container-fluid > .panel {
    transition: box-shadow 0.2s ease;
}
.container-fluid > .panel:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

/* =============================================
   FIX 1: Login page — стилизация формы авторизации
   ============================================= */
.login .well,
.login form.well,
.logout .well,
.logout form.well {
	background: var(--card-bg);
	border: 1px solid var(--divider);
	border-radius: var(--radius-md, 12px);
	box-shadow: var(--shadow-card);
	color: var(--text-primary);
	padding: 32px;
	max-width: 420px;
	margin: 40px auto;
}

.login .control-group {
	margin-bottom: 16px;
}

.login .control-group:has(input[type="checkbox"]) {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.login .control-group:has(input[type="checkbox"]) .control-label,
.login .control-group:has(input[type="checkbox"]) .controls {
	margin: 0;
	padding: 0;
}

.login .control-group:has(input[type="checkbox"]) input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--brand-yellow);
	cursor: pointer;
}

.login .control-group:has(input[type="checkbox"]) .control-label label {
	cursor: pointer;
	margin: 0;
}

.login .control-label {
	text-align: left;
	float: none;
	width: auto;
	padding-top: 0;
}

.login .control-label label {
	color: var(--text-secondary);
	font-weight: 500;
	font-size: 13px;
}

.login .control-label label .star {
	color: var(--danger);
}

.login .controls {
	margin-left: 0;
}

.login input[type="text"],
.login input[type="password"] {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 8px);
	padding: 10px 14px;
	font-size: 14px;
	width: 100%;
	max-width: 320px;
	transition: border-color 0.2s;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
	border-color: var(--brand-yellow);
	box-shadow: 0 0 0 3px var(--brand-yellow-light);
}

.login .btn-primary {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border: none;
	border-radius: var(--radius-sm, 8px);
	padding: 10px 28px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s;
}

.login .btn-primary:hover {
	background: var(--brand-yellow-hover);
}

.login + div .nav-tabs.nav-stacked {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 420px;
	margin: 8px auto 0;
	border: none;
}

.login + div .nav-tabs.nav-stacked > li {
	border: none;
}

.login + div .nav-tabs.nav-stacked > li > a {
	color: var(--text-secondary);
	padding: 8px 0;
	border: none;
	background: transparent;
	font-size: 13px;
	transition: color 0.15s;
}

.login + div .nav-tabs.nav-stacked > li > a:hover {
	color: var(--link);
	background: transparent;
	border: none;
}

/* Logout page — кнопка и контролы */
.logout .controls {
	margin-left: 0;
}

.logout .btn-primary {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border: none;
	border-radius: var(--radius-sm, 8px);
	padding: 10px 28px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s;
}

.logout .btn-primary:hover {
	background: var(--brand-yellow-hover);
}

/* =============================================
   FIX: Reset / Remind pages — стилизация форм
   ============================================= */
.reset .well,
.reset form.well,
.remind .well,
.remind form.well,
.reset-confirm .well,
.reset-confirm form.well,
.reset-complete .well,
.reset-complete form.well {
	background: var(--card-bg);
	border: 1px solid var(--divider);
	border-radius: var(--radius-md, 12px);
	box-shadow: var(--shadow-card);
	color: var(--text-primary);
	padding: 32px;
	max-width: 480px;
	margin: 40px auto;
}

.reset .control-group,
.remind .control-group,
.reset-confirm .control-group,
.reset-complete .control-group {
	margin-bottom: 16px;
}

.reset .control-label,
.remind .control-label,
.reset-confirm .control-label,
.reset-complete .control-label {
	text-align: left;
	float: none;
	width: auto;
	padding-top: 0;
}

.reset .control-label label,
.remind .control-label label,
.reset-confirm .control-label label,
.reset-complete .control-label label {
	color: var(--text-secondary);
	font-weight: 500;
	font-size: 13px;
}

.reset .controls,
.remind .controls,
.reset-confirm .controls,
.reset-complete .controls {
	margin-left: 0;
}

.reset input[type="text"],
.reset input[type="email"],
.reset input[type="password"],
.remind input[type="text"],
.remind input[type="email"],
.reset-confirm input[type="text"],
.reset-complete input[type="password"] {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 8px);
	padding: 10px 14px;
	font-size: 14px;
	width: 100%;
	max-width: 320px;
	transition: border-color 0.2s;
}

.reset input:focus,
.remind input:focus,
.reset-confirm input:focus,
.reset-complete input:focus {
	border-color: var(--brand-yellow);
	box-shadow: 0 0 0 3px var(--brand-yellow-light);
}

.reset .btn-primary,
.remind .btn-primary,
.reset-confirm .btn-primary,
.reset-complete .btn-primary {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border: none;
	border-radius: var(--radius-sm, 8px);
	padding: 10px 28px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s;
}

.reset .btn-primary:hover,
.remind .btn-primary:hover,
.reset-confirm .btn-primary:hover,
.reset-complete .btn-primary:hover {
	background: var(--brand-yellow-hover);
}

.reset fieldset p,
.remind fieldset p,
.reset-confirm fieldset p,
.reset-complete fieldset p {
	color: var(--text-secondary);
	font-size: 13px;
	line-height: 1.5;
	margin-bottom: 16px;
}

/* =============================================
   FIX 2: Calendar DR — улучшение dark theme
   ============================================= */
[data-theme="dark"] .v2-calendar .task {
	background: rgba(255, 225, 25, 0.10);
	color: var(--text-primary);
	border: 1px solid rgba(255, 225, 25, 0.15);
}

[data-theme="dark"] .v2-calendar .task-more {
	background: var(--brand-green, #4caf50);
	color: #fff;
	border: none;
}

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

[data-theme="dark"] .v2-calendar .month:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

[data-theme="dark"] .v2-calendar .month-name {
	color: var(--brand-yellow);
}

[data-theme="dark"] .v2-calendar td.day {
	color: var(--text-primary);
}

[data-theme="dark"] .v2-calendar td.today {
	background: rgba(255, 225, 25, 0.12);
	box-shadow: inset 0 0 0 2px var(--brand-yellow, #FFE119);
}

[data-theme="dark"] .v2-calendar td:hover {
	background: rgba(255, 225, 25, 0.08);
}

/* =============================================
   FIX 3: Premiums — select dark theme
   ============================================= */
[data-theme="dark"] .panel-body select.form-control,
[data-theme="dark"] .panel-body select.inputbox,
[data-theme="dark"] select.selectstate {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 8px);
}

[data-theme="dark"] .panel-body select.form-control option,
[data-theme="dark"] .panel-body select.inputbox option {
	background: var(--card-bg);
	color: var(--text-primary);
}

/* =============================================
   FIX 4: Invoices — MDB/sttstyle white bg overrides
   ============================================= */
.card,
body .card,
.container-fluid .card {
	background: var(--card-bg) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--divider) !important;
	border-radius: var(--radius-md, 12px) !important;
	box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,0.04)) !important;
}

.card-body,
body .card-body,
.card .card-body {
	background: transparent !important;
	color: var(--text-primary) !important;
	overflow-x: auto !important;
}

.card-header,
body .card-header,
.card .card-header {
	background: transparent !important;
	color: var(--text-primary) !important;
	border-bottom: 1px solid var(--divider) !important;
	font-weight: 600;
}

.blue-grey.lighten-4 {
	background: var(--accent-soft) !important;
	color: var(--text-primary) !important;
}

.blue-grey.lighten-4 th {
	color: var(--text-primary) !important;
}

/* Invoices inner form — override white backgrounds */
#j-main-container {
	background: transparent;
	color: var(--text-primary);
}

fieldset#filter-bar {
	background: transparent;
	border: none;
	color: var(--text-primary);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

fieldset#filter-bar .filter-label {
	color: var(--text-secondary);
}

fieldset#filter-bar select.inputbox {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 8px);
	padding: 6px 10px;
}

.adminlist.table {
	color: var(--text-primary);
}

.adminlist.table thead th {
	background: var(--card-bg);
	color: var(--text-secondary);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
	padding: 10px 8px;
	border-bottom: 2px solid var(--divider);
	border-top: none;
}
.adminlist.table thead th a {
	color: var(--text-secondary) !important;
	text-decoration: none;
}
.adminlist.table thead th a:hover {
	color: var(--link) !important;
}

.adminlist.table td {
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider);
}

.adminlist.table tr:hover td {
	background: var(--accent-soft);
}

/* Invoices — table-hover from MDB */
.card .table-hover tbody tr:hover {
	background: var(--accent-soft);
}

.card .table th,
.card .table td {
	color: var(--text-primary);
	border-color: var(--divider);
}

/* Chosen dropdown dark theme */
[data-theme="dark"] .chzn-container .chzn-results li {
	background: var(--card-bg);
	color: var(--text-primary);
}

[data-theme="dark"] .chzn-container .chzn-results li.highlighted {
	background: var(--accent-soft);
	color: var(--text-primary);
}

[data-theme="dark"] .chzn-container-single .chzn-single {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 8px);
	box-shadow: none;
}

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

/* Joomla search tools dark theme */
[data-theme="dark"] .js-stools-container-bar {
	background: transparent;
}

[data-theme="dark"] .js-stools-container-bar input,
[data-theme="dark"] .js-stools-container-bar select {
	background: var(--input-bg);
	color: var(--input-text);
	border-color: var(--input-border);
}

/* Alert — both themes */
.alert-no-items {
	background: rgba(118, 118, 128, 0.08) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--divider) !important;
	border-radius: var(--radius-sm, 8px);
	padding: 14px 18px;
	font-size: 13px;
	text-align: center;
}

[data-theme="dark"] .alert-no-items {
	background: rgba(255, 255, 255, 0.06) !important;
	color: var(--text-secondary) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ============================================
   Системные сообщения (#system-message) — обе темы.
   Bootstrap-3 .alert по умолчанию ломается на тёмной теме
   (светло-голубой фон + жёлтый заголовок «info» поверх него).
   Перекрашиваем под токены темы, левой полосой кодируем тип.
   ============================================ */
#system-message-container {
	/* CRM-3306: не во всю ширину — ограничиваем и центрируем, с боковыми отступами. */
	max-width: 720px;
	margin: 24px auto 12px;
	padding: 0 16px;
}
#system-message .alert {
	position: relative;
	border-radius: var(--radius-sm, 8px);
	border: 1px solid var(--divider);
	border-left: 3px solid var(--link);
	background: var(--card-bg);
	color: var(--text-primary);
	padding: 12px 40px 12px 16px;
	box-shadow: var(--shadow-card);
	text-shadow: none;
}
#system-message .alert .alert-heading {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-secondary);
}
#system-message .alert .alert-message {
	color: var(--text-primary);
	font-size: 14px;
}
#system-message .alert a {
	color: var(--link);
}
#system-message .alert .close {
	position: absolute;
	top: 8px;
	right: 12px;
	color: var(--text-secondary);
	opacity: 0.7;
	font-size: 20px;
	line-height: 1;
	text-shadow: none;
}
#system-message .alert .close:hover {
	opacity: 1;
}

/* Цвет левой полосы по типу сообщения */
#system-message .alert-info {
	border-left-color: var(--link);
}
#system-message .alert-success {
	border-left-color: var(--success, #10B981);
}
#system-message .alert-error {
	border-left-color: var(--danger, #EF4444);
}
#system-message .alert-warning,
#system-message .alert:not(.alert-info):not(.alert-success):not(.alert-error):not(.alert-warning) {
	border-left-color: var(--warning, #F59E0B);
}

/* ============================================
   V2 MISSING FEATURES — Hero Card (features 1-6)
   ============================================ */

/* Feature 1: Premium Banner */
.premium-banner {
	margin-bottom: 12px;
	padding: 10px 16px;
	border-radius: var(--radius-sm, 8px);
	font-size: 13px;
	background: rgba(59, 130, 246, 0.08);
	color: var(--text-primary);
	border: 1px solid rgba(59, 130, 246, 0.2);
}
[data-theme="dark"] .premium-banner {
	background: rgba(59, 130, 246, 0.12);
	border-color: rgba(59, 130, 246, 0.25);
	color: var(--text-primary);
}

/* Feature 2: Last 5th Status Badge */
/* CRM-2273: 11→13px, padding 4×10→5×11 (см. блок .b-time выше). */
.badge.b-last5 {
	background: rgba(245, 158, 11, 0.12);
	color: #B45309;
	font-size: 13px;
	font-weight: 500;
	padding: 5px 11px;
	border-radius: 6px;
}
[data-theme="dark"] .badge.b-last5 {
	background: rgba(245, 158, 11, 0.15);
	color: #FBBF24;
}

/* Feature 5: INN Link */
.badge.b-id a {
	color: inherit;
	text-decoration: none;
}
.badge.b-id a:hover {
	text-decoration: underline;
}
[data-theme="dark"] .badge.b-id a {
	color: inherit;
}
[data-theme="dark"] .badge.b-id a:hover {
	text-decoration: underline;
	opacity: 0.85;
}

/* Feature 6: Min Tariff Badge */
/* CRM-2273: 11→13px, padding 4×10→5×11 (см. блок .b-time выше). */
.badge.b-tariff {
	background: rgba(245, 158, 11, 0.12);
	color: #92400E;
	font-size: 13px;
	font-weight: 500;
	padding: 5px 11px;
	border-radius: 6px;
}
[data-theme="dark"] .badge.b-tariff {
	background: rgba(245, 158, 11, 0.15);
	color: #FCD34D;
}

/* Feature 3: Org Email */
.v2-orgemail {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.v2-orgemail .form-control {
	height: 30px;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: var(--radius-sm, 6px);
	background: var(--input-bg, var(--card-bg));
	color: var(--input-text, var(--text-primary));
	border: 1px solid var(--input-border, var(--divider));
	width: 320px;
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	cursor: text;
	transition: width 0.25s ease, box-shadow 0.25s ease;
}
.v2-orgemail .form-control:hover,
.v2-orgemail .form-control:focus {
	width: 450px;
	max-width: 60vw;
	z-index: 10;
	position: relative;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
[data-theme="dark"] .v2-orgemail .form-control {
	background: var(--input-bg);
	color: var(--input-text);
	border-color: var(--input-border);
}

/* Feature 4: Students in Region Link */
.client-meta .modalsr {
	color: var(--text-secondary);
	transition: color 0.15s;
}
.client-meta .modalsr:hover {
	color: var(--link);
}
[data-theme="dark"] .client-meta .modalsr {
	color: var(--text-secondary);
}
[data-theme="dark"] .client-meta .modalsr:hover {
	color: var(--brand-yellow, #FFE119);
}

/* ============================================
   V2 MISSING FEATURES — New Blocks (features 7-12)
   ============================================ */

/* Feature 7: DialogFlow */
#resultdialog {
	margin: 0 0 16px;
	padding: 10px 16px;
	border-radius: var(--radius-sm, 8px);
	font-size: 13px;
	cursor: pointer;
}
[data-theme="dark"] #resultdialog {
	background: rgba(59, 130, 246, 0.12);
	border-color: rgba(59, 130, 246, 0.25);
	color: var(--text-primary);
}

/* Feature 8: Students Block */
.v2-students-block {
	margin-bottom: 16px;
}
/* CRM-2882 (hd #171, Плиско 19.05.2026): border:1px solid var(--divider)
   на светлой теме разрешается в rgba(0,0,0,0.07), на тёмной — в
   rgba(255,255,255,0.08). Обе рамки почти прозрачные, кнопка-toggle
   «Обученные сотрудники» визуально пропадает на белом фоне между ярких
   primary-actions, особенно при system scaling 125%+. Подняли contrast
   рамки и фона. */
.v2-students-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	padding: 8px 16px;
	border-radius: var(--radius-sm, 8px);
	margin-bottom: 8px;
	color: var(--text-primary);
	background: rgba(0, 0, 0, 0.025);
	border: 1px solid rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.v2-students-toggle:hover,
.v2-students-toggle:focus {
	background: rgba(0, 0, 0, 0.05);
	border-color: rgba(0, 0, 0, 0.35);
	outline: none;
}
[data-theme="dark"] .v2-students-toggle {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.22);
	color: var(--text-primary);
}
[data-theme="dark"] .v2-students-toggle:hover,
[data-theme="dark"] .v2-students-toggle:focus {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.4);
}
.v2-students-table {
	margin-top: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.v2-students-table table {
	width: 100%;
	color: var(--text-primary);
}
.v2-students-table td,
.v2-students-table th {
	padding: 6px 10px;
	border-bottom: 1px solid var(--divider);
	color: var(--text-primary);
}
[data-theme="dark"] .v2-students-table td,
[data-theme="dark"] .v2-students-table th {
	color: var(--text-primary);
	border-color: var(--divider);
}

/* Feature 9: Дополнительные сведения */
.v2-dop-info .panel-body {
	font-size: 13px;
	line-height: 1.6;
	color: var(--text-primary);
}
[data-theme="dark"] .v2-dop-info {
	background: var(--card-bg);
}
[data-theme="dark"] .v2-dop-info .panel-body {
	color: var(--text-primary);
}

/* Feature 10: Полная история */
.v2-allhistory .panel-body {
	font-size: 13px;
	line-height: 1.6;
	color: var(--text-primary);
	max-height: 300px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
[data-theme="dark"] .v2-allhistory {
	background: var(--card-bg);
}
[data-theme="dark"] .v2-allhistory .panel-body {
	color: var(--text-primary);
}

/* Feature 11: Статистика */
.v2-stats {
	background: var(--card-bg);
}
.v2-stats .panel-body {
	font-size: 13px;
	color: var(--text-primary);
	padding: 12px 20px;
}
.v2-stats a {
	color: var(--link);
}
[data-theme="dark"] .v2-stats {
	background: var(--card-bg);
}
[data-theme="dark"] .v2-stats .panel-body {
	color: var(--text-primary);
}
[data-theme="dark"] .v2-stats a {
	color: var(--brand-yellow);
}

/* Responsive: Premium select */
.v2-premium-select {
	max-width: 180px;
	width: auto;
}

/* Responsive: Table density */
.v2-table-density {
	min-width: 700px;
	font-size: 13px;
}

/* Feature 12: Incoming Call Panel */
.v2-incoming-call {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	background: var(--card-bg);
	border: 2px solid var(--success, #10B981);
	border-radius: var(--radius-lg, 16px);
	box-shadow: 0 8px 32px rgba(0,0,0,0.3);
	padding: 24px 32px;
	min-width: 300px;
}
/* CRM-2922: «×» в углу панели — закрытие одним кликом до ответа/после.
   Override на gp_salesos: тёмный фон карточки, нужен контрастный кружок. */
.v2-incoming-call .close-incoming {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 28px;
	height: 28px;
	padding: 0;
	background: rgba(0, 0, 0, 0.08);
	color: var(--text-primary, #111);
	border: 0;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
	transition: background 0.15s, opacity 0.15s;
}
.v2-incoming-call .close-incoming:hover {
	background: rgba(0, 0, 0, 0.16);
	opacity: 1;
}
.v2-incoming-call .close-incoming:focus {
	outline: 2px solid var(--success, #10B981);
	outline-offset: 1px;
}
[data-theme="dark"] .v2-incoming-call .close-incoming {
	background: rgba(255, 255, 255, 0.12);
	color: var(--text-primary, #fff);
}
[data-theme="dark"] .v2-incoming-call .close-incoming:hover {
	background: rgba(255, 255, 255, 0.22);
}
.v2-incoming-call .fromname {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 16px;
}
.v2-incoming-call .answerbtn,
.v2-incoming-call .hangupbtn {
	padding: 8px 0;
}
.v2-incoming-call .btn {
	min-width: 120px;
	font-weight: 600;
}
/* CRM-2932 follow-up (жалоба Анны Коршуновой 21.05.2026): фон модалки в
   gp_salesos светлый (var(--card-bg)), а stt-work-v2.css задаёт цвета
   кнопок для зелёного фона work-page — .btn-success: bg:#fff color:#10B981,
   .btn-danger: bg:transparent color:#fff border:rgba(255,255,255,0.5).
   На светлом фоне .btn-danger сливается полностью (белый текст на белом
   фоне), а .btn-success читается как просто зелёный текст без явной формы
   кнопки. Override возвращает контрастные заполненные кнопки. */
.v2-incoming-call .btn-success {
	background: var(--success, #10B981);
	color: #fff;
	border: 2px solid var(--success, #10B981);
	padding: 8px 24px;
	border-radius: 10px;
}
.v2-incoming-call .btn-success:hover {
	background: #059669;
	border-color: #059669;
	color: #fff;
}
.v2-incoming-call .btn-danger {
	background: var(--danger, #EF4444);
	color: #fff;
	border: 2px solid var(--danger, #EF4444);
	padding: 8px 24px;
	border-radius: 10px;
}
.v2-incoming-call .btn-danger:hover {
	background: #DC2626;
	border-color: #DC2626;
	color: #fff;
}
[data-theme="dark"] .v2-incoming-call {
	background: var(--card-bg);
	border-color: var(--success);
}
[data-theme="dark"] .v2-incoming-call .btn-success {
	background: var(--success, #10B981);
	color: #fff;
}
[data-theme="dark"] .v2-incoming-call .btn-danger {
	background: var(--danger, #EF4444);
	color: #fff;
}

/* Feature 13–14: Processing Form — Кнопка «Сохранить» и селекты статусов */
.processing .panel-body {
	padding: 16px 20px;
}
.processing .form-group {
	margin-bottom: 10px;
}
.processing .form-group > label {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}
.processing .input-group {
	display: flex;
	gap: 0;
}
.processing .input-group .form-control {
	flex: 1;
	min-width: 0;
}
.processing .input-group .input-group-btn {
	flex-shrink: 0;
}
.processing .row {
	display: flex;
	gap: 12px;
	margin-left: 0;
	margin-right: 0;
}
.processing .row::before,
.processing .row::after {
	display: none;
}
.processing .row > [class*="col-"] {
	padding-left: 0;
	padding-right: 0;
	flex: 1;
	min-width: 0;
}
.processing .form-group:last-child {
	margin-bottom: 0;
}
.v2-processing-buttons {
	margin-top: 14px;
	margin-bottom: 0;
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
}
.v2-processing-buttons .btn {
	margin: 0;
}

/* Подсказка о комментарии после звонка */
.v2-callresult-hint {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	margin-bottom: 12px;
	border-radius: 10px;
	background: var(--accent-bg, rgba(99,102,241,0.08));
	border: 1px solid var(--accent-border, rgba(99,102,241,0.18));
	color: var(--text-secondary);
	font-size: 13px;
	line-height: 1.4;
}
.v2-callresult-hint i {
	color: var(--accent, #6366F1);
	font-size: 16px;
	flex-shrink: 0;
}
.v2-status-selects {
	margin-bottom: 8px;
	padding: 8px 0 0;
	border-top: 1px solid var(--divider, #e0e0e0);
}
.v2-status-selects .form-group {
	margin-bottom: 8px;
}
.v2-status-selects .selectstate {
	font-size: 13px;
	padding: 6px 10px;
	border-radius: 6px;
	border: 1px solid var(--input-border, var(--divider, #ccc));
	background: var(--input-bg, #fff);
	color: var(--input-text, #333);
}
[data-theme="dark"] .v2-status-selects {
	border-top-color: var(--divider);
}
[data-theme="dark"] .v2-status-selects .selectstate {
	background: var(--input-bg);
	color: var(--input-text);
	border-color: var(--input-border, var(--divider));
}

/* CRM-2175 (Мария 22.04.2026): баннер «Синхронизация с ЛК не завершена»
   в v2-карточке заявки. Показывается при sync_retry_needed=1. */
.v2-sync-retry-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 16px 16px;
	padding: 14px 18px;
	border-radius: 12px;
	background: rgba(234, 88, 12, 0.08);
	border: 1px solid rgba(234, 88, 12, 0.35);
	color: var(--text-primary, #1A1A2E);
}
[data-theme="dark"] .v2-sync-retry-banner {
	background: rgba(234, 88, 12, 0.14);
	border-color: rgba(234, 88, 12, 0.5);
	color: var(--text-primary, #E6E8F0);
}
.v2-sync-retry-banner.v2-sync-retry-banner--ok {
	background: rgba(34, 197, 94, 0.10);
	border-color: rgba(34, 197, 94, 0.4);
}
[data-theme="dark"] .v2-sync-retry-banner.v2-sync-retry-banner--ok {
	background: rgba(34, 197, 94, 0.18);
	border-color: rgba(34, 197, 94, 0.55);
}
.v2-sync-retry-icon {
	font-size: 22px;
	color: #EA580C;
	flex: 0 0 auto;
}
.v2-sync-retry-banner.v2-sync-retry-banner--ok .v2-sync-retry-icon {
	color: #22C55E;
}
.v2-sync-retry-text {
	flex: 1 1 auto;
	font-size: 13px;
	line-height: 1.5;
}
.v2-sync-retry-text strong {
	font-weight: 700;
}
.v2-sync-retry-reason {
	opacity: 0.7;
	font-style: italic;
}
.v2-sync-retry-btn {
	flex: 0 0 auto;
	background: #EA580C;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 0.2s;
}
.v2-sync-retry-btn:hover:not(:disabled) {
	background: #C2410C;
}
.v2-sync-retry-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* === КНОПКА "НАЗАД К РАБОЧЕМУ ЭКРАНУ" === */
.v2-back-nav {
	padding: 12px 16px;
	margin-bottom: 16px;
}

.v2-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-secondary);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: 8px;
	transition: background 0.2s, color 0.2s;
}

.v2-back-btn:hover {
	background: var(--accent-soft);
	color: var(--text-primary);
	text-decoration: none;
}

.v2-back-btn i {
	font-size: 12px;
}

/* === AJAX-ПОПАПЫ: модальные окна === */
#regionModal .modal-body,
#emailHistoryModal .modal-body {
	max-height: 60vh;
	overflow-y: auto;
}

#regionModal .modal-content,
#emailHistoryModal .modal-content {
	border-radius: var(--radius-lg);
}

/* Dark theme для AJAX-попапов */
[data-theme="dark"] #regionModal .modal-content,
[data-theme="dark"] #emailHistoryModal .modal-content {
	background: var(--card-bg);
	border-color: var(--divider);
}

[data-theme="dark"] #regionModal .modal-header,
[data-theme="dark"] #emailHistoryModal .modal-header {
	border-color: var(--divider);
}

/* === ЛК: Карточки доски почёта v2 === */
.v2-glory-card {
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	padding: 16px;
	box-shadow: var(--shadow-card);
	text-align: center;
}

[data-theme="dark"] .v2-glory-card {
	background: var(--card-bg);
	border: 1px solid var(--divider);
}

/* === ЛК: Chosen dark theme overrides === */
[data-theme="dark"] .chzn-container .chzn-results li {
	color: var(--text-primary);
}

[data-theme="dark"] .chzn-container .chzn-results li.highlighted {
	background: var(--accent-soft);
	color: var(--text-primary);
}

[data-theme="dark"] .chzn-container-multi .chzn-choices,
[data-theme="dark"] .chzn-container-single .chzn-single {
	background: var(--input-bg, var(--card-bg));
	color: var(--text-primary);
	border-color: var(--input-border, var(--divider));
}

[data-theme="dark"] .chzn-container .chzn-drop {
	background: var(--card-bg);
	border-color: var(--input-border, var(--divider));
}

[data-theme="dark"] .chzn-container-single .chzn-single span {
	color: var(--text-primary);
}

/* === ЛК: Order page v2 overrides === */
[data-theme="dark"] .addorder .h2,
[data-theme="dark"] .addorder label {
	color: var(--text-primary);
}

[data-theme="dark"] .addorder textarea {
	background: var(--input-bg, var(--card-bg));
	color: var(--text-primary);
	border: 1px solid var(--input-border, var(--divider));
	border-radius: 8px;
}

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

[data-theme="dark"] .listorder .username b,
[data-theme="dark"] .listorder .title b {
	color: var(--text-primary);
}

[data-theme="dark"] .listorder .cont p {
	color: var(--text-secondary);
}

[data-theme="dark"] .listorder .tome .cont {
	color: var(--text-primary);
}

/* =============================================
   v2 Global: Inputs, selects, textareas dark theme
   Covers all v1-included pages (zakaz, robovoice, ustat, etc.)
   ============================================= */

/* All native selects in dark theme panels — handled by main select block above */

/* All native inputs in dark theme panels */
[data-theme="dark"] .panel-body input[type="text"],
[data-theme="dark"] .panel-body input[type="number"],
[data-theme="dark"] .panel-body input[type="search"],
[data-theme="dark"] .panel-body input[type="email"],
[data-theme="dark"] .panel-body input[type="tel"],
[data-theme="dark"] .panel-body input[type="date"],
[data-theme="dark"] .stthomeoffice input[type="text"],
[data-theme="dark"] .stthomeoffice input[type="number"],
[data-theme="dark"] .sttcalc input[type="text"],
[data-theme="dark"] .sttcalc input[type="number"] {
	background: var(--input-bg, var(--card-bg));
	color: var(--text-primary);
	border: 1px solid var(--input-border, var(--divider));
	border-radius: 8px;
}

/* All textareas in dark theme panels */
[data-theme="dark"] .panel-body textarea,
[data-theme="dark"] .stthomeoffice textarea,
[data-theme="dark"] .sttcalc textarea {
	background: var(--input-bg, var(--card-bg));
	color: var(--text-primary);
	border: 1px solid var(--input-border, var(--divider));
	border-radius: 8px;
}

/* Focus states */
[data-theme="dark"] .panel-body select:focus,
[data-theme="dark"] .panel-body input:focus,
[data-theme="dark"] .panel-body textarea:focus,
[data-theme="dark"] .stthomeoffice select:focus,
[data-theme="dark"] .stthomeoffice input:focus,
[data-theme="dark"] .stthomeoffice textarea:focus {
	border-color: var(--accent, #FFE119);
	box-shadow: 0 0 0 2px rgba(255, 225, 25, 0.25);
	outline: none;
}

/* =============================================
   Zakaz (selectparam) page dark theme
   ============================================= */
[data-theme="dark"] table.zakaz th label {
	color: var(--text-secondary);
}
[data-theme="dark"] table.zakaz th {
	color: var(--text-secondary);
}
[data-theme="dark"] .sttcalc h2 {
	color: var(--text-primary);
}
[data-theme="dark"] .autocomplete-suggestions {
	background: var(--card-bg);
	border-color: var(--divider);
}
[data-theme="dark"] .autocomplete-suggestion {
	color: var(--text-primary);
}
[data-theme="dark"] .autocomplete-selected {
	background: var(--accent-soft);
}

/* =============================================
   Robovoice page dark theme
   ============================================= */
[data-theme="dark"] .inputdogovor,
[data-theme="dark"] .inputinn {
	background: var(--input-bg, var(--card-bg)) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--input-border, var(--divider)) !important;
	border-radius: 6px;
	padding: 4px 8px;
}
[data-theme="dark"] .comment_textarea {
	background: var(--input-bg, var(--card-bg)) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--input-border, var(--divider)) !important;
	border-radius: 6px;
}
[data-theme="dark"] .dialog_text {
	background-color: var(--card-bg) !important;
	border-color: var(--divider) !important;
	color: var(--text-primary);
}
[data-theme="dark"] .fixedblock {
	background-color: var(--card-bg) !important;
	border-color: var(--divider) !important;
	color: var(--text-primary);
}
[data-theme="dark"] #ATS_status .danger {
	color: var(--danger);
}
[data-theme="dark"] #ATS_status .success {
	color: var(--success);
}

/* =============================================
   Ustat page dark theme — calendar inputs
   ============================================= */
[data-theme="dark"] .input-append {
	display: inline-flex;
	align-items: center;
}
[data-theme="dark"] .input-append input {
	background: var(--input-bg, var(--card-bg));
	color: var(--text-primary);
	border: 1px solid var(--input-border, var(--divider));
	border-radius: 8px 0 0 8px;
}
[data-theme="dark"] .input-append .btn {
	background: var(--input-bg, var(--card-bg));
	color: var(--text-primary);
	border: 1px solid var(--input-border, var(--divider));
	border-left: none;
	border-radius: 0 8px 8px 0;
}
[data-theme="dark"] .calendarblock label {
	color: var(--text-secondary);
}
[data-theme="dark"] .stthomeoffice {
	color: var(--text-primary);
}

/* Joomla calendar popup dark theme */
[data-theme="dark"] .js-calendar {
	background: var(--card-bg);
	color: var(--text-primary);
	border-color: var(--divider);
}

/* Table row striping fix for dark theme (ustat, robovoice) */
[data-theme="dark"] .adminlist.table .row0 td,
[data-theme="dark"] .adminlist.table .row1 td {
	background: transparent;
}
[data-theme="dark"] .adminlist.table .row0:hover td,
[data-theme="dark"] .adminlist.table .row1:hover td {
	background: var(--accent-soft);
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
	background: transparent;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) {
	background: rgba(255,255,255,0.03);
}

/* Joomla search tools bar — full dark theme */
[data-theme="dark"] .js-stools .btn-toolbar {
	background: transparent;
}
[data-theme="dark"] .js-stools .js-stools-field-filter .btn {
	background: var(--input-bg);
	color: var(--text-primary);
	border-color: var(--input-border, var(--divider));
}
[data-theme="dark"] .js-stools input[type="text"],
[data-theme="dark"] .js-stools input[type="search"] {
	background: var(--input-bg);
	color: var(--text-primary);
	border: 1px solid var(--input-border, var(--divider));
	border-radius: 8px;
}
[data-theme="dark"] .js-stools select {
	background: var(--input-bg);
	color: var(--text-primary);
	border: 1px solid var(--input-border, var(--divider));
}
[data-theme="dark"] .js-stools-container-filters .js-stools-field-filter select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239CA3AF'/%3E%3C/svg%3E");
}

/* Joomla search tools — button styling (Фильтрация, Очистить, Отфильтровать) */
.js-stools .js-stools-btn-filter,
.js-stools .js-stools-btn-clear {
	background: var(--card-bg);
	color: var(--text-primary);
	border: 1px solid var(--input-border, #E2E4E9);
	border-radius: var(--radius-sm, 8px);
	height: 36px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 500;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.js-stools .js-stools-btn-filter:hover,
.js-stools .js-stools-btn-clear:hover {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border-color: var(--brand-yellow);
}
.js-stools .js-stools-btn-filter.active,
.js-stools .js-stools-btn-filter[aria-expanded="true"] {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border-color: var(--brand-yellow);
}
.js-stools .js-stools-field-filter .btn[type="submit"] {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border-color: var(--brand-yellow);
	font-weight: 600;
}
.js-stools .js-stools-field-filter .btn[type="submit"]:hover {
	background: var(--brand-yellow-hover);
	border-color: var(--brand-yellow-hover);
}
/* Стилизация всех инпутов и селектов в панели фильтров */
.js-stools-container-filters .js-stools-field-filter input[type="text"],
.js-stools-container-filters .js-stools-field-filter input[type="search"],
.js-stools-container-filters .js-stools-field-filter input[type="number"],
.js-stools-container-filters .js-stools-field-filter input[type="date"] {
	height: 34px;
	padding: 6px 12px;
	font-size: 13px;
	line-height: 1.42;
	background: var(--input-bg);
	color: var(--text-primary);
	border: 1px solid var(--input-border, var(--divider));
	border-radius: 6px;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-shadow: none;
	font-family: var(--font-ui);
}
.js-stools-container-filters .js-stools-field-filter input[type="text"]:focus,
.js-stools-container-filters .js-stools-field-filter input[type="search"]:focus,
.js-stools-container-filters .js-stools-field-filter input[type="number"]:focus,
.js-stools-container-filters .js-stools-field-filter input[type="date"]:focus {
	border-color: var(--brand-yellow);
	box-shadow: 0 0 0 2px var(--brand-yellow-light);
}
.js-stools-container-filters .js-stools-field-filter input::placeholder {
	color: var(--input-placeholder, var(--text-secondary));
	opacity: 0.6;
}
.js-stools-container-filters .js-stools-field-filter select {
	height: 34px;
	padding: 4px 8px;
	font-size: 13px;
	background: var(--input-bg);
	color: var(--text-primary);
	border: 1px solid var(--input-border, var(--divider));
	border-radius: 6px;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7280'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 28px;
}
.js-stools-container-filters .js-stools-field-filter select:focus {
	border-color: var(--brand-yellow);
	box-shadow: 0 0 0 2px var(--brand-yellow-light);
}
.js-stools-container-filters .js-stools-field-filter .cs-trigger {
	height: 34px;
	padding: 6px 12px;
	font-size: 13px;
	line-height: 1.42;
}
/* Calendar input-append в фильтрах */
.js-stools-container-filters .js-stools-field-filter .input-append,
.js-stools-container-filters .js-stools-field-filter .input-prepend {
	display: inline-flex;
	align-items: center;
	margin-bottom: 0;
}
.js-stools-container-filters .js-stools-field-filter .input-append input {
	border-radius: 6px 0 0 6px;
	border-right: none;
}
.js-stools-container-filters .js-stools-field-filter .input-append .btn,
.js-stools-container-filters .js-stools-field-filter .input-prepend .btn {
	background: var(--input-bg);
	color: var(--text-primary);
	border: 1px solid var(--input-border, var(--divider));
	border-left: none;
	border-radius: 0 6px 6px 0;
	height: 34px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}
/* Кнопка «Отфильтровать» внутри фильтров */
.js-stools-container-filters .js-stools-field-filter .btn[type="submit"],
.js-stools-container-filters .js-stools-field-filter button[type="submit"] {
	background: var(--accent);
	color: var(--accent-text, #1A1A2E);
	border: none;
	border-radius: 6px;
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 600;
	height: 34px;
	cursor: pointer;
	transition: background 0.15s;
}
.js-stools-container-filters .js-stools-field-filter .btn[type="submit"]:hover,
.js-stools-container-filters .js-stools-field-filter button[type="submit"]:hover {
	background: var(--brand-yellow-hover);
}
.js-stools-container-filters {
	display: none;
	margin: 10px 0;
}
.js-stools-container-filters.shown {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	align-items: center;
}
.js-stools-container-filters .js-stools-field-filter {
	margin: 0;
}
/* Search input — стилизация */
.js-stools .js-stools-search-string {
	background: var(--input-bg, #fff);
	color: var(--input-text, var(--text-primary));
	border: 1px solid var(--input-border, #E2E4E9);
	border-right: none;
	border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
	padding: 7px 12px;
	font-size: 13px;
	font-family: var(--font-ui);
	height: 36px;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-shadow: none;
}
.js-stools .js-stools-search-string:focus {
	border-color: var(--brand-yellow, #FFE119);
	box-shadow: 0 0 0 3px var(--brand-yellow-light, rgba(255, 225, 25, 0.12));
}
.js-stools .js-stools-search-string::placeholder {
	color: var(--input-placeholder, var(--text-secondary));
	opacity: 0.6;
}
/* Search input group — скругление обёртки */
.js-stools .btn-wrapper.input-append {
	display: inline-flex;
	align-items: stretch;
	border-radius: var(--radius-sm, 8px);
	overflow: hidden;
	box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.04));
}
/* Search icon button */
.js-stools .input-append .btn {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border: 1px solid var(--brand-yellow);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: var(--radius-sm, 8px);
	border-bottom-right-radius: var(--radius-sm, 8px);
	height: 36px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
}
.js-stools .input-append .btn:hover {
	background: var(--brand-yellow-hover);
	border-color: var(--brand-yellow-hover);
}
/* Badge counter next to Очистить */
.js-stools .badge {
	background: var(--brand-yellow);
	color: var(--brand-dark);
}
/* Table links in adminlist */
.adminlist.table a {
	color: var(--link);
	text-decoration: none;
}
.adminlist.table a:hover {
	color: var(--link);
	text-decoration: underline;
}

/* Pagination dark theme */
[data-theme="dark"] .pagination li a,
[data-theme="dark"] .pagination li > span {
	background: var(--card-bg);
	color: var(--text-primary);
	border-color: var(--divider);
}
[data-theme="dark"] .pagination li.active a,
[data-theme="dark"] .pagination li.active > span {
	background: var(--accent, #FFE119);
	color: var(--accent-text, #1A1A2E);
	border-color: var(--accent, #FFE119);
}
[data-theme="dark"] .pagination li a:hover {
	background: var(--accent-soft);
}

/* Override inline background-color on table cells in dark theme */
[data-theme="dark"] .adminlist.table td[style*="background-color"],
[data-theme="dark"] .table-striped td[style*="background-color"] {
	background-color: transparent !important;
}
[data-theme="dark"] .adminlist.table tr:hover td[style*="background-color"],
[data-theme="dark"] .table-striped tr:hover td[style*="background-color"] {
	background-color: var(--accent-soft) !important;
}

/* =============================================
   Sends (zworkemail) page — v2 dark theme
   ============================================= */
.sends-index {
	background-color: var(--card-bg, #fff);
	border-radius: var(--radius-lg, 12px);
	overflow: hidden;
}
.sends-list {
	border-right: 1px solid var(--divider, #eee);
}
.sends-list::-webkit-scrollbar,
.sends-detail::-webkit-scrollbar {
	width: 6px;
}
.sends-list::-webkit-scrollbar-track,
.sends-detail::-webkit-scrollbar-track {
	background: transparent;
}
.sends-list::-webkit-scrollbar-thumb,
.sends-detail::-webkit-scrollbar-thumb {
	background: var(--divider, #ccc);
	border-radius: 3px;
}
.sends-index hr {
	border-color: var(--divider, #eee);
}
.sends-item.active,
.sends-item:hover {
	background-color: var(--accent-soft, #f0fcf8);
}
.sends-item {
	color: var(--text-primary);
}
.sends-time {
	color: var(--text-secondary, #888);
}
.sends-descr {
	color: var(--text-secondary, #888);
	font-size: 12px;
}
.sends-detail-title {
	color: var(--text-primary);
}
.sends-detail-time {
	color: var(--text-secondary, #888);
}
.sends-detail .sender,
.sends-detail .getter {
	color: var(--text-secondary, #888);
}
.sends-detail-text {
	color: var(--text-primary);
}
.sends-detail hr {
	border-color: var(--divider, #eee);
}

/* =============================================
   Joomla pagination — horizontal layout + v2 styling
   ============================================= */
.pagination ul,
ul.pagination-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	padding: 0;
	margin: 12px 0;
}
.pagination ul li,
ul.pagination-list li {
	list-style: none;
}
.pagination ul li a,
.pagination ul li > span,
ul.pagination-list li a,
ul.pagination-list li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid var(--divider, #ddd) !important;
	background: var(--card-bg, #fff);
	color: var(--text-primary, #333);
	font-size: 13px;
	text-decoration: none;
	transition: background .15s, border-color .15s;
	cursor: pointer;
	outline: none;
	box-shadow: none;
}
.pagination ul li a:hover,
ul.pagination-list li a:hover {
	background: var(--accent-soft, #f5f5f5);
	border-color: var(--accent, #FFE119) !important;
}
.pagination ul li.active a,
.pagination ul li.active > span,
ul.pagination-list li.active a,
ul.pagination-list li.active > span {
	background: var(--accent, #FFE119);
	color: var(--accent-text, #1A1A2E);
	border-color: var(--accent, #FFE119);
	font-weight: 600;
}
.pagination ul li > span.pagenav,
ul.pagination-list li > span.pagenav {
	cursor: default;
	opacity: 0.5;
}
/* Hide Joomla pagination counter text */
.pagination .counter {
	color: var(--text-secondary);
	font-size: 12px;
	margin-top: 4px;
}
/* Pagination limit select */
.pagination .limit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text-secondary);
	font-size: 13px;
}

/* Joomla pagination icon replacements (icon-first/prev/next/last) */
.pagination .icon-first::before,
ul.pagination-list .icon-first::before { content: '\00AB'; /* « */ }
.pagination .icon-previous::before,
ul.pagination-list .icon-previous::before { content: '\2039'; /* ‹ */ }
.pagination .icon-next::before,
ul.pagination-list .icon-next::before { content: '\203A'; /* › */ }
.pagination .icon-last::before,
ul.pagination-list .icon-last::before { content: '\00BB'; /* » */ }
.pagination li.disabled a,
ul.pagination-list li.disabled a {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

/* Remove yellow border on focus/active for all pagination links */
.pagination ul li a:focus,
.pagination ul li a:active,
ul.pagination-list li a:focus,
ul.pagination-list li a:active {
	outline: none !important;
	box-shadow: none !important;
	border-color: var(--divider, #ddd) !important;
}

/* =============================================
   Joomla Calendar popup — dark theme
   ============================================= */
[data-theme="dark"] div.calendar {
	background: var(--card-bg, #1A1A2E) !important;
	border: 1px solid var(--divider, #444) !important;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0,0,0,.4);
	z-index: 10001;
}
[data-theme="dark"] .calendar,
[data-theme="dark"] .calendar table {
	background: var(--card-bg, #1A1A2E) !important;
	color: var(--text-primary, #F0F0F5) !important;
	border-color: var(--divider, #444) !important;
}
[data-theme="dark"] .calendar .title {
	background: var(--surface-bg, #16213E) !important;
	color: var(--text-primary, #F0F0F5) !important;
	font-weight: 600;
}
[data-theme="dark"] .calendar .headrow,
[data-theme="dark"] .calendar .headrow td,
[data-theme="dark"] .calendar thead .button {
	background: var(--card-bg, #1A1A2E) !important;
	color: var(--text-secondary, #8B8FA3) !important;
}
[data-theme="dark"] .calendar thead .button:hover,
[data-theme="dark"] .calendar thead .hilite {
	background: var(--accent-soft, rgba(255,225,25,.1)) !important;
	color: var(--text-primary, #F0F0F5) !important;
}
[data-theme="dark"] .calendar .daynames,
[data-theme="dark"] .calendar .daynames td,
[data-theme="dark"] .calendar thead .name {
	background: rgba(255,255,255,.05) !important;
	color: var(--text-secondary, #8B8FA3) !important;
}
[data-theme="dark"] .calendar .daynames .weekend,
[data-theme="dark"] .calendar thead .weekend {
	color: var(--danger, #ff6b6b) !important;
}
[data-theme="dark"] .calendar td.day {
	background: var(--card-bg, #1A1A2E) !important;
	color: var(--text-primary, #F0F0F5) !important;
}
[data-theme="dark"] .calendar td.day.hilite,
[data-theme="dark"] .calendar tbody .rowhilite td {
	background: var(--accent-soft, rgba(255,225,25,.15)) !important;
	color: var(--text-primary, #F0F0F5) !important;
}
[data-theme="dark"] .calendar td.day.selected {
	background: var(--accent, #FFE119) !important;
	color: var(--accent-text, #1A1A2E) !important;
	font-weight: 600;
}
[data-theme="dark"] .calendar td.day.today {
	background: var(--accent, #FFE119) !important;
	color: var(--accent-text, #1A1A2E) !important;
	font-weight: 600;
}
[data-theme="dark"] .calendar td.day.weekend {
	color: var(--danger, #ff6b6b) !important;
}
[data-theme="dark"] .calendar td.day.weekend.hilite {
	background: var(--accent-soft, rgba(255,225,25,.15)) !important;
}
[data-theme="dark"] .calendar td.emptycell {
	background: var(--card-bg, #1A1A2E) !important;
}
[data-theme="dark"] .calendar td.wn {
	background: rgba(255,255,255,.03) !important;
	color: var(--text-secondary, #8B8FA3) !important;
}
[data-theme="dark"] .calendar tfoot .footrow {
	background: var(--card-bg, #1A1A2E) !important;
	color: var(--text-secondary, #8B8FA3) !important;
}
[data-theme="dark"] .calendar .ttip {
	background: var(--card-bg, #1A1A2E) !important;
	color: var(--text-secondary, #8B8FA3) !important;
	border-top: 1px solid var(--divider, #444) !important;
}
[data-theme="dark"] .calendar tfoot .hilite {
	background: var(--accent-soft, rgba(255,225,25,.15)) !important;
	border-color: var(--accent, #FFE119) !important;
}
[data-theme="dark"] .combo {
	background: var(--card-bg, #1A1A2E) !important;
	border: 1px solid var(--divider, #444) !important;
	color: var(--text-primary, #F0F0F5) !important;
}
[data-theme="dark"] .combo .label,
[data-theme="dark"] .combo .label.here {
	color: var(--text-primary, #F0F0F5) !important;
}
[data-theme="dark"] .combo .hilite,
[data-theme="dark"] .combo .label:hover {
	background: var(--accent-soft, rgba(255,225,25,.15)) !important;
}
[data-theme="dark"] .combo .active {
	background: var(--surface-bg, #16213E) !important;
	border-color: var(--divider, #444) !important;
}

/* =============================================
   LK tables — compact, overflow, padding
   ============================================= */
/* Ensure panel-body has enough padding */
.panel-body {
	padding: 20px;
	overflow-x: auto;
}
/* Scrollable wrapper for wide tables */
.panel-body > form,
.panel-body .adminlist-wrapper,
.panel-body > form > #j-main-container {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* Compact table styling for LK pages */
.panel-body .adminlist.table {
	font-size: 12px;
	min-width: 100%;
}
.panel-body .adminlist.table th {
	font-size: 11px;
	padding: 8px 6px;
	white-space: nowrap;
}
.panel-body .adminlist.table td {
	padding: 8px 6px;
	vertical-align: middle;
}
/* Fade-out hint on right edge when table overflows */
.panel-body > form::after,
.panel-body > div:not(.panel):first-child::after {
	content: '';
	position: sticky;
	right: 0;
	top: 0;
	bottom: 0;
	width: 24px;
	pointer-events: none;
	background: linear-gradient(to right, transparent, var(--card-bg, #1A1A2E));
	display: none;
}
/* Scrollbar styling for table containers */
.panel-body::-webkit-scrollbar,
.panel-body > form::-webkit-scrollbar {
	height: 6px;
}
.panel-body::-webkit-scrollbar-track,
.panel-body > form::-webkit-scrollbar-track {
	background: transparent;
}
.panel-body::-webkit-scrollbar-thumb,
.panel-body > form::-webkit-scrollbar-thumb {
	background: var(--divider, #444);
	border-radius: 3px;
}

/* =============================================
   Contest tables — dark theme overrides
   ============================================= */
[data-theme="dark"] table.adminlist td.empty {
	background-color: var(--card-bg, #1A1A2E) !important;
	border-top: none;
}
[data-theme="dark"] table.adminlist td.gmaxm,
[data-theme="dark"] table.adminlist td.gmaxw,
[data-theme="dark"] table.adminlist td.maxm,
[data-theme="dark"] table.adminlist td.maxw {
	background-color: rgba(255, 225, 25, 0.15) !important;
}
[data-theme="dark"] table.adminlist tr.older td {
	color: var(--text-primary, #F0F0F5);
}
[data-theme="dark"] table.adminlist .contest-avatar,
[data-theme="dark"] table.adminlist img[src*="avatar"] {
	border-radius: 50%;
}

/* =============================================
   SttModal — dark theme + image fallback
   ============================================= */

/* Dark theme for sttmodal popup */
body .sttmodal div.modal {
	background-color: var(--card-bg);
	border: 1px solid var(--divider);
	border-radius: var(--radius-md, 12px);
	box-shadow: 0 8px 32px rgba(0,0,0,0.4);
	color: var(--text-primary);
}

body .sttmodal .modal-backdrop,
body .sttmodal .modal-backdrop.fade.in {
	background-color: rgba(0,0,0,0.7);
}

body .sttmodal .modal-header {
	border-bottom: 1px solid var(--divider);
	padding: 16px 20px;
	position: relative;
}

body .sttmodal .modal-header .close {
	color: var(--text-secondary);
	opacity: 0.7;
	font-size: 24px;
	text-shadow: none;
	transition: opacity 0.2s;
}

body .sttmodal .modal-header .close:hover {
	opacity: 1;
	color: var(--text-primary);
}

body .sttmodal .modal-body {
	padding: 24px;
	color: var(--text-primary);
}

body .sttmodal .modal-body h1,
body .sttmodal .modal-body h2,
body .sttmodal .modal-body h3,
body .sttmodal .modal-body h4 {
	color: var(--text-primary);
}

body .sttmodal .modal-body p {
	color: var(--text-secondary);
	line-height: 1.6;
}

body .sttmodal .modal-body strong,
body .sttmodal .modal-body b {
	color: var(--text-primary);
}

body .sttmodal .modal-footer {
	background-color: var(--bg-main);
	border-top: 1px solid var(--divider);
	border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px);
	padding: 16px 20px;
}

body .sttmodal .modal-footer .btn {
	border-radius: var(--radius-sm, 8px);
	padding: 8px 20px;
	font-weight: 600;
	font-size: 13px;
	transition: background 0.2s, transform 0.1s;
}

body .sttmodal .modal-footer .btn:active {
	transform: scale(0.97);
}

body .sttmodal .modal-footer .btn-danger {
	background: var(--danger, #e74c3c);
	border: none;
	color: #fff;
}

body .sttmodal .modal-footer .btn-success {
	background: var(--brand-green, #4caf50);
	border: none;
	color: #fff;
}

body .sttmodal .modal-footer .btn-warning {
	background: var(--brand-yellow);
	border: none;
	color: var(--brand-dark);
}

/* Image fallback — broken images get placeholder */
body .sttmodal .modal-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-sm, 8px);
	display: block;
	margin: 16px auto;
}

body .sttmodal .modal-body img[src=""],
body .sttmodal .modal-body img:not([src]) {
	display: none;
}

/* Broken image fallback — hide alt text box */
body .sttmodal .modal-body img::after {
	content: '';
	display: block;
}

/* Birthday popup specific styling */
body .sttmodal .modal-body [style*="color: green"],
body .sttmodal .modal-body [style*="color:green"] {
	color: var(--success) !important;
	font-size: 20px;
	font-weight: 600;
}

/* Override inline styles from Joomla articles in dark theme */
[data-theme="dark"] body .sttmodal .modal-body span[style*="background-color"],
[data-theme="dark"] body .sttmodal .modal-body p[style*="background-color"],
[data-theme="dark"] body .sttmodal .modal-body div[style*="background-color"],
[data-theme="dark"] body .sttmodal .modal-body [style*="background-color: rgba(255, 255, 255"],
[data-theme="dark"] body .sttmodal .modal-body [style*="background-color: #fff"],
[data-theme="dark"] body .sttmodal .modal-body [style*="background-color: #FFF"] {
	background-color: transparent !important;
}

[data-theme="dark"] body .sttmodal .modal-body span[style*="color: #222"],
[data-theme="dark"] body .sttmodal .modal-body span[style*="color:#222"],
[data-theme="dark"] body .sttmodal .modal-body [style*="color: #000"],
[data-theme="dark"] body .sttmodal .modal-body [style*="color:#000"],
[data-theme="dark"] body .sttmodal .modal-body [style*="color: #111"],
[data-theme="dark"] body .sttmodal .modal-body [style*="color:#111"],
[data-theme="dark"] body .sttmodal .modal-body [style*="color: #333"],
[data-theme="dark"] body .sttmodal .modal-body [style*="color:#333"] {
	color: var(--text-primary) !important;
}

[data-theme="dark"] body .sttmodal .modal-body h3 {
	color: var(--brand-yellow);
}

/* Sttmodal font override — use system font */
body .sttmodal {
	font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
	color: var(--text-primary);
}

/* Fade-in animation (respects prefers-reduced-motion) */
.sttmodal div.modal.fade.in {
	animation: sttmodal-fadein 0.3s ease-out;
}

@keyframes sttmodal-fadein {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(-10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sttmodal div.modal.fade.in {
		animation: none;
	}
	.sttmodal div.modal.fade {
		transition: none;
	}
}

html.reduce-motion .sttmodal div.modal.fade.in {
	animation: none;
}

html.reduce-motion .sttmodal div.modal.fade {
	transition: none;
}

/* =============================================
   Profile page — dark theme styling
   ============================================= */
.profile {
	max-width: 700px;
	margin: 0 auto;
	padding: 24px 16px;
}

/* Move edit button inside the flow, not floating */
.profile .btn-toolbar.pull-right {
	float: none !important;
	display: flex;
	justify-content: flex-end;
	margin: 0 0 16px 0;
	padding: 0;
	list-style: none;
}

.profile .btn-toolbar .btn-group {
	list-style: none;
}

.profile .btn-toolbar .btn {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border: none;
	border-radius: var(--radius-sm, 8px);
	padding: 10px 24px;
	font-weight: 600;
	font-size: 13px;
	transition: background 0.2s;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.profile .btn-toolbar .btn:hover {
	background: var(--brand-yellow-hover);
	color: var(--brand-dark);
}

.profile fieldset {
	background: var(--card-bg);
	border: 1px solid var(--divider);
	border-radius: var(--radius-md, 12px);
	padding: 20px 24px;
	margin-bottom: 16px;
	box-shadow: var(--shadow-card);
}

.profile fieldset legend {
	color: var(--text-primary);
	font-size: 15px;
	font-weight: 700;
	border-bottom: 2px solid var(--accent, #FFE119);
	margin-bottom: 12px;
	padding: 0 0 8px 0;
	width: auto;
	float: none;
}

/* dl-horizontal — grid layout instead of floats */
.profile .dl-horizontal {
	display: grid;
	grid-template-columns: minmax(120px, auto) 1fr;
	gap: 0;
	align-items: stretch;
	margin: 0;
}

.profile .dl-horizontal::before,
.profile .dl-horizontal::after {
	display: none;
}

.profile .dl-horizontal dt {
	color: var(--text-secondary);
	font-weight: 600;
	font-size: 13px;
	text-align: left;
	float: none !important;
	width: auto !important;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	clear: none;
	margin: 0;
	padding: 10px 16px 10px 0;
	border-bottom: 1px solid var(--divider);
	display: flex;
	align-items: center;
}

.profile .dl-horizontal dd {
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 500;
	margin: 0 !important;
	margin-left: 0 !important;
	float: none;
	padding: 10px 0;
	border-bottom: 1px solid var(--divider);
	display: flex;
	align-items: center;
}

.profile .dl-horizontal dt:last-of-type,
.profile .dl-horizontal dd:last-of-type {
	border-bottom: none;
}

.profile .page-header {
	border-bottom: 1px solid var(--divider);
	margin-bottom: 16px;
}

.profile .page-header h1 {
	color: var(--text-primary);
	font-size: 20px;
	font-weight: 600;
}

/* Mobile */
@media (max-width: 600px) {
	.profile { padding: 16px 10px; }
	.profile fieldset { padding: 14px 16px; }
	.profile .dl-horizontal {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.profile .dl-horizontal dt {
		text-align: left;
		font-size: 12px;
		padding: 8px 0 2px;
		border-bottom: none;
	}
	.profile .dl-horizontal dd {
		font-size: 13px;
		padding: 2px 0 8px;
	}
}

/* Profile edit page */
.profile-edit {
	max-width: 700px;
	margin: 0 auto;
	padding: 24px 16px;
}

.profile-edit form.well {
	background: var(--card-bg);
	border: 1px solid var(--divider);
	border-radius: var(--radius-md, 12px);
	box-shadow: var(--shadow-card);
	color: var(--text-primary);
	padding: 24px;
}

.profile-edit fieldset {
	border: none;
	padding: 0;
	margin-bottom: 20px;
}

.profile-edit fieldset legend {
	color: var(--text-primary);
	font-size: 15px;
	font-weight: 600;
	border-bottom: 1px solid var(--divider);
	padding-bottom: 8px;
	margin-bottom: 16px;
}

.profile-edit .control-group {
	margin-bottom: 12px;
}

.profile-edit .control-label {
	text-align: left;
	float: none;
	width: auto;
	padding-top: 0;
}

.profile-edit .control-label label {
	color: var(--text-secondary);
	font-weight: 500;
	font-size: 13px;
}

.profile-edit .controls {
	margin-left: 0;
}

.profile-edit input[type="text"],
.profile-edit input[type="email"],
.profile-edit input[type="password"],
.profile-edit select {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 8px);
	padding: 10px 14px;
	font-size: 14px;
	width: 100%;
	max-width: 320px;
}

.profile-edit .btn-primary {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border: none;
	border-radius: var(--radius-sm, 8px);
	padding: 10px 28px;
	font-weight: 600;
	font-size: 14px;
}

.profile-edit .btn-primary:hover {
	background: var(--brand-yellow-hover);
}

/* ===== CUSTOM SELECT DROPDOWN (cs-*) — override JS-injected styles ===== */
.cs-wrap {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	min-width: 140px;
	font-size: 13px;
}
.cs-wrap.cs-fullwidth { display: block; width: 100%; }

.cs-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 12px;
	border-radius: var(--radius-sm, 8px);
	cursor: pointer;
	user-select: none;
	border: 1px solid var(--input-border, var(--divider));
	background: var(--input-bg);
	color: var(--text-primary);
	transition: border-color .2s, box-shadow .2s;
}
.cs-trigger:hover { border-color: var(--accent); }
.cs-trigger.cs-open {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-soft);
}

.cs-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	flex: 1;
}

.cs-arrow {
	width: 0; height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--text-secondary);
	transition: transform .2s;
	flex-shrink: 0;
}
.cs-open .cs-arrow { transform: rotate(180deg); }

.cs-dropdown {
	position: fixed;
	z-index: 99999;
	border-radius: var(--radius-sm, 8px);
	overflow: hidden;
	border: 1px solid var(--input-border, var(--divider));
	background: var(--card-bg);
	box-shadow: var(--shadow-elevated);
	max-height: 320px;
	display: none;
	/* CRM-2134: flex-column чтобы search-input был sticky сверху,
	   а скролл применялся только к списку опций (.cs-options). */
	flex-direction: column;
}
.cs-dropdown.cs-show { display: flex; }

/* CRM-2134: input поиска в dropdown для больших списков (> 8 опций). */
.cs-search-wrap {
	padding: 8px;
	border-bottom: 1px solid var(--divider);
	background: var(--card-bg);
	flex-shrink: 0;
}
.cs-search {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 10px;
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border, var(--divider));
	border-radius: 6px;
	font-size: 13px;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.cs-search:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.cs-search::placeholder {
	color: var(--input-placeholder);
}

.cs-options {
	overflow-y: auto;
	max-height: 260px;
	flex: 1 1 auto;
}

.cs-option {
	padding: 8px 12px;
	cursor: pointer;
	color: var(--text-primary);
	transition: background .15s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cs-option:hover { background: var(--accent-soft); }
.cs-option.cs-selected {
	background: var(--accent);
	color: var(--accent-text);
}
/* CRM-2134: скрытая при поиске опция */
.cs-option.cs-hidden { display: none; }

.cs-empty {
	padding: 12px;
	color: var(--text-secondary);
	text-align: center;
	font-size: 13px;
}

/* Scrollbar */
.cs-dropdown::-webkit-scrollbar,
.cs-options::-webkit-scrollbar { width: 6px; }
.cs-dropdown::-webkit-scrollbar-track,
.cs-options::-webkit-scrollbar-track { background: transparent; }
.cs-dropdown::-webkit-scrollbar-thumb,
.cs-options::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 3px; }

/* Native select option fallback for dark theme */
[data-theme="dark"] select option {
	background: var(--card-bg, #1A1A2E);
	color: var(--text-primary, #F0F0F5);
}
select option {
	background: var(--card-bg, #fff);
	color: var(--text-primary, #1A1A2E);
}

/* Premium page select specific */

/* ============================================
   USTAT — Статистика пользователя v2
   ============================================ */
#ustat-form {
	background: var(--card-bg);
	border-radius: 12px;
	padding: 20px 16px;
	border: 1px solid var(--divider);
}
#ustat-form .stthomeoffice {
	color: var(--text-primary);
}
#ustat-form .calendarblock label,
#ustat-form .filter-hide-lbl {
	color: var(--text-secondary) !important;
	font-size: 13px;
	display: block;
	margin-bottom: 6px;
}
#ustat-form .calendarblock {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
#ustat-form .input-append {
	display: inline-flex !important;
	align-items: center;
}
#ustat-form .input-append input[type="text"] {
	background: var(--input-bg) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--input-border, var(--divider)) !important;
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 13px;
	height: 34px;
}
#ustat-form .input-append .btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: var(--input-bg) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--input-border, var(--divider)) !important;
	border-radius: 6px;
	height: 34px;
	margin-left: 4px;
}
#ustat-form .btn-success {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
	color: var(--accent-text, #1A1A2E) !important;
	border-radius: 6px;
	font-size: 13px;
}
#ustat-form a.btn-warning,
#ustat-form .btn.btn-warning,
a.btn-warning {
	background: var(--input-bg) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--input-border, var(--divider)) !important;
	border-radius: 6px !important;
	font-size: 13px;
}
#ustat-form a.btn-warning:hover,
#ustat-form .btn.btn-warning:hover,
a.btn-warning:hover {
	background: var(--accent-soft) !important;
	border-color: var(--accent) !important;
}
#ustat-form .adminlist.table {
	color: var(--text-primary);
	font-size: 13px;
}
#ustat-form .adminlist.table thead th {
	background: var(--card-bg) !important;
	color: var(--text-secondary) !important;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 10px 8px;
	border-bottom: 2px solid var(--divider);
	border-top: none;
}
#ustat-form .adminlist.table tbody td {
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider);
	padding: 10px 8px;
	vertical-align: middle;
}
#ustat-form .adminlist.table tbody tr:hover td {
	background: var(--accent-soft) !important;
}
#ustat-form .adminlist.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: rgba(255,255,255,0.02);
}
#ustat-form .chzn-container {
	display: none !important;
}

/* =============================================
   Zayavka page — v2 dark theme styling
   ============================================= */

/* Main container */
.fe-zayavka {
	color: var(--text-primary);
}

/* Override inline styles on tables — !important needed to beat inline style="" */
.fe-zayavka table,
.fe-zayavka + .comment table {
	background: var(--card-bg) !important;
	border-color: var(--divider) !important;
	border-radius: var(--radius-md) !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden;
	color: var(--text-primary) !important;
	font-family: var(--font-ui) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

.fe-zayavka table[border="1"],
.fe-zayavka + .comment table[border="1"] {
	border: 1px solid var(--divider) !important;
}

.fe-zayavka table td,
.fe-zayavka table th,
.fe-zayavka + .comment table td {
	border-color: var(--divider) !important;
	color: var(--text-primary) !important;
	padding: 8px 10px !important;
	font-family: var(--font-ui) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

.fe-zayavka table td span,
.fe-zayavka table th span,
.fe-zayavka + .comment table td span {
	color: var(--text-primary) !important;
	font-family: var(--font-ui) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

.fe-zayavka table td strong,
.fe-zayavka table td b,
.fe-zayavka table th strong {
	color: var(--text-primary) !important;
}

/* Header row — "Информация об организации" / "Информация о слушателях" */
.fe-zayavka table td[colspan="8"],
.fe-zayavka table td[colspan="9"] {
	background: rgba(255, 225, 25, 0.06) !important;
}
.fe-zayavka table td[colspan="8"] span,
.fe-zayavka table td[colspan="9"] span {
	font-weight: 600 !important;
	font-size: 14px !important;
	color: var(--text-primary) !important;
}

/* Label cells */
.fe-zayavka .tdname {
	background: rgba(255, 225, 25, 0.04) !important;
	color: var(--text-secondary) !important;
	font-weight: 500;
}
.fe-zayavka .tdname span {
	color: var(--text-secondary) !important;
}

/* Value cells */
.fe-zayavka .tdvalue {
	color: var(--text-primary) !important;
}

/* Title "Заявка на обучение" — override inline color */
.fe-zayavka table p span,
.fe-zayavka table p[style] span {
	color: var(--text-primary) !important;
	font-family: var(--font-ui) !important;
}
/* glav.pro brand accent */
.fe-zayavka table p span[style*="color: #ed1e24"],
.fe-zayavka table p span[style*="color:#ed1e24"] {
	color: var(--danger) !important;
}

/* Buttons inside zayavka */
.fe-zayavka .btn-warning,
.fe-zayavka + div .btn-warning {
	background: var(--brand-yellow) !important;
	color: var(--brand-dark) !important;
	border: none !important;
	border-radius: var(--radius-sm);
	font-weight: 500;
	padding: 8px 16px;
	transition: background 0.15s;
}
.fe-zayavka .btn-warning:hover,
.fe-zayavka + div .btn-warning:hover {
	background: var(--brand-yellow-hover) !important;
	color: var(--brand-dark) !important;
}

.fe-zayavka .btn-info {
	background: var(--brand-dark-soft, #232340);
	color: #fff;
	border: 1px solid var(--divider);
	border-radius: var(--radius-sm);
	font-weight: 500;
	padding: 8px 16px;
}
.fe-zayavka .btn-info:hover {
	background: var(--brand-dark, #1A1A2E);
	color: #fff;
}

.fe-zayavka .btn-success {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border: none;
	border-radius: var(--radius-sm);
	font-weight: 500;
	padding: 8px 16px;
}
.fe-zayavka .btn-success:hover {
	background: var(--brand-yellow-hover);
	color: var(--brand-dark);
}

.fe-zayavka .btn-danger {
	background: var(--danger);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
}

.fe-zayavka .btn-xs {
	padding: 4px 10px;
	font-size: 11px;
	border-radius: 6px;
}

/* Email form */
.fe-zayavka .sendemail {
	color: var(--text-primary);
}

.fe-zayavka .inputemail input[type="text"],
.fe-zayavka .sendemail input[type="text"] {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm);
	padding: 8px 12px;
	font-size: 13px;
	font-family: var(--font-ui);
	width: 100%;
	max-width: 300px;
}
.fe-zayavka .inputemail input[type="text"]:focus {
	border-color: var(--brand-yellow);
	box-shadow: 0 0 0 3px var(--brand-yellow-light);
	outline: none;
}

/* Edit mode inputs */
.fe-zayavka input.zinput {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm);
	padding: 6px 10px;
	font-size: 13px;
	font-family: var(--font-ui);
}
.fe-zayavka input.zinput:focus {
	border-color: var(--brand-yellow);
	box-shadow: 0 0 0 3px var(--brand-yellow-light);
	outline: none;
}

/* Footer links — override inline colors */
.fe-zayavka h4 {
	color: var(--text-secondary) !important;
}
.fe-zayavka h4 a,
.fe-zayavka h4 a[style] {
	color: var(--link) !important;
}
.fe-zayavka h4 span,
.fe-zayavka h4 span[style],
.fe-zayavka h4 br + span {
	color: var(--text-tertiary) !important;
	font-family: var(--font-ui) !important;
	font-size: 12px !important;
}

/* Checkboxes row */
.fe-zayavka input[type="checkbox"] {
	accent-color: var(--brand-yellow);
}

/* Comment section */
.comment .one_comment {
	color: var(--text-primary);
}

.comment .one_comment .text_comment {
	background: var(--card-bg) !important;
	border: 1px solid var(--divider) !important;
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	padding: 10px 14px;
}

.comment .one_comment .time_comment {
	color: var(--text-tertiary) !important;
}

.comment .one_comment .head_comment b {
	color: var(--text-secondary) !important;
}

.comment .one_comment.noneread .head_comment {
	color: var(--link) !important;
}
.comment .one_comment.noneread .time_comment {
	color: var(--link) !important;
}

.comment .one_comment.ismetodist .text_comment {
	background: rgba(16, 185, 129, 0.08) !important;
	border-color: rgba(16, 185, 129, 0.2) !important;
}

.comment .one_comment.ismanager .text_comment {
	background: rgba(37, 99, 235, 0.08) !important;
	border-color: rgba(37, 99, 235, 0.2) !important;
}

.comment .one_comment .text_comment.text_problem {
	background: rgba(239, 68, 68, 0.08) !important;
	border-color: rgba(239, 68, 68, 0.2) !important;
}

/* Add comment form */
.comment .add_comment {
	color: var(--text-primary);
}

.comment .add_comment .head_add_comment {
	color: var(--text-primary);
}

.comment .add_comment textarea.inp_comment,
.comment .add_comment textarea.inp_comment_quest {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	font-size: 13px;
	font-family: var(--font-ui);
}
.comment .add_comment textarea:focus {
	border-color: var(--brand-yellow);
	box-shadow: 0 0 0 3px var(--brand-yellow-light);
	outline: none;
}

.comment .add_comment .btn-success {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border: none;
	border-radius: var(--radius-sm);
	font-weight: 500;
}

.comment table.comment_quest {
	background: var(--card-bg);
	border-color: var(--divider) !important;
}
.comment table.comment_quest td {
	border-color: var(--divider) !important;
	color: var(--text-primary);
}

/* Flag modal */
#modalFlag {
	background-color: var(--card-bg) !important;
	color: var(--text-primary);
	border-color: var(--divider) !important;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-elevated) !important;
}
#modalFlag textarea {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm);
}

/* Zayavka comment italic */
.fe-zayavka .zcomment i {
	color: var(--text-tertiary);
}

/* "Кол-во выданных документов" text */
.fe-zayavka + div + div,
.fe-zayavka ~ div:not(.comment) {
	color: var(--text-primary);
}

/* Select2 inside zayavka (edit mode) */
.fe-zayavka .select2-container .select2-choice {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm);
}

/* Addstudents textarea */
.fe-zayavka .addstudents textarea {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm);
}
.fe-zayavka .addstudents .info {
	color: var(--text-secondary);
}

/* Organization link button below zayavka */
.fe-zayavka + div + .comment + div a.btn-warning,
div > a.btn-warning.mb-sm {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border: none;
	border-radius: var(--radius-sm);
	font-weight: 500;
}

/* ============================================================
   ZAYAVKA PAGE — Spacing & Layout Improvements
   ============================================================ */

/* --- General spacing --- */
.fe-zayavka {
	padding: 8px 0;
}

/* Top action buttons — inline row with gap */
.fe-zayavka > .mb-md {
	display: inline-block;
	margin-bottom: 0;
	margin-right: 12px;
	vertical-align: middle;
}

.fe-zayavka > .mb-md:last-of-type {
	margin-right: 0;
}

/* --- Table spacing improvements --- */
.fe-zayavka table.contract_data {
	margin-bottom: 24px;
	border-spacing: 0;
}

.fe-zayavka table.contract_data td {
	padding: 10px 14px !important;
	vertical-align: top;
}

.fe-zayavka table.contract_data .tdname {
	padding: 10px 14px !important;
	min-width: 140px;
	white-space: normal;
}

.fe-zayavka table.contract_data .tdvalue {
	padding: 10px 14px !important;
}

/* Header cells — "Информация об организации" */
.fe-zayavka table td[colspan="8"],
.fe-zayavka table td[colspan="9"] {
	padding: 14px 16px !important;
}

/* Students table spacing */
.fe-zayavka table[border="1"] td {
	padding: 8px 10px !important;
	vertical-align: middle;
}

.fe-zayavka table[border="1"] {
	margin-bottom: 16px;
}

/* --- "Заявка на обучение" title spacing --- */
.fe-zayavka table[border="0"] {
	margin-bottom: 16px;
}

.fe-zayavka table[border="0"] p {
	margin: 8px 0 !important;
}

/* --- Flag image cursor & hover --- */
.fe-zayavka img.flag {
	cursor: pointer;
	margin-left: 8px;
	vertical-align: middle;
	transition: transform 0.15s;
}

.fe-zayavka img.flag:hover {
	transform: scale(1.15);
}

/* --- "История" buttons inside table — compact --- */
.fe-zayavka .btn-info.modalhist {
	padding: 4px 12px;
	font-size: 12px;
	border-radius: var(--radius-sm);
	margin-top: 6px;
	display: inline-block;
	cursor: pointer;
}

/* --- Email form section spacing --- */
.fe-zayavka .sendemail {
	margin-top: 20px;
	padding: 16px 0;
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	width: 100% !important;
	text-align: left !important;
}

.fe-zayavka .sendemail br {
	display: none;
}

.fe-zayavka .sendemail .inputemail {
	flex: 0 0 auto;
}

.fe-zayavka .sendemail .inputemail input[type="text"] {
	min-width: 260px;
}

.fe-zayavka .sendemail .btn {
	margin-top: 0;
}

.fe-zayavka .sendemail .btn-info.mt-xs {
	margin-top: 0 !important;
}

/* --- Navbar elements — tooltips via native title attribute --- */
.theme-btn,
.nav-btn,
.widget-toggle-btn,
.reduce-motion-btn {
	position: relative;
}

/* --- Comment section spacing --- */
.comment {
	margin-top: 24px;
}

.comment hr {
	border-color: var(--divider, #333);
	margin: 16px 0;
}

.comment .one_comment {
	padding: 12px 0;
}

.comment .one_comment .head_comment {
	margin-bottom: 8px;
}

.comment .one_comment .text_comment {
	padding: 12px 16px !important;
	margin-top: 8px;
	border-radius: var(--radius-sm, 6px) !important;
	line-height: 1.5;
}

.comment .add_comment {
	margin-top: 16px;
	padding: 16px 0;
}

.comment .add_comment .head_add_file {
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.comment .add_comment .head_add_file_label {
	color: var(--text-secondary);
	font-weight: 500;
}

.comment .add_comment .head_add_file input[type="file"] {
	display: none;
}

.comment .add_comment .head_add_file .file-upload-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border-radius: var(--radius-sm, 8px);
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease, box-shadow 0.2s ease;
	border: none;
	line-height: 1.4;
}

.comment .add_comment .head_add_file .file-upload-label:hover {
	background: var(--brand-yellow-hover);
	box-shadow: 0 0 0 3px var(--brand-yellow-light);
}

.comment .add_comment .head_add_file .file-upload-label:active {
	transform: scale(0.97);
}

.comment .add_comment .head_add_file .file-upload-label i,
.comment .add_comment .head_add_file .file-upload-label .fa {
	font-size: 14px;
}

.comment .add_comment .head_add_file .file-name-display {
	color: var(--text-secondary);
	font-size: 13px;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.comment .add_comment .head_add_comment {
	font-size: 18px;
	font-weight: 600;
	margin: 16px 0 12px;
}

.comment .add_comment .state_add_comment {
	margin-bottom: 12px;
}

.comment .add_comment .state_add_comment select {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 6px);
	padding: 8px 12px;
	font-family: var(--font-ui);
	min-width: 220px;
}

.comment .add_comment textarea.inp_comment,
.comment .add_comment textarea.inp_comment_quest {
	width: 100%;
	min-height: 80px;
	margin-bottom: 12px;
	padding: 12px !important;
}

.comment .add_comment .btn-success {
	margin-top: 8px;
	padding: 10px 24px;
}

.comment .add_comment .btn-danger {
	background: var(--danger, #ef4444);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm, 6px);
	padding: 6px 14px;
	font-size: 12px;
	margin-top: 8px;
}

/* --- Footer info (НОУ ДПО "ФИПК") spacing --- */
.fe-zayavka ~ h4,
.fe-zayavka + form + h4 {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--divider);
}

.fe-zayavka ~ h4 a,
.fe-zayavka ~ h4 span {
	color: var(--text-secondary) !important;
}

.fe-zayavka ~ h4 a:hover {
	color: var(--link) !important;
}

/* --- "Кол-во выданных документов" line --- */
.fe-zayavka + div {
	margin: 12px 0;
	color: var(--text-secondary);
	font-size: 13px;
}

/* ============================================================
   ZAYAVKA EDIT MODE — Pricing, Selects, Save Buttons
   ============================================================ */

/* --- Pricing table (Направление/Количество/...) --- */
.fe-zayavka .prices {
	margin-top: 16px;
	margin-bottom: 20px;
}

.fe-zayavka .prices .table {
	border-collapse: collapse;
}

.fe-zayavka .prices .table th {
	background: var(--app-bg);
	color: var(--text-secondary);
	padding: 10px 14px;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 2px solid var(--divider);
}

.fe-zayavka .prices .table td {
	padding: 8px 14px;
	border-bottom: 1px solid var(--divider);
}

.fe-zayavka .prices .table .zinput {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 6px);
	padding: 8px 12px;
}

/* --- Promo/Акция section --- */
.fe-zayavka .promo {
	margin-top: 20px;
	margin-bottom: 16px;
	padding: 12px 0;
}

.fe-zayavka .promo select.form-control {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 6px);
	padding: 8px 12px;
	max-width: 400px;
}

/* --- ЭЦП / Бумага selects --- */
.fe-zayavka select.zinput {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 6px);
	padding: 8px 12px;
	min-width: 160px;
	cursor: pointer;
}

/* --- Edit form fields (Кто подписывает, etc.) — vertical spacing --- */
.fe-zayavka > div:not(.hidden):not(.promo):not(.prices) {
	margin-bottom: 8px;
}

/* --- Save buttons area --- */
#zayavka-form > .btn-warning[data-preview],
#zayavka-form > .btn-info.sub[data-submit] {
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--radius-sm, 6px);
	margin-top: 20px;
	display: inline-block;
	vertical-align: top;
	height: 42px;
	line-height: 20px;
	box-sizing: border-box;
	cursor: pointer;
}

#zayavka-form > .btn-warning[data-preview] {
	margin-right: 12px;
}

#zayavka-form > .btn-info.sub[data-submit] {
	background: var(--brand-blue, #3b82f6);
	color: #fff;
	border: 1px solid var(--brand-blue, #3b82f6);
	transition: background 0.15s;
}

#zayavka-form > .btn-info.sub[data-submit]:hover {
	background: #2563eb;
}

/* --- "Сохранить не отправляя в 1С" --- */
#zayavka-form > .mt-xl {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--divider);
}

#zayavka-form > .mt-xl .btn-default[data-rollback] {
	background: var(--card-bg);
	color: var(--text-secondary);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 6px);
	padding: 8px 16px;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

#zayavka-form > .mt-xl .btn-default[data-rollback]:hover {
	border-color: var(--brand-yellow);
	color: var(--text-primary);
}

/* --- Students table buttons (Добавить слушателя, etc.) --- */
.fe-zayavka .btn-warning.btn-xs,
.fe-zayavka .btn-success.btn-xs,
.fe-zayavka .btn-info.btn-xs:not(.modalhist) {
	display: inline-block;
	vertical-align: middle;
	padding: 6px 14px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: var(--radius-sm, 6px);
	margin-right: 8px;
	margin-bottom: 8px;
}

.fe-zayavka .btn-default.btn-xs {
	display: inline-block;
	vertical-align: middle;
	padding: 6px 14px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: var(--radius-sm, 6px);
	background: var(--card-bg);
	color: var(--text-secondary);
	border: 1px solid var(--input-border);
	margin-right: 8px;
	margin-bottom: 8px;
}
/* ============================================================
   AJAX History Modal — Dark Theme
   ============================================================ */
#ajaxHistoryModal .modal-content {
	background: var(--panel-bg);
	border: 1px solid var(--divider);
	border-radius: var(--radius-md, 10px);
	color: var(--text-primary);
}

#ajaxHistoryModal .modal-header {
	border-bottom: 1px solid var(--divider);
	padding: 16px 20px;
}

#ajaxHistoryModal .modal-header .close {
	color: var(--text-secondary);
	opacity: 0.8;
	font-size: 24px;
	text-shadow: none;
}

#ajaxHistoryModal .modal-header .close:hover {
	color: var(--text-primary);
	opacity: 1;
}

#ajaxHistoryModal .modal-title {
	color: var(--text-primary);
	font-size: 18px;
	font-weight: 600;
}

#ajaxHistoryModal .modal-body {
	padding: 20px;
	max-height: 70vh;
	overflow-y: auto;
}

#ajaxHistoryModal .modal-body table {
	width: 100%;
	color: var(--text-primary);
}

#ajaxHistoryModal .modal-body table td,
#ajaxHistoryModal .modal-body table th {
	padding: 8px 12px;
	border-bottom: 1px solid var(--divider);
}

#ajaxHistoryModal .modal-body table th {
	background: var(--app-bg);
	font-weight: 600;
}

#ajaxHistoryModal .modal-body a {
	color: var(--link);
}

/* Modal backdrop */
#ajaxHistoryModal + .modal-backdrop,
.modal-backdrop {
	background: rgba(0, 0, 0, 0.7);
}

/* ============================================================
   ZAYAVKA — Button Alignment & Consistency
   ============================================================ */

/* --- Top action buttons — uniform height and alignment --- */
.fe-zayavka > .mb-md > .btn,
.fe-zayavka > .mb-md .btn {
	display: inline-block;
	vertical-align: middle;
	padding: 8px 18px;
	font-size: 13px;
	border-radius: var(--radius-sm, 6px);
	line-height: 1.5;
	cursor: pointer;
}

/* "Редактировать заявку" */
.fe-zayavka > .mb-md > .btn-warning {
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
}

/* "Сформировать печатную форму договора" */
.fe-zayavka > .mb-md > .btn-info:not(.modalhist) {
	padding: 10px 20px;
	font-size: 14px;
}

/* --- "История" buttons — consistent size --- */
.fe-zayavka .btn.modalhist {
	padding: 5px 14px;
	font-size: 12px;
	border-radius: var(--radius-sm, 6px);
	vertical-align: middle;
	line-height: 1.4;
	cursor: pointer;
}

/* --- Email section buttons — aligned --- */
.fe-zayavka .sendemail .btn {
	display: inline-block;
	vertical-align: middle;
	padding: 8px 18px;
	font-size: 13px;
	border-radius: var(--radius-sm, 6px);
	line-height: 1.5;
}

/* "Отправить список на email" */
.fe-zayavka .sendemail .btn-success {
	padding: 10px 20px;
	font-size: 14px;
}

/* "Отправить ссылки на договор и счет" */
.fe-zayavka .sendemail .btn-info {
	padding: 10px 20px;
	font-size: 14px;
}

/* --- Comment section "Сохранить" button --- */
.comment .add_comment .btn-success {
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--radius-sm, 6px);
}

/* ============================================================
   ZAYAVKA — Mobile Responsive (< 768px)
   ============================================================ */
@media (max-width: 767px) {

	/* --- Tables — horizontal scroll wrapper --- */
	.fe-zayavka table.contract_data,
	.fe-zayavka table[border="1"],
	.fe-zayavka .prices .table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.fe-zayavka table.contract_data {
		min-width: 700px;
	}

	.fe-zayavka table.contract_data td {
		padding: 8px 10px !important;
		font-size: 13px;
	}

	.fe-zayavka table.contract_data .tdname {
		min-width: 100px;
		padding: 8px 10px !important;
	}

	/* --- Buttons — full width on mobile --- */
	.fe-zayavka > .mb-md > .btn-warning,
	.fe-zayavka > .mb-md > .btn-info:not(.modalhist) {
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 8px;
		box-sizing: border-box;
	}

	/* --- Email section — stack vertically --- */
	.fe-zayavka .sendemail {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
	}

	.fe-zayavka .sendemail .inputemail {
		width: 100%;
	}

	.fe-zayavka .sendemail .inputemail input[type="text"] {
		width: 100%;
		min-width: unset;
	}

	.fe-zayavka .sendemail .btn {
		display: block !important;
		width: 100% !important;
		text-align: center;
		box-sizing: border-box;
		white-space: normal;
	}

	/* --- Save buttons — full width --- */
	#zayavka-form > .btn-warning[data-preview],
	#zayavka-form > .btn-info.sub[data-submit] {
		display: block !important;
		width: 100%;
		text-align: center;
		margin-right: 0;
		box-sizing: border-box;
	}

	#zayavka-form > .mt-xl .btn-default[data-rollback] {
		display: block;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}

	/* --- Modal — full width on mobile --- */
	#ajaxHistoryModal .modal-dialog {
		margin: 10px;
		width: auto;
	}

	#ajaxHistoryModal .modal-body {
		padding: 12px;
		max-height: 80vh;
	}

	#ajaxHistoryModal .modal-body table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* --- Comment section — compact --- */
	.comment .add_comment textarea.inp_comment,
	.comment .add_comment textarea.inp_comment_quest {
		min-height: 60px;
	}

	.comment .add_comment .head_add_file {
		flex-direction: column;
		align-items: flex-start;
	}

	/* --- Students table buttons — stack --- */
	.fe-zayavka .btn-warning.btn-xs,
	.fe-zayavka .btn-success.btn-xs,
	.fe-zayavka .btn-info.btn-xs:not(.modalhist),
	.fe-zayavka .btn-default.btn-xs {
		display: block;
		width: 100%;
		text-align: center;
		margin-right: 0;
		box-sizing: border-box;
	}
}

/* ============================================================
   ZAYAVKA — Small tablet (< 576px) extra tweaks
   ============================================================ */
@media (max-width: 575px) {

	.fe-zayavka table.contract_data td[colspan="8"],
	.fe-zayavka table.contract_data td[colspan="9"] {
		padding: 10px 12px !important;
		font-size: 14px;
	}

	.fe-zayavka table.contract_data .tdname {
		min-width: 80px;
		font-size: 12px;
	}

	.fe-zayavka table.contract_data .tdvalue {
		font-size: 13px;
	}

	/* Pricing table headers */
	.fe-zayavka .prices .table th {
		font-size: 11px;
		padding: 8px 8px;
	}
}

/* ============================================================
   MODAL PAGES — Theme support (tmpl=component)
   Offer, Aff, SMS, AddOrgs, SAM и другие iframe-модалки
   ============================================================ */

/* --- SAM orgsforadd (Подгрузка организаций) --- */
.table_orgs {
	color: var(--text-primary);
}

.table_orgs table.listorgs {
	width: 100%;
	border-collapse: collapse;
	color: var(--text-primary);
}

.table_orgs table.listorgs th {
	background: var(--app-bg);
	color: var(--text-secondary);
	padding: 12px 14px;
	font-weight: 600;
	font-size: 13px;
	border-bottom: 2px solid var(--divider);
	text-align: left;
}

.table_orgs table.listorgs td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--divider);
	vertical-align: middle;
}

.table_orgs table.listorgs tr:hover td {
	background: var(--accent-soft);
}

/* CRM-2504 (helpdesk #55, Плеханова 06.05.2026): мягкая подсветка строк,
   организация уже привязана к текущему менеджеру (status='my'). Помогает
   визуально отличать «уже моя» в результате массовой проверки ИНН — иначе
   менеджер не видит, какие из 30+ строк уже обработаны. Лево-боковой акцент
   полосы вместо заливки фона — не конфликтует с :hover (прозрачность 60%). */
.table_orgs table.listorgs tr.processed td {
	background: linear-gradient(to right, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.04) 100%);
	border-left: 3px solid var(--brand-yellow, #f59e0b);
}
.table_orgs table.listorgs tr.processed:hover td {
	background: linear-gradient(to right, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.08) 100%);
}
.table_orgs table.listorgs tr.processed td:not(:first-child) {
	border-left: none;
}

.table_orgs table.listorgs .btn {
	background: var(--card-bg);
	color: var(--text-primary);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 6px);
	padding: 6px 16px;
	font-size: 13px;
	cursor: pointer;
}

.table_orgs table.listorgs .btn:hover {
	border-color: var(--brand-yellow);
	color: var(--text-primary);
}

.table_orgs table.listorgs .center {
	text-align: center;
}

/* --- Offer form (КП) --- */
.offer {
	background: var(--panel-bg);
	border-radius: var(--radius-md, 10px);
	padding: 32px;
	color: var(--text-primary);
}

.offer h2 {
	color: var(--text-primary);
	margin-bottom: 24px;
}

.offer .tariff-table {
	background: var(--card-bg);
	border: 1px solid var(--divider);
	color: var(--text-primary);
	margin-top: 12px;
	margin-bottom: 24px;
}

.offer .tariff-table th {
	background: var(--app-bg) !important;
	color: var(--text-secondary) !important;
	border-bottom: 1px solid var(--divider);
	font-weight: 600;
	font-size: 13px;
}

.offer .tariff-table td {
	border-bottom: 1px solid var(--divider);
	color: var(--text-primary);
	padding: 10px 12px;
}

.offer td {
	color: var(--text-primary);
}

.offer .tariff-table tr:hover td {
	background: var(--accent-soft);
}

.offer .btn-select,
.offer .btn-tariff {
	background: var(--card-bg) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--divider) !important;
	border-radius: var(--radius-sm, 6px);
	padding: 6px 16px;
	cursor: pointer;
	transition: all 0.15s;
}

.offer .btn-tariff:hover {
	border-color: var(--brand-yellow) !important;
	color: var(--text-primary) !important;
	background: var(--card-bg) !important;
	transform: none;
}

.offer .btn-tariff.active {
	background: var(--brand-yellow) !important;
	color: var(--brand-dark) !important;
	border-color: var(--brand-yellow) !important;
	font-weight: 600;
}

.offer .table-borderless {
	color: var(--text-primary);
	margin-top: 8px;
	margin-bottom: 8px;
}

.offer .table-borderless td {
	border: none;
	padding: 10px 12px;
	vertical-align: middle;
}

.offer .form-control,
.offer select.form-control {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 6px);
}

.offer input[type="date"] {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 6px);
	padding: 6px 12px;
}

[data-theme="dark"] .offer input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(0.8);
}

.offer .selected-result {
	background: var(--app-bg) !important;
	border-top: 1px solid var(--divider);
	padding: 20px 24px;
	margin-top: 24px;
	border-radius: 0 0 var(--radius-md, 10px) var(--radius-md, 10px);
}

.offer .btn-primary.submit-btn {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border: 1px solid var(--brand-yellow);
	border-radius: var(--radius-sm, 6px);
	padding: 8px 20px;
	font-weight: 600;
	cursor: pointer;
}

.offer .btn-primary.submit-btn:hover {
	background: var(--brand-yellow-hover);
}

.offer .btn-success.submit-btn {
	background: rgba(16,185,129,0.15);
	color: #10B981;
	border: 1px solid rgba(16,185,129,0.3);
	border-radius: var(--radius-sm, 6px);
	padding: 8px 20px;
	font-weight: 600;
	cursor: pointer;
}

.offer .btn-success.submit-btn:hover {
	background: rgba(16,185,129,0.25);
}

.offer .cancel-btn {
	background: var(--card-bg);
	color: var(--text-secondary);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 6px);
	padding: 8px 20px;
	cursor: pointer;
}

.offer .cancel-btn:hover {
	border-color: var(--text-secondary);
	color: var(--text-primary);
}

.offer .tariff-error {
	border-color: #ef4444 !important;
}

.offer .required-label {
	color: #ef4444;
}

.offer .star {
	color: #ef4444;
}

/* --- Aff (Аффилированные компании) --- */
.stthomeoffice.addorgs {
	background: var(--panel-bg);
	border-radius: var(--radius-md, 10px);
	padding: 20px;
	color: var(--text-primary);
}

.stthomeoffice.addorgs table {
	width: 100%;
	color: var(--text-primary);
	border-collapse: collapse;
}

.stthomeoffice.addorgs table th {
	background: var(--app-bg);
	color: var(--text-secondary);
	padding: 10px 12px;
	font-weight: 600;
	font-size: 13px;
	border-bottom: 1px solid var(--divider);
	text-align: left;
}

.stthomeoffice.addorgs table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--divider);
}

.stthomeoffice.addorgs table tr:hover td {
	background: var(--accent-soft);
}

.stthomeoffice.addorgs a {
	color: var(--link);
	text-decoration: none;
}

.stthomeoffice.addorgs a:hover {
	text-decoration: underline;
}

.stthomeoffice.addorgs .btn {
	background: var(--card-bg);
	color: var(--text-primary);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 6px);
	padding: 6px 14px;
	font-size: 13px;
	cursor: pointer;
}

.stthomeoffice.addorgs .btn:hover {
	border-color: var(--brand-yellow);
	color: var(--text-primary);
}

/* --- "Назад к рабочему экрану" link (tmpl=component) --- */
a[href*="view=work"].back-link,
.component-back-link {
	color: var(--link);
}

/* --- Generic modal page overrides (tmpl=component) --- */
.stt-modal-page {
	background: var(--panel-bg);
	border-radius: var(--radius-md, 10px);
	padding: 20px;
	color: var(--text-primary);
}

/* ============================================================
   SMS Modal — Dark Theme (sms1, sms2)
   ============================================================ */
.container.stthomeoffice.p-md {
	background: var(--panel-bg);
	border-radius: var(--radius-md, 10px);
	padding: 24px;
	color: var(--text-primary);
}

.container.stthomeoffice.p-md .form-group {
	margin-bottom: 16px;
}

.container.stthomeoffice.p-md .control-label {
	color: var(--text-secondary);
	font-weight: 600;
	font-size: 13px;
}

.container.stthomeoffice.p-md .form-control {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 6px);
}

.container.stthomeoffice.p-md .form-control:focus {
	border-color: var(--brand-yellow);
	box-shadow: 0 0 0 2px rgba(255,225,25,0.15);
	outline: none;
}

.container.stthomeoffice.p-md .btn-primary {
	background: var(--brand-yellow);
	color: var(--brand-dark);
	border: 1px solid var(--brand-yellow);
	border-radius: var(--radius-sm, 6px);
	padding: 8px 20px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}

.container.stthomeoffice.p-md .btn-primary:hover {
	background: var(--brand-yellow-hover);
}

/* ============================================================
   AddOrgs Modal — Dark Theme
   ============================================================ */
.stthomeoffice.addorgs .form_addorgs_long textarea {
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm, 6px);
	width: 100%;
	min-height: 80px;
	padding: 10px 12px;
	font-size: 14px;
	resize: vertical;
}

.stthomeoffice.addorgs .form_addorgs_long textarea:focus {
	border-color: var(--brand-yellow);
	box-shadow: 0 0 0 2px rgba(255,225,25,0.15);
	outline: none;
}

.stthomeoffice.addorgs .form_addorgs_long textarea::placeholder {
	color: var(--text-tertiary, #666);
}

.stthomeoffice.addorgs .btn-success.sendbutton {
	background: rgba(16,185,129,0.15);
	color: #10B981;
	border: 1px solid rgba(16,185,129,0.3);
	border-radius: var(--radius-sm, 6px);
	padding: 10px 24px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}

.stthomeoffice.addorgs .btn-success.sendbutton:hover {
	background: rgba(16,185,129,0.25);
}

/* =============================================
   Session Expired — v2 styled card
   ============================================= */
.v2-session-expired {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: 40px 20px;
	text-align: center;
}

.v2-session-expired__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--accent-soft, rgba(255, 225, 25, 0.12));
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.v2-session-expired__icon i {
	font-size: 28px;
	color: var(--brand-yellow, #FFE119);
}

.v2-session-expired__title {
	font-size: 20px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 8px;
}

.v2-session-expired__text {
	font-size: 14px;
	color: var(--text-secondary);
	margin-bottom: 24px;
	max-width: 320px;
	line-height: 1.5;
}

.v2-session-expired__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--brand-yellow, #FFE119);
	color: var(--brand-dark, #1A1A2E);
	border: none;
	border-radius: var(--radius-sm, 8px);
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.v2-session-expired__btn:hover {
	background: var(--brand-yellow-hover, #E6CB17);
}

.v2-session-expired__btn i {
	font-size: 13px;
}

/* CRM-2410: на 390px шапка .nav-right из 7 кнопок (reduce-motion + theme +
   font-prefs + changelog-bell + comments-bell + faq-help + user-block) даёт
   right=391 → аватар «СИИ» обрезается. На очень узких экранах прячем
   .reduce-motion-btn и .font-prefs-btn — они доступны через настройки темы /
   кнопку T↑ соответственно, и редко используются с мобильного. */
@media (max-width: 480px) {
	.navbar .nav-right .reduce-motion-btn,
	.navbar .nav-right .font-prefs-btn {
		display: none;
	}
}

/* =======================================================================
   CRM-2631: Frontend конструктор договора (com_sttconstr / view=contract).
   В gp_salesos нет CSS для Bootstrap-3 .form-horizontal/.control-group,
   поэтому label занимал всю ширину строки → форма «плыла». Скоупим стили
   на .sttconstr-v2 (обёртка добавлена во frontend default.php), чтобы не
   ломать админский edit-вид (общий include тот же).
   ======================================================================= */
.sttconstr-v2 {
	max-width: 1080px;
	margin: 16px auto;
	padding: 0 12px;
}

.sttconstr-v2__toolbar {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-bottom: 16px;
}

.sttconstr-v2 #contract-form {
	background: var(--card-bg);
	border: 1px solid var(--divider);
	border-radius: var(--radius-md, 12px);
	padding: 0;
	overflow: hidden;
}

/* --- Табы --- */
.sttconstr-v2 .nav-tabs {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0 16px;
	list-style: none;
	border-bottom: 1px solid var(--divider);
	background: transparent;
}

.sttconstr-v2 .nav-tabs > li {
	margin: 0;
}

.sttconstr-v2 .nav-tabs > li > a {
	display: inline-block;
	padding: 12px 18px;
	margin: 0;
	color: var(--text-secondary);
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease;
}

.sttconstr-v2 .nav-tabs > li > a:hover {
	color: var(--text-primary);
	border-bottom-color: var(--divider);
}

.sttconstr-v2 .nav-tabs > li.active > a,
.sttconstr-v2 .nav-tabs > li.active > a:hover,
.sttconstr-v2 .nav-tabs > li.active > a:focus {
	color: var(--text-primary);
	background: transparent;
	border-bottom-color: var(--accent, #FFE119);
}

.sttconstr-v2 .tab-content {
	padding: 20px 24px;
}

/* --- control-group: label слева, controls справа --- */
.sttconstr-v2 .control-group {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 12px 20px;
	align-items: start;
	margin-bottom: 14px;
}

.sttconstr-v2 .control-group:last-child {
	margin-bottom: 0;
}

/* control-group со скрытым input — без gap-строки */
.sttconstr-v2 .control-group:not(:has(.control-label)) {
	display: none;
}

.sttconstr-v2 .control-label {
	float: none;
	width: auto;
	margin: 0;
	padding-top: 8px;
	text-align: right;
}

.sttconstr-v2 .control-label label {
	color: var(--text-secondary);
	font-weight: 500;
	font-size: 13px;
	margin: 0;
}

.sttconstr-v2 .controls {
	margin: 0;
	min-width: 0;
}

.sttconstr-v2 .controls > input[type="text"],
.sttconstr-v2 .controls > input[type="number"],
.sttconstr-v2 .controls > input[type="email"],
.sttconstr-v2 .controls > input[type="tel"],
.sttconstr-v2 .controls > input[type="date"],
.sttconstr-v2 .controls > input[type="search"],
.sttconstr-v2 .controls > textarea,
.sttconstr-v2 .controls > select {
	width: 100%;
	max-width: 520px;
	box-sizing: border-box;
	background: var(--input-bg, var(--card-bg));
	color: var(--input-text, var(--text-primary));
	border: 1px solid var(--input-border, var(--divider));
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 14px;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.sttconstr-v2 .controls > input[type="text"]:focus,
.sttconstr-v2 .controls > input[type="number"]:focus,
.sttconstr-v2 .controls > input[type="email"]:focus,
.sttconstr-v2 .controls > input[type="tel"]:focus,
.sttconstr-v2 .controls > input[type="date"]:focus,
.sttconstr-v2 .controls > input[type="search"]:focus,
.sttconstr-v2 .controls > textarea:focus,
.sttconstr-v2 .controls > select:focus {
	outline: none;
	border-color: var(--accent, #FFE119);
	box-shadow: 0 0 0 3px rgba(255, 225, 25, 0.18);
}

.sttconstr-v2 .controls > textarea {
	min-height: 90px;
	resize: vertical;
}

/* Chosen / Select2 контейнеры — растяжка */
.sttconstr-v2 .controls .chzn-container,
.sttconstr-v2 .controls .chosen-container,
.sttconstr-v2 .controls .select2-container {
	width: 100% !important;
	max-width: 520px;
}

/* --- Календарь (input + button) --- */
.sttconstr-v2 .controls .input-append,
.sttconstr-v2 .controls .input-prepend {
	display: flex;
	gap: 6px;
	align-items: center;
	max-width: 520px;
}

.sttconstr-v2 .controls .input-append input[type="text"],
.sttconstr-v2 .controls .input-prepend input[type="text"] {
	flex: 1;
	min-width: 0;
}

.sttconstr-v2 .controls .input-append .btn,
.sttconstr-v2 .controls .input-append button {
	flex-shrink: 0;
}

/* --- Tab pane «Секции» --- */
.sttconstr-v2 #Sections > div > p {
	color: var(--text-secondary);
	font-size: 13px;
	margin: 0 0 16px;
}

/* CRM-2631: .modalhelp в edit.php имеет .btn.btn-info (Bootstrap-3 голубой),
   в gp_salesos выглядит как тёмный квадрат — переопределяем на нейтральный
   pill-стиль, согласованный с template'ом. */
.sttconstr-v2 #Sections a.modalhelp {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 14px;
	margin-right: 8px;
	margin-bottom: 12px;
	background: var(--accent-soft, rgba(255, 225, 25, 0.15));
	color: var(--text-primary);
	border: 1px solid var(--divider);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.sttconstr-v2 #Sections a.modalhelp:hover,
.sttconstr-v2 #Sections a.modalhelp:focus {
	background: var(--accent, #FFE119);
	color: var(--accent-text, #1A1A2E);
	border-color: var(--accent, #FFE119);
	text-decoration: none;
}

/* Секция-карточка */
.sttconstr-v2 .csection {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
	background: var(--card-bg);
	border: 1px solid var(--divider);
	border-radius: var(--radius-sm, 8px);
	padding: 14px;
	margin-bottom: 12px;
}

.sttconstr-v2 .csection .mdsect,
.sttconstr-v2 .csection .htmlsect {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	min-width: 0;
}

.sttconstr-v2 .csection .mdsect input[type="text"],
.sttconstr-v2 .csection .mdsect select,
.sttconstr-v2 .csection .mdsect textarea {
	width: 100%;
	box-sizing: border-box;
	background: var(--input-bg, var(--card-bg));
	color: var(--input-text, var(--text-primary));
	border: 1px solid var(--input-border, var(--divider));
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 13px;
}

.sttconstr-v2 .csection .mdsect input.shot.ordering {
	max-width: 90px;
}

.sttconstr-v2 .csection .mdsect textarea {
	min-height: 180px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 12.5px;
	line-height: 1.5;
}

.sttconstr-v2 .csection .htmlsect .htmlresult {
	flex: 1;
	width: 100%;
	min-width: 0;
	min-height: 180px;
	padding: 12px 14px;
	background: var(--app-bg, transparent);
	border: 1px dashed var(--divider);
	border-radius: 6px;
	color: var(--text-primary);
	font-size: 13px;
	line-height: 1.5;
	overflow: auto;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Уменьшаем заголовки внутри preview — глобальные h1/h2/h3 в шаблоне ~36/28/22px,
   в узкой колонке preview слова ломаются посимвольно. */
.sttconstr-v2 .csection .htmlsect .htmlresult h1 {
	font-size: 18px;
	font-weight: 600;
	margin: 6px 0 8px;
	line-height: 1.25;
}

.sttconstr-v2 .csection .htmlsect .htmlresult h2 {
	font-size: 16px;
	font-weight: 600;
	margin: 8px 0 6px;
	line-height: 1.3;
}

.sttconstr-v2 .csection .htmlsect .htmlresult h3 {
	font-size: 14px;
	font-weight: 600;
	margin: 6px 0 4px;
	line-height: 1.35;
}

.sttconstr-v2 .csection .htmlsect .htmlresult p,
.sttconstr-v2 .csection .htmlsect .htmlresult li {
	margin: 4px 0;
	font-size: 13px;
	line-height: 1.5;
}

.sttconstr-v2 .csection .htmlsect .htmlresult table {
	width: 100%;
	max-width: 100%;
	font-size: 12px;
	border-collapse: collapse;
}

.sttconstr-v2 .csection .htmlsect .htmlresult table td,
.sttconstr-v2 .csection .htmlsect .htmlresult table th {
	padding: 4px 6px;
	border: 1px solid var(--divider);
	vertical-align: top;
}

/* Кнопка «+ добавить секцию» */
.sttconstr-v2 .addsection {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 36px;
	padding: 0 14px;
	margin-top: 8px;
	cursor: pointer;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
}

/* На узких экранах — карточка секции в 1 колонку */
@media (max-width: 900px) {
	.sttconstr-v2 .control-group {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.sttconstr-v2 .control-label {
		text-align: left;
		padding-top: 0;
	}
	.sttconstr-v2 .csection {
		grid-template-columns: 1fr;
	}
}

/* --- Тёмная тема: переопределение для read-only state и acccent на табах --- */
[data-theme="dark"] .sttconstr-v2 .controls > input[disabled],
[data-theme="dark"] .sttconstr-v2 .controls > input[readonly] {
	background: var(--input-bg-disabled, rgba(255, 255, 255, 0.04));
	color: var(--input-text-disabled, var(--text-tertiary));
}

[data-theme="dark"] .sttconstr-v2 .csection .htmlsect .htmlresult {
	background: rgba(255, 255, 255, 0.03);
}

/* CRM-2631: оверлей-модалка для .modalhelp (Помощь по форматированию /
   Список переменных). Заменяет SqueezeBox из mootools, который недоступен
   в gp_salesos. */
.sttconstr-help-overlay {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	animation: sttconstrHelpFade .15s ease;
}

@keyframes sttconstrHelpFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.sttconstr-help-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(900px, 100%);
	max-height: min(85vh, 720px);
	background: var(--card-bg);
	color: var(--text-primary);
	border: 1px solid var(--divider);
	border-radius: var(--radius-md, 12px);
	box-shadow: var(--shadow-elevated, 0 8px 30px rgba(0, 0, 0, 0.18));
	overflow: hidden;
}

.sttconstr-help-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	color: var(--text-secondary);
	border: none;
	border-radius: 6px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.sttconstr-help-close:hover,
.sttconstr-help-close:focus {
	background: var(--divider);
	color: var(--text-primary);
	outline: none;
}

.sttconstr-help-body {
	padding: 20px 24px 24px;
	overflow: auto;
	font-size: 13px;
	line-height: 1.5;
}

.sttconstr-help-body h2 {
	margin-top: 0;
	font-size: 18px;
	font-weight: 600;
}

.sttconstr-help-body table.helpmarkdown {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.sttconstr-help-body table.helpmarkdown th,
.sttconstr-help-body table.helpmarkdown td {
	padding: 8px 10px;
	border: 1px solid var(--divider);
	vertical-align: top;
	text-align: left;
}

.sttconstr-help-body table.helpmarkdown th {
	background: var(--accent-soft, rgba(255, 225, 25, 0.10));
	font-weight: 600;
}

.sttconstr-help-body .monofont,
.sttconstr-help-body code,
.sttconstr-help-body pre {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 12.5px;
}

body.sttconstr-help-open {
	overflow: hidden;
}