/* REMOTE_FILENAME=/web/css/FormLayout.css
 *
 *	Copyright © 2026 by FKE Internet.  All rights reserved.
 *
 *	$Id: /web/css/FormLayout.css,v $
 */
/**
*	CSS rulesets for responsive form layouts
*
*	Author:			Fred Koschara
*	Creation Date:	May thirty-first, 2026
*	Last Modified:	June 3, 2026 @ 2:28 pm
*
*	Revision History:
*	   Date		  by		Description
*	2026/06/03	wfredk	fix so form rows are 'label: <indicator> <input>'
*	2026/05/31	wfredk	original development as server-global stylesheet
*/

.pageForm
{	margin:20px auto 0;
	max-width:800px;
}
.pageForm form
{	align-items:start;
	column-gap:0.75rem;
	display:grid;
	grid-template-columns:max-content auto;
	justify-content:center;
	row-gap:0.33em;
}
.pageForm > fieldset			/* everything hidden, remove space allocation */
{	display:contents;
}
.pageForm > hr
{	grid-column:1 / span 2;
	margin:0.5em 0;				/* ../\.. */
	width:100%;
}

.formRow
{	display:contents;
}
.formRow input,
.formRow textarea
{	grid-column:2;
}
.formRow label
{	grid-column:1;
	text-align:right;
	white-space:nowrap;
}
.formRow input[type=checkbox]
{	justify-self:start;			/* left align checboxes with other controls */
}
.formButtonRow					/* form buttons (action row) */
{	align-items:center;
	display:flex;
	flex-wrap:wrap;
	gap:10em;
	grid-column:1 / span 2;
	justify-content:center;
	width:100%;
}

.formField
{	justify-self:start;
	width:auto;
}

@media (max-width:640px)
{	.pageForm
	{	display:flex;
		flex-direction:column;
		gap:0.75em;
		justify-content:normal;
	}
	.pageForm > fieldset
	{	display:block;
		margin:0;
		padding:0;
	}
	.pageForm > hr
	{	margin:0.5em 0;
		width:100%;
	}
	.formRow
	{	display:grid;
		row-gap:0.15em;
	}
	.formRow > label,
	.formLabel
	{	text-align:left;
		white-space:normal;
	}
	.formField,
	#emailAddr,
	#userName,
	#nickName,
	#userPswd,
	#confPswd
	{	width:100%;
	}
	.captchaWrapper
	{	grid-column:auto;
		grid-template-columns:1fr;
		justify-items:start;
		row-gap:0.75em;
	}
	.formButtonRow
	{	flex-direction:column;
		gap:1em;
		justify-content:flex-start;
	}
}

.captchaWrapper
{	align-items:center;
	column-gap:1em;
	display:grid;
	grid-column:1 / span 2;
	grid-template-columns:100px 1fr;
	margin:0.5em auto;
	max-width:500px;
}
.captchaCol1
{	align-items:center;
	display:flex;
	flex-direction:column;
	gap:0.5em;
	grid-column:1;
}
.captchaImage
{	height:40px;
	margin:1em auto 0.5em;
}
.captchaLabel
{	align-self:start;
	margin-left:3em;
	margin-top:1.6em;
	text-align:left;
}
.captchaFieldLabel
{	align-self:start;
	margin-left:3em;
/*	margin-top:0.33em;	*/
	text-align:left;
}
.newCaptchaBtn
{	background-color:#142864;
	color:lightblue;
	font-size:1em;
	margin-bottom:1em;
	width:100px;
}

input.captcha5
{	font-size:14pt;
	text-align:center;
	width:96px;
}
input.numeric
{	text-align:right;
}
input.readonly
{	background-color:#dfdfdf;
	color:#6d6d6d;
}
input.rightButton
{	background-color:#074723;
	color:Gold;
	font-size:1em;
	font-weight:600;
	padding:0.5em 1.25em;
}
input.wrongButton
{	background-color:#200000;
	color:Gray;
	font-size:1em;
	font-weight:bold;
	/*height:30px;*/
	padding:0.5em 1.25em;
}

.focusButton
{	background-color:DarkBlue;
	color:Yellow;
	font-size:1em;
	font-weight:700;
	padding:0.5em 1.25em;
}

/* password reveal button wrapper */
.passwordWrap
{	display:inline-block;
	position:relative;
	vertical-align:top;
}

.passwordWrap > input
{	padding-right:2.25rem;
}

.eyeIcon
{	display:block;
	height:1.25rem;
	width:1.25rem;
}
.eyeIcon *
{	fill:none;
	stroke:currentColor;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:1.7;
}
.eyeOpen
{	display:none;
}

.revealToggle
{	appearance:none;
	background-color:transparent;
	border:0;
	cursor:pointer;
	font-size:1rem;
	height:2rem;
	line-height:2rem;
	padding:0;
	position:absolute;
	right:0.375rem;
	top:50%;
	transform:translateY(-50%);
	width:2rem;
}
.revealToggle[aria-pressed="true"] .eyeClosed
{	display:none;
}
.revealToggle[aria-pressed="true"] .eyeOpen
{	display:block;
}

/* fluid inputs */

input[type="text"],
input[type="password"]
{	box-sizing:border-box;
	justify-self:start;
	max-width:none;
}

/* EOF: FormLayout.css */