/* ==========================================================================
   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;
    }

}


/* ==========================================================================
   PHASE 3P — VISUAL TOKEN CONTRACT
   ========================================================================== */


/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.tw-card {
    background:
        var(--color-card);

    border-color:
        var(--color-card-border);

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


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

    .tw-card--interactive:hover {
        box-shadow:
            var(--shadow-card-hover);
    }

}


.tw-card--interactive:focus-visible {
    box-shadow:
        var(--shadow-card-hover),
        0 0 0 3px
        var(--color-focus-ring);
}


/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.tw-badge {
    box-shadow:
        var(--shadow-badge);
}


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


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


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


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


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


.tw-badge--neutral {
    background:
        var(--color-badge-neutral-bg);
}

/* ==========================================================================
   TOPPERWORK — GLOBAL BRAND NAME COMPONENT
   ==========================================================================

   Standard markup:

   <span class="topperwork-brand">
       Topper<span
           class="topperwork-brand__work"
           data-brand-text="Work"
       >Work</span>
   </span>

   Architecture:
   - "Topper" inherits surrounding text color.
   - Real "Work" text always remains visible as solid fallback.
   - Gradient is only a visual overlay.
   - Gradient rendering failure can never make the real text disappear.
   - Safe during font loading / font swapping / browser repaint.
   - Reusable everywhere across TopperWork.
   ========================================================================== */


/* ==========================================================================
   BRAND WRAPPER
   ========================================================================== */

.topperwork-brand {
    display: inline;

    color: inherit;

    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: 700;
    line-height: inherit;
    letter-spacing: inherit;

    white-space: nowrap;
}


/* ==========================================================================
   "WORK" — REAL TEXT / PERMANENT FALLBACK
   ========================================================================== */

.topperwork-brand__work {
    position: relative;

    display: inline-block;

    /*
     * IMPORTANT:
     *
     * The real text is NEVER transparent.
     *
     * If gradient painting fails, font is swapping,
     * browser repaint is delayed, or background-clip
     * temporarily fails, this solid text remains visible.
     */
    color:
        var(
            --brand-work-fallback,
            var(--color-primary, #3B82F6)
        );

    -webkit-text-fill-color: currentColor;

    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;

    vertical-align: baseline;

    white-space: nowrap;
}


/* ==========================================================================
   GRADIENT VISUAL OVERLAY
   ========================================================================== */

@supports (
    (-webkit-background-clip: text)
    or
    (background-clip: text)
) {

    .topperwork-brand__work::after {
        content:
            attr(data-brand-text);

        position: absolute;

        inset: 0;

        display: block;

        background-image:
            linear-gradient(
                var(
                    --brand-work-gradient-angle,
                    90deg
                ),
                var(
                    --brand-work-gradient-start,
                    var(--color-primary, #3B82F6)
                ),
                var(
                    --brand-work-gradient-end,
                    var(--color-accent, #8B5CF6)
                )
            );

        background-repeat:
            no-repeat;

        background-position:
            center;

        background-size:
            100% 100%;

        -webkit-background-clip:
            text;

        background-clip:
            text;

        -webkit-text-fill-color:
            transparent;

        color:
            transparent;

        font-family:
            inherit;

        font-size:
            inherit;

        font-style:
            inherit;

        font-weight:
            inherit;

        line-height:
            inherit;

        letter-spacing:
            inherit;

        white-space:
            nowrap;

        pointer-events:
            none;
    }
}


/* ==========================================================================
   ACCESSIBILITY — FORCED COLORS / HIGH CONTRAST
   ========================================================================== */

@media (forced-colors: active) {

    .topperwork-brand__work {
        color:
            currentColor;

        -webkit-text-fill-color:
            currentColor;
    }

    .topperwork-brand__work::after {
        content:
            none;
    }
}


/* ==========================================================================
   PRINT FALLBACK
   ========================================================================== */

@media print {

    .topperwork-brand__work {
        color:
            currentColor;

        -webkit-text-fill-color:
            currentColor;
    }

    .topperwork-brand__work::after {
        content:
            none;
    }
}