/**
 * База: светлый фон контента, больше воздуха.
 */
html {
	scroll-padding-top: var(--s24-main-pad-top);
	/* Резервируем место под скроллбар — стабильнее ширина layout и меньше сдвиг full-bleed секций (100vw) относительно шапки */
	scrollbar-gutter: stable;
	cursor: default;
}

body {
	font-family: var(--s24-font-family);
	font-size: var(--s24-caption);
	padding-top: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	/* Без этого над обычным текстом часто показывается «коретка»; для выделения курсор остаётся I-beam */
	cursor: default;
}

/* Поля ввода — явно текстовый курсор (наследуется default от body) */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="image"]):not([type="color"]),
textarea,
[contenteditable="true"] {
	cursor: text;
}

input[type="file"] {
	cursor: pointer;
}

/* ═══ Container — замена Bootstrap .container ═══ */
.container {
	width: 940px;
	margin-right: auto;
	margin-left: auto;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.container {
		width: auto;
		padding-left: var(--s24-space-6);
		padding-right: var(--s24-space-6);
	}
}
@media (max-width: 480px) {
	.container {
		padding-left: var(--s24-space-4);
		padding-right: var(--s24-space-4);
	}
}
@media (max-width: 360px) {
	.container {
		padding-left: var(--s24-space-2);
		padding-right: var(--s24-space-2);
	}
}

@media (min-width: 767px) and (max-width: 979px) {
	.container {
		width: auto;
		padding-left: var(--s24-space-4);
		padding-right: var(--s24-space-4);
	}
}

@media (min-width: 1200px) {
	.container {
		width: 1000px;
	}
}

/* ═══ Базовые ресеты (ex-Bootstrap) ═══ */

/* Ссылки */
a {
	color: var(--s24-primary);
	text-decoration: none;
}
a:where(:not(.s24-btn):not(.btn)):hover,
a:where(:not(.s24-btn):not(.btn)):focus {
	color: var(--s24-primary-hover);
}

a:where(:not(.s24-btn):not(.btn)):hover {
	text-decoration: underline;
}

label {
	display: block;
	margin-bottom: 5px;
}

input[type="radio"],
input[type="checkbox"] {
	margin: 4px 0 0;
	line-height: normal;
	width: auto;
	cursor: pointer;
}

img {
	max-width: 100%;
	height: auto;
}

/* ═══ Grid — 12-column float (ex-Bootstrap) ═══ */
.row {
	margin-left: -20px;
}
.row::before,
.row::after {
	display: table;
	line-height: 0;
	content: "";
}
.row::after {
	clear: both;
}

[class*="span"] {
	float: left;
	min-height: 1px;
	margin-left: var(--s24-space-5);
	box-sizing: border-box;
}

.span12 { width: 940px; }
.span9  { width: 700px; }
.span8  { width: 620px; }
.span7  { width: 540px; }
.span6  { width: 460px; }
.span5  { width: 380px; }
.span4  { width: 300px; }
.span3  { width: 220px; }
.span2  { width: 140px; }
.span1  { width: 60px; }

.offset3 { margin-left: 260px; }

[class*="span"].pull-right { float: right; }

@media (min-width: 1200px) {
	.row {
		margin-left: -30px;
	}
	[class*="span"] {
		margin-left: 30px;
	}
	.span12 { width: 1170px; }
	.span11 { width: 1070px; }
	.span10 { width: 970px; }
	.span9  { width: 870px; }
	.span8  { width: 770px; }
	.span7  { width: 700px; }
	.span6  { width: 570px; }
	.span5  { width: 470px; }
	.span4  { width: 370px; }
	.span3  { width: 270px; }
	.span2  { width: 170px; }
	.span1  { width: 70px; }
	.offset3 { margin-left: 330px; }
}

@media (max-width: 767px) {
	.row {
		margin-left: 0;
	}
	[class*="span"] {
		float: none;
		display: block;
		width: 100%;
		margin-left: 0;
	}
	.offset3 {
		margin-left: 0;
	}
}

/* ═══ Sidebar + main layout (flex, replaces span3+span7 float hack) ═══ */
.s24-sidebar-layout {
	display: flex;
	align-items: flex-start;
	column-gap: var(--s24-space-6);
	margin-left: 0;
}
.s24-sidebar-layout::before,
.s24-sidebar-layout::after {
	display: none;
	content: none;
}
.s24-sidebar-layout > [class*="span"] {
	float: none;
	margin-left: 0;
}
.s24-sidebar-layout > .span3 {
	width: 270px;
	flex-shrink: 0;
}
.s24-sidebar-layout > [class*="span"]:not(.span3) {
	flex: 1;
	width: auto;
	min-width: 0;
}
@media (max-width: 767px) {
	.s24-sidebar-layout {
		flex-direction: column;
		align-items: stretch;
		row-gap: var(--s24-space-4);
	}
	.s24-sidebar-layout > .span3 {
		width: 100%;
	}
	.s24-sidebar-layout > [class*="span"]:not(.span3) {
		width: 100%;
	}

	/* На страницах списков (market.list, projects.list) содержимое .span3 —
	   это .prjlistfilter, уезжающий в off-canvas drawer (position: fixed).
	   В этом случае span3 всё равно остаётся flex-item'ом и добавляет
	   row-gap (16px) + возможную высоту условных промо-блоков между h1 и
	   основным контентом (поле поиска + карточки). Поднимаем основной
	   контент на первое место через order, чтобы воздух шёл вниз страницы,
	   а не разрывал заголовок и поиск. :has() ограничивает эффект только
	   теми layout'ами, где .span3 действительно сводится к drawer-фильтру —
	   на users.details / partners.details / profile и т.п. sidebar остаётся
	   сверху. */
	.s24-sidebar-layout:has(> .span3 > .prjlistfilter) > [class*="span"]:not(.span3) {
		order: -1;
	}
}

/* ═══ Utility classes (ex-Bootstrap) ═══ */
.pull-left  { float: left; }
.pull-right { float: right; }
.pointer    { cursor: pointer; }

.clearfix::before,
.clearfix::after {
	display: table;
	line-height: 0;
	content: "";
}
.clearfix::after {
	clear: both;
}

.center  { text-align: center; }
.block   { display: block; }
.hidden  { display: none !important; }

.well {
	background-color: var(--s24-surface);
	border: 1px solid var(--s24-border);
	border-radius: var(--s24-radius-md);
	padding: var(--s24-card-pad-y) var(--s24-card-pad-x);
	margin-bottom: var(--s24-space-5);
}

.span3 > .well {
	padding: var(--s24-space-4);
}

/* ═══ Alerts (was in bootstrap.css) ═══ */

.alert {
	padding: var(--s24-space-3) var(--s24-space-4);
	margin-bottom: var(--s24-space-5);
	border: 1px solid hsl(205 40% 82%);
	border-radius: var(--s24-radius-sm);
	background-color: hsl(205 50% 95%);
	color: hsl(205 40% 32%);
	font-size: var(--s24-caption);
	line-height: 1.5;
	font-weight: 500;
}

.alert-warning {
	background-color: var(--s24-warning);
	border-color: hsl(43 70% 72%);
	color: hsl(33 69% 30%);
}

.alert-success {
	background-color: hsl(120 40% 93%);
	border-color: hsl(120 30% 78%);
	color: hsl(120 40% 28%);
}

.alert-danger,
.alert-error {
	background-color: hsl(0 70% 95%);
	border-color: hsl(0 50% 82%);
	color: hsl(0 60% 35%);
}

.alert-info {
	background-color: hsl(205 60% 93%);
	border-color: hsl(195 50% 78%);
	color: hsl(205 50% 32%);
}

/* Если .alert — последний элемент в .well, убираем его нижний margin:
   сам .well уже даёт внутренний padding и внешний margin-bottom, а лишний
   отступ снизу у alert создаёт визуально «двойную» пустоту внутри карточки. */
.well > .alert:last-child {
	margin-bottom: 0;
}

/* ═══ Progress bar (was in bootstrap.css) ═══ */

.progress {
	height: 20px;
	margin-bottom: var(--s24-space-5);
	overflow: hidden;
	background-color: var(--s24-surface-alt);
	border-radius: var(--s24-radius-sm);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.progress .bar {
	float: left;
	width: 0;
	height: 100%;
	font-size: 0.75rem;
	color: #fff;
	text-align: center;
	background-color: var(--s24-primary);
	box-sizing: border-box;
	transition: width 0.5s ease;
}

.progress-striped .bar {
	background-image: linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.15) 25%, transparent 25%,
		transparent 50%, rgba(255, 255, 255, 0.15) 50%,
		rgba(255, 255, 255, 0.15) 75%, transparent 75%,
		transparent
	);
	background-size: 40px 40px;
}

.fade {
	opacity: 0;
	transition: opacity 0.15s linear;
}
.fade.in {
	opacity: 1;
}

/* Отступы legacy */
.margin0     { margin: 0; }
.margin10    { margin: 10px; }
.marginbottom10 { margin-bottom: 10px; }
.marginleft10   { margin-left: 10px; }
.padding10   { padding: 10px; }

/* ═══ Table (ex-Bootstrap) ═══ */
.table {
	width: 100%;
	margin-bottom: var(--s24-space-5);
	border-collapse: collapse;
}
.table th,
.table td {
	padding: var(--s24-space-2) var(--s24-space-3);
	line-height: var(--s24-lh-base);
	text-align: left;
	vertical-align: top;
}
.table th {
	font-weight: 600;
}
.table thead th {
	vertical-align: bottom;
	border-bottom: 1px solid var(--s24-border);
}

/* ═══ Legacy .btn bridge — переехал в s24-components.css (секция «Кнопки (s24-btn)»)
   Причина: по `css-architecture.mdc` §«Владение стилями» стили всех кнопок живут
   в `s24-components.css`. Бридж `.btn` / `.btn-*` / `.btn-superlarge` теперь группирован
   рядом с `.s24-btn`, чтобы не расходиться при правках (цель safety-net — выглядеть как `.s24-btn`). */

/* Контент ниже fixed navbar (style.css даёт #main margin-top — заменяем на padding, чтобы фон не «ломался») */
#main.content {
	background: transparent;
	min-height: 40vh;
	padding-bottom: var(--s24-space-section, 80px);
	margin-top: 0;
	padding-top: var(--s24-main-pad-top);
}

/* Телефоны: верхняя шапка скрыта, контент с отступом снизу под фиксированный bottom bar */
@media (max-width: 979px) {
	html {
		scroll-padding-top: max(12px, env(safe-area-inset-top));
	}

	#main.content {
		padding-top: max(20px, env(safe-area-inset-top));
		padding-bottom: calc(var(--s24-space-section, 80px) + var(--s24-bottom-nav-height) + env(safe-area-inset-bottom));
	}
}

/*
 * Kill Bootstrap margin/line-height on headings/paragraphs inside s24-* components.
 * :where() = zero specificity, so any s24-class trivially overrides it.
 */
:where([class*="s24-"]) :is(p, h1, h2, h3, h4) {
	margin: 0;
	padding: 0;
}
:where([class*="s24-"]) :is(h1, h2, h3, h4) {
	line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ═══ Tab content — Bootstrap JS depends on these ═══ */
.tab-content > .tab-pane {
	display: none;
}
.tab-content > .active {
	display: block;
}

/* ═══ Collapse — Bootstrap JS depends on these ═══ */
.collapse {
	position: relative;
	height: 0;
	overflow: hidden;
	transition: height 0.35s ease;
}
.collapse.in {
	height: auto;
}

/* ═══ Modal — Bootstrap JS depends on these ═══ */
.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background-color: #000;
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.fade.in,
.modal-backdrop.in { opacity: 0.5; }

.modal {
	position: fixed;
	top: 10%;
	left: 50%;
	z-index: 1050;
	width: 560px;
	margin-left: -280px;
	background-color: var(--s24-surface);
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: var(--s24-radius-lg);
	outline: none;
	box-shadow: 0 3px 20px rgba(0,0,0,0.25);
	background-clip: padding-box;
	overflow: hidden;
}
.modal.fade {
	top: -25%;
	transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal.fade.in {
	top: 10%;
}
.modal-header {
	padding: var(--s24-space-4) var(--s24-space-5);
	border-bottom: 1px solid var(--s24-border);
}
.modal-header .close {
	margin-top: 2px;
	float: right;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	color: var(--s24-text-muted);
	opacity: 0.6;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.modal-header .close:hover { opacity: 1; }
.modal-header h3 {
	margin: 0;
	line-height: 1.4;
}
.modal-body {
	position: relative;
	max-height: 70vh;
	padding: var(--s24-space-5);
	overflow-y: auto;
}
.modal-footer {
	padding: var(--s24-space-4) var(--s24-space-5);
	background-color: var(--s24-surface-alt);
	border-top: 1px solid var(--s24-border);
	border-radius: 0 0 var(--s24-radius-lg) var(--s24-radius-lg);
	/* Ровные отступы между кнопками вместо legacy .btn + .btn { margin-left: 5px } */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--s24-space-3);
}
.modal-footer .btn + .btn {
	margin-left: 0;
}

@media (max-width: 767px) {
	.modal {
		width: 95%;
		left: 2.5%;
		margin-left: 0;
		box-sizing: border-box;
	}
}

/* ═══ Dropdown — Bootstrap JS depends on these ═══ */
.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	padding: var(--s24-space-2) 0;
	margin: 2px 0 0;
	list-style: none;
	background-color: var(--s24-surface);
	border: 1px solid var(--s24-border);
	border-radius: var(--s24-radius-md);
	box-shadow: var(--s24-shadow-elevated);
	background-clip: padding-box;
}
.open > .dropdown-menu {
	display: block;
}
.dropdown-menu > li > a {
	display: block;
	padding: var(--s24-space-1) var(--s24-space-4);
	color: var(--s24-text);
	white-space: nowrap;
}
.dropdown-menu > li > a:hover {
	background-color: var(--s24-surface-alt);
	color: var(--s24-ink);
}

/* ═══ Pagination ═══ */
.pagination {
	margin: var(--s24-space-5) 0;
	display: flex;
	justify-content: center;
}
.pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: var(--s24-space-1);
}
.pagination ul > li > a,
.pagination ul > li > span {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	line-height: 1;
	font-size: var(--s24-caption);
	font-weight: 500;
	color: var(--s24-text);
	background: var(--s24-surface);
	border-radius: var(--s24-radius-sm);
	text-decoration: none;
	transition: background var(--s24-transition-fast), border-color var(--s24-transition-fast), color var(--s24-transition-fast), box-shadow var(--s24-transition-fast);
}
.pagination ul > li > a:hover,
.pagination ul > .active > a,
.pagination ul > .active > span  {
	background: var(--s24-surface-alt);
	border-color: var(--s24-primary);
	color: var(--s24-primary);
}
.pagination ul > .active > a,
.pagination ul > .active > span {
	font-weight: 600;
	cursor: default;
}
.pagination ul > .disabled > a,
.pagination ul > .disabled > span {
	color: var(--s24-text-muted);
	cursor: default;
	opacity: 0.5;
}

/* ═══ Vodal modal overlay (was in bootstrap.min.css) ═══ */
.themodal-overlay {
	position: fixed;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	z-index: 100000;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.lock {
	overflow: hidden;
}

.popup {
	margin: 25px;
	float: left;
	display: inline-block;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
	background-color: #fff;
	border-radius: var(--s24-radius-md);
}

.popup__body {
	margin: 10px 10px 5px;
}

.noava {
	top: 320px;
}