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

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