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

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

/* 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);
}

/* 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__field {
	display: flex;
	flex-direction: column;
	gap: var(--size-2-1);
}

.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: 50px !important;
	text-align: center;
	font-size: 1.2em;
}

.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);
}

/* Note Status Selector in Modal */
.note-status-options {
	max-height: 300px;
	overflow-y: auto;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s);
	background: var(--background-primary);
}

.note-status-option {
	/* Uses SelectableListItem styles */
}

.note-status-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size-2-2);
	min-height: 32px;
	align-items: center;
}

/* Selectable List Item (used by multiple components) */
.selectable-list-item {
	display: flex;
	align-items: center;
	gap: var(--size-4-2);
	padding: var(--size-2-3) var(--size-4-2);
	cursor: pointer;
	border-bottom: 1px solid var(--background-modifier-border);
	transition: background var(--anim-duration-fast) ease;
}

.selectable-list-item:hover {
	background: var(--background-modifier-hover);
}

.selectable-list-item[data-focused="true"] {
	outline: 2px solid var(--interactive-accent);
	outline-offset: -2px;
}

.selectable-list-item[data-selected="true"] {
	background: var(--background-modifier-hover);
}

.selectable-list-item-icon {
	font-size: 16px;
	min-width: 20px;
}

.selectable-list-item-content {
	flex: 1;
	font-size: var(--font-ui-small);
}

.selectable-list-item-check {
	color: var(--interactive-accent);
}