/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Empty State Illustrations Styles
 * Styles for AI-generated empty state illustrations
 */

/* Empty State Container */
.empty-state-with-illustration {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl, 2rem);
    min-height: 304px;
    text-align: center;
    gap: var(--spacing-lg, 1.5rem);

/* Illustration Container */
.empty-state-illustration {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-bottom: var(--spacing-md, 1rem);
    opacity: 0.7;
    transition: opacity 0.3s ease;

.empty-state-with-illustration:hover .empty-state-illustration {
    opacity: 0.9;

.empty-state-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md, var(--radius-md));
    box-shadow: 0 4px 16px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);
    filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.1));
    object-fit: contain;

/* Content Container */
.empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    max-width: 504px;

.empty-state-title {
    font-size: var(--font-size-lg, 1.25rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, var(--color-text-primary));
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;

.empty-state-description {
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text-secondary, var(--color-text-secondary));
    margin: 0;
    line-height: 1.6;

.empty-state-action {
    margin-top: var(--spacing-md, 1rem);

/* Loading State */
.empty-state-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl, 2rem);
    min-height: 304px;
    gap: var(--spacing-md, 1rem);

.empty-state-spinner {
    width: calc(var(--spacing-2xl) * 1.25);
    height: calc(var(--spacing-2xl) * 1.25);
    border: 3px solid var(--color-border, #333);
    border-top-color: var(--color-primary, var(--color-success));
    border-radius: var(--radius-full);
    animation: emptyStateSpin 1s linear infinite;

@keyframes emptyStateSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }

.empty-state-loading-text {
    color: var(--color-text-secondary, var(--color-text-secondary));
    font-size: var(--font-size-sm, 0.875rem);
    font-style: italic;

/* Responsive */
@media (max-width: 768px) {
    .empty-state-with-illustration {
        padding: var(--spacing-md, 1rem);
        min-height: 248px;

    .empty-state-illustration {
        max-width: 304px;

    .empty-state-title {
        font-size: var(--font-size-base, 1rem);

    .empty-state-description {
        font-size: var(--font-size-sm, 0.875rem);

/* Integration with existing empty states */
.empty-state-enhanced {
    position: relative;

.empty-state-enhanced .empty-state-illustration {
    margin-bottom: var(--spacing-lg, 1.5rem);

/* Override for specific empty state types */
.empty-state-no-players .empty-state-illustration {
    max-width: 504px;

.empty-state-no-cargo .empty-state-illustration {
    max-width: 448px;

.empty-state-no-messages .empty-state-illustration {
    max-width: 352px;

}}}}}}}}}}}}}}}}}}}}}}