/* ============================================================ * Employees List redesign — page-scoped styles * ------------------------------------------------------------ * All selectors are prefixed with .el-screen so legacy pages * remain visually unaffected. Source: proposals/app-redesign/ * employees-list/EmployeesList.html. * * Generic table-shell rules (sticky thead, pager, empty state, * cards-fallback wrapper) live in insync-tables.css. This file * contains only what's specific to the Employees list — page * chrome, filter bar with pills, drawer, and Syncfusion overrides. * ============================================================ */ /* ── Page shell ───────────────────────────────────────────── */ .el-screen { padding: 22px 28px 60px; } /* ── Page header ──────────────────────────────────────────── */ .el-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .el-pagehead__crumb { display: flex; gap: 6px; align-items: center; font: 500 12px var(--is-font-sans); color: var(--is-fg-3); margin-bottom: 4px; } .el-pagehead__crumb a { color: inherit; text-decoration: none; } .el-pagehead__crumb a:hover { color: var(--is-action-blue); } .el-pagehead__crumb i { font-size: 9px; } .el-pagehead h1 { font: 700 26px/1.15 var(--is-font-sans); letter-spacing: -.01em; color: var(--is-fg-1); margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .el-pagehead h1 .el-count { font: 600 13px var(--is-font-sans); color: var(--is-fg-2); background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); padding: 2px 10px; border-radius: 999px; } .el-pagehead h1 .el-vchip--new { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 2px 9px; border-radius: 999px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); border: 1px solid var(--is-brand-blue-200); font: 700 10px var(--is-font-sans); letter-spacing: .05em; text-transform: uppercase; line-height: 1; } .el-pagehead h1 .el-vchip--new i { font-size: 9px; } .el-pagehead__sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .el-pagehead__sub-text { font: 500 13px var(--is-font-sans); color: var(--is-fg-3); } .el-vlink { font: 500 12px var(--is-font-sans); color: var(--is-fg-3); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; border: 1px dashed var(--is-border-2); cursor: pointer; background: transparent; transition: background .15s, color .15s, border-color .15s; } .el-vlink i { font-size: 10px; } .el-vlink:hover { color: var(--is-brand-blue); border-color: var(--is-brand-blue); background: var(--is-brand-blue-100); border-style: solid; } .el-pagehead__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ── Load-duration chip (universal pattern, mirrors pl-loadchip) ── */ .el-loadchip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); font: 600 11px var(--is-font-mono); color: var(--is-fg-3); cursor: default; transition: background .15s, border-color .15s, color .15s; user-select: none; } .el-loadchip:hover { background: #fff; color: var(--is-fg-1); border-color: var(--is-border-2); } .el-loadchip i { font-size: 9px; color: var(--is-fg-3); } .el-loadchip:hover i { color: var(--is-action-blue); } .el-loadchip b { color: var(--is-fg-2); font-weight: 600; } .el-loadchip:hover b { color: var(--is-fg-1); } .el-loadchip__sep { color: var(--is-fg-4); font-weight: 400; padding: 0 1px; } .el-loadchip.is-slow { background: rgba(206, 134, 0, .08); border-color: rgba(206, 134, 0, .25); color: var(--is-warning); } .el-loadchip.is-slow b, .el-loadchip.is-slow i { color: var(--is-warning); } /* ── Header buttons ──────────────────────────────────────── */ .el-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--is-radius-sm); border: 1px solid transparent; font: 600 13px var(--is-font-sans); cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; } .el-btn i { font-size: 12px; } .el-btn--primary { background: var(--is-brand-blue); color: #fff; border-color: var(--is-brand-blue); } .el-btn--primary:hover { background: var(--is-brand-blue-700); border-color: var(--is-brand-blue-700); } .el-btn--ghost { background: #fff; color: var(--is-fg-2); border-color: var(--is-border-3); } .el-btn--ghost:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); } .el-btn--ghost-success { background: #fff; color: var(--is-success); border-color: rgba(45, 140, 82, .35); } .el-btn--ghost-success:hover { background: rgba(45, 140, 82, .06); } .el-btn--mass { background: #fff; color: var(--is-fg-2); border-color: var(--is-border-3); } .el-btn--mass:hover:not(:disabled) { background: var(--is-bg-surface-3); color: var(--is-fg-1); } .el-btn--mass:disabled { opacity: .55; cursor: not-allowed; } /* Active/open state — when the popup is showing Syncfusion adds .e-active and aria-expanded="true" to the button. We only override TEXT/ICON color to white; the background is left to Syncfusion's theme so it matches cq-screen exactly (cq has no override and renders Syncfusion's light-grey active fill). The selector stacks .el-btn AND .el-btn--mass AND .e-active to reach specificity 0,0,4,0 — that beats `.el-btn--mass:hover:not(:disabled)` (0,0,3,0) above, which would otherwise re-paint the label dark while the popup is open. */ .el-btn.el-btn--mass.e-active:not(:disabled), .el-btn.el-btn--mass.e-active:not(:disabled):hover, .el-btn.el-btn--mass[aria-expanded="true"]:not(:disabled), .el-btn.el-btn--mass[aria-expanded="true"]:not(:disabled):hover { color: #ffffff !important; } .el-btn.el-btn--mass.e-active:not(:disabled) *, .el-btn.el-btn--mass.e-active:not(:disabled):hover *, .el-btn.el-btn--mass[aria-expanded="true"]:not(:disabled) *, .el-btn.el-btn--mass[aria-expanded="true"]:not(:disabled):hover * { color: #ffffff !important; } .el-massbtn-wrap { position: relative; display: inline-flex; align-items: center; } .el-massbtn-wrap .el-mass-count { position: absolute; top: -6px; right: -6px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--is-brand-blue); color: #fff; font: 700 10px var(--is-font-sans); pointer-events: none; } /* ── Filter bar ──────────────────────────────────────────── */ .el-filterbar { background: var(--is-bg-surface); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-1); padding: 12px 14px; margin-bottom: 10px; } .el-filterbar__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Search input — wrapper is a flex centered box (same pattern as ProjectsList). The flex wrapper handles vertical centering so the input doesn't need any line-height / padding-top tricks. */ .el-search { position: relative; flex: 1 1 320px; min-width: 240px; height: 36px; display: flex; align-items: center; padding-top:8px} .el-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--is-fg-3); font-size: 13px; z-index: 1; pointer-events: none; } .el-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 400 13.5px var(--is-font-sans); color: var(--is-fg-1); } .el-search input:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0, 123, 255, .15); } /* Filter pill (Status, Department, Job role inline) */ .el-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--is-radius-sm); border: 1px solid var(--is-border-3); background: #fff; font: 600 12.5px var(--is-font-sans); color: var(--is-fg-2); cursor: pointer; transition: background .12s, border-color .12s, color .12s; box-sizing: border-box; vertical-align: middle; } .el-pill:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); } .el-pill i.el-pill__chev { font-size: 9px; color: var(--is-fg-3); } .el-pill.is-active { background: var(--is-brand-blue-100); border-color: var(--is-brand-blue-200); color: var(--is-brand-blue-700); } .el-pill.is-active i.el-pill__chev { color: var(--is-brand-blue-700); } .el-pill__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--is-brand-blue); color: #fff; font: 700 10px var(--is-font-sans); margin-left: 1px; } /* "More filters" button */ .el-morebtn { position: relative; } .el-morebtn .el-pill__count { background: var(--is-warning); } /* Search + Clear icon buttons (right) */ .el-iconbtn { width: 36px; height: 36px; border-radius: var(--is-radius-sm); border: 1px solid var(--is-border-3); background: #fff; color: var(--is-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; transition: background .15s, color .15s, border-color .15s; padding: 0; box-sizing: border-box; flex: 0 0 36px; vertical-align: middle; } .el-iconbtn:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); } .el-iconbtn--brand { background: var(--is-brand-blue); border-color: var(--is-brand-blue); color: #fff; } .el-iconbtn--brand:hover { background: var(--is-brand-blue-700); color: #fff; } .el-spacer { flex: 1; } /* ── Active filter chips strip ───────────────────────────── */ .el-chipstrip { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--is-border-1); min-height: 0; } .el-chipstrip__label { font: 500 11px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; } .el-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px 0 9px; border-radius: 999px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); font: 600 12px var(--is-font-sans); color: var(--is-fg-1); } .el-chip i.el-chip__lead { font-size: 10px; color: var(--is-fg-3); } .el-chip__close { width: 18px; height: 18px; border-radius: 999px; background: transparent; border: 0; color: var(--is-fg-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; } .el-chip__close:hover { background: var(--is-border-2); color: var(--is-fg-1); } .el-chipstrip__clear { margin-left: auto; background: transparent; border: 0; font: 600 12px var(--is-font-sans); color: var(--is-action-blue); cursor: pointer; padding: 4px 6px; } .el-chipstrip__clear:hover { text-decoration: underline; } /* ── Selection bar (when employees are checked) ──────────── */ .el-selectbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--is-brand-blue-100); border: 1px solid var(--is-brand-blue-200); border-radius: var(--is-radius-md); margin-bottom: 10px; gap: 10px; flex-wrap: wrap; } .el-selectbar__left { display: flex; align-items: center; gap: 10px; font: 600 13px var(--is-font-sans); color: var(--is-brand-blue-700); } .el-selectbar__left input { accent-color: var(--is-brand-blue); width: 16px; height: 16px; } .el-selectbar__of { color: var(--is-fg-3); font-weight: 500; } .el-selectbar__link { background: transparent; border: 0; color: var(--is-brand-blue-700); cursor: pointer; font: 600 12px var(--is-font-sans); text-decoration: underline; padding: 0; } /* ── Table card (extends .pl-tablecard from insync-tables.css) ── */ .el-tablecard { background: var(--is-bg-surface); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-1); overflow: clip; } .el-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--is-border-1); gap: 12px; flex-wrap: wrap; } .el-toolbar__left { display: flex; align-items: center; gap: 12px; font: 500 12px var(--is-font-sans); color: var(--is-fg-2); } .el-toolbar__left b { color: var(--is-fg-1); font-weight: 700; } .el-toolbar__right { display: flex; align-items: center; gap: 8px; font: 500 12px var(--is-font-sans); color: var(--is-fg-3); } .el-pagesize { display: inline-flex; align-items: center; gap: 6px; } .el-pagesize select { height: 30px; padding: 0 24px 0 8px; border: 1px solid var(--is-border-2); border-radius: var(--is-radius-sm); background: #fff; font: 600 12px var(--is-font-sans); color: var(--is-fg-1); appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 6px center; } /* ── Compact table — sticky thead 3-rule pattern ─────────── */ table.el-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; } .el-table thead th { position: sticky; top: var(--is-topbar-h); z-index: 3; background: var(--is-bg-surface-3); font: 600 10.5px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--is-border-1); white-space: nowrap; user-select: none; box-shadow: 0 1px 0 var(--is-border-1), 0 2px 6px rgba(20, 28, 50, .04); } .el-table thead th .el-th { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .el-table thead th .el-th i { font-size: 9px; opacity: 0; transition: opacity .15s, color .15s; color: var(--is-fg-3); } .el-table thead th .el-th:hover i { opacity: .6; } .el-table thead th .el-th.is-sorted i { opacity: 1; color: var(--is-action-blue); } .el-table tbody tr { transition: background .12s; } .el-table tbody tr:hover { background: rgba(0, 123, 255, .04); } .el-table tbody tr.is-selected { background: rgba(0, 123, 255, .06); } .el-table tbody tr + tr td { border-top: 1px solid var(--is-border-1); } .el-table tbody td { padding: 6px 10px; vertical-align: middle; font: 500 12px var(--is-font-sans); color: var(--is-fg-1); height: 32px; } .el-table tbody td.is-muted { color: var(--is-fg-3); } .el-table tbody td.is-actions { text-align: right; white-space: nowrap; } .el-table .el-checkcol { width: 32px; padding-left: 14px !important; padding-right: 6px !important; } .el-table .el-checkcol input { accent-color: var(--is-brand-blue); width: 14px; height: 14px; cursor: pointer; vertical-align: middle; } .el-table .el-namecol a { color: var(--is-brand-blue-700); font-weight: 600; text-decoration: none; } .el-table .el-namecol a:hover { text-decoration: underline; } .el-table .el-emailcol { color: var(--is-fg-2); } .el-table .el-phonecol a { color: var(--is-fg-1); text-decoration: none; } .el-table .el-phonecol a:hover { color: var(--is-brand-blue); } /* Status badge (uses StatusColor from server) */ .el-statusbadge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font: 600 11px var(--is-font-sans); color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; } /* Row actions */ .el-rowact { display: inline-flex; gap: 3px; justify-content: flex-end; width: 100%; } .el-rowact button, .el-rowact a { width: 28px; height: 28px; border-radius: var(--is-radius-sm); border: 1px solid transparent; background: transparent; color: var(--is-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; transition: background .12s, color .12s, border-color .12s; text-decoration: none; padding: 0; } .el-rowact button:hover:not(:disabled), .el-rowact a:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); border-color: var(--is-border-1); } .el-rowact .is-account { font-size: 10px; gap: 1px; padding: 0 4px; width: auto; min-width: 38px; } .el-rowact .is-account .el-acc-sep { color: var(--is-fg-3); font-weight: 600; padding: 0 2px; } .el-rowact .is-danger:hover { background: rgba(199, 59, 59, .08); color: var(--is-danger); border-color: rgba(199, 59, 59, .25); } .el-rowact button:disabled { opacity: .35; cursor: not-allowed; } /* ── Card layout (≤1199px swap) ──────────────────────────── */ .el-table-wrap { display: block; } .el-cards-wrap { display: none; } @media (max-width: 1199px) { .el-table-wrap { display: none; } .el-cards-wrap { display: block; } .el-screen { padding: 16px 16px 60px; } } .el-cards { display: flex; flex-direction: column; gap: 8px; padding: 12px; } .el-card { background: #fff; border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); display: flex; flex-direction: column; transition: border-color .12s, box-shadow .12s; overflow: hidden; } .el-card:hover { border-color: var(--is-border-2); box-shadow: var(--is-shadow-1); } .el-card.is-checked { border-color: var(--is-brand-blue-200); background: rgba(0, 123, 255, .02); } .el-card__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .el-card__check { accent-color: var(--is-brand-blue); width: 14px; height: 14px; flex-shrink: 0; } .el-card__title { font: 700 14px var(--is-font-sans); color: var(--is-fg-1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .el-card__title a { color: var(--is-brand-blue-700); text-decoration: none; } .el-card__title a:hover { text-decoration: underline; } .el-card__head-status { flex-shrink: 0; } .el-card__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; padding: 8px 12px 10px 12px; border-top: 1px dashed var(--is-border-1); } @media (max-width: 760px) { .el-card__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .el-card__meta { grid-template-columns: 1fr; } } .el-card__field { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .el-card__field-label { font: 500 9.5px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; } .el-card__field-value { font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .el-card__field-value a { color: inherit; text-decoration: none; } .el-card__field-value a:hover { color: var(--is-brand-blue); } .el-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-top: 1px dashed var(--is-border-1); background: var(--is-bg-surface); } .el-card__foot-meta { font: 500 11px var(--is-font-sans); color: var(--is-fg-3); } /* ── Pagination (compact) ────────────────────────────────── */ .el-pager { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--is-border-1); background: var(--is-bg-surface); gap: 16px; flex-wrap: wrap; } .el-pager__info { font: 500 12px var(--is-font-sans); color: var(--is-fg-3); } .el-pager__info b { color: var(--is-fg-1); font-weight: 700; } .el-pager__pages { display: inline-flex; gap: 3px; align-items: center; } .el-pager button { height: 28px; min-width: 28px; padding: 0 8px; border-radius: var(--is-radius-sm); border: 1px solid var(--is-border-2); background: #fff; font: 600 12px var(--is-font-sans); color: var(--is-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .el-pager button:hover:not(:disabled) { background: var(--is-bg-surface-3); color: var(--is-fg-1); } .el-pager button.is-active { background: var(--is-brand-blue); border-color: var(--is-brand-blue); color: #fff; } .el-pager button:disabled { opacity: .35; cursor: not-allowed; } .el-pager__ellipsis { padding: 0 4px; color: var(--is-fg-3); } /* ── Empty state ─────────────────────────────────────────── */ .el-empty { text-align: center; padding: 60px 24px; } .el-empty i { font-size: 28px; color: var(--is-fg-3); margin-bottom: 12px; } .el-empty h3 { font: 700 16px var(--is-font-sans); margin: 0 0 6px; color: var(--is-fg-1); } .el-empty p { font: 500 13px var(--is-font-sans); color: var(--is-fg-3); margin: 0 0 16px; } /* ── Drawer (right slide-in for advanced filters) ────────── */ .el-drawer-backdrop { position: fixed; inset: 0; background: rgba(20, 28, 50, .32); z-index: 1040; } .el-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw; background: #fff; box-shadow: -8px 0 32px rgba(20, 28, 50, .16); z-index: 1050; display: flex; flex-direction: column; } .el-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--is-border-1); } .el-drawer__head h2 { font: 700 16px var(--is-font-sans); color: var(--is-fg-1); margin: 0; display: flex; align-items: center; gap: 10px; } .el-drawer__head h2 .el-pill__count { background: var(--is-warning); } .el-drawer__body { flex: 1; overflow-y: auto; padding: 8px 0; } .el-drawer__section { padding: 14px 20px; border-bottom: 1px solid var(--is-border-1); } .el-drawer__section:last-child { border-bottom: 0; } .el-drawer__section h3 { font: 700 11px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px 0; } .el-drawer__grid { display: grid; grid-template-columns: 1fr; gap: 10px; } .el-drawer__grid--2 { grid-template-columns: 1fr 1fr; } .el-field { display: flex; flex-direction: column; gap: 5px; } .el-field label { font: 500 11.5px var(--is-font-sans); color: var(--is-fg-2); } .el-drawer__foot { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--is-border-1); background: var(--is-bg-surface); } .el-drawer__foot .el-btn { flex: 1; justify-content: center; } /* ── SfMultiSelect overlay for ElFilterPill (transparent chrome) ─ The pill chrome (label + count + chevron) is rendered by our wrapper. The SfMultiSelect sits invisibly underneath providing the popup + checkboxes. CSS hides its default visuals. */ .el-screen .el-sf-pill { position: relative; } .el-screen .el-sf-pill .e-multiselect, .el-screen .el-sf-pill .e-control-wrapper, .el-screen .el-sf-pill .e-input-group { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; opacity: 0; } .el-screen .el-sf-pill .e-multi-select-wrapper { border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 36px !important; height: 36px !important; padding: 0 !important; } .el-screen .el-sf-pill .e-multi-select-wrapper .e-chips-collection { display: none !important; } .el-screen .el-sf-pill .e-multi-select-wrapper input.e-control, .el-screen .el-sf-pill .e-multi-select-wrapper .e-input-filter, .el-screen .el-sf-pill .e-multi-select-wrapper .e-searcher { color: transparent !important; caret-color: transparent !important; cursor: pointer !important; } .el-screen .el-sf-pill .e-multi-select-wrapper .e-ddl-icon, .el-screen .el-sf-pill .e-multi-select-wrapper .e-clear-icon { display: none !important; } /* ── SfMultiSelect inside the drawer (full visible form layout) ── */ .el-screen .el-drawer .e-multi-select-wrapper, .el-screen .el-drawer .e-input-group { border: 1px solid var(--is-border-3) !important; border-radius: var(--is-radius-sm) !important; background: #fff !important; min-height: 38px !important; box-shadow: none !important; } .el-screen .el-drawer .e-multi-select-wrapper.e-input-focus, .el-screen .el-drawer .e-multi-select-wrapper:focus-within, .el-screen .el-drawer .e-input-group.e-input-focus, .el-screen .el-drawer .e-input-group:focus-within { border-color: var(--is-action-blue) !important; box-shadow: 0 0 0 3px rgba(0, 123, 255, .15) !important; } .el-screen .el-drawer .e-chips-collection .e-chips { background: var(--is-brand-blue-100) !important; color: var(--is-brand-blue-700) !important; border-radius: 999px !important; font: 600 11px var(--is-font-sans) !important; } /* ── Syncfusion mass-action dropdown popup ───────────────── ROOT CAUSE: Syncfusion mirrors SfDropDownButton's CssClass attribute onto the popup element itself, so .el-btn + .el-btn--mass land on the popup div too. The button styling (height 36px, padding, white bg, border, etc.) then paints the popup as a small button-shaped rectangle behind the actual menu — that's the "ghost" wider/shorter popup the user reported. FIX: strip those button styles when the classes land on .e-dropdown-popup, and paint the visible chrome (white bg, shadow, rounded corners) on the inner