/* ==========================================================================
   TOPPERWORK - GLOBAL UI COMPONENTS
   ==========================================================================
   Phase: 1.37
   Purpose:
   - Reusable cards
   - Status indicators
   - Inline alerts
   - Badges
   - Empty states
   - Consistent component foundation
   - Mobile-first behavior
   - Accessibility support
   - WebView compatibility
   ========================================================================== */


/* ==========================================================================
   1. CARD FOUNDATION
   ========================================================================== */

.tw-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    background: var(--color-surface);

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

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.tw-card__header {
    min-width: 0;

    padding:
        var(--spacing-lg)
        var(--spacing-lg)
        var(--spacing-md);

    border-bottom: 1px solid var(--color-border);
}


.tw-card__body {
    min-width: 0;

    padding: var(--spacing-lg);
}


.tw-card__footer {
    min-width: 0;

    padding:
        var(--spacing-md)
        var(--spacing-lg)
        var(--spacing-lg);

    border-top: 1px solid var(--color-border);
}


/* ==========================================================================
   2. INTERACTIVE CARD
   ========================================================================== */

.tw-card--interactive {
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}


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

    .tw-card--interactive:hover {
        border-color: var(--color-primary);

        box-shadow: var(--shadow-md);

        transform: translateY(-2px);
    }

}


.tw-card--interactive:focus {
    outline: none;
}


.tw-card--interactive:focus-visible {
    border-color: var(--color-primary);

    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;

    box-shadow:
        var(--shadow-md),
        0 0 0 3px var(--color-focus-ring);
}


/* ==========================================================================
   3. INLINE ALERT FOUNDATION
   ========================================================================== */

.tw-alert {
    display: flex;
    align-items: flex-start;

    gap: var(--spacing-sm);

    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding: var(--spacing-md);

    border: 1px solid transparent;

    border-radius: var(--radius-md);

    font-size: var(--font-size-sm);

    line-height: var(--line-height-normal);

    overflow-wrap: break-word;
}


.tw-alert__icon {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    margin-top: 1px;
}


.tw-alert__content {
    flex: 1 1 auto;

    min-width: 0;
}


.tw-alert__title {
    margin: 0;

    font-weight: var(--font-weight-semibold);

    color: inherit;

    overflow-wrap: break-word;
}


.tw-alert__message {
    margin-top: var(--spacing-xs);

    color: inherit;

    overflow-wrap: break-word;
}


/* ==========================================================================
   4. ALERT VARIANTS
   ========================================================================== */

.tw-alert--success {
    color: var(--color-success);

    background: var(--color-success-soft);

    border-color: var(--color-success);
}


.tw-alert--danger {
    color: var(--color-danger);

    background: var(--color-danger-soft);

    border-color: var(--color-danger);
}


.tw-alert--warning {
    color: var(--color-warning);

    background: var(--color-warning-soft);

    border-color: var(--color-warning);
}


.tw-alert--info {
    color: var(--color-info);

    background: var(--color-info-soft);

    border-color: var(--color-info);
}


/* ==========================================================================
   5. BADGE FOUNDATION
   ========================================================================== */

.tw-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 24px;

    max-width: 100%;

    padding:
        var(--badge-padding-y)
        var(--badge-padding-x);

    border-radius: var(--badge-radius);

    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ==========================================================================
   6. BADGE VARIANTS
   ========================================================================== */

.tw-badge--primary {
    color: var(--color-primary);

    background: var(--color-primary-soft);
}


.tw-badge--success {
    color: var(--color-success);

    background: var(--color-success-soft);
}


.tw-badge--danger {
    color: var(--color-danger);

    background: var(--color-danger-soft);
}


.tw-badge--warning {
    color: var(--color-warning);

    background: var(--color-warning-soft);
}


.tw-badge--info {
    color: var(--color-info);

    background: var(--color-info-soft);
}


.tw-badge--neutral {
    color: var(--color-text-secondary);

    background: var(--color-surface-muted);
}


/* ==========================================================================
   7. STATUS INDICATOR
   ========================================================================== */

.tw-status {
    display: inline-flex;
    align-items: center;

    gap: var(--spacing-xs);

    max-width: 100%;

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);

    line-height: 1.2;

    overflow-wrap: break-word;
}


.tw-status__dot {
    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: currentColor;
}


.tw-status--success {
    color: var(--color-success);
}


.tw-status--danger {
    color: var(--color-danger);
}


.tw-status--warning {
    color: var(--color-warning);
}


.tw-status--info {
    color: var(--color-info);
}


.tw-status--neutral {
    color: var(--color-text-secondary);
}


/* ==========================================================================
   8. EMPTY STATE
   ========================================================================== */

.tw-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding:
        var(--spacing-xl)
        var(--spacing-lg);

    text-align: center;
}


.tw-empty-state__icon {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    margin-bottom: var(--spacing-md);

    border-radius: 50%;

    background: var(--color-surface-muted);

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

    font-size: var(--font-size-xl);
}


.tw-empty-state__title {
    margin: 0;

    max-width: 100%;

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

    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);

    line-height: var(--line-height-tight);

    overflow-wrap: break-word;
}


.tw-empty-state__message {
    max-width: 480px;

    margin-top: var(--spacing-sm);

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

    font-size: var(--font-size-sm);

    line-height: var(--line-height-normal);

    overflow-wrap: break-word;
}


.tw-empty-state__actions {
    display: flex;
    flex-direction: column;

    gap: var(--spacing-sm);

    width: 100%;
    min-width: 0;

    margin-top: var(--spacing-lg);
}


.tw-empty-state__actions .btn {
    width: 100%;
    max-width: 100%;
}


/* ==========================================================================
   9. TABLET AND ABOVE
   ========================================================================== */

@media (min-width: 641px) {

    .tw-empty-state__actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;

        width: auto;
    }


    .tw-empty-state__actions .btn {
        width: auto;
    }

}


/* ==========================================================================
   10. REDUCED MOTION
   ========================================================================== */

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

    .tw-card--interactive {
        transition: none;
    }


    .tw-card--interactive:hover {
        transform: none;
    }

}