/* ============================================================ Combobox pesquisavel — folha standalone para paginas que NAO carregam app.css (ex.: formularios publicos com proprio). Usa var() com fallback para herdar o tema da pagina quando existir. Pareia com /assets/scripts/combobox.js (markup .mt-combo). ============================================================ */ .mt-combo { position: relative; max-width: 100%; min-width: 0; box-sizing: border-box; } .mt-combo *, .mt-combo *::before, .mt-combo *::after { box-sizing: border-box; } .mt-combo--enhanced { display: block; } .mt-combo.is-open { z-index: 60; } .mt-combo__native { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .mt-combo__control { position: relative; display: block; width: 100%; max-width: 100%; box-sizing: border-box; } .mt-combo__input { width: 100%; max-width: 100%; min-height: 44px; padding: 10px 34px 10px 12px; border: 1px solid var(--border, var(--color-border, #d1d5db)); border-radius: var(--radius, 8px); background: #ffffff; color: var(--text, var(--color-text, #1b1c1f)); font: inherit; outline: none; cursor: pointer; text-overflow: ellipsis; box-sizing: border-box; } .mt-combo__input::placeholder { color: var(--muted, var(--color-text-muted, #6b7280)); opacity: 1; } .mt-combo__input:focus { border-color: var(--primary, var(--color-primary, #2b59d9)); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14); cursor: text; } .mt-combo__trigger { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--muted, var(--color-text-muted, #6b7280)); cursor: pointer; } .mt-combo__trigger .material-symbols-outlined { font-size: 20px; transition: transform 0.16s ease; } .mt-combo.is-open .mt-combo__trigger .material-symbols-outlined { transform: rotate(180deg); } .mt-combo__menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70; box-sizing: border-box; max-width: calc(100vw - 24px); max-height: 280px; padding: 6px; border: 1px solid var(--border, var(--color-border, #d1d5db)); border-radius: var(--radius, 8px); background: #ffffff; box-shadow: 0 2px 6px rgba(17, 27, 53, 0.06), 0 18px 42px -18px rgba(17, 27, 53, 0.40); overflow-y: auto; overscroll-behavior: contain; } .mt-combo__menu[hidden] { display: none; } .mt-combo__option { position: relative; padding: 10px 32px 10px 12px; border-radius: 6px; color: var(--text, var(--color-text, #1b1c1f)); font: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .mt-combo__option:hover, .mt-combo__option.is-active { background: rgba(15, 118, 110, 0.08); } .mt-combo__option.is-selected { color: var(--primary, var(--color-primary, #2b59d9)); font-weight: 700; } .mt-combo__option.is-selected::after { content: '\2713'; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 13px; } .mt-combo__option.is-disabled { opacity: 0.5; cursor: not-allowed; } .mt-combo__empty { padding: 12px; color: var(--muted, var(--color-text-muted, #6b7280)); font-size: 0.9rem; text-align: center; }