/* Legacy modify popup styles (kept for backwards compatibility) */
#modifyWallpaperPopup {
	height: 350px;
	overflow: auto;
	padding-right: 10px;
	border-bottom: 1px solid #CCC;
}
#modifyWallpaperPopup div.details {
	color: #999;
	font-size: 8pt;
	padding-top: 2px;
}
#modifyWallpaperPopup .block {
	margin-bottom: 12px;
}
#modifyWallpaperPopup label {
	display: block;
	font-weight: bold;
	font-size: 9pt;
	padding-bottom: 3px;
}
#modifyWallpaperPopup label a {
	font-weight: normal;
	text-decoration: underline;
	color: #6485AE;
	font-size: 8pt;
	margin-bottom: 1px;
}
#modifyWallpaperPopup .popInput {
	width: 534px;
	padding: 3px 4px;
	font-size: 10pt;
	background-color: #FFF;
	background-image: linear-gradient(#EEE 1%, #FFF 15%);
	border: 1px solid #AAA;
}
#modifyWallpaperPopup textarea {
	height: 40px;
}
#advancedOptions {
	display: none;
	margin: 4px 0 0 12px;
	padding: 4px 0 0 6px;
	border-left: 4px solid #6485AE;
}
#advancedOptions label {
	display: inline;
	font-weight: normal;
	margin: 0;
}

#modifyWallpaperPopup .showAdvanced {
	outline: none;
	font-size: 8pt;
	background: transparent url('../images/bullet-arrow-right.gif') no-repeat scroll 0 2px;
	padding-left: 14px;
}
#modifyWallpaperPopup .categorization {
	font-size: 9pt;
}
#modifyWallpaperPopupFooter {
	margin-top: 12px;
}
#modifyWallpaperPopupFooter .delLink {
	float: right;
	color: #A00;
	font-size: 9pt;
	text-decoration: underline;
	margin-top: 8px;
}

.rbox h4.rboxBlueHeader {
	margin: -8px -2px 5px -5px;
	font-size: 13px;
	padding: 4px 6px;
	background-color: #E9EEF4;
	border-bottom: 1px solid #FFF;
	color: #4C719F;
}

body .ui-widget-overlay.ui-widget-overlay {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0.5;
	filter: Alpha(Opacity=50);
	background: #555;
}
.ui-dialog.ui-dialog-content {
	background-color: #F2F6FA;
}
#modifyWallpaperPopup, .ui-widget #modifyWallpaperPopup input, .ui-widget #modifyWallpaperPopup select, .ui-widget #modifyWallpaperPopup textarea, .ui-widget #modifyWallpaperPopup button {
	font-family: Verdana, arial, helvetica, sans-serif;
}

#modoptions {
	font-size: 8pt;
	margin: 0 0 0 12px;
	font-weight: bold;
	border: 2px solid #E00;
	color: #000;
	padding: 2px;
	font-style: normal;
	font-family: Verdana, arial, helvetica, sans-serif;
}

/* ==========================================================================
   Modern Modify Wallpaper Dialog
   ========================================================================== */

.modify-dialog {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #333;
}

.modify-dialog__content {
	display: flex;
	gap: 24px;
	padding: 20px;
	max-height: 60vh;
	overflow-y: auto;
}

/* Preview Column */
.modify-dialog__preview {
	flex-shrink: 0;
	width: 180px;
}

.modify-dialog__thumb {
	background: #f5f5f5;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modify-dialog__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4/3;
	object-fit: cover;
}

.modify-dialog__meta {
	margin-top: 12px;
	padding: 12px;
	background: #f8f9fa;
	border-radius: 6px;
	font-size: 12px;
}

.modify-dialog__meta-item {
	display: block;
	margin-bottom: 4px;
	color: #666;
}

.modify-dialog__meta-item:last-child {
	margin-bottom: 0;
}

.modify-dialog__meta-item strong {
	color: #333;
	font-weight: 600;
}

/* Form Column */
.modify-dialog__form {
	flex: 1;
	min-width: 0;
}

.modify-dialog__section {
	margin-bottom: 20px;
}

.modify-dialog__section:last-child {
	margin-bottom: 0;
}

.modify-dialog__label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: #374151;
	margin-bottom: 6px;
}

.modify-dialog__sublabel {
	display: block;
	font-size: 11px;
	color: #6b7280;
	margin-bottom: 4px;
	font-weight: 500;
}

.modify-dialog__hint {
	display: block;
	font-size: 11px;
	color: #9ca3af;
	margin-top: 4px;
}

.modify-dialog__row {
	display: flex;
	gap: 16px;
}

.modify-dialog__field {
	flex: 1;
}

.modify-dialog__field--half {
	flex: 0 0 calc(50% - 8px);
}

/* Form Controls */
.modify-dialog__input,
.modify-dialog__textarea,
.modify-dialog__select {
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	color: #333;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}

.modify-dialog__input:focus,
.modify-dialog__textarea:focus,
.modify-dialog__select:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.modify-dialog__input::placeholder,
.modify-dialog__textarea::placeholder {
	color: #9ca3af;
}

.modify-dialog__textarea {
	min-height: 80px;
	resize: vertical;
}

.modify-dialog__select {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

/* Tags */
.modify-dialog__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 10px;
	min-height: 44px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	cursor: text;
	align-items: center;
}

.modify-dialog__tags:focus-within {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.modify-dialog__tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	background: #e5e7eb;
	border-radius: 4px;
	font-size: 13px;
	color: #374151;
	white-space: nowrap;
}

.modify-dialog__tag-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: none;
	background: transparent;
	color: #6b7280;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	border-radius: 3px;
	transition: background-color 0.15s, color 0.15s;
}

.modify-dialog__tag-remove:hover {
	background: #d1d5db;
	color: #374151;
}

.modify-dialog__tag-input {
	flex: 1;
	min-width: 120px;
	border: none;
	outline: none;
	padding: 4px 0;
	font-size: 14px;
	font-family: inherit;
	background: transparent;
}

.modify-dialog__tag-input::placeholder {
	color: #9ca3af;
}

/* Footer */
.modify-dialog__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	background: #f9fafb;
	border-top: 1px solid #e5e7eb;
}

.modify-dialog__actions-left,
.modify-dialog__actions-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Buttons */
.modify-dialog__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
	white-space: nowrap;
}

.modify-dialog__btn--save {
	background: #3b82f6;
	border: 1px solid #3b82f6;
	color: #fff;
}

.modify-dialog__btn--save:hover {
	background: #2563eb;
	border-color: #2563eb;
}

.modify-dialog__btn--cancel {
	background: #fff;
	border: 1px solid #d1d5db;
	color: #374151;
}

.modify-dialog__btn--cancel:hover {
	background: #f9fafb;
	border-color: #9ca3af;
}

.modify-dialog__btn--delete {
	background: transparent;
	border: 1px solid transparent;
	color: #dc2626;
	padding: 10px 12px;
}

.modify-dialog__btn--delete:hover {
	background: #fef2f2;
	border-color: #fecaca;
}

.modify-dialog__btn--mod {
	background: #fff;
	border: 1px solid #fbbf24;
	color: #92400e;
	padding: 10px 12px;
}

.modify-dialog__btn--mod:hover {
	background: #fffbeb;
}

.modify-dialog__btn--mod svg {
	width: 10px;
	height: 6px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Mod Dropdown */
.modify-dialog__mod-dropdown {
	position: relative;
}

.modify-dialog__mod-menu {
	position: absolute;
	bottom: 100%;
	left: 0;
	margin-bottom: 4px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	min-width: 180px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
	z-index: 100;
}

.modify-dialog__mod-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.modify-dialog__mod-menu button {
	display: block;
	width: 100%;
	padding: 10px 14px;
	text-align: left;
	font-size: 13px;
	font-family: inherit;
	border: none;
	background: transparent;
	color: #374151;
	cursor: pointer;
	transition: background-color 0.15s;
}

.modify-dialog__mod-menu button:first-child {
	border-radius: 5px 5px 0 0;
}

.modify-dialog__mod-menu button:last-child {
	border-radius: 0 0 5px 5px;
}

.modify-dialog__mod-menu button:hover {
	background: #f3f4f6;
}

.modify-dialog__mod-menu button[data-action="blacklist"] {
	color: #dc2626;
}

.modify-dialog__mod-menu button[data-action="blacklist"]:hover {
	background: #fef2f2;
}

/* Mod-action inline panel (sink / dup / blacklist).
   Hidden by default; .modify-dialog.is-mod-action-mode on the dialog
   root reveals it and hides the regular edit body + footer. */
.modify-dialog__mod-action {
	display: none;
	padding: 20px 24px;
	flex-direction: column;
	gap: 14px;
}

.modify-dialog.is-mod-action-mode > .modify-dialog__content,
.modify-dialog.is-mod-action-mode > .modify-dialog__footer {
	display: none;
}

.modify-dialog.is-mod-action-mode > .modify-dialog__mod-action {
	display: flex;
}

.modify-dialog__mod-action-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #111827;
}

.modify-dialog__mod-action-desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #6b7280;
}

.modify-dialog__mod-action-radio,
.modify-dialog__mod-action-check {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 4px 0;
	font-size: 13px;
	color: #374151;
	cursor: pointer;
}

.modify-dialog__mod-action-status {
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.4;
}

.modify-dialog__mod-action-status[data-kind="info"] {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}

.modify-dialog__mod-action-status[data-kind="success"] {
	background: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.modify-dialog__mod-action-status[data-kind="error"] {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.modify-dialog__mod-action-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding-top: 6px;
	border-top: 1px solid #e5e7eb;
	margin-top: 4px;
}

/* Dialog Modal Overrides */
.dn-dialog-modify-wallpaper {
	width: 700px;
}

.dn-dialog-modify-wallpaper .dn-modal-content {
	padding: 0;
}

.dn-dialog-modify-wallpaper .dn-modal-header {
	background: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
}

.dn-dialog-modify-wallpaper .dn-modal-title {
	font-size: 15px;
	font-weight: 600;
	color: #374151;
}

/* Responsive */
@media (max-width: 700px) {
	.modify-dialog__content {
		flex-direction: column;
		gap: 16px;
	}

	.modify-dialog__preview {
		width: 100%;
		display: flex;
		gap: 16px;
		align-items: flex-start;
	}

	.modify-dialog__thumb {
		width: 120px;
		flex-shrink: 0;
	}

	.modify-dialog__meta {
		margin-top: 0;
		flex: 1;
	}

	.modify-dialog__row {
		flex-direction: column;
		gap: 12px;
	}

	.modify-dialog__field--half {
		flex: 1 1 100%;
	}

	.modify-dialog__footer {
		flex-direction: column;
		gap: 12px;
	}

	.modify-dialog__actions-left,
	.modify-dialog__actions-right {
		width: 100%;
		justify-content: center;
	}

	.modify-dialog__actions-right {
		flex-direction: row-reverse;
	}

	.modify-dialog__btn {
		flex: 1;
		justify-content: center;
	}

	.modify-dialog__btn--delete {
		flex: 0;
	}
}