/* =========================================================================
   responsive-grid.css — Wave 373

   Pattern responsivo canônico para listagens. Casa com o partial
   src/Shared/global::Shared.Presentation/Views/Shared/Partials/_ResponsiveGrid.cshtml.

   Regra rígida:
     - Desktop  (>= 1025px) → tabela tradicional <table>
     - Tablet   (641-1024px) → lista de cards
     - Mobile   (<= 640px)   → lista de cards (uma coluna)

   IMPORTANTE: NÃO duplicar com .workspace-mobile-list/.workspace-mobile-card.
   Telas legacy mantêm o pattern existente; novas telas (Wave 374+) usam o
   _ResponsiveGrid partial.
   ========================================================================= */

.responsive-grid {
    display: block;
    width: 100%;
}

.responsive-grid-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-secondary, #6b7280);
}

/* Default (desktop): tabela visível, cards ocultos. */
.responsive-grid-desktop {
    display: block;
}

.responsive-grid-cards {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ===== Tablet + Mobile (<= 1024px) ====================================== */
@media (max-width: 1024px) {
    .responsive-grid-desktop {
        display: none;
    }

    .responsive-grid-cards {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .responsive-grid-card {
        background: var(--card-bg, #ffffff);
        border: 1px solid var(--card-border, #e5e7eb);
        border-radius: var(--radius-md, 0.625rem);
        padding: 1rem;
        box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .responsive-grid-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .responsive-grid-card-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary, #111827);
        margin: 0;
        line-height: 1.3;
        flex: 1 1 auto;
        min-width: 0;
        word-break: break-word;
    }

    .responsive-grid-card-status {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
    }

    .responsive-grid-card-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem 0;
        margin: 0;
    }

    .responsive-grid-card-grid > div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.375rem 0;
        border-bottom: 1px solid var(--divider, #f1f5f9);
    }

    .responsive-grid-card-grid > div:last-child {
        border-bottom: none;
    }

    .responsive-grid-card-grid dt {
        font-weight: 500;
        color: var(--text-secondary, #6b7280);
        font-size: 0.8125rem;
        text-transform: none;
        flex: 0 0 auto;
    }

    .responsive-grid-card-grid dd {
        margin: 0;
        text-align: right;
        font-size: 0.875rem;
        color: var(--text-primary, #111827);
        word-break: break-word;
    }

    .responsive-grid-card-actions {
        margin: 0;
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
        flex-wrap: wrap;
        padding-top: 0.5rem;
        border-top: 1px solid var(--divider, #f1f5f9);
    }

    .responsive-grid-card-actions .btn {
        min-height: 44px; /* touch target */
    }

    .responsive-grid-sentinel {
        list-style: none;
        height: 1px;
        margin: 0;
        padding: 0;
    }

    .responsive-grid-cards.is-loading::after {
        content: "Carregando...";
        display: block;
        text-align: center;
        padding: 0.75rem;
        color: var(--text-secondary, #6b7280);
        font-size: 0.875rem;
    }

    .responsive-grid-cards.is-done::after {
        content: "";
        display: block;
        height: 0.5rem;
    }

    .responsive-grid-cards.has-error::after {
        content: "Falha ao carregar mais itens. Recarregue a página.";
        display: block;
        text-align: center;
        padding: 0.75rem;
        color: var(--text-error, #b91c1c);
        font-size: 0.875rem;
    }
}

/* ===== Desktop (>= 1025px) ============================================== */
@media (min-width: 1025px) {
    .responsive-grid-cards {
        display: none;
    }

    .responsive-grid-desktop {
        display: block;
    }
}