/* Permission Level Styles */

/* Permission level badges */
.permission-badge {
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.25rem 0.5rem;
	border-radius: 0.375rem;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	white-space: nowrap;
}

.permission-badge.viewer {
	background-color: var(--spectrumx-viewer-bg);
	color: var(--spectrumx-viewer-color);
	border: 1px solid var(--spectrumx-viewer-border);
}

.permission-badge.contributor {
	background-color: var(--spectrumx-contributor-bg);
	color: var(--spectrumx-contributor-color);
	border: 1px solid var(--spectrumx-contributor-border);
}

.permission-badge.co-owner {
	background-color: var(--spectrumx-co-owner-bg);
	color: var(--spectrumx-co-owner-color);
	border: 1px solid var(--spectrumx-co-owner-border);
}

.permission-badge.owner {
	background-color: var(--spectrumx-owner-bg);
	color: var(--spectrumx-owner-color);
	border: 1px solid var(--spectrumx-owner-border);
}

.bg-owner {
	background-color: var(--spectrumx-owner-color);
	color: white;
	border: 1px solid var(--spectrumx-owner-border);
}

/* Permission level selection form */
.permission-level-section {
	background-color: var(bs-gray-100);
	border: 1px solid var(--bs-gray-300);
	border-radius: 0.5rem;
	padding: 1rem;
}

.permission-level-section .form-label {
	color: var(--bs-gray-700);
	margin-bottom: 0.5rem;
}

.permission-level-section .form-select {
	border-color: var(--bs-gray-300);
	background-color: var(--bs-white);
}

.permission-level-section .form-select:focus {
	border-color: var(--spectrumx-form-select-focus-color);
	box-shadow: 0 0 0 0.25rem var(--spectrumx-form-select-focus-color);
}

.permission-level-section .form-text {
	margin-top: 0.5rem;
	font-size: 0.875rem;
}

/* Permission level option styling */
.permission-level-section .form-select option {
	padding: 0.5rem;
}

/* Permission level selectors for existing users */
.permission-level-selector {
	font-size: 0.875rem;
	border: 1px solid var(--bs-gray-300);
	border-radius: 0.375rem;
	transition: all 0.2s ease;
}

.permission-level-selector:focus {
	border-color: var(--spectrumx-form-select-focus-color);
	box-shadow: 0 0 0 0.25rem var(--spectrumx-form-select-focus-color);
}

.permission-level-selector.focused {
	border-color: var(--spectrumx-form-select-focus-color);
	background-color: var(--bs-gray-100);
}

.permission-level-selector.updating {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Permission level selector styling */
.permission-level-selector.permission-viewer {
	border-color: var(--spectrumx-viewer-border);
	background-color: var(--spectrumx-viewer-bg);
}

.permission-level-selector.permission-contributor {
	border-color: var(--spectrumx-contributor-border);
	background-color: var(--spectrumx-contributor-bg);
}

.permission-level-selector.permission-co-owner {
	border-color: var(--spectrumx-co-owner-border);
	background-color: var(--spectrumx-co-owner-bg);
}

.permission-level-selector.permission-multiple {
	border-color: var(--spectrumx-co-owner-border);
	background-color: var(--spectrumx-co-owner-bg);
	color: var(--spectrumx-co-owner-color);
}

/* Group permission management */
.group-permission-selector {
	font-weight: 600;
	border-width: 2px;
}

.member-permission-selector {
	font-size: 0.8rem;
	margin-left: 1rem;
}

/* Hover effects for permission badges */
.permission-badge:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px var(--shadow-black-light);
	transition: all 0.2s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.permission-level-section {
		padding: 0.75rem;
	}

	.permission-badge {
		font-size: 0.7rem;
		padding: 0.2rem 0.4rem;
	}
}

/* Animation for permission level changes */
.permission-level-section .form-select {
	transition: all 0.2s ease;
}

.permission-level-section .form-select:focus {
	transform: scale(1.02);
}

/* Tooltip styles for permission level descriptions */
.permission-tooltip {
	position: relative;
	cursor: help;
}

.permission-tooltip:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--bs-gray-700);
	color: white;
	padding: 0.5rem;
	border-radius: 0.25rem;
	font-size: 0.75rem;
	white-space: nowrap;
	z-index: 1000;
	margin-bottom: 0.25rem;
}

.permission-tooltip:hover::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 0.25rem solid transparent;
	border-top-color: var(--bs-gray-700);
	margin-bottom: -0.25rem;
}

/* Dropdown menu styles for permission changes */
.permission-change-btn {
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.permission-change-btn:hover:not(:disabled) {
	background-color: var(--bs-gray-100);
	transform: translateX(2px);
}

.permission-change-btn.active {
	background-color: var(--spectrumx-viewer-bg);
	color: var(--spectrumx-viewer-color);
	font-weight: 500;
}

/* Current permission styling */
.permission-change-btn.current-permission {
	background-color: var(--spectrumx-viewer-bg);
	color: var(--spectrumx-viewer-color);
	font-weight: 500;
	cursor: not-allowed;
	opacity: 0.8;
}

.permission-change-btn.current-permission:hover {
	background-color: var(--spectrumx-viewer-bg);
	transform: none;
}

.permission-change-btn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.permission-change-btn:disabled:hover {
	background-color: transparent;
	transform: none;
}

/* Ensure dropdown header text stays on one line */
.dropdown-item-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bg-owner {
	background-color: var(--spectrumx-owner-color);
	color: white;
}

.bg-contributor {
	background-color: var(--spectrumx-contributor-color);
	color: white;
}

.bg-co-owner {
	background-color: var(--spectrumx-co-owner-color);
	color: white;
}

.bg-viewer {
	background-color: var(--spectrumx-viewer-color);
	color: white;
}

/* Badge animation for permission changes */
.permission-badge {
	transition: all 0.3s ease;
}

.permission-badge.updating {
	opacity: 0.7;
	transform: scale(0.95);
}

/* Enhanced badge styles for the share modal */
.permission-badge.bg-info {
	background-color: var(--spectrumx-viewer-bg) !important;
	color: var(--spectrumx-viewer-color) !important;
	border: 1px solid var(--spectrumx-viewer-border);
}

.permission-badge.bg-warning {
	background-color: var(--spectrumx-co-owner-bg) !important;
	color: var(--spectrumx-co-owner-color) !important;
	border: 1px solid var(--spectrumx-co-owner-border);
}

.permission-badge.bg-success {
	background-color: var(--spectrumx-contributor-bg) !important;
	color: var(--spectrumx-contributor-color) !important;
	border: 1px solid var(--spectrumx-contributor-border);
}

.permission-badge.bg-secondary {
	background-color: var(--bs-gray-100) !important;
	color: var(--bs-gray-600) !important;
	border: 1px solid var(--bs-gray-300);
}

.access-level-dropdown {
	min-width: 120px;
	text-align: left;
	border: 1px solid var(--bs-gray-300);
	background-color: var(--bs-white);
	color: var(--bs-gray-700);
	font-size: 0.875rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem;
	transition: all 0.2s ease;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.access-level-dropdown::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid var(--bs-gray-600);
	margin-left: 0.5rem;
	flex-shrink: 0;
}

/* Permission level color coordination */
.access-level-dropdown[data-current-permission="viewer"] {
	color: var(--spectrumx-viewer-color);
	border-color: var(--spectrumx-viewer-border);
}

.access-level-dropdown[data-current-permission="viewer"]:hover {
	background-color: var(--spectrumx-viewer-bg);
	border-color: var(--spectrumx-viewer-border);
}

.access-level-dropdown[data-current-permission="viewer"]:focus {
	border-color: var(--spectrumx-viewer-border);
	box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.2);
}

.access-level-dropdown[data-current-permission="viewer"]::after {
	border-top-color: var(--spectrumx-viewer-color);
}

.access-level-dropdown[data-current-permission="contributor"] {
	color: var(--spectrumx-contributor-color);
	border-color: var(--spectrumx-contributor-border);
}

.access-level-dropdown[data-current-permission="contributor"]:hover {
	background-color: var(--spectrumx-contributor-bg);
	border-color: var(--spectrumx-contributor-border);
}

.access-level-dropdown[data-current-permission="contributor"]:focus {
	border-color: var(--spectrumx-contributor-border);
	box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
}

.access-level-dropdown[data-current-permission="contributor"]::after {
	border-top-color: var(--spectrumx-contributor-color);
}

.access-level-dropdown[data-current-permission="co-owner"] {
	color: var(--spectrumx-co-owner-color);
	border-color: var(--spectrumx-co-owner-border);
}

.access-level-dropdown[data-current-permission="co-owner"]:hover {
	background-color: var(--spectrumx-co-owner-bg);
	border-color: var(--spectrumx-co-owner-border);
}

.access-level-dropdown[data-current-permission="co-owner"]:focus {
	border-color: var(--spectrumx-co-owner-border);
	box-shadow: 0 0 0 2px var(--spectrumx-co-owner-border);
}

.access-level-dropdown[data-current-permission="co-owner"]::after {
	border-top-color: var(--spectrumx-co-owner-color);
}

.access-level-menu {
	min-width: 180px;
	border: 1px solid var(--bs-gray-300);
	border-radius: 0.5rem;
	box-shadow: 0 2px 10px var(--shadow-black-light);
	padding: 0.5rem 0;
}

.access-level-menu .dropdown-item {
	padding: 0.5rem 1rem;
	color: var(--bs-gray-700);
	font-size: 0.875rem;
	border: none;
	background: none;
	transition: background-color 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* Permission level colors in dropdown menu */
.access-level-menu .permission-change-btn[data-permission-level="viewer"] {
	color: var(--spectrumx-viewer-color);
}

.access-level-menu
	.permission-change-btn[data-permission-level="viewer"]:hover {
	background-color: var(--spectrumx-viewer-bg);
	color: var(--spectrumx-viewer-hover-color);
}

.access-level-menu
	.permission-change-btn[data-permission-level="viewer"].selected {
	background-color: var(--spectrumx-viewer-bg);
	color: var(--spectrumx-viewer-hover-color);
	font-weight: 500;
}
.access-level-menu
	.permission-change-btn[data-permission-level="viewer"].selected
	.bi-check {
	color: var(--spectrumx-viewer-hover-color);
}

.access-level-menu .permission-change-btn[data-permission-level="contributor"] {
	color: var(--spectrumx-contributor-color);
}

.access-level-menu
	.permission-change-btn[data-permission-level="contributor"]:hover {
	background-color: var(--spectrumx-contributor-bg);
	color: var(--spectrumx-contributor-hover-color);
}

.access-level-menu
	.permission-change-btn[data-permission-level="contributor"].selected {
	background-color: var(--spectrumx-contributor-bg);
	color: var(--spectrumx-contributor-hover-color);
	font-weight: 500;
}
.access-level-menu
	.permission-change-btn[data-permission-level="contributor"].selected
	.bi-check {
	color: var(--spectrumx-contributor-hover-color);
}

.access-level-menu .permission-change-btn[data-permission-level="co-owner"] {
	color: var(--spectrumx-co-owner-color);
}

.access-level-menu
	.permission-change-btn[data-permission-level="co-owner"]:hover {
	background-color: var(--spectrumx-co-owner-bg);
	color: var(--spectrumx-co-owner-hover-color);
}

.access-level-menu
	.permission-change-btn[data-permission-level="co-owner"].selected {
	background-color: var(--spectrumx-co-owner-bg);
	color: var(--spectrumx-co-owner-hover-color);
	font-weight: 500;
}
.access-level-menu
	.permission-change-btn[data-permission-level="co-owner"].selected
	.bi-check {
	color: var(--spectrumx-co-owner-hover-color);
}

/* Remove access styling */
.access-level-menu .dropdown-item.text-danger {
	color: var(--spectrumx-remove-color);
}

.access-level-menu .dropdown-item.text-danger:hover {
	background-color: var(--spectrumx-remove-bg);
	color: var(--spectrumx-remove-hover-color);
}

.access-level-menu .dropdown-item.text-danger .bi-person-slash {
	color: var(--spectrumx-remove-color);
}

.access-level-menu .dropdown-item.text-danger:hover .bi-person-slash {
	color: var(--spectrumx-remove-hover-color);
}

/* Remove access dropdown button styling */
.access-level-dropdown[data-current-permission="remove"] {
	color: var(--spectrumx-remove-color);
	border-color: var(--spectrumx-remove-border);
}

.access-level-dropdown[data-current-permission="remove"]:hover {
	background-color: var(--spectrumx-remove-bg);
	border-color: var(--spectrumx-remove-border);
}

.access-level-dropdown[data-current-permission="remove"]:focus {
	border-color: var(--spectrumx-remove-border);
	box-shadow: 0 0 0 2px var(--spectrumx-remove-border);
}

.access-level-dropdown[data-current-permission="remove"]::after {
	border-top-color: var(--spectrumx-remove-color);
}

.access-level-menu .dropdown-divider {
	margin: 0.5rem 0;
	border-color: var(--bs-gray-300);
}