/* =====================================================================
   app-theme.css — интеграция диалогов jQuery UI с темой приложения.
   ОБЯЗАТЕЛЬНО грузится ПОСЛЕ jquery-ui.min.css, чтобы перебивать его.
   Все цвета берутся из CSS-переменных (:root — светлая, .dark-theme — тёмная),
   поэтому диалог автоматически подстраивается под тему.
   ===================================================================== */

/* --- Каркас диалога --- */
.ui-dialog {
	background: var(--card-bg) !important;
	color: var(--text-color) !important;
	border: 1px solid var(--input-border) !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
	padding: 0 !important;
}
.ui-dialog .ui-dialog-content {
	background: var(--card-bg) !important;
	color: var(--text-color) !important;
	border: 0 !important;
	padding: 18px 20px !important;
}
/* Заголовок */
.ui-dialog .ui-dialog-titlebar {
	background: var(--bg-color) !important;
	color: var(--heading-color) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--input-border) !important;
	border-radius: 12px 12px 0 0 !important;
	padding: 12px 16px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
}
.ui-dialog .ui-dialog-title { color: var(--heading-color) !important; }

/* Панель кнопок */
.ui-dialog .ui-dialog-buttonpane {
	background: var(--card-bg) !important;
	border: 0 !important;
	border-top: 1px solid var(--input-border) !important;
	margin-top: 0 !important;
	padding: 12px 16px !important;
}
.ui-dialog .ui-dialog-buttonset { float: none !important; text-align: right !important; width: 100%; }
.ui-dialog .ui-dialog-buttonpane button,
.ui-dialog .ui-dialog-buttonpane .ui-button {
	background: var(--primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 7px !important;
	padding: 9px 20px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: background 0.15s !important;
}
.ui-dialog .ui-dialog-buttonpane button:hover,
.ui-dialog .ui-dialog-buttonpane .ui-button:hover {
	background: var(--primary-hover) !important;
}
.ui-dialog .ui-dialog-buttonpane button.ui-state-disabled,
.ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-disabled {
	opacity: 0.5 !important;
}

/* --- Кнопка закрытия (✕) ---
   Сам глиф ✕ ставится JS (dialogopen), здесь — только оформление кнопки
   и сброс sprite-иконки/text-indent. */
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute !important;
	right: 10px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 28px !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	text-indent: 0 !important;       /* показать ✕, спрайт всё равно очищен JS */
	background: transparent !important;
	border: 1px solid var(--input-border) !important;
	border-radius: 6px !important;
	color: var(--text-color) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 26px !important;
	font-family: Arial, sans-serif !important;
	opacity: 0.85;
	transition: all 0.15s !important;
	box-shadow: none !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus {
	background: var(--primary) !important;
	border-color: var(--primary) !important;
	color: #fff !important;
	opacity: 1 !important;
}
/* Прячем все служебные span-ы jQuery UI внутри кнопки (спрайт + текст) */
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space,
.ui-dialog .ui-dialog-titlebar-close .ui-button-text {
	display: none !important;
}

/* --- Затемнение фона --- */
.ui-widget-overlay { background: #000 !important; opacity: 0.5 !important; }

/* --- Поля ввода внутри диалога (на случай если не заданы переменные) --- */
.ui-dialog input[type=text],
.ui-dialog input[type=password],
.ui-dialog textarea {
	background: var(--input-bg) !important;
	color: var(--input-text) !important;
	border-color: var(--input-border) !important;
}
.ui-dialog input[type=text]:focus,
.ui-dialog input[type=password]:focus {
	border-color: var(--primary) !important;
}