/* ==========================================================================
   SISU CANONICAL FORM LAYOUT
   ==========================================================================
   Load order: after app.css (see index.html).

   This file defines the canonical CSS model for desktop ERP forms.
   New forms should use .sisu-form-* classes.
   Existing forms using .tab-form-* continue to work; see app.css.

   ── LAYOUT MODES ──────────────────────────────────────────────────────────

	 MODE A — Single-column
	   .sisu-form > .sisu-form-body > (field rows)

	 MODE B — Two-column (left fields, right panel/embedded grid)
	   .sisu-form > .sisu-form-two-col
						> .sisu-form-col-left  > (field rows)
						> .sisu-form-col-right > (grid / child panel)

	 MODE C — Tabbed
	   .sisu-form > .sisu-form-tabs(.tab-form) > RadzenTabs
				 > .sisu-form-footer

	 MODE D — Section/card-based
	   .sisu-form-body > .sisu-form-section > (field rows)

   ── FIELD ROW PATTERN ────────────────────────────────────────────────────

	 <div class="sisu-form-field-row">
	   <label class="sisu-form-label">…</label>
	   <input  class="sisu-form-input" />
	 </div>

   ── LABEL WIDTH TOKEN ────────────────────────────────────────────────────

	 Apply one of these modifier classes on the nearest .sisu-form ancestor
	 to change all label widths inside that form context:

	   .sisu-form--label-sm   →  80px
	   .sisu-form--label-md   → 120px  (default)
	   .sisu-form--label-lg   → 150px

	 Or set the custom property directly on any container:
	   style="--sisu-form-label-width: 140px"

   ========================================================================== */


/* --------------------------------------------------------------------------
   CSS Custom Properties — form layout tokens
   -------------------------------------------------------------------------- */
:root {
	/* Label width (override per-form via modifier class or inline style) */
	--sisu-form-label-width: 120px;

	/* Row gap between fields */
	--sisu-form-row-gap: 0.5rem;

	/* Gap between label and input within a field row */
	--sisu-form-field-gap: 0.3rem;

	/* Section bottom margin */
	--sisu-form-section-gap: 0.75rem;
}


/* --------------------------------------------------------------------------
   Form shell
   -------------------------------------------------------------------------- */

.sisu-form {
	display: flex;
	flex-direction: column;
	width: 100%;
}


/* --------------------------------------------------------------------------
   Toolbar / action bar (FormNavbarComponent host)
   -------------------------------------------------------------------------- */

.sisu-form-toolbar {
	flex: 0 0 auto;
}


/* --------------------------------------------------------------------------
   Form body
   Body is auto-height by default; dialog container handles scroll.
   Add .sisu-form-body--scrollable when the form is NOT inside a dialog
   and needs its own scroll area.
   -------------------------------------------------------------------------- */

.sisu-form-body {
	flex: 1 1 auto;
	min-height: 0;
}

.sisu-form-body--scrollable {
	overflow-y: auto;
	overflow-x: hidden;
}


/* --------------------------------------------------------------------------
   Form footer — sticky action buttons
   Aliased behavior matches .dialog-footer in app.css.
   -------------------------------------------------------------------------- */

.sisu-form-footer {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1rem;
	padding-top: 0.25rem;
}


/* --------------------------------------------------------------------------
   Two-column body layout
   .sisu-form-col-left  — field inputs panel (scrolls independently)
   .sisu-form-col-right — child panel / embedded grid area
   -------------------------------------------------------------------------- */

.sisu-form-two-col {
	display: flex;
	align-items: stretch;
	width: 100%;
	gap: 0;
}

/*
  Left panel: no viewport-height max-height.
  The dialog body (sisu-tab-dialog-body) already handles page-level scroll.
  overflow-y: auto lets this panel scroll independently only when it is
  taller than its own layout context (e.g., inside a constrained flex parent).
*/
.sisu-form-col-left {
	overflow-y: auto;
	overflow-x: hidden;
}

.sisu-form-col-right {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Responsive: stack columns on narrow viewports */
@media (max-width: 900px) {
	.sisu-form-two-col {
		flex-direction: column;
	}

	.sisu-form-col-left,
	.sisu-form-col-right {
		width: 100%;
	}
}


/* --------------------------------------------------------------------------
   Section / card grouping
   Wraps a RadzenFieldset or equivalent card inside a form body.
   -------------------------------------------------------------------------- */

.sisu-form-section {
	margin-bottom: var(--sisu-form-section-gap);
}


/* --------------------------------------------------------------------------
   Field row — canonical label + input row pattern
   Replaces the RadzenStack Horizontal + .tab-form-label + .tab-form-input
   pattern for new forms.
   -------------------------------------------------------------------------- */

.sisu-form-field-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: var(--sisu-form-field-gap);
	/*
	 * position: relative makes this row the containing block for
	 * .rz-message-popup (position: absolute). The popup anchors to the
	 * field row and scrolls out of view with it when the dialog body
	 * (overflow: auto) scrolls — no JS required.
	 */
	position: relative;
}

.sisu-form-label {
	flex: 0 0 var(--sisu-form-label-width);
	text-align: left;
}

.sisu-form-input {
	flex: 1 1 auto;
	position: relative;
	min-width: 0;
}

/*
 * Popup validator positioning for GenericForm fields.
 *
 * .sisu-form-input is now the containing block (position: relative).
 * top: 100% places the popup flush below the input slot.
 * right: 0; left: auto aligns the popup to the input's right edge.
 * translateY(2px) adds a small visual gap without shifting layout.
 * z-index: 1 keeps the popup above sibling field rows.
 */
.sisu-form-input .rz-message-popup {
	top: 100%;
	right: 0;
	left: auto;
	transform: translateY(2px);
	z-index: 1;
}

/* AutoComplete / RadzenFormField children fill their flex slot */
.sisu-form-input > .rz-form-field {
	width: 100%;
	margin-bottom: 0;
}

/* Color picker stays compact — does not stretch to fill the input slot */
.sisu-form-input > .rz-colorpicker-trigger,
.sisu-form-input > .rz-colorpicker {
	width: auto;
	flex: 0 0 auto;
}


/* --------------------------------------------------------------------------
   Label-width modifier classes
   Apply on .sisu-form or any ancestor to shift all labels inside.
   -------------------------------------------------------------------------- */

.sisu-form--label-sm { --sisu-form-label-width: 80px; }
.sisu-form--label-md { --sisu-form-label-width: 120px; }
.sisu-form--label-lg { --sisu-form-label-width: 150px; }


/* --------------------------------------------------------------------------
   Embedded grid zone within a form
   Provides a bounded, scrollable container for child line-item grids.
   Equivalent to the ag-fi-lines-wrapper pattern but generic.

   Sizes:
	 .sisu-form-embedded-grid          →  22rem – clamp(26rem, 58vh, 46rem)
	 .sisu-form-embedded-grid--sm      →  14rem fixed
	 .sisu-form-embedded-grid--lg      →  30rem – clamp(34rem, 65vh, 54rem)

   Usage:
	 <div class="sisu-form-embedded-grid">
	   <RadzenDataGrid … />
	 </div>
   -------------------------------------------------------------------------- */

.sisu-form-embedded-grid {
	min-height: 22rem;
	max-height: clamp(26rem, 58vh, 46rem);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.sisu-form-embedded-grid--sm {
	min-height: 14rem;
	max-height: 18rem;
}

.sisu-form-embedded-grid--lg {
	min-height: 30rem;
	max-height: clamp(34rem, 65vh, 54rem);
}

/* Embedded grid internal flex — grid fills the wrapper */
.sisu-form-embedded-grid .rz-card {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.sisu-form-embedded-grid .rz-data-grid {
	flex: 1 1 auto;
	min-height: 0;
	height: 100% !important;
	max-height: 100%;
}

@media (max-width: 1199px) {
	.sisu-form-embedded-grid {
		min-height: 18rem;
		max-height: 32rem;
	}
}

@media (max-width: 767px) {
	.sisu-form-embedded-grid {
		min-height: 14rem;
		max-height: 22rem;
	}
}


/* --------------------------------------------------------------------------
   AutoComplete wrapper — popup message anchoring
   Wraps RadzenFormField + not-recognised message so the message is always
   a child of a positioned block, never a sibling in a flex row.

   .sisu-autocomplete-wrapper  — single flex item for the parent row;
								  provides the positioning context for
								  the absolutely-placed popup message.

   .sisu-autocomplete-message-popup  — mirrors .tab-form-row .rz-message-popup
										but scoped to the autocomplete input.
   -------------------------------------------------------------------------- */

.sisu-autocomplete-wrapper {
	position: relative;
	width: 100%;
}

.sisu-autocomplete-message-popup {
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	transform: translateY(2px);
	z-index: 1;
}