/**
 * aiModelka — стили плагина в админке WordPress.
 *
 * Только своё: блок aiModelka в редакторе товара, колонка aiModelka в списке товаров
 * и страница настроек. Цвета — из палитры админки WordPress, чтобы плагин выглядел
 * частью админки.
 */

/* Блок aiModelka в правой колонке редактора товара. */

/* Логотип в заголовке блока. Не ловит нажатий: заголовок — ручка, за которую блок
   перетаскивают и сворачивают, и нажатие должно доставаться ему. */
.aimodelka-product-box__logo {
	display: block;
	width: auto;
	height: 20px;
	pointer-events: none;
}

.aimodelka-product-box {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 4px;
}

/* Кнопки — во всю ширину блока, одна под другой. Вид кнопок типов — в aimodelka-photos.css. */
.aimodelka-product-box .aimodelka-product-box__button {
	width: 100%;
	text-align: center;
}

.aimodelka-product-box__hint {
	margin: 0;
	color: #646970;
}

.aimodelka-product-box__note {
	margin: 0;
}

.aimodelka-product-box__status:empty {
	display: none;
}

/* Колонка aiModelka в списке товаров. Таблица списка — со строгой раскладкой колонок,
   и почти всем колонкам WooCommerce задаёт ширину сам; без своей ширины колонке достался
   бы остаток в несколько пикселей. 11ch — около сотни пикселей: уже колонки «Дата»,
   заголовку хватает одной строки. */
.wp-list-table .column-aimodelka {
	width: 11ch;
}

.wp-list-table th.column-aimodelka {
	white-space: nowrap;
}

/* «N фото · дата» переносится по словам. WordPress разрешает в таблицах рвать слова
   где угодно — в узкой колонке это перенос по буквам. */
.wp-list-table td.column-aimodelka {
	overflow-wrap: normal;
	word-wrap: normal;
}

/* Состояния строки результата — общие для товара и «Проверить связь». */
[data-state="pending"].aimodelka-product-box__status,
[data-state="pending"].aimodelka-connection-result {
	color: #646970;
}

[data-state="ok"].aimodelka-product-box__status,
[data-state="ok"].aimodelka-connection-result {
	color: #007017;
}

[data-state="error"].aimodelka-product-box__status,
[data-state="error"].aimodelka-connection-result {
	color: #b32d2e;
}

/* Страница настроек: шапка, две колонки как у «Панели управления», карточки postbox
   и переключатели по строкам. Цвета и шрифты — только те, что у самой админки. */

/* Шапка — внутри заголовка h1: логотип, название, версия мелко справа. */
.aimodelka-settings__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.aimodelka-settings__logo {
	display: block;
	width: auto;
	height: 28px;
}

.aimodelka-settings__version {
	margin-left: auto;
	font-size: 12px;
	font-weight: 400;
	color: #646970;
}

.aimodelka-settings__lead {
	max-width: 760px;
	margin: 4px 0 16px;
	font-size: 14px;
}

/* Две колонки: настройки слева, боковые блоки справа; на узком экране — одна. */
.aimodelka-settings__columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 20px;
	align-items: start;
	margin-top: 16px;
}

@media (max-width: 960px) {
	.aimodelka-settings__columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

.aimodelka-settings__card {
	margin-bottom: 20px;
}

/* Заголовок карточки не перетаскивается, в отличие от блоков «Панели управления». */
.aimodelka-settings__card .hndle {
	cursor: default;
}

/* Переключатели — каждый вариант на своей строке, между строками 6 px. Админка
   WordPress ставит подписям в fieldset строчную раскладку и свой отступ с !important —
   без этого варианты слипаются в одну строку; правило точнее её и побеждает. */
.aimodelka-settings .form-table td fieldset label.aimodelka-settings__choice {
	display: block;
	margin: 0 0 6px !important;
}

.aimodelka-settings .form-table td fieldset label.aimodelka-settings__choice:last-of-type {
	margin-bottom: 0 !important;
}

.aimodelka-settings__steps {
	margin: 0 0 0 1.4em;
}

.aimodelka-connection-result:empty {
	display: none;
}