/* * Shared Vetra single-select skin. * The trigger remains in the original layout while the options panel is * portalled to by vetra-select.js, avoiding clipping from cards, * bootstrap tables and PJAX containers. */ :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select, :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__popover { --vts-surface: var(--vt-surface, var(--md-surface, #ffffff)); --vts-raised: var(--vt-bg-raised, var(--md-surface-2, #fcfcfc)); --vts-soft: var(--vt-surface-3, var(--md-hover-overlay, #f7f7f7)); --vts-border: var(--vt-border, var(--md-outline, #e2e5e9)); --vts-text: var(--vt-text, var(--md-on-surface, #383838)); --vts-text-strong: var(--vt-text-strong, var(--md-on-surface, #171717)); --vts-muted: var(--vt-muted, var(--md-on-surface-med, #777777)); --vts-subtle: var(--vt-subtle, var(--md-on-surface-dis, #a3a3a3)); --vts-info: var(--vt-info, var(--md-primary, #3b82f6)); --vts-radius: var(--vt-radius-sm, var(--md-radius, 8px)); } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select { position: relative; display: flex; align-items: stretch; min-width: 0; font: inherit; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select.vetra-select--generated { width: 100%; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .component-content > .vetra-select { width: 100%; } /* Search controls use the same VetraSelect shell as ticket, profile and configuration selects. This class only owns toolbar layout; all visual styling, labels and popovers remain inside the shared component. */ :is(body.vetra-user, body.vetra-admin, body.vetra-store) .table-search > .vetra-select.vetra-select--search { width: 220px; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select.is-enhanced > .vetra-select__native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; min-height: var(--vetra-select-control-height, 42px); margin: 0 !important; padding: 0 10px 0 12px; color: var(--vts-text) !important; border: 1px solid var(--vts-border) !important; border-radius: var(--vts-radius) !important; outline: 0; background: var(--vts-raised) !important; box-shadow: none !important; font: inherit; font-size: 14px !important; font-weight: 400 !important; line-height: 20px; text-align: left; cursor: pointer; transform: none !important; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; } /* A small label offset keeps the selected value optically balanced with the floating label while retaining a single shared control layout. */ :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select--has-label > .vetra-select__trigger { padding-top: 4px; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__trigger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--vts-text) 18%, var(--vts-border)) !important; background: var(--vts-surface) !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__trigger:focus-visible, :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select.is-open > .vetra-select__trigger { border-color: var(--vts-info) !important; background: var(--vts-surface) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vts-info) 10%, transparent) !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__trigger:disabled, :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select.is-disabled > .vetra-select__trigger { color: var(--vts-subtle) !important; cursor: not-allowed; opacity: .66; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__value, :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__indicator { flex: 0 0 auto; color: var(--vts-subtle) !important; font-size: 18px !important; line-height: 1; transition: color .16s ease, transform .16s ease; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select.is-open .vetra-select__indicator { color: var(--vts-info) !important; transform: rotate(180deg); } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__label, :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select > .mui-sf__label { position: absolute; z-index: 3; top: -7px; left: 9px; max-width: calc(100% - 18px); margin: 0 !important; padding: 0 4px; overflow: hidden; color: var(--vts-subtle) !important; background: var(--vts-surface) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 14px !important; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; transform: none !important; } /* Search.js fields keep their 44px control rhythm without creating a second visual language. The root is still just a normal VetraSelect container. */ :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select.mui-sf { --vetra-select-control-height: 44px; } /* Inline table editors use the same component contract with the compact control rhythm already used by the table cells. */ :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select[data-vetra-select-size="compact"], :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select.vetra-select--table { --vetra-select-control-height: 34px; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select.mui-sf > .uc-outline { display: none !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select.mui-sf > .vetra-select__trigger { border-radius: var(--vts-radius) !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__popover { position: fixed; z-index: 1200; box-sizing: border-box; margin: 0; padding: 4px; color: var(--vts-text); border: 1px solid var(--vts-border); border-radius: var(--vts-radius); background: var(--vts-surface); box-shadow: 0 12px 28px rgba(41, 41, 41, .12); opacity: 0; pointer-events: none; transform: translateY(-4px); transform-origin: top left; transition: opacity .14s ease, transform .14s ease; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__popover[data-vetra-placement^="top"] { transform: translateY(4px); transform-origin: bottom left; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__popover.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__popover[hidden] { display: none !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__filter { display: block; width: 100%; min-height: 34px; margin: 0 0 4px; padding: 0 9px; color: var(--vts-text) !important; border: 1px solid var(--vts-border) !important; border-radius: 6px !important; outline: 0; background: var(--vts-raised) !important; box-shadow: none !important; font: inherit; font-size: 13px; line-height: 32px; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__filter:focus { border-color: var(--vts-info) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--vts-info) 10%, transparent) !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__filter::placeholder { color: var(--vts-subtle); } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; outline: 0; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__option { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 8px; width: 100%; min-height: 36px; margin: 0 !important; padding: 0 9px 0 10px; color: var(--vts-muted) !important; border: 1px solid transparent !important; border-radius: 6px !important; outline: 0; background: transparent !important; box-shadow: none !important; font: inherit; font-size: 14px !important; font-weight: 400 !important; line-height: 20px; text-align: left; cursor: pointer; transform: none !important; transition: color .14s ease, background-color .14s ease; } /* Rich rows keep the exact same shell and check-state while allowing a component consumer to place secondary metadata or compact actions inside the primary content column. */ :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__option--rich { min-height: 42px; padding-top: 7px; padding-bottom: 7px; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__option-label--custom { display: block; min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__option:hover:not(:disabled), :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__option:focus-visible { color: var(--vts-text-strong) !important; background: var(--vts-soft) !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__option.is-selected { color: var(--vts-info) !important; background: var(--vts-soft) !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__option.is-selected:hover:not(:disabled), :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__option.is-selected:focus-visible { color: var(--vts-info) !important; background: var(--vts-soft) !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__option.is-disabled, :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__option:disabled { color: var(--vts-subtle) !important; cursor: not-allowed; opacity: .58; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__option.is-disabled:hover { color: var(--vts-subtle) !important; background: transparent !important; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__option-indicator { color: var(--vts-info) !important; font-size: 18px !important; line-height: 1; opacity: 0; transform: scale(.75); transition: opacity .14s ease, transform .14s ease; } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__option.is-selected .vetra-select__option-indicator { opacity: 1; transform: scale(1); } :is(body.vetra-user, body.vetra-admin, body.vetra-store) .vetra-select__empty { min-height: 36px; padding: 8px 10px; color: var(--vts-subtle); font-size: 13px; line-height: 20px; } @media (prefers-reduced-motion: reduce) { :is(body.vetra-user, body.vetra-admin, body.vetra-store) :is(.vetra-select__trigger, .vetra-select__indicator, .vetra-select__popover, .vetra-select__option, .vetra-select__option-indicator) { transition-duration: 1ms !important; } }