/* forms.css - Forms & Databases entry form layout, shared by the Members Area
   and public formAdd pages (2026-10-12, forms upgrade item 11).

   Responsive: on a computer each row is label (with its description) on the
   left and the control on the right; on a phone the label sits above the
   control. The form takes the full width available. Short fields (date,
   time, month, number, decimal) stay compact; text, e-mail, memo and single
   selects stretch to the control column. The row colour classes
   (CurrentMemRow / AlternateMemRow) come from the site stylesheet. */

.fsForm { width: 100%; }

/* Shared by the Forms & Databases pages (moved out of per-page style blocks 2026-10-12) */
.table-wrapper { max-width: 100%; overflow: auto; position: relative; }
.fileinput-button { color: #FFFFFF !important; border: none; font-family: Roboto, Arial, sans-serif; font-size: 15px; font-weight: bold; background-color: #5cb85c; width: auto; padding: 8px 20px; border-radius: 4px; }
.fileinput-button:hover { background-color: #449D44; }
.fileupload-buttonbar { margin: 2px 0 6px 0; }
table.files td { font-size: 13px; }
.icon { vertical-align: middle; }
.ui-widget.ui-widget-content { border: 1px solid #333333 !important; background: #FFFFFF !important; }
.fsLegend { text-align: right; padding: 0 10px 4px 10px; }
/* the red required marker (icons/required.png) sits right after the label
   text; the legend uses the same image inline */
img.fsRequired { width: 14px; height: auto; vertical-align: middle; position: relative; top: -2px; margin-left: 4px; }

.fsRow { padding: 8px 10px; }
.fsRow .fsLabel { display: block; margin: 0 0 4px 0; }
.fsRow .fsHelp { font-weight: normal; font-size: 0.92em; opacity: 0.85; margin: 0 0 6px 0; }
.fsRow .fsControl { line-height: 1.6; min-width: 0; }
.fsRow .fsControl .fsField { box-sizing: border-box; max-width: 100%; }
/* .fsField fixes height at 17px (members area); let typed inputs size from their font so they keep the site's padding and inset look */
.fsRow .fsControl input.fsField:not([type="checkbox"]):not([type="radio"]) { height: auto; min-height: 25px; padding: 3px 4px; }
.fsRow .fsControl input[type="text"].fsField,
.fsRow .fsControl input[type="email"].fsField,
.fsRow .fsControl textarea.fsField,
.fsRow .fsControl select.fsField:not([multiple]) { width: 100%; }
.fsRow .fsControl textarea.fsField { height: 120px; resize: vertical; }
.fsRow .fsControl select.fsField:not([multiple]) { height: auto; min-height: 25px; }
/* multi selects: the chosen widget switches itself off on phones and the plain list is forced to 30px by the site stylesheet; give it room */
.fsRow .fsControl select[multiple].fsField { height: auto !important; min-height: 180px; width: 100%; padding: 4px; }
.fsRow .fsControl select[multiple].fsField option { padding: 6px 4px; }
.fsRow .fsControl input[type="date"].fsField,
.fsRow .fsControl input[type="time"].fsField,
.fsRow .fsControl input[type="month"].fsField { width: auto; }
.fsRow .fsControl input[type="time"].fsField { margin-left: 6px; }
/* empty date / time / month pickers show their placeholder in grey (formDraft.js adds fsEmpty) */
.fsRow .fsControl input.fsField.fsEmpty { color: #999999; }
.fsRow .fsControl input.fsField.fsEmpty::-webkit-datetime-edit { color: #999999; }
.fsRow .fsControl input.fsShort { width: 150px; }
.fsRow .fsControl .fsChoice { display: block; font-weight: normal; margin: 2px 0; }
.fsRow .fsControl .fsChoice input { margin-right: 6px; vertical-align: middle; }
.fsRow .fsControl .chosen-container { max-width: 100%; }

/* Duration: hours / minutes pair */
.fsRow .fsControl input.fsTiny { width: 72px; }
.fsRow .fsControl .fsDuration label { font-weight: normal; margin-right: 10px; }
/* Signature pad */
.fsSigWrap { max-width: 600px; }
.fsSigPad { display: block; width: 100%; height: auto; border: 1px solid #999999; border-radius: 4px; background: #FFFFFF; cursor: crosshair; }
.fsSigTools { margin-top: 4px; }
.fsSigTools .fsSigClear { font-family: Roboto, Arial, sans-serif; font-size: 13px; padding: 3px 12px; border: 1px solid #999999; border-radius: 4px; background: #EEEEEE; cursor: pointer; }
.fsSigTools .fsSigHint { font-size: 0.9em; opacity: 0.8; margin-left: 6px; }

.fsSection { padding: 9px 10px; margin-top: 14px; }
.fsSection:first-child { margin-top: 0; }

/* Computer: label and description left, control right */
@media screen and (min-width: 801px) {
	/* rows: label, then the rest; a tall control (memo) must not push the description down */
	.fsRow { display: grid; grid-template-columns: minmax(200px, 30%) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; align-items: start; }
	.fsRow .fsLabel { grid-column: 1; margin: 0; padding-top: 3px; }
	.fsRow .fsHelp { grid-column: 1; margin: 2px 0 0 0; }
	.fsRow .fsControl { grid-column: 2; grid-row: 1 / span 2; }
}

/* Phone: label above control, short fields stretch too */
@media screen and (max-width: 800px) {
	.fsRow { padding: 8px 6px; }
	.fsSection { padding: 8px 6px; }
	.fsRow .fsControl input.fsShort { width: 100%; }
	.fsRow .fsControl input[type="date"].fsField,
	.fsRow .fsControl input[type="month"].fsField { width: 100%; }
	.fsRow .fsControl input[type="time"].fsField { margin: 6px 0 0 0; width: 100%; }
}

/* Unsaved-draft bar (item 7, formDraft.js) */
.fsDraftBar { width: 100%; margin: 0 0 12px 0; padding: 8px 10px; background: #FFF8E1; border: 1px solid #F0C36D; border-radius: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; box-sizing: border-box; }
.fsDraftBar .fsDraftText { flex: 1 1 240px; }
.fsDraftBar button { font-family: Roboto, Arial, sans-serif; font-size: 14px; font-weight: bold; color: #FFFFFF; background: #5cb85c; border: none; border-radius: 4px; padding: 6px 14px; cursor: pointer; }
.fsDraftBar button.fsDraftDiscard { background: #999999; }
.fsDraftBar button:hover { filter: brightness(0.92); }