/* ------------------------------------------------------------------
 * Shared form-field layout (application form, detail preview, builder)
 * ------------------------------------------------------------------ */
.wuf-ff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.wuf-ff-full { grid-column: 1 / -1; }
.wuf-ff-half { grid-column: span 1; }
.wuf-ff[hidden] { display: none !important; }
.wuf-ff .wuf-app-field { margin: 0; }
.wuf-ff fieldset.wuf-app-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.wuf-ff fieldset.wuf-app-field > legend { padding: 0; margin-bottom: 7px; font-size: 12px; font-weight: 750; color: #37444d; }
.wuf-ff-tag { margin-left: 6px; padding: 1px 6px; border-radius: 10px; background: #f1f2f2; color: #67737c; font-size: 10px; font-style: normal; font-weight: 700; }
.wuf-ff-range-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.wuf-ff-range-row label { flex: 1 1 140px; min-width: 0; }
.wuf-ff-range-row input { width: 100%; padding: 10px 11px; border: 1px solid #e0e4e5; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; }
.wuf-ff-range-row > span { color: var(--wuf-muted); font-size: 12px; }
.wuf-ff-choice-list { display: grid; gap: 8px; }
.wuf-ff-inline { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.wuf-ff-choice-list .wuf-app-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #2f3a42; cursor: pointer; }
.wuf-ff-checklist .wuf-ff-choice-list { margin-top: 8px; }
.wuf-ff-checklist .wuf-app-check { padding: 10px 11px; border: 1px solid var(--wuf-line); border-radius: 8px; background: #fff; }
.wuf-ff-checklist .wuf-app-check:has(input:checked) { border-color: #b9dfcf; background: #f2faf6; }
.wuf-ff .wuf-ff-choice-list input[type] { flex: 0 0 auto; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--wuf-orange); }
.wuf-ff select[multiple] { min-height: 90px; }
.wuf-ff input[readonly], .wuf-ff textarea[readonly] { background: #f7f6f4; color: #59656e; }
.wuf-ff-declaration { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: #2f3a42; }
.wuf-ff .wuf-ff-declaration input[type] { flex: 0 0 auto; width: 16px; height: 16px; min-height: 0; margin: 3px 0 0; accent-color: var(--wuf-orange); }

/* ------------------------------------------------------------------
 * Template list
 * ------------------------------------------------------------------ */
.wuf-templates-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.wuf-templates-toolbar .wuf-page-lead { margin: 0; font-size: 13px; }
.wuf-template-row { flex-wrap: wrap; }
.wuf-template-row.is-archived { opacity: .72; }
.wuf-template-main { min-width: 0; flex: 1 1 260px; }
.wuf-template-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.wuf-template-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.wuf-action-menu { position: relative; }
.wuf-action-menu > summary { list-style: none; cursor: pointer; }
.wuf-action-menu > summary::-webkit-details-marker { display: none; }
.wuf-action-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; min-width: 160px; padding: 6px; background: #fff; border: 1px solid var(--wuf-line); border-radius: 10px; box-shadow: var(--wuf-shadow); }
.wuf-action-menu-panel button { padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: #33404a; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.wuf-action-menu-panel button:hover, .wuf-action-menu-panel button:focus-visible { background: #fff6ef; }

/* ------------------------------------------------------------------
 * Form builder
 * ------------------------------------------------------------------ */
.wuf-fb-page { max-width: 1440px; }
.wuf-fb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wuf-fb-details { margin-top: 22px; }
.wuf-fb { display: grid; grid-template-columns: 230px minmax(0, 1fr) 300px; gap: 16px; margin-top: 22px; align-items: start; }
.wuf-fb-side { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow-y: auto; }
.wuf-fb-group + .wuf-fb-group { margin-top: 14px; }
.wuf-fb-group h3 { margin: 0 0 7px; color: var(--wuf-muted); font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.wuf-fb-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wuf-fb-palette .wuf-palette-item { cursor: grab; }
.wuf-fb-canvas { min-height: 420px; padding: 18px; background: #fff; border: 1px solid var(--wuf-line); border-radius: 13px; }
.wuf-fb-list { margin: 0; padding: 0; list-style: none; }
.wuf-fb-item { position: relative; border: 1px solid #e6e8e9; border-radius: 10px; background: #fff; transition: border-color .12s, box-shadow .12s; }
.wuf-fb-item:hover { border-color: #ffc9a3; }
.wuf-fb-item.is-selected { border-color: var(--wuf-orange); box-shadow: 0 0 0 3px rgba(255, 122, 33, .14); }
.wuf-fb-item.is-dragging { opacity: .45; }
.wuf-fb-item.is-drop-target { box-shadow: 0 -3px 0 var(--wuf-orange); }
.wuf-fb-item-head { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #f1f0ee; }
.wuf-fb-grip { color: #b5bcc1; font-size: 11px; letter-spacing: -2px; cursor: grab; user-select: none; }
.wuf-fb-select { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; flex: 1; padding: 2px 4px; border: 0; background: transparent; color: #44515c; font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.wuf-fb-type { font-weight: 750; color: var(--wuf-ink); }
.wuf-fb-select code { padding: 1px 5px; border-radius: 5px; background: #f4f3f1; color: #6a7680; font-size: 10.5px; }
.wuf-fb-flag { padding: 1px 6px; border-radius: 9px; background: #fff1e7; color: var(--wuf-orange-dark); font-size: 10px; font-weight: 700; }
.wuf-fb-tools { display: flex; gap: 2px; }
.wuf-fb-tools .wuf-icon-button { width: 26px; height: 26px; }
.wuf-fb-item-body { padding: 12px 14px 14px; cursor: pointer; }
.wuf-fb-item-body * { pointer-events: none; }
.wuf-fb-drop-empty { display: grid; min-height: 360px; place-items: center; border: 2px dashed #ece6df; border-radius: 12px; }
.wuf-fb-issues { margin-top: 14px; }
.wuf-fb-issues ul { margin: 6px 0 0; padding-left: 18px; }
.wuf-fb-props h2 { margin: 0 0 12px; font-size: 14px; }
.wuf-fb-props-empty .wuf-state { padding: 26px 8px; }
.wuf-fb-prop { display: grid; gap: 5px; margin: 0 0 12px; padding: 0; border: 0; color: #44515c; font-size: 12px; font-weight: 700; }
.wuf-fb-prop legend { margin-bottom: 6px; padding: 0; }
.wuf-fb-prop input, .wuf-fb-prop select, .wuf-fb-prop textarea { width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid #dfe3e4; border-radius: 7px; background: #fff; color: #2f3a42; font: inherit; font-size: 12.5px; font-weight: 400; }
.wuf-fb-prop textarea { resize: vertical; }
.wuf-fb-prop small { color: var(--wuf-muted); font-size: 11px; font-weight: 400; }
.wuf-fb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wuf-fb-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 12px; }
.wuf-fb-check { display: inline-flex; align-items: center; gap: 6px; color: #33404a; font-size: 12.5px; cursor: pointer; }
.wuf-fb-check input { accent-color: var(--wuf-orange); }
.wuf-fb-condition { padding: 10px; border: 1px dashed #e3ddd6; border-radius: 9px; background: #fcfbfa; }
.wuf-fb-condition select, .wuf-fb-condition input { margin-top: 4px; }
.wuf-fb-prop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.wuf-fb-status { min-height: 18px; margin: 10px 0 0; color: var(--wuf-orange-dark); font-size: 12px; font-weight: 700; text-align: right; }
.wuf-fb-device-switch { display: inline-flex; padding: 3px; border-radius: 9px; background: #f0eeeb; }
.wuf-fb-device-switch button { min-width: 72px; padding: 6px 12px; border: 0; border-radius: 7px; background: transparent; color: #5c6872; font: 600 12.5px/1.2 inherit; cursor: pointer; }
.wuf-fb-device-switch button.is-selected { background: #fff; color: var(--wuf-ink); box-shadow: 0 1px 3px rgba(23, 33, 43, .12); }
.wuf-fb-page > .wuf-fb-device-switch { margin-top: 22px; }
.wuf-fb-preview { margin: 16px auto 0; padding: 22px; background: #efede9; border-radius: 14px; }
.wuf-fb-preview .wuf-app-form { max-width: none; margin: 0 auto; }
.wuf-fb-preview-desktop .wuf-app-form { max-width: 820px; }
.wuf-fb-preview-mobile .wuf-app-form { max-width: 380px; }
.wuf-fb-preview-mobile .wuf-ff-grid { grid-template-columns: 1fr; }
.wuf-fb-preview-mobile .wuf-ff-half { grid-column: 1 / -1; }

@media (max-width: 1180px) {
	.wuf-fb { grid-template-columns: 210px minmax(0, 1fr); }
	.wuf-fb-props { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 800px) {
	.wuf-ff-grid { grid-template-columns: 1fr; }
	.wuf-ff-half { grid-column: 1 / -1; }
	.wuf-fb { grid-template-columns: 1fr; }
	.wuf-fb-side { position: static; max-height: none; }
	.wuf-fb-palette { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
	.wuf-templates-toolbar { flex-direction: column; align-items: flex-start; }
	.wuf-template-actions { margin-left: 0; }
}


/* Repeating table cells (all column types) */
.wuf-app-table .wuf-table-wrap{overflow-x:auto}
.wuf-app-table td{min-width:120px;vertical-align:top}
.wuf-app-table td:last-child{min-width:0;width:36px;vertical-align:middle}
.wuf-app-table td.is-long_text,.wuf-app-table td.is-multi_select{min-width:190px}
.wuf-app-table td.is-yes_no,.wuf-app-table td.is-time{min-width:96px}
.wuf-app-table td input:not([type=checkbox]),.wuf-app-table td select,.wuf-app-table td textarea{width:100%;min-height:34px;padding:6px 8px;border:1px solid #dfe5ec;border-radius:6px;background:#fff;color:inherit;font:inherit;font-size:13px;box-sizing:border-box}
.wuf-app-table td textarea{display:block;resize:vertical}
.wuf-app-table td.is-number input,.wuf-app-table td.is-currency input,.wuf-app-table td.is-calculation input{text-align:right}
.wuf-app-table .wuf-ff-cell-calc{background:#f5f7fa;color:#17375f;font-weight:650}
.wuf-ff-cell-choices{display:flex;flex-wrap:wrap;gap:4px 10px;padding:6px 2px}
.wuf-ff-cell-choices label{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;white-space:nowrap}
.wuf-ff-cell-choices input{accent-color:var(--wuf-orange,#ff6b18)}
.wuf-table-compact td.is-number,.wuf-table-compact td.is-currency,.wuf-table-compact td.is-calculation,.wuf-table-compact th.is-number,.wuf-table-compact th.is-currency,.wuf-table-compact th.is-calculation{text-align:right}