/*
 Component: c7-card
 Purpose: Simple, reusable card container used across Setup Wizard and admin screens.

 Markup example:
 <div class="card">
   <div class="card__icon" aria-hidden="true"><svg></svg></div>
   <h4 class="card__title">Card Title</h4>
   <p>Card content</p>
 </div>

 Notes
 - Uses design tokens: --border, --shadow, --muted
 - Keep the element order for consistent spacing
 - The link remains underlined by default for accessibility
*/

.card {
    background: var(--card-background);
    border: var(--card-border);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow-card);
    padding: var(--card-padding);
    text-align: center;
    margin-top: 0;
}
.card__title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    font-family: var(--body-font);
    color: var(--grey-12);
    margin: 0 0 12px;
}
.connection-card__title {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: var(--heading-color);
}
.card__icon {
    height: 60px;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.card__icon svg {
    max-height: 100%;
    width: auto;
}

.card--spacy {
    --card-padding: var(--spacing-base);
}

/* Connection card specific tweaks (uses generic .card base) */
.connection-card {
    --conn-card--font-size: 12px;
    font-size: var(--conn-card--font-size);
    p {
        font-size: var(--conn-card--font-size);
        padding-inline: var(--spacing-sm);
    }

    a {
        font-weight: 700;
    }
}
.connection-card__avatar-wrap {
    position: relative;
    width: 85px;
    height: 85px;
    margin: 0 auto var(--spacing-sm);

    .avatar__login-status {
        width: 100%;
        height: 100%;
        &.logged-in::after, &.not-logged-in::after {
            width: 31px;
            height: 31px;
            border: 3px solid var(--white);
        }
    }
}
.connection-card__state {
    font-weight: 700;
    margin-top: var(--spacing-3xs);
}
.connection-card__children {
    --conn-card--font-size: 14px;
}
.connection-card__desc {
    color: var(--grey-66);
}

/** TODO: Move to a separate file */
/* Style for the pop-up overlay using <details> */
details.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

details.popup-overlay[open] {
    display: flex;
    visibility: visible;
    opacity: 1;
}

details.popup-overlay summary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: default;
    list-style: none;
}

details.popup-overlay summary::-webkit-details-marker {
    display: none;
}

/* ... existing popup-box styles ... */

.user-conn {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    .avatar__login-status {
        width: 32px;
        height: 32px;

        &.logged-in::after, &.not-logged-in::after {
            border: 1px solid var(--white);
        }

        &.not-logged-in a {
            width: 100%;
        }

        &.not-logged-in span {
            border: 1.5px solid var(--grey-66);
            background-image: url(../Assets/Person.svg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 16px 16px;
            background-color: transparent;
            display: block;
        }

        &.not-logged-in::after {
            background: var(--interaction-color);
        }
    }
}

.user-info .user-name {
    display: block;
    font-weight: 700;
    color: var(--grey-38);
    font-size: 12px;
    line-height: 16px;
}
.user-info .user-conn__state {
    display: block;
    font-size: 8px;
    font-family: var(--body-font);
    font-weight: 400;
    color: var(--grey-66);
    line-height: 16px;
}

.user-conn a.user-conn__state {
    color: var(--interaction-color);
    font-weight: 700;
    text-decoration: underline;
}

.dm-pro--top-bar > a:nth-child(2) {
    text-align: center;
}