/* ==========================================================================
   File Explorer Integration
   ========================================================================== */

.custom-icon {
	display: inline-flex;
}

.custom-icon__absolute-right {
	position: absolute;
	right: 0;
}

.note-status-colored-block {
	position: relative;
	border-radius: var(--radius-s);
	z-index: 0;
}

.note-status-colored-block::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: var(--note-status-block-color, transparent);
	opacity: 0.18;
	pointer-events: none;
	z-index: -1;
	transition:
		background-color var(--anim-duration-fast) ease,
		opacity var(--anim-duration-fast) ease;
}

.note-status-border-left {
	position: relative;
}

.note-status-border-left::after {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 3px;
	border-radius: var(--radius-s);
	background-color: var(--note-status-border-color, transparent);
	opacity: 0.35;
	pointer-events: none;
}

.note-status-underline {
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--note-status-underline-color, currentColor);
	text-underline-offset: 3px;
}

.note-status-dot-badge {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin-left: var(--size-2-1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 1px var(--background-modifier-border);
	flex-shrink: 0;
}

.status-wrapper {
	position: relative;
	display: inline-block;
}

.status-minimal {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-left: var(--size-2-2);
	padding: 2px;
	border-radius: var(--radius-s);
	cursor: pointer;
	opacity: 0.7;
	transition: all var(--anim-duration-fast) ease;
}

.status-minimal:hover {
	opacity: 1;
	background: var(--background-modifier-hover);
	transform: scale(1.05);
}

.status-minimal--compact {
	margin-left: 0;
	padding: 0;
	background: transparent;
	gap: var(--size-2-1);
}

.status-minimal--compact .status-minimal__icon {
	font-size: var(--font-ui-medium);
}

/* Use data attribute for dynamic colors */
.status-minimal[data-status-color] .status-minimal__count {
	background: var(--interactive-accent);
}

.status-minimal__icon {
	font-size: 11px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	filter: grayscale(0.2);
	transition: filter var(--anim-duration-fast) ease;
}

.status-minimal:hover .status-minimal__icon {
	filter: grayscale(0);
}

.status-minimal__count {
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	font-size: var(--font-ui-smaller);
	font-weight: var(--font-semibold);
	border-radius: var(--radius-m);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Status Info Popup */
.status-info-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: var(--layer-popover);
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-l);
	min-width: 280px;
	max-width: 400px;
	overflow: hidden;
	pointer-events: none;
}

.status-popup-header {
	display: flex;
	align-items: center;
	gap: var(--size-2-2);
	padding: var(--size-4-2) var(--size-4-3);
	background: var(--background-secondary);
	border-bottom: 1px solid var(--background-modifier-border);
	font-weight: var(--font-semibold);
	font-size: var(--font-ui-small);
}

.status-popup-content {
	padding: var(--size-4-2);
}

.status-popup-empty {
	padding: var(--size-4-4);
	text-align: center;
	color: var(--text-muted);
	font-style: italic;
}
.status-tag-grid {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-2);
}
.status-tag-card {
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	padding: var(--size-4-2);
	background: var(--background-primary-alt);
	box-shadow: var(--shadow-xs);
}
.status-tag-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--size-2-2);
}
.status-tag-card__title {
	display: flex;
	flex-direction: column;
	gap: var(--size-2-1);
}
.status-tag-card__label {
	font-weight: var(--font-semibold);
	text-transform: none;
}
.status-tag-card__badge {
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
	background: var(--background-modifier-border);
	padding: 2px 6px;
	border-radius: var(--radius-s);
	width: fit-content;
}
.status-tag-card__count {
	font-size: var(--font-ui-small);
	color: var(--text-muted);
	background: var(--background-modifier-border);
	padding: 2px 10px;
	border-radius: var(--radius-s);
	font-weight: var(--font-medium);
}
.status-tag-card__statuses {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size-2-2);
}

/* Status Groups in Popup */
.status-group {
	margin-bottom: var(--size-4-2);
}

.status-group:last-child {
	margin-bottom: 0;
}

.status-group__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--size-2-2) var(--size-2-3);
	background: var(--background-secondary-alt);
	border-radius: var(--radius-s);
	margin-bottom: var(--size-2-2);
	border: 1px solid var(--background-modifier-border);
	transition: background var(--anim-duration-fast) ease;
}

.status-group__header:hover {
	background: var(--background-modifier-hover);
}

.status-group__name {
	text-transform: capitalize;
	font-weight: var(--font-medium);
	font-size: var(--font-ui-smaller);
	color: var(--text-normal);
}

.status-group__count {
	display: inline-flex;
	align-items: center;
	padding: var(--size-2-1) var(--size-2-2);
	background: var(--background-modifier-border);
	border-radius: var(--radius-s);
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
	font-weight: var(--font-medium);
	min-width: 20px;
	justify-content: center;
}

.status-group__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: var(--size-2-2);
	padding: 0 var(--size-2-1);
}

.status-item {
	display: flex;
	flex-direction: column;
	gap: var(--size-2-1);
	padding: var(--size-2-2);
	background: var(--background-primary-alt);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s);
}

.status-description {
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
	line-height: 1.4;
}