musenalm/views/transform/form.css

@layer components {
	button {
		@apply cursor-pointer disabled:cursor-default;
	}

	.dbform .inputwrapper {
		@apply rounded-xs border-2 border-transparent
				border-l-2 focus-within:border-l-slate-600
				bg-stone-100 focus-within:bg-slate-100 transition-all duration-100;
	}

	.dbform .inputwrapper .inputlabel {
		@apply pl-3 pr-0 text-gray-800 font-bold py-1;
	}

	.dbform .inputwrapper .inputinput {
		@apply block w-full focus:border-none focus:outline-none px-3 py-1;
	}

	.dbform .inputwrapper .inputtextarea {
		@apply block w-full focus:border-none focus:outline-none resize-y px-3 py-1;
	}

	.dbform .inputwrapper textarea {
		/* Modern browsers: use CSS auto-sizing */
		field-sizing: content;
		/* Styling for all browsers */
		display: block;
		resize: none;
		max-height: 20rem;
		box-sizing: border-box;
		/* overflow will be managed by JS for browsers without field-sizing support */
	}

	.inputlabeltext {
		@apply font-bold;
	}

	.inputlabelrow {
		@apply bg-stone-200 border-b flex flex-row justify-between mb-1 align-middle items-center;
	}

	.dbform .inputwrapper .inputselect {
		@apply mt-1 block w-full rounded-md focus:border-none focus:outline-none
					disabled:opacity-50 py-1 px-3;
	}

	.dbform .duplicate-warning {
		@apply text-sm text-sky-600 mt-0.5 pl-2.5 pb-1.5 flex items-center gap-1;
	}

	/* Status select color coding */
	.status-select[data-status="Edited"] {
		@apply bg-green-100 text-green-900;
	}
	.status-select[data-status="Seen"] {
		@apply bg-blue-100 text-blue-900;
	}
	.status-select[data-status="Review"] {
		@apply bg-orange-100 text-orange-900;
	}
	.status-select[data-status="ToDo"] {
		@apply bg-red-100 text-red-900;
	}
	.status-select[data-status="Unknown"] {
		@apply bg-gray-300 text-gray-900;
	}

	/* Status icon colors to match status */
	.status-select[data-status="Edited"] + .status-icon {
		@apply text-green-900;
	}
	.status-select[data-status="Seen"] + .status-icon {
		@apply text-blue-900;
	}
	.status-select[data-status="Review"] + .status-icon {
		@apply text-orange-900;
	}
	.status-select[data-status="ToDo"] + .status-icon {
		@apply text-red-900;
	}
	.status-select[data-status="Unknown"] + .status-icon {
		@apply text-gray-900;
	}

	/* Status badge display (read-only view) */
	.status-badge {
		@apply inline-flex items-center gap-2 px-2 py-0.5 rounded-md font-sans font-semibold text-sm;
	}

	.status-badge[data-status="Edited"] {
		@apply bg-green-100 text-green-900;
	}

	.status-badge[data-status="Seen"] {
		@apply bg-blue-100 text-blue-900;
	}

	.status-badge[data-status="Review"] {
		@apply bg-orange-100 text-orange-900;
	}

	.status-badge[data-status="ToDo"] {
		@apply bg-red-100 text-red-900;
	}

	.status-badge[data-status="Unknown"] {
		@apply bg-gray-300 text-gray-900;
	}

	.status-badge .status-icon {
		@apply text-base;
	}

	/* Comment content styling in view mode */
	.comment-content {
		@apply italic;
	}

	.dbform .submitbutton {
		@apply w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 active:bg-slate-900 transition-all duration-75;
	}

	.dbform .resetbutton {
		@apply w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md text-sm font-medium text-gray-800 bg-stone-200 hover:bg-stone-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 no-underline;
	}

	.dbform div-menu {
		@apply relative inline-block;
	}

	.relation-strike,
	.entries-agent-strike {
		position: relative;
	}

	/* Relations editor abstracted classes */
	.rel-section-container {
		@apply flex flex-col gap-2 mt-1 px-2;
	}

	.rel-row {
		@apply border border-stone-200 rounded-xs bg-stone-50 px-3 py-2;
	}

	.rel-grid {
		@apply grid grid-cols-[1fr_12.5rem_5rem_7rem] gap-3 items-center;
	}

	.rel-name-col {
		@apply flex flex-col min-w-0;
	}

	.rel-link {
		@apply text-base text-gray-800 no-underline hover:text-slate-900 truncate;
	}

	.rel-detail {
		@apply text-xs text-gray-600 truncate;
	}

	.rel-new-badge {
		@apply text-sm text-gray-600 ml-1;
	}

	.rel-uncertain-container {
		@apply flex items-center gap-2;
	}

	.rel-uncertain-label {
		@apply text-sm text-gray-700;
	}

	.rel-button-container {
		@apply flex justify-end;
	}

	.rel-empty-text {
		@apply px-1.5 italic text-gray-600;
	}

	/* Reset global list indentation inside tab panels */
	.tab-list-panel ul {
		margin-left: 0;
		padding-left: 0;
		list-style: none;
	}

	.tab-list-panel li {
		margin-left: 0;
		padding-left: 0;
	}

	/* Disabled form controls in deleted relations */
	[data-rel-row].bg-red-50 select:disabled,
	[data-rel-row].bg-red-50 input[type="checkbox"]:disabled:not([data-delete-toggle]) {
		@apply opacity-50 cursor-not-allowed;
	}

	/* Diagonal hatching pattern for deleted relations, items, and pills */
	[data-rel-row],
	.items-row,
	.mss-selected-item-pill.bg-red-100 {
		position: relative;
	}

	[data-rel-row].bg-red-50::before,
	.items-row.bg-red-50::before,
	.mss-selected-item-pill.bg-red-100::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(220, 38, 38, 0.2) 6px, rgba(220, 38, 38, 0.2) 10px);
		border-radius: 0.25rem;
		pointer-events: none;
		z-index: 1;
	}

	[data-rel-row] > *,
	.items-row > *,
	.mss-selected-item-pill.bg-red-100 > * {
		position: relative;
		z-index: 2;
	}

	/* Apply hatching to items heading when row is deleted */
	.items-row.bg-red-50 .items-summary > div.bg-stone-100 {
		position: relative;
		background: transparent;
	}

	.items-row.bg-red-50 .items-summary > div.bg-stone-100::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: repeating-linear-gradient(-45deg, #f5f5f4, #f5f5f4 6px, rgba(220, 38, 38, 0.25) 6px, rgba(220, 38, 38, 0.25) 10px);
		border-radius: 0.25rem;
		pointer-events: none;
		z-index: 0;
	}

	.items-row.bg-red-50 .items-summary > div.bg-stone-100 > * {
		position: relative;
		z-index: 1;
	}

	/* Ensure buttons are above the hatching */
	[data-rel-row] button,
	.items-row button {
		position: relative;
		z-index: 10;
	}

	/* Default styling for delete buttons */
	[data-delete-toggle],
	.items-remove-button {
		@apply text-red-700 transition-colors;
	}

	[data-delete-toggle]:hover,
	.items-remove-button:hover {
		@apply text-red-900;
	}

	/* Style delete/revert button in removed state */
	[data-rel-row].bg-red-50 [data-delete-toggle],
	.items-row.bg-red-50 .items-remove-button {
		@apply bg-red-600 text-white px-2 py-1 rounded-xs transition-colors;
	}

	[data-rel-row].bg-red-50 [data-delete-toggle]:hover,
	.items-row.bg-red-50 .items-remove-button:hover {
		@apply bg-orange-500 text-white;
	}

	/* Reduce padding for items delete button */
	.items-row.bg-red-50 .items-remove-button {
		@apply px-1.5 py-0.5;
	}

	/* Ensure all text inside delete buttons is white in removed state */
	[data-rel-row].bg-red-50 [data-delete-toggle] *,
	.items-row.bg-red-50 .items-remove-button * {
		@apply text-white;
	}

	/* Multi-Select-Role example styles */
	.msr-selected-items-container {
		@apply rounded-md;
	}
	.msr-placeholder-no-selection-text {
		@apply text-sm text-gray-500 italic px-2 py-1;
	}

	.msr-input-area-wrapper {
		@apply p-2 rounded-md;
	}
	.msr-input-area-wrapper.msr-input-area-default-border {
		@apply border border-gray-300;
	}
	.msr-input-area-wrapper.msr-input-area-default-border:focus-within {
		@apply focus-within:border-gray-500 focus-within:ring-1 focus-within:ring-gray-400;
	}
	.msr-input-area-wrapper.msr-input-area-staged {
		@apply border border-transparent;
	}

	.msr-text-input {
		@apply bg-transparent text-sm placeholder-gray-400;
	}

	.msr-selected-item-pill {
		@apply bg-gray-200 text-gray-700 px-3 py-[0.3rem] rounded-md text-sm inline-flex items-center m-0.5;
	}
	.msr-item-name {
		@apply font-medium;
	}
	.msr-item-additional-data {
		@apply text-xs ml-1 text-gray-600;
	}
	.msr-selected-item-role {
		@apply font-semibold text-xs ml-1 text-gray-800;
	}
	.msr-selected-item-delete-btn {
		@apply bg-transparent border-none text-gray-500 text-lg leading-none px-1 cursor-pointer opacity-60 transition-opacity duration-200;
	}
	.msr-selected-item-delete-btn:hover {
		@apply hover:opacity-100 hover:text-gray-900;
	}

	.msr-staged-item-pill {
		@apply bg-gray-100 text-gray-800 px-2 py-1 rounded-md text-sm font-medium;
	}
	.msr-staged-item-text {
		@apply mr-2;
	}

	.msr-staged-role-select {
		@apply px-2 py-1 text-sm rounded-md border border-gray-300 bg-white outline-none text-gray-700;
	}
.msr-staged-role-select:focus {
	@apply focus:border-gray-500 focus:ring-1 focus:ring-gray-400;
}

.tox-tinymce:focus-within,
.tox-tinymce--focus {
	@apply outline-none ring-0;
	box-shadow: none !important;
}

.tox-tinymce:focus-within .tox-edit-area,
.tox-tinymce:focus-within .tox-edit-area__iframe,
.tox-tinymce .tox-edit-area__iframe:focus,
.tox-tinymce .tox-edit-area__iframe:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.tox.tox-edit-focus .tox-edit-area::before,
.tox .tox-edit-area::before {
	border: 0 !important;
	opacity: 0 !important;
}

	.msr-staged-cancel-btn {
		@apply w-5 h-5 bg-gray-200 text-gray-600 rounded-full text-sm leading-none cursor-pointer;
	}
	.msr-staged-cancel-btn:hover {
		@apply hover:bg-gray-300 hover:text-gray-800;
	}

	.msr-pre-add-button {
		@apply w-10 h-[42px] text-xl rounded-md bg-gray-50 text-gray-700 border border-gray-300 font-semibold outline-none;
	}
	.msr-pre-add-button:focus {
		@apply focus:border-gray-500 focus:ring-1 focus:ring-gray-400;
	}
	.msr-pre-add-button:hover {
		@apply hover:bg-gray-100;
	}
	.msr-pre-add-button:disabled {
		@apply disabled:bg-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed disabled:border-gray-200;
	}
	.msr-pre-add-button.hidden {
		@apply hidden;
	}

	.msr-add-button {
		@apply px-4 py-2 text-sm rounded-md bg-gray-600 text-white font-medium;
	}
	.msr-add-button:hover {
		@apply hover:bg-gray-700;
	}
	.msr-add-button:disabled {
		@apply disabled:bg-gray-300 disabled:cursor-not-allowed;
	}
	.msr-add-button.hidden {
		@apply hidden;
	}

	.msr-options-list {
		@apply bg-white border border-gray-300 rounded-md shadow-md;
	}
	.msr-options-list.hidden {
		@apply hidden;
	}

	.msr-option-item {
		@apply px-3 py-2 text-sm cursor-pointer transition-colors duration-75;
	}
	.msr-option-item:hover {
		@apply bg-gray-100 text-gray-800;
	}
	.msr-option-item-highlighted {
		@apply bg-gray-100 text-gray-800;
	}
	.msr-option-item-name {
		@apply font-medium;
	}
	.msr-option-item-detail {
		@apply text-xs ml-2 text-gray-500;
	}
	.msr-option-item-highlighted .msr-option-item-detail,
	.msr-option-item:hover .msr-option-item-detail {
		/* Ensure detail text color changes on hover too */
		@apply text-gray-600;
	}

	multi-select-role[disabled] {
		/* This remains standard CSS as Tailwind's disabled: variant is for native elements */
		opacity: 0.6;
		cursor: not-allowed;
	}

	.msr-hidden-select {
		/* No specific styling needed as it's visually hidden by JS/inline style */
	}

	/* --- MultiSelectSimple Component Base Styles (using @apply) --- */
	.mss-component-wrapper {
		/* 'relative' is set inline for positioning dropdown */
		@apply px-3 py-1;
	}

	.mss-selected-items-container {
		@apply py-1 rounded;
		/* Tailwind classes from component: flex flex-wrap gap-1 mb-1 min-h-[38px] */
	}

	.mss-no-items-text {
		@apply italic text-base text-gray-600 w-full;
	}

	.mss-selected-item-pill {
		@apply bg-stone-50 text-stone-900 py-0.5 px-2 border rounded leading-5 shadow-xs hover:shadow select-none; /* Adjusted font size and padding */
		/* Tailwind classes from component: flex items-center */
	}

	.mss-selected-item-text {
		/* Base styles for text part of the pill */
	}
	.mss-selected-item-pill-detail {
		@apply ml-1 opacity-75 text-xs text-gray-600;
	}
	.mss-selected-item-pill-detail.hidden {
		@apply hidden;
	}

	.mss-selected-item-delete-btn {
		@apply bg-transparent border-none text-gray-600 opacity-70 cursor-pointer ml-2 text-lg leading-none align-middle hover:opacity-100 hover:text-gray-900 disabled:opacity-40 disabled:cursor-not-allowed;
	}

	.mss-selected-item-edit-link {
		@apply text-gray-500 hover:text-slate-900 ml-2 text-base inline-flex items-center;
	}

	.mss-input-controls-container {
		/* Tailwind classes from component: flex items-center space-x-2 */
	}

	.mss-input-wrapper {
		@apply border border-gray-300 rounded bg-stone-50;
		/* Tailwind classes from component: relative flex items-center flex-grow */
	}
	.mss-input-wrapper-focused {
		@apply border-indigo-600 ring-1 ring-indigo-600; /* Using ring for focus shadow */
	}

	.mss-text-input {
		@apply py-1 px-1.5;
		/* Tailwind classes from component: w-full outline-none bg-transparent */
	}
	.mss-text-input::placeholder {
		@apply text-gray-400 italic;
	}

	.mss-create-new-button {
		@apply bg-gray-100 text-gray-700 border border-gray-300 py-1 px-1.5 text-sm rounded hover:bg-gray-200 hover:border-gray-400 disabled:bg-gray-50 disabled:text-gray-400 disabled:border-gray-200 disabled:opacity-70 disabled:cursor-not-allowed;
	}
	.mss-create-new-button.hidden {
		@apply !hidden; /* Ensure it hides */
	}

	.mss-toggle-button {
		@apply text-gray-700 hover:text-gray-900 font-semibold text-lg py-0.5 rounded-xs border border-transparent bg-transparent whitespace-nowrap leading-none;
	}

	.mss-options-list {
		@apply bg-white border border-gray-300 rounded shadow-md list-none m-0; /* Using shadow-md as a softer default */
		/* Tailwind classes from component: absolute z-20 w-full max-h-60 overflow-y-auto mt-1 hidden */
	}

	.mss-option-item {
		@apply text-gray-700 py-1.5 px-2.5 cursor-pointer transition-colors duration-75 hover:bg-gray-100 list-none m-0;
	}

	.mss-option-item-name {
		@apply font-medium;
	}

	.mss-option-item-detail {
		@apply text-gray-500 ml-1.5;
	}

	.mss-option-item-highlighted {
		@apply bg-indigo-100 text-indigo-800;
	}
	.mss-option-item-highlighted .mss-option-item-name {
		/* @apply font-medium; */ /* Already set by .mss-option-item-name, inherit color from parent */
	}
	.mss-option-item-highlighted .mss-option-item-detail {
		@apply text-indigo-700;
	}

	.mss-hidden-select {
		/* Styles are inline in _render for !important, no change needed here */
	}

	multi-select-simple[disabled] {
		@apply opacity-60; /* Adjusted opacity */
	}
	multi-select-simple[disabled] .mss-selected-items-container {
		@apply bg-gray-100;
	}
	multi-select-simple[disabled] .mss-selected-item-pill {
		@apply bg-gray-300 text-gray-500;
	}
	multi-select-simple[disabled] .mss-selected-item-delete-btn {
		@apply text-gray-400;
	}

	.rbi-button {
		@apply disabled:hidden;
	}

	.dm-menu-button {
		@apply text-gray-700 hover:text-gray-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500;
	}

	.dm-menu {
		@apply top-full right-0 bg-white border border-gray-300 rounded-xs shadow z-50 mt-1 flex flex-col;
	}

	.dm-menu .dm-menu-item {
		@apply cursor-pointer ml-0 list-none px-2.5 py-1 hover:bg-gray-100 border-b w-full;
	}

	.dm-menu .dm-menu-item:last-child {
		@apply border-b-0;
	}

	.dm-menu .dm-menu-item {
		@apply cursor-pointer text-left text-gray-700;
	}

	.form-submit-button {
		margin-top: 20px;
		padding: 12px 20px;
	}

	select + reset-button .rbi-button {
		@apply ml-3;
	}

	/* Trix Custom Toolbar Styles */
	.trix-toolbar-container {
		@apply flex flex-wrap gap-1 px-2 py-1.5 bg-stone-200 border-b border-stone-300;
	}

	.trix-toolbar-group {
		@apply inline-flex gap-0.5 items-center;
	}

	.trix-toolbar-group:not(:last-child) {
		@apply mr-2 pr-2 border-r border-stone-400;
	}

	.trix-toolbar-button {
		@apply w-7 h-7 inline-flex items-center justify-center
		       text-gray-700 hover:text-slate-900 hover:bg-stone-300
		       rounded transition-all duration-100
		       focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-1;
	}

	.trix-toolbar-button i {
		@apply text-base pointer-events-none;
	}

	/* Active state for toggle buttons */
	.trix-toolbar-button.trix-active {
		@apply bg-slate-600 text-white hover:bg-slate-700 hover:text-white;
	}

	/* Disabled state */
	.trix-toolbar-button:disabled {
		@apply opacity-30 cursor-not-allowed hover:bg-transparent hover:text-gray-400;
	}

	.trix-toolbar-button:disabled i {
		@apply text-gray-400;
	}

	/* Trix editor content area */
	trix-editor {
		@apply block w-full focus:border-none focus:outline-none px-3 py-2 min-h-[9rem];
	}

	/* Trix content formatting styles */
	trix-editor h1 {
		@apply mt-1.5 mb-0.5 first:mt-0 !text-base !font-sans !font-bold;
	}

	trix-editor blockquote {
		@apply border-l-4 border-stone-400 pl-4 py-1 italic text-gray-700;
	}

	trix-editor ul {
		@apply list-disc list-outside ml-1 my-2;
	}

	trix-editor ol {
		@apply list-decimal list-outside ml-1 my-2;
	}

	trix-editor li {
		@apply leading-normal;
		margin-left: 1.5rem;
	}

	trix-editor ul > li {
		list-style-type: disc;
	}

	trix-editor ol > li {
		list-style-type: decimal;
	}

	trix-editor ul ul,
	trix-editor ol ul {
		@apply list-disc my-0;
	}

	trix-editor ul ol,
	trix-editor ol ol {
		@apply list-decimal my-0;
	}

	trix-editor ul ul > li,
	trix-editor ol ul > li,
	trix-editor ul ol > li,
	trix-editor ol ol > li {
		@apply leading-normal;
	}

	trix-editor a {
		@apply text-blue-600 underline hover:text-blue-800;
	}

	trix-editor strong {
		@apply font-bold;
	}

	trix-editor em {
		@apply italic;
	}

	trix-editor del {
		@apply line-through;
	}

	trix-editor pre {
		@apply bg-stone-100 border border-stone-300 rounded px-3 py-2 my-2 font-mono text-sm overflow-x-auto;
	}

	/* Link dialog styling */
	.trix-dialogs {
		@apply relative;
	}

	.trix-dialog {
		@apply hidden absolute top-full left-0 right-0 mt-1 p-3 bg-white border border-stone-300 rounded-xs shadow-lg z-10;
	}

	.trix-dialog[data-trix-active] {
		@apply block;
	}

	.trix-dialog__link-fields {
		@apply flex flex-col gap-2;
	}

	.trix-input--dialog {
		@apply w-full px-3 py-1.5 border border-stone-300 rounded-xs
		       focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-1;
	}

	.trix-button-group {
		@apply flex gap-2;
	}

	.trix-button--dialog {
		@apply px-4 py-1.5 text-sm font-medium rounded-xs
		       border border-transparent shadow-sm
		       cursor-pointer transition-all duration-75
		       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500;
	}

	.trix-button--dialog[value="Link"] {
		@apply bg-slate-700 text-white hover:bg-slate-800 active:bg-slate-900;
	}

	.trix-button--dialog[value="Unlink"] {
		@apply bg-stone-200 text-gray-800 hover:bg-stone-300 active:bg-stone-400;
	}
}