/* ========================================================================== */
/* Navigation Admin */
/* ========================================================================== */

.admin-nav-icon svg {
	display: block;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	flex-shrink: 0;
	fill: currentColor;
	color: currentColor
}

.admin-left-nav {
	margin: 0 8px 8px 18px;
	border-left: 1px solid var(--border);
	padding: 5px 0 5px 7px
}

.admin-nav-item {
	width: 100%;
	border: 1px solid transparent;
	background: none;
	color: var(--muted);
	border-radius: 7px;
	display: flex;
	align-items: center;
	gap: 8px;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	padding: 7px 8px;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 4px
}

.admin-nav-item:hover {
	background: var(--bg3);
	color: var(--text);
	border-color: var(--border2)
}

.admin-nav-item.active {
	background: #2a2a50;
	color: var(--accent);
	border-color: #6f6fa0
}

.admin-nav-icon {
	width: 18px;
	text-align: center;
	flex: 0 0 18px
}

.admin-nav-label {
	overflow: hidden;
	text-overflow: ellipsis
}

.admin-nav-icon svg[fill] { fill: currentColor }

/* ========================================================================== */
/* Shared Components Admin */
/* ========================================================================== */

.table-user-name {
	font-weight: 900;
	color: #d8d4ff;
	overflow-wrap: anywhere;
	transition: color .12s ease, filter .12s ease
}

.table-user-sub {
	font-size: 11px;
	color: var(--muted);
	margin-top: 2px
}

.table-status-cell {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	align-items: center
}

.table-actions-cell { text-align: right }

/* ========================================================================== */
/* Forms And Controls Admin */
/* ========================================================================== */

#page-admin input,
#page-admin select,
#page-admin textarea {
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	padding: 7px 10px;
	font-size: 13px
}

#page-admin input:focus,
#page-admin select:focus,
#page-admin textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px rgba(170, 157, 255, .16)
}

/* ========================================================================== */
/* Blooks And Packs Admin */
/* ========================================================================== */

.blooks-filter-bar {
	grid-column: 1/-1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 8px;
	align-items: center;
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 10px
}

.blooks-filter-summary {
	grid-column: 1/-1;
	color: var(--muted);
	font-size: 12px;
	margin: 0 0 8px
}

.blooks-table-wrap {
	grid-column: 1/-1;
	overflow: auto
}

.blooks-table { min-width: 720px }

.blooks-preview-cell .blook-vis, .blooks-preview-cell .blook-emoji { margin: 0 }

.blook-edit-modal {
	max-width: 760px;
	text-align: left
}

.blook-edit-modal h2, .blook-edit-modal p { text-align: left }

.blook-edit-layout {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	margin: 14px 0
}

.blook-edit-preview {
	background: #151528;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 14px;
	text-align: center;
	min-height: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center
}

.blook-edit-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px
}

#pack-edit-list {
	display: flex;
	flex-direction: column;
	gap: 12px
}

.pack-edit-card {
	position: relative;
	background: linear-gradient(180deg, rgba(26, 26, 46, .98), rgba(18, 18, 31, .98));
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 10px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03)
}

.pack-edit-card:hover { border-color: var(--border2) }

.pack-edit-top {
	display: grid;
	grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(90px, 130px) auto;
	gap: 8px;
	align-items: center;
	margin-bottom: 12px
}

.pack-edit-top .field-inp,
.pack-edit-top input,
.pack-edit-top select {
	width: 100%;
	min-width: 0
}

.rarity-pool-label {
	font-size: 12px;
	color: var(--muted);
	margin: 10px 0 6px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em
}

.rarity-pool-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px
}

.rarity-pool-option {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--muted);
	background: rgba(26, 26, 46, .75);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 5px 8px;
	cursor: pointer
}

.rarity-pool-option:hover {
	color: var(--text);
	border-color: var(--border2)
}

#event-admin-card.hidden { display: none !important }

/* ========================================================================== */
/* Badge Images */
/* ========================================================================== */

.achievement-icon-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block
}

.achievement-icon.locked .achievement-icon-img {
	opacity: .35;
	filter: grayscale(1)
}

.badge-image-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px
}

.badge-image-upload-label {
	font-size: 11px;
	color: var(--muted);
	cursor: pointer;
	text-decoration: underline;
	white-space: nowrap
}

.badge-image-upload-label:hover { color: var(--text) }

.badge-image-upload-label input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none
}

.badge-image-remove {
	font-size: 11px;
	color: #ff8080;
	cursor: pointer;
	background: none;
	border: none;
	text-decoration: underline;
	padding: 0
}

/* ========================================================================== */
/* Admin */
/* ========================================================================== */

.admin-badge {
	background: #3a2a00;
	border: 1px solid #7a5a00;
	border-radius: 6px;
	padding: 2px 8px;
	font-size: 11px;
	color: #f0a030;
	font-weight: 800
}

.admin-users-table-wrap,
.blooks-table-wrap {
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: auto;
	width: 100%
}

.admin-users-table,
.blooks-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 720px;
	font-size: 13px
}

.admin-users-table th,
.blooks-table th {
	background: #151528;
	color: #aaa6d8;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-align: left;
	padding: 10px;
	border-bottom: 1px solid var(--border)
}

.admin-users-table td,
.blooks-table td {
	padding: 10px;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
	color: #c8c8e8
}

.admin-users-table tbody tr:hover, .blooks-table tbody tr:hover { background: #17172a }

.admin-users-table tbody tr:last-child td { border-bottom: none }

.user-pill {
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 2px 7px;
	font-size: 10px;
	font-weight: 900;
	line-height: 1.4;
	display: inline-flex
}

.user-pill-enabled {
	background: #102a18;
	color: #80d080;
	border-color: #2a5a2a
}

.user-pill-pending {
	background: #3a2a00;
	color: #f0b070;
	border-color: #7a5a00
}

.user-pill-admin {
	background: #241a3f;
	color: #c8b8ff;
	border-color: #5a4a80
}

.user-edit-modal {
	max-width: 720px;
	text-align: left
}

.user-edit-modal h2, .user-edit-modal p { text-align: left }

.user-edit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin: 14px 0
}

.user-edit-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	color: #aaa6d8;
	font-weight: 900
}

.user-edit-section {
	background: #151528;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.user-control-title {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #aaa6d8;
	font-weight: 900
}

.user-edit-actions {
	justify-content: flex-end;
	margin-top: 12px
}

.admin-create-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 8px;
	align-items: center;
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 10px
}

.admin-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
	flex-wrap: wrap
}

.admin-user-count {
	font-size: 13px;
	color: var(--muted)
}

#page-admin .admin-layout {
	display: block;
	width: 100%
}

#page-admin .admin-content {
	min-width: 0;
	width: 100%
}

#page-admin #adm-blooks, #page-admin #adm-packs, #page-admin #adm-rarity, #page-admin #adm-users { width: 100% }

#adm-rarity {
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 14px
}

.admin-section-title {
	font-size: 14px;
	font-weight: 800;
	color: #c0c0e0;
	margin-bottom: 12px
}

.rarity-pct-row {
	display: grid;
	grid-template-columns: minmax(110px, 160px) minmax(90px, 130px) auto;
	gap: 10px;
	align-items: center;
	margin-bottom: 8px;
	background: rgba(26, 26, 46, .72);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 9px 10px
}

.rarity-pct-row label {
	min-width: 0;
	font-size: 13px;
	color: var(--text);
	font-weight: 800
}

.rarity-pct-row input {
	width: 100%;
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	padding: 7px 9px;
	font-size: 13px;
	text-align: right
}

.rarity-pct-row .rb,
.rarity-editor-badge {
	min-width: 96px;
	text-align: center;
	margin: 0
}

.pct-suffix {
	font-size: 12px;
	color: var(--muted);
	font-weight: 700
}

.check-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--muted)
}

.check-row-create { padding: 9px 0 }

.check-row-control { padding: 8px 0 }

/* ========================================================================== */
/* Theme */
/* ========================================================================== */

body.theme-light .admin-users-table th,
body.theme-light .blooks-table th {
	background: #eef0ff;
	color: #5d6385
}

body.theme-light .admin-users-table td,
body.theme-light .blooks-table td { color: #22253c }

body.theme-light .user-edit-section,
body.theme-light .blook-edit-preview,
body.theme-light #adm-rarity { background: #f7f8ff }

/* ========================================================================== */
/* Responsive */
/* ========================================================================== */

@media(max-width:720px) {
	.blooks-filter-bar { grid-template-columns: 1fr }

	.blooks-filter-bar .btn { width: 100% }

	.pack-edit-top, .rarity-pct-row { grid-template-columns: 1fr }

	#page-admin .btn-row .btn, .pack-edit-top .btn { width: 100% }
}

@media(max-width:620px) {
	.admin-users-table { min-width: 620px }

	.user-edit-actions .btn { width: 100% }

	.blooks-table { min-width: 650px }

	.blook-edit-layout { grid-template-columns: 1fr }

	.blook-edit-preview { min-height: 120px }
}

@media(max-width:600px) {
	.admin-nav-label { display: none }

	.admin-left-nav {
		margin: 0 5px 8px 5px;
		padding-left: 0;
		border-left: none
	}

	.admin-nav-item {
		justify-content: center;
		padding-left: 0;
		padding-right: 0
	}
}