/* ========================================
   NAV BUTTONS
   ======================================== */

.nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	background: transparent;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.nav-btn:hover {
	background: var(--bg-elevated);
	border-color: var(--text-muted);
}

.nav-btn-primary {
	background: var(--text-primary);
	color: var(--bg-primary);
	border-color: var(--text-primary);
}

.nav-btn-primary:hover {
	background: var(--text-secondary);
	border-color: var(--text-secondary);
}

.nav-btn-danger {
	border-color: var(--accent-danger);
	color: var(--accent-danger);
	background: rgba(255, 71, 87, 0.1);
}

.nav-btn-danger:hover {
	background: var(--accent-danger);
	color: var(--text-primary);
	border-color: var(--accent-danger);
}

[data-theme="light"] .nav-btn-danger:hover {
	color: white;
}

.nav-btn-accent {
	border-color: var(--accent-primary);
	color: var(--accent-primary);
	background: rgba(0, 255, 136, 0.1);
}

.nav-btn-accent:hover {
	background: var(--accent-primary);
	color: var(--bg-primary);
}

.nav-btn-accent.active {
	background: var(--accent-primary);
	color: var(--bg-primary);
	box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.3);
}

[data-theme="light"] .nav-btn-accent {
	border-color: #059669;
	color: #059669;
	background: rgba(16, 185, 129, 0.1);
}

[data-theme="light"] .nav-btn-accent:hover {
	background: #059669;
	color: white;
}

[data-theme="light"] .nav-btn-accent.active {
	background: #059669;
	color: white;
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

/* Warning button (yellow - for reload) */
.nav-btn-warning {
	border-color: #fbbf24;
	color: #fbbf24;
	background: rgba(251, 191, 36, 0.1);
}

.nav-btn-warning:hover {
	background: #fbbf24;
	color: var(--bg-primary);
}

[data-theme="light"] .nav-btn-warning {
	border-color: #d97706;
	color: #d97706;
	background: rgba(217, 119, 6, 0.1);
}

[data-theme="light"] .nav-btn-warning:hover {
	background: #d97706;
	color: white;
}

/* Info button (light blue - for user account) */
.nav-btn-info {
	border-color: var(--accent-secondary);
	color: var(--accent-secondary);
	background: rgba(0, 212, 255, 0.1);
}

.nav-btn-info:hover {
	background: var(--accent-secondary);
	color: var(--bg-primary);
}

[data-theme="light"] .nav-btn-info {
	border-color: #0284c7;
	color: #0284c7;
	background: rgba(2, 132, 199, 0.1);
}

[data-theme="light"] .nav-btn-info:hover {
	background: #0284c7;
	color: white;
}

/* Links button (purple) */
.nav-btn-links {
	border-color: #db2777;
	color: #db2777;
	background: rgba(219, 39, 119, 0.12);
}

.nav-btn-links:hover {
	background: #db2777;
	border-color: #db2777;
	color: white;
}

[data-theme="light"] .nav-btn-links {
	border-color: #be185d;
	color: #be185d;
	background: rgba(190, 24, 93, 0.12);
}

[data-theme="light"] .nav-btn-links:hover {
	background: #be185d;
	border-color: #be185d;
	color: white;
}

/* Theme toggle button (dark blue) */
.nav-btn-theme {
	border-color: #f59e0b;
	color: #f59e0b;
	background: rgba(245, 158, 11, 0.14);
}

.nav-btn-theme:hover {
	background: #f59e0b;
	border-color: #f59e0b;
	color: #111827;
}

[data-theme="light"] .nav-btn-theme {
	border-color: #312e81;
	color: #312e81;
	background: rgba(49, 46, 129, 0.12);
}

[data-theme="light"] .nav-btn-theme:hover {
	background: #312e81;
	border-color: #312e81;
	color: white;
}

/* ========================================
   GENERAL BUTTONS
   ======================================== */

.btn {
	font-weight: 500;
	border-radius: var(--radius-md) !important;
	padding: 0.6rem 1.25rem;
	transition: all var(--transition-fast);
	border: 1px solid transparent;
}

.btn-success {
	background: var(--accent-primary) !important;
	color: var(--bg-primary) !important;
	border-color: var(--accent-primary) !important;
}

.btn-success:hover {
	background: #00cc6e !important;
	border-color: #00cc6e !important;
}

.btn-primary {
	background: var(--text-primary) !important;
	color: var(--bg-primary) !important;
	border-color: var(--text-primary) !important;
}

.btn-primary:hover {
	background: var(--text-secondary) !important;
	border-color: var(--text-secondary) !important;
}

.btn-danger {
	background: var(--accent-danger) !important;
	border-color: var(--accent-danger) !important;
}

.btn-danger:hover {
	background: #e8414f !important;
	border-color: #e8414f !important;
}

.btn-warning {
	background: var(--accent-warning) !important;
	color: var(--bg-primary) !important;
	border-color: var(--accent-warning) !important;
}

.btn-warning:hover {
	background: #e69900 !important;
	border-color: #e69900 !important;
}

.btn-outline-secondary {
	background: transparent !important;
	color: var(--text-secondary) !important;
	border-color: var(--border-light) !important;
}

.btn-outline-secondary:hover {
	background: var(--bg-elevated) !important;
	color: var(--text-primary) !important;
}

.btn-outline-primary {
	background: transparent !important;
	color: var(--accent-secondary) !important;
	border-color: var(--accent-secondary) !important;
}

.btn-outline-primary:hover {
	background: var(--accent-secondary) !important;
	color: var(--bg-primary) !important;
}

.btn-sm {
	padding: 0.4rem 0.8rem !important;
	font-size: 0.8rem !important;
}

/* ========================================
   JOIN BLOCK BUTTON
   ======================================== */

.btn-join-block {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	border: 2px solid rgba(0, 255, 136, 1);
	background: linear-gradient(
		135deg,
		rgba(0, 255, 136, 0.2),
		rgba(0, 212, 255, 0.1)
	);
	color: var(--accent-primary);
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	overflow: visible;
	animation: btn-join-pulse 1.5s ease-in-out infinite;
	box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.btn-join-block i {
	font-size: 1rem;
}

/* Admin modal small square add button (plus) */
.admin-add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	background: transparent;
	color: var(--text-primary);
	font-size: 1.1rem;
	cursor: pointer;
	margin-left: 0.5rem;
}
.admin-add-btn:hover {
	background: var(--bg-elevated);
	border-color: var(--border-secondary);
}

.btn-join-block:hover {
	background: linear-gradient(
		135deg,
		rgba(0, 255, 136, 0.35),
		rgba(0, 212, 255, 0.2)
	);
	transform: scale(1.05);
	box-shadow: 0 0 25px rgba(0, 255, 136, 0.5);
}

@keyframes btn-join-pulse {
	0%,
	100% {
		box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
	}
	50% {
		box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
	}
}

[data-theme="light"] .btn-join-block {
	border-color: rgba(16, 185, 129, 1);
	background: linear-gradient(
		135deg,
		rgba(16, 185, 129, 0.2),
		rgba(2, 132, 199, 0.1)
	);
	color: #059669;
	box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

[data-theme="light"] .btn-join-block:hover {
	background: linear-gradient(
		135deg,
		rgba(16, 185, 129, 0.35),
		rgba(2, 132, 199, 0.2)
	);
	box-shadow: 0 0 25px rgba(16, 185, 129, 0.5);
}

/* ========================================
   JOIN BLOCK WRAPPER (Button + Overlap Stamp)
   ======================================== */

.join-block-wrapper {
	position: relative;
	display: inline-flex;
	width: auto;
	min-width: 0;
	align-items: flex-start;
}

/* Overlap stamp - positioned as corner badge */
.overlap-stamp {
	position: absolute;
	top: -6px;
	right: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: #ef4444;
	border: 2px solid var(--bg-card, #1a1a2e);
	border-radius: 50%;
	color: white;
	font-size: 0.6rem;
	box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
	animation: overlap-stamp-pulse 1.5s ease-in-out infinite;
	z-index: 1;
	pointer-events: none;
}

.overlap-stamp i {
	font-size: 0.55rem;
}

/* Animate stamp on wrapper hover */
.join-block-wrapper:hover .overlap-stamp {
	animation: none;
	transform: scale(1.15);
}

@keyframes overlap-stamp-pulse {
	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
	}
	50% {
		transform: scale(1.1);
		box-shadow: 0 2px 10px rgba(239, 68, 68, 0.7);
	}
}

/* Subtle border change when has overlap */
.btn-join-block.has-overlap {
	border-color: rgba(239, 68, 68, 0.6);
	box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

[data-theme="light"] .overlap-stamp {
	background: #dc2626;
	border-color: var(--bg-card, #ffffff);
}

/* Dynamic tooltip (positioned via JS) */
.overlap-tooltip {
	position: fixed;
	padding: 0.5rem 0.75rem;
	background: #ef4444;
	color: white;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
	pointer-events: none;
	z-index: 9999;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.overlap-tooltip.visible {
	opacity: 1;
}

.overlap-tooltip::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-bottom-color: #ef4444;
}

/* ========================================
   SIGNED BLOCK GROUP (Badge + Unassign)
   ======================================== */

.signed-block-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.signed-badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: linear-gradient(135deg, #22c55e, #16a34a);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
	animation: signed-badge-pulse 2s ease-in-out infinite;
}

.signed-badge i {
	font-size: 1rem;
}

@keyframes signed-badge-pulse {
	0%,
	100% {
		box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
	}
	50% {
		box-shadow: 0 2px 16px rgba(34, 197, 94, 0.6);
	}
}

.btn-unassign-small {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: rgba(239, 68, 68, 0.15);
	color: #ef4444;
	border: 1px solid rgba(239, 68, 68, 0.3);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn-unassign-small i {
	font-size: 0.85rem;
}

.btn-unassign-small:hover {
	background: #ef4444;
	color: white;
	border-color: #ef4444;
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

/* ========================================
   ADMIN BUTTONS
   ======================================== */

.admin-actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.admin-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.25rem;
	border: none;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.admin-btn i {
	font-size: 1rem;
}

.admin-btn-primary {
	background: var(--accent-primary);
	color: var(--bg-primary);
	border: 1px solid var(--accent-primary);
}

.admin-btn-primary:hover {
	background: #00cc6e !important;
	border-color: #00cc6e !important;
	color: var(--bg-primary) !important;
	transform: translateY(-1px);
}

.admin-btn-secondary {
	background: var(--bg-tertiary);
	color: var(--text-primary);
	border: 1px solid var(--border-primary);
}

.admin-btn-secondary:hover {
	background: var(--bg-elevated);
}

@media (max-width: 480px) {
	.overlap-stamp {
		top: -2px;
		right: -2px;
		width: 16px;
		height: 16px;
	}
	.join-block-wrapper {
		gap: 0;
	}
}