/*
 * Адаптивные стили страницы входа (Login.html / SSPLogin.html).
 *
 * Страница входа поднимается в scope "login": bootstrap.login отдаёт ядру пустой
 * configurationModulesConfig, поэтому схемы конфигурации на ней не загружаются и
 * подключить сюда GpPortalAdaptiveCss из пакета нельзя. Файл лежит рядом с оболочкой,
 * в Resources/Login на стенде, и подключается тегом <link> прямо из неё.
 *
 * Все правила ограничены классом gp-login-adaptive на html/body: класс стоит в самой
 * оболочке и повторно ставится из GpLoginAdaptiveMixin.js. Без него ни одно правило
 * не действует, поэтому штатный вид страницы на десктопе не задевается.
 *
 * Стили ядра (loginModule.less / sspLoginModule.less) собираются require'ом уже после
 * этого файла, поэтому побеждаем не порядком, а весом селектора: у каждого правила есть
 * префикс body.gp-login-adaptive, а там, где у ядра стоит !important или id
 * (#t-comp17-textEl, #cellInfoContainer), !important продублирован здесь.
 *
 * Точки перелома:
 *   1024px — резиновая раскладка, фиксированные ширины отпускаются;
 *    860px — колонки складываются в одну (форма входа первая, справка под ней);
 *    640px — телефон: отступы, размер шрифта полей, кнопка во всю ширину.
 * 1024 и 640 совпадают с GpPortalAdaptiveCss, 860 — ширина, ниже которой карточка входа
 * (340 справка + 59 разделители + 400 форма + отступы, итого около 850px) не помещается.
 */

/* --------------------------------------------------------------------------
 * Общее: страница должна прокручиваться, а не обрезаться.
 * У ядра на body стоит overflow-x: hidden, из-за него уехавшая вправо форма
 * не просто вылезает за экран, а становится недоступной.
 * -------------------------------------------------------------------------- */

html.gp-login-adaptive,
body.gp-login-adaptive {
	min-width: 0;
	height: auto;
	min-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-text-size-adjust: 100%;
}

/* --------------------------------------------------------------------------
 * <= 1024px: карточка перестаёт быть фиксированной.
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {

	/*
	 * Штатно #viewContainer спозиционирован абсолютно и центрируется через
	 * translate(-50%, -50%). Если карточка выше экрана, её верх уезжает за границу
	 * вьюпорта и до полей входа не долистать. Контейнер возвращается в поток и
	 * центрует содержимое флексом: пока есть место — по центру, не хватило —
	 * страница просто прокручивается.
	 */
	body.gp-login-adaptive .login-outside-container {
		position: static;
		top: auto;
		left: auto;
		-moz-transform: none;
		-webkit-transform: none;
		transform: none;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		min-height: 100vh;
		/* dvh учитывает свёрнутую адресную строку мобильного браузера. */
		min-height: 100dvh;
		padding-top: 24px;
		padding-right: calc(16px + env(safe-area-inset-right));
		padding-bottom: calc(24px + env(safe-area-inset-bottom));
		padding-left: calc(16px + env(safe-area-inset-left));
	}

	body.gp-login-adaptive .login-inside-container {
		box-sizing: border-box;
		width: 100%;
		max-width: 840px;
		margin: 0 auto;
	}

	body.gp-login-adaptive .login-table-container,
	body.gp-login-adaptive .login-row-container {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	/* Строки-таблицы ядра — флексы без переноса: разрешаем переносить. */
	body.gp-login-adaptive .login-row-container {
		flex-wrap: wrap;
	}

	body.gp-login-adaptive .login-cell-container {
		box-sizing: border-box;
		max-width: 100%;
	}

	/* Логотип масштабируется вместе с карточкой. */
	body.gp-login-adaptive .ts-image-edit-full-size-element,
	body.gp-login-adaptive .ts-image-edit-custom-size-element {
		max-width: 100%;
		height: auto;
	}

	/* Диалог ошибки входа шире экрана телефона выглядит обрезанным. */
	body.gp-login-adaptive .ts-messagebox-border-style-blue {
		box-sizing: border-box;
		max-width: calc(100vw - 24px);
	}
}

/* --------------------------------------------------------------------------
 * <= 860px: две колонки складываются в одну.
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 860px) {

	body.gp-login-adaptive .login-row-container {
		flex-direction: column;
		align-items: center;
	}

	/*
	 * Форма входа — то, зачем страницу открыли, поэтому в одной колонке она идёт
	 * первой, а блок поддержки и важных ссылок уходит под неё.
	 */
	body.gp-login-adaptive #cellLoginContainer {
		order: 1;
		width: 100%;
	}

	body.gp-login-adaptive #extendInfoContainer,
	body.gp-login-adaptive .info-container #extendInfoContainer {
		order: 2;
		width: 100%;
		margin-top: 24px;
		padding-left: 0;
	}

	body.gp-login-adaptive #widgetLoginCell {
		order: 3;
		width: 100%;
	}

	/*
	 * Разделители между колонками: вертикальная линия высотой 276px и распорки
	 * по 46px в одной колонке смысла не имеют и дают только пустоту.
	 */
	body.gp-login-adaptive .login-empty-cell,
	body.gp-login-adaptive .login-border-left,
	body.gp-login-adaptive .login-border-right,
	body.gp-login-adaptive #rowPaddingContainer {
		display: none;
	}

	body.gp-login-adaptive .login-border-right::after {
		display: none;
	}

	/* Виджет входа: слева была линия-разделитель, теперь она нужна сверху. */
	body.gp-login-adaptive .login-widget-container {
		box-sizing: border-box;
		width: 100%;
		min-height: 240px;
		margin-left: 0;
		margin-top: 24px;
		padding-left: 0;
		padding-top: 24px;
		border-left: none;
		border-top: 1px solid var(--platinum-color);
	}

	body.gp-login-adaptive #rowLogoContainer,
	body.gp-login-adaptive .info-container #rowLogoContainer {
		justify-content: center;
		align-items: center;
	}

	body.gp-login-adaptive #cellInfoContainer {
		min-width: 0;
	}

	/* Блок поддержки: колонки по 340px в одну колонку не влезают. */
	body.gp-login-adaptive .info-container #supportLogoCell,
	body.gp-login-adaptive .info-container #linksLogoCell,
	body.gp-login-adaptive .info-container #supportNameCell {
		width: 100%;
	}

	body.gp-login-adaptive .login-links-list {
		width: 100%;
	}

	/*
	 * Строки «название — телефон» блока поддержки — тоже .login-row-container,
	 * но их складывать в колонку не надо: возвращаем строку и разрешаем перенос.
	 */
	body.gp-login-adaptive [id^="infoRow_"] {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 4px 12px;
	}

	body.gp-login-adaptive .session-end-label {
		box-sizing: border-box;
		width: 100%;
		max-width: 450px;
	}
}

/* --------------------------------------------------------------------------
 * <= 640px: телефон.
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 640px) {

	body.gp-login-adaptive .login-outside-container {
		padding-top: 12px;
		padding-right: calc(12px + env(safe-area-inset-right));
		padding-bottom: calc(16px + env(safe-area-inset-bottom));
		padding-left: calc(12px + env(safe-area-inset-left));
	}

	body.gp-login-adaptive .login-inside-container {
		padding: 16px 16px 20px;
		border-radius: 12px;
	}

	/* Фиксированные 400px формы и её частей. */
	body.gp-login-adaptive .login-cell-container,
	body.gp-login-adaptive .login-container-footer {
		width: 100%;
	}

	body.gp-login-adaptive .login-textedit-login-password {
		width: 100% !important;
	}

	/*
	 * Поля ввода: 16px — минимум, при котором Safari на iOS не приближает страницу
	 * на фокусе; 44px — минимальная площадь нажатия по гайдлайнам.
	 */
	body.gp-login-adaptive #loginContainer .base-edit-input {
		box-sizing: border-box;
		min-height: 44px;
		font-size: 16px;
	}

	body.gp-login-adaptive #loginEdit-wrap,
	body.gp-login-adaptive #passwordEdit-wrap {
		min-height: 44px;
	}

	/*
	 * Кнопка входа. Ширину 400px ядро задаёт по сгенерированному id (#t-comp17-textEl),
	 * перебить его можно только !important — сам id между сборками не гарантирован.
	 */
	body.gp-login-adaptive .login-button-login,
	body.gp-login-adaptive .user-management-container .t-btn-wrapper {
		box-sizing: border-box;
		width: 100% !important;
		min-height: 44px;
		font-size: 16px !important;
	}

	body.gp-login-adaptive .user-management-container,
	body.gp-login-adaptive .open-id-connect-login-label {
		box-sizing: border-box;
		width: 100%;
	}

	/*
	 * Строка «Запомнить меня» / «Забыли пароль»: у ядра это фиксированные 40px
	 * с float: right, на узком экране элементы налезают друг на друга.
	 */
	body.gp-login-adaptive .login-container-remember {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		height: auto;
		margin-top: 20px;
		gap: 12px;
	}

	body.gp-login-adaptive .login-label-remember,
	body.gp-login-adaptive .login-label-helper,
	body.gp-login-adaptive .login-container-remember-inside {
		float: none !important;
		width: auto !important;
		margin-top: 0;
	}

	/* Шапка карточки: логотип и заголовок «Вход» встают друг под друга. */
	body.gp-login-adaptive .login-label-logo .ts-image-edit-inner-container {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}

	body.gp-login-adaptive .ts-image-edit-header {
		font-size: 18px;
		line-height: 24px;
	}

	body.gp-login-adaptive #cellLogoContainer {
		margin-bottom: 12px;
	}

	/* Телефоны поддержки: ширины по 150px и отступ 40px не помещаются. */
	body.gp-login-adaptive .login-subcell-support {
		width: auto;
	}

	body.gp-login-adaptive .login-subcell-support-info-label,
	body.gp-login-adaptive .login-subcell-support-tel-label {
		width: auto !important;
		margin-left: 0;
		margin-right: 0;
	}

	/* Сообщение о неподдерживаемом браузере: иконка слева, текст в остаток строки. */
	body.gp-login-adaptive .unsupported-browser .message {
		font-size: 14px;
		padding-left: 32px;
		background-size: 24px 24px;
	}

	body.gp-login-adaptive #importantLinks {
		padding-left: 0;
	}
}

/* --------------------------------------------------------------------------
 * Телефон в альбомной ориентации: по высоте места почти нет, снимаем лишние отступы.
 * -------------------------------------------------------------------------- */

@media only screen and (max-height: 520px) and (orientation: landscape) {

	body.gp-login-adaptive .login-outside-container {
		justify-content: flex-start;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	body.gp-login-adaptive .login-label-smallMargin,
	body.gp-login-adaptive .login-container-remember,
	body.gp-login-adaptive .user-management-container {
		margin-top: 12px;
	}

	body.gp-login-adaptive #cellLogoContainer {
		margin-bottom: 8px;
	}
}