/* Mobile card layout for document tables */
.document-list {
    width: 100%;
}

/* Desktop: Show table, hide cards */
.document-table {
    display: table;
}

.document-cards {
    display: none;
}

/* Mobile: Hide table, show cards */
@media (max-width: 768px) {
    .document-table {
        display: none;
    }
    
    .document-cards {
        display: block;
    }
    
    .document-card {
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .document-card-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #eee;
    }
    
    .document-card-title {
        font-weight: 600;
        font-size: 1.1rem;
        color: #333;
        margin: 0;
        flex: 1;
    }
    
    .document-card-type {
        font-size: 0.9rem;
        color: #666;
        margin-left: 0.5rem;
    }
    
    .document-card-body {
        margin-bottom: 0.75rem;
    }
    
    .document-card-field {
        margin-bottom: 0.5rem;
    }
    
    .document-card-label {
        font-weight: 500;
        color: #666;
        font-size: 0.85rem;
        display: block;
        margin-bottom: 0.25rem;
    }
    
    .document-card-value {
        color: #333;
        font-size: 0.95rem;
    }
    
    .document-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid #eee;
    }
    
    .document-card-actions .btn {
        flex: 1;
        min-width: 120px;
        text-align: center;
    }
    
    .document-card-actions .btn-sm {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    .document-card-actions form {
        flex: 1;
        min-width: 120px;
    }
    
    .document-card-actions form .btn {
        width: 100%;
    }
}

/* Ensure buttons look good on mobile */
@media (max-width: 480px) {
    .document-card-actions {
        flex-direction: column;
    }
    
    .document-card-actions .btn,
    .document-card-actions form {
        width: 100%;
        min-width: auto;
    }
}