/* Logins UI — profile widget styles v1.3.0
 * Load via: <link rel="stylesheet" href="logins/ui.css">
 * All rules are scoped under .logins-widget to avoid collisions.
 *
 * Theming — set these CSS custom properties on .logins-widget or an ancestor:
 *   --logins-dropdown-bg     (default: #fff)
 *   --logins-dropdown-border (default: #ddd)
 *   --logins-dropdown-hover  (default: rgba(0,0,0,0.06))
 *   --logins-btn-hover-bg    (default: rgba(0,0,0,0.06))
 */

.logins-widget {
    position: relative;
    display: inline-block;
}

/* ── Avatar button ───────────────────────────────────────── */

.logins-btn {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

.logins-btn:hover {
    background: var(--logins-btn-hover-bg, rgba(0, 0, 0, 0.06));
    transform: scale(1.05);
}

.logins-btn:active {
    transform: scale(0.98);
}

.logins-btn[data-authenticated="true"] {
    border-width: 2px;
}

.logins-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: none;
}

.logins-avatar[src]:not([src=""]) {
    display: block;
}

.logins-avatar[src]:not([src=""]) + .logins-initials {
    display: none;
}

.logins-initials {
    display: block;
    line-height: 1;
    user-select: none;
}

/* ── Dropdown menu ───────────────────────────────────────── */

.logins-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--logins-dropdown-bg, #fff);
    border: 1px solid var(--logins-dropdown-border, #ddd);
    border-radius: 4px;
    min-width: 140px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
    z-index: 9999;
}

.logins-dropdown.logins-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.logins-dropdown-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.logins-dropdown-item:hover {
    background: var(--logins-dropdown-hover, rgba(0, 0, 0, 0.06));
}

.logins-dropdown-item:not(:last-child) {
    border-bottom: 1px solid var(--logins-dropdown-border, #ddd);
}

/* ── Auth-conditional visibility ─────────────────────────── */

.logins-auth-only {
    display: none !important;
}

.logins-no-auth-only {
    display: block;
}

[data-authenticated="true"] ~ .logins-dropdown .logins-auth-only {
    display: block !important;
}

[data-authenticated="true"] ~ .logins-dropdown .logins-no-auth-only {
    display: none !important;
}

/* Role-based visibility — hidden by default, shown via data attribute on widget */

.logins-admin-only {
    display: none !important;
}

.logins-widget[data-role="admin"] .logins-admin-only {
    display: block !important;
}