ANTOOZA-FRONTEND/app/studio/donation/titles/style.scss

#studioTitlesPage {
	max-width: 900px;
	margin: 0 auto;
	padding: 1.5rem;
}

.studio-titles {
	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 1rem;
		border-bottom: 1px solid hsl(var(--border));

		h1 {
			font-size: 1.5rem;
			font-weight: 700;
			margin: 0;
		}
	}

	&__add-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.5rem 1rem;
		background: hsl(var(--primary));
		color: hsl(var(--primary-foreground));
		border-radius: 6px;
		font-weight: 600;

		&:hover {
			opacity: 0.9;
		}
	}

	&__hint {
		margin: 1rem 0;
		padding: 0.75rem 1rem;
		background: hsl(var(--muted) / 0.5);
		border-radius: 6px;
		font-size: 0.88rem;
		color: hsl(var(--muted-foreground));
	}

	&__list {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	&__empty {
		padding: 3rem 1rem;
		text-align: center;
		color: hsl(var(--muted-foreground));
	}

	&__card {
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: 1rem;
		align-items: center;
		padding: 1rem;
		background: hsl(var(--background));
		border: 1px solid hsl(var(--border));
		border-radius: 8px;

		&--inactive {
			opacity: 0.5;
		}

		&-badge {
			display: inline-flex;
			align-items: center;
			gap: 0.35rem;
			padding: 0.35rem 0.7rem;
			font-weight: 600;
			color: #fff;
			border-radius: 9999px;
			white-space: nowrap;
			background-color: var(--badge-color, transparent);

			&-icon {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				object-fit: cover;
			}
		}

		&-info {
			display: flex;
			flex-direction: column;
			gap: 0.25rem;

			strong {
				font-size: 1rem;
			}

			span {
				font-size: 0.85rem;
				color: hsl(var(--muted-foreground));
			}

			em {
				font-size: 0.82rem;
				color: hsl(var(--muted-foreground));
				font-style: normal;
			}
		}

		&-actions {
			display: flex;
			gap: 0.25rem;
		}
	}

	&__icon-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		background: transparent;
		color: hsl(var(--muted-foreground));
		border-radius: 6px;

		&:hover {
			background: hsl(var(--muted));
			color: hsl(var(--foreground));
		}

		&--danger:hover {
			color: #dc2626;
		}
	}

	&__form-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1rem;
		z-index: 100;
	}

	&__form {
		max-width: 480px;
		width: 100%;
		max-height: 90vh;
		overflow-y: auto;
		padding: 1.5rem;
		background: hsl(var(--background));
		border-radius: 12px;
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: column;
		gap: 0.75rem;

		h2 {
			font-size: 1.2rem;
			font-weight: 700;
			margin: 0 0 0.5rem;
		}

		label {
			display: flex;
			flex-direction: column;
			gap: 0.25rem;
			font-size: 0.88rem;
			font-weight: 500;

			input[type="text"],
			input[type="number"] {
				padding: 0.55rem 0.75rem;
				border: 1px solid hsl(var(--border));
				border-radius: 6px;
				background: hsl(var(--background));
				font-size: 0.95rem;
			}

			input[type="color"] {
				width: 60px;
				height: 36px;
				padding: 0;
				border: 1px solid hsl(var(--border));
				border-radius: 6px;
				cursor: pointer;
			}
		}

		&-checkbox {
			flex-direction: row !important;
			align-items: center;
			gap: 0.5rem !important;
		}

		&-icon {
			display: flex;
			flex-direction: column;
			gap: 0.4rem;
			font-size: 0.88rem;
			font-weight: 500;

			&-label {
				color: hsl(var(--foreground));
			}

			&-row {
				display: flex;
				align-items: center;
				gap: 0.5rem;
			}

			&-input {
				display: none;
			}

			&-btn {
				display: inline-flex;
				align-items: center;
				gap: 0.35rem;
				padding: 0.5rem 0.85rem;
				background: hsl(var(--muted));
				color: hsl(var(--foreground));
				border: 1px solid hsl(var(--border));
				border-radius: 6px;
				font-size: 0.85rem;
				font-weight: 500;
				cursor: pointer;

				&:hover:not(:disabled) {
					background: hsl(var(--muted) / 0.7);
				}

				&:disabled {
					opacity: 0.5;
					cursor: not-allowed;
				}
			}

			&-remove {
				display: inline-flex;
				align-items: center;
				gap: 0.25rem;
				padding: 0.5rem 0.7rem;
				background: transparent;
				color: #dc2626;
				border: 1px solid #dc2626;
				border-radius: 6px;
				font-size: 0.82rem;
				font-weight: 500;
				cursor: pointer;

				&:hover:not(:disabled) {
					background: rgba(220, 38, 38, 0.1);
				}

				&:disabled {
					opacity: 0.5;
					cursor: not-allowed;
				}
			}

			&-preview {
				display: flex;
				align-items: center;
				gap: 0.6rem;
				padding: 0.6rem;
				background: hsl(var(--muted) / 0.4);
				border: 1px dashed hsl(var(--border));
				border-radius: 6px;

				img {
					width: 64px;
					height: 64px;
					object-fit: contain;
					background: rgba(0, 0, 0, 0.05);
					border-radius: 6px;
				}

				small {
					font-size: 0.78rem;
					color: hsl(var(--muted-foreground));
					word-break: break-all;
				}
			}
		}

		&-preview {
			margin: 0.5rem 0;
			padding: 0.75rem;
			background: hsl(var(--muted) / 0.5);
			border-radius: 6px;
			font-size: 0.9rem;

			span {
				display: inline-flex;
				align-items: center;
				gap: 0.3rem;
				padding: 0.2rem 0.6rem;
				margin-right: 0.4rem;
				color: #fff;
				border-radius: 9999px;
				font-weight: 600;
				font-size: 0.82rem;
				background-color: var(--badge-color, transparent);
			}

			&-icon {
				width: 16px;
				height: 16px;
				border-radius: 50%;
				object-fit: cover;
			}
		}

		&-actions {
			display: flex;
			justify-content: flex-end;
			gap: 0.5rem;
			margin-top: 0.5rem;

			button {
				padding: 0.55rem 1.25rem;
				border: 1px solid hsl(var(--border));
				border-radius: 6px;
				background: hsl(var(--background));
				font-weight: 500;

				&:hover:not(:disabled) {
					background: hsl(var(--muted));
				}
			}

			.studio-titles__form-save {
				background: hsl(var(--primary));
				color: hsl(var(--primary-foreground));
				border-color: hsl(var(--primary));

				&:hover:not(:disabled) {
					opacity: 0.9;
					background: hsl(var(--primary));
				}
			}
		}
	}
}