/* Social — só o que é deste módulo. A base (.module-*: casca, botões, campos, cartões,
   carregamento) vem do app.css do host. Servido em /_content/Cesar.Modules.Social.Web/css/social.css. */
@layer components {
    /* ---------- barra de adicionar ---------- */
    .social-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .social-network {
        flex: 0 0 auto;
        width: 150px;
    }

    .social-handle {
        flex: 1 1 220px;
        min-width: 0;
    }

    /* ---------- células ---------- */
    .social-cell-profile,
    .social-cell-summary {
        display: table-cell;
    }

    .social-primary {
        display: block;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .social-cell-summary .social-primary {
        font-weight: 400;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .social-meta {
        display: block;
        margin-top: 2px;
        font-size: 0.82rem;
        color: var(--text-muted, #6b7280);
    }

    .social-tag-unreadable {
        color: var(--danger, #b91c1c);
        border-color: currentColor;
    }

    .social-col-actions {
        width: 44px;
        text-align: right;
    }

    /* ---------- responsivo: a tabela nunca rola na horizontal ---------- */
    @media (max-width: 720px) {
        .social-col-hide-sm {
            display: none;
        }

        .social-network {
            width: 130px;
        }
    }
}