/* ============================================================ */
/* ============ МОБИЛЬНАЯ АДАПТАЦИЯ (JuggerMi) ================  */
/* ============================================================ */
/* Старое содержимое этого файла было от исходного шаблона и не
   совпадало с реальной вёрсткой CS:BANS. Ниже — стили под
   реальную структуру этой темы (#wrapper, #header, #nav,
   ul.main-nav + .dropdown-menu, .grid-*). */

@media (max-width: 768px) {

	/* --- Общие обёртки --- */
	#wrapper{width:100% !important;padding:10px;box-sizing:border-box;
		margin:0;}
	.container{width:100% !important;box-sizing:border-box;}

	/* --- Шапка / логотип --- */
	#header .container{text-align:center;}
	#header h1{width:auto;height:auto;font-size:22px;text-align:center;}

	/* --- Меню: было ul.main-nav в одну строку фиксированной ширины --- */
	#nav .container{padding:0;}
	#nav .container>.main-nav{display:flex;flex-wrap:wrap;
		justify-content:center;border-top:none;}
	#nav .container>.main-nav>li{float:none;top:0;}
	#nav .container>.main-nav>li>a{padding:8px 10px;font-size:12px;}
	.dropdown-menu{position:static !important;float:none;width:100%;
		box-sizing:border-box;margin-top:0;}

	/* --- Форма логина в выпадающем меню --- */
	.dropdown-menu input[type=text],
	.dropdown-menu input[type=password]{width:100%;box-sizing:border-box;}

	/* --- Таблицы (банлист/админы/логи) — горизонтальная прокрутка --- */
	.grid-view{overflow-x:auto;-webkit-overflow-scrolling:touch;}
	.grid-view table{min-width:600px;}

	/* --- Вкладки в админцентре --- */
	.nav-tabs{display:flex;flex-wrap:wrap;}
	.nav-tabs>li{float:none;}
	.nav-tabs>li>a{padding:8px 10px;font-size:12px;}

	/* --- Кастомная grid-сетка footer'а (.grid-1..grid-12) --- */
	.grid-1,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6,
	.grid-7,.grid-8,.grid-9,.grid-10,.grid-11,.grid-12{
		width:100% !important;float:none;margin:0 0 10px 0;}

	/* --- Футер --- */
	#copyright{padding:15px;margin:0;text-align:center;}
	#copyright #totop{text-align:center;margin-top:6px;}

	/* --- Формы общие --- */
	input[type=text],input[type=password],input[type="email"],textarea{
		width:100%;box-sizing:border-box;}

	/* --- Модалки (детали бана/админа/сервера, карта) --- */
	.modal{width:92% !important;left:4% !important;margin-left:0 !important;}

	/* --- Кнопки-вкладки в админцентре (ul.inline) --- */
	ul.inline{display:flex;flex-wrap:wrap;gap:6px;padding:6px 0;}
	ul.inline li{padding-left:0 !important;margin:0 !important;}
	ul.inline li a{display:block;padding:8px 12px;font-size:12px;}
}

@media (max-width: 480px) {
	#nav .container>.main-nav>li>a{padding:7px 8px;font-size:11px;}
	#header h1{font-size:18px;}
}
/* ============================================================ */

@media (max-width: 768px) {
	#wrap,#nav,#cs-user-row{padding-left:14px !important;padding-right:14px !important;}
	.shop-tile{min-height:170px;}

	/* --- Главная: таблица банов и таблица серверов (id="servers") ---
	   Раньше горизонтальную прокрутку получали только .grid-view/#ololo,
	   а обычные <table class="table..."> (например, главная страница)
	   переполняли контейнер вправо — картинка карты в ячейке "Карта"
	   вылезала за пределы карточки. Заворачиваем ЛЮБУЮ .table в скролл,
	   а не только grid-view. */
	.table{display:block;width:100%;
		overflow-x:auto;-webkit-overflow-scrolling:touch;}

	/* --- Картинка карты в ячейке таблицы (обычный рендер и AJAX) ---
	   Дублируем ограничение размера здесь же, в мобильном блоке, чтобы
	   даже при устаревшем закэшированном style.css картинка не
	   раздувалась на весь экран. */
	.table td img,.table th img,.cs-map-cell img{
		max-width:40px !important;height:24px !important;
		width:40px !important;object-fit:cover;
	}

	/* --- Страница "Серверы": блок "Статистика" вылезал за карточку ---
	   В style.css есть правило "#wrap .row-fluid > .span9 + .span3
	   {width:340px !important}" — оно писалось для десктопа, но из-за
	   незакрытой @media выше по файлу стало глобальным и на телефоне
	   340px оказывались шире самой карточки. Сбрасываем на 100% и заодно
	   чиним вложенную бутстраповскую сетку .span8/.span4 внутри строк
	   статистики (Всего банов / Активные / ... / Админов / Серверов). */
	#wrap .row-fluid > .span9 + .span3{
		width:100% !important;margin:14px 0 0 0 !important;
	}
	.items .row-fluid{margin-left:0 !important;}
	.items .row-fluid .span8,.items .row-fluid .span4{
		float:none !important;display:inline-block !important;
		width:auto !important;margin-left:0 !important;
	}
	.items .row-fluid .span4{float:right !important;}
}