/* ============================================================ * filterable-dropdown.css * Styles for the searchable dropdown widget that progressively * enhances */ .fdd-source-hidden { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } /* ---------- DESKTOP: floating panel (portalled to ) ---------- */ /* The panel is appended to at open time so it can escape any ancestor overflow:auto / overflow:hidden (e.g. the surrounding table.table-responsive in indexhtml.php that would otherwise clip it). Position, width and max-height are set inline via JS using getBoundingClientRect of the visible input. */ .fdd-panel { position: fixed; background: #fff; border: 1px solid #bbb; border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); z-index: 10050; display: none; box-sizing: border-box; overflow: hidden; flex-direction: column; } .fdd-panel.fdd-open { display: flex; } .fdd-panel-search { padding: 6px; border-bottom: 1px solid #e5e5e5; background: #f7f7f7; flex: 0 0 auto; } .fdd-panel-search input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; outline: none; } .fdd-panel-search input:focus { border-color: var(--fdd-brand); box-shadow: 0 0 4px rgba(18, 52, 177, 0.4); } .fdd-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .fdd-list .fdd-option { padding: 8px 12px; cursor: pointer; font-size: 14px; line-height: 1.4; border-bottom: 1px solid #f2f2f2; user-select: none; -webkit-user-select: none; } .fdd-list .fdd-option:last-child { border-bottom: none; } .fdd-list .fdd-option:hover, .fdd-list .fdd-option.fdd-active { background: var(--fdd-brand-tint); color: var(--fdd-brand); } .fdd-list .fdd-option.fdd-selected { background: var(--fdd-brand-strong); font-weight: 600; color: var(--fdd-brand); } .fdd-noresults { padding: 16px 12px; text-align: center; color: #888; font-style: italic; font-size: 14px; } /* ---------- MOBILE / TABLET: full-viewport overlay ---------- */ .fdd-overlay { position: fixed; inset: 0; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 9999; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); animation: fddOverlayIn 0.18s ease-out; } @keyframes fddOverlayIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .fdd-overlay-header { flex: 0 0 auto; display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid #e5e5e5; background: #f7f7f7; gap: 8px; } .fdd-overlay-header input { flex: 1; min-width: 0; padding: 12px 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; outline: none; background: #fff; } .fdd-overlay-header input:focus { border-color: var(--fdd-brand); box-shadow: 0 0 4px rgba(18, 52, 177, 0.4); } .fdd-overlay-close { flex: 0 0 auto; width: 44px; height: 44px; border: none; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: #555; border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 0; } .fdd-overlay-close:active { background: #e5e5e5; } .fdd-overlay-title { flex: 0 0 auto; padding: 4px 14px 8px; color: #666; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; background: #f7f7f7; } .fdd-overlay-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; } .fdd-overlay-list .fdd-option { padding: 14px 16px; min-height: 44px; box-sizing: border-box; font-size: 16px; line-height: 1.4; border-bottom: 1px solid #eee; cursor: pointer; color: #222; user-select: none; -webkit-user-select: none; } .fdd-overlay-list .fdd-option:active { background: var(--fdd-brand-strong); } .fdd-overlay-list .fdd-option.fdd-selected { background: var(--fdd-brand-tint); font-weight: 600; color: var(--fdd-brand); } .fdd-overlay-list .fdd-noresults { padding: 32px 16px; } /* lock body scroll when overlay is open */ body.fdd-overlay-open { overflow: hidden; position: fixed; width: 100%; } /* highlight matched substring */ .fdd-match { background: var(--fdd-match-bg); font-weight: 600; border-radius: 2px; padding: 0 1px; }