/*
 * Заявки на размут.
 *
 * Страница списка равняется на заявки на разбан из Banlist Plus: значения ниже
 * скопированы из modules_extra/banlist_plus/templates/assets/banlist-plus.css,
 * чтобы обе страницы выглядели одинаково. Классы свои (mta-), поэтому модуль
 * остаётся автономным и не ломается, если Banlist Plus отключить.
 * При рестайле Banlist Plus эти значения нужно обновить вручную.
 *
 * Форма и карточка заявки используют ту же палитру, геометрию и плотность flat,
 * но сохраняют собственные классы, чтобы не менять шаблон сайта.
 */

/* ── Компактная панель списка ────────────────────────────────── */
.mta-list-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.mta-list-count {
	align-items: center;
	background: #fff;
	border: 1px solid #d3e0e8;
	border-radius: 2px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
	color: #405a6e;
	display: inline-flex;
	font-family: "PT Sans", sans-serif;
	font-size: 11px;
	gap: 6px;
	line-height: 22px;
	margin-right: 8px;
	padding: 0 4px 0 8px;
}

.mta-list-count strong {
	background: #45688e;
	border-radius: 2px;
	color: #fff;
	font-size: 11px;
	line-height: 16px;
	min-width: 18px;
	padding: 0 4px;
	text-align: center;
}

.mta-toolbar {
	align-items: center;
	background: #f3f6f8;
	border: 1px solid #d3dfe7;
	border-radius: 1px;
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr) minmax(190px, 245px) auto;
	margin: 0 0 10px;
	padding: 10px;
}

.mta-server-select {
	position: relative;
}

.mta-server-select > .glyphicon {
	color: #45688e;
	left: 10px;
	pointer-events: none;
	position: absolute;
	top: 10px;
	z-index: 2;
}

.mta-server-select .form-control {
	background: #fff;
	border-color: #c7d3dc;
	border-radius: 3px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	height: 34px;
	overflow: hidden;
	padding-left: 31px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mta-server-select .form-control:focus {
	border-color: #477fae;
	box-shadow: 0 0 0 2px rgba(71, 127, 174, .16);
}

.mta-toolbar-action {
	flex: 0 0 auto;
}

.mta-add-button {
	align-items: center;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 6px;
	justify-content: center;
	margin: 0 !important;
	padding: 4px 9px;
	white-space: nowrap;
}

/* ── Фильтры статусов ────────────────────────────────────────── */
.mta-status-filters {
	display: flex;
	gap: 4px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.mta-status-filters::-webkit-scrollbar {
	display: none;
}

.mta-status-filter {
	align-items: center;
	background: #fff;
	border: 1px solid #cbd7df;
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(42, 63, 79, .04);
	color: #455b6c;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
	height: 34px;
	padding: 0 10px;
	text-decoration: none !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mta-status-filter:hover,
.mta-status-filter:focus {
	background: #e8eff4;
	border-color: #aebfcb;
	color: #284f6d;
}

.mta-status-filter.active {
	background: #45688e;
	border-color: #45688e;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
	color: #fff;
}

.mta-status-filter strong {
	background: #dfe7ec;
	border-radius: 9px;
	color: #516574;
	font-size: 11px;
	line-height: 18px;
	min-width: 18px;
	padding: 0 4px;
	text-align: center;
}

.mta-status-filter.active strong {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* ── Статус-пилюли ───────────────────────────────────────────── */
/* Имена классов зафиксированы: main.js переписывает class у #mta-status. */
.mta-status {
	align-items: center;
	border: 1px solid transparent;
	border-radius: 3px;
	display: inline-flex;
	font-size: 11px;
	font-weight: 700;
	gap: 6px;
	justify-content: center;
	min-height: 27px;
	padding: 3px 8px;
	white-space: nowrap;
}

.mta-status-success { background: #cdebd4; border-color: #78be87; color: #1d6530; }
.mta-status-danger  { background: #f7d4d1; border-color: #e28f89; color: #972b25; }
.mta-status-warning { background: #ffe7a0; border-color: #d9b84f; color: #6f5400; }

/* ── Таблица списка ──────────────────────────────────────────── */
.mta-appeals-table {
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	width: 100%;
}

.mta-appeals-table > thead > tr > td {
	background: #eaf1f5;
	border-color: #d3dfe7 !important;
	color: #43596b;
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 7px 9px !important;
	text-align: center;
	text-transform: uppercase;
}

.mta-appeals-table > thead td:nth-child(1) { width: 22%; }
.mta-appeals-table > thead td:nth-child(2) { width: 17%; }
.mta-appeals-table > thead td:nth-child(3) { width: 17%; }
.mta-appeals-table > thead td:nth-child(4) { width: 13%; }
.mta-appeals-table > thead td:nth-child(5) { width: 15%; }
.mta-appeals-table > thead td:nth-child(6) { width: 16%; }

.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(4) {
	text-align: center;
}

.mta-appeals-table .mta-status {
	box-sizing: border-box;
	gap: 5px;
	max-width: 100%;
	padding-left: 5px;
	padding-right: 5px;
}

.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(2),
.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(3),
.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(5),
.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(6) {
	text-align: left;
}

.mta-appeals-table > tbody > .mta-appeal-row > td {
	border-color: #dbe4ea !important;
	overflow-wrap: anywhere;
	padding: 4px 7px !important;
	transition: background-color .15s ease, box-shadow .15s ease;
	vertical-align: middle;
}

.mta-appeal-status-success > td { background: #e3f3e7 !important; }
.mta-appeal-status-danger  > td { background: #f9e5e3 !important; }
.mta-appeal-status-warning > td { background: #fff2cc !important; }
.mta-appeal-status-success:hover > td { background: #d8ecdd !important; }
.mta-appeal-status-danger:hover  > td { background: #f4d9d6 !important; }
.mta-appeal-status-warning:hover > td { background: #ffebba !important; }

.mta-appeal-status-success > td:first-child { box-shadow: inset 3px 0 #49a363; }
.mta-appeal-status-danger  > td:first-child { box-shadow: inset 3px 0 #d65b52; }
.mta-appeal-status-warning > td:first-child { box-shadow: inset 3px 0 #d7a72e; }

.mta-appeal-summary {
	align-items: center;
	column-gap: 7px;
	display: grid;
	grid-template-areas:
		"title action"
		"reason action";
	grid-template-columns: minmax(0, 1fr) 70px;
	min-width: 0;
	row-gap: 3px;
}

.mta-appeal-title {
	align-items: center;
	display: flex;
	font-size: 13px;
	gap: 0;
	grid-area: title;
	line-height: 18px;
	min-width: 0;
	text-decoration: none !important;
	width: 100%;
}

.mta-appeal-nick {
	color: #315f84;
	flex: 0 1 auto;
	font-weight: 700;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mta-open-appeal {
	align-items: center;
	align-self: center;
	background-color: #486b91;
	background-image: linear-gradient(to bottom, #5b7ea4, #486b91);
	border: 1px solid #486b91;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .05);
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 400;
	gap: 4px;
	grid-area: action;
	justify-content: center;
	justify-self: end;
	line-height: 20px;
	margin-left: 0;
	min-width: 76px;
	padding: 3px 7px;
	text-decoration: none !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
	white-space: nowrap;
}

.mta-open-arrow {
	font-size: 15px;
	line-height: 16px;
}

.mta-appeal-title:hover .mta-appeal-nick {
	color: #245b88;
	text-decoration: underline !important;
}

.mta-open-appeal:hover,
.mta-open-appeal:focus {
	background: #496c92;
	border-color: #486b91;
	color: #fff;
}

.mta-appeal-reason {
	align-items: center;
	align-self: start;
	background: rgba(255, 248, 213, .82);
	border: 1px solid rgba(190, 157, 53, .68);
	border-left: 3px solid #d0a82c;
	border-radius: 1px;
	color: #725b0d;
	display: inline-flex;
	font-size: 11px;
	gap: 3px;
	grid-area: reason;
	justify-self: start;
	line-height: 15px;
	margin: 0;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	padding: 1px 5px 1px 4px;
	white-space: nowrap;
}

.mta-appeal-reason b {
	color: #806717;
	font-size: 11px;
	font-weight: 600;
}

.mta-appeal-reason > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mta-server-cell {
	min-width: 0;
}

.mta-server-name {
	align-items: center;
	color: #435e73;
	display: flex;
	font-size: 11px;
	font-weight: 600;
	gap: 5px;
	line-height: 17px;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.mta-user {
	align-items: center;
	display: inline-flex;
	gap: 6px;
	max-width: 100%;
	min-width: 0;
	vertical-align: middle;
}

.mta-user .small_us_av {
	border: 1px solid #45688e;
	height: 24px;
	object-fit: cover;
	width: 24px;
	flex: 0 0 24px;
}

.mta-user > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mta-muted {
	color: #526878;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 17px;
	text-shadow: none;
	white-space: nowrap;
}

.mta-review-pending {
	align-items: center;
	color: #526878;
	display: inline-flex;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 600;
	gap: 5px;
	line-height: 17px;
	max-width: 100%;
	overflow: hidden;
	text-shadow: none;
	vertical-align: middle;
	white-space: nowrap;
}

.mta-review-pending .glyphicon {
	flex: 0 0 auto;
	font-size: 10px;
	line-height: 1;
	position: static;
}

.mta-review-pending > span:last-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mta-appeal-date {
	color: #354a5a;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

.mta-date-line {
	align-items: center;
	display: flex;
	gap: 5px;
	justify-content: space-between;
	line-height: 16px;
	min-width: 0;
	white-space: nowrap;
}

.mta-date-line + .mta-date-line {
	border-top: 1px solid rgba(70, 100, 100, .16);
	margin-top: 2px;
	padding-top: 2px;
}

.mta-date-line b {
	color: #687c7c;
	font-size: 10px;
	font-weight: 600;
	text-transform: none;
}

.mta-date-line time,
.mta-date-line > span {
	color: #304b5d;
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	letter-spacing: 0;
	margin-left: auto;
	text-align: right;
}

.mta-date-pending > span {
	color: #8b6b16;
}

/* ── Форма подачи ────────────────────────────────────────────── */
.mta-add-page .block {
	padding-bottom: 15px;
}

.mta-add-steps {
	align-items: center;
	background: #f1f3f3;
	border-bottom: 1px solid #d2dada;
	color: #496072;
	display: flex;
	font-size: 12px;
	gap: 10px;
	justify-content: center;
	padding: 9px 15px;
}

.mta-add-steps span {
	align-items: center;
	display: inline-flex;
	font-weight: 600;
	gap: 6px;
}

.mta-add-steps b {
	align-items: center;
	background: #45688e;
	border-radius: 2px;
	color: #fff;
	display: inline-flex;
	font-size: 10px;
	height: 19px;
	justify-content: center;
	width: 19px;
}

.mta-add-steps > i {
	color: #9aaab6;
	font-size: 14px;
	font-style: normal;
	line-height: 18px;
}

.mta-add-search-layout {
	margin: 0;
	padding: 15px 7px 0;
}

.mta-form-section {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 1px;
	padding: 0 10px 10px;
}

.mta-section-heading {
	background: #353f4a;
	border: 0;
	margin: 0 -10px 12px;
	padding: 0;
}

.mta-section-heading h4 {
	color: #fff;
	font-family: "HelveticaThin", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	margin: 0;
	min-height: 25px;
	padding: 10px 5px 5px 20px;
	text-shadow: none;
}

.mta-section-heading h4 .glyphicon {
	color: #fff;
	font-size: 12px;
	margin-right: 4px;
}

.mta-section-heading p {
	background: #f3f6f8;
	border-bottom: 1px solid #ddd;
	color: #5e7180;
	font-size: 11px;
	line-height: 16px;
	margin: 0;
	padding: 6px 10px;
	text-shadow: none;
}

.mta-field-label {
	color: #3d5364;
	display: block;
	font-size: 12px;
	margin-bottom: 5px;
}

.mta-field-label small {
	color: #7a8b97;
	font-weight: normal;
}

.mta-required {
	color: #c54c43;
	font-weight: 700;
}

.mta-add-page .form-control {
	border-color: #c9d4dc;
	border-radius: 2px;
}

.mta-add-page input.form-control,
.mta-add-page select.form-control {
	height: 35px;
}

.mta-add-page .form-control:focus {
	border-color: #477fae;
	box-shadow: 0 0 0 2px rgba(71, 127, 174, .13);
}

.mta-search-control {
	display: grid;
	gap: 7px;
	grid-template-columns: minmax(0, 1fr) auto;
}

.mta-search-control .btn2 {
	align-items: center;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	gap: 5px;
	height: 35px;
	justify-content: center;
	margin: 0;
	min-width: 125px;
}

.mta-search-result:not(:empty) {
	margin-top: 10px;
}

.mta-search-item {
	background: #f8fafb;
	border: 1px solid #d6e0e7;
	border-left: 3px solid #5281a8;
	border-radius: 2px;
	margin-bottom: 8px;
	padding: 10px;
}

.mta-search-item:last-child {
	margin-bottom: 0;
}

.mta-search-item-head {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.mta-search-item-title {
	min-width: 0;
}

.mta-search-item-title strong,
.mta-search-item-title small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mta-search-item-title strong {
	color: #315d82;
	font-size: 13px;
}

.mta-search-item-title small {
	color: #748693;
	font-size: 10px;
	margin-top: 2px;
}

.mta-select-mute {
	flex: 0 0 auto;
	font-size: 11px;
	margin: 0;
	padding: 5px 10px;
}

.mta-search-details,
.mta-selected-details {
	display: grid;
	gap: 7px 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 9px;
}

.mta-meta-line {
	min-width: 0;
	overflow-wrap: anywhere;
}

.mta-meta-line span,
.mta-meta-line b {
	display: block;
}

.mta-meta-line span {
	color: #7b8b96;
	font-size: 10px;
	font-weight: normal;
	line-height: 13px;
}

.mta-meta-line b {
	color: #3a4f60;
	font-size: 11px;
	line-height: 15px;
}

.mta-add-help {
	background: #e4e4ed;
	border-bottom-color: rgba(69, 104, 142, .35);
	border-left-color: #45688e;
	border-right-color: rgba(69, 104, 142, .35);
	border-top-color: rgba(69, 104, 142, .35);
	margin: 0;
	min-height: 112px;
}

.mta-add-help h4 {
	color: #45688e;
	font-size: 14px;
	margin-bottom: 7px;
}

.mta-add-help p:last-child {
	margin-bottom: 0;
}

.mta-add-details {
	border-top: 1px solid #d9e3ea;
	margin-top: 10px;
	padding-top: 15px;
}

.mta-selected-card {
	background: #f0f9f2;
	border: 1px solid #c6e1cd;
	border-left: 4px solid #49a363;
	border-radius: 2px;
	margin: 0 15px 15px;
	padding: 10px 12px;
}

.mta-selected-card:empty {
	display: none;
}

.mta-selected-heading {
	align-items: center;
	display: flex;
	gap: 9px;
}

.mta-selected-heading > .glyphicon {
	align-items: center;
	background: #49a363;
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	flex: 0 0 24px;
	font-size: 10px;
	height: 24px;
	justify-content: center;
}

.mta-selected-heading small,
.mta-selected-heading strong {
	display: block;
}

.mta-selected-heading small {
	color: #5d8067;
	font-size: 10px;
}

.mta-selected-heading strong {
	color: #285b36;
	font-size: 13px;
	overflow-wrap: anywhere;
}

.mta-add-details > .row {
	margin-left: 0;
	margin-right: 0;
}

/* Контейнер нужен main.js как крючок для .has-error. */
.mta-evidence-upload.has-error label {
	color: #a94442;
}

.mta-upload-control {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.mta-upload-control .input-file {
	max-width: 100%;
}

.mta-upload-control .btn {
	font-size: 11px;
	margin: 0;
}

/* Превью загрузки: шаблон стилизует только #imgs, loadImages() собирает #imgs-mta. */
#imgs-mta:not(:empty) {
	margin-bottom: 9px;
}

#imgs-mta .thumbnail {
	float: left;
	margin-bottom: 5px;
	margin-right: 8px;
	max-width: 90px;
}

#imgs-mta:before,
#imgs-mta:after {
	content: " ";
	display: table;
}

#imgs-mta:after {
	clear: both;
}

.mta-submit-row {
	align-items: center;
	background: #f4f7f9;
	border-top: 1px solid #d9e3ea;
	display: flex;
	gap: 12px;
	margin: 5px 15px -15px;
	min-height: 58px;
	padding: 10px 12px;
}

.mta-submit-row p {
	color: #71818d;
	font-size: 10px;
	margin: 0;
}

#mta-form-result {
	flex: 1 1 auto;
	font-size: 12px;
	text-align: right;
}

.mta-submit-row .btn2 {
	align-items: center;
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	gap: 6px;
	justify-content: center;
	margin: 0;
	min-width: 178px;
}

/* ── Страница заявки ─────────────────────────────────────────── */
.mta-appeal-page > .col-md-12 > .block {
	overflow: hidden;
}

.mta-appeal-main-block {
	background: #fff;
}

.mta-appeal-overview {
	align-items: center;
	border-bottom: 1px solid #d5dfe7;
	border-left: 4px solid #47749f;
	display: flex;
	justify-content: space-between;
	min-height: 76px;
	padding: 11px 15px;
}

.mta-appeal-overview-success { background: #e3f3e7; border-left-color: #49a363; }
.mta-appeal-overview-danger  { background: #f9e5e3; border-left-color: #d65b52; }
.mta-appeal-overview-warning { background: #fff2cc; border-left-color: #d7a72e; }

.mta-appeal-player {
	min-width: 0;
}

.mta-appeal-player > span,
.mta-appeal-player > strong,
.mta-appeal-player > small {
	display: block;
}

.mta-appeal-player > span {
	color: #718391;
	font-size: 10px;
	line-height: 13px;
}

.mta-appeal-player > strong {
	color: #294d69;
	font-size: 17px;
	line-height: 22px;
	overflow-wrap: anywhere;
}

.mta-appeal-player > small {
	color: #6e808d;
	font-size: 11px;
	margin-top: 1px;
	overflow-wrap: anywhere;
}

.mta-appeal-decision {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-left: 12px;
}

.mta-appeal-decision small {
	color: #647886;
	font-size: 10px;
	white-space: nowrap;
}

#mta-actions:empty,
.mta-action-result:empty {
	display: none;
}

.mta-action-panel {
	align-items: center;
	background: #f3f6f8;
	border-bottom: 1px solid #d5dfe7;
	display: flex;
	gap: 16px;
	padding: 10px 15px;
}

.mta-action-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.mta-action-copy strong,
.mta-action-copy small {
	display: block;
}

.mta-action-copy strong {
	color: #2f4555;
	font-size: 14px;
	line-height: 18px;
}

.mta-action-copy small {
	color: #687d8d;
	font-size: 11px;
	line-height: 15px;
}

.mta-appeal-actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	gap: 8px;
	justify-content: flex-end;
}

.mta-appeal-actions .btn {
	align-items: center;
	border-radius: 1px;
	box-sizing: border-box;
	display: inline-flex;
	flex: 0 0 126px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 600;
	gap: 5px;
	height: 32px;
	justify-content: center;
	line-height: 20px;
	margin: 0;
	padding: 5px 10px;
	text-align: center;
	width: 126px;
}

.mta-appeal-actions .mta-resolve-primary {
	height: 32px;
	min-width: 126px;
}

.mta-appeal-actions .mta-delete-appeal {
	height: 32px;
	margin-left: 0;
	min-width: 126px;
}

.mta-appeal-page .mta-appeal-actions .btn-success {
	background-color: #477953;
	background-image: linear-gradient(to bottom, #5b8f66, #477953);
	border-color: #3f6d4a;
	color: #fff;
}

.mta-appeal-page .mta-appeal-actions .btn-warning {
	background-color: #9f6f35;
	background-image: linear-gradient(to bottom, #bd8c4f, #9f6f35);
	border-color: #8d622f;
	color: #fff;
}

.mta-appeal-page .mta-appeal-actions .btn-danger {
	background-color: #994a47;
	background-image: linear-gradient(to bottom, #b8615d, #994a47);
	border-color: #88413f;
	color: #fff;
}

.mta-action-result {
	background: #f4f7f9;
	border-bottom: 1px solid #d9e3ea;
	font-size: 12px;
	padding: 8px 15px;
}

.mta-appeal-content {
	background: #fff;
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	padding: 12px;
}

.mta-appeal-section {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 1px;
	min-width: 0;
}

.mta-appeal-section > h4 {
	align-items: center;
	background: #353f4a;
	border-bottom: 0;
	color: #fff;
	font-family: "HelveticaThin", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	margin: 0;
	min-height: 25px;
	padding: 10px 5px 5px 20px;
	text-shadow: none;
}

.mta-heading-icon {
	align-items: center;
	display: inline-flex;
	flex: 0 0 16px;
	height: 16px;
	justify-content: center;
	line-height: 0;
	vertical-align: 0;
	width: 16px;
}

.mta-heading-icon svg {
	display: block;
	fill: none;
	height: 16px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 16px;
}

.mta-appeal-section > h4 > span:last-child {
	line-height: 20px;
}

.mta-info-grid {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 0;
}

.mta-info-item {
	background: #fff;
	border-bottom: 1px solid #ddd;
	min-width: 0;
	padding: 8px 10px 9px;
}

.mta-info-left {
	border-right: 1px solid #ddd;
}

.mta-info-grid > .mta-info-item:nth-last-child(-n+2) {
	border-bottom: 0;
}

.mta-info-wide {
	border-right: 0;
	grid-column: 1 / -1;
}

.mta-info-item > span,
.mta-info-item > strong {
	display: block;
}

.mta-info-item > span,
.mta-appeal-text > span,
.mta-evidence-item > span {
	color: #4d6272;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}

.mta-info-item > strong {
	color: #263f52;
	font-size: 13px;
	line-height: 18px;
	overflow-wrap: anywhere;
}

.mta-info-item > span {
	margin-bottom: 1px;
}

.mta-appeal-meta-grid {
	border-bottom: 1px solid #ddd;
}

.mta-appeal-text {
	background: #fff;
	margin: 0;
	padding: 9px 10px 10px;
}

.mta-appeal-text .with_code {
	background: #f5f7f9;
	border: 1px solid #c9d5de;
	color: #354b5c;
	font-size: 13px;
	line-height: 18px;
	margin-top: 5px;
	min-height: 57px;
	overflow-wrap: anywhere;
	padding: 9px;
}

.mta-evidence-section {
	margin: 0 12px 12px;
}

.mta-evidence-grid {
	align-items: stretch;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mta-evidence-item {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0;
}

.mta-evidence-item + .mta-evidence-item {
	border-left: 1px solid #ddd;
}

.mta-evidence-item > span {
	background: #e9eef2;
	border-bottom: 1px solid #ddd;
	box-sizing: border-box;
	display: block;
	margin: 0;
	padding: 7px 9px;
	width: 100%;
}

.mta-evidence-content {
	box-sizing: border-box;
	color: #344e5f;
	flex: 1 1 auto;
	font-size: 12px;
	min-height: 29px;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 9px;
	width: 100%;
}

.mta-evidence-content .thumbnail {
	display: inline-block;
	float: none;
	margin: 0 6px 6px 0;
	max-width: 110px;
	vertical-align: top;
}

.mta-empty-evidence {
	align-items: center;
	background: #f0f3f5;
	border: 1px solid #c8d4dd;
	box-sizing: border-box;
	color: #4f6575;
	display: flex;
	font-size: 12px;
	font-weight: 600;
	justify-content: center;
	min-height: 29px;
	padding: 5px 8px;
	text-align: center;
	width: 100%;
}

/* ── Комментарии ─────────────────────────────────────────────── */
.mta-comments-block {
	background: #f3f5f7;
	border: 1px solid #ddd;
	box-sizing: border-box;
	margin: 0 12px 12px;
	max-width: 100%;
	overflow: hidden;
	padding: 0 !important;
}

.mta-comments-block > h4 {
	display: flex;
	gap: 7px;
}

#mta-comment-form {
	background: #f3f5f7;
	border-bottom: 1px solid #d5dfe7;
	padding: 12px 14px 10px;
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
}

#mta-comment-text {
	background: #fff;
	border-color: #b9cbd7;
	border-radius: 2px;
	font-size: 13px;
	line-height: 19px;
	min-height: 82px;
	padding: 9px 10px;
	resize: vertical;
}

#mta-comment-text:focus {
	border-color: #477fae;
	box-shadow: 0 0 0 2px rgba(71, 127, 174, .14);
}

#mta-comment-form .smile_input_forum {
	text-align: right;
	width: 100%;
}

#mta-comment-form .btn2 {
	font-size: 12px;
	font-weight: 700;
	height: 34px;
	margin-top: 8px;
	min-width: 112px;
}

#mta-comments {
	background: #f3f5f7;
	margin-top: 0 !important;
	padding: 10px 14px 12px;
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
}

#mta-comments > hr {
	display: none;
}

#mta-comments .chat_message {
	align-items: flex-start;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 1px;
	box-sizing: border-box;
	box-shadow: none;
	display: flex;
	margin: 0 0 8px;
	overflow: visible;
	padding: 10px !important;
	width: 100%;
}

#mta-comments .chat_message:last-of-type {
	margin-bottom: 0;
}

#mta-comments .chat_message > a {
	display: block;
	flex: 0 0 38px;
}

#mta-comments .chat_message .user_img {
	background: #45688e;
	float: none;
	height: 38px;
	margin: 0;
	padding: 2px;
	width: 38px;
}

#mta-comments .chat_message .message {
	flex: 1 1 auto;
	float: none;
	font-size: 13px;
	line-height: 18px;
	margin-left: 10px;
	min-width: 0;
	overflow: visible;
	width: auto;
}

#mta-comments .chat_message .message .info {
	align-items: center;
	border-bottom: 1px solid #e1e6ea;
	display: flex;
	height: auto;
	margin: 0 0 6px;
	min-height: 18px;
	padding-bottom: 4px;
}

#mta-comments .chat_message .message .info .author {
	float: none;
	font-size: 13px;
	font-weight: 700;
	min-width: 0;
	overflow: hidden;
}

#mta-comments .chat_message .message .info .author > a {
	align-items: baseline;
	display: flex;
	gap: 4px;
	max-width: 100%;
	min-width: 0;
	text-decoration: none;
}

#mta-comments .mta-comment-group {
	background: transparent;
	border: 0;
	flex: 0 0 auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	padding: 0;
	text-shadow: none;
	white-space: nowrap;
}

#mta-comments .mta-comment-author-name {
	line-height: 18px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#mta-comments .chat_message .message .info .date {
	color: #667a88;
	float: none;
	font-size: 10px;
	font-weight: 600;
	line-height: 14px;
	margin-left: auto;
	white-space: nowrap;
}

#mta-comments .chat_message .edit_message,
#mta-comments .chat_message .dell_message {
	cursor: pointer;
	float: none;
	font-size: 12px;
	margin-left: 8px;
	opacity: .78;
	position: static;
}

#mta-comments .chat_message .edit_message {
	color: #45688e;
}

#mta-comments .chat_message .dell_message {
	color: #b44942;
}

#mta-comments .chat_message .edit_message:hover,
#mta-comments .chat_message .dell_message:hover {
	opacity: 1;
}

#mta-comments .chat_message .with_code {
	color: #2f4555;
	font-size: 13px;
	line-height: 18px;
	min-height: 0;
}

#mta-comments .mta-comment-editor {
	margin-top: 2px;
	max-width: 100%;
	width: 100%;
}

#mta-comments .mta-comment-edit-text {
	background: #fff;
	border-color: #b9cbd7;
	border-radius: 1px;
	box-sizing: border-box;
	font-size: 13px;
	line-height: 18px;
	min-height: 70px;
	padding: 7px 8px;
	resize: vertical;
	width: 100%;
}

#mta-comments .mta-comment-edit-text:focus {
	border-color: #477fae;
	box-shadow: 0 0 0 2px rgba(71, 127, 174, .12);
}

#mta-comments .mta-comment-edit-actions {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-top: 7px;
}

#mta-comments .mta-comment-edit-actions .btn2 {
	font-size: 11px;
	height: 30px;
	margin: 0;
	min-width: 88px;
}

#mta-comments .mta-comment-cancel {
	background: transparent;
	border: 0;
	color: #5d7180;
	font-size: 11px;
	padding: 4px 0;
}

#mta-comments .mta-comment-cancel:hover {
	color: #324b5e;
	text-decoration: underline;
}

#mta-comments .mta-comment-edit-result {
	font-size: 11px;
	margin-left: auto;
	text-align: right;
}

#mta-comments .chat_message + .clearfix {
	display: none;
}

#mta-comments > .empty-element {
	background: #fff;
	border: 1px dashed #c4d3dc;
	color: #738591;
	display: block;
	padding: 12px;
	text-align: center;
}

/* ── Админка ─────────────────────────────────────────────────── */
.mta-admin-section {
	margin-bottom: 20px;
}
.mta-admin-toggle {
	display: block;
	font-weight: normal;
}
.mta-admin-server {
	font-weight: normal;
	margin-right: 15px;
}

/* Счётчик новых заявок в профиле. */
#profile_box .mta-pending-line .glyphicon {
	margin-right: 4px;
}

/* ── Мобильные и узкие колонки ───────────────────────────────── */
/* Одна карточка содержит две смысловые строки вместо пяти повторяющихся полей. */
@media (max-width: 991px) {
	.mta-add-help {
		margin-top: 12px;
	}

	.mta-add-details .col-md-5 .mta-form-section {
		margin-top: 4px;
	}

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

	.mta-toolbar {
		grid-template-areas:
			"statuses statuses"
			"server action";
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 8px;
	}

	.mta-status-filters { grid-area: statuses; }
	.mta-server-select { grid-area: server; }
	.mta-toolbar-action { grid-area: action; }

	.mta-list-page .table-responsive {
		border: 0;
		overflow: visible;
	}

	.mta-appeals-table,
	.mta-appeals-table > tbody {
		display: block;
		table-layout: auto;
	}

	.mta-appeals-table > thead {
		display: none;
	}

	.mta-appeals-table > tbody > .mta-appeal-row {
		border: 1px solid #cedae3;
		border-left: 4px solid #47749f;
		border-radius: 1px;
		display: grid;
		gap: 7px 9px;
		grid-template-areas:
			"appeal appeal status"
			"server server status"
			"author reviewer date";
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		margin: 8px 5px;
		overflow: hidden;
		padding: 9px 10px;
	}

	.mta-appeals-table > tbody > .mta-appeal-status-success { background: #e3f3e7; border-left-color: #49a363; }
	.mta-appeals-table > tbody > .mta-appeal-status-danger  { background: #f9e5e3; border-left-color: #d65b52; }
	.mta-appeals-table > tbody > .mta-appeal-status-warning { background: #fff2cc; border-left-color: #d7a72e; }

	.mta-appeals-table > tbody > .mta-appeal-row > td {
		align-items: center;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		display: flex;
		min-width: 0;
		padding: 0 !important;
		text-align: left !important;
		width: auto !important;
	}

	.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(1) {
		display: block;
		grid-area: appeal;
	}

	.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(2) {
		grid-area: server;
	}

	.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(2)::after {
		content: none;
	}

	.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(3) {
		grid-area: author;
		justify-self: stretch;
	}

	.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(3)::after {
		color: #8ca0ae;
		content: "→";
		font-size: 12px;
		margin-left: auto;
		padding-left: 6px;
	}

	.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(4) {
		align-self: start;
		grid-area: status;
		justify-self: end;
	}

	.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(5) {
		grid-area: reviewer;
		justify-self: stretch;
	}

	.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(6) {
		grid-area: date;
		justify-self: end;
		text-align: right !important;
	}

	.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(3),
	.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(5),
	.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(6) {
		border-top: 1px solid rgba(110, 135, 153, .18) !important;
		padding-top: 7px !important;
	}

	.mta-appeals-table .mta-status {
		font-size: 10px;
		min-height: 24px;
		padding: 2px 7px;
	}

	.mta-appeals-table .mta-user {
		font-size: 11px;
	}

	.mta-appeals-table .mta-user .small_us_av {
		flex-basis: 22px;
		height: 22px;
		width: 22px;
	}

	.mta-appeal-date {
		white-space: nowrap;
	}

	.mta-appeal-date .mta-date-line {
		justify-content: flex-end;
	}

	.mta-appeal-date .mta-date-line b {
		display: none;
	}

	.mta-empty-row {
		display: block;
	}

	.mta-empty-row td {
		display: block;
		padding: 15px !important;
	}
}

@media (max-width: 640px) {
	.mta-appeals-table > tbody > .mta-appeal-row {
		grid-template-areas:
			"appeal appeal status"
			"reason reason action"
			"server server action"
			"author reviewer date";
	}

	.mta-appeals-table > tbody > .mta-appeal-row > td:nth-child(1) {
		display: contents;
	}

	.mta-appeal-summary {
		display: contents;
	}

	.mta-appeal-title {
		grid-area: appeal;
	}

	.mta-appeal-reason {
		grid-area: reason;
	}

	.mta-open-appeal {
		grid-area: action;
	}

	.mta-add-steps {
		display: grid;
		gap: 5px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 8px;
	}

	.mta-add-steps span {
		font-size: 10px;
		justify-content: center;
		line-height: 13px;
		text-align: center;
	}

	.mta-add-steps > i {
		display: none;
	}

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

	.mta-search-control .btn2 {
		width: 100%;
	}

	.mta-search-item-head {
		align-items: stretch;
		flex-direction: column;
	}

	.mta-select-mute {
		width: 100%;
	}

	.mta-selected-card {
		margin-left: 10px;
		margin-right: 10px;
	}

	.mta-selected-details,
	.mta-search-details {
		grid-template-columns: minmax(0, 1fr);
	}

	.mta-submit-row {
		align-items: stretch;
		flex-direction: column;
		margin-left: 10px;
		margin-right: 10px;
	}

	#mta-form-result {
		text-align: left;
	}

	.mta-submit-row .btn2 {
		width: 100%;
	}

	.mta-appeal-overview {
		align-items: stretch;
		flex-direction: column;
		gap: 9px;
	}

	.mta-appeal-decision {
		align-items: flex-start;
		border-top: 1px solid rgba(92, 119, 138, .2);
		padding-left: 0;
		padding-top: 8px;
	}

	.mta-appeal-decision small {
		white-space: normal;
	}

	.mta-action-panel {
		align-items: stretch;
		flex-direction: column;
		gap: 8px;
	}

	.mta-action-copy {
		flex-basis: auto;
	}

	.mta-appeal-actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.mta-appeal-actions .btn,
	.mta-appeal-actions .mta-resolve-primary,
	.mta-appeal-actions .mta-delete-appeal {
		margin-left: 0;
		width: 100%;
	}

	.mta-appeal-content {
		padding: 10px;
	}

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

	.mta-info-grid > .mta-info-item,
	.mta-info-grid > .mta-info-item:nth-last-child(-n+2) {
		border-bottom: 1px solid #ddd;
		border-right: 0;
	}

	.mta-info-grid > .mta-info-item:last-child {
		border-bottom: 0;
	}

	.mta-info-wide {
		grid-column: auto;
	}

	.mta-evidence-section {
		margin: 0 10px 10px;
	}

	.mta-comments-block {
		margin: 0 10px 10px;
	}

	.mta-evidence-item + .mta-evidence-item {
		border-left: 0;
		border-top: 1px solid #e0e7ec;
	}

	.mta-list-count {
		font-size: 10px;
		gap: 4px;
		line-height: 20px;
		margin-right: 5px;
		padding-left: 6px;
	}

	.mta-list-count strong {
		font-size: 10px;
		line-height: 15px;
		min-width: 17px;
	}

	.mta-status-filters {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow: visible;
	}

	.mta-status-filter {
		justify-content: center;
		padding-left: 6px;
		padding-right: 6px;
	}

	.mta-toolbar {
		grid-template-areas:
			"statuses"
			"server"
			"action";
		grid-template-columns: minmax(0, 1fr);
	}

	.mta-toolbar-action,
	.mta-add-button {
		width: 100%;
	}

	.mta-open-text {
		display: inline;
	}

	.mta-open-appeal {
		min-width: 78px;
		padding-left: 8px;
		padding-right: 8px;
	}

	.mta-server-name {
		max-width: 100%;
	}

	.mta-appeal-date {
		align-items: flex-end !important;
		flex-direction: column;
		line-height: 13px;
	}

	#mta-comment-form {
		padding: 10px;
	}

	#mta-comments {
		padding: 8px 10px 10px;
	}

	#mta-comments .chat_message {
		padding: 9px !important;
	}

	#mta-comments .chat_message .message {
		margin-left: 8px;
	}
}

@media (max-width: 420px) {
	.mta-appeals-table > tbody > .mta-appeal-row {
		gap: 7px;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		margin-left: 2px;
		margin-right: 2px;
		padding: 8px;
	}

	.mta-appeal-title {
		max-width: 100%;
	}
}
