/* Стили админки (shop/admin/**). Отдельный файл, а не style.css.
   Всё строится на токенах из tokens.css.

   ВАЖНО: этот файл подключается в shop/header.inc БЕЗ УСЛОВИЙ — то есть
   на КАЖДОЙ странице сайта, не только в разделах админки. Поэтому здесь
   запрещены голые селекторы элементов (body, table, input, a, td, h1...) —
   только классы с префиксом .adm-, плюс несколько классов/ID, которых
   требует assets/js/consultant.js (AjaxFormShowVizits): .showvizits,
   .cutomer_vizits_table_additional — их имена не переименовывать, они
   заданы в customervizits.php и в JS. */

/* ---------- Общая страница (main.php, orders.php, unregcustomers.php,
   customervizits.php, detail.php) ---------- */

.adm-page {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-ink);
	background: var(--color-bg-alt);
	min-height: 100vh;
	padding: var(--space-5);
	box-sizing: border-box;
}

.adm-page-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	color: var(--color-ink);
	margin: 0 0 var(--space-5);
}

/* ---------- Ссылка "назад" над таблицей (viewtable.php) ----------
   Голый <p> не имел отступа снизу (сброс полей у сайта глобальный) - текст
   прилипал прямо к таблице (жалоба заказчицы 2026-08-10: "здесь прилипла
   фраза к таблице"). */
.adm-page-back {
	margin: 0 0 var(--space-4);
}

.adm-empty {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-ink-soft);
	padding: var(--space-5);
}

/* ---------- Вкладки (unregcustomers.php - "Покупатели": Зарегистрированные/
   Незарегистрированные, запрос заказчицы 2026-08-09). Тот же визуальный
   паттерн, что у вкладок СДЭК/Деловые линии на карточке товара
   (.pdp-delivery-tab, style.css) - активная вкладка отмечена красной рамкой
   на белом фоне, неактивная серая. Переключатель - на JS (assets/js/my.js,
   .adm-tabs), без ленивой подгрузки - обе панели уже отрисованы PHP при
   загрузке страницы, в отличие от pdp-delivery-tab с его iframe. ---------- */
.adm-tabs {
	display: flex;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
}

.adm-tab {
	min-height: 36px;
	padding: 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-ink-soft);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}

.adm-tab.is-active {
	color: var(--color-brand-red);
	border-color: var(--color-brand-red);
	background: var(--color-bg);
}

.adm-tab:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

.adm-tab-panel[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.adm-tab {
		transition: none;
	}
}

/* ---------- Служебные страницы (add/del_*_tabl.php, fill_prod_tabl.php,
   install.php) - раньше это был голый echo-текст с <br> на классе .styles,
   которого вообще нет в CSS (запрещённый здесь голый селектор ловушку не
   ловит - класс просто не существовал). Разметку внутри (сами echo с
   "Успешно"/"Нельзя") не переписывали - только обёртка. ---------- */
.adm-log {
	max-width: 640px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.8;
	color: var(--color-ink);
	margin: 0 0 var(--space-5);
}

.adm-log p {
	margin: 0 0 var(--space-2);
}

.adm-log p:last-child {
	margin-bottom: 0;
}

/* Ошибки загрузки дампа (shop/admin/catalog/import-zip.php) - тот же .adm-log,
   но с красной рамкой/текстом, чтобы не путать с обычным отчётом об импорте. */
.adm-log-error {
	border-color: var(--color-brand-red);
	color: var(--color-brand-red);
}

/* Экран подтверждения загрузки Excel-дампа (import-xlsx.php) - diff по
   каждой таблице: что добавится, что изменится. Шире обычного .adm-log
   (640px) - строки вида "retail_price: «13600» → «99999»" на узкой колонке
   переносились бы почти по каждому слову. */
.adm-diff-table {
	max-width: 900px;
}

.adm-diff-section-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 13px;
	margin: var(--space-3) 0 var(--space-1);
}

.adm-diff-list {
	margin: 0 0 var(--space-2);
	padding-left: var(--space-5);
	list-style: disc;
}

.adm-diff-list li {
	margin-bottom: var(--space-1);
	word-break: break-word;
}

/* Список замечаний валидатора на экране подтверждения загрузки
   (import-zip.php - "нужен какой-то валидатор... прежде чем переходить к
   созданию таблиц"). Внутри .adm-log p, поэтому не .adm-log-error целиком -
   красим только сам список, а не всю карточку таблицы. */
.adm-validation-issues {
	margin: var(--space-2) 0 var(--space-3);
	padding-left: var(--space-5);
	color: var(--color-error);
	font-size: 13px;
	line-height: 1.6;
}

.adm-validation-issues li {
	margin-bottom: var(--space-1);
}

/* Пояснительный текст над формой (shop/admin/catalog/import-zip.php) - раньше
   были голые <p> прямо в .adm-page, без отступов и ограничения ширины (во
   всю страницу, склеены друг с другом - жалоба заказчицы "как будто эта
   страница не доработана"). */
.adm-hint {
	max-width: 640px;
	margin: 0 0 var(--space-5);
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-ink-soft);
}

.adm-hint p {
	margin: 0 0 var(--space-3);
}

.adm-hint p:last-child {
	margin-bottom: 0;
}

/* code внутри .adm-page - по умолчанию его красит унаследованный от старого
   vendor/css/zui.min.css (подключён на каждой странице сайта) правило
   "code, kbd { color: #ea644a }" без видимого фона (там же фон почти белый,
   #f9f2f4 - на белой странице не заметен), получалась просто оранжевая
   надпись без вида "чипа". Переопределяем явно, раз голый селектор "code"
   в этом файле запрещён (см. шапку файла) - только через .adm-page. */
.adm-page code {
	padding: 2px 6px;
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
	font-size: 0.9em;
	color: var(--color-ink);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm, 4px);
}

/* Форма загрузки ZIP-дампа (shop/admin/catalog/import-zip.php). Раньше была
   в один ряд (label + input + кнопка, flex/align-items:center) - на узкой
   колонке длинный label "Файл дампа (.zip):" переносился на 3 строки и
   утыкался в input вплотную к растянутой на всю ширину красной кнопке
   (жалоба "как будто эта страница не доработана"). Вертикальный стек проще
   и не ломается на любой ширине. */
.adm-upload-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	/* 640px - тот же max-width, что уже задан .adm-hint/.adm-log в этом же
	   файле (не придумываю новое число): раньше здесь стояли произвольные
	   480px, из-за которых правый край формы не совпадал с правым краем
	   пояснительного текста над ней - жалоба "не очень ровно". */
	max-width: 640px;
}

.adm-upload-form > label {
	font-weight: 600;
}

/* Голый <input type="file"> - жалоба заказчицы "эти кнопки стрем" (родной
   вид ОС/браузера, некрасивая серая кнопка вплотную к тексту "Файл не
   выбран"). Тот же приём, что уже есть на /pcb-quote/ (.pcb-button +
   .pcb-visually-hidden, см. assets/css/pcb-quote.css) - реальный input
   визуально прячем, кликабельная кнопка - стилизованный <label for=...>,
   имя выбранного файла показываем сами (assets/js/admin-upload-form.js). */
.adm-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.adm-upload-control {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}

/* .adm-btn-primary по умолчанию width:100% (нужно для одиночной кнопки
   "Загрузить" вне этого блока) - здесь кнопок две ("Да, применить" +
   "Отмена"), первая же на 100% ширины сталкивала вторую на новую строку. */
.adm-upload-control .adm-btn {
	width: auto;
}

/* Зона перетаскивания файла - "нужно поле загрузки файла... я хочу и
   перетаскивать" (заказчица, 2026-08-11): один клик по кнопке недостаточно,
   нужен полноценный drag-and-drop, как на /pcb-quote/ (.pcb-dropzone, см.
   assets/css/pcb-quote.css) - та же разметка и тот же внешний вид, отдельные
   .adm- классы вместо переиспользования .pcb-*, чтобы не тащить
   pcb-quote.css на страницы админки. Логика открытия/закрытия по
   drag-событиям - assets/js/admin-upload-form.js. */
.adm-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	text-align: center;
	padding: var(--space-7, 56px) var(--space-4);
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
	transition: border-color var(--transition-fast), background var(--transition-fast);
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}

.adm-dropzone svg {
	width: 40px;
	height: 40px;
	color: var(--color-ink-soft);
}

.adm-dropzone__text {
	margin: 0;
	font-weight: 600;
	color: var(--color-ink);
}

.adm-dropzone__hint {
	margin: 0;
	color: var(--color-ink-soft);
	font-size: 14px;
}

.adm-dropzone--active {
	border-color: var(--color-brand-red);
	background: color-mix(in srgb, var(--color-brand-red) 6%, var(--color-bg-alt));
}

.adm-file-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--space-5);
	border-radius: var(--radius-sm);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	background: var(--color-brand-red);
	color: #fff;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.adm-file-button:hover {
	background: var(--color-brand-red-dark);
}

.adm-file-button:focus-within {
	outline: 2px solid var(--color-brand-red-dark);
	outline-offset: 2px;
}

.adm-file-name {
	font-size: 14px;
	color: var(--color-ink-soft);
}

/* ---------- Форма входа (loginform.tpl, включается из index.php) ---------- */

.adm-login-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-alt);
	padding: var(--space-5);
	box-sizing: border-box;
	font-family: var(--font-body);
}

.adm-login-card {
	width: 100%;
	max-width: 340px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	box-sizing: border-box;
}

.adm-login-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 18px;
	color: var(--color-ink);
	margin: 0 0 var(--space-5);
	text-align: center;
}

/* "Доступ запрещён" (accessdenied.tpl) - раньше index.php показывал форму
   входа в админку кому угодно, кто не вошёл админом (анонимным гостям и
   залогиненным покупателям тоже - вход в админку теперь идёт через общий
   попап в шапке, см. shop/authentication.php). Сама карточка - переиспользует
   .e404-* из style.css (тот же паттерн, что у 404.html, только код 403 и
   текст - запрос пользователя 2026-08-08). */

.adm-field {
	margin: 0 0 var(--space-4);
}

.adm-label {
	display: block;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-ink-soft);
	margin: 0 0 var(--space-1);
}

.adm-input {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--color-ink);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-sizing: border-box;
	transition: border-color var(--transition-fast);
}

.adm-input:focus {
	outline: none;
	border-color: var(--color-brand-red);
}

.adm-input:focus-visible {
	outline: 2px solid var(--color-brand-red);
	outline-offset: 1px;
}

/* ---------- Кнопки ---------- */

.adm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--space-2) var(--space-5);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
	text-decoration: none;
	box-sizing: border-box;
}

.adm-btn:focus-visible {
	outline: 2px solid var(--color-brand-red);
	outline-offset: 2px;
}

.adm-btn-primary {
	background: var(--color-brand-red);
	border-color: var(--color-brand-red);
	color: #FFFFFF;
	width: 100%;
}

.adm-btn-primary:hover {
	background: var(--color-brand-red-dark);
	border-color: var(--color-brand-red-dark);
}

.adm-btn-danger {
	background: var(--color-error);
	border-color: var(--color-error);
	color: #FFFFFF;
}

.adm-btn-danger:hover {
	background: #8E2A20;
	border-color: #8E2A20;
}

.adm-btn-secondary {
	background: var(--color-bg);
	border-color: var(--color-border);
	color: var(--color-ink);
}

.adm-btn-secondary:hover {
	border-color: var(--color-ink-soft);
}

/* ---------- Подтверждение удаления (delete_order.php) ----------
   Раньше <center>/<font class="standard"> без обвязки .adm-page и вообще
   без сайдбара - страница выпадала из общей оболочки админки. */
.adm-confirm {
	max-width: 420px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	box-sizing: border-box;
}

.adm-confirm-text {
	margin: 0 0 var(--space-5);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-ink);
}

.adm-confirm-actions {
	display: flex;
	gap: var(--space-3);
}

.adm-confirm-actions .adm-btn {
	flex: 1 1 0;
}

/* ---------- Модалка подтверждения (adminnav-end.php, .adm-confirm-trigger
   в adminnav.php, OpenAdmConfirmModal в assets/js/my.js) ----------
   Раньше "опасные" ссылки (создать/удалить таблицу и т.п.) вели на отдельную
   страницу подтверждения - жалоба заказчицы 2026-08-10: "не открывалась
   страница, а всплывало диалоговое окно". JS теперь подгружает ту же
   страницу по AJAX и показывает содержимое (.adm-confirm без изменений)
   внутри этой обёртки - вёрстку самой карточки подтверждения не трогали,
   только добавили затемнение фона и крестик закрытия.
   rgba(0,0,0,.4) - то же затемнение, что у ЛЮБОГО modal:true jQuery UI
   dialog на сайте (.ui-widget-overlay, см. cart.css) - для единообразия
   всех модалок, а не JS UI дополнительно сюда не тащили (тут не нужны его
   тема/анимации, обычный CSS-оверлей с флексом по центру). */
.adm-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-5);
	background: rgba(0, 0, 0, 0.4);
	box-sizing: border-box;
}

.adm-modal-overlay[hidden] {
	display: none;
}

.adm-modal {
	position: relative;
	width: 100%;
	max-width: 420px;
}

.adm-modal .adm-confirm {
	max-width: none;
}

/* Внутри карточки, в её собственном отступе (.adm-confirm - padding:
   var(--space-6), 32px крестика с запасом умещается до текста) - раньше
   сидел СНАРУЖИ, в углу поверх затемнённого фона, что смотрелось чужеродно
   (жалоба заказчицы 2026-08-10: "крестик странный, он должен быть в окне,
   так не делают"). Без рамки - просто иконка, не кнопка-бокс (жалоба
   2026-08-10: "сделай крестик без обводки"). Отступ уменьшен до var(--space-2)
   (было var(--space-3)) - ближе к самому углу карточки, подальше по
   диагонали от текста подтверждения, который начинается со своего отступа
   var(--space-6) (жалоба 2026-08-10: "крестик... подальше от текста"). */
.adm-modal-close {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	font-size: 20px;
	line-height: 1;
	color: var(--color-ink-soft);
	cursor: pointer;
	transition: color var(--transition-fast);
}

.adm-modal-close:hover,
.adm-modal-close:focus-visible {
	color: var(--color-brand-red);
}

.adm-modal-close:focus-visible {
	outline: 2px solid var(--color-brand-red);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.adm-modal-close {
		transition: none;
	}
}

/* ---------- Оболочка страницы (adminnav.php/adminnav-end.php) ----------
   Раньше меню и контент были в двух разных фреймах <frameset> (frame.tpl,
   убран 2026-08-08) - вёрстка сама разводила их по ширине браузера без
   единого общего родителя. Теперь оба - обычные div внутри одной страницы,
   и без .adm-shell они просто идут друг под другом. */

.adm-shell {
	display: flex;
	min-height: 100vh;
	background: var(--color-bg-alt);
}

.adm-content {
	flex: 1 1 auto;
	min-width: 0;   /* иначе таблицы с overflow-x внутри распирают flex-колонку */
}

/* ---------- Боковая навигация (adminnav.php, раньше - menu.php) ---------- */

.adm-nav {
	/* Раньше .adm-shell/.adm-nav держали align-items/align-self:flex-start -
	   бокс .adm-nav сжимался до min-height:100vh (одного экрана) вместо
	   полной высоты .adm-content. На страницах с длинной таблицей (много
	   заказов) контент продолжался дальше вниз, а белый фон и правая
	   граница навигации обрывались ровно на 100vh - дальше сквозь пустое
	   место было видно серый фон .adm-shell (жалоба заказчицы 2026-08-09,
	   скриншот: "странное прерывание у панель, как будто не хватает
	   border"). Теперь .adm-shell стретчит детей по умолчанию (без
	   align-items) - .adm-nav растягивается на высоту более высокого
	   соседа. position:sticky продолжает работать как раньше - закрепляет
	   именно СОДЕРЖИМОЕ у верха экрана при скролле, растянутый бокс этому
	   не мешает. */
	font-family: var(--font-body);
	font-size: 14px;
	background: var(--color-bg);
	flex: 0 0 272px;
	width: 272px;
	min-height: 100vh;
	position: sticky;
	top: 0;
	align-self: stretch;
	border-right: 1px solid var(--color-border);
	padding: var(--space-4) 0 var(--space-6);
	box-sizing: border-box;
}

.adm-nav-group {
	padding: 0 var(--space-4) var(--space-3);
	margin: 0 0 var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.adm-nav-group:last-child {
	border-bottom: none;
}

.adm-nav-group-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-ink-soft);
	margin: var(--space-3) 0 var(--space-2);
}

.adm-nav-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	margin: 0 0 var(--space-1);
	border-radius: var(--radius-sm);
	color: var(--color-ink);
	text-decoration: none;
	line-height: 1.35;
	font-size: 14px;
	box-sizing: border-box;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.adm-nav-link:hover {
	background: var(--color-bg-alt);
}

.adm-nav-link:focus-visible {
	outline: 2px solid var(--color-brand-red);
	outline-offset: -2px;
}

.adm-nav-link-primary {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	color: var(--color-brand-red);
}

.adm-nav-link-danger {
	color: var(--color-error);
}

.adm-nav-link-danger:hover {
	background: rgba(192, 57, 43, 0.08);
}

/* Текущий раздел (aria-current="page", см. admNavLink() в adminnav.php) -
   без этого все пункты меню выглядят одинаково и непонятно, где находишься. */
.adm-nav-link-active {
	background: rgba(207, 24, 24, 0.08);
	color: var(--color-brand-red);
	font-weight: 600;
}

.adm-nav-link-active:hover {
	background: rgba(207, 24, 24, 0.12);
}

/* "Открыть сайт ↗" - единственный выход из админки наружу, поэтому визуально
   приглушённый (не конкурирует с обычной навигацией по разделам). */
.adm-nav-link-site {
	color: var(--color-ink-soft);
	font-size: 13px;
}

.adm-nav-link-site:hover {
	background: var(--color-bg-alt);
	color: var(--color-ink);
}

/* ---------- Опасные операции (<details>, см. adminnav.php) ----------
   Меняют структуру базы без подтверждения (сам файл это и объясняет в
   adm-nav-danger-note) - свёрнуты по умолчанию и визуально отделены от
   повседневной навигации бордером и меньшим кеглем, а не просто цветом. */

/* Без своего border-top: сразу перед этим блоком в разметке всегда идёт
   .adm-nav-group ("Каталог") - у него уже есть border-bottom на той же
   границе. Раньше оба рисовали свою линию, с зазором между ними - два
   разделителя подряд (тот же класс бага, что уже чинили в подвале сайта,
   см. TZ.md). */
.adm-nav-danger {
	margin: var(--space-4) var(--space-4) 0;
	padding-top: var(--space-3);
}

.adm-nav-danger-summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-ink-soft);
	padding: var(--space-2) 0;
}

.adm-nav-danger-summary::-webkit-details-marker {
	display: none;
}

.adm-nav-danger-summary::before {
	content: '▸';
	display: inline-block;
	width: 1em;
	color: var(--color-ink-soft);
}

.adm-nav-danger[open] > .adm-nav-danger-summary::before {
	content: '▾';
}

.adm-nav-danger-summary:focus-visible {
	outline: 2px solid var(--color-brand-red);
	outline-offset: 2px;
}

.adm-nav-danger-note {
	font-size: 12px;
	line-height: 1.5;
	color: var(--color-ink-soft);
	margin: 0 0 var(--space-3);
}

/* ---------- Схема базы mermaid'ом (main.php) ---------- */

/* Панель масштаба над схемой - колесо мыши масштабирует, перетаскивание
   сдвигает (жалоба заказчицы на number-input "так масштаб не делают") -
   кнопки +/- и сброс остаются как явная альтернатива для тех, кто не хочет
   мышью, процент - просто справочная подпись, не поле ввода. */
.adm-diagram-toolbar {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
	flex-wrap: wrap;
}

.adm-diagram-zoom-btn {
	width: 32px;
	height: 32px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.adm-diagram-zoom-btn:hover {
	background: var(--color-bg-alt);
}

.adm-diagram-zoom-percent {
	min-width: 44px;
	text-align: center;
	color: var(--color-ink-soft);
	font-size: 14px;
}

.adm-diagram-zoom-reset {
	height: 32px;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-ink-soft);
	font-size: 13px;
	cursor: pointer;
}

.adm-diagram-zoom-reset:hover {
	background: var(--color-bg-alt);
}

.adm-diagram-hint-inline {
	color: var(--color-ink-soft);
	font-size: 12px;
	margin-left: var(--space-2);
}

/* Схема (er.useMaxWidth:false в main.php) рендерится в натуральную величину
   (~3500x2700px при 18 таблицах) - без этого mermaid сжимает её под ширину
   контейнера и все подписи становятся нечитаемыми (жалоба заказчицы "плохо
   видна"). overflow:hidden, а не auto/scroll - панорама теперь через JS
   (transform: translate+scale на .adm-diagram-canvas, колесо/перетаскивание,
   см. main.php), а не нативный скролл: с произвольным масштабом нативные
   скроллбары вычисляли бы неверный размер прокручиваемой области. Курсор
   grab/grabbing подсказывает, что схему можно тащить. position:relative -
   опора для .adm-diagram-loading (position:absolute, спиннер по центру). */
.adm-diagram-wrap {
	position: relative;
	overflow: hidden;
	height: 80vh;
	min-height: 200px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg);
	margin-bottom: var(--space-5);
	cursor: grab;
}

.adm-diagram-wrap.is-dragging {
	cursor: grabbing;
}

/* Спиннер вместо мелькания сырого текста схемы перед рендером (жалоба
   заказчицы "перед загрузкой показывается текстовая интерпретация схемы") -
   .adm-diagram-canvas прозрачен (opacity:0, НЕ display:none - см. main.php,
   mermaid не может измерить невидимый через display:none элемент) пока
   mermaid.run() не отработает. */
.adm-diagram-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-ink-soft);
	font-size: 14px;
	white-space: nowrap;
}

.adm-diagram-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--color-border);
	border-top-color: var(--color-brand-red);
	border-radius: 50%;
	animation: adm-diagram-spin 0.8s linear infinite;
}

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

.adm-diagram-canvas {
	position: relative;
}

/* vendor/css/zui.min.css задаёт глобально "svg{max-width:100%}" (сброс под
   отзывчивые картинки) - для этой схемы это ломает пропорции: ширина
   сжимается под контейнер, а высота (задана атрибутом, не CSS) остаётся
   родной, схема выглядит вертикально растянутой. Здесь селектор конкретнее
   (класс+тег против одного тега) - переопределяет по специфичности, без
   правки самого vendor-файла. */
.adm-diagram-wrap svg {
	max-width: none;
}

/* .mermaid - класс самой библиотеки (vendor/js/mermaid.min.js ищет его на
   элементах для рендера), не переименовывать. cursor:pointer на сущностях
   ставится инлайном через JS (main.php - клик по <g id="...-entity-ИМЯ-N">
   ведёт на просмотр таблицы), здесь только на случай, если инлайн-стиль не
   успел примениться до первой отрисовки. */
.adm-diagram-wrap .mermaid g[id*="-entity-"] {
	cursor: pointer;
}

/* ---------- Таблицы (main.php, orders.php, unregcustomers.php) ---------- */

.adm-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg);
}

.adm-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-ink);
}

.adm-table th {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 13px;
	text-align: left;
	color: var(--color-ink);
	background: var(--color-bg-alt);
	padding: var(--space-3);
	border-bottom: 1px solid var(--color-border);
	white-space: nowrap;
}

.adm-table td {
	padding: var(--space-3);
	border-bottom: 1px solid var(--color-border);
	vertical-align: top;
}

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

.adm-table tbody tr:nth-child(even) {
	background: var(--color-bg-alt);
}

.adm-table tbody tr:hover {
	background: rgba(207, 24, 24, 0.06);
}

.adm-table-actions {
	white-space: nowrap;
}

.adm-table-products {
	min-width: 220px;
}

/* ---------- Длинные значения ячеек (viewtable.php) ----------
   Обрезаются многоточием по умолчанию - клик разворачивает (assets/js/my.js),
   наведение показывает полный текст через title. */
.adm-cell-truncate {
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

.adm-cell-truncate.is-expanded {
	max-width: none;
	overflow: visible;
	white-space: normal;
	word-break: break-word;
}

/* ---------- Пагинация (viewtable.php) ---------- */
.adm-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-5);
}

.adm-pagination-info {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-ink-soft);
}

.adm-btn-disabled {
	opacity: 0.4;
	pointer-events: none;
}

@media (max-width: 560px) {
	.adm-pagination {
		flex-direction: column;
		gap: var(--space-2);
	}
}

/* ---------- Ссылки-действия ---------- */

.adm-link {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.adm-link:hover {
	color: var(--color-brand-red-dark);
}

.adm-link:focus-visible {
	outline: 2px solid var(--color-brand-red);
	outline-offset: 2px;
}

.adm-link-danger {
	color: var(--color-error);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.adm-link-danger:hover {
	color: #8E2A20;
}

.adm-link-danger:focus-visible {
	outline: 2px solid var(--color-error);
	outline-offset: 2px;
}

/* ---------- Бейджи статусов ---------- */

.adm-badge {
	display: inline-block;
	padding: 2px var(--space-2);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.adm-badge-error {
	background: rgba(192, 57, 43, 0.12);
	color: var(--color-error);
}

.adm-badge-success {
	background: rgba(31, 143, 82, 0.12);
	color: var(--color-success);
}

/* ---------- Детали заказа (detail.php) ---------- */

.adm-detail {
	max-width: 640px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	box-sizing: border-box;
}

.adm-detail-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 18px;
	color: var(--color-ink);
	margin: 0 0 var(--space-5);
}

.adm-detail-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 14px;
}

.adm-detail-row:last-child {
	border-bottom: none;
}

.adm-detail-label {
	color: var(--color-ink-soft);
}

.adm-detail-value {
	color: var(--color-ink);
	word-break: break-word;
}

/* ---------- Журнал визитов (customervizits.php) ---------- */

.adm-visits {
	min-width: 720px;
	font-family: var(--font-body);
	font-size: 14px;
}

.adm-visits-row {
	display: grid;
	grid-template-columns: 48px 1.2fr 0.8fr 0.8fr 1.6fr;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.adm-visits-row:last-of-type {
	border-bottom: none;
}

.adm-visits-row-head {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 13px;
	color: var(--color-ink);
	background: var(--color-bg-alt);
}

.adm-visits-cell {
	color: var(--color-ink);
}

.adm-visits-cell-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
}

.adm-visits-form {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* .showvizits — класс задаётся и в customervizits.php, и динамически
   в assets/js/consultant.js (AjaxFormShowVizits/HideVizits) — переиспользуем
   имя как есть, не переименовывать. */
.showvizits {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	color: var(--color-brand-red);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	user-select: none;
	transition: background-color var(--transition-fast);
}

.showvizits:hover {
	background: var(--color-bg-alt);
}

.showvizits-empty {
	border-color: transparent;
	cursor: default;
}

/* .cutomer_vizits_table_additional — контейнер, в который
   AjaxFormShowVizits подгружает ответ showvisits.php. */
.cutomer_vizits_table_additional:empty {
	display: none;
}

.cutomer_vizits_table_additional:not(:empty) {
	padding: var(--space-3) var(--space-3) var(--space-3) 63px;
	font-size: 13px;
	color: var(--color-ink-soft);
	border-bottom: 1px solid var(--color-border);
}

/* ---------- Адаптив ----------
   Фиксированная колонка 272px (.adm-nav) на узком экране не оставляет места
   контенту - меню переезжает наверх обычным блоком (не sticky, иначе на
   телефоне съедало бы половину высоты экрана при скролле). */
@media (max-width: 860px) {
	.adm-shell {
		flex-direction: column;
		/* .adm-shell больше не задаёт align-items сама (десктопный
		   align-items:flex-start убран - см. комментарий у .adm-nav,
		   он обрезал белый фон навигации на длинных страницах) - на
		   flex-direction:column это по умолчанию и так stretch, но правило
		   оставлено явным: без него на узком экране .adm-content сжимался
		   бы по ширине содержимого вместо ширины строки, если базовое
		   правило снова сменят на flex-start - широкая таблица распирала
		   бы всю страницу вместо скролла внутри .adm-table-wrap. */
		align-items: stretch;
	}

	.adm-nav {
		position: static;
		width: 100%;
		flex: 0 0 auto;
		min-height: 0;
		border-right: none;
		border-bottom: 1px solid var(--color-border);
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.adm-input,
	.adm-btn,
	.adm-nav-link,
	.adm-table tbody tr,
	.adm-link,
	.adm-link-danger,
	.showvizits {
		transition: none;
	}
}