/* Global Users screen + Invite wizard (reuses .add-user-* and .role-badge from CompanyUsers.css) */

/* User Type pill */
.user-type-pill {
    display: inline-block;
    font: 600 11px/1 var(--font-ui, inherit);
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.user-type-pill.type-globaladmin { background: rgba(59, 94, 218, .12); color: #3B5EDA; }
.user-type-pill.type-admin { background: rgba(159, 45, 224, .12); color: #9F2DE0; }
.user-type-pill.type-accountant { background: rgba(227, 162, 163, .25); color: #B5484A; }
.user-type-pill.type-businesspartner { background: rgba(221, 174, 139, .25); color: #A9752F; }
.user-type-pill.type-businessreseller { background: rgba(179, 209, 141, .30); color: #4B7A2B; }
.user-type-pill.type-standard { background: rgba(140, 150, 165, .18); color: #55606E; }

/* Companies count + hover popover */
.companies-cell {
    position: relative;
    display: inline-flex;
    cursor: default;
}

.companies-count {
    display: inline-block;
    min-width: 26px;
    text-align: center;
    font: 600 12px/1 var(--font-ui, inherit);
    color: #3B5EDA;
    background: rgba(59, 94, 218, .12);
    border-radius: 10px;
    padding: 3px 8px;
}

.companies-popover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 180px;
    max-width: calc(100vw - 16px);
    margin-top: 4px;
    padding: 8px 10px;
    background: #fff;
    border: 0.5px solid #C5C5C5;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    flex-direction: column;
    gap: 4px;
}

/* Hover bridges over the 4px gap, so the pointer can move onto the list (e.g. to scroll it) without closing it. */
.companies-popover::before,
.companies-popover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
}

.companies-popover::before { top: -6px; }
.companies-popover::after { bottom: -6px; }

.companies-cell:hover .companies-popover {
    display: flex;
}

@position-try --companies-above {
    top: unset;
    margin-top: 0;
    bottom: anchor(top);
    margin-bottom: 4px;
}

/* The grid clips cell content (.grid-cell is overflow: hidden), so the popover is fixed to its badge's anchor
   to escape it; the absolute rules above are the fallback for browsers without anchor positioning. */
@supports (anchor-name: --test) {
    .companies-popover {
        position: fixed;
        top: anchor(bottom);
        left: anchor(left);
        position-try-options: --companies-above;
        position-try-fallbacks: --companies-above;
    }
}

.companies-popover-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: min(260px, 40vh);
    overflow-y: auto;
}

.companies-popover-title {
    font: 700 10px/1 var(--font-ui, inherit);
    letter-spacing: .4px;
    color: #8B93A4;
    margin-bottom: 2px;
}

.companies-popover-item {
    font-size: 12px;
    color: #111827;
}

/* Invite wizard */
.invite-section {
    max-width: 420px;
    margin-top: 16px;
}

.invite-section-title {
    font: 700 13px/1 var(--font-ui, inherit);
    color: #111827;
    margin-bottom: 10px;
}

.invite-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.invite-field label {
    font-size: 12px;
    color: #464C55;
}

.invite-field .req {
    color: #C0392B;
}

.invite-readonly {
    font-size: 13px;
    color: #111827;
    padding: 6px 0;
}

.invite-company-toggle {
    display: inline-flex;
    align-items: center;
}