/* ==========================================================================
   Settings UI Components
   ========================================================================== */

/* Settings use Obsidian's built-in classes mostly */

.note-status-settings__intro {
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	padding: var(--size-4-3);
	margin-bottom: var(--size-4-3);
	display: flex;
	flex-direction: column;
	gap: var(--size-4-2);
}

.note-status-settings__description {
	margin: 0;
	color: var(--text-normal);
	line-height: 1.5;
}

.note-status-settings__support {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-1);
	margin-top: var(--size-4-1);
}

.note-status-settings__support-link {
	display: flex;
	align-items: center;
	gap: var(--size-4-2);
	padding: var(--size-2-3) var(--size-4-3);
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	color: var(--text-normal);
	font-size: var(--font-ui-small);
	cursor: pointer;
	transition: all var(--anim-duration-fast) ease;
	text-align: left;
	width: 100%;
}

.note-status-settings__support-link img {
	display: block;
	border-radius: var(--radius-s);
}

.note-status-settings__support-link:hover {
	background: var(--background-modifier-hover);
	border-color: var(--interactive-accent);
	transform: translateX(4px);
}

.note-status-settings__support-link .status-icon {
	color: var(--interactive-accent);
	flex-shrink: 0;
}

.note-status-settings__support-link-label {
	font-weight: var(--font-medium);
	flex-shrink: 0;
}

.note-status-settings__support-link-url {
	font-family: var(--font-monospace);
	font-size: 0.85em;
	color: var(--text-muted);
	margin-left: auto;
	opacity: 0.7;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.note-status-settings__support-link:hover
	.note-status-settings__support-link-url {
	color: var(--text-accent);
	opacity: 1;
}

.note-status-section {
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	background: var(--background-primary);
	margin-bottom: var(--size-4-3);
	overflow: hidden;
}

.note-status-section__header {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--size-4-1);
	padding: var(--size-4-2) var(--size-4-3);
	background: var(--background-secondary);
	border: none;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

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

.note-status-section__title-block {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--size-2-1);
}

.note-status-section__title-block .setting-item-name,
.note-status-section__title-block .setting-item-description {
	white-space: normal;
	line-height: 1.4;
}

.note-status-section__title-block .setting-item-description {
	color: var(--text-muted);
}

.note-status-section__chevron {
	font-size: var(--font-ui-medium);
	color: var(--text-muted);
}

.note-status-section__content {
	padding: var(--size-4-3);
	border-top: 1px solid var(--background-modifier-border);
}

.note-status-settings__stack {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-3);
}

/* Custom additions for Note Status settings */
.setting-item-full {
	width: 100%;
}

.setting-item-vertical {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--size-2-2);
}

.ui-settings__no-status-input {
	max-width: 150px;
}

/* Custom Status Item - BEM Methodology */
.custom-status-item {
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	padding: var(--size-4-3);
	margin-bottom: var(--size-4-2);
	transition: all var(--anim-duration-fast) ease;
}

.custom-status-item:hover {
	border-color: var(--interactive-hover);
}

.custom-status-item__row {
	display: flex;
	align-items: end;
	gap: var(--size-4-2);
	margin-bottom: var(--size-4-2);
}

.custom-status-item__row--icons {
	align-items: stretch;
	flex-wrap: wrap;
}

.custom-status-item__field {
	display: flex;
	flex-direction: column;
	gap: var(--size-2-1);
}

.custom-status-item__field--icon,
.custom-status-item__field--lucide {
	flex: 1;
	min-width: 240px;
}

.custom-status-item__field--name {
	flex: 2;
	min-width: 120px;
}

.custom-status-item__field--description {
	flex: 2;
	min-width: 120px;
}

.custom-status-item__field--color {
	flex: 0 0 auto;
}

.custom-status-item__field--reorder {
	flex: 0 0 auto;
	padding-top: var(--size-4-1);
}

.custom-status-item__field--actions {
	flex: 0 0 auto;
	padding-top: var(--size-4-1);
}

.custom-status-item__label {
	font-size: var(--font-ui-smaller);
	font-weight: var(--font-medium);
	color: var(--text-muted);
	margin-bottom: var(--size-2-1);
}

.custom-status-item__label--required {
	color: var(--text-error);
}

.custom-status-item__input {
	/* Base input styles handled by Input component */
}

.custom-status-item__input--icon {
	width: 100% !important;
	text-align: left;
	font-size: 1em;
}

.custom-status-item__hint {
	margin: 0;
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
}

.custom-status-item__input--name {
	font-weight: var(--font-medium);
}

.custom-status-item__input--name.custom-status-item__input--invalid {
	border-color: var(--text-error) !important;
	background: var(--background-modifier-error) !important;
}

.custom-status-item__input--description {
	color: var(--text-muted);
}

.custom-status-item__input--color {
	width: 40px !important;
	height: 32px !important;
	border-radius: var(--radius-s);
	cursor: pointer;
	border: 2px solid var(--background-modifier-border) !important;
}

.custom-status-item__input--color:hover {
	border-color: var(--interactive-hover) !important;
}

.custom-status-item__remove-btn {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-s);
	background: var(--background-modifier-error);
	color: var(--text-on-accent);
	border: none;
	cursor: pointer;
	font-size: 18px;
	font-weight: bold;
	transition: all var(--anim-duration-fast) ease;
}

.custom-status-item__remove-btn:hover {
	background: var(--text-error);
	transform: scale(1.05);
}

.custom-status-item__reorder-buttons {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.custom-status-item__reorder-btn {
	width: 24px;
	height: 24px;
	border-radius: var(--radius-s);
	background: var(--background-modifier-border);
	color: var(--text-normal);
	border: none;
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	transition: all var(--anim-duration-fast) ease;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.custom-status-item__reorder-btn:hover:not(:disabled) {
	background: var(--interactive-hover);
	transform: scale(1.05);
}

.custom-status-item__reorder-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.custom-status-item__preview {
	display: flex;
	align-items: center;
	gap: var(--size-2-2);
	padding: var(--size-2-3) var(--size-4-2);
	background: var(--background-primary-alt);
	border-radius: var(--radius-s);
	border-left: 3px solid var(--background-modifier-border);
	font-size: var(--font-ui-small);
}

.custom-status-item__preview-icon {
	font-size: 1.1em;
	min-width: 20px;
	text-align: center;
}

.custom-status-item__preview-text {
	font-weight: var(--font-medium);
}

.custom-status-item__preview-desc {
	color: var(--text-muted);
	font-style: italic;
}

.custom-status-item__preview-desc::before {
	content: "— ";
}

.custom-status-item__error {
	color: var(--text-error);
	font-size: var(--font-ui-smaller);
	margin-top: var(--size-2-1);
	padding: var(--size-2-1) var(--size-2-2);
	background: var(--background-modifier-error);
	border-radius: var(--radius-s);
	border-left: 3px solid var(--text-error);
}

/* Custom Status List - BEM */
.custom-status-list {
	/* Container for multiple custom status items */
}

.custom-status-list__empty {
	text-align: center;
	padding: var(--size-4-4) var(--size-4-2);
	color: var(--text-muted);
	font-style: italic;
	border: 2px dashed var(--background-modifier-border);
	border-radius: var(--radius-m);
	background: var(--background-primary-alt);
}

.custom-status-list__empty p {
	margin: 0;
}

/* Status Group for Quick Commands */
.status-group {
	margin-bottom: var(--size-4-4);
	padding: var(--size-4-3);
	background: var(--background-primary-alt);
	border-radius: var(--radius-m);
	border: 1px solid var(--background-modifier-border);
}

.status-group__header {
	margin-bottom: var(--size-4-2);
	padding-bottom: var(--size-2-2);
	border-bottom: 1px solid var(--background-modifier-border);
}

.status-group__title {
	font-weight: var(--font-semibold);
	color: var(--text-normal);
	font-size: var(--font-ui-medium);
}

.status-group__description {
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
	margin-top: var(--size-2-1);
	line-height: var(--line-height-tight);
}

.status-group__items {
	display: flex;
	flex-direction: column;
	gap: var(--size-2-2);
}

/* Status Selector for Quick Commands */
.status-selector {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--size-2-3) var(--size-4-2);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	background: var(--background-primary);
	cursor: pointer;
	transition: all var(--anim-duration-fast) ease;
	position: relative;
}

.status-selector:hover {
	background: var(--background-modifier-hover);
	border-color: var(--background-modifier-border-hover);
}

.status-selector--selected {
	background: var(--background-modifier-success);
	border-color: var(--interactive-success);
}

.status-selector--selected:hover {
	background: var(--background-modifier-success-hover);
}

.status-selector__content {
	flex: 1;
	min-width: 0;
}

.status-selector__status {
	display: flex;
	align-items: center;
	gap: var(--size-2-2);
	margin-bottom: var(--size-2-1);
}

.status-selector__icon {
	font-size: var(--font-ui-medium);
	width: var(--size-4-3);
	text-align: center;
	flex-shrink: 0;
}

.status-selector__name {
	font-weight: var(--font-medium);
	color: var(--text-normal);
}

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

.status-selector__checkbox {
	margin-left: var(--size-4-2);
	pointer-events: none;
	flex-shrink: 0;
}

/* Quick Commands Container */
.quick-commands-container {
	margin-top: var(--size-4-2);
}