/* Extracted verbatim from templates/pages/contacts.html.
   Loaded at the same document position as the original <style>;
   cascade order matters. */
.contacts-import-menu {
    position: relative;
}

.contacts-import-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    display: none;
    min-width: 220px;
    padding: 0.45rem;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--surface-strong);
    box-shadow: var(--shadow-lg);
    /* Floating panel: frosts the cards underneath */
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    backdrop-filter: blur(22px) saturate(1.15);
}

.contacts-import-menu-panel.open {
    display: grid;
    gap: 0.35rem;
}

.contacts-import-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 0.7rem;
    border-radius: 8px;
    color: var(--foreground);
    text-align: left;
}

.contacts-import-option:hover {
    /* was var(--muted), which no stylesheet defines (hover painted nothing) */
    background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.provider-import-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 1024px) {
    .provider-import-controls {
        grid-template-columns: minmax(0, 1fr) 220px auto;
    }
}

.provider-import-list {
    display: grid;
    gap: 0.55rem;
    max-height: min(52vh, 520px);
    overflow-y: auto;
    padding-right: 0.25rem;
}

.provider-import-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.8rem;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--surface);
}

.provider-import-row.is-duplicate {
    opacity: 0.62;
}

.provider-import-meta {
    min-width: 0;
}

.provider-import-name,
.provider-import-subtext {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}