/*
 * Uniforme Homey-achtige presentatielaag voor alle Installer-kaartvelden.
 *
 * Deze stylesheet verandert alleen presentatie. Technische bronselects,
 * mappings en overrides blijven eigendom van hun bestaande modules.
 */
.hfl-flow-graph__node {
	--hfl-field-border: #d9e1ea;
	--hfl-field-border-focus: #1592f2;
	--hfl-field-bg: #fff;
	--hfl-field-shell: #fbfcfe;
	--hfl-field-label: #8b96a5;
	--hfl-field-text: #26313f;
	--hfl-field-radius: 12px;
}

/* Eén visuele taal voor veldcontainers. */
.hfl-flow-graph__binding,
.hfl-flow-portable-field,
.hfl-flow-graph__comparison,
.hfl-flow-graph__message,
.hfl-card-editor__rich-text,
.hfl-typed-action__row,
.hfl-typed-action__value,
.hfl-flow-delay__editor {
	border: 1px solid var( --hfl-field-border );
	border-radius: var( --hfl-field-radius );
	background: var( --hfl-field-bg );
	box-shadow: none;
}

.hfl-flow-graph__binding,
.hfl-flow-portable-field,
.hfl-flow-graph__comparison,
.hfl-card-editor__rich-text,
.hfl-typed-action__row,
.hfl-typed-action__value {
	padding: 9px;
}

.hfl-flow-graph__message {
	padding: 9px;
}

/* Veldlabels zoals VARIABELE / WAARDE in Homey. */
.hfl-flow-portable-field > span,
.hfl-flow-graph__message > span,
.hfl-card-editor__field-label,
.hfl-typed-action__label,
.hfl-flow-graph__comparison-source-label,
.hfl-flow-graph__binding > span:first-child {
	color: var( --hfl-field-label );
	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .025em;
	text-transform: uppercase;
}

/* Native inputs/selects krijgen dezelfde compacte Homey-vorm. */
.hfl-flow-portable-field input,
.hfl-flow-portable-field select:not(.hfl-value-picker__native),
.hfl-flow-graph__comparison select:not(.hfl-value-picker__native),
.hfl-flow-graph__comparison input,
.hfl-flow-graph__message textarea,
.hfl-card-editor__literal,
.hfl-flow-delay__editor input,
.hfl-typed-action input,
.hfl-typed-action select:not(.hfl-value-picker__native) {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	border: 1px solid var( --hfl-field-border );
	border-radius: 10px;
	background: var( --hfl-field-bg );
	color: var( --hfl-field-text );
	box-shadow: none;
	outline: 0;
	font: inherit;
	font-size: 12px;
}

.hfl-flow-portable-field input,
.hfl-flow-portable-field select:not(.hfl-value-picker__native),
.hfl-flow-graph__comparison select:not(.hfl-value-picker__native),
.hfl-flow-graph__comparison input,
.hfl-flow-delay__editor input,
.hfl-typed-action input,
.hfl-typed-action select:not(.hfl-value-picker__native) {
	height: 36px;
	padding: 6px 9px;
}

.hfl-flow-graph__message textarea {
	min-height: 68px;
	padding: 8px 9px;
	resize: vertical;
}

.hfl-flow-portable-field input:focus,
.hfl-flow-portable-field select:not(.hfl-value-picker__native):focus,
.hfl-flow-graph__comparison select:not(.hfl-value-picker__native):focus,
.hfl-flow-graph__comparison input:focus,
.hfl-flow-graph__message textarea:focus,
.hfl-flow-delay__editor input:focus,
.hfl-typed-action input:focus,
.hfl-typed-action select:not(.hfl-value-picker__native):focus {
	border-color: var( --hfl-field-border-focus );
	box-shadow: 0 0 0 2px rgba( 21, 146, 242, .10 );
}

/* Alle rich/select buttons krijgen dezelfde vorm als het referentieveld. */
.hfl-flow-graph__node .hfl-value-picker__button,
.hfl-flow-graph__binding {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-width: 0;
	min-height: 36px;
	box-sizing: border-box;
	padding: 5px 9px;
	border: 1px solid var( --hfl-field-border );
	border-radius: 10px;
	background: var( --hfl-field-bg );
	color: var( --hfl-field-text );
	font: inherit;
	font-size: 12px;
	text-align: left;
	cursor: pointer;
}

.hfl-flow-graph__node .hfl-value-picker__button:hover,
.hfl-flow-graph__node .hfl-value-picker__button:focus-visible,
.hfl-flow-graph__node .hfl-value-picker__button[aria-expanded="true"],
.hfl-flow-graph__binding:hover,
.hfl-flow-graph__binding:focus-visible {
	border-color: var( --hfl-field-border-focus );
	outline: 0;
	box-shadow: 0 0 0 2px rgba( 21, 146, 242, .10 );
}

.hfl-flow-graph__binding {
	display: grid;
	grid-template-columns: minmax( 68px, .72fr ) minmax( 0, 1.28fr );
}

.hfl-flow-graph__binding > span:first-child,
.hfl-flow-graph__binding strong {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hfl-flow-graph__binding strong {
	font-size: 12px;
	color: var( --hfl-field-text );
}

/* Vergelijkingskaarten en portable velden gebruiken dezelfde binnenvelden. */
.hfl-flow-graph__comparison {
	gap: 7px;
}

.hfl-flow-graph__comparison-operand {
	gap: 7px;
}

.hfl-flow-graph__comparison-source {
	height: 36px;
	border: 1px solid var( --hfl-field-border );
	border-radius: 10px;
	background: #fff;
	font-size: 12px;
	font-weight: 700;
}

.hfl-flow-graph__comparison-operator {
	color: #596577;
	font-size: 11px;
	font-weight: 800;
}

/* Rich text lijkt visueel op één Homey invoerveld. */
.hfl-card-editor__rich-line {
	min-height: 36px;
	padding: 5px 7px;
	border: 1px solid var( --hfl-field-border );
	border-radius: 10px;
	background: #fff;
}

/* Homey-popup overal identiek, ongeacht welk type kaart hem opent. */
.hfl-value-picker__panel,
.hfl-flow-binding-picker {
	padding: 7px;
	border: 1px solid #e1e6ec;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 32px rgba( 31, 42, 55, .18 );
	backdrop-filter: none;
}

.hfl-value-picker__search-wrap,
.hfl-flow-binding-picker__search {
	height: 36px;
	margin-bottom: 6px;
	padding: 0 10px;
	border: 1px solid #d7dee7;
	border-radius: 10px;
	background: #fff;
}

.hfl-value-picker__group-title,
.hfl-flow-binding-picker__group {
	padding: 5px 8px 4px;
	color: #97a1ae;
	font-size: 10px;
	font-weight: 700;
	text-transform: none;
}

.hfl-value-picker__option,
.hfl-flow-binding-picker__option {
	min-height: 34px;
	padding: 5px 8px;
	border-radius: 9px;
	font-size: 12px;
}

.hfl-value-picker__option.is-selected,
.hfl-flow-binding-picker__option.is-selected {
	background: #e8f4ff;
}

.hfl-value-picker__option:hover,
.hfl-value-picker__option:focus-visible,
.hfl-flow-binding-picker__option:hover,
.hfl-flow-binding-picker__option:focus-visible {
	background: #f0f7ff;
}

/* Datatype-iconen delen overal dezelfde Homey-kleuren en maat. */
.hfl-value-picker__token-icon,
.hfl-flow-binding-picker__badge,
.hfl-card-editor__type,
.hfl-typed-action__type b {
	width: 18px;
	height: 18px;
	font-size: 11px;
	color: #fff !important;
	text-shadow: none !important;
}

.hfl-value-picker__token-icon *,
.hfl-flow-binding-picker__badge *,
.hfl-card-editor__type *,
.hfl-typed-action__type b * {
	color: #fff !important;
}

/* Lange labels/waardes mogen een kaart nooit uitduwen of eronder uitsteken. */
.hfl-flow-graph__node,
.hfl-flow-graph__bindings,
.hfl-flow-portable-fields,
.hfl-typed-action,
.hfl-card-editor__rich-text {
	min-width: 0;
}

.hfl-flow-graph__node h5,
.hfl-flow-portable-field,
.hfl-typed-action__row,
.hfl-typed-action__value,
.hfl-card-editor__rich-line {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Kaarten blijven compact, ook wanneer meerdere velden aanwezig zijn. */
.hfl-flow-graph__bindings,
.hfl-flow-portable-fields,
.hfl-typed-action {
	gap: 7px;
}

@media ( max-width: 700px ) {
	.hfl-flow-graph__binding,
	.hfl-flow-graph__comparison-operand {
		grid-template-columns: 1fr;
	}
}