/* ==========================================================================
   TOPPERWORK — PROFILE PRESENCE
   ==========================================================================
   Global reusable user presence system:
   - dashboard topbar avatar
   - dashboard right-rail avatar
   - freelancer/client dashboard profile hero avatar
   - freelancer/client public profile avatar
   - future live-account avatar surfaces using the same data contract

   Presence contract:
   - [data-presence-avatar]
   - [data-presence-user-id]
   - [data-presence-indicator]
   ========================================================================== */


/* ==========================================================================
   GENERIC AVATAR PRESENCE WRAPPER
   ========================================================================== */

[data-presence-avatar] {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
}

.topperwork-presence-avatar-shell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: visible !important;
}


/* ==========================================================================
   ACTIVITY DOT
   --------------------------------------------------------------------------
   14.64466094% is the inset from a circle's right/bottom edge to its
   45-degree circumference point. Subtracting half the dot diameter places
   the dot CENTER exactly on the avatar ring, at every square avatar size.
   ========================================================================== */

.topperwork-presence-indicator {
    --topperwork-presence-dot-size: 16px;
    --topperwork-presence-dot-half: 8px;

    position: absolute;

    right:
        calc(
            14.64466094%
            - var(--topperwork-presence-dot-half)
        );

    bottom:
        calc(
            14.64466094%
            - var(--topperwork-presence-dot-half)
        );

    z-index: 6;

    width:
        var(--topperwork-presence-dot-size);

    height:
        var(--topperwork-presence-dot-size);

    box-sizing:
        border-box;

    border:
        2px solid
        var(
            --color-dashboard-surface,
            var(--color-surface)
        );

    border-radius:
        50%;

    background:
        #6B7280;

    box-shadow:
        0
        2px
        8px
        rgba(0, 0, 0, 0.24);
}

.topperwork-presence-indicator[hidden] {
    display:
        none !important;
}

.topperwork-presence-indicator[data-presence-state="online"] {
    background:
        #22C55E;
}


.topperwork-presence-indicator[data-presence-state="idle"] {
    background:
        #F59E0B;
}


.topperwork-presence-indicator[data-presence-state="away"],
.topperwork-presence-indicator[data-presence-state="offline"],
.topperwork-presence-indicator[data-presence-state="hidden"] {
    background:
        #6B7280;
}

.topperwork-presence-indicator--hero {
    --topperwork-presence-dot-size: 18px;
    --topperwork-presence-dot-half: 9px;
}


/* ==========================================================================
   AVATAR BRAND RING
   --------------------------------------------------------------------------
   The ring is a real transparent border + layered background, not an outside
   box-shadow ring. Therefore no top/left portion can be cropped by a parent.
   White avatar borders are removed in both light and dark modes.
   ========================================================================== */

html body.topperwork-dashboard-body
.topperwork-freelancer-profile-v2__avatar,

html body.topperwork-dashboard-body
.topperwork-client-profile__avatar,

html body.topperwork-dashboard-body
.topperwork-dashboard-rail__avatar,

html body.topperwork-dashboard-body
.topperwork-dashboard-user-menu__avatar,

html body.topperwork-public-profile-page
.topperwork-freelancer-profile-v2__avatar,

html body.topperwork-public-profile-page
.topperwork-public-client__avatar {
    position:
        relative;

    overflow:
        hidden !important;

    box-sizing:
        border-box;

    border:
        2px solid
        transparent !important;

    border-radius:
        50%;

    background:
        linear-gradient(
            var(
                --color-dashboard-surface,
                var(--color-surface)
            ),
            var(
                --color-dashboard-surface,
                var(--color-surface)
            )
        )
        padding-box,

        linear-gradient(
            135deg,
            #60A5FA 0%,
            #3B82F6 34%,
            #6366F1 68%,
            #8B5CF6 100%
        )
        border-box
        !important;

    box-shadow:
        0
        10px
        26px
        rgba(0, 0, 0, 0.18),
        0
        0
        18px
        rgba(59, 130, 246, 0.12),
        0
        0
        24px
        rgba(139, 92, 246, 0.10)
        !important;
}


/* Small avatars use a 2px ring. */

html body.topperwork-dashboard-body
.topperwork-dashboard-rail__avatar,

html body.topperwork-dashboard-body
.topperwork-dashboard-user-menu__avatar {
    border-width:
        2px !important;
}


/* Keep photo/placeholder fully inside the real gradient ring. */

html body.topperwork-dashboard-body
.topperwork-freelancer-profile-v2__avatar > img,

html body.topperwork-dashboard-body
.topperwork-client-profile__avatar > img,

html body.topperwork-dashboard-body
.topperwork-dashboard-rail__avatar > img,

html body.topperwork-dashboard-body
.topperwork-dashboard-user-menu__avatar > img,

html body.topperwork-public-profile-page
.topperwork-freelancer-profile-v2__avatar > img,

html body.topperwork-public-profile-page
.topperwork-public-client__avatar > img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        0;

    border-radius:
        50%;

    object-fit:
        cover;
}


/* ==========================================================================
   DASHBOARD TOPBAR — ALWAYS SHOW PROFILE AVATAR
   ========================================================================== */

.topperwork-dashboard-topbar__right
.topperwork-dashboard-user-menu {
    display:
        flex !important;

    flex:
        0 0 auto;
}

.topperwork-dashboard-user-menu__trigger--profile {
    width:
        42px;

    height:
        42px;

    min-width:
        42px;

    min-height:
        42px;

    padding:
        0;

    overflow:
        visible;

    border:
        0;

    border-radius:
        50%;

    background:
        transparent;
}

.topperwork-dashboard-user-menu__trigger--profile:hover {
    background:
        transparent;
}


/* ==========================================================================
   PROFILE STATUS MENU PANEL
   ========================================================================== */

.topperwork-dashboard-user-menu__panel {
    position:
        absolute;

    top:
        calc(100% + 12px);

    right:
        0;

    z-index:
        1200;

    width:
        min(340px, calc(100vw - 24px));

    padding:
        1rem;

    border:
        1px solid
        rgba(96, 165, 250, 0.24);

    border-radius:
        16px;

    background:
        linear-gradient(
            180deg,
            rgba(10, 22, 38, 0.98) 0%,
            rgba(7, 17, 31, 0.98) 100%
        );

    box-shadow:
        0
        18px
        50px
        rgba(0, 0, 0, 0.35),
        0
        0
        0
        1px
        rgba(139, 92, 246, 0.12);

    backdrop-filter:
        blur(10px);
}

html[data-theme="light"]
.topperwork-dashboard-user-menu__panel {
    border-color:
        var(--color-dashboard-border);

    background:
        var(--color-dashboard-surface);

    box-shadow:
        0
        18px
        44px
        rgba(15, 23, 42, 0.14),
        0
        0
        0
        1px
        rgba(99, 102, 241, 0.08);
}

.topperwork-dashboard-user-menu__panel[hidden] {
    display:
        none !important;
}

.topperwork-dashboard-user-menu__panel-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

    padding-bottom:
        0.85rem;

    margin-bottom:
        0.9rem;

    border-bottom:
        1px solid
        rgba(96, 165, 250, 0.14);
}

html[data-theme="light"]
.topperwork-dashboard-user-menu__panel-header {
    border-bottom-color:
        var(--color-dashboard-divider);
}

.topperwork-dashboard-user-menu__panel-title {
    min-width:
        0;
}

.topperwork-dashboard-user-menu__panel-title strong {
    display:
        block;

    color:
        var(--color-text-primary);

    font-size:
        0.95rem;

    font-weight:
        800;

    line-height:
        1.3;
}

.topperwork-dashboard-user-menu__panel-title span {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--color-text-secondary);

    font-size:
        0.8rem;

    line-height:
        1.35;
}

.topperwork-dashboard-user-menu__profile-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--color-primary);

    font-size:
        0.82rem;

    font-weight:
        700;

    text-decoration:
        none;
}

.topperwork-dashboard-user-menu__profile-link:hover {
    color:
        var(--color-primary-hover);
}

.topperwork-dashboard-user-menu__presence-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;
}

.topperwork-dashboard-user-menu__presence-copy {
    min-width:
        0;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--color-text-secondary);

    font-size:
        0.82rem;

    font-weight:
        700;

    line-height:
        1.35;
}

.topperwork-dashboard-user-menu__status-dot {
    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        #6B7280;
}

.topperwork-dashboard-user-menu__status-dot[data-presence-state="online"] {
    background:
        #22C55E;
}


.topperwork-dashboard-user-menu__status-dot[data-presence-state="idle"] {
    background:
        #F59E0B;
}


.topperwork-dashboard-user-menu__status-dot[data-presence-state="away"],
.topperwork-dashboard-user-menu__status-dot[data-presence-state="offline"],
.topperwork-dashboard-user-menu__status-dot[data-presence-state="hidden"] {
    background:
        #6B7280;
}


/* ==========================================================================
   SWITCH
   Checked  = automatic activity status
   Unchecked = manual Away (gray)
   ========================================================================== */

.topperwork-dashboard-user-menu__switch {
    position:
        relative;

    display:
        inline-flex;

    flex:
        0 0 auto;

    width:
        54px;

    height:
        32px;
}

.topperwork-dashboard-user-menu__switch input {
    position:
        absolute;

    inset:
        0;

    opacity:
        0;

    margin:
        0;

    cursor:
        pointer;
}

.topperwork-dashboard-user-menu__switch-slider {
    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        1px solid
        rgba(96, 165, 250, 0.24);

    border-radius:
        999px;

    background:
        rgba(15, 23, 42, 0.95);

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

html[data-theme="light"]
.topperwork-dashboard-user-menu__switch-slider {
    border-color:
        var(--color-dashboard-border);

    background:
        var(--color-dashboard-surface-hover);
}

.topperwork-dashboard-user-menu__switch-slider::after {
    content:
        "";

    position:
        absolute;

    top:
        3px;

    left:
        3px;

    width:
        24px;

    height:
        24px;

    border-radius:
        50%;

    background:
        #FFFFFF;

    box-shadow:
        0
        4px
        12px
        rgba(0, 0, 0, 0.24);

    transition:
        transform 0.2s ease;
}

.topperwork-dashboard-user-menu__switch
input:checked
+
.topperwork-dashboard-user-menu__switch-slider {
    border-color:
        rgba(96, 165, 250, 0.45);

    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.95) 0%,
            rgba(139, 92, 246, 0.95) 100%
        );
}

.topperwork-dashboard-user-menu__switch
input:checked
+
.topperwork-dashboard-user-menu__switch-slider::after {
    transform:
        translateX(22px);
}


/* ==========================================================================
   HERO EDIT BUTTON
   Status dot stays on the avatar ring at bottom-right.
   ========================================================================== */

.topperwork-profile-edit-trigger--hero-side {
    top:
        50% !important;

    right:
        -10px !important;

    bottom:
        auto !important;

    transform:
        translateY(-50%) !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .topperwork-dashboard-user-menu__panel {
        right:
            -4px;

        width:
            min(320px, calc(100vw - 20px));

        padding:
            0.9rem;
    }

    .topperwork-dashboard-user-menu__presence-row {
        gap:
            12px;
    }
}