/* Loading States CSS */
/* Prevent flash of placeholder content */

/* Hide empty content initially */
.user-name:empty,
.user-role:empty,
.user-avatar:empty,
.welcome-text:empty,
.company-name:empty,
.metric-value:empty,
.metric-trend:empty,
.market-opportunity:empty,
#founded-text:empty,
#company-name:empty {
    min-height: 1.2em;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
    border-radius: 4px;
    display: inline-block;
    min-width: 60px;
}

/* User avatar when empty */
.user-avatar:empty {
    background: #e0e0e0;
    min-width: 36px;
    min-height: 36px;
    animation: none;
}

/* Welcome text specific width */
.welcome-text:empty {
    min-width: 150px;
}

/* Metric values specific styling */
.metric-value:empty {
    min-width: 80px;
    min-height: 32px;
    display: block;
}

/* Table loading states */
.inquiries-loading:empty,
.quotes-loading:empty {
    display: none;
}

/* Table cells with loading content */
td .inquiries-loading:not(:empty),
td .quotes-loading:not(:empty) {
    color: #6b7280;
    font-style: italic;
}

/* Loading animation */
@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Hide static placeholders */
.empty-state {
    opacity: 0.6;
}

/* Ensure smooth transitions when content loads */
.user-name,
.user-role,
.welcome-text,
.metric-value,
.metric-trend {
    transition: all 0.3s ease;
}