/* =========== © 2026 Centroarts - https://m1r.ru =========== */

/* M1R USERPAGE */
.userpage-head {
	--userpage-pad: 32px;
	--g-sect: 24px;

	text-align: center; padding: 0; margin-top: 0;
	position: relative; z-index: 1;
	padding: var(--userpage-pad);
}
.userpage-head, .userpage-data-block, .userpage-nocoms {
	box-shadow: inset 0 0 0 1px var(--c-border);
	border-radius: var(--rd-box);
}
.userpage-head > .btn-icon { position: absolute; left: 20px; top: 20px; }

@media (max-width: 767px) {
	.page-userinfo { margin-top: 0px; }
	.userpage-head > .btn-icon { margin-left: 0; }
}

.userpage-photo {
	--userpage-photo: 128px;
	position: relative; z-index: 1;
	max-width: calc(var(--userpage-photo) + 24px);
	margin: 0 auto; margin-bottom: 16px;
	padding: 12px;
}
.userpage-photo .avatar { --avatar-size: var(--userpage-photo); }
.userpage-photo .avatar::after { display: none; }
.userpage-photo::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background-image: var(--gradient); padding: 3px; 
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude; 
}

.userpage-head .btn-group { flex-direction: column; max-width: 400px; margin-left: auto; margin-right: auto; }
.userpage-name { margin-top: 16px; margin-bottom: var(--g-sect); }
.userpage-status { font-size: var(--fs-3); text-transform: uppercase; margin-bottom: var(--g-sect); }
.userpage-name .title { margin-bottom: 0; }
.userpage-login { font-size: var(--fs-1); color: var(--c-text-mute); }
.userpage-text { margin-bottom: var(--g-sect); }

.userpage-data { display: flex; gap: var(--g-gap); margin-top: var(--g-gap); }
.userpage-data-block > .im {
	--i-size: 32px;
	display: block;
	max-width: var(--i-size);
	margin: 8px auto;
	margin-top: 0;
}
.userpage-data-block { flex: 1; padding: 32px 16px; text-align: center; }
.userpage-data-label { display: block; font-size: var(--fs-2); }
.userpage-data-cont { display: block; }

.userpage-nocoms { margin-top: var(--g-gap); display: flex; padding: 16px; gap: 8px; }

/* Modal UserEdit */
.userinfo-modal { --modal-w: 560px; }

/* Table */
.table-block { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--c-border); }
.table_wide { 
  overflow-y: hidden; overflow-x: auto; width: 100%; padding: .5rem 0; margin: -.5rem 0; word-break: break-all;
  -webkit-overflow-scrolling: touch;
}

.table_wide > table { min-width: 800px; table-layout: fixed; }
.table_wide table.pm { min-width: 600px; }

/* M1R STATS */
.stats-list { list-style: none; padding: 0; margin: 0; }
.stats-list > li { padding: 12px 0; border-top: 1px solid var(--c-border); }

.stats-big { 
	--statbox-pad: 24px;
    --statbox-pad-inv: -24px;
    --statbox-bg: var(--c-body-tone);
    --statbox-bg-t: var(--c-body-tone-t);
    --statbox-text-maxrow: 4;
    --statbox-gap: 20px;
    --statbox-img-w: 196px;
    padding: var(--statbox-pad);
    border-radius: var(--rd-box); background-color: var(--statbox-bg);
    position: relative; z-index: 1;
	text-align: center;
}
.stats-big .tab-panel:not(.active) { display: none; }
.stats-big .tab-panel.active { display: grid; }
.stats-big .tab-panel { gap: 12px; grid-template-columns: repeat(3, 1fr); }
.stats-big-item { font-size: var(--fs-3); font-weight: bold; }
.stats-big-item .title { display: block; margin: 0 0 .5rem 0; font-size: calc(2rem + 1vw); line-height: 1; }
.stats-big > .muted { font-size: var(--fs-3); margin-top: 12px; }

@media (min-width: 576px) {
	.stats_big { border-radius: var(--block-rd); }
	.stats_big_item { font-size: var(--fs-2); }
}

.stats-tabs { display: flex; gap: 4px; justify-content: center; font-size: var(--fs-2); margin-bottom: var(--statbox-pad); }
.tab-btn {
	--btn-pad-x: 16px;
    --btn-pad-y: 12px;
	--btn-h: 40px;
	opacity: .7;
}
.tab-btn.active { --btn-c-bg: hsl(var(--c-primary)); color: hsl(var(--c-text-white)) !important; opacity: 1; }

/* --- Tables --- */
.table-box {
	overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 0;
	border: 1px solid var(--c-border); border-radius: var(--rd-box); font-size: var(--fs-3);
}
.table-box table { margin: 0 !important; }

table.table { width: 100%; margin: 0; }
table.table td { padding: 8px 12px; }
table.table td { vertical-align: top; border-bottom: 1px solid var(--c-border); }
table.table thead td { vertical-align: bottom; font-size: var(--fs-3); color: var(--c-text-mute); }
table.table tbody tr:last-child > * { border-bottom-width: 0; }