/* lms_form.css — Phase 2
 * Forms, custom pop-out <select> combobox, focus rings, input primitives.
 * Tokens come from lms_tokens.css. Brand stays forest green + signature accent.
 *
 * The .lms-select-pop pattern uses the Popover API where available
 * (popover="auto" gives top-layer + free outside-click + Esc + inert
 * siblings). When the API is missing, the same structure falls through to
 * the existing .staff-form-select (lms_staff_portal.css) — every pop-out
 * keeps a <select class="lms-fallback-select"> for that path.
 */

/* ----- Form cards (R46-9) --------------------------------------------- */
/* Long forms (e.g. New loan application) wrap each thematic section
   (Customer, Loan terms, Classification, Household, Collateral) in a
   bordered card with a coloured top stripe + label. This replaces the
   previous flat .lms-section-header <h4> layout, which read as one
   continuous form with no visual separation between groupings. */
.lms-form-card {
	border: 1px solid var(--lms-border);
	border-radius: var(--lms-radius);
	background: var(--lms-surface);
	overflow: hidden;
	/* R46-9 fix: the parent .lms-form is `display: flex; flex-direction: column`
	   inside a constrained-height modal body. Default flex-shrink:1 lets
	   flex collapse each card to just the header height (54-83px), hiding
	   the body content (217-341px) under the card's overflow:hidden.
	   Lock shrink so each card keeps its natural height. */
	flex-shrink: 0;
}
.lms-form-card + .lms-form-card {
	margin-top: 1.25rem;
}
.lms-form-card__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 1rem;
	background: var(--lms-surface-alt, var(--lms-surface));
	border-bottom: 1px solid var(--lms-border);
}
.lms-form-card__stripe {
	display: block;
	width: 4px;
	height: 18px;
	border-radius: 2px;
	background: var(--lms-primary);
	flex-shrink: 0;
}
.lms-form-card__head h4 {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--lms-text);
	letter-spacing: 0.005em;
}
.lms-form-card__body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.lms-form-card__body > .lms-grid-2 {
	margin: 0;
}

/* Inline product hints — Rate / Max amount readouts that appear under
   the product <select> so the officer sees the product's defaults
   without scrolling down to the rate field. */
.lms-app-product-hints {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
	padding: 0.5rem 0.75rem;
	background: var(--lms-surface-alt, var(--lms-surface));
	border: 1px dashed var(--lms-border);
	border-radius: var(--lms-radius-sm);
	font-size: 0.8rem;
	color: var(--lms-text-muted);
	margin-top: 0.5rem;
}
.lms-app-product-hints[hidden] {
	display: none;
}
/* R46-11 fix: default <span> is `display:inline`, which makes the hints
   anonymous flex items inside the parent `.lms-app-product-hints` flex
   container — the parent's `gap: 1.25rem` then fails to separate them
   on render (they collapse into "Rate: 18% / yrMax amount: 500,000").
   `inline-flex` makes each hint a single inline-flex box whose strong
   + value span align horizontally with their own gap, and the parent
   `gap` then correctly separates the hint boxes from each other.
   `white-space: nowrap` keeps "Rate: 18% / yr" on one line per hint. */
.lms-app-product-hint {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
}
.lms-app-product-hint strong {
	color: var(--lms-text);
	font-weight: 600;
	margin-right: 0.25rem;
}

/* #47: borrower info summary — a read-only strip that shows the selected
   borrower's name, mobile, email, national ID, and KYC status so the
   officer can verify they have the right borrower before filling in
   the loan terms. */
.lms-app-borrower-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0.5rem 1rem;
	padding: 0.75rem 1rem;
	margin-top: 0.5rem;
	border: 1px solid var(--lms-border);
	border-radius: var(--lms-radius-sm);
	background: var(--lms-surface-alt);
}
.lms-app-borrower-summary[hidden] {
	display: none;
}
.lms-app-borrower-summary__row {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}
.lms-app-borrower-summary__label {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--lms-text-muted);
	font-weight: 600;
}
.lms-app-borrower-summary__value {
	font-size: 0.85rem;
	color: var(--lms-text);
	font-weight: 500;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* ----- Input primitives ----------------------------------------------- */

/* Single source of truth for form control sizing/styling. Every <input>,
 * <select>, <textarea>, and the popout trigger <button> all match this
 * so a control always renders at the same height/border/padding. Without
 * this the trigger button falls back to browser defaults
 * (`2px outset rgb(0,0,0)`, font 13.3px) and looks 2008. */
.lms-input,
.lms-form .lms-input,
.lms-form input[type="text"],
.lms-form input[type="number"],
.lms-form input[type="email"],
.lms-form input[type="tel"],
.lms-form input[type="date"],
.lms-form input[type="search"],
.lms-form textarea,
.lms-fallback-select,
.lms-select-pop__trigger,
.lms-modal input[type="text"],
.lms-modal input[type="number"],
.lms-modal input[type="email"],
.lms-modal input[type="tel"],
.lms-modal input[type="date"],
.lms-modal textarea,
.lms-modal select,
.lms-modal .lms-select-pop__trigger {
	width: 100%;
	min-height: var(--lms-form-input-height);
	padding: var(--lms-form-pad-y) var(--lms-form-pad-x);
	font-family: inherit;
	font-size: var(--lms-fs-base);
	line-height: 1.4;
	color: var(--lms-text);
	background: var(--lms-surface);
	border: 1px solid var(--lms-form-border);
	border-radius: var(--lms-form-radius);
	box-shadow: none;
	box-sizing: border-box;
	transition: border-color var(--lms-transition-fast),
		box-shadow var(--lms-transition-fast),
		background-color var(--lms-transition-fast);
}

.lms-form input:focus,
.lms-form textarea:focus,
.lms-form .lms-input:focus,
.lms-input:focus {
	border-color: var(--lms-primary);
	box-shadow: var(--lms-form-focus-ring);
}

/* When the form lives inside a modal, give it horizontal padding so
 * inputs don't sit flush against the modal's edges. The form is the
 * "body" of many modals (LMSModal) so it needs the same gutter as
 * .lms-modal__body. */
.lms-modal .lms-form,
.lms-modal__body {
	/* R46-6: bumped top padding from 0.25rem → 1.5rem so the first
	 * content row breathes below the dark-green header band. */
	padding: 1.5rem 1.5rem;
	/* When the form is the body, let it scroll while header and actions
	 * stay pinned. The .lms-modal is flex column so flex:1 fills the
	 * remaining height between header and actions. */
	overflow-y: auto;
	min-height: 0;
	flex: 1 1 auto;
}

.lms-form .lms-form-row {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.lms-form .lms-form-row > * {
	flex: 1 1 12rem;
	min-width: 0;
}

.lms-form label,
.lms-modal label,
.lms-grid-2 > label {
	display: block;
	font-size: var(--lms-fs-sm);
	font-weight: 600;
	color: var(--lms-text);
	margin-bottom: 0.4rem;
	letter-spacing: 0.01em;
}

/* Form label + input pairs read clearly even without asterisks:
 * light hint text under each label, monospaced placeholder, etc. */
.lms-form .lms-hint,
.lms-modal .lms-hint {
	display: block;
	font-size: 0.8rem;
	color: var(--lms-text-muted);
	margin-top: 0.3rem;
	line-height: 1.4;
}

/* Native fallback <select> — matches the staff form-select. */
.lms-fallback-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2rem;
}

/* ----- .lms-select-pop — pop-out combobox ----------------------------- */

.lms-select-pop {
	position: relative;
	display: block;
	width: 100%;
}

.lms-select-pop__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	min-height: var(--lms-form-input-height);
	padding: var(--lms-form-pad-y) var(--lms-form-pad-x);
	font-family: inherit;
	font-size: var(--lms-fs-base);
	line-height: 1.4;
	color: var(--lms-text);
	background: var(--lms-surface);
	border: 1px solid var(--lms-form-border);
	border-radius: var(--lms-form-radius);
	cursor: pointer;
	text-align: left;
	box-shadow: none;
	box-sizing: border-box;
	transition: border-color var(--lms-transition-fast),
		box-shadow var(--lms-transition-fast),
		background-color var(--lms-transition-fast);
}

.lms-select-pop__trigger:hover {
	border-color: var(--lms-primary);
	background: var(--lms-surface-alt, var(--lms-surface));
}

.lms-select-pop__trigger:focus-visible {
	outline: none;
	border-color: var(--lms-primary);
	box-shadow: var(--lms-form-focus-ring);
}

.lms-select-pop__trigger[aria-expanded="true"] {
	border-color: var(--lms-primary);
	box-shadow: var(--lms-form-focus-ring);
	background: var(--lms-surface);
}

.lms-select-pop__trigger-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

.lms-select-pop__trigger-text--placeholder {
	color: var(--lms-text-muted);
	font-weight: 400;
}

.lms-select-pop__trigger-caret {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--lms-text-muted);
	transition: transform var(--lms-transition-fast);
	opacity: 0.7;
}

.lms-select-pop__trigger[aria-expanded="true"] .lms-select-pop__trigger-caret {
	transform: rotate(180deg);
}

/* Popover menu — uses Popover API for top-layer + free dismiss.
 * The menu is detached to <body> at bind time so modal/dialog ancestors
 * don't clip the open listbox with overflow:hidden. Default opacity is
 * 0 (invisible) and pointer-events:none so an unopened menu does not
 * intercept clicks; the data-open="1" attribute reveals it.
 *
 * Important: the Popover API auto-centers via `margin: auto`; we override
 * that to zero so the JS `positionMenu` math (fixed coords relative to
 * the trigger) is the only thing that places the element. */
.lms-select-pop__menu {
	position: fixed;
	inset: auto;
	margin: 0 !important;
	display: block;
	pointer-events: none;
	visibility: hidden;
	min-width: 14rem;
	max-width: min(28rem, 92vw);
	max-height: min(20rem, 70vh);
	overflow-y: auto;
	padding: 0.35rem;
	background: var(--lms-surface);
	border: 1px solid var(--lms-border);
	border-radius: var(--lms-radius);
	box-shadow: var(--lms-shadow-3);
	color: var(--lms-text);
	z-index: var(--lms-z-popover, 90);

	/* Entry animation: opacity + small translate-up */
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--lms-transition-fast) var(--lms-ease-out-quart),
		transform var(--lms-transition-fast) var(--lms-ease-out-quart);
}

/* Open state — both Popover API and manual data-open="1" trigger it. */
.lms-select-pop__menu:popover-open,
.lms-select-pop__menu[data-open="1"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

@supports not (selector(:popover-open)) {
	.lms-select-pop__menu[data-open="1"] {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}
}

/* Optional sticky search input at the top of the menu */
.lms-select-pop__search {
	width: calc(100% - 0.5rem);
	margin: 0.15rem 0 0.35rem;
	padding: 0.45rem 0.65rem;
	font-size: var(--lms-fs-sm);
	color: var(--lms-text);
	background: var(--lms-surface-alt);
	border: 1px solid var(--lms-border);
	border-radius: var(--lms-radius-sm);
}

.lms-select-pop__search:focus-visible {
	outline: 2px solid var(--lms-focus);
	outline-offset: 1px;
}

/* Options */
.lms-select-pop__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	font-size: 0.9rem;
	color: var(--lms-text);
	border-radius: var(--lms-radius-sm);
	cursor: pointer;
	user-select: none;
	line-height: 1.4;
	/* Allow attribute selector styling without :hover bleed */
	transition: background var(--lms-transition-fast), color var(--lms-transition-fast);
}

.lms-select-pop__option[aria-selected="true"] {
	background: color-mix(in oklch, var(--lms-primary) 10%, transparent);
	color: var(--lms-primary);
	font-weight: 600;
}

.lms-select-pop__option--active,
.lms-select-pop__option:hover {
	background: var(--lms-surface-alt);
}

.lms-select-pop__option--selected.lms-select-pop__option--active,
.lms-select-pop__option--selected:hover {
	background: color-mix(in oklch, var(--lms-primary) 18%, transparent);
}

.lms-select-pop__option-check {
	flex-shrink: 0;
	width: 1em;
	color: var(--lms-primary);
	opacity: 0;
}

.lms-select-pop__option--selected .lms-select-pop__option-check {
	opacity: 1;
}

.lms-select-pop__option-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lms-select-pop__empty {
	padding: 0.75rem;
	color: var(--lms-text-muted);
	font-size: var(--lms-fs-sm);
	text-align: center;
}