/**
 * app.vidwidget.ru — правки кабинета для телефонов и планшетов (02.10.2026).
 *
 * Подключается ПОСЛЕ style.bundle.css (Metronic 7) в index.php и
 * pages/login.php. Тему не перерисовывает, а доводит до удобства на тач-
 * экранах (проверка адаптивности, scratchpad/RESPONSIVE-SPEC.md):
 *   - Metronic на ширине до 1199 px ставит корневой шрифт 12 px, и всё на
 *     rem (текст, подписи, кнопки) становилось 11–12 px; на телефоне — 15 px;
 *   - поля ввода 16 px: при меньшем iOS увеличивает страницу при фокусе;
 *   - кнопки, крестики, значки справки — зона нажатия не меньше 44 px;
 *   - фиксированная мобильная шапка (55 px) перекрывала всё, что выводится
 *     до .content: алерты оплаты и тарифа, промо-блок TotalGPT с его
 *     кнопкой «закрыть». Отступ перенесён на body.
 * Только медиазапросы: на компьютере кабинет выглядит как раньше.
 */

@media (max-width: 991.98px) {
	html,
	body {
		font-size: 15px !important;
	}

	/* Шапка: место под фиксированную мобильную шапку для всего, что идёт
	   до .content. В самой .content прежние 70 px — уже лишние. */
	body.header-mobile-fixed {
		padding-top: 55px;
		padding-top: calc(55px + env(safe-area-inset-top, 0px));
	}
	.header-mobile-fixed .header-mobile {
		padding-top: env(safe-area-inset-top, 0px);
		height: auto;
	}
	.header-mobile-fixed .content {
		padding-top: 15px;
	}
	/* Встроенный стиль index.php (ниже по документу) ставит алерту
	   margin-top: 60px и margin-bottom: -50px с !important — под старую
	   раскладку без отступа у body; здесь селектор специфичнее. */
	body .lkdm_main_alert {
		margin-top: 15px !important;
		margin-bottom: 0 !important;
	}

	/* Кнопки шапки (бургер и меню профиля) — зона нажатия 44×44. */
	#kt_header_mobile_toggle,
	#kt_header_mobile_topbar_toggle {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	#kt_header_mobile_toggle {
		margin-left: 8px !important;
	}

	/* Поля ввода: 16 px, иначе iOS зумит страницу при фокусе. */
	.form-control,
	.form-control-sm,
	.form-control-lg,
	select,
	textarea,
	.bootstrap-select > .dropdown-toggle,
	.datatable.datatable-default > .datatable-pager .datatable-pager-input {
		font-size: 16px !important;
	}
	.form-control:not(textarea) {
		min-height: 44px;
	}

	/* Кнопки: высота не меньше 44 px. */
	.btn:not(.btn-icon):not(.close) {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}
	.btn.btn-sm:not(.btn-icon) {
		font-size: 14px;
	}
	.btn.btn-icon,
	.btn.btn-sm.btn-icon {
		min-width: 44px;
		min-height: 44px;
	}

	/* Переключатели Metronic: зона нажатия 44 px, подпись крупнее. */
	.switch input:empty ~ span {
		margin-top: 5px;
	}
	.switch label {
		min-height: 44px;
	}
	.col-form-label {
		font-size: 15px;
		line-height: 1.4;
	}

	/* Дататейблы: кнопки строки переносятся с зазором, стрелка «подробнее»
	   и страницы — зона нажатия 44 px. */
	.datatable .datatable-body .datatable-cell .btn {
		margin: 0 6px 8px 0;
	}
	.datatable .datatable-body .datatable-cell > .datatable-toggle-detail,
	.datatable .datatable-body .datatable-cell > span > .datatable-toggle-detail {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 32px;
		min-height: 44px;
	}
	.datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-link {
		min-width: 44px;
		height: 44px;
	}

	/* Превью ролика в настройках виджета: колонка теперь во всю ширину
	   (col-lg-3), и вертикальное видео растягивалось на два экрана. */
	#widget_video_box video {
		display: block;
		max-width: 300px;
		margin: 0 auto;
	}

	/* Промо TotalGPT: кнопка «закрыть» 44×44. */
	#vw_promo_totalgpt_close {
		width: 44px !important;
		height: 44px !important;
		top: 4px !important;
		right: 4px !important;
		line-height: 42px !important;
		font-size: 22px !important;
	}

	/* Крестик алертов (тариф, оплата) — 44 px вместо значка 11 px. */
	.alert .alert-close .close {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	/* Значок «справка» в заголовках карточек настроек. */
	.card-header .card-toolbar a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
	/* Раздел «Истории» (assets/css/vw-stories.css задаёт подписи в px):
	   вторичный текст не мельче 13 px, «Назад» в крошках — 44 px. */
	.vws-tile__meta,
	.vws-help,
	.vws-add__hint,
	.vws-drop__hint,
	.vws-step__d,
	.vws-mini__more,
	.vws-badge,
	.vws-slide__num,
	.vws-slide__type,
	.vw-dt {
		font-size: 13px !important;
	}
	.vws-crumbs a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	.upload_new_video {
		display: inline-block;
		padding: 12px 0;
		font-size: 15px;
	}

	/* Подвал кабинета: ссылки не впритык друг к другу. */
	.footer .nav .nav-link {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	/* Выбор «строк на странице» в дататейблах (bootstrap-select): кнопка —
	   тоже .btn, и перенос строк из правила выше уводил стрелку под число.
	   Ширину 60 px дататейбл ставит инлайном под шрифт компьютера; при 16 px
	   и стрелке в одну строку «10»/«100» в неё не помещаются. */
	.bootstrap-select > .dropdown-toggle.btn {
		flex-wrap: nowrap;
	}
	.datatable.datatable-default > .datatable-pager .bootstrap-select {
		width: 80px !important;
	}

	/* Страница входа: колонка .flex-column-fluid не сжимается (flex 1 0 auto)
	   и раздувалась по самой длинной строке, а .login-aside с overflow-hidden
	   обрезал подписи справа («…код вход», «…автоматич»). */
	.login.login-2 .login-aside > .flex-column-fluid {
		flex-shrink: 1;
		min-width: 0;
	}

	/* Модалки (SweetAlert, Bootstrap): помещаются в экран, кнопки крупные. */
	.modal-dialog {
		margin: 12px;
	}
	.modal-content {
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		overflow-y: auto;
	}
	.modal-header .close {
		min-width: 44px;
		min-height: 44px;
		margin: -1rem -1rem -1rem auto;
	}
	.swal2-popup {
		font-size: 15px !important;
	}
	.swal2-styled.swal2-confirm,
	.swal2-styled.swal2-cancel {
		min-height: 44px;
		font-size: 15px !important;
	}
}

/* Список виджетов на телефоне. Дататейбл прячет столбец «Название» не
   всегда (решает по ширине при загрузке), а столбцу «Действия» ставит
   ширину 280 px: на экране 360 px кнопки и название обрезались справа.
   На телефоне название выводится над кнопками (vw-dt-mname в
   pages/index.php), столбцы «Название» и «Создан» скрыты (дата есть в
   статистике), ширина «Действий» по месту. */
@media (max-width: 767.98px) {
	.vw-dt-mname {
		display: block;
		margin: 0 0 10px;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.35;
		color: #3F4254;
		word-break: break-word;
	}
	.datatable .datatable-cell[data-field="name"],
	.datatable .datatable-cell[data-field="date"] {
		display: none !important;
	}
	.datatable .datatable-body .datatable-cell[data-field="Actions"] > span {
		width: auto !important;
	}
}
@media (min-width: 768px) {
	.vw-dt-mname {
		display: none;
	}
}

/* Поиск и кнопка «Новый виджет/пользователь» в шапке карточки: на телефоне
   кнопка переносится под поле и прилипала к нему со сдвигом 10 px (инлайн
   margin-left). Поле — во всю ширину, кнопка — под ним с зазором. */
@media (max-width: 767.98px) {
	.card-header .card-toolbar > .input-icon {
		flex: 1 1 100%;
	}
	.card-header .card-toolbar > .input-icon + .btn {
		margin-left: 0 !important;
		margin-top: 10px;
	}
}

/* Мини-лента обложек в карточке виджета историй (/stories/, vw-stories.css):
   пять обложек по 46 px, зазоры и «+N» не помещались в карточку на 320 px —
   «+4» вылезал за край, и вся страница получала горизонтальную прокрутку
   (+18 px, 30.10.2026). На телефоне обложки ужимаются (квадрат сохраняется),
   «+N» не переносится и не сжимается. Селекторы с родителем: vw-stories.css
   подключается позже этого файла (inc/stories_ui.php, в теле страницы) и при
   равном весе перебивал бы правила. */
@media (max-width: 767.98px) {
	.vws-tile .vws-mini { min-width: 0; }
	.vws-mini .vws-mini__box {
		flex: 0 1 46px;
		width: auto;
		min-width: 0;
		height: auto;
		aspect-ratio: 1 / 1;
	}
	.vws-mini .vws-mini__more { flex: none; white-space: nowrap; }
	/* Плитки кружков и слайдов (/stories/update/…, /stories/group/…) в две колонки
	   по ~136 px на 390 px: «Открыть» (кнопки здесь 44 px высотой) и квадратная
	   корзина 44 px не помещались в 108 px — корзина вылезала за рамку плитки на
	   14 px. Поля плитки и кнопки чуть уже, «Открыть» может ужиматься. */
	.vws-grid--tiles .vws-tile { padding: 12px; }
	.vws-tile .vws-tile__actions { gap: 6px; }
	.vws-tile__actions .btn:not(.btn-icon) {
		min-width: 0;
		padding-left: 6px;
		padding-right: 6px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Шапка компьютера на 992–1199 px (iPad альбомно, узкие ноутбуки): вкладки
   (у админа их пять) не помещались между логотипом и профилем, переносились
   во второй ряд, и верхний ряд обрезался краем шапки. Отступы поуже,
   вкладки в одну строку. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.header-top .container > .d-lg-flex > a.mr-20 {
		margin-right: 2rem !important;
	}
	.header-tabs {
		flex-wrap: nowrap;
	}
	.header-tabs .nav-item.mr-3 {
		margin-right: 0 !important;
	}
	.header-tabs .nav-link {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		white-space: nowrap;
	}
}

/* Планшет в альбомной ориентации (iPad, 1024 px) получает раскладку
   компьютера, но экран сенсорный: поля 16 px, иначе iOS зумит при фокусе. */
@media (pointer: coarse) {
	.form-control,
	select,
	textarea {
		font-size: 16px !important;
	}
}

/* Строки «переключатель + подпись» (настройки виджета и Историй): колонка
   col-2 в узкой карточке (планшет, 1024 px) была уже самого переключателя
   (57 px), и он наезжал на подпись. Ширина колонки — по переключателю. */
@media (max-width: 1199.98px) {
	.card-body .form-group.row > .col-2:first-child {
		flex: 0 0 76px;
		max-width: 76px;
	}
	.card-body .form-group.row > .col-2:first-child + .col-10 {
		flex: 1 1 0;
		max-width: none;
	}
}