/**
 * DetailView Responsive CSS
 *
 * Hide desktop/mobile versions based on screen size
 */

/* Default: Show desktop version, hide mobile version */
.detail-view-desktop {
    display: table;
}

.detail-view-mobile {
    display: none;
}

/* Mobile screens (< 768px): Hide desktop, show mobile */
@media (max-width: 767px) {
    .detail-view-desktop {
        display: none;
    }

    .detail-view-mobile {
        display: block;
    }

    .detail-view-mobile .mobile-row {
        padding: 0.75rem 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .detail-view-mobile .mobile-row:last-child {
        border-bottom: none;
    }

    .detail-view-mobile .mobile-label {
        font-weight: 600;
        color: #374151;
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }

    .detail-view-mobile .mobile-value {
        color: #6b7280;
        font-size: 0.875rem;
    }
}

/* Desktop: 2-column layout for detail-view-columns-2 */
@media (min-width: 768px) {
    table.detail-view-desktop.detail-view-columns-2 {
        width: 100%;
        border-collapse: collapse;
    }

    table.detail-view-desktop.detail-view-columns-2 tbody {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    table.detail-view-desktop.detail-view-columns-2 tr {
        display: flex;
        flex-direction: column;
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        padding: 0.75rem;
    }

    table.detail-view-desktop.detail-view-columns-2 th,
    table.detail-view-desktop.detail-view-columns-2 td {
        border: none;
        padding: 0.25rem 0;
    }

    table.detail-view-desktop.detail-view-columns-2 th {
        font-weight: 600;
        color: #374151;
        font-size: 0.875rem;
    }

    table.detail-view-desktop.detail-view-columns-2 td {
        color: #6b7280;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
}