/* АДАПТИВ: все условия по ширине окна и контейнера.

   Подключается последним, чтобы перебивать базовые правила при равной специфичности.
   Точки перелома как у сетки Bootstrap: 1199, 991, 767, 575. Блоки идут от широкого к узкому:
   правило для более узкого экрана стоит ниже и перебивает правило для широкого.
   Отступы между элементами здесь задаём через margin: flex gap не работает в старых браузерах */

/* ================= ДО 1199px: небольшие ноутбуки ================= */

@media (max-width: 1199px) {
	/* Сборка: окно заказа и адресный подбор - на весь экран, таблица прокручивается внутри окна */
	#order_contents .box,
	#address_picking .box {
		margin: 0;
		padding: 0;
	}

	#order_contents .box > .row {
		margin: 0;
	}

	#order_contents .picking_order_contents {
		min-height: 100vh;
		padding: 16px 12px 0;
		box-shadow: none;
	}

	#address_picking .address_picking_contents {
		min-height: 100vh;
		padding: 16px 12px;
		box-shadow: none;
	}

	#order_details_for_picking {
		padding-right: 32px;
	}

	[data-action="close_order_contents"],
	[data-action="close_address_picking"] {
		top: 8px;
		right: 8px;
	}

	.picking_products_table {
		min-width: 900px;
	}
}

/* ================= ДО 1000px ================= */

@media (max-width: 1000px) {
	/* Сборка ФБС, окно заказа: штрихкоды и код этикетки - друг под другом */
	.picking_order_code {
		display: block;
		margin-right: 0;
	}
}

/* ================= ДО 991px: планшеты ================= */

@media (max-width: 991px) {
	/* Верхнее меню: пункты переносятся на следующую строку, высота растёт вместе с ними.
	   Кнопка аккаунта закреплена в правом верхнем углу, иначе занимала бы отдельную строку */
	.service_menu > ul {
		position: relative;
		height: auto;
		min-height: 40px;
		padding: 7px 46px 7px 8px;
	}

	.service_menu > ul > li:first-child {
		margin-left: 0;
	}

	.service_menu > ul > li.service_menu_user {
		position: absolute;
		top: 5px;
		right: 8px;
		margin: 0;
	}

	/* Панель нод и настройки ноды - друг под другом. Кнопка с выбранной нодой стоит в разметке правой колонки,
	   поэтому над панелью её держит абсолютное положение, а место под неё даёт отступ .main */
	.service-tab > .main {
		position: relative;
		flex-direction: column;
		padding-top: calc(var(--control-height) + 12px);
	}

	.service-tab > .main > .panel {
		flex-basis: auto;
		min-width: 0;
		margin-bottom: 16px;
	}

	.service-tab > .main > .node_content {
		position: static;
		padding-left: 0;
	}

	.panel_toggle {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		display: flex;
		margin: 0;
	}

	/* Интеграция, инструкция: отступ сверху уже даёт панель нод */
	.mp_instruction {
		margin-top: 0;
	}

	.service-tab > .main > .panel > [data-widget="controls"] {
		min-width: 0;
	}

	.service-tab > .main.panel_collapsed > .panel {
		display: none;
	}

	/* Подвал: копирайт отдельной строкой, под ним группы ссылок */
	#footer {
		flex-wrap: wrap;
		justify-content: flex-start;
		text-align: left;
	}

	.footer_copy {
		flex: 0 0 100%;
		margin-bottom: 12px;
	}

	.footer_group {
		margin: 0 32px 8px 0;
	}

	/* Главная, «Уведомления в Telegram»: блоки друг под другом, широкая таблица прокручивается внутри своего блока */
	.tlgrm_layout > .content_element {
		flex: 1 1 100%;
		min-width: 0;
	}

	.tlgrm_bots #tlgrm_accounts {
		overflow-x: auto;
	}

	/* Главная, «Подписки и оплата»: карточки маркетплейсов по две в строку */
	.mplace_grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Аккаунты: учётные системы друг под другом, маркетплейсы по два в строку */
	.sysacc_layout {
		grid-template-columns: minmax(0, 1fr);
	}

	#mplace_accounts > .col-3 {
		width: 50%;
	}

	.store_row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	}

	.store_days {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.store_row:not(:has(> .store_field + .store_field)) {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

/* ================= ДО 767px: телефоны в альбомной ориентации ================= */

@media (max-width: 767px) {
	/* Поля разделов уже */
	:root {
		--app-gutter: 12px;
	}

	/* Очередь задач на телефоне скрыта */
	.console.desktop {
		display: none;
	}

	.table_dropdown_menu.show {
		grid-template-columns: minmax(0, 1fr);
		width: 320px;
		width: min(320px, calc(100vw - 48px));
	}

	.tags_panel_cols,
	.fields_row.fields_1_2,
	.fields_row.telegram_notice_fields,
	.status_row,
	.mplace_grid,
	.sborka_instruction .si_cols,
	.sborka_instruction .si_shots,
	.sborka_labels_cols {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Сборка: кнопки скачивания одной ширины, когда встают друг под другом */
	.sborka_instruction .si_downloads .btn {
		justify-content: center;
		width: 250px;
		max-width: 100%;
	}

	/* Зоны прокрутки у краёв таблиц работают от наведения мыши, на телефоне не нужны */
	.tbl_div .tbl_scroll_left,
	.tbl_div .tbl_scroll_right {
		display: none;
	}

	.settings_block,
	.autotask_block,
	.status_block {
		padding: 12px;
	}

	.mplace_box {
		padding: 10px 20px 10px 20px;
	}

	.complex_table .table_scroll {
		overflow-x: scroll;
	}

	.complex_table .table {
		min-width: 900px;
		max-width: max-content;
	}
}

/* ================= ДО 700px ================= */

@media (max-width: 700px) {
	/* Сборка, инструкция: пометка «Бета» над текстом */
	.sborka_instruction .si_notice {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.sborka_instruction .si_badge {
		margin-bottom: 16px;
	}

	.sborka_instruction .si_notice > * + * {
		margin-left: 0;
	}

	/* Сборка: поиск и кнопки таблицы - друг под другом. Два id нужны, чтобы перебить стили в шаблоне «Сборки ФБО» */
	#orders_list #picking_orders .sborka_search_row,
	#orders_list #picking_orders_fbo .sborka_search_row {
		flex-direction: column;
		align-items: stretch;
	}

	#orders_list #picking_orders .sborka_search_row .table_controls,
	#orders_list #picking_orders_fbo .sborka_search_row .table_controls {
		position: relative;
		margin-left: 0;
	}

	/* Сборка: кнопки здесь слева, а список «Столбцы» выравнивается по правому краю кнопки и уходил влево за экран.
	   Открываем его от левого края ряда кнопок */
	#orders_list .sborka_search_row .sborka_columns_dropdown {
		position: static;
	}

	#orders_list .sborka_search_row .sborka_columns_dropdown > .dropdown-menu {
		right: auto;
		left: 0;
		max-width: 100%;
	}
}

/* ================= ДО 575px: телефоны ================= */

@media (max-width: 575px) {
	/* Меню аккаунта не шире экрана */
	.user_menu {
		width: calc(100vw - 16px);
	}

	/* Подвал: группы ссылок - одна под другой */
	.footer_group {
		flex: 0 0 100%;
		margin-right: 0;
	}

	.auth_page {
		padding-top: 24px;
	}

	.auth_card {
		padding: 20px;
	}

	.price_row {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Главная: карточки с меньшими внутренними отступами */
	.account_settings > .content_element,
	.pay_tab,
	.improve_tab,
	.send_me_block,
	.tlgrm_layout > .content_element,
	.accounts_tab .content_element {
		padding: 14px;
	}

	/* Главная, «Приложение»: электронная почта и телефон - друг под другом */
	.send_me_block .row > [class*="col-"] {
		width: 100%;
	}

	/* Главная, «Подписки и оплата»: кнопки одной ширины, когда встают друг под другом. 192px - ширина «Оплатить картой» */
	.pay_buttons_row .btn {
		min-width: 192px;
	}

	/* Аккаунты: карточки пользователей и маркетплейсов в одну колонку */
	.users_grid {
		grid-template-columns: minmax(0, 1fr);
	}

	#mplace_accounts > .col-3 {
		width: 100%;
	}

	/* Интеграция, инструкция: превью видео над текстом, иначе текст уходит за экран */
	.video_card {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 12px;
	}

	.video_card > * + * {
		margin-left: 0;
	}

	.video_card_cover {
		width: 100%;
	}

	.mp_step,
	.mp_service {
		padding: 14px;
	}

	.mp_step {
		gap: 12px;
	}

	/* Интеграция, настройки ноды: заголовок на всю ширину, «Удалить ноду» под ним */
	.node_settings_head {
		flex-direction: column;
		align-items: flex-start;
	}

	.node_settings_head > * + * {
		margin-left: 0;
	}

	.node_settings_head h4 {
		width: 100%;
	}

	.node_settings > .content_element {
		padding: 14px;
	}

	/* Сборка: карточки инструкции и настроек с меньшими внутренними отступами */
	.sborka_instruction .si_step,
	.sborka_settings > .content_element {
		padding: 14px;
	}

	.sborka_instruction .si_step {
		gap: 12px;
	}

	.sborka_sub {
		padding-left: 10px;
	}

	/* Сборка: длинные названия листов и кабинетов переносятся, поле сборщика и режимы листа - по ширине экрана */
	#picking_orders .picking_batches a,
	#picking_orders_fbo .picking_batches a {
		white-space: normal;
	}

	.sborka_brick {
		height: auto;
		min-height: var(--control-height);
		white-space: normal;
	}

	.sborka_picker_bar select {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.picking_label_modes:not(.hidden) {
		display: flex;
		width: 100%;
	}

	.picking_label_modes a {
		flex: 1 1 0;
		min-width: 0;
		padding: 7px 10px;
	}

	/* Сборка, окно заказа: меньше отступов и текст заказа мельче, списки КИЗ не шире экрана */
	#order_details_for_picking {
		margin-bottom: 16px;
	}

	#order_details_for_picking h1 {
		font-size: 22px;
	}

	#order_details_for_picking p {
		font-size: 16px;
	}

	#products_list_for_picking {
		margin-top: 16px;
		margin-bottom: 16px;
	}

	[data-action="select_cis"],
	[data-action="select_cis_to_agreggation"],
	[data-action="select_cis_to_agreggation_main_cis"] {
		width: auto;
		max-width: 100%;
	}

	#picking_service_msg {
		padding: 14px 16px 24px;
	}
}

/* ================= ДО 500px ================= */

@media (max-width: 500px) {
	/* Главная, «Подписки и оплата»: переключатель столбиком, пункты на всю ширину */
	.pay_switch {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}

	/* Подписи полей переносятся: колонка сетки уже 350px только на таких ширинах, шире подпись помещается в строку */
	.fields_row > .field:not(.form-check) > label,
	.fields_grid > .field:not(.form-check) > label {
		white-space: normal;
	}
}

/* ================= ДО 450px ================= */

@media (max-width: 450px) {
	/* Сборка, окно заказа: заголовок заказа или короба */
	#order_details_for_picking h1 {
		font-size: 18px;
	}
}

/* ================= ПО ШИРИНЕ КОНТЕЙНЕРА ================= */

@container table_params (max-width: 560px) {
	.table_params > .table_param {
		flex-basis: 100%;
	}
}