/* FIELD-META-001 Fase 1b — popover + info button + filled_by badge Owned by app/js/utils/ui/fieldMetaPopover.js + fieldMetaWrapper.js Namespace: .field-meta-*, .fmp-* (popover sub). */ /* ⓘ info button adjacent to input — escondido por padrão, aparece só quando o usuário foca/passa sobre o input ou sobre o próprio botão (2026-04-13: feedback Calvin — ícone permanente poluía o formulário). */ .field-meta-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; padding: 0; border: 1px solid #3a4552; background: #242c35; color: #9aa5b1; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1; vertical-align: middle; opacity: 0; transition: opacity 0.12s ease-in-out; pointer-events: none; } /* Mostrar quando input está focado/hover, ou quando o próprio botão recebe hover/focus (Tab keyboard). Fallback via :focus-within do parent cobre inputs envoltos em ou wrappers intermediários. */ [data-field-meta='true']:focus + .field-meta-info-btn, [data-field-meta='true']:hover + .field-meta-info-btn, *:focus-within > .field-meta-info-btn, *:hover > .field-meta-info-btn, .field-meta-info-btn:hover, .field-meta-info-btn:focus-visible, .field-meta-info-btn:focus { opacity: 1; pointer-events: auto; } /* In the element details editor, metadata is part of the primary editing flow. Keep the affordance visible so users don't have to "discover" it by hover after regressions or focus churn. */ #element-details .field-meta-info-btn { opacity: 0.72; pointer-events: auto; } #element-details .field-meta-info-btn:hover, #element-details .field-meta-info-btn:focus-visible, #element-details .field-meta-info-btn:focus, #element-details .form-group:focus-within > .field-meta-info-btn, #element-details .form-group:hover > .field-meta-info-btn { opacity: 1; } .field-meta-info-btn:hover { background: #2563eb; color: #fff; border-color: #2563eb; } .field-meta-info-btn:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; } /* Q2Q class indicator — visible when [data-ecbyts-show-u="1"] on . Colored left border on inputs with data-field-meta and data-q2q-class set. Driven by fieldMetaWrapper.js readBackQ2QClass() helper. */ html[data-ecbyts-show-u="1"] input[data-field-meta="true"][data-q2q-class="very_low"], html[data-ecbyts-show-u="1"] input[data-field-meta="true"][data-q2q-class="low"] { border-left: 3px solid #22c55e; } html[data-ecbyts-show-u="1"] input[data-field-meta="true"][data-q2q-class="medium"] { border-left: 3px solid #f59e0b; } html[data-ecbyts-show-u="1"] input[data-field-meta="true"][data-q2q-class="high"], html[data-ecbyts-show-u="1"] input[data-field-meta="true"][data-q2q-class="very_high"] { border-left: 3px solid #ef4444; } /* Inherited U indicator (yellow) — gap #17 */ html[data-ecbyts-show-u="1"] input[data-field-meta="true"][data-u-inherited="true"] { box-shadow: inset 3px 0 0 #fbbf24; } /* Censored badge (< LD / < LQ) */ html[data-ecbyts-show-u="1"] input[data-field-meta="true"][data-censored]::after { content: attr(data-censored); display: inline-block; margin-left: 4px; padding: 1px 4px; background: #6b7280; color: #fff; font-size: 9px; border-radius: 2px; } /* Compromised sample — red tag on input */ html[data-ecbyts-show-u="1"] input[data-field-meta="true"][data-compromised="true"] { border: 1.5px solid #ef4444; background: rgba(239, 68, 68, 0.08); } /* Censored summary fieldset styles (popover) */ .fmp-censored, .fmp-qc-gate { border: 1px solid #3a4552; border-radius: 4px; padding: 8px 10px; margin-bottom: 10px; background: #161c23; } .fmp-censored legend, .fmp-qc-gate legend { font-size: 10.5px; color: #9aa5b1; text-transform: uppercase; padding: 0 4px; } .fmp-censored label, .fmp-qc-gate label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin: 3px 0; cursor: pointer; } .fmp-censored-details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; padding-left: 20px; } .fmp-censored-details label { flex-direction: column; align-items: stretch; gap: 3px; } .fmp-censored-details span { font-size: 10px; color: #9aa5b1; text-transform: uppercase; } .fmp-censored-details input, .fmp-censored-details select { padding: 4px 6px; background: #242c35; color: #eef1f4; border: 1px solid #3a4552; border-radius: 3px; font-size: 11.5px; } /* Popover — position:fixed evita clipping em ancestrais com overflow:hidden ou transform (painéis flutuantes, modais). Independente de scroll. */ .field-meta-popover { position: fixed; z-index: 9100; width: 360px; max-height: 70vh; overflow: auto; background: #0f1419; border: 1px solid #3a4552; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); color: #eef1f4; font-size: 12px; padding: 0; } .field-meta-popover[hidden] { display: none; } .fmp-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #273039; } .fmp-title { display: flex; align-items: center; gap: 8px; min-width: 0; } .fmp-filled-by { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; } .fmp-key { font-family: var(--font-mono, monospace); font-size: 10.5px; color: #9aa5b1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fmp-close { width: 22px; height: 22px; border: none; background: transparent; color: #9aa5b1; cursor: pointer; border-radius: 4px; font-size: 12px; } .fmp-close:hover { background: #242c35; color: #eef1f4; } .fmp-tabs { display: flex; border-bottom: 1px solid #273039; padding: 0 6px; } .fmp-tab { padding: 8px 12px; background: transparent; color: #9aa5b1; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-size: 11.5px; font-weight: 600; } .fmp-tab:hover { color: #eef1f4; } .fmp-tab[aria-selected='true'] { color: #fff; border-bottom-color: #2563eb; } .fmp-body { padding: 10px 12px; } .fmp-panel { display: block; } .fmp-panel[hidden] { display: none; } .fmp-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; } .fmp-field > span { font-size: 10.5px; color: #9aa5b1; text-transform: uppercase; letter-spacing: 0.3px; } .fmp-field input[type='text'], .fmp-field select, .fmp-field textarea { padding: 5px 8px; background: #242c35; color: #eef1f4; border: 1px solid #3a4552; border-radius: 4px; font-size: 12px; font-family: inherit; } .fmp-field textarea { resize: vertical; min-height: 48px; } .fmp-flags, .fmp-privacy { border: 1px solid #3a4552; border-radius: 4px; padding: 8px 10px; margin-bottom: 10px; background: #161c23; } .fmp-flags legend, .fmp-privacy legend { font-size: 10.5px; color: #9aa5b1; text-transform: uppercase; padding: 0 4px; } .fmp-flags label, .fmp-privacy label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin: 3px 0; cursor: pointer; } .fmp-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; } .fmp-save, .fmp-save-advanced { padding: 6px 14px; background: #2563eb; color: #fff; border: none; border-radius: 4px; font-size: 11.5px; font-weight: 600; cursor: pointer; } .fmp-save:hover, .fmp-save-advanced:hover { background: #1d4ed8; } .fmp-prov { font-size: 11.5px; line-height: 1.6; margin-bottom: 10px; padding: 8px 10px; background: #161c23; border-radius: 4px; } .fmp-prov strong { color: #9aa5b1; text-transform: uppercase; font-size: 10px; } .fmp-revs { list-style: none; padding: 0; margin: 0; font-size: 11px; } .fmp-revs li { padding: 6px 8px; margin-bottom: 4px; background: #161c23; border-radius: 4px; border-left: 3px solid #2563eb; } .fmp-revs code { font-family: var(--font-mono, monospace); font-size: 10px; color: #6b7685; } .fmp-revs em { color: #9aa5b1; font-style: normal; font-size: 10.5px; } .fmp-empty { color: #6b7685; font-style: italic; text-align: center; padding: 8px; } /* Phase 2 — uncertainty / sources / temporal tab styles */ .fmp-unc-sources, .fmp-unc-comps { border: 1px solid #3a4552; border-radius: 4px; padding: 8px 10px; margin-bottom: 10px; background: #161c23; } .fmp-unc-sources legend, .fmp-unc-comps legend { font-size: 10.5px; color: #9aa5b1; text-transform: uppercase; padding: 0 4px; } .fmp-unc-sources label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; margin: 3px 8px 3px 0; } .fmp-field-inline { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 4px; } .fmp-field-inline > span { min-width: 80px; text-transform: none; letter-spacing: 0; } .fmp-field-inline input { flex: 1; } .fmp-sources { list-style: none; padding: 0; margin: 0 0 10px 0; font-size: 11px; } .fmp-sources li { display: grid; grid-template-columns: 80px 1fr auto; gap: 6px; align-items: center; padding: 5px 8px; margin-bottom: 4px; background: #161c23; border-radius: 4px; border-left: 3px solid #60a5fa; } .fmp-sources strong { color: #60a5fa; font-size: 10px; text-transform: uppercase; } .fmp-sources code { font-family: var(--font-mono, monospace); font-size: 10.5px; color: #eef1f4; } .fmp-sources em { color: #9aa5b1; font-style: normal; grid-column: 2; font-size: 10.5px; } .fmp-src-del { width: 22px; height: 22px; background: transparent; border: none; color: #ef4444; cursor: pointer; border-radius: 3px; font-size: 11px; } .fmp-src-del:hover { background: rgba(239, 68, 68, 0.1); } /* ─── Phase 3 — Report Builder modal skeleton ─── */ .report-builder-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: none; justify-content: center; align-items: center; z-index: 9000; padding: 4vh 4vw; } .report-builder-dialog { width: min(720px, 92vw); height: min(720px, 92vh); background: #0f1419; border: 1px solid #3a4552; border-radius: 10px; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); color: #eef1f4; } .rb-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #273039; } .rb-head h4 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; } .rb-phase-tag { font-size: 10px; font-weight: 600; padding: 2px 6px; background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-radius: 3px; text-transform: uppercase; } .rb-close { width: 26px; height: 26px; border: none; background: transparent; color: #9aa5b1; cursor: pointer; border-radius: 4px; font-size: 14px; } .rb-close:hover { background: #242c35; color: #fff; } .rb-body { flex: 1; overflow-y: auto; padding: 16px; } .rb-intro { margin: 0 0 12px 0; padding: 10px 12px; font-size: 11.5px; line-height: 1.5; color: #9aa5b1; background: #1a2128; border-left: 3px solid #2563eb; border-radius: 4px; } .rb-form { display: flex; flex-direction: column; gap: 12px; } .rb-field { display: flex; flex-direction: column; gap: 4px; } .rb-field > span { font-size: 11px; color: #9aa5b1; text-transform: uppercase; letter-spacing: 0.3px; } .rb-field input[type='text'], .rb-field input[type='date'], .rb-field select, .rb-field textarea { padding: 7px 10px; background: #242c35; color: #eef1f4; border: 1px solid #3a4552; border-radius: 4px; font-size: 12.5px; font-family: inherit; } .rb-field textarea { resize: vertical; min-height: 70px; } .rb-field select[multiple] { min-height: 70px; } .rb-phase3b-note { margin-top: 16px; padding: 10px 12px; font-size: 11.5px; line-height: 1.5; color: #fbbf24; background: rgba(245, 158, 11, 0.08); border: 1px dashed rgba(245, 158, 11, 0.4); border-radius: 4px; } .rb-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid #273039; } .rb-close-btn, .rb-save-draft { padding: 8px 16px; border: none; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; } .rb-close-btn { background: #242c35; color: #eef1f4; } .rb-close-btn:hover { background: #2d3744; } .rb-save-draft { background: #2563eb; color: #fff; } .rb-save-draft:disabled { background: #3a4552; cursor: not-allowed; color: #6b7685; } /* Phase 3b — template picker, query builder, results, share */ .rb-template-picker, .rb-query-builder { border: 1px solid #273039; border-radius: 5px; padding: 10px 12px; margin-bottom: 14px; background: #161c23; } .rb-template-picker legend, .rb-query-builder legend { font-size: 10.5px; color: #9aa5b1; text-transform: uppercase; padding: 0 4px; } .rb-template-picker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rb-template-picker select { flex: 1; min-width: 180px; padding: 6px 10px; background: #242c35; color: #eef1f4; border: 1px solid #3a4552; border-radius: 4px; font-size: 12px; } .rb-apply-template { padding: 6px 14px; background: #2563eb; color: #fff; border: none; border-radius: 4px; font-size: 11.5px; font-weight: 600; cursor: pointer; } .rb-apply-template:hover { background: #1d4ed8; } .rb-filter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; } .rb-query-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #273039; } .rb-run-query { padding: 7px 14px; background: #22c55e; color: #fff; border: none; border-radius: 4px; font-size: 11.5px; font-weight: 600; cursor: pointer; } .rb-run-query:hover { background: #16a34a; } .rb-query-summary { font-size: 11px; color: #9aa5b1; font-style: italic; } .rb-query-result { margin-top: 12px; padding: 10px 12px; max-height: 220px; overflow: auto; background: #0b1015; border: 1px solid #273039; border-radius: 4px; font-family: var(--font-mono, monospace); font-size: 11px; line-height: 1.5; color: #eef1f4; white-space: pre-wrap; } .rb-export-group { display: flex; gap: 4px; margin-right: auto; margin-left: 10px; } .rb-export-group button { padding: 6px 12px; background: #242c35; color: #eef1f4; border: 1px solid #3a4552; border-radius: 4px; font-size: 11.5px; cursor: pointer; } .rb-export-group button:hover { background: #2d3744; border-color: #60a5fa; } .rb-share-link { padding: 8px 14px; background: #8b5cf6; color: #fff; border: none; border-radius: 4px; font-size: 11.5px; font-weight: 600; cursor: pointer; } .rb-share-link:hover { background: #7c3aed; } /* ─── Phase 2.4 — Mobile accordion mode (viewport < 560px) ─── Converts horizontal tabs into vertical accordion. Each tab header becomes a tappable row; the corresponding panel expands inline when aria-selected="true". All panels can be open simultaneously (accordion UX, not exclusive). */ @media (max-width: 560px) { .field-meta-popover { position: fixed; top: 8vh; left: 4vw; right: 4vw; width: auto; max-width: none; max-height: 84vh; } .fmp-tabs { flex-direction: column; border-bottom: none; padding: 0; } .fmp-tab { text-align: left; border-bottom: 1px solid #273039; border-left: 3px solid transparent; padding: 12px 14px; background: #161c23; } .fmp-tab[aria-selected='true'] { border-bottom-color: #273039; border-left-color: #2563eb; background: #1a2128; } .fmp-tab[aria-selected='true']::after { content: ' ▾'; color: #2563eb; } .fmp-body { padding: 0; } .fmp-panel { padding: 10px 14px; border-bottom: 1px solid #273039; background: #121820; } .fmp-field input[type='text'], .fmp-field select, .fmp-field textarea { font-size: 14px; /* prevent iOS auto-zoom */ padding: 8px 10px; } .fmp-save, .fmp-save-advanced, .fmp-save-uncertainty, .fmp-save-temporal, .fmp-src-add { min-height: 40px; /* WCAG 2.5.5 touch target */ padding: 10px 16px; font-size: 13px; } .fmp-sources li { grid-template-columns: 1fr; gap: 4px; } .fmp-sources em { grid-column: 1; } }