/* contact-stylesheet.css
*
* All styles for the redesigned Web-Portal contacts page live here.
* Do NOT add contact-related rules to avidbit_portal.css, adrem.css,
* adrem_thomas.css, or main.css.
*
* Loaded from AvidBitPortalApplication.cpp via
* useStyleSheet(WLink("resources/css/contact-stylesheet.css"));
*
* Slice 01 (this slice): only the infinite-scroll chrome — loading
* footer, spinner, and the offscreen sentinel widget that triggers
* the next chunk. Component-level rules (compact card, sticky alpha
* section headers, detail drawer, etc.) land in later slices.
*/
/* Communicator quick action embeds UserContactsSelector inside the
* conversation panel, whose body is height-capped and overflow:hidden.
* Build a local flex height chain so the contacts body owns scrolling and
* the infinite-scroll sentinel can observe against the correct scroll root.
*/
.communicator-outer-widget #pwa_conversation_container .f_user_contacts_card,
.communicator-outer-widget #pwa_conversation_container .f_user_contacts_card > .card,
.communicator-outer-widget #pwa_conversation_container .f_user_contacts_body
{
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: 100%;
min-height: 0;
}
.communicator-outer-widget #pwa_conversation_container .f_user_contacts_card > .card
{
margin-bottom: 0;
}
.communicator-outer-widget #pwa_conversation_container .f_user_contacts_body
{
height: auto;
overflow-x: hidden;
overflow-y: auto;
}
.f_user_contacts_body
{
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
/* (#5) match the sticky-header gradient's solid colour so cards
* visibly scroll under the fading section header. */
background: #f3f4f6;
}
/* Keep the sticky alphabetical section headers BELOW the main nav.
*
* The Keenthemes nav is `.header { position: relative; z-index: 2 }`. Our
* sticky alpha header needs z-index:3 LOCALLY (to sit above a hovered card,
* which is z-index:2) — but at z-index:3 in the shared root stacking
* context it also paints over the nav. Fix: give the selector subtree
* (cards + sticky headers, class `.avidbit-selector`) its own stacking
* context at z-index:0. That confines everything inside — including the
* z-index:3 header — beneath the nav's z-index:2, while the header's local
* stacking vs. cards is preserved. 0 is the minimum value that still
* creates a context and sits below the nav.
*
* The detail drawer is a SIBLING of `.avidbit-selector` (both children of
* `.f_user_contacts_body`) and uses position:fixed, so its z-index:10050
* is unaffected and still overlays above the nav. */
.f_user_contacts_card .avidbit-selector
{
position: relative;
z-index: 0;
}
/* Offscreen sentinel. 1px tall so its boundingClientRect is meaningful
* to the scroll-position math but it takes no visible space. */
.f_user_contacts_load_sentinel
{
width: 100%;
height: 1px;
flex: 0 0 1px;
}
/* Loading footer shown at the bottom of the user contacts page. Mirrors the
* tone of the prototype: muted text, small spinner before the message while
* a chunk is in flight. */
.f_user_contacts_load_footer
{
padding: 24px 16px;
text-align: center;
font-size: 12px;
color: #9ca3af;
font-weight: 500;
}
.f_user_contacts_load_footer .f_spinner
{
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid #e5e7eb;
border-top-color: #5fb73f;
border-radius: 50%;
animation: f_user_contacts_spin .8s linear infinite;
vertical-align: middle;
margin-right: 8px;
}
@keyframes f_user_contacts_spin
{
to { transform: rotate(360deg); }
}
/* ─── Slice 05: CompactContactCard ──────────────────────────────────────
*
* Uniform-height cards in a responsive grid, grouped under sticky
* alphabetical section headers. Replaces the framework's default
* .selector-item layout for the contacts page only.
*/
/* Make the section group lay out as a grid. SelectorHeader's
* sub-items live inside the .itemsContainer it creates; we override
* that container's display only within the contacts card. */
.f_user_contacts_card .itemsContainer
{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
/* (#14) extra bottom room + a little side room so a hovered last-row
* card's green border + shadow isn't clipped by the container edge or
* overlapped by the next section's sticky header. */
padding: 8px 14px 28px 14px;
}
/* Sticky alphabetical section header.
*
* IMPORTANT: `.f_user_contacts_alpha_header` is the SelectorHeader ROOT, which
* *contains* its cards (they're added to its `.items-container`). Making the
* section root itself `position:sticky` pins the WHOLE section — so on a tall
* single-column section (mobile) the section's own lower cards can never scroll
* into view and the scroll appears to stop before the section ends. Instead, let
* the section flow normally and stick only its header LABEL row, so cards scroll
* under it. */
.f_user_contacts_card .f_user_contacts_alpha_header
{
position: static;
/* Horizontal inset for the cards + a little room after the last card. */
padding: 0 4px 8px 4px;
font-size: 12px;
font-weight: 700;
color: #9ca3af;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* The label row is the header's own item container — a DIRECT child, so the
* cards' nested `.avidbit-selector-item-container`s (under `.items-container`)
* are not matched. This row is what sticks. */
.f_user_contacts_card .f_user_contacts_alpha_header > .avidbit-selector-item-container
{
position: sticky;
top: 0;
/* Above cards — including a hovered card (z-index:2) — so rows scrolling up
* never peek through the header. */
z-index: 3;
/* Solid fill so cards fully disappear under the label (no bleed-through). */
background: #f3f4f6;
padding: 14px 0 8px 0;
}
/* Slice 09: "Just added" pinned section header + card highlight. */
.f_user_contacts_card .f_user_contacts_pinned_header
{
color: #4a9230;
}
.f_compact_contact_card.f_compact_card_pinned
{
border-color: #94cf73;
box-shadow: 0 2px 8px rgba(95, 183, 63, 0.14);
animation: f_contact_pin_flash 1.6s ease-out;
}
@keyframes f_contact_pin_flash
{
0% { background: #dcfce7; }
100% { background: #fff; }
}
/* Individual card. Strip the framework's default item chrome and rebuild.
* min-height (not a fixed height) keeps a consistent card size while letting a
* wrapped 2-line name / extra rows grow instead of clipping in column layout. */
.f_compact_contact_card
{
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 14px;
min-height: 156px;
display: flex;
flex-direction: column;
gap: 8px;
cursor: pointer;
transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
overflow: visible;
margin: 0;
position: relative;
}
.f_compact_contact_card:hover
{
border-color: #5fb73f;
box-shadow: 0 2px 8px rgba(95, 183, 63, 0.12);
z-index: 2;
}
.f_compact_contact_card:active { transform: translateY(1px); }
/* (#4) keep the green border while the card's detail tray is open */
.f_compact_contact_card.f_card_selected
{
border-color: #5fb73f;
box-shadow: 0 2px 8px rgba(95, 183, 63, 0.16);
z-index: 2;
}
/* (#14) The base list styling tags every card with `selector-item` and
* applies `.avidbit-selector .itemsContainer .selector-item:last-child
* { margin-bottom:100px; ... }` (plus border tweaks), which makes the
* LAST card in each section render with a different/missing bottom
* border. Force identical box on every card — including :last-child —
* with matching specificity + !important so the base rule can't win. */
.f_user_contacts_card .itemsContainer .f_compact_contact_card.selector-item,
.f_user_contacts_card .itemsContainer .f_compact_contact_card.selector-item:last-child,
.f_user_contacts_card .items-container .f_compact_contact_card.selector-item,
.f_user_contacts_card .items-container .f_compact_contact_card.selector-item:last-child
{
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
margin: 0 !important;
padding: 14px !important;
}
.f_user_contacts_card .itemsContainer .f_compact_contact_card.selector-item:hover,
.f_user_contacts_card .itemsContainer .f_compact_contact_card.selector-item:last-child:hover,
.f_user_contacts_card .items-container .f_compact_contact_card.selector-item:hover,
.f_user_contacts_card .items-container .f_compact_contact_card.selector-item:last-child:hover
{
border: 1px solid #5fb73f !important;
box-shadow: 0 2px 8px rgba(95, 183, 63, 0.12) !important;
}
.f_user_contacts_card .itemsContainer .f_compact_contact_card.f_card_selected.selector-item,
.f_user_contacts_card .itemsContainer .f_compact_contact_card.f_card_selected.selector-item:last-child,
.f_user_contacts_card .items-container .f_compact_contact_card.f_card_selected.selector-item,
.f_user_contacts_card .items-container .f_compact_contact_card.f_card_selected.selector-item:last-child
{
border: 1px solid #5fb73f !important;
box-shadow: 0 2px 8px rgba(95, 183, 63, 0.16) !important;
}
/* Multi-select "checked" state: the base Selector adds the `selected`
* class to the item (Selector::setItemSelected, GRID mode). Keep the
* green border on checked cards — including :last-child, which the base
* strips to border:0. Higher specificity + !important beats the base. */
.f_user_contacts_card .itemsContainer .f_compact_contact_card.selector-item.selected,
.f_user_contacts_card .itemsContainer .f_compact_contact_card.selector-item.selected:last-child,
.f_user_contacts_card .items-container .f_compact_contact_card.selector-item.selected,
.f_user_contacts_card .items-container .f_compact_contact_card.selector-item.selected:last-child
{
border: 1px solid #5fb73f !important;
box-shadow: 0 2px 8px rgba(95, 183, 63, 0.16) !important;
background: rgba(95, 183, 63, 0.04) !important;
z-index: 2;
}
/* ─── Mass-select action bar ─────────────────────────────────────────────
* Shown only while ≥1 contact is checked. Mounted as the FIRST child of the
* scrolling card body (a sibling of `.avidbit-selector`), so position:sticky
* pins it to the top of the scroll area. z-index:1 sits ABOVE the alpha
* section headers (confined inside `.avidbit-selector`'s z-index:0 stacking
* context) while staying BELOW the main nav (z-index:2) and the detail
* drawer (position:fixed, z-index:10050). */
.f_user_contacts_card .f_user_contacts_selection_bar
{
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 4px 8px 4px;
padding: 10px 16px;
background: #ffffff;
border: 1px solid #5fb73f;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(95, 183, 63, 0.18);
}
.f_user_contacts_card .f_user_contacts_selection_bar .f_selbar_count
{
font-size: 14px;
font-weight: 700;
color: #166534;
}
.f_user_contacts_card .f_user_contacts_selection_bar .f_selbar_actions
{
display: flex;
align-items: center;
gap: 8px;
}
.f_user_contacts_card .f_user_contacts_selection_bar .f_selbar_btn
{
-webkit-appearance: none;
appearance: none;
border: 1px solid #d1d5db;
background: #fff;
color: #374151;
border-radius: 8px;
padding: 6px 14px;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.f_user_contacts_card .f_user_contacts_selection_bar .f_selbar_btn:hover
{
background: #f9fafb;
border-color: #9ca3af;
}
.f_user_contacts_card .f_user_contacts_selection_bar .f_selbar_selectall
{
border-color: #94cf73;
color: #166534;
}
.f_user_contacts_card .f_user_contacts_selection_bar .f_selbar_selectall:hover
{
background: rgba(95, 183, 63, 0.08);
border-color: #5fb73f;
}
.f_user_contacts_card .f_user_contacts_selection_bar .f_selbar_delete
{
background: #dc2626;
border-color: #dc2626;
color: #fff;
}
.f_user_contacts_card .f_user_contacts_selection_bar .f_selbar_delete:hover
{
background: #b91c1c;
border-color: #b91c1c;
color: #fff;
}
.f_user_contacts_card .f_user_contacts_selection_bar .f_selbar_delete i
{
margin-right: 6px;
}
/* (#7) clean, modern context-menu items — the framework default renders
* Edit/Delete uppercase and oversized. The options dropdown is
* .avidbit-dropdown-menu inside the card. */
.f_compact_contact_card .avidbit-dropdown-menu
{
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
padding: 4px;
min-width: 150px;
background: #fff;
}
.f_compact_contact_card .avidbit-dropdown-menu a,
.f_compact_contact_card .avidbit-dropdown-menu .menu-item,
.f_compact_contact_card .avidbit-dropdown-menu li > a
{
display: flex;
align-items: center;
gap: 8px;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #374151 !important;
padding: 8px 12px !important;
border-radius: 6px;
line-height: 1.2;
}
.f_compact_contact_card .avidbit-dropdown-menu a:hover,
.f_compact_contact_card .avidbit-dropdown-menu .menu-item:hover,
.f_compact_contact_card .avidbit-dropdown-menu li > a:hover
{
background: #f3f4f6 !important;
color: #111827 !important;
}
.f_compact_contact_card .avidbit-dropdown-menu i
{
font-size: 13px !important;
width: 16px;
text-align: center;
}
.f_compact_contact_card .f_right_selector_item,
.f_compact_contact_card .options-menu-button
{
position: relative;
z-index: 100;
}
.f_compact_contact_card .avidbit-dropdown-menu
{
position: absolute;
z-index: 100;
}
/* Avatar — circle with initials. Overrides .selector-item's icon container
* inside our card. */
.f_compact_contact_card .f_compact_card_avatar,
.f_compact_contact_card [class*="icon-circle"]
{
width: 40px;
height: 40px;
border-radius: 9999px;
background: #e2eafc;
color: #1e3a8a;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 13px;
flex-shrink: 0;
}
.f_compact_contact_card .f_compact_card_avatar.f_contact_avatar_av_0,
.f_contact_drawer_avatar.f_contact_avatar_av_0 { background: #fde2e4; color: #9b1c2e; }
.f_compact_contact_card .f_compact_card_avatar.f_contact_avatar_av_1,
.f_contact_drawer_avatar.f_contact_avatar_av_1 { background: #e2eafc; color: #1e3a8a; }
.f_compact_contact_card .f_compact_card_avatar.f_contact_avatar_av_2,
.f_contact_drawer_avatar.f_contact_avatar_av_2 { background: #dcfce7; color: #166534; }
.f_compact_contact_card .f_compact_card_avatar.f_contact_avatar_av_3,
.f_contact_drawer_avatar.f_contact_avatar_av_3 { background: #fef3c7; color: #92400e; }
.f_compact_contact_card .f_compact_card_avatar.f_contact_avatar_av_4,
.f_contact_drawer_avatar.f_contact_avatar_av_4 { background: #ede9fe; color: #5b21b6; }
.f_compact_contact_card .f_compact_card_avatar.f_contact_avatar_av_5,
.f_contact_drawer_avatar.f_contact_avatar_av_5 { background: #fce7f3; color: #9d174d; }
.f_compact_contact_card .f_compact_card_avatar.f_contact_avatar_av_6,
.f_contact_drawer_avatar.f_contact_avatar_av_6 { background: #cffafe; color: #155e75; }
.f_compact_contact_card .f_compact_card_avatar.f_contact_avatar_av_7,
.f_contact_drawer_avatar.f_contact_avatar_av_7 { background: #f5d0fe; color: #6b21a8; }
/* ── Card layout overrides on the base SelectorItem scaffolding ──
* The base wraps content in .avidbit-selector-item-container and puts a
* grey Keenthemes .symbol-label behind the avatar plus a big pl-5 on the
* icon-title row. Reset all three so the card matches the prototype:
* tight left alignment, no grey chip behind the avatar, and the number/
* tags pinned to the bottom. */
.f_compact_contact_card .avidbit-selector-item-container
{
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: 100%;
gap: 6px;
padding: 0;
}
/* (#16) kill the framework's left padding so the avatar hugs the edge */
.f_compact_contact_card .icon-title-container
{
padding-left: 0 !important;
gap: 10px;
}
/* (#15) the grey square behind the avatar circle — make it disappear so
* only the coloured circle shows */
.f_compact_contact_card .symbol-container,
.f_compact_contact_card .symbol,
.f_compact_contact_card .symbol-label
{
background: transparent !important;
box-shadow: none !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
/* Title (display name) styling within the card. The base SelectorItem
* tags the title WText with `selector-item-title` and the subtitle with
* `selector-item-subtitle`. */
.f_compact_contact_card .selector-item-title
{
font-size: 14px;
font-weight: 600;
color: #111827;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Subtitle (company / email fallback) — small + clean (#4) */
.f_compact_contact_card .selector-item-subtitle
{
font-size: 11px;
font-weight: 400;
color: #9ca3af;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ─── Card toolbar: one wrapping row of columns, not 3 stacked full-width
* rows. Scoped to the contacts card so the shared .card-toolbar class
* elsewhere is unaffected. ──────────────────────────────────────────── */
.f_user_contacts_card .card-toolbar
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
padding: 10px 16px 6px 16px;
}
.f_user_contacts_card .card-toolbar .f_user_contacts_toolbar_group
{
display: inline-flex;
align-items: center;
width: auto; /* override any framework w-100 */
margin: 0;
padding: 0;
}
/* Group chips take the remaining width and wrap internally, so the owner +
* sort toggles stay on the first line beside them when there's room.
* Right-align the chips within that track so they sit flush to the right,
* keeping a clean gap between them and the search field on the left. */
.f_user_contacts_card .card-toolbar .f_contact_group_chips
{
flex: 1 1 240px;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
}
/* "Sort" label in front of the First/Last segmented toggle. */
.f_user_contacts_sort_label
{
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #9ca3af;
margin-right: 8px;
}
/* ─── Search box: clean rounded pill matching the redesign ──────────────
*
* The base Selector renders the search as `.av_containerSearch` wrapping a
* `.fa-search` icon + `.av_searchInput` line-edit, with a separate
* `.clear-search` × button. Scoped to BOTH the card (communicator embed)
* and the page header toolbar (CSUserContacts moves the search there via
* setPortalApp) so the search matches the redesign in both locations. */
.f_user_contacts_card .search-container,
.f_user_contacts_header_toolbar .search-container
{
align-items: center;
gap: 10px;
padding: 4px 16px 0 16px;
}
.f_user_contacts_card .av_containerSearch,
.f_user_contacts_header_toolbar .av_containerSearch
{
flex: 1 1 280px;
max-width: 420px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
height: auto;
display: flex;
align-items: center;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.f_user_contacts_card .av_containerSearch:focus-within,
.f_user_contacts_header_toolbar .av_containerSearch:focus-within
{
border-color: #5fb73f;
box-shadow: 0 0 0 3px rgba(95, 183, 63, 0.15);
}
/* Header search renders the icon as `fad fa-search` with text-dark; reset
* its colour + padding to match the card's. The inner .d-flex.h-100 wrapper
* is harmless — flex children still lay out the same. */
.f_user_contacts_card .av_containerSearch .fa-search,
.f_user_contacts_header_toolbar .av_containerSearch .fa-search
{
color: #9ca3af !important;
font-size: 13px;
padding: 0 8px 0 12px !important;
}
.f_user_contacts_card .av_containerSearch .av_searchInput,
.f_user_contacts_header_toolbar .av_containerSearch .av_searchInput
{
font-size: 13px;
color: #111827;
padding: 8px 12px 8px 0 !important;
background: transparent;
box-shadow: none !important;
border: 0 !important;
/* Grow to fill the bordered pill — without this the input sits at its
* content width, leaving empty bordered space to its right (the box looks
* large but the typeable area is small). */
flex: 1 1 auto;
width: 100% !important;
}
.f_user_contacts_card .av_containerSearch .av_searchInput::placeholder,
.f_user_contacts_header_toolbar .av_containerSearch .av_searchInput::placeholder
{
color: #9ca3af;
}
/* The search's inner wrapper (icon + input) must fill the pill — both its
* height (so the icon + input align vertically inside the rounded border) and
* its width (so the input can grow to the full bordered area). Applied to the
* card embed too, not just the header, or the input stays at content width. */
.f_user_contacts_card .av_containerSearch .d-flex,
.f_user_contacts_header_toolbar .av_containerSearch .d-flex
{
width: 100%;
flex: 1 1 auto;
align-items: center;
}
/* Clear (×) button — muted, rounds into the pill's trailing edge. */
.f_user_contacts_card .clear-search,
.f_user_contacts_header_toolbar .clear-search
{
color: #9ca3af;
cursor: pointer;
font-size: 18px;
border-radius: 6px;
padding: 2px;
}
.f_user_contacts_card .clear-search:hover,
.f_user_contacts_header_toolbar .clear-search:hover
{
color: #111827;
background: #f3f4f6;
}
/* ─── Toolbar toggles (owner Users/Shared/Integrations + sort First/Last) ──
*
* CSButtonGroup renders `.btn-group` > `.btn` (with `.active` on the
* selected button). Restyle into the prototype's segmented-pill look:
* a single rounded grey track, the active segment a raised white pill.
*/
.f_user_contacts_toggle .btn-group
{
display: inline-flex;
background: #f3f4f6;
border-radius: 10px;
padding: 4px;
gap: 4px;
}
.f_user_contacts_toggle .btn-group .btn
{
border: none;
background: transparent;
box-shadow: none;
border-radius: 8px;
padding: 6px 12px;
font-size: 13px;
font-weight: 500;
color: #374151;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.f_user_contacts_toggle .btn-group .btn:hover
{
background: rgba(255, 255, 255, 0.6);
color: #111827;
}
.f_user_contacts_toggle .btn-group .btn.active
{
background: #fff;
color: #111827;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.f_user_contacts_toggle .btn-group .btn.active i
{
color: #5fb73f;
}
/* ─── Slice 08: top-group quick-filter chips ────────────────────────── */
.f_contact_group_chips
{
gap: 6px;
/* Right-align the chips so they sit flush with the toolbar's
* right-aligned Add/Edit + toggle groups, keeping a clean separation
* from the search field on the left. */
justify-content: flex-end;
/* (#10/responsive) scroll horizontally instead of wrapping into a tall
* stack on narrow widths. */
flex-wrap: wrap;
}
.f_contact_group_chip
{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
color: #374151;
background: #fff;
border: 1px solid #e5e7eb;
cursor: pointer;
white-space: nowrap;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.f_contact_group_chip:hover
{
background: #f9fafb;
}
.f_contact_group_chip.is-active
{
background: #dcfce7;
color: #166534;
border-color: #bbf7d0;
}
.f_contact_group_chip_count
{
color: #9ca3af;
font-size: 11px;
}
.f_contact_group_chip.is-active .f_contact_group_chip_count
{
color: #166534;
opacity: 0.7;
}
/* Info container: primary number row + tag row stack at card bottom. */
.f_compact_contact_card .f_compact_card_info
{
display: flex;
flex-direction: column;
gap: 6px;
overflow: hidden;
padding: 0;
}
/* Override the framework's .info-container quirks:
* - padding-right: 35px + flex-grow: 4 squeeze our per-row buttons
* (memory: project_selector_item_info_container_padding)
* - `d-none d-sm-flex` hides it below the sm breakpoint; the card needs
* the number + tags visible at every width (slice 10 keeps the
* single-column layout readable). */
.f_compact_contact_card .info-container
{
display: flex !important;
flex-direction: column;
/* (#2) pin the number + tags block to the bottom of the card */
margin-top: auto;
padding-right: 0 !important;
flex-grow: 0 !important;
width: 100%;
}
/* ── Restore the card's intended vertical column layout ───────────────────────
* The card is DESIGNED as a vertical column (avatar+name on top, number+tags
* pinned to the bottom), but the base SelectorItem unconditionally adds Bootstrap
* `.flex-row` (flex-direction:row !important), overriding the card's
* non-!important `flex-direction:column`. So the card actually renders as a
* horizontal row where the width:100% info-container starves the name column —
* even short names truncate, long ones never fit.
*
* Force the designed column. Scoped to `.f_user_contacts_card` (added to the
* UserContactsSelector root, so it covers the contacts page, the communicator
* embed AND the PWA) so other CompactContactCard contexts (e.g. the detail
* drawer) are untouched. */
.f_user_contacts_card .f_compact_contact_card > .avidbit-selector-item-container
{
flex-direction: column !important;
height: 100%;
width: 100%;
min-width: 0;
gap: 8px;
padding: 0 !important;
position: relative;
}
/* Identity row spans the full width; leave room on the right for the
* absolutely-positioned options (⋮) menu. */
.f_user_contacts_card .f_compact_contact_card .icon-title-container
{
width: 100%;
min-width: 0;
flex: 0 0 auto !important;
padding-left: 0 !important;
padding-right: 34px;
}
.f_user_contacts_card .f_compact_contact_card .title-container
{
min-width: 0;
flex: 1 1 auto;
}
/* Allow the name to wrap to a second line instead of ellipsis-truncating. */
.f_user_contacts_card .f_compact_contact_card .selector-item-title
{
white-space: normal;
}
/* Number + tags stay inside the card, pinned to the bottom. */
.f_user_contacts_card .f_compact_contact_card .info-container
{
display: flex !important;
flex-direction: column;
width: 100%;
min-width: 0;
margin-top: auto;
padding: 0 !important;
flex: 0 0 auto !important;
}
/* The ⋮ menu (.right-interaction) is a SIBLING of the identity/info rows, so in
* column layout it would otherwise stack at the card bottom — pin it to the
* top-right corner of the card instead. */
.f_user_contacts_card .f_compact_contact_card .right-interaction
{
position: absolute;
top: 12px;
right: 12px;
}
/* Number row: number/type text + Call/Message hover buttons. */
.f_compact_card_num_row
{
display: flex;
align-items: center;
gap: 8px;
}
.f_compact_card_num_text
{
flex: 1 1 auto;
min-width: 0;
}
.f_compact_card_num
{
font-size: 13px;
font-weight: 500;
color: #374151;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.f_compact_card_num_type
{
font-size: 10px;
font-weight: 600;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.06em;
display: block;
margin-top: 2px;
}
.f_compact_card_no_num
{
color: #d1d5db;
font-size: 12px;
}
/* Hover-revealed Call/Message buttons. */
.f_compact_card_btn
{
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: #6b7280;
cursor: pointer;
flex-shrink: 0;
transition: background 0.12s ease, color 0.12s ease;
opacity: 0;
}
.f_compact_contact_card:hover .f_compact_card_btn { opacity: 1; }
.f_compact_card_btn:hover { background: #f3f4f6; color: #111827; }
.f_compact_card_btn_call { color: #5fb73f; }
.f_compact_card_btn_call:hover { background: #dcfce7; color: #15803d; }
/* Tag pills (#11, #12): single row, no wrap so the "+N" pill is never
* pushed onto a hidden second line. Individual tags ellipsis-truncate;
* the "+N" never shrinks. Smaller + cleaner than the framework default. */
.f_compact_card_tags
{
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 4px;
overflow: hidden;
max-height: 20px;
}
.f_compact_card_tag
{
display: inline-flex;
align-items: center;
background: #f3f4f6;
color: #6b7280;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
padding: 2px 8px;
border-radius: 9999px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
}
.f_compact_card_tag_more
{
background: #e5e7eb;
color: #4b5563;
font-weight: 600;
flex-shrink: 0;
max-width: none;
cursor: default;
}
/* Notes callout on the card — mirrors the editor live-preview notes block
* (amber, left-accent). Body clamps to 2 lines so a long note can't blow out
* the card. */
.f_compact_contact_card .f_compact_card_notes
{
background: #fffbeb;
border-left: 3px solid #fcd34d;
padding: 6px 8px;
border-radius: 0 6px 6px 0;
overflow: hidden;
}
.f_compact_contact_card .f_compact_card_notes_label
{
display: block;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #92400e;
}
.f_compact_contact_card .f_compact_card_notes_body
{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 11px;
line-height: 1.35;
color: #374151;
margin-top: 2px;
white-space: pre-wrap;
word-break: break-word;
}
/* ─── Slice 07: Contact detail drawer ───────────────────────────────────
*
* Non-modal slide-in from the right edge. Backdrop is semi-transparent so
* the contacts grid stays visible behind. Click outside / × button to
* dismiss. Clicking another card swaps the body in place.
*/
.f_contact_drawer_root
{
position: fixed;
inset: 0;
z-index: 10050;
pointer-events: none;
}
.f_contact_drawer_backdrop
{
position: absolute;
inset: 0;
background: rgba(17, 24, 39, 0.35);
opacity: 0;
transition: opacity 0.18s ease;
pointer-events: none;
}
.f_contact_drawer_panel
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 480px;
max-width: 90vw;
background: #fff;
box-shadow: -10px 0 24px rgba(0, 0, 0, 0.08);
transform: translateX(100%);
transition: transform 0.22s ease;
pointer-events: none;
display: flex;
flex-direction: column;
overflow: hidden;
}
.f_contact_drawer_root.is-open
{
pointer-events: auto;
}
.f_contact_drawer_root.is-open .f_contact_drawer_backdrop
{
opacity: 1;
pointer-events: auto;
}
.f_contact_drawer_root.is-open .f_contact_drawer_panel
{
transform: translateX(0);
pointer-events: auto;
}
.f_contact_drawer_close
{
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border-radius: 8px;
color: #6b7280;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1;
}
.f_contact_drawer_close:hover
{
background: #f3f4f6;
color: #111827;
}
.f_contact_drawer_body
{
flex: 1 1 auto;
overflow-y: auto;
padding: 32px 28px 28px 28px;
}
.f_contact_drawer_head
{
display: flex;
align-items: flex-start;
gap: 16px;
}
.f_contact_drawer_avatar
{
width: 72px;
height: 72px;
border-radius: 9999px;
background: #e2eafc;
color: #1e3a8a;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 24px;
flex-shrink: 0;
}
.f_contact_drawer_head_text
{
flex: 1;
min-width: 0;
}
.f_contact_drawer_name
{
font-size: 22px;
font-weight: 700;
color: #111827;
display: block;
}
.f_contact_drawer_co
{
font-size: 14px;
color: #4b5563;
margin-top: 2px;
display: block;
}
.f_contact_drawer_site
{
font-size: 12px;
color: #4a9230;
margin-top: 4px;
display: inline-block;
}
.f_contact_drawer_site:hover { text-decoration: underline; }
.f_contact_drawer_header_actions
{
display: flex;
gap: 8px;
margin-top: 20px;
}
.f_contact_drawer_primary_btn
{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
user-select: none;
}
.f_contact_drawer_primary_btn.f_drawer_call_btn
{
background: #5fb73f;
color: #fff;
}
.f_contact_drawer_primary_btn.f_drawer_call_btn:hover { background: #4a9230; }
.f_contact_drawer_primary_btn.f_drawer_msg_btn
{
background: #fff;
color: #374151;
border: 1px solid #e5e7eb;
}
.f_contact_drawer_primary_btn.f_drawer_msg_btn:hover { background: #f9fafb; }
.f_contact_drawer_notes
{
margin-top: 20px;
background: #fffbeb;
border-left: 4px solid #fcd34d;
padding: 12px 14px;
border-radius: 0 8px 8px 0;
}
.f_contact_drawer_notes_label
{
font-size: 10px;
font-weight: 700;
color: #92400e;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 4px;
display: block;
}
.f_contact_drawer_notes_body
{
font-size: 13px;
color: #374151;
line-height: 1.5;
}
.f_contact_drawer_tags
{
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 20px;
}
.f_contact_drawer_tag
{
display: inline-flex;
align-items: center;
background: #f3f4f6;
color: #374151;
font-size: 11px;
font-weight: 500;
padding: 2px 8px;
border-radius: 9999px;
line-height: 1.4;
white-space: nowrap;
}
.f_contact_drawer_rows
{
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 24px;
}
.f_contact_drawer_row
{
display: flex;
align-items: center;
gap: 14px;
padding: 12px;
border-radius: 12px;
border: 1px solid #e5e7eb;
transition: border-color 0.1s ease, background 0.1s ease;
}
.f_contact_drawer_row:hover
{
border-color: #94cf73;
background: rgba(95, 183, 63, 0.04);
}
.f_contact_drawer_row.is-default
{
border-color: #94cf73;
background: rgba(95, 183, 63, 0.05);
}
.f_contact_drawer_row_icon
{
width: 40px;
height: 40px;
border-radius: 10px;
background: #f3f4f6;
color: #6b7280;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.f_contact_drawer_row_content
{
flex: 1;
min-width: 0;
}
.f_contact_drawer_row_label
{
font-size: 10px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.06em;
display: flex;
align-items: center;
gap: 8px;
}
.f_contact_drawer_row_value
{
font-size: 15px;
color: #111827;
font-weight: 500;
font-variant-numeric: tabular-nums;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 2px;
}
.f_contact_drawer_row_actions
{
display: flex;
gap: 2px;
}
.f_contact_drawer_action
{
width: 32px;
height: 32px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #6b7280;
cursor: pointer;
flex-shrink: 0;
transition: background 0.12s ease, color 0.12s ease;
}
.f_contact_drawer_action:hover
{
background: #f3f4f6;
color: #111827;
}
.f_contact_drawer_action.f_action_call { color: #5fb73f; }
.f_contact_drawer_action.f_action_call:hover
{
background: #dcfce7;
color: #15803d;
}
.f_contact_drawer_action.f_star_on
{
color: #5fb73f;
cursor: default;
}
.f_contact_drawer_action.f_star_on:hover
{
background: transparent;
color: #5fb73f;
}
.f_contact_drawer_action.f_star_off
{
color: #d1d5db;
}
.f_contact_drawer_action.f_star_off:hover
{
background: #f3f4f6;
color: #5fb73f;
}
.f_contact_drawer_default_badge
{
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 700;
color: #4a9230;
background: #dcfce7;
border-radius: 4px;
padding: 1px 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.f_contact_drawer_footer
{
flex-shrink: 0;
border-top: 1px solid #e5e7eb;
padding: 14px 28px;
display: flex;
gap: 10px;
justify-content: flex-end;
background: #f9fafb;
}
.f_contact_drawer_remove_btn
{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 8px;
background: #fff;
border: 1px solid #fecaca;
color: #b91c1c;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.f_contact_drawer_remove_btn:hover
{
background: #fef2f2;
border-color: #fca5a5;
}
.f_contact_drawer_edit_btn
{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 8px;
background: #5fb73f;
color: #fff;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.f_contact_drawer_edit_btn:hover { background: #4a9230; }
/* ─── Slice 10: responsive ──────────────────────────────────────────── */
/* Drawer goes full-screen on narrow viewports. */
@media (max-width: 768px)
{
.f_contact_drawer_panel
{
width: 100%;
max-width: 100%;
}
}
/* Toolbar wraps + group chips scroll horizontally instead of stacking. */
@media (max-width: 900px)
{
.f_user_contacts_toggle
{
flex-wrap: wrap;
}
.f_contact_group_chips
{
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 4px;
}
.f_contact_group_chips::-webkit-scrollbar
{
height: 4px;
}
}
/* Single-column cards on phones; let card height grow so nothing clips. */
@media (max-width: 640px)
{
.f_user_contacts_card .itemsContainer
{
grid-template-columns: 1fr;
padding: 8px 10px 24px 10px;
}
.f_compact_contact_card
{
min-height: 140px;
}
/* Touch has no hover — drop the Call/Message hover buttons so they never
* take width from the number text. */
.f_user_contacts_card .f_compact_contact_card .f_compact_card_btn
{
display: none;
}
.f_contact_drawer_body
{
padding: 24px 18px 18px 18px;
}
}
/* ─── Header overflow (kebab) menu ───────────────────────────────────────
* Add Contact + Import Contacts CSV live in this kebab. It's added in the
* CSUserContacts ctor — before route() relocates the search box into the
* (d-flex) header toolbar — so it sits BEFORE the search in DOM order.
* `order:10` re-sorts it to render AFTER the search (default order 0) on the
* same flex line; margin-left adds a clear gap between the search and the
* menu. */
.f_user_contacts_header_toolbar .f_user_contacts_kebab
{
order: 10;
margin-left: 16px;
}
/* Modern icon button (prototype variant B): a SUBTLE translucent-white circle
* on the dark header at rest, lifting to a slightly lighter frost on hover —
* NOT solid white.
*
* CRITICAL: scope to the DIRECT-CHILD anchor (`>`). The dropdown items are also
* `.menu-item-anchor-class` (nested inside .avidbit-dropdown-menu); a descendant
* selector here gave each item the 40px circle + near-white text, so the menu
* rendered blank. The `>` keeps this on the kebab button only. */
.f_user_contacts_header_toolbar .f_user_contacts_kebab > .menu-item-anchor-class
{
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.14) !important;
color: rgba(255, 255, 255, 0.90) !important;
box-shadow: none !important;
cursor: pointer !important;
transition: background 0.15s ease, color 0.15s ease;
}
.f_user_contacts_header_toolbar .f_user_contacts_kebab > .menu-item-anchor-class:hover
{
background: rgba(255, 255, 255, 0.38) !important;
color: #ffffff !important;
cursor: pointer !important;
}
/* Centre the ⋮ glyph in the button (5px nudges it off its left bias). Scoped to
* the button anchor so it doesn't touch the dropdown items' icons. */
.f_user_contacts_header_toolbar .f_user_contacts_kebab > .menu-item-anchor-class .menu-item-icon
{
font-size: 18px;
margin: 0;
padding-left: 5px;
}
/* Dropdown panel + visible item rows. Sized to the longest item so "Import
* Contacts CSV" is never truncated; item styling mirrors the card's options
* menu (the framework default leaves the rows invisible). */
.f_user_contacts_header_toolbar .f_user_contacts_kebab .avidbit-dropdown-menu
{
min-width: max-content;
white-space: nowrap;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
padding: 4px;
}
.f_user_contacts_header_toolbar .f_user_contacts_kebab .avidbit-dropdown-menu .menu-item-anchor-class
{
display: flex !important;
align-items: center;
gap: 10px;
width: auto !important;
height: auto !important;
border-radius: 6px !important;
background: transparent !important;
color: #374151 !important;
font-size: 13px !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
padding: 9px 14px !important;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
}
.f_user_contacts_header_toolbar .f_user_contacts_kebab .avidbit-dropdown-menu .menu-item-anchor-class:hover
{
background: #f3f4f6 !important;
color: #111827 !important;
}
.f_user_contacts_header_toolbar .f_user_contacts_kebab .avidbit-dropdown-menu .menu-item-icon
{
font-size: 13px !important;
width: 16px;
text-align: center;
padding-left: 0;
color: #6b7280;
}
/* Brand-green icon on row hover (matches the prototype). The icon carries its
* own colour above, so override it explicitly on the anchor's :hover. */
.f_user_contacts_header_toolbar .f_user_contacts_kebab .avidbit-dropdown-menu .menu-item-anchor-class:hover .menu-item-icon
{
color: #5fb73f !important;
}
.f_user_contacts_header_toolbar .f_user_contacts_kebab .avidbit-dropdown-menu .menu-item-text
{
white-space: nowrap;
}
/* ─── Add / Edit toolbar buttons ─────────────────────────────────────────
*
* The EditableSelector base builds Add/Edit as CSMenuItems. Real DOM
* (CSMenuItem::renderMenuItem):
*
* The .btn-primary / .btn-secondary classes are app-wide, so every rule is
* scoped under .f_user_contacts_card to restyle ONLY the contacts page.
* Target the anchor directly (it carries the btn class) — an earlier
* version used `.menu-item > a` which never matched (class is
* `avidbit-menu-item`). Matches the prototype: brand-green filled Add,
* white outlined Edit, pill radius, no Keenthemes chrome. */
/* Scopes: the card (communicator embed, buttons inside .f_user_contacts_card)
* AND the page title bar (CSUserContacts moves Add/Edit/Search into the
* PortalApp header, tagged .f_user_contacts_header_toolbar). Both anchors
* render as