/* ==========================================================================
   Form Inputs V2 - outlined form-mode fields (mockup direction A)
   --------------------------------------------------------------------------
   Turns the 2px underline on FormV2 FORM-mode fields into a 1px rounded
   outlined box with a primary focus ring, sentence-case 13px/600 labels and
   read-only / disabled / error states, in light and dark themes.

   Gate: Page.php emits this sheet only when the project's Main returns true
   from RycaSolnFramework::formInputsV2Enabled() (framework default false).
   It loads after the framework sheets (main.css / mainMobile.css / chatBox.css)
   and before project CSS, so it beats main.css by order at equal specificity
   and a project can still override it. Projects that don't opt in never load
   it, so their pages are unchanged.

   Scope: the form-mode selector list from main.css (section.block.long
   .longBlock.formInput ..., .formRow .popUpBox ..., .stdInput), the
   searchDependantV2 wrapper and page-header filter controls, plus the
   search-result dropdown (.searchResult, last section; --fi-dd-* tokens).
   NOT styled here: FormV2 TABLE-mode cells (.formRow > div inputs), settings
   rows (.ffo-set-row), buttons, checkbox / toggle (.cbcon,
   .toggle-switch-wrapper), .lgLabel labels and the .formRequired marker.
   Tokens: override any --fi-* in project CSS to retheme.
   ========================================================================== */

:root {
	--fi-bg: #fff;
	--fi-border: #d0d5dd;
	--fi-border-hover: #aab1bd;
	--fi-focus: var(--primary, #255697);
	--fi-ring: rgba(37, 86, 151, .14);
	--fi-ro-bg: #f3f4f6;
	--fi-radius: 10px;
	--fi-pad: 9px 12px;
	--fi-fs: 16px;
	--fi-h: 44px;
	--fi-label: #4b5563;
	--fi-error: #c62828;
	--fi-icon: #333;
	/* Search-result dropdown (floating card, see the .searchResult section at the end) */
	--fi-dd-bg: #fff;
	--fi-dd-border: var(--fi-border);
	--fi-dd-radius: 10px;
	--fi-dd-shadow: 0 12px 28px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
	--fi-dd-pad: 4px;
	--fi-dd-gap: 6px;
	--fi-dd-max-h: 320px;
	--fi-dd-fs: 16px;
	--fi-dd-text: #1f2937;
	--fi-dd-muted: #6b7280;
	--fi-dd-row-pad: 10px 12px;
	--fi-dd-row-radius: 6px;
	--fi-dd-hover: #f1f4f9;
	--fi-dd-divider: #e5e7eb;
}
[data-theme="dark"] {
	--fi-bg: #303030;
	--fi-border: #4a4a4a;
	--fi-border-hover: #606060;
	--fi-focus: #4a90e2;
	--fi-ring: rgba(74, 144, 226, .25);
	--fi-ro-bg: #2a2a2a;
	--fi-label: #a8a8a8;
	--fi-icon: #b8b8b8;
	--fi-dd-bg: #2b2b2b;
	--fi-dd-border: var(--fi-border);
	--fi-dd-shadow: 0 12px 28px rgba(0, 0, 0, .5);
	--fi-dd-text: #e5e5e5;
	--fi-dd-muted: #a0a0a0;
	--fi-dd-hover: #383838;
	--fi-dd-divider: #383838;
}

/* --- Field box: same selector list as main.css (form mode). The popUpBox input
   selector skips non-text controls (checkbox, radio, buttons, file...). --- */
section.block.long .longBlock.formInput input[type='text'],
section.block.long .longBlock.formInput input[type='number'],
section.block.long .longBlock.formInput input[type='password'],
section.block.long .longBlock.formInput input[type='date'],
section.block.long .longBlock.formInput input[type='time'],
section.block.long .longBlock.formInput input[type='datetime-local'],
section.block.long .longBlock.formInput textarea,
.formRow .popUpBox textarea,
.formRow .popUpBox input:not(.excludeFormPopRow):not([type='checkbox'], [type='radio'], [type='button'], [type='submit'], [type='reset'], [type='hidden'], [type='file'], [type='color'], [type='range'], [type='image']),
.formRow .popUpBox select,
section.block.long .longBlock.formInput select,
.stdInput
{
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background-color: var(--fi-bg);
	padding: var(--fi-pad);
	min-height: var(--fi-h);
	font-size: var(--fi-fs);
	line-height: 1.3;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
[data-theme="dark"] section.block.long .longBlock.formInput :is(input[type='text'], input[type='number'], input[type='password'], input[type='date'], input[type='time'], input[type='datetime-local'], textarea, select),
[data-theme="dark"] .formRow .popUpBox :is(textarea, select, input:not(.excludeFormPopRow):not([type='checkbox'], [type='radio'], [type='button'], [type='submit'], [type='reset'], [type='hidden'], [type='file'], [type='color'], [type='range'], [type='image'])),
[data-theme="dark"] .stdInput
{color-scheme: dark;}

/* Hover, then focus (replaces main.css teal #0D80A0 underline), then native validation error. */
section.block.long .longBlock.formInput :is(input[type='text'], input[type='number'], input[type='password'], input[type='date'], input[type='time'], input[type='datetime-local'], textarea, select):hover,
.formRow .popUpBox :is(textarea, select, input:not(.excludeFormPopRow):not([type='checkbox'], [type='radio'], [type='button'], [type='submit'], [type='reset'], [type='hidden'], [type='file'], [type='color'], [type='range'], [type='image'])):hover,
.stdInput:hover
{border-color: var(--fi-border-hover);}

section.block.long .longBlock.formInput :is(input[type='text'], input[type='number'], input[type='password'], input[type='date'], input[type='time'], input[type='datetime-local'], textarea, select):focus,
.formRow .popUpBox :is(textarea, select, input:not(.excludeFormPopRow):not([type='checkbox'], [type='radio'], [type='button'], [type='submit'], [type='reset'], [type='hidden'], [type='file'], [type='color'], [type='range'], [type='image'])):focus,
.stdInput:focus
{border-color: var(--fi-focus); box-shadow: 0 0 0 3px var(--fi-ring);}

section.block.long .longBlock.formInput :is(input[type='text'], input[type='number'], input[type='password'], input[type='date'], input[type='time'], input[type='datetime-local'], textarea, select):user-invalid,
.formRow .popUpBox :is(textarea, select, input:not(.excludeFormPopRow):not([type='checkbox'], [type='radio'], [type='button'], [type='submit'], [type='reset'], [type='hidden'], [type='file'], [type='color'], [type='range'], [type='image'])):user-invalid,
.stdInput:user-invalid
{border-color: var(--fi-error); box-shadow: 0 0 0 3px rgba(198, 40, 40, .12);}

/* --- Textarea: 1px all sides (main.css sets 2px), same radius, keeps 100px height. --- */
section.block.long .longBlock.formInput textarea,
.formRow .popUpBox textarea
{border-width: 1px; height: 100px; min-height: 0; line-height: 1.4;}

/* --- Select: keep main.css chevron image; only position / padding change (background-color above).
   Dark chevron is #b8b8b8 (~5.7:1 on #3a3a3a): the thin 12x8 glyph read as dim grey at #a0a0a0. --- */
section.block.long .longBlock.formInput select,
.formRow .popUpBox select
{padding-right: 36px; background-position: right 12px center;}
[data-theme="dark"] section.block.long .longBlock.formInput select,
[data-theme="dark"] .formRow .popUpBox select
{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b8b8b8' d='M1.4 1.2L6 5.8l4.6-4.6L12 2.6 6 8.6 0 2.6z'/%3E%3C/svg%3E");}

/* --- Date / time: tighter side padding, no segment padding and a 14px picker icon, so "10/20/2026"
   + icon fits a 118px field at 16px (12px padding needed 131px). Header controls keep their dense rule. --- */
section.block.long .longBlock.formInput :is(input[type='date'], input[type='time'], input[type='datetime-local']),
.formRow .popUpBox :is(input[type='date'], input[type='time'], input[type='datetime-local']):not(.excludeFormPopRow)
{padding: 9px 8px 9px 10px;}
:is(section.block.long .longBlock.formInput, .formRow .popUpBox) input:is([type='date'], [type='time'], [type='datetime-local']):where(:not(.pageHeaderV2 *))::-webkit-datetime-edit-month-field,
:is(section.block.long .longBlock.formInput, .formRow .popUpBox) input:is([type='date'], [type='time'], [type='datetime-local']):where(:not(.pageHeaderV2 *))::-webkit-datetime-edit-day-field,
:is(section.block.long .longBlock.formInput, .formRow .popUpBox) input:is([type='date'], [type='time'], [type='datetime-local']):where(:not(.pageHeaderV2 *))::-webkit-datetime-edit-year-field,
:is(section.block.long .longBlock.formInput, .formRow .popUpBox) input:is([type='date'], [type='time'], [type='datetime-local']):where(:not(.pageHeaderV2 *))::-webkit-datetime-edit-hour-field,
:is(section.block.long .longBlock.formInput, .formRow .popUpBox) input:is([type='date'], [type='time'], [type='datetime-local']):where(:not(.pageHeaderV2 *))::-webkit-datetime-edit-minute-field,
:is(section.block.long .longBlock.formInput, .formRow .popUpBox) input:is([type='date'], [type='time'], [type='datetime-local']):where(:not(.pageHeaderV2 *))::-webkit-datetime-edit-ampm-field
{padding: 0;}
:is(section.block.long .longBlock.formInput, .formRow .popUpBox) input:is([type='date'], [type='time'], [type='datetime-local']):where(:not(.pageHeaderV2 *))::-webkit-calendar-picker-indicator
{margin: 0; padding: 0; width: 14px; height: 14px;}

/* --- Read-only / disabled. Text-like types only (select / checkbox also match :read-only). --- */
section.block.long .longBlock.formInput :is(input[type='text'], input[type='number'], input[type='password'], input[type='date'], input[type='time'], input[type='datetime-local'], textarea):read-only,
.formRow .popUpBox :is(textarea, input[type='text'], input[type='number']):read-only
{background-color: var(--fi-ro-bg);}

section.block.long .longBlock.formInput :is(input[type='text'], input[type='number'], input[type='password'], input[type='date'], input[type='time'], input[type='datetime-local'], textarea, select):disabled,
.formRow .popUpBox :is(textarea, select, input:not(.excludeFormPopRow):not([type='checkbox'], [type='radio'], [type='button'], [type='submit'], [type='reset'], [type='hidden'], [type='file'], [type='color'], [type='range'], [type='image'])):disabled,
.stdInput:disabled
{opacity: .5; cursor: not-allowed;}

/* --- Labels: sentence case 13px / 600. lgLabel rows (checkbox / toggle / selectRow) keep main.css.
   :where() keeps specificity equal to project rules such as `.xLargeCenter ... .subject label`, so those still win. --- */
section.block.long .longBlock.formInput .subject:where(:not(.lgLabel)) .formFieldLabel > label
{font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--fi-label); text-transform: none; letter-spacing: normal;}
section.block.long .longBlock.formInput .subject:where(:not(.lgLabel)) .formFieldLabel > label span.formRequired
{font-weight: 400;}

/* Field margin is 0 above, so the .subject gap is the only label spacing: 5px below, 6px on top. */
section.block.long .longBlock.formInput .subject:not(.directionRow) {gap: 5px;}
section.block.long.labelPositionTop .longBlock.formInput .subject:not(.directionRow) {gap: 6px;}

/* --- Label-on-top stacking. main.css gives a narrow section's div a fixed 60px border-box height with 10px
   top / bottom padding, but label (17px) + gap (6px) + field (44px) = 67px, so the content overflowed both
   edges and a stacked field sat ~3px above the next label. Let the div grow (min 60px keeps short content
   such as button / empty sections where they were) and trim the padding to 3px: field bottom to the next
   label is 3 + 10 (margin) + 3 = 16px, and a textarea row (heightDy) moves from 17px to 16px.
   Specificity 0,3,2: beats main.css `section.block.long.narrow > div` (0,3,1) by order, still loses to the
   spacer / thin / formOPbjAsBtn / largeImgPreview / defect-form rules. Skips checkbox / toggle rows, header
   controls and xLargeCenter. --- */
section.labelPositionTop.narrow:where(.block.long):where(:not(.xLargeCenter, .pageHeaderV2 *, :has(> .longBlock > .subject.directionRow))) > div.longBlock
{height: auto; min-height: 60px; padding-top: 3px; padding-bottom: 3px;}

/* --- Filter Apply button (FormFormatterGeneralFilterV2 / FilterFormV3: inline after the field sections).
   Field height and bottom-aligned with the label-top fields beside it: vertical-align bottom puts the
   button's margin box on the row bottom; 13px = div padding-bottom 3px + div margin-bottom 10px.
   Only Apply buttons that follow a label-top section; Save / Cancel / login buttons are unchanged. --- */
section.block.long.narrow.labelPositionTop ~ input.formBtn.formFilterVCenter
{box-sizing: border-box; height: var(--fi-h); margin-top: 0; margin-bottom: 13px; vertical-align: bottom;}

/* --- searchDependantV2: the wrapper is the outlined box; the inner input stays bare. --- */
section.block.long .longBlock.formInput .searchInputWrapper.searchDependantV2 {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0 12px;
	min-height: var(--fi-h);
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background-color: var(--fi-bg);
	transition: border-color .15s ease, box-shadow .15s ease;
}
section.block.long .longBlock.formInput .searchInputWrapper.searchDependantV2:hover {border-color: var(--fi-border-hover);}
section.block.long .longBlock.formInput .searchInputWrapper.searchDependantV2:focus-within {border-color: var(--fi-focus); box-shadow: 0 0 0 3px var(--fi-ring);}
section.block.long .longBlock.formInput .searchInputWrapper.searchDependantV2:has(input:user-invalid) {border-color: var(--fi-error);}
section.block.long .longBlock.formInput .searchInputWrapper.searchDependantV2 input[type='text'] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: var(--fi-fs);
}
/* Dropdown chevron (i.link.fa-angle-down). It used to inherit #333 from main.css `section.block > div`,
   which is invisible on the dark fill. --fi-icon keeps #333 in light; dark = #b8b8b8 like the select chevron.
   Table rows (.formRow) are excluded. */
section.block.long .longBlock.formInput .searchInputWrapper.searchDependantV2:where(:not(.formRow *)) > i
{color: var(--fi-icon);}

/* Header global search keeps its own pill look (main.css .globalSearchBar). */
section.block.long.globalSearchBar .longBlock.formInput input[type='text'] {min-height: 0; box-shadow: none;}

/* --- Dense: page-header filter controls stay compact so header bars don't grow.
   Re-states hover / focus border because main.css's header select rule sets a full border. --- */
.main.filled section.pageHeaderV2 .headerBtns section.block .longBlock.formInput :is(input[type='text'], input[type='number'], input[type='date'], input[type='time'], input[type='datetime-local'])
{min-height: 36px; padding: 6px 10px; margin: 0; font-size: 14px;}
.main.filled section.pageHeaderV2 .headerBtns section.block .longBlock.formInput select
{min-height: 36px; padding: 6px 32px 6px 10px; margin: 0; font-size: 14px; border: 1px solid var(--fi-border); border-radius: var(--fi-radius); background-position: right 10px center;}
.main.filled section.pageHeaderV2 .headerBtns section.block .longBlock.formInput :is(input[type='text'], input[type='number'], input[type='date'], input[type='time'], input[type='datetime-local'], select):hover {border-color: var(--fi-border-hover);}
.main.filled section.pageHeaderV2 .headerBtns section.block .longBlock.formInput :is(input[type='text'], input[type='number'], input[type='date'], input[type='time'], input[type='datetime-local'], select):focus {border-color: var(--fi-focus);}
.main.filled section.pageHeaderV2 .headerBtns section.block .longBlock.formInput .searchInputWrapper.searchDependantV2 {min-height: 36px; padding: 0 10px;}
.main.filled section.pageHeaderV2 .headerBtns section.block .longBlock.formInput .searchInputWrapper.searchDependantV2 input[type='text'] {min-height: 0; padding: 0;}

@media (prefers-reduced-motion: reduce) {
	section.block.long .longBlock.formInput :is(input, textarea, select),
	section.block.long .longBlock.formInput .searchInputWrapper.searchDependantV2,
	.formRow .popUpBox :is(textarea, select, input),
	.stdInput
	{transition: none;}
}

/* ==========================================================================
   Search-result dropdown (.searchResult popover) - floating card
   --------------------------------------------------------------------------
   The list under search / searchDependantV2 / selectDependantV2 / searchMulti
   fields and FormV2 table-cell searches: 1px --fi-dd-border card, 10px radius,
   soft shadow, 4px inner padding, 6px below the field, rounded rows without
   divider lines, a tinted hover, a 22px / 1fr grid for multi-select rows and a
   muted "no results" row. Replaces main.css's grey #ccc box with side borders.

   Excluded (they keep their own look): header menus (.filterHeadResult incl.
   #headerMenuUser / #headerMenuHelp / #headerMenuFav, .helpMenu, .favorites),
   table-header filters (.formRow.head), help tooltips (.helpTooltipHeadResult,
   .formRowHelpResult, .alPermHelpResult), action menus (.actionFunctionResult),
   AP category menu (.apCategoryMenu), the header global search
   (.globalSearchBar) and userSearchSelect.

   Specificity: `:root div.searchResult` (0,2,1) beats main.css
   `.searchResult.fixed` / `.searchResult[popover]` / `.formRow .searchResult`
   (0,2,0). Nested `& > div` is (0,2,2) and the row hover (0,4,2), equal to
   main.css's nested row rules (`:is(.searchResult, .formRow div.actionFunctionResult, ...)`
   takes the 0,2,1 of its heaviest member), so this sheet wins by load order.
   The exclusion list sits in :where() and adds nothing.
   Position: main.css keeps the anchor (left, width clamp and the
   @position-try --searchBarTextField fallback); only `top` moves to +6px.
   ========================================================================== */
:root div.searchResult:where(:not(.filterHeadResult, .helpMenu, .favorites, #headerMenuUser-searchResult, #headerMenuHelp-searchResult, #headerMenuFav-searchResult, .helpTooltipHeadResult, .formRowHelpResult, .alPermHelpResult, .actionFunctionResult, .apCategoryMenu, .formRow.head *, .globalSearchBar *, .userSearchSelect *))
{
	top: calc(anchor(bottom) + var(--fi-dd-gap));
	box-sizing: border-box;
	padding: var(--fi-dd-pad);
	border: 1px solid var(--fi-dd-border);
	border-radius: var(--fi-dd-radius);
	background-color: var(--fi-dd-bg);
	box-shadow: var(--fi-dd-shadow);
	color: var(--fi-dd-text);
	font-size: var(--fi-dd-fs);
	max-height: var(--fi-dd-max-h);
	overflow-y: auto;
	scrollbar-width: thin;

	/* Rows: transparent, rounded, no divider, 1px apart. Labels WRAP: the server already shortens long
	   labels and then appends suffixes such as " (Archived)", which a CSS ellipsis would hide.
	   (PTB table-cell lists re-apply nowrap / ellipsis in ptbMain.css.) */
	& > div {
		box-sizing: border-box;
		margin: 0;
		padding: var(--fi-dd-row-pad);
		border: 0;
		border-radius: var(--fi-dd-row-radius);
		background-color: transparent;
		color: var(--fi-dd-text);
		font-size: var(--fi-dd-fs);
		line-height: 1.35;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		overflow-wrap: anywhere;
	}
	& > div + div {margin-top: 1px;}
	& > div:not(.noLink) {cursor: pointer;}
	& > div:not(.noLink):hover,
	& > div.multiSelect:hover
	{background-color: var(--fi-dd-hover);}

	/* Empty / info row ("No results found."): muted, no hover. */
	& > div.noLink:not(.multiSelect) {color: var(--fi-dd-muted); cursor: default;}

	/* Multi-select rows (Formatter.php): checkbox (inline 20px) + label span. */
	& > div.multiSelect {
		display: grid;
		grid-template-columns: 22px 1fr;
		column-gap: 8px;
		align-items: center;
		cursor: pointer;
	}
	& > div.multiSelect > input[type='checkbox'] {margin: 0; accent-color: var(--primary, #255697); cursor: pointer;}
	/* Label wraps beside the centred checkbox; white-space is inherited, so a nowrap table-cell row still ellipsizes. */
	& > div.multiSelect > span {min-width: 0; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere;}
	/* "Select All" (first row, its checkbox id ends in -selectAll): bold, divider below. */
	& > div.multiSelect:first-child:has(> input[id$='-selectAll']) {
		font-weight: 700;
		border-bottom: 1px solid var(--fi-dd-divider);
		border-radius: var(--fi-dd-row-radius) var(--fi-dd-row-radius) 0 0;
		margin-bottom: 3px;
	}

	/* Status pills keep main.css colours; centre them on the text line. */
	& span.tag {vertical-align: 1px; line-height: 1.3;}
}

/* FormV2 table cells: rows stay opaque (fill = card colour) so main.css's .formRow.red / .blue / .green
   row tint and white text don't bleed into the list. (0,3,2) beats `.formRow.red .searchResult > div` (0,3,1). */
:root .formRow div.searchResult:where(:not(.filterHeadResult, .helpMenu, .favorites, .helpTooltipHeadResult, .formRowHelpResult, .alPermHelpResult, .actionFunctionResult, .apCategoryMenu, .formRow.head *, .userSearchSelect *))
{
	& > div {background-color: var(--fi-dd-bg); color: var(--fi-dd-text);}
	& > div:is(:not(.noLink), .multiSelect):hover {background-color: var(--fi-dd-hover); color: var(--fi-dd-text);}
}

[data-theme="dark"] div.searchResult:where(:not(.filterHeadResult, .helpMenu, .favorites, #headerMenuUser-searchResult, #headerMenuHelp-searchResult, #headerMenuFav-searchResult, .helpTooltipHeadResult, .formRowHelpResult, .alPermHelpResult, .actionFunctionResult, .apCategoryMenu, .formRow.head *, .globalSearchBar *, .userSearchSelect *))
{color-scheme: dark;}