/* CSS for user-card component */

/* user-card.css */

.user-card {
    background: var(--color-secondary);
    border-radius: var(--border-radius-sm); /* 6px */
    width: 100%;
    height: 43px;

    gap: 12px;
}

/* Collapsible Card Styles */

/* Default styles */
.toggle-btn {
    background: none;
    border: none;
    padding: 0;
}

.arrow-icon {
    transition: transform 0.3s ease;
}

.card-content {
    display: flex; /* Content is visible by default */
}

/* Mobile devices */
@media (max-width: 720px) {
    .card-header {
        cursor: pointer;
    }
    .card-header * {
        cursor: pointer;
    }

    /* When the card is collapsed */
    .card.collapsed .card-content {
        display: none;
    }

    .card.collapsed .arrow-icon {
        transform: rotate(-90deg);
    }
}

/* Desktop devices */
@media (min-width: 721px) {
    .toggle-btn {
        display: none !important; /* Hide the arrow on desktop */
    }

    .card-content {
        display: flex !important; /* Always show content on desktop */
    }

}

/* SOLD */
.status-sold {
    color: var(--color-sold);
    background-color: var(--background-sold);
}

/* UNDER REVIEW */
.status-under-review {
    color: var(--color-under-review);
    background-color: var(--background-under-review);
}

/* APPROVED */
.status-approved {
    color: var(--color-approved);
    background-color: var(--background-approved);
}

/* DRAFT */
.status-draft {
    color: var(--color-draft);
    background-color: var(--background-draft);
}

/* REJECTED */
.status-rejected {
    color: var(--color-rejected);
    background-color: var(--background-rejected);
}

/* UNAVAILABLE */
.status-unavailable {
    color: var(--color-unavailable);
    background-color: var(--background-unavailable);
}