/* ==========================================================================
   TOPPERWORK — SHARED DASHBOARD PROFILE CONTENT
   Phase: 5G.3 / 5G.4
   ========================================================================== */

/* ==========================================================================
   MEDIA EDIT WRAPPER
   ========================================================================== */

.topperwork-client-profile__media-edit {
    position: relative;

    display: inline-flex;

    flex: 0 0 auto;
}


.topperwork-profile-edit-trigger--media {
    position: absolute;

    right: -4px;
    bottom: -4px;

    z-index: 2;
}


.topperwork-profile-edit-trigger--inline {
    flex: 0 0 auto;
}


/* ==========================================================================
   ACCOUNT / PROFILE STATUS
   ========================================================================== */

.topperwork-profile-status {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 30px;

    padding: 5px 11px;

    border: 1px solid var(--color-dashboard-divider);

    border-radius: 999px;

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

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

    font-size: 0.75rem;
    font-weight: 800;

    line-height: 1.2;
}


.topperwork-profile-status__dot {
    display: block;

    flex: 0 0 auto;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: currentColor;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            currentColor 16%,
            transparent
        );
}


.topperwork-profile-status--active {
    border-color: rgba(34, 197, 94, 0.42);

    background: rgba(34, 197, 94, 0.12);

    color: #4ADE80;
}


.topperwork-profile-status--pending {
    border-color: rgba(56, 189, 248, 0.42);

    background: rgba(56, 189, 248, 0.12);

    color: #7DD3FC;
}


.topperwork-profile-status--limited,
.topperwork-profile-status--restricted {
    border-color: rgba(245, 158, 11, 0.42);

    background: rgba(245, 158, 11, 0.12);

    color: #FBBF24;
}


.topperwork-profile-status--suspended {
    border-color: rgba(239, 68, 68, 0.42);

    background: rgba(239, 68, 68, 0.12);

    color: #F87171;
}


.topperwork-profile-status--closed,
.topperwork-profile-status--unavailable {
    border-color: rgba(127, 144, 168, 0.42);

    background: rgba(127, 144, 168, 0.12);

    color: var(--color-text-muted);
}


/* ==========================================================================
   EXPANDABLE PROFILE CONTENT
   ========================================================================== */

.topperwork-profile-expandable {
    min-width: 0;
}


.topperwork-profile-expandable__content {
    overflow: hidden;
}


.topperwork-profile-expandable:not(.is-expanded)
.topperwork-profile-expandable__content {
    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


.topperwork-profile-expandable--8:not(.is-expanded)
.topperwork-profile-expandable__content {
    -webkit-line-clamp: 8;
}


.topperwork-profile-expandable--4:not(.is-expanded)
.topperwork-profile-expandable__content {
    -webkit-line-clamp: 4;
}


.topperwork-profile-expandable__toggle {
    display: inline-flex;

    align-items: center;

    min-height: 34px;

    margin-top: 8px;
    padding: 0;

    border: 0;

    background: transparent;

    color: var(--color-primary);

    cursor: pointer;

    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;

    line-height: 1.3;
}


.topperwork-profile-expandable__toggle[hidden] {
    display: none !important;
}


.topperwork-profile-expandable__toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;

    border-radius: 4px;
}


@media (hover: hover) and (pointer: fine) {

    .topperwork-profile-expandable__toggle:hover {
        text-decoration: underline;
    }

}


/* ==========================================================================
   CLIENT LONG-COPY COMPATIBILITY
   ========================================================================== */

.topperwork-client-profile__company-about
.topperwork-profile-expandable__content {
    margin: 10px 0 0;

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

    font-size: 0.84rem;

    line-height: 1.75;
}


/* ==========================================================================
   CLIENT COMPANY MEDIA / FACT ACTIONS
   ========================================================================== */

.topperwork-client-profile__company-logo {
    border: 0;

    border-radius: 50%;

    box-shadow: 0 0 0 2px #FFFFFF;
}


.topperwork-client-profile__company-logo img,
.topperwork-client-profile__company-logo span {
    border-radius: 50%;
}


.topperwork-client-profile__company-logo img {
    object-fit: contain;
}


.topperwork-client-profile__fact-title {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between;

    gap: 10px;
}


.topperwork-client-profile__fact-title > span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-width: 0;
}


/* ==========================================================================
   LIGHT THEME
   ========================================================================== */

[data-theme="light"]
.topperwork-profile-status--active {
    color: #15803D;
}


[data-theme="light"]
.topperwork-profile-status--pending {
    color: #0369A1;
}


[data-theme="light"]
.topperwork-profile-status--limited,
[data-theme="light"]
.topperwork-profile-status--restricted {
    color: #B45309;
}


[data-theme="light"]
.topperwork-profile-status--suspended {
    color: #B91C1C;
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .topperwork-profile-expandable__toggle,
    .topperwork-profile-edit-trigger--media,
    .topperwork-profile-edit-trigger--inline {
        transition: none;
    }

}


/* ==========================================================================
   PROFILE WORKSPACE — SHARED TYPOGRAPHY SCALE
   Client + Freelancer only. Dashboard sidebar/topbar are intentionally
   untouched.
   ========================================================================== */

.topperwork-shared-workspace[data-shared-workspace="profile"] {
    --topperwork-profile-copy-size: 1rem;
    --topperwork-profile-copy-line-height: 1.45;
    --topperwork-profile-value-size: 0.95rem;
    --topperwork-profile-label-size: 0.78rem;
    --topperwork-profile-section-title-size: 1rem;
}


/* All expandable profile descriptions use the same readable copy scale. */
.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-profile-expandable__content,
.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-client-profile__long-copy,
.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-client-profile__company-about
.topperwork-profile-expandable__content {
    font-size:
        var(--topperwork-profile-copy-size) !important;

    line-height:
        var(--topperwork-profile-copy-line-height) !important;
}


/* Client profile hierarchy follows the 1rem / 1.45 description baseline. */
.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-client-profile__eyebrow,
.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-client-profile__card-header > div > span {
    font-size: 0.75rem;
    line-height: 1.3;
}


.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-client-profile__hero-copy h2 {
    font-size:
        clamp(
            1.5rem,
            2vw,
            1.75rem
        );

    line-height: 1.2;
}


.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-client-profile__hero-copy > p {
    font-size: 0.95rem;
    line-height: 1.45;
}


.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-client-profile__card-header h3,
.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-client-profile__company-about h4 {
    font-size:
        var(--topperwork-profile-section-title-size);

    line-height: 1.35;
}


.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-client-profile__details dt,
.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-client-profile__company-facts dt {
    font-size:
        var(--topperwork-profile-label-size);

    line-height: 1.35;
}


.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-client-profile__details dd,
.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-client-profile__company-facts dd {
    font-size:
        var(--topperwork-profile-value-size);

    line-height: 1.45;
}


.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-client-profile__company-name-wrap h4 {
    font-size:
        clamp(
            1.3rem,
            1.7vw,
            1.5rem
        );

    line-height: 1.25;
}


.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-client-profile__company-name-wrap p {
    font-size: 0.95rem;
    line-height: 1.45;
}


.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-profile-status {
    font-size: 0.875rem;
}


/* Current Freelancer foundation + future Freelancer profile sections inherit
   the same body-copy baseline without touching navigation text. */
.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-shared-profile__identity-copy > p:last-child,
.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-freelancer-profile__overview,
.topperwork-shared-workspace[data-shared-workspace="profile"]
.topperwork-freelancer-profile__description {
    font-size:
        var(--topperwork-profile-copy-size);

    line-height:
        var(--topperwork-profile-copy-line-height);
}