:root { --ec-primary: #0b6e4f; --ec-primary-dark: #084f38; --ec-bg: #f4f6f5; --ec-card: #ffffff; --ec-border: #d8ddda; --ec-text: #1c2a25; --ec-danger: #b3261e; } * { box-sizing: border-box; } /* * The portal now renders as a self-contained block embedded inside an * ordinary WordPress page (via shortcode), so it can no longer style * directly - the active theme owns that. .ec-tb-fp-app is the * outer wrapper every shortcode renders, and carries its own background/ * font/spacing so it looks consistent regardless of the theme it's dropped * into. */ .ec-tb-fp-app { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--ec-bg); color: var(--ec-text); padding-bottom: 70px; margin: -8px -8px 0; } .ec-tb-fp-app * { box-sizing: border-box; } .hi { color: #555; font-weight: normal; } .ec-tb-fp-topbar { display: flex; justify-content: space-between; align-items: center; background: var(--ec-primary); color: #fff; padding: 12px 16px; position: sticky; top: 0; z-index: 10; } .ec-tb-fp-brand { color: #fff; font-weight: 600; text-decoration: none; font-size: 15px; } .ec-tb-fp-user { font-size: 13px; display: flex; align-items: center; gap: 8px; } .ec-tb-fp-reports-link { color: #fff; text-decoration: none; font-size: 12px; background: rgba(255,255,255,0.15); padding: 6px 10px; border-radius: 6px; } .ec-tb-fp-logout-btn { background: rgba(255,255,255,0.15); border: none; color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 12px; } .ec-tb-fp-main { padding: 16px; max-width: 640px; margin: 0 auto; } .ec-tb-fp-home-greeting h2 { margin-bottom: 2px; } .ec-tb-fp-home-greeting p { color: #555; margin-top: 0; } .ec-tb-fp-home-actions { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; } .ec-tb-fp-big-btn { display: block; text-align: center; padding: 18px; border-radius: 12px; background: var(--ec-card); border: 1px solid var(--ec-border); color: var(--ec-text); text-decoration: none; font-size: 17px; font-weight: 600; cursor: pointer; } .ec-tb-fp-big-btn.ec-tb-fp-primary { background: var(--ec-primary); color: #fff; border-color: var(--ec-primary); } .ec-tb-fp-big-btn .hi { color: inherit; opacity: 0.85; font-size: 14px; } .ec-tb-fp-home-stat { background: var(--ec-card); border: 1px solid var(--ec-border); border-radius: 12px; padding: 18px; text-align: center; } .ec-tb-fp-home-stat-number { font-size: 34px; font-weight: 700; color: var(--ec-primary); } .ec-tb-fp-bottomnav { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--ec-border); display: flex; justify-content: space-around; padding: 8px 4px; z-index: 20; } .ec-tb-fp-bottomnav a, .ec-tb-fp-bottomnav button { background: none; border: none; font-size: 12px; color: var(--ec-text); text-decoration: none; padding: 6px 8px; } /* Forms */ .ec-tb-fp-form-wrap { padding-bottom: 20px; } form label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 14px; } form input[type="text"], form input[type="number"], form input[type="date"], form select, form textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; font-size: 16px; border: 1px solid var(--ec-border); border-radius: 8px; font-weight: normal; } form fieldset { border: 1px solid var(--ec-border); border-radius: 10px; margin-bottom: 16px; padding: 12px; } form legend { font-weight: 700; padding: 0 6px; } .ec-tb-fp-radio-row span { display: inline-flex; gap: 16px; font-weight: normal; margin-top: 6px; } .ec-tb-fp-radio-row label { display: inline; font-weight: normal; } button[type="submit"], .ec-tb-fp-secondary-btn { padding: 14px 18px; border-radius: 10px; border: 1px solid var(--ec-primary); background: var(--ec-primary); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; width: 100%; } .ec-tb-fp-secondary-btn { background: #fff; color: var(--ec-primary); } .ec-tb-fp-suspect-card { background: var(--ec-card); border: 1px solid var(--ec-border); border-radius: 10px; padding: 12px; margin-bottom: 14px; } .ec-tb-fp-remove-suspect { background: none; border: none; color: var(--ec-danger); font-size: 12px; float: right; } .ec-tb-fp-member-counter { background: #eef6f2; border: 1px solid var(--ec-border); border-radius: 8px; padding: 8px 12px; font-weight: 700; margin-bottom: 12px; color: var(--ec-primary-dark); } .ec-tb-fp-household-status { background: #fff8e6; border: 1px solid #f0d98c; border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-size: 13px; } .ec-tb-fp-existing-member-btn { display: block; width: 100%; text-align: left; margin-bottom: 8px; font-size: 13px; } .ec-tb-fp-followup-card { border-color: var(--ec-primary); } .ec-tb-fp-checkbox-row { display: block; font-weight: normal; font-size: 13px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ec-border); } .ec-tb-fp-checkbox-row input { width: auto; display: inline-block; margin-right: 6px; vertical-align: middle; } .ec-tb-fp-inline-link-btn { background: none; border: none; color: var(--ec-primary); text-decoration: underline; font-size: 12px; padding: 0; margin-left: 6px; cursor: pointer; } #ec-tb-fp-edit-phone-form { margin: 8px 0; display: flex; gap: 8px; align-items: center; } #ec-tb-fp-edit-phone-form input { width: auto; flex: 1; margin: 0; padding: 8px; } /* Dynamic field rendering (Form Builder driven) - yesno and checkbox_group fields render as their own compact fieldset rather than nested in a label. */ .ec-tb-fp-inline-fieldset { border: 1px solid var(--ec-border); border-radius: 8px; padding: 8px 10px; margin-bottom: 14px; } .ec-tb-fp-inline-fieldset legend { font-weight: 600; font-size: 14px; padding: 0 4px; } .ec-tb-fp-checkbox-inline { display: inline-flex; align-items: center; gap: 4px; font-weight: normal; margin-right: 14px; margin-top: 4px; } .ec-tb-fp-status { margin-top: 12px; font-weight: 600; } .ec-tb-fp-status.success { color: var(--ec-primary); } .ec-tb-fp-status.error { color: var(--ec-danger); } .ec-tb-fp-sp-id-badge { display: inline-block; background: var(--ec-primary-dark); color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 700; margin-bottom: 14px; } .ec-tb-fp-cds-buttons { display: flex; gap: 10px; margin: 14px 0; } .ec-tb-fp-cds-buttons button { flex: 1; } .ec-tb-fp-history-table, .ec-tb-fp-report-filters select, .ec-tb-fp-report-filters input { width: 100%; } .ec-tb-fp-history-table { border-collapse: collapse; background: #fff; } .ec-tb-fp-history-table th, .ec-tb-fp-history-table td { border: 1px solid var(--ec-border); padding: 8px; font-size: 13px; text-align: left; } .ec-tb-fp-find-form { display: flex; flex-direction: column; gap: 10px; } .ec-tb-fp-find-results { margin-top: 16px; } .ec-tb-fp-find-result-item { background: #fff; border: 1px solid var(--ec-border); border-radius: 10px; padding: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: var(--ec-text); } .ec-tb-fp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; display: flex; align-items: flex-end; } /* * The overlay is toggled via the [hidden] attribute in JS (overlay.hidden = * true/false). Without this rule, the class selector above (same specificity * as the browser's built-in [hidden] rule, but loaded later) wins and the * overlay shows open on every page load regardless of the hidden attribute - * that was the actual bug: NTEP Chat appeared open immediately, its dark * backdrop dimming the whole Home screen underneath it. !important pins the * hidden state so it always wins. */ .ec-tb-fp-overlay[hidden] { display: none !important; } .ec-tb-fp-overlay-panel { background: #fff; width: 100%; max-height: 85vh; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; overflow: hidden; } .ec-tb-fp-overlay-header { display: flex; justify-content: space-between; align-items: center; padding: 14px; background: var(--ec-primary); color: #fff; font-weight: 700; } .ec-tb-fp-overlay-header button { background: none; border: none; color: #fff; font-size: 18px; } .ec-tb-fp-ntep-messages { flex: 1; overflow-y: auto; padding: 14px; } .ec-tb-fp-ntep-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--ec-border); } .ec-tb-fp-ntep-form textarea { flex: 1; min-width: 0; min-height: 44px; padding: 10px; border-radius: 8px; border: 1px solid var(--ec-border); } /* * button[type="submit"] { width: 100% } above is meant for the main * full-width form buttons (Save Visit, Log In, etc). It was also matching * this Ask button since it's a submit button too, forcing it to fill the * flex row and squeezing the question textarea down to almost nothing. * Pin this one back to its natural width. */ .ec-tb-fp-ntep-form button[type="submit"] { width: auto; flex-shrink: 0; padding: 10px 20px; } .ec-tb-fp-ntep-msg { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; } .ec-tb-fp-ntep-msg.user { background: #e6f2ee; text-align: right; } .ec-tb-fp-ntep-msg.bot { background: #f1f1f1; white-space: pre-wrap; } .ec-tb-fp-ntep-fallback-btn { margin-top: 8px; background: none; border: 1px solid var(--ec-primary); color: var(--ec-primary); border-radius: 6px; padding: 6px 10px; font-size: 12px; white-space: normal; } .ec-tb-fp-report-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .ec-tb-fp-report-filters label { flex: 1; min-width: 140px; }