/* Modern Form Styles */

/* Base button styles */
.button,
.button15,
.button50,
.button100,
.button200,
.button300,
.button400,
input[type="submit"],
input[type="button"],
button[type="submit"],
button[type="button"]
{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #fff;
	background: var(--color-link);
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
	cursor: pointer;
	transition: background 0.15s, transform 0.1s;
	display: inline-block;
	text-align: center;
}

.button:hover,
.button15:hover,
.button50:hover,
.button100:hover,
.button200:hover,
.button300:hover,
.button400:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button[type="submit"]:hover,
button[type="button"]:hover
{
	background: var(--color-link-hover);
}

.button:active,
input[type="submit"]:active,
input[type="button"]:active,
button[type="submit"]:active,
button[type="button"]:active
{
	transform: translateY(1px);
}

/* Button size variants - fixed widths for uniform appearance */
.button15 { width: 60px; padding: 6px 10px; font-size: 12px; }
.button50 { width: 80px; padding: 8px 14px; }
.button100 { width: 120px; }
.button200 { width: 200px; }
.button300 { width: 240px; }
.button400 { width: 300px; }

/* Button icons spacing */
button i.fas,
button i.far,
button i.fa
{
	margin-right: 6px;
}

/* Dropdowns */
.dropdown,
select
{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	color: var(--color-text);
	background: var(--color-input-bg);
	border: 1px solid var(--color-input-border);
	border-radius: 6px;
	padding: 10px 12px;
	cursor: pointer;
	min-width: 200px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.dropdown:hover,
select:hover
{
	border-color: var(--color-text-muted);
}

.dropdown:focus,
select:focus
{
	outline: none;
	border-color: var(--color-input-focus);
	box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.dropdown:disabled,
select:disabled
{
	background: var(--color-bg-subtle);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* Form hints */
.reduced
{
	display: block;
	font-size: 11px;
	color: var(--color-text-muted);
	margin-top: 4px;
}

/* Text inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"]
{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	color: var(--color-text);
	background: var(--color-input-bg);
	border: 1px solid var(--color-input-border);
	border-radius: 6px;
	padding: 10px 12px;
	width: 280px;
	max-width: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}

/* Date inputs - no default width */
input[type="date"]
{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	color: var(--color-text);
	background: var(--color-input-bg);
	border: 1px solid var(--color-input-border);
	border-radius: 6px;
	padding: 8px 10px;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="url"]:hover
{
	border-color: var(--color-text-muted);
}

input[type="date"]:hover
{
	border-color: var(--color-text-muted);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus
{
	outline: none;
	border-color: var(--color-input-focus);
	box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

input[type="date"]:focus
{
	outline: none;
	border-color: var(--color-input-focus);
	box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

/* Disabled state */
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="url"]:disabled
{
	background: var(--color-bg-subtle);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

input[type="date"]:disabled
{
	background: var(--color-bg-subtle);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* Checkboxes and radios */
input[type="checkbox"],
input[type="radio"]
{
	width: auto;
	margin-right: 6px;
	cursor: pointer;
}

/* File inputs */
input[type="file"]
{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	color: var(--color-text);
	background: var(--color-input-bg);
	border: 1px solid var(--color-input-border);
	border-radius: 6px;
	padding: 8px 12px;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="file"]:hover
{
	border-color: var(--color-text-muted);
}

input[type="file"]::file-selector-button
{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	background: var(--color-link);
	border: none;
	border-radius: 4px;
	padding: 6px 12px;
	margin-right: 10px;
	cursor: pointer;
	transition: background 0.15s;
}

input[type="file"]::file-selector-button:hover
{
	background: var(--color-link-hover);
}

/* Fixed-width text inputs (legacy support) */
.fieldtext40 { width: 50px; }
.fieldtext50noborder { width: 40px; border: none; background: var(--color-bg-subtle); text-align: right; font-weight: 600; }
.fieldtext80 { width: 90px; }
.fieldtext100 { width: 110px; }
.fieldtext140 { width: 150px; }
.fieldtext150 { width: 160px; }
.fieldtext160 { width: 170px; }
.fieldtext300 { width: 300px; max-width: 100%; }
.fieldtext330 { width: 330px; max-width: 100%; }
.fieldtext360 { width: 360px; max-width: 100%; }
.fieldtext450 { width: 450px; max-width: 100%; }
.fieldtext490 { width: 100%; max-width: 500px; }

/* Textareas */
textarea
{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	color: var(--color-text);
	background: var(--color-input-bg);
	border: 1px solid var(--color-input-border);
	border-radius: 6px;
	padding: 10px 12px;
	resize: vertical;
	max-width: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}

textarea:hover
{
	border-color: var(--color-text-muted);
}

textarea:focus
{
	outline: none;
	border-color: var(--color-input-focus);
	box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

textarea:disabled
{
	background: var(--color-bg-subtle);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* Legacy textarea sizes */
.textarea330x100 { width: 330px; max-width: 100%; height: 100px; }
.textarea360x100 { width: 360px; max-width: 100%; height: 100px; }
.textarea360x200 { width: 360px; max-width: 100%; height: 200px; }
.textarea360x400 { width: 360px; max-width: 100%; height: 400px; }
.textarea490x100 { width: 100%; max-width: 500px; height: 100px; }
.textarea490x200 { width: 100%; max-width: 500px; height: 200px; }
.textarea490x400 { width: 100%; max-width: 500px; height: 400px; }

/* Responsive forms */
@media (max-width: 768px)
{
	.fieldtext300,
	.fieldtext330,
	.fieldtext360,
	.fieldtext450,
	.fieldtext490,
	.textarea330x100,
	.textarea360x100,
	.textarea360x200,
	.textarea360x400,
	.textarea490x100,
	.textarea490x200,
	.textarea490x400
	{
		width: 100%;
		max-width: 100%;
	}

	.button200,
	.button300,
	.button400
	{
		width: 100%;
		max-width: 100%;
	}

	/* Character selector: stack label and dropdown on mobile */
	h2.backstage
	{
		max-width: 100%;
		overflow: hidden;
	}

	h2.backstage > table
	{
		width: 100%;
		max-width: 100%;
	}

	h2.backstage > table tr
	{
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	h2.backstage > table td
	{
		display: block;
		width: 100%;
		text-align: left;
	}

	/* Constrain Select2 container on mobile */
	h2.backstage .select2-container
	{
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box;
	}

	/* Truncate long character names in Select2 */
	h2.backstage .select2-selection__rendered
	{
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Button layout helpers */
.button-row
{
	margin: 16px 0;
}

.button-row.centered
{
	text-align: center;
}

/* Stacked buttons - consistent spacing */
/* Forms after tables or paragraphs need more space */
table + form,
p + form
{
	margin-top: 16px;
}

/* Consecutive forms - tight spacing */
form + form
{
	margin-top: 8px;
}

/* Override: br between forms shouldn't add extra space */
form + br + form
{
	margin-top: 8px;
}

/* ===== Form Actions (bottom of edit forms) ===== */

.form-actions
{
	max-width: 700px;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border-subtle);
}

.form-actions .delete-option
{
	display: block;
	margin-bottom: 16px;
	font-weight: 600;
	color: var(--color-text);
	cursor: pointer;
	text-align: center;
}

/* Return to home button */
.return-home
{
	margin-top: 16px;
}

/* Reusable container width presets */
.container_form
{
	max-width: 700px;
}

.container_confirm
{
	max-width: 700px;
	text-align: center;
}

.container_,
.form-actions.container_
{
	max-width: none;
}

.container_narrow
{
	max-width: 700px;
}

.form-actions .delete-option input[type="checkbox"]
{
	margin-right: 8px;
}

.button-group
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}

.button-group form
{
	margin: 0;
}

.button-group form + form
{
	margin-top: 0;
}

@media (max-width: 768px)
{
	.button-group
	{
		flex-direction: column;
		align-items: stretch;
	}

	.button-group .button200
	{
		width: 100%;
		max-width: none;
	}
}

/* Select2 dark mode */
[data-theme="night"] .select2-container--default .select2-selection--single,
[data-theme="night"] .select2-container--default .select2-selection--multiple
{
	background: var(--color-input-bg);
	border-color: var(--color-input-border);
	color: var(--color-text);
}

[data-theme="night"] .select2-container--default .select2-selection--single .select2-selection__rendered
{
	color: var(--color-text);
}

[data-theme="night"] .select2-container--default .select2-selection--single .select2-selection__placeholder
{
	color: var(--color-text-subtle);
}

[data-theme="night"] .select2-dropdown
{
	background: var(--color-input-bg);
	border-color: var(--color-input-border);
	color: var(--color-text);
}

[data-theme="night"] .select2-container--default .select2-search--dropdown .select2-search__field
{
	background: var(--color-bg);
	border-color: var(--color-input-border);
	color: var(--color-text);
}

[data-theme="night"] .select2-container--default .select2-results__option
{
	color: var(--color-text);
}

[data-theme="night"] .select2-container--default .select2-results__option--highlighted[aria-selected]
{
	background: var(--color-link);
	color: #fff;
}

[data-theme="night"] .select2-container--default .select2-results__option[aria-selected=true]
{
	background: var(--color-bg-muted);
}

[data-theme="night"] .select2-container--default .select2-results__group
{
	color: var(--color-text-muted);
}

[data-theme="night"] .select2-container--default .select2-selection--multiple .select2-selection__choice
{
	background: var(--color-bg-muted);
	border-color: var(--color-input-border);
	color: var(--color-text);
}

[data-theme="night"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove
{
	color: var(--color-text-muted);
}

[data-theme="night"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover
{
	color: var(--color-text);
}

/* Select2 auto dark mode */
@media (prefers-color-scheme: dark)
{
	:root:not([data-theme="day"]):not([data-theme="night"]) .select2-container--default .select2-selection--single,
	:root:not([data-theme="day"]):not([data-theme="night"]) .select2-container--default .select2-selection--multiple
	{
		background: var(--color-input-bg);
		border-color: var(--color-input-border);
		color: var(--color-text);
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .select2-container--default .select2-selection--single .select2-selection__rendered
	{
		color: var(--color-text);
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .select2-container--default .select2-selection--single .select2-selection__placeholder
	{
		color: var(--color-text-subtle);
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .select2-dropdown
	{
		background: var(--color-input-bg);
		border-color: var(--color-input-border);
		color: var(--color-text);
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .select2-container--default .select2-search--dropdown .select2-search__field
	{
		background: var(--color-bg);
		border-color: var(--color-input-border);
		color: var(--color-text);
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .select2-container--default .select2-results__option
	{
		color: var(--color-text);
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .select2-container--default .select2-results__option--highlighted[aria-selected]
	{
		background: var(--color-link);
		color: #fff;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .select2-container--default .select2-results__option[aria-selected=true]
	{
		background: var(--color-bg-muted);
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .select2-container--default .select2-results__group
	{
		color: var(--color-text-muted);
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .select2-container--default .select2-selection--multiple .select2-selection__choice
	{
		background: var(--color-bg-muted);
		border-color: var(--color-input-border);
		color: var(--color-text);
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove
	{
		color: var(--color-text-muted);
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover
	{
		color: var(--color-text);
	}
}

/* CKEditor 5 dark mode */
[data-theme="night"] .ck.ck-editor
{
	--ck-color-base-background: #232840;
	--ck-color-base-foreground: #1A1F36;
	--ck-color-base-border: #3D4663;
	--ck-color-base-text: #E3E8EE;
	--ck-color-base-active: #635BFF;
	--ck-color-base-active-focus: #7A73FF;
	--ck-color-base-focus: #7A73FF;
	--ck-color-button-default-hover-background: #2A3148;
	--ck-color-button-on-background: #2A3148;
	--ck-color-button-on-color: #7A73FF;
	--ck-color-shadow-drop: rgba(0, 0, 0, 0.4);
	--ck-color-shadow-inner: rgba(0, 0, 0, 0.3);
	--ck-focus-ring: 1px solid #7A73FF;
	--ck-color-toolbar-background: #232840;
	--ck-color-toolbar-border: #3D4663;
	--ck-color-text: #E3E8EE;
}

[data-theme="night"] .ck.ck-toolbar
{
	background: #232840 !important;
	border-color: #3D4663 !important;
}

[data-theme="night"] .ck.ck-reset_all
{
	color: #E3E8EE;
}

[data-theme="night"] .ck.ck-toolbar .ck-toolbar__separator
{
	background: #3D4663;
}

[data-theme="night"] .ck.ck-button:not(.ck-disabled),
[data-theme="night"] a.ck.ck-button:not(.ck-disabled)
{
	color: #E3E8EE;
}

[data-theme="night"] .ck.ck-button:not(.ck-disabled):hover,
[data-theme="night"] a.ck.ck-button:not(.ck-disabled):hover
{
	background: #2A3148;
}

[data-theme="night"] .ck.ck-button.ck-on:not(.ck-disabled),
[data-theme="night"] a.ck.ck-button.ck-on:not(.ck-disabled)
{
	background: #2A3148;
	color: #7A73FF;
}

[data-theme="night"] .ck.ck-editor__editable:not(.ck-editor__nested-editable)
{
	background: #232840;
	color: #E3E8EE;
}

[data-theme="night"] .ck.ck-dropdown__panel
{
	background: #232840;
	border-color: #3D4663;
}

[data-theme="night"] .ck.ck-list
{
	background: #232840;
}

[data-theme="night"] .ck.ck-list .ck-list__item .ck-button:hover
{
	background: #2A3148;
}

[data-theme="night"] .ck.ck-list .ck-list__item .ck-button.ck-on
{
	background: #635BFF;
	color: #fff;
}

[data-theme="night"] .ck.ck-list .ck-list__item .ck-button
{
	color: #E3E8EE;
}

[data-theme="night"] .ck.ck-labeled-field-view .ck-label
{
	background: #232840;
	color: #A3ACBA;
}

[data-theme="night"] .ck.ck-input
{
	background: #1A1F36;
	border-color: #3D4663;
	color: #E3E8EE;
}

/* CKEditor 5 auto dark mode */
@media (prefers-color-scheme: dark)
{
	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-editor
	{
		--ck-color-base-background: #232840;
		--ck-color-base-foreground: #1A1F36;
		--ck-color-base-border: #3D4663;
		--ck-color-base-text: #E3E8EE;
		--ck-color-base-active: #635BFF;
		--ck-color-base-active-focus: #7A73FF;
		--ck-color-base-focus: #7A73FF;
		--ck-color-button-default-hover-background: #2A3148;
		--ck-color-button-on-background: #2A3148;
		--ck-color-button-on-color: #7A73FF;
		--ck-color-shadow-drop: rgba(0, 0, 0, 0.4);
		--ck-color-shadow-inner: rgba(0, 0, 0, 0.3);
		--ck-focus-ring: 1px solid #7A73FF;
		--ck-color-toolbar-background: #232840;
		--ck-color-toolbar-border: #3D4663;
		--ck-color-text: #E3E8EE;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-toolbar
	{
		background: #232840 !important;
		border-color: #3D4663 !important;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-reset_all
	{
		color: #E3E8EE;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-toolbar .ck-toolbar__separator
	{
		background: #3D4663;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-button:not(.ck-disabled),
	:root:not([data-theme="day"]):not([data-theme="night"]) a.ck.ck-button:not(.ck-disabled)
	{
		color: #E3E8EE;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-button:not(.ck-disabled):hover,
	:root:not([data-theme="day"]):not([data-theme="night"]) a.ck.ck-button:not(.ck-disabled):hover
	{
		background: #2A3148;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-button.ck-on:not(.ck-disabled),
	:root:not([data-theme="day"]):not([data-theme="night"]) a.ck.ck-button.ck-on:not(.ck-disabled)
	{
		background: #2A3148;
		color: #7A73FF;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-editor__editable:not(.ck-editor__nested-editable)
	{
		background: #232840;
		color: #E3E8EE;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-dropdown__panel
	{
		background: #232840;
		border-color: #3D4663;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-list
	{
		background: #232840;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-list .ck-list__item .ck-button:hover
	{
		background: #2A3148;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-list .ck-list__item .ck-button.ck-on
	{
		background: #635BFF;
		color: #fff;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-list .ck-list__item .ck-button
	{
		color: #E3E8EE;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-labeled-field-view .ck-label
	{
		background: #232840;
		color: #A3ACBA;
	}

	:root:not([data-theme="day"]):not([data-theme="night"]) .ck.ck-input
	{
		background: #1A1F36;
		border-color: #3D4663;
		color: #E3E8EE;
	}
}